updates legend with plots

client/src/containers/analysis-eudr/map/layers.json

@@ -1,22 +1,35 @@
 [
   {
     "id": "suppliers-plot-of-land",
-    "title": "Supplier's with specified plot of land",
-    "description": "Suppliers with necessary geographical data of land to assess deforestation risk linked to a commodity",
+    "title": "Plots with deforestation alerts",
+    "description": "Land areas where recent deforestation activities have been detected using near-real-time RADD alerts",
     "content": "Suppliers’s  geometry of the land within a single real estate property, as recognised by the law of the country of production, which possesses sufficiently homogeneous conditions to allow an evaluation of the aggregate level of risk of deforestation and forest degradation associated with relevant commodities produced on that land.",
     "citation": null,
     "source": null,
     "type": "layer",
+    "legendConfig": {
+      "iconClass": "border-navy-400 bg-navy-400/30",
+      "items": null
+    }
+  },
+  {
+    "id": "suppliers-plot-of-land",
+    "title": "Deforestation-free plots",
+    "description": "Land areas where recent deforestation activities have been detected using near-real-time RADD alerts",
+    "content": "Deforestation-free plots are areas verified to be free from recent deforestation, monitored using near-real-time RADD alerts. These alerts, adhering to the EUDR definition and following the WHISP methodology developed by FAO and WRI, provide robust monitoring of deforestation activities, enabling proactive measures to maintain forest integrity and sustainability.",
+    "citation": null,
+    "source": null,
+    "type": "layer",
     "legend": {
-      "iconClassName": "border-2 border-orange-500 bg-orange-500/30",
+      "iconClass": "border-[#ffc038] bg-[#ffc038]/30",
       "items": null
     }
   },
   {
     "id": "forest-cover-2020-ec-jrc",
     "title": "Forest Cover 2020 (EC JRC)",
     "description": "Spatial explicit description of forest presence and absence in the year 2020.",
-    "content": "Suppliers’s  geometry of the land within a single real estate property, as recognised by the law of the country of production, which possesses sufficiently homogeneous conditions to allow an evaluation of the aggregate level of risk of deforestation and forest degradation associated with relevant commodities produced on that land.",
+    "content": "Plots with deforestation alerts represent areas where recent deforestation activities have been detected using near-real-time RADD alerts. These alerts adhere to the EUDR definition and follow the WHISP methodology developed by FAO and WRI, providing robust monitoring of deforestation activities and enabling timely intervention measures to address forest degradation and promote sustainable land management practices.",
     "citation": [
       "Bourgoin, Clement; Ameztoy, Iban; Verhegghen, Astrid; Carboni, Silvia; Colditz, Rene R.; Achard, Frederic (2023): Global map of forest cover 2020 - version 1. European Commission, Joint Research Centre (JRC) [Dataset] PID: http://data.europa.eu/89h/10d1b337-b7d1-4938-a048-686c8185b290."
     ],

client/src/containers/analysis-eudr/map/legend/component.tsx

@@ -21,7 +21,9 @@ const EURDLegend = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  const supplierPlotsData = LayersData.find((layer) => layer.id === 'suppliers-plot-of-land');
+  // const supplierPlotsData = LayersData.find((layer) => layer.id === 'suppliers-plot-of-land');
+  const PDAData = LayersData.find((layer) => layer.title === 'Plots with deforestation alerts');
+  const DFPData = LayersData.find((layer) => layer.title === 'Deforestation-free plots');
   const contextualLayersData = LayersData.filter((layer) => layer.type === 'contextual');
 
   return (
@@ -43,9 +45,25 @@ const EURDLegend = () => {
             <h2 className="px-4 py-2 text-sm font-normal">Legend</h2>
             <div>
               <LegendItem
-                title={supplierPlotsData.title}
-                content={supplierPlotsData.content}
-                description={supplierPlotsData.description}
+                title={DFPData.title}
+                content={DFPData.content}
+                description={DFPData.description}
+                legendConfig={DFPData.legend}
+                showVisibility
+                isActive={supplierLayer.active}
+                changeVisibility={() =>
+                  dispatch(setSupplierLayer({ ...supplierLayer, active: !supplierLayer.active }))
+                }
+                changeOpacity={(opacity) =>
+                  dispatch(setSupplierLayer({ ...supplierLayer, opacity }))
+                }
+              />
+            </div>
+            <div>
+              <LegendItem
+                title={PDAData.title}
+                content={PDAData.content}
+                description={PDAData.description}
                 showVisibility
                 isActive={supplierLayer.active}
                 changeVisibility={() =>

client/src/containers/analysis-eudr/map/legend/item.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames';
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
 
+import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
 import OpacityControl from '@/components/legend/item/opacityControl';
 import InfoModal from '@/components/legend/item/info-modal';
@@ -14,6 +14,7 @@ type LegendItemProps = {
   source?: string | string[];
   legendConfig?: {
     iconColor?: string;
+    iconClass?: string;
     items?: { label: string; color: string }[];
     dates?: string[];
   };
@@ -40,7 +41,9 @@ const LegendItem: FC<PropsWithChildren<LegendItemProps>> = ({
   return (
     <div className="flex space-x-2 p-4">
       <div
-        className={classNames('mt-0.5 h-3 w-3 shrink-0', 'border-2 border-navy-400 bg-navy-400/30')}
+        className={cn('mt-0.5 h-3 w-3 shrink-0', 'border-2 border-navy-400 bg-navy-400/30', {
+          [legendConfig?.iconClass]: legendConfig?.iconClass,
+        })}
         style={
           legendConfig?.iconColor
             ? { backgroundColor: legendConfig.iconColor, border: 0 }

client/tailwind.config.ts

@@ -2,7 +2,7 @@ import type { Config } from 'tailwindcss';
 
 const config = {
   darkMode: ['class'],
-  content: ['./src/**/*.{ts,tsx}'],
+  content: ['./src/**/*.{ts,tsx,json}'],
   prefix: '',
   theme: {
     container: {