benchforge 0.1.9 → 0.2.4

package/src/html/browser/CIPlot.ts

@@ -1,287 +0,0 @@
-import type { ComparisonCI, HistogramBin } from "./Types.ts";
-
-export interface DistributionPlotOptions {
-  width?: number;
-  height?: number;
-  title?: string;
-  smooth?: boolean;
-  direction?: "faster" | "slower" | "uncertain";
-}
-
-const defaultOpts: Required<DistributionPlotOptions> = {
-  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" },
-};
-
-type Scales = { x: (v: number) => number; y: (v: number) => number };
-type Layout = {
-  width: number;
-  height: number;
-  margin: typeof defaultMargin;
-  plot: { w: number; h: number };
-};
-const defaultMargin = { top: 22, right: 12, bottom: 22, left: 12 };
-
-/** Create a small distribution plot showing histogram with CI shading */
-export function createDistributionPlot(
-  histogram: HistogramBin[],
-  ci: [number, number],
-  pointEstimate: number,
-  options: DistributionPlotOptions = {},
-): SVGSVGElement {
-  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 */
-export function createCIPlot(
-  ci: ComparisonCI,
-  options: Partial<DistributionPlotOptions> = {},
-): SVGSVGElement {
-  if (!ci.histogram) return createSvg(0, 0);
-  return createDistributionPlot(ci.histogram, ci.ci, ci.percent, {
-    direction: ci.direction,
-    ...options,
-  });
-}
-
-function buildLayout(width: number, height: number): Layout {
-  const margin = defaultMargin;
-  const w = width - margin.left - margin.right;
-  const h = height - margin.top - margin.bottom;
-  return { width, height, margin, plot: { w, h } };
-}
-
-/** Compute x/y scale functions mapping data values to SVG coordinates */
-function buildScales(
-  histogram: HistogramBin[],
-  ci: [number, number],
-  layout: Layout,
-): Scales {
-  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: number) => margin.left + ((v - xMin) / (xMax - xMin)) * plot.w,
-    y: (v: number) => margin.top + plot.h - (v / yMax) * plot.h,
-  };
-}
-
-function drawTitle(svg: SVGSVGElement, title: string, x: number): void {
-  svg.appendChild(text(x, 14, title, "start", "13", "#333", "600"));
-}
-
-function drawCIRegion(
-  svg: SVGSVGElement,
-  ci: [number, number],
-  scales: Scales,
-  layout: Layout,
-  fill: string,
-) {
-  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: SVGSVGElement,
-  histogram: HistogramBin[],
-  scales: Scales,
-  stroke: string,
-): void {
-  const sorted = [...histogram].sort((a, b) => a.x - b.x);
-  const smoothed = gaussianSmooth(sorted, 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: SVGSVGElement,
-  histogram: HistogramBin[],
-  scales: Scales,
-  layout: Layout,
-  stroke: string,
-): void {
-  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 * 0.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: SVGSVGElement, scales: Scales, layout: Layout) {
-  const zeroX = scales.x(0);
-  if (zeroX < layout.margin.left || zeroX > layout.width - layout.margin.right)
-    return;
-  const top = layout.margin.top;
-  const attrs = { stroke: "#666", strokeWidth: "1", strokeDasharray: "3,2" };
-  svg.appendChild(line(zeroX, top, zeroX, top + layout.plot.h, attrs));
-}
-
-function drawPointEstimate(
-  svg: SVGSVGElement,
-  pt: number,
-  scales: Scales,
-  layout: Layout,
-  stroke: string,
-) {
-  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: SVGSVGElement,
-  ci: [number, number],
-  scales: Scales,
-  height: number,
-): void {
-  svg.appendChild(
-    text(scales.x(ci[0]), height - 4, formatPct(ci[0]), "middle", "12"),
-  );
-  svg.appendChild(
-    text(scales.x(ci[1]), height - 4, formatPct(ci[1]), "middle", "12"),
-  );
-}
-
-/** Apply gaussian kernel smoothing to histogram bins */
-function gaussianSmooth(bins: HistogramBin[], sigma: number): HistogramBin[] {
-  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 };
-  });
-}
-
-const formatPct = (v: number) => (v >= 0 ? "+" : "") + v.toFixed(0) + "%";
-
-function createSvg(w: number, h: number): SVGSVGElement {
-  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: number,
-  y: number,
-  w: number,
-  h: number,
-  attrs: Record<string, string>,
-): SVGRectElement {
-  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: string, attrs: Record<string, string>): SVGPathElement {
-  const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  el.setAttribute("d", d);
-  setAttrs(el, attrs);
-  return el;
-}
-
-function line(
-  x1: number,
-  y1: number,
-  x2: number,
-  y2: number,
-  attrs: Record<string, string>,
-): SVGLineElement {
-  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;
-}
-
-function text(
-  x: number,
-  y: number,
-  content: string,
-  anchor = "start",
-  size = "9",
-  fill = "#666",
-  weight = "400",
-): SVGTextElement {
-  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: SVGElement, attrs: Record<string, string>): void {
-  for (const [k, v] of Object.entries(attrs))
-    el.setAttribute(
-      k.replace(/[A-Z]/g, c => "-" + c.toLowerCase()),
-      v,
-    );
-}

