Port the Catalog View in the E&A dataset selector modal

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

@@ -9,7 +9,6 @@ export enum Actions {
   SORT_FIELD = 'sfield',
   SORT_DIR = 'sdir',
   TAXONOMY = 'taxonomy',
-  TAXONOMY_MULTISELECT = 'taxonomy_multiselect',
 }
 
 export type BrowserControlsAction = (what: Actions, value?: any) => void;
@@ -118,26 +117,8 @@ export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
             }
           }
           break;
-        case Actions.TAXONOMY_MULTISELECT:
-          {
-            const { key, value: val } = value;
-            if (taxonomies && (key in taxonomies)) { // If taxonomy group currently present
-              const taxonomyGroupValues = taxonomies[key] instanceof Array ? (taxonomies[key] as string[]) : [taxonomies[key]];
-
-              if (taxonomyGroupValues.includes(val)) { // If val exists, then remove
-                const updatedValues = taxonomyGroupValues.filter((x) => x !== val);
-                updatedValues.length ? setTaxonomies(set({ ...taxonomies }, key, updatedValues)) : setTaxonomies(omit(taxonomies, key));
-              } else { // else add
-                taxonomyGroupValues.push(val);
-                setTaxonomies(taxonomies);
-              }
-            } else { // Taxonomy group currently not present
-              setTaxonomies(set({ ...taxonomies }, key, [val]));
-            }
-          }
-          break;
       }
-      
+
     },
     [setSortField, setSortDir, taxonomies, setTaxonomies, setSearch]
   );

app/scripts/components/common/card/index.tsx

@@ -29,7 +29,7 @@ interface CardItemProps {
 }
 
 /**
-  @NOTE: CardList & CardFooter have been moved over to /common/card/styles and has modified styles 
+  @NOTE: CardList & CardFooter have been moved over to /common/card/styles and has modified styles
   These styles are used in GHG instance, so we leave these for now. We should move these styles to GHG instances
   since these styles are not used by UI instance anymore.
 */
@@ -312,10 +312,10 @@ function CardComponent(props: CardComponentProps) {
             )}
           </>
         )
-      } 
+      }
       {
         cardType === 'horizontal-info' && (
-          <HorizontalInfoCard 
+          <HorizontalInfoCard
             title={title}
             description={description}
             imgSrc={imgSrc}

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

@@ -0,0 +1,157 @@
+import React from "react";
+import { DatasetData, DatasetLayer } from "veda";
+import styled, { css } from "styled-components";
+import { CollecticonPlus, CollecticonTickSmall, iconDataURI } from "@devseed-ui/collecticons";
+import { glsp, themeVal } from "@devseed-ui/theme-provider";
+import { Card } from "../card";
+import { CardMeta, CardTopicsList } from "../card/styles";
+import { DatasetClassification } from "../dataset-classification";
+import { CardSourcesList } from "../card-sources";
+import TextHighlight from "../text-highlight";
+import { getDatasetPath } from "$utils/routes";
+import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data";
+import { Pill } from "$styles/pill";
+
+interface CatalogCardProps {
+  dataset: DatasetData;
+  layer?: DatasetLayer;
+  searchTerm: string;
+  selectable?: boolean;
+  selected?: boolean;
+  onDatasetClick?: () => void;
+}
+
+const CardSelectable = styled(Card)<{ checked?: boolean, selectable?: boolean }>`
+  outline: 4px solid transparent;
+  ${({ checked }) =>
+    checked &&
+    css`
+      outline-color: ${themeVal("color.primary")};
+    `}
+
+  ${({ selectable }) =>
+    selectable &&
+    css`
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 80px;
+      height: 3rem;
+      min-width: 3rem;
+      transform: translate(-50%, -50%);
+      padding: ${glsp(0.5, 1, 0.5, 1)};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${themeVal("color.primary")};
+      border-radius: ${themeVal("shape.ellipsoid")};
+      font-weight: ${themeVal("type.base.bold")};
+      line-height: 1rem;
+      background-image: url(${({ theme }) =>
+        iconDataURI(CollecticonPlus, {
+          color: theme.color?.surface,
+          size: "large"
+        })});
+      background-repeat: no-repeat;
+      background-position: 0.75rem center;
+      pointer-events: none;
+      transition: all 0.16s ease-in-out;
+      opacity: 0;
+    }
+
+    &:hover ::before {
+      opacity: 1;
+    }
+    `
+  }
+
+  ${({ checked }) =>
+    checked &&
+    css`
+      &:before {
+        opacity: 1;
+        z-index: 10;
+        content: 'Selected';
+        color: ${themeVal("color.surface")};
+        padding-left: 2.75rem;
+        background-image: url(${({ theme }) =>
+          iconDataURI(CollecticonTickSmall, {
+            color: theme.color?.surface,
+            size: "large"
+          })});
+        background-color: ${themeVal("color.base")};
+      }
+      &:hover ::before {
+        background-color: ${themeVal("color.primary")};
+      }
+    `}
+`;
+
+export const CatalogCard = (props: CatalogCardProps) => {
+  const { dataset, layer, searchTerm, selectable, selected, onDatasetClick } = props;
+
+  const topics = getTaxonomy(dataset, TAXONOMY_TOPICS)?.values;
+  const sources = getTaxonomy(dataset, TAXONOMY_SOURCE)?.values;
+  const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);
+
+  const title = layer ? layer.name : dataset.name;
+  const description = layer ? layer.description : dataset.description;
+  const imgSrc = layer?.media?.src ?? dataset.media?.src;
+  const imgAlt = layer?.media?.alt ?? dataset.media?.alt;
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (onDatasetClick) {
+      e.preventDefault();
+      onDatasetClick();
+    }
+  };
+
+  return (
+    <CardSelectable
+      cardType='horizontal-info'
+      checked={selectable ? selected : undefined}
+      selectable={selectable}
+      tagLabels={allTaxonomyValues}
+      overline={
+        <CardMeta>
+          <DatasetClassification dataset={dataset} />
+          <CardSourcesList sources={sources} />
+        </CardMeta>
+      }
+      linkTo={getDatasetPath(dataset)}
+      linkLabel='View dataset'
+      onLinkClick={handleClick}
+      title={
+        <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
+          {title}
+        </TextHighlight>
+      }
+      description={
+        <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
+          {description}
+        </TextHighlight>
+      }
+      imgSrc={imgSrc}
+      imgAlt={imgAlt}
+      footerContent={
+        <>
+          {topics?.length ? (
+            <CardTopicsList>
+              <dt>Topics</dt>
+              {topics.map((t) => (
+                <dd key={t.id}>
+                  <Pill variation='primary'>
+                    <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
+                      {t.name}
+                    </TextHighlight>
+                  </Pill>
+                </dd>
+              ))}
+            </CardTopicsList>
+          ) : null}
+        </>
+      }
+    />
+  );
+};