From 41d0bb31dfeeb22bbb648bc4c84361ce7e162d37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 20 Sep 2023 17:06:16 +0200
Subject: [PATCH] abundance feature layer

---
 app/hooks/map/index.ts                      | 55 +++++++++++++++++++++
 app/hooks/map/types.ts                      |  3 +-
 app/layout/scenarios/edit/map/component.tsx | 20 +++++---
 3 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
index 1fbe551d07..f89e272c2f 100644
--- a/app/hooks/map/index.ts
+++ b/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,59 @@ export function usePUGridLayer({
                     ],
                   },
                 },
+                // features abundance
+                ...selectedFeatures.map((featureId) => {
+                  const {
+                    visibility = true,
+                    opacity = 1,
+                    // ! not sure if it is a good idea saving the range in the layerSettings, let's keep it for now..
+                    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'],
+                          1,
+                          // todo: ask design for colors
+                          'white',
+                          min,
+                          'red',
+                          max,
+                          'green',
+                        ],
+                      ],
+                      'fill-opacity': opacity,
+                    },
+                  };
+                }),
               ]
             : []),
 
diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts
index 0de5ab27e8..8ef1eb6919 100644
--- a/app/hooks/map/types.ts
+++ b/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?: {
diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
index 8f479f98f2..d843243cde 100644
--- a/app/layout/scenarios/edit/map/component.tsx
+++ b/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,
       },
     },
   });