Merge branch 'main' into testing/189-add-search-page-tests

playwright/tests/search_page/test_map.py

@@ -161,7 +161,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/DetailSubtabBtn.tsx

@@ -5,14 +5,14 @@ import { color } from "../../../styles/constants";
 interface DetailSubtabProps {
   id?: string;
   title: string;
-  navigate: () => void;
+  onClick: () => void;
   isBordered: boolean;
 }
 
 const DetailSubtabBtn: React.FC<DetailSubtabProps> = ({
   id,
   title,
-  navigate,
+  onClick,
   isBordered,
 }) => {
   const theme = useTheme();
@@ -42,7 +42,7 @@ const DetailSubtabBtn: React.FC<DetailSubtabProps> = ({
           textAlign: "center",
           backgroundColor: "#fff",
         }}
-        onClick={navigate}
+        onClick={onClick}
       >
         {title}
       </Button>

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/charts/TimeRangeBarChart.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { BarChart } from "@mui/x-charts/BarChart";
-import { BarSeriesType } from "@mui/x-charts";
-import { useTheme } from "@mui/material";
+import { axisClasses, BarSeriesType } from "@mui/x-charts";
 import { OGCCollections } from "../store/OGCCollectionDefinitions";
 import { color } from "../../../styles/constants";
 
@@ -20,9 +19,9 @@ interface Bucket {
 }
 
 enum DividedBy {
-  day,
-  month,
-  year,
+  day = "Day",
+  month = "Month",
+  year = "Year",
 }
 
 const TimeRangeBarChart: React.FC<TimeRangeBarChartProps> = ({
@@ -175,7 +174,7 @@ const TimeRangeBarChart: React.FC<TimeRangeBarChartProps> = ({
       type: "bar",
       valueFormatter: seriesFormatter,
       stack: "total",
-      label: "IMOS Data",
+      label: "IMOS Records",
       data: buckets.flatMap((m) => m.imosOnlyCount),
       color: color.blue.dark,
     };
@@ -184,7 +183,7 @@ const TimeRangeBarChart: React.FC<TimeRangeBarChartProps> = ({
       type: "bar",
       valueFormatter: seriesFormatter,
       stack: "total",
-      label: "All Data",
+      label: "All Records",
       data: buckets.flatMap((m) => m.total - m.imosOnlyCount),
       color: color.blue.darkSemiTransparent,
     };
@@ -203,8 +202,10 @@ const TimeRangeBarChart: React.FC<TimeRangeBarChartProps> = ({
     <BarChart
       height={180}
       margin={{
-        // use to control the space on right, so that it will not overlap with the legend
-        right: 150,
+        right: 170,
+        left: 80, // Increased left margin to accommodate the y-axis label
+        bottom: 50, // Bottom margin for x-axis labels
+        top: 20, // Added top margin for better overall layout
       }}
       slotProps={{
         legend: {
@@ -223,17 +224,32 @@ const TimeRangeBarChart: React.FC<TimeRangeBarChartProps> = ({
         {
           data: xValues,
           scaleType: "band",
-          // valueFormatter: (date: Date) => date.toLocaleDateString(),
           valueFormatter: xAxisLabelFormatter,
-          tickMinStep: 3600 * 1000 * 48, // min step: 48h,
-          // If you want the label rotate
-          // tickLabelStyle: {
-          //  angle: 45,
-          //  dominantBaseline: 'hanging',
-          //  textAnchor: 'start',
-          // },
+          tickMinStep: 3600 * 1000 * 48, // min step: 48h
+          label: determineChartUnit().toString(), // x-axis label
+          labelStyle: {
+            fontSize: 12,
+            fontWeight: "bold",
+          },
+        },
+      ]}
+      yAxis={[
+        {
+          label: "Count of Records", // y-axis label
+          labelStyle: {
+            fontSize: 12,
+            fontWeight: "bold",
+          },
+          tickLabelStyle: {
+            fontSize: 12,
+          },
         },
       ]}
+      sx={{
+        [`.${axisClasses.left} .${axisClasses.label}`]: {
+          transform: "translate(-20px, 0)",
+        },
+      }}
       series={series}
     />
   );

src/components/common/filters/AdvanceFilters.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useState } from "react";
+import { FC, useCallback, useEffect, useState } from "react";
 import {
   ParameterState,
   updateParameterVocabs,
@@ -165,25 +165,40 @@ const AdvanceFilters: FC<AdvanceFiltersProps> = ({
                 }}
               >
                 <Grid item xs={12}>
-                  <FilterSection title={"Time Range"}>
+                  <FilterSection
+                    title="Time Range"
+                    toolTip="Recorded time span of the data"
+                    isTitleOnlyHeader
+                  >
                     <DateRangeFilter filter={filter} setFilter={setFilter} />
                   </FilterSection>
                 </Grid>
                 <Grid item xs={5}>
-                  <FilterSection title={"Depth"}>
+                  <FilterSection
+                    title="Depth"
+                    toolTip="Filter by the depth of the measurements"
+                  >
                     <DepthFilter filter={filter} setFilter={setFilter} />
                   </FilterSection>
                 </Grid>
                 <Grid item xs={7}>
-                  <FilterSection isTitleOnlyHeader title={"Parameters"}>
+                  <FilterSection
+                    isTitleOnlyHeader
+                    title="Parameters"
+                    toolTip="Filter by the parameter that has been measured or observed"
+                  >
                     <ParameterVocabFilter
                       filter={filter}
                       setFilter={setFilter}
                     />
                   </FilterSection>
                 </Grid>
                 <Grid item xs={5}>
-                  <FilterSection isTitleOnlyHeader title={"Data Delivery Mode"}>
+                  <FilterSection
+                    isTitleOnlyHeader
+                    title={"Data Delivery Mode"}
+                    toolTip="Filter by the how up to date the data is"
+                  >
                     <DataDeliveryModeFilter
                       filter={filter}
                       setFilter={setFilter}

src/components/common/filters/DateRangeFilter.tsx

@@ -217,7 +217,7 @@ const DateRangeFilter: FC<DateRangeFilterProps> = ({ filter, setFilter }) => {
                 min={dateToValue(initialMinDate)}
                 max={dateToValue(initialMaxDate)}
                 onChange={handleSliderChange}
-                valueLabelDisplay="on"
+                valueLabelDisplay="auto"
                 valueLabelFormat={(value: number) =>
                   valueToDate(value).format("MM/YYYY")
                 }

src/components/common/filters/FilterSection.tsx

@@ -1,18 +1,20 @@
 import { FC, ReactNode } from "react";
 import StyledFilterSectionGrid from "./StyledFilterSectionGrid";
-import { Typography } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import { gap, padding } from "../../../styles/constants";
 
 interface FilterSectionContainerProps {
   title: string;
   children: ReactNode;
   isTitleOnlyHeader?: boolean;
+  toolTip?: string;
 }
 
 const FilterSection: FC<FilterSectionContainerProps> = ({
   title,
   children,
   isTitleOnlyHeader = false,
+  toolTip,
 }) => {
   return (
     <StyledFilterSectionGrid
@@ -22,17 +24,19 @@ const FilterSection: FC<FilterSectionContainerProps> = ({
         paddingTop: isTitleOnlyHeader ? padding.triple : 0,
       }}
     >
-      <Typography
-        variant="h3"
-        sx={{
-          position: "absolute",
-          left: gap.xxlg,
-          top: gap.xlg,
-          padding: 0,
-        }}
-      >
-        {title}
-      </Typography>
+      <Tooltip title={toolTip} placement="top">
+        <Typography
+          variant="h3"
+          sx={{
+            position: "absolute",
+            left: gap.xxlg,
+            top: gap.xlg,
+            padding: 0,
+          }}
+        >
+          {title}
+        </Typography>
+      </Tooltip>
       {children}
     </StyledFilterSectionGrid>
   );

src/components/common/filters/ImosOnlySwitch.tsx

@@ -1,4 +1,4 @@
-import { Grid, Switch, SwitchProps } from "@mui/material";
+import { Grid, Switch, SwitchProps, Tooltip } from "@mui/material";
 import React, { FC, useCallback } from "react";
 import imos_logo from "@/assets/logos/imos-logo-transparent.png";
 import { ParameterState } from "../store/componentParamReducer";
@@ -33,17 +33,20 @@ const ImosOnlySwitch: FC<imosOnlySwitchProps> = ({ filter, setFilter }) => {
         height: "100%",
       }}
     >
-      <Grid item xs={12}>
-        <img
-          src={imos_logo}
-          alt="imos_logo"
-          style={{
-            objectFit: "contain",
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      </Grid>
+      <Tooltip title="Search for IMOS data only" placement="top">
+        <Grid item xs={12}>
+          <img
+            src={imos_logo}
+            alt="imos_logo"
+            style={{
+              objectFit: "contain",
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        </Grid>
+      </Tooltip>
+
       <Grid
         item
         xs={12}

src/components/common/filters/ParameterVocabFilter.tsx

@@ -81,10 +81,10 @@ const ParameterVocabFilter: FC<ParameterVocabFilterProps> = ({
   }, [dispatch]);
 
   return (
-    <Grid container sx={sx}>
+    <Grid container sx={{ ...sx }}>
       <Grid item xs={12}>
         <StyledToggleButtonGroup
-          value={filter.parameterVocabs?.map((c) => c.label) || []}
+          value={filter.parameterVocabs?.map((vocab) => vocab.label) || []}
           onChange={handleChange}
           aria-label="parameter vocab selection"
         >

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}