sfja.skp/slige
1
0
Fork 0
mirror of https://git.sfja.dk/Mikkel/slige.git synced 2025-01-18 04: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;
}
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,