Bugs/5970 keep zoom level

playwright/pages/detail_page.py

@@ -18,7 +18,7 @@ def __init__(self, page: Page):
     def load(self, uuid: str) -> None:
         """Load the detail page for the given uuid"""
         url = f'{settings.baseURL}/details?uuid={uuid}'
-        self.page.goto(url, timeout=90 * 1000)
+        self.page.goto(url, wait_until='domcontentloaded')
 
     def get_tab_section(self, title: str) -> Locator:
         """Returns tab section title element"""

playwright/pages/landing_page.py

@@ -11,4 +11,4 @@ def __init__(self, page: Page):
         self.search = SearchComponent(page)
 
     def load(self) -> None:
-        self.page.goto(settings.baseURL, timeout=90 * 1000)
+        self.page.goto(settings.baseURL, wait_until='domcontentloaded')

playwright/tests/search_page/test_map.py

@@ -128,6 +128,8 @@ def test_map_base_layers(
     layer_id = layer_factory.get_layer_id(layer_type)
     assert search_page.map.is_map_layer_visible(layer_id) is True
 
+    if not search_page.get_text(layer_text).is_visible():
+        search_page.map.basemap_show_hide_menu.click()
     search_page.click_text(layer_text)
     assert search_page.map.is_map_layer_visible(layer_id) is False
 

src/components/common/store/__test__/componentParamReducer.test.tsx

@@ -6,6 +6,7 @@ import {
 } from "../componentParamReducer";
 
 import { bboxPolygon } from "@turf/turf";
+import { MapDefaultConfig } from "../../../map/mapbox/constants";
 
 describe("Component Reducer Function Test", () => {
   it("Verify formatToUrlParam", () => {
@@ -97,6 +98,7 @@ describe("Component Reducer Function Test", () => {
       isImosOnlyDataset: false,
       dateTimeFilterRange: {},
       searchText: "",
+      zoom: MapDefaultConfig.ZOOM,
     };
 
     const answer1: string = formatToUrlParam(sample1);
@@ -111,6 +113,7 @@ describe("Component Reducer Function Test", () => {
         end: 45697,
       },
       searchText: "This is test",
+      zoom: MapDefaultConfig.ZOOM,
       parameterVocabs: [
         {
           label: "cat1",
@@ -132,6 +135,7 @@ describe("Component Reducer Function Test", () => {
         end: 45697,
       },
       searchText: "This is test",
+      zoom: 3,
       parameterVocabs: [
         {
           label: "cat1",

src/components/common/store/componentParamReducer.tsx

@@ -17,6 +17,7 @@ const UPDATE_PARAMETER_VOCAB_FILTER_VARIABLE =
   "UPDATE_PARAMETER_VOCAB_FILTER_VARIABLE";
 const UPDATE_UPDATE_FREQ_VARIABLE = "UPDATE_UPDATE_FREQ_VARIABLE";
 const UPDATE_SORT_BY_VARIABLE = "UPDATE_SORT_BY_VARIABLE";
+const UPDATE_ZOOM_VARIABLE = "UPDATE_ZOOM_VARIABLE";
 
 const { WEST_LON, EAST_LON, NORTH_LAT, SOUTH_LAT } =
   MapDefaultConfig.BBOX_ENDPOINTS;
@@ -35,6 +36,7 @@ export interface ParameterState {
   parameterVocabs?: Array<Vocab>;
   updateFreq?: DatasetFrequency | undefined;
   sortby?: string;
+  zoom?: number;
 }
 // Function use to test an input value is of type Vocab
 const isVocabType = (value: any): value is Vocab =>
@@ -128,6 +130,15 @@ const updateSortBy = (
   };
 };
 
+const updateZoom = (input: number | undefined): ActionType => {
+  return {
+    type: UPDATE_ZOOM_VARIABLE,
+    payload: {
+      zoom: input,
+    } as ParameterState,
+  };
+};
+
 // Initial State
 const createInitialParameterState = (
   withDefaultPolygon: boolean = true
@@ -136,6 +147,7 @@ const createInitialParameterState = (
     isImosOnlyDataset: false,
     dateTimeFilterRange: {},
     searchText: "",
+    zoom: MapDefaultConfig.ZOOM,
   };
 
   if (withDefaultPolygon) {
@@ -208,6 +220,11 @@ const paramReducer = (
         ...state,
         sortby: action.payload.sortby,
       };
+    case UPDATE_ZOOM_VARIABLE:
+      return {
+        ...state,
+        zoom: action.payload.zoom,
+      };
     case UPDATE_PARAMETER_STATES:
       return {
         ...state,
@@ -346,4 +363,5 @@ export {
   updateParameterStates,
   updateSortBy,
   updateUpdateFreq,
+  updateZoom,
 };

src/components/loading/SnackbarLoader.tsx

@@ -15,7 +15,6 @@ const SnackbarLoader: React.FC<SnackbarLoaderProps> = ({
     <Snackbar
       open={isLoading}
       anchorOrigin={{ vertical: "top", horizontal: "left" }}
-      // message={"Loading"}
       sx={{
         ml: theme.mp.xxlg,
         position: "absolute",

src/components/map/mapbox/Map.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   LngLatBounds,
-  LngLatBoundsLike,
+  LngLatLike,
   Map,
   MapboxEvent,
   Projection,
@@ -17,7 +17,7 @@ import { MapDefaultConfig } from "./constants";
 interface MapProps {
   centerLongitude?: number;
   centerLatitude?: number;
-  bbox?: LngLatBoundsLike;
+  bbox?: LngLatBounds;
   zoom?: number;
   minZoom?: number;
   maxZoom?: number;
@@ -62,7 +62,8 @@ const { WEST_LON, EAST_LON, NORTH_LAT, SOUTH_LAT } =
 
 const ReactMap = ({
   panelId,
-  bbox,
+  bbox = new LngLatBounds([WEST_LON, SOUTH_LAT, EAST_LON, NORTH_LAT]),
+  zoom = MapDefaultConfig.ZOOM,
   minZoom = MapDefaultConfig.MIN_ZOOM,
   maxZoom = MapDefaultConfig.MAX_ZOOM,
   projection = MapDefaultConfig.PROJECTION,
@@ -104,7 +105,6 @@ const ReactMap = ({
             container: panelId,
             accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
             style: styles[MapDefaultConfig.DEFAULT_STYLE].style,
-            bounds: [WEST_LON, SOUTH_LAT, EAST_LON, NORTH_LAT],
             minZoom: minZoom,
             maxZoom: maxZoom,
             testMode: import.meta.env.MODE === "dev",
@@ -135,6 +135,11 @@ const ReactMap = ({
       );
       resizeObserver.observe(map.getContainer());
 
+      if (import.meta.env.MODE === "dev") {
+        //map.showPadding = true;
+        //map.showCollisionBoxes = true;
+      }
+
       return () => {
         resizeObserver.unobserve(map.getContainer());
         map.off("zoomend", debounceOnZoomEvent);
@@ -161,12 +166,22 @@ const ReactMap = ({
   useEffect(() => {
     // The map center is use to set the initial center point, however we may need
     // to set to other place, for example if the user pass the url to someone
-    bbox &&
-      map &&
-      map.setCenter(
-        new LngLatBounds(bbox as [number, number, number, number]).getCenter()
-      );
-  }, [bbox, map]);
+    if (bbox && map) {
+      // Turn off event to avoid looping
+      map.off("zoomend", debounceOnZoomEvent);
+      map.off("moveend", debounceOnMoveEvent);
+      // DO NOT use fitBounds(), it will cause the zoom and padding adjust so
+      // you end up map area drift.
+      map.jumpTo({
+        center: bbox.getCenter(),
+        zoom: zoom,
+      });
+      map.on("idle", () => {
+        map.on("zoomend", debounceOnZoomEvent);
+        map.on("moveend", debounceOnMoveEvent);
+      });
+    }
+  }, [bbox, zoom, map, debounceOnZoomEvent, debounceOnMoveEvent]);
 
   return (
     map && (

src/components/map/mapbox/constants.ts

@@ -1,6 +1,7 @@
 export const MapDefaultConfig = {
   // Magic number, try and error by experience
   DEBOUNCE_BEFORE_EVENT_FIRE: 700,
+  ZOOM: 4,
   MIN_ZOOM: 1,
   MAX_ZOOM: 12,
   PROJECTION: "equirectangular",

src/hooks/useRedirectSearch.tsx

@@ -9,13 +9,17 @@ import store, { getComponentState } from "../components/common/store/store";
 const useRedirectSearch = () => {
   const navigate = useNavigate();
 
-  const redirectSearch = (referer: string) => {
+  const redirectSearch = (
+    referer: string,
+    fromNavigate: boolean = true,
+    requireSearch: boolean = true
+  ) => {
     const componentParam: ParameterState = getComponentState(store.getState());
     navigate(pageDefault.search + "?" + formatToUrlParam(componentParam), {
       state: {
-        fromNavigate: true,
-        requireSearch: true,
-        referer,
+        fromNavigate: fromNavigate,
+        requireSearch: requireSearch,
+        referer: referer,
       },
     });
   };

src/pages/detail-page/subpages/HeaderSection.tsx

@@ -30,6 +30,7 @@ import {
 } from "../../../components/common/store/componentParamReducer";
 import OrganizationLogo from "../../../components/logo/OrganizationLogo";
 import { pageDefault } from "../../../components/common/constants";
+import useRedirectSearch from "../../../hooks/useRedirectSearch";
 
 interface ButtonWithIcon {
   label: string;
@@ -54,21 +55,14 @@ const buttons: Record<ButtonName, ButtonWithIcon> = {
 };
 
 const HeaderSection = () => {
-  const navigate = useNavigate();
   const { collection } = useDetailPageContext();
   const title = collection?.title;
+  const redirectSearch = useRedirectSearch();
 
   // TODO: on click user goes back to search page where has results based on previous search params
   const onGoBack = useCallback(() => {
-    const componentParam: ParameterState = getComponentState(store.getState());
-    navigate(pageDefault.search + "?" + formatToUrlParam(componentParam), {
-      state: {
-        fromNavigate: true,
-        requireSearch: true,
-        referer: "HeaderSection",
-      },
-    });
-  }, [navigate]);
+    redirectSearch("HeaderSection", true, false);
+  }, [redirectSearch]);
 
   // TODO: implement the goNext and goPrevious function
   // This will require the entire search results (their ids and indexes) based on search params

src/pages/detail-page/subpages/tab-panels/__test__/LinksPanel.test.tsx

@@ -51,19 +51,16 @@ describe("LinksPanel", async () => {
     );
   });
 
-  test("should render LinksPanel", async () => {
-    await waitFor(() => {
-      expect(screen.queryAllByText("Data access using R")).to.exist;
-      expect(
-        screen.queryAllByText("Marine Weather Observations for Davies Reef")
-      ).to.exist;
-      expect(screen.queryAllByText("Data access via AODN Portal")).to.exist;
-      expect(screen.queryAllByText("Data access via Programming API")).to.exist;
-    });
+  test("should render LinksPanel", () => {
+    expect(screen.queryAllByText("Data access using R")).to.exist;
+    expect(screen.queryAllByText("Marine Weather Observations for Davies Reef"))
+      .to.exist;
+    expect(screen.queryAllByText("Data access via AODN Portal")).to.exist;
+    expect(screen.queryAllByText("Data access via Programming API")).to.exist;
   });
 
-  test("should show COPY LINK button when on hover", async () => {
-    await waitFor(() => {
+  test("should show COPY LINK button when on hover", () => {
+    waitFor(() => screen.findByText("Data access using R")).then(() => {
       const link = screen.queryByText("Data access using R");
       expect(link).to.exist;
       userEvent.hover(link!);