sfja.skp/slige
1
0
Fork 0
mirror of https://git.sfja.dk/Mikkel/slige.git synced 2025-01-18 10:56:30 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

flame graph: add so that you can see when you mouse over

Browse Source
This commit is contained in:
sfja 2024-12-18 02:01:19 +01:00
parent 91c4ecf3c4
commit e5c6cec4ed
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/public/src/flamegraph.ts
View File

@ -87,7 +87,7 @@ export function loadFlameGraph(
return textCanvas; return textCanvas;
} }
function renderNodes(nodes: CalcNode[]) { function renderNodes(nodes: CalcNode[], hoverFnId?: number) {
for (const node of nodes) { for (const node of nodes) {
const { x, y, w, h } = node; const { x, y, w, h } = node;
ctx.fillStyle = "rgb(227, 178, 60)"; ctx.fillStyle = "rgb(227, 178, 60)";
@ -125,6 +125,12 @@ export function loadFlameGraph(
Math.min(edgeWidth, (w - 4) / 2), Math.min(edgeWidth, (w - 4) / 2),
h - 4, 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")!; const tooltip = document.getElementById("flame-graph-tooltip")!;
@ -138,15 +144,24 @@ export function loadFlameGraph(
if (!node) { if (!node) {
tooltip.hidden = true; tooltip.hidden = true;
canvas.style.cursor = "default";
return; return;
} }
tooltip.innerText = `${node.title} ${node.percent}`; tooltip.innerText = `${node.title} ${node.percent}`;
tooltip.style.left = `${e.clientX + 20}px`; tooltip.style.left = `${e.clientX + 20}px`;
tooltip.style.top = `${e.clientY + 20}px`; tooltip.style.top = `${e.clientY + 20}px`;
tooltip.hidden = false; 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 = () => { const mouseleaveEvent = () => {
tooltip.hidden = true; tooltip.hidden = true;
canvas.style.cursor = "default";
}; };
const mousedownEvent = (e: MouseEvent) => { const mousedownEvent = (e: MouseEvent) => {
const x = e.offsetX; const x = e.offsetX;
@ -159,6 +174,7 @@ export function loadFlameGraph(
return; return;
} }
tooltip.hidden = true; tooltip.hidden = true;
canvas.style.cursor = "default";
const newNodes: CalcNode[] = []; const newNodes: CalcNode[] = [];
calculateNodeRects( calculateNodeRects(
newNodes, newNodes,