Skip to content

Commit

Permalink
Merge pull request #1549 from Vizzuality/client/fix/sync-protected-ar…
Browse files Browse the repository at this point in the history 
…eas-visbility

syncs protected areas visibility
  • Loading branch information
@andresgnlez
andresgnlez authored Oct 16, 2023
2 parents e923fe3 + 2f4491b commit a593a57
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 41 deletions.
2 changes: 1 addition & 1 deletion app/components/confirmation-prompt/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ConfirmationPrompt: React.FC<ConfirmationPromptProps> = ({
className={cn({
'my-4 text-sm sm:pr-32': true,
'text-black underline': !!danger,
'text-gray-100': !danger,
'text-gray-900': !danger,
})}
>
{description}
Expand Down
31 changes: 0 additions & 31 deletions app/hooks/map/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -688,37 +688,6 @@ export function usePUGridLayer({
// ANALYSIS - GAP ANALYSIS
...(sublayers.includes('features')
? [
// ...(features?.length
// ? [
// {
// type: 'fill',
// 'source-layer': 'layer0',
// layout: {
// visibility: getLayerVisibility(FeaturesVisibility),
// },
// // ...runId && {
// // filter: [
// // 'all',
// // ['in', `-${runId}-`, ['get', 'valuePosition']],
// // ],
// // },
// paint: {
// 'fill-color': COLORS.features,
// 'fill-opacity': [
// 'case',
// [
// 'any',
// ...features.map((id) => {
// return ['in', id, ['get', 'featureList']];
// }),
// ],
// 0.5 * FeaturesOpacity,
// 0,
// ],
// },
// },
// ]
// : []),
...preHighlightFeatures.map((id) => ({
type: 'fill',
'source-layer': 'layer0',
Expand Down
24 changes: 18 additions & 6 deletions app/layout/project/sidebar/project/inventory-panel/wdpas/index.tsx
View file
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 { setSelectedWDPAs as setVisibleWDPAs } from 'store/slices/projects/[id]';
import { setSelectedWDPAs as setVisibleWDPAs, setLayerSettings } from 'store/slices/projects/[id]';

import { useProjectWDPAs } from 'hooks/wdpa';

Expand All @@ -28,9 +28,11 @@ const InventoryPanelProtectedAreas = ({
}): JSX.Element => {
const dispatch = useAppDispatch();

const { selectedWDPAs: visibleWDPAs, search } = useAppSelector(
(state) => state['/projects/[id]']
);
const {
selectedWDPAs: visibleWDPAs,
search,
layerSettings,
} = useAppSelector((state) => state['/projects/[id]']);

const { query } = useRouter();
const { pid } = query as { pid: string };
Expand Down Expand Up @@ -78,13 +80,23 @@ const InventoryPanelProtectedAreas = ({
const toggleSeeOnMap = useCallback(
(WDPAId: WDPA['id']) => {
const newSelectedWDPAs = [...visibleWDPAs];
if (!newSelectedWDPAs.includes(WDPAId)) {
const isIncluded = newSelectedWDPAs.includes(WDPAId);
if (!isIncluded) {
newSelectedWDPAs.push(WDPAId);
} else {
const i = newSelectedWDPAs.indexOf(WDPAId);
newSelectedWDPAs.splice(i, 1);
}
dispatch(setVisibleWDPAs(newSelectedWDPAs));

dispatch(
setLayerSettings({
id: WDPAId,
settings: {
visibility: !isIncluded,
},
})
);
},
[dispatch, visibleWDPAs]
);
Expand All @@ -108,7 +120,7 @@ const InventoryPanelProtectedAreas = ({
name: wdpa.name,
scenarios: wdpa.scenarioUsageCount,
isCustom: wdpa.isCustom,
isVisibleOnMap: visibleWDPAs?.includes(wdpa.id),
isVisibleOnMap: layerSettings[wdpa.id]?.visibility ?? false,
}));

return (
Expand Down
34 changes: 31 additions & 3 deletions app/layout/projects/show/map/legend/hooks/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { useRouter } from 'next/router';

import { useAppDispatch, useAppSelector } from 'store/hooks';
import { setSelectedFeatures, setLayerSettings } from 'store/slices/projects/[id]';
import {
setSelectedFeatures,
setLayerSettings,
setSelectedWDPAs as setVisibleWDPAs,
} from 'store/slices/projects/[id]';

import chroma from 'chroma-js';

Expand Down Expand Up @@ -69,7 +73,9 @@ export const useConservationAreasLegend = () => {
const { query } = useRouter();
const { pid } = query as { pid: string };
const dispatch = useAppDispatch();
const { layerSettings } = useAppSelector((state) => state['/projects/[id]']);
const { layerSettings, selectedWDPAs: visibleWDPAs } = useAppSelector(
(state) => state['/projects/[id]']
);

const protectedAreaQuery = useProjectWDPAs(
pid,
Expand All @@ -82,6 +88,16 @@ export const useConservationAreasLegend = () => {
return LEGEND_LAYERS['designated-areas']({
items: protectedAreaQuery?.data,
onChangeVisibility: (WDPAId: WDPA['id']) => {
const newSelectedWDPAs = [...visibleWDPAs];
const isIncluded = newSelectedWDPAs.includes(WDPAId);
if (!isIncluded) {
newSelectedWDPAs.push(WDPAId);
} else {
const i = newSelectedWDPAs.indexOf(WDPAId);
newSelectedWDPAs.splice(i, 1);
}

dispatch(setVisibleWDPAs(newSelectedWDPAs));
dispatch(
setLayerSettings({
id: WDPAId,
Expand All @@ -107,7 +123,9 @@ export const useFeatureAbundanceLegend = () => {
}
);

const { layerSettings } = useAppSelector((state) => state['/projects/[id]']);
const { layerSettings, selectedFeatures: visibleFeatures } = useAppSelector(
(state) => state['/projects/[id]']
);

const totalItems = projectFeaturesQuery.data?.length || 0;

Expand All @@ -133,6 +151,16 @@ export const useFeatureAbundanceLegend = () => {
onChangeVisibility: (featureId: Feature['id']) => {
const { color, amountRange } = items.find(({ id }) => id === featureId) || {};

const newSelectedFeatures = [...visibleFeatures];
const isIncluded = newSelectedFeatures.includes(featureId);
if (!isIncluded) {
newSelectedFeatures.push(featureId);
} else {
const i = newSelectedFeatures.indexOf(featureId);
newSelectedFeatures.splice(i, 1);
}
dispatch(setSelectedFeatures(newSelectedFeatures));

dispatch(
setLayerSettings({
id: `feature-abundance-${featureId}`,
Expand Down

1 comment on commit a593a57

@vercel
Copy link

@vercel vercel bot commented on a593a57 Oct 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

marxan – ./

marxan-vizzuality1.vercel.app
marxan23.vercel.app
marxan-git-develop-vizzuality1.vercel.app

Please sign in to comment.