♻️ refactor code

aodn · Feb 27, 2025 · cb272b7 · cb272b7
1 parent 082d5c4
commit cb272b7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 71 deletions.
diff --git a/src/components/map/mapbox/component/CardPopup.tsx b/src/components/map/mapbox/component/CardPopup.tsx
@@ -32,27 +32,19 @@ import { detailPageDefault } from "../../../common/constants";
 interface CardPopupProps {
   layerId: string;
   tabNavigation?: TabNavigation;
-  uniqueId?: string;
-  lazyloadMap?: boolean;
 }
 
+const mapContainerId = "card-popup-map-container";
+
 const CardPopup: React.FC<CardPopupProps> = ({
   layerId,
   tabNavigation = () => {},
-  uniqueId = "",
-  lazyloadMap = false,
 }) => {
   const { map } = useContext(MapContext);
   const dispatch = useAppDispatch();
   const { isUnderLaptop, isTablet, isMobile } = useBreakpoint();
   const panel = useRef<HTMLDivElement>(null);
   const [content, setContent] = useState<OGCCollection>(new OGCCollection());
-  const [mapInitialized, setMapInitialized] = useState(false);
-
-  const panelId = uniqueId ? `card-popup-${uniqueId}` : "card-popup";
-  const mapContainerId = uniqueId
-    ? `map-container-${uniqueId}`
-    : "card-popup-map";
 
   const onLinks = useCallback(
     (collection: OGCCollection) =>
@@ -91,15 +83,8 @@ const CardPopup: React.FC<CardPopupProps> = ({
     [dispatch]
   );
 
-  // Initialize map function - for lazyload map only
-  const initializeMap = useCallback(() => {
-    if (isTablet && !mapInitialized && lazyloadMap) {
-      setMapInitialized(true);
-    }
-  }, [isTablet, mapInitialized, lazyloadMap]);
-
   useEffect(() => {
-    const onMouseClick = (ev: MapLayerMouseEvent): void => {
+    const onMouseClick = (ev: any): void => {
       if (ev.target && map && panel && panel.current) {
         // Check if the layer exists before querying
         const style = map.getStyle();
@@ -114,7 +99,7 @@ const CardPopup: React.FC<CardPopupProps> = ({
         // Query features from the specified layer at the clicked point
         const features = point
           ? map.queryRenderedFeatures(point, {
-              layers: [layerId],
+              layers: [ev.targetLayerId ?? layerId],
             })
           : [];
 
@@ -128,10 +113,6 @@ const CardPopup: React.FC<CardPopupProps> = ({
               collection && setContent(collection);
             });
             panel.current.style.visibility = "visible";
-            // Initialize map when content is loaded and popup becomes visible if it's lazyload map
-            if (lazyloadMap) {
-              initializeMap();
-            }
           } else {
             panel.current.style.visibility = "hidden";
           }
@@ -174,27 +155,11 @@ const CardPopup: React.FC<CardPopupProps> = ({
       map?.off("moveend", onMouseMoved);
       map?.off("sourcedata", onSourceChange);
     };
-  }, [
-    getCollectionData,
-    initializeMap,
-    lazyloadMap,
-    isUnderLaptop,
-    layerId,
-    map,
-  ]);
-
-  useEffect(() => {
-    // If it's lazyload map, reset initialization when unmounted
-    if (lazyloadMap) {
-      return () => {
-        setMapInitialized(false);
-      };
-    }
-  }, [lazyloadMap]);
+  }, [getCollectionData, isUnderLaptop, layerId, map]);
 
   return (
     <div
-      id={panelId}
+      id={"card-popup"}
       ref={panel}
       style={{
         display: "flex",
@@ -227,17 +192,15 @@ const CardPopup: React.FC<CardPopupProps> = ({
             id={mapContainerId}
             sx={{ position: "relative", height: "100%", width: "250px" }}
           >
-            {(!lazyloadMap || (lazyloadMap && mapInitialized)) && (
-              <Map
-                panelId={mapContainerId}
-                zoom={isUnderLaptop ? 1 : 2}
-                animate={false}
-              >
-                <Layers>
-                  <GeojsonLayer collection={content} />
-                </Layers>
-              </Map>
-            )}
+            <Map
+              panelId={mapContainerId}
+              zoom={isUnderLaptop ? 1 : 2}
+              animate={false}
+            >
+              <Layers>
+                <GeojsonLayer collection={content} />
+              </Layers>
+            </Map>
           </CardMedia>
         )}
         <CardContent

diff --git a/src/components/map/mapbox/component/SpatialExtents.tsx b/src/components/map/mapbox/component/SpatialExtents.tsx
@@ -162,12 +162,19 @@ const SpatialExtents: FC<SpatialExtentsProps> = ({
             ...new Set(ev.features.map((feature) => feature.properties?.uuid)),
           ];
           onDatasetSelected(uuids);
+          const customEvent = {
+            ...ev,
+            targetLayerId: layerId,
+          };
+          // Fire a synthetic click event with the custom event
+          // This will be captured by CardPopup's event listeners so
+          map?.fire("click", customEvent);
         } else {
           onDatasetSelected([]);
         }
       }
     },
-    [onDatasetSelected]
+    [layerId, map, onDatasetSelected]
   );
 
   const onEmptySpaceClick = useCallback(

diff --git a/src/components/map/mapbox/component/SpiderDiagram.tsx b/src/components/map/mapbox/component/SpiderDiagram.tsx
@@ -518,14 +518,6 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           tabNavigation={tabNavigation}
         />
       )}
-      {spiderifiedCluster && (
-        <CardPopup
-          layerId={getSpiderPinsLayerId(spiderifiedCluster.id)}
-          tabNavigation={tabNavigation}
-          uniqueId="spider-diagram"
-          lazyloadMap
-        />
-      )}
       {spiderifiedCluster && (
         <SpatialExtents
           layerId={getSpiderPinsLayerId(spiderifiedCluster.id)}

diff --git a/src/components/map/mapbox/layers/ClusterLayer.tsx b/src/components/map/mapbox/layers/ClusterLayer.tsx
@@ -289,11 +289,7 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
   return (
     <>
       <MapPopup layerId={unclusterPointLayer} tabNavigation={tabNavigation} />
-      <CardPopup
-        layerId={unclusterPointLayer}
-        tabNavigation={tabNavigation}
-        uniqueId="cluster-layer"
-      />
+      <CardPopup layerId={unclusterPointLayer} tabNavigation={tabNavigation} />
       <SpatialExtents
         layerId={unclusterPointLayer}
         selectedUuids={selectedUuids}

diff --git a/src/components/map/mapbox/layers/HeatmapLayer.tsx b/src/components/map/mapbox/layers/HeatmapLayer.tsx
@@ -331,11 +331,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
   return (
     <>
       <MapPopup layerId={unClusterPointLayer} tabNavigation={tabNavigation} />
-      <CardPopup
-        layerId={unClusterPointLayer}
-        tabNavigation={tabNavigation}
-        uniqueId="heatmap-layer"
-      />
+      <CardPopup layerId={unClusterPointLayer} tabNavigation={tabNavigation} />
       <SpatialExtents
         layerId={unClusterPointLayer}
         selectedUuids={selectedUuids}