Release: Refactor Project Details map for performance & other improvements

src/features/common/types/plantLocation.d.ts

@@ -39,34 +39,34 @@ export interface PlantLocationBase {
   statusReason: string | null; // currently always null. Should we do something here?
 }
 export interface PlantLocationSingle extends PlantLocationBase {
-  type: PlantLocationType;
+  type: 'single';
   scientificName: string | null;
   scientificSpecies: string | null;
   tag: string | null;
   measurements: Measurements;
   originalGeometry: Point;
-  geometry: GeometryOfSinglePlant;
+  geometry: Point;
   sampleTrees: SamplePlantLocation[];
 }
 
 export interface PlantLocationMulti extends PlantLocationBase {
-  type: PlantLocationType;
+  type: 'multi';
   nextMeasurementDate: DateString | null;
   plantDateStart: DateString | null;
   plantDateEnd: DateString | null;
   sampleTreeCount: number;
   samplePlantLocations: SamplePlantLocation[];
   plantedSpecies: PlantedSpecies[];
   originalGeometry: Polygon;
-  geometry: Geometry;
+  geometry: Point | Polygon;
   sampleTrees: SamplePlantLocation[];
 }
 
 export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
 
 export interface SamplePlantLocation
   extends Omit<PlantLocationBase, 'plantProject'> {
-  type: Type;
+  type: 'sample';
   /** parent plant location */
   parent: string;
   /** tpo profile id */

src/features/projects/components/ProjectsMap.tsx

@@ -12,6 +12,7 @@ import LayerDisabled from '../../../../public/assets/images/icons/LayerDisabled'
 import { useTranslations } from 'next-intl';
 import { ParamsContext } from '../../common/Layout/QueryParamsContext';
 import { PopupData } from './maps/Markers';
+import { PlantLocation } from '../../common/types/plantLocation';
 
 interface ShowDetailsProps {
   coordinates: [number, number] | null;
@@ -33,7 +34,6 @@ export default function ProjectsMap(): ReactElement {
     defaultMapCenter,
     defaultZoom,
     zoomLevel,
-    plIds,
     setHoveredPl,
     plantLocations,
     setSelectedPl,
@@ -85,49 +85,46 @@ export default function ProjectsMap(): ReactElement {
     setViewPort,
   };
 
+  const handlePlantLocationSelection = (
+    plantLocations: PlantLocation[] | null,
+    e: MapEvent
+  ) => {
+    if (!plantLocations || !e || !e.features || !e.features[0]) {
+      return;
+    }
+
+    const { id } = e.features[0].properties;
+    const selectedElement = plantLocations.find(
+      (location) => location.id === id
+    );
+
+    if (selectedElement) {
+      setSelectedPl(selectedElement);
+    }
+  };
+
   const onMapClick = (e: MapEvent) => {
     setSamplePlantLocation(null);
     setPopupData({ show: false });
     setIsPolygonMenuOpen(false);
     setFilterOpen(false);
-    if (e.features && e.features?.length !== 0) {
-      if (e.features[0].layer?.source) {
-        for (const key in plantLocations) {
-          if (Object.prototype.hasOwnProperty.call(plantLocations, key)) {
-            const element = plantLocations[Number(key)];
-            if (element.id === e.features[0].layer?.source) {
-              setSelectedPl(element);
-
-              break;
-            }
-          }
-        }
-        //router.replace(`/${project.slug}/${e.features[0].layer?.source}`);
-      }
-    }
+    handlePlantLocationSelection(plantLocations, e);
   };
 
   const onMapHover = (e: MapEvent) => {
-    if (e.features && e.features?.length !== 0) {
-      if (!hoveredPl || hoveredPl.type !== 'sample') {
-        if (e.features[0].layer?.source && plantLocations) {
-          for (const key in plantLocations) {
-            if (Object.prototype.hasOwnProperty.call(plantLocations, key)) {
-              const element = plantLocations[key];
-              if (element.id === e.features[0].layer?.source) {
-                setHoveredPl(element);
-                // setSelectedPl(element);
-                break;
-              }
-            }
-          }
-        }
+    if (plantLocations && e && e.features && e.features[0]) {
+      const activeElement = e.features[0];
+      const activePlantLocation = plantLocations.find(
+        (obj) => obj.id === activeElement.properties.id
+      );
+      if (activePlantLocation) {
+        setHoveredPl(activePlantLocation);
+        setShowDetails({ coordinates: e.lngLat, show: true });
       }
-      setShowDetails({ coordinates: e.lngLat, show: true });
-    } else {
-      setShowDetails({ ...showDetails, show: false });
-      setHoveredPl(null);
+      return;
     }
+    setShowDetails({ ...showDetails, show: false });
+    setHoveredPl(null);
   };
 
   React.useEffect(() => {
@@ -147,6 +144,10 @@ export default function ProjectsMap(): ReactElement {
     }
   }, [showProjectList]);
 
+  const handleOnLoad = () => {
+    setLoaded(true);
+  };
+
   return (
     <div
       className={
@@ -158,11 +159,12 @@ export default function ProjectsMap(): ReactElement {
         {...mapState}
         {...viewport}
         onViewportChange={_onViewportChange}
+        // TODO: onStateChange is deprecated, and does not work any more. _onStateChange does not seem to be called in any scenario while debugging the code. However this is left in to avoid breaking the code unintentionally. NOTE: replacing with onViewStateChange does not work as expected, the map stops zooming in to a clicked plant location, or to the site after switching between the Field data and Time travel map tabs.
         onStateChange={_onStateChange}
         onClick={onMapClick}
         onHover={onMapHover}
-        onLoad={() => setLoaded(true)}
-        interactiveLayerIds={plIds ? plIds : undefined}
+        onLoad={handleOnLoad}
+        interactiveLayerIds={['polygon-layer', 'point-layer']}
       >
         {zoomLevel === 1 && searchedProject && showProjects && (
           <Home {...homeProps} />
@@ -216,7 +218,3 @@ export default function ProjectsMap(): ReactElement {
     </div>
   );
 }
-interface DetailsType {
-  coordinates: number[];
-  show: boolean;
-}