# Interferenz-Visualisierung – Web-Frontend

## Ziel der Anwendung
Dieses Web-Frontend dient der dynamischen Visualisierung und Analyse von Interferenzmessdaten, um die Optimierung von Pool-Isolationen nachvollziehbar zu machen. Es unterstützt die Untersuchung der Zusammenhänge zwischen Messläufen und Leistungsmetriken (z. B. Tail-Latenz, Bandbreite) und stellt Veränderungen visuell dar.

## Hauptfunktionen
- **Dynamische Interferenzkurve:** Darstellung der Metrikverläufe in Echtzeit.
- **API-Datenanbindung:** Abruf von Messdaten über den Endpunkt `/visualization` (GET).
- **Filterfunktionen:** Auswahl spezifischer Runs (z. B. 31b, 32, 33, 34) und zugehöriger Metriken.
- **Visualisierung von Differenzen:** Gegenüberstellung von Tail-Latenz und Bandbreitenabweichungen.
- **Tooltip-Interaktion:** Anzeige von Detailwerten bei Maus- oder Touch-Hover.
- **Responsive Darstellung:** Automatische Anpassung der Diagrammgrößen an Desktop und Mobilgeräte.

## Datenfluss und Architektur
1. Beim Start wird die Anwendung initialisiert und ruft über die API `/visualization` die verfügbaren Messdaten ab.
2. Die Antwort enthält strukturierte JSON-Daten in der Form:
   ```json
   {
     "runs": ["31b", "32", "33", "34"],
     "metrics": ["tail", "band_width"],
     "data": [
       {"run": "31b", "tail": 17, "band_width": -3},
       {"run": "32", "tail": 19, "band_width": 2}
     ]
   }
   ```
3. Das JS-Modul verarbeitet diese Rohdaten und aktualisiert die Chart-Komponente.
4. Benutzerinteraktionen (Filterauswahl oder Hover) führen zu einer dynamischen Aktualisierung der Grafik.

## Technische Struktur
```
/project-root
├─ index.html                # Basisaufbau der Anwendung
├─ css/
│  ├─ style.css              # Layout, Farben und responsive Design-Regeln
├─ js/
│  ├─ api.js                 # Anbindung an /visualization API, Fetch-Handler
│  ├─ chart.js               # Rendering und Update der Diagramme
│  ├─ app.js                 # Einstiegspunkt, orchestriert Datenfluss und UI
├─ README.md                 # Dokumentation der Anwendung
```

## API-Verwendung
**Endpunkt:** `/visualization`

**Methode:** `GET`

**Parameter:**
- `run`: Filtert die Messdaten nach spezifischem Run.
- `metric`: Gibt an, welche Metrik dargestellt werden soll (z. B. `tail`, `band_width`).

**Zweck:** Liefert strukturierte Interferenz- und Leistungsdaten für die grafische Darstellung.

## Nutzung
1. Projekt im lokalen Webserver-Kontext starten.
2. Browser öffnen und `index.html` aufrufen.
3. Messlauf und Metrik auswählen.
4. Diagramm aktualisiert sich automatisch entsprechend der API-Daten.

## Responsiveness und Accessibility
- Darstellung ist **mobile-first** gestaltet.
- Farbkontraste und ARIA-Attribute sind beachtet.
- Die interaktive Chart-Komponente unterstützt Eingaben per Maus und Touch.

## Lizenz und Copyright
© 2026 Donau2Space.de