Fixed map not loading on first refresh, LocalitiesMap cleanup

frontend/src/components/Locality/LocalityTable.tsx

@@ -28,8 +28,10 @@ export const LocalityTable = ({ selectorFn }: { selectorFn?: (newObject: Localit
     // Filter localities for the map component
     const localityIds = columnFilters.idList as unknown as number[]
     const validIds = localityIds.filter(id => typeof id === 'number')
-    const localities = localitiesQueryData?.filter(locality => validIds.includes(locality.lid))
-    setFilteredLocalities(localities as SimplifiedLocality[])
+
+    if (validIds.length > 0)
+      setFilteredLocalities(localitiesQueryData?.filter(locality => validIds.includes(locality.lid)))
+    else setFilteredLocalities(localitiesQueryData as SimplifiedLocality[])
   }, [columnFilters, localitiesQueryData])
 
   const columns = useMemo<MRT_ColumnDef<Locality>[]>(
@@ -427,9 +429,7 @@ export const LocalityTable = ({ selectorFn }: { selectorFn?: (newObject: Localit
 
   return (
     <>
-      {filteredLocalities && filteredLocalities.length !== 0 && (
-        <LocalitiesMap localities={filteredLocalities} isFetching={localitiesQueryIsFetching} />
-      )}
+      <LocalitiesMap localities={filteredLocalities} isFetching={localitiesQueryIsFetching} />
       <TableView<Locality>
         title="Localities"
         selectorFn={selectorFn}

frontend/src/components/Map/LocalitiesMap.tsx

@@ -5,7 +5,6 @@ import { borders } from './country_borders_WGS84'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import L, { LatLngExpression } from 'leaflet'
 import { SimplifiedLocality } from '@/shared/types/data.js'
-import { usePageContext } from '../Page'
 import { skipToken } from '@reduxjs/toolkit/query'
 import './leaflet.markercluster.js'
 import './MarkerCluster.css'
@@ -29,12 +28,12 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
   const [map, setMap] = useState<L.Map | null>(null)
   const [isOpen, setIsOpen] = useState(false)
   const [localityDetailsIsOpen, setLocalityDetailsIsOpen] = useState(false)
-  const columnFilters = usePageContext()
-  const [cluster, setCluster] = useState(true)
+  const [clusteringEnabled, setClusteringEnabled] = useState(true)
 
+  // Use skipToken to skip query when state is null
   const { data: localityDetailsQueryData, isFetching: detailsLoading } = useGetLocalityDetailsQuery(
     selectedLocality ?? skipToken
-  ) // use skipToken to skip query when state is null
+  )
 
   useEffect(() => {
     if (!mapRef.current) return
@@ -45,26 +44,28 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
     const coords: LatLngExpression = [15, 13]
     mapInstance.setView(coords, 3)
 
-    // BASE MAPS
-    //// OpenTopoMap
+    // ---- Base maps ----
+
+    // OpenTopoMap
     const topomap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
       attribution: 'Map data: © <a href="https://opentopomap.org">OpenTopoMap</a> (CC-BY-SA)',
       noWrap: true,
     }).addTo(mapInstance)
 
-    //// OpenStreetMap
+    // OpenStreetMap
     const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       noWrap: true,
     })
 
-    // LAYERS ON TOP OF BASE MAPS
-    //// Add borders to the map
+    // ---- Layers on top of base maps ----
+
+    // Add borders to the map
     borders.forEach(poly => {
       L.polygon(poly as LatLngExpression[], { color: 'gray', weight: 1 }).addTo(mapInstance)
     })
 
-    // create a polygon layer for the country borders that is in layer control panel..
+    // Create a polygon layer for the country borders that is in layer control panel.
     const borderLayer = L.layerGroup()
     borders.forEach(country_border => {
       const polygon = L.polygon(country_border as LatLngExpression[], {
@@ -81,13 +82,13 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
       Countries: borderLayer,
     }
 
-    // Add a scale bar to the map
+    // Scale bar
     L.control.scale({ position: 'bottomright' }).addTo(mapInstance)
 
-    //Add a layer control to the map
+    // Layer control
     L.control.layers(baseMaps, {}, { position: 'topright' }).addTo(mapInstance)
 
-    // Add north-arrow to the map
+    // North-arrow
     const northArrowControl = L.Control.extend({
       onAdd: function () {
         const img = L.DomUtil.create('img')
@@ -96,7 +97,6 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
         return img
       },
     })
-
     const northArrow = new northArrowControl({ position: 'bottomright' })
     northArrow.addTo(mapInstance)
 
@@ -116,7 +116,7 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
 
     // @ts-expect-error The marker cluster library is a plain javascript library
     // with no module exports that extends 'L' when imported
-    const newMarkers: Layer = cluster ? L.markerClusterGroup() : L.layerGroup()
+    const newMarkers: Layer = clusteringEnabled ? L.markerClusterGroup() : L.layerGroup()
 
     localities?.forEach(locality => {
       const options: CustomCircleMarkerOptions = {
@@ -149,7 +149,7 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       map.removeLayer(newMarkers)
     }
-  }, [localities, isFetching, columnFilters, map, cluster])
+  }, [localities, isFetching, map, clusteringEnabled])
 
   document.title = 'Map'
 
@@ -158,8 +158,8 @@ export const LocalitiesMap = ({ localities, isFetching }: Props) => {
       <article id="localities-map">
         <div id="map-container" className={isOpen ? 'open' : ''}>
           <div className={'map'} ref={mapRef} style={{ flex: 1 }} />
-          <button className="cluster-btn" onClick={() => setCluster(cluster => !cluster)}>
-            {cluster ? 'Show individual' : 'Show cluster'}
+          <button className="cluster-btn" onClick={() => setClusteringEnabled(cluster => !cluster)}>
+            {clusteringEnabled ? 'Show individual' : 'Show cluster'}
           </button>
           <div id="blur-container" className={isOpen ? 'open' : ''}></div>
         </div>