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

[MRXN23-600] adds scroll to PU form in small viewports #1663

Merged
merged 1 commit into from
Mar 14, 2024
Merged

[MRXN23-600] adds scroll to PU form in small viewports #1663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 26 additions & 21 deletions app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useSaveScenarioPU } from 'hooks/scenarios';
import { useToasts } from 'hooks/toast';

import Select from 'components/forms/select';
import { ScrollArea } from 'components/scroll-area';
import ActionsSummary from 'layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary';

import DrawPUMethod from './draw';
Expand Down Expand Up @@ -107,8 +108,8 @@ export const PlanningUnitMethods = () => {
},
},
{
onSuccess: ({ data: { meta } }) => {
dispatch(setJob(new Date(meta.isoDate).getTime()));
onSuccess: ({ data }) => {
dispatch(setJob(new Date(data.meta.isoDate).getTime()));

dispatch(setTmpPuExcludedValue([]));
dispatch(setTmpPuIncludedValue([]));
Expand Down Expand Up @@ -186,26 +187,30 @@ export const PlanningUnitMethods = () => {
<form
onSubmit={handleSubmit}
autoComplete="off"
className="flex flex-grow flex-col space-y-4 text-black"
className="relative flex w-full flex-grow flex-col space-y-4 overflow-hidden text-black"
>
<FieldRFF name="pu-method">
{(fprops) => (
<Select
{...fprops}
size="base"
theme="dark"
placeholder="Select..."
options={PU_METHODS}
onChange={(value: (typeof PU_METHODS)[number]['value']) => {
form.change('pu-method', value);
}}
/>
)}
</FieldRFF>
{values['pu-method'] === 'select' && <SelectPUMethod />}
{values['pu-method'] === 'draw' && <DrawPUMethod />}
{values['pu-method'] === 'upload' && <UploadPUMethod />}
<ActionsSummary method={values['pu-method']} />
<ScrollArea className="h-full pr-3">
<div className="space-y-4 px-0.5 pt-3">
<FieldRFF name="pu-method">
{(fprops) => (
<Select
{...fprops}
size="base"
theme="dark"
placeholder="Select..."
options={PU_METHODS}
onChange={(value: (typeof PU_METHODS)[number]['value']) => {
form.change('pu-method', value);
}}
/>
)}
</FieldRFF>
{values['pu-method'] === 'select' && <SelectPUMethod />}
{values['pu-method'] === 'draw' && <DrawPUMethod />}
{values['pu-method'] === 'upload' && <UploadPUMethod />}
<ActionsSummary method={values['pu-method']} />
</div>
</ScrollArea>
</form>
);
}}
Expand Down
119 changes: 52 additions & 67 deletions app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { useAppDispatch, useAppSelector } from 'store/hooks';
import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
import { PUAction } from 'store/slices/scenarios/types';

import { motion } from 'framer-motion';

import { useCanEditScenario } from 'hooks/permissions';
import { useScenarioPU } from 'hooks/scenarios';

Expand Down Expand Up @@ -70,73 +68,60 @@ export const GridSetupPlanningUnits = (): JSX.Element => {
}, [dispatch, setLayerSettings]);

return (
<motion.div
key="gap-analysis"
className="flex min-h-0 flex-col items-start justify-start overflow-hidden"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<Section className="w-full">
<div className="space-y-1">
<span className="text-xs font-semibold text-blue-500">Grid Setup</span>
<div className="flex items-center space-x-2">
<h3 className="text-lg font-medium">Planning Unit Status</h3>
<InfoButton theme="primary" className="bg-gray-500">
<>
<h4 className="mb-2.5 font-heading text-lg">
Locked-in and locked-out planning units
</h4>
<div className="space-y-2">
<p>
You can force Marxan to include or exclude some planning units from your
analysis.
</p>
<p>
Manually including or excluding individual planning units is useful when a
real-world issue affects where new protected areas can be designated. For
example, if you know that a particular planning unit contains a restricted
military area and cannot be designated, then you could manually exclude that
planning unit from the project.
</p>
<p>
You can see the example below where a city is marked as locked-out and a
protected area is marked as locked-in:
</p>
<img src={LOCK_IN_OUT_IMG} alt="Feature-Range" />
<p>
The areas selected to be included will be <b>locked in </b>
to your conservation plan and will appear in all of the solutions.
</p>
<p>
The areas selected to be excluded will be <b>locked out </b>
of your conservation plan and will never appear in the solutions
</p>
</div>
</>
</InfoButton>
</div>
</div>

<div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-700">
<Tabs type={puAction as PUAction} onChange={onChangeTab} />
</div>

<div className="relative flex min-h-0 w-full flex-grow flex-col overflow-hidden">
<div className="relative overflow-y-auto overflow-x-visible px-0.5 pt-3">
{editable && <PlanningUnitMethods />}
{/* // todo: I think this part should be updated in terms of UI */}
{!editable && (
<div className="mt-4 space-y-3 text-xs">
{(puAction as PUAction) === 'include' && <p>{PUData.included.length} PU</p>}
{(puAction as PUAction) === 'exclude' && <p>{PUData.excluded.length} PU</p>}
{(puAction as PUAction) === 'available' && <p>{PUData.available.length} PU</p>}
<Section className="flex h-full w-full flex-col overflow-hidden">
<div className="space-y-1">
<span className="text-xs font-semibold text-blue-500">Grid Setup</span>
<div className="flex items-center space-x-2">
<h3 className="text-lg font-medium">Planning Unit Status</h3>
<InfoButton theme="primary" className="bg-gray-500">
<>
<h4 className="mb-2.5 font-heading text-lg">
Locked-in and locked-out planning units
</h4>
<div className="space-y-2">
<p>
You can force Marxan to include or exclude some planning units from your analysis.
</p>
<p>
Manually including or excluding individual planning units is useful when a
real-world issue affects where new protected areas can be designated. For example,
if you know that a particular planning unit contains a restricted military area
and cannot be designated, then you could manually exclude that planning unit from
the project.
</p>
<p>
You can see the example below where a city is marked as locked-out and a protected
area is marked as locked-in:
</p>
<img src={LOCK_IN_OUT_IMG} alt="Feature-Range" />
<p>
The areas selected to be included will be <b>locked in </b>
to your conservation plan and will appear in all of the solutions.
</p>
<p>
The areas selected to be excluded will be <b>locked out </b>
of your conservation plan and will never appear in the solutions
</p>
</div>
)}
</div>
</>
</InfoButton>
</div>
</div>

<div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-700">
<Tabs type={puAction as PUAction} onChange={onChangeTab} />
</div>

{editable && <PlanningUnitMethods />}
{/* // todo: I think this part should be updated in terms of UI */}
{!editable && (
<div className="mt-4 space-y-3 text-xs">
{(puAction as PUAction) === 'include' && <p>{PUData.included.length} PU</p>}
{(puAction as PUAction) === 'exclude' && <p>{PUData.excluded.length} PU</p>}
{(puAction as PUAction) === 'available' && <p>{PUData.available.length} PU</p>}
</div>
</Section>
</motion.div>
)}
</Section>
);
};

Expand Down
Loading