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

slightly less nefariously terrible code

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2024-11-21 21:05:41 +01:00
parent 1cd5c82945
commit 9c967dc6db
1 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/public/index.js
View File

@ -2,9 +2,7 @@ const codeCoverageDiv = document.querySelector("#code-coverage");
const flameGraphDiv = document.querySelector("#flame-graph"); const flameGraphDiv = document.querySelector("#flame-graph");
function drawText(text, codeCoverageData) { function drawText(text, codeCoverageData) {
const tooltip = document.createElement("div"); const tooltip = document.getElementById("covers-tooltip");
tooltip.style.position = "fixed";
document.body.appendChild(tooltip);
const entries = codeCoverageData.toSorted((a, b) => b.index - a.index); const entries = codeCoverageData.toSorted((a, b) => b.index - a.index);
const charEntries = {}; const charEntries = {};
const elements = []; const elements = [];
@ -26,19 +24,42 @@ function drawText(text, codeCoverageData) {
const span = document.createElement("span"); const span = document.createElement("span");
span.style.backgroundColor = color(Math.min(entry.covers / 25, 1)); span.style.backgroundColor = color(Math.min(entry.covers / 25, 1));
span.innerText = text[index]; span.innerText = text[index];
span.addEventListener("mouseover", (event) => { span.dataset.covers = entry.covers;
tooltip.style.display = "block";
tooltip.style.left = `${event.clientX + 20}px`;
tooltip.style.top = `${event.clientY + 20}px`;
tooltip.innerText = `Ran ${entry.covers} time${
entry.covers !== 1 ? "s" : ""
}`;
});
elements.push(span); elements.push(span);
col += 1; col += 1;
} }
function positionInBox(position, boundingRect) {
const [x, y] = position;
const outside = x < boundingRect.left ||
x >= boundingRect.right || y < boundingRect.top ||
y >= boundingRect.bottom;
return !outside;
}
testytestytesty.append(...elements); testytestytesty.append(...elements);
document.addEventListener("mousemove", (event) => {
const [x, y] = [event.clientX, event.clientY];
const outerBox = testytestytesty.getBoundingClientRect();
if (!positionInBox([x, y], outerBox)) {
console.log("+");
return;
}
const element = elements.find((element) => {
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" : ""}`;
});
} }
function loadCodeCoverage(text, codeCoverageData) { function loadCodeCoverage(text, codeCoverageData) {
@ -213,10 +234,10 @@ 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":[]}]}]}`, `{"fn":0,"acc":257,"parent":0,"children":[{"fn":18,"acc":251,"parent":0,"children":[{"fn":12,"acc":30,"parent":1,"children":[]}]}]}`,
); );
drawText(codeData, codeCoverageData);
loadCodeCoverage(codeData, codeCoverageData); loadCodeCoverage(codeData, codeCoverageData);
loadFlameGraph(flameGraphData, { loadFlameGraph(flameGraphData, {
0: "<entry>", 0: "<entry>",
12: "add", 12: "add",
18: "main", 18: "main",
}); });
drawText(codeData, codeCoverageData);