From c24c3a8759f5c80a9e43475a5df7f9698c57b996 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?=
 <miguel.barrenechea@vizzuality.com>
Date: Wed, 20 Dec 2023 11:08:09 +0100
Subject: [PATCH] Toggle features from sidebar

---
 app/hooks/map/index.ts                        |  6 ++-
 .../grid-setup/features/target-spf/index.tsx  | 44 ++++++++++++++-----
 .../scenarios/edit/map/legend/hooks/index.ts  |  1 +
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
index f70aeeb5a6..b094e6a14d 100644
--- a/app/hooks/map/index.ts
+++ b/app/hooks/map/index.ts
@@ -239,7 +239,11 @@ export function useContinuousFeaturesLayers({
   return useMemo(() => {
     if (!active) return [];
 
-    return features.map((fid) => {
+    const fs = [...features];
+
+    fs.reverse();
+
+    return fs.map((fid) => {
       const {
         amountRange,
         color,
diff --git a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx
index 784e482433..0d70f20a6c 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/features/target-spf/index.tsx
@@ -66,10 +66,14 @@ const TargetAndSPFFeatures = (): JSX.Element => {
   const selectedFeaturesMutation = useSaveSelectedFeatures({});
 
   const dispatch = useAppDispatch();
-
   const scenarioSlice = getScenarioEditSlice(sid);
-  const { setLayerSettings } = scenarioSlice.actions;
-  const { layerSettings } = useAppSelector((state) => state[`/scenarios/${sid}/edit`]);
+
+  const { setSelectedFeatures, setSelectedContinuousFeatures, setLayerSettings } =
+    scenarioSlice.actions;
+
+  const { selectedFeatures, selectedContinuousFeatures, layerSettings } = useAppSelector(
+    (state) => state[`/scenarios/${sid}/edit`]
+  );
 
   const allFeaturesQuery = useAllFeatures(
     pid,
@@ -85,7 +89,6 @@ const TargetAndSPFFeatures = (): JSX.Element => {
 
   const targetedFeatures = useMemo(() => {
     let parsedData = [];
-    console.log({ featureValues });
     selectedFeaturesQuery.data?.forEach((feature) => {
       if (feature.splitFeaturesSelected?.length > 0) {
         const featureMetadata = allFeaturesQuery.data?.find(({ id }) => id === feature.id);
@@ -208,19 +211,38 @@ const TargetAndSPFFeatures = (): JSX.Element => {
 
   const toggleSeeOnMap = useCallback(
     (id: Feature['id']) => {
-      const selectedFeature = targetedFeatures.find(({ id: featureId }) => featureId === id);
-      const isContinuous =
-        selectedFeature.amountRange.min !== null && selectedFeature.amountRange.max !== null;
+      const { color, amountRange } = targetedFeatures.find(({ id: featureId }) => featureId === id);
+      // const isContinuous =
+      //   selectedFeature.amountRange.min !== null && selectedFeature.amountRange.max !== null;
+
+      console.log(id, layerSettings);
+
+      const newSelectedFeatures = [...selectedContinuousFeatures];
+      const isIncluded = newSelectedFeatures.includes(id);
+
+      if (!isIncluded) {
+        newSelectedFeatures.push(id);
+      } else {
+        const i = newSelectedFeatures.indexOf(id);
+        newSelectedFeatures.splice(i, 1);
+      }
+      console.log(newSelectedFeatures);
+      dispatch(setSelectedContinuousFeatures(newSelectedFeatures));
+
+      console.log(selectedContinuousFeatures);
 
       dispatch(
         setLayerSettings({
           id,
           settings: {
             visibility: layerSettings[id] ? !layerSettings[id].visibility : true,
-            color: selectedFeature?.color,
-            ...(isContinuous && {
-              amountRange: selectedFeature.amountRange,
-            }),
+            amountRange,
+            color,
+
+            // color: selectedFeature?.color,
+            // ...(isContinuous && {
+            //   amountRange: selectedFeature.amountRange,
+            // }),
           },
         })
       );
diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts
index beb13ada91..28db65276c 100644
--- a/app/layout/scenarios/edit/map/legend/hooks/index.ts
+++ b/app/layout/scenarios/edit/map/legend/hooks/index.ts
@@ -299,6 +299,7 @@ export const useFeaturesLegend = () => {
           const i = newSelectedFeatures.indexOf(featureId);
           newSelectedFeatures.splice(i, 1);
         }
+
         dispatch(setSelectedContinuousFeatures(newSelectedFeatures));
 
         dispatch(