Merge pull request #1291 from Vizzuality/feat/front/MARXAN-1821-add-n…

…umberOfRuns-to-solutions-legend feat: add number of runs to solutions frequency legend [MARXAN-1821]
Vizzuality · Dec 14, 2022 · 8bb1083 · 8bb1083
2 parents 60e90e1 + 7e1cca6
commit 8bb1083
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 28 deletions.
diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
@@ -226,33 +226,37 @@ export const LEGEND_LAYERS = {
   },
 
   // SOLUTIONS
-  frequency: () => ({
-    id: 'frequency',
-    name: 'Frequency',
-    type: 'gradient',
-    settingsManager: {
-      opacity: true,
-      visibility: true,
-    },
-    items: [
-      {
-        color: COLORS.frequency[0],
-        value: '0',
-      },
-      {
-        color: COLORS.frequency[1],
-        value: null,
-      },
-      {
-        color: COLORS.frequency[2],
-        value: null,
-      },
-      {
-        color: COLORS.frequency[3],
-        value: '100',
+  frequency: (options) => {
+    const { numberOfRuns } = options;
+
+    return ({
+      id: 'frequency',
+      name: numberOfRuns ? `Frequency (${numberOfRuns} runs)` : 'Frequency',
+      type: 'gradient',
+      settingsManager: {
+        opacity: true,
+        visibility: true,
       },
-    ],
-  }),
+      items: [
+        {
+          color: COLORS.frequency[0],
+          value: '0',
+        },
+        {
+          color: COLORS.frequency[1],
+          value: null,
+        },
+        {
+          color: COLORS.frequency[2],
+          value: null,
+        },
+        {
+          color: COLORS.frequency[3],
+          value: '100',
+        },
+      ],
+    });
+  },
   solution: () => ({
     id: 'solution',
     name: 'Solution selected',

diff --git a/app/hooks/map/types.ts b/app/hooks/map/types.ts
@@ -190,6 +190,7 @@ export interface UseLegend {
     puIncludedValue?: string[];
     puExcludedValue?: string[];
     runId?: string;
+    numberOfRuns?: number;
     layerSettings?: Record<string, Record<string, unknown>>;
   };
 }

diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
@@ -385,6 +385,7 @@ export const ScenariosEditMap: React.FC<ScenariosEditMapProps> = () => {
       puIncludedValue: puTmpIncludedValue,
       puExcludedValue: puTmpExcludedValue,
       runId: selectedSolution?.runId || bestSolution?.runId,
+      numberOfRuns: scenarioData?.numberOfRuns || 0,
       layerSettings,
     },
   });

diff --git a/app/layout/scenarios/reports/solutions/selection-frequency-page/component.tsx b/app/layout/scenarios/reports/solutions/selection-frequency-page/component.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { LEGEND_LAYERS } from 'hooks/map/constants';
 import { useProjectUsers } from 'hooks/project-users';
 import { useProject } from 'hooks/projects';
+import { useScenario } from 'hooks/scenarios';
 import { useWDPACategories } from 'hooks/wdpa';
 
 import ScenarioReportsMap from 'layout/scenarios/reports/solutions/selection-frequency-page/map';
@@ -45,6 +46,10 @@ export const SelectionFrequencyPage: React.FC<SelectionFrequencyPageProps> = ()
     scenarioId: sid,
   });
 
+  const {
+    data: scenarioData,
+  } = useScenario(sid);
+
   const protectedAreas = useMemo(() => {
     return protectedAreasData?.sort((a, b) => {
       if (a.kind === 'project') return 1;
@@ -67,9 +72,13 @@ export const SelectionFrequencyPage: React.FC<SelectionFrequencyPageProps> = ()
     return {
       id: 'frequency',
       name: 'Selection frequency',
-      items: LEGEND_LAYERS.frequency().items,
+      items: LEGEND_LAYERS.frequency({
+        options: {
+          numberOfRuns: scenarioData?.numberOfRuns || 0,
+        },
+      }).items,
     };
-  }, []);
+  }, [scenarioData?.numberOfRuns]);
 
   const reportDataIsFetched = projectDataIsFetched && projectUsersDataIsFetched
     && protectedAreasDataIsFetched;