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

API-Aufruf: Das Frontend lädt die Datensätze über den Endpunkt /results (GET-Anfrage).
Verarbeitung: Die empfangenen JSON-Daten enthalten Arrays für pinned und unpinned Runs.
Darstellung: JavaScript-Module analysieren die Werte, berechnen Statistiken und visualisieren diese in Diagrammen.
Interaktion: Nutzer können einzelne Runs filtern, wodurch das Dashboard und die Visualisierungen dynamisch aktualisiert werden.

API-Integration

Endpunkt: /results
Methode: GET
Erwartete Antwort:

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

2.5 KiB Raw Blame History