exit_metrics_analysis/metrics_visualization

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

1. Fetch: Die Anwendung ruft über die Route /metrics (GET) aktuelle Metrikdaten ab.
2. Processing: Die Daten werden im Browser aufbereitet und zwischengespeichert.
3. Rendering: Diagramme und Tabellen werden auf Grundlage der Metrikdaten gerendert.
4. 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

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

---

Lizenz & Copyright

© 2026 Donau2Space.de