drift_analysis/drift_matrix_visualization

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:

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

Verzeichnisstruktur

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