fix: remove tooltip from dom tree while invisible

Signed-off-by: Zxilly <[email protected]>
Zxilly · Jul 7, 2024 · e704405 · e704405
1 parent 029a047
commit e704405
Show file tree

Hide file tree

Showing 5 changed files with 3 additions and 31 deletions.
diff --git a/ui/src/Tooltip.test.tsx b/ui/src/Tooltip.test.tsx
@@ -29,38 +29,23 @@ function getTestNode(): Entry {
   };
 }
 
-it("tooltip should render correctly when visible", () => {
+it("tooltip should render", () => {
   const { getByText } = render(
     <Tooltip
       x={0}
       y={0}
-      visible
       node={getTestNode()}
     />,
   );
   expect(getByText("test")).toBeInTheDocument();
   expect(getByText("test content")).toBeInTheDocument();
 });
 
-it("tooltip should not render when not visible", () => {
-  const r = render(
-    <Tooltip
-      x={0}
-      y={0}
-      visible={false}
-      node={getTestNode()}
-    />,
-  );
-    // should have a tooltip-hidden class
-  expect(r.container.querySelector(".tooltip-hidden")).not.toBeNull();
-});
-
 it("tooltip should respond to position", () => {
   const r = render(
     <Tooltip
       x={0}
       y={0}
-      visible
       node={getTestNode()}
     />,
   );

diff --git a/ui/src/Tooltip.tsx b/ui/src/Tooltip.tsx
@@ -6,7 +6,6 @@ const Tooltip_marginY = 30;
 
 export interface TooltipProps {
   node?: Entry;
-  visible: boolean;
   x: number;
   y: number;
 }
@@ -16,7 +15,6 @@ export const Tooltip: React.FC<TooltipProps>
       x,
       y,
       node,
-      visible,
     }) => {
       const ref = useRef<HTMLDivElement>(null);
       const [style, setStyle] = useState({});
@@ -56,7 +54,7 @@ export const Tooltip: React.FC<TooltipProps>
       }, [x, y]);
 
       return (
-        <div className={`tooltip ${visible ? "" : "tooltip-hidden"}`} ref={ref} style={style}>
+        <div className="tooltip" ref={ref} style={style}>
           <div>{path}</div>
           <pre>
             {content}

diff --git a/ui/src/TreeMap.tsx b/ui/src/TreeMap.tsx
@@ -239,7 +239,7 @@ function TreeMap({ entry }: TreeMapProps) {
 
   return (
     <>
-      <Tooltip visible={showTooltip} node={tooltipNode?.data} x={tooltipPosition[0]} y={tooltipPosition[1]} />
+      {showTooltip && <Tooltip node={tooltipNode?.data} x={tooltipPosition[0]} y={tooltipPosition[1]} />}
       <svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${width} ${height}`} ref={svgRef}>
         {nodes}
       </svg>

diff --git a/ui/src/__snapshots__/Treemap.test.tsx.snap b/ui/src/__snapshots__/Treemap.test.tsx.snap
@@ -13247,12 +13247,6 @@ ResultImpl {
 
 exports[`treemap 2`] = `
 <div>
-  <div
-    class="tooltip "
-  >
-    <div />
-    <pre />
-  </div>
   <svg
     viewBox="0 0 1024 768"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/ui/src/style.scss b/ui/src/style.scss
@@ -68,11 +68,6 @@ svg {
   color: var(--text-color);
 }
 
-.tooltip-hidden {
-  visibility: hidden;
-  opacity: 0;
-}
-
 .node {
   cursor: pointer;
 }