fix: ensure tooltip is in view

btd · Mar 2, 2024 · 0b1b95f · 0b1b95f
1 parent dec8398
commit 0b1b95f
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 89 deletions.
diff --git a/src/flamegraph/tooltip.tsx b/src/flamegraph/tooltip.tsx
@@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
 
     if (pos.left + boundingRect.width > window.innerWidth) {
       // Shifting horizontally
-      pos.left = window.innerWidth - boundingRect.width;
+      pos.left = Math.max(0, window.innerWidth - boundingRect.width);
     }
 
     if (pos.top + boundingRect.height > window.innerHeight) {
       // Flipping vertically
-      pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+      pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
     }
 
     setStyle(pos);

diff --git a/src/network/tooltip.tsx b/src/network/tooltip.tsx
@@ -50,12 +50,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({ node, visible }) =>
 
     if (pos.left + boundingRect.width > window.innerWidth) {
       // Shifting horizontally
-      pos.left = window.innerWidth - boundingRect.width;
+      pos.left = Math.max(0, window.innerWidth - boundingRect.width);
     }
 
     if (pos.top + boundingRect.height > window.innerHeight) {
       // Flipping vertically
-      pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+      pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
     }
 
     setStyle(pos);

diff --git a/src/style/_base.scss b/src/style/_base.scss
@@ -60,8 +60,6 @@ main {
 
   padding: 5px;
 
-  white-space: nowrap;
-
   font-size: 0.875rem;
 
   background-color: var(--background-color);
@@ -139,4 +137,4 @@ main {
 
 .node {
   cursor: pointer;
-}
+}
diff --git a/src/treemap/tooltip.tsx b/src/treemap/tooltip.tsx
@@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
 
     if (pos.left + boundingRect.width > window.innerWidth) {
       // Shifting horizontally
-      pos.left = window.innerWidth - boundingRect.width;
+      pos.left = Math.max(0, window.innerWidth - boundingRect.width);
     }
 
     if (pos.top + boundingRect.height > window.innerHeight) {
       // Flipping vertically
-      pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+      pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
     }
 
     setStyle(pos);

diff --git a/test/__snapshots__/e2e.test.ts.snap b/test/__snapshots__/e2e.test.ts.snap
@@ -69,7 +69,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -2962,11 +2961,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -4666,7 +4665,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -9582,11 +9580,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -10111,7 +10109,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -15008,7 +15005,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -18291,11 +18287,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -19854,7 +19850,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -22747,11 +22742,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -24457,7 +24452,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -29373,11 +29367,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -29902,7 +29896,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -34799,7 +34792,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -38082,11 +38074,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };

diff --git a/test/__snapshots__/gh59.test.ts.snap b/test/__snapshots__/gh59.test.ts.snap
@@ -69,7 +69,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -2962,11 +2961,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -4669,7 +4668,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -9585,11 +9583,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -10121,7 +10119,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -15018,7 +15015,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -18301,11 +18297,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -19864,7 +19860,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -22757,11 +22752,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -24472,7 +24467,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -29388,11 +29382,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -29928,7 +29922,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -34825,7 +34818,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -38108,11 +38100,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };