WIP

Vizzuality · Sep 20, 2023 · 58a796b · 58a796b
1 parent ae2c7a5
commit 58a796b
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 102 deletions.
diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
@@ -329,11 +329,19 @@ export const LEGEND_LAYERS = {
   }),
 
   // ANALYSIS
-  ['features-abundance']: (options: { items: { min: number; max: number; name: string }[] }) => {
-    const { items } = options;
+  ['features-abundance']: (options: {
+    items: {
+      id: Feature['id'];
+      amountRange: { min: number; max: number };
+      name: string;
+      color: string;
+    }[];
+    onChangeVisibility?: (id: Feature['id']) => void;
+  }) => {
+    const { items, onChangeVisibility } = options;
 
-    return items.map(({ name, min, max }, index) => ({
-      id: `features-abundance-${name}`,
+    return items?.map(({ id, name, amountRange, color }) => ({
+      id: `feature-abundance-${id}`,
       name,
       type: 'gradient' as LegendItemType,
       settingsManager: {
@@ -343,34 +351,17 @@ export const LEGEND_LAYERS = {
       items: [
         {
           color: COLORS.abundance.default,
-          value: `${min === max ? 0 : min}`,
+          value: `${amountRange.min === amountRange.max ? 0 : amountRange.min}`,
         },
         {
-          color: COLORS.abundance.ramp[index],
-          value: `${max}`,
+          color,
+          value: `${amountRange.max}`,
         },
       ],
+      onChangeVisibility: () => {
+        onChangeVisibility?.(id);
+      },
     }));
-
-    // return {
-    //   id: 'features-abundance',
-    //   name: options.abundance.name,
-    //   type: 'gradient',
-    //   settingsManager: {
-    //     opacity: true,
-    //     visibility: true,
-    //   },
-    //   items: [
-    //     {
-    //       color: COLORS.abundance.default,
-    //       value: `${abundance.min === abundance.max ? 0 : abundance.min}`,
-    //     },
-    //     {
-    //       color: COLORS.abundance[options.abundance.name.index],
-    //       value: `${abundance.max}`,
-    //     },
-    //   ],
-    // };
   },
   'cost-surface': (options: {
     items: { id: CostSurface['id']; name: CostSurface['name']; min?: number; max?: number }[];

diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts
@@ -1,16 +1,12 @@
 import { useRouter } from 'next/router';
 
 import { useAppDispatch, useAppSelector } from 'store/hooks';
-import {
-  setSelectedFeatures,
-  setLayerSettings,
-  setSelectedCostSurfaces,
-} from 'store/slices/projects/[id]';
+import { setSelectedFeatures, setLayerSettings } from 'store/slices/projects/[id]';
 
 import chroma from 'chroma-js';
 
 import { useProjectCostSurfaces } from 'hooks/cost-surface';
-import { useAllFeatures, useProjectFeatures } from 'hooks/features';
+import { useAllFeatures } from 'hooks/features';
 import { COLORS, LEGEND_LAYERS } from 'hooks/map/constants';
 import { useProjectWDPAs } from 'hooks/wdpa';
 
@@ -46,8 +42,7 @@ export const useCostSurfaceLegend = () => {
     pid,
     {},
     {
-      select: (data) =>
-        data.filter(({ id }) => selectedCostSurface === id).map(({ id, name }) => ({ id, name })),
+      select: (data) => data.map(({ id, name }) => ({ id, name })),
     }
   );
 
@@ -99,43 +94,55 @@ export const useConservationAreasLegend = () => {
 };
 
 export const useFeatureAbundanceLegend = () => {
-  const { selectedFeatures } = useAppSelector((state) => state['/projects/[id]']);
   const { query } = useRouter();
   const { pid } = query as { pid: string };
 
-  const projectFeaturesQuery = useProjectFeatures(pid, selectedFeatures);
-
-  // todo: uncomment when API is ready
-  // return projectFeaturesQuery.data?.map(
-  //   ({ featureClassName: name }, index) =>
-  //     LEGEND_LAYERS['features-abundance']({
-  //       abundance: {
-  //         min: 1,
-  //         max: 8,
-  //         name,
-  //         index,
-  //       },
-  //     }) || []
-  // );
+  const dispatch = useAppDispatch();
+  const projectFeaturesQuery = useAllFeatures(
+    pid,
+    { sort: 'feature_class_name' },
+    {
+      select: ({ data }) => data,
+    }
+  );
+
+  const { layerSettings } = useAppSelector((state) => state['/projects/[id]']);
+
+  const totalItems = projectFeaturesQuery.data?.length || 0;
+
+  const items =
+    projectFeaturesQuery.data?.map(
+      ({ id, featureClassName, amountRange = { min: 5000, max: 100000 } }, index) => {
+        const color =
+          totalItems > COLORS['features-preview'].ramp.length
+            ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
+            : COLORS['features-preview'].ramp[index];
+
+        return {
+          id,
+          name: featureClassName,
+          amountRange,
+          color,
+        };
+      }
+    ) || [];
 
   return LEGEND_LAYERS['features-abundance']({
-    items: [
-      {
-        min: 1,
-        max: 8,
-        name: 'feature abundance A',
-      },
-      {
-        min: 2,
-        max: 5,
-        name: 'feature abundance B',
-      },
-      {
-        min: 8,
-        max: 34,
-        name: 'feature abundance C',
-      },
-    ],
+    items,
+    onChangeVisibility: (featureId: Feature['id']) => {
+      const { color, amountRange } = items.find(({ id }) => id === featureId) || {};
+
+      dispatch(
+        setLayerSettings({
+          id: `feature-abundance-${featureId}`,
+          settings: {
+            visibility: !layerSettings[featureId]?.visibility,
+            amountRange,
+            color,
+          },
+        })
+      );
+    },
   });
 };
 

diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
@@ -649,12 +649,14 @@ export const ScenariosEditMap = (): JSX.Element => {
                 {c.layers?.map((layer) => {
                   if (layer) {
                     return (
+                      // @ts-expect-error not sure how to fix this now
                       <LegendItem
                         key={layer.id}
                         onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
                         settings={layerSettings[layer.id]}
                         {...layer}
                       >
+                        {/* @ts-expect-error not sure how to fix this now */}
                         {renderLegendItems(layer)}
                       </LegendItem>
                     );

diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts
@@ -7,7 +7,7 @@ import chroma from 'chroma-js';
 import { orderBy } from 'lodash';
 
 import { useProjectCostSurfaces } from 'hooks/cost-surface';
-import { useProjectFeatures, useSelectedFeatures } from 'hooks/features';
+import { useSelectedFeatures } from 'hooks/features';
 import { COLORS, LEGEND_LAYERS } from 'hooks/map/constants';
 import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
@@ -120,42 +120,48 @@ export const useConservationAreasLegend = () => {
 
 export const useFeatureAbundanceLegend = () => {
   const { query } = useRouter();
-  const { pid, sid } = query as { pid: string; sid: string };
-  const { selectedFeatures } = useAppSelector((state) => state[`/scenarios/${sid}/edit`]);
-
-  const projectFeaturesQuery = useProjectFeatures(pid, selectedFeatures);
-
-  // todo: uncomment when API is ready
-  // return projectFeaturesQuery.data?.map(
-  //   ({ featureClassName: name }, index) =>
-  //     LEGEND_LAYERS['features-abundance']({
-  //       abundance: {
-  //         min: 1,
-  //         max: 8,
-  //         name,
-  //         index,
-  //       },
-  //     }) || []
-  // );
+  const { sid } = query as { sid: string };
+
+  const dispatch = useAppDispatch();
+  const { data: features } = useSelectedFeatures(sid);
+  const scenarioSlice = getScenarioEditSlice(sid);
+  const { setLayerSettings } = scenarioSlice.actions;
+
+  const { layerSettings } = useAppSelector((state) => state[`/scenarios/${sid}/edit`]);
+
+  const totalItems = features.length || 0;
+
+  const items =
+    features.map(({ id, name, amountRange = { min: 5000, max: 100000 } }, index) => {
+      const color =
+        totalItems > COLORS['features-preview'].ramp.length
+          ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
+          : COLORS['features-preview'].ramp[index];
+
+      return {
+        id,
+        name,
+        amountRange,
+        color,
+      };
+    }) || [];
 
   return LEGEND_LAYERS['features-abundance']({
-    items: [
-      {
-        min: 1,
-        max: 8,
-        name: 'feature abundance A',
-      },
-      {
-        min: 2,
-        max: 5,
-        name: 'feature abundance B',
-      },
-      {
-        min: 8,
-        max: 34,
-        name: 'feature abundance C',
-      },
-    ],
+    items,
+    onChangeVisibility: (featureId: Feature['id']) => {
+      const { color, amountRange } = items.find(({ id }) => id === featureId) || {};
+
+      dispatch(
+        setLayerSettings({
+          id: `feature-abundance-${featureId}`,
+          settings: {
+            visibility: !layerSettings[featureId]?.visibility,
+            amountRange,
+            color,
+          },
+        })
+      );
+    },
   });
 };
 

diff --git a/app/types/api/feature.ts b/app/types/api/feature.ts
@@ -9,4 +9,8 @@ export interface Feature {
   alias: string;
   scenarioUsageCount: number;
   tag?: string;
+  amountRange: {
+    min: number;
+    max: number;
+  };
 }