Feature/layers info

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();
@@ -28,6 +29,8 @@ export default function DatasetsItem(props: LayerListResponseDataItem) {
 
   if (!props.attributes) return null;
 
+  const Info = INFO[props.id];
+
   return (
     <div className="flex flex-col space-y-1.5 border-b py-2">
       <div className="flex items-center justify-between">
@@ -39,36 +42,39 @@ export default function DatasetsItem(props: LayerListResponseDataItem) {
           {/* <h3 className="text-sm">{props.attributes.title}</h3> */}
           <h3 className="text-sm">{props.attributes.name}</h3>
         </div>
-        <Dialog>
-          <DialogTrigger
-            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`}
-          >
-            <Info className="h-4 w-4 text-black" strokeWidth={1} />
-          </DialogTrigger>
+        {Info && (
+          <Dialog>
+            <DialogTrigger
+              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`}
+            >
+              <InfoIcon className="h-4 w-4 text-black" strokeWidth={1} />
+            </DialogTrigger>
 
-          <DialogContent className="p-0" data-cy={`info-${props.attributes.slug}-dialog`}>
-            <h3 className="px-6 pt-4 text-xl font-medium text-green-900">
-              {/* {props.attributes.title} */}
-              {props.attributes.name}
-            </h3>
-            <div className="border-b border-t border-gray-100 py-2.5">
-              <p className="px-6 text-sm text-yellow-900">{props.attributes.info}</p>
-            </div>
-            <div className="flex w-full px-6 pb-4">
-              <DialogClose asChild>
-                <Button
-                  data-cy={`info-${props.attributes.slug}-dialog-close`}
-                  variant="primary"
-                  size="base"
-                  className="ml-auto w-12 self-end"
-                >
-                  Ok
-                </Button>
-              </DialogClose>
-            </div>
-          </DialogContent>
-        </Dialog>
+            <DialogContent className="p-0" data-cy={`info-${props.attributes.slug}-dialog`}>
+              <h3 className="px-6 pt-4 text-xl font-medium text-green-900">
+                {/* {props.attributes.title} */}
+                {props.attributes.name}
+              </h3>
+              <div className="border-b border-t border-gray-100 py-2.5">
+                <Info />
+                {/* <p className="px-6 text-sm text-yellow-900">{props.attributes.info}</p> */}
+              </div>
+              <div className="flex w-full px-6 pb-4">
+                <DialogClose asChild>
+                  <Button
+                    data-cy={`info-${props.attributes.slug}-dialog-close`}
+                    variant="primary"
+                    size="base"
+                    className="ml-auto w-12 self-end"
+                  >
+                    Ok
+                  </Button>
+                </DialogClose>
+              </div>
+            </DialogContent>
+          </Dialog>
+        )}
       </div>
       <div>
         <p className="ml-10 mr-5 text-xs leading-4 text-gray-500">{props.attributes.description}</p>

client/src/containers/datasets/layers/constants/biomass-density.tsx

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+
+export const BiomassDensityInfo: FC = () => (
+  <div className="space-y-4 px-6 text-sm text-yellow-900">
+    <p className="font-light">Shows aboveground live woody biomass density.</p>
+    <div className="flex space-x-4">
+      <span className="font-medium">Citation:</span>
+      <p className="font-light">
+        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.{' '}
+        <a
+          href="https://doi.org/10.1038/s41558-020-00976-6"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {' '}
+          Nature Climate Change.
+        </a>
+      </p>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">Source:</span>
+      <a
+        href="https://gfw.global/3QbgJkN"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        Global Forest Watch.
+      </a>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">License:</span>
+      <a
+        href="https://creativecommons.org/licenses/by/4.0/"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        CC BY 4.0.
+      </a>
+    </div>
+  </div>
+);
+
+export default BiomassDensityInfo;

client/src/containers/datasets/layers/constants/land-degradation.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+export const LandDegradationInfo: FC = () => (
+  <div className="space-y-4 px-6 text-sm text-yellow-900">
+    <p className="font-light">
+      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.
+    </p>
+  </div>
+);
+
+export default LandDegradationInfo;

client/src/containers/datasets/layers/constants/net-flux-carbon.tsx

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+
+export const NetForestCarbonFluxInfo: FC = () => (
+  <div className="space-y-4 px-6 text-sm text-yellow-900">
+    <p className="font-light">
+      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.
+    </p>
+    <div className="flex space-x-4">
+      <span className="font-medium">Citation:</span>
+      <p className="font-light">
+        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.{' '}
+        <a
+          href="https://doi.org/10.1038/s41558-020-00976-6"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {' '}
+          Nature Climate Change.
+        </a>
+      </p>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">Source:</span>
+      <a
+        href="https://gfw.global/3DtjK8u"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        Global Forest Watch.
+      </a>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">License:</span>
+      <a
+        href="https://creativecommons.org/licenses/by/4.0/"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        CC BY 4.0.
+      </a>
+    </div>
+  </div>
+);
+
+export default NetForestCarbonFluxInfo;

