remove layers on clear selection button click (#656)

Vizzuality · Feb 26, 2024 · 8dc7264 · 8dc7264
1 parent 433854f
commit 8dc7264
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 26 deletions.
diff --git a/src/constants/analyze-areas-constants.jsx b/src/constants/analyze-areas-constants.jsx
@@ -41,6 +41,7 @@ export const PROTECTED_ATTRIBUTES_SLUG = 'protected_attributes';
 export const SPECIES_SLUG = 'species';
 export const FUTURE_PLACES_SLUG = 'future-places';
 export const SPECIFIC_REGIONS = 'specific-regions';
+export const CLEAR_SELECTIONS = 'clear-selections';
 
 export const ADDITIONAL_PROTECTION_SLUG = 'additional-protection';
 
@@ -93,6 +94,10 @@ export const getPrecalculatedAOIOptions = () => [
     slug: FUTURE_PLACES,
     label: t('Places for a Half-Earth Future'),
   },
+  {
+    title: CLEAR_SELECTIONS,
+    slug: CLEAR_SELECTIONS,
+  },
 ];
 
 export const AOIS_HISTORIC =

diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
@@ -17,6 +17,7 @@ import ShapeFileUploader from 'components/shape-file-uploader';
 import {
   getPrecalculatedAOIOptions,
   HIGHER_AREA_SIZE_LIMIT,
+  CLEAR_SELECTIONS,
 } from 'constants/analyze-areas-constants';
 import { SEARCH_TYPES } from 'constants/search-location-constants';
 
@@ -68,6 +69,14 @@ function AnalyzeAreasCardComponent({
     setAoiHistoryModalOpen(!isAoiHistoryModalOpen);
   };
 
+  const clearFilters = () => {
+    handleOptionSelection({
+      slug: CLEAR_SELECTIONS,
+      label: CLEAR_SELECTIONS,
+      title: CLEAR_SELECTIONS,
+    });
+  };
+
   return (
     <div
       className={cx(styles.sidebarCardContainer, className, {
@@ -125,16 +134,25 @@ function AnalyzeAreasCardComponent({
                 className={styles.radioContainer}
                 key={`radio-container-${option.slug}`}
               >
-                <RadioButton
-                  id={option.slug}
-                  option={{ ...option, name: option.label }}
-                  checked={selectedOption?.slug === option.slug}
-                  onChange={() => handleOptionSelection(option)}
-                  theme={radioTheme}
-                />
+                {option.slug !== CLEAR_SELECTIONS && (
+                  <RadioButton
+                    id={option.slug}
+                    option={{ ...option, name: option.label }}
+                    checked={selectedOption?.slug === option.slug}
+                    onChange={() => handleOptionSelection(option)}
+                    theme={radioTheme}
+                  />
+                )}
               </div>
             );
           })}
+          <button
+            type="button"
+            className={styles.clearFilters}
+            onClick={clearFilters}
+          >
+            clear selections
+          </button>
         </div>
       )}
       {selectedAnalysisTab === 'search' && (

diff --git a/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js b/src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
@@ -23,6 +23,7 @@ import { useSketchWidget } from 'hooks/esri';
 
 import {
   getPrecalculatedAOIOptions,
+  CLEAR_SELECTIONS,
   HIGHER_AREA_SIZE_LIMIT,
 } from 'constants/analyze-areas-constants';
 import {
@@ -218,10 +219,21 @@ function AnalyzeAreasContainer(props) {
           ? LAYERS_CATEGORIES.PROTECTION
           : undefined;
 
-      let layersToToggle = [
-        { layerId: formerSelectedSlug },
-        { layerId: newSelectedOption, category: newLayerCategory },
-      ];
+      let layersToToggle = [];
+      layersToToggle.push({ layerId: formerSelectedSlug });
+      if (
+        newSelectedOption !== CLEAR_SELECTIONS &&
+        formerSelectedSlug !== undefined
+      ) {
+        layersToToggle.push({
+          layerId: newSelectedOption,
+          category: newLayerCategory,
+        });
+      } else {
+        layersToToggle = activeLayers.map((l) => ({
+          layerId: l.title,
+        }));
+      }
 
       if (protectedAreasSelected) {
         const additionalProtectedAreasLayers = [
@@ -238,21 +250,6 @@ function AnalyzeAreasContainer(props) {
         });
       }
 
-      // Never toggle (remove) future places layer if its active
-      // Future places layer will be activated if we select it at some point
-      // and never toggled unless we do it from the protection checkbox
-      const futureLayerIsActive = activeLayers.some(
-        (l) => l.title === HALF_EARTH_FUTURE_TILE_LAYER
-      );
-      if (
-        futureLayerIsActive &&
-        layersToToggle.some((l) => l.layerId === HALF_EARTH_FUTURE_TILE_LAYER)
-      ) {
-        layersToToggle = layersToToggle.filter(
-          (l) => l.layerId !== HALF_EARTH_FUTURE_TILE_LAYER
-        );
-      }
-
       return layersToToggle;
     };