benchforge 0.1.11 → 0.2.4

package/dist/browser/index.js

@@ -1,914 +0,0 @@
-import * as Plot from "@observablehq/plot";
-import * as d3 from "d3";
-
-//#region src/html/browser/CIPlot.ts
-const defaultMargin = {
-	top: 22,
-	right: 12,
-	bottom: 22,
-	left: 12
-};
-const defaultOpts = {
-	width: 260,
-	height: 85,
-	title: "p50 Δ%",
-	smooth: false,
-	direction: "uncertain"
-};
-const colors = {
-	faster: {
-		fill: "#dcfce7",
-		stroke: "#22c55e"
-	},
-	slower: {
-		fill: "#fee2e2",
-		stroke: "#ef4444"
-	},
-	uncertain: {
-		fill: "#dbeafe",
-		stroke: "#3b82f6"
-	}
-};
-const formatPct$1 = (v) => (v >= 0 ? "+" : "") + v.toFixed(0) + "%";
-/** Create a small distribution plot showing histogram with CI shading */
-function createDistributionPlot(histogram, ci, pointEstimate, options = {}) {
-	const opts = {
-		...defaultOpts,
-		...options
-	};
-	const layout = buildLayout(opts.width, opts.height);
-	const svg = createSvg(layout.width, layout.height);
-	if (!histogram?.length) return svg;
-	const { fill, stroke } = colors[opts.direction];
-	const scales = buildScales(histogram, ci, layout);
-	drawTitle(svg, opts.title, layout.margin.left);
-	drawCIRegion(svg, ci, scales, layout, fill);
-	opts.smooth ? drawSmoothedDist(svg, histogram, scales, stroke) : drawHistogramBars(svg, histogram, scales, layout, stroke);
-	drawZeroLine(svg, scales, layout);
-	drawPointEstimate(svg, pointEstimate, scales, layout, stroke);
-	drawCILabels(svg, ci, scales, layout.height);
-	return svg;
-}
-/** Convenience wrapper for ComparisonCI data */
-function createCIPlot(ci, options = {}) {
-	if (!ci.histogram) return createSvg(0, 0);
-	return createDistributionPlot(ci.histogram, ci.ci, ci.percent, {
-		direction: ci.direction,
-		...options
-	});
-}
-function buildLayout(width, height) {
-	const margin = defaultMargin;
-	return {
-		width,
-		height,
-		margin,
-		plot: {
-			w: width - margin.left - margin.right,
-			h: height - margin.top - margin.bottom
-		}
-	};
-}
-function createSvg(w, h) {
-	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	svg.setAttribute("width", String(w));
-	svg.setAttribute("height", String(h));
-	if (w && h) svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
-	return svg;
-}
-/** Compute x/y scale functions mapping data values to SVG coordinates */
-function buildScales(histogram, ci, layout) {
-	const { margin, plot } = layout;
-	const xMin = Math.min(...histogram.map((b) => b.x), ci[0], 0);
-	const xMax = Math.max(...histogram.map((b) => b.x), ci[1], 0);
-	const yMax = Math.max(...histogram.map((b) => b.count));
-	return {
-		x: (v) => margin.left + (v - xMin) / (xMax - xMin) * plot.w,
-		y: (v) => margin.top + plot.h - v / yMax * plot.h
-	};
-}
-function drawTitle(svg, title, x) {
-	svg.appendChild(text(x, 14, title, "start", "13", "#333", "600"));
-}
-function drawCIRegion(svg, ci, scales, layout, fill) {
-	const x = scales.x(ci[0]);
-	const w = scales.x(ci[1]) - x;
-	svg.appendChild(rect(x, layout.margin.top, w, layout.plot.h, {
-		fill,
-		opacity: "0.5"
-	}));
-}
-function drawSmoothedDist(svg, histogram, scales, stroke) {
-	const smoothed = gaussianSmooth([...histogram].sort((a, b) => a.x - b.x), 2);
-	const pts = smoothed.map((b) => `${scales.x(b.x)},${scales.y(b.count)}`);
-	const baseline = scales.y(0);
-	svg.appendChild(path(`M${scales.x(smoothed[0].x)},${baseline}L${pts.join("L")}L${scales.x(smoothed.at(-1).x)},${baseline}Z`, {
-		fill: stroke,
-		opacity: "0.3"
-	}));
-	svg.appendChild(path(`M${pts.join("L")}`, {
-		stroke,
-		fill: "none",
-		strokeWidth: "1.5"
-	}));
-}
-function drawHistogramBars(svg, histogram, scales, layout, stroke) {
-	const sorted = [...histogram].sort((a, b) => a.x - b.x);
-	const binW = sorted.length > 1 ? sorted[1].x - sorted[0].x : 1;
-	const yMax = Math.max(...histogram.map((b) => b.count));
-	const xRange = scales.x(sorted.at(-1).x) - scales.x(sorted[0].x) + binW;
-	for (const bin of sorted) {
-		const barW = binW / xRange * layout.plot.w * .9;
-		const barH = bin.count / yMax * layout.plot.h;
-		svg.appendChild(rect(scales.x(bin.x) - barW / 2, layout.margin.top + layout.plot.h - barH, barW, barH, {
-			fill: stroke,
-			opacity: "0.6"
-		}));
-	}
-}
-function drawZeroLine(svg, scales, layout) {
-	const zeroX = scales.x(0);
-	if (zeroX < layout.margin.left || zeroX > layout.width - layout.margin.right) return;
-	const top = layout.margin.top;
-	svg.appendChild(line(zeroX, top, zeroX, top + layout.plot.h, {
-		stroke: "#666",
-		strokeWidth: "1",
-		strokeDasharray: "3,2"
-	}));
-}
-function drawPointEstimate(svg, pt, scales, layout, stroke) {
-	const x = scales.x(pt);
-	const top = layout.margin.top;
-	svg.appendChild(line(x, top, x, top + layout.plot.h, {
-		stroke,
-		strokeWidth: "2"
-	}));
-}
-function drawCILabels(svg, ci, scales, height) {
-	svg.appendChild(text(scales.x(ci[0]), height - 4, formatPct$1(ci[0]), "middle", "12"));
-	svg.appendChild(text(scales.x(ci[1]), height - 4, formatPct$1(ci[1]), "middle", "12"));
-}
-function text(x, y, content, anchor = "start", size = "9", fill = "#666", weight = "400") {
-	const el = document.createElementNS("http://www.w3.org/2000/svg", "text");
-	el.setAttribute("x", String(x));
-	el.setAttribute("y", String(y));
-	el.setAttribute("text-anchor", anchor);
-	el.setAttribute("font-size", size);
-	el.setAttribute("font-weight", weight);
-	el.setAttribute("fill", fill);
-	el.textContent = content;
-	return el;
-}
-function rect(x, y, w, h, attrs) {
-	const el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-	el.setAttribute("x", String(x));
-	el.setAttribute("y", String(y));
-	el.setAttribute("width", String(w));
-	el.setAttribute("height", String(h));
-	setAttrs(el, attrs);
-	return el;
-}
-/** Apply gaussian kernel smoothing to histogram bins */
-function gaussianSmooth(bins, sigma) {
-	return bins.map((bin, i) => {
-		let sum = 0;
-		let wt = 0;
-		for (let j = 0; j < bins.length; j++) {
-			const w = Math.exp(-((i - j) ** 2) / (2 * sigma ** 2));
-			sum += bins[j].count * w;
-			wt += w;
-		}
-		return {
-			x: bin.x,
-			count: sum / wt
-		};
-	});
-}
-function path(d, attrs) {
-	const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
-	el.setAttribute("d", d);
-	setAttrs(el, attrs);
-	return el;
-}
-function line(x1, y1, x2, y2, attrs) {
-	const el = document.createElementNS("http://www.w3.org/2000/svg", "line");
-	el.setAttribute("x1", String(x1));
-	el.setAttribute("y1", String(y1));
-	el.setAttribute("x2", String(x2));
-	el.setAttribute("y2", String(y2));
-	setAttrs(el, attrs);
-	return el;
-}
-/** Set SVG attributes, converting camelCase keys to kebab-case */
-function setAttrs(el, attrs) {
-	for (const [k, v] of Object.entries(attrs)) el.setAttribute(k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()), v);
-}
-
-//#endregion
-//#region src/html/browser/LegendUtils.ts
-/** Build complete legend marks array */
-function buildLegend(bounds, items) {
-	const xRange = bounds.xMax - bounds.xMin;
-	const legendX = bounds.xMin + xRange * .68;
-	const textX = legendX + xRange * .04;
-	const getY = (i) => bounds.yMax * .98 - i * (bounds.yMax * .08);
-	const marks = [legendBackground(bounds)];
-	for (let i = 0; i < items.length; i++) {
-		const pos = {
-			legendX,
-			y: getY(i),
-			textX,
-			xRange,
-			yMax: bounds.yMax
-		};
-		marks.push(symbolMark(pos, items[i]), textMark(pos, items[i].label));
-	}
-	return marks;
-}
-/** Draw a semi-transparent white background behind the legend area */
-function legendBackground(bounds) {
-	const xRange = bounds.xMax - bounds.xMin;
-	const data = [{
-		x1: bounds.xMin + xRange * .65,
-		x2: bounds.xMin + xRange * 1.05,
-		y1: bounds.yMax * .65,
-		y2: bounds.yMax * 1.05
-	}];
-	return Plot.rect(data, {
-		x1: "x1",
-		x2: "x2",
-		y1: "y1",
-		y2: "y2",
-		fill: "white",
-		fillOpacity: .9,
-		stroke: "#ddd",
-		strokeWidth: 1
-	});
-}
-function symbolMark(pos, item) {
-	switch (item.style) {
-		case "filled-dot": return dotMark(pos.legendX, pos.y, item.color, true);
-		case "hollow-dot": return dotMark(pos.legendX, pos.y, item.color, false);
-		case "vertical-bar": return verticalBarMark(pos, item.color);
-		case "vertical-line": return verticalLineMark(pos, item.color, item.strokeDash);
-		case "rect": return rectMark(pos, item.color);
-	}
-}
-function textMark(pos, label) {
-	const data = [{
-		x: pos.textX,
-		y: pos.y,
-		text: label
-	}];
-	return Plot.text(data, {
-		x: "x",
-		y: "y",
-		text: "text",
-		fontSize: 11,
-		textAnchor: "start",
-		fill: "#333"
-	});
-}
-function dotMark(x, y, color, filled) {
-	return Plot.dot([{
-		x,
-		y
-	}], filled ? {
-		x: "x",
-		y: "y",
-		fill: color,
-		r: 4
-	} : {
-		x: "x",
-		y: "y",
-		stroke: color,
-		fill: "none",
-		strokeWidth: 1.5,
-		r: 4
-	});
-}
-function verticalBarMark(pos, color) {
-	const { legendX, y, xRange, yMax } = pos;
-	const w = xRange * .012;
-	const h = yMax * .05;
-	const data = [{
-		x1: legendX - w / 2,
-		x2: legendX + w / 2,
-		y1: y - h / 2,
-		y2: y + h / 2
-	}];
-	return Plot.rect(data, {
-		x1: "x1",
-		x2: "x2",
-		y1: "y1",
-		y2: "y2",
-		fill: color,
-		fillOpacity: .6
-	});
-}
-function verticalLineMark(pos, color, strokeDash) {
-	const { legendX, y, yMax } = pos;
-	return Plot.ruleX([legendX], {
-		y1: y - yMax * .025,
-		y2: y + yMax * .025,
-		stroke: color,
-		strokeWidth: 2,
-		strokeDasharray: strokeDash
-	});
-}
-function rectMark(pos, color) {
-	const { legendX, y, xRange, yMax } = pos;
-	const data = [{
-		x1: legendX - xRange * .01,
-		x2: legendX + xRange * .03,
-		y1: y - yMax * .02,
-		y2: y + yMax * .02
-	}];
-	const opts = {
-		x1: "x1",
-		x2: "x2",
-		y1: "y1",
-		y2: "y2",
-		fill: color,
-		fillOpacity: .3,
-		stroke: color,
-		strokeWidth: 1
-	};
-	return Plot.rect(data, opts);
-}
-
-//#endregion
-//#region src/html/browser/HistogramKde.ts
-/** Create histogram + KDE plot for sample distribution */
-function createHistogramKde(allSamples, benchmarkNames) {
-	const { barData, binMin, binMax, yMax } = buildBarData(allSamples, benchmarkNames);
-	const { colorMap, legendItems } = buildColorData(benchmarkNames);
-	const xMax = binMax + (binMax - binMin) * .45;
-	return Plot.plot({
-		marginTop: 24,
-		marginLeft: 70,
-		marginRight: 10,
-		marginBottom: 60,
-		width: 550,
-		height: 300,
-		style: { fontSize: "14px" },
-		x: {
-			label: "Time (ms)",
-			labelAnchor: "center",
-			domain: [binMin, xMax],
-			labelOffset: 45,
-			tickFormat: (d) => d.toFixed(1),
-			ticks: 5
-		},
-		y: {
-			label: "Count",
-			labelAnchor: "top",
-			labelArrow: false,
-			grid: true,
-			domain: [0, yMax]
-		},
-		marks: [
-			Plot.rectY(barData, {
-				x1: "x1",
-				x2: "x2",
-				y: "count",
-				fill: (d) => colorMap.get(d.benchmark),
-				fillOpacity: .6,
-				tip: true,
-				title: (d) => `${d.benchmark}: ${d.count}`
-			}),
-			Plot.ruleY([0]),
-			...buildLegend({
-				xMin: binMin,
-				xMax,
-				yMax
-			}, legendItems)
-		]
-	});
-}
-/** Bin samples into grouped histogram bars for each benchmark */
-function buildBarData(allSamples, benchmarkNames) {
-	const sorted = allSamples.map((d) => d.value).sort((a, b) => a - b);
-	const binMin = d3.quantile(sorted, .01);
-	const binMax = d3.quantile(sorted, .99);
-	const binCount = 25;
-	const step = (binMax - binMin) / binCount;
-	const thresholds = d3.range(1, binCount).map((i) => binMin + i * step);
-	const plotWidth = 550;
-	const bins = d3.bin().domain([binMin, binMax]).thresholds(thresholds).value((d) => d.value)(allSamples);
-	const barData = [];
-	const n = benchmarkNames.length;
-	const unitsPerPx = (binMax - binMin) / plotWidth;
-	const groupGapPx = 8;
-	for (const bin of bins) {
-		const counts = /* @__PURE__ */ new Map();
-		for (const d of bin) counts.set(d.benchmark, (counts.get(d.benchmark) || 0) + 1);
-		const full = bin.x1 - bin.x0;
-		const groupGap = Math.min(full * .5, unitsPerPx * groupGapPx);
-		const start = bin.x0 + groupGap / 2;
-		const w = (full - groupGap) / n;
-		benchmarkNames.forEach((benchmark, i) => {
-			const x1 = start + i * w;
-			const x2 = start + (i + 1) * w;
-			barData.push({
-				benchmark,
-				count: counts.get(benchmark) || 0,
-				x1,
-				x2
-			});
-		});
-	}
-	return {
-		barData,
-		binMin,
-		binMax,
-		yMax: (d3.max(barData, (d) => d.count) || 1) * 1.15
-	};
-}
-function buildColorData(benchmarkNames) {
-	const scheme = d3.schemeObservable10;
-	return {
-		colorMap: new Map(benchmarkNames.map((name, i) => [name, scheme[i % 10]])),
-		legendItems: benchmarkNames.map((name, i) => ({
-			color: scheme[i % 10],
-			label: name,
-			style: "vertical-bar"
-		}))
-	};
-}
-
-//#endregion
-//#region src/html/browser/SampleTimeSeries.ts
-const OPT_STATUS_NAMES = {
-	1: "interpreted",
-	129: "sparkplug",
-	17: "turbofan",
-	33: "maglev",
-	49: "turbofan+maglev",
-	32769: "optimized"
-};
-const OPT_TIER_COLORS = {
-	turbofan: "#22c55e",
-	optimized: "#22c55e",
-	"turbofan+maglev": "#22c55e",
-	maglev: "#eab308",
-	sparkplug: "#f97316",
-	interpreted: "#dc3545"
-};
-/** Create sample time series showing each sample in order */
-function createSampleTimeSeries(timeSeries, gcEvents = [], pausePoints = [], heapSeries = []) {
-	const ctx = buildPlotContext(timeSeries);
-	const heapData = prepareHeapData(heapSeries, ctx.yMin, ctx.yMax);
-	return Plot.plot({
-		marginTop: 24,
-		marginLeft: 70,
-		marginBottom: 60,
-		marginRight: 110,
-		width: 550,
-		height: 300,
-		style: { fontSize: "14px" },
-		x: {
-			label: "Sample",
-			labelAnchor: "center",
-			labelOffset: 45,
-			grid: true,
-			domain: [ctx.xMin, ctx.xMax]
-		},
-		y: {
-			label: `Time (${ctx.unitSuffix})`,
-			labelAnchor: "top",
-			labelArrow: false,
-			grid: true,
-			domain: [ctx.yMin, ctx.yMax],
-			tickFormat: ctx.formatValue
-		},
-		color: {
-			legend: false,
-			scheme: "observable10"
-		},
-		marks: [
-			...heapMarks(heapData, ctx.yMin),
-			...ctx.hasWarmup ? [Plot.ruleX([0], {
-				stroke: "#999",
-				strokeWidth: 1,
-				strokeDasharray: "4,4"
-			})] : [],
-			gcMark(gcEvents, ctx.yMin, ctx.convertValue),
-			...pauseMarks(pausePoints, ctx.yMin, ctx.yMax),
-			...sampleDotMarks(ctx),
-			Plot.ruleY([ctx.yMin], {
-				stroke: "black",
-				strokeWidth: 1
-			}),
-			...buildLegend({
-				xMin: ctx.xMin,
-				xMax: ctx.xMax,
-				yMax: ctx.yMax
-			}, buildLegendItems(ctx.hasWarmup, gcEvents.length, pausePoints.length, heapData.length > 0, ctx.optTiers, ctx.benchmarks))
-		]
-	});
-}
-function buildPlotContext(timeSeries) {
-	const benchmarks = [...new Set(timeSeries.map((d) => d.benchmark))];
-	const sampleData = buildSampleData(timeSeries, benchmarks);
-	const { unitSuffix, convertValue, formatValue } = getTimeUnit(sampleData.map((d) => d.value));
-	const convertedData = sampleData.map((d) => ({
-		...d,
-		displayValue: convertValue(d.value)
-	}));
-	const { yMin, yMax } = computeYRange(convertedData.map((d) => d.displayValue));
-	return {
-		convertedData,
-		xMin: d3.min(convertedData, (d) => d.sample),
-		xMax: d3.max(convertedData, (d) => d.sample),
-		yMin,
-		yMax,
-		unitSuffix,
-		formatValue,
-		convertValue,
-		hasWarmup: convertedData.some((d) => d.isWarmup),
-		optTiers: [...new Set(convertedData.filter((d) => d.optTier && !d.isWarmup).map((d) => d.optTier))].filter((t) => t !== null),
-		benchmarks
-	};
-}
-/** Scale heap byte values into the plot's Y coordinate range */
-function prepareHeapData(heapSeries, yMin, yMax) {
-	if (heapSeries.length === 0) return [];
-	const heapMin = d3.min(heapSeries, (d) => d.value);
-	const heapRange = d3.max(heapSeries, (d) => d.value) - heapMin || 1;
-	const scale = (yMax - yMin) * .25 / heapRange;
-	return heapSeries.map((d) => ({
-		sample: d.iteration,
-		y: yMin + (d.value - heapMin) * scale,
-		heapMB: d.value / 1024 / 1024
-	}));
-}
-function heapMarks(heapData, yMin) {
-	if (heapData.length === 0) return [];
-	return [Plot.areaY(heapData, {
-		x: "sample",
-		y: "y",
-		y1: yMin,
-		fill: "#9333ea",
-		fillOpacity: .15,
-		stroke: "#9333ea",
-		strokeWidth: 1,
-		strokeOpacity: .4
-	}), Plot.tip(heapData, Plot.pointerX({
-		x: "sample",
-		y: "y",
-		title: (d) => `Heap: ${d.heapMB.toFixed(1)} MB`
-	}))];
-}
-function gcMark(gcEvents, yMin, convertValue) {
-	const data = gcEvents.map((gc) => ({
-		x1: gc.sampleIndex,
-		y1: yMin,
-		x2: gc.sampleIndex,
-		y2: yMin + convertValue(gc.duration),
-		duration: gc.duration
-	}));
-	return Plot.link(data, {
-		x1: "x1",
-		y1: "y1",
-		x2: "x2",
-		y2: "y2",
-		stroke: "#22c55e",
-		strokeWidth: 2,
-		strokeOpacity: .8,
-		title: (d) => `GC: ${d.duration.toFixed(2)}ms`
-	});
-}
-function pauseMarks(pausePoints, yMin, yMax) {
-	return pausePoints.map((p) => Plot.ruleX([p.sampleIndex], {
-		y1: yMin,
-		y2: yMax,
-		stroke: "#888",
-		strokeWidth: 1,
-		strokeDasharray: "4,4",
-		strokeOpacity: .7,
-		title: `Pause: ${p.durationMs}ms`
-	}));
-}
-function sampleDotMarks(ctx) {
-	const { convertedData, unitSuffix, formatValue } = ctx;
-	const tipTitle = (d) => d.optTier ? `Sample ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix} [${d.optTier}]` : `Sample ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix}`;
-	return [
-		Plot.dot(convertedData.filter((d) => d.isWarmup), {
-			x: "sample",
-			y: "displayValue",
-			stroke: "#dc3545",
-			fill: "none",
-			strokeWidth: 1.5,
-			r: 3,
-			opacity: .7,
-			title: (d) => `Warmup ${d.sample}: ${formatValue(d.displayValue)}${unitSuffix}`
-		}),
-		Plot.dot(convertedData.filter((d) => d.isBaseline && !d.isWarmup), {
-			x: "sample",
-			y: "displayValue",
-			stroke: "#ffa500",
-			fill: "none",
-			strokeWidth: 2,
-			r: 3,
-			opacity: .8,
-			title: tipTitle
-		}),
-		Plot.dot(convertedData.filter((d) => !d.isBaseline && !d.isWarmup), {
-			x: "sample",
-			y: "displayValue",
-			fill: (d) => d.optTier ? OPT_TIER_COLORS[d.optTier] || "#4682b4" : "#4682b4",
-			r: 3,
-			opacity: .8,
-			title: tipTitle
-		})
-	];
-}
-function buildLegendItems(hasWarmup, gcCount, pauseCount, hasHeap, optTiers, benchmarks) {
-	const items = [];
-	if (hasWarmup) items.push({
-		color: "#dc3545",
-		label: "warmup",
-		style: "hollow-dot"
-	});
-	if (gcCount > 0) items.push({
-		color: "#22c55e",
-		label: `gc (${gcCount})`,
-		style: "vertical-line"
-	});
-	if (pauseCount > 0) items.push({
-		color: "#888",
-		label: `pause (${pauseCount})`,
-		style: "vertical-line",
-		strokeDash: "4,4"
-	});
-	if (hasHeap) items.push({
-		color: "#9333ea",
-		label: "heap",
-		style: "rect"
-	});
-	for (const tier of optTiers) items.push({
-		color: OPT_TIER_COLORS[tier] || "#4682b4",
-		label: tier,
-		style: "filled-dot"
-	});
-	if (optTiers.length === 0) {
-		const sorted = [...benchmarks].sort((a, b) => {
-			const aBase = a.includes("(baseline)");
-			return aBase === b.includes("(baseline)") ? 0 : aBase ? 1 : -1;
-		});
-		for (const bm of sorted) {
-			const isBase = bm.includes("(baseline)");
-			items.push({
-				color: isBase ? "#ffa500" : "#4682b4",
-				label: bm,
-				style: isBase ? "hollow-dot" : "filled-dot"
-			});
-		}
-	}
-	return items;
-}
-function buildSampleData(timeSeries, benchmarks) {
-	const result = [];
-	for (const benchmark of benchmarks) {
-		const isBaseline = benchmark.includes("(baseline)");
-		for (const d of timeSeries.filter((t) => t.benchmark === benchmark)) {
-			const optTier = d.optStatus !== void 0 ? OPT_STATUS_NAMES[d.optStatus] || "unknown" : null;
-			result.push({
-				benchmark,
-				sample: d.iteration,
-				value: d.value,
-				isBaseline,
-				isWarmup: d.isWarmup || false,
-				optTier
-			});
-		}
-	}
-	return result;
-}
-/** Pick display unit (ns/us/ms) based on average value magnitude */
-function getTimeUnit(values) {
-	const avg = d3.mean(values);
-	const fmt0 = (d) => d3.format(",.0f")(d);
-	const fmt1 = (d) => d3.format(",.1f")(d);
-	if (avg < .001) return {
-		unitSuffix: "ns",
-		convertValue: (ms) => ms * 1e6,
-		formatValue: fmt0
-	};
-	if (avg < 1) return {
-		unitSuffix: "μs",
-		convertValue: (ms) => ms * 1e3,
-		formatValue: fmt1
-	};
-	return {
-		unitSuffix: "ms",
-		convertValue: (ms) => ms,
-		formatValue: fmt1
-	};
-}
-/** Compute Y axis range with padding, snapping yMin to a round number */
-function computeYRange(values) {
-	const dataMin = d3.min(values);
-	const dataMax = d3.max(values);
-	const dataRange = dataMax - dataMin;
-	let yMin = dataMin - dataRange * .15;
-	const magnitude = 10 ** Math.floor(Math.log10(Math.abs(yMin)));
-	yMin = Math.floor(yMin / magnitude) * magnitude;
-	if (dataMin > 0 && yMin < 0) yMin = 0;
-	return {
-		yMin,
-		yMax: dataMax + dataRange * .05
-	};
-}
-
-//#endregion
-//#region src/html/browser/RenderPlots.ts
-/** Render all plots for the benchmark report */
-function renderPlots(data) {
-	const gcEnabled = data.metadata.gcTrackingEnabled ?? false;
-	data.groups.forEach((group, groupIndex) => {
-		try {
-			renderGroup(group, groupIndex, gcEnabled);
-		} catch (error) {
-			console.error("Error rendering plots for group", groupIndex, error);
-			showError(groupIndex, `Error rendering visualizations: ${error.message}`);
-		}
-	});
-}
-function renderGroup(group, groupIndex, gcEnabled) {
-	const benchmarks = prepareBenchmarks(group);
-	if (benchmarks.length === 0 || !benchmarks[0].samples?.length) {
-		showError(groupIndex, "No sample data available for visualization");
-		return;
-	}
-	const flattened = flattenSamples(benchmarks);
-	const benchmarkNames = benchmarks.map((b) => b.name);
-	const currentBenchmark = benchmarks.find((b) => !b.isBaseline);
-	if (currentBenchmark?.comparisonCI?.histogram) renderToContainer(`#ci-plot-${groupIndex}`, true, () => createCIPlot(currentBenchmark.comparisonCI));
-	renderToContainer(`#histogram-${groupIndex}`, flattened.allSamples.length > 0, () => createHistogramKde(flattened.allSamples, benchmarkNames));
-	const { timeSeries, allGcEvents, allPausePoints, heapSeries } = flattened;
-	renderToContainer(`#sample-timeseries-${groupIndex}`, timeSeries.length > 0, () => createSampleTimeSeries(timeSeries, allGcEvents, allPausePoints, heapSeries));
-	const statsContainer = document.querySelector(`#stats-${groupIndex}`);
-	if (statsContainer) statsContainer.innerHTML = benchmarks.map((b) => generateStatsHtml(b, gcEnabled)).join("");
-}
-function showError(groupIndex, message) {
-	const container = document.querySelector(`#group-${groupIndex}`);
-	if (container) container.innerHTML = `<div class="error">${message}</div>`;
-}
-/** Combine baseline and benchmarks into a single list with display names */
-function prepareBenchmarks(group) {
-	const benchmarks = [];
-	if (group.baseline) {
-		const name = group.baseline.name + " (baseline)";
-		benchmarks.push({
-			...group.baseline,
-			name,
-			isBaseline: true
-		});
-	}
-	for (const b of group.benchmarks) benchmarks.push({
-		...b,
-		isBaseline: false
-	});
-	return benchmarks;
-}
-function flattenSamples(benchmarks) {
-	const result = {
-		allSamples: [],
-		timeSeries: [],
-		heapSeries: [],
-		allGcEvents: [],
-		allPausePoints: []
-	};
-	for (const b of benchmarks) if (b.samples?.length) flattenBenchmark(b, result);
-	return result;
-}
-/** Clear a container element and append a freshly created plot */
-function renderToContainer(selector, condition, create) {
-	const container = document.querySelector(selector);
-	if (!container || !condition) return;
-	container.innerHTML = "";
-	container.appendChild(create());
-}
-function generateStatsHtml(b, gcEnabled) {
-	const ciHtml = generateCIHtml(b.comparisonCI);
-	if (b.sectionStats?.length) {
-		const statsHtml = (gcEnabled ? b.sectionStats : b.sectionStats.filter((s) => s.groupTitle !== "gc")).map((stat) => `
-      <div class="stat-item">
-        <div class="stat-label">${stat.groupTitle ? stat.groupTitle + " " : ""}${stat.label}</div>
-        <div class="stat-value">${stat.value}</div>
-      </div>
-    `).join("");
-		return `
-      <div class="summary-stats">
-        <h3 style="margin-bottom: 10px; color: #333;">${b.name}</h3>
-        <div class="stats-grid">${ciHtml}${statsHtml}</div>
-      </div>
-    `;
-	}
-	return `
-    <div class="summary-stats">
-      <h3 style="margin-bottom: 10px; color: #333;">${b.name}</h3>
-      <div class="stats-grid">
-        ${ciHtml}
-        <div class="stat-item">
-          <div class="stat-label">Min</div>
-          <div class="stat-value">${b.stats.min.toFixed(3)}ms</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-label">Median</div>
-          <div class="stat-value">${b.stats.p50.toFixed(3)}ms</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-label">Mean</div>
-          <div class="stat-value">${b.stats.avg.toFixed(3)}ms</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-label">Max</div>
-          <div class="stat-value">${b.stats.max.toFixed(3)}ms</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-label">P75</div>
-          <div class="stat-value">${b.stats.p75.toFixed(3)}ms</div>
-        </div>
-        <div class="stat-item">
-          <div class="stat-label">P99</div>
-          <div class="stat-value">${b.stats.p99.toFixed(3)}ms</div>
-        </div>
-      </div>
-    </div>
-  `;
-}
-/** Extract time series, heap, GC, and pause data from one benchmark */
-function flattenBenchmark(b, out) {
-	const warmupCount = b.warmupSamples?.length || 0;
-	b.warmupSamples?.forEach((value, i) => {
-		out.timeSeries.push({
-			benchmark: b.name,
-			iteration: i - warmupCount,
-			value,
-			isWarmup: true
-		});
-	});
-	const sampleEndTimes = cumulativeSum(b.samples);
-	b.samples.forEach((value, i) => {
-		out.allSamples.push({
-			benchmark: b.name,
-			value,
-			iteration: i
-		});
-		out.timeSeries.push({
-			benchmark: b.name,
-			iteration: i,
-			value,
-			isWarmup: false,
-			optStatus: b.optSamples?.[i]
-		});
-		if (b.heapSamples?.[i] !== void 0) out.heapSeries.push({
-			benchmark: b.name,
-			iteration: i,
-			value: b.heapSamples[i]
-		});
-	});
-	b.gcEvents?.forEach((gc) => {
-		const idx = sampleEndTimes.findIndex((t) => t >= gc.offset);
-		out.allGcEvents.push({
-			benchmark: b.name,
-			sampleIndex: idx >= 0 ? idx : b.samples.length - 1,
-			duration: gc.duration
-		});
-	});
-	b.pausePoints?.forEach((p) => {
-		out.allPausePoints.push({
-			benchmark: b.name,
-			sampleIndex: p.sampleIndex,
-			durationMs: p.durationMs
-		});
-	});
-}
-function generateCIHtml(ci) {
-	if (!ci) return "";
-	const text = `${formatPct(ci.percent)} [${formatPct(ci.ci[0])}, ${formatPct(ci.ci[1])}]`;
-	return `
-    <div class="stat-item">
-      <div class="stat-label">vs Baseline</div>
-      <div class="stat-value ci-${ci.direction}">${text}</div>
-    </div>
-  `;
-}
-function cumulativeSum(arr) {
-	const result = [];
-	let sum = 0;
-	for (const v of arr) {
-		sum += v;
-		result.push(sum);
-	}
-	return result;
-}
-function formatPct(v) {
-	return (v >= 0 ? "+" : "") + v.toFixed(1) + "%";
-}
-
-//#endregion
-export { renderPlots };