Toggle features from sidebar

Vizzuality · Dec 20, 2023 · 4fb176f · 4fb176f
1 parent 68c0c63
commit 4fb176f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git 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
@@ -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
@@ -298,6 +298,7 @@ export const useFeaturesLegend = () => {
           const i = newSelectedFeatures.indexOf(featureId);
           newSelectedFeatures.splice(i, 1);
         }
+
         dispatch(setSelectedContinuousFeatures(newSelectedFeatures));
 
         dispatch(