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

Data Catalog Feature Component Breakout #946

Merged
merged 6 commits into from
May 16, 2024
Merged

Data Catalog Feature Component Breakout #946

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cea4c62
Clean and updates
sandrahoang686 May 7, 2024
092c817
Allow card override
sandrahoang686 May 8, 2024
216650f
clean
sandrahoang686 May 9, 2024
7e099b4
Create catalog-view dir and move catalog logic over
sandrahoang686 May 13, 2024
45bf84c
Update directory
sandrahoang686 May 14, 2024
18752ab
Remove card component override
sandrahoang686 May 14, 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
4 changes: 2 additions & 2 deletions app/scripts/components/common/card/index.tsx
View file
Open in desktop
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
10 changes: 2 additions & 8 deletions app/scripts/components/data-catalog/container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,8 @@ 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} />
sandrahoang686 marked this conversation as resolved.
Show resolved Hide resolved
<PageHero title='Data Catalog' description={getString('dataCatalogBanner').other} />
Copy link
Collaborator Author

@sandrahoang686 sandrahoang686 May 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📓 : Moved layouts component from data-catalog into wrapper instead

<FeaturedDatasets />
<DataCatalog datasets={allDatasets} />
</PageMainContent>
Expand Down
199 changes: 66 additions & 133 deletions app/scripts/components/data-catalog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import React, { useRef, 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 { 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';
Expand All @@ -22,22 +19,16 @@ import {
FoldHeadline,
FoldTitle
} from '$components/common/fold';
import { Card } from '$components/common/card';
import { CardList, CardMeta, CardTopicsList } from '$components/common/card/styles';
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';
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 +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;
`;

Expand All @@ -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;
`;
Expand Down Expand Up @@ -103,9 +94,16 @@ 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<CardComponentProps>;
props: Partial<CardComponentProps>;
}
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📓 : Do we care to have the ability to override the card component? I've added this but i'm thinking we dont currently need it. If we do want to override card logic or styles, we can defer till we have that usecase and need to solve for. thoughts?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we discussed this issue before, but to make it as a record: I don't think we need to offer ways of overriding specific components inside of the feature components (at lest for now.) If this is needed, a user can make their own list without overriding the specific components inside of the feature.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this makes sense, if the user wants alot more flexibility or to use whatever card component they like, they will have the flexibility now to do this in their page views. i'll go ahead and remove


function DataCatalog({ datasets }: DataCatalogProps) {
function DataCatalog({
datasets,
cardComponentOverride,
}: DataCatalogProps) {
const controlVars = useBrowserControls({
sortOptions
});
Expand All @@ -117,7 +115,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 +180,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 +200,47 @@ function DataCatalog({ datasets }: DataCatalogProps) {
return null;
}, [allSelectedFilters, handleClearTag, handleClearTags, urlTaxonomyItems]);

const renderCard = (dataset: DatasetData) => {
const CardComponent = cardComponentOverride?.CardComponent ?? Card;
const allTaxonomyValues = getAllTaxonomyValues(dataset).map((v) => v.name);
return (
<CardComponent
{...(cardComponentOverride ? {...cardComponentOverride.props} : {cardType: 'horizontal-info'})}
tagLabels={allTaxonomyValues}
linkTo={getDatasetPath(dataset)}
title={
<TextHighlight
value={search}
disabled={search.length < 3}
>
{dataset.name}
</TextHighlight>
}
description={
<TextHighlight
value={search}
disabled={search.length < 3}
>
sandrahoang686 marked this conversation as resolved.
Show resolved Hide resolved
{dataset.description}
</TextHighlight>
}
imgSrc={dataset.media?.src}
imgAlt={dataset.media?.alt}
/>
);
};

return (
<BrowseSection>
<BrowseFoldHeader
ref={browseControlsHeaderRef}
<DataCatalogWrapper>
<CatalogFoldHeader
style={{
scrollMarginTop: `${headerHeight + 16}px`
}}
>
<FoldHeadline>
<FoldTitle>Search datasets</FoldTitle>
</FoldHeadline>
</BrowseFoldHeader>
</CatalogFoldHeader>
<Content>
<FiltersControl
{...controlVars}
Expand All @@ -229,107 +254,15 @@ function DataCatalog({ datasets }: DataCatalogProps) {
{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>
Expand All @@ -338,7 +271,7 @@ function DataCatalog({ datasets }: DataCatalogProps) {
)}
</CatalogWrapper>
</Content>
</BrowseSection>
</DataCatalogWrapper>
);
}

Expand Down
Loading