Skip to content

Commit

Permalink
Use array format for taxonomies instead of object
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielfdsilva
danielfdsilva committed Jul 24, 2023
1 parent 52f9d37 commit d6ceff0
Show file tree
Hide file tree
Showing 18 changed files with 314 additions and 199 deletions.
7 changes: 4 additions & 3 deletions app/scripts/components/common/browse-controls/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { Taxonomy } from 'veda';
import { Overline } from '@devseed-ui/typography';
import { Button, ButtonProps } from '@devseed-ui/button';
import {
Expand Down Expand Up @@ -62,7 +63,7 @@ const ButtonPrefix = styled(Overline).attrs({ as: 'small' })`
`;

interface BrowseControlsProps extends ReturnType<typeof useBrowserControls> {
taxonomiesOptions: Record<string, FilterOption[]>;
taxonomiesOptions: Taxonomy[];
sortOptions: FilterOption[];
}

Expand Down Expand Up @@ -142,11 +143,11 @@ function BrowseControls(props: BrowseControlsProps) {
</DropdownScrollable>
</SearchWrapper>
<TaxonomyWrapper>
{Object.entries(taxonomiesOptions).map(([name, options]) => (
{taxonomiesOptions.map(({ name, values }) => (
<DropdownOptions
key={name}
prefix={name}
items={[optionAll].concat(options)}
items={[optionAll].concat(values)}
currentId={taxonomies?.[name] ?? 'all'}
onChange={(v) => {
onAction(Actions.TAXONOMY, { key: name, value: v });
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/components/common/browse-controls/use-browse-controls.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) {
if (val === optionAll.id) {
setTaxonomies(omit(taxonomies, key));
} else {
setTaxonomies(set({...taxonomies}, key, val));
setTaxonomies(set({ ...taxonomies }, key, val));
}
}
break;
Expand Down
16 changes: 7 additions & 9 deletions app/scripts/components/common/content-taxonomy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import styled from 'styled-components';
import { TaxonomyItem } from 'veda';
import { Taxonomy } from 'veda';
import { Link } from 'react-router-dom';
import { glsp, themeVal } from '@devseed-ui/theme-provider';
import { Heading, Overline } from '@devseed-ui/typography';
Expand Down Expand Up @@ -43,15 +43,13 @@ const TaxonomyList = styled.dl`
`;

interface ContentTaxonomyProps {
taxonomy: Record<string, TaxonomyItem[] | undefined>;
taxonomy: Taxonomy[];
}

export function ContentTaxonomy(props: ContentTaxonomyProps) {
const { taxonomy } = props;

const taxonomies = Object.entries(taxonomy) as [string, TaxonomyItem[]][];

if (!taxonomies.length) return null;
if (!taxonomy.length) return null;

return (
<TaxonomySection>
Expand All @@ -60,10 +58,10 @@ export function ContentTaxonomy(props: ContentTaxonomyProps) {
Taxonomy
</Heading>
<TaxonomyList>
{taxonomies.map(([key, values]) => (
<React.Fragment key={key}>
{taxonomy.map(({ name, values }) => (
<React.Fragment key={name}>
<dt>
<Overline>{key}</Overline>
<Overline>{name}</Overline>
</dt>
<dd>
{values.map((t) => (
Expand All @@ -72,7 +70,7 @@ export function ContentTaxonomy(props: ContentTaxonomyProps) {
as={Link}
to={`${DATASETS_PATH}?${
Actions.TAXONOMY
}=${encodeURIComponent(JSON.stringify({ [key]: t.id }))}`}
}=${encodeURIComponent(JSON.stringify({ [name]: t.id }))}`}
>
{t.name}
</Pill>
Expand Down
14 changes: 11 additions & 3 deletions app/scripts/components/common/featured-slider-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ import { ContinuumScrollIndicator } from '$styles/continuum/continuum-scroll-ind
import { getDatasetPath, getDiscoveryPath } from '$utils/routes';
import { Pill } from '$styles/pill';
import DatasetMenu from '$components/data-catalog/dataset-menu';
import {
getTaxonomy,
TAXONOMY_SOURCE,
TAXONOMY_TOPICS
} from '$utils/veda-data';

const allFeaturedDiscoveries = Object.values(discoveries)
.map((d) => d!.data)
Expand Down Expand Up @@ -76,6 +81,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
render={(bag) => {
return featuredItems.map((d) => {
const date = new Date(d[dateProperty ?? '']);
const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;

return (
<ContinuumGridItem {...bag} key={d.id}>
Expand All @@ -94,7 +100,9 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
title={d.name}
overline={
<CardMeta>
<CardSourcesList sources={d.taxonomy.Source} />
<CardSourcesList
sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
/>
<VerticalDivider variation='light' />
{!isNaN(date.getTime()) && (
<PublishedDate date={date} />
Expand All @@ -106,10 +114,10 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
imgAlt={d.media?.alt}
footerContent={
<>
{d.taxonomy.Topics?.length ? (
{topics?.length ? (
<CardTopicsList>
<dt>Topics</dt>
{d.taxonomy.Topics.map((t) => (
{topics.map((t) => (
<dd key={t.id}>
<Pill variation='achromic'>{t.name}</Pill>
</dd>
Expand Down
207 changes: 119 additions & 88 deletions app/scripts/components/data-catalog/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ 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 {
getTaxonomy,
TAXONOMY_SOURCE,
TAXONOMY_TOPICS
} from '$utils/veda-data';

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

Expand All @@ -57,40 +62,54 @@ const DatasetCount = styled(Subtitle)`

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

const prepareDatasets = (data: DatasetData[], options) => {
const prepareDatasets = (
data: DatasetData[],
options: {
search: string;
taxonomies: Record<string, string> | null;
sortField: string | null;
sortDir: string | null;
}
) => {
const { sortField, sortDir, search, taxonomies } = options;

let filtered = [...data];

// Does the free text search appear in specific fields?
if (search.length >= 3) {
const topicsTaxonomy = datasetTaxonomies.find(
(t) => t.name === TAXONOMY_TOPICS
);
const searchLower = search.toLowerCase();
filtered = filtered.filter(
(d) =>
d.name.toLowerCase().includes(searchLower) ||
d.description.toLowerCase().includes(searchLower) ||
d.layers.some((l) => l.stacCol.toLowerCase().includes(searchLower)) ||
d.taxonomy.Topics?.some((t) =>
topicsTaxonomy?.values.some((t) =>
t.name.toLowerCase().includes(searchLower)
)
);
}

Object.entries(taxonomies).forEach(([name, value]) => {
if (value !== optionAll.id) {
const txId = datasetTaxonomies[name].find((t) => t.id === value)?.id;
filtered = filtered.filter(
(d) => txId && d.taxonomy[name]?.find((t) => t.id === txId)
);
}
});
taxonomies &&
Object.entries(taxonomies).forEach(([name, value]) => {
if (value !== optionAll.id) {
filtered = filtered.filter((d) =>
d.taxonomy.some(
(t) => t.name === name && t.values.some((v) => v.id === value)
)
);
}
});

/* eslint-disable-next-line fp/no-mutating-methods */
filtered.sort((a, b) => {
if (!a[sortField]) return Infinity;
sortField &&
/* eslint-disable-next-line fp/no-mutating-methods */
filtered.sort((a, b) => {
if (!a[sortField]) return Infinity;

return a[sortField]?.localeCompare(b[sortField]);
});
return a[sortField]?.localeCompare(b[sortField]);
});

if (sortDir === 'desc') {
/* eslint-disable-next-line fp/no-mutating-methods */
Expand Down Expand Up @@ -177,23 +196,28 @@ function DataCatalog() {

{displayDatasets.length ? (
<CardList>
{displayDatasets.map((d) => (
<li key={d.id}>
<Card
cardType='cover'
overline={
<CardMeta>
<CardSourcesList
sources={d.taxonomy.Source}
rootPath={DATASETS_PATH}
onSourceClick={(id) => {
onAction(Actions.TAXONOMY, { key: 'Source', id });
browseControlsHeaderRef.current?.scrollIntoView();
}}
/>
<VerticalDivider variation='light' />
{/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */}
{/*
{displayDatasets.map((d) => {
const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values;
return (
<li key={d.id}>
<Card
cardType='cover'
overline={
<CardMeta>
<CardSourcesList
sources={getTaxonomy(d, TAXONOMY_SOURCE)?.values}
rootPath={DATASETS_PATH}
onSourceClick={(id) => {
onAction(Actions.TAXONOMY, {
key: TAXONOMY_SOURCE,
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) => {
Expand All @@ -203,63 +227,70 @@ function DataCatalog() {
>
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={
<>
{d.taxonomy.Topics?.length ? (
<CardTopicsList>
<dt>Topics</dt>
{d.taxonomy.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: 'Topics',
value: t.id
});
browseControlsHeaderRef.current?.scrollIntoView();
}}
>
<TextHighlight
value={search}
disabled={search.length < 3}
</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();
}}
>
{t.name}
</TextHighlight>
</Pill>
</dd>
))}
</CardTopicsList>
) : null}
<DatasetMenu dataset={d} />
</>
}
/>
</li>
))}
<TextHighlight
value={search}
disabled={search.length < 3}
>
{t.name}
</TextHighlight>
</Pill>
</dd>
))}
</CardTopicsList>
) : null}
<DatasetMenu dataset={d} />
</>
}
/>
</li>
);
})}
</CardList>
) : (
<EmptyHub>
Expand Down
Loading

0 comments on commit d6ceff0

Please sign in to comment.