# Frozen Runs Visualization Tool

## Zweck
Das **Frozen Runs Visualization Tool** dient der Visualisierung und Analyse von Metriken und Timing-Effekten sogenannter *Frozen Runs*. Die Anwendung zeigt statistische Kennzahlen, Bootstrap-Konfidenzintervalle und Effektgrößen über unterschiedliche Runs hinweg. Ziel ist es, Unterschiede zwischen *pinned* und *unpinned* Konfigurationen interaktiv auszuwerten.

## Hauptfunktionen
- **Visualisierung von Metriken über verschiedene Runs hinweg** – Diagramme zeigen Entwicklungen und Unterschiede.
- **Filterung nach pinned/unpinned** – Dynamische Filterung ermöglicht gezielte Analyse bestimmter Runs.
- **Bootstrap-Verteilung und Konfidenzintervalle (CI)** – Darstellung der Unsicherheit und Stabilität der Metriken.
- **Metrik-Tabelle mit Effektgrößen** – Tabellarische Übersicht der berechneten Effekte.
- **Interaktive Diagramme** – Diagramme reagieren auf Benutzerinteraktionen, Filter und Hover-Ereignisse.

## Datenfluss
1. **API-Aufruf**: Die Metrikdaten werden über die Route `/metrics` per GET-Request geladen.
2. **Verarbeitung**: Das JavaScript-Datenmodul bereitet die Daten auf und extrahiert Kennzahlen.
3. **Darstellung**: UI-Komponenten aktualisieren sich dynamisch, sobald Filter oder Datenänderungen auftreten.

> Beispiel für den Datenfluss:
> `/metrics` → `data_module.js` → `visualization_module.js` → DOM / Charts.

## API-Information
**Route**: `/metrics`  
**Methode**: `GET`  
**Parameter**: `?filter=pinned` oder `?filter=unpinned` (optional)  
**Antwortstruktur**: Array von Objekten mit den Feldern:
- `metric_name`
- `run_id`
- `pinned_flag`
- `effect_size`
- `ci_low`, `ci_high`

## Ordnerstruktur
```
/
├─ index.html
├─ css/
│  └─ styles.css
├─ js/
│  ├─ api.js
│  ├─ data_module.js
│  ├─ visualization_module.js
│  └─ app.js
└─ README.md
```

## Nutzung
1. Anwendung lokal oder auf einem Webserver bereitstellen.
2. Browser öffnen und auf `index.html` zugreifen.
3. Die Anwendung lädt die Daten von `/metrics` und zeigt die Visualisierungen an.
4. Filter und Interaktionen im UI verwenden, um Analysen anzupassen.

## Technische Hinweise
- **Keine externen grafischen Ressourcen** werden verwendet.
- **Barrierefreiheit**: Semantische HTML-Struktur und ARIA-Attribute unterstützen eine zugängliche Nutzung.
- **Responsive Design**: Mobile-first Ansatz mit variablen Layouts auf Basis von CSS-Variablen.

## Lizenz
© 2026 Donau2Space.de