abundance feature layer

Author: agnlez

app/hooks/map/index.ts

@@ -613,6 +613,7 @@ export function usePUGridLayer({
       puExcludedValue,
       puAvailableValue,
       features = [],
+      selectedFeatures = [],
       preHighlightFeatures = [],
       postHighlightFeatures = [],
       runId,
@@ -629,6 +630,7 @@ export function usePUGridLayer({
       'lock-available': LockAvailableSettings = {},
       frequency: FrequencySettings = {},
       solution: SolutionSettings = {},
+      ...restLayerSettings
     } = settings;
 
     const { opacity: PUgridOpacity = 1, visibility: PUgridVisibility = true } = PUgridSettings;
@@ -765,6 +767,55 @@ export function usePUGridLayer({
                     ],
                   },
                 },
+                // features abundance
+                ...selectedFeatures.map((featureId) => {
+                  const {
+                    visibility = true,
+                    opacity = 1,
+                    amountRange = { min: 50000, max: 1000000 },
+                  } = restLayerSettings[featureId] || {};
+
+                  return {
+                    type: 'fill',
+                    'source-layer': 'layer0',
+                    layout: {
+                      visibility: getLayerVisibility(visibility),
+                    },
+                    filter: ['all', ['in', featureId, ['get', 'featureList']]],
+                    paint: {
+                      'fill-outline-color': 'yellow',
+                      'fill-color': [
+                        'let',
+                        'ammount',
+                        [
+                          'to-number',
+                          [
+                            'let',
+                            'idx',
+                            ['index-of', featureId, ['get', 'featureList']],
+                            [
+                              'slice',
+                              ['get', 'featureList'],
+                              ['+', ['index-of', ':', ['get', 'featureList'], ['var', 'idx']], 1],
+                              ['index-of', ';', ['get', 'featureList'], ['var', 'idx']],
+                            ],
+                          ],
+                        ],
+                        [
+                          'interpolate',
+                          ['linear'],
+                          ['var', 'ammount'],
+                          amountRange.min,
+                          'white', // ! use COLORS.abundance.default instead when is available
+                          amountRange.max,
+                          'green',
+                          // color, // ! enable the color variable when we receive it
+                        ],
+                      ],
+                      'fill-opacity': opacity,
+                    },
+                  };
+                }),
               ]
             : []),
 

app/hooks/map/types.ts

@@ -122,7 +122,8 @@ export interface UsePUGridLayer {
     puExcludedValue?: string[];
     puAvailableValue?: string[];
     runId?: number;
-    features?: string[];
+    features?: Feature['id'][];
+    selectedFeatures?: Feature['id'][];
     preHighlightFeatures?: Array<string>;
     postHighlightFeatures?: Array<string>;
     cost?: {

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

@@ -197,11 +197,15 @@ export const ScenariosEditMap = (): JSX.Element => {
       return 'cost';
     }
 
-    if (tab === TABS['scenario-gap-analysis']) {
-      return 'features';
-    }
-
-    if ([TABS['scenario-advanced-settings'], TABS['scenario-blm-calibration']].includes(tab)) {
+    if (
+      [
+        TABS['scenario-features'],
+        TABS['scenario-gap-analysis'],
+        TABS['scenario-features-targets-spf'],
+        TABS['scenario-advanced-settings'],
+        TABS['scenario-blm-calibration'],
+      ].includes(tab)
+    ) {
       return 'protection,features';
     }
 
@@ -386,7 +390,10 @@ export const ScenariosEditMap = (): JSX.Element => {
       puIncludedValue: [...puIncludedValue, ...puTmpIncludedValue],
       puExcludedValue: [...puExcludedValue, ...puTmpExcludedValue],
       puAvailableValue: [...puAvailableValue, ...puTmpAvailableValue],
-      features: featuresIds,
+      features: [TABS['scenario-features'], TABS['scenario-features-targets-spf']].includes(tab)
+        ? []
+        : featuresIds,
+      selectedFeatures,
       preHighlightFeatures,
       postHighlightFeatures: postHighlightedFeaturesIds,
       cost: costSurfaceRangeData,
@@ -402,6 +409,7 @@ export const ScenariosEditMap = (): JSX.Element => {
         'lock-available': layerSettings['lock-available'],
         frequency: layerSettings.frequency,
         solution: layerSettings.solution,
+        ...layerSettings,
       },
     },
   });