# 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