@opendata-ai/openchart-vanilla 6.1.1 → 6.1.3

package/dist/simulation-worker.js

@@ -1175,6 +1175,9 @@
             node.fx = null;
             node.fy = null;
           }
+          if (simulation && simulation.alpha() < 0.1) {
+            simulation.alpha(0.1).restart();
+          }
           break;
         }
         case "drag": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "6.1.1",
-    "@opendata-ai/openchart-engine": "6.1.1",
+    "@opendata-ai/openchart-core": "6.1.3",
+    "@opendata-ai/openchart-engine": "6.1.3",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/graph/canvas-renderer.ts

@@ -12,6 +12,7 @@
  * - Labels and glow skipped during active pan/zoom gestures
  */
 
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH } from '@opendata-ai/openchart-core';
 import type { GraphRenderState, PositionedEdge, PositionedNode } from './types';
 
 // ---------------------------------------------------------------------------
@@ -33,9 +34,6 @@ const TWO_PI = Math.PI * 2;
 /** Minimum node radius in screen pixels. Keeps nodes visible when zoomed out. */
 const MIN_SCREEN_RADIUS = 2.5;
 
-/** Minimum canvas width to render the brand watermark. */
-const BRAND_MIN_WIDTH = 120;
-
 // ---------------------------------------------------------------------------
 // Helpers (exported for testing)
 // ---------------------------------------------------------------------------
