Data Catalog filters/search

app/scripts/components/common/card.tsx

@@ -32,8 +32,8 @@ export const CardList = styled.ol`
   ${listReset()}
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
   gap: ${variableGlsp()};
+  grid-template-columns: repeat(1, 1fr);
 
   ${media.mediumUp`
     grid-template-columns: repeat(2, 1fr);
@@ -42,6 +42,10 @@ export const CardList = styled.ol`
   ${media.largeUp`
     grid-template-columns: repeat(3, 1fr);
   `}
+
+  > li {
+    min-width: 0;
+  }
 `;
 
 function renderCardType({ cardType }: CardSelfProps) {
@@ -69,6 +73,11 @@ function renderCardType({ cardType }: CardSelfProps) {
         padding-top: ${variableGlsp()};
         color: ${themeVal('color.surface')};
         justify-content: flex-end;
+        min-height: 16rem;
+
+        ${media.mediumUp`
+          min-height: 28rem;
+        `}
 
         ${CardFigure} {
           position: absolute;
@@ -169,6 +178,26 @@ export const CardOverline = styled(Overline)`
   }
 `;
 
+export const CardMeta = styled.div`
+  display: flex;
+  gap: ${glsp(0.25)};
+
+  > a {
+    color: inherit;
+    pointer-events: all;
+
+    &,
+    &:visited {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    &:hover {
+      opacity: 0.64;
+    }
+  }
+`;
+
 const CardLabel = styled.span`
   position: absolute;
   z-index: 1;
@@ -202,6 +231,39 @@ export const CardBody = styled.div`
   }
 `;
 
+export const CardFooter = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  gap: ${variableGlsp(0.5)};
+  padding: ${variableGlsp()};
+
+  &:not(:first-child) {
+    padding-top: 0;
+    margin-top: ${variableGlsp(-0.5)};
+  }
+
+  button {
+    pointer-events: all;
+  }
+`;
+
+export const CardTopicsList = styled.dl`
+  display: flex;
+  gap: ${variableGlsp(0.25)};
+  max-width: 100%;
+  width: 100%;
+  overflow: hidden;
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - 3rem),
+    transparent 100%
+  );
+
+  > dt {
+    ${visuallyHidden()}
+  }
+`;
+
 const CardFigure = styled(Figure)`
   order: -1;
 
@@ -214,18 +276,19 @@ const CardFigure = styled(Figure)`
 `;
 
 interface CardComponentProps {
-  title: string;
+  title: React.ReactNode;
   linkLabel: string;
   linkTo: string;
   className?: string;
   cardType?: CardType;
-  description?: string;
+  description?: React.ReactNode;
   date?: Date;
   overline?: React.ReactNode;
   imgSrc?: string;
   imgAlt?: string;
   parentName?: string;
   parentTo?: string;
+  footerContent?: React.ReactNode;
   onCardClickCapture?: React.MouseEventHandler;
 }
 
@@ -243,6 +306,7 @@ function CardComponent(props: CardComponentProps) {
     imgAlt,
     parentName,
     parentTo,
+    footerContent,
     onCardClickCapture
   } = props;
 
@@ -261,7 +325,7 @@ function CardComponent(props: CardComponentProps) {
       <CardHeader>
         <CardHeadline>
           <CardTitle>{title}</CardTitle>
-          <CardOverline>
+          <CardOverline as='div'>
             {parentName && parentTo && (
               <CardLabel as={Link} to={parentTo}>
                 {parentName}
@@ -285,6 +349,7 @@ function CardComponent(props: CardComponentProps) {
           <p>{description}</p>
         </CardBody>
       )}
+      {footerContent && <CardFooter>{footerContent}</CardFooter>}
       {imgSrc && (
         <CardFigure>
           <img src={imgSrc} alt={imgAlt} loading='lazy' />

app/scripts/components/common/dropdown-scrollable.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { glsp } from '@devseed-ui/theme-provider';
 import {
   Dropdown,
+  DropdownProps,
   DropdownRef,
   DropMenu,
   DropTitle
@@ -31,7 +32,7 @@ const shadowScrollbarProps = {
   autoHeightMax: 320
 };
 
-interface DropdownScrollableProps {
+interface DropdownScrollableProps extends DropdownProps {
   children?: React.ReactNode;
 }
 

app/scripts/components/common/fold.tsx

@@ -21,7 +21,8 @@ export const FoldGrid = styled(Hug)`
   padding-top: ${variableGlsp(2)};
   padding-bottom: ${variableGlsp(2)};
 
-  & + & {
+  & + &,
+  & + ${FoldBase} {
     padding-top: 0;
   }
 `;
@@ -33,10 +34,14 @@ const FoldInner = styled(Constrainer)`
 export const FoldHeader = styled.div`
   grid-column: 1 / -1;
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: column nowrap;
   gap: ${variableGlsp()};
-  justify-content: space-between;
-  align-items: flex-end;
+
+  ${media.largeUp`
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: flex-end;
+  `}
 
   > a {
     flex-shrink: 0;

app/scripts/components/common/notebook-connect.tsx

@@ -8,7 +8,7 @@ import {
   CollecticonCog
 } from '@devseed-ui/collecticons';
 import { Modal } from '@devseed-ui/modal';
-import { DatasetData, datasets, VedaDatum } from 'veda';
+import { DatasetData, datasets } from 'veda';
 
 import { HintedError } from '$utils/hinted-error';
 import { variableGlsp } from '$styles/variable-utils';
@@ -17,7 +17,7 @@ interface NotebookConnectButtonProps {
   compact?: boolean;
   variation?: ButtonProps['variation'];
   size?: ButtonProps['size'];
-  dataset?: VedaDatum<DatasetData>;
+  dataset?: DatasetData;
   className?: string;
 }
 
@@ -86,19 +86,14 @@ const IconByType: Record<DatasetUsageType, any> = {
   unknown: <CollecticonCog />
 };
 
-function NotebookConnectButtonSelf(props: NotebookConnectButtonProps) {
-  const {
-    className,
-    compact = true,
-    variation = 'primary-fill',
-    size = 'medium',
-    dataset
-  } = props;
+export function NotebookConnectModal(props: {
+  dataset?: DatasetData;
+  revealed: boolean;
+  onClose: () => void;
+}) {
+  const { dataset, revealed, onClose } = props;
 
-  const [revealed, setRevealed] = useState(false);
-  const close = useCallback(() => setRevealed(false), []);
-
-  const datasetUsages = dataset?.data.usage;
+  const datasetUsages = dataset?.usage;
 
   const datasetUsagesWithIcon = useMemo(() => {
     return datasetUsages?.map((d) => {
@@ -116,11 +111,70 @@ function NotebookConnectButtonSelf(props: NotebookConnectButtonProps) {
     return null;
   }
 
-  const layerIdsSet = dataset.data.layers.reduce(
+  const layerIdsSet = dataset.layers.reduce(
     (acc, layer) => acc.add(layer.stacCol),
     new Set<string>()
   );
 
+  return (
+    <Modal
+      id='modal'
+      size='medium'
+      title='How to use this dataset'
+      revealed={revealed}
+      onCloseClick={onClose}
+      onOverlayClick={onClose}
+      closeButton
+      content={
+        <>
+          <DatasetUsages>
+            {datasetUsagesWithIcon.map((datasetUsage) => (
+              <li key={datasetUsage.url}>
+                <DatasetUsageLink href={datasetUsage.url}>
+                  {IconByType[datasetUsage.type]}
+                  <DatasetUsageLabel>
+                    <h4>{datasetUsage.title}</h4>
+                    <p>{datasetUsage.label}</p>
+                  </DatasetUsageLabel>
+                </DatasetUsageLink>
+              </li>
+            ))}
+          </DatasetUsages>
+          <p>
+            For reference, the following STAC collection ID&apos;s are
+            associated with this dataset:
+          </p>
+          <ul>
+            {Array.from(layerIdsSet).map((id) => (
+              <li key={id}>
+                <code>{id}</code>
+              </li>
+            ))}
+          </ul>
+        </>
+      }
+    />
+  );
+}
+
+function NotebookConnectButtonSelf(props: NotebookConnectButtonProps) {
+  const {
+    className,
+    compact = true,
+    variation = 'primary-fill',
+    size = 'medium',
+    dataset
+  } = props;
+
+  const [revealed, setRevealed] = useState(false);
+  const close = useCallback(() => setRevealed(false), []);
+
+  const datasetUsages = dataset?.usage;
+
+  if (!datasetUsages) {
+    return null;
+  }
+
   return (
     <>
       <Button
@@ -134,42 +188,10 @@ function NotebookConnectButtonSelf(props: NotebookConnectButtonProps) {
         <CollecticonCode meaningful={compact} title='Open data usage options' />
         {compact ? '' : 'Analyze data (Python)'}
       </Button>
-      <Modal
-        id='modal'
-        size='medium'
-        title='How to use this dataset'
+      <NotebookConnectModal
+        dataset={dataset}
         revealed={revealed}
-        onCloseClick={close}
-        onOverlayClick={close}
-        closeButton
-        content={
-          <>
-            <DatasetUsages>
-              {datasetUsagesWithIcon.map((datasetUsage) => (
-                <li key={datasetUsage.url}>
-                  <DatasetUsageLink href={datasetUsage.url}>
-                    {IconByType[datasetUsage.type]}
-                    <DatasetUsageLabel>
-                      <h4>{datasetUsage.title}</h4>
-                      <p>{datasetUsage.label}</p>
-                    </DatasetUsageLabel>
-                  </DatasetUsageLink>
-                </li>
-              ))}
-            </DatasetUsages>
-            <p>
-              For reference, the following STAC collection ID&apos;s are
-              associated with this dataset:
-            </p>
-            <ul>
-              {Array.from(layerIdsSet).map((id) => (
-                <li key={id}>
-                  <code>{id}</code>
-                </li>
-              ))}
-            </ul>
-          </>
-        }
+        onClose={close}
       />
     </>
   );
@@ -214,7 +236,7 @@ function NotebookConnectCalloutSelf(props: NotebookConnectCalloutProps) {
       <NotebookConnectButton
         // compact={false}
         variation='base-outline'
-        dataset={dataset}
+        dataset={dataset.data}
       />
     </div>
   );