# Results Visualization – N=40 Run Set Analysis

## Überblick
Diese Webanwendung dient zur **Visualisierung der Analyseergebnisse** aus 40 Run-Sets, die das **Retry-Verhalten** und die **Stabilität von Schrittfolgen** klassifizieren. Über eine interaktive Benutzeroberfläche können Metriken, Korrelationen und Stabilitätsverteilungen für verschiedene Runs dargestellt und verglichen werden.

## Ziel
Die Anwendung soll Forschenden und Entwickelnden ermöglichen, die Stabilität und Wiederholbarkeit unterschiedlicher Konfigurationen übersichtlich zu untersuchen:
- Erkennen von Stabilitätstrends über Runs hinweg
- Vergleich zwischen *pinned* und *unpinned* Läufen
- Analyse der Korrelation zwischen Laufparametern und Ergebnissen

## Hauptfunktionen
- **Interaktive Diagramme** mit dynamischen Filtern
- **Abruf der Analysedaten** über die API `/api/results`
- **Darstellung von Stabilitäts- und Korrelationsmetriken**
- **Vergleich von pinned/unpinned Runs**
- **Responsives Layout** für Desktop und Mobile
- **Kontextsensitive Tooltips** mit farbcodierter Kategorisierung

## Architekturüberblick
Die Anwendung ist als modulare Web-UI aufgebaut:
- **Frontend-Logik:** JavaScript-Module (Chart-Rendering, Filterlogik, Eventsteuerung)
- **Datenquelle:** API-Endpunkt `/api/results` (liefert JSON-Daten)
- **Darstellung:** Chart.js-basierte Visualisierungskomponenten

### Datenfluss
1. Beim Laden ruft das Frontend die Daten von `/api/results` ab.
2. Die Daten werden nach Metriken wie `step_stability_score` und `correlation_coefficient` verarbeitet.
3. Die Diagramme werden auf Basis der Nutzerfilter dynamisch aktualisiert.
4. Änderungen an Filtern oder Parametern lösen sofort einen Re-Render der Visualisierungen aus.

## API-Schnittstelle
**Endpunkt:** `/api/results`
- **Methode:** `GET`
- **Beschreibung:** Liefert alle Run-Ergebnisse zur Analyse und Visualisierung.
- **Erwartete Antwort:**
  ```json
  [
    {
      "run_id": "string",
      "step_stability_score": number,
      "correlation_coefficient": number
    }
  ]
  ```

## Verwendung
1. NodeJS-Server oder ein kompatibles Backend starten, das die `/api/results`-Route bereitstellt.
2. Frontend im Browser öffnen (z. B. `index.html`).
3. Ergebnisse werden automatisch geladen und in Diagrammen dargestellt.
4. Filter (z. B. pinned/unpinned) anpassen, um Teilmengen zu analysieren.

## Ordnerstruktur
```
project-root/
│
├── js/
│   ├── api.js           # Datenabfrage von /api/results
│   ├── charts.js        # Chart-Initialisierung und Updates
│   ├── filters.js       # Filterlogik & UI-Events
│
├── css/
│   ├── styles.css       # Layout & Responsiveness
│
├── index.html           # Einstiegspunkt der Web-App
└── README.md            # Diese Datei
```

## Technische Hinweise
- Verwendet **Chart.js** für Diagramm-Darstellungen.
- Läuft vollständig clientseitig; die API muss separat bereitgestellt werden.
- Unterstützt alle gängigen Browser mit ES6-Unterstützung.

## Lizenz & Copyright
© 2026 Donau2Space.de