benchforge 0.1.9 → 0.2.4

package/src/viewer/components/SamplesPanel.tsx

@@ -0,0 +1,214 @@
+import { useMemo, useState } from "preact/hooks";
+import type { BenchmarkGroup, ReportData } from "../ReportData.ts";
+import {
+  batchCount,
+  filterToBatch,
+  type FlattenedData,
+  flattenSamples,
+  type PreparedBenchmark,
+  prepareBenchmarks,
+} from "../plots/RenderPlots.ts";
+import type { SeriesVisibility } from "../plots/SampleTimeSeries.ts";
+import { reportData, samplesLoaded } from "../State.ts";
+import { useLazyPlot } from "./LazyPlot.ts";
+
+/** True when at least one benchmark group has multiple samples (enough to plot). */
+export function hasSufficientSamples(data: ReportData): boolean {
+  return data.groups.some(groupHasSamples);
+}
+
+/** True when any benchmark or baseline in the group has multiple samples. */
+function groupHasSamples(group: BenchmarkGroup): boolean {
+  const multiSample = (b: { samples: unknown[] }) => b.samples.length > 1;
+  return group.benchmarks.some(multiSample) || (!!group.baseline && multiSample(group.baseline));
+}
+
+/** Time-series and histogram plots for each benchmark group. Lazy-loaded on first tab activation. */
+export function SamplesPanel() {
+  const data = reportData.value;
+  if (!samplesLoaded.value || !data) return null;
+
+  return (
+    <>
+      {data.groups.map((group, i) => (
+        <SamplesGroup key={i} group={group} index={i} />
+      ))}
+    </>
+  );
+}
+
+/** Renders time-series and histogram plots for one benchmark group, with batch stepping and series toggles. */
+function SamplesGroup({ group, index }: { group: BenchmarkGroup; index: number }) {
+  const hasSamples = groupHasSamples(group);
+  const benchmarks = useMemo(() => prepareBenchmarks(group), [group]);
+  const flat = useMemo(
+    () => hasSamples ? flattenSamples(benchmarks) : null,
+    [benchmarks, hasSamples],
+  );
+  const numBatches = hasSamples ? batchCount(benchmarks) : 0;
+
+  // batch === 0 means "All", 1..numBatches means specific batch
+  const [batch, setBatch] = useState(0);
+  const activeBatch = batch > numBatches ? 0 : batch;
+
+  const viewFlat = useMemo(
+    () => flat && activeBatch > 0 ? filterToBatch(flat, benchmarks, activeBatch - 1) : flat,
+    [flat, benchmarks, activeBatch],
+  );
+
+  const [visibility, setVisibility] = useState<SeriesVisibility>({
+    baseline: true,
+    heap: true,
+    baselineHeap: false,
+    rejected: true,
+  });
+
+  if (!group.benchmarks?.length) return null;
+  if (!hasSamples || !flat || !viewFlat) return (
+    <div>
+      <div class="group-header">
+        <h2>{group.name}</h2>
+      </div>
+      <p class="single-sample-notice">
+        Single sample collected &mdash; plots require multiple samples.
+      </p>
+    </div>
+  );
+
+  const hasBaseline = !!group.baseline;
+  const hasHeap = flat.heapSeries.length > 0, hasBaselineHeap = flat.baselineHeapSeries.length > 0;
+  const hasRejected = flat.timeSeries.some(d => d.isRejected);
+  const totalPoints = viewFlat.timeSeries.length, sampled = totalPoints > 1000;
+
+  const toggle = (key: keyof SeriesVisibility) =>
+    setVisibility(v => ({ ...v, [key]: !v[key] }));
+
+  return (
+    <div>
+      <div class="group-header">
+        <h2>{group.name}</h2>
+      </div>
+      <div class="plot-grid">
+        <div class="plot-container">
+          <div class="plot-title">Time per Iteration</div>
+          <div class="plot-description">
+            {sampled
+              ? `Sampled from ${totalPoints.toLocaleString()} iterations (showing ~1,000)`
+              : "Execution time for each iteration in collection order"}
+          </div>
+          <div class="plot-controls">
+            <SeriesToggles
+              hasBaseline={hasBaseline}
+              hasHeap={hasHeap}
+              hasBaselineHeap={hasBaselineHeap}
+              hasRejected={hasRejected}
+              visibility={visibility}
+              onToggle={toggle}
+            />
+            {numBatches > 1 && (
+              <BatchStepper batch={activeBatch} total={numBatches} onChange={setBatch} />
+            )}
+          </div>
+          <TimeSeriesPlot
+            benchmarks={benchmarks}
+            flat={viewFlat}
+            index={index}
+            visibility={visibility}
+          />
+        </div>
+        <div class="plot-container">
+          <div class="plot-title">Time Distribution</div>
+          <div class="plot-description">
+            Frequency distribution of execution times
+          </div>
+          <HistogramPlot benchmarks={benchmarks} flat={viewFlat} index={index} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface ToggleProps {
+  hasBaseline: boolean;
+  hasHeap: boolean;
+  hasBaselineHeap: boolean;
+  hasRejected: boolean;
+  visibility: SeriesVisibility;
+  onToggle: (key: keyof SeriesVisibility) => void;
+}
+
+/** Pill button that toggles a boolean state with active/inactive styling. */
+function TogglePill(
+  { label, active, onClick }: { label: string; active: boolean; onClick: () => void },
+) {
+  return (
+    <button class={`toggle-pill${active ? " active" : ""}`} onClick={onClick}>
+      {label}
+    </button>
+  );
+}
+
+/** Visibility toggles for optional series (baseline, heap, rejected). */
+function SeriesToggles(props: ToggleProps) {
+  const { hasBaseline, hasHeap, hasBaselineHeap, hasRejected, visibility, onToggle } = props;
+  if (!hasBaseline && !hasHeap && !hasRejected) return null;
+  return (
+    <div class="series-toggles">
+      {hasBaseline && <TogglePill label="baseline" active={visibility.baseline} onClick={() => onToggle("baseline")} />}
+      {hasHeap && <TogglePill label="heap" active={visibility.heap} onClick={() => onToggle("heap")} />}
+      {hasBaselineHeap && <TogglePill label="heap (baseline)" active={visibility.baselineHeap} onClick={() => onToggle("baselineHeap")} />}
+      {hasRejected && <TogglePill label="rejected" active={visibility.rejected} onClick={() => onToggle("rejected")} />}
+    </div>
+  );
+}
+
+/** Prev/next stepper for cycling through batches or showing all. */
+function BatchStepper({ batch, total, onChange }: {
+  batch: number; total: number; onChange: (batch: number) => void;
+}) {
+  const prev = () => onChange(batch <= 0 ? total : batch - 1);
+  const next = () => onChange(batch >= total ? 0 : batch + 1);
+  const label = batch === 0 ? "All" : `Batch ${batch} of ${total}`;
+  return (
+    <div class="batch-stepper">
+      <button class="batch-btn" onClick={prev}>&lsaquo;</button>
+      <span class="batch-label">{label}</span>
+      <button class="batch-btn" onClick={next}>&rsaquo;</button>
+    </div>
+  );
+}
+
+interface PlotProps { benchmarks: PreparedBenchmark[]; flat: FlattenedData; index: number }
+interface TimeSeriesPlotProps extends PlotProps { visibility: SeriesVisibility }
+
+/** Lazy-imports and renders a time-series chart for one benchmark group. */
+function TimeSeriesPlot({ flat, index, visibility }: TimeSeriesPlotProps) {
+  const ref = useLazyPlot(async () => {
+    if (flat.timeSeries.length === 0) return null;
+    const { createSampleTimeSeries } = await import("../plots/SampleTimeSeries.ts");
+    const { timeSeries, allGcEvents, allPausePoints, heapSeries, baselineHeapSeries } = flat;
+    return createSampleTimeSeries(
+      timeSeries, allGcEvents, allPausePoints, heapSeries, baselineHeapSeries, visibility,
+    );
+  }, [flat, visibility], "Time series plot");
+  return (
+    <div id={`sample-timeseries-${index}`} class="plot-area" ref={ref}>
+      <div class="loading">Loading time series...</div>
+    </div>
+  );
+}
+
+/** Lazy-imports and renders a histogram with KDE for one benchmark group. */
+function HistogramPlot({ benchmarks, flat, index }: PlotProps) {
+  const names = benchmarks.map(b => b.name);
+  const ref = useLazyPlot(async () => {
+    if (flat.allSamples.length === 0) return null;
+    const { createHistogramKde } = await import("../plots/HistogramKde.ts");
+    return createHistogramKde(flat.allSamples, names);
+  }, [flat, benchmarks], "Histogram plot");
+  return (
+    <div id={`histogram-${index}`} class="plot-area" ref={ref}>
+      <div class="loading">Loading histogram...</div>
+    </div>
+  );
+}

package/src/viewer/components/Shell.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "preact/hooks";
+import { provider, sourceTabs } from "../State.ts";
+import { openSourceTab } from "./SourcePanel.tsx";
+import { TabBar } from "./TabBar.tsx";
+import { TabContent } from "./TabContent.tsx";
+
+/** Root viewer shell: listens for `open-source` messages, renders tab bar and content. */
+export function Shell() {
+  useEffect(() => {
+    function onMessage(ev: MessageEvent): void {
+      if (ev.data?.type === "open-source") {
+        const { file, line, col } = ev.data;
+        if (file) openSourceTab(file, line, col);
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, []);
+
+  return (
+    <>
+      <TabBar />
+      <TabContent />
+    </>
+  );
+}

package/src/viewer/components/SourcePanel.tsx

@@ -0,0 +1,216 @@
+import { createHighlighterCore, type HighlighterCore } from "shiki/core";
+import langCss from "shiki/dist/langs/css.mjs";
+import langHtml from "shiki/dist/langs/html.mjs";
+import langJs from "shiki/dist/langs/javascript.mjs";
+import langTs from "shiki/dist/langs/typescript.mjs";
+import themeDark from "shiki/dist/themes/github-dark.mjs";
+import themeLight from "shiki/dist/themes/github-light.mjs";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { filePathFromUrl, guessLang } from "../Helpers.ts";
+import {
+  computeLineData,
+  formatGutterBytes,
+  formatGutterCount,
+  formatGutterTime,
+} from "../LineData.ts";
+import type {
+  ViewerCoverageData,
+  ViewerSpeedscopeFile,
+} from "../Providers.ts";
+import {
+  activeTabId,
+  provider,
+  sourceTabs,
+  type SourceTabState,
+} from "../State.ts";
+
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+
+/** Lazily create a shared Shiki highlighter with light/dark themes. */
+function getHighlighter(): Promise<HighlighterCore> {
+  highlighterPromise ??= createHighlighterCore({
+    themes: [themeLight, themeDark],
+    langs: [langJs, langTs, langCss, langHtml],
+    engine: createJavaScriptRegexEngine(),
+  });
+  return highlighterPromise;
+}
+
+/** Open or focus a source tab, scrolling to the given line and column. */
+export function openSourceTab(file: string, line: number, col: number): void {
+  const id = "src:" + file;
+  const tabs = sourceTabs.value;
+  const existing = tabs.find(t => t.id === id);
+  if (existing) {
+    sourceTabs.value = tabs.map(t =>
+      t.id === id ? { ...t, line, col, generation: t.generation + 1 } : t,
+    );
+  } else {
+    sourceTabs.value = [...tabs, { id, file, line, col, generation: 1 }];
+  }
+  activeTabId.value = id;
+}
+
+/** Fetches source, highlights with Shiki, then overlays profiling gutters and scrolls to target line. */
+export function SourcePanel({ tab }: { tab: SourceTabState }): preact.JSX.Element {
+  const dataProvider = provider.value!;
+  const [html, setHtml] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const active = activeTabId.value === tab.id;
+
+  useEffect(() => {
+    let stale = false;
+    setHtml(null);
+    setError(null);
+
+    (async () => {
+      try {
+        const code = await dataProvider.fetchSource(tab.file);
+        if (stale) return;
+        const highlighter = await getHighlighter();
+        if (stale) return;
+        const lang = guessLang(tab.file);
+        const themes = { light: "github-light", dark: "github-dark" };
+        setHtml(highlighter.codeToHtml(code, { lang, themes, defaultColor: false }));
+      } catch {
+        if (!stale) setError(tab.file);
+      }
+    })();
+
+    return () => {
+      stale = true;
+    };
+  }, [tab.file, tab.generation, dataProvider]);
+
+  useEffect(() => {
+    if (!html || !panelRef.current) return;
+    let stale = false;
+
+    Promise.all([
+      dataProvider.fetchProfileData("alloc"),
+      dataProvider.fetchProfileData("time"),
+      dataProvider.fetchCoverageData(),
+    ]).then(([alloc, time, coverage]) => {
+      if (stale || !panelRef.current) return;
+      renderGutters(panelRef.current, tab.file, alloc, time, coverage);
+
+      if (tab.line) {
+        const lines = panelRef.current.querySelectorAll(".source-code .line");
+        const target = lines[tab.line - 1];
+        if (target) {
+          target.classList.add("highlighted");
+          target.scrollIntoView({ block: "center" });
+        }
+      }
+    });
+
+    return () => {
+      stale = true;
+    };
+  }, [html, tab.line, dataProvider, tab.file]);
+
+  const editorUri = dataProvider.config.editorUri;
+  const cls = `source-panel${active ? " active" : ""}`;
+
+  return (
+    <div class={cls} data-tab={tab.id} ref={panelRef}>
+      <SourceBody
+        file={tab.file}
+        line={tab.line}
+        col={tab.col}
+        html={html}
+        error={error}
+        editorUri={editorUri}
+      />
+    </div>
+  );
+}
+
+interface SourceBodyProps {
+  file: string; line: number; col: number;
+  html: string | null; error: string | null; editorUri: string | null;
+}
+
+/** Render loading/error placeholder or the highlighted source with header. */
+function SourceBody({ file, line, col, html, error, editorUri }: SourceBodyProps) {
+  if (error) {
+    return (
+      <div class="source-placeholder">
+        <p>Source unavailable for {error}</p>
+      </div>
+    );
+  }
+  if (!html) {
+    return (
+      <div class="source-placeholder">
+        <p>Loading source&hellip;</p>
+      </div>
+    );
+  }
+  return (
+    <>
+      <SourceHeader file={file} line={line} col={col} editorUri={editorUri} />
+      <div class="source-code" dangerouslySetInnerHTML={{ __html: html }} />
+    </>
+  );
+}
+
+/** File path display with optional "Open in Editor" link. */
+function SourceHeader({ file, line, col, editorUri }: {
+  file: string; line: number; col: number; editorUri: string | null;
+}) {
+  const path = filePathFromUrl(file);
+  const href = editorUri ? `${editorUri}${path}:${line || 1}:${col || 1}` : null;
+  return (
+    <div class="source-header">
+      <span class="source-path">{file}</span>
+      {href && <a class="source-editor-link" href={href}>Open in Editor</a>}
+    </div>
+  );
+}
+
+/** Build a gutter span with optional heat-map styling (CSS custom property). */
+function gutter(kind: string, text: string, heat?: number): string {
+  const style = heat ? ` style="--heat:${heat.toFixed(3)}"` : "";
+  const cls = heat ? ` heat` : "";
+  return `<span class="gutter gutter-${kind}${cls}"${style}>${text}</span>`;
+}
+
+/** Inject call-count, alloc, and time gutters into highlighted source lines. */
+function renderGutters(
+  panel: HTMLElement,
+  file: string,
+  allocProfile: ViewerSpeedscopeFile | null,
+  timeProfile: ViewerSpeedscopeFile | null,
+  coverage: ViewerCoverageData | null,
+): void {
+  const { callCounts, allocBytes, selfTimeUs } = computeLineData(file, allocProfile, timeProfile, coverage);
+  const hasCounts = callCounts.size > 0, hasAlloc = allocBytes.size > 0, hasTime = selfTimeUs.size > 0;
+  if (!hasCounts && !hasAlloc && !hasTime) return;
+
+  const codeEl = panel.querySelector(".source-code") as HTMLElement;
+  if (!codeEl) return;
+  const maxAlloc = hasAlloc ? Math.max(...allocBytes.values()) : 0;
+  const maxTime = hasTime ? Math.max(...selfTimeUs.values()) : 0;
+
+  const heatAboveThreshold = (h: number) => (h > 0.01 ? h : undefined);
+  const lines = codeEl.querySelectorAll(".line");
+  for (let i = 0; i < lines.length; i++) {
+    const lineNum = i + 1;
+    const el = lines[i] as HTMLElement;
+    const counts = callCounts.get(lineNum);
+    const alloc = allocBytes.get(lineNum);
+    const time = selfTimeUs.get(lineNum);
+    const allocHeat = alloc && maxAlloc > 0 ? alloc / maxAlloc : 0;
+    const timeHeat = time && maxTime > 0 ? time / maxTime : 0;
+    let gutterHtml = "";
+    if (hasCounts) gutterHtml += gutter("count", formatGutterCount(counts));
+    if (hasAlloc) gutterHtml += gutter("alloc", formatGutterBytes(alloc), heatAboveThreshold(allocHeat));
+    if (hasTime) gutterHtml += gutter("time", formatGutterTime(time), heatAboveThreshold(timeHeat));
+
+    el.insertAdjacentHTML("afterbegin", gutterHtml);
+  }
+}
+