From e1416bd0e50f4ccdbadd1b967b2dc426b44d21a8 Mon Sep 17 00:00:00 2001 From: Theis Pieter Hollebeek Date: Mon, 16 Dec 2024 15:33:12 +0100 Subject: [PATCH] test view --- examples/test_mul.slg | 19 ++++++++++++ web/public/deno.jsonc | 2 +- web/public/src/code_coverage.ts | 53 ++++++++++++++++++++++----------- web/public/src/index.ts | 44 ++++++++++++++++++--------- web/public/style.css | 3 ++ 5 files changed, 88 insertions(+), 33 deletions(-) create mode 100644 examples/test_mul.slg diff --git a/examples/test_mul.slg b/examples/test_mul.slg new file mode 100644 index 0000000..36d13ea --- /dev/null +++ b/examples/test_mul.slg @@ -0,0 +1,19 @@ +fn print(msg: string) #[builtin(Print)] {} +fn println(msg: string) { print(msg + "\n") } + +fn mul(left: int, right: int) -> int { + if left == 0 or right == 0 { + 0 + } else { + left * right + } +} + +fn main() { + if mul(10,2) == 20 { + print("test 1 passed") + } + if mul(3,2) == 6 { + print("test 2 passed") + } +} diff --git a/web/public/deno.jsonc b/web/public/deno.jsonc index 7466083..dc38e78 100644 --- a/web/public/deno.jsonc +++ b/web/public/deno.jsonc @@ -1,6 +1,6 @@ { "tasks": { - "bundle": "deno run --allow-read --allow-write --allow-env --allow-run bundle.ts" + "bundle": "deno run --check --allow-read --allow-write --allow-env --allow-run bundle.ts" }, "compilerOptions": { "checkJs": false, diff --git a/web/public/src/code_coverage.ts b/web/public/src/code_coverage.ts index c14862f..c60a4c0 100644 --- a/web/public/src/code_coverage.ts +++ b/web/public/src/code_coverage.ts @@ -24,14 +24,34 @@ function colorLerp( }; } +function colorToString(color: Color): string { + return `rgb(${color.r}, ${color.g}, ${color.b})`; +} + +const GREEN = { r: 42, g: 121, b: 82 }; +const YELLOW = { + r: 247, + g: 203, + b: 21, +}; +const RED = { + r: 167, + g: 29, + b: 49, +}; + +export type CodeCovRender = "performance" | "test-coverage"; + export function loadCodeCoverage( text: string, input: data.CodeCovEntry[], - container: HTMLPreElement, tooltip: HTMLElement, -) { + mode: CodeCovRender, +): HTMLPreElement { + const container = document.createElement("pre"); + container.classList.add("code-source"); if (input.length === 0) { - return; + return container; } const entries = input.toSorted(( a: data.CodeCovEntry, @@ -41,7 +61,7 @@ export function loadCodeCoverage( const elements: HTMLElement[] = []; let line = 1; let col = 1; - const maxCovers = entries.map((v) => v.covers).reduce((acc, v) => + const maxPerfCovers = entries.map((v) => v.covers).reduce((acc, v) => acc > Math.log10(v) ? acc : Math.log10(v) ); for (let index = 0; index < text.length; ++index) { @@ -59,23 +79,19 @@ export function loadCodeCoverage( } 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 perfColor = (ratio: number) => { + const clr = colorLerp(ratio, GREEN, YELLOW, RED); + return colorToString(clr); }; const span = document.createElement("span"); - span.style.backgroundColor = backgroundColor( - Math.log10(entry.covers) / maxCovers, - ); + span.style.backgroundColor = mode === "performance" + ? perfColor( + Math.log10(entry.covers) / maxPerfCovers, + ) + : entry.covers > 0 + ? colorToString(GREEN) + : colorToString(RED); span.innerText = text[index]; span.dataset.covers = entry.covers.toString(); elements.push(span); @@ -128,4 +144,5 @@ export function loadCodeCoverage( tooltip.style.top = `${event.clientY + 20}px`; tooltip.innerText = `Ran ${covers} time${covers !== 1 ? "s" : ""}`; }); + return container; } diff --git a/web/public/src/index.ts b/web/public/src/index.ts index eab7f27..85c7a1b 100644 --- a/web/public/src/index.ts +++ b/web/public/src/index.ts @@ -1,4 +1,4 @@ -import { loadCodeCoverage } from "./code_coverage.ts"; +import { CodeCovRender, loadCodeCoverage } from "./code_coverage.ts"; import * as data from "./data.ts"; import { loadFlameGraph } from "./flamegraph.ts"; @@ -69,6 +69,7 @@ async function codeCoverage(view: Element, codeData: string) { function createRadio( id: string, content: string, + checked: boolean, ): [HTMLDivElement, HTMLInputElement] { const label = document.createElement("label"); label.htmlFor = id; @@ -78,6 +79,7 @@ async function codeCoverage(view: Element, codeData: string) { input.name = "coverage-radio"; input.type = "radio"; input.hidden = true; + input.checked = checked; const container = document.createElement("div"); container.classList.add("coverage-radio-group"); container.append(input, label); @@ -85,29 +87,43 @@ async function codeCoverage(view: Element, codeData: string) { } const [perfGroup, perfInput] = createRadio( "performance-coverage", - "Performance", + "Performance view", + true, ); - const [testGroup, testRadio] = createRadio("test-coverage", "Test"); + const [testGroup, testInput] = createRadio( + "test-coverage", + "Test view", + false, + ); + + function load(mode: CodeCovRender, tooltip: HTMLDivElement) { + const lines = createLineElement(codeData); + const code = loadCodeCoverage( + codeData, + codeCoverageData, + tooltip, + mode, + ); + innerContainer.replaceChildren(lines, code); + } const radios = document.createElement("div"); radios.append(perfGroup, testGroup); radios.classList.add("coverage-radio"); - 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); view.replaceChildren(outerContainer, tooltip, radios); + + if (perfInput.checked) { + load("performance", tooltip); + } else if (testInput.checked) { + load("test-coverage", tooltip); + } + + perfInput.addEventListener("input", () => load("performance", tooltip)); + testInput.addEventListener("input", () => load("test-coverage", tooltip)); } async function main() { diff --git a/web/public/style.css b/web/public/style.css index 924de14..9009b0f 100644 --- a/web/public/style.css +++ b/web/public/style.css @@ -131,6 +131,7 @@ main #cover { #views-nav input:checked + label { background-color: var(--code-status); color: var(--black); + font-weight: bold; } #views-layout { @@ -176,6 +177,8 @@ main #cover { .coverage-radio-group input:checked ~ label { background-color: var(--code-status); + color: var(--black); + font-weight: bold; } #flame-graph {