From 088aa47b8aad0a20174366bd63ac813abec3606b Mon Sep 17 00:00:00 2001 From: mluena Date: Tue, 26 Mar 2024 10:22:41 +0100 Subject: [PATCH 1/2] wip --- client/src/containers/datasets/item.tsx | 13 +++--- .../layers/constants/biomass-density.tsx | 41 +++++++++++++++++++ .../src/containers/datasets/layers/index.tsx | 9 ++++ 3 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 client/src/containers/datasets/layers/constants/biomass-density.tsx diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx index 0c86f5ac..23b35ce0 100644 --- a/client/src/containers/datasets/item.tsx +++ b/client/src/containers/datasets/item.tsx @@ -2,16 +2,17 @@ import { useCallback } from 'react'; -import { Info } from 'lucide-react'; +import { Info as InfoIcon } from 'lucide-react'; import type { LayerListResponseDataItem } from '@/types/generated/strapi.schemas'; import { useSyncLayers } from '@/hooks/datasets/sync-query'; +import { INFO } from '@/containers/datasets/layers'; + import { Button } from '@/components/ui/button'; import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog'; import { Switch } from '@/components/ui/switch'; - // TODO: replace with real type DatasetItemResonseDataItem export default function DatasetsItem(props: LayerListResponseDataItem) { const [layers, setLayersToURL] = useSyncLayers(); @@ -27,7 +28,8 @@ export default function DatasetsItem(props: LayerListResponseDataItem) { }, [layers, setLayersToURL, props.id]); if (!props.attributes) return null; - + const Info = INFO[2]; + console.log(INFO); return (
@@ -44,7 +46,7 @@ export default function DatasetsItem(props: LayerListResponseDataItem) { className="flex items-center justify-center rounded-full p-2 hover:bg-yellow-50 data-[state=open]:bg-yellow-50" data-cy={`info-${props.attributes.slug}-button`} > - + @@ -71,7 +73,8 @@ export default function DatasetsItem(props: LayerListResponseDataItem) {
-

{props.attributes.description}

+ + {/*

{props.attributes.description}

*/}
); diff --git a/client/src/containers/datasets/layers/constants/biomass-density.tsx b/client/src/containers/datasets/layers/constants/biomass-density.tsx new file mode 100644 index 00000000..2d4d2991 --- /dev/null +++ b/client/src/containers/datasets/layers/constants/biomass-density.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react'; + +export const BiomassDensityInfo: FC = () => { +
+

+ Aboveground live woody biomass density +

+

Shows aboveground live woody biomass density.

+ Citation: +

+ Harris, N.L., D.A. Gibbs, A. Baccini, R.A. Birdsey, S. de Bruin, M. Farina, L. Fatoyinbo, M.C. + Hansen, M. Herold, R.A. Houghton, P.V. Potapov, D. Requena Suarez, R.M. Roman-Cuesta, S.S. + Saatchi, C.M. Slay, S.A. Turubanova, A. Tyukavina. 2021. Global maps of twenty-first century + forest carbon fluxes.{' '} + + {' '} + Nature Climate Change. + +

+ Source + + {' '} + Global Forest Watch. + + License: + + {' '} + CC BY 4.0. + +
; +}; + +export default BiomassDensityInfo; diff --git a/client/src/containers/datasets/layers/index.tsx b/client/src/containers/datasets/layers/index.tsx index a1689035..0e972040 100644 --- a/client/src/containers/datasets/layers/index.tsx +++ b/client/src/containers/datasets/layers/index.tsx @@ -2,6 +2,7 @@ import type { LayerProps, DeckGLLayerProps, LayerSettings, LayerId } from '@/typ import BiomassDensity from '@/containers/datasets/layers/biomass-density/layer'; import BiomassDensityLegend from '@/containers/datasets/layers/biomass-density/legend'; +import BiomassDensityInfo from '@/containers/datasets/layers/constants/biomass-density'; import { LandDegradationLayer } from '@/containers/datasets/layers/land-degradation/layer'; import LandDegradationLegend from '@/containers/datasets/layers/land-degradation/legend'; import NetForestCarbonFluxLayer from '@/containers/datasets/layers/net-forest-carbon-flux/layer'; @@ -25,6 +26,10 @@ type LegendIndex = { [key: string]: React.ComponentType<{ settings: LayerSettings }>; }; +type InfoIndex = { + [key: number]: React.ComponentType; +}; + // layers that require DeckGLLayerProps const DECKGL_LAYERS: DeckGLLayerIndex = { 1: TreeCoverLayer as React.ComponentType>, @@ -47,6 +52,10 @@ export const LEGENDS: LegendIndex = { 6: LandDegradationLegend, }; +export const INFO: InfoIndex = { + 2: BiomassDensityInfo, +}; + function combineLayers( deckglLayers: DeckGLLayerIndex, simpleLayers: SimpleLayerIndex From 77ce3c8db17bbb2492cfa287413a05df2c681041 Mon Sep 17 00:00:00 2001 From: mluena Date: Tue, 26 Mar 2024 11:29:12 +0100 Subject: [PATCH 2/2] info layers --- client/src/containers/datasets/item.tsx | 69 +++++++++--------- .../layers/constants/biomass-density.tsx | 71 +++++++++++-------- .../layers/constants/land-degradation.tsx | 14 ++++ .../layers/constants/net-flux-carbon.tsx | 54 ++++++++++++++ .../layers/constants/soil-carbon-density.tsx | 44 ++++++++++++ .../datasets/layers/constants/tree-cover.tsx | 46 ++++++++++++ .../src/containers/datasets/layers/index.tsx | 11 ++- client/src/containers/datasets/list.tsx | 21 +++--- 8 files changed, 254 insertions(+), 76 deletions(-) create mode 100644 client/src/containers/datasets/layers/constants/land-degradation.tsx create mode 100644 client/src/containers/datasets/layers/constants/net-flux-carbon.tsx create mode 100644 client/src/containers/datasets/layers/constants/soil-carbon-density.tsx create mode 100644 client/src/containers/datasets/layers/constants/tree-cover.tsx diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx index 23b35ce0..324a6ea6 100644 --- a/client/src/containers/datasets/item.tsx +++ b/client/src/containers/datasets/item.tsx @@ -28,8 +28,9 @@ export default function DatasetsItem(props: LayerListResponseDataItem) { }, [layers, setLayersToURL, props.id]); if (!props.attributes) return null; - const Info = INFO[2]; - console.log(INFO); + + const Info = INFO[props.id]; + return (
@@ -41,40 +42,42 @@ export default function DatasetsItem(props: LayerListResponseDataItem) { {/*

{props.attributes.title}

*/}

{props.attributes.name}

- - - - + {Info && ( + + + + - -

- {/* {props.attributes.title} */} - {props.attributes.name} -

-
-

{props.attributes.info}

-
-
- - - -
- - + +

+ {/* {props.attributes.title} */} + {props.attributes.name} +

+
+ + {/*

{props.attributes.info}

*/} +
+
+ + + +
+ + + )}
- - {/*

{props.attributes.description}

*/} +

{props.attributes.description}

); diff --git a/client/src/containers/datasets/layers/constants/biomass-density.tsx b/client/src/containers/datasets/layers/constants/biomass-density.tsx index 2d4d2991..476b086b 100644 --- a/client/src/containers/datasets/layers/constants/biomass-density.tsx +++ b/client/src/containers/datasets/layers/constants/biomass-density.tsx @@ -1,41 +1,50 @@ import { FC } from 'react'; -export const BiomassDensityInfo: FC = () => { -
-

- Aboveground live woody biomass density -

-

Shows aboveground live woody biomass density.

- Citation: -

- Harris, N.L., D.A. Gibbs, A. Baccini, R.A. Birdsey, S. de Bruin, M. Farina, L. Fatoyinbo, M.C. - Hansen, M. Herold, R.A. Houghton, P.V. Potapov, D. Requena Suarez, R.M. Roman-Cuesta, S.S. - Saatchi, C.M. Slay, S.A. Turubanova, A. Tyukavina. 2021. Global maps of twenty-first century - forest carbon fluxes.{' '} +export const BiomassDensityInfo: FC = () => ( +

+

Shows aboveground live woody biomass density.

+
+ Citation: +

+ Harris, N.L., D.A. Gibbs, A. Baccini, R.A. Birdsey, S. de Bruin, M. Farina, L. Fatoyinbo, + M.C. Hansen, M. Herold, R.A. Houghton, P.V. Potapov, D. Requena Suarez, R.M. Roman-Cuesta, + S.S. Saatchi, C.M. Slay, S.A. Turubanova, A. Tyukavina. 2021. Global maps of twenty-first + century forest carbon fluxes.{' '} + + {' '} + Nature Climate Change. + +

+
+ ; -}; +
+ +
+); export default BiomassDensityInfo; diff --git a/client/src/containers/datasets/layers/constants/land-degradation.tsx b/client/src/containers/datasets/layers/constants/land-degradation.tsx new file mode 100644 index 00000000..73940e75 --- /dev/null +++ b/client/src/containers/datasets/layers/constants/land-degradation.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react'; + +export const LandDegradationInfo: FC = () => ( +
+

