WebGPU Trading Charts With SciChart.js v6: A Per-User Renderer Rollout, When wasm64 Pays, And Profiling Dashboards By Counts

// scichart 6.0.8, browser only. The renderer flag is read once, when the scichart module is evaluated,
// so nothing may import "scichart" as a value before bootCharts() runs.
import type * as SciChart from "scichart";

export type Sc = typeof SciChart;
export type RendererArm = "auto" | "webgpu" | "webgl";

export interface RolloutDecision {
  experiment: string;     // e.g. "scichart6-renderer-2026-10"
  userId: string;
  renderer: RendererArm;  // from your feature-flag service, sticky per user
  wasm64: boolean;        // separate flag, replay users only: never mixed into the renderer test
  forceWebGl: boolean;    // server-side kill switch for every user
}

export interface EngineReport {
  experiment: string; userId: string; arm: RendererArm; scichartVersion: string;
  flagWritten: "0" | "1" | null; storageBlocked: boolean;
  webGpu: boolean; wasm64: boolean; simd: boolean; webGpuSupported: boolean;
  surfaces: number; surfacesOnOwnSwapchain: number;
  details: Record<string, unknown>; userAgent: string; at: string;
}

const FLAG_KEY = "IS_WEB_GPU";     // unset = auto, "1" = WebGPU, "0" = WebGL
const SCICHART_VERSION = "6.0.8";  // pinned exactly in package.json

function writeRendererFlag(d: RolloutDecision): { value: "0" | "1" | null; blocked: boolean } {
  const value = d.forceWebGl || d.renderer === "webgl" ? "0" : d.renderer === "webgpu" ? "1" : null;
  try {
    if (value === null) localStorage.removeItem(FLAG_KEY);
    else localStorage.setItem(FLAG_KEY, value);
    return { value, blocked: false };
  } catch {
    return { value: null, blocked: true }; // site data blocked: the library falls back to auto
  }
}

export async function bootCharts(d: RolloutDecision, send: (r: EngineReport) => void) {
  const flag = writeRendererFlag(d);
  const sc: Sc = await import("scichart"); // first evaluation happens here, after the flag is written

  sc.SciChartDefaults.useWasm64 = d.wasm64 ? sc.EUseWasm64.Auto : sc.EUseWasm64.Never;
  // Served from the package's _wasm directory; wasm64Url defaults to scichart-64.wasm beside it.
  sc.SciChartSurface.configure({ wasmUrl: "/_wasm/scichart.wasm" });

  const surfaces: SciChart.SciChartSurface[] = [];
  const firstFrames: Promise<void>[] = [];

  /** Register every dashboard surface as it is created. */
  function track(surface: SciChart.SciChartSurface): void {
    surfaces.push(surface);
    firstFrames.push(new Promise<void>((resolve) => {
      const once = () => { surface.rendered.unsubscribe(once); resolve(); };
      surface.rendered.subscribe(once);
    }));
  }

  /** Report after every surface has drawn once, when auto mode has finished deciding. */
  async function reportEngine(): Promise<void> {
    await Promise.all(firstFrames);
    const engine = sc.SciChartSurfaceBase.debugWasmWebGPU();
    send({
      experiment: d.experiment, userId: d.userId, arm: d.forceWebGl ? "webgl" : d.renderer,
      scichartVersion: SCICHART_VERSION, flagWritten: flag.value, storageBlocked: flag.blocked,
      webGpu: engine.webGpu, wasm64: engine.wasm64, simd: engine.simd,
      webGpuSupported: sc.WebGpuHelper.getWebGpuSupported(),
      surfaces: surfaces.length,
      surfacesOnOwnSwapchain: surfaces.filter((s) => !s.isMasterCanvasRenderTarget).length,
      details: engine.details, userAgent: navigator.userAgent, at: new Date().toISOString(),
    });
  }

  return { sc, track, reportEngine };
}

// scichart 6.0.8. Takes the namespace from bootCharts() so the renderer flag is always set first.
import type * as SciChart from "scichart";
import type { Sc } from "./rendererRollout";

/** t is the bar open time in UTC seconds, as DateTimeNumericAxis expects. */
export interface Bar { t: number; o: number; h: number; l: number; c: number }

export interface PanelOptions {
  symbol: string;       // e.g. "EURUSD"
  digits: number;       // price precision on the axis
  visibleBars: number;  // e.g. 300 one-minute bars
  maLength: number;     // e.g. 20
}

export interface CandlePanel {
  surface: SciChart.SciChartSurface;
  history: SciChart.OhlcDataSeries;
  ma: SciChart.XyDataSeries;
  closeBar(bar: Bar): void;
  updateForming(bar: Bar): void;
  dispose(): void;
}

const UP = "#26a69a";
const DOWN = "#ef5350";

