run_timing_experiment/visualization_tool

Laufzeit-Analyse- und Visualisierungs-Tool

Ziel der Anwendung

Dieses Web-Tool dient der Analyse und Visualisierung von Laufzeitdaten unterschiedlicher Runs. Es ermöglicht eine präzisere Bewertung von Timing-Entscheidungen durch interaktive Diagramme, eine klare 2×2‑Matrix-Darstellung sowie flexible Filtermöglichkeiten.

---

Hauptfunktionen

• Visualisierung von Δt‑Verteilungen: Darstellung der zeitlichen Differenzen zwischen Runs als Histogramm oder Scatterplot.
• Analyse-Matrix (2×2): Übersichtliche Zuordnung von Fällen nach pinned / unpinned und Δt ≥ 0 / Δt < 0.
• Filter: Auswahl bestimmter Runs per policy_hash oder Run‑Nummer.
• Interaktive Charts: Darstellung von Trends und Metriken (z. B. Warn‑ und Unknown‑Rate) mit Live‑Updates.
• API‑gestützte Datenerfassung: Automatischer Abruf aggregierter Laufdaten über /api/data.
• Responsives Dashboard: Anpassungsfähiges Layout für Desktop und Mobile.
• Analyse‑Zusammenfassung: Kompakte Darstellung der wichtigsten Erkenntnisse aus dem aktuellen Datensatz.

---

Architektur & Aufbau

Die Anwendung besteht aus drei zentralen Bestandteilen:

1. HTML (Basisgerüst)

Strukturiert das Dashboard mit Komponenten wie Filter‑Bereich, Matrix‑Viewer, Chart‑Container und Analyse‑Summary.

2. CSS (Layout & Design)

Verwaltet das responsive Erscheinungsbild auf Basis eines flexiblen Grid‑Layouts. CSS‑Variablen steuern Farben, Abstände und Schrifthöhen, um Einheitlichkeit über das gesamte Dashboard sicherzustellen.

3. JavaScript (Logik & Interaktivität)

Modularisiert in folgende Dateien:

• js/api.js – Fetch‑Logik für die REST‑Route /api/data.
• js/dataLoader.js – Berechnung und Aufbereitung der Metriken aus den API‑Daten.
• js/chartRenderer.js – Visualisierung der vorbereiteten Daten in interaktiven Diagrammen.
• js/app.js – Einstiegspunkt; regelt Datenfluss, Initialisierung und Benutzerinteraktion.

---

Datenfluss & API‑Nutzung

Die Datenpipeline folgt einem klaren Ablauf:

1. Abruf: app.js ruft mit fetch die Daten von /api/data ab.
2. Verarbeitung: dataLoader bereitet die Daten auf, berechnet Kennzahlen und verteilt sie an die Visualisierungs‑Module.
3. Darstellung: chartRenderer aktualisiert dynamisch die Diagramme und Matrices im Dashboard.

API‑Route /api/data

Methode: GET

Parameter (optional):

• run
• policy_hash
• filter_pinned

Antwortstruktur: JSON‑Array von Objekten mit:

{
  "run_id": 42,
  "policy_hash": "abc123",
  "pinned_status": true,
  "delta_t": -0.12,
  "warn_rate": 0.04,
  "unknown_rate": 0.01
}

Diese Daten dienen der Erzeugung der Δt‑Verteilung und der statistischen Auswertung in der 2×2‑Matrix.

---

Nutzung & Bedienung

1. Start: Öffnen der Hauptseite im Browser.
2. Filter setzen: Auswahl nach gewünschtem Run oder Policy‑Hash.
3. Analyse starten: Die Charts und die Matrix aktualisieren sich automatisch.
4. Ergebnisse interpretieren: Dashboard‑Summary zeigt zentral aggregierte Kennzahlen.

Das Tool arbeitet vollständig client‑seitig und ruft Daten ausschließlich über die definierte API ab.

---

Responsives Verhalten

Das Dashboard verwendet ein flexibles Layout, das sich an Bildschirmbreiten anpasst:

• Mobile: vertikal gestapelte Module.
• Desktop: nebeneinanderliegende Analysebereiche mit skalierenden Diagrammen.

---

Erweiterungshinweise

• Neue Metriken können in dataLoader.js berechnet und direkt an chartRenderer übergeben werden.
• Zusätzliche Filteroptionen können im HTML‑Filterbereich ergänzt werden; die Event‑Verarbeitung erfolgt zentral über app.js.
• Weitere API‑Routen lassen sich analog zu /api/data integrieren, solange sie JSON liefern.

---

Lizenz & Copyright

© 2026 Donau2Space.de