Bugfix/6131 change map hover tip in grid list view

src/components/common/hover-tip/ComplexMapHoverTip.tsx

@@ -1,7 +1,6 @@
 import { FC } from "react";
 import { OGCCollection } from "../store/OGCCollectionDefinitions";
-import { BasicMapHoverTipProps } from "./BasicMapHoverTip";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Stack, SxProps, Tooltip, Typography } from "@mui/material";
 import {
   fontColor,
   fontSize,
@@ -13,6 +12,13 @@ import Map from "../../map/mapbox/Map";
 import Layers from "../../map/mapbox/layers/Layers";
 import GeojsonLayer from "../../map/mapbox/layers/GeojsonLayer";
 
+interface BasicMapHoverTipProps {
+  content?: string | undefined | null;
+  sx?: SxProps;
+  onDatasetSelected?: () => void;
+  tabNavigation?: (uuid: string, tab: string, section?: string) => void;
+}
+
 interface ComplexMapHoverTipProps extends BasicMapHoverTipProps {
   collection: OGCCollection;
 }

src/components/map/mapbox/component/MapPopup.tsx

@@ -6,7 +6,6 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
-  useMemo,
   useState,
 } from "react";
 import { createRoot } from "react-dom/client";
@@ -19,38 +18,25 @@ import { fetchResultByUuidNoStore } from "../../../common/store/searchReducer";
 import AppTheme from "../../../../utils/AppTheme";
 import { OGCCollection } from "../../../common/store/OGCCollectionDefinitions";
 import { useAppDispatch } from "../../../common/store/hooks";
-import BasicMapHoverTip from "../../../common/hover-tip/BasicMapHoverTip";
 import ComplexMapHoverTip from "../../../common/hover-tip/ComplexMapHoverTip";
 
 interface MapPopupProps {
   layerId: string;
-  popupType?: PopupType;
   onDatasetSelected?: (uuid: Array<string>) => void;
   tabNavigation?: (uuid: string, tab: string, section?: string) => void;
 }
 export interface MapPopupRef {
   forceRemovePopup: () => void;
 }
 
-export enum PopupType {
-  Basic = "basic",
-  Complex = "complex",
-}
-
 interface PopupConfig {
   popupWidth: number;
   popupHeight: number;
 }
 
-const defaultPopupConfig: Record<PopupType, PopupConfig> = {
-  basic: {
-    popupWidth: 250,
-    popupHeight: 50,
-  },
-  complex: {
-    popupWidth: 250,
-    popupHeight: 370,
-  },
+const defaultPopupConfig: PopupConfig = {
+  popupWidth: 250,
+  popupHeight: 370,
 };
 
 const popup = new Popup({
@@ -92,15 +78,11 @@ const handleDatasetSelect = (
 };
 
 const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
-  { layerId, onDatasetSelected, tabNavigation, popupType = PopupType.Basic },
+  { layerId, onDatasetSelected, tabNavigation },
   ref
 ) => {
   const dispatch = useAppDispatch();
   const { map } = useContext(MapContext);
-  const { popupHeight, popupWidth } = useMemo(
-    () => defaultPopupConfig[popupType],
-    [popupType]
-  );
   const [isMouseOverPoint, setIsMouseOverPoint] = useState(false);
   const [isMouseOverPopup, setIsMouseOverPopup] = useState(false);
   const [popupContent, setPopupContent] = useState<ReactNode | null>(null);
@@ -129,8 +111,8 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
           <Card
             elevation={0}
             sx={{
-              height: popupHeight,
-              width: popupWidth,
+              height: defaultPopupConfig.popupHeight,
+              width: defaultPopupConfig.popupWidth,
               borderRadius: 0,
             }}
             onMouseEnter={() => setIsMouseOverPopup(true)}
@@ -141,30 +123,19 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
                 padding: 0,
               }}
             >
-              {popupType === PopupType.Basic && (
-                <BasicMapHoverTip
-                  content={collection?.title}
-                  onDatasetSelected={() =>
-                    handleDatasetSelect(collection.id, onDatasetSelected)
-                  }
-                  sx={{ height: popupHeight }}
-                />
-              )}
-              {popupType === PopupType.Complex && (
-                <ComplexMapHoverTip
-                  collection={collection}
-                  onDatasetSelected={() =>
-                    handleDatasetSelect(collection.id, onDatasetSelected)
-                  }
-                  tabNavigation={tabNavigation}
-                />
-              )}
+              <ComplexMapHoverTip
+                collection={collection}
+                onDatasetSelected={() =>
+                  handleDatasetSelect(collection.id, onDatasetSelected)
+                }
+                tabNavigation={tabNavigation}
+              />
             </CardContent>
           </Card>
         </ThemeProvider>
       );
     },
-    [onDatasetSelected, popupHeight, popupType, popupWidth, tabNavigation]
+    [onDatasetSelected, tabNavigation]
   );
 
   const removePopup = useCallback(() => {
@@ -212,7 +183,12 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
         const coordinates = geometry.coordinates.slice();
 
         // Render a loading state in the popup
-        setPopupContent(renderLoadingBox({ popupHeight, popupWidth }));
+        setPopupContent(
+          renderLoadingBox({
+            popupHeight: defaultPopupConfig.popupHeight,
+            popupWidth: defaultPopupConfig.popupWidth,
+          })
+        );
 
         // Set the popup's position and content, then add it to the map
         // subscribe to close event to clean up resource.
@@ -226,7 +202,7 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
         setPopupContent(renderContentBox(collection));
       }
     },
