wip

Vizzuality · Mar 19, 2024 · 1e74f71 · 1e74f71
1 parent c5e4b46
commit 1e74f71
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 96 deletions.
diff --git 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
@@ -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<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git 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<PickingInfo>(null);
   const [viewState, setViewState] = useState<MapViewState>(DEFAULT_VIEW_STATE);
+  const [sizes, setSizes] = useState<number[]>([0, 0]);
 
   const params = useParams();
 
@@ -200,57 +203,86 @@ const EUDRMap = () => {
     setViewState({ ...viewState, zoom });
   }, [viewState]);
 
+  console.log(sizes);
+
   return (
     <>
       <div className="absolute left-0 top-0 h-full w-full overflow-hidden">
-        <DeckGL
-          viewState={{ ...viewState }}
-          onViewStateChange={({ viewState }) => 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%',
-                  }),
-                ],
-              }
-            : {})}
+        <ResizablePanelGroup
+          direction="vertical"
+          className="absolute left-0 top-0 h-full w-full"
+          onLayout={setSizes}
         >
-          <Map reuseMaps mapStyle={MAP_STYLES.terrain} styleDiffing={false} />
-        </DeckGL>
-        {planetCompareLayer.active && (
-          <div className="pointer-events-none absolute left-0 top-1/2 z-20 h-[2px] w-full bg-white" />
-        )}
+          <DeckGL
+            viewState={{ ...viewState }}
+            onViewStateChange={({ viewState }) => 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,
+                    }),
+                  ],
+                }
+              : {})}
+          >
+            <Map reuseMaps mapStyle={MAP_STYLES.terrain} styleDiffing={false} />
+          </DeckGL>
+          {planetCompareLayer.active && (
+            <>
+              <ResizablePanel className="relative" minSize={5}>
+                <div className="absolute bottom-2 left-2 z-10 rounded-sm border border-navy-400 bg-white px-2 py-1 text-xs text-navy-400">
+                  {planetLayer.year} {friendlyMonthFormatter(planetLayer.month.toString())}
+                </div>
+              </ResizablePanel>
+              <ResizableHandle />
+              <ResizablePanel className="relative" minSize={5}>
+                <div className="absolute bottom-2 left-2 z-10 rounded-sm border border-navy-400 bg-white px-2 py-1 text-xs text-navy-400">
+                  {planetCompareLayer.year}{' '}
+                  {friendlyMonthFormatter(planetCompareLayer.month.toString())}
+                </div>
+              </ResizablePanel>
+            </>
+          )}
+        </ResizablePanelGroup>
       </div>
       {hoverInfo?.object && (
         <div