Add visualization_ui/README.md

visualization_ui/README.md

@@ -0,0 +1,76 @@
+# Visualization UI – Max-only Alert Analysis
+
+## Ziel der Anwendung
+Diese Weboberfläche dient zur **Visualisierung und Analyse von Max-only Alert Daten** sowie der dazugehörigen **Outlier-Berichte**. Ziel ist es, den Zustand und die Metriken von Alert-Daten (insbesondere Latenz und Retry-bezogene Werte) interaktiv und verständlich darzustellen.
+
+---
+
+## Hauptfunktionen
+- Interaktive Darstellung der Max-only Alert Daten (Tabellen- oder Chart-basiert)
+- Visualisierung der Outlier-Analyse mit Fokus auf **Latenz**, **Retry-Verhalten** und **Bandbreitenindikatoren**
+- **API-Integration** zum Abruf der Datenquellen:
+  - `/alert-data` – liefert Alerts
+  - `/outlier-report` – liefert Ausreißeranalysen
+- Filterung und Auswahlmöglichkeiten (z. B. nach Run-ID oder Zeitintervall)
+- **Responsive Benutzeroberfläche** mit Lade- und Statusindikatoren
+- **Manuelle Aktualisierung** der Daten per Refresh oder Benutzerinteraktion
+
+---
+
+## Datenfluss
+1. Beim Laden des Frontends werden per `fetch` die API-Endpunkte `/alert-data` und `/outlier-report` abgefragt.
+2. Die JSON-Antworten werden im JS-Datenmodul verarbeitet und für die Darstellung normalisiert.
+3. Die UI-Komponenten (z. B. Tabellen oder Diagramme) werden basierend auf diesen Daten aktualisiert.
+4. Nutzerinteraktionen (Filter, Reload) führen zu neuen API-Requests und visuellen Updates.
+
+### Vereinfachte Ablaufübersicht
+```
+[Browser/Frontend]
+   ↓ fetch GET /alert-data
+[Backend liefert Alert-Daten-Array]
+   ↓ Datenaufbereitung (JS)
+   ↓ UI-Aktualisierung (Alerts)
+
+[Browser/Frontend]
+   ↓ fetch GET /outlier-report
+[Backend liefert Analyse-Datenobjekt]
+   ↓ Visualisierung (z. B. Chart)
+```
+
+---
+
+## API-Integration
+| Endpoint | Methode | Beschreibung | Erwartete Antwort |
+|-----------|----------|---------------|-------------------|
+| `/alert-data` | GET | Liefert Max-only Alert-Daten zur Analyse. | Array von Alert-Objekten mit Feldern wie `corr_id`, `stratum`, `expires_at_dist_hours`, `retry_total_overhead_ms` |
+| `/outlier-report` | GET | Statistische Kennwerte und Bandbreiten zum Outlier-Verhalten. | JSON-Objekt mit Kennwerten (`p95`, `p99`, `retry_overheads`) |
+
+---
+
+## Verzeichnisstruktur
+```
+visualization_ui/
+├── index.html               # Einstiegspunkt des Frontends
+├── js/
+│   ├── app.js              # Initialisierung und Datensteuerung
+│   ├── api.js              # Fetch-Aufrufe zu /alert-data und /outlier-report
+│   ├── ui-renderer.js      # Generiert DOM-Elemente für Tabelle und Charts
+├── css/
+│   ├── styles.css          # Basis-Layout und Komponenten-Styling
+│   └── responsive.css      # Media Queries für mobile Anzeigen
+├── README.md               # (diese Datei)
+└── package.json            # (optional, falls Build-Tools genutzt werden)
+```
+
+---
+
+## Entwicklungs- und Architekturhinweise
+- ES6+ JavaScript mit modularer Struktur (`import`/`export`)
+- Mobile-first Design und Barrierefreiheit (ARIA-Attribute, klare Kontraste)
+- API-Kommunikation ausschließlich per `fetch` (keine externen Libraries notwendig)
+- Keine grafischen oder extern gehosteten Assets – Darstellung nur über HTML/CSS/JS
+
+---
+
+## Copyright
+© 2026 Donau2Space.de