# 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