map legend: merges binary and continuous features

Author: agnlez

app/hooks/map/constants.tsx

@@ -252,7 +252,7 @@ export const LEGEND_LAYERS = {
     }));
   },
 
-  'features-preview-new': (options: {
+  'binary-features': (options: {
     items: { id: string; name: string; color: string }[];
     onChangeVisibility: (featureId: Feature['id']) => void;
   }) => {
@@ -314,7 +314,7 @@ export const LEGEND_LAYERS = {
     },
   }),
   // ANALYSIS
-  ['features-abundance']: (options: {
+  ['continuous-features']: (options: {
     items: {
       id: Feature['id'];
       amountRange: { min: number; max: number };
@@ -326,7 +326,7 @@ export const LEGEND_LAYERS = {
     const { items, onChangeVisibility } = options;
 
     return items?.map(({ id, name, amountRange, color }) => ({
-      id: `feature-abundance-${id}`,
+      id,
       name,
       type: 'gradient' as LegendItemType,
       settingsManager: {

app/hooks/map/index.ts

@@ -770,7 +770,8 @@ export function usePUGridLayer({
                   const {
                     visibility = true,
                     opacity = 1,
-                    amountRange = { min: 50000, max: 1000000 },
+                    amountRange,
+                    color,
                   } = restLayerSettings[featureId] || {};
 
                   return {
@@ -804,10 +805,9 @@ export function usePUGridLayer({
                           ['linear'],
                           ['var', 'amount'],
                           amountRange.min,
-                          'white', // ! use COLORS.abundance.default instead when is available
+                          COLORS.abundance.default,
                           amountRange.max,
-                          'green',
-                          // color, // ! enable the color variable when we receive it
+                          color,
                         ],
                       ],
                       'fill-opacity': opacity,

app/hooks/map/types.ts

@@ -177,6 +177,7 @@ export interface UsePUGridLayer {
           min: number;
           max: number;
         };
+        color?: string;
       };
     };
   };

app/layout/projects/show/map/index.tsx

@@ -142,6 +142,7 @@ export const ProjectMap = (): JSX.Element => {
     sublayers: [
       ...(sid1 && !sid2 ? ['frequency'] : []),
       ...(!!selectedCostSurface ? ['cost'] : []),
+      ...(!!selectedFeaturesIds.length ? ['features'] : []),
     ],
     options: {
       cost: { min: 1, max: 100 },

app/layout/projects/show/map/legend/hooks/index.ts

@@ -129,11 +129,14 @@ export const useFeaturesLegend = () => {
       select: ({ data }) => ({
         binaryFeatures:
           data?.filter(
-            (feature) => !Object.hasOwn(feature, 'min') && !Object.hasOwn(feature, 'max')
+            (feature) =>
+              !Object.hasOwn(feature.amountRange, 'min') &&
+              !Object.hasOwn(feature.amountRange, 'max')
           ) || [],
         continuousFeatures:
           data?.filter(
-            (feature) => Object.hasOwn(feature, 'min') && Object.hasOwn(feature, 'max')
+            (feature) =>
+              Object.hasOwn(feature.amountRange, 'min') && Object.hasOwn(feature.amountRange, 'max')
           ) || [],
       }),
     }
@@ -175,7 +178,7 @@ export const useFeaturesLegend = () => {
     ) || [];
 
   return [
-    ...LEGEND_LAYERS['features-preview-new']({
+    ...LEGEND_LAYERS['binary-features']({
       items: binaryFeaturesItems,
       onChangeVisibility: (featureId: Feature['id']) => {
         const newSelectedFeatures = [...selectedFeatures];
@@ -201,7 +204,7 @@ export const useFeaturesLegend = () => {
         );
       },
     }),
-    ...LEGEND_LAYERS['features-abundance']({
+    ...LEGEND_LAYERS['continuous-features']({
       items: continuousFeaturesItems,
       onChangeVisibility: (featureId: Feature['id']) => {
         const { color, amountRange } =

app/layout/scenarios/edit/map/component.tsx

@@ -161,7 +161,7 @@ export const ScenariosEditMap = (): JSX.Element => {
   const sublayers = useMemo(() => {
     return [
       ...(layerSettings['wdpa-percentage']?.visibility ? ['wdpa-percentage'] : []),
-      ...(layerSettings['features']?.visibility ? ['features'] : []),
+      ...(layerSettings['features']?.visibility || selectedFeatures?.length ? ['features'] : []),
       ...(preHighlightFeatures?.length || postHighlightFeatures?.length ? ['features'] : []),
       ...(selectedCostSurface ? ['cost'] : []),
       ...(layerSettings['lock-in']?.visibility ? ['lock-in'] : []),
@@ -170,7 +170,13 @@ export const ScenariosEditMap = (): JSX.Element => {
       ...(layerSettings['frequency']?.visibility ? ['frequency'] : []),
       ...(layerSettings['solution']?.visibility ? ['solution'] : []),
     ];
-  }, [layerSettings, selectedCostSurface, preHighlightFeatures, postHighlightFeatures]);
+  }, [
+    layerSettings,
+    selectedCostSurface,
+    preHighlightFeatures,
+    postHighlightFeatures,
+    selectedFeatures,
+  ]);
 
   const featuresIds = useMemo(() => {
     if (allGapAnalysisData) {

app/layout/scenarios/edit/map/legend/hooks/index.ts

@@ -185,7 +185,7 @@ export const useFeaturesLegend = () => {
     ) || [];
 
   return [
-    ...LEGEND_LAYERS['features-preview-new']({
+    ...LEGEND_LAYERS['binary-features']({
       items: binaryFeaturesItems,
       onChangeVisibility: (featureId: Feature['id']) => {
         const newSelectedFeatures = [...selectedFeatures];
@@ -211,7 +211,7 @@ export const useFeaturesLegend = () => {
         );
       },
     }),
-    ...LEGEND_LAYERS['features-abundance']({
+    ...LEGEND_LAYERS['continuous-features']({
       items: continuousFeaturesItems,
       onChangeVisibility: (featureId: Feature['id']) => {
         const { color, amountRange } =