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:

Abruf: app.js ruft mit fetch die Daten von /api/data ab.
Verarbeitung: dataLoader bereitet die Daten auf, berechnet Kennzahlen und verteilt sie an die Visualisierungs‑Module.
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

Start: Öffnen der Hauptseite im Browser.
Filter setzen: Auswahl nach gewünschtem Run oder Policy‑Hash.
Analyse starten: Die Charts und die Matrix aktualisieren sich automatisch.
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.

3.8 KiB Raw Blame History Unescape Escape