Skip to content

Commit

Permalink
Create minimal partial data layer scaffold
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandrahoang686
sandrahoang686 committed Mar 19, 2024
1 parent 8804ee3 commit e005df2
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 157 deletions.
16 changes: 16 additions & 0 deletions app/scripts/components/data-catalog/container.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { veda_datasets } from "$data-layer/datasets";
import DataCatalog from '$components/data-catalog';

// @VEDA2-REFACTOR-WORK

// @NOTE: This container component serves as a wrapper for the purpose of data management, this is ONLY to support current instances.
// veda2 instances can just use the direct component, 'DataCatalog', and manage data directly in their page views

export default function DataCatalogContainer() {
return (
<>
<DataCatalog datasets={veda_datasets} />
</>
);
}
316 changes: 162 additions & 154 deletions app/scripts/components/data-catalog/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React, { useMemo, useRef } from 'react';
import styled from 'styled-components';
import { DatasetData, datasetTaxonomies, getString } from 'veda';
import { DatasetData, VedaData, datasetTaxonomies, getString } from 'veda';
import { Link } from 'react-router-dom';
import { glsp } from '@devseed-ui/theme-provider';
import { Subtitle } from '@devseed-ui/typography';
import { Button } from '@devseed-ui/button';
import { CollecticonXmarkSmall } from '@devseed-ui/collecticons';
import { VerticalDivider } from '@devseed-ui/toolbar';
import { datasets } from 'veda';

import DatasetMenu from './dataset-menu';

Expand Down Expand Up @@ -49,8 +48,6 @@ import {
} from '$utils/veda-data';
import { DatasetClassification } from '$components/common/dataset-classification';

const allDatasetsForCatalog = Object.values(datasets).map((d) => d!.data);

const DatasetCount = styled(Subtitle)`
grid-column: 1 / -1;
display: flex;
Expand Down Expand Up @@ -147,14 +144,20 @@ export const prepareDatasets = (
return filtered;
};

function DataCatalog() {
export interface DataCatalogProps {
datasets: VedaData<DatasetData>
}

function DataCatalog({ datasets }: DataCatalogProps) {
const controlVars = useBrowserControls({
sortOptions
});

const { taxonomies, sortField, sortDir, onAction } = controlVars;
const search = controlVars.search ?? '';

const allDatasetsForCatalog = Object.values(datasets).map((d) => d!.data);

const displayDatasets = useMemo(
() =>
prepareDatasets(allDatasetsForCatalog, {
Expand All @@ -176,159 +179,164 @@ function DataCatalog() {
const { headerHeight } = useSlidingStickyHeaderProps();

return (
<PageMainContent>
<LayoutProps
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<PageHero
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<>
{datasets &&
(
<PageMainContent>
<LayoutProps
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<PageHero
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>

<FeaturedDatasets />
<FeaturedDatasets />

<Fold>
<BrowseFoldHeader
ref={browseControlsHeaderRef}
style={{
scrollMarginTop: `${headerHeight + 16}px`
}}
>
<FoldHeadline>
<FoldTitle>Browse</FoldTitle>
</FoldHeadline>
<BrowseControls
{...controlVars}
taxonomiesOptions={datasetTaxonomies}
sortOptions={sortOptions}
/>
</BrowseFoldHeader>
<Fold>
<BrowseFoldHeader
ref={browseControlsHeaderRef}
style={{
scrollMarginTop: `${headerHeight + 16}px`
}}
>
<FoldHeadline>
<FoldTitle>Browse</FoldTitle>
</FoldHeadline>
<BrowseControls
{...controlVars}
taxonomiesOptions={datasetTaxonomies}
sortOptions={sortOptions}
/>
</BrowseFoldHeader>

<DatasetCount>
<span>
Showing{' '}
<Pluralize
singular='dataset'
plural='datasets'
count={displayDatasets.length}
showCount={true}
/>{' '}
out of {allDatasetsForCatalog.length}.
</span>
{isFiltering && (
<Button forwardedAs={Link} to={DATASETS_PATH} size='small'>
Clear filters <CollecticonXmarkSmall />
</Button>
)}
</DatasetCount>
<DatasetCount>
<span>
Showing{' '}
<Pluralize
singular='dataset'
plural='datasets'
count={displayDatasets.length}
showCount={true}
/>{' '}
out of {allDatasetsForCatalog.length}.
</span>
{isFiltering && (
<Button forwardedAs={Link} to={DATASETS_PATH} size='small'>
Clear filters <CollecticonXmarkSmall />
</Button>
)}
</DatasetCount>

{displayDatasets.length ? (
<CardList>
{displayDatasets.map((d) => {
const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
return (
<li key={d.id}>
<Card
cardType='cover'
overline={
<CardMeta>
<DatasetClassification dataset={d} />
<CardSourcesList
sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
rootPath={DATASETS_PATH}
onSourceClick={(id) => {
onAction(Actions.TAXONOMY, {
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) => (
<dd key={t.id}>
<Pill
variation='achromic'
as={Link}
to={`${DATASETS_PATH}?${
Actions.TAXONOMY
}=${encodeURIComponent(
JSON.stringify({ Topics: t.id })
)}`}
onClick={(e) => {
e.preventDefault();
onAction(Actions.TAXONOMY, {
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>
);
})}
</CardList>
) : (
<EmptyHub>
There are no datasets to show with the selected filters.
</EmptyHub>
)}
</Fold>
</PageMainContent>
{displayDatasets.length ? (
<CardList>
{displayDatasets.map((d) => {
const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
return (
<li key={d.id}>
<Card
cardType='cover'
overline={
<CardMeta>
<DatasetClassification dataset={d} />
<CardSourcesList
sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
rootPath={DATASETS_PATH}
onSourceClick={(id) => {
onAction(Actions.TAXONOMY, {
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) => (
<dd key={t.id}>
<Pill
variation='achromic'
as={Link}
to={`${DATASETS_PATH}?${
Actions.TAXONOMY
}=${encodeURIComponent(
JSON.stringify({ Topics: t.id })
)}`}
onClick={(e) => {
e.preventDefault();
onAction(Actions.TAXONOMY, {
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>
);
})}
</CardList>
) : (
<EmptyHub>
There are no datasets to show with the selected filters.
</EmptyHub>
)}
</Fold>
</PageMainContent>
)}
</>
);
}

Expand Down
3 changes: 2 additions & 1 deletion app/scripts/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ import { PageLoading } from '$components/common/loading-skeleton';
// Views
import UhOh from '$components/uhoh';
import ErrorBoundary from '$components/uhoh/fatal-error';

const Home = lazy(() => import('$components/home'));
const About = lazy(() => import('$components/about'));
const Development = lazy(() => import('$components/development'));

const StoriesHub = lazy(() => import('$components/stories/hub'));
const StoriesSingle = lazy(() => import('$components/stories/single'));

const DataCatalog = lazy(() => import('$components/data-catalog'));
const DataCatalog = lazy(() => import('$components/data-catalog/container'));
const DatasetsExplore = lazy(() => import('$components/datasets/s-explore'));
const DatasetsOverview = lazy(() => import('$components/datasets/s-overview'));

Expand Down
Loading

0 comments on commit e005df2

Please sign in to comment.