Merge branch 'master' into water-quality-data

packages/api/package.json

@@ -78,7 +78,7 @@
     "@turf/turf": "^6.5.0",
     "@types/bluebird": "^3.5.32",
     "@types/node-xlsx": "^0.15.3",
-    "axios": "^1.7.4",
+    "axios": "^1.7.8",
     "axios-retry": "^3.8.1",
     "bluebird": "^3.7.2",
     "class-transformer": "^0.3.1",

packages/website/src/common/Chart/MultipleSensorsCharts/__snapshots__/index.test.tsx.snap

@@ -794,7 +794,7 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
                       >
                         36.1
                          
-                        psu
+                        ppt
                       </mock-typography>
                     </div>
                     <div
@@ -807,7 +807,7 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
                       >
                         34.9
                          
-                        psu
+                        ppt
                       </mock-typography>
                     </div>
                     <div
@@ -820,7 +820,7 @@ exports[`MultipleSensorsCharts should render with given state from Redux store 1
                       >
                         33.8
                          
-                        psu
+                        ppt
                       </mock-typography>
                     </div>
                   </div>

packages/website/src/common/SiteDetails/WaterSampling/utils.ts

@@ -123,7 +123,7 @@ export function metricFields(
         {
           label: 'Salinity',
           value: `${formatNumber(data?.salinity, 1)}`,
-          unit: 'psu',
+          unit: source === 'hui' ? 'ppt' : 'psu',
           xs: 6,
         },
       ];

packages/website/src/constants/chartConfigs/huiConfig.ts

@@ -9,7 +9,7 @@ export type SondeMetricsKeys = Extract<
 export const huiConfig: Record<SondeMetricsKeys, BaseSourceConfig> = {
   salinity: {
     title: 'Salinity',
-    units: 'psu',
+    units: 'ppt',
     description: '',
     visibility: 'public',
     order: 1,

packages/website/src/helpers/dates.ts

@@ -217,6 +217,7 @@ export const rangeOverlapWithRange = (
 ) => {
   return (
     (minDate2 <= minDate1 && minDate1 <= maxDate2) ||
-    (minDate2 <= maxDate1 && maxDate1 <= maxDate2)
+    (minDate2 <= maxDate1 && maxDate1 <= maxDate2) ||
+    (minDate1 <= maxDate2 && maxDate2 <= maxDate1)
   );
 };

packages/website/src/helpers/map.ts

@@ -170,8 +170,8 @@ export const useSensorIcon = (
   color: string,
 ) => {
   const classes = useMarkerStyles();
-  const iconWidth = sensor === 'spotter' ? 20 : 25;
-  const iconHeight = sensor === 'spotter' ? 20 : 25;
+  const iconWidth = sensor === 'spotter' ? 15 : 20;
+  const iconHeight = sensor === 'spotter' ? 15 : 20;
   return L.divIcon({
     iconSize: [iconWidth, iconHeight],
     iconAnchor: [iconWidth / 2, 0],

packages/website/src/routes/HomeMap/Map/Markers/index.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 import { LayerGroup, useLeaflet } from 'react-leaflet';
 import MarkerClusterGroup from 'react-leaflet-markercluster';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import L from 'leaflet';
 import { sitesToDisplayListSelector } from 'store/Sites/sitesListSlice';
 import { Site } from 'store/Sites/types';
@@ -34,9 +34,13 @@ const clusterIcon = (cluster: any) => {
 
 export const SiteMarkers = ({ collection }: SiteMarkersProps) => {
   const storedSites = useSelector(sitesToDisplayListSelector);
-  const sitesList = collection?.sites || storedSites || [];
+  const sitesList = useMemo(
+    () => collection?.sites || storedSites || [],
+    [collection?.sites, storedSites],
+  );
   const siteOnMap = useSelector(siteOnMapSelector);
   const { map } = useLeaflet();
+  const [visibleSites, setVisibleSites] = useState(sitesList);
 
   const setCenter = useCallback(
     (inputMap: L.Map, latLng: [number, number], zoom: number) => {
@@ -50,7 +54,31 @@ export const SiteMarkers = ({ collection }: SiteMarkersProps) => {
     },
     [],
   );
-  // zoom in and center on site marker when it's clicked
+
+  const filterSitesByViewport = useCallback(() => {
+    if (!map) return;
+
+    const bounds = map.getBounds();
+    const filtered = sitesList.filter((site: Site) => {
+      if (!site.polygon || site.polygon.type !== 'Point') return false;
+      const [lng, lat] = site.polygon.coordinates;
+      return bounds.contains([lat, lng]);
+    });
+    setVisibleSites(filtered);
+  }, [map, sitesList]);
+
+  useEffect(() => {
+    if (!map) return undefined;
+
+    filterSitesByViewport();
+    map.on('moveend', filterSitesByViewport);
+
+    return () => {
+      map.off('moveend', filterSitesByViewport);
+      return undefined;
+    };
+  }, [map, filterSitesByViewport]);
+
   useEffect(() => {
     if (map && siteOnMap?.polygon.type === 'Point') {
       const [lng, lat] = siteOnMap.polygon.coordinates;
@@ -64,7 +92,7 @@ export const SiteMarkers = ({ collection }: SiteMarkersProps) => {
         iconCreateFunction={clusterIcon}
         disableClusteringAtZoom={1}
       >
-        {sitesList.map((site: Site) => (
+        {visibleSites.map((site: Site) => (
           <SiteMarker key={site.id} site={site} setCenter={setCenter} />
         ))}
       </MarkerClusterGroup>

packages/website/src/routes/HomeMap/Map/index.tsx

@@ -131,6 +131,7 @@ const HomepageMap = ({
       id="sites-map"
       ref={ref}
       preferCanvas
+      renderer={L.canvas()}
       maxBoundsViscosity={1.0}
       className={classes.map}
       center={initialCenter}