diff --git a/src/containers/categories-menu/index.tsx b/src/containers/categories-menu/index.tsx index 70e8ef902..cf458b8fc 100644 --- a/src/containers/categories-menu/index.tsx +++ b/src/containers/categories-menu/index.tsx @@ -10,6 +10,7 @@ import { useRecoilState, useSetRecoilState } from 'recoil'; import CATEGORY_OPTIONS from 'containers/navigation/constants'; import widgets from 'containers/widgets/constants'; +import { LAYERS_BY_CATEGORY } from 'containers/widgets/constants'; import { Checkbox, CheckboxIndicator } from 'components/ui/checkbox'; import Icon from 'components/ui/icon'; @@ -31,15 +32,13 @@ const Category = () => { widget?.categoryIds?.includes(event.currentTarget.value as Category) ); const activeWidgetsIds = widgetsFiltered.map((widget) => widget.slug); - - const activeLayersIds: ActiveLayers[] = widgetsFiltered - .flatMap(({ layersIds }) => layersIds || []) - .filter(Boolean) - .map((id) => ({ - id: id as WidgetSlugType | ContextualBasemapsId | 'custom-area', - opacity: '1', - visibility: 'visible', - })); + const activeLayersIds: ActiveLayers[] = LAYERS_BY_CATEGORY[ + event.currentTarget.value as string + ].map((id) => ({ + id: id as WidgetSlugType | ContextualBasemapsId | 'custom-area', + opacity: '1', + visibility: 'visible', + })); setActiveWidgets(activeWidgetsIds); setActiveLayers(activeLayersIds); diff --git a/src/containers/datasets/biomass/widget.tsx b/src/containers/datasets/biomass/widget.tsx index 723d03c29..26e8f1293 100644 --- a/src/containers/datasets/biomass/widget.tsx +++ b/src/containers/datasets/biomass/widget.tsx @@ -59,7 +59,7 @@ const BiomassWidget = () => { )} - {(!isCanceled || isError) && !isFetching && ( + {(!isCanceled || isError) && !isFetching && !mean && (

An error occurred while fetching the data. You can try again. diff --git a/src/containers/datasets/habitat-extent/hooks.tsx b/src/containers/datasets/habitat-extent/hooks.tsx index 50afc14be..42b2b5ace 100644 --- a/src/containers/datasets/habitat-extent/hooks.tsx +++ b/src/containers/datasets/habitat-extent/hooks.tsx @@ -118,7 +118,7 @@ export function useMangroveHabitatExtent( const totalLength = metadata?.total_lenght; const mangroveArea = dataParsed?.habitat_extent_area; const mangroveCoastCoverage = dataParsed?.linear_coverage; - const mangroveCoastCoveragePercentage = (mangroveCoastCoverage * 100) / totalLength; + const mangroveCoastCoveragePercentage = (mangroveCoastCoverage * 100) / totalLength || 0; const nonMangrove = totalLength - mangroveCoastCoverage; const defaultUnitLinearCoverage = metadata?.units?.linear_coverage; const area = unit === 'ha' ? mangroveArea * 100 : mangroveArea; @@ -188,10 +188,10 @@ export function useMangroveHabitatExtent( return { metadata, - area: numberFormat(area), - nonMangrove: numberFormat(nonMangrove), - mangroveCoastCoveragePercentage: numberFormat(mangroveCoastCoveragePercentage), - totalLength: numberFormat(totalLength), + area: numberFormat(+area), + nonMangrove: numberFormat(+nonMangrove), + mangroveCoastCoveragePercentage: numberFormat(+mangroveCoastCoveragePercentage), + totalLength: numberFormat(+totalLength), years: metadata?.year, // API improvement, change year to years as is an array units: metadata?.units, legend: LegendData, @@ -203,7 +203,7 @@ export function useMangroveHabitatExtent( defaultUnitLinearCoverage, noData, }; - }, [data, unit, year]); + }, [data, unit, year, location, noData]); return useMemo(() => { return { diff --git a/src/containers/datasets/habitat-extent/widget.tsx b/src/containers/datasets/habitat-extent/widget.tsx index 0619c0d22..6a9093449 100644 --- a/src/containers/datasets/habitat-extent/widget.tsx +++ b/src/containers/datasets/habitat-extent/widget.tsx @@ -94,7 +94,7 @@ const HabitatExtent = () => { )}

- {(isCanceled || isError) && !isFetching && ( + {(isCanceled || isError) && !isFetching && !data && (

An error occurred while fetching the data. You can try again. @@ -109,7 +109,7 @@ const HabitatExtent = () => {

)} - {!!data && !isFetching && !isError && !isCanceled && ( + {!!data && !isFetching && !isError && (

The area of mangrove habitat in {location} was{' '} diff --git a/src/containers/datasets/height/widget.tsx b/src/containers/datasets/height/widget.tsx index 25118cb60..b54bb0c54 100644 --- a/src/containers/datasets/height/widget.tsx +++ b/src/containers/datasets/height/widget.tsx @@ -54,7 +54,7 @@ const HeightWidget = () => { )}

- {(!isCanceled || isError) && !isFetching && ( + {(!isCanceled || isError) && !isFetching && !data && (

An error occurred while fetching the data. You can try again. @@ -69,7 +69,7 @@ const HeightWidget = () => {

)} - {data && !isFetching && !isError && ( + {!!data && !isFetching && !isError && (

Mean mangrove maximum canopy height in {location}{' '} diff --git a/src/containers/datasets/net-change/widget.tsx b/src/containers/datasets/net-change/widget.tsx index 9b04da005..c22792511 100644 --- a/src/containers/datasets/net-change/widget.tsx +++ b/src/containers/datasets/net-change/widget.tsx @@ -90,7 +90,7 @@ const NetChangeWidget = () => { )}

- {(isCanceled || isError) && !isFetching && ( + {(isCanceled || isError) && !isFetching && !data?.data?.length && (

An error occurred while fetching the data. You can try again. diff --git a/src/containers/navigation/location-tools/index.tsx b/src/containers/navigation/location-tools/index.tsx index 740bb6f17..3c0fc5c2e 100644 --- a/src/containers/navigation/location-tools/index.tsx +++ b/src/containers/navigation/location-tools/index.tsx @@ -7,12 +7,13 @@ import Link from 'next/link'; import cn from 'lib/classnames'; import { analysisAlertAtom, analysisAtom, skipAnalysisAlertAtom } from 'store/analysis'; +import { drawingToolAtom, drawingUploadToolAtom } from 'store/drawing-tool'; import { activeGuideAtom } from 'store/guide'; import { locationsModalAtom } from 'store/locations'; import { locationToolAtom } from 'store/sidebar'; import { BiReset } from 'react-icons/bi'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'; import WidgetDrawingTool from 'containers/datasets/drawing-tool'; import WidgetDrawingUploadTool from 'containers/datasets/drawing-upload-tool'; @@ -32,6 +33,10 @@ const LocationTools = () => { const [locationsModalIsOpen, setLocationsModalIsOpen] = useRecoilState(locationsModalAtom); const [isAnalysisAlertOpen, setAnalysisAlert] = useRecoilState(analysisAlertAtom); const [skipAnalysisAlert, setSkipAnalysisAlert] = useRecoilState(skipAnalysisAlertAtom); + const resetAnalysisState = useResetRecoilState(analysisAtom); + const resetDrawingState = useResetRecoilState(drawingToolAtom); + const resetDrawingUploadState = useResetRecoilState(drawingUploadToolAtom); + const guideIsActive = useRecoilValue(activeGuideAtom); const map = useMap(); @@ -72,6 +77,9 @@ const LocationTools = () => { ]); const handleReset = useCallback(() => { + resetDrawingState(); + resetAnalysisState(); + resetDrawingUploadState(); if (map) { map?.['default-desktop-no-print'].flyTo({ center: [0, 20], diff --git a/src/containers/widgets/constants.ts b/src/containers/widgets/constants.ts index 3a548be17..c809d322a 100644 --- a/src/containers/widgets/constants.ts +++ b/src/containers/widgets/constants.ts @@ -333,4 +333,16 @@ export const WIDGETS_BY_CATEGORY = [ }, ]; +export const LAYERS_BY_CATEGORY: { [key: string]: string[] } = { + distribution_and_change: ['mangrove_habitat_extent', 'mangrove_net_change'], + restoration_and_conservation: [ + 'mangrove_habitat_extent', + 'mangrove_net_change', + 'mangrove_alerts', + ], + climate_and_policy: ['mangrove_blue_carbon'], + ecosystem_services: ['mangrove_biomass', 'mangrove_height', 'mangrove_blue_carbon'], + contextual_layers: ['mangrove_allen_coral_reef', 'mangrove_salt_marsh', 'mangrove_tidal_flats'], +}; + export default widgets; diff --git a/src/containers/widgets/index.tsx b/src/containers/widgets/index.tsx index 44d9780c3..de5143b61 100644 --- a/src/containers/widgets/index.tsx +++ b/src/containers/widgets/index.tsx @@ -5,14 +5,13 @@ import { useRouter } from 'next/router'; import cn from 'lib/classnames'; import { drawingToolAtom, drawingUploadToolAtom } from 'store/drawing-tool'; -import { printModeState } from 'store/print-mode'; import { locationToolAtom } from 'store/sidebar'; import { activeCategoryAtom } from 'store/sidebar'; import { widgetsCollapsedAtom } from 'store/widgets'; import { activeWidgetsAtom } from 'store/widgets'; import { motion } from 'framer-motion'; -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { useWindowSize } from 'usehooks-ts'; import WidgetsLayout from 'layouts/widgets'; @@ -60,10 +59,14 @@ const buttonMotion = { }; const textMotion = { - rest: { opacity: 0, transition: { ease: 'easeOut', duration: 0.2, type: 'tween', x: 140 } }, + rest: { + opacity: 0, + transition: { ease: 'easeOut', duration: 0.2, type: 'tween', x: 140, width: 0 }, + }, hover: { opacity: 1, x: 0, + width: 140, transition: { duration: 0.4, type: 'tween', @@ -76,7 +79,6 @@ const HELPER_ID = 'menu-categories'; const WidgetsContainer: FC = () => { const [categorySelected] = useRecoilState(activeCategoryAtom); const [{ customGeojson }] = useRecoilState(drawingToolAtom); - const isPrintingMode = useRecoilValue(printModeState); const { query: { params }, @@ -99,7 +101,6 @@ const WidgetsContainer: FC = () => { ); }, [activeWidgets, enabledWidgets, customGeojson, uploadedGeojson]) satisfies WidgetTypes[]; - const setPrintingMode = useSetRecoilState(printModeState); const cat = useWidgetsIdsByCategory(activeWidgets); // ensures that the appropriate widgets for a selected category are activated during @@ -342,7 +343,7 @@ const WidgetsContainer: FC = () => { - {!!widgets.length && isPrintingMode ? ( + {!!widgets.length && (uploadedGeojson || customGeojson) ? (