Add experiment_results_visualization/README.md

This commit is contained in:
Mika 2026-01-23 12:53:27 +00:00
parent 9881fce442
commit f540ca5f9b

View file

@ -0,0 +1,68 @@
# Experiment Results Visualization
## Zweck
Dieses Modul stellt ein webbasiertes Dashboard bereit, mit dem die Ergebnisse von Experiment-Runs analysiert und verglichen werden können. Besonderes Augenmerk liegt auf der Gegenüberstellung sogenannter **'pinned'** und **'unpinned'** Runs, um Performance- und Stabilitätsunterschiede sichtbar zu machen.
## Hauptfunktionen
- Visualisierung der *pinned* vs *unpinned* Resultate in interaktiven Diagrammen
- Dynamische Filterung und Auswahl einzelner Runs
- Anzeige statistischer Kennzahlen (p95, p99, Korrelationen)
- Vergleichsansicht mit wählbarem kompakten oder breitem Layout
- Automatische Aktualisierung durch regelmäßige API-Abfragen
- Responsive Darstellung für Desktop und Tablet
## Datenfluss & Architektur
1. **API-Aufruf:** Das Frontend lädt die Datensätze über den Endpunkt `/results` (GET-Anfrage).
2. **Verarbeitung:** Die empfangenen JSON-Daten enthalten Arrays für `pinned` und `unpinned` Runs.
3. **Darstellung:** JavaScript-Module analysieren die Werte, berechnen Statistiken und visualisieren diese in Diagrammen.
4. **Interaktion:** Nutzer können einzelne Runs filtern, wodurch das Dashboard und die Visualisierungen dynamisch aktualisiert werden.
## API-Integration
**Endpunkt:** `/results`
**Methode:** `GET`
**Erwartete Antwort:**
```json
{
"pinned": [ ... ],
"unpinned": [ ... ]
}
```
**Verwendung in:** `js/api.js`
**Zweck:** Lädt alle Resultate der Experiment-Runs zur Darstellung.
## Ordnerstruktur
```
experiment_results_visualization/
├── index.html # Einstiegspunkt des Dashboards
├── css/
│ ├── base.css # Grundlayout und Variablen
│ ├── components.css # Diagramm- und Tabellenstile
│ └── responsive.css # Anpassungen für verschiedene Viewports
├── js/
│ ├── api.js # Lädt Ergebnisse von der API /results
│ ├── charts.js # Darstellung von Diagrammen für pinned/unpinned Daten
│ ├── filters.js # UI-Logik für Filter und Run-Auswahl
│ └── stats.js # Berechnung von Kennzahlen (p95/p99, Korrelationen)
└── README.md # Projektdokumentation
```
## Technische Hinweise
- Die Anwendung ist vollständig clientseitig aufgebaut und nutzt native ES6-Module.
- Alle Requests an die API erfolgen asynchron (async/await, fetch).
- Keine externen Bibliotheken oder Assets erforderlich.
- Anpassung an unterschiedliche Bildschirmgrößen ist Teil des Kernlayouts.
## Copyright
© 2026 Donau2Space.de