Add results_visualization/README.md

results_visualization/README.md

@@ -0,0 +1,70 @@
+# eBPF Write Hooks Analysis – Ergebnisse Visualisierung
+
+## Ziel der Anwendung
+Diese browserbasierte Weboberfläche dient zur **Darstellung und Exploration** der Analyseergebnisse der eBPF `write_pre` und `write_post` Hooks sowie deren **Einfluss auf Read-Operationen**.
+
+Die Anwendung bietet eine interaktive Visualisierung für Entwickler und Systemanalysten, um zeitliche Zusammenhänge zwischen Schreib- und Leseereignissen zu verstehen und mögliche Optimierungspunkte zu identifizieren.
+
+## Hauptfunktionen
+- **Interaktive Timeline:** Darstellung der `write_pre` und `write_post` Ereignisse.
+- **Korrelationen:** Beziehungen zwischen Writes und Reads werden hervorgehoben.
+- **Filter & Suche:** Nach `corr_id` und Hook-Typ filterbar.
+- **Statistische Kennzahlen:** Überblick über Event-Zahlen und zeitliche Abstände.
+- **Daten laden:** Ergebnissatz wird per API vom Endpoint `/analyze_results` geladen.
+- **Responsives Layout:** Nutzt CSS-Komponenten für verschiedene Bildschirmgrößen.
+
+## Datenfluss
+1. **Laden:** Die Anwendung nutzt `GET /analyze_results`, um Analyseergebnisse zu beziehen.  
+2. **Verarbeitung:** Modul `dataProcessor.js` aggregiert und normalisiert die Daten.  
+3. **Darstellung:** Diagramme und Tabellen werden dynamisch in den DOM gerendert.  
+4. **Interaktion:** User-Filterungen oder Such-Eingaben führen zu einer Re-Render-Phase des UI.  
+
+## API Überblick
+**Endpoint:** `/analyze_results`  
+**Methode:** `GET`
+
+**Optionale Parameter:**
+- `filter=corr_id` – Filtert Ergebnisse nach korrelierter ID.
+- `type=hook` – Filtert nach Event-Typ (`write_pre`, `write_post`, `read`).
+
+**Erwartete Antwortstruktur:**
+```json
+[
+  {
+    "corr_id": "string",
+    "type": "write_pre | write_post | read",
+    "timestamp": "epoch or iso_datetime",
+    "details": { ... }
+  }
+]
+```
+
+**Zweck:**
+Dieser Endpoint liefert strukturierte eBPF-Ereignisdaten zur Visualisierung und Analyse.
+
+## Projektstruktur (Kurzüberblick)
+```
+project-root/
+├── index.html              # Hauptseite mit Einbindung der JS- und CSS-Module
+├── js/
+│   ├── app.js              # Initialisierung und Hauptlogik
+│   ├── api.js              # Fetch-Logik für /analyze_results
+│   ├── dataProcessor.js    # Datenaufbereitung und Berechnungen
+│   ├── ui/
+│   │   ├── timeline.js     # Timeline-Komponente
+│   │   ├── filters.js      # Filter- und Suchelemente
+│   │   └── stats.js        # Statistische Anzeigen
+├── css/
+│   ├── base.css            # Grundlayout, Variablen, Theme
+│   ├── components.css      # UI-Komponenten
+│   └── responsive.css      # Media Queries für mobile Anpassungen
+└── README.md               # Projektdokumentation
+```
+
+## Responsives Layout
+- **Mobile-first Design** mit intuitiven Filter-Controls.  
+- **Timeline-Darstellung passt sich** an kleine und große Viewports an.  
+- **Barrierefreiheit:** ARIA-Attribute und semantische Struktur.
+
+## Lizenz und Copyright
+© 2026 Donau2Space.de