diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index c2c2e9b94..17dcff3c5 100644 --- a/app/scripts/components/common/card.tsx +++ b/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` diff --git a/app/scripts/components/common/notebook-connect.tsx b/app/scripts/components/common/notebook-connect.tsx index 5affeff25..93df31429 100644 --- a/app/scripts/components/common/notebook-connect.tsx +++ b/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; + dataset?: DatasetData; className?: string; } @@ -86,19 +86,14 @@ const IconByType: Record = { unknown: }; -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() ); + return ( + + + {datasetUsagesWithIcon.map((datasetUsage) => ( +
  • + + {IconByType[datasetUsage.type]} + +

    {datasetUsage.title}

    +

    {datasetUsage.label}

    +
    +
    +
  • + ))} +
    +

    + For reference, the following STAC collection ID's are + associated with this dataset: +

    +
      + {Array.from(layerIdsSet).map((id) => ( +
    • + {id} +
    • + ))} +
    + + } + /> + ); +} + +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 ( <> - - - {datasetUsagesWithIcon.map((datasetUsage) => ( -
  • - - {IconByType[datasetUsage.type]} - -

    {datasetUsage.title}

    -

    {datasetUsage.label}

    -
    -
    -
  • - ))} -
    -

    - For reference, the following STAC collection ID's are - associated with this dataset: -

    -
      - {Array.from(layerIdsSet).map((id) => ( -
    • - {id} -
    • - ))} -
    - - } + onClose={close} /> ); @@ -214,7 +236,7 @@ function NotebookConnectCalloutSelf(props: NotebookConnectCalloutProps) { ); diff --git a/app/scripts/components/data-catalog/dataset-menu.tsx b/app/scripts/components/data-catalog/dataset-menu.tsx new file mode 100644 index 000000000..c13df0747 --- /dev/null +++ b/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 ( + <> + + ( + + )} + > + Options + +
  • + + Learn more + +
  • +
  • + + Explore data + +
  • +
  • + + setRevealed(true)} + visuallyDisabled={!hasUsage} + > + + Analyze data (Python) + + +
  • +
    +
    + + ); +} + +export default DatasetMenu; diff --git a/app/scripts/components/data-catalog/featured-datasets.tsx b/app/scripts/components/data-catalog/featured-datasets.tsx index cffbf5d2d..35da095dd 100644 --- a/app/scripts/components/data-catalog/featured-datasets.tsx +++ b/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 ? ( - -
    Topics
    - {d.thematics.map((t) => ( -
    - {t} -
    - ))} -
    - ) : null + <> + {d.thematics.length ? ( + +
    Topics
    + {d.thematics.map((t) => ( +
    + {t} +
    + ))} +
    + ) : null} + + } /> diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index d4f3a75ba..fb5fd90e8 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/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 ? ( - -
    Topics
    - {d.thematics.map((t) => ( -
    - { - e.preventDefault(); - onAction(Actions.TOPIC, t); - }} - > - {t} - -
    - ))} -
    - ) : null + <> + {d.thematics.length ? ( + +
    Topics
    + {d.thematics.map((t) => ( +
    + { + e.preventDefault(); + onAction(Actions.TOPIC, t); + }} + > + {t} + +
    + ))} +
    + ) : null} + + } /> diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index a89f34108..9b63e8c29 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -558,7 +558,7 @@ function DatasetsExplore() { - +