From 1e74f71f76a96484d0d119f9a088ba3690607d57 Mon Sep 17 00:00:00 2001 From: David Inga Date: Tue, 19 Mar 2024 16:13:29 +0100 Subject: [PATCH] wip --- client/package.json | 17 +-- client/src/components/ui/resizable.tsx | 40 ++++++ .../analysis-eudr/map/component.tsx | 128 +++++++++++------- client/yarn.lock | 91 +++++++------ 4 files changed, 180 insertions(+), 96 deletions(-) create mode 100644 client/src/components/ui/resizable.tsx diff --git a/client/package.json b/client/package.json index 2d8cdffcf..780325bee 100644 --- a/client/package.json +++ b/client/package.json @@ -16,14 +16,14 @@ }, "dependencies": { "@date-fns/utc": "1.1.1", - "@deck.gl/aggregation-layers": "8.8.6", - "@deck.gl/carto": "8.8.6", - "@deck.gl/core": "8.8.6", - "@deck.gl/extensions": "8.8.6", - "@deck.gl/geo-layers": "8.8.6", - "@deck.gl/layers": "8.8.6", - "@deck.gl/mapbox": "8.8.6", - "@deck.gl/mesh-layers": "8.8.6", + "@deck.gl/aggregation-layers": "8.8.9", + "@deck.gl/carto": "8.8.9", + "@deck.gl/core": "8.8.9", + "@deck.gl/extensions": "8.8.9", + "@deck.gl/geo-layers": "8.8.9", + "@deck.gl/layers": "8.8.9", + "@deck.gl/mapbox": "8.8.9", + "@deck.gl/mesh-layers": "8.8.9", "@deck.gl/react": "8.9.35", "@dnd-kit/core": "5.0.3", "@dnd-kit/modifiers": "5.0.0", @@ -86,6 +86,7 @@ "react-map-gl": "7.1.7", "react-range": "1.8.14", "react-redux": "8.0.2", + "react-resizable-panels": "^2.0.13", "react-world-flags": "1.6.0", "recharts": "2.9.0", "rooks": "7.14.1", diff --git a/client/src/components/ui/resizable.tsx b/client/src/components/ui/resizable.tsx new file mode 100644 index 000000000..fd2f99e8c --- /dev/null +++ b/client/src/components/ui/resizable.tsx @@ -0,0 +1,40 @@ +import { GripVertical } from 'lucide-react'; +import * as ResizablePrimitive from 'react-resizable-panels'; + +import { cn } from '@/lib/utils'; + +const ResizablePanelGroup = ({ + className, + ...props +}: React.ComponentProps) => ( + +); + +const ResizablePanel = ResizablePrimitive.Panel; + +const ResizableHandle = ({ + withHandle, + className, + ...props +}: React.ComponentProps & { + withHandle?: boolean; +}) => ( + div]:rotate-90', + className, + )} + {...props} + > + {withHandle && ( +
+ +
+ )} + +); + +export { ResizablePanelGroup, ResizablePanel, ResizableHandle }; diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx index 9131ca3ab..be2169edb 100644 --- a/client/src/containers/analysis-eudr/map/component.tsx +++ b/client/src/containers/analysis-eudr/map/component.tsx @@ -13,13 +13,15 @@ import LegendControl from './legend'; import BasemapControl from './basemap'; import { useAppSelector } from '@/store/hooks'; -import { INITIAL_VIEW_STATE, MAP_STYLES } from '@/components/map'; import { usePlotGeometries } from '@/hooks/eudr'; +import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'; +import { INITIAL_VIEW_STATE, MAP_STYLES } from '@/components/map'; import { formatNumber } from '@/utils/number-format'; import type { PickingInfo, MapViewState } from '@deck.gl/core/typed'; const monthFormatter = (date: string) => format(date, 'MM'); +const friendlyMonthFormatter = (date: string) => format(date, 'MMM'); const DEFAULT_VIEW_STATE: MapViewState = { ...INITIAL_VIEW_STATE, @@ -47,6 +49,7 @@ const EUDRMap = () => { const [hoverInfo, setHoverInfo] = useState(null); const [viewState, setViewState] = useState(DEFAULT_VIEW_STATE); + const [sizes, setSizes] = useState([0, 0]); const params = useParams(); @@ -200,57 +203,86 @@ const EUDRMap = () => { setViewState({ ...viewState, zoom }); }, [viewState]); + console.log(sizes); + return ( <>
- setViewState(viewState as MapViewState)} - controller={{ dragRotate: false }} - layers={[ - basemap === 'planet' && !planetCompareLayer.active ? [basemapPlanetLayer] : null, - basemap === 'planet' && planetCompareLayer.active - ? [basemapPlanetLayer, basemapPlanetCompareLayer] - : null, - forestCoverLayer, - deforestationLayer, - raddLayer, - eudrSupplierLayer, - ]} - layerFilter={({ layer, viewport }) => { - return !planetCompareLayer.active || viewport.id.startsWith(layer.id.split('-')[0]); - }} - {...(planetCompareLayer.active - ? { - views: [ - new MapView({ - id: 'top', - y: 0, - height: '50%', - padding: { top: '100%' }, - }), - new MapView({ - id: 'bottom', - y: '50%', - height: '50%', - padding: { bottom: '100%' }, - }), - new MapView({ - id: 'full', - y: 0, - x: 0, - width: '100%', - height: '100%', - }), - ], - } - : {})} + - - - {planetCompareLayer.active && ( -
- )} + setViewState(viewState as MapViewState)} + controller={{ dragRotate: false }} + layers={[ + basemap === 'planet' && !planetCompareLayer.active ? [basemapPlanetLayer] : null, + basemap === 'planet' && planetCompareLayer.active + ? [basemapPlanetLayer, basemapPlanetCompareLayer] + : null, + forestCoverLayer, + deforestationLayer, + raddLayer, + eudrSupplierLayer, + ]} + layerFilter={({ layer, viewport }) => { + return !planetCompareLayer.active || viewport.id.startsWith(layer.id.split('-')[0]); + }} + {...(planetCompareLayer.active + ? { + views: [ + new MapView({ + id: 'top', + x: 0, + y: 0, + width: '100%', + height: '100%', + controller: false, + }), + new MapView({ + id: 'bottom', + x: 0, + y: `${sizes[0]}%`, + width: '100%', + height: `${sizes[1]}%`, + // padding: { top: `100%`, bottom: `${sizes[0]}%` }, + // padding: { bottom: `${sizes[1]}%` }, + padding: { top: `${sizes[1]}%`, bottom: `${sizes[0]}%` }, + controller: false, + }), + new MapView({ + id: 'full', + y: 0, + x: 0, + width: '100%', + height: '100%', + controller: true, + }), + ], + } + : {})} + > + + + {planetCompareLayer.active && ( + <> + +
+ {planetLayer.year} {friendlyMonthFormatter(planetLayer.month.toString())} +
+ + + +
+ {planetCompareLayer.year}{' '} + {friendlyMonthFormatter(planetCompareLayer.month.toString())} +
+ + + )} +
{hoverInfo?.object && (