Rename 'Catalog' related variables to 'Filter'

app/scripts/components/common/browse-controls/index.tsx

@@ -12,7 +12,7 @@ import { DropMenu, DropTitle } from '@devseed-ui/dropdown';
 
 import { useFiltersWithQS } from '../catalog/controls/hooks/use-filters-with-query';
 import { optionAll } from './constants';
-import { CatalogActions } from '$components/common/catalog/utils';
+import { FilterActions } from '$components/common/catalog/utils';
 
 import DropdownScrollable from '$components/common/dropdown-scrollable';
 import DropMenuItemButton from '$styles/drop-menu-item-button';
@@ -95,7 +95,7 @@ function BrowseControls(props: BrowseControlsProps) {
         items={[optionAll].concat(values)}
         currentId={(taxonomies[name]?.length ? taxonomies[name][0] as string : 'all')}
         onChange={(v) => {
-          onAction(CatalogActions.TAXONOMY, { key: name, value: v });
+          onAction(FilterActions.TAXONOMY, { key: name, value: v });
         }}
         size={isLargeUp ? 'large' : 'medium'}
       />
@@ -110,7 +110,7 @@ function BrowseControls(props: BrowseControlsProps) {
           placeholder='Title, description...'
           keepOpen={isLargeUp}
           value={search}
-          onChange={(v) => onAction(CatalogActions.SEARCH, v)}
+          onChange={(v) => onAction(FilterActions.SEARCH, v)}
         />
         <FilterOptionsWrapper>
           {createFilterList(taxonomiesOptions.slice(0, filterWrapConstant))}

app/scripts/components/common/card-sources.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { TaxonomyItem } from 'veda';
 import { Link } from 'react-router-dom';
 import { listReset } from '@devseed-ui/theme-provider';
-import { CatalogActions } from '$components/common//catalog/utils';
+import { FilterActions } from '$components/common//catalog/utils';
 
 const SourcesUl = styled.ul`
   ${listReset()}
@@ -51,7 +51,7 @@ export function CardSourcesList(props: SourcesListProps) {
         {sources.map((source) => (
           <li key={source.id}>
             <Link
-              to={`${rootPath}?${CatalogActions.TAXONOMY}=${encodeURIComponent(
+              to={`${rootPath}?${FilterActions.TAXONOMY}=${encodeURIComponent(
                 JSON.stringify({
                   Source: source.id
                 })

app/scripts/components/common/catalog/catalog-content.tsx

@@ -10,7 +10,7 @@ import FiltersControl from './filters-control';
 import { CatalogCard } from './catalog-card';
 import CatalogTagsContainer from './catalog-tags';
 
-import { CatalogActions } from './utils';
+import { FilterActions } from './utils';
 import { CardList } from '$components/common/card/styles';
 import EmptyHub from '$components/common/empty-hub';
 
@@ -35,7 +35,7 @@ export interface CatalogContentProps {
   emptyStateContent?: React.ReactNode;
   search: string;
   taxonomies: Record<string, string[]>;
-  onAction: (action: CatalogActions, value?: any) => void;
+  onAction: (action: FilterActions, value?: any) => void;
 }
 
 const DEFAULT_SORT_OPTION = 'asc';
@@ -82,7 +82,7 @@ function CatalogContent({
       setSelectedFilters(selectedFilters.filter((selected) => selected.id !== item.id));
     }
 
-    onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: item.taxonomy, value: item.id });
+    onAction(FilterActions.TAXONOMY_MULTISELECT, { key: item.taxonomy, value: item.id });
   }, [setSelectedFilters, selectedFilters, onAction]);
 
   const handleClearTag = useCallback((item: OptionItem) => {
@@ -93,20 +93,20 @@ function CatalogContent({
   const handleClearTags = useCallback(() => {
     setSelectedFilters([]);
     setExclusiveSourceSelected(null);
-    onAction(CatalogActions.CLEAR_TAXONOMY);
+    onAction(FilterActions.CLEAR_TAXONOMY);
   }, [onAction]);
 
   useEffect(() => {
     if (clearedTagItem && (selectedFilters.length == prevSelectedFilters.length - 1)) {
-      onAction(CatalogActions.TAXONOMY_MULTISELECT, { key: clearedTagItem.taxonomy, value: clearedTagItem.id});
+      onAction(FilterActions.TAXONOMY_MULTISELECT, { key: clearedTagItem.taxonomy, value: clearedTagItem.id});
       setClearedTagItem(undefined);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFilters, clearedTagItem]);
 
   useEffect(() => {
     if (!selectedFilters.length) {
-      onAction(CatalogActions.CLEAR_TAXONOMY);
+      onAction(FilterActions.CLEAR_TAXONOMY);
     }
 
     setExclusiveSourceSelected(null);

app/scripts/components/common/catalog/controls/hooks/use-filters-with-query.ts

@@ -4,11 +4,11 @@ import { useNavigate } from 'react-router';
 import useQsStateCreator from 'qs-state-hook';
 import { taxonomyAtom } from '../atoms/taxonomy-atom';
 import { searchAtom } from '../atoms/search-atom';
-import { CatalogActions, CatalogViewAction, onCatalogAction } from '../../utils';
+import { FilterActions, FilterAction, onFilterAction } from '../../utils';
 interface UseFiltersWithQueryResult {
   search: string;
   taxonomies: Record<string, string[]> | Record<string, never>;
-  onAction: CatalogViewAction
+  onAction: FilterAction
 }
 
 // @TECH-DEBT: We have diverged ways of dealing with query parameters and need to consolidate them.
@@ -19,9 +19,9 @@ export function useFiltersWithURLAtom(): UseFiltersWithQueryResult {
   const [search, setSearch] = useAtom(searchAtom);
   const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom);
 
-  const onAction = useCallback<CatalogViewAction>(
+  const onAction = useCallback<FilterAction>(
     (action, value) =>
-      onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
+      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies),
     [setSearch, setTaxonomies, taxonomies]
   );
 
@@ -40,25 +40,25 @@ export function useFiltersWithQS(): UseFiltersWithQueryResult {
 
   const [search, setSearch] = useQsState.memo(
     {
-      key: CatalogActions.SEARCH,
+      key: FilterActions.SEARCH,
       default: ''
     },
     []
   );
 
   const [taxonomies, setTaxonomies] = useQsState.memo(
     {
-      key: CatalogActions.TAXONOMY,
+      key: FilterActions.TAXONOMY,
       default: {},
       dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url
       hydrator: (v) => (v ? JSON.parse(v) : {}) // hydrator defines how a value is read from the url
     },
     []
   );
 
-  const onAction = useCallback<CatalogViewAction>(
+  const onAction = useCallback<FilterAction>(
     (action, value) =>
-      onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
+      onFilterAction(action, value, taxonomies, setSearch, setTaxonomies),
     [setSearch, setTaxonomies, taxonomies]
   );
 

app/scripts/components/common/catalog/filters-control.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { Taxonomy } from 'veda';
-import { CatalogActions } from './utils';
+import { FilterActions } from './utils';
 import SearchField from '$components/common/search-field';
 import CheckableFilters, { OptionItem } from '$components/common/form/checkable-filter';
 import { useSlidingStickyHeader, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header';
@@ -16,7 +16,7 @@ const ControlsWrapper = styled.div<{ widthValue?: string; heightValue?: string;
 `;
 
 interface FiltersMenuProps {
-  onAction: (action: CatalogActions, value: any) => void;
+  onAction: (action: FilterActions, value: any) => void;
   search?: string;
   taxonomiesOptions: Taxonomy[];
   allSelected: OptionItem[];
@@ -103,7 +103,7 @@ export default function FiltersControl(props: FiltersMenuProps) {
           size='large'
           placeholder='Search by title, description'
           value={search ?? ''}
-          onChange={(v) => onAction(CatalogActions.SEARCH, v)}
+          onChange={(v) => onAction(FilterActions.SEARCH, v)}
         />
         {taxonomiesItems.map(({ title, items }) => (
           <CheckableFilters

app/scripts/components/common/catalog/utils.test.ts

@@ -1,7 +1,7 @@
 import { omit, set } from 'lodash';
-import { CatalogActions, onCatalogAction } from './utils';
+import { FilterActions, onFilterAction } from './utils';
 
-describe('onCatalogAction', () => {
+describe('onFilterAction', () => {
   let setSearchMock;
   let setTaxonomiesMock;
   let taxonomies;
@@ -16,8 +16,8 @@ describe('onCatalogAction', () => {
   });
 
   it('should clear search and taxonomies on CLEAR action', () => {
-    onCatalogAction(
-      CatalogActions.CLEAR,
+    onFilterAction(
+      FilterActions.CLEAR,
       null,
       taxonomies,
       setSearchMock,
@@ -29,8 +29,8 @@ describe('onCatalogAction', () => {
   });
 
   it('should clear only taxonomies on CLEAR_TAXONOMY action', () => {
-    onCatalogAction(
-      CatalogActions.CLEAR_TAXONOMY,
+    onFilterAction(
+      FilterActions.CLEAR_TAXONOMY,
       null,
       taxonomies,
       setSearchMock,
@@ -42,8 +42,8 @@ describe('onCatalogAction', () => {
   }); 
 
   it('should clear only search on CLEAR_SEARCH action', () => {
-    onCatalogAction(
-      CatalogActions.CLEAR_SEARCH,
+    onFilterAction(
+      FilterActions.CLEAR_SEARCH,
       null,
       taxonomies,
       setSearchMock,
@@ -55,8 +55,8 @@ describe('onCatalogAction', () => {
   }); 
   it('should set search value on SEARCH action', () => {
     const searchValue = 'climate';
-    onCatalogAction(
-      CatalogActions.SEARCH,
+    onFilterAction(
+      FilterActions.SEARCH,
       searchValue,
       taxonomies,
       setSearchMock,
@@ -68,8 +68,8 @@ describe('onCatalogAction', () => {
 
   it('should add value to Topics taxonomy on TAXONOMY_MULTISELECT action', () => {
     const value = { key: 'Topics', value: 'pollution' };
-    onCatalogAction(
-      CatalogActions.TAXONOMY_MULTISELECT,
+    onFilterAction(
+      FilterActions.TAXONOMY_MULTISELECT,
       value,
       taxonomies,
       setSearchMock,
@@ -83,8 +83,8 @@ describe('onCatalogAction', () => {
 
   it('should overwrite the existing taxonomy value with TAXONOMY action', () => {
     const value = { key: 'Topics', value: 'climate' };
-    onCatalogAction(
-      CatalogActions.TAXONOMY,
+    onFilterAction(
+      FilterActions.TAXONOMY,
       value,
       taxonomies,
       setSearchMock,
@@ -98,8 +98,8 @@ describe('onCatalogAction', () => {
 
   it('should remove value from Topics taxonomy on TAXONOMY_MULTISELECT action', () => {
     const value = { key: 'Topics', value: 'climate' };
-    onCatalogAction(
-      CatalogActions.TAXONOMY_MULTISELECT,
+    onFilterAction(
+      FilterActions.TAXONOMY_MULTISELECT,
       value,
       taxonomies,
       setSearchMock,
@@ -114,8 +114,8 @@ describe('onCatalogAction', () => {
 
   it('should remove Topics key when last value is removed on TAXONOMY_MULTISELECT action', () => {
     const value = { key: 'Topics', value: 'climate' };
-    onCatalogAction(
-      CatalogActions.TAXONOMY_MULTISELECT,
+    onFilterAction(
+      FilterActions.TAXONOMY_MULTISELECT,
       value,
       { Topics: ['climate'] },
       setSearchMock,
@@ -129,8 +129,8 @@ describe('onCatalogAction', () => {
 
   it('should initialize new taxonomy key on TAXONOMY_MULTISELECT action', () => {
     const value = { key: 'Regions', value: 'Europe' };
-    onCatalogAction(
-      CatalogActions.TAXONOMY_MULTISELECT,
+    onFilterAction(
+      FilterActions.TAXONOMY_MULTISELECT,
       value,
       taxonomies,
       setSearchMock,

app/scripts/components/common/catalog/utils.ts

@@ -1,7 +1,7 @@
 import { omit, set } from 'lodash';
 import { optionAll } from '$components/common/browse-controls/constants';
 
-export enum CatalogActions {
+export enum FilterActions {
   TAXONOMY_MULTISELECT = 'taxonomy_multiselect',
   CLEAR = 'clear',
   SEARCH = 'search',
@@ -12,34 +12,34 @@ export enum CatalogActions {
   CLEAR_SEARCH = 'clear_search',
 }
 
-export type CatalogViewAction = (action: CatalogActions, value?: any) => void;
+export type FilterAction = (action: FilterActions, value?: any) => void;
 
-export function onCatalogAction(
-  action: CatalogActions,
+export function onFilterAction(
+  action: FilterActions,
   value: any,
   taxonomies: any,
   setSearch: (value: string) => void,
   setTaxonomies: (value: any) => void
 ) {
   switch (action) {
-    case CatalogActions.CLEAR: {
+    case FilterActions.CLEAR: {
       setSearch('');
       setTaxonomies({});
       break;
     }
-    case CatalogActions.SEARCH: {
+    case FilterActions.SEARCH: {
       setSearch(value);
       break;
     }
-    case CatalogActions.CLEAR_TAXONOMY: {
+    case FilterActions.CLEAR_TAXONOMY: {
       setTaxonomies({});
       break;
     }
-    case CatalogActions.CLEAR_SEARCH: {
+    case FilterActions.CLEAR_SEARCH: {
       setSearch('');
       break;
     }
-    case CatalogActions.TAXONOMY: {
+    case FilterActions.TAXONOMY: {
       {
         const { key, value: val } = value;
         if (val === optionAll.id) {
@@ -50,7 +50,7 @@ export function onCatalogAction(
       }
       break;
     }
-    case CatalogActions.TAXONOMY_MULTISELECT: {
+    case FilterActions.TAXONOMY_MULTISELECT: {
       const { key, value: val } = value;
 
       if (taxonomies && key in taxonomies) {

app/scripts/components/common/content-taxonomy.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading, Overline } from '@devseed-ui/typography';
 
-import { CatalogActions } from '$components/common/catalog/utils';
+import { FilterActions } from '$components/common/catalog/utils';
 
 import { variableGlsp } from '$styles/variable-utils';
 import { Pill } from '$styles/pill';
@@ -60,7 +60,7 @@ export function ContentTaxonomy(props: ContentTaxonomyProps) {
                   variation='achromic'
                   key={t.id}
                   as={Link}
-                  to={`${linkBase}?${CatalogActions.TAXONOMY}=${encodeURIComponent(
+                  to={`${linkBase}?${FilterActions.TAXONOMY}=${encodeURIComponent(
                     JSON.stringify({ [name]: [t.id] })
                   )}`}
                 >

app/scripts/components/exploration/components/dataset-selector-modal/index.tsx

@@ -25,7 +25,7 @@ import ModalFooterRender from './footer';
 import CatalogContent from '$components/common/catalog/catalog-content';
 import { DATASETS_PATH } from '$utils/routes';
 import { useFiltersWithURLAtom } from '$components/common/catalog/controls/hooks/use-filters-with-query';
-import { CatalogActions } from '$components/common/catalog/utils';
+import { FilterActions } from '$components/common/catalog/utils';
 
 const DatasetModal = styled(Modal)`
   z-index: ${themeVal('zIndices.modal')};
@@ -88,7 +88,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
   useEffect(() => {
     // Reset filter when modal is hidden
     if(!revealed) {
-      onAction(CatalogActions.CLEAR);
+      onAction(FilterActions.CLEAR);
     }
   },[revealed, onAction]);
 
@@ -100,7 +100,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
     setTimelineDatasets(
       reconcileDatasets(selectedIds, datasetLayers, timelineDatasets)
     );
-    onAction(CatalogActions.CLEAR);
+    onAction(FilterActions.CLEAR);
     close();
   }, [close, selectedIds, timelineDatasets, setTimelineDatasets, onAction]);