From e435163788f731c1fe678a0b7c18f368de9198bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mar=C3=ADa?= Date: Tue, 1 Oct 2024 13:45:58 +0200 Subject: [PATCH] national dash fix --- next-env.d.ts | 2 +- .../indicator-source/index.tsx | 1 + .../datasets/national-dashboard/layer.tsx | 5 ++-- src/containers/map/index.tsx | 1 + src/containers/map/layer-manager/index.tsx | 27 ++----------------- src/containers/map/legend/index.tsx | 8 ++++-- 6 files changed, 13 insertions(+), 31 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. diff --git a/src/containers/datasets/national-dashboard/indicator-source/index.tsx b/src/containers/datasets/national-dashboard/indicator-source/index.tsx index 025bdb522..354368438 100644 --- a/src/containers/datasets/national-dashboard/indicator-source/index.tsx +++ b/src/containers/datasets/national-dashboard/indicator-source/index.tsx @@ -84,6 +84,7 @@ const IndicatorSource = ({ }, ...activeLayers, ] as ActiveLayers[]); + setActiveLayers(layersUpdate); }, [activeLayers, setActiveLayers, id, dataSource, isActive, layerIndex, locationIso, source]); diff --git a/src/containers/datasets/national-dashboard/layer.tsx b/src/containers/datasets/national-dashboard/layer.tsx index 931dec86c..5209fba9a 100644 --- a/src/containers/datasets/national-dashboard/layer.tsx +++ b/src/containers/datasets/national-dashboard/layer.tsx @@ -12,10 +12,9 @@ const MangrovesNationalDashboardLayer = ({ beforeId, id }: LayerProps) => { const [activeLayers] = useRecoilState(activeLayersAtom); const activeLayer = activeLayers?.find((l) => l.id === id); const SOURCE = useSource({ settings: activeLayer.settings }); - const LAYER = useLayers({ id: 'mangrove_national_dashboard_layer', - opacity: parseFloat(activeLayer.opacity), + opacity: parseFloat(activeLayer?.opacity), visibility: activeLayer.visibility, settings: activeLayer.settings, }); @@ -23,7 +22,7 @@ const MangrovesNationalDashboardLayer = ({ beforeId, id }: LayerProps) => { return ( - + ); }; diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx index 152209263..81ad3fe6c 100644 --- a/src/containers/map/index.tsx +++ b/src/containers/map/index.tsx @@ -344,6 +344,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => { setLoaded(true); }, []); const pitch = map?.getPitch(); + return (
{ } = useRouter(); const id = params?.[1]; - const locationType = (params?.[0] || 'worldwide') as LocationTypes; - function filterLayersByLocationType(widgets: WidgetTypes[], locationType: string): string[] { - const filteredLayers: string[] = []; - - widgets.forEach((widget) => { - if (widget.locationType?.includes(locationType)) { - if (widget.layersIds) { - filteredLayers.push(...widget.layersIds); - } - if (widget.contextualLayersIds) { - filteredLayers.push(...widget.contextualLayersIds); - } - if (widget.subLayersIds) { - filteredLayers.push(...widget.subLayersIds); - } - } - }); - - return filteredLayers; - } - - const filteredLayers = filterLayersByLocationType(widgets, locationType); - // layers that act as basemap (such planet imagery or high resolution extent) must be always at the bottom const basemap_layers = ACTIVE_LAYERS?.filter( (layer) => layer?.includes('planet') || layer === 'hi-res-extent' ); const no_planet_layers = ACTIVE_LAYERS?.filter( - (layer) => - !layer?.includes('planet') && layer !== 'hi-res-extent' && filteredLayers?.includes(layer) + (layer) => !layer?.includes('planet') && layer !== 'hi-res-extent' ); const filterNationalDashboardLayers = !NATIONAL_DASHBOARD_LOCATIONS?.includes(id) @@ -79,6 +55,7 @@ const LayerManagerContainer = () => { : no_planet_layers; const LAYERS_FILTERED = [...(filterNationalDashboardLayers || []), ...(basemap_layers || [])]; + const handleAdd = useCallback( (styleIds: LayerProps['id'][]) => { setInteractiveLayerIds((prevInteractiveIds) => [...prevInteractiveIds, ...styleIds]); diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx index 1684921ce..190ef7c55 100644 --- a/src/containers/map/legend/index.tsx +++ b/src/containers/map/legend/index.tsx @@ -51,7 +51,11 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => { const filteredLayersIds = filterLayersByLocationType(widgets, locationType); const filteredLayers = activeLayers?.filter(({ id }) => { - return filteredLayersIds.includes(id); + return ( + filteredLayersIds.includes(id) || + (id.includes('mangrove_national_dashboard') && + filteredLayersIds.includes('mangrove_national_dashboard')) + ); }) as ActiveLayers[]; const [isOpen, setIsOpen] = useState(false); @@ -67,7 +71,7 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => { const handleChangeOrder = useCallback( (order: string[]) => { const newLayers = order.map((id) => { - return activeLayers?.find((l) => l.id === id); + return activeLayers?.find((l) => l.id === id || l.id.includes(id)); }) as ActiveLayers[]; const activeLayerPlanet = activeLayers?.filter((l) => l.id.includes('planet')); setActiveLayers([...newLayers, ...activeLayerPlanet]);