diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 669340b68..b5d29de64 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -301,6 +301,7 @@ function CardComponent(props: CardComponentPropsType) { const { linkProperties: linkPropertiesProps } = props; linkProperties = linkPropertiesProps; } else { + // @NOTE: This currently just exists for GHG which uses the Card component const { linkTo } = props; linkProperties = linkTo ? { diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 3dc8e3f28..779aa4b2c 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -3,17 +3,12 @@ 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 { CardTopicsList } from "../card/styles"; import TextHighlight from "../text-highlight"; import { getDatasetDescription, getMediaProperty } from './utils'; -import { LinkProperties } from '$types/veda'; import { DatasetData, DatasetLayer } from "$types/veda"; -import { getDatasetPath } from "$utils/routes"; -import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies"; +import { TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies"; import { Pill } from "$styles/pill"; -import { usePathname } from "$utils/use-pathname"; interface CatalogCardProps { dataset: DatasetData; @@ -22,7 +17,6 @@ interface CatalogCardProps { selectable?: boolean; selected?: boolean; onDatasetClick?: () => void; - linkProperties?: LinkProperties; } const CardSelectable = styled(Card)<{ @@ -101,14 +95,10 @@ export const CatalogCard = (props: CatalogCardProps) => { searchTerm, selectable, selected, - onDatasetClick, - linkProperties + onDatasetClick } = props; - const pathname = usePathname(); - 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; @@ -123,20 +113,12 @@ export const CatalogCard = (props: CatalogCardProps) => { } }; - const linkTo = getDatasetPath(dataset, pathname); - return ( - - - - } linkLabel='View dataset' onClick={handleClick} title={ @@ -172,7 +154,6 @@ export const CatalogCard = (props: CatalogCardProps) => { ) : null} } - {...(linkProperties ? {linkProperties: {...linkProperties, linkTo: linkTo}} : {})} /> ); }; diff --git a/app/scripts/components/common/catalog/catalog-content.tsx b/app/scripts/components/common/catalog/catalog-content.tsx index 1b8e15dbf..d48f947da 100644 --- a/app/scripts/components/common/catalog/catalog-content.tsx +++ b/app/scripts/components/common/catalog/catalog-content.tsx @@ -9,7 +9,6 @@ import { CatalogCard } from './catalog-card'; import CatalogTagsContainer from './catalog-tags'; import { FilterActions } from './utils'; -import { LinkProperties } from '$types/veda'; import { DatasetData, DatasetDataWithEnhancedLayers } from '$types/veda'; import { CardList } from '$components/common/card/styles'; import EmptyHub from '$components/common/empty-hub'; @@ -22,6 +21,8 @@ import { import { OptionItem } from '$components/common/form/checkable-filter'; import { Pill } from '$styles/pill'; import { usePreviousValue } from '$utils/use-effect-previous'; +import { getDatasetPath } from '$utils/routes'; +import { usePathname } from "$utils/use-pathname"; const EXCLUSIVE_SOURCE_WARNING = "Can only be analyzed with layers from the same source"; @@ -34,7 +35,7 @@ export interface CatalogContentProps { search: string; taxonomies: Record; onAction: (action: FilterActions, value?: any) => void; - linkProperties: LinkProperties; + onCardNavigate?: (path: string) => void; } const DEFAULT_SORT_OPTION = 'asc'; @@ -71,7 +72,7 @@ function CatalogContent({ search, taxonomies, onAction, - linkProperties + onCardNavigate }: CatalogContentProps) { const [exclusiveSourceSelected, setExclusiveSourceSelected] = useState(null); const isSelectable = selectedIds !== undefined; @@ -95,6 +96,8 @@ function CatalogContent({ const prevSelectedFilters = usePreviousValue(selectedFilters) ?? []; + const pathname = usePathname(); + // Handlers const updateSelectedFilters = useCallback((item: OptionItem, action: 'add' | 'remove') => { if (action == 'add') { @@ -275,7 +278,7 @@ function CatalogContent({ onCardNavigate(getDatasetPath(d, pathname))})} /> ))} diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx index d065738ba..a78e029a2 100644 --- a/app/scripts/components/common/catalog/index.tsx +++ b/app/scripts/components/common/catalog/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import { themeVal } from '@devseed-ui/theme-provider'; import CatalogContent from './catalog-content'; -import { DatasetData, LinkProperties } from '$types/veda'; +import { DatasetData } from '$types/veda'; import { useSlidingStickyHeaderProps } from '$components/common/layout-root/useSlidingStickyHeaderProps'; @@ -41,13 +41,13 @@ export interface CatalogViewProps { taxonomies: Record | Record, onAction: () => void, } | any; - linkProperties: LinkProperties; + onCardNavigate?: (path: string) => void; } function CatalogView({ datasets, onFilterChanges, - linkProperties, + onCardNavigate }: CatalogViewProps) { const { headerHeight } = useSlidingStickyHeaderProps(); @@ -70,7 +70,7 @@ function CatalogView({ search={search} taxonomies={taxonomies} onAction={onAction} - linkProperties={linkProperties} + onCardNavigate={onCardNavigate} /> ); diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 4aa3af414..f3f88585d 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useNavigate } from "react-router-dom"; import { getString } from 'veda'; import { getAllDatasetsProps } from '$utils/veda-data'; import CatalogView from '$components/common/catalog'; @@ -8,7 +9,6 @@ import PageHero from '$components/common/page-hero'; import { FeaturedDatasets } from '$components/common/featured-slider-section'; import { veda_faux_module_datasets } from '$data-layer/datasets'; import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query'; -import SmartLink from '$components/common/smart-link'; /** * @VEDA2-REFACTOR-WORK @@ -20,6 +20,11 @@ import SmartLink from '$components/common/smart-link'; export default function DataCatalogContainer() { const allDatasets = getAllDatasetsProps(veda_faux_module_datasets); const controlVars = useFiltersWithQS(); + const navigate = useNavigate(); + + const handleCardNavigation = (path: string) => { + navigate(path); + }; return ( @@ -35,10 +40,7 @@ export default function DataCatalogContainer() { controlVars} - linkProperties={{ - LinkElement: SmartLink, - pathAttributeKeyName: 'to' - }} + onCardNavigate={handleCardNavigation} /> ); diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx index 171d08059..12548934b 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx @@ -66,7 +66,7 @@ const DatasetModal = styled(Modal)` interface DatasetSelectorModalProps { revealed: boolean; close: () => void; - linkProperties: LinkProperties; + linkProperties?: LinkProperties; datasets: DatasetData[]; datasetPathName: string; timelineDatasets: TimelineDataset[]; @@ -126,7 +126,6 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) { setSelectedIds={setSelectedIds} onAction={onAction} filterLayers={true} - linkProperties={linkProperties} emptyStateContent={ <>

There are no datasets to show with the selected filters.