positining map tooltip with floating-ui

apps/fishing-map/features/map/popups/MapPopups.tsx

@@ -10,7 +10,7 @@ function MapPopups() {
 
   return (
     <Fragment>
-      {hoverInteraction && <PopupWrapper interaction={hoverInteraction} type="hover" />}
+      {/* {hoverInteraction && <PopupWrapper interaction={hoverInteraction} type="hover" />} */}
       {clickInteraction && <PopupWrapper interaction={clickInteraction} type="click" />}
     </Fragment>
   )

apps/fishing-map/features/map/popups/PopupWrapper.tsx

@@ -2,6 +2,13 @@ import { Fragment } from 'react'
 import cx from 'classnames'
 import { groupBy } from 'lodash'
 import { useSelector } from 'react-redux'
+import {
+  autoPlacement,
+  autoUpdate,
+  useFloating,
+  detectOverflow,
+  Middleware,
+} from '@floating-ui/react'
 import { DataviewCategory } from '@globalfishingwatch/api-types'
 import { Spinner } from '@globalfishingwatch/ui-components'
 import { InteractionEvent } from '@globalfishingwatch/deck-layer-composer'
@@ -16,12 +23,33 @@ import {
   selectApiEventStatus,
   selectFishingInteractionStatus,
 } from '../map.slice'
+import { MAP_WRAPPER_ID } from '../map.config'
 import styles from './Popup.module.css'
 import ActivityTooltipRow from './ActivityLayers'
 import EncounterTooltipRow from './EncounterTooltipRow'
 import ContextTooltipSection from './ContextLayers'
 import VesselEventsLayers from './VesselEventsLayers'
 
+const overflowMiddlware: Middleware = {
+  name: 'overflow',
+  async fn(state) {
+    if (!state) {
+      return {}
+    }
+    const overflow = await detectOverflow(state, {
+      boundary: document.getElementById(MAP_WRAPPER_ID),
+    })
+    Object.entries(overflow).forEach(([key, value]) => {
+      if (value > 0) {
+        const property = key === 'top' || key === 'bottom' ? 'y' : 'x'
+        state[property] =
+          key === 'bottom' || key === 'right' ? state[property] - value : state[property] + value
+      }
+    })
+    return state
+  },
+}
+
 type PopupWrapperProps = {
   interaction: InteractionEvent | null
   closeButton?: boolean
@@ -30,6 +58,7 @@ type PopupWrapperProps = {
   onClose?: () => void
   type?: 'hover' | 'click'
 }
+
 function PopupWrapper({
   interaction,
   closeButton = false,
@@ -45,16 +74,19 @@ function PopupWrapper({
   const activityInteractionStatus = useSelector(selectFishingInteractionStatus)
   const apiEventStatus = useSelector(selectApiEventStatus)
 
-  // const popupNeedsLoading = [fishingInteractionStatus, apiEventStatus].some(
-  //   (s) => s === AsyncReducerStatus.Loading
-  // )
+  const { refs, floatingStyles /*, update, elements */ } = useFloating({
+    whileElementsMounted: autoUpdate,
+    middleware: [autoPlacement({ padding: 10 }), overflowMiddlware],
+  })
 
   if (!mapViewport || !interaction || !interaction.features) return null
 
   // const visibleFeatures = interaction.features.filter(
   //   (feature) => feature.visible || feature.source === WORKSPACE_GENERATOR_ID
   // )
 
+  const [left, top] = mapViewport.project([interaction.longitude, interaction.latitude])
+
   const featureByCategory = groupBy(
     interaction.features
       // Needed to create a new array and not muting with sort
@@ -67,13 +99,20 @@ function PopupWrapper({
     'category'
   )
 
-  const [left, top] = mapViewport.project([interaction.longitude, interaction.latitude])
+  // useEffect(() => {
+  //   if (elements.reference && elements.floating) {
+  //     const cleanup = autoUpdate(elements.reference, elements.floating, update)
+  //     return cleanup
+  //   }
+  // }, [left, top, elements, update])
+
   return (
     <div
-      style={{ position: 'absolute', top, left, maxWidth: '600px' }}
+      ref={refs.setReference}
+      style={{ position: 'absolute', top, left }}
       className={cx(styles.popup, styles[type], className)}
     >
-      <div>
+      <div ref={refs.setFloating} style={floatingStyles}>
         {/* <div>
             <IconButton icon="close" onClick={onClose} />
           </div> */}

package.json

@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "3.2.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.26.12",
     "@globalfishingwatch/maplibre-gl": "^3.5.1-gfw.2",
     "@loaders.gl/core": "^4.1.4",
     "@loaders.gl/json": "^4.1.4",

yarn.lock

@@ -2371,7 +2371,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.8":
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.8":
   version: 2.0.8
   resolution: "@floating-ui/react-dom@npm:2.0.8"
   dependencies:
@@ -2383,6 +2383,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react@npm:^0.26.12":
+  version: 0.26.12
+  resolution: "@floating-ui/react@npm:0.26.12"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.0.0"
+    "@floating-ui/utils": "npm:^0.2.0"
+    tabbable: "npm:^6.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/da77f6b99ed0c8d5169f0ed287304615bef7c66b7a0011e4425e843016f6450a928bc27310a861fb14f8a1e58ef11fbdd92550583440f11af5d1a905968453a6
+  languageName: node
+  linkType: hard
+
 "@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
   version: 0.2.1
   resolution: "@floating-ui/utils@npm:0.2.1"
@@ -2482,6 +2496,7 @@ __metadata:
     "@dnd-kit/utilities": "npm:3.2.2"
     "@emotion/react": "npm:^11.11.3"
     "@emotion/styled": "npm:^11.11.0"
+    "@floating-ui/react": "npm:^0.26.12"
     "@globalfishingwatch/linting": "npm:^2.1.3"
     "@globalfishingwatch/maplibre-gl": "npm:^3.5.1-gfw.2"
     "@jscutlery/semver": "npm:^5.1.1"
@@ -23219,6 +23234,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 10/980fa73476026e99dcacfc0d6e000d41d42c8e670faf4682496d30c625495e412c4369694f2a15cf1e5252d22de3c396f2b62edbe8d60b5dadc40d09e3f2dde3
+  languageName: node
+  linkType: hard
+
 "table-layout@npm:^3.0.0":
   version: 3.0.2
   resolution: "table-layout@npm:3.0.2"