4e396a1b10
- 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
125 lines
4.0 KiB
Markdown
125 lines
4.0 KiB
Markdown
<!-- /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 |
|
|
|
|
---
|
|
|
|
|
|
|
|
---
|
|
|
|
[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.
|