Skip to content

Commit

Permalink
select one cost surface to show on map and display name on legend
Browse files Browse the repository at this point in the history
  • Loading branch information
anamontiaga committed Sep 4, 2023
1 parent 38da8d2 commit aa520d0
Show file tree
Hide file tree
Showing 5 changed files with 36 additions and 21 deletions.
2 changes: 1 addition & 1 deletion app/hooks/map/constants.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export const LEGEND_LAYERS = {

return {
id: 'cost',
name: 'Cost surface',
name: options.cost.name,
type: 'gradient',
settingsManager: {
opacity: true,
Expand Down
1 change: 1 addition & 0 deletions app/hooks/map/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,7 @@ export interface UseLegend {
wdpaIucnCategories?: string[];
wdpaThreshold?: number;
cost?: {
name: string;
min: number;
max: number;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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]']
);

Expand Down Expand Up @@ -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(
Expand All @@ -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 (
Expand Down
25 changes: 21 additions & 4 deletions app/layout/projects/show/map/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -155,14 +156,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'] : []),
Expand All @@ -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,
},
});
Expand Down
12 changes: 6 additions & 6 deletions app/store/slices/projects/[id].ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface ProjectShowStateProps {
sort: string;
layerSettings: Record<string, any>;
selectedFeatures: string[];
selectedCostSurfaces: string[];
selectedCostSurface: string | null;
isSidebarOpen: boolean;
}

Expand All @@ -16,7 +16,7 @@ const initialState: ProjectShowStateProps = {
sort: '-lastModifiedAt',
layerSettings: {},
selectedFeatures: [],
selectedCostSurfaces: [],
selectedCostSurface: null,
isSidebarOpen: true,
} satisfies ProjectShowStateProps;

Expand Down Expand Up @@ -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;
},
},
});
Expand All @@ -80,7 +80,7 @@ export const {
setSort,
setLayerSettings,
setSelectedFeatures,
setSelectedCostSurfaces,
setSelectedCostSurface,
setSidebarVisibility,
} = projectsDetailSlice.actions;

Expand Down

0 comments on commit aa520d0

Please sign in to comment.