enh: improve interactive pink line mapping with pending markers and showing replaced segments with reduced opacity

- Added functionality to display pending pink and memorial markers on the map.
- Updated the buildIntegratedRoute function to return removed routes for better route management.
- Improved route rendering by adding styles for removed routes in both MapPage and PinkLineMapPage components.

Author: noamjgal

src/pages/MapPage/PinkLineMapPage.tsx

@@ -35,6 +35,7 @@ const PinkLineMapPage = () => {
   const [pendingNode, setPendingNode] = useState<{ lat: number; lng: number } | null>(null);
   const [defaultLineLoaded, setDefaultLineLoaded] = useState(false);
   const busyRef = useRef(false);
+  const pendingMarkerRef = useRef<L.Marker | null>(null);
 
   // Nuke every route polyline from the map. Called before every re-render.
   const clearAllRouteLayers = (map: L.Map) => {
@@ -183,10 +184,15 @@ const PinkLineMapPage = () => {
     // Step 3: Rebuild route via buildIntegratedRoute (handles both 0 and >0 nodes)
     if (hasBase) {
       const userPoints = nodes.map((n) => [n.lat, n.lng] as [number, number]);
-      const { solid, dashed } = buildIntegratedRoute(basePaths, userPoints);
+      const { solid, dashed, removed } = buildIntegratedRoute(basePaths, userPoints);
       const solidStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.9 };
       const dashedStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.9, dashArray: "10, 10" };
+      const removedStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.6 };
 
+      for (const pts of removed) {
+        const layer = L.polyline(pts as L.LatLngExpression[], removedStyle).addTo(map);
+        routeLayersRef.current.push(layer);
+      }
       for (const pts of solid) {
         const layer = L.polyline(pts as L.LatLngExpression[], solidStyle).addTo(map);
         routeLayersRef.current.push(layer);
@@ -251,6 +257,24 @@ const PinkLineMapPage = () => {
     });
   }, [nodes, defaultLineLoaded]);
 
