From e9a0cf82d321fa48232028c4810ba5a67c8cabda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Tue, 17 Oct 2023 10:06:52 +0200 Subject: [PATCH] map legend: merges binary and continuous features --- app/hooks/map/constants.tsx | 6 +++--- app/hooks/map/index.ts | 8 ++++---- app/hooks/map/types.ts | 1 + app/layout/projects/show/map/index.tsx | 1 + app/layout/projects/show/map/legend/hooks/index.ts | 11 +++++++---- app/layout/scenarios/edit/map/component.tsx | 10 ++++++++-- app/layout/scenarios/edit/map/legend/hooks/index.ts | 4 ++-- 7 files changed, 26 insertions(+), 15 deletions(-) diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx index e264d7869c..595b6ee6a1 100644 --- a/app/hooks/map/constants.tsx +++ b/app/hooks/map/constants.tsx @@ -252,7 +252,7 @@ export const LEGEND_LAYERS = { })); }, - 'features-preview-new': (options: { + 'binary-features': (options: { items: { id: string; name: string; color: string }[]; onChangeVisibility: (featureId: Feature['id']) => void; }) => { @@ -314,7 +314,7 @@ export const LEGEND_LAYERS = { }, }), // ANALYSIS - ['features-abundance']: (options: { + ['continuous-features']: (options: { items: { id: Feature['id']; amountRange: { min: number; max: number }; @@ -326,7 +326,7 @@ export const LEGEND_LAYERS = { const { items, onChangeVisibility } = options; return items?.map(({ id, name, amountRange, color }) => ({ - id: `feature-abundance-${id}`, + id, name, type: 'gradient' as LegendItemType, settingsManager: { diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts index cd483bf043..32484156ce 100644 --- a/app/hooks/map/index.ts +++ b/app/hooks/map/index.ts @@ -770,7 +770,8 @@ export function usePUGridLayer({ const { visibility = true, opacity = 1, - amountRange = { min: 50000, max: 1000000 }, + amountRange, + color, } = restLayerSettings[featureId] || {}; return { @@ -804,10 +805,9 @@ export function usePUGridLayer({ ['linear'], ['var', 'amount'], amountRange.min, - 'white', // ! use COLORS.abundance.default instead when is available + COLORS.abundance.default, amountRange.max, - 'green', - // color, // ! enable the color variable when we receive it + color, ], ], 'fill-opacity': opacity, diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts index dd73357bb3..ed3a762857 100644 --- a/app/hooks/map/types.ts +++ b/app/hooks/map/types.ts @@ -177,6 +177,7 @@ export interface UsePUGridLayer { min: number; max: number; }; + color?: string; }; }; }; diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx index 24a369e10c..de52ed4f67 100644 --- a/app/layout/projects/show/map/index.tsx +++ b/app/layout/projects/show/map/index.tsx @@ -142,6 +142,7 @@ export const ProjectMap = (): JSX.Element => { sublayers: [ ...(sid1 && !sid2 ? ['frequency'] : []), ...(!!selectedCostSurface ? ['cost'] : []), + ...(!!selectedFeaturesIds.length ? ['features'] : []), ], options: { cost: { min: 1, max: 100 }, diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts index fda41de748..635efe3348 100644 --- a/app/layout/projects/show/map/legend/hooks/index.ts +++ b/app/layout/projects/show/map/legend/hooks/index.ts @@ -129,11 +129,14 @@ export const useFeaturesLegend = () => { select: ({ data }) => ({ binaryFeatures: data?.filter( - (feature) => !Object.hasOwn(feature, 'min') && !Object.hasOwn(feature, 'max') + (feature) => + !Object.hasOwn(feature.amountRange, 'min') && + !Object.hasOwn(feature.amountRange, 'max') ) || [], continuousFeatures: data?.filter( - (feature) => Object.hasOwn(feature, 'min') && Object.hasOwn(feature, 'max') + (feature) => + Object.hasOwn(feature.amountRange, 'min') && Object.hasOwn(feature.amountRange, 'max') ) || [], }), } @@ -175,7 +178,7 @@ export const useFeaturesLegend = () => { ) || []; return [ - ...LEGEND_LAYERS['features-preview-new']({ + ...LEGEND_LAYERS['binary-features']({ items: binaryFeaturesItems, onChangeVisibility: (featureId: Feature['id']) => { const newSelectedFeatures = [...selectedFeatures]; @@ -201,7 +204,7 @@ export const useFeaturesLegend = () => { ); }, }), - ...LEGEND_LAYERS['features-abundance']({ + ...LEGEND_LAYERS['continuous-features']({ items: continuousFeaturesItems, onChangeVisibility: (featureId: Feature['id']) => { const { color, amountRange } = diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx index 0774142db2..ddf2443e31 100644 --- a/app/layout/scenarios/edit/map/component.tsx +++ b/app/layout/scenarios/edit/map/component.tsx @@ -161,7 +161,7 @@ export const ScenariosEditMap = (): JSX.Element => { const sublayers = useMemo(() => { return [ ...(layerSettings['wdpa-percentage']?.visibility ? ['wdpa-percentage'] : []), - ...(layerSettings['features']?.visibility ? ['features'] : []), + ...(layerSettings['features']?.visibility || selectedFeatures?.length ? ['features'] : []), ...(preHighlightFeatures?.length || postHighlightFeatures?.length ? ['features'] : []), ...(selectedCostSurface ? ['cost'] : []), ...(layerSettings['lock-in']?.visibility ? ['lock-in'] : []), @@ -170,7 +170,13 @@ export const ScenariosEditMap = (): JSX.Element => { ...(layerSettings['frequency']?.visibility ? ['frequency'] : []), ...(layerSettings['solution']?.visibility ? ['solution'] : []), ]; - }, [layerSettings, selectedCostSurface, preHighlightFeatures, postHighlightFeatures]); + }, [ + layerSettings, + selectedCostSurface, + preHighlightFeatures, + postHighlightFeatures, + selectedFeatures, + ]); const featuresIds = useMemo(() => { if (allGapAnalysisData) { diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts index d04d7cc93b..51d8063178 100644 --- a/app/layout/scenarios/edit/map/legend/hooks/index.ts +++ b/app/layout/scenarios/edit/map/legend/hooks/index.ts @@ -185,7 +185,7 @@ export const useFeaturesLegend = () => { ) || []; return [ - ...LEGEND_LAYERS['features-preview-new']({ + ...LEGEND_LAYERS['binary-features']({ items: binaryFeaturesItems, onChangeVisibility: (featureId: Feature['id']) => { const newSelectedFeatures = [...selectedFeatures]; @@ -211,7 +211,7 @@ export const useFeaturesLegend = () => { ); }, }), - ...LEGEND_LAYERS['features-abundance']({ + ...LEGEND_LAYERS['continuous-features']({ items: continuousFeaturesItems, onChangeVisibility: (featureId: Feature['id']) => { const { color, amountRange } =