Skip to content

Commit

Permalink
Data Catalog Feature Component Breakout (#946)
Browse files Browse the repository at this point in the history 
**Related Ticket:** #892

Data Catalog now takes in datasets as a prop and to support the current
architecture, a wrapper container was created to interact with the
data-layer to provide data to this feature component
([PR#893](#893)). Note: The
template instance wouldn't need this wrapper container as they would
have their own page views that would interact with the data layer. Page
layout / styling is also removed from Data-catalog component into the
wrapper
([PR#930](https://github.com/NASA-IMPACT/veda-ui/pull/930/files)).

@j08lue @aboydnw @faustoperez The data-catalog feature component is now
just what is highlighted in the red box. So when this feature is
imported, they would only get what i've highlighted here. Page layout
and headers would be something the actual page manages now. Does this
seem fine to you both?

![Screenshot 2024-05-09 at 3 14 00
PM](https://github.com/NASA-IMPACT/veda-ui/assets/30272083/812cb9a9-15da-4862-bb72-6f70f05f9a82)

### Description of Changes
* Allow card override
* Clean up unused / dead code

### Notes & Questions About Changes
_{Add additonal notes and outstanding questions here related to changes
in this pull request}_

### Validation / Testing
_{Update with info on what can be manually validated in the Deploy
Preview link for example "Validate style updates to selection modal do
NOT affect cards"}_
  • Loading branch information
@sandrahoang686
sandrahoang686 authored May 16, 2024
2 parents 7526c66 + 18752ab commit 27d7147
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 152 deletions.
2 changes: 2 additions & 0 deletions app/scripts/components/common/browse-controls/use-browse-controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions app/scripts/components/common/card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
>
Expand Down
0 ...ts/components/data-catalog/filter-tag.tsx → .../components/common/catalog/filter-tag.tsx
View file
File renamed without changes.
0 ...mponents/data-catalog/filters-control.tsx → ...onents/common/catalog/filters-control.tsx
View file
File renamed without changes.
204 changes: 66 additions & 138 deletions ...scripts/components/data-catalog/index.tsx → ...ripts/components/common/catalog/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
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 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 {
Expand All @@ -23,21 +21,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';
Expand All @@ -48,7 +40,17 @@ import { getAllDatasetsWithEnhancedLayers } from '$components/exploration/data-u
* Allows you to browse through datasets using the filters sidebar control
*/

const BrowseFoldHeader = styled(FoldHeader)`
const CatalogWrapper = 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;
`;

Expand All @@ -58,20 +60,10 @@ const Content = styled.div`
position: relative;
`;

const CatalogWrapper = styled.div`
const Catalog = 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;
`;
Expand Down Expand Up @@ -101,11 +93,13 @@ const EmptyState = styled(EmptyHub)`

export const sortOptions = [{ id: 'name', name: 'Name' }];

export interface DataCatalogProps {
export interface CatalogViewProps {
datasets: DatasetData[];
}

function DataCatalog({ datasets }: DataCatalogProps) {
function CatalogView({
datasets,
}: CatalogViewProps) {
const controlVars = useBrowserControls({
sortOptions
});
Expand All @@ -117,7 +111,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]);
Expand Down Expand Up @@ -183,7 +176,6 @@ function DataCatalog({ datasets }: DataCatalogProps) {
setDatasetsToDisplay(updated);
}, [allSelectedFilters, taxonomies, search]);

const browseControlsHeaderRef = useRef<HTMLDivElement>(null);
const { headerHeight } = useSlidingStickyHeaderProps();

const renderTags = useMemo(() => {
Expand All @@ -204,18 +196,46 @@ function DataCatalog({ datasets }: DataCatalogProps) {
return null;
}, [allSelectedFilters, handleClearTag, handleClearTags, urlTaxonomyItems]);

const renderCard = (dataset: DatasetData) => {
const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);
return (
<Card
cardType='horizontal-info'
tagLabels={allTaxonomyValues}
linkTo={getDatasetPath(dataset)}
title={
<TextHighlight
value={search}
disabled={search.length < minSearchLength}
>
{dataset.name}
</TextHighlight>
}
description={
<TextHighlight
value={search}
disabled={search.length < minSearchLength}
>
{dataset.description}
</TextHighlight>
}
imgSrc={dataset.media?.src}
imgAlt={dataset.media?.alt}
/>
);
};

return (
<BrowseSection>
<BrowseFoldHeader
ref={browseControlsHeaderRef}
<CatalogWrapper>
<CatalogFoldHeader
style={{
scrollMarginTop: `${headerHeight + 16}px`
}}
>
<FoldHeadline>
<FoldTitle>Search datasets</FoldTitle>
</FoldHeadline>
</BrowseFoldHeader>
</CatalogFoldHeader>
<Content>
<FiltersControl
{...controlVars}
Expand All @@ -225,121 +245,29 @@ function DataCatalog({ datasets }: DataCatalogProps) {
setClearedTagItem={setClearedTagItem}
allSelected={allSelectedFilters}
/>
<CatalogWrapper>
<Catalog>
{renderTags}
{datasetsToDisplay.length ? (
<Cards>
{datasetsToDisplay.map((d) => {
const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
const allTaxonomyValues = getAllTaxonomyValues(d).map((v) => v.name);
return (
<li key={d.id}>
<Card
cardType='horizontal-info'
tagLabels={allTaxonomyValues}
overline={
<CardMeta>
<DatasetClassification dataset={d} />
<CardSourcesList
sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
rootPath={DATASETS_PATH}
onSourceClick={(id) => {
onAction(Actions.TAXONOMY_MULTISELECT, {
key: TAXONOMY_SOURCE,
value: id
});
browseControlsHeaderRef.current?.scrollIntoView();
}}
/>
<VerticalDivider variation='light' />
{/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */}
{/*
<Link
to={`${DATASETS_PATH}?${Actions.SORT_FIELD}=date`}
onClick={(e) => {
e.preventDefault();
onAction(Actions.SORT_FIELD, 'date');
}}
>
Updated <time dateTime='2023-01-01'>X time ago</time>
</Link> */}
</CardMeta>
}
linkLabel='View more'
linkTo={getDatasetPath(d)}
title={
<TextHighlight
value={search}
disabled={search.length < 3}
>
{d.name}
</TextHighlight>
}
description={
<TextHighlight
value={search}
disabled={search.length < 3}
>
{d.description}
</TextHighlight>
}
imgSrc={d.media?.src}
imgAlt={d.media?.alt}
footerContent={
<>
{topics?.length ? (
<CardTopicsList>
<dt>Topics</dt>
{topics.map((t) => {
const path = `${DATASETS_PATH}?${
Actions.TAXONOMY
}=${encodeURIComponent(
JSON.stringify({ Topics: [t.id] })
)}`;
return (
<dd key={t.id}>
<Pill
variation='achromic'
as={Link}
to={path}
onClick={(e) => {
e.preventDefault();
onAction(Actions.TAXONOMY_MULTISELECT, {
key: TAXONOMY_TOPICS,
value: t.id
});
browseControlsHeaderRef.current?.scrollIntoView();
}}
>
<TextHighlight
value={search}
disabled={search.length < 3}
>
{t.name}
</TextHighlight>
</Pill>
</dd>
);
})}
</CardTopicsList>
) : null}
<DatasetMenu dataset={d} />
</>
}
/>
</li>
);
})}
{
datasetsToDisplay.map((d) => {
return (
<li key={d.id}>
{renderCard(d)}
</li>
);
})
}
</Cards>
) : (
<EmptyState>
There are no datasets to show with the selected filters.
</EmptyState>
)}
</CatalogWrapper>
</Catalog>
</Content>
</BrowseSection>
</CatalogWrapper>
);
}

export default DataCatalog;
export default CatalogView;
14 changes: 4 additions & 10 deletions app/scripts/components/data-catalog/container.tsx
View file
Original file line number Diff line number Diff line change
@@ -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/common/catalog';
import { PageMainContent } from '$styles/page';
import { LayoutProps } from '$components/common/layout-root';
import PageHero from '$components/common/page-hero';
Expand All @@ -17,16 +17,10 @@ import { FeaturedDatasets } from '$components/common/featured-slider-section';
export default function DataCatalogContainer() {
return (
<PageMainContent>
<LayoutProps
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<PageHero
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<LayoutProps title='Data Catalog' description={getString('dataCatalogBanner').other} />
<PageHero title='Data Catalog' description={getString('dataCatalogBanner').other} />
<FeaturedDatasets />
<DataCatalog datasets={allDatasets} />
<CatalogView datasets={allDatasets} />
</PageMainContent>
);
}
2 changes: 1 addition & 1 deletion app/scripts/components/exploration/components/dataset-selector-modal/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/common/catalog';

const StyledModalHeadline = styled(ModalHeadline)`
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/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';
Expand Down

0 comments on commit 27d7147

Please sign in to comment.