+  useEffect(() => {
+    if (!mapRef.current) return;
+    if (pendingMarkerRef.current) {
+      try { mapRef.current.removeLayer(pendingMarkerRef.current); } catch (_) {}
+      pendingMarkerRef.current = null;
+    }
+    if (pendingNode) {
+      pendingMarkerRef.current = L.marker([pendingNode.lat, pendingNode.lng], {
+        icon: L.divIcon({
+          className: "pink-line-node-marker",
+          html: `<div class="pink-line-node">+</div>`,
+          iconSize: [30, 30],
+          iconAnchor: [15, 15],
+        }),
+      }).addTo(mapRef.current);
+    }
+  }, [pendingNode]);
+
   const handleRemoveNode = async (nodeId: string) => {
     if (busyRef.current) return;
     busyRef.current = true;

src/pages/MapPage/PinkLineNodeForm.tsx

@@ -6,7 +6,8 @@ interface PinkLineNodeFormProps {
 }
 
 const NAME_QUESTION = "מה השם של נקודת עניין הזו?";
-const DESCRIPTION_QUESTION = "הסבר מה קרה כאן ב-7 באוקטובר ולמה הקו צריך לעבור כאן?";
+const DESCRIPTION_QUESTION =
+  "הסבר מה קרה כאן ב-7 באוקטובר ולמה הקו צריך לעבור כאן?";
 
 const PinkLineNodeForm = ({ onSubmit, onCancel }: PinkLineNodeFormProps) => {
   const [step, setStep] = useState<1 | 2>(1);

src/pages/MapPage/index.tsx

@@ -65,6 +65,8 @@ const MapPage = () => {
   const [defaultLineLoaded, setDefaultLineLoaded] = useState(false);
 
   const defaultLinePathsRef = useRef<[number, number][][]>([]);
+  const pendingPinkMarkerRef = useRef<L.Marker | null>(null);
+  const pendingMemorialMarkerRef = useRef<L.Marker | null>(null);
 
   useEffect(() => {
     activeProjectRef.current = activeProject;
@@ -184,15 +186,19 @@ const MapPage = () => {
 
     if (defaultLineLoaded && defaultLinePathsRef.current.length > 0) {
       const userPoints = pinkNodes.map((n) => [n.lat, n.lng] as [number, number]);
-      const { solid, dashed } = buildIntegratedRoute(defaultLinePathsRef.current, userPoints);
+      const { solid, dashed, removed } = buildIntegratedRoute(defaultLinePathsRef.current, userPoints);
       const solidStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.9 };
       const dashedStyle: L.PolylineOptions = {
         color: "#FF69B4",
         weight: 5,
         opacity: 0.9,
         dashArray: "10, 10",
       };
+      const removedStyle: L.PolylineOptions = { color: "#FF69B4", weight: 5, opacity: 0.6 };
 
+      for (const points of removed) {
+        routeLayersRef.current.push(L.polyline(points as L.LatLngExpression[], removedStyle).addTo(map));
+      }
       for (const points of solid) {
         routeLayersRef.current.push(L.polyline(points as L.LatLngExpression[], solidStyle).addTo(map));
       }
@@ -257,6 +263,43 @@ const MapPage = () => {
     localSites.forEach((site) => placeMemorial(site, false));
   }, [pinkNodes, centralSite, localSites, defaultLineLoaded]);
 
+  useEffect(() => {
+    if (!mapRef.current) return;
+    if (pendingPinkMarkerRef.current) {
+      try { mapRef.current.removeLayer(pendingPinkMarkerRef.current); } catch (_) {}
+      pendingPinkMarkerRef.current = null;
+    }
+    if (pendingPinkTarget) {
+      pendingPinkMarkerRef.current = L.marker([pendingPinkTarget.lat, pendingPinkTarget.lng], {
+        icon: L.divIcon({
+          className: "pink-line-node-marker",
+          html: `<div class="pink-line-node">+</div>`,
+          iconSize: [30, 30],
+          iconAnchor: [15, 15],
+        }),
+      }).addTo(mapRef.current);
+    }
+  }, [pendingPinkTarget]);
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+    if (pendingMemorialMarkerRef.current) {
+      try { mapRef.current.removeLayer(pendingMemorialMarkerRef.current); } catch (_) {}
+      pendingMemorialMarkerRef.current = null;
+    }
+    if (pendingMemorialTarget) {
+      const iconUrl = pendingMemorialTarget.type === "central" ? regionalMemorialIconUrl : localMemorialIconUrl;
+      pendingMemorialMarkerRef.current = L.marker([pendingMemorialTarget.lat, pendingMemorialTarget.lng], {
+        icon: L.icon({
+          iconUrl,
+          iconSize: [40, 40],
+          iconAnchor: [20, 20],
+          popupAnchor: [0, -20],
+        }),
+      }).addTo(mapRef.current);
+    }
+  }, [pendingMemorialTarget]);
+
   const hasPink = pinkNodes.length > 0;
   const hasMemorial = useMemo(() => Boolean(centralSite) || localSites.length > 0, [centralSite, localSites.length]);
 

src/utils/pinkLineRoute.ts

@@ -146,6 +146,7 @@ function orderPointsBetweenEndpoints(
 export interface IntegratedRoute {
   solid: LatLng[][];
   dashed: LatLng[][];
+  removed: LatLng[][];
 }
 
 export function buildIntegratedRoute(
@@ -154,13 +155,14 @@ export function buildIntegratedRoute(
 ): IntegratedRoute {
   const solid: LatLng[][] = [];
   const dashed: LatLng[][] = [];
+  const removed: LatLng[][] = [];
 
   const basePath = mergePaths(basePaths);
-  if (basePath.length === 0) return { solid, dashed };
+  if (basePath.length === 0) return { solid, dashed, removed };
 
   if (userPoints.length === 0) {
     solid.push([...basePath]);
-    return { solid, dashed };
+    return { solid, dashed, removed };
   }
 
   const prefix = buildPrefixDistances(basePath);
@@ -188,6 +190,7 @@ export function buildIntegratedRoute(
       inThisDetour.map((x) => x.point)
     );
     dashed.push([leave, ...pointsInOrder, rejoin]);
+    removed.push(basePath.slice(intr.start, intr.end + 1));
   }
 
   let lastEnd = 0;
@@ -201,5 +204,5 @@ export function buildIntegratedRoute(
     solid.push(basePath.slice(lastEnd, basePath.length));
   }
 
-  return { solid, dashed };
+  return { solid, dashed, removed };
 }