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

Client/fix/eudr map UI fixes #1146

Merged
merged 2 commits into from
Mar 18, 2024
Merged

Client/fix/eudr map UI fixes #1146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0462ff2
fixed opacity for layers
davidsingal Mar 18, 2024
3c5862b
added planet dates
davidsingal Mar 18, 2024
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
2 changes: 1 addition & 1 deletion client/src/components/legend/item/info-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const InfoModal = ({ info: { title, description, source } }: InfoModalProps) =>
const [open, setOpen] = useState(false);
return (
<>
<button type="button" className="px-0 py-0" onClick={() => setOpen(true)}>
<button type="button" className="cursor-pointer px-0 py-0" onClick={() => setOpen(true)}>
<InformationCircleIcon className="h-4 w-4" />
</button>
<Modal onDismiss={() => setOpen(false)} title={title || NO_DATA} open={open} size="narrow">
Expand Down
192 changes: 168 additions & 24 deletions client/src/containers/analysis-eudr/map/basemap/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,100 @@
import { useCallback, useEffect } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import Image from 'next/image';
import { format } from 'date-fns';

import LayersData from '../layers.json';

import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { setBasemap, setPlanetCompare } from '@/store/features/eudr';
import { setBasemap, setPlanetLayer, setPlanetCompareLayer } from '@/store/features/eudr';
import { Switch } from '@/components/ui/switch';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import InfoModal from '@/components/legend/item/info-modal';
import DefaultImage from '@/components/map/controls/basemap/images/default1.png';
import SatelliteImage from '@/components/map/controls/basemap/images/satellite1.png';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

import type { EUDRState } from '@/store/features/eudr';
const monthFormatter = (date: string) => format(date, 'MMM');

const YEARS = [2020, 2021, 2022, 2023, 2024];

const EUDRBasemapControl = () => {
const currentDate = useMemo(() => new Date(), []);
const dispatch = useAppDispatch();
const { basemap, planetCompare } = useAppSelector((state) => state.eudr);
const { basemap, planetLayer, planetCompareLayer } = useAppSelector((state) => state.eudr);
const basemapData = LayersData.find((layer) => layer.id === 'planet-data');

const handleBasemap = useCallback(
(basemapValue: EUDRState['basemap'], checked: boolean) => {
if (basemapValue === 'light') {
dispatch(setBasemap(checked ? 'light' : 'planet'));
} else if (basemapValue === 'planet') {
dispatch(setBasemap(checked ? 'planet' : 'light'));
const handleLightBasemap = useCallback(
(checked: boolean) => {
if (checked) {
dispatch(setBasemap('light'));
dispatch(setPlanetLayer({ active: !checked }));
} else {
dispatch(setBasemap('planet'));
dispatch(setPlanetLayer({ active: checked }));
}
},
[dispatch],
);

const handleSetCompare = useCallback(
const handlePlanetLayer = useCallback(
(checked: boolean) => {
dispatch(setBasemap('planet'));
dispatch(setPlanetLayer({ active: checked }));
if (!checked) dispatch(setPlanetCompareLayer({ active: false }));
},
[dispatch],
);

const handlePlanetLayerYear = useCallback(
(year: string) => {
const nextYear = Number(year);
if (nextYear === currentDate.getFullYear()) {
// If the year is the current year, set the month to the previous month
dispatch(setPlanetLayer({ month: currentDate.getMonth() }));
}
dispatch(setPlanetLayer({ year: nextYear }));
},
[dispatch, currentDate],
);

const handlePlanetLayerMonth = useCallback(
(month: string) => {
dispatch(setPlanetLayer({ month: Number(month) }));
},
[dispatch],
);

const handlePlanetCompareLayerYear = useCallback(
(year: string) => {
dispatch(setPlanetCompareLayer({ year: Number(year) }));
},
[dispatch],
);

const handlePlanetCompareLayerMonth = useCallback(
(month: string) => {
dispatch(setPlanetCompareLayer({ month: Number(month) }));
},
[dispatch],
);

const handlePlanetCompareLayer = useCallback(
(checked: boolean) => {
dispatch(setPlanetCompare(checked));
dispatch(setPlanetCompareLayer({ active: checked }));
},
[dispatch],
);

useEffect(() => {
if (basemap === 'light') dispatch(setPlanetCompare(false));
if (basemap === 'light') {
dispatch(setPlanetCompareLayer({ active: false }));
}
}, [basemap, dispatch]);

return (
Expand Down Expand Up @@ -82,10 +139,7 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch
checked={basemap === 'light'}
onCheckedChange={(checked) => handleBasemap('light', checked)}
/>
<Switch checked={basemap === 'light'} onCheckedChange={handleLightBasemap} />
</div>
</div>
</div>
Expand Down Expand Up @@ -116,24 +170,66 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch
checked={basemap === 'planet'}
onCheckedChange={(checked) => handleBasemap('planet', checked)}
/>
<Switch checked={planetLayer.active} onCheckedChange={handlePlanetLayer} />
</div>
</div>
</div>
<div className="text-xs text-gray-500">
Monthly high resolution basemaps (tropics)
</div>
{planetLayer.active && (
<div className="flex items-center space-x-1 text-xs text-gray-500">
<div>Year</div>
<Select
defaultValue={planetLayer.year.toString()}
value={planetLayer.year.toString()}
onValueChange={handlePlanetLayerYear}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{YEARS.map((year) => (
<SelectItem key={`planet-year-option-${year}`} value={year.toString()}>
{year}
</SelectItem>
))}
</SelectContent>
</Select>
<div>Month</div>
<Select
defaultValue={planetLayer.month.toString()}
value={planetLayer.month.toString()}
onValueChange={handlePlanetLayerMonth}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
(month) =>
(planetLayer.year < currentDate.getFullYear() ||
month <= currentDate.getMonth()) && (
<SelectItem
key={`planet-year-option-${month}`}
value={month.toString()}
>
{monthFormatter(month.toString())}
</SelectItem>
),
)}
</SelectContent>
</Select>
</div>
)}
</div>
</div>
</div>
</div>

<div className="bg-gray-100 p-4 text-xs">
{basemap !== 'planet' && <div>Select satellite basemap for image comparison option.</div>}
{basemap === 'planet' && (
{!planetLayer.active && <div>Select satellite basemap for image comparison option.</div>}
{planetLayer.active && (
<div className="flex items-start space-x-2">
<div className="aspect-square shrink-0 cursor-pointer rounded-lg border border-white bg-white shadow-lg transition-colors duration-200 ease-in-out hover:border-navy-400 hover:bg-green-50">
<div className="pointer-events-none h-full w-full p-px">
Expand All @@ -156,13 +252,61 @@ const EUDRBasemapControl = () => {
/>
</div>
<div className="flex items-center pl-1">
<Switch checked={planetCompare} onCheckedChange={handleSetCompare} />
<Switch
checked={planetCompareLayer.active}
onCheckedChange={handlePlanetCompareLayer}
/>
</div>
</div>
</div>
<div className="text-xs text-gray-500">
Monthly high resolution basemaps (tropics)
</div>
{planetCompareLayer.active && (
<div className="flex items-center space-x-1 text-xs text-gray-500">
<div>Year</div>
<Select
defaultValue={planetCompareLayer.year.toString()}
value={planetCompareLayer.year.toString()}
onValueChange={handlePlanetCompareLayerYear}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{YEARS.map((year) => (
<SelectItem key={`planet-year-option-${year}`} value={year.toString()}>
{year}
</SelectItem>
))}
</SelectContent>
</Select>
<div>Month</div>
<Select
defaultValue={planetCompareLayer.month.toString()}
value={planetCompareLayer.month.toString()}
onValueChange={handlePlanetCompareLayerMonth}
>
<SelectTrigger className="h-auto w-auto rounded-sm border border-navy-400 py-1 pl-2 pr-1 text-xs text-navy-400">
<SelectValue />
</SelectTrigger>
<SelectContent>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
(month) =>
(planetCompareLayer.year < currentDate.getFullYear() ||
month <= currentDate.getMonth()) && (
<SelectItem
key={`planet-year-option-${month}`}
value={month.toString()}
>
{monthFormatter(month.toString())}
</SelectItem>
),
)}
</SelectContent>
</Select>
</div>
)}
</div>
</div>
)}
Expand Down
Loading
Loading