From 2c31ccf4d0b8f726cde41d7dddc0a748514dd503 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 15 Feb 2024 11:31:24 -0500 Subject: [PATCH] Move markdown info to dataset level --- .../components/layer-info-modal.tsx | 36 +++++++++++++------ .../components/sandbox/layer-info/index.js | 24 +++++++++---- mock/datasets/no2.data.mdx | 33 ++++++++--------- parcel-resolver-veda/index.d.ts | 21 +++++------ 4 files changed, 65 insertions(+), 49 deletions(-) diff --git a/app/scripts/components/exploration/components/layer-info-modal.tsx b/app/scripts/components/exploration/components/layer-info-modal.tsx index 702138cbd..cde69e617 100644 --- a/app/scripts/components/exploration/components/layer-info-modal.tsx +++ b/app/scripts/components/exploration/components/layer-info-modal.tsx @@ -11,8 +11,7 @@ import { glsp, themeVal } from '@devseed-ui/theme-provider'; import { createButtonStyles } from '@devseed-ui/button'; import { Heading } from '@devseed-ui/typography'; -import { DatasetLayer } from 'veda'; -import { findParentDataset } from '../data-utils'; +import { LayerInfo } from 'veda'; import SmartLink from '$components/common/smart-link'; import { getDatasetPath } from '$utils/routes'; @@ -53,13 +52,21 @@ const ButtonStyleLink = styled(SmartLink)` interface LayerInfoModalProps { revealed: boolean; close: () => void; - datasetLayer: DatasetLayer; + layerData: { + name: string; + info: LayerInfo; + parentData: { + id: string; + infoDescription?: string; + } + } } export default function LayerInfoModal(props: LayerInfoModalProps) { - const { revealed, close, datasetLayer } = props; - const parent = findParentDataset(datasetLayer.id); - const dataCatalogPage = parent? getDatasetPath(parent) : '/'; + const { revealed, close, layerData } = props; + const { parentData } = layerData; + const dataCatalogPage = getDatasetPath(parentData.id); + return ( { return ( - {datasetLayer.name} -

+ {layerData.name} +

+ {Object.keys(layerData.info).map((key, idx, arr) => { + const currentValue = layerData.info[key]; + return idx !== arr.length - 1 ? ( + {currentValue} · + ) : ( + {currentValue} + ); + })} +

); }} content={ -
+
} footerContent={ - + Learn more } diff --git a/app/scripts/components/sandbox/layer-info/index.js b/app/scripts/components/sandbox/layer-info/index.js index c3ecc41e4..6deb8d067 100644 --- a/app/scripts/components/sandbox/layer-info/index.js +++ b/app/scripts/components/sandbox/layer-info/index.js @@ -12,20 +12,30 @@ export default function SandboxMDXPage() { const openModal = useCallback(() => setRevealed(true), []); const closeModal = useCallback(() => setRevealed(false), []); - const layer = datasets[selectedDatasetId]?.data.layers[0]; + const datasetData = datasets[selectedDatasetId]?.data; + const layerData = datasetData.layers[0]; - return layer && layer.info ? ( + const modalData = { + name: layerData.name, + info: layerData.info, + parentData: { + id: datasetData.id, + infoDescription: datasetData.infoDescription + } + }; + + return datasetData && datasetData.infoDescription && layerData.info ? ( <> {revealed && ( )} @@ -33,8 +43,8 @@ export default function SandboxMDXPage() {

Templated layer info

- {Object.keys(layer.info.template).map((key, idx, arr) => { - const currentValue = layer.info.template[key]; + {Object.keys(layerData.info).map((key, idx, arr) => { + const currentValue = layerData.info[key]; return idx !== arr.length - 1 ? ( {currentValue} · ) : ( @@ -45,6 +55,6 @@ export default function SandboxMDXPage() { ) : ( -
Cannot find layer info from dataset {selectedDatasetId}
+
Cannot find dataset info from {selectedDatasetId}
); } diff --git a/mock/datasets/no2.data.mdx b/mock/datasets/no2.data.mdx index a2dad5bdf..5b60cbcde 100644 --- a/mock/datasets/no2.data.mdx +++ b/mock/datasets/no2.data.mdx @@ -46,6 +46,15 @@ taxonomy: - name: Source values: - Mock +infoDescription: | + ::markdown + - Temporal Extent: January 2000 - December 2021 + - Temporal Resolution: Monthly + - Spatial Extent: Global + - Spatial Resolution: 1 km x 1 km + - Data Units: Tons of carbon per 1 km x 1 km cell (monthly total) + - Data Type: Research + - Data Latency: Updated annually, following the release of an updated [BP Statistical Review of World Energy report](https://www.bp.com/en/global/corporate/energy-economics.html) layers: - id: no2-monthly stacCol: no2-monthly @@ -55,25 +64,6 @@ layers: id: polarNorth bounds: [-10, 36, -5, 42] description: Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity. - info: - modal: - subtitle: | - ::markdown - Global, monthly 1 km resolution dataset of fossil fuel carbon dioxide emissions, version 2022 - contents: | - ::markdown - - Temporal Extent: January 2000 - December 2021 - - Temporal Resolution: Monthly - - Spatial Extent: Global - - Spatial Resolution: 1 km x 1 km - - Data Units: Tons of carbon per 1 km x 1 km cell (monthly total) - - Data Type: Research - - Data Latency: Updated annually, following the release of an updated [BP Statistical Review of World Energy report](https://www.bp.com/en/global/corporate/energy-economics.html) - template: - source: NASA - spatialExtent: Global - latency: Monthly - unit: 10¹⁵ molecules cm⁻² zoomExtent: - 0 - 20 @@ -111,6 +101,11 @@ layers: - max # dummy value to make sure non existent values are sagfely discarded - non-existent + info: + source: NASA + spatialExtent: Global + latency: Monthly + unit: 10¹⁵ molecules cm⁻² - id: no2-monthly-2 stacCol: no2-monthly name: No2 US diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index d0709ee4b..7f6a935d7 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -56,24 +56,17 @@ declare module 'veda' { MONTH = 'month', DAY = 'day' } - export interface LayerFrontmatterInfo { - modal: { - subtitle: string; - contents: string; - }, - template: { - source: string; - spatialExtent: string; - latency: string; - unit: string; - }; - } +export interface LayerInfo { + source: string; + spatialExtent: string; + latency: string; + unit: string; +} export interface DatasetLayer extends DatasetLayerCommonProps { id: string; stacCol: string; stacApiEndpoint?: string; tileApiEndpoint?: string; - info?: LayerFrontmatterInfo; name: string; description: string; initialDatetime?: 'newest' | 'oldest' | string; @@ -92,6 +85,7 @@ declare module 'veda' { to: string; }, time_density?: TimeDensity; + info?: LayerInfo; } // A normalized compare layer is the result after the compare definition is // resolved from DatasetLayerCompareSTAC or DatasetLayerCompareInternal. The @@ -185,6 +179,7 @@ declare module 'veda' { featured?: boolean; id: string; name: string; + infoDescription?: string; taxonomy: Taxonomy[]; description: string; usage?: DatasetUsage[];