Add option to provide custom labels to tooltip and use legend labels for the tooltip value; COUNTRY=rbd

frontend/src/components/MapView/Layers/layer-utils.tsx

@@ -8,7 +8,7 @@ import {
   AdminLevelDataLayerProps,
   PointDataLayerProps,
 } from 'config/types';
-import { addPopupData } from 'context/tooltipStateSlice';
+import { PopupData, addPopupData } from 'context/tooltipStateSlice';
 import { findFeature, getEvtCoords, getLayerMapId } from 'utils/map-utils';
 import { getRoundedData } from 'utils/data-utils';
 import { i18nTranslator } from 'i18n';
@@ -85,23 +85,46 @@ export const addPopupParams = (
 
   const coordinates = getEvtCoords(evt);
 
-  const { dataField, featureInfoProps, title } = layer;
+  const {
+    dataField,
+    featureInfoProps,
+    title,
+    dataLabel,
+    displaySource,
+    legend,
+  } = layer;
 
   // adminLevelLayer uses data field by default.
   const propertyField: string = dataField
     ? `properties.${dataField}`
     : 'properties.data';
 
-  // by default add `dataField` to the tooltip if it is not within the feature_info_props dictionary.
-  if (!Object.keys(featureInfoProps || {}).includes(dataField)) {
-    dispatch(
-      addPopupData({
-        [title]: {
-          data: getRoundedData(get(feature, propertyField), t),
-          coordinates,
-        },
-      }),
-    );
+  // By default, we add `dataField` to the tooltip if it is not within the feature_info_props dictionary.
+  // If a custom dataLabel is provided, we'll make sure to use that before the value
+  // If displaySource is set to `legend_label`, use the matching legend label for the dataField.
+  const useCustomLabel = !!dataLabel || displaySource === 'legend_label';
+  if (
+    useCustomLabel ||
+    !Object.keys(featureInfoProps || {}).includes(dataField)
+  ) {
+    const customDisplayData =
+      displaySource === 'legend_label' &&
+      legend.find(
+        legendItem => legendItem.value === get(feature, propertyField),
+      )?.label;
+    const displayData = customDisplayData
+      ? `${t(`${customDisplayData}`)}`
+      : getRoundedData(get(feature, propertyField), t);
+
+    const popupDataRows: PopupData = {
+      ...(dataLabel ? { [title]: { data: null, coordinates } } : {}),
+      [dataLabel ?? title]: {
+        data: displayData,
+        coordinates,
+      },
+    };
+
+    dispatch(addPopupData(popupDataRows));
   }
 
   // Add feature_info_props as extra fields to the tooltip
@@ -120,22 +143,28 @@ export const addPopupParams = (
     });
   }
 
+  // temporary fix for the admin level
+  const possibleAdminLevelData: PopupData = adminLevel
+    ? {
+        'Admin Level': {
+          data: feature.properties.adminLevel,
+          coordinates,
+        },
+      }
+    : {};
+
+  const featureInfoPropsData = getFeatureInfoPropsData(
+    featureInfoPropsWithFallback || {},
+    coordinates,
+    feature,
+  );
+
   dispatch(
     addPopupData({
-      // temporary fix for the admin level
-      ...(adminLevel
-        ? {
-            'Admin Level': {
-              data: feature.properties.adminLevel,
-              coordinates,
-            },
-          }
-        : {}),
-      ...getFeatureInfoPropsData(
-        featureInfoPropsWithFallback || {},
-        coordinates,
-        feature,
-      ),
+      // Only if we're providing a custom label, put the data before admin level
+      ...(!useCustomLabel ? possibleAdminLevelData : {}),
+      ...featureInfoPropsData,
+      ...(useCustomLabel ? possibleAdminLevelData : {}),
     }),
   );
 };

frontend/src/components/MapView/MapTooltip/PopupContent.tsx

@@ -168,6 +168,10 @@ const PopupContent = ({
           return true;
         })
         .map(([key, value]) => {
+          // If the data is undefined, null, or an empty string, we do not render the data (only render the key)
+          const isKeyValuePair = [undefined, null, ''].every(
+            item => item !== value.data,
+          );
           return (
             <Fragment key={key}>
               <div>
@@ -180,10 +184,10 @@ const PopupContent = ({
                       color="inherit"
                       className={classes.text}
                     >
-                      {`${t(key)}: `}
+                      {isKeyValuePair ? `${t(key)}: ` : t(key)}
                     </Typography>
                   )}
-                {key !== 'Population in phase 1' && (
+                {key !== 'Population in phase 1' && isKeyValuePair && (
                   <Typography
                     display="inline"
                     variant="h4"

frontend/src/components/MapView/utils.ts

@@ -19,6 +19,7 @@ import { Column, quoteAndEscapeCell } from 'utils/analysis-utils';
 import { TableRow } from 'context/analysisResultStateSlice';
 import { AdminBoundaryParams, EWSParams } from 'context/datasetStateSlice';
 import { MapRef, Point } from 'react-map-gl/maplibre';
+import { PopupData } from 'context/tooltipStateSlice';
 import { getExtent } from './Layers/raster-utils';
 
 // TODO: maplibre: fix feature
@@ -156,7 +157,7 @@ export function getFeatureInfoPropsData(
   featureInfoProps: FeatureInfoObject,
   coordinates: number[],
   feature: any,
-) {
+): PopupData {
   const [keys, metaDataKeys] = sortKeys(featureInfoProps);
   const { properties } = feature;