Merge pull request #187 from aodn/bug/5909-resolve-multiple-fetching

some simple refactoring about search page and search functions

playwright/tests/search/test_map.py

@@ -159,7 +159,7 @@ def test_map_spider(
     search_page.wait_for_search_to_complete()
 
     search_page.map.center_map(head_lng, head_lat)
-    page_mock.wait_for_timeout(1000)
+    page_mock.wait_for_timeout(5000)
 
     # Try to find and click a cluster
     cluster_found = execute_js(page_mock, 'findAndClickCluster')

src/components/common/buttons/__test__/DynamicResultCardButton.test.tsx

@@ -8,18 +8,18 @@ import DynamicResultCardButton from "../DynamicResultCardButton";
 import { rgbToHex } from "@mui/material";
 import AppTheme from "../../../../utils/AppTheme";
 import { ThemeProvider } from "@mui/material/styles";
-beforeAll(() => {
-  server.listen();
-});
-afterEach(() => {
-  cleanup();
-  server.resetHandlers();
-});
-afterAll(() => {
-  server.close();
-});
 
 describe("DynamicResultCardButton", async () => {
+  beforeAll(() => {
+    server.listen();
+  });
+  afterEach(() => {
+    cleanup();
+    server.resetHandlers();
+  });
+  afterAll(() => {
+    server.close();
+  });
   const theme = AppTheme;
   test("Button color and text should be shown properly when status is ongoing", async () => {
     render(

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

@@ -11,7 +11,6 @@ import { fontColor, fontSize, fontWeight } from "../../../styles/constants";
 export interface BasicMapHoverTipProps {
   content?: string | undefined | null;
   sx?: SxProps;
-  onNavigateToDetail?: () => void;
   onDatasetSelected?: () => void;
 }
 

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

@@ -9,17 +9,19 @@ import {
   padding,
 } from "../../../styles/constants";
 import ResultCardButtonGroup from "../../result/ResultCardButtonGroup";
+import useTabNavigation from "../../../hooks/useTabNavigation";
 
 interface ComplexMapHoverTipProps extends BasicMapHoverTipProps {
   collection: OGCCollection;
 }
 
 const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
   collection,
-  onNavigateToDetail = () => {},
   onDatasetSelected = () => {},
   sx,
 }) => {
+  const navigateToDetailPage = useTabNavigation();
+
   return (
     <Box flex={1} sx={{ ...sx }}>
       <Stack direction="column" spacing={1}>
@@ -61,14 +63,12 @@ const ComplexMapHoverTip: FC<ComplexMapHoverTipProps> = ({
         </CardActionArea>
 
         <Box>
-          <ResultCardButtonGroup
-            content={collection}
-            onDetail={onNavigateToDetail}
-            isGridView
-          />
+          <ResultCardButtonGroup content={collection} isGridView />
         </Box>
 
-        <CardActionArea onClick={onNavigateToDetail}>
+        <CardActionArea
+          onClick={() => navigateToDetailPage(collection.id, "abstract")}
+        >
           <Tooltip title="More detail..." placement="top">
             <Typography
               color={fontColor.gray.medium}

src/components/common/store/componentParamReducer.tsx

@@ -5,6 +5,7 @@
 import { bboxPolygon } from "@turf/turf";
 import { Feature, Polygon, GeoJsonProperties } from "geojson";
 import { DatasetFrequency } from "./searchReducer";
+import { MapDefaultConfig } from "../../map/mapbox/constants";
 
 const UPDATE_PARAMETER_STATES = "UPDATE_PARAMETER_STATES";
 const UPDATE_DATETIME_FILTER_VARIABLE = "UPDATE_DATETIME_FILTER_VARIABLE";
@@ -17,6 +18,9 @@ const UPDATE_PARAMETER_VOCAB_FILTER_VARIABLE =
 const UPDATE_UPDATE_FREQ_VARIABLE = "UPDATE_UPDATE_FREQ_VARIABLE";
 const UPDATE_SORT_BY_VARIABLE = "UPDATE_SORT_BY_VARIABLE";
 
+const { WEST_LON, EAST_LON, NORTH_LAT, SOUTH_LAT } =
+  MapDefaultConfig.BBOX_ENDPOINTS;
+
 interface DataTimeFilterRange {
   // Cannot use Date in Redux as it is non-serializable
   start?: number | undefined;
@@ -135,24 +139,21 @@ const createInitialParameterState = (
   };
 
   if (withDefaultPolygon) {
-    // This is the default area and zoom of TAS, this helps to imporve the search
-    // speed because the map will be start in this place. You can always find
-    // the polygon value in the url
+    // The default area now is Australia. When changing it, please make
+    // sure it matches the default centerLongitude, centerLatitude, and
+    // zoom level in the Map.tsx
     state.polygon = {
       type: "Feature",
-      bbox: [
-        124.4248325953249, -60.65204782465562, 170.24587823247586,
-        -25.124994472112704,
-      ],
+      bbox: [WEST_LON, SOUTH_LAT, EAST_LON, NORTH_LAT],
       geometry: {
         type: "Polygon",
         coordinates: [
           [
-            [124.4248325953249, -60.65204782465562],
-            [170.24587823247586, -60.65204782465562],
-            [170.24587823247586, 25.124994472112704],
-            [124.4248325953249, -25.124994472112704],
-            [124.4248325953249, -60.65204782465562],
+            [WEST_LON, SOUTH_LAT],
+            [EAST_LON, SOUTH_LAT],
+            [EAST_LON, NORTH_LAT],
+            [WEST_LON, NORTH_LAT],
+            [WEST_LON, SOUTH_LAT],
           ],
         ],
       },

src/components/map/mapbox/Map.tsx

@@ -57,12 +57,12 @@ const styles = [
   // Add more styles as needed
 ];
 
+const { WEST_LON, EAST_LON, NORTH_LAT, SOUTH_LAT } =
+  MapDefaultConfig.BBOX_ENDPOINTS;
+
 const ReactMap = ({
   panelId,
-  centerLongitude = MapDefaultConfig.CENTER_LONGITUDE,
-  centerLatitude = MapDefaultConfig.CENTER_LATITUDE,
   bbox,
-  zoom = MapDefaultConfig.ZOOM,
   minZoom = MapDefaultConfig.MIN_ZOOM,
   maxZoom = MapDefaultConfig.MAX_ZOOM,
   projection = MapDefaultConfig.PROJECTION,
@@ -104,8 +104,7 @@ const ReactMap = ({
             container: panelId,
             accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
             style: styles[MapDefaultConfig.DEFAULT_STYLE].style,
-            center: [centerLongitude, centerLatitude],
-            zoom: zoom,
+            bounds: [WEST_LON, SOUTH_LAT, EAST_LON, NORTH_LAT],
             minZoom: minZoom,
             maxZoom: maxZoom,
             testMode: import.meta.env.MODE === "dev",
@@ -148,10 +147,7 @@ const ReactMap = ({
       };
     }
   }, [
-    centerLatitude,
-    centerLongitude,
     panelId,
-    zoom,
     projection,
     map,
     onZoomEvent,

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

@@ -14,7 +14,7 @@ import { ThemeProvider } from "@mui/material/styles";
 import { Box, Card, CardContent, CircularProgress } from "@mui/material";
 import { MapLayerMouseEvent, Popup } from "mapbox-gl";
 import MapContext from "../MapContext";
-import { Point, Feature } from "geojson";
+import { Feature, Point } from "geojson";
 import {
   fetchResultNoStore,
   SearchParameters,
@@ -32,7 +32,6 @@ interface MapPopupProps {
   layerId: string;
   popupType?: PopupType;
   onDatasetSelected?: (uuid: Array<string>) => void;
-  onNavigateToDetail?: (uuid: string) => void;
 }
 export interface MapPopupRef {
   forceRemovePopup: () => void;
@@ -88,15 +87,6 @@ const renderLoadingBox = ({
   </Box>
 );
 
-const handleNavigateToDetailPage = (
-  uuid: string,
-  onNavigateToDetail?: (uuid: string) => void
-) => {
-  if (onNavigateToDetail) {
-    onNavigateToDetail(uuid);
-  }
-};
-
 const handleDatasetSelect = (
   uuid: string,
   onDatasetSelected?: (uuid: Array<string>) => void
@@ -107,12 +97,7 @@ const handleDatasetSelect = (
 };
 
 const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
-  {
-    layerId,
-    onDatasetSelected,
-    onNavigateToDetail,
-    popupType = PopupType.Basic,
-  },
+  { layerId, onDatasetSelected, popupType = PopupType.Basic },
   ref
 ) => {
   const dispatch = useAppDispatch();
@@ -177,12 +162,6 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
               {popupType === PopupType.Complex && (
                 <ComplexMapHoverTip
                   collection={collection}
-                  onNavigateToDetail={() =>
-                    handleNavigateToDetailPage(
-                      collection.id,
-                      onNavigateToDetail
-                    )
-                  }
                   onDatasetSelected={() =>
                     handleDatasetSelect(collection.id, onDatasetSelected)
                   }
@@ -193,7 +172,7 @@ const MapPopup: ForwardRefRenderFunction<MapPopupRef, MapPopupProps> = (
         </ThemeProvider>
       );
     },
-    [onDatasetSelected, onNavigateToDetail, popupHeight, popupType, popupWidth]
+    [onDatasetSelected, popupHeight, popupType, popupWidth]
   );
 
   const removePopup = useCallback(() => {

src/components/map/mapbox/constants.ts

@@ -1,11 +1,14 @@
 export const MapDefaultConfig = {
   // Magic number, try and error by experience
   DEBOUNCE_BEFORE_EVENT_FIRE: 700,
-  CENTER_LONGITUDE: 134.0470865301421,
-  CENTER_LATITUDE: -27.609351801462687,
-  ZOOM: 4,
   MIN_ZOOM: 1,
   MAX_ZOOM: 12,
   PROJECTION: "equirectangular",
   DEFAULT_STYLE: 3,
+  BBOX_ENDPOINTS: {
+    WEST_LON: 104,
+    EAST_LON: 163,
+    NORTH_LAT: -8,
+    SOUTH_LAT: -43,
+  },
 };

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

@@ -100,7 +100,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
   collections,
   selectedUuids,
   onDatasetSelected,
-  onNavigateToDetail,
   clusterLayerConfig,
   showFullMap,
 }: ClusterLayerProps) => {
@@ -283,7 +282,6 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         layerId={unclusterPointLayer}
         popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
-        onNavigateToDetail={onNavigateToDetail}
       />
       <SpatialExtents
         layerId={unclusterPointLayer}

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

@@ -110,7 +110,6 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
   selectedUuids,
   showFullMap,
   onDatasetSelected,
-  onNavigateToDetail,
   heatmapLayerConfig,
 }: HeatmapLayerProps) => {
   const { map } = useContext(MapContext);
@@ -338,7 +337,6 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         layerId={unClusterPointLayer}
         popupType={showFullMap ? PopupType.Complex : PopupType.Basic}
         onDatasetSelected={onDatasetSelected}
-        onNavigateToDetail={onNavigateToDetail}
       />
       <SpatialExtents
         layerId={unClusterPointLayer}

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

@@ -1,12 +1,6 @@
 import { PropsWithChildren } from "react";
-import {
-  Feature,
-  FeatureCollection,
-  GeoJsonProperties,
-  Geometry,
-  Point,
-} from "geojson";
-import { LngLat, LngLatBounds, MapMouseEvent } from "mapbox-gl";
+import { Feature, FeatureCollection, GeoJsonProperties, Point } from "geojson";
+import { LngLatBounds, MapMouseEvent } from "mapbox-gl";
 import { OGCCollection } from "../../../common/store/OGCCollectionDefinitions";
 import { AustraliaMarineParkLayer, StaticLayersDef } from "./StaticLayer";
 import MapboxWorldLayer, { MapboxWorldLayersDef } from "./MapboxWorldLayer";
@@ -20,7 +14,6 @@ export interface LayersProps {
   // dataset that user selected from result list or map
   selectedUuids?: string[];
   showFullMap?: boolean;
-  onNavigateToDetail?: (uuid: string) => void;
 }
 // Use to create static layer on map, you need to add menu item to select those layers,
 // refer to map section

src/components/result/GridResultCard.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useCallback, useState } from "react";
 import {
   Box,
   Card,
@@ -20,21 +20,31 @@ import {
 import OrganizationLogo from "../logo/OrganizationLogo";
 import ResultCardButtonGroup from "./ResultCardButtonGroup";
 import MapSpatialExtents from "@/assets/icons/map-spatial-extents.png";
-import { ResultCard } from "./ResultCards";
+import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
+import { useNavigate } from "react-router-dom";
+import { pageDefault } from "../common/constants";
 
-interface GridResultCardProps extends ResultCard {
+interface GridResultCardProps {
+  content?: OGCCollection;
+  onClickCard?: (uuid: string) => void;
   isSelectedDataset?: boolean;
 }
 
 const GridResultCard: FC<GridResultCardProps> = ({
   content,
-  onDownload = () => {},
-  onLink = () => {},
-  onDetail = () => {},
   onClickCard = () => {},
   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]
+  );
 
   if (!content) return;
   const { id: uuid, title, findIcon, findThumbnail } = content;
@@ -154,14 +164,7 @@ const GridResultCard: FC<GridResultCardProps> = ({
               paddingRight: padding.extraSmall,
             }}
           />
-          <ResultCardButtonGroup
-            content={content}
-            onDownload={() => onDownload(uuid, "abstract", "download-section")}
-            onDetail={() => onDetail(uuid)}
-            onLink={() => onLink(uuid, "links")}
-            shouldHideText
-            isGridView
-          />
+          <ResultCardButtonGroup content={content} shouldHideText isGridView />
         </Stack>
       )}
     </Card>