@@ -251,7 +249,7 @@ export class GraphCanvasRenderer {
     const padding = theme.spacing.padding;
     const x = w - padding;
     const y = h - padding;
-    ctx.font = `600 20px ${theme.fonts.family}`;
+    ctx.font = `600 ${BRAND_FONT_SIZE}px ${theme.fonts.family}`;
     ctx.fillStyle = theme.colors.axis;
     ctx.globalAlpha = 0.55;
     ctx.textAlign = 'right';

package/src/graph/simulation-worker-url.ts

@@ -1,30 +1,12 @@
 /**
  * Creates a Web Worker running the force simulation.
  *
- * Uses the `new URL` + `import.meta.url` pattern recognized by Vite, Webpack 5,
- * Parcel, and esbuild. The bundler resolves the worker file path at build time
- * and handles the asset accordingly.
+ * References the built .js file via `new URL` + `import.meta.url`.
+ * The consuming app's bundler resolves the worker path at build time.
  *
- * - Vite dev (Ladle): resolves src/graph/simulation-worker.ts directly, serves
- *   it as a native ES module worker with on-the-fly TypeScript transform.
- * - Production (tsup + bun build): dist/simulation-worker.js is a self-contained
- *   IIFE produced by `bun build`. The consuming app's bundler copies it as an
- *   asset and rewrites the URL.
- *
- * Usage:
- *   import { createSimulationWorker } from '@opendata-ai/openchart-vanilla';
- *   const worker = createSimulationWorker();
- *   worker.postMessage({ type: 'init', nodes, links, width: 800, height: 600 });
- *   worker.onmessage = (e) => console.log(e.data);
- */
-
-/**
- * Path that resolves in Vite dev (workspace source) to the .ts file.
- * In production dist/, the consuming bundler resolves to simulation-worker.js
- * which sits alongside index.js in the dist folder.
+ * Note: SimulationManager handles .js/.ts fallback internally. This
+ * helper is exported for consumers who want to manage the worker directly.
  */
-const workerUrl = new URL('./simulation-worker.ts', import.meta.url);
-
 export function createSimulationWorker(): Worker {
-  return new Worker(workerUrl, { type: 'module' });
+  return new Worker(new URL('./simulation-worker.js', import.meta.url), { type: 'module' });
 }

package/src/graph/simulation-worker.ts

@@ -18,10 +18,6 @@ declare const self: WorkerSelf;
  * IMPORTANT: This file cannot import from workspace packages (@opendata-ai/*).
  * All needed types are defined inline or duplicated from worker-protocol.ts.
  * The bun build step bundles this as an isolated IIFE.
- *
- * The companion simulation-worker-url.ts provides createSimulationWorker()
- * which uses `new URL('./simulation-worker.ts', import.meta.url)` for Vite dev,
- * while production consumers load the pre-built dist/simulation-worker.js.
  */
 
 import {
@@ -246,6 +242,12 @@ ctx.addEventListener('message', ((event: MessageEvent<InMessage>) => {
           node.fx = null;
           node.fy = null;
         }
+        // Gentle reheat so the released node settles into equilibrium
+        // without destabilizing the whole graph. 0.1 is enough for
+        // local settling without triggering large-scale reorganization.
+        if (simulation && simulation.alpha() < 0.1) {
+          simulation.alpha(0.1).restart();
+        }
         break;
       }
 

package/src/graph/simulation.ts

@@ -2,11 +2,10 @@
  * SimulationManager: spawns a Web Worker for the force simulation,
  * or falls back to synchronous d3-force on the main thread.
  *
- * Synchronous fallback is used when:
- * - Web Workers are unavailable (SSR, test environments)
- * - Node count is below 200 (worker overhead not worth it)
- *
- * The sync path caps at 300 ticks to prevent blocking the main thread.
+ * The worker is always preferred when available. Synchronous fallback
+ * is only used when Web Workers are unavailable (SSR, test environments).
+ * The sync path batches ticks via requestAnimationFrame to avoid
+ * blocking the main thread.
  */
 
 import {
@@ -27,8 +26,8 @@ import type { SimEdge, SimNode, WorkerOutMessage, WorkerSimulationConfig } from
 // Constants
 // ---------------------------------------------------------------------------
 
-const SYNC_THRESHOLD = 200;
 const SYNC_MAX_TICKS = 300;
+const SYNC_TICKS_PER_BATCH = 15;
 
 // ---------------------------------------------------------------------------
 // Internal node shape for sync simulation
@@ -93,6 +92,7 @@ export class SimulationManager {
   private tickCb: TickCallback | null = null;
   private settledCb: SettledCallback | null = null;
   private destroyed = false;
+  private syncRafId: number | null = null;
 
   // Stored for worker->sync fallback
   private initNodes: SimNode[] = [];
@@ -112,7 +112,7 @@ export class SimulationManager {
   ): SimulationManager {
     const mgr = new SimulationManager();
 
-    const useWorker = typeof Worker !== 'undefined' && nodes.length >= SYNC_THRESHOLD;
+    const useWorker = typeof Worker !== 'undefined';
 
     if (useWorker) {
       mgr.initWorker(nodes, edges, config);
@@ -160,7 +160,7 @@ export class SimulationManager {
     }
   }
 
-  /** Unpin a node (free it from fixed position). */
+  /** Unpin a node and reheat so forces settle it into equilibrium. */
   unpinNode(id: string): void {
     if (this.destroyed) return;
 
@@ -172,6 +172,10 @@ export class SimulationManager {
         node.fx = null;
         node.fy = null;
       }
+      if (this.syncSim && this.syncSim.alpha() < 0.1) {
+        this.syncSim.alpha(0.1).restart();
+        this.runSyncTicks();
+      }
     }
   }
 
@@ -198,6 +202,11 @@ export class SimulationManager {
   destroy(): void {
     this.destroyed = true;
 
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
+    }
+
     if (this.worker) {
       this.worker.postMessage({ type: 'stop' });
       this.worker.terminate();
@@ -223,44 +232,77 @@ export class SimulationManager {
     this.initEdges = edges;
     this.initConfig = config;
 
+    // Worker URL resolution:
+    // - Built dist/ consumers: import.meta.url points at dist/index.js,
+    //   so ./simulation-worker.js resolves to dist/simulation-worker.js.
+    // - Vite dev with source aliases (Ladle): import.meta.url points at
+    //   src/graph/simulation.ts, so ./simulation-worker.js doesn't exist.
+    //   The .js worker fails to load, and the onerror handler retries
+    //   with .ts which Vite transforms on the fly.
+    // - Vite production build: detects `new Worker(new URL(...))` and
+    //   bundles the worker as a hashed .js asset.
+    const initMsg = { type: 'init' as const, nodes, edges, config };
+    const wireWorker = (worker: Worker) => {
+      this.worker = worker;
+
+      worker.onmessage = (event: MessageEvent<WorkerOutMessage>) => {
+        if (this.destroyed) return;
+        const msg = event.data;
+
+        switch (msg.type) {
+          case 'positions':
+            this.tickCb?.(msg.nodes, msg.alpha);
+            break;
+          case 'settled':
+            this.settledCb?.();
+            break;
+          case 'error':
+            console.error('[SimulationManager] Worker error:', msg.message);
+            break;
+        }
+      };
+
+      worker.postMessage(initMsg);
+    };
+
     try {
-      const workerUrl = new URL('./simulation-worker.ts', import.meta.url);
-      this.worker = new Worker(workerUrl, { type: 'module' });
+      const w = new Worker(new URL('./simulation-worker.js', import.meta.url), {
+        type: 'module',
+      });
+
+      w.onerror = () => {
+        // .js failed (likely Vite dev with source aliases). Try .ts.
+        if (this.destroyed) return;
+        w.terminate();
+        this.worker = null;
+
+        try {
+          const w2 = new Worker(new URL('./simulation-worker.ts', import.meta.url), {
+            type: 'module',
+          });
+
+          w2.onerror = () => {
+            // Both .js and .ts failed - fall back to sync.
+            if (this.destroyed) return;
+            console.warn('[SimulationManager] Worker failed to load, falling back to sync');
+            w2.terminate();
+            this.worker = null;
+            this.initSync(this.initNodes, this.initEdges, this.initConfig!);
+          };
+
+          wireWorker(w2);
+        } catch {
+          console.warn('[SimulationManager] Worker creation failed, using sync fallback');
+          this.initSync(this.initNodes, this.initEdges, this.initConfig!);
+        }
+      };
+
+      wireWorker(w);
     } catch {
       // Worker construction failed (e.g. SSR or restrictive CSP)
       console.warn('[SimulationManager] Worker creation failed, using sync fallback');
       this.initSync(nodes, edges, config);
-      return;
     }
-
-    this.worker.onmessage = (event: MessageEvent<WorkerOutMessage>) => {
-      if (this.destroyed) return;
-      const msg = event.data;
-
-      switch (msg.type) {
-        case 'positions':
-          this.tickCb?.(msg.nodes, msg.alpha);
-          break;
-        case 'settled':
-          this.settledCb?.();
-          break;
-        case 'error':
-          console.error('[SimulationManager] Worker error:', msg.message);
-          break;
-      }
-    };
-
-    this.worker.onerror = () => {
-      // Worker failed to load (e.g. MIME type error in dev, missing file).
-      // Terminate and fall back to synchronous simulation.
-      if (this.destroyed) return;
-      console.warn('[SimulationManager] Worker failed to load, falling back to sync');
-      this.worker?.terminate();
-      this.worker = null;
-      this.initSync(this.initNodes, this.initEdges, this.initConfig!);
-    };
-
-    this.worker.postMessage({ type: 'init', nodes, edges, config });
   }
 
   // -------------------------------------------------------------------------
@@ -318,41 +360,61 @@ export class SimulationManager {
   }
 
   /**
-   * Run ticks synchronously and fire callbacks.
-   * @param deferred - When true, deliver results via microtask. Used for the
-   *   initial run where callbacks haven't been registered yet. Subsequent
-   *   calls (reheat, drag) fire synchronously since callbacks are already set.
+   * Run simulation ticks in batches, yielding to the main thread between
+   * batches via requestAnimationFrame. This prevents a multi-second freeze
+   * when the sync fallback handles large graphs (1k+ nodes).
+   *
+   * Each batch runs SYNC_TICKS_PER_BATCH ticks, emits positions for
+   * progressive rendering, then schedules the next batch.
+   *
+   * @param deferred - When true, start via microtask (initial run where
+   *   callbacks aren't wired yet). Otherwise start immediately.
    */
   private runSyncTicks(deferred = false): void {
     if (!this.syncSim || this.destroyed) return;
 
-    const sim = this.syncSim;
-    for (let i = 0; i < SYNC_MAX_TICKS; i++) {
-      sim.tick();
-      if (sim.alpha() < 0.001) break;
+    // Cancel any in-flight batched run (e.g. from a previous reheat)
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
     }
 
-    const positions = this.syncNodes.map((n) => ({
-      id: n.id,
-      x: n.x ?? 0,
-      y: n.y ?? 0,
-    }));
-    const alpha = sim.alpha();
-    const settled = alpha < 0.001;
+    const sim = this.syncSim;
+    let tickCount = 0;
+
+    const runBatch = () => {
+      if (this.destroyed || !this.syncSim) return;
+      this.syncRafId = null;
+
+      for (let i = 0; i < SYNC_TICKS_PER_BATCH && tickCount < SYNC_MAX_TICKS; i++, tickCount++) {
+        sim.tick();
+        if (sim.alpha() < 0.001) {
+          tickCount = SYNC_MAX_TICKS;
+          break;
+        }
+      }
+
+      const positions = this.syncNodes.map((n) => ({
+        id: n.id,
+        x: n.x ?? 0,
+        y: n.y ?? 0,
+      }));
+      const alpha = sim.alpha();
+      const settled = alpha < 0.001 || tickCount >= SYNC_MAX_TICKS;
 
-    const deliver = () => {
-      if (this.destroyed) return;
       this.tickCb?.(positions, alpha);
+
       if (settled) {
         this.settledCb?.();
+      } else {
+        this.syncRafId = requestAnimationFrame(runBatch);
       }
     };
 
     if (deferred) {
-      // Initial run: callbacks not registered yet, defer to microtask
-      queueMicrotask(deliver);
+      queueMicrotask(runBatch);
     } else {
-      deliver();
+      runBatch();
     }
   }
 }

package/src/graph-mount.ts

@@ -378,6 +378,8 @@ export function createGraph(
       centerForce: config.centerForce,
     });
 
+    let initialSettleDone = false;
+
     simulation.onTick((positions, _alpha) => {
       if (destroyed) return;
 
@@ -409,19 +411,22 @@ export function createGraph(
       // Rebuild spatial index
       spatialIndex.rebuild(positionedNodes);
 
+      // During initial simulation, continuously fit the viewport so the graph
+      // is visible and centered as it forms. This replaces the jarring single
+      // snap at settle time with a smooth progressive fit.
+      if (!initialSettleDone && positionedNodes.length > 0 && interactionManager) {
+        const { width: cw, height: ch } = getCanvasDimensions();
+        const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+        interactionManager.setTransform(fitTransform);
+      }
+
       needsRender = true;
       scheduleRender();
     });
 
     simulation.onSettled(() => {
-      // One final fit after simulation settles
-      if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
-        const { width: cw, height: ch } = getCanvasDimensions();
-        const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
-        interactionManager.setTransform(fitTransform);
-        needsRender = true;
-        scheduleRender();
-      }
+      if (initialSettleDone) return;
+      initialSettleDone = true;
     });
   }
 

package/src/svg-renderer.ts

@@ -27,7 +27,7 @@ import type {
   TextStyle,
   TickMarkLayout,
 } from '@opendata-ai/openchart-core';
-import { estimateTextWidth } from '@opendata-ai/openchart-core';
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, estimateTextWidth } from '@opendata-ai/openchart-core';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
@@ -1066,8 +1066,6 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
 // Brand rendering
 // ---------------------------------------------------------------------------
 
-const BRAND_FONT_SIZE = 20;
-const BRAND_MIN_WIDTH = 120;
 const BRAND_URL = 'https://tryopendata.ai';
 const XLINK_NS = 'http://www.w3.org/1999/xlink';
 

package/src/table-renderer.ts

@@ -7,6 +7,7 @@
  */
 
 import type { ResolvedColumn, TableLayout, TableRow } from '@opendata-ai/openchart-core';
+import { BRAND_FONT_SIZE } from '@opendata-ai/openchart-core';
 import { renderCell } from './renderers/table-cells';
 
 // ---------------------------------------------------------------------------
@@ -14,7 +15,6 @@ import { renderCell } from './renderers/table-cells';
 // ---------------------------------------------------------------------------
 
 const BRAND_URL = 'https://tryopendata.ai';
-const BRAND_FONT_SIZE = 20;
 
 // ---------------------------------------------------------------------------
 // Chrome rendering