-    [map, popupHeight, popupWidth, getCollectionData, renderContentBox]
+    [map, getCollectionData, renderContentBox]
   );
 
   useEffect(() => {

src/components/map/mapbox/component/SpiderDiagram.tsx

@@ -11,7 +11,7 @@ import MapContext from "../MapContext";
 import { Feature, FeatureCollection, LineString, Point } from "geojson";
 import { createRoot } from "react-dom/client";
 import { GeoJSONSource, MapMouseEvent } from "mapbox-gl";
-import MapPopup, { MapPopupRef, PopupType } from "./MapPopup";
+import MapPopup, { MapPopupRef } from "./MapPopup";
 import SpatialExtents from "./SpatialExtents";
 import { LayersProps } from "../layers/Layers";
 import { TestHelper } from "../../../common/test/helper";
@@ -92,7 +92,6 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
   unclusterPointLayer,
   onDatasetSelected,
   tabNavigation,
-  showFullMap,
 }) => {
   const { map } = useContext(MapContext);
   const mapPopupRef = useRef<MapPopupRef>(null);
@@ -501,7 +500,6 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           ref={mapPopupRef}
           layerId={getSpiderPinsLayerId(spiderifiedCluster.id)}
           onDatasetSelected={onDatasetSelected}
-          popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
           tabNavigation={tabNavigation}
         />
       )}

src/components/map/mapbox/layers/ClusterLayer.tsx

@@ -8,7 +8,7 @@ import {
 } from "react";
 import MapContext from "../MapContext";
 import { GeoJSONSource } from "mapbox-gl";
-import MapPopup, { PopupType } from "../component/MapPopup";
+import MapPopup from "../component/MapPopup";
 import {
   defaultMouseEnterEventHandler,
   defaultMouseLeaveEventHandler,
@@ -103,7 +103,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
   onDatasetSelected,
   tabNavigation,
   clusterLayerConfig,
-  showFullMap,
 }: ClusterLayerProps) => {
   const { map } = useContext(MapContext);
   const [_, setLastVisiblePoint] = useState<
@@ -279,7 +278,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
     <>
       <MapPopup
         layerId={unclusterPointLayer}
-        popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
         tabNavigation={tabNavigation}
       />
@@ -294,7 +292,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         clusterSourceId={clusterSourceId}
         unclusterPointLayer={unclusterPointLayer}
         onDatasetSelected={onDatasetSelected}
-        showFullMap={showFullMap}
         tabNavigation={tabNavigation}
       />
       <TestHelper getHeatmapLayer={() => clusterLayer} />

src/components/map/mapbox/layers/HeatmapLayer.tsx

@@ -15,7 +15,7 @@ import {
   findSuitableVisiblePoint,
   LayersProps,
 } from "./Layers";
-import MapPopup, { PopupType } from "../component/MapPopup";
+import MapPopup from "../component/MapPopup";
 import SpatialExtents from "../component/SpatialExtents";
 import SpiderDiagram from "../component/SpiderDiagram";
 import { TestHelper } from "../../../common/test/helper";
@@ -108,7 +108,6 @@ const getUnclusterPointLayerId = (layerId: string) =>
 const HeatmapLayer: FC<HeatmapLayerProps> = ({
   featureCollection = generateFeatureCollectionFrom(undefined),
   selectedUuids,
-  showFullMap,
   onDatasetSelected,
   tabNavigation,
   heatmapLayerConfig,
@@ -332,7 +331,6 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
     <>
       <MapPopup
         layerId={unClusterPointLayer}
-        popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
         tabNavigation={tabNavigation}
       />
@@ -347,7 +345,6 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         clusterSourceId={clusterSourceId}
         unclusterPointLayer={unClusterPointLayer}
         onDatasetSelected={onDatasetSelected}
-        showFullMap={showFullMap}
         tabNavigation={tabNavigation}
       />
       <TestHelper getHeatmapLayer={() => heatmapLayer} />

src/components/map/mapbox/layers/Layers.tsx

@@ -13,7 +13,6 @@ export interface LayersProps {
   onDatasetSelected?: (uuids: Array<string>) => void;
   // 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,

src/pages/search-page/subpages/MapSection.tsx

@@ -78,7 +78,6 @@ const MapSection: React.FC<MapSectionProps> = ({
             <HeatmapLayer
               featureCollection={generateFeatureCollectionFrom(collections)}
               selectedUuids={selectedUuids}
-              showFullMap={showFullMap}
               onDatasetSelected={onDatasetSelected}
               tabNavigation={tabNavigation}
             />
@@ -89,14 +88,13 @@ const MapSection: React.FC<MapSectionProps> = ({
             <ClusterLayer
               featureCollection={generateFeatureCollectionFrom(collections)}
               selectedUuids={selectedUuids}
-              showFullMap={showFullMap}
               onDatasetSelected={onDatasetSelected}
               tabNavigation={tabNavigation}
             />
           );
       }
     },
-    [collections, onDatasetSelected, selectedUuids, showFullMap, tabNavigation]
+    [collections, onDatasetSelected, selectedUuids, tabNavigation]
   );
 
   // Early return if it is full list view