Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(front): solutions report feedback fixes [MARXAN-1516] #1102

Merged
merged 3 commits into from
May 25, 2022
Merged

fix(front): solutions report feedback fixes [MARXAN-1516] #1102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c986e23
solutions report: feedback fixes
anamontiaga May 23, 2022
a81f1f2
solutions report: fix naming
anamontiaga May 23, 2022
8514855
solution report: add footnote
anamontiaga May 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 42 additions & 32 deletions app/layout/scenarios/reports/solutions/selected-solution-page/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
import { useRouter } from 'next/router';

import { LEGEND_LAYERS } from 'hooks/map/constants';
import { useScenario } from 'hooks/scenarios';
import { useScenario, useScenarioPU } from 'hooks/scenarios';
import { useBestSolution, useSolution } from 'hooks/solutions';

import ScenarioReportsMap from 'layout/scenarios/reports/solutions/selected-solution-page/map';
Expand Down Expand Up @@ -34,6 +34,11 @@ export const SelectedSolutionPage: React.FC<SelectedSolutionPageProps> = () => {

const SOLUTION_DATA = selectedSolutionData || bestSolutionData;

const {
data: PUData,
isFetched: PUDataIsFetched,
} = useScenarioPU(sid);

const LEGEND = useMemo(() => {
return {
...LEGEND_LAYERS.solution(),
Expand All @@ -42,42 +47,47 @@ export const SelectedSolutionPage: React.FC<SelectedSolutionPageProps> = () => {
};
}, [SOLUTION_DATA]);

const reportDataIsFetched = !!SOLUTION_DATA && PUDataIsFetched;

return (
<div className="flex space-x-8">
<section className="flex flex-col justify-between w-1/3 text-xs">
<div className="space-y-8">
<div>
<p className="font-semibold">Solution</p>
<p>{SOLUTION_DATA?.runId}</p>
{reportDataIsFetched && (
<section className="flex flex-col justify-between w-1/3 text-xs">
<div className="space-y-8">
<div>
<p className="font-semibold">Solution</p>
<p>{SOLUTION_DATA?.runId}</p>
</div>

<div>
<p className="font-semibold">Score</p>
<p>{SOLUTION_DATA?.scoreValue}</p>
</div>
<div>
<p className="font-semibold">Cost</p>
<p>{SOLUTION_DATA?.costValue}</p>
</div>
<div>
<p className="font-semibold">Missing</p>
<p>{SOLUTION_DATA?.missingValues}</p>
</div>
<div>
<p className="font-semibold">Planning units</p>
<p>{`In the solution: ${PUData.included.length || 0}`}</p>
<p>{`Not included in the solution: ${PUData.excluded.length || 0}`}</p>
</div>
</div>

<div>
<p className="font-semibold">Score</p>
<p>{SOLUTION_DATA?.scoreValue}</p>
</div>
<div>
<p className="font-semibold">Cost</p>
<p>{SOLUTION_DATA?.costValue}</p>
</div>
<div>
<p className="font-semibold">Missing</p>
<p>{SOLUTION_DATA?.missingValues}</p>
</div>
<div>
<p className="font-semibold">Planning</p>
<p>{SOLUTION_DATA?.planningUnits}</p>
<div className="py-5 border-t border-gray-500 mr-14">
<LegendItem
{...LEGEND}
key="solution"
className="block"
theme="light"
/>
</div>
</div>

<div className="py-5 border-t border-gray-500 mr-14">
<LegendItem
{...LEGEND}
key="solution"
className="block"
theme="light"
/>
</div>
</section>
</section>
)}

<ScenarioReportsMap id="report-map-2" />
</div>
Expand Down
68 changes: 38 additions & 30 deletions ...ons/solution-frequency-page/component.tsx → ...ns/selection-frequency-page/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ import { useRouter } from 'next/router';
import { LEGEND_LAYERS } from 'hooks/map/constants';
import { useProjectUsers } from 'hooks/project-users';
import { useProject } from 'hooks/projects';
import { useScenarioPU } from 'hooks/scenarios';
import { useWDPACategories } from 'hooks/wdpa';

import ScenarioReportsMap from 'layout/scenarios/reports/solutions/solution-frequency-page/map';
import ScenarioReportsMap from 'layout/scenarios/reports/solutions/selection-frequency-page/map';

import LegendItem from 'components/map/legend/item/component';
import LegendTypeGradient from 'components/map/legend/types/gradient';

export interface SolutionFrequencyPageProps {
export interface SelectionFrequencyPageProps {

}

export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () => {
export const SelectionFrequencyPage: React.FC<SelectionFrequencyPageProps> = () => {
const { query } = useRouter();
const { pid, sid } = query;

Expand Down Expand Up @@ -64,21 +63,16 @@ export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () =>
}).filter((a) => a.selected).map((a) => a.name);
}, [protectedAreasData]);

const {
data: PUData,
isFetched: PUDataIsFetched,
} = useScenarioPU(sid);

const LEGEND = useMemo(() => {
return {
id: 'frequency',
name: 'Solution frequency',
name: 'Selection frequency',
items: LEGEND_LAYERS.frequency().items,
};
}, []);

const reportDataIsFetched = projectDataIsFetched && projectUsersDataIsFetched
&& protectedAreasDataIsFetched && PUDataIsFetched;
&& protectedAreasDataIsFetched;

return (
reportDataIsFetched && (
Expand All @@ -91,15 +85,9 @@ export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () =>
<p>{contributors.join(', ')}</p>
</div>
<div>
<p className="font-semibold">Protected Areas:</p>
<p className="font-semibold">Protected Areas [1]:</p>
<p>{protectedAreas.join(', ')}</p>
</div>

<div>
<p className="font-semibold">No. of planning units</p>
<p>{`In the solution: ${PUData.included.length || 0}`}</p>
<p>{`Not included in the solution: ${PUData.excluded.length || 0}`}</p>
</div>
</div>

{/* <div>
Expand All @@ -114,17 +102,37 @@ export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () =>
<p className="font-semibold">BLM</p>
<p>{scenarioData.metadata.marxanInputParameterFile.BLM || null}</p>
</div> */}
<div className="py-5 border-t border-gray-500 mr-14">
<LegendItem
{...LEGEND}
key="frequency"
className="block"
theme="light"
>
<LegendTypeGradient
items={LEGEND.items}
/>
</LegendItem>
<div>
<div className="py-5 border-t border-gray-500 mr-14">
<LegendItem
{...LEGEND}
key="frequency"
className="block"
theme="light"
>
<LegendTypeGradient
items={LEGEND.items}
/>
</LegendItem>
</div>
<div className="mt-5">
<p className="text-xxs">
[1] The IUCN Protected Area Categories is a global standard that classifies sites
according to their conservation objectives. It is not a compulsory non-hierarchical
standard nor is applied by IUCN globally. It is for government agencies or other
institutions to use, which means that in some countries there might not be any
categories assigned yet. For more information about this standard, see:
<a
className="underline"
href="https://www.iucn.org/theme/protected-areas/about/protected-area-categories"
target="_blank"
rel="noopener noreferrer"
>
{' '}
https://www.iucn.org/theme/protected-areas/about/protected-area-categories
</a>
</p>
</div>
</div>

</section>
Expand All @@ -136,4 +144,4 @@ export const SolutionFrequencyPage: React.FC<SolutionFrequencyPageProps> = () =>
);
};

export default SolutionFrequencyPage;
export default SelectionFrequencyPage;
0 ...olutions/solution-frequency-page/index.ts → ...lutions/selection-frequency-page/index.ts
View file
Open in desktop
File renamed without changes.
0 ...solution-frequency-page/map/component.tsx → ...election-frequency-page/map/component.tsx
View file
Open in desktop
File renamed without changes.
0 ...ions/solution-frequency-page/map/index.ts → ...ons/selection-frequency-page/map/index.ts
View file
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions app/pages/reports/[pid]/[sid]/solutions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ 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 SelectionFrequencyPage from 'layout/scenarios/reports/solutions/selection-frequency-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());
Expand Down Expand Up @@ -64,8 +64,8 @@ const SolutionsReport: React.FC = () => {
style={styles.page}
className="flex flex-col h-full text-black bg-white"
>
<ReportHeader title="Solution Frequency" />
<SolutionFrequencyPage />
<ReportHeader title="Selection Frequency" />
<SelectionFrequencyPage />
</div>

<div
Expand Down