[MRXN23-529] add info to solutions report

app/hooks/scenarios/index.ts

@@ -574,6 +574,7 @@ export function useScenarioPU(
       excluded: ScenarioPlanningUnit['id'][];
       included: ScenarioPlanningUnit['id'][];
       available: ScenarioPlanningUnit['id'][];
+      total: number;
     }
   >
 ) {
@@ -613,11 +614,13 @@ export function useScenarioPU(
         const available = data
           .filter((p) => p.inclusionStatus === 'available' && p.setByUser)
           .map((p) => p.id);
+        const total = data.length;
 
         return {
           included,
           excluded,
           available,
+          total,
         };
       },
       ...queryOptions,

app/layout/scenarios/edit/map/legend/hooks/index.ts

@@ -13,6 +13,7 @@ import { useAllGapAnalysis } from 'hooks/gap-analysis';
 import { LEGEND_LAYERS } from 'hooks/map/constants';
 import { useProject } from 'hooks/projects';
 import { useScenario } from 'hooks/scenarios';
+import { useSolutions } from 'hooks/solutions';
 import { useWDPACategories } from 'hooks/wdpa';
 
 import { CostSurface } from 'types/api/cost-surface';
@@ -417,6 +418,7 @@ export const useFrequencyLegend = () => {
   const { query } = useRouter();
   const { sid } = query as { sid: string };
   const scenarioQuery = useScenario(sid);
+  const solutionsQuery = useSolutions(sid);
 
   const dispatch = useAppDispatch();
   const scenarioSlice = getScenarioEditSlice(sid);
@@ -426,7 +428,7 @@ export const useFrequencyLegend = () => {
   if (!scenarioQuery.data?.ranAtLeastOnce) return null;
 
   return LEGEND_LAYERS['frequency']({
-    numberOfRuns: scenarioQuery.data?.numberOfRuns,
+    numberOfRuns: solutionsQuery.data.length,
     onChangeVisibility: () => {
       dispatch(
         setLayerSettings({

app/layout/scenarios/reports/solutions/frequency/index.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 
 import { LEGEND_LAYERS } from 'hooks/map/constants';
 import { useScenario } from 'hooks/scenarios';
+import { useSolutions } from 'hooks/solutions';
 
 import LegendItem from 'components/map/legend/item';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
@@ -15,12 +16,13 @@ export const FrequencyPage = (): JSX.Element => {
 
   const scenarioQuery = useScenario(sid);
 
+  const solutionsQuery = useSolutions(sid);
+
   const LEGEND = useMemo(() => {
     return {
       ...LEGEND_LAYERS.frequency({
-        numberOfRuns: scenarioQuery.data?.numberOfRuns,
+        numberOfRuns: solutionsQuery.data.length,
       }),
-      name: `Frequency (${scenarioQuery.data?.numberOfRuns})`,
       settingsManager: null,
     };
   }, [scenarioQuery.data?.numberOfRuns]);
@@ -29,7 +31,12 @@ export const FrequencyPage = (): JSX.Element => {
     <div className="flex flex-col">
       <FrequencyReportMap id="report-map-2" />
       <div className="flex flex-col space-y-3 py-8">
-        <LegendItem {...LEGEND} key="frequency" theme="light" className="text-left font-semibold" />
+        <LegendItem
+          {...LEGEND}
+          key="frequency"
+          theme="light"
+          className="pb-0 pl-0 text-left font-semibold"
+        />
         <LegendTypeGradient className={{ box: 'w-1/2 text-sm', bar: 'h-3' }} items={LEGEND.items} />
       </div>
     </div>

app/layout/scenarios/reports/solutions/resume/index.tsx

@@ -2,16 +2,35 @@ import React from 'react';
 
 import { useRouter } from 'next/router';
 
+import { useProjectCostSurfaces } from 'hooks/cost-surface';
 import { useProjectUsers } from 'hooks/project-users';
 import { useProject } from 'hooks/projects';
 import { useScenario, useScenarioPU } from 'hooks/scenarios';
+import { useProjectWDPAs } from 'hooks/wdpa';
 
 export const ResumePage = (): JSX.Element => {
   const { query } = useRouter();
   const { pid, sid } = query as { pid: string; sid: string };
   const projectQuery = useProject(pid);
   const scenarioQuery = useScenario(sid);
 
+  const costSurfaceQuery = useProjectCostSurfaces(
+    pid,
+    {},
+    {
+      select: (data) =>
+        data.filter((cs) => cs.scenarios.filter((s) => s.id === sid).length > 0)?.[0],
+    }
+  );
+
+  const protectedAreaQuery = useProjectWDPAs(
+    pid,
+    { sort: 'name' },
+    {
+      select: (data) => data.map(({ id, name }) => ({ id, name })),
+    }
+  );
+
   const projectUsersQuery = useProjectUsers(pid);
   const PUDataQuery = useScenarioPU(sid);
 
@@ -40,12 +59,12 @@ export const ResumePage = (): JSX.Element => {
 
           <div className={SECTION_CLASSES}>
             <h3 className={TITLE_CLASSES}>Cost surface:</h3>
-            <p className={TEXT_CLASSES}>Lorem Ipsum</p>
+            <p className={TEXT_CLASSES}>{costSurfaceQuery.data?.name}</p>
           </div>
 
           {projectQuery.data?.planningUnitAreakm2 && (
             <div className={SECTION_CLASSES}>
-              <h3 className={TITLE_CLASSES}>Planning Area (KM2):</h3>
+              <h3 className={TITLE_CLASSES}>Planning Unit Grid Area (KM2):</h3>
               <p className={TEXT_CLASSES}>{projectQuery.data?.planningUnitAreakm2}</p>
             </div>
           )}
@@ -56,24 +75,22 @@ export const ResumePage = (): JSX.Element => {
               <p className={TEXT_CLASSES}>{projectQuery.data?.planningUnitGridShape}</p>
             </div>
           )}
-
-          <div className={SECTION_CLASSES}>
-            <h3 className={TITLE_CLASSES}>Planning Unit Grid Area:</h3>
-            <p className={TEXT_CLASSES}>Lorem Ipsum</p>
-          </div>
         </div>
         <div>
           <div className={SECTION_CLASSES}>
             <h3 className={TITLE_CLASSES}>Protected Areas:</h3>
-            <p className={TEXT_CLASSES}>Lorem Ipsum</p>
+            <p className={TEXT_CLASSES}>
+              {protectedAreaQuery.data?.map(({ name }) => name).join(', ')}
+            </p>
           </div>
 
           <div className={SECTION_CLASSES}>
             <h3 className={TITLE_CLASSES}>No. of planning units:</h3>
             <div className="flex flex-col space-y-3">
-              <p className={TEXT_CLASSES}>Total: {PUDataQuery.data?.available.length}</p>
+              <p className={TEXT_CLASSES}>Available PU: {PUDataQuery.data?.available.length}</p>
               <p className={TEXT_CLASSES}>Included PU: {PUDataQuery.data?.included.length}</p>
               <p className={TEXT_CLASSES}>Excluded PU: {PUDataQuery.data?.excluded.length}</p>
+              <p className={TEXT_CLASSES}>Total PU: {PUDataQuery.data?.total}</p>
             </div>
           </div>
         </div>

app/layout/scenarios/reports/solutions/solutions-table/index.tsx

@@ -14,6 +14,7 @@ export const SolutionsTablePage = (): JSX.Element => {
   const { sid } = query as { sid: string };
 
   const solutionsQuery = useSolutions(sid);
+
   const bestSolutionQuery = useBestSolution(sid, {});
 
   return (