From ae2c7a55a206ef150271b0afef2f7d83470a04f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 20 Sep 2023 11:16:09 +0200
Subject: [PATCH] WIP

---
 app/hooks/map/constants.tsx                   | 39 +++++++++++--------
 .../scenarios/edit/map/legend/hooks/index.ts  | 10 ++---
 .../reports/solutions/frequency/index.tsx     |  4 +-
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
index d9de8fb923..f4a82a0758 100644
--- a/app/hooks/map/constants.tsx
+++ b/app/hooks/map/constants.tsx
@@ -204,21 +204,26 @@ export const LEGEND_LAYERS = {
       onChangeVisibility,
     };
   },
-  'wdpa-percentage': () => ({
-    id: 'wdpa-percentage',
-    name: 'Protected areas',
-    icon: (
-      <Icon
-        icon={HEXAGON_SVG}
-        className="mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
-        style={{ color: COLORS.wdpa }}
-      />
-    ),
-    settingsManager: {
-      opacity: true,
-      visibility: true,
-    },
-  }),
+  'wdpa-percentage': (options: { onChangeVisibility: () => void }) => {
+    const { onChangeVisibility } = options;
+
+    return {
+      id: 'wdpa-percentage',
+      name: 'Protected areas',
+      icon: (
+        <Icon
+          icon={HEXAGON_SVG}
+          className="mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
+          style={{ color: COLORS.wdpa }}
+        />
+      ),
+      settingsManager: {
+        opacity: true,
+        visibility: true,
+      },
+      onChangeVisibility,
+    };
+  },
   'designated-areas': (options: {
     items: { id: WDPA['id']; name: string }[];
     onChangeVisibility: (WDPAId: WDPA['id']) => void;
@@ -459,7 +464,7 @@ export const LEGEND_LAYERS = {
   },
 
   // SOLUTIONS
-  frequency: (options) => {
+  frequency: (options: { numberOfRuns: number; onChangeVisibility?: () => void }) => {
     const { numberOfRuns, onChangeVisibility } = options;
 
     return {
@@ -488,7 +493,7 @@ export const LEGEND_LAYERS = {
           value: '100',
         },
       ],
-      onChangeVisibility,
+      ...(onChangeVisibility && { onChangeVisibility }),
     };
   },
   solution: (options?: { onChangeVisibility?: () => void }) => ({
diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts
index 59cdfd75a2..272a5a2c90 100644
--- a/app/layout/scenarios/edit/map/legend/hooks/index.ts
+++ b/app/layout/scenarios/edit/map/legend/hooks/index.ts
@@ -159,7 +159,7 @@ export const useFeatureAbundanceLegend = () => {
   });
 };
 
-export const useFeatureLegend = () => {
+export const useFeaturesLegend = () => {
   const { query } = useRouter();
   const { sid } = query as { sid: string };
 
@@ -316,13 +316,13 @@ export const useWDPAPreviewLegend = () => {
   const { setLayerSettings } = scenarioSlice.actions;
   const { layerSettings } = useAppSelector((state) => state[`/scenarios/${sid}/edit`]);
 
-  return LEGEND_LAYERS['wdpa-preview']({
+  return LEGEND_LAYERS['wdpa-percentage']({
     onChangeVisibility: () => {
       dispatch(
         setLayerSettings({
-          id: 'wdpa-preview',
+          id: 'wdpa-percentage',
           settings: {
-            visibility: !layerSettings['wdpa-preview']?.visibility,
+            visibility: !layerSettings['wdpa-percentage']?.visibility,
           },
         })
       );
@@ -415,7 +415,7 @@ export const useScenarioLegend = () => {
     },
     {
       name: 'Features (Binary)',
-      layers: useFeatureLegend(),
+      layers: useFeaturesLegend(),
     },
   ];
 };
diff --git a/app/layout/scenarios/reports/solutions/frequency/index.tsx b/app/layout/scenarios/reports/solutions/frequency/index.tsx
index 28f7831cf1..39e8c3b983 100644
--- a/app/layout/scenarios/reports/solutions/frequency/index.tsx
+++ b/app/layout/scenarios/reports/solutions/frequency/index.tsx
@@ -18,9 +18,7 @@ export const FrequencyPage = (): JSX.Element => {
   const LEGEND = useMemo(() => {
     return {
       ...LEGEND_LAYERS.frequency({
-        options: {
-          numberOfRuns: scenarioQuery.data?.numberOfRuns,
-        },
+        numberOfRuns: scenarioQuery.data?.numberOfRuns,
       }),
       name: `Frequency (${scenarioQuery.data?.numberOfRuns})`,
       settingsManager: null,