From e5c6cec4ede7a0b812f9e1c45f1ae5c1903c7fd2 Mon Sep 17 00:00:00 2001
From: sfja <sfja2004@gmail.com>
Date: Wed, 18 Dec 2024 02:01:19 +0100
Subject: [PATCH] flame graph: add so that you can see when you mouse over

---
 web/public/src/flamegraph.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/public/src/flamegraph.ts b/web/public/src/flamegraph.ts
index 3572b34..d6d8353 100644
--- a/web/public/src/flamegraph.ts
+++ b/web/public/src/flamegraph.ts
@@ -87,7 +87,7 @@ export function loadFlameGraph(
         return textCanvas;
     }
 
-    function renderNodes(nodes: CalcNode[]) {
+    function renderNodes(nodes: CalcNode[], hoverFnId?: number) {
         for (const node of nodes) {
             const { x, y, w, h } = node;
             ctx.fillStyle = "rgb(227, 178, 60)";
@@ -125,6 +125,12 @@ export function loadFlameGraph(
                 Math.min(edgeWidth, (w - 4) / 2),
                 h - 4,
             );
+
+            if (hoverFnId === node.fgNode.fn) {
+                ctx.strokeStyle = canvas.style.backgroundColor;
+                ctx.lineWidth = 1;
+                ctx.strokeRect(x + 2, y + 2, w - 4, h - 4);
+            }
         }
         const tooltip = document.getElementById("flame-graph-tooltip")!;
 
@@ -138,15 +144,24 @@ export function loadFlameGraph(
 
             if (!node) {
                 tooltip.hidden = true;
+                canvas.style.cursor = "default";
                 return;
             }
             tooltip.innerText = `${node.title} ${node.percent}`;
             tooltip.style.left = `${e.clientX + 20}px`;
             tooltip.style.top = `${e.clientY + 20}px`;
             tooltip.hidden = false;
+            canvas.style.cursor = "pointer";
+
+            canvas.removeEventListener("mousemove", mousemoveEvent);
+            canvas.removeEventListener("mouseleave", mouseleaveEvent);
+            canvas.removeEventListener("mousedown", mousedownEvent);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            renderNodes(nodes, node.fgNode.fn);
         };
         const mouseleaveEvent = () => {
             tooltip.hidden = true;
+            canvas.style.cursor = "default";
         };
         const mousedownEvent = (e: MouseEvent) => {
             const x = e.offsetX;
@@ -159,6 +174,7 @@ export function loadFlameGraph(
                 return;
             }
             tooltip.hidden = true;
+            canvas.style.cursor = "default";
             const newNodes: CalcNode[] = [];
             calculateNodeRects(
                 newNodes,