# 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