From 7e099b403b898930ac7d5250c308449ff3c81012 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 13 May 2024 13:33:27 -0400 Subject: [PATCH] Create catalog-view dir and move catalog logic over --- .../browse-controls/use-browse-controls.ts | 2 ++ .../catalog-view}/filter-tag.tsx | 0 .../catalog-view}/filters-control.tsx | 0 .../catalog-view}/index.tsx | 27 ++++++++++--------- .../components/data-catalog/container.tsx | 4 +-- .../dataset-selector-modal/header.tsx | 2 +- .../dataset-selector-modal/index.tsx | 2 +- 7 files changed, 20 insertions(+), 17 deletions(-) rename app/scripts/components/{data-catalog => content-views/catalog-view}/filter-tag.tsx (100%) rename app/scripts/components/{data-catalog => content-views/catalog-view}/filters-control.tsx (100%) rename app/scripts/components/{data-catalog => content-views/catalog-view}/index.tsx (95%) diff --git a/app/scripts/components/common/browse-controls/use-browse-controls.ts b/app/scripts/components/common/browse-controls/use-browse-controls.ts index 2035f03c8..3ff834073 100644 --- a/app/scripts/components/common/browse-controls/use-browse-controls.ts +++ b/app/scripts/components/common/browse-controls/use-browse-controls.ts @@ -45,6 +45,8 @@ export const optionAll = { name: 'All' }; +export const minSearchLength = 3; + export function useBrowserControls({ sortOptions }: BrowseControlsHookParams) { // Setup Qs State to store data in the url's query string // react-router function to get the navigation. diff --git a/app/scripts/components/data-catalog/filter-tag.tsx b/app/scripts/components/content-views/catalog-view/filter-tag.tsx similarity index 100% rename from app/scripts/components/data-catalog/filter-tag.tsx rename to app/scripts/components/content-views/catalog-view/filter-tag.tsx diff --git a/app/scripts/components/data-catalog/filters-control.tsx b/app/scripts/components/content-views/catalog-view/filters-control.tsx similarity index 100% rename from app/scripts/components/data-catalog/filters-control.tsx rename to app/scripts/components/content-views/catalog-view/filters-control.tsx diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/content-views/catalog-view/index.tsx similarity index 95% rename from app/scripts/components/data-catalog/index.tsx rename to app/scripts/components/content-views/catalog-view/index.tsx index 10544a6b1..5b701ca46 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/content-views/catalog-view/index.tsx @@ -3,11 +3,12 @@ import styled from 'styled-components'; import { DatasetData } from 'veda'; import { useNavigate } from 'react-router-dom'; import { themeVal } from '@devseed-ui/theme-provider'; +import prepareDatasets from '../../data-catalog/prepare-datasets'; import FiltersControl from './filters-control'; import FilterTag from './filter-tag'; -import prepareDatasets from './prepare-datasets'; import { Actions, + minSearchLength, useBrowserControls } from '$components/common/browse-controls/use-browse-controls'; import { @@ -39,7 +40,7 @@ import { getAllDatasetsWithEnhancedLayers } from '$components/exploration/data-u * Allows you to browse through datasets using the filters sidebar control */ -const DataCatalogWrapper = styled.div` +const CatalogWrapper = styled.div` width: 100%; max-width: ${themeVal('layout.max')}; margin: 0 auto; @@ -59,7 +60,7 @@ const Content = styled.div` position: relative; `; -const CatalogWrapper = styled.div` +const Catalog = styled.div` width: 100%; `; @@ -92,7 +93,7 @@ const EmptyState = styled(EmptyHub)` export const sortOptions = [{ id: 'name', name: 'Name' }]; -export interface DataCatalogProps { +export interface CatalogViewProps { datasets: DatasetData[]; cardComponentOverride?: { // Allow user to override with a different cardType with optional props CardComponent: ComponentType; @@ -100,10 +101,10 @@ export interface DataCatalogProps { } } -function DataCatalog({ +function CatalogView({ datasets, cardComponentOverride, -}: DataCatalogProps) { +}: CatalogViewProps) { const controlVars = useBrowserControls({ sortOptions }); @@ -211,7 +212,7 @@ function DataCatalog({ title={ {dataset.name} @@ -219,7 +220,7 @@ function DataCatalog({ description={ {dataset.description} @@ -231,7 +232,7 @@ function DataCatalog({ }; return ( - + - + {renderTags} {datasetsToDisplay.length ? ( @@ -269,10 +270,10 @@ function DataCatalog({ There are no datasets to show with the selected filters. )} - + - + ); } -export default DataCatalog; \ No newline at end of file +export default CatalogView; \ No newline at end of file diff --git a/app/scripts/components/data-catalog/container.tsx b/app/scripts/components/data-catalog/container.tsx index 4fcb45b13..a84a0ab7f 100644 --- a/app/scripts/components/data-catalog/container.tsx +++ b/app/scripts/components/data-catalog/container.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { getString } from 'veda'; import { allDatasets } from '$components/exploration/data-utils'; -import DataCatalog from '$components/data-catalog'; +import CatalogView from '$components/content-views/catalog-view'; import { PageMainContent } from '$styles/page'; import { LayoutProps } from '$components/common/layout-root'; import PageHero from '$components/common/page-hero'; @@ -20,7 +20,7 @@ export default function DataCatalogContainer() { - + ); } \ No newline at end of file diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx index ea39fcdb1..e6b91ea34 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/header.tsx @@ -15,7 +15,7 @@ import { allExploreDatasetsWithEnhancedLayers as allDatasets } from '$components/exploration/data-utils'; import { generateTaxonomies } from '$utils/veda-data'; -import { sortOptions } from '$components/data-catalog'; +import { sortOptions } from '$components/content-views/catalog-view'; const StyledModalHeadline = styled(ModalHeadline)` width: 100%; diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx index 61de1d5df..531d2fdfd 100644 --- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx +++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx @@ -28,7 +28,7 @@ import { TaxonomyFilterOption, useBrowserControls } from '$components/common/browse-controls/use-browse-controls'; -import { sortOptions } from '$components/data-catalog'; +import { sortOptions } from '$components/content-views/catalog-view'; import prepareDatasets from '$components/data-catalog/prepare-datasets'; import { TAXONOMY_SOURCE, getTaxonomy } from '$utils/veda-data'; import { usePreviousValue } from '$utils/use-effect-previous';