Add drift_matrix_visualization/README.md

drift_matrix_visualization/README.md

@@ -0,0 +1,64 @@
+# 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