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

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
NEXT_PUBLIC_BASE_PATH=/talas5 NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.299 NEXT_PUBLIC_APP_VERSION=1.1.300

View File

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.299 NEXT_PUBLIC_APP_VERSION=1.1.300

View File

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

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.299", "version": "1.1.300",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.299", "version": "1.1.300",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.299", "version": "1.1.300",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",