package/src/html/browser/LegendUtils.ts

@@ -1,163 +0,0 @@
-import * as Plot from "@observablehq/plot";
-
-export interface LegendBounds {
-  xMin: number;
-  xMax: number;
-  yMax: number;
-}
-
-export interface LegendItem {
-  color: string;
-  label: string;
-  style:
-    | "filled-dot"
-    | "hollow-dot"
-    | "vertical-bar"
-    | "vertical-line"
-    | "rect";
-  strokeDash?: string;
-}
-
-interface LegendPos {
-  legendX: number;
-  y: number;
-  textX: number;
-  xRange: number;
-  yMax: number;
-}
-
-/** Draw a semi-transparent white background behind the legend area */
-function legendBackground(bounds: LegendBounds): any {
-  const xRange = bounds.xMax - bounds.xMin;
-  const data = [
-    {
-      x1: bounds.xMin + xRange * 0.65,
-      x2: bounds.xMin + xRange * 1.05,
-      y1: bounds.yMax * 0.65,
-      y2: bounds.yMax * 1.05,
-    },
-  ];
-  const opts = {
-    x1: "x1",
-    x2: "x2",
-    y1: "y1",
-    y2: "y2",
-    fill: "white",
-    fillOpacity: 0.9,
-    stroke: "#ddd",
-    strokeWidth: 1,
-  };
-  return Plot.rect(data, opts);
-}
-
-function dotMark(x: number, y: number, color: string, filled: boolean): any {
-  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: LegendPos, color: string): any {
-  const { legendX, y, xRange, yMax } = pos;
-  const w = xRange * 0.012;
-  const h = yMax * 0.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: 0.6,
-  });
-}
-
-function verticalLineMark(
-  pos: LegendPos,
-  color: string,
-  strokeDash?: string,
-): any {
-  const { legendX, y, yMax } = pos;
-  return Plot.ruleX([legendX], {
-    y1: y - yMax * 0.025,
-    y2: y + yMax * 0.025,
-    stroke: color,
-    strokeWidth: 2,
-    strokeDasharray: strokeDash,
-  });
-}
-
-function rectMark(pos: LegendPos, color: string): any {
-  const { legendX, y, xRange, yMax } = pos;
-  const data = [
-    {
-      x1: legendX - xRange * 0.01,
-      x2: legendX + xRange * 0.03,
-      y1: y - yMax * 0.02,
-      y2: y + yMax * 0.02,
-    },
-  ];
-  const opts = {
-    x1: "x1",
-    x2: "x2",
-    y1: "y1",
-    y2: "y2",
-    fill: color,
-    fillOpacity: 0.3,
-    stroke: color,
-    strokeWidth: 1,
-  };
-  return Plot.rect(data, opts);
-}
-
-function symbolMark(pos: LegendPos, item: LegendItem): any {
-  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: LegendPos, label: string): any {
-  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 */
-export function buildLegend(bounds: LegendBounds, items: LegendItem[]): any[] {
-  const xRange = bounds.xMax - bounds.xMin;
-  const legendX = bounds.xMin + xRange * 0.68;
-  const textX = legendX + xRange * 0.04;
-  const getY = (i: number) => bounds.yMax * 0.98 - i * (bounds.yMax * 0.08);
-
-  const marks: any[] = [legendBackground(bounds)];
-  for (let i = 0; i < items.length; i++) {
-    const pos: LegendPos = {
-      legendX,
-      y: getY(i),
-      textX,
-      xRange,
-      yMax: bounds.yMax,
-    };
-    marks.push(symbolMark(pos, items[i]), textMark(pos, items[i].label));
-  }
-  return marks;
-}

package/src/html/browser/RenderPlots.ts

@@ -1,263 +0,0 @@
-import { createCIPlot } from "./CIPlot.ts";
-import { createHistogramKde } from "./HistogramKde.ts";
-import { createSampleTimeSeries } from "./SampleTimeSeries.ts";
-import type {
-  BenchmarkEntry,
-  GcEvent,
-  HeapPoint,
-  PausePoint,
-  ReportData,
-  Sample,
-  TimeSeriesPoint,
-} from "./Types.ts";
-
-/** Render all plots for the benchmark report */
-export function renderPlots(data: ReportData): void {
-  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 as Error).message}`,
-      );
-    }
-  });
-}
-
-function renderGroup(
-  group: ReportData["groups"][0],
-  groupIndex: number,
-  gcEnabled: boolean,
-): void {
-  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("");
-}
-
-/** Clear a container element and append a freshly created plot */
-function renderToContainer(
-  selector: string,
-  condition: boolean,
-  create: () => SVGSVGElement | HTMLElement,
-): void {
-  const container = document.querySelector(selector);
-  if (!container || !condition) return;
-  container.innerHTML = "";
-  container.appendChild(create());
-}
-
-interface PreparedBenchmark extends BenchmarkEntry {
-  name: string;
-}
-
-/** Combine baseline and benchmarks into a single list with display names */
-function prepareBenchmarks(
-  group: ReportData["groups"][0],
-): PreparedBenchmark[] {
-  const benchmarks: PreparedBenchmark[] = [];
-  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;
-}
-
-interface FlattenedData {
-  allSamples: Sample[];
-  timeSeries: TimeSeriesPoint[];
-  heapSeries: HeapPoint[];
-  allGcEvents: GcEvent[];
-  allPausePoints: PausePoint[];
-}
-
-function flattenSamples(benchmarks: PreparedBenchmark[]): FlattenedData {
-  const result: FlattenedData = {
-    allSamples: [],
-    timeSeries: [],
-    heapSeries: [],
-    allGcEvents: [],
-    allPausePoints: [],
-  };
-  for (const b of benchmarks)
-    if (b.samples?.length) flattenBenchmark(b, result);
-  return result;
-}
-
-/** Extract time series, heap, GC, and pause data from one benchmark */
-function flattenBenchmark(b: PreparedBenchmark, out: FlattenedData): void {
-  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] !== undefined) {
-      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 cumulativeSum(arr: number[]): number[] {
-  const result: number[] = [];
-  let sum = 0;
-  for (const v of arr) {
-    sum += v;
-    result.push(sum);
-  }
-  return result;
-}
-
-function showError(groupIndex: number, message: string): void {
-  const container = document.querySelector(`#group-${groupIndex}`);
-  if (container) container.innerHTML = `<div class="error">${message}</div>`;
-}
-
-function formatPct(v: number): string {
-  const sign = v >= 0 ? "+" : "";
-  return sign + v.toFixed(1) + "%";
-}
-
-function generateCIHtml(ci: BenchmarkEntry["comparisonCI"]): string {
-  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 generateStatsHtml(b: PreparedBenchmark, gcEnabled: boolean): string {
-  const ciHtml = generateCIHtml(b.comparisonCI);
-
-  if (b.sectionStats?.length) {
-    const stats = gcEnabled
-      ? b.sectionStats
-      : b.sectionStats.filter(s => s.groupTitle !== "gc");
-    const statsHtml = stats
-      .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>
-    `;
-  }
-
-  // Fallback to hardcoded stats
-  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>
-  `;
-}