client/src/containers/datasets/layers/constants/soil-carbon-density.tsx

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+
+export const SoilCarbonDensityInfo: FC = () => (
+  <div className="space-y-4 px-6 text-sm text-yellow-900">
+    <p className="font-light">Identifies organic carbon density in the topsoil (0-30 cm depth).</p>
+    <div className="flex space-x-4">
+      <span className="font-medium">Citation:</span>
+      <p className="font-light">
+        Sanderman J, Hengl T, Fiske G et al. (2018) A global map of mangrove forest soil carbon at
+        30 m spatial resolution.{' '}
+        <a href="http://doi.org/10.1088/1748-9326/aabe1c" rel="noopener noreferrer" target="_blank">
+          {' '}
+          Environmental Research Letters 13: 055002.
+        </a>
+      </p>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">Source:</span>
+      <a
+        href="https://gfw.global/3rQ6OGW"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        Global Forest Watch.
+      </a>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">License:</span>
+      <a
+        href="https://creativecommons.org/licenses/by/4.0/"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        CC BY 4.0.
+      </a>
+    </div>
+  </div>
+);
+
+export default SoilCarbonDensityInfo;

client/src/containers/datasets/layers/constants/tree-cover.tsx

@@ -0,0 +1,46 @@
+import { FC } from 'react';
+
+export const TreeCoverInfo: FC = () => (
+  <div className="space-y-4 px-6 text-sm text-yellow-900">
+    <p className="font-light">Identifies areas of tree cover.</p>
+    <div className="flex space-x-4">
+      <span className="font-medium">Citation:</span>
+      <p className="font-light">
+        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.”{' '}
+        <a href="https://doi.org/10.1126/science.1244693" rel="noopener noreferrer" target="_blank">
+          {' '}
+          Science 342 (15 November): 850–53.
+        </a>
+      </p>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">Source:</span>
+      <a
+        href="https://gfw.global/2MoEQxq"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        Global Forest Watch.
+      </a>
+    </div>
+    <div className="flex space-x-4">
+      <span className="font-medium">License:</span>
+      <a
+        href="https://creativecommons.org/licenses/by/4.0/"
+        rel="noopener noreferrer"
+        target="_blank"
+        className="text-yellow-400 underline"
+      >
+        {' '}
+        CC BY 4.0.
+      </a>
+    </div>
+  </div>
+);
+
+export default TreeCoverInfo;

client/src/containers/datasets/layers/index.tsx

@@ -2,6 +2,9 @@ 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';
@@ -13,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<T> = {
   [key: number]: React.ComponentType<DeckGLLayerProps<T>>;
 };
@@ -25,6 +31,10 @@ type LegendIndex = {
   [key: string]: React.ComponentType<{ settings: LayerSettings }>;
 };
 
+type InfoIndex = {
+  [key: number]: React.ComponentType;
+};
+
 // layers that require DeckGLLayerProps
 const DECKGL_LAYERS: DeckGLLayerIndex<number> = {
   1: TreeCoverLayer as React.ComponentType<DeckGLLayerProps<number>>,
@@ -47,6 +57,14 @@ export const LEGENDS: LegendIndex = {
   6: LandDegradationLegend,
 };
 
+export const INFO: InfoIndex = {
+  1: TreeCoverInfo,
+  2: BiomassDensityInfo,
+  3: NetForestCarbonFluxInfo,
+  4: SoilCarbonDensityInfo,
+  6: LandDegradationInfo,
+};
+
 function combineLayers<T>(
   deckglLayers: DeckGLLayerIndex<T>,
   simpleLayers: SimpleLayerIndex

client/src/containers/datasets/list.tsx

@@ -17,10 +17,16 @@ export default function DatasetsList() {
     <>
       <h3 className="text-xs text-gray-500">Activate data layers on the map</h3>
       <div className="flex flex-col">
-        {orderBy(layers, 'id').map((l) => {
-          if (!l.id || !l.attributes) return null;
-          return <DatasetsItem key={l.id} {...l} />;
-        })}
+        {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 <DatasetsItem key={l.id} {...l} />;
+          })}
       </div>
     </>
   );