tooltip for plot layer

Vizzuality · Mar 11, 2024 · 2fd2923 · 2fd2923
1 parent aab3937
commit 2fd2923
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 12 deletions.
diff --git a/client/package.json b/client/package.json
@@ -43,6 +43,7 @@
     "@radix-ui/react-radio-group": "1.1.3",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "@reduxjs/toolkit": "1.8.2",
     "@tailwindcss/forms": "0.4.0",
     "@tailwindcss/typography": "0.5.0",

diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, useCallback } from 'react';
 import DeckGL from '@deck.gl/react/typed';
 import { GeoJsonLayer } from '@deck.gl/layers/typed';
 import Map from 'react-map-gl/maplibre';
-import { WebMercatorViewport, type MapViewState } from '@deck.gl/core/typed';
+import { WebMercatorViewport } from '@deck.gl/core/typed';
 import bbox from '@turf/bbox';
 
 import ZoomControl from './zoom';
@@ -11,12 +11,14 @@ import LegendControl from './legend';
 import BasemapControl from '@/components/map/controls/basemap';
 import { INITIAL_VIEW_STATE, MAP_STYLES } from '@/components/map';
 import { usePlotGeometries } from '@/hooks/eudr';
+import { formatNumber } from '@/utils/number-format';
 
+import type { PickingInfo, MapViewState } from '@deck.gl/core/typed';
 import type { BasemapValue } from '@/components/map/controls/basemap/types';
 import type { MapStyle } from '@/components/map/types';
 
 const EUDRMap = () => {
-  const [hoverInfo, setHoverInfo] = useState(null);
+  const [hoverInfo, setHoverInfo] = useState<PickingInfo>(null);
   const [mapStyle, setMapStyle] = useState<MapStyle>('terrain');
   const [viewState, setViewState] = useState<MapViewState>(INITIAL_VIEW_STATE);
 
@@ -89,15 +91,6 @@ const EUDRMap = () => {
     setTimeout(() => fitToPlotBounds(), 0);
   }, [fitToPlotBounds]);
 
-  const handleTooltip = useCallback(({ object }) => {
-    console.log(object);
-    return (
-      object && {
-        html: `<div>${object.properties.plotName}</div>`,
-      }
-    );
-  }, []);
-
   return (
     <>
       <DeckGL
@@ -106,10 +99,35 @@ const EUDRMap = () => {
         controller={{ dragRotate: false }}
         layers={layers}
         onResize={handleResize}
-        getTooltip={handleTooltip}
       >
         <Map reuseMaps mapStyle={MAP_STYLES[mapStyle]} styleDiffing={false} />
       </DeckGL>
+      {hoverInfo?.object && (
+        <div
+          className="pointer-events-none absolute z-10 max-w-32 rounded-md bg-white p-2 text-2xs shadow-md"
+          style={{
+            left: hoverInfo?.x + 10,
+            top: hoverInfo?.y + 10,
+          }}
+        >
+          <dl className="space-y-2">
+            <div>
+              <dt>Supplier: </dt>
+              <dd className="font-semibold">{hoverInfo.object.properties.supplierName}</dd>
+            </div>
+            <div>
+              <dt>Plot: </dt>
+              <dd className="font-semibold">{hoverInfo.object.properties.plotName}</dd>
+            </div>
+            <div>
+              <dt>Sourcing volume: </dt>
+              <dd className="font-semibold">
+                {formatNumber(hoverInfo.object.properties.baselineVolume)} t
+              </dd>
+            </div>
+          </dl>
+        </div>
+      )}
       <div className="absolute bottom-10 right-6 z-10 w-10 space-y-2">
         <BasemapControl value={mapStyle} onChange={handleMapStyleChange} />
         <ZoomControl viewState={viewState} onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} />

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2323,6 +2323,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-tooltip@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "@radix-ui/react-tooltip@npm:1.0.7"
+  dependencies:
+    "@babel/runtime": ^7.13.10
+    "@radix-ui/primitive": 1.0.1
+    "@radix-ui/react-compose-refs": 1.0.1
+    "@radix-ui/react-context": 1.0.1
+    "@radix-ui/react-dismissable-layer": 1.0.5
+    "@radix-ui/react-id": 1.0.1
+    "@radix-ui/react-popper": 1.1.3
+    "@radix-ui/react-portal": 1.0.4
+    "@radix-ui/react-presence": 1.0.1
+    "@radix-ui/react-primitive": 1.0.3
+    "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-use-controllable-state": 1.0.1
+    "@radix-ui/react-visually-hidden": 1.0.3
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 894d448c69a3e4d7626759f9f6c7997018fe8ef9cde098393bd83e10743d493dfd284eef041e46accc45486d5a5cd5f76d97f56afbdace7aed6e0cb14007bf15
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-callback-ref@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
@@ -7806,6 +7837,7 @@ __metadata:
     "@radix-ui/react-radio-group": 1.1.3
     "@radix-ui/react-select": 2.0.0
     "@radix-ui/react-slot": 1.0.2
+    "@radix-ui/react-tooltip": ^1.0.7
     "@reduxjs/toolkit": 1.8.2
     "@tailwindcss/forms": 0.4.0
     "@tailwindcss/typography": 0.5.0