From 4c238db1792e4a075b1bfc83a8a51e152cb1f0d5 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 9 Dec 2024 18:30:50 -0500 Subject: [PATCH 1/6] remove linkProperties entirely from catalog-card, add onCardNavigate prop, remove unused overline prop from catalog-card --- .../components/common/catalog/catalog-card.tsx | 16 ++-------------- .../common/catalog/catalog-content.tsx | 11 +++++++---- app/scripts/components/common/catalog/index.tsx | 6 +++--- .../components/data-catalog/container.tsx | 13 ++++++++----- 4 files changed, 20 insertions(+), 26 deletions(-) diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 3dc8e3f28..51b8eed47 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -3,12 +3,9 @@ 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"; @@ -22,7 +19,6 @@ interface CatalogCardProps { selectable?: boolean; selected?: boolean; onDatasetClick?: () => void; - linkProperties?: LinkProperties; } const CardSelectable = styled(Card)<{ @@ -101,8 +97,7 @@ export const CatalogCard = (props: CatalogCardProps) => { searchTerm, selectable, selected, - onDatasetClick, - linkProperties + onDatasetClick } = props; const pathname = usePathname(); @@ -131,12 +126,6 @@ export const CatalogCard = (props: CatalogCardProps) => { checked={selectable ? selected : undefined} selectable={selectable} tagLabels={allTaxonomyValues} - overline={ - - - - - } linkLabel='View dataset' onClick={handleClick} title={ @@ -172,7 +161,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..55c6e351d 100644 --- a/app/scripts/components/common/catalog/index.tsx +++ b/app/scripts/components/common/catalog/index.tsx @@ -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..5bc635623 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,12 @@ import SmartLink from '$components/common/smart-link'; export default function DataCatalogContainer() { const allDatasets = getAllDatasetsProps(veda_faux_module_datasets); const controlVars = useFiltersWithQS(); + const navigate = useNavigate(); + + // @NOTE: Navigation as a callback passed into catalog core feature to decouple cards from naviation & routing logic + const handleCardNavigation = (path: string) => { + navigate(path); + }; return ( @@ -35,10 +41,7 @@ export default function DataCatalogContainer() { controlVars} - linkProperties={{ - LinkElement: SmartLink, - pathAttributeKeyName: 'to' - }} + onCardNavigate={handleCardNavigation} /> ); From 20f0f2e877187df2e1c85e2daf7d89f3b96b454c Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 9 Dec 2024 18:43:02 -0500 Subject: [PATCH 2/6] remove unneeded logic because it moved up in the tree --- app/scripts/components/common/catalog/catalog-card.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 51b8eed47..654ec6873 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -7,10 +7,8 @@ import { CardTopicsList } from "../card/styles"; import TextHighlight from "../text-highlight"; import { getDatasetDescription, getMediaProperty } from './utils'; import { DatasetData, DatasetLayer } from "$types/veda"; -import { getDatasetPath } from "$utils/routes"; import { TAXONOMY_SOURCE, TAXONOMY_TOPICS, getAllTaxonomyValues, getTaxonomy } from "$utils/veda-data/taxonomies"; import { Pill } from "$styles/pill"; -import { usePathname } from "$utils/use-pathname"; interface CatalogCardProps { dataset: DatasetData; @@ -100,8 +98,6 @@ export const CatalogCard = (props: CatalogCardProps) => { 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); @@ -118,8 +114,6 @@ export const CatalogCard = (props: CatalogCardProps) => { } }; - const linkTo = getDatasetPath(dataset, pathname); - return ( Date: Tue, 10 Dec 2024 10:59:28 -0500 Subject: [PATCH 3/6] added note --- app/scripts/components/common/card/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 669340b68..908d8949b 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 ? { From 6f931c83a925bbb1af7e243ef21e29084232e105 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Sun, 15 Dec 2024 18:38:41 -0500 Subject: [PATCH 4/6] some cleanup --- app/scripts/components/common/catalog/catalog-card.tsx | 3 +-- app/scripts/components/common/catalog/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx index 654ec6873..779aa4b2c 100644 --- a/app/scripts/components/common/catalog/catalog-card.tsx +++ b/app/scripts/components/common/catalog/catalog-card.tsx @@ -7,7 +7,7 @@ import { CardTopicsList } from "../card/styles"; import TextHighlight from "../text-highlight"; import { getDatasetDescription, getMediaProperty } from './utils'; import { DatasetData, DatasetLayer } from "$types/veda"; -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"; interface CatalogCardProps { @@ -99,7 +99,6 @@ export const CatalogCard = (props: CatalogCardProps) => { } = 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; diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx index 55c6e351d..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'; From 77589ae2f4079eabd042818a2b971889f86d03dd Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 16 Dec 2024 00:16:50 -0500 Subject: [PATCH 5/6] remove unneeded note --- app/scripts/components/data-catalog/container.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 5bc635623..f3f88585d 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -22,7 +22,6 @@ export default function DataCatalogContainer() { const controlVars = useFiltersWithQS(); const navigate = useNavigate(); - // @NOTE: Navigation as a callback passed into catalog core feature to decouple cards from naviation & routing logic const handleCardNavigation = (path: string) => { navigate(path); }; From 7c59dc56a3edc026e8a1ae19c7c652f35e6a31ca Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 16 Dec 2024 00:43:43 -0500 Subject: [PATCH 6/6] fix lint and ts-check error --- app/scripts/components/common/card/index.tsx | 2 +- .../exploration/components/dataset-selector-modal/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 908d8949b..b5d29de64 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -301,7 +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 + // @NOTE: This currently just exists for GHG which uses the Card component const { linkTo } = props; linkProperties = linkTo ? { 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.