437 lines
14 KiB
TypeScript
437 lines
14 KiB
TypeScript
import * as data from "./data.ts";
|
|
import { FlameGraphNode } from "./data.ts";
|
|
|
|
type Color = { r: number; g: number; b: number };
|
|
|
|
function lerp2(ratio: number, start: number, end: number) {
|
|
return (1 - ratio) * start + ratio * end;
|
|
}
|
|
|
|
function lerp3(ratio: number, start: number, middle: number, end: number) {
|
|
return (1 - ratio) * lerp2(ratio, start, middle) +
|
|
ratio * lerp2(ratio, middle, end);
|
|
}
|
|
|
|
function colorLerp(
|
|
ratio: number,
|
|
start: Color,
|
|
middle: Color,
|
|
end: Color,
|
|
): Color {
|
|
return {
|
|
r: lerp3(ratio, start.r, middle.r, end.r),
|
|
g: lerp3(ratio, start.g, middle.g, end.g),
|
|
b: lerp3(ratio, start.b, middle.b, end.b),
|
|
};
|
|
}
|
|
|
|
function loadCodeCoverage(
|
|
text: string,
|
|
input: data.CodeCovEntry[],
|
|
container: HTMLPreElement,
|
|
tooltip: HTMLElement,
|
|
) {
|
|
if (input.length === 0) {
|
|
return;
|
|
}
|
|
const entries = input.toSorted((
|
|
a: data.CodeCovEntry,
|
|
b: data.CodeCovEntry,
|
|
) => b.index - a.index);
|
|
const charEntries: { [key: string]: data.CodeCovEntry } = {};
|
|
const elements: HTMLElement[] = [];
|
|
let line = 1;
|
|
let col = 1;
|
|
const maxCovers = entries.map((v) => v.covers).reduce((acc, v) =>
|
|
acc > Math.log10(v) ? acc : Math.log10(v)
|
|
);
|
|
for (let index = 0; index < text.length; ++index) {
|
|
if (text[index] === "\n") {
|
|
col = 1;
|
|
line += 1;
|
|
const newlineSpan = document.createElement("span");
|
|
newlineSpan.innerText = "\n";
|
|
elements.push(newlineSpan);
|
|
continue;
|
|
}
|
|
const entry = entries.find((entry) => index >= entry.index);
|
|
if (!entry) {
|
|
throw new Error("unreachable");
|
|
}
|
|
charEntries[`${line}-${col}`] = entry;
|
|
|
|
const backgroundColor = (ratio: number) => {
|
|
const clr = colorLerp(ratio, { r: 42, g: 121, b: 82 }, {
|
|
r: 247,
|
|
g: 203,
|
|
b: 21,
|
|
}, {
|
|
r: 167,
|
|
g: 29,
|
|
b: 49,
|
|
});
|
|
return `rgb(${clr.r}, ${clr.g}, ${clr.b})`;
|
|
};
|
|
|
|
const span = document.createElement("span");
|
|
span.style.backgroundColor = backgroundColor(
|
|
Math.log10(entry.covers) / maxCovers,
|
|
);
|
|
span.innerText = text[index];
|
|
span.dataset.covers = entry.covers.toString();
|
|
elements.push(span);
|
|
col += 1;
|
|
}
|
|
function positionInBox(
|
|
position: [number, number],
|
|
boundingRect: {
|
|
left: number;
|
|
top: number;
|
|
right: number;
|
|
bottom: number;
|
|
},
|
|
) {
|
|
const [x, y] = position;
|
|
const outside = x < boundingRect.left ||
|
|
x >= boundingRect.right || y < boundingRect.top ||
|
|
y >= boundingRect.bottom;
|
|
return !outside;
|
|
}
|
|
container.append(...elements);
|
|
document.addEventListener("mousemove", (event) => {
|
|
const [x, y] = [event.clientX, event.clientY];
|
|
const outerBox = container.getBoundingClientRect();
|
|
if (!positionInBox([x, y], outerBox)) {
|
|
tooltip.hidden = true;
|
|
return;
|
|
}
|
|
const element = elements.find((element) => {
|
|
if (typeof element === "string") {
|
|
return false;
|
|
}
|
|
if (!element.dataset.covers) {
|
|
return false;
|
|
}
|
|
const isIn = positionInBox([x, y], element.getBoundingClientRect());
|
|
return isIn;
|
|
});
|
|
if (!element) {
|
|
tooltip.hidden = true;
|
|
return;
|
|
}
|
|
const maybeCovers = element.dataset.covers;
|
|
if (!maybeCovers) {
|
|
throw new Error("unreachable");
|
|
}
|
|
const covers = parseInt(maybeCovers);
|
|
tooltip.hidden = false;
|
|
tooltip.style.left = `${event.clientX + 20}px`;
|
|
tooltip.style.top = `${event.clientY + 20}px`;
|
|
tooltip.innerText = `Ran ${covers} time${covers !== 1 ? "s" : ""}`;
|
|
});
|
|
}
|
|
|
|
function loadFlameGraph(
|
|
flameGraphData: data.FlameGraphNode,
|
|
fnNames: data.FlameGraphFnNames,
|
|
flameGraphDiv: HTMLDivElement,
|
|
) {
|
|
flameGraphDiv.innerHTML = `
|
|
<div id="fg-background">
|
|
<div id="canvas-div">
|
|
<canvas id="flame-graph-canvas"></canvas>
|
|
<span id="flame-graph-tooltip" hidden></span>
|
|
</div>
|
|
</div>
|
|
<div id="toolbar">
|
|
<button id="flame-graph-reset">Reset</button>
|
|
</div>
|
|
`;
|
|
|
|
const canvas = document.querySelector<HTMLCanvasElement>(
|
|
"#flame-graph-canvas",
|
|
)!;
|
|
const resetButton = document.querySelector<HTMLButtonElement>(
|
|
"#flame-graph-reset",
|
|
)!;
|
|
|
|
canvas.width = 1000;
|
|
canvas.height = 500;
|
|
|
|
const fnNameFont = "600 14px monospace";
|
|
|
|
const ctx = canvas.getContext("2d")!;
|
|
ctx.font = fnNameFont;
|
|
|
|
type CalcNode = {
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
title: string;
|
|
percent: string;
|
|
fgNode: FlameGraphNode;
|
|
};
|
|
|
|
function calculateNodeRects(
|
|
nodes: CalcNode[],
|
|
node: data.FlameGraphNode,
|
|
depth: number,
|
|
totalAcc: data.FlameGraphNode["acc"],
|
|
offsetAcc: data.FlameGraphNode["acc"],
|
|
) {
|
|
const x = (offsetAcc / totalAcc) * canvas.width;
|
|
const y = canvas.height - 30 * depth - 30;
|
|
const w = ((node.acc + 1) / totalAcc) * canvas.width;
|
|
const h = 30;
|
|
|
|
const title = node.fn == 0
|
|
? "<program>"
|
|
: fnNames[node.fn] ?? "<unknown>";
|
|
const percent = `${(node.acc / totalAcc * 100).toFixed(1)}%`;
|
|
nodes.push({ x, y, w, h, title, percent, fgNode: node });
|
|
|
|
const totalChildrenAcc = node.children.reduce(
|
|
(acc, child) => acc + child.acc,
|
|
0,
|
|
);
|
|
let newOffsetAcc = offsetAcc + (node.acc - totalChildrenAcc) / 2;
|
|
for (const child of node.children) {
|
|
calculateNodeRects(nodes, child, depth + 1, totalAcc, newOffsetAcc);
|
|
newOffsetAcc += child.acc;
|
|
}
|
|
}
|
|
|
|
function drawTextCanvas(node: CalcNode): HTMLCanvasElement {
|
|
const { w, h, title } = node;
|
|
const textCanvas = document.createElement("canvas");
|
|
textCanvas.width = Math.max(w - 8, 1);
|
|
textCanvas.height = h;
|
|
const textCtx = textCanvas.getContext("2d")!;
|
|
textCtx.font = fnNameFont;
|
|
textCtx.fillStyle = "black";
|
|
textCtx.fillText(
|
|
title,
|
|
((w - 10) / 2 - ctx.measureText(title).width / 2) + 5 - 4,
|
|
20,
|
|
);
|
|
return textCanvas;
|
|
}
|
|
|
|
function renderNodes(nodes: CalcNode[]) {
|
|
for (const node of nodes) {
|
|
const { x, y, w, h } = node;
|
|
ctx.fillStyle = "rgb(255, 125, 0)";
|
|
ctx.fillRect(
|
|
x + 2,
|
|
y + 2,
|
|
w - 4,
|
|
h - 4,
|
|
);
|
|
const textCanvas = drawTextCanvas(node);
|
|
ctx.drawImage(textCanvas, x + 4, y);
|
|
}
|
|
const tooltip = document.getElementById("flame-graph-tooltip")!;
|
|
|
|
const mousemoveEvent = (e: MouseEvent) => {
|
|
const x = e.offsetX;
|
|
const y = e.offsetY;
|
|
const node = nodes.find((node) =>
|
|
x >= node.x && x < node.x + node.w && y >= node.y &&
|
|
y < node.y + node.h
|
|
);
|
|
|
|
if (!node) {
|
|
tooltip.hidden = true;
|
|
return;
|
|
}
|
|
tooltip.innerText = `${node.title} ${node.percent}`;
|
|
tooltip.style.left = `${e.clientX + 20}px`;
|
|
tooltip.style.top = `${e.clientY + 20}px`;
|
|
tooltip.hidden = false;
|
|
};
|
|
const mouseleaveEvent = () => {
|
|
tooltip.hidden = true;
|
|
};
|
|
const mousedownEvent = (e: MouseEvent) => {
|
|
const x = e.offsetX;
|
|
const y = e.offsetY;
|
|
const node = nodes.find((node) =>
|
|
x >= node.x && x < node.x + node.w && y >= node.y &&
|
|
y < node.y + node.h
|
|
);
|
|
if (!node) {
|
|
return;
|
|
}
|
|
tooltip.hidden = true;
|
|
const newNodes: CalcNode[] = [];
|
|
calculateNodeRects(
|
|
newNodes,
|
|
node.fgNode,
|
|
0,
|
|
node.fgNode.acc,
|
|
0,
|
|
);
|
|
canvas.removeEventListener("mousemove", mousemoveEvent);
|
|
canvas.removeEventListener("mouseleave", mouseleaveEvent);
|
|
canvas.removeEventListener("mousedown", mousedownEvent);
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
renderNodes(newNodes);
|
|
};
|
|
|
|
canvas.addEventListener("mousemove", mousemoveEvent);
|
|
canvas.addEventListener("mouseleave", mouseleaveEvent);
|
|
canvas.addEventListener("mousedown", mousedownEvent);
|
|
}
|
|
|
|
resetButton.addEventListener("click", () => {
|
|
const nodes: CalcNode[] = [];
|
|
calculateNodeRects(nodes, flameGraphData, 0, flameGraphData.acc, 0);
|
|
renderNodes(nodes);
|
|
});
|
|
|
|
const nodes: CalcNode[] = [];
|
|
calculateNodeRects(nodes, flameGraphData, 0, flameGraphData.acc, 0);
|
|
renderNodes(nodes);
|
|
}
|
|
|
|
async function main() {
|
|
type RenderFns = {
|
|
"source-code": () => void;
|
|
"code-coverage": () => void;
|
|
"flame-graph": () => void;
|
|
};
|
|
|
|
function countLines(code: string) {
|
|
let lines = 0;
|
|
for (const char of code) {
|
|
if (char === "\n") lines += 1;
|
|
}
|
|
return lines;
|
|
}
|
|
|
|
function createLineElement(code: string): HTMLPreElement {
|
|
const lines = countLines(code) + 1;
|
|
const maxLineWidth = lines.toString().length;
|
|
let text = "";
|
|
for (let i = 1; i < lines; ++i) {
|
|
const node = i.toString().padStart(maxLineWidth);
|
|
text += node;
|
|
text += "\n";
|
|
}
|
|
const lineElement = document.createElement("pre");
|
|
lineElement.classList.add("code-lines");
|
|
lineElement.innerText = text;
|
|
return lineElement;
|
|
}
|
|
|
|
const codeData = await data.codeData();
|
|
|
|
const view = document.querySelector("#view")!;
|
|
const renderFunctions: RenderFns = {
|
|
"source-code": () => {
|
|
const outerContainer = document.createElement("div");
|
|
outerContainer.classList.add("code-container");
|
|
|
|
const innerContainer = document.createElement("div");
|
|
innerContainer.classList.add("code-container-inner");
|
|
|
|
const lines = createLineElement(codeData);
|
|
const code = document.createElement("pre");
|
|
|
|
code.classList.add("code-source");
|
|
code.innerText = codeData;
|
|
innerContainer.append(lines, code);
|
|
outerContainer.append(innerContainer);
|
|
view.replaceChildren(outerContainer);
|
|
},
|
|
"code-coverage": async () => {
|
|
if (await data.status().then((r) => r.running)) {
|
|
return;
|
|
}
|
|
const codeCoverageData = await data.codeCoverageData();
|
|
|
|
const outerContainer = document.createElement("div");
|
|
outerContainer.classList.add("code-container");
|
|
|
|
const innerContainer = document.createElement("div");
|
|
innerContainer.classList.add("code-container-inner");
|
|
|
|
const tooltip = document.createElement("div");
|
|
tooltip.id = "covers-tooltip";
|
|
tooltip.hidden = true;
|
|
const code = document.createElement("pre");
|
|
code.classList.add("code-source");
|
|
loadCodeCoverage(
|
|
codeData,
|
|
codeCoverageData,
|
|
code,
|
|
tooltip,
|
|
);
|
|
const lines = createLineElement(codeData);
|
|
innerContainer.append(lines, code);
|
|
outerContainer.append(innerContainer);
|
|
const view = document.querySelector("#view")!;
|
|
view.replaceChildren(outerContainer, tooltip);
|
|
},
|
|
"flame-graph": async () => {
|
|
if (await data.status().then((r) => r.running)) {
|
|
return;
|
|
}
|
|
const flameGraphData = await data.flameGraphData();
|
|
const flameGraphFnNames = await data.flameGraphFnNames();
|
|
|
|
const container = document.createElement("div");
|
|
container.classList.add("flame-graph");
|
|
container.id = "flame-graph";
|
|
const view = document.querySelector("#view")!;
|
|
view.replaceChildren(container);
|
|
loadFlameGraph(flameGraphData, flameGraphFnNames, container);
|
|
},
|
|
};
|
|
|
|
const viewRadios: NodeListOf<HTMLInputElement> = document.querySelectorAll(
|
|
'input[name="views"]',
|
|
);
|
|
for (const input of viewRadios) {
|
|
input.addEventListener("input", (ev) => {
|
|
const target = ev.target as HTMLInputElement;
|
|
const value = target.value as keyof RenderFns;
|
|
renderFunctions[value]();
|
|
});
|
|
if (input.checked) {
|
|
const value = input.value as keyof RenderFns;
|
|
renderFunctions[value]();
|
|
}
|
|
}
|
|
|
|
async function checkStatus(): Promise<"running" | "done"> {
|
|
const status = await data.status();
|
|
|
|
if (status.running) {
|
|
return "running";
|
|
}
|
|
const statusHtml = document.querySelector<HTMLSpanElement>(
|
|
"#status",
|
|
)!;
|
|
statusHtml.innerText = "Done";
|
|
document.body.classList.remove("status-waiting");
|
|
document.body.classList.add("status-done");
|
|
return "done";
|
|
}
|
|
|
|
checkStatus().then((status) => {
|
|
if (status == "done") {
|
|
return;
|
|
}
|
|
const interval = setInterval(async () => {
|
|
const status = await checkStatus();
|
|
if (status == "done") {
|
|
clearInterval(interval);
|
|
}
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
main();
|