Merge pull request #1163 from Vizzuality/fix/analysis

layers presets

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);

src/containers/datasets/biomass/widget.tsx

@@ -59,7 +59,7 @@ const BiomassWidget = () => {
           </button>
         )}
       </div>
-      {(!isCanceled || isError) && !isFetching && (
+      {(!isCanceled || isError) && !isFetching && !mean && (
         <div className="flex flex-col items-center space-y-4">
           <p className={`${WIDGET_SENTENCE_STYLE} italic`}>
             An error occurred while fetching the data. You can try again.

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 {

src/containers/datasets/habitat-extent/widget.tsx

@@ -94,7 +94,7 @@ const HabitatExtent = () => {
           </button>
         )}
       </div>
-      {(isCanceled || isError) && !isFetching && (
+      {(isCanceled || isError) && !isFetching && !data && (
         <div className="flex flex-col items-center space-y-4">
           <p className={`${WIDGET_SENTENCE_STYLE} italic`}>
             An error occurred while fetching the data. You can try again.
@@ -109,7 +109,7 @@ const HabitatExtent = () => {
           </button>
         </div>
       )}
-      {!!data && !isFetching && !isError && !isCanceled && (
+      {!!data && !isFetching && !isError && (
         <div className="space-y-4">
           <p className={WIDGET_SENTENCE_STYLE}>
             The area of mangrove habitat in <span className="font-bold"> {location}</span> was{' '}

src/containers/datasets/height/widget.tsx

@@ -54,7 +54,7 @@ const HeightWidget = () => {
           </button>
         )}
       </div>
-      {(!isCanceled || isError) && !isFetching && (
+      {(!isCanceled || isError) && !isFetching && !data && (
         <div className="flex flex-col items-center space-y-4">
           <p className={`${WIDGET_SENTENCE_STYLE} italic`}>
             An error occurred while fetching the data. You can try again.
@@ -69,7 +69,7 @@ const HeightWidget = () => {
           </button>
         </div>
       )}
-      {data && !isFetching && !isError && (
+      {!!data && !isFetching && !isError && (
         <div>
           <p className={WIDGET_SENTENCE_STYLE}>
             Mean mangrove maximum canopy height in <span className="font-bold"> {location}</span>{' '}

src/containers/datasets/net-change/widget.tsx

@@ -90,7 +90,7 @@ const NetChangeWidget = () => {
           </button>
         )}
       </div>
-      {(isCanceled || isError) && !isFetching && (
+      {(isCanceled || isError) && !isFetching && !data?.data?.length && (
         <div className="flex flex-col items-center space-y-4">
           <p className={`${WIDGET_SENTENCE_STYLE} italic`}>
             An error occurred while fetching the data. You can try again.

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],

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;

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 = () => {
         </DialogContent>
       </Dialog>
 
-      {!!widgets.length && isPrintingMode ? (
+      {!!widgets.length && (uploadedGeojson || customGeojson) ? (
         <div className="flex w-full justify-center py-4 print:hidden">
           <Helper
             className={{