From 6b630b7fab3e4d0ba39104b1da80629c7692d20c Mon Sep 17 00:00:00 2001
From: groninge <groninge@gmail.com>
Date: Fri, 20 Sep 2024 10:50:53 +0200
Subject: [PATCH] keep tooltip open on hover and click links

---
 .../marketing/EcosystemActivityChart.tsx      | 48 +++++++++++++++++--
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx
index 81a0a73bd..305145f7c 100644
--- a/lib/shared/components/marketing/EcosystemActivityChart.tsx
+++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx
@@ -14,7 +14,7 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import ButtonGroup from '@/lib/shared/components/btns/button-group/ButtonGroup'
-import { FC, PropsWithChildren } from 'react'
+import { FC, PropsWithChildren, useState, useRef, useCallback, useEffect } from 'react'
 import { motion } from 'framer-motion'
 import { EcosystemChainSelect } from './EcosystemChainSelect'
 import { getChainShortName } from '@/lib/config/app.config'
@@ -62,6 +62,39 @@ export function EcosystemActivityChart() {
     }
   })
 
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const showTooltip = useCallback(
+    (params: any) => {
+      onEvents.mousemove(params)
+      setIsTooltipVisible(true)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    },
+    [onEvents]
+  )
+
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    timeoutRef.current = setTimeout(() => {
+      onEvents.mouseout()
+      setIsTooltipVisible(false)
+    }, 100)
+  }, [onEvents])
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
   return (
     <Card>
       <Box position="relative">
@@ -108,18 +141,27 @@ export function EcosystemActivityChart() {
                 style={{ height: `${chartHeight}px` }}
                 option={chartOption}
                 ref={eChartsRef}
-                onEvents={onEvents}
+                onEvents={{
+                  ...onEvents,
+                  mousemove: showTooltip,
+                  mouseout: hideTooltip,
+                }}
               />
               {/* No idea how to get this to work with <Portal> */}
               {createPortal(
                 <div
+                  ref={tooltipRef}
                   style={{
                     position: 'fixed',
                     left: `${tooltipPosition.x + bounds.left}px`,
                     top: `${tooltipPosition.y + bounds.top}px`,
-                    pointerEvents: 'none',
+                    pointerEvents: isTooltipVisible ? 'auto' : 'none',
                     zIndex: 9999,
+                    opacity: isTooltipVisible ? 1 : 0,
+                    transition: 'opacity 0.2s',
                   }}
+                  onMouseEnter={showTooltip}
+                  onMouseLeave={hideTooltip}
                 >
                   {tooltipContent}
                 </div>,