🐛 fix map hover tip

aodn · Oct 28, 2024 · 3d89ff8 · 3d89ff8
1 parent bab406d
commit 3d89ff8
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 31 deletions.
diff --git a/src/components/common/hover-tip/BasicMapHoverTip.tsx b/src/components/common/hover-tip/BasicMapHoverTip.tsx
@@ -12,6 +12,7 @@ export interface BasicMapHoverTipProps {
   content?: string | undefined | null;
   sx?: SxProps;
   onDatasetSelected?: () => void;
+  tabNavigation?: (uuid: string, tab: string, section?: string) => void;
 }
 
 const BasicMapHoverTip: FC<BasicMapHoverTipProps> = ({

diff --git a/src/components/common/hover-tip/ComplexMapHoverTip.tsx b/src/components/common/hover-tip/ComplexMapHoverTip.tsx
@@ -9,7 +9,6 @@ import {
   padding,
 } from "../../../styles/constants";
 import ResultCardButtonGroup from "../../result/ResultCardButtonGroup";
-import useTabNavigation from "../../../hooks/useTabNavigation";
 
 interface ComplexMapHoverTipProps extends BasicMapHoverTipProps {
   collection: OGCCollection;
@@ -18,9 +17,13 @@ interface ComplexMapHoverTipProps extends BasicMapHoverTipProps {
 const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
   collection,
   onDatasetSelected = () => {},
+  tabNavigation = () => {},
   sx,
 }) => {
-  const navigateToDetailPage = useTabNavigation();
+  const onLinks = () => tabNavigation(collection.id, "links");
+  const onDownload = () =>
+    tabNavigation(collection.id, "abstract", "download-section");
+  const onDetail = () => tabNavigation(collection.id, "abstract");
 
   return (
     <Box flex={1} sx={{ ...sx }}>
@@ -63,12 +66,16 @@ const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
         </CardActionArea>
 
         <Box>
-          <ResultCardButtonGroup content={collection} isGridView />
+          <ResultCardButtonGroup
+            content={collection}
+            isGridView
+            onLinks={onLinks}
+            onDownload={onDownload}
+            onDetail={onDetail}
+          />
         </Box>
 
-        <CardActionArea
-          onClick={() => navigateToDetailPage(collection.id, "abstract")}
-        >
+        <CardActionArea onClick={() => {}}>
           <Tooltip title="More detail..." placement="top">
             <Typography
               color={fontColor.gray.medium}

diff --git a/src/components/map/mapbox/component/MapPopup.tsx b/src/components/map/mapbox/component/MapPopup.tsx
@@ -32,6 +32,7 @@ interface MapPopupProps {
   layerId: string;
   popupType?: PopupType;
   onDatasetSelected?: (uuid: Array<string>) => void;
+  tabNavigation?: (uuid: string, tab: string, section?: string) => void;
 }
 export interface MapPopupRef {
   forceRemovePopup: () => void;
@@ -97,7 +98,7 @@ const handleDatasetSelect = (
 };
 
 const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
-  { layerId, onDatasetSelected, popupType = PopupType.Basic },
+  { layerId, onDatasetSelected, tabNavigation, popupType = PopupType.Basic },
   ref
 ) => {
   const dispatch = useAppDispatch();
@@ -165,14 +166,15 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
                   onDatasetSelected={() =>
                     handleDatasetSelect(collection.id, onDatasetSelected)
                   }
+                  tabNavigation={tabNavigation}
                 />
               )}
             </CardContent>
           </Card>
         </ThemeProvider>
       );
     },
-    [onDatasetSelected, popupHeight, popupType, popupWidth]
+    [onDatasetSelected, popupHeight, popupType, popupWidth, tabNavigation]
   );
 
   const removePopup = useCallback(() => {

diff --git a/src/components/map/mapbox/component/SpiderDiagram.tsx b/src/components/map/mapbox/component/SpiderDiagram.tsx
@@ -91,6 +91,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
   clusterSourceId,
   unclusterPointLayer,
   onDatasetSelected,
+  tabNavigation,
   showFullMap,
 }) => {
   const { map } = useContext(MapContext);
@@ -502,6 +503,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           layerId={getSpiderPinsLayerId(spiderifiedCluster.id)}
           onDatasetSelected={onDatasetSelected}
           popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
+          tabNavigation={tabNavigation}
         />
       )}
       {spiderifiedCluster && (

diff --git a/src/components/map/mapbox/layers/ClusterLayer.tsx b/src/components/map/mapbox/layers/ClusterLayer.tsx
@@ -100,6 +100,7 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
   collections,
   selectedUuids,
   onDatasetSelected,
+  tabNavigation,
   clusterLayerConfig,
   showFullMap,
 }: ClusterLayerProps) => {
@@ -282,6 +283,7 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         layerId={unclusterPointLayer}
         popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
+        tabNavigation={tabNavigation}
       />
       <SpatialExtents
         layerId={unclusterPointLayer}
@@ -295,6 +297,7 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         unclusterPointLayer={unclusterPointLayer}
         onDatasetSelected={onDatasetSelected}
         showFullMap={showFullMap}
+        tabNavigation={tabNavigation}
       />
     </>
   );

