Skip to content

Commit

Permalink
abundance feature layer
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresgnlez
andresgnlez committed Oct 17, 2023
1 parent d3e6e3c commit 1e1cc94
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 107 deletions.
54 changes: 50 additions & 4 deletions app/hooks/map/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -608,7 +608,7 @@ export function usePUGridLayer({
puIncludedValue,
puExcludedValue,
puAvailableValue,
// features = [],
selectedFeatures = [],
preHighlightFeatures = [],
postHighlightFeatures = [],
runId,
Expand All @@ -617,7 +617,6 @@ export function usePUGridLayer({
const {
pugrid: PUgridSettings = {},
'wdpa-percentage': WdpaPercentageSettings = {},
// features: FeaturesSettings = {},
'cost-surface': CostSettings = {},
'lock-in': LockInSettings = {},
'lock-out': LockOutSettings = {},
Expand All @@ -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;
Expand Down Expand Up @@ -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,
},
};
}),
]
: []),

Expand Down
7 changes: 6 additions & 1 deletion app/hooks/map/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@ export interface UsePUGridLayer {
puExcludedValue?: string[];
puAvailableValue?: string[];
runId?: number;
features?: string[];
features?: Feature['id'][];
selectedFeatures?: Feature['id'][];
preHighlightFeatures?: Array<string>;
postHighlightFeatures?: Array<string>;
cost?: {
Expand Down Expand Up @@ -169,6 +170,10 @@ export interface UsePUGridLayer {
[key: string]: {
opacity?: number;
visibility?: boolean;
amountRange?: {
min: number;
max: number;
};
};
};
};
Expand Down
2 changes: 1 addition & 1 deletion app/layout/projects/show/map/legend/hooks/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const useFeatureAbundanceLegend = () => {

dispatch(
setLayerSettings({
id: `feature-abundance-${featureId}`,
id: featureId,
settings: {
visibility: !layerSettings[featureId]?.visibility,
amountRange,
Expand Down
115 changes: 15 additions & 100 deletions app/layout/scenarios/edit/map/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion app/layout/scenarios/edit/map/legend/hooks/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const useFeatureAbundanceLegend = () => {

dispatch(
setLayerSettings({
id: `feature-abundance-${featureId}`,
id: featureId,
settings: {
visibility: !layerSettings[featureId]?.visibility,
amountRange,
Expand Down

0 comments on commit 1e1cc94

Please sign in to comment.