feat: adapt PlantLocationDetails for single tree registration

- updates API to return correct data for single tree registration
- displays only relevant data for single tree registration
- add header to display selected plant location hid

Author: mohitb35

pages/api/data-explorer/map/plant-location/[plantLocationId].ts

@@ -14,24 +14,32 @@ handler.get(async (req, response) => {
   const query = `
     SELECT
     JSON_OBJECT(
+						'properties', (
+								SELECT JSON_OBJECT(
+										'type', iv.type,
+										'hid', iv.hid
+								)
+								FROM intervention iv
+								WHERE iv.guid = ?
+						),
             'plantedSpecies', (
                 SELECT JSON_ARRAYAGG(
                     JSON_OBJECT(
                         'scientificName', COALESCE(ss.name, ps.other_species, iv.other_species),
-                        'treeCount', ps.tree_count
+                        'treeCount', COALESCE(ps.tree_count, iv.trees_planted, 0)
                     )
                 )
-                FROM planted_species ps
-                INNER JOIN intervention iv ON ps.intervention_id = iv.id
-                LEFT JOIN scientific_species ss ON ps.scientific_species_id = ss.id
+                FROM intervention iv
+                LEFT JOIN planted_species ps ON iv.id = ps.intervention_id
+                LEFT JOIN scientific_species ss ON COALESCE(iv.scientific_species_id, ps.scientific_species_id) = ss.id
                 WHERE iv.guid = ?
                 GROUP BY iv.id
             ),
             'totalPlantedTrees', (
-              SELECT SUM(ps.tree_count)
-              FROM planted_species ps
-              INNER JOIN intervention iv ON ps.intervention_id = iv.id
-              LEFT JOIN scientific_species ss ON ps.scientific_species_id = ss.id
+              SELECT SUM(COALESCE(ps.tree_count, iv.trees_planted, 0))
+              FROM intervention iv
+              LEFT JOIN planted_species ps ON iv.id = ps.intervention_id
+              LEFT JOIN scientific_species ss ON COALESCE(iv.scientific_species_id, ps.scientific_species_id) = ss.id
               WHERE iv.guid = ?
               GROUP BY iv.id
           ),
@@ -58,15 +66,15 @@ handler.get(async (req, response) => {
                     )
                 )
                 FROM intervention iv
-                LEFT JOIN intervention siv ON iv.id = siv.parent_id
+                INNER JOIN intervention siv ON iv.id = siv.parent_id
                 LEFT JOIN scientific_species ss ON iv.scientific_species_id = ss.id
                 WHERE iv.guid = ?
                 GROUP BY iv.parent_id
             ),
             'totalSamplePlantLocations', (
                 SELECT COUNT(*) 
                 FROM intervention iv
-                LEFT JOIN intervention siv ON iv.id = siv.parent_id
+                INNER JOIN intervention siv ON iv.id = siv.parent_id
                 WHERE iv.guid = ?
                 GROUP BY iv.parent_id
             )
@@ -79,6 +87,7 @@ handler.get(async (req, response) => {
     plantLocationId,
     plantLocationId,
     plantLocationId,
+    plantLocationId,
   ]);
 
   const plantLocationDetails: PlantLocationDetails = JSON.parse(res[0].result);

public/static/locales/en/treemapperAnalytics.json

@@ -69,6 +69,10 @@
     "sites": "Sites",
     "searchDateError": "Search date is not between the selected date range.",
     "noProjectsText": "No projects are available.",
-    "addProjectsButton": "Add A Project"
+    "addProjectsButton": "Add A Project",
+    "plantLocationType": {
+      "single-tree-registration": "Single Tree",
+      "multi-tree-registration": "Multiple Trees"
+    }
   }
 }

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

@@ -124,36 +124,45 @@ export interface PlantLocationDetailsQueryRes {
   result: string;
 }
 
+export interface PlantLocationProperties {
+  hid: string;
+  type: 'single-tree-registration' | 'multi-tree-registration';
+}
+
 export interface PlantLocationDetails {
+  properties: PlantLocationProperties;
   plantedSpecies: PlantedSpecies[];
   totalPlantedTrees: number;
-  samplePlantLocations: SamplePlantLocation[];
-  totalSamplePlantLocations: number;
+  samplePlantLocations: null | SamplePlantLocation[];
+  totalSamplePlantLocations: null | number;
 }
 
 // --- types for plantLocationDetailsApi ------
 
 export interface PlantLocationDetailsApiResponse {
   res: {
+    properties: PlantLocationProperties;
     plantedSpecies: {
       treeCount: number;
       scientificName: string;
     }[];
     totalPlantedTrees: number;
-    samplePlantLocations: {
-      tag: string;
-      guid: string;
-      species: string;
-      geometry: {
-        type: string;
-        coordinates: number[];
-      };
-      measurements: {
-        width: string;
-        height: string;
-      };
-    }[];
-    totalSamplePlantLocations: number;
+    samplePlantLocations:
+      | null
+      | {
+          tag: string;
+          guid: string;
+          species: string;
+          geometry: {
+            type: string;
+            coordinates: number[];
+          };
+          measurements: {
+            width: string;
+            height: string;
+          };
+        }[];
+    totalSamplePlantLocations: null | number;
   };
 }
 

src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss

@@ -70,6 +70,19 @@
       row-gap: 16px;
       width: 100%;
 
+      .header {
+        width: 100%;
+        padding: 0 5px;
+        font-size: 12px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: -8px;
+
+        .hid {
+          font-weight: 500;
+        }
+      }
+
       .topContainer {
         display: flex;
         justify-content: space-between;

src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx

@@ -3,6 +3,7 @@ import styles from './index.module.scss';
 import {
   PlantLocationDetailsApiResponse,
   PlantLocation,
+  PlantLocationProperties,
 } from '../../../../../../../common/types/dataExplorer';
 import PlantLocationDetailsZeroState from '../PlantLocationDetailsZeroState';
 import TreeMapperIcon from '../TreeMapperIcon';
@@ -134,16 +135,30 @@ const SampleTreesInfo = ({
   );
 };
 
+const PlantLocationHeader = ({ type, hid }: PlantLocationProperties) => {
+  const t = useTranslations('TreemapperAnalytics');
+  const formattedHid = hid.substring(0, 3) + '-' + hid.substring(3);
+
+  return (
+    <header className={styles.header}>
+      <div>{t(`plantLocationType.${type}`)}</div>
+      <div className={styles.hid}>#{formattedHid}</div>
+    </header>
+  );
+};
+
 const PlantLocationDetails = ({
   plantLocationDetails,
   selectedLayer,
   loading,
 }: Props) => {
+  const plantLocationType = plantLocationDetails?.properties.type;
+
   const hasData =
     plantLocationDetails !== null &&
     Boolean(
-      selectedLayer.treeCount ||
-        selectedLayer?.density ||
+      (plantLocationType === 'multi-tree-registration' &&
+        (selectedLayer.treeCount || selectedLayer.density)) ||
         (plantLocationDetails?.plantedSpecies?.length || 0) > 0 ||
         (plantLocationDetails?.samplePlantLocations?.length || 0) > 0
     );
@@ -158,9 +173,18 @@ const PlantLocationDetails = ({
           </>
         ) : hasData ? (
           <div className={styles.contentTop}>
-            <PlantationUnitInfo selectedLayer={selectedLayer} />
+            <PlantLocationHeader
+              type={plantLocationDetails.properties.type}
+              hid={plantLocationDetails.properties.hid}
+            />
+            {plantLocationType === 'multi-tree-registration' && (
+              <PlantationUnitInfo selectedLayer={selectedLayer} />
+            )}
             <ListOfSpeciesPlanted plantLocationDetails={plantLocationDetails} />
-            <SampleTreesInfo plantLocationDetails={plantLocationDetails} />
+            {plantLocationType === 'multi-tree-registration' &&
+              plantLocationDetails.totalSamplePlantLocations !== null && (
+                <SampleTreesInfo plantLocationDetails={plantLocationDetails} />
+              )}
           </div>
         ) : (
           <>