export async function createCandlePanel(sc: Sc, el: HTMLDivElement, opts: PanelOptions): Promise<CandlePanel> {
  const { sciChartSurface: surface, wasmContext } = await sc.SciChartSurface.create(el);
  const capacity = opts.visibleBars * 2; // memory is fixed from the moment the panel exists
  const common = { isSorted: true, containsNaN: false };

  surface.xAxes.add(new sc.DateTimeNumericAxis(wasmContext, { autoRange: sc.EAutoRange.Always }));
  surface.yAxes.add(new sc.NumericAxis(wasmContext, { autoRange: sc.EAutoRange.Always, labelPrecision: opts.digits }));
  surface.chartModifiers.add(new sc.CursorModifier()); // its axis labels are the pointer-move path to count

  const history = new sc.OhlcDataSeries(wasmContext, { ...common, dataSeriesName: opts.symbol, fifoCapacity: capacity });
  const live = new sc.OhlcDataSeries(wasmContext, { ...common, dataSeriesName: `${opts.symbol} forming` });
  // Derived line in its own FIFO series, fed by our code: no filter attached to a FIFO source.
  const ma = new sc.XyDataSeries(wasmContext, { ...common, dataSeriesName: `${opts.symbol} SMA ${opts.maLength}`, fifoCapacity: capacity });

  surface.renderableSeries.add(
    new sc.FastCandlestickRenderableSeries(wasmContext, {
      dataSeries: history, dataPointWidth: 0.7, brushUp: UP, brushDown: DOWN, strokeUp: UP, strokeDown: DOWN,
    }),
    new sc.FastCandlestickRenderableSeries(wasmContext, {
      dataSeries: live, dataPointWidth: 0.7, brushUp: UP + "80", brushDown: DOWN + "80", strokeUp: UP, strokeDown: DOWN,
    }),
    new sc.FastLineRenderableSeries(wasmContext, { dataSeries: ma, stroke: "#94a3b8", strokeThickness: 1 }),
  );

  const pending: Bar[] = [];
  const closes: number[] = [];
  let sum = 0;
  let forming: Bar | null = null;
  let liveT = Number.NaN;
  let frame = 0;

  function flush(): void {
    frame = 0;
    if (pending.length > 0) {
      // One appendRange per series per frame, however many bars closed since the last one.
      history.appendRange(
        pending.map((b) => b.t), pending.map((b) => b.o), pending.map((b) => b.h),
        pending.map((b) => b.l), pending.map((b) => b.c),
      );
      const maX: number[] = [];
      const maY: number[] = [];
      for (const b of pending) {
        closes.push(b.c);
        sum += b.c;
        if (closes.length > opts.maLength) sum -= closes.shift() as number;
        if (closes.length === opts.maLength) { maX.push(b.t); maY.push(sum / opts.maLength); }
      }
      if (maX.length > 0) ma.appendRange(maX, maY);
      if (pending.some((b) => b.t === liveT)) { live.clear(); liveT = Number.NaN; }
      pending.length = 0;
    }
    if (forming) {
      const b = forming;
      if (b.t === liveT) live.update(0, b.o, b.h, b.l, b.c); // same bar: overwrite in place
      else { live.clear(); live.append(b.t, b.o, b.h, b.l, b.c); liveT = b.t; }
      forming = null;
    }
  }
  const schedule = () => { if (frame === 0) frame = requestAnimationFrame(flush); };

  return {
    surface, history, ma,
    closeBar(bar) { // from your bar builder, never per tick
      if (forming?.t === bar.t) forming = null;
      pending.push(bar);
      schedule();
    },
    updateForming(bar) { forming = bar; schedule(); }, // only the latest value per frame reaches the chart
    dispose() {
      if (frame !== 0) cancelAnimationFrame(frame);
      surface.delete();
      [history, live, ma].forEach((s) => s.delete());
    },
  };
}

// Canary and soak builds only: wraps browser prototypes. scichart 6.0.8, @webgpu/types for GPU* globals.
// Install after bootCharts() and before the first panel is created.
import type { Sc } from "./rendererRollout";

type Args = unknown[];
interface FrameCounts { calls: Record<string, number>; bytes: number; locale: number; renders: number }
export interface FrameSample extends FrameCounts { t: number; gauges: Record<string, number> }

const fresh = (): FrameCounts => ({ calls: {}, bytes: 0, locale: 0, renders: 0 });
let current = fresh();
const samples: FrameSample[] = [];
const gauges = new Map<string, () => number>();

/** GPUQueue.writeBuffer: dataOffset and size are in elements for typed arrays, bytes otherwise. */
function writeBufferBytes([, , data, dataOffset = 0, size]: Args): number {
  const view = data as ArrayBufferView | ArrayBuffer;
  const unit = (view as Partial<{ BYTES_PER_ELEMENT: number }>).BYTES_PER_ELEMENT ?? 1;
  return size !== undefined ? (size as number) * unit : view.byteLength - (dataOffset as number) * unit;
}
const glBytes = (d: unknown) => (typeof d === "number" ? d : (d as ArrayBufferView | null)?.byteLength ?? 0);

