tooltip optimization

uchicago-dsi · Jul 2, 2024 · 921f915 · 921f915
1 parent 6e78f84
commit 921f915
Show file tree

Hide file tree

Showing 6 changed files with 14,361 additions and 17,430 deletions.
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -21,6 +21,7 @@ import { zeroPopTracts } from "utils/zeroPopTracts"
 import { MapSettings } from "components/MapSettings/MapSettings"
 import "./styles.css"
 import { DeckGLOverlay } from "./DeckGLOverlay"
+import { useDebouncedCallback } from 'use-debounce';
 
 export type MapProps = {
   initialFilter?: string
@@ -78,6 +79,29 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
       console.error(e)
     }
   }
+
+  const handleSetTooltipId = useDebouncedCallback(
+    // function
+    (id) => {
+      dispatch(setTooltipInfo({ id }))
+    },
+    // delay in ms
+    50
+  );
+  // debounce
+  const handleHover = (info: any, event: any) => {
+    const x = event?.srcEvent?.clientX
+    const y = event?.srcEvent?.clientY
+    const id = info.object?.properties?.GEOID
+    const isZeroPop = zeroPopTracts.indexOf(info.object?.properties?.GEOID) !== -1
+    const isFiltered = filter && info.object?.properties?.GEOID?.startsWith(filter) === false
+    if (info?.x && info?.y && info?.object && !isFiltered && !isZeroPop) {
+      dispatch(setTooltipInfo({ x, y, id: undefined }))
+      handleSetTooltipId(id)
+    } else {
+      dispatch(setTooltipInfo(null))
+    }
+  }
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -223,18 +247,7 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
           setClickedGeo({ geoid: info.object?.properties?.GEOID })
         }
       },
-      onHover: (info: any, event: any) => {
-        const x = event?.srcEvent?.clientX
-        const y = event?.srcEvent?.clientY
-        const id = info.object?.properties?.GEOID
-        const isZeroPop = zeroPopTracts.indexOf(info.object?.properties?.GEOID) !== -1
-        const isFiltered = filter && info.object?.properties?.GEOID?.startsWith(filter) === false
-        if (info?.x && info?.y && info?.object && !isFiltered && !isZeroPop) {
-          dispatch(setTooltipInfo({ x, y, id }))
-        } else {
-          dispatch(setTooltipInfo(null))
-        }
-      },
+      onHover: handleHover,
       filled: true,
       stroked: true,
       beforeId: "water",

diff --git a/components/MapTooltip/MapTooltip.tsx b/components/MapTooltip/MapTooltip.tsx
@@ -46,6 +46,7 @@ export const MapTooltipInner: React.FC<
 > = ({ simpleMap, tooltipStatus, tooltip }) => {
   const { id, data: tooltipData } = tooltip || { id: "", data: [] }
   const data = globals?.ds?.tooltipResults?.[id]
+
   if (!data) {
     return (
       <svg className="spinner" width="4rem" height="4rem" viewBox="0 0 50 50">
@@ -60,12 +61,11 @@ export const MapTooltipInner: React.FC<
   if (tooltipData) {
     return <TooltipSectionsRenderer sections={tooltipData} />
   }
-
   if (tooltipStatus === "ready") {
     return (
       <p className="pb-2">
-        <b>Tract# {id}</b>
-        <TooltipSectionsRenderer sections={data} />
+        <b>{data.name ? data.name : `Tract# ${id}`}</b>
+        <TooltipSectionsRenderer sections={data.sections} />
       </p>
     )
   }
@@ -87,21 +87,47 @@ export const MapTooltipInner: React.FC<
   )
 }
 
+export const adjustTooltipToMousePosition = (x:number, y:number, tooltipWidth: number): {left?:number, top?:number, right?:number, bottom?:number} => {
+  const screenWidth = window.innerWidth
+  const screenHeight = window.innerHeight
+  // if in bottom right quadrant of screen
+  // move tooltip to the left
+  const quadrantX = x > screenWidth / 2 ? "right" : "left"
+  const quadrantY = y > screenHeight / 2 ? "bottom" : "top"
+  let cssProps: {left?:number, top?:number, right?:number, bottom?:number} = {
+
+  }
+  if (quadrantX === "right") {
+    cssProps['right'] = screenWidth - x + 10
+  } else {
+    cssProps = {left: x + 10}
+  }
+  if (quadrantY === "bottom") {
+    cssProps['bottom'] = screenHeight - y + 10
+  } else {
+    cssProps['top'] = y + 10
+  }
+
+  return cssProps
+}
+
 export const MapTooltip: React.FC<MapTooltipProps> = ({ simpleMap }) => {
+  const tooltipRef = React.useRef<HTMLDivElement>(null)
   const tooltip = useAppSelector((state) => state.map.tooltip)
   const tooltipStatus = useAppSelector((state) => state.map.tooltipStatus)
+  const tooltipWidth = tooltipRef.current?.clientWidth || 0
   const { x, y } = tooltip || {}
-
+  const cssProps = adjustTooltipToMousePosition(x, y, tooltipWidth)
   if (!x || !y) {
     return null
   }
 
   return (
     <div
+      ref={tooltipRef}
       className="padding-4 pointer-events-none fixed z-[1001] rounded-md border border-gray-200 bg-white/90 p-2 shadow-md"
       style={{
-        left: x + 10,
-        top: y + 10,
+        ...cssProps
       }}
     >
       <MapTooltipInner simpleMap={simpleMap} tooltipStatus={tooltipStatus} tooltip={tooltip} />

diff --git a/package.json b/package.json
@@ -149,6 +149,7 @@
     "tinacms": "^1.6.0",
     "tinycolor2": "^1.6.0",
     "unified": "^11.0.4",
+    "use-debounce": "^10.0.1",
     "util": "^0.12.5",
     "web-worker": "^1.3.0",
     "xmlhttprequest": "^1.8.0",