+ This is a map layer obtained after overlying multiple composition maps of soil type, + vegetation, drought index, fertility decline, DEM, rainfall, slope, slope length, farming + coefficient etc. The component spatial data were the last updated available spatial data of + each province, so the number of data years were not similar. +

+
+); + +export default LandDegradationInfo; diff --git a/client/src/containers/datasets/layers/constants/net-flux-carbon.tsx b/client/src/containers/datasets/layers/constants/net-flux-carbon.tsx new file mode 100644 index 00000000..21e79b67 --- /dev/null +++ b/client/src/containers/datasets/layers/constants/net-flux-carbon.tsx @@ -0,0 +1,54 @@ +import { FC } from 'react'; + +export const NetForestCarbonFluxInfo: FC = () => ( +
+

+ Displays the net loss of forest ecosystem carbon, calculated as the difference between forest + carbon emissions from stand-replacing forest disturbances and carbon removals from forest + growth. +

+
+ Citation: +

+ Harris, N.L., D.A. Gibbs, A. Baccini, R.A. Birdsey, S. de Bruin, M. Farina, L. Fatoyinbo, + M.C. Hansen, M. Herold, R.A. Houghton, P.V. Potapov, D. Requena Suarez, R.M. Roman-Cuesta, + S.S. Saatchi, C.M. Slay, S.A. Turubanova, A. Tyukavina. 2021. Global maps of twenty-first + century forest carbon fluxes.{' '} + + {' '} + Nature Climate Change. + +

+
+ + +
+); + +export default NetForestCarbonFluxInfo; diff --git a/client/src/containers/datasets/layers/constants/soil-carbon-density.tsx b/client/src/containers/datasets/layers/constants/soil-carbon-density.tsx new file mode 100644 index 00000000..dc5759f0 --- /dev/null +++ b/client/src/containers/datasets/layers/constants/soil-carbon-density.tsx @@ -0,0 +1,44 @@ +import { FC } from 'react'; + +export const SoilCarbonDensityInfo: FC = () => ( +
+

Identifies organic carbon density in the topsoil (0-30 cm depth).

+
+ Citation: +

+ Sanderman J, Hengl T, Fiske G et al. (2018) A global map of mangrove forest soil carbon at + 30 m spatial resolution.{' '} + + {' '} + Environmental Research Letters 13: 055002. + +

+
+ + +
+); + +export default SoilCarbonDensityInfo; diff --git a/client/src/containers/datasets/layers/constants/tree-cover.tsx b/client/src/containers/datasets/layers/constants/tree-cover.tsx new file mode 100644 index 00000000..ce969d51 --- /dev/null +++ b/client/src/containers/datasets/layers/constants/tree-cover.tsx @@ -0,0 +1,46 @@ +import { FC } from 'react'; + +export const TreeCoverInfo: FC = () => ( +
+

Identifies areas of tree cover.

+
+ Citation: +

+ Hansen, M. C., P. V. Potapov, R. Moore, M. Hancher, S. A. Turubanova, A. Tyukavina, D. Thau, + S. V. Stehman, S. J. Goetz, T. R. Loveland, A. Kommareddy, A. Egorov, L. Chini, C. O. + Justice, and J. R. G. Townshend. 2013. “High-Resolution Global Maps of 21st-Century Forest + Cover Change.”{' '} + + {' '} + Science 342 (15 November): 850–53. + +

+
+ + +
+); + +export default TreeCoverInfo; diff --git a/client/src/containers/datasets/layers/index.tsx b/client/src/containers/datasets/layers/index.tsx index 0e972040..6595d782 100644 --- a/client/src/containers/datasets/layers/index.tsx +++ b/client/src/containers/datasets/layers/index.tsx @@ -1,8 +1,10 @@ -import type { LayerProps, DeckGLLayerProps, LayerSettings, LayerId } from '@/types/layers'; +import type { LayerProps, DeckGLLayerProps, LayerSettings } from '@/types/layers'; import BiomassDensity from '@/containers/datasets/layers/biomass-density/layer'; import BiomassDensityLegend from '@/containers/datasets/layers/biomass-density/legend'; import BiomassDensityInfo from '@/containers/datasets/layers/constants/biomass-density'; +import NetForestCarbonFluxInfo from '@/containers/datasets/layers/constants/net-flux-carbon'; +import SoilCarbonDensityInfo from '@/containers/datasets/layers/constants/soil-carbon-density'; import { LandDegradationLayer } from '@/containers/datasets/layers/land-degradation/layer'; import LandDegradationLegend from '@/containers/datasets/layers/land-degradation/legend'; import NetForestCarbonFluxLayer from '@/containers/datasets/layers/net-forest-carbon-flux/layer'; @@ -14,6 +16,9 @@ import SoilCarbonDensityLegend from '@/containers/datasets/layers/soil-carbon-de import TreeCoverLayer from '@/containers/datasets/layers/tree-cover/layer'; import TreeCoverLegend from '@/containers/datasets/layers/tree-cover/legend'; +import LandDegradationInfo from './constants/land-degradation'; +import TreeCoverInfo from './constants/tree-cover'; + type DeckGLLayerIndex = { [key: number]: React.ComponentType>; }; @@ -53,7 +58,11 @@ export const LEGENDS: LegendIndex = { }; export const INFO: InfoIndex = { + 1: TreeCoverInfo, 2: BiomassDensityInfo, + 3: NetForestCarbonFluxInfo, + 4: SoilCarbonDensityInfo, + 6: LandDegradationInfo, }; function combineLayers( diff --git a/client/src/containers/datasets/list.tsx b/client/src/containers/datasets/list.tsx index 0b79f97d..8ad7f874 100644 --- a/client/src/containers/datasets/list.tsx +++ b/client/src/containers/datasets/list.tsx @@ -1,14 +1,7 @@ 'use client'; -import { useState } from 'react'; - -import { orderBy } from 'lodash-es'; -import { Search } from 'lucide-react'; - import { useGetLayers } from '@/types/generated/layer'; -import { Input } from '@/components/ui/input'; - import DatasetsItem from './item'; export default function DatasetsList() { @@ -22,10 +15,16 @@ export default function DatasetsList() { <>

Activate data layers on the map

- {orderBy(layers, 'id').map((l) => { - if (!l.id || !l.attributes) return null; - return ; - })} + {layers + .sort((a, b) => { + if (a?.attributes?.slug === 'projects') return -1; + if (b?.attributes?.slug === 'projects') return 1; + return 0; + }) + .map((l) => { + if (!l.id || !l.attributes) return null; + return ; + })}
);