Merge pull request #188 from aodn/feature/5904-update-filter-UI

Feature/5904 update filter UI

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> = ({
@@ -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,
+        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: "Records Count", // 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/map/mapbox/component/SpiderDiagram.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -97,22 +98,22 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
   const [spiderifiedCluster, setSpiderifiedCluster] =
     useState<SpiderifiedClusterInfo | null>(null);
 
-  const config = mergeWithDefaults(
-    defaultSpiderDiagramConfig,
-    spiderDiagramConfig
+  const config = useMemo(
+    () => mergeWithDefaults(defaultSpiderDiagramConfig, spiderDiagramConfig),
+    [spiderDiagramConfig]
   );
   const { spiderifyFromZoomLevel, maxSpiderLegs } = config;
 
   // Util function to check if a cluster can spiderify or not
   const shouldCreateSpiderDiagram = useCallback(
-    (features: any[]): boolean => {
+    (features: any[], spiderifyFromZoomLevel: number): boolean => {
       const zoom = map?.getZoom() || 0;
       const clusterCount = features[0].properties.point_count;
       return (
         (!clusterCount && features.length > 1) || zoom >= spiderifyFromZoomLevel
       );
     },
-    [map, spiderifyFromZoomLevel]
+    [map]
   );
 
   // Util function to un-spiderify a spiderified cluster given its id
@@ -152,7 +153,9 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
     (
       coordinate: [number, number],
       datasets: Feature<Point>[],
-      expansionZoom: number
+      expansionZoom: number,
+      spiderifyFromZoomLevel: number,
+      config: SpiderDiagramConfig
     ) => {
       const clusterCircleId = getClusterCircleId(coordinate);
       const spiderPinsSourceId = getSpiderPinsSourceId(clusterCircleId);
@@ -309,7 +312,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
         expansionZoom,
       });
     },
-    [spiderifiedCluster, map, config, unspiderify, spiderifyFromZoomLevel]
+    [spiderifiedCluster, map, unspiderify]
   );
 
   // Util function for checking if need unspiderify on every zoom end
@@ -391,7 +394,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
       const source = map?.getSource(clusterSourceId) as GeoJSONSource;
 
       if (
-        shouldCreateSpiderDiagram(features) &&
+        shouldCreateSpiderDiagram(features, spiderifyFromZoomLevel) &&
         clusterCount <= maxSpiderLegs
       ) {
         // get first up to maxSpiderLegs(default = 50) datasets in the cluster to avoid huge spider
@@ -406,7 +409,13 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           // Store the clicked cluster info
           source.getClusterExpansionZoom(clusterId, (err, zoom) => {
             if (err) return;
-            spiderify(coordinate, datasets, zoom);
+            spiderify(
+              coordinate,
+              datasets,
+              zoom,
+              spiderifyFromZoomLevel,
+              config
+            );
           });
         });
       } else {
@@ -425,7 +434,13 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
                   return;
                 }
                 const datasets = leaves as Feature<Point>[];
-                spiderify(coordinate, datasets, zoom);
+                spiderify(
+                  coordinate,
+                  datasets,
+                  zoom,
+                  spiderifyFromZoomLevel,
+                  config
+                );
               }
             );
             return;
@@ -447,9 +462,10 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
       clusterLayer,
       clusterSourceId,
       shouldCreateSpiderDiagram,
+      spiderifyFromZoomLevel,
       maxSpiderLegs,
       spiderify,
-      config.maxSpiderLegs,
+      config,
     ]
   );
 
@@ -475,6 +491,7 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
     map,
     onClusterClick,
     onEmptySpaceClick,
+    spiderifyFromZoomLevel,
   ]);
 
   return (