diff --git a/drift_matrix_visualization/README.md b/drift_matrix_visualization/README.md new file mode 100644 index 0000000..a88825f --- /dev/null +++ b/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=` 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