Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create minimal partial data layer scaffold starting off with Data Catalog for VEDA2 Refactor #893

Merged
merged 2 commits into from
Apr 15, 2024
Merged

Create minimal partial data layer scaffold starting off with Data Catalog for VEDA2 Refactor #893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8f7d63
Update path and fix to new updates...
sandrahoang686 Apr 11, 2024
7c80c2a
update paths
sandrahoang686 Apr 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions app/scripts/components/data-catalog/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react';
import { allDatasetsWithEnhancedLayers } from '$components/exploration/data-utils';
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={allDatasetsWithEnhancedLayers} />
</>
);
}
320 changes: 165 additions & 155 deletions app/scripts/components/data-catalog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ import Pluralize from '$utils/pluralize';
import { Pill } from '$styles/pill';
import { FeaturedDatasets } from '$components/common/featured-slider-section';
import { CardSourcesList } from '$components/common/card-sources';
import { allDatasetsWithEnhancedLayers } from '$components/exploration/data-utils';
import {
getTaxonomy,
TAXONOMY_SOURCE,
TAXONOMY_TOPICS
} from '$utils/veda-data';
import { DatasetClassification } from '$components/common/dataset-classification';
import { DatasetDataWithEnhancedLayers } from '$components/exploration/data-utils';

const DatasetCount = styled(Subtitle)`
grid-column: 1 / -1;
Expand Down Expand Up @@ -146,7 +146,11 @@ export const prepareDatasets = (
return filtered;
};

function DataCatalog() {
export interface DataCatalogProps {
datasets: DatasetDataWithEnhancedLayers[]
}

function DataCatalog({ datasets }: DataCatalogProps) {
const controlVars = useBrowserControls({
sortOptions
});
Expand All @@ -156,7 +160,7 @@ function DataCatalog() {

const displayDatasets = useMemo(
() =>
prepareDatasets(allDatasetsWithEnhancedLayers, {
prepareDatasets(datasets, {
search,
taxonomies,
sortField,
Expand All @@ -175,159 +179,165 @@ function DataCatalog() {
const { headerHeight } = useSlidingStickyHeaderProps();

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

<FeaturedDatasets />

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

<DatasetCount>
<span>
Showing{' '}
<Pluralize
singular='dataset'
plural='datasets'
count={displayDatasets.length}
showCount={true}
/>{' '}
out of {allDatasetsWithEnhancedLayers.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();
}}
<>
{
datasets && (
<PageMainContent>
<LayoutProps
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>
<PageHero
title='Data Catalog'
description={getString('dataCatalogBanner').other}
/>

<FeaturedDatasets />

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

<DatasetCount>
<span>
Showing{' '}
<Pluralize
singular='dataset'
plural='datasets'
count={displayDatasets.length}
showCount={true}
/>{' '}
out of {datasets.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} />
</>
}
/>
<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>
</li>
);
})}
</CardList>
) : (
<EmptyHub>
There are no datasets to show with the selected filters.
</EmptyHub>
)}
</Fold>
</PageMainContent>
)
}
</>
);
}

export default DataCatalog;
export default DataCatalog;
Loading
Loading