<!-- /docs/components/gisPolylines/README.md -->

# 📄 Übersicht: docs/components/gisPolylines

Diese Komponente verwaltet die Darstellung und Interaktion von GIS-Polylinien in der
Leaflet-Karte.  
Sie kombiniert Statusdaten, statische Linien und Stationsdaten zu Tooltips und Farben.

---

## 🧬 Data Flow Diagram

Dieses Diagramm zeigt den **Datenfluss** zwischen den Redux-Slices, Thunks, Service-Funktionen und
den React-Komponenten,  
die für die Anzeige der **GIS-Polylinien** zuständig sind.

### 📖 Ablauf erklärt

1. **Beim Laden der Seite** ruft die Hook `useLineData` mehrere Thunks auf:
   - Diese laden Linien, Statusdaten und Stationsdaten über entsprechende Service-Funktionen.
2. Die Thunks speichern die geladenen Daten in Redux-Slices.
3. `useLineData` liest diese Redux-Daten aus und kombiniert sie:
   - Zuordnung nach `idLD` und `Modul`
4. Daraus entsteht:
   - Eine Prioritätsfarbe für die Linie
   - Ein Tooltip-HTML mit Modulname, Slot, Station (LD_Name) und Statusmeldungen.
5. Diese Daten werden weitergegeben an:
   - `generateLineTooltipContent` → für Tooltips bei Hover
   - `PolylineContextMenu` → für Kontextmenü bei Rechtsklick
   - Leaflet Polyline-Komponente → für farbige Darstellung

```mermaid
graph TD

subgraph Redux Store
    A1[gisLinesFromDatabase Slice]
    A2[gisLinesStatusFromWebservice Slice]
    A3[gisStationsStaticDistrict Slice]
end

subgraph Thunks
    T1[fetchGisLinesThunk]
    T2[fetchGisLinesStatusThunk]
    T3[fetchGisStationsStaticDistrictThunk]
end

subgraph Services
    S1[fetchGisLinesService]
    S2[fetchGisLinesStatusService]
    S3[fetchGisStationsStaticDistrictService]
end

subgraph Komponenten
    C1[useLineData Hook]
    C2[generateLineTooltipContent]
    C3[PolylineContextMenu.js]
    C4[Leaflet Polyline Rendering]
end

T1 --> S1
T2 --> S2
T3 --> S3

T1 --> A1
T2 --> A2
T3 --> A3

A1 --> C1
A2 --> C1
A3 --> C1

C1 --> C2
C2 --> C4
C1 --> C3
```

---

## 📦 Wichtige Dateien

| Datei                                                                    | Zweck                                                                |
| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
| [`useLineData.js`](tooltip/useLineData.js)                               | Holt Linien-, Status- und Stationsdaten aus Redux und kombiniert sie |
| [`generateLineTooltipContent.js`](tooltip/generateLineTooltipContent.js) | Baut HTML für die Tooltips                                           |
| [`PolylineContextMenu.js`](PolylineContextMenu.md)                       | Kontextmenü zur Interaktion mit Linien                               |

---

![GIS Polylines](../../screenshots/gisPolylines.png)

---

[Zurück zur Übersicht](../../README.md)

---

## 📘 Technischer Hintergrund für Einsteiger

Diese Komponente verbindet Daten aus **zwei unterschiedlichen Systemen**:

1. **NodeMap App (Next.js API)**  
   → liefert die **Geometrie der Linien** direkt aus der Datenbank (ohne Webservice).
2. **TALAS.web WebService**  
   → liefert **Statusinformationen und Stationsnamen** (LD_Name).

### 🔄 Ablauf im Detail

- **Liniengeometrie** (`idLD`, `idModul`, `points`) kommt über `fetchGisLinesThunk` aus der
  Datenbank.
- **Statusinformationen** (Meldungen, Farben, Modulname, Slot) kommen über
  `fetchGisLinesStatusThunk`.
- **Stationsnamen** (LD_Name) kommen über `fetchGisStationsStaticDistrictThunk`.
- Die Hook `useLineData.js` verbindet alle Infos → erzeugt Tooltip-HTML & Farblogik.
- `generateLineTooltipContent.js` erstellt den konkreten Tooltip-HTML-String.

### 🧠 Wichtig für Debugging

- **Zuordnung** erfolgt immer über `idLD` und `Modul`.
- Stationen findest du im Slice `gisStationsStaticDistrict.Points[] → LD_Name`
- Linien findest du im Slice `gisLinesFromDatabase`
- Statusinfos findest du im Slice `gisLinesStatusFromWebservice`

🛠 **Fehler wie "Station: N/A"** entstehen, wenn `idLD` im Status vorhanden ist, aber keine passende
Station in `gisStationsStaticDistrict` gefunden wurde.