max_outlier_analysis/max_outlier_visualization

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:

   {
     "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:

[
  {
    "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