select one cost surface to show on map and display name on legend

Vizzuality · Sep 11, 2023 · 2cdb0ed · 2cdb0ed
1 parent 6554371
commit 2cdb0ed
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 21 deletions.
diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
@@ -254,7 +254,7 @@ export const LEGEND_LAYERS = {
 
     return {
       id: 'cost',
-      name: 'Cost surface',
+      name: options.cost.name,
       type: 'gradient',
       settingsManager: {
         opacity: true,

diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts
@@ -195,6 +195,7 @@ export interface UseLegend {
     wdpaIucnCategories?: string[];
     wdpaThreshold?: number;
     cost?: {
+      name: string;
       min: number;
       max: number;
     };

diff --git a/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx b/app/layout/project/sidebar/project/inventory-panel/cost-surfaces/index.tsx
@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect, ChangeEvent } from 'react';
 import { useRouter } from 'next/router';
 
 import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { setSelectedCostSurfaces as setVisibleCostSurfaces } from 'store/slices/projects/[id]';
+import { setSelectedCostSurface as setVisibleCostSurface } from 'store/slices/projects/[id]';
 
 import { useProjectCostSurfaces } from 'hooks/cost-surface';
 
@@ -22,7 +22,7 @@ const COST_SURFACE_TABLE_COLUMNS = [
 
 const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }): JSX.Element => {
   const dispatch = useAppDispatch();
-  const { selectedCostSurfaces: visibleCostSurfaces, search } = useAppSelector(
+  const { selectedCostSurface: visibleCostSurface, search } = useAppSelector(
     (state) => state['/projects/[id]']
   );
 
@@ -81,16 +81,13 @@ const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }
 
   const toggleSeeOnMap = useCallback(
     (costSurfaceId: CostSurface['id']) => {
-      const newSelectedCostSurfaces = [...visibleCostSurfaces];
-      if (!newSelectedCostSurfaces.includes(costSurfaceId)) {
-        newSelectedCostSurfaces.push(costSurfaceId);
+      if (costSurfaceId === visibleCostSurface) {
+        dispatch(setVisibleCostSurface(null));
       } else {
-        const i = newSelectedCostSurfaces.indexOf(costSurfaceId);
-        newSelectedCostSurfaces.splice(i, 1);
+        dispatch(setVisibleCostSurface(costSurfaceId));
       }
-      dispatch(setVisibleCostSurfaces(newSelectedCostSurfaces));
     },
-    [dispatch, visibleCostSurfaces]
+    [dispatch, visibleCostSurface]
   );
 
   const handleSort = useCallback(
@@ -112,7 +109,7 @@ const InventoryPanelCostSurface = ({ noData: noDataMessage }: { noData: string }
     name: cs.name,
     scenarios: cs.scenarioUsageCount,
     isCustom: cs.isCustom,
-    isVisibleOnMap: visibleCostSurfaces?.includes(cs.id),
+    isVisibleOnMap: visibleCostSurface === cs.id,
   }));
 
   return (

diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
@@ -11,6 +11,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import pick from 'lodash/pick';
 
 import { useAccessToken } from 'hooks/auth';
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
 import { useAllFeatures } from 'hooks/features';
 import {
   useLegend,
@@ -52,7 +53,7 @@ export const ProjectMap = (): JSX.Element => {
     isSidebarOpen,
     layerSettings,
     selectedFeatures: selectedFeaturesIds,
-    selectedCostSurfaces: selectedCostSurfacesIds,
+    selectedCostSurface: selectedCostSurfaceId,
   } = useAppSelector((state) => state['/projects/[id]']);
 
   const accessToken = useAccessToken();
@@ -110,7 +111,7 @@ export const ProjectMap = (): JSX.Element => {
     include: 'results,cost',
     sublayers: [
       ...(sid1 && !sid2 ? ['frequency'] : []),
-      ...(!!selectedCostSurfacesIds.length ? ['cost'] : []),
+      ...(!!selectedCostSurfaceId ? ['cost'] : []),
     ],
     options: {
       cost: { min: 1, max: 100 },
@@ -153,14 +154,30 @@ export const ProjectMap = (): JSX.Element => {
       });
   }, [selectedFeaturesIds, selectedFeaturesData]);
 
+  const allProjectCostSurfacesQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        data
+          ?.map((cs) => ({
+            id: cs.id,
+            name: cs.name,
+          }))
+          .find((cs) => cs.id === selectedCostSurfaceId),
+      keepPreviousData: true,
+      placeholderData: [],
+    }
+  );
+
   const LAYERS = [PUGridLayer, PUCompareLayer, PlanningAreaLayer, ...FeaturePreviewLayers].filter(
     (l) => !!l
   );
 
   const LEGEND = useLegend({
     layers: [
       ...(!!selectedFeaturesData?.length ? ['features-preview'] : []),
-      ...(!!selectedCostSurfacesIds?.length ? ['cost'] : []),
+      ...(!!selectedCostSurfaceId ? ['cost'] : []),
       ...(!!sid1 && !sid2 ? ['frequency'] : []),
 
       ...(!!sid1 && !!sid2 ? ['compare'] : []),
@@ -170,7 +187,7 @@ export const ProjectMap = (): JSX.Element => {
     ],
     options: {
       layerSettings,
-      cost: { min: 1, max: 100 },
+      cost: { name: allProjectCostSurfacesQuery.data?.name, min: 1, max: 100 },
       items: selectedPreviewFeatures,
     },
   });

diff --git a/app/store/slices/projects/[id].ts b/app/store/slices/projects/[id].ts
@@ -6,7 +6,7 @@ interface ProjectShowStateProps {
   sort: string;
   layerSettings: Record<string, any>;
   selectedFeatures: string[];
-  selectedCostSurfaces: string[];
+  selectedCostSurface: string | null;
   isSidebarOpen: boolean;
 }
 
@@ -16,7 +16,7 @@ const initialState: ProjectShowStateProps = {
   sort: '-lastModifiedAt',
   layerSettings: {},
   selectedFeatures: [],
-  selectedCostSurfaces: [],
+  selectedCostSurface: null,
   isSidebarOpen: true,
 } satisfies ProjectShowStateProps;
 
@@ -65,11 +65,11 @@ const projectsDetailSlice = createSlice({
       state.selectedFeatures = action.payload;
     },
     // COST SURFACE
-    setSelectedCostSurfaces: (
+    setSelectedCostSurface: (
       state,
-      action: PayloadAction<ProjectShowStateProps['selectedCostSurfaces']>
+      action: PayloadAction<ProjectShowStateProps['selectedCostSurface']>
     ) => {
-      state.selectedCostSurfaces = action.payload;
+      state.selectedCostSurface = action.payload;
     },
   },
 });
@@ -80,7 +80,7 @@ export const {
   setSort,
   setLayerSettings,
   setSelectedFeatures,
-  setSelectedCostSurfaces,
+  setSelectedCostSurface,
   setSidebarVisibility,
 } = projectsDetailSlice.actions;