From 26bc0ea3a3e97f9c56c10d890c6397a00748f3bd Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 10:53:38 +0200 Subject: [PATCH 01/10] feat: add info to header, category to protected areas and ordered them --- .../reports/solutions/header/component.tsx | 64 +++++++++++++------ .../reports/solutions/page-1/component.tsx | 23 +++++-- app/pages/reports/[pid]/[sid]/solutions.tsx | 6 +- 3 files changed, 66 insertions(+), 27 deletions(-) diff --git a/app/layout/scenarios/reports/solutions/header/component.tsx b/app/layout/scenarios/reports/solutions/header/component.tsx index 1ba09e698b..6ed86aa599 100644 --- a/app/layout/scenarios/reports/solutions/header/component.tsx +++ b/app/layout/scenarios/reports/solutions/header/component.tsx @@ -8,10 +8,15 @@ import { useProjectUsers } from 'hooks/project-users'; import { useProject } from 'hooks/projects'; import { useScenario } from 'hooks/scenarios'; +import LOGO_BLACK from 'svgs/logo-black.svg'; + export interface ScenariosReportHeaderProps { + title: string; } -export const ScenariosReportHeader: React.FC = () => { +export const ScenariosReportHeader: React.FC = ({ + title, +}: ScenariosReportHeaderProps) => { const { query } = useRouter(); const { pid, sid } = query; @@ -37,31 +42,50 @@ export const ScenariosReportHeader: React.FC = () => return ( reportDataIsFetched && ( -
+
+
+
+
+

+ Created by: +

+

{projectOwner?.displayName || projectOwner?.email}

+
+
-
-
-

- Created by: +

+ {title} +

+
+

+ {`Project: ${projectData?.name} `} +

+

+ {`Scenario: ${scenarioData?.name}`}

-

{projectOwner?.displayName || projectOwner?.email}

-
+

+ {`Description: ${projectData?.description}`} +

-

- {`${projectData?.name}-${scenarioData?.name}`} -

- -
-
-

Marxan platform version:

-

V.0.0.1

-
-
-

Date:

-

{format(new Date().getTime(), 'MM/dd/yyyy')}

+
+
+

Marxan platform version:

+

V.0.0.1

+
+
+

Date:

+

{format(new Date().getTime(), 'MM/dd/yyyy')}

+
+
+ Marxan logo +
) ); diff --git a/app/layout/scenarios/reports/solutions/page-1/component.tsx b/app/layout/scenarios/reports/solutions/page-1/component.tsx index 5b926617f7..c9de183f50 100644 --- a/app/layout/scenarios/reports/solutions/page-1/component.tsx +++ b/app/layout/scenarios/reports/solutions/page-1/component.tsx @@ -46,7 +46,23 @@ export const ScenariosReportPage1: React.FC = () => { scenarioId: sid, }); - const protectedAreas = protectedAreasData?.filter((a) => a.selected).map((a) => a.name); + const protectedAreas = useMemo(() => { + return protectedAreasData?.sort((a, b) => { + if (a.kind === 'project') return 1; + if (a.name === 'Not Reported') return 1; + if (b.name !== 'Not Reported') return -1; + return a - b; + }).map((pa) => { + if (pa.kind === 'global' && pa.name !== 'Not Reported') { + return { + ...pa, + name: `Category ${pa.name}`, + }; + } return { + ...pa, + }; + }).filter((a) => a.selected).map((a) => a.name); + }, [protectedAreasData]); const { data: PUData, @@ -74,7 +90,6 @@ export const ScenariosReportPage1: React.FC = () => {

Contributors

{contributors.join(', ')}

-

Protected Areas:

{protectedAreas.join(', ')}

@@ -82,8 +97,8 @@ export const ScenariosReportPage1: React.FC = () => {

No. of planning units

-

{`In: ${PUData.included.length || 0}`}

-

{`Out: ${PUData.excluded.length || 0}`}

+

{`In the solution: ${PUData.included.length || 0}`}

+

{`Not included in the solution: ${PUData.excluded.length || 0}`}

diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx index 700c172861..0293d3358c 100644 --- a/app/pages/reports/[pid]/[sid]/solutions.tsx +++ b/app/pages/reports/[pid]/[sid]/solutions.tsx @@ -33,7 +33,7 @@ const SolutionsReport: React.FC = () => { style={styles.page} className="flex flex-col h-full text-black bg-white" > - + @@ -41,7 +41,7 @@ const SolutionsReport: React.FC = () => { style={styles.page} className="flex flex-col h-full text-black bg-white" > - + @@ -49,7 +49,7 @@ const SolutionsReport: React.FC = () => { style={styles.page} className="flex flex-col h-full text-black bg-white" > - + From c9cd46153ab4e9fac3f7751fc4065f870b7d57b4 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 11:15:50 +0200 Subject: [PATCH 02/10] style: report header --- .../reports/solutions/header/component.tsx | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/app/layout/scenarios/reports/solutions/header/component.tsx b/app/layout/scenarios/reports/solutions/header/component.tsx index 6ed86aa599..a5e03b39bc 100644 --- a/app/layout/scenarios/reports/solutions/header/component.tsx +++ b/app/layout/scenarios/reports/solutions/header/component.tsx @@ -56,17 +56,28 @@ export const ScenariosReportHeader: React.FC = ({

{title}

-
-

- {`Project: ${projectData?.name} `} -

-

- {`Scenario: ${scenarioData?.name}`} -

+
+
+

Project:

+

+ {projectData?.name} +

+
+ +
+

Scenario:

+

+ {scenarioData?.name} +

+
+ +
+

Description:

+

+ {projectData?.description} +

+
-

- {`Description: ${projectData?.description}`} -

From e77fb67e09c41d8948a26de7b286b4820b8753ed Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 11:30:10 +0200 Subject: [PATCH 03/10] fix: logo size and position --- app/layout/scenarios/reports/solutions/header/component.tsx | 4 ++-- app/layout/scenarios/reports/solutions/page-2/component.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/layout/scenarios/reports/solutions/header/component.tsx b/app/layout/scenarios/reports/solutions/header/component.tsx index a5e03b39bc..fb1f56c0e0 100644 --- a/app/layout/scenarios/reports/solutions/header/component.tsx +++ b/app/layout/scenarios/reports/solutions/header/component.tsx @@ -42,7 +42,7 @@ export const ScenariosReportHeader: React.FC = ({ return ( reportDataIsFetched && ( -
+
@@ -92,7 +92,7 @@ export const ScenariosReportHeader: React.FC = ({
Marxan logo diff --git a/app/layout/scenarios/reports/solutions/page-2/component.tsx b/app/layout/scenarios/reports/solutions/page-2/component.tsx index acfc42e764..5d519ef1b5 100644 --- a/app/layout/scenarios/reports/solutions/page-2/component.tsx +++ b/app/layout/scenarios/reports/solutions/page-2/component.tsx @@ -60,7 +60,7 @@ export const ScenariosReportPage2: React.FC = () => {

{SOLUTION_DATA?.costValue}

-

Missing

+

Missing features

{SOLUTION_DATA?.missingValues}

From 658d14555c34475820ed0ec0e1c896879e972db8 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 17:34:40 +0200 Subject: [PATCH 04/10] solutions report: rename pages --- .../{page-2 => selected-solution-page}/component.tsx | 8 ++++---- .../{page-1 => selected-solution-page}/index.ts | 0 .../map/component.tsx | 0 .../{page-1 => selected-solution-page}/map/index.ts | 0 .../{page-3 => settings-page}/component.tsx | 6 +++--- .../solutions/{page-3 => settings-page}/constants.ts | 0 .../solutions/{page-2 => settings-page}/index.ts | 0 .../component.tsx | 8 ++++---- .../{page-2/map => solution-frequency-page}/index.ts | 0 .../map/component.tsx | 0 .../{page-3 => solution-frequency-page/map}/index.ts | 0 app/pages/reports/[pid]/[sid]/solutions.tsx | 12 ++++++------ 12 files changed, 17 insertions(+), 17 deletions(-) rename app/layout/scenarios/reports/solutions/{page-2 => selected-solution-page}/component.tsx (92%) rename app/layout/scenarios/reports/solutions/{page-1 => selected-solution-page}/index.ts (100%) rename app/layout/scenarios/reports/solutions/{page-2 => selected-solution-page}/map/component.tsx (100%) rename app/layout/scenarios/reports/solutions/{page-1 => selected-solution-page}/map/index.ts (100%) rename app/layout/scenarios/reports/solutions/{page-3 => settings-page}/component.tsx (96%) rename app/layout/scenarios/reports/solutions/{page-3 => settings-page}/constants.ts (100%) rename app/layout/scenarios/reports/solutions/{page-2 => settings-page}/index.ts (100%) rename app/layout/scenarios/reports/solutions/{page-1 => solution-frequency-page}/component.tsx (95%) rename app/layout/scenarios/reports/solutions/{page-2/map => solution-frequency-page}/index.ts (100%) rename app/layout/scenarios/reports/solutions/{page-1 => solution-frequency-page}/map/component.tsx (100%) rename app/layout/scenarios/reports/solutions/{page-3 => solution-frequency-page/map}/index.ts (100%) diff --git a/app/layout/scenarios/reports/solutions/page-2/component.tsx b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx similarity index 92% rename from app/layout/scenarios/reports/solutions/page-2/component.tsx rename to app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx index 5d519ef1b5..e04445fe0f 100644 --- a/app/layout/scenarios/reports/solutions/page-2/component.tsx +++ b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx @@ -6,15 +6,15 @@ import { LEGEND_LAYERS } from 'hooks/map/constants'; import { useScenario } from 'hooks/scenarios'; import { useBestSolution, useSolution } from 'hooks/solutions'; -import ScenarioReportsMap from 'layout/scenarios/reports/solutions/page-2/map'; +import ScenarioReportsMap from 'layout/scenarios/reports/solutions/selected-solution-page/map'; import LegendItem from 'components/map/legend/item/component'; -export interface ScenariosReportPage2Props { +export interface SelectedSolutionPageProps { } -export const ScenariosReportPage2: React.FC = () => { +export const SelectedSolutionPage: React.FC = () => { const { query } = useRouter(); const { sid, solutionId } = query; @@ -84,4 +84,4 @@ export const ScenariosReportPage2: React.FC = () => { ); }; -export default ScenariosReportPage2; +export default SelectedSolutionPage; diff --git a/app/layout/scenarios/reports/solutions/page-1/index.ts b/app/layout/scenarios/reports/solutions/selected-solution-page/index.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-1/index.ts rename to app/layout/scenarios/reports/solutions/selected-solution-page/index.ts diff --git a/app/layout/scenarios/reports/solutions/page-2/map/component.tsx b/app/layout/scenarios/reports/solutions/selected-solution-page/map/component.tsx similarity index 100% rename from app/layout/scenarios/reports/solutions/page-2/map/component.tsx rename to app/layout/scenarios/reports/solutions/selected-solution-page/map/component.tsx diff --git a/app/layout/scenarios/reports/solutions/page-1/map/index.ts b/app/layout/scenarios/reports/solutions/selected-solution-page/map/index.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-1/map/index.ts rename to app/layout/scenarios/reports/solutions/selected-solution-page/map/index.ts diff --git a/app/layout/scenarios/reports/solutions/page-3/component.tsx b/app/layout/scenarios/reports/solutions/settings-page/component.tsx similarity index 96% rename from app/layout/scenarios/reports/solutions/page-3/component.tsx rename to app/layout/scenarios/reports/solutions/settings-page/component.tsx index bdc5b16892..c417043cc4 100644 --- a/app/layout/scenarios/reports/solutions/page-3/component.tsx +++ b/app/layout/scenarios/reports/solutions/settings-page/component.tsx @@ -9,11 +9,11 @@ import { useWDPACategories } from 'hooks/wdpa'; import { SCENARIO_PARAMETERS, Types } from './constants'; -export interface ScenariosReportPage3Props { +export interface SettingsPageProps { } -export const ScenariosReportPage3: React.FC = () => { +export const SettingsPage: React.FC = () => { const { query } = useRouter(); const { pid, sid } = query; @@ -164,4 +164,4 @@ export const ScenariosReportPage3: React.FC = () => { ); }; -export default ScenariosReportPage3; +export default SettingsPage; diff --git a/app/layout/scenarios/reports/solutions/page-3/constants.ts b/app/layout/scenarios/reports/solutions/settings-page/constants.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-3/constants.ts rename to app/layout/scenarios/reports/solutions/settings-page/constants.ts diff --git a/app/layout/scenarios/reports/solutions/page-2/index.ts b/app/layout/scenarios/reports/solutions/settings-page/index.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-2/index.ts rename to app/layout/scenarios/reports/solutions/settings-page/index.ts diff --git a/app/layout/scenarios/reports/solutions/page-1/component.tsx b/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx similarity index 95% rename from app/layout/scenarios/reports/solutions/page-1/component.tsx rename to app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx index c9de183f50..6c15f91aa5 100644 --- a/app/layout/scenarios/reports/solutions/page-1/component.tsx +++ b/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx @@ -8,16 +8,16 @@ import { useProject } from 'hooks/projects'; import { useScenarioPU } from 'hooks/scenarios'; import { useWDPACategories } from 'hooks/wdpa'; -import ScenarioReportsMap from 'layout/scenarios/reports/solutions/page-1/map'; +import ScenarioReportsMap from 'layout/scenarios/reports/solutions/solution-frequency-page/map'; import LegendItem from 'components/map/legend/item/component'; import LegendTypeGradient from 'components/map/legend/types/gradient'; -export interface ScenariosReportPage1Props { +export interface SolutionFrequencyPageProps { } -export const ScenariosReportPage1: React.FC = () => { +export const SolutionFrequencyPage: React.FC = () => { const { query } = useRouter(); const { pid, sid } = query; @@ -136,4 +136,4 @@ export const ScenariosReportPage1: React.FC = () => { ); }; -export default ScenariosReportPage1; +export default SolutionFrequencyPage; diff --git a/app/layout/scenarios/reports/solutions/page-2/map/index.ts b/app/layout/scenarios/reports/solutions/solution-frequency-page/index.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-2/map/index.ts rename to app/layout/scenarios/reports/solutions/solution-frequency-page/index.ts diff --git a/app/layout/scenarios/reports/solutions/page-1/map/component.tsx b/app/layout/scenarios/reports/solutions/solution-frequency-page/map/component.tsx similarity index 100% rename from app/layout/scenarios/reports/solutions/page-1/map/component.tsx rename to app/layout/scenarios/reports/solutions/solution-frequency-page/map/component.tsx diff --git a/app/layout/scenarios/reports/solutions/page-3/index.ts b/app/layout/scenarios/reports/solutions/solution-frequency-page/map/index.ts similarity index 100% rename from app/layout/scenarios/reports/solutions/page-3/index.ts rename to app/layout/scenarios/reports/solutions/solution-frequency-page/map/index.ts diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx index 0293d3358c..faba2b46b5 100644 --- a/app/pages/reports/[pid]/[sid]/solutions.tsx +++ b/app/pages/reports/[pid]/[sid]/solutions.tsx @@ -5,9 +5,9 @@ import { withProtection, withUser } from 'hoc/auth'; import Head from 'layout/head'; import MetaIcons from 'layout/meta-icons'; import ReportHeader from 'layout/scenarios/reports/solutions/header'; -import Page1 from 'layout/scenarios/reports/solutions/page-1'; -import Page2 from 'layout/scenarios/reports/solutions/page-2'; -import Page3 from 'layout/scenarios/reports/solutions/page-3'; +import SelectedSolutionPage from 'layout/scenarios/reports/solutions/selected-solution-page'; +import SettingsPage from 'layout/scenarios/reports/solutions/settings-page'; +import SolutionFrequencyPage from 'layout/scenarios/reports/solutions/solution-frequency-page'; import WebShotStatus from 'layout/scenarios/reports/solutions/webshot-status'; export const getServerSideProps = withProtection(withUser()); @@ -34,7 +34,7 @@ const SolutionsReport: React.FC = () => { className="flex flex-col h-full text-black bg-white" > - +
{ className="flex flex-col h-full text-black bg-white" > - +
{ className="flex flex-col h-full text-black bg-white" > - +
From 2842f7978792999246dccd0dce4a4a52e761fc80 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 17:41:23 +0200 Subject: [PATCH 05/10] solutions report: add solution number to title --- app/pages/reports/[pid]/[sid]/solutions.tsx | 26 ++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx index faba2b46b5..116b1b34d3 100644 --- a/app/pages/reports/[pid]/[sid]/solutions.tsx +++ b/app/pages/reports/[pid]/[sid]/solutions.tsx @@ -1,7 +1,12 @@ import React from 'react'; +import { useRouter } from 'next/router'; + import { withProtection, withUser } from 'hoc/auth'; +import { useScenario } from 'hooks/scenarios'; +import { useBestSolution, useSolution } from 'hooks/solutions'; + import Head from 'layout/head'; import MetaIcons from 'layout/meta-icons'; import ReportHeader from 'layout/scenarios/reports/solutions/header'; @@ -23,6 +28,25 @@ const styles = { }; const SolutionsReport: React.FC = () => { + const { query } = useRouter(); + const { sid, solutionId } = query; + + const { + data: scenarioData, + } = useScenario(sid); + + const { + data: selectedSolutionData, + } = useSolution(sid, solutionId); + + const { + data: bestSolutionData, + } = useBestSolution(sid, { + enabled: scenarioData?.ranAtLeastOnce, + }); + + const { runId: solutionNumber } = selectedSolutionData || bestSolutionData; + return ( <> @@ -41,7 +65,7 @@ const SolutionsReport: React.FC = () => { style={styles.page} className="flex flex-col h-full text-black bg-white" > - +
From b3287a0b208223b86ba812f99577d6e90742201c Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 18:11:35 +0200 Subject: [PATCH 06/10] solution report: fix header --- .../reports/solutions/header/component.tsx | 37 +++------- .../solutions/intro-page/component.tsx | 74 +++++++++++++++++++ .../reports/solutions/intro-page/index.ts | 1 + .../selected-solution-page/component.tsx | 2 +- .../solution-frequency-page/component.tsx | 2 +- app/pages/reports/[pid]/[sid]/solutions.tsx | 7 ++ 6 files changed, 93 insertions(+), 30 deletions(-) create mode 100644 app/layout/scenarios/reports/solutions/intro-page/component.tsx create mode 100644 app/layout/scenarios/reports/solutions/intro-page/index.ts diff --git a/app/layout/scenarios/reports/solutions/header/component.tsx b/app/layout/scenarios/reports/solutions/header/component.tsx index fb1f56c0e0..65c6536e22 100644 --- a/app/layout/scenarios/reports/solutions/header/component.tsx +++ b/app/layout/scenarios/reports/solutions/header/component.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { useRouter } from 'next/router'; -import { format } from 'date-fns'; - import { useProjectUsers } from 'hooks/project-users'; import { useProject } from 'hooks/projects'; import { useScenario } from 'hooks/scenarios'; @@ -42,8 +40,8 @@ export const ScenariosReportHeader: React.FC = ({ return ( reportDataIsFetched && ( -
-
+
+

@@ -70,33 +68,16 @@ export const ScenariosReportHeader: React.FC = ({ {scenarioData?.name}

- -
-

Description:

-

- {projectData?.description} -

-
-
-
-

Marxan platform version:

-

V.0.0.1

-
-
-

Date:

-

{format(new Date().getTime(), 'MM/dd/yyyy')}

-
-
-
-
- Marxan logo
+ + Marxan logo +
) ); diff --git a/app/layout/scenarios/reports/solutions/intro-page/component.tsx b/app/layout/scenarios/reports/solutions/intro-page/component.tsx new file mode 100644 index 0000000000..a143ae77ce --- /dev/null +++ b/app/layout/scenarios/reports/solutions/intro-page/component.tsx @@ -0,0 +1,74 @@ +import React from 'react'; + +import { useRouter } from 'next/router'; + +import { format } from 'date-fns'; + +import { useProject } from 'hooks/projects'; +import { useScenario } from 'hooks/scenarios'; + +export interface IntroPageProps { + +} + +export const IntroPage: React.FC = () => { + const { query } = useRouter(); + const { pid, sid } = query; + + const { + data: projectData, + isFetched: projectDataIsFetched, + } = useProject(pid); + + const { + data: scenarioData, + isFetched: scenarioDataIsFetched, + } = useScenario(sid); + + const reportDataIsFetched = projectDataIsFetched + && scenarioDataIsFetched; + + return ( + reportDataIsFetched && ( +
+ +
+
+
+

Project:

+

+ {projectData?.name} +

+
+ +
+

Scenario:

+

+ {scenarioData?.name} +

+
+
+
+

Description:

+

+ {projectData?.description} +

+
+
+
+

Marxan platform version:

+

V.0.0.1

+
+
+

Date:

+

{format(new Date().getTime(), 'MM/dd/yyyy')}

+
+
+ +
+
+ ) + ); +}; + +export default IntroPage; diff --git a/app/layout/scenarios/reports/solutions/intro-page/index.ts b/app/layout/scenarios/reports/solutions/intro-page/index.ts new file mode 100644 index 0000000000..b404d7fd44 --- /dev/null +++ b/app/layout/scenarios/reports/solutions/intro-page/index.ts @@ -0,0 +1 @@ +export { default } from './component'; diff --git a/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx index e04445fe0f..9c7af56c9e 100644 --- a/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx @@ -43,7 +43,7 @@ export const SelectedSolutionPage: React.FC = () => { }, [SOLUTION_DATA]); return ( -
+
diff --git a/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx b/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx index 6c15f91aa5..4627d59133 100644 --- a/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/solution-frequency-page/component.tsx @@ -82,7 +82,7 @@ export const SolutionFrequencyPage: React.FC = () => return ( reportDataIsFetched && ( -
+
diff --git a/app/pages/reports/[pid]/[sid]/solutions.tsx b/app/pages/reports/[pid]/[sid]/solutions.tsx index 116b1b34d3..3512e76337 100644 --- a/app/pages/reports/[pid]/[sid]/solutions.tsx +++ b/app/pages/reports/[pid]/[sid]/solutions.tsx @@ -10,6 +10,7 @@ import { useBestSolution, useSolution } from 'hooks/solutions'; import Head from 'layout/head'; import MetaIcons from 'layout/meta-icons'; import ReportHeader from 'layout/scenarios/reports/solutions/header'; +import IntroPage from 'layout/scenarios/reports/solutions/intro-page'; import SelectedSolutionPage from 'layout/scenarios/reports/solutions/selected-solution-page'; import SettingsPage from 'layout/scenarios/reports/solutions/settings-page'; import SolutionFrequencyPage from 'layout/scenarios/reports/solutions/solution-frequency-page'; @@ -52,6 +53,12 @@ const SolutionsReport: React.FC = () => { +
+ +
Date: Wed, 11 May 2022 18:23:06 +0200 Subject: [PATCH 07/10] solution report: add intro page with metadata --- .../solutions/intro-page/component.tsx | 44 ++++++++++++++----- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/app/layout/scenarios/reports/solutions/intro-page/component.tsx b/app/layout/scenarios/reports/solutions/intro-page/component.tsx index a143ae77ce..72d1a68dab 100644 --- a/app/layout/scenarios/reports/solutions/intro-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/intro-page/component.tsx @@ -31,9 +31,11 @@ export const IntroPage: React.FC = () => { return ( reportDataIsFetched && (
-
-
+

+ Solution Report +

+

Project:

@@ -47,14 +49,35 @@ export const IntroPage: React.FC = () => { {scenarioData?.name}

-
-
-

Description:

-

- {projectData?.description} -

-
-
+ +
+

Description:

+

+ {projectData?.description} +

+
+ +
+

Planning Area:

+

+ {projectData?.planningAreaName} +

+
+ +
+

Planning Unit Area:

+

+ {`${projectData?.planningUnitAreakm2} + km2`} +

+
+
+

Planning Unit Grid Shape:

+

+ {projectData?.planningUnitGridShape} +

+
+

Marxan platform version:

V.0.0.1

@@ -64,7 +87,6 @@ export const IntroPage: React.FC = () => {

{format(new Date().getTime(), 'MM/dd/yyyy')}

-
) From 38b812f95ec7b8d231e72167067e42ff4bde3975 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 18:50:23 +0200 Subject: [PATCH 08/10] solution report: styles --- .../solutions/intro-page/component.tsx | 53 ++++++++++++++----- 1 file changed, 41 insertions(+), 12 deletions(-) diff --git a/app/layout/scenarios/reports/solutions/intro-page/component.tsx b/app/layout/scenarios/reports/solutions/intro-page/component.tsx index 72d1a68dab..997e5ef08b 100644 --- a/app/layout/scenarios/reports/solutions/intro-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/intro-page/component.tsx @@ -4,9 +4,12 @@ import { useRouter } from 'next/router'; import { format } from 'date-fns'; +import { useProjectUsers } from 'hooks/project-users'; import { useProject } from 'hooks/projects'; import { useScenario } from 'hooks/scenarios'; +import LOGO_BLACK from 'svgs/logo-black.svg'; + export interface IntroPageProps { } @@ -25,21 +28,47 @@ export const IntroPage: React.FC = () => { isFetched: scenarioDataIsFetched, } = useScenario(sid); + const { + data: projectUsers, + isFetched: projectUsersAreFetched, + } = useProjectUsers(pid); + + const projectOwner = projectUsers?.find((u) => u.roleName === 'project_owner')?.user || {}; + const reportDataIsFetched = projectDataIsFetched - && scenarioDataIsFetched; + && scenarioDataIsFetched && projectUsersAreFetched; + + const { + description, name, planningAreaName, planningUnitGridShape, planningUnitAreakm2, + } = projectData || {}; return ( reportDataIsFetched && ( -
+
+
+
+
+

+ Created by: +

+

{projectOwner?.displayName || projectOwner?.email}

+
+

+ Solution Report +

+
+ Marxan logo +
-

- Solution Report -

-
+

Project:

- {projectData?.name} + {name}

@@ -53,28 +82,28 @@ export const IntroPage: React.FC = () => {

Description:

- {projectData?.description} + {description}

Planning Area:

- {projectData?.planningAreaName} + {planningAreaName || 'Custom'}

Planning Unit Area:

- {`${projectData?.planningUnitAreakm2} - km2`} + {planningUnitAreakm2 ? `${planningUnitAreakm2} + km2` : 'Custom'}

Planning Unit Grid Shape:

- {projectData?.planningUnitGridShape} + {planningUnitGridShape === 'hexagon' ? 'Hexagon' : 'Custom'}

From 418fc7fd14679fd800828ea38e1aa282c44eb666 Mon Sep 17 00:00:00 2001 From: anamontiaga Date: Wed, 11 May 2022 18:52:05 +0200 Subject: [PATCH 09/10] remove features naming complement from missing --- .../reports/solutions/selected-solution-page/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx index 9c7af56c9e..ea805a08dc 100644 --- a/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx @@ -60,7 +60,7 @@ export const SelectedSolutionPage: React.FC = () => {

{SOLUTION_DATA?.costValue}

-

Missing features

+

Missing

{SOLUTION_DATA?.missingValues}

From 1cf2f2f4478c12d20f1519fbe7f9839093fd3746 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20Barrenechea=20S=C3=A1nchez?= Date: Thu, 12 May 2022 13:26:04 +0200 Subject: [PATCH 10/10] Update app/layout/scenarios/reports/solutions/intro-page/component.tsx --- app/layout/scenarios/reports/solutions/intro-page/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/layout/scenarios/reports/solutions/intro-page/component.tsx b/app/layout/scenarios/reports/solutions/intro-page/component.tsx index 997e5ef08b..0fec25a2d2 100644 --- a/app/layout/scenarios/reports/solutions/intro-page/component.tsx +++ b/app/layout/scenarios/reports/solutions/intro-page/component.tsx @@ -103,7 +103,7 @@ export const IntroPage: React.FC = () => {

Planning Unit Grid Shape:

- {planningUnitGridShape === 'hexagon' ? 'Hexagon' : 'Custom'} + {(planningUnitGridShape === 'hexagon' || planningUnitGridShape === 'square') ? planningUnitGridShape : 'Custom'}