# Drift Matrix Visualization

## Überblick
Die **Drift Matrix Visualization** ist eine interaktive Web-UI zur Analyse und Visualisierung von Drift-Mustern, Warnintensitäten und korrelierenden Systemaufruf-Tendenzen. Das Tool erleichtert das Verständnis der Systemdrift über verschiedene Runs hinweg und unterstützt die Erkennung von Anomalien und wiederkehrenden Drift-Ursachen.

## Ziel
Darstellung einer dynamischen Drift-Matrix, die Daten von einer API abruft und visuell aufbereitet. Nutzer können verschiedene Runs auswählen und deren Drift-Verhalten miteinander vergleichen.

## Hauptfunktionen
- **API-Anbindung:** Abruf der Drift-Matrix über `/drift-matrix`.
- **Interaktive Quadranten:** Darstellung der Warnintensitäten in verschiedenen Matrix-Bereichen.
- **Tooltips:** Anzeige zusätzlicher Informationen zu Warnursachen und deren Häufigkeit.
- **Run-Filterung:** Vergleichsanalyse durch Auswahl verschiedener Run-IDs.
- **Responsive Darstellung:** Optimiertes Layout für unterschiedliche Bildschirmgrößen.
- **Dynamisches Update:** Neue Matrix-Daten bei Auswahl anderer Runs.

## Datenfluss
1. **JS-Modul** ruft per Fetch API `/drift-matrix?run_id=<RUN>` auf.
2. **API-Antwort**: JSON-Array mit Objekten `{ quadrant, warn_reasons, counts }`.
3. **UI-Rendering**: Darstellung der Matrix-Zellen und visuelle Kodierung der Intensität.
4. **Interaktion**: Run-Auswahl triggert erneuten API-Call und UI-Update.

## API-Nutzung
**Route:** `/drift-matrix`

| Methode | Parameter | Beschreibung |
|----------|------------|---------------|
| GET | run_id | Abruf der Drift-Matrix-Daten für einen bestimmten Run |

**Beispielantwort:**
```json
[
  { "quadrant": "A", "warn_reasons": ["Latency Drift"], "counts": 42 },
  { "quadrant": "B", "warn_reasons": ["Load Imbalance"], "counts": 15 }
]
```

## Verzeichnisstruktur
```text
project-root/
├── index.html           # Einstiegspunkt der Web-UI
├── css/
│   └── styles.css       # Layout, Farben, Responsive Design
├── js/
│   ├── app.js           # Initialisierung der Anwendung und Eventhandling
│   ├── api.js           # API-Abruf und Datenverarbeitung
│   └── matrix.js        # Logik zur Darstellung der Drift-Matrix im DOM
└── README.md            # Projektdokumentation
```

## Nutzung
1. Projekt lokal oder auf einem Webserver bereitstellen.
2. Sicherstellen, dass die API `/drift-matrix` erreichbar ist und gültige JSON-Daten liefert.
3. Anwendung im Browser öffnen (z. B. `index.html`).
4. Über die Oberfläche eine Run-ID auswählen, um die Matrix anzuzeigen.

## Technische Hinweise
- Moderne Webstandards (ES6+, Fetch API, Responsive CSS)
- Keine Bilddateien oder externen Ressourcen
- Semantisches HTML mit ARIA-Unterstützung
- CSS-BEM-Namenskonventionen, variables Layoutsystem

## Lizenz und Copyright
© 2026 Donau2Space.de