perf: memorize nodes

Signed-off-by: Zxilly <[email protected]>
Zxilly · Jul 7, 2024 · 5a770a6 · 5a770a6
1 parent e7914b9
commit 5a770a6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 34 deletions.
diff --git a/ui/src/Node.tsx b/ui/src/Node.tsx
@@ -13,7 +13,7 @@ export interface NodeProps {
   getModuleColor: NodeColorGetter;
 }
 
-export const Node: React.FC<NodeProps> = (
+export const Node: React.FC<NodeProps> = React.memo((
   {
     node,
     onClick,
@@ -117,4 +117,4 @@ export const Node: React.FC<NodeProps> = (
       </text>
     </g>
   );
-};
+});
diff --git a/ui/src/Tooltip.tsx b/ui/src/Tooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { Entry } from "./tool/entry.ts";
 
 const Tooltip_marginX = 10;
@@ -7,10 +7,14 @@ const Tooltip_marginY = 30;
 export interface TooltipProps {
   node?: Entry;
   visible: boolean;
+  x: number;
+  y: number;
 }
 
 export const Tooltip: React.FC<TooltipProps>
     = ({
+      x,
+      y,
       node,
       visible,
     }) => {
@@ -27,13 +31,13 @@ export const Tooltip: React.FC<TooltipProps>
         return node?.toString() ?? "";
       }, [node]);
 
-      const updatePosition = useCallback((mouseCoords: { x: number; y: number }) => {
+      useEffect(() => {
         if (!ref.current)
           return;
 
         const pos = {
-          left: mouseCoords.x + Tooltip_marginX,
-          top: mouseCoords.y + Tooltip_marginY,
+          left: x + Tooltip_marginX,
+          top: y + Tooltip_marginY,
         };
 
         const boundingRect = ref.current.getBoundingClientRect();
@@ -45,25 +49,11 @@ export const Tooltip: React.FC<TooltipProps>
 
         if (pos.top + boundingRect.height > window.innerHeight) {
           // Flipping vertically
-          pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+          pos.top = y - Tooltip_marginY - boundingRect.height;
         }
 
         setStyle(pos);
-      }, []);
-
-      useEffect(() => {
-        const handleMouseMove = (event: MouseEvent) => {
-          updatePosition({
-            x: event.pageX,
-            y: event.pageY,
-          });
-        };
-
-        document.addEventListener("mousemove", handleMouseMove, true);
-        return () => {
-          document.removeEventListener("mousemove", handleMouseMove, true);
-        };
-      }, [updatePosition]);
+      }, [x, y]);
 
       return (
         <div className={`tooltip ${visible ? "" : "tooltip-hidden"}`} ref={ref} style={style}>

diff --git a/ui/src/TreeMap.tsx b/ui/src/TreeMap.tsx
@@ -144,7 +144,8 @@ function TreeMap({ entry }: TreeMapProps) {
     setSelectedNode(cur);
   }, [hash, root, entry]);
 
-  const [showTooltip, setShowTooltip] = useState(true);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState<[number, number]>([0, 0]);
   const [tooltipNode, setTooltipNode]
         = useState<HierarchyRectangularNode<Entry> | undefined>(undefined);
 
@@ -197,13 +198,22 @@ function TreeMap({ entry }: TreeMapProps) {
       }
 
       setTooltipNode(node);
+      setTooltipPosition([e.clientX, e.clientY]);
+
+      if (!showTooltip) {
+        setShowTooltip(true);
+      }
     };
 
     document.addEventListener("mousemove", moveListener);
     return () => {
       document.removeEventListener("mousemove", moveListener);
     };
-  }, [allNodes]);
+  }, [allNodes, showTooltip]);
+
+  const nodeOnClick = useCallback((node: HierarchyRectangularNode<Entry>) => {
+    setSelectedNodeWithHash(selectedNode?.data?.getID() === node.data.getID() ? null : node);
+  }, [selectedNode, setSelectedNodeWithHash]);
 
   const nodes = useMemo(() => {
     return (
@@ -216,9 +226,7 @@ function TreeMap({ entry }: TreeMapProps) {
                   key={node.data.getID()}
                   node={node}
                   selected={selectedNode?.data?.getID() === node.data.getID()}
-                  onClick={(node) => {
-                    setSelectedNodeWithHash(selectedNode?.data?.getID() === node.data.getID() ? null : node);
-                  }}
+                  onClick={nodeOnClick}
                   getModuleColor={getModuleColor}
                 />
               );
@@ -227,11 +235,11 @@ function TreeMap({ entry }: TreeMapProps) {
         );
       })
     );
-  }, [getModuleColor, nestedData, selectedNode?.data, setSelectedNodeWithHash]);
+  }, [getModuleColor, nestedData, nodeOnClick, selectedNode]);
 
   return (
     <>
-      <Tooltip visible={showTooltip} node={tooltipNode?.data} />
+      <Tooltip visible={showTooltip} 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/explorer/FileSelector.tsx b/ui/src/explorer/FileSelector.tsx
@@ -55,7 +55,7 @@ export function FileSelector({ handler }: {
             {pendingFile?.name}
             {" "}
             has a size of
-            {formatBytes(pendingFile?.size || 0)}
+            {` ${formatBytes(pendingFile?.size || 0)}`}
             .
             It is not recommended to use the wasm version for binary files larger than 30 MB.
           </DialogContentText>

diff --git a/ui/vite.common.ts b/ui/vite.common.ts
@@ -4,7 +4,7 @@ import process from "node:process";
 import type { BuildOptions, HtmlTagDescriptor, Plugin, PluginOption } from "vite";
 import { codecovVitePlugin } from "@codecov/vite-plugin";
 import react from "@vitejs/plugin-react-swc";
-import MillionLint from "@million/lint";
+// import MillionLint from "@million/lint";
 
 export function getSha(): string | undefined {
   const envs = process.env;
@@ -64,9 +64,9 @@ export function codecov(name: string): Plugin[] | undefined {
 export function commonPlugin(): (PluginOption[] | Plugin | Plugin[])[] {
   return [
     react(),
-    MillionLint.vite({
-      optimizeDOM: true,
-    }),
+    // MillionLint.vite({
+    //   optimizeDOM: true,
+    // }),
   ];
 }