function wrap(proto: object, method: string, label: string, onCall?: (args: Args) => void): void {
  const target = proto as Record<string, unknown>;
  const original = target[method];
  if (typeof original !== "function") return;
  target[method] = function (this: unknown, ...args: Args) {
    current.calls[label] = (current.calls[label] ?? 0) + 1;
    onCall?.(args);
    return (original as (...a: Args) => unknown).apply(this, args);
  };
}

export function installFrameCounters(sc: Sc, maxFrames = 36_000): void {
  sc.MemoryUsageHelper.isMemoryUsageDebugEnabled = true; // must precede every surface
  gauges.set("scichart.undeleted", () => sc.MemoryUsageHelper.objectRegistry.undeletedObjectsMap.size);

  if (typeof GPUQueue !== "undefined") {
    wrap(GPUQueue.prototype, "writeBuffer", "gpu.writeBuffer", (a) => { current.bytes += writeBufferBytes(a); });
    wrap(GPUQueue.prototype, "writeTexture", "gpu.writeTexture");
    wrap(GPUQueue.prototype, "submit", "gpu.submit");
    wrap(GPUDevice.prototype, "createBuffer", "gpu.createBuffer");
    wrap(GPURenderPassEncoder.prototype, "draw", "gpu.draw");
    wrap(GPURenderPassEncoder.prototype, "drawIndexed", "gpu.drawIndexed");
  }
  for (const proto of [WebGLRenderingContext.prototype, WebGL2RenderingContext.prototype]) {
    wrap(proto, "bufferData", "gl.bufferData", (a) => { current.bytes += glBytes(a[1]); });
    wrap(proto, "bufferSubData", "gl.bufferSubData", (a) => { current.bytes += glBytes(a[2]); });
    wrap(proto, "createBuffer", "gl.createBuffer");
    wrap(proto, "drawArrays", "gl.drawArrays");
    wrap(proto, "drawElements", "gl.drawElements");
  }
  wrap(WebGL2RenderingContext.prototype, "drawArraysInstanced", "gl.drawArraysInstanced");
  wrap(WebGL2RenderingContext.prototype, "drawElementsInstanced", "gl.drawElementsInstanced");
  for (const m of ["toLocaleDateString", "toLocaleTimeString", "toLocaleString"]) {
    wrap(Date.prototype, m, `date.${m}`, () => { current.locale += 1; });
  }

  const tick = (t: number) => {
    const g: Record<string, number> = {};
    gauges.forEach((read, name) => { g[name] = read(); });
    samples.push({ t, ...current, gauges: g });
    if (samples.length > maxFrames) samples.shift();
    current = fresh();
    requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
}

export function watchSurface(surface: { rendered: { subscribe(h: () => void): void } }): void {
  surface.rendered.subscribe(() => { current.renders += 1; });
}
/** Watch a FIFO source and anything derived from it, e.g. a filter. Both should plateau. */
export function watchCount(name: string, series: { count(): number }): void {
  gauges.set(name, () => series.count());
}

const pct = (xs: number[], q: number) => {
  const s = [...xs].sort((a, b) => a - b);
  return s[Math.min(s.length - 1, Math.floor(q * s.length))] ?? 0;
};

/** Summarise frames since fromMs (a performance.now() time): run once per arm and scenario. */
export function summarise(fromMs: number) {
  const s = samples.filter((x) => x.t >= fromMs);
  const p99: Record<string, number> = {};
  for (const label of new Set(s.flatMap((x) => Object.keys(x.calls)))) {
    p99[label] = pct(s.map((x) => x.calls[label] ?? 0), 0.99);
  }
  const gaugeDrift: Record<string, [number, number]> = {};
  for (const name of gauges.keys()) gaugeDrift[name] = [s[0]?.gauges[name] ?? 0, s.at(-1)?.gauges[name] ?? 0];
  return {
    frames: s.length, callsP99: p99, gaugeDrift,
    bytesP99: pct(s.map((x) => x.bytes), 0.99),
    localeP99: pct(s.map((x) => x.locale), 0.99),
    rendersP99: pct(s.map((x) => x.renders), 0.99),
  };
}

/** Soak gate: fails when a count grows with session length or pointer movement instead of with the feed. */
export function assertSteady(
  sum: ReturnType<typeof summarise>,
  limits: { maxLocalePerFrame: number; maxBytesPerFrame: number; maxGaugeGrowth: Record<string, number> },
): string[] {
  const failures: string[] = [];
  if (sum.localeP99 > limits.maxLocalePerFrame) failures.push(`locale formatting p99 ${sum.localeP99} per frame`);
  if (sum.bytesP99 > limits.maxBytesPerFrame) failures.push(`upload p99 ${sum.bytesP99} bytes per frame`);
  for (const [name, [start, end]] of Object.entries(sum.gaugeDrift)) {
    if (end - start > (limits.maxGaugeGrowth[name] ?? 0)) failures.push(`${name} grew from ${start} to ${end}`);
  }
  return failures;
}