From aa520d0733ed95908ab19ebd0bb7f58c5f3ec336 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Mon, 4 Sep 2023 11:46:04 +0200 Subject: [PATCH] select one cost surface to show on map and display name on legend --- app/hooks/map/constants.tsx | 2 +- app/hooks/map/types.ts | 1 + .../inventory-panel/cost-surfaces/index.tsx | 17 ++++++------- app/layout/projects/show/map/index.tsx | 25 ++++++++++++++++--- app/store/slices/projects/[id].ts | 12 ++++----- 5 files changed, 36 insertions(+), 21 deletions(-) diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx index 177f7fc439..d316df8333 100644 --- a/app/hooks/map/constants.tsx +++ b/app/hooks/map/constants.tsx @@ -253,7 +253,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 index 5a9d413fef..4b23819a60 100644 --- a/app/hooks/map/types.ts +++ b/app/hooks/map/types.ts @@ -194,6 +194,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 index 003b2d1fd1..9f33a37025 100644 --- 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 index e6ad85f4c8..a803cf42b5 100644 --- 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, @@ -47,7 +48,7 @@ export const ProjectMap = (): JSX.Element => { isSidebarOpen, layerSettings, selectedFeatures: selectedFeaturesIds, - selectedCostSurfaces: selectedCostSurfacesIds, + selectedCostSurface: selectedCostSurfaceId, } = useAppSelector((state) => state['/projects/[id]']); const accessToken = useAccessToken(); @@ -112,7 +113,7 @@ export const ProjectMap = (): JSX.Element => { include: 'results,cost', sublayers: [ ...(sid1 && !sid2 ? ['frequency'] : []), - ...(!!selectedCostSurfacesIds.length ? ['cost'] : []), + ...(!!selectedCostSurfaceId ? ['cost'] : []), ], options: { cost: { min: 1, max: 100 }, @@ -155,6 +156,22 @@ 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 ); @@ -162,7 +179,7 @@ export const ProjectMap = (): JSX.Element => { const LEGEND = useLegend({ layers: [ ...(!!selectedFeaturesData?.length ? ['features-preview'] : []), - ...(!!selectedCostSurfacesIds?.length ? ['cost'] : []), + ...(!!selectedCostSurfaceId ? ['cost'] : []), ...(!!sid1 && !sid2 ? ['frequency'] : []), ...(!!sid1 && !!sid2 ? ['compare'] : []), @@ -172,7 +189,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 index 924e96d1c1..06bb3d6cba 100644 --- a/app/store/slices/projects/[id].ts +++ b/app/store/slices/projects/[id].ts @@ -6,7 +6,7 @@ interface ProjectShowStateProps { sort: string; layerSettings: Record; 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 + action: PayloadAction ) => { - state.selectedCostSurfaces = action.payload; + state.selectedCostSurface = action.payload; }, }, }); @@ -80,7 +80,7 @@ export const { setSort, setLayerSettings, setSelectedFeatures, - setSelectedCostSurfaces, + setSelectedCostSurface, setSidebarVisibility, } = projectsDetailSlice.actions;