nodeMap/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

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	Holt Linien-, Status- und Stationsdaten aus Redux und kombiniert sie
generateLineTooltipContent.js	Baut HTML für die Tooltips
PolylineContextMenu.js	Kontextmenü zur Interaktion mit Linien

---

---

Zurück zur Übersicht

---

📘 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.