Implement analysis dataset selector modal

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

@@ -85,6 +85,20 @@ function BrowseControls(props: BrowseControlsProps) {
 
   return (
     <BrowseControlsWrapper {...rest}>
+      <TaxonomyWrapper>
+        {taxonomiesOptions.map(({ name, values }) => (
+          <DropdownOptions
+            key={name}
+            prefix={name}
+            items={[optionAll].concat(values)}
+            currentId={taxonomies?.[name] ?? 'all'}
+            onChange={(v) => {
+              onAction(Actions.TAXONOMY, { key: name, value: v });
+            }}
+            size={isLargeUp ? 'large' : 'medium'}
+          />
+        ))}
+      </TaxonomyWrapper>
       <SearchWrapper>
         <SearchField
           size={isLargeUp ? 'large' : 'medium'}
@@ -142,20 +156,6 @@ function BrowseControls(props: BrowseControlsProps) {
           </DropMenu>
         </DropdownScrollable>
       </SearchWrapper>
-      <TaxonomyWrapper>
-        {taxonomiesOptions.map(({ name, values }) => (
-          <DropdownOptions
-            key={name}
-            prefix={name}
-            items={[optionAll].concat(values)}
-            currentId={taxonomies?.[name] ?? 'all'}
-            onChange={(v) => {
-              onAction(Actions.TAXONOMY, { key: name, value: v });
-            }}
-            size={isLargeUp ? 'large' : 'medium'}
-          />
-        ))}
-      </TaxonomyWrapper>
     </BrowseControlsWrapper>
   );
 }

app/scripts/components/common/browse-controls/use-browse-controls.ts

@@ -4,13 +4,14 @@ import useQsStateCreator from 'qs-state-hook';
 import { set, omit } from 'lodash';
 
 export enum Actions {
+  CLEAR = 'clear',
   SEARCH = 'search',
   SORT_FIELD = 'sfield',
   SORT_DIR = 'sdir',
   TAXONOMY = 'taxonomy'
 }
 
-export type BrowserControlsAction = (what: Actions, value: any) => void;
+export type BrowserControlsAction = (what: Actions, value?: any) => void;
 
 export interface FilterOption {
   id: string;
@@ -84,6 +85,10 @@ export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
   const onAction = useCallback<BrowserControlsAction>(
     (what, value) => {
       switch (what) {
+        case Actions.CLEAR:
+          setSearch('');
+          setTaxonomies({});
+          break;
         case Actions.SEARCH:
           setSearch(value);
           break;

app/scripts/components/common/card.tsx

@@ -299,6 +299,7 @@ interface CardComponentProps {
   parentTo?: string;
   footerContent?: ReactNode;
   onCardClickCapture?: MouseEventHandler;
+  onLinkClick?: MouseEventHandler;
 }
 
 function CardComponent(props: CardComponentProps) {
@@ -316,7 +317,8 @@ function CardComponent(props: CardComponentProps) {
     parentName,
     parentTo,
     footerContent,
-    onCardClickCapture
+    onCardClickCapture,
+    onLinkClick
   } = props;
 
   return (
@@ -327,7 +329,8 @@ function CardComponent(props: CardComponentProps) {
       linkLabel={linkLabel || 'View more'}
       linkProps={{
         as: Link,
-        to: linkTo
+        to: linkTo,
+        onClick: onLinkClick
       }}
       onClickCapture={onCardClickCapture}
     >

app/scripts/components/common/empty-hub.tsx

@@ -5,7 +5,20 @@ import { themeVal } from '@devseed-ui/theme-provider';
 
 import { variableGlsp } from '$styles/variable-utils';
 
-const EmptyHubWrapper = styled.div`
+function EmptyHub(props: { children: ReactNode }) {
+  const theme = useTheme();
+
+  const { children, ...rest } = props;
+
+  return (
+    <div {...rest}>
+      <CollecticonPage size='xxlarge' color={theme.color!['base-400']} />
+      {children}
+    </div>
+  );
+}
+
+export default styled(EmptyHub)`
   max-width: 100%;
   grid-column: 1/-1;
   display: flex;
@@ -16,14 +29,3 @@ const EmptyHubWrapper = styled.div`
   border: 1px dashed ${themeVal('color.base-300')};
   gap: ${variableGlsp(1)};
 `;
-
-export default function EmptyHub(props: { children: ReactNode }) {
-  const theme = useTheme();
-
-  return (
-    <EmptyHubWrapper>
-      <CollecticonPage size='xxlarge' color={theme.color!['base-400']} />
-      {props.children}
-    </EmptyHubWrapper>
-  );
-}

app/scripts/components/data-catalog/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import styled from 'styled-components';
-import { DatasetData, datasets, datasetTaxonomies, getString } from 'veda';
+import { DatasetData, datasetTaxonomies, getString } from 'veda';
 import { Link } from 'react-router-dom';
 import { glsp } from '@devseed-ui/theme-provider';
 import { Subtitle } from '@devseed-ui/typography';
@@ -47,8 +47,7 @@ import {
   TAXONOMY_TOPICS
 } from '$utils/veda-data';
 import { DatasetClassification } from '$components/common/dataset-classification';
-
-const allDatasets = Object.values(datasets).map((d) => d!.data);
+import { allDatasets } from '$components/exploration/data-utils';
 
 const DatasetCount = styled(Subtitle)`
   grid-column: 1 / -1;
@@ -66,9 +65,9 @@ const BrowseFoldHeader = styled(FoldHeader)`
   align-items: flex-start;
 `;
 
-const sortOptions = [{ id: 'name', name: 'Name' }];
+export const sortOptions = [{ id: 'name', name: 'Name' }];
 
-const prepareDatasets = (
+export const prepareDatasets = (
   data: DatasetData[],
   options: {
     search: string;