From cefb476f4523a8b73ee71943e5b98d22686eb17d Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 6 Nov 2023 15:15:38 +0100
Subject: [PATCH] fix(ui): path analysis tooltip

---
 .../Insights/SankeyChart/CustomNode.tsx       |  4 +--
 .../Insights/SankeyChart/NodeButton.tsx       | 27 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
index a8862bf46..dc54d435e 100644
--- a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
+++ b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx
@@ -23,8 +23,8 @@ function CustomNode(props: any) {
       <foreignObject
         x={isOut ? x - 6 : x + width + 5}
         y={y + 5}
-        height='70'
-        style={{ width: '150px' }}
+        height='25'
+        style={{ width: '150px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
       >
         <NodeButton payload={payload} />
       </foreignObject>
diff --git a/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx b/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
index 6599d5b62..f20ee3278 100644
--- a/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
+++ b/frontend/app/components/shared/Insights/SankeyChart/NodeButton.tsx
@@ -8,16 +8,11 @@ interface Props {
 
 function NodeButton(props: Props) {
   const { payload } = props;
-  const [show, setShow] = React.useState(false);
-
-  const toggleMenu = (e: React.MouseEvent) => {
-    setShow(!show);
-  };
 
   return (
     <div className='relative'>
-      <Popover content={
-        <div className='bg-white rounded mt-1 text-xs'>
+      <Popover
+        content={<div className='bg-white rounded mt-1 text-xs'>
           <div className='border-b py-1 px-2 flex items-center'>
             <div className='w-6 shrink-0'>
               <Icon name='link-45deg' size={18} />
@@ -41,20 +36,24 @@ function NodeButton(props: Props) {
               </div>
             </div>
           )}
-        </div>
-      } title={<div className='text-sm'>Title</div>}>
+        </div>}>
         <div
-          className='copy-popover select-none rounded shadow'
+          className='flex items-center copy-popover select-none rounded shadow'
           style={{
             backgroundColor: 'white',
             padding: '3px 6px',
-            width: 'fit-content',
+            // width: 'fit-content',
             fontSize: '12px'
           }}
-          onClick={toggleMenu}
         >
-          {payload.name} <span style={{ fontWeight: 'bold' }}>{Math.round(payload.value) + '%'}</span>
-          {/*{' '} <span style={{}}>{payload.avgTimeFromPrevious}</span>*/}
+          <div style={{
+            maxWidth: '120px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            marginRight: '5px'
+          }}>{payload.name}</div>
+          <span style={{ fontWeight: 'bold' }}>{Math.round(payload.value) + '%'}</span>
         </div>
       </Popover>
     </div>