75 lines
No EOL
3 KiB
Markdown
75 lines
No EOL
3 KiB
Markdown
# 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 |