Results Visualization – N=40 Run Set Analysis

Überblick

Diese Webanwendung dient zur Visualisierung der Analyseergebnisse aus 40 Run-Sets, die das Retry-Verhalten und die Stabilität von Schrittfolgen klassifizieren. Über eine interaktive Benutzeroberfläche können Metriken, Korrelationen und Stabilitätsverteilungen für verschiedene Runs dargestellt und verglichen werden.

Ziel

Die Anwendung soll Forschenden und Entwickelnden ermöglichen, die Stabilität und Wiederholbarkeit unterschiedlicher Konfigurationen übersichtlich zu untersuchen:

Erkennen von Stabilitätstrends über Runs hinweg
Vergleich zwischen pinned und unpinned Läufen
Analyse der Korrelation zwischen Laufparametern und Ergebnissen

Hauptfunktionen

Interaktive Diagramme mit dynamischen Filtern
Abruf der Analysedaten über die API /api/results
Darstellung von Stabilitäts- und Korrelationsmetriken
Vergleich von pinned/unpinned Runs
Responsives Layout für Desktop und Mobile
Kontextsensitive Tooltips mit farbcodierter Kategorisierung

Architekturüberblick

Die Anwendung ist als modulare Web-UI aufgebaut:

Frontend-Logik: JavaScript-Module (Chart-Rendering, Filterlogik, Eventsteuerung)
Datenquelle: API-Endpunkt /api/results (liefert JSON-Daten)
Darstellung: Chart.js-basierte Visualisierungskomponenten

Datenfluss

Beim Laden ruft das Frontend die Daten von /api/results ab.
Die Daten werden nach Metriken wie step_stability_score und correlation_coefficient verarbeitet.
Die Diagramme werden auf Basis der Nutzerfilter dynamisch aktualisiert.
Änderungen an Filtern oder Parametern lösen sofort einen Re-Render der Visualisierungen aus.

API-Schnittstelle

Endpunkt: /api/results

Methode: GET
Beschreibung: Liefert alle Run-Ergebnisse zur Analyse und Visualisierung.

Erwartete Antwort:

[
  {
    "run_id": "string",
    "step_stability_score": number,
    "correlation_coefficient": number
  }
]

Verwendung

NodeJS-Server oder ein kompatibles Backend starten, das die /api/results-Route bereitstellt.
Frontend im Browser öffnen (z. B. index.html).
Ergebnisse werden automatisch geladen und in Diagrammen dargestellt.
Filter (z. B. pinned/unpinned) anpassen, um Teilmengen zu analysieren.

Ordnerstruktur

project-root/
│
├── js/
│   ├── api.js           # Datenabfrage von /api/results
│   ├── charts.js        # Chart-Initialisierung und Updates
│   ├── filters.js       # Filterlogik & UI-Events
│
├── css/
│   ├── styles.css       # Layout & Responsiveness
│
├── index.html           # Einstiegspunkt der Web-App
└── README.md            # Diese Datei

Technische Hinweise

Verwendet Chart.js für Diagramm-Darstellungen.
Läuft vollständig clientseitig; die API muss separat bereitgestellt werden.
Unterstützt alle gängigen Browser mit ES6-Unterstützung.

3 KiB Raw Blame History Unescape Escape