Dataset menu for catalog page

app/scripts/components/common/card.tsx

@@ -241,6 +241,10 @@ export const CardFooter = styled.div`
     padding-top: 0;
     margin-top: ${variableGlsp(-0.5)};
   }
+
+  button {
+    pointer-events: all;
+  }
 `;
 
 export const CardTopicsList = styled.dl`

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>
   );

app/scripts/components/data-catalog/dataset-menu.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { visuallyDisabled } from '@devseed-ui/theme-provider';
+import { Link } from 'react-router-dom';
+import { DatasetData } from 'veda';
+import {
+  DropMenu,
+  Dropdown,
+  DropMenuItem,
+  DropTitle
+} from '@devseed-ui/dropdown';
+import {
+  CollecticonCode,
+  CollecticonCompass,
+  CollecticonEllipsisVertical,
+  CollecticonPage
+} from '@devseed-ui/collecticons';
+import { Button } from '@devseed-ui/button';
+
+import { getDatasetPath, getDatasetExplorePath } from '$utils/routes';
+import { NotebookConnectModal } from '$components/common/notebook-connect';
+import DropMenuItemButton from '$styles/drop-menu-item-button';
+import { Tip } from '$components/common/tip';
+
+const DropMenuItemButtonDisable = styled(DropMenuItemButton)<{
+  visuallyDisabled: boolean;
+}>`
+  ${({ visuallyDisabled: v }) => v && visuallyDisabled()}
+`;
+
+interface DatasetMenuProps {
+  dataset: DatasetData;
+}
+
+function DatasetMenu(props: DatasetMenuProps) {
+  const { dataset } = props;
+
+  const [revealed, setRevealed] = useState(false);
+  const close = useCallback(() => setRevealed(false), []);
+
+  const hasUsage = !!dataset.usage?.length;
+
+  return (
+    <>
+      <NotebookConnectModal
+        dataset={dataset}
+        revealed={revealed}
+        onClose={close}
+      />
+      <Dropdown
+        alignment='right'
+        direction='up'
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        triggerElement={({ className, ...rest }) => (
+          <Button
+            // @ts-expect-error achromic-text exists. The problem is bad typing in the UI library.
+            variation='achromic-text'
+            fitting='skinny'
+            size='small'
+            {...rest}
+          >
+            <CollecticonEllipsisVertical />
+          </Button>
+        )}
+      >
+        <DropTitle>Options</DropTitle>
+        <DropMenu>
+          <li>
+            <DropMenuItem
+              as={Link}
+              data-dropdown='click.close'
+              to={getDatasetPath(dataset)}
+            >
+              <CollecticonPage /> Learn more
+            </DropMenuItem>
+          </li>
+          <li>
+            <DropMenuItem
+              as={Link}
+              data-dropdown='click.close'
+              to={getDatasetExplorePath(dataset)}
+            >
+              <CollecticonCompass /> Explore data
+            </DropMenuItem>
+          </li>
+          <li>
+            <Tip
+              content='This dataset has no usage information'
+              disabled={hasUsage}
+            >
+              <DropMenuItemButtonDisable
+                onClick={() => setRevealed(true)}
+                visuallyDisabled={!hasUsage}
+              >
+                <CollecticonCode />
+                Analyze data (Python)
+              </DropMenuItemButtonDisable>
+            </Tip>
+          </li>
+        </DropMenu>
+      </Dropdown>
+    </>
+  );
+}
+
+export default DatasetMenu;

app/scripts/components/data-catalog/featured-datasets.tsx

@@ -4,6 +4,8 @@ import { datasets } from 'veda';
 
 const allDatasets = Object.values(datasets).map((d) => d!.data);
 
+import DatasetMenu from './dataset-menu';
+
 import { Card, CardMeta, CardTopicsList } from '$components/common/card';
 import { FoldGrid, FoldHeader, FoldTitle } from '$components/common/fold';
 import {
@@ -82,16 +84,19 @@ function FeaturedDatasets() {
                     imgSrc={d.media?.src}
                     imgAlt={d.media?.alt}
                     footerContent={
-                      d.thematics.length ? (
-                        <CardTopicsList>
-                          <dt>Topics</dt>
-                          {d.thematics.map((t) => (
-                            <dd key={t}>
-                              <Pill>{t}</Pill>
-                            </dd>
-                          ))}
-                        </CardTopicsList>
-                      ) : null
+                      <>
+                        {d.thematics.length ? (
+                          <CardTopicsList>
+                            <dt>Topics</dt>
+                            {d.thematics.map((t) => (
+                              <dd key={t}>
+                                <Pill>{t}</Pill>
+                              </dd>
+                            ))}
+                          </CardTopicsList>
+                        ) : null}
+                        <DatasetMenu dataset={d} />
+                      </>
                     }
                   />
                 </ContinuumGridItem>

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

@@ -7,6 +7,7 @@ import { Subtitle } from '@devseed-ui/typography';
 import BrowseControls from './browse-controls';
 import { Actions, useBrowserControls } from './use-browse-controls';
 import FeaturedDatasets from './featured-datasets';
+import DatasetMenu from './dataset-menu';
 
 import { LayoutProps } from '$components/common/layout-root';
 import PageHero from '$components/common/page-hero';
@@ -192,25 +193,28 @@ function DataCatalog() {
                   imgSrc={d.media?.src}
                   imgAlt={d.media?.alt}
                   footerContent={
-                    d.thematics.length ? (
-                      <CardTopicsList>
-                        <dt>Topics</dt>
-                        {d.thematics.map((t) => (
-                          <dd key={t}>
-                            <Pill
-                              as={Link}
-                              to={`${DATASETS_PATH}?${Actions.TOPIC}=${t}`}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                onAction(Actions.TOPIC, t);
-                              }}
-                            >
-                              {t}
-                            </Pill>
-                          </dd>
-                        ))}
-                      </CardTopicsList>
-                    ) : null
+                    <>
+                      {d.thematics.length ? (
+                        <CardTopicsList>
+                          <dt>Topics</dt>
+                          {d.thematics.map((t) => (
+                            <dd key={t}>
+                              <Pill
+                                as={Link}
+                                to={`${DATASETS_PATH}?${Actions.TOPIC}=${t}`}
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  onAction(Actions.TOPIC, t);
+                                }}
+                              >
+                                {t}
+                              </Pill>
+                            </dd>
+                          ))}
+                        </CardTopicsList>
+                      ) : null}
+                      <DatasetMenu dataset={d} />
+                    </>
                   }
                 />
               </li>

app/scripts/components/datasets/s-explore/index.tsx

@@ -558,7 +558,7 @@ function DatasetsExplore() {
             </PanelInner>
           </Panel>
           <Carto>
-            <NotebookConnectButton dataset={dataset} />
+            <NotebookConnectButton dataset={dataset.data} />
             <MapboxMap
               ref={mapboxRef}
               withGeocoder