diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx new file mode 100644 index 000000000..95418fbef --- /dev/null +++ b/app/scripts/components/data-catalog/container.tsx @@ -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 ( + <> + + + ); +} \ No newline at end of file diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index ba3046ac7..eac05a7b8 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/data-catalog/index.tsx @@ -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; @@ -146,7 +146,11 @@ export const prepareDatasets = ( return filtered; }; -function DataCatalog() { +export interface DataCatalogProps { + datasets: DatasetDataWithEnhancedLayers[] +} + +function DataCatalog({ datasets }: DataCatalogProps) { const controlVars = useBrowserControls({ sortOptions }); @@ -156,7 +160,7 @@ function DataCatalog() { const displayDatasets = useMemo( () => - prepareDatasets(allDatasetsWithEnhancedLayers, { + prepareDatasets(datasets, { search, taxonomies, sortField, @@ -175,159 +179,165 @@ function DataCatalog() { const { headerHeight } = useSlidingStickyHeaderProps(); return ( - - - - - - - - - - Browse - - - - - - - Showing{' '} - {' '} - out of {allDatasetsWithEnhancedLayers.length}. - - {isFiltering && ( - - )} - - - {displayDatasets.length ? ( - - {displayDatasets.map((d) => { - const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - return ( -
  • - - - { - onAction(Actions.TAXONOMY, { - key: TAXONOMY_SOURCE, - value: id - }); - browseControlsHeaderRef.current?.scrollIntoView(); - }} + <> + { + datasets && ( + + + + + + + + + + Browse + + + + + + + Showing{' '} + {' '} + out of {datasets.length}. + + {isFiltering && ( + + )} + + + {displayDatasets.length ? ( + + {displayDatasets.map((d) => { + const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; + return ( +
  • + + + { + onAction(Actions.TAXONOMY, { + key: TAXONOMY_SOURCE, + value: id + }); + browseControlsHeaderRef.current?.scrollIntoView(); + }} + /> + + {/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */} + {/* + { + e.preventDefault(); + onAction(Actions.SORT_FIELD, 'date'); + }} + > + Updated + */} + + } + linkLabel='View more' + linkTo={getDatasetPath(d)} + title={ + + {d.name} + + } + description={ + + {d.description} + + } + imgSrc={d.media?.src} + imgAlt={d.media?.alt} + footerContent={ + <> + {topics?.length ? ( + +
    Topics
    + {topics.map((t) => ( +
    + { + e.preventDefault(); + onAction(Actions.TAXONOMY, { + key: TAXONOMY_TOPICS, + value: t.id + }); + browseControlsHeaderRef.current?.scrollIntoView(); + }} + > + + {t.name} + + +
    + ))} +     + ) : null} + + + } /> - - {/* TODO: Implement modified date: https://github.com/NASA-IMPACT/veda-ui/issues/514 */} - {/* - { - e.preventDefault(); - onAction(Actions.SORT_FIELD, 'date'); - }} - > - Updated - */} - - } - linkLabel='View more' - linkTo={getDatasetPath(d)} - title={ - - {d.name} - - } - description={ - - {d.description} - - } - imgSrc={d.media?.src} - imgAlt={d.media?.alt} - footerContent={ - <> - {topics?.length ? ( - -
    Topics
    - {topics.map((t) => ( -
    - { - e.preventDefault(); - onAction(Actions.TAXONOMY, { - key: TAXONOMY_TOPICS, - value: t.id - }); - browseControlsHeaderRef.current?.scrollIntoView(); - }} - > - - {t.name} - - -
    - ))} -     - ) : null} - - - } - /> -
    • - ); - })} -     - ) : ( - - There are no datasets to show with the selected filters. - - )} -     -     + + ); + })} + + ) : ( + + There are no datasets to show with the selected filters. + + )} + + + ) + } + ); } -export default DataCatalog; +export default DataCatalog; \ No newline at end of file diff --git a/app/scripts/components/exploration/data-utils.ts b/app/scripts/components/exploration/data-utils.ts index 0e5018a2a..a8a2fc44b 100644 --- a/app/scripts/components/exploration/data-utils.ts +++ b/app/scripts/components/exploration/data-utils.ts @@ -6,7 +6,7 @@ import { startOfMonth, startOfYear } from 'date-fns'; -import { DatasetLayer, DatasetData, datasets } from 'veda'; +import { DatasetLayer, DatasetData } from 'veda'; import { EnhancedDatasetLayer, StacDatasetData, @@ -19,22 +19,25 @@ import { DATA_METRICS, DEFAULT_DATA_METRICS } from './components/datasets/analysis-metrics'; +import { veda_datasets } from "$data-layer/datasets"; import { utcString2userTzDate } from '$utils/date'; +// @TODO: These should be updated to take in datasets as a param instead of using veda_datasets directly + export const findParentDataset = (layerId: string) => { - const parentDataset = Object.values(datasets).find((dataset) => + const parentDataset = Object.values(veda_datasets).find((dataset) => dataset!.data.layers.find((l) => l.id === layerId) ); return parentDataset?.data; }; export const findDatasetAttribute = ({ datasetId, attr }: {datasetId: string, attr: string}) => { - return datasets[datasetId]?.data[attr]; + return veda_datasets[datasetId]?.data[attr]; }; -export const allDatasets = Object.values(datasets) +export const allDatasets = Object.values(veda_datasets) .map((d) => d!.data) .filter((d) => !d.disableExplore); @@ -55,7 +58,7 @@ export const allDatasetsWithEnhancedLayers: DatasetDataWithEnhancedLayers[] = a }; }); -export const datasetLayers = Object.values(datasets) +export const datasetLayers = Object.values(veda_datasets) .flatMap((dataset) => { return dataset!.data.layers.map(l => ({ ...l, diff --git a/app/scripts/data-layer/datasets.tsx b/app/scripts/data-layer/datasets.tsx new file mode 100644 index 000000000..25216b14a --- /dev/null +++ b/app/scripts/data-layer/datasets.tsx @@ -0,0 +1,17 @@ +import { datasets } from 'veda'; + +// @VEDA2-REFACTOR-WORK + +/** + * @NOTE + * This file ideally is used to provide different collection datasets from different sources + * and is still a WIP so may change + * + * All datasets should now be referenced from the data-layer, as this should serve as the main source of truth + * + * @TECH-DEBT + * veda virtual modules may go away, but this is used here for now until it is removed entirely or updated + */ + + +export const veda_datasets = datasets; \ No newline at end of file diff --git a/app/scripts/main.tsx b/app/scripts/main.tsx index fa4fef3ea..23ac06bb9 100644 --- a/app/scripts/main.tsx +++ b/app/scripts/main.tsx @@ -19,6 +19,7 @@ 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')); @@ -26,7 +27,7 @@ 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')); diff --git a/package.json b/package.json index 660794bac..6e2af36c2 100644 --- a/package.json +++ b/package.json @@ -197,6 +197,7 @@ "$styles": "~/app/scripts/styles", "$utils": "~/app/scripts/utils", "$context": "~/app/scripts/context", + "$data-layer": "~/app/scripts/data-layer", "$test": "~/test" } } diff --git a/tsconfig.json b/tsconfig.json index 502487a87..68afc4e97 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,8 @@ "$components/*": ["app/scripts/components/*"], "$styles/*": ["app/scripts/styles/*"], "$utils/*": ["app/scripts/utils/*"], - "$context/*": ["app/scripts/context/*"] + "$context/*": ["app/scripts/context/*"], + "$data-layer/*": ["app/scripts/data-layer/*"] } }, "exclude": [