slige-mirror/web/public/src/index.ts

type CodeCovEntry = {
    index: number;
    line: number;
    col: number;
    covers: number;
};

function loadCodeCoverage(
    text: string,
    codeCoverageData: CodeCovEntry[],
    codeCoverageDiv: HTMLPreElement,
) {
    const tooltip = document.createElement("span");
    tooltip.id = "covers-tooltip";
    codeCoverageDiv.append(tooltip);
    const entries = codeCoverageData.toSorted((
        a: CodeCovEntry,
        b: CodeCovEntry,
    ) => b.index - a.index);
    const charEntries: { [key: string]: CodeCovEntry } = {};
    const elements: HTMLElement[] = [];
    let line = 1;
    let col = 1;
    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 color = (ratio: number) =>
            `rgba(${255 - 255 * ratio}, ${255 * ratio}, 125, 0.5)`;

        const span = document.createElement("span");
        span.style.backgroundColor = color(Math.min(entry.covers / 25, 1));
        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;
    }
    codeCoverageDiv.append(...elements);
    document.addEventListener("mousemove", (event) => {
        const [x, y] = [event.clientX, event.clientY];
        const outerBox = codeCoverageDiv.getBoundingClientRect();
        if (!positionInBox([x, y], outerBox)) {
            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 covers = parseInt(element.dataset.covers);
        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" : ""}`;
    });
}

// @ts-ignore: unsure of relevant types
function loadFlameGraph(flameGraphData, fnNames, flameGraphDiv) {
    flameGraphDiv.innerHTML = `
        <canvas id="flame-graph-canvas"></canvas>
        <span id="flame-graph-tooltip" hidden></span>
    `;

    const canvas = document.querySelector<HTMLCanvasElement>(
        "#flame-graph-canvas",
    )!;
    canvas.width = 1000;
    canvas.height = 500;

    const ctx = canvas.getContext("2d")!;
    ctx.font = "16px monospace";

    type Node = {
        x: number;
        y: number;
        w: number;
        h: number;
        title: string;
        percent: string;
    };

    const nodes: Node[] = [];

    // @ts-ignore: unsure of relevant types
    function calculateNodeRects(node, depth, totalAcc, offsetAcc) {
        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 = fnNames[node.fn];
        const percent = `${(node.acc / totalAcc * 100).toFixed(1)}%`;
        nodes.push({ x, y, w, h, title, percent });

        const totalChildrenAcc = node.children.reduce(
            // @ts-ignore: unsure of relevant types
            (acc, child) => acc + child.acc,
            0,
        );
        let newOffsetAcc = offsetAcc + (node.acc - totalChildrenAcc) / 2;
        for (const child of node.children) {
            calculateNodeRects(child, depth + 1, totalAcc, newOffsetAcc);
            newOffsetAcc += child.acc;
        }
    }
    calculateNodeRects(flameGraphData, 0, flameGraphData.acc, 0);

    for (const node of nodes) {
        const { x, y, w, h, title } = node;
        ctx.fillStyle = "rgb(255, 125, 0)";
        ctx.fillRect(
            x + 1,
            y + 1,
            w - 2,
            h - 2,
        );
        ctx.fillStyle = "black";
        ctx.fillText(
            title,
            (x + (w - 10) / 2 - ctx.measureText(title).width / 2) + 5,
            y + 20,
        );
    }

    const tooltip = document.getElementById("flame-graph-tooltip")!;

    canvas.addEventListener("mousemove", (e) => {
        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;
    });
    canvas.addEventListener("mouseleave", () => {
        tooltip.hidden = true;
    });
}

function main() {
    const codeData = `\
fn add(a, b) {
    + a b
}

let result = 0;
let i = 0;
loop {
    if >= i 10 {
        break;
    }
    result = add(result, 5);
    i = + i 1;
}
`;

    const codeCoverageData = JSON.parse(
        `[{"index":0,"line":1,"col":1,"covers":2},{"index":28,"line":5,"col":1,"covers":1},{"index":44,"line":6,"col":1,"covers":1},{"index":55,"line":7,"col":1,"covers":1},{"index":66,"line":8,"col":5,"covers":11},{"index":104,"line":11,"col":5,"covers":10},{"index":19,"line":2,"col":5,"covers":10},{"index":133,"line":12,"col":5,"covers":10},{"index":87,"line":9,"col":9,"covers":1}]`,
    );

    const flameGraphData = JSON.parse(
        `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`,
    );

    type RenderFns = {
        "source-code": () => void;
        "code-coverage": () => void;
        "flame-graph": () => void;
    };

    const view = document.querySelector("#view")!;
    const renderFunctions: RenderFns = {
        "source-code": () => {
            const code = document.createElement("pre");
            code.innerHTML = codeData;
            view.replaceChildren(code);
        },
        "code-coverage": () => {
            const codeCoverageElement = document.createElement("pre");
            loadCodeCoverage(codeData, codeCoverageData, codeCoverageElement);
            const view = document.querySelector("#view")!;
            view.replaceChildren(codeCoverageElement);
        },
        "flame-graph": () => {},
    };

    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]();
        }
    }

    // loadCodeCoverage(codeData, codeCoverageData);
    // loadFlameGraph(flameGraphData, {
    //     0: "<entry>",
    //     12: "add",
    //     18: "main",
    // });
}

main();