Merge pull request #319 from aodn/bugfix/6365-fix-map-bottom-popup-card

Bugfix/6365 fix map bottom popup card
aodn · Feb 27, 2025 · cd9ff0f · cd9ff0f
2 parents d4cd680 + 264b35a
commit cd9ff0f
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 21 deletions.
diff --git a/src/components/common/buttons/ResultCardButton.tsx b/src/components/common/buttons/ResultCardButton.tsx
@@ -71,7 +71,7 @@ const ResultCardButton: FC<ResultCardButtonProps> = ({
           padding={0}
           pl={padding.extraSmall}
           fontSize={config.size === "small" ? "12px" : "14px"}
-          color={config.color === "success" ? color.success.main : config.color}
+          color={config.color}
         >
           {text}
         </Typography>

diff --git a/src/components/common/hover-tip/ComplexMapHoverTip.tsx b/src/components/common/hover-tip/ComplexMapHoverTip.tsx
@@ -111,7 +111,7 @@ const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
           content={collection}
           isGridView
           onLinks={onLinks}
-          onDownload={onDownload}
+          onDownload={collection.hasSummaryFeature() ? onDownload : undefined}
           onDetail={onDetail}
         />
         <Box>

diff --git a/src/components/map/mapbox/component/CardPopup.tsx b/src/components/map/mapbox/component/CardPopup.tsx
@@ -27,15 +27,14 @@ import GeojsonLayer from "../layers/GeojsonLayer";
 import ResultCardButtonGroup from "../../../result/ResultCardButtonGroup";
 import { SEARCH_PAGE_REFERER } from "../../../../pages/search-page/constants";
 import BookmarkButton from "../../../bookmark/BookmarkButton";
-import { ResultCardButtonSize } from "../../../common/buttons/ResultCardButton";
 import { detailPageDefault } from "../../../common/constants";
 
 interface CardPopupProps {
   layerId: string;
   tabNavigation?: TabNavigation;
 }
 
-const mapContainerId = "card-popup-map";
+const mapContainerId = "card-popup-map-container";
 
 const CardPopup: React.FC<CardPopupProps> = ({
   layerId,
@@ -85,14 +84,24 @@ const CardPopup: React.FC<CardPopupProps> = ({
   );
 
   useEffect(() => {
-    const onMouseClick = (ev: MapLayerMouseEvent): void => {
+    const onMouseClick = (
+      ev: MapLayerMouseEvent & { targetLayerId: string }
+    ): void => {
       if (ev.target && map && panel && panel.current) {
+        // Check if the layer exists before querying
+        const style = map.getStyle();
+        const layerExists = style.layers?.some((layer) => layer.id === layerId);
+        if (!layerExists) {
+          panel.current.style.visibility = "hidden";
+          return;
+        }
+
         // Convert click coordinates to point for feature querying
         const point = map.project(ev.lngLat);
         // Query features from the specified layer at the clicked point
         const features = point
           ? map.queryRenderedFeatures(point, {
-              layers: [layerId],
+              layers: [ev.targetLayerId ?? layerId],
             })
           : [];
 
@@ -182,11 +191,11 @@ const CardPopup: React.FC<CardPopupProps> = ({
         {isTablet && (
           <CardMedia
             component="div"
-            id={`${mapContainerId}`}
-            sx={{ height: "100%", width: "250px" }}
+            id={mapContainerId}
+            sx={{ position: "relative", height: "100%", width: "250px" }}
           >
             <Map
-              panelId={`${mapContainerId}`}
+              panelId={mapContainerId}
               zoom={isUnderLaptop ? 1 : 2}
               animate={false}
             >
@@ -244,7 +253,11 @@ const CardPopup: React.FC<CardPopupProps> = ({
               content={content}
               isGridView
               onLinks={() => onLinks(content)}
-              onDownload={() => onDownload(content)}
+              onDownload={
+                content.hasSummaryFeature()
+                  ? () => onDownload(content)
+                  : undefined
+              }
               onDetail={() => onDetail(content)}
             />
           )}

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
@@ -13,10 +13,14 @@ import { createRoot } from "react-dom/client";
 import { GeoJSONSource, MapMouseEvent } from "mapbox-gl";
 import MapPopup, { MapPopupRef } from "./MapPopup";
 import SpatialExtents from "./SpatialExtents";
-import { LayerBasicType } from "../layers/Layers";
+import {
+  defaultMouseEnterEventHandler,
+  LayerBasicType,
+} from "../layers/Layers";
 import { TestHelper } from "../../../common/test/helper";
 import { MapDefaultConfig } from "../constants";
 import { mergeWithDefaults } from "../../../../utils/ObjectUtils";
+import CardPopup from "./CardPopup";
 
 interface SpiderifiedClusterInfo {
   id: string;
@@ -475,6 +479,12 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
     map?.on("click", clusterLayer, onClusterClick);
     map?.on("click", onEmptySpaceClick);
     map?.on("zoomend", checkZoomAndUnspiderify);
+    spiderifiedCluster &&
+      map?.on(
+        "mouseenter",
+        getSpiderPinsLayerId(spiderifiedCluster.id),
+        defaultMouseEnterEventHandler
+      );
 
     return () => {
       // Important to free up resources, and must timeout to avoid race condition
@@ -483,6 +493,12 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
       map?.off("click", clusterLayer, onClusterClick);
       map?.off("click", onEmptySpaceClick);
       map?.off("zoomend", checkZoomAndUnspiderify);
+      spiderifiedCluster &&
+        map?.off(
+          "mouseenter",
+          getSpiderPinsLayerId(spiderifiedCluster.id),
+          defaultMouseEnterEventHandler
+        );
     };
   }, [
     checkZoomAndUnspiderify,
@@ -491,6 +507,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
     onClusterClick,
     onEmptySpaceClick,
     spiderifyFromZoomLevel,
+    spiderifiedCluster,
   ]);
 
   return (

diff --git a/src/components/map/mapbox/layers/ClusterLayer.tsx b/src/components/map/mapbox/layers/ClusterLayer.tsx
@@ -212,11 +212,12 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         },
       });
 
-      // Change the cursor to a pointer for uncluster point
+      // Change the cursor to a pointer for cluster circle/uncluster point
       map?.on("mouseenter", clusterLayer, defaultMouseEnterEventHandler);
-
-      // Change the cursor back to default when it leaves the unclustered points
+      map?.on("mouseenter", unclusterPointLayer, defaultMouseEnterEventHandler);
+      // Change the cursor back to default when it leaves the cluster circle/unclustered points
       map?.on("mouseleave", clusterLayer, defaultMouseLeaveEventHandler);
+      map?.on("mouseleave", unclusterPointLayer, defaultMouseLeaveEventHandler);
     };
 
     map?.once("load", createLayers);
@@ -227,8 +228,18 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
 
     return () => {
       map?.off("mouseenter", clusterLayer, defaultMouseEnterEventHandler);
-      map?.off("mouseleave", clusterLayer, defaultMouseLeaveEventHandler);
+      map?.off(
+        "mouseenter",
+        unclusterPointLayer,
+        defaultMouseEnterEventHandler
+      );
 
+      map?.off("mouseleave", clusterLayer, defaultMouseLeaveEventHandler);
+      map?.off(
+        "mouseleave",
+        unclusterPointLayer,
+        defaultMouseLeaveEventHandler
+      );
       // Clean up resource when you click on the next spatial extents, map is
       // still working in this page.
       try {

diff --git a/src/components/map/mapbox/layers/HeatmapLayer.tsx b/src/components/map/mapbox/layers/HeatmapLayer.tsx
@@ -23,6 +23,7 @@ import { FeatureCollection, Point } from "geojson";
 import { MapDefaultConfig } from "../constants";
 import { generateFeatureCollectionFrom } from "../../../../utils/GeoJsonUtils";
 import { mergeWithDefaults } from "../../../../utils/ObjectUtils";
+import CardPopup from "../component/CardPopup";
 
 interface IHeatmapLayer {
   maxZoom: number;
@@ -330,6 +331,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
   return (
     <>
       <MapPopup layerId={unClusterPointLayer} tabNavigation={tabNavigation} />
+      <CardPopup layerId={unClusterPointLayer} tabNavigation={tabNavigation} />
       <SpatialExtents
         layerId={unClusterPointLayer}
         selectedUuids={selectedUuids}

diff --git a/src/components/result/ResultCardButtonGroup.tsx b/src/components/result/ResultCardButtonGroup.tsx
@@ -64,7 +64,10 @@ const renderStatusButton = (
       <ResultCardButton
         startIcon={DoubleArrowIcon}
         text={"On Going"}
-        resultCardButtonConfig={{ ...resultCardButtonConfig, color: "success" }}
+        resultCardButtonConfig={{
+          ...resultCardButtonConfig,
+          color: color.success.main,
+        }}
         shouldHideText={shouldHideText}
       />
     );
@@ -120,10 +123,7 @@ const ResultCardButtonGroup: FC<ResultCardButtonGroupProps> = ({
             text={generateLinkText(links.length)}
             shouldHideText={shouldHideText}
             onClick={onLinks}
-            resultCardButtonConfig={{
-              ...resultCardButtonConfig,
-              color: links.length > 0 ? color.blue.dark : color.gray.light,
-            }}
+            resultCardButtonConfig={resultCardButtonConfig}
             disable={links.length === 0}
           />
         )}