From 1e1cc94abd1f3444bce0dadadb8b1f048d5dc334 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Wed, 20 Sep 2023 17:06:16 +0200 Subject: [PATCH] abundance feature layer --- app/hooks/map/index.ts | 54 +++++++- app/hooks/map/types.ts | 7 +- .../projects/show/map/legend/hooks/index.ts | 2 +- app/layout/scenarios/edit/map/component.tsx | 115 +++--------------- .../scenarios/edit/map/legend/hooks/index.ts | 2 +- 5 files changed, 73 insertions(+), 107 deletions(-) diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts index d3955ad9df..b52843e5ca 100644 --- a/app/hooks/map/index.ts +++ b/app/hooks/map/index.ts @@ -608,7 +608,7 @@ export function usePUGridLayer({ puIncludedValue, puExcludedValue, puAvailableValue, - // features = [], + selectedFeatures = [], preHighlightFeatures = [], postHighlightFeatures = [], runId, @@ -617,7 +617,6 @@ export function usePUGridLayer({ const { pugrid: PUgridSettings = {}, 'wdpa-percentage': WdpaPercentageSettings = {}, - // features: FeaturesSettings = {}, 'cost-surface': CostSettings = {}, 'lock-in': LockInSettings = {}, 'lock-out': LockOutSettings = {}, @@ -630,8 +629,6 @@ export function usePUGridLayer({ const { opacity: PUgridOpacity = 1, visibility: PUgridVisibility = true } = PUgridSettings; const { opacity: WdpaPercentageOpacity = 1, visibility: WdpaPercentageVisibility = true } = WdpaPercentageSettings; - // const { opacity: FeaturesOpacity = 1, visibility: FeaturesVisibility = true } = - // FeaturesSettings; const { opacity: CostOpacity = 1, visibility: CostVisibility = true } = CostSettings; const { opacity: LockInOpacity = 1, visibility: LockInVisibility = true } = LockInSettings; const { opacity: LockOutOpacity = 1, visibility: LockOutVisibility = true } = LockOutSettings; @@ -720,6 +717,55 @@ export function usePUGridLayer({ ], }, })), + // features abundance + ...selectedFeatures.map((featureId) => { + const { + visibility = true, + opacity = 1, + amountRange = { min: 50000, max: 1000000 }, + } = restLayerSettings[featureId] || {}; + + return { + type: 'fill', + 'source-layer': 'layer0', + layout: { + visibility: getLayerVisibility(visibility), + }, + filter: ['all', ['in', featureId, ['get', 'featureList']]], + paint: { + 'fill-outline-color': 'yellow', + 'fill-color': [ + 'let', + 'amount', + [ + 'to-number', + [ + 'let', + 'idx', + ['index-of', featureId, ['get', 'featureList']], + [ + 'slice', + ['get', 'featureList'], + ['+', ['index-of', ':', ['get', 'featureList'], ['var', 'idx']], 1], + ['index-of', ';', ['get', 'featureList'], ['var', 'idx']], + ], + ], + ], + [ + 'interpolate', + ['linear'], + ['var', 'amount'], + amountRange.min, + 'white', // ! use COLORS.abundance.default instead when is available + amountRange.max, + 'green', + // color, // ! enable the color variable when we receive it + ], + ], + 'fill-opacity': opacity, + }, + }; + }), ] : []), diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts index 3216d50036..ba460c17c9 100644 --- a/app/hooks/map/types.ts +++ b/app/hooks/map/types.ts @@ -122,7 +122,8 @@ export interface UsePUGridLayer { puExcludedValue?: string[]; puAvailableValue?: string[]; runId?: number; - features?: string[]; + features?: Feature['id'][]; + selectedFeatures?: Feature['id'][]; preHighlightFeatures?: Array; postHighlightFeatures?: Array; cost?: { @@ -169,6 +170,10 @@ export interface UsePUGridLayer { [key: string]: { opacity?: number; visibility?: boolean; + amountRange?: { + 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 index 39b91235c6..6a7857cdb2 100644 --- a/app/layout/projects/show/map/legend/hooks/index.ts +++ b/app/layout/projects/show/map/legend/hooks/index.ts @@ -163,7 +163,7 @@ export const useFeatureAbundanceLegend = () => { dispatch( setLayerSettings({ - id: `feature-abundance-${featureId}`, + id: featureId, settings: { visibility: !layerSettings[featureId]?.visibility, amountRange, diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx index 973a015f42..111e3a2c05 100644 --- a/app/layout/scenarios/edit/map/component.tsx +++ b/app/layout/scenarios/edit/map/component.tsx @@ -7,24 +7,20 @@ import { getScenarioEditSlice } from 'store/slices/scenarios/edit'; import PluginMapboxGl from '@vizzuality/layer-manager-plugin-mapboxgl'; import { LayerManager, Layer } from '@vizzuality/layer-manager-react'; -import { sortBy } from 'lodash'; import { FiLayers } from 'react-icons/fi'; import { useAccessToken } from 'hooks/auth'; import { useSelectedFeatures, useTargetedFeatures } from 'hooks/features'; import { useAllGapAnalysis } from 'hooks/gap-analysis'; import { - // usePUGridPreviewLayer, - // useAdminPreviewLayer, useWDPAPreviewLayer, usePUGridLayer, useFeaturePreviewLayers, - // useLegend, useBBOX, useTargetedPreviewLayers, } from 'hooks/map'; import { useProject } from 'hooks/projects'; -import { useCostSurfaceRange, useScenario, useScenarioPU } from 'hooks/scenarios'; +import { useScenario, useScenarioPU } from 'hooks/scenarios'; import { useBestSolution } from 'hooks/solutions'; import { useWDPACategories } from 'hooks/wdpa'; @@ -130,59 +126,11 @@ export const ScenariosEditMap = (): JSX.Element => { const { data: scenarioData } = useScenario(sid); const { data: selectedFeaturesData } = useSelectedFeatures(sid, {}); - const { data: targetedFeaturesData } = useTargetedFeatures(sid, {}); - - const previewFeatureIsSelected = useMemo(() => { - if (tab === TABS['scenario-features']) { - return ( - (selectedFeaturesData || []).filter(({ id }) => selectedFeatures.includes(id)).length > 0 - ); - } - - if (tab === TABS['scenario-features-targets-spf']) { - return ( - (targetedFeaturesData || []).filter(({ id }) => selectedFeatures.includes(id)).length > 0 - ); - } - - return false; - }, [tab, selectedFeaturesData, targetedFeaturesData, selectedFeatures]); - - const selectedPreviewFeatures = useMemo(() => { - if (tab === TABS['scenario-features']) { - return (selectedFeaturesData || []) - .filter(({ id }) => selectedFeatures.includes(id)) - .map(({ name, id }) => ({ name, id })) - .sort((a, b) => { - const aIndex = selectedFeatures.indexOf(a.id as string); - const bIndex = selectedFeatures.indexOf(b.id as string); - return aIndex - bIndex; - }); - } - - if (tab === TABS['scenario-features-targets-spf']) { - return (targetedFeaturesData || []) - .filter(({ id }) => selectedFeatures.includes(id)) - .map(({ name, id }) => ({ name, id })) - .sort((a, b) => { - const aIndex = selectedFeatures.indexOf(a.id as string); - const bIndex = selectedFeatures.indexOf(b.id as string); - return aIndex - bIndex; - }); - } - - return []; - }, [tab, selectedFeaturesData, targetedFeaturesData, selectedFeatures]); - - const { data: costSurfaceRangeData } = useCostSurfaceRange(sid); - const { data: allGapAnalysisData } = useAllGapAnalysis(sid, { enabled: !!sid, }); - const { data: projectData } = useProject(pid); - const { data: protectedAreasData } = useWDPACategories({ adminAreaId: projectData?.adminAreaLevel2Id || projectData?.adminAreaLevel1I || projectData?.countryId, @@ -285,55 +233,35 @@ export const ScenariosEditMap = (): JSX.Element => { puIncludedValue: [...puIncludedValue, ...puTmpIncludedValue], puExcludedValue: [...puExcludedValue, ...puTmpExcludedValue], puAvailableValue: [...puAvailableValue, ...puTmpAvailableValue], - // features: [TABS['scenario-target-achievement'], TABS['scenario-gap-analysis']].includes(tab) - // ? [] - // : featuresIds, + features: [TABS['scenario-features'], TABS['scenario-features-targets-spf']].includes(tab) + ? [] + : featuresIds, + selectedFeatures, preHighlightFeatures, postHighlightFeatures: postHighlightedFeaturesIds, - // cost: costSurfaceRangeData, runId: selectedSolution?.runId || bestSolution?.runId, settings: { - // pugrid: layerSettings.pugrid, - // 'wdpa-percentage': layerSettings['wdpa-percentage'], - // features: layerSettings.features, - // 'cost-surface': layerSettings[selectedCostSurface], - // 'lock-in': layerSettings['lock-in'], - // 'lock-out': layerSettings['lock-out'], - // 'lock-available': layerSettings['lock-available'], - // frequency: layerSettings.frequency, - // solution: layerSettings.solution, + pugrid: layerSettings.pugrid, + 'wdpa-percentage': layerSettings['wdpa-percentage'], + 'features-highlight': layerSettings['features-highlight'], + cost: layerSettings.cost, + 'lock-in': layerSettings['lock-in'], + 'lock-out': layerSettings['lock-out'], + 'lock-available': layerSettings['lock-available'], + frequency: layerSettings.frequency, + solution: layerSettings.solution, ...layerSettings, }, }, }); const LAYERS = [ - // PUGridPreviewLayer, - // AdminPreviewLayer, PUGridLayer, WDPApreviewLayer, ...FeaturePreviewLayers, ...TargetedPreviewLayers, ].filter((l) => !!l); - // const LEGEND = useLegend({ - // layers, - // options: { - // wdpaIucnCategories: protectedAreas, - // wdpaThreshold: - // tab === TABS['scenario-protected-areas'] ? wdpaThreshold : scenarioData?.wdpaThreshold, - // cost: costSurfaceRangeData, - // items: selectedPreviewFeatures, - // puAction, - // puIncludedValue: [...puIncludedValue, ...puTmpIncludedValue], - // puExcludedValue: [...puExcludedValue, ...puTmpExcludedValue], - // puAvailableValue: [...puAvailableValue, ...puTmpAvailableValue], - // runId: selectedSolution?.runId || bestSolution?.runId, - // numberOfRuns: scenarioData?.numberOfRuns || 0, - // layerSettings, - // }, - // }); - useEffect(() => { setBounds({ bbox: BBOX, @@ -491,7 +419,7 @@ export const ScenariosEditMap = (): JSX.Element => { ); const handleTransformRequest = useCallback( - (url) => { + (url: string) => { if (url.startsWith(process.env.NEXT_PUBLIC_API_URL)) { return { url, @@ -520,19 +448,6 @@ export const ScenariosEditMap = (): JSX.Element => { [setLayerSettings, dispatch] ); - const onChangeVisibility = useCallback( - (id) => { - const { visibility = true } = layerSettings[id] || {}; - dispatch( - setLayerSettings({ - id, - settings: { visibility: !visibility }, - }) - ); - }, - [setLayerSettings, dispatch, layerSettings] - ); - const renderLegendItems = ({ type, intersections, diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts index a8f25064b0..92021ca8ee 100644 --- a/app/layout/scenarios/edit/map/legend/hooks/index.ts +++ b/app/layout/scenarios/edit/map/legend/hooks/index.ts @@ -154,7 +154,7 @@ export const useFeatureAbundanceLegend = () => { dispatch( setLayerSettings({ - id: `feature-abundance-${featureId}`, + id: featureId, settings: { visibility: !layerSettings[featureId]?.visibility, amountRange,