Add trace_visualization/README.md

trace_visualization/README.md

@@ -0,0 +1,88 @@
+# Trace Visualization – Timekeeping Analysis
+
+## Zweck
+Dieses Frontend dient zur Visualisierung und Analyse von Zeitmessdaten, die aus BPF-Traces gewonnen werden. Ziel ist es, die Auswirkungen von **WF_MIGRATED** auf das Task-Scheduling und das Timekeeping anschaulich darzustellen. Nutzer können die Ergebnisse interaktiv filtern und grafisch untersuchen.
+
+---
+
+## Hauptfunktionen
+- Abruf der Analyseergebnisse über die API-Route `/api/get-analysis`
+- Diagramm-basierte Visualisierung von Zeitsprüngen und WF_MIGRATED-Effekten
+- Filterung nach Laufbedingungen (`Idle` oder `Last`)
+- Anzeige von Medianwerten und Varianz je Datensatz
+- Interaktive Zeitleiste zur Task-Scheduling-Darstellung
+- Statistik-Panel mit signifikanten Abweichungen
+
+---
+
+## Datenfluss
+1. Das Frontend ruft die Analyseergebnisse über `/api/get-analysis` (HTTP GET) ab.
+2. Die JSON-Daten enthalten eine Liste von Läufen (`runs[]`) mit Feldern:
+   - `type`
+   - `median_shift`
+   - `variance`
+   - `migrated_ratio`
+   - `offset_constant`
+3. Diese Daten werden durch JavaScript-Module verarbeitet und in Diagramm- sowie Tabellenkomponenten visualisiert.
+4. Bei Änderung von Filterparametern werden die Daten neu geladen und die Darstellung entsprechend aktualisiert.
+
+---
+
+## Projektstruktur
+```
+project-root/
+│
+├── js/
+│   ├── app.js          → Initialisierung und Steuerung der UI-Logik
+│   ├── api.js          → Abruf der Analyseergebnisse über /api/get-analysis
+│   ├── charts.js       → Darstellung der Zeitverläufe und WF_MIGRATED-Effekte
+│
+├── css/
+│   └── style.css       → Design und Layout
+│
+├── index.html          → Einstiegspunkt der Anwendung
+└── README.md            → Dieses Dokument
+```
+
+---
+
+## Nutzung
+1. Stelle sicher, dass der Backend-Endpunkt `/api/get-analysis` erreichbar ist.
+2. Öffne `index.html` im Browser.
+3. Verwende die Filteroptionen, um zwischen Idle- und Last-Bedingungen zu wechseln.
+4. Die Diagramme und Panels aktualisieren sich automatisch basierend auf den API-Daten.
+
+---
+
+## API-Referenz
+**Pfad:** `/api/get-analysis`  
+**Methode:** `GET`  
+**Parameter:**
+- `filter` *(optional)* → `idle` | `load`
+
+**Erwartetes Response-Format:**
+```json
+{
+  "runs": [
+    {
+      "type": "idle",
+      "median_shift": 0.0021,
+      "variance": 0.0012,
+      "migrated_ratio": 0.35,
+      "offset_constant": -0.0003
+    }
+  ]
+}
+```
+
+---
+
+## Technischer Hinweis
+- Die Diagramme werden mit **Chart.js** visualisiert.
+- Kein Tracking, keine externen Bild- oder Icon-Assets.
+- Der Code folgt einer modularen Struktur ohne globale Variablenabhängigkeiten.
+
+---
+
+## Lizenz und Copyright
+© 2025 Donau2Space.de