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

Beim Laden der Anwendung wird automatisiert die API /max-outlier-results aufgerufen.

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"
}

Diese Daten werden in einer Tabelle und einer Chart-Komponente dargestellt.
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

Öffne index.html im Browser oder lokalem Entwicklungsserver.
Die Anwendung lädt automatisch Daten mittels /max-outlier-results.
Verwende die Filterleisten zur Eingrenzung nach Lauf-ID, Parallelität und Stratum.
Navigiere zwischen Tabelle und Diagrammansicht.
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.

2.8 KiB Raw Blame History