From cea4c62266c32ded83952f9e6e13b99844d6abe4 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 7 May 2024 17:07:43 -0400 Subject: [PATCH 1/6] Clean and updates --- app/scripts/components/common/card/index.tsx | 4 +- .../components/data-catalog/container.tsx | 4 +- app/scripts/components/data-catalog/index.tsx | 185 +++++------------- 3 files changed, 58 insertions(+), 135 deletions(-) diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index 33d4acb09..8e08f4b67 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -223,8 +223,8 @@ export function ExternalLinkFlag() { export interface CardComponentProps { title: JSX.Element | string; - linkLabel: string; linkTo: string; + linkLabel?: string; className?: string; cardType?: CardType; description?: JSX.Element | string; @@ -267,7 +267,7 @@ function CardComponent(props: CardComponentProps) { as={CardItem} cardType={cardType} className={className} - linkLabel={linkLabel || 'View more'} + linkLabel={linkLabel ?? 'View more'} linkProps={linkProps} onClickCapture={onCardClickCapture} > diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 8ac3236d7..50789f1d1 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -26,7 +26,9 @@ export default function DataCatalogContainer() { description={getString('dataCatalogBanner').other} /> - + ); } \ No newline at end of file diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index bc711facd..a64e88dd1 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/data-catalog/index.tsx @@ -1,11 +1,8 @@ -import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react'; +import React, { useState, useMemo, useEffect, useCallback } from 'react'; import styled from 'styled-components'; import { DatasetData } from 'veda'; -import { Link, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { themeVal } from '@devseed-ui/theme-provider'; -import { VerticalDivider } from '@devseed-ui/toolbar'; - -import DatasetMenu from './dataset-menu'; import FiltersControl from './filters-control'; import FilterTag from './filter-tag'; import prepareDatasets from './prepare-datasets'; @@ -23,21 +20,15 @@ import { FoldTitle } from '$components/common/fold'; import { Card } from '$components/common/card'; -import { CardList, CardMeta, CardTopicsList } from '$components/common/card/styles'; +import { CardList } from '$components/common/card/styles'; import EmptyHub from '$components/common/empty-hub'; import { DATASETS_PATH, getDatasetPath } from '$utils/routes'; import TextHighlight from '$components/common/text-highlight'; -import { Pill } from '$styles/pill'; -import { CardSourcesList } from '$components/common/card-sources'; import { getAllTaxonomyValues, - getTaxonomy, getTaxonomyByIds, generateTaxonomies, - TAXONOMY_SOURCE, - TAXONOMY_TOPICS } from '$utils/veda-data'; -import { DatasetClassification } from '$components/common/dataset-classification'; import { variableBaseType, variableGlsp } from '$styles/variable-utils'; import { OptionItem } from '$components/common/form/checkable-filter'; import { usePreviousValue } from '$utils/use-effect-previous'; @@ -48,7 +39,17 @@ import { getAllDatasetsWithEnhancedLayers } from '$components/exploration/data-u * Allows you to browse through datasets using the filters sidebar control */ -const BrowseFoldHeader = styled(FoldHeader)` +const DataCatalogWrapper = styled.div` + width: 100%; + max-width: ${themeVal('layout.max')}; + margin: 0 auto; + margin-top: ${variableGlsp(2)}; + padding-left: ${variableGlsp()}; + padding-right: ${variableGlsp()}; + gap: ${variableGlsp()}; +`; + +const CatalogFoldHeader = styled(FoldHeader)` margin-bottom: 4rem; `; @@ -62,16 +63,6 @@ const CatalogWrapper = styled.div` width: 100%; `; -const BrowseSection = styled.div` - width: 100%; - max-width: ${themeVal('layout.max')}; - margin: 0 auto; - margin-top: ${variableGlsp(2)}; - padding-left: ${variableGlsp()}; - padding-right: ${variableGlsp()}; - gap: ${variableGlsp()}; -`; - const Cards = styled(CardList)` padding: 0 0 0 2rem; `; @@ -105,7 +96,9 @@ export interface DataCatalogProps { datasets: DatasetData[]; } -function DataCatalog({ datasets }: DataCatalogProps) { +function DataCatalog({ + datasets, +}: DataCatalogProps) { const controlVars = useBrowserControls({ sortOptions }); @@ -117,7 +110,6 @@ function DataCatalog({ datasets }: DataCatalogProps) { const datasetTaxonomies = generateTaxonomies(datasets); - const urlTaxonomyItems = taxonomies? Object.entries(taxonomies).map(([key, val]) => getTaxonomyByIds(key, val, datasetTaxonomies)).flat(): []; const allDatasetsWithEnhancedLayers = useMemo(() => getAllDatasetsWithEnhancedLayers(datasets), [datasets]); @@ -183,7 +175,6 @@ function DataCatalog({ datasets }: DataCatalogProps) { setDatasetsToDisplay(updated); }, [allSelectedFilters, taxonomies, search]); - const browseControlsHeaderRef = useRef(null); const { headerHeight } = useSlidingStickyHeaderProps(); const renderTags = useMemo(() => { @@ -205,9 +196,8 @@ function DataCatalog({ datasets }: DataCatalogProps) { }, [allSelectedFilters, handleClearTag, handleClearTags, urlTaxonomyItems]); return ( - - + Search datasets - + - {datasetsToDisplay.map((d) => { - const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - const allTaxonomyValues = getAllTaxonomyValues(d).map((v) => v.name); - return ( -
  • - - - { - onAction(Actions.TAXONOMY_MULTISELECT, { - key: TAXONOMY_SOURCE, - value: id - }); - browseControlsHeaderRef.current?.scrollIntoView(); - }} - /> - - {/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */} - {/* - { - e.preventDefault(); - onAction(Actions.SORT_FIELD, 'date'); - }} - > - Updated - */} - - } - linkLabel='View more' - linkTo={getDatasetPath(d)} - title={ - - {d.name} - - } - description={ - - {d.description} - - } - imgSrc={d.media?.src} - imgAlt={d.media?.alt} - footerContent={ - <> - {topics?.length ? ( - -
    Topics
    - {topics.map((t) => { - const path = `${DATASETS_PATH}?${ - Actions.TAXONOMY - }=${encodeURIComponent( - JSON.stringify({ Topics: [t.id] }) - )}`; - return ( -
    - { - e.preventDefault(); - onAction(Actions.TAXONOMY_MULTISELECT, { - key: TAXONOMY_TOPICS, - value: t.id - }); - browseControlsHeaderRef.current?.scrollIntoView(); - }} - > - - {t.name} - - -
    - ); - })} -     - ) : null} - - - } - /> -
    • - ); - })} + { + datasetsToDisplay.map((d) => { + const allTaxonomyValues = getAllTaxonomyValues(d).map((v) => v.name); + return ( +
  • + + {d.name} + + } + description={ + + {d.description} + + } + imgSrc={d.media?.src} + imgAlt={d.media?.alt} + /> +
    • + ); + }) + } ) : ( @@ -338,7 +259,7 @@ function DataCatalog({ datasets }: DataCatalogProps) { )}     -     + ); } From 092c817b48f56c7105052a1a4e995d79b362c865 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 8 May 2024 11:57:32 -0400 Subject: [PATCH 2/6] Allow card override --- app/scripts/components/data-catalog/index.tsx | 64 +++++++++++-------- 1 file changed, 38 insertions(+), 26 deletions(-) diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index a64e88dd1..10544a6b1 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/data-catalog/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo, useEffect, useCallback } from 'react'; +import React, { useState, useMemo, useEffect, useCallback, ComponentType } from 'react'; import styled from 'styled-components'; import { DatasetData } from 'veda'; import { useNavigate } from 'react-router-dom'; @@ -19,7 +19,7 @@ import { FoldHeadline, FoldTitle } from '$components/common/fold'; -import { Card } from '$components/common/card'; +import { Card, CardComponentProps } from '$components/common/card'; import { CardList } from '$components/common/card/styles'; import EmptyHub from '$components/common/empty-hub'; import { DATASETS_PATH, getDatasetPath } from '$utils/routes'; @@ -94,10 +94,15 @@ export const sortOptions = [{ id: 'name', name: 'Name' }]; export interface DataCatalogProps { datasets: DatasetData[]; + cardComponentOverride?: { // Allow user to override with a different cardType with optional props + CardComponent: ComponentType; + props: Partial; + } } function DataCatalog({ datasets, + cardComponentOverride, }: DataCatalogProps) { const controlVars = useBrowserControls({ sortOptions @@ -195,6 +200,36 @@ function DataCatalog({ return null; }, [allSelectedFilters, handleClearTag, handleClearTags, urlTaxonomyItems]); + const renderCard = (dataset: DatasetData) => { + const CardComponent = cardComponentOverride?.CardComponent ?? Card; + const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name); + return ( + + {dataset.name} + + } + description={ + + {dataset.description} + + } + imgSrc={dataset.media?.src} + imgAlt={dataset.media?.alt} + /> + ); + }; + return ( { datasetsToDisplay.map((d) => { - const allTaxonomyValues = getAllTaxonomyValues(d).map((v) => v.name); return (
  • - - {d.name} - - } - description={ - - {d.description} - - } - imgSrc={d.media?.src} - imgAlt={d.media?.alt} - /> + {renderCard(d)}
    • ); }) From 216650fe896d08cdb3c756e928ce436793f9ec89 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Thu, 9 May 2024 14:52:19 -0400 Subject: [PATCH 3/6] clean --- app/scripts/components/data-catalog/container.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 50789f1d1..4fcb45b13 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -17,18 +17,10 @@ import { FeaturedDatasets } from '$components/common/featured-slider-section'; export default function DataCatalogContainer() { return ( - - + + - + ); } \ No newline at end of file From 7e099b403b898930ac7d5250c308449ff3c81012 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 13 May 2024 13:33:27 -0400 Subject: [PATCH 4/6] Create catalog-view dir and move catalog logic over --- .../browse-controls/use-browse-controls.ts | 2 ++ .../catalog-view}/filter-tag.tsx | 0 .../catalog-view}/filters-control.tsx | 0 .../catalog-view}/index.tsx | 27 ++++++++++--------- .../components/data-catalog/container.tsx | 4 +-- .../dataset-selector-modal/header.tsx | 2 +- .../dataset-selector-modal/index.tsx | 2 +- 7 files changed, 20 insertions(+), 17 deletions(-) rename app/scripts/components/{data-catalog => content-views/catalog-view}/filter-tag.tsx (100%) rename app/scripts/components/{data-catalog => content-views/catalog-view}/filters-control.tsx (100%) rename app/scripts/components/{data-catalog => content-views/catalog-view}/index.tsx (95%) diff --git a/app/scripts/components/common/browse-controls/use-browse-controls.ts b/app/scripts/components/common/browse-controls/use-browse-controls.ts index 2035f03c8..3ff834073 100644 --- a/app/scripts/components/common/browse-controls/use-browse-controls.ts +++ b/app/scripts/components/common/browse-controls/use-browse-controls.ts @@ -45,6 +45,8 @@ export const optionAll = { name: 'All' }; +export const minSearchLength = 3; + export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) { // Setup Qs State to store data in the url's query string // react-router function to get the navigation. diff --git a/app/scripts/components/data-catalog/filter-tag.tsx b/app/scripts/components/content-views/catalog-view/filter-tag.tsx similarity index 100% rename from app/scripts/components/data-catalog/filter-tag.tsx rename to app/scripts/components/content-views/catalog-view/filter-tag.tsx diff --git a/app/scripts/components/data-catalog/filters-control.tsx b/app/scripts/components/content-views/catalog-view/filters-control.tsx similarity index 100% rename from app/scripts/components/data-catalog/filters-control.tsx rename to app/scripts/components/content-views/catalog-view/filters-control.tsx diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/content-views/catalog-view/index.tsx similarity index 95% rename from app/scripts/components/data-catalog/index.tsx rename to app/scripts/components/content-views/catalog-view/index.tsx index 10544a6b1..5b701ca46 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/content-views/catalog-view/index.tsx @@ -3,11 +3,12 @@ import styled from 'styled-components'; import { DatasetData } from 'veda'; import { useNavigate } from 'react-router-dom'; import { themeVal } from '@devseed-ui/theme-provider'; +import prepareDatasets from '../../data-catalog/prepare-datasets'; import FiltersControl from './filters-control'; import FilterTag from './filter-tag'; -import prepareDatasets from './prepare-datasets'; import { Actions, + minSearchLength, useBrowserControls } from '$components/common/browse-controls/use-browse-controls'; import { @@ -39,7 +40,7 @@ import { getAllDatasetsWithEnhancedLayers } from '$components/exploration/data-u * Allows you to browse through datasets using the filters sidebar control */ -const DataCatalogWrapper = styled.div` +const CatalogWrapper = styled.div` width: 100%; max-width: ${themeVal('layout.max')}; margin: 0 auto; @@ -59,7 +60,7 @@ const Content = styled.div` position: relative; `; -const CatalogWrapper = styled.div` +const Catalog = styled.div` width: 100%; `; @@ -92,7 +93,7 @@ const EmptyState = styled(EmptyHub)` export const sortOptions = [{ id: 'name', name: 'Name' }]; -export interface DataCatalogProps { +export interface CatalogViewProps { datasets: DatasetData[]; cardComponentOverride?: { // Allow user to override with a different cardType with optional props CardComponent: ComponentType; @@ -100,10 +101,10 @@ export interface DataCatalogProps { } } -function DataCatalog({ +function CatalogView({ datasets, cardComponentOverride, -}: DataCatalogProps) { +}: CatalogViewProps) { const controlVars = useBrowserControls({ sortOptions }); @@ -211,7 +212,7 @@ function DataCatalog({ title={ {dataset.name} @@ -219,7 +220,7 @@ function DataCatalog({ description={ {dataset.description} @@ -231,7 +232,7 @@ function DataCatalog({ }; return ( - + - + {renderTags} {datasetsToDisplay.length ? ( @@ -269,10 +270,10 @@ function DataCatalog({ There are no datasets to show with the selected filters. )} - + - + ); } -export default DataCatalog; \ No newline at end of file +export default CatalogView; \ No newline at end of file diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 4fcb45b13..a84a0ab7f 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { getString } from 'veda'; import { allDatasets } from '$components/exploration/data-utils'; -import DataCatalog from '$components/data-catalog'; +import CatalogView from '$components/content-views/catalog-view'; import { PageMainContent } from '$styles/page'; import { LayoutProps } from '$components/common/layout-root'; import PageHero from '$components/common/page-hero'; @@ -20,7 +20,7 @@ export default function DataCatalogContainer() { - + ); } \ No newline at end of file diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx index ea39fcdb1..e6b91ea34 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx @@ -15,7 +15,7 @@ import { allExploreDatasetsWithEnhancedLayers as allDatasets } from '$components/exploration/data-utils'; import { generateTaxonomies } from '$utils/veda-data'; -import { sortOptions } from '$components/data-catalog'; +import { sortOptions } from '$components/content-views/catalog-view'; const StyledModalHeadline = styled(ModalHeadline)` width: 100%; 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 61de1d5df..531d2fdfd 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx @@ -28,7 +28,7 @@ import { TaxonomyFilterOption, useBrowserControls } from '$components/common/browse-controls/use-browse-controls'; -import { sortOptions } from '$components/data-catalog'; +import { sortOptions } from '$components/content-views/catalog-view'; import prepareDatasets from '$components/data-catalog/prepare-datasets'; import { TAXONOMY_SOURCE, getTaxonomy } from '$utils/veda-data'; import { usePreviousValue } from '$utils/use-effect-previous'; From 45bf84c4ab4c23c7bfce530793cf0c84053de1a0 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 14 May 2024 12:15:15 -0400 Subject: [PATCH 5/6] Update directory --- .../catalog-view => common/catalog}/filter-tag.tsx | 0 .../catalog-view => common/catalog}/filters-control.tsx | 0 .../{content-views/catalog-view => common/catalog}/index.tsx | 0 app/scripts/components/data-catalog/container.tsx | 2 +- .../exploration/components/dataset-selector-modal/header.tsx | 2 +- .../exploration/components/dataset-selector-modal/index.tsx | 2 +- 6 files changed, 3 insertions(+), 3 deletions(-) rename app/scripts/components/{content-views/catalog-view => common/catalog}/filter-tag.tsx (100%) rename app/scripts/components/{content-views/catalog-view => common/catalog}/filters-control.tsx (100%) rename app/scripts/components/{content-views/catalog-view => common/catalog}/index.tsx (100%) diff --git a/app/scripts/components/content-views/catalog-view/filter-tag.tsx b/app/scripts/components/common/catalog/filter-tag.tsx similarity index 100% rename from app/scripts/components/content-views/catalog-view/filter-tag.tsx rename to app/scripts/components/common/catalog/filter-tag.tsx diff --git a/app/scripts/components/content-views/catalog-view/filters-control.tsx b/app/scripts/components/common/catalog/filters-control.tsx similarity index 100% rename from app/scripts/components/content-views/catalog-view/filters-control.tsx rename to app/scripts/components/common/catalog/filters-control.tsx diff --git a/app/scripts/components/content-views/catalog-view/index.tsx b/app/scripts/components/common/catalog/index.tsx similarity index 100% rename from app/scripts/components/content-views/catalog-view/index.tsx rename to app/scripts/components/common/catalog/index.tsx diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index a84a0ab7f..e95117b1d 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { getString } from 'veda'; import { allDatasets } from '$components/exploration/data-utils'; -import CatalogView from '$components/content-views/catalog-view'; +import CatalogView from '$components/common/catalog'; import { PageMainContent } from '$styles/page'; import { LayoutProps } from '$components/common/layout-root'; import PageHero from '$components/common/page-hero'; diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx index e6b91ea34..4eb5c48f1 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx @@ -15,7 +15,7 @@ import { allExploreDatasetsWithEnhancedLayers as allDatasets } from '$components/exploration/data-utils'; import { generateTaxonomies } from '$utils/veda-data'; -import { sortOptions } from '$components/content-views/catalog-view'; +import { sortOptions } from '$components/common/catalog'; const StyledModalHeadline = styled(ModalHeadline)` width: 100%; 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 531d2fdfd..b255ff70d 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx @@ -28,7 +28,7 @@ import { TaxonomyFilterOption, useBrowserControls } from '$components/common/browse-controls/use-browse-controls'; -import { sortOptions } from '$components/content-views/catalog-view'; +import { sortOptions } from '$components/common/catalog'; import prepareDatasets from '$components/data-catalog/prepare-datasets'; import { TAXONOMY_SOURCE, getTaxonomy } from '$utils/veda-data'; import { usePreviousValue } from '$utils/use-effect-previous'; From 18752abcea30521c29b9ad7c0c97108604928921 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 14 May 2024 12:20:17 -0400 Subject: [PATCH 6/6] Remove card component override --- app/scripts/components/common/catalog/index.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx index 5b701ca46..fd7be1703 100644 --- a/app/scripts/components/common/catalog/index.tsx +++ b/app/scripts/components/common/catalog/index.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo, useEffect, useCallback, ComponentType } from 'react'; +import React, { useState, useMemo, useEffect, useCallback } from 'react'; import styled from 'styled-components'; import { DatasetData } from 'veda'; import { useNavigate } from 'react-router-dom'; @@ -20,7 +20,7 @@ import { FoldHeadline, FoldTitle } from '$components/common/fold'; -import { Card, CardComponentProps } from '$components/common/card'; +import { Card } from '$components/common/card'; import { CardList } from '$components/common/card/styles'; import EmptyHub from '$components/common/empty-hub'; import { DATASETS_PATH, getDatasetPath } from '$utils/routes'; @@ -95,15 +95,10 @@ export const sortOptions = [{ id: 'name', name: 'Name' }]; export interface CatalogViewProps { datasets: DatasetData[]; - cardComponentOverride?: { // Allow user to override with a different cardType with optional props - CardComponent: ComponentType; - props: Partial; - } } function CatalogView({ datasets, - cardComponentOverride, }: CatalogViewProps) { const controlVars = useBrowserControls({ sortOptions @@ -202,11 +197,10 @@ function CatalogView({ }, [allSelectedFilters, handleClearTag, handleClearTags, urlTaxonomyItems]); const renderCard = (dataset: DatasetData) => { - const CardComponent = cardComponentOverride?.CardComponent ?? Card; const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name); return ( -