# Max-Outlier Visualisierung

## Überblick
Die **Max-Outlier-Visualisierungsoberfläche** dient zur Darstellung und Analyse von Ergebnissen aus CI-Parallelitätstests. Sie zeigt statistische Extrema (p95, p99) und Outlier-Tendenzen grafisch und tabellarisch an, um Leistungsabweichungen zwischen Testläufen zu identifizieren.

---

## Zielsetzung
- Interaktive Ansicht von Max-Outlier-Ergebnissen
- Filterung nach **Lauf-ID**, **Parallelitätsstufe** oder **Stratum**
- Visualisierung der **p95/p99-Verteilungen** und Outlier-Tendenzen
- Export als **CSV** oder **JSON**
- Automatisches Datenladen über die API `/max-outlier-results`
- Responsives Layout für Desktop und mobile Nutzung

---

## Datenfluss
1. Beim Laden der Anwendung wird automatisiert die API `/max-outlier-results` aufgerufen.
2. Der Rückgabewert ist ein **Array von Analyseobjekten** mit folgenden Feldern:
   ```json
   {
     "run_id": "string",
     "parallelism": "number",
     "stratum": "string",
     "delta_t": "number",
     "p95": "number",
     "p99": "number",
     "retry_status": "string"
   }
   ```
3. Diese Daten werden in einer **Tabelle** und einer **Chart-Komponente** dargestellt.
4. Filteroptionen und Exporte reagieren dynamisch auf Nutzerinteraktion.

---

## API-Integration
**Endpunkt:** `/max-outlier-results`

**Methode:** `GET`

**Optionale Parameter:**
- `run_id` — Filtert nach Lauf-ID
- `parallelism` — Filtert nach Parallelitätsstufe
- `stratum` — Filtert nach Stratum

**Beispiel-Antwort:**
```json
[
  {
    "run_id": "r123",
    "parallelism": 8,
    "stratum": "A",
    "delta_t": 120,
    "p95": 830,
    "p99": 1120,
    "retry_status": "stable"
  }
]
```

**Verwendung im Frontend:**
- Der Abruf erfolgt über `js/api.js` mittels **fetch()** oder **async/await**.
- Die Darstellung und Filterung werden durch modulare Komponenten koordiniert.

---

## Ordnerstruktur
```
/
├── index.html
├── css/
│   ├── base.css
│   └── responsive.css
├── js/
│   ├── app.js
│   ├── api.js
│   ├── table.js
│   ├── chart.js
│   └── export.js
└── README.md
```

---

## Nutzungsanleitung
1. Öffne `index.html` im Browser oder lokalem Entwicklungsserver.
2. Die Anwendung lädt automatisch Daten mittels `/max-outlier-results`.
3. Verwende die Filterleisten zur Eingrenzung nach Lauf-ID, Parallelität und Stratum.
4. Navigiere zwischen **Tabelle** und **Diagrammansicht**.
5. Exportiere aktuelle Ansicht per Button als **CSV oder JSON**.

---

## Entwicklungshinweise
- Nutze **ES6+** Syntax und modulare JS-Struktur.
- Verwende defensive Programmierung beim Umgang mit API-Daten.
- Stelle sicher, dass Responsive Breakpoints richtig greifen.
- Keine externen Ressourcen oder Logos einbinden.

---

## Lizenz & Copyright
© 2026 Donau2Space.de