Metrics Visualization App

Überblick

Die Metrics Visualization App ist ein webbasiertes Dashboard zur Analyse und Visualisierung von Exit-Metriken über verschiedene Runs hinweg. Sie unterstützt technische Nutzer und Analysten bei der Identifikation von Trends, Anomalien und Qualitätsabweichungen in den Messdaten.

Ziel der Anwendung

Das Frontend dient der vergleichenden Betrachtung von Laufmetriken, um Fragestellungen wie folgende zu beantworten:

Wie entwickeln sich Warn- und Fehlerraten über Runs hinweg?
Gibt es auffällige Veränderungen in der Delta‑t‑Verteilung (Δt < 0)?
Weichen Runs mit gleichem setup_fingerprint signifikant voneinander ab?

Hauptfunktionen

🔹 Visualisierung von Exit‑Metriken: Darstellung von warn_rate, unknown_rate und Δt < 0 pro Run
🔹 Run‑Vergleich: Gegenüberstellung von Runs mit identischem setup_fingerprint
🔹 Filterfunktion: Eingrenzung auf pinned oder unpinned Runs
🔹 Interaktive UI: Dynamische Tabellen und Diagramme, aktualisiert über Benutzerfilter
🔹 API‑Integration: Live‑Abruf der Metrikdaten über /metrics
🔹 Responsive Layout: Optimiert für Desktop und Tablet

Datenfluss

Fetch: Die Anwendung ruft über die Route /metrics (GET) aktuelle Metrikdaten ab.
Processing: Die Daten werden im Browser aufbereitet und zwischengespeichert.
Rendering: Diagramme und Tabellen werden auf Grundlage der Metrikdaten gerendert.
Interaction: Änderungen des Filters führen zu neuem API‑Abruf und aktualisierter Anzeige.

API-Nutzung

Route: /metrics

Methode: GET

Optionale Parameter:

filter=pinned|unpinned
setup_fingerprint=<id>

Beispielhafte Response:

[
  {
    "run_id": "run_001",
    "setup_fingerprint": "fp_a1b2c3",
    "warn_rate": 0.12,
    "unknown_rate": 0.03,
    "delta_t_stats": { "lt_zero": 5 },
    "timestamp": "2026-02-12T09:21:00Z"
  }
]

Verwendung in JS‑Dateien:

js/api.js: Schnittstelle zum Abruf der Metrikdaten
js/app.js: Initialisierung, State‑Management und Logik
js/ui.js: DOM‑Update und Interaktionen

Struktur

metrics_visualization/
├─ index.html          # Einstiegspunkt des Dashboards
├─ css/
│  └─ style.css        # Basislayout und Komponentenstile
├─ js/
│  ├─ app.js           # App-Initialisierung und State-Verwaltung
│  ├─ api.js           # API-Aufrufe (GET /metrics)
│  └─ ui.js            # UI-Komponenten und DOM-Manipulationen
└─ README.md           # Dokumentation

Deployment-Hinweise

Build & Serve: Einfaches statisches Hosting reicht (z.B. Nginx oder Node.js Static Server).
API‑Endpunkt: Der Server muss die Route /metrics bereitstellen; CORS muss für das Frontend erlaubt sein.
Caching: Optionale Nutzung clientseitigen Caches für wiederholte Abfragen.
Responsiveness: Test auf 768 px und 1024 px Viewports empfohlen.

3 KiB Raw Blame History Unescape Escape