64 lines
2.8 KiB
Markdown
64 lines
2.8 KiB
Markdown
# 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
|