benchforge 0.1.8 → 0.1.11

package/dist/browser/index.js

@@ -2,6 +2,12 @@ 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,
@@ -23,12 +29,7 @@ const colors = {
 		stroke: "#3b82f6"
 	}
 };
-const defaultMargin = {
-	top: 22,
-	right: 12,
-	bottom: 22,
-	left: 12
-};
+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 = {
@@ -68,6 +69,13 @@ function buildLayout(width, height) {
 		}
 	};
 }
+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;
@@ -140,6 +148,26 @@ 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) => {
@@ -156,23 +184,6 @@ function gaussianSmooth(bins, sigma) {
 		};
 	});
 }
-const formatPct$1 = (v) => (v >= 0 ? "+" : "") + v.toFixed(0) + "%";
-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;
-}
-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;
-}
 function path(d, attrs) {
 	const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
 	el.setAttribute("d", d);
@@ -188,17 +199,6 @@ function line(x1, y1, x2, y2, attrs) {
 	setAttrs(el, attrs);
 	return el;
 }
-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;
-}
 /** 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);
@@ -206,6 +206,25 @@ function setAttrs(el, attrs) {
 
 //#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;
@@ -226,6 +245,30 @@ function legendBackground(bounds) {
 		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,
@@ -293,49 +336,6 @@ function rectMark(pos, color) {
 	};
 	return Plot.rect(data, opts);
 }
-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"
-	});
-}
-/** 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;
-}
 
 //#endregion
 //#region src/html/browser/HistogramKde.ts
@@ -386,17 +386,6 @@ function createHistogramKde(allSamples, benchmarkNames) {
 		]
 	});
 }
-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"
-		}))
-	};
-}
 /** 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);
@@ -436,6 +425,17 @@ function buildBarData(allSamples, benchmarkNames) {
 		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
@@ -531,59 +531,6 @@ function buildPlotContext(timeSeries) {
 		benchmarks
 	};
 }
-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
-	};
-}
 /** Scale heap byte values into the plot's Y coordinate range */
 function prepareHeapData(heapSeries, yMin, yMax) {
 	if (heapSeries.length === 0) return [];
@@ -721,6 +668,59 @@ function buildLegendItems(hasWarmup, gcCount, pauseCount, hasHeap, optTiers, ben
 	}
 	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
@@ -752,12 +752,9 @@ function renderGroup(group, groupIndex, gcEnabled) {
 	const statsContainer = document.querySelector(`#stats-${groupIndex}`);
 	if (statsContainer) statsContainer.innerHTML = benchmarks.map((b) => generateStatsHtml(b, gcEnabled)).join("");
 }
-/** 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 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) {
@@ -787,6 +784,62 @@ function flattenSamples(benchmarks) {
 	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;
@@ -834,22 +887,6 @@ function flattenBenchmark(b, out) {
 		});
 	});
 }
-function cumulativeSum(arr) {
-	const result = [];
-	let sum = 0;
-	for (const v of arr) {
-		sum += v;
-		result.push(sum);
-	}
-	return result;
-}
-function showError(groupIndex, message) {
-	const container = document.querySelector(`#group-${groupIndex}`);
-	if (container) container.innerHTML = `<div class="error">${message}</div>`;
-}
-function formatPct(v) {
-	return (v >= 0 ? "+" : "") + v.toFixed(1) + "%";
-}
 function generateCIHtml(ci) {
 	if (!ci) return "";
 	const text = `${formatPct(ci.percent)} [${formatPct(ci.ci[0])}, ${formatPct(ci.ci[1])}]`;
@@ -860,54 +897,17 @@ function generateCIHtml(ci) {
     </div>
   `;
 }
-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>
-    `;
+function cumulativeSum(arr) {
+	const result = [];
+	let sum = 0;
+	for (const v of arr) {
+		sum += v;
+		result.push(sum);
 	}
-	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>
-  `;
+	return result;
+}
+function formatPct(v) {
+	return (v >= 0 ? "+" : "") + v.toFixed(1) + "%";
 }
 
 //#endregion