docs(gisPolylines): ✍️ README mit Datenfluss-Diagramm und Erklärung ergänzt

- Datenfluss zwischen Redux Slices, Thunks, Services und Komponenten visualisiert
- Mermaid-UML hinzugefügt zur Darstellung der Architektur
- Technischer Hintergrund für Einsteiger dokumentiert
- Hinweise zur Datenherkunft (Datenbank vs. TALAS.web WebService)
- Hilfe zur Fehlerbehebung z. B. bei fehlendem LD_Name im Tooltip
This commit is contained in:
ISA
2025-06-25 11:02:43 +02:00
parent bc331eb7b2
commit 4e396a1b10
5 changed files with 125 additions and 6 deletions

View File

@@ -1,5 +1,124 @@
<!-- /docs/components/gisPolylines/README.md -->
# 📄 Übersicht: docs/components/gisPolylines
- [PolylineContextMenu](PolylineContextMenu.md)
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.