Move markdown info to dataset level

NASA-IMPACT · Feb 15, 2024 · 2c31ccf · 2c31ccf
1 parent 017da16
commit 2c31ccf
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 49 deletions.
diff --git 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)<any>`
 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 (
     <DatasetModal
       id='modal'
@@ -69,15 +76,24 @@ export default function LayerInfoModal(props: LayerInfoModalProps) {
       renderHeadline={() => {
         return (
           <ModalHeadline>
-            <Heading size='medium'>{datasetLayer.name}</Heading>
-            <p dangerouslySetInnerHTML={{__html: datasetLayer.info?.modal.subtitle?? '' }} />
+            <Heading size='medium'>{layerData.name}</Heading>
+            <p>
+              {Object.keys(layerData.info).map((key, idx, arr) => {
+                const currentValue = layerData.info[key];
+                return idx !== arr.length - 1 ? (
+                  <span>{currentValue} · </span>
+                ) : (
+                  <span>{currentValue} </span>
+                );
+              })}
+            </p>
           </ModalHeadline>);
       }}
       content={
-        <div dangerouslySetInnerHTML={{__html: datasetLayer.info?.modal.contents?? 'Layer Information unvailable.' }} />
+        <div dangerouslySetInnerHTML={{__html: parentData.infoDescription?? 'Layer Information unvailable.' }} />
       }
       footerContent={
-        <ButtonStyleLink to={dataCatalogPage} variation='primary-fill' size='medium'>
+        <ButtonStyleLink to={dataCatalogPage} onClick={close} variation='primary-fill' size='medium'>
           Learn more
         </ButtonStyleLink>
       }

diff --git a/app/scripts/components/sandbox/layer-info/index.js b/app/scripts/components/sandbox/layer-info/index.js
@@ -12,29 +12,39 @@ 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 ? (
     <>
       <Block>
         <ContentBlockProse>
           <button type='button' onClick={openModal}>
-            Open {layer.name} Layer Information Modal
+            Open {datasetData.name} Layer Information Modal
           </button>
           {revealed && (
             <LayerInfoModal
               revealed={revealed}
               close={closeModal}
-              datasetLayer={layer}
+              layerData={modalData}
             />
           )}
         </ContentBlockProse>
       </Block>
       <Block>
         <ContentBlockProse>
           <h4> Templated layer info</h4>
-          {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 ? (
               <span>{currentValue} · </span>
             ) : (
@@ -45,6 +55,6 @@ export default function SandboxMDXPage() {
       </Block>
     </>
   ) : (
-    <div> Cannot find layer info from dataset {selectedDatasetId}</div>
+    <div> Cannot find dataset info from {selectedDatasetId}</div>
   );
 }
diff --git 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
@@ -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[];