interferenz_map_analysis/2_interference_visualization/README.md

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:

   {
     "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