diff --git a/src/components/map/mapbox/layers/HeatmapLayer.tsx b/src/components/map/mapbox/layers/HeatmapLayer.tsx
@@ -110,6 +110,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
   selectedUuids,
   showFullMap,
   onDatasetSelected,
+  tabNavigation,
   heatmapLayerConfig,
 }: HeatmapLayerProps) => {
   const { map } = useContext(MapContext);
@@ -337,6 +338,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         layerId={unClusterPointLayer}
         popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
+        tabNavigation={tabNavigation}
       />
       <SpatialExtents
         layerId={unClusterPointLayer}
@@ -350,6 +352,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         unclusterPointLayer={unClusterPointLayer}
         onDatasetSelected={onDatasetSelected}
         showFullMap={showFullMap}
+        tabNavigation={tabNavigation}
       />
       <TestHelper getHeatmapLayer={() => heatmapLayer} />
     </>

diff --git a/src/components/map/mapbox/layers/Layers.tsx b/src/components/map/mapbox/layers/Layers.tsx
@@ -14,6 +14,7 @@ export interface LayersProps {
   // dataset that user selected from result list or map
   selectedUuids?: string[];
   showFullMap?: boolean;
+  tabNavigation?: (uuid: string, tab: string, section?: string) => void;
 }
 // Use to create static layer on map, you need to add menu item to select those layers,
 // refer to map section

diff --git a/src/components/result/GridResultCard.tsx b/src/components/result/GridResultCard.tsx
@@ -21,8 +21,7 @@ import OrganizationLogo from "../logo/OrganizationLogo";
 import ResultCardButtonGroup from "./ResultCardButtonGroup";
 import MapSpatialExtents from "@/assets/icons/map-spatial-extents.png";
 import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
-import { useNavigate } from "react-router-dom";
-import { pageDefault } from "../common/constants";
+import useTabNavigation from "../../hooks/useTabNavigation";
 
 interface GridResultCardProps {
   content?: OGCCollection;
@@ -36,19 +35,15 @@ const GridResultCard: FC<GridResultCardProps> = ({
   isSelectedDataset,
 }) => {
   const [showButtons, setShowButtons] = useState<boolean>(false);
-  const navigate = useNavigate();
-  const onDetail = useCallback(
-    (uuid: string) => {
-      const searchParams = new URLSearchParams();
-      searchParams.append("uuid", uuid);
-      navigate(pageDefault.details + "?" + searchParams.toString());
-    },
-    [navigate]
-  );
+  const goToDetailPage = useTabNavigation();
 
   if (!content) return;
   const { id: uuid, title, findIcon, findThumbnail } = content;
 
+  const onLinks = () => goToDetailPage(uuid, "links");
+  const onDownload = () => goToDetailPage(uuid, "abstract", "download-section");
+  const onDetail = () => goToDetailPage(uuid, "abstract");
+
   return (
     <Card
       elevation={isSelectedDataset ? 2 : 0}
@@ -127,7 +122,7 @@ const GridResultCard: FC<GridResultCardProps> = ({
         )}
 
         <Tooltip title="More details ..." placement="top">
-          <CardActionArea onClick={() => onDetail(uuid)}>
+          <CardActionArea onClick={() => onDetail}>
             <Box
               display="flex"
               alignItems="center"
@@ -164,7 +159,14 @@ const GridResultCard: FC<GridResultCardProps> = ({
               paddingRight: padding.extraSmall,
             }}
           />
-          <ResultCardButtonGroup content={content} shouldHideText isGridView />
+          <ResultCardButtonGroup
+            content={content}
+            shouldHideText
+            isGridView
+            onLinks={onLinks}
+            onDownload={onDownload}
+            onDetail={onDetail}
+          />
         </Stack>
       )}
     </Card>

diff --git a/src/components/result/ListResultCard.tsx b/src/components/result/ListResultCard.tsx
@@ -42,6 +42,10 @@ const ListResultCard: FC<ListResultCardProps> = ({
   if (!content) return;
   const { id: uuid, title, description, findIcon, findThumbnail } = content;
 
+  const onLinks = () => goToDetailPage(uuid, "links");
+  const onDownload = () => goToDetailPage(uuid, "abstract", "download-section");
+  const onDetail = () => goToDetailPage(uuid, "abstract");
+
   // TODO: buttons are changed, but the behaviors are fake / wrong
   return (
     <Card
@@ -120,7 +124,13 @@ const ListResultCard: FC<ListResultCardProps> = ({
           </Typography>
         </CardActionArea>
         {(isSelectedDataset || showButtons) && (
-          <ResultCardButtonGroup content={content} shouldHideText />
+          <ResultCardButtonGroup
+            content={content}
+            shouldHideText
+            onLinks={onLinks}
+            onDownload={onDownload}
+            onDetail={onDetail}
+          />
         )}
       </Box>
 

diff --git a/src/components/result/ResultCardButtonGroup.tsx b/src/components/result/ResultCardButtonGroup.tsx
@@ -9,12 +9,14 @@ import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
 import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
 import ResultCardButton from "../common/buttons/ResultCardButton";
 import { color } from "../../styles/constants";
-import useTabNavigation from "../../hooks/useTabNavigation";
 
 interface ResultCardButtonGroupProps {
   content: OGCCollection;
   isGridView?: boolean;
   shouldHideText?: boolean;
+  onLinks?: () => void;
+  onDownload?: () => void;
+  onDetail?: () => void;
 }
 
 interface ButtonContainerProps {
@@ -74,9 +76,10 @@ const ResultCardButtonGroup: FC<ResultCardButtonGroupProps> = ({
   content,
   isGridView,
   shouldHideText = false,
+  onLinks = () => {},
+  onDownload = () => {},
+  onDetail = () => {},
 }) => {
-  const goToDetailPanel = useTabNavigation();
-
   const ButtonContainer: FC<ButtonContainerProps> = ({ children, sx }) => (
     <Grid
       item
@@ -104,7 +107,7 @@ const ResultCardButtonGroup: FC<ResultCardButtonGroupProps> = ({
             startIcon={LinkIcon}
             text={generateLinkText(links.length)}
             shouldHideText={shouldHideText}
-            onClick={() => goToDetailPanel(content.id, "links")}
+            onClick={onLinks}
             resultCardButtonConfig={{
               color: links.length > 0 ? color.blue.dark : color.gray.light,
             }}
@@ -117,17 +120,15 @@ const ResultCardButtonGroup: FC<ResultCardButtonGroupProps> = ({
           startIcon={DownloadIcon}
           text="Download"
           shouldHideText={shouldHideText}
-          onClick={() =>
-            goToDetailPanel(content.id, "abstract", "download-section")
-          }
+          onClick={onDownload}
         />
       </ButtonContainer>
       <ButtonContainer>
         <ResultCardButton
           startIcon={InfoIcon}
           text="More details ..."
           shouldHideText={shouldHideText}
-          onClick={() => goToDetailPanel(content.id, "abstract")}
+          onClick={onDetail}
         />
       </ButtonContainer>
     </Grid>

diff --git a/src/pages/search-page/subpages/MapSection.tsx b/src/pages/search-page/subpages/MapSection.tsx
@@ -21,6 +21,7 @@ import { MapboxWorldLayersDef } from "../../../components/map/mapbox/layers/Mapb
 import SnackbarLoader from "../../../components/loading/SnackbarLoader";
 import DisplayCoordinate from "../../../components/map/mapbox/controls/DisplayCoordinate";
 import { capitalizeFirstLetter } from "../../../utils/StringUtils";
+import useTabNavigation from "../../../hooks/useTabNavigation";
 
 const mapContainerId = "map-container-id";
 
@@ -58,6 +59,8 @@ const MapSection: React.FC<MapSectionProps> = ({
   );
   const [staticLayer, setStaticLayer] = useState<Array<string>>([]);
 
+  const tabNavigation = useTabNavigation();
+
   const createPresentationLayers = useCallback(
     (id: string | null) => {
       switch (id) {
@@ -68,6 +71,7 @@ const MapSection: React.FC<MapSectionProps> = ({
               selectedUuids={selectedUuids}
               showFullMap={showFullMap}
               onDatasetSelected={onDatasetSelected}
+              tabNavigation={tabNavigation}
             />
           );
 
@@ -78,11 +82,12 @@ const MapSection: React.FC<MapSectionProps> = ({
               selectedUuids={selectedUuids}
               showFullMap={showFullMap}
               onDatasetSelected={onDatasetSelected}
+              tabNavigation={tabNavigation}
             />
           );
       }
     },
-    [collections, onDatasetSelected, selectedUuids, showFullMap]
+    [collections, onDatasetSelected, selectedUuids, showFullMap, tabNavigation]
   );
 
   return (