Bugfix/5763 search page pagination UI

src/App.tsx

@@ -1,17 +1,18 @@
 // React import is not required in React 17 or later
 import { RouterProvider } from "react-router-dom";
-
 import Fallback from "./pages/Fallback";
 import { ThemeProvider } from "@mui/material/styles";
 import AppTheme from "./utils/AppTheme";
 import AppRouter from "./utils/AppRouter";
 import { CssBaseline } from "@mui/material";
+import Scrollbar from "./components/common/ScrollBar";
 
 const app = () => {
   return (
     <div>
       <ThemeProvider theme={AppTheme}>
         <CssBaseline />
+        <Scrollbar />
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
       </ThemeProvider>
     </div>

src/components/common/ScrollBar.tsx

@@ -0,0 +1,35 @@
+import { GlobalStyles } from "@mui/material";
+import { color } from "../../styles/constants";
+
+// TODO: firefox browser does not support webkit, need to find a way to fix
+const Scrollbar = () => (
+  <GlobalStyles
+    styles={{
+      "*::-webkit-scrollbar": {
+        width: "8px",
+        borderRadius: "4px",
+      },
+      "*::-webkit-scrollbar-button": {
+        display: "none",
+      },
+      "*::-webkit-scrollbar-thumb": {
+        borderRadius: "4px",
+        backgroundColor: color.blue.dark,
+        minHeight: "24px",
+        border: "none",
+        cursor: "pointer",
+      },
+      "*::-webkit-scrollbar-corner": {
+        backgroundColor: color.blue.xLight,
+      },
+      "*::-webkit-scrollbar-track": {
+        backgroundColor: color.blue.xLight,
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+      },
+    }}
+  />
+);
+
+export default Scrollbar;

src/components/common/buttons/ActionButtonPaper.tsx

@@ -1,5 +1,5 @@
 import { Paper } from "@mui/material";
-import { margin } from "../../../styles/constants";
+import { borderRadius, margin } from "../../../styles/constants";
 import React from "react";
 
 interface StyledActionButtonPaperProps {}
@@ -9,15 +9,13 @@ const ActionButtonPaper = ({
 }: React.PropsWithChildren<StyledActionButtonPaperProps>) => {
   return (
     <Paper
-      component="form"
-      variant="outlined"
+      elevation={0}
       sx={{
-        paddingLeft: "5px",
-        marginLeft: margin.md,
         display: "flex",
         alignItems: "center",
-        maxHeight: "40px",
-        width: { md: "100px" },
+        justifyContent: "center",
+        width: "100%",
+        borderRadius: borderRadius.medium,
       }}
     >
       {children}

src/components/common/filters/AdvanceFilters.tsx

@@ -48,13 +48,12 @@ const AdvanceFilters: FC<AdvanceFiltersProps> = ({
 }) => {
   const theme = useTheme();
   const dispatch = useDispatch<AppDispatch>();
-  const componentParam = useMemo(() => getComponentState(store.getState()), []);
+  const componentParam = getComponentState(store.getState());
 
   // State used to store the provisional filter options selected,
   // only dispatch to redux when 'apply' button is hit
   const [filter, setFilter] = useState<ParameterState>(componentParam);
 
-  // initialize filter
   useEffect(() => {
     if (componentParam) {
       setFilter(componentParam);

src/components/common/filters/ResultPanelIconFilter.tsx

@@ -1,19 +1,16 @@
-import { Grid, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import TimeRangeIcon from "../../icon/TimeRangeIcon";
 import SpatialIcon from "../../icon/SpatialIcon";
 import DimensionsIcon from "../../icon/Dimensions";
+import { padding } from "../../../styles/constants";
 
 const ResultPanelIconFilter = () => {
   return (
-    <Grid container sx={{ pl: 2 }}>
-      <Grid item xs={12}>
-        <Stack direction="column" spacing={2}>
-          <TimeRangeIcon />
-          <SpatialIcon />
-          <DimensionsIcon />
-        </Stack>
-      </Grid>
-    </Grid>
+    <Stack direction="column" spacing={2} paddingTop={padding.large}>
+      <TimeRangeIcon />
+      <SpatialIcon />
+      <DimensionsIcon />
+    </Stack>
   );
 };
 

src/components/common/filters/ResultPanelSimpleFilter.tsx

@@ -1,11 +1,7 @@
 import {
-  FormControl,
   Grid,
-  IconButton,
   InputBase,
-  MenuItem,
   Paper,
-  Select,
   styled,
   SxProps,
   Theme,
@@ -16,12 +12,7 @@ import MapListToggleButton, {
 } from "../buttons/MapListToggleButton";
 import SortButton, { SortButtonProps } from "../buttons/SortButton";
 import { FC } from "react";
-
-const SlimSelect = styled(InputBase)(() => ({
-  "& .MuiInputBase-input": {
-    border: "none",
-  },
-}));
+import { borderRadius, fontSize } from "../../../styles/constants";
 
 interface ResultPanelSimpleFilterProps
   extends MapListToggleButtonProps,
@@ -39,27 +30,27 @@ const ResultPanelSimpleFilter: FC<ResultPanelSimpleFilterProps> = ({
   onChangeSorting,
 }) => {
   return (
-    <Grid sx={sx} padding={1} container justifyContent="center">
-      <Grid item xs={6} sx={{ pb: 1 }}>
+    <Grid sx={sx} container justifyContent="center" spacing={1}>
+      <Grid item md={6} xs={12}>
         <Paper
-          variant="outlined"
-          component="form"
+          elevation={0}
           sx={{
-            p: "2px 4px",
             display: "flex",
+            justifyContent: "center",
             alignItems: "center",
-            width: { md: "250px" },
+            height: "100%",
+            borderRadius: borderRadius.medium,
           }}
         >
-          <Typography>
+          <Typography fontSize={fontSize.info} padding={0}>
             Showing 1-{count} of {total} results
           </Typography>
         </Paper>
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <SortButton onChangeSorting={onChangeSorting} />
       </Grid>
-      <Grid item xs={3} sx={{ pb: 1 }}>
+      <Grid item md={3} xs={6}>
         <MapListToggleButton onChangeLayout={onChangeLayout} />
       </Grid>
     </Grid>

src/components/layout/components/Header.tsx

@@ -1,32 +1,24 @@
 import { FC } from "react";
-import { Box } from "@mui/material";
 import MainMenu from "./MainMenu";
 import { padding } from "../../../styles/constants";
 import AODNSiteLogo from "./AODNSiteLogo";
+import SectionContainer from "./SectionContainer";
 
 const Header: FC = () => {
   return (
-    <Box
-      sx={{
-        display: "flex",
-        justifyContent: "center",
+    <SectionContainer
+      sectionAreaStyle={{
         backgroundColor: "#fff",
         paddingY: padding.medium,
       }}
+      contentAreaStyle={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+      }}
     >
-      <Box
-        sx={{
-          width: "70%",
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <AODNSiteLogo />
-        <MainMenu />
-      </Box>
-    </Box>
+      <AODNSiteLogo />
+      <MainMenu />
+    </SectionContainer>
   );
 };
 

src/components/layout/components/SectionContainer.tsx

@@ -1,9 +1,10 @@
 import { Box, Stack, SxProps } from "@mui/material";
 import { ReactNode } from "react";
 import {
-  LANDING_PAGE_MAX_WIDTH,
-  LANDING_PAGE_MIN_WIDTH,
-} from "../../../pages/landing-page/constants";
+  PAGE_CONTENT_MAX_WIDTH,
+  PAGE_CONTENT_MIN_WIDTH,
+  PAGE_CONTENT_WIDTH,
+} from "../constant";
 
 interface SectionContainerProps {
   children: ReactNode;
@@ -29,9 +30,9 @@ const SectionContainer = ({
       justifyContent="center"
       alignItems="center"
       sx={{
-        minWidth: LANDING_PAGE_MIN_WIDTH,
-        width: "80%",
-        maxWidth: LANDING_PAGE_MAX_WIDTH,
+        minWidth: PAGE_CONTENT_MIN_WIDTH,
+        width: PAGE_CONTENT_WIDTH,
+        maxWidth: PAGE_CONTENT_MAX_WIDTH,
         ...contentAreaStyle,
       }}
     >

src/components/layout/constant.ts

@@ -0,0 +1,3 @@
+export const PAGE_CONTENT_MIN_WIDTH = 1020;
+export const PAGE_CONTENT_MAX_WIDTH = 1270;
+export const PAGE_CONTENT_WIDTH = 0.8;

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

@@ -32,7 +32,7 @@ interface SpiderDiagramProps extends LayersProps {
 }
 
 const defaultSpiderDiagramConfig: SpiderDiagramConfig = {
-  spiderifyFromZoomLevel: 11,
+  spiderifyFromZoomLevel: 8,
   circleSpiralSwitchover: 9,
   circleFootSeparation: 25,
   spiralFootSeparation: 28,
@@ -166,8 +166,8 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           let angle = 0;
           return Array.from({ length: count }, (_, index) => {
             angle += spiralFootSeparation / legLength + index * 0.0005;
-            const x = legLength * Math.cos(angle);
-            const y = legLength * Math.sin(angle);
+            const x = legLength * Math.cos(angle) * 10;
+            const y = legLength * Math.sin(angle) * 10;
             legLength += (2 * Math.PI * spiralLengthFactor) / angle;
             return { x, y, angle, legLength, index };
           });
@@ -179,8 +179,8 @@ const SpiderDiagram: FC<SpiderDiagramProps> = ({
           return Array.from({ length: count }, (_, index) => {
             const angle = index * angleStep;
             return {
-              x: legLength * Math.cos(angle),
-              y: legLength * Math.sin(angle),
+              x: legLength * Math.cos(angle) * 15,
+              y: legLength * Math.sin(angle) * 15,
               angle,
               legLength,
               index,

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

@@ -48,7 +48,7 @@ const defaultClusterLayerConfig: ClusterLayerConfig = {
     large: 30,
     extra_large: 50,
   },
-  clusterMaxZoom: 14,
+  clusterMaxZoom: 8,
   clusterRadius: 50,
   // circle sizes define the radius(px) of the circles used to represent clusters on the map.
   clusterCircleSize: {
@@ -123,11 +123,13 @@ const ClusterLayer: FC<ClusterLayerProps> = ({
         clusterLayerConfig
       );
 
+      map?.setMaxZoom(config.clusterMaxZoom);
+
       map?.addSource(clusterSourceId, {
         type: "geojson",
         data: createCenterOfMassDataSource(undefined),
         cluster: true,
-        clusterMaxZoom: 14,
+        clusterMaxZoom: config.clusterMaxZoom,
         clusterRadius: 50,
       });
 

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

@@ -28,6 +28,7 @@ interface HeatmapCircle {
 }
 
 interface HeatmapConfig {
+  clusterMaxZoom: number;
   heatmapSourceRadius: number;
   layer: HeatmapLayer;
   circle: HeatmapCircle;
@@ -39,6 +40,7 @@ interface HeatmapLayerProps extends LayersProps {
 }
 
 const defaultHeatmapConfig: HeatmapConfig = {
+  clusterMaxZoom: 8,
   heatmapSourceRadius: 10,
   circle: {
     strokeColor: "white",
@@ -129,6 +131,8 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
         heatmapLayerConfig
       );
 
+      map?.setMaxZoom(config.clusterMaxZoom);
+
       if (!map?.getSource(heatmapSourceId)) {
         map?.addSource(heatmapSourceId, {
           type: "geojson",
@@ -142,7 +146,7 @@ const HeatmapLayer: FC<HeatmapLayerProps> = ({
           type: "geojson",
           data: dataSource,
           cluster: true,
-          clusterMaxZoom: 14,
+          clusterMaxZoom: config.clusterMaxZoom,
           clusterRadius: config.heatmapSourceRadius,
         });
       }

src/components/result/ResultCards.tsx

@@ -5,10 +5,7 @@ import { Box, Grid, ListItem, Stack, SxProps, Theme } from "@mui/material";
 import GridResultCard from "./GridResultCard";
 import ListResultCard from "./ListResultCard";
 import { SearchResultLayoutEnum } from "../common/buttons/MapListToggleButton";
-import {
-  OGCCollection,
-  OGCCollections,
-} from "../common/store/OGCCollectionDefinitions";
+import { OGCCollection } from "../common/store/OGCCollectionDefinitions";
 import AutoSizer, { Size } from "react-virtualized-auto-sizer";
 import DetailSubtabBtn from "../common/buttons/DetailSubtabBtn";
 
@@ -66,7 +63,7 @@ const ResultCards = ({
         sx={{ width: "100%", height: "305px", overflowY: "auto" }}
       >
         {datasetsSelected?.map((dataset, index) => (
-          <Box key={index} width="100%" height="300px">
+          <Box key={index} width="49%" height="300px">
             <GridResultCard
               content={dataset}
               onDownload={onDownload}