From d4ca4e5feb4fab698e03739469c7e602a3fabfae Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Fri, 14 Feb 2025 18:29:35 +0700
Subject: [PATCH 1/3] fix: show single tree plant locations on map (data
 explorer)

---
 .../user/TreeMapper/Analytics/components/Map/index.tsx   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/features/user/TreeMapper/Analytics/components/Map/index.tsx b/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
index 5967191bd..e32752a68 100644
--- a/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
+++ b/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
@@ -434,6 +434,15 @@ export const MapContainer = () => {
               onClick={handleMapClick}
             >
               <Source type="geojson" data={plantLocations}>
+                <Layer
+                  id={`point-layer`}
+                  type="circle"
+                  paint={{
+                    'circle-color': '#007A49',
+                    'circle-opacity': 0.5,
+                  }}
+                  filter={['==', ['geometry-type'], 'Point']}
+                />
                 <Layer
                   id="plant-locations-fill"
                   type="fill"

From 55c56ab4a65fb383f1ba5ad6f9931fbe4ea824de Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:04:41 +0700
Subject: [PATCH 2/3] fix: hide irrelevant data for single tree plant locations
 in data explorer

---
 .../PlantLocationDetails/index.module.scss      |  6 ++++--
 .../components/PlantLocationDetails/index.tsx   | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss b/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss
index d2a30f38c..de24b111d 100644
--- a/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss
+++ b/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss
@@ -136,8 +136,11 @@
           .individualSpeciesContainer {
             display: flex;
 
-            .speciesName {
+            > *:not(:last-child) {
               border-right: 1px solid #68b03066;
+            }
+
+            .speciesName {
               width: 120px;
               white-space: nowrap;
               overflow: hidden;
@@ -147,7 +150,6 @@
             }
 
             .count {
-              border-right: 1px solid #68b03066;
               display: flex;
               justify-content: center;
               align-items: center;
diff --git a/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx b/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx
index 94dc85c08..45562bb27 100644
--- a/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx
+++ b/src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx
@@ -77,13 +77,16 @@ const ListOfSpeciesPlanted = ({
               <div className={styles.count}>
                 {getFormattedNumber(locale, species.treeCount)}
               </div>
-              <div className={styles.totalPercentage}>
-                {(
-                  (species.treeCount / plantLocationDetails.totalPlantedTrees) *
-                  100
-                ).toFixed(2)}
-                %
-              </div>
+              {plantLocationDetails.totalPlantedTrees > 1 && (
+                <div className={styles.totalPercentage}>
+                  {(
+                    (species.treeCount /
+                      plantLocationDetails.totalPlantedTrees) *
+                    100
+                  ).toFixed(2)}
+                  %
+                </div>
+              )}
             </div>
           );
         })}

From bd5041508712611e1843d49caecadc3cd0fd33d8 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Mon, 17 Feb 2025 17:57:28 +0700
Subject: [PATCH 3/3] feat: adds pointer cursor above map interactive layers
 (data explorer)

---
 .../Analytics/components/Map/index.tsx        | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/features/user/TreeMapper/Analytics/components/Map/index.tsx b/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
index e32752a68..89b16f278 100644
--- a/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
+++ b/src/features/user/TreeMapper/Analytics/components/Map/index.tsx
@@ -9,9 +9,9 @@ import type {
 } from '../../../../../common/types/dataExplorer';
 import type { ProjectType } from '../ProjectTypeSelector';
 import type { ChangeEvent, MutableRefObject } from 'react';
-import type { ViewportProps } from 'react-map-gl';
+import type { ViewportProps, MapRef, MapEvent } from 'react-map-gl';
 
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { TextField } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { Search } from '@mui/icons-material';
@@ -91,7 +91,7 @@ export const MapContainer = () => {
   const { setErrors } = useContext(ErrorHandlingContext);
   const t = useTranslations('TreemapperAnalytics');
 
-  const mapRef: MutableRefObject<null> = useRef(null);
+  const mapRef: MutableRefObject<MapRef | null> = useRef(null);
   const [mapState, setMapState] = useState({
     mapStyle: EMPTY_STYLE,
     dragPan: true,
@@ -340,6 +340,22 @@ export const MapContainer = () => {
     }
   };
 
+  const onMouseEnter = useCallback((event: MapEvent) => {
+    if (event.features && event.features.length > 0) {
+      if (mapRef.current) {
+        const map = mapRef.current.getMap();
+        map.getCanvas().style.cursor = 'pointer';
+      }
+    }
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    if (mapRef.current) {
+      const map = mapRef.current.getMap();
+      map.getCanvas().style.cursor = '';
+    }
+  }, []);
+
   // Handle search input change
   // This will be used to filter the plant locations on the map based on the search input
   // The search input can be either a HID or a Date
@@ -432,6 +448,9 @@ export const MapContainer = () => {
               onViewStateChange={_handleViewport}
               onViewportChange={(viewport) => setViewport(viewport)}
               onClick={handleMapClick}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              interactiveLayerIds={['point-layer', 'plant-locations-fill']}
             >
               <Source type="geojson" data={plantLocations}>
                 <Layer