Skip to content

Commit

Permalink
Merge pull request #1663 from Vizzuality/MRXN23-600-issues-whith-the-…
Browse files Browse the repository at this point in the history 
…lock-in-out

[MRXN23-600] adds scroll to PU form in small viewports
  • Loading branch information
@andresgnlez
andresgnlez authored Mar 14, 2024
2 parents d211c47 + c639e5d commit 8ad4122
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 88 deletions.
47 changes: 26 additions & 21 deletions app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
View file
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
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

0 comments on commit 8ad4122

Please sign in to comment.