From 0462ff2e438a0dd65414dc106b444c4015e5e3a5 Mon Sep 17 00:00:00 2001
From: David Inga <david.inga@icloud.com>
Date: Mon, 18 Mar 2024 11:48:42 +0100
Subject: [PATCH] fixed opacity for layers

---
 client/src/components/legend/item/info-modal.tsx      |  2 +-
 client/src/containers/analysis-eudr/map/component.tsx |  4 ++++
 .../containers/analysis-eudr/map/legend/component.tsx | 11 +++++++++++
 .../src/containers/analysis-eudr/map/legend/item.tsx  | 10 ++++++++--
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/src/components/legend/item/info-modal.tsx b/client/src/components/legend/item/info-modal.tsx
index 8a193da17..e7ad77ae1 100644
--- a/client/src/components/legend/item/info-modal.tsx
+++ b/client/src/components/legend/item/info-modal.tsx
@@ -13,7 +13,7 @@ const InfoModal = ({ info: { title, description, source } }: InfoModalProps) =>
   const [open, setOpen] = useState(false);
   return (
     <>
-      <button type="button" className="px-0 py-0" onClick={() => setOpen(true)}>
+      <button type="button" className="cursor-pointer px-0 py-0" onClick={() => setOpen(true)}>
         <InformationCircleIcon className="h-4 w-4" />
       </button>
       <Modal onDismiss={() => setOpen(false)} title={title || NO_DATA} open={open} size="narrow">
diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx
index 86b1e39f0..a79a5edce 100644
--- a/client/src/containers/analysis-eudr/map/component.tsx
+++ b/client/src/containers/analysis-eudr/map/component.tsx
@@ -72,6 +72,7 @@ const EUDRMap = () => {
     highlightColor: [63, 89, 224, 255],
     visible: supplierLayer.active,
     onHover: setHoverInfo,
+    opacity: supplierLayer.opacity,
   });
 
   const planetLayer = new TileLayer({
@@ -122,6 +123,7 @@ const EUDRMap = () => {
     stroked: false,
     getFillColor: [114, 169, 80],
     lineWidthMinPixels: 1,
+    opacity: contextualLayers['forest-cover-2020-ec-jrc'].opacity,
     visible: contextualLayers['forest-cover-2020-ec-jrc'].active,
     credentials: {
       apiVersion: API_VERSIONS.V3,
@@ -140,6 +142,7 @@ const EUDRMap = () => {
     stroked: false,
     getFillColor: [224, 191, 36],
     lineWidthMinPixels: 1,
+    opacity: contextualLayers['deforestation-alerts-2020-2022-hansen'].opacity,
     visible: contextualLayers['deforestation-alerts-2020-2022-hansen'].active,
     credentials: {
       apiVersion: API_VERSIONS.V3,
@@ -165,6 +168,7 @@ const EUDRMap = () => {
       return [201, 42, 109];
     },
     lineWidthMinPixels: 1,
+    opacity: contextualLayers['real-time-deforestation-alerts-since-2020-radd'].opacity,
     visible: contextualLayers['real-time-deforestation-alerts-since-2020-radd'].active,
     credentials: {
       apiVersion: API_VERSIONS.V3,
diff --git a/client/src/containers/analysis-eudr/map/legend/component.tsx b/client/src/containers/analysis-eudr/map/legend/component.tsx
index 320a22ec5..12871e5b9 100644
--- a/client/src/containers/analysis-eudr/map/legend/component.tsx
+++ b/client/src/containers/analysis-eudr/map/legend/component.tsx
@@ -51,6 +51,9 @@ const EURDLegend = () => {
                 changeVisibility={() =>
                   dispatch(setSupplierLayer({ ...supplierLayer, active: !supplierLayer.active }))
                 }
+                changeOpacity={(opacity) =>
+                  dispatch(setSupplierLayer({ ...supplierLayer, opacity }))
+                }
               />
             </div>
             <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
@@ -87,6 +90,14 @@ const EURDLegend = () => {
                         }),
                       )
                     }
+                    changeOpacity={(opacity) =>
+                      dispatch(
+                        setContextualLayer({
+                          layer: layer.id,
+                          configuration: { opacity },
+                        }),
+                      )
+                    }
                   >
                     <>
                       {layer.id === 'deforestation-alerts-2020-2022-hansen' &&
diff --git a/client/src/containers/analysis-eudr/map/legend/item.tsx b/client/src/containers/analysis-eudr/map/legend/item.tsx
index 9c12a5282..44efbc152 100644
--- a/client/src/containers/analysis-eudr/map/legend/item.tsx
+++ b/client/src/containers/analysis-eudr/map/legend/item.tsx
@@ -21,6 +21,7 @@ type LegendItemProps = {
   showSwitcher?: boolean;
   isActive?: boolean;
   changeVisibility?: (active: boolean) => void;
+  changeOpacity?: (opacity: number) => void;
 };
 
 const LegendItem: FC<PropsWithChildren<LegendItemProps>> = ({
@@ -34,6 +35,7 @@ const LegendItem: FC<PropsWithChildren<LegendItemProps>> = ({
   showSwitcher = false,
   isActive = true,
   changeVisibility = () => null,
+  changeOpacity = () => null,
 }) => {
   return (
     <div className="flex space-x-2 p-4">
@@ -50,12 +52,16 @@ const LegendItem: FC<PropsWithChildren<LegendItemProps>> = ({
           <h3 className="text-xs font-normal">{title}</h3>
           <div className="flex divide-x">
             <div className="flex items-center space-x-1 pr-1">
-              <OpacityControl opacity={1} onChange={() => null} />
+              <OpacityControl opacity={1} onChange={changeOpacity} />
               <InfoModal info={{ title, description: content, source }} />
             </div>
             {showVisibility && (
               <div className="flex items-center pl-1">
-                <button type="button" onClick={() => changeVisibility(!isActive)}>
+                <button
+                  type="button"
+                  onClick={() => changeVisibility(!isActive)}
+                  className="cursor-pointer"
+                >
                   {isActive ? (
                     <EyeOffIcon className="h-4 w-4"></EyeOffIcon>
                   ) : (