# 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