From d937a938e245d7db4839b731be5f791bbb991cec Mon Sep 17 00:00:00 2001
From: Shoaibdev7 <shoaibdev7@gmail.com>
Date: Thu, 25 Jul 2024 08:41:19 +0500
Subject: [PATCH] fix(graph-tooltip): make the tool tip scrollable

---
 .../Cubes/Cube/components/Tooltip/index.tsx   |  4 --
 src/components/Universe/Graph/Cubes/index.tsx | 10 ++---
 src/components/Universe/Overlay/index.tsx     | 42 +++++++++++++++++--
 src/stores/useGraphStore/index.ts             |  5 +++
 4 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx
index fbd3cd24b..a565f13ba 100644
--- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx
+++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx
@@ -8,15 +8,11 @@ import { formatDescription } from '~/utils/formatDescription'
 import { TwitData } from './Tweet'
 
 const Wrapper = styled(Flex)(({ theme }) => ({
-  position: 'absolute',
-  top: '65px',
-  right: '55px',
   width: '300px',
   pointerEvents: 'auto',
   background: colors.dashboardHeader,
   boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)',
   color: colors.primaryText1,
-  zIndex: 100,
   maxHeight: '400px',
   overflowY: 'auto',
   transition: 'opacity 0.6s',
diff --git a/src/components/Universe/Graph/Cubes/index.tsx b/src/components/Universe/Graph/Cubes/index.tsx
index d97dddadf..77d1d0bb9 100644
--- a/src/components/Universe/Graph/Cubes/index.tsx
+++ b/src/components/Universe/Graph/Cubes/index.tsx
@@ -15,7 +15,7 @@ import { TextNode } from './Text'
 export const Cubes = memo(() => {
   const selectedNode = useSelectedNode()
   const relativeIds = useSelectedNodeRelativeIds()
-  const { selectionGraphData, showSelectionGraph, setHoveredNode } = useGraphStore((s) => s)
+  const { selectionGraphData, showSelectionGraph, setHoveredNode, setIsHovering } = useGraphStore((s) => s)
 
   const data = useDataStore((s) => s.dataInitial)
   const setTranscriptOpen = useAppStore((s) => s.setTranscriptOpen)
@@ -52,10 +52,9 @@ export const Cubes = memo(() => {
   const onPointerOut = useCallback(
     (e: ThreeEvent<PointerEvent>) => {
       e.stopPropagation()
-
-      setHoveredNode(null)
+      setIsHovering(false)
     },
-    [setHoveredNode],
+    [setIsHovering],
   )
 
   const onPointerIn = useCallback(
@@ -69,10 +68,11 @@ export const Cubes = memo(() => {
         if (!ignoreNodeEvent(node)) {
           e.stopPropagation()
           setHoveredNode(node)
+          setIsHovering(true)
         }
       }
     },
-    [setHoveredNode, ignoreNodeEvent],
+    [setHoveredNode, setIsHovering, ignoreNodeEvent],
   )
 
   const hideUniverse = showSelectionGraph && !!selectedNode
diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx
index 38deb9c83..872d6b252 100644
--- a/src/components/Universe/Overlay/index.tsx
+++ b/src/components/Universe/Overlay/index.tsx
@@ -1,17 +1,44 @@
+import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { ActionsToolbar } from '~/components/App/ActionsToolbar'
 import { useGraphStore } from '~/stores/useGraphStore'
 import { Tooltip } from '../Graph/Cubes/Cube/components/Tooltip'
 
 export const Overlay = () => {
-  const [hoveredNode] = useGraphStore((s) => [s.hoveredNode])
+  const [hoveredNode, isHovering] = useGraphStore((s) => [s.hoveredNode, s.isHovering])
+  const [isVisible, setIsVisible] = useState(false)
+  const [isTooltipHovered, setIsTooltipHovered] = useState(false)
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | null = null
+
+    if (isHovering || isTooltipHovered) {
+      setIsVisible(true)
+    } else {
+      timer = setTimeout(() => setIsVisible(false), 300)
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [isHovering, isTooltipHovered])
+
+  const handleTooltipMouseEnter = useCallback(() => {
+    setIsTooltipHovered(true)
+  }, [])
+
+  const handleTooltipMouseLeave = useCallback(() => {
+    setIsTooltipHovered(false)
+  }, [])
 
   return (
     <OverlayWrap>
-      {hoveredNode && (
-        <div id="tooltip-portal">
+      {hoveredNode && isVisible && (
+        <TooltipWrapper onMouseEnter={handleTooltipMouseEnter} onMouseLeave={handleTooltipMouseLeave}>
           <Tooltip node={hoveredNode} />
-        </div>
+        </TooltipWrapper>
       )}
       <ActionsToolbar />
     </OverlayWrap>
@@ -37,3 +64,10 @@ const OverlayWrap = styled('div')(({ theme }) => ({
     top: 50,
   },
 }))
+
+const TooltipWrapper = styled.div`
+  position: absolute;
+  top: 65px;
+  right: 55px;
+  z-index: 100;
+`
diff --git a/src/stores/useGraphStore/index.ts b/src/stores/useGraphStore/index.ts
index a42ffd7eb..06ffea037 100644
--- a/src/stores/useGraphStore/index.ts
+++ b/src/stores/useGraphStore/index.ts
@@ -80,6 +80,7 @@ export type GraphStore = {
   scrollEventsDisabled: boolean
   simulation: ForceSimulation | null
   simulationHelpers: SimulationHelpers
+  isHovering: boolean
 
   setDisableCameraRotation: (rotation: boolean) => void
   setScrollEventsDisabled: (rotation: boolean) => void
@@ -93,6 +94,7 @@ export type GraphStore = {
   setShowSelectionGraph: (_: boolean) => void
   setSelectionData: (data: GraphData) => void
   simulationCreate: (nodes: Node[], links: Link[]) => void
+  setIsHovering: (isHovering: boolean) => void
 }
 
 const defaultData: Omit<
@@ -111,6 +113,7 @@ const defaultData: Omit<
   | 'setSelectionData'
   | 'setHideNodeDetails'
   | 'simulationCreate'
+  | 'setIsHovering'
 > = {
   data: null,
   simulation: null,
@@ -126,6 +129,7 @@ const defaultData: Omit<
   showSelectionGraph: false,
   splashDataLoading: true,
   simulationHelpers: defaultSimulationHelpers,
+  isHovering: false,
 }
 
 export const useGraphStore = create<GraphStore>()((set, get) => ({
@@ -136,6 +140,7 @@ export const useGraphStore = create<GraphStore>()((set, get) => ({
   setSelectionData: (selectionGraphData) => set({ selectionGraphData }),
   setScrollEventsDisabled: (scrollEventsDisabled) => set({ scrollEventsDisabled }),
   setDisableCameraRotation: (rotation) => set({ disableCameraRotation: rotation }),
+  setIsHovering: (isHovering) => set({ isHovering }),
   setGraphRadius: (graphRadius) => set({ graphRadius }),
   setGraphStyle: (graphStyle) => set({ graphStyle }),
   setHoveredNode: (hoveredNode) => {