@bian-womp/spark-workbench 0.2.46 → 0.2.48

package/lib/cjs/index.cjs

@@ -336,8 +336,9 @@ class AbstractGraphRunner {
         this.stagedInputs = {};
     }
     launch(def, opts) {
+        // Auto-stop if engine is already running
         if (this.engine) {
-            throw new Error("Engine already running. Stop the current engine first.");
+            this.stop();
         }
     }
     setInput(nodeId, handle, value) {
@@ -389,6 +390,39 @@ class AbstractGraphRunner {
     async whenIdle() {
         await this.engine?.whenIdle();
     }
+    stop() {
+        if (!this.engine)
+            return;
+        // Dispose engine (cleans up timers, listeners, etc.)
+        this.engine.dispose();
+        this.engine = undefined;
+        // Emit status but keep runtime alive
+        if (this.runningKind) {
+            this.runningKind = undefined;
+            this.emit("status", { running: false, engine: undefined });
+        }
+    }
+    async switchEngine(opts) {
+        if (!this.engine || !this.runtime) {
+            throw new Error("No engine running to switch from");
+        }
+        // Wait for current engine to be idle
+        await this.whenIdle();
+        // Capture current state
+        const currentInputs = { ...this.stagedInputs };
+        // Stop current engine
+        this.stop();
+        // Ensure runtime is in a clean state (resumed)
+        this.runtime.resume();
+        // Create and launch new engine (to be implemented by subclasses)
+        await this.createAndLaunchEngine(opts);
+        // Re-apply staged inputs to new engine
+        for (const [nodeId, map] of Object.entries(currentInputs)) {
+            if (this.engine) {
+                this.engine.setInputs(nodeId, map);
+            }
+        }
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -460,37 +494,30 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.build(def);
         if (!this.runtime)
             throw new Error("Runtime not built");
-        const rt = this.runtime;
-        switch (opts.engine) {
-            case "push":
-                this.engine = new sparkGraph.PushEngine(rt);
-                break;
-            case "batched":
-                this.engine = new sparkGraph.BatchedEngine(rt, {
-                    flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
-                });
-                break;
-            case "pull":
-                this.engine = new sparkGraph.PullEngine(rt);
-                break;
-            case "hybrid":
-                this.engine = new sparkGraph.HybridEngine(rt, {
-                    windowMs: opts.hybrid?.windowMs ?? 250,
-                    batchThreshold: opts.hybrid?.batchThreshold ?? 3,
-                });
-                break;
-            case "step":
-                this.engine = new sparkGraph.StepEngine(rt);
-                break;
-            default:
-                throw new Error("Unknown engine kind");
-        }
+        // Use the async method to create engine
+        this.createAndLaunchEngine(opts).catch((err) => {
+            console.error("Failed to launch engine:", err);
+            const errorMessage = err instanceof Error ? err.message : String(err);
+            this.emit("error", {
+                kind: "system",
+                message: errorMessage,
+                err: err instanceof Error ? err : new Error(errorMessage),
+            });
+        });
+    }
+    async createAndLaunchEngine(opts) {
+        if (!this.runtime)
+            throw new Error("Runtime not built");
+        // Use shared engine factory
+        this.engine = sparkGraph.createEngine(this.runtime, opts);
+        if (!this.engine)
+            throw new Error("Failed to create engine");
         this.engine.on("value", (e) => this.emit("value", e));
         this.engine.on("error", (e) => this.emit("error", e));
         this.engine.on("invalidate", (e) => this.emit("invalidate", e));
         this.engine.on("stats", (e) => this.emit("stats", e));
-        this.engine.launch(opts.invalidate);
-        this.runningKind = opts.engine;
+        this.engine.launch(opts?.invalidate);
+        this.runningKind = opts?.engine ?? "push";
         this.emit("status", { running: true, engine: this.runningKind });
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
             this.engine.setInputs(nodeId, map);
@@ -498,18 +525,18 @@ class LocalGraphRunner extends AbstractGraphRunner {
     }
     async step() {
         const eng = this.engine;
-        if (eng instanceof sparkGraph.StepEngine)
+        if (eng && eng instanceof sparkGraph.StepEngine)
             await eng.step();
     }
     async computeNode(nodeId) {
         const eng = this.engine;
-        if (eng instanceof sparkGraph.PullEngine)
+        if (eng && eng instanceof sparkGraph.PullEngine)
             await eng.computeNode(nodeId);
     }
-    flush() {
+    async flush() {
         const eng = this.engine;
-        if (eng instanceof sparkGraph.BatchedEngine)
-            eng.flush();
+        if (eng && eng instanceof sparkGraph.BatchedEngine)
+            await eng.flush();
     }
     getOutputs(def) {
         const out = {};
@@ -905,30 +932,36 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             catch {
                 console.error("Failed to hydrate remote inputs/outputs");
             }
-            const eng = client.getEngine();
-            if (!this.listenersBound) {
-                eng.on("value", (e) => {
-                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
-                        io: e.io,
-                        value: e.value,
-                        runtimeTypeId: e.runtimeTypeId,
-                    });
-                    this.emit("value", e);
-                });
-                eng.on("error", (e) => this.emit("error", e));
-                eng.on("invalidate", (e) => this.emit("invalidate", e));
-                eng.on("stats", (e) => this.emit("stats", e));
-                this.listenersBound = true;
-            }
-            this.engine = eng;
-            this.engine.launch(opts.invalidate);
-            this.runningKind = "push";
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                this.engine.setInputs(nodeId, map);
-            }
+            await this.createAndLaunchEngine(opts);
         });
     }
+    async createAndLaunchEngine(opts) {
+        const client = await this.ensureClient();
+        // Configure and launch engine on the backend
+        await client.launch(opts);
+        // Get the remote engine proxy and wire up event listeners
+        const eng = client.getEngine();
+        if (!this.listenersBound) {
+            eng.on("value", (e) => {
+                this.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                    io: e.io,
+                    value: e.value,
+                    runtimeTypeId: e.runtimeTypeId,
+                });
+                this.emit("value", e);
+            });
+            eng.on("error", (e) => this.emit("error", e));
+            eng.on("invalidate", (e) => this.emit("invalidate", e));
+            eng.on("stats", (e) => this.emit("stats", e));
+            this.listenersBound = true;
+        }
+        this.engine = eng;
+        this.runningKind = opts?.engine ?? "push";
+        this.emit("status", { running: true, engine: this.runningKind });
+        for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+            this.engine.setInputs(nodeId, map);
+        }
+    }
     /**
      * Launch using an existing backend runtime that has already been built and hydrated.
      * This is used when resuming from a snapshot where the backend has already applied
@@ -944,34 +977,44 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // has already been built and hydrated via ApplySnapshotFull.
             // Calling build() would create a new runtime and lose the restored state.
             this.lastDef = def;
-            // Attach to the existing engine
-            const eng = client.getEngine();
-            if (!this.listenersBound) {
-                eng.on("value", (e) => {
-                    this.valueCache.set(`${e.nodeId}.${e.handle}`, {
-                        io: e.io,
-                        value: e.value,
-                        runtimeTypeId: e.runtimeTypeId,
-                    });
-                    this.emit("value", e);
-                });
-                eng.on("error", (e) => this.emit("error", e));
-                eng.on("invalidate", (e) => this.emit("invalidate", e));
-                eng.on("stats", (e) => this.emit("stats", e));
-                this.listenersBound = true;
-            }
-            this.engine = eng;
-            this.engine.launch(opts.invalidate);
-            this.runningKind = "push";
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                this.engine.setInputs(nodeId, map);
-            }
+            await this.createAndLaunchEngine(opts);
         });
     }
-    async step() { }
-    async computeNode(nodeId) { }
-    flush() { }
+    async switchEngine(opts) {
+        if (!this.engine) {
+            throw new Error("No engine running to switch from");
+        }
+        // Wait for current engine to be idle
+        await this.whenIdle();
+        // Capture current state
+        const currentInputs = { ...this.stagedInputs };
+        // Stop current engine
+        this.stop();
+        // Create and launch new engine with the specified kind
+        const client = await this.ensureClient();
+        await client.launch(opts);
+        // Get the remote engine proxy
+        const eng = client.getEngine();
+        this.engine = eng;
+        this.runningKind = opts?.engine ?? "push";
+        this.emit("status", { running: true, engine: this.runningKind });
+        // Re-apply staged inputs to new engine
+        for (const [nodeId, map] of Object.entries(currentInputs)) {
+            this.engine.setInputs(nodeId, map);
+        }
+    }
+    async step() {
+        const client = await this.ensureClient();
+        await client.step();
+    }
+    async computeNode(nodeId) {
+        const client = await this.ensureClient();
+        await client.computeNode(nodeId);
+    }
+    async flush() {
+        const client = await this.ensureClient();
+        await client.flush();
+    }
     triggerExternal(nodeId, event) {
         this.ensureClient().then(async (client) => {
             try {
@@ -2327,7 +2370,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerRegistry();
             offRunnerTransport();
         };
-    }, [runner, wb]);
+    }, [runner, wb, setRegistry]);
     // Push incremental updates into running engine without full reload
     React.useEffect(() => {
         if (runner.isRunning()) {
@@ -2408,7 +2451,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
         }
         catch { }
     }, [runner, wb]);
-    const stop = React.useCallback(() => runner.dispose(), [runner]);
+    const stop = React.useCallback(() => runner.stop(), [runner]);
     const step = React.useCallback(() => runner.step(), [runner]);
     const flush = React.useCallback(() => runner.flush(), [runner]);
     const value = React.useMemo(() => ({
@@ -3994,10 +4037,34 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             ? "Stop engine before switching example"
                             : undefined, children: [jsxRuntime.jsx("option", { value: "", children: "Select Example\u2026" }), examples.map((ex) => (jsxRuntime.jsx("option", { value: ex.id, children: ex.label }, ex.id)))] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching backend"
-                            : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: (e) => {
+                            : undefined, children: [jsxRuntime.jsx("option", { value: "local", children: "Local" }), jsxRuntime.jsx("option", { value: "remote-http", children: "Remote (HTTP)" }), jsxRuntime.jsx("option", { value: "remote-ws", children: "Remote (WebSocket)" })] }), backendKind === "remote-http" && !!onHttpBaseUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "http://127.0.0.1:18080", value: httpBaseUrl, onChange: (e) => onHttpBaseUrlChange(e.target.value) })), backendKind === "remote-ws" && !!onWsUrlChange && (jsxRuntime.jsx("input", { className: "ml-2 border border-gray-300 rounded px-2 py-1 w-72", placeholder: "ws://127.0.0.1:18081", value: wsUrl, onChange: (e) => onWsUrlChange(e.target.value) })), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: runner.getRunningEngine() ?? engine ?? "", onChange: async (e) => {
                             const kind = e.target.value || undefined;
-                            onEngineChange?.(kind);
-                        }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), runner.getRunningEngine() === "step" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !runner.isRunning(), title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), runner.getRunningEngine() === "batched" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !runner.isRunning(), title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), runner.isRunning() ? (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1", onClick: () => runner.dispose(), title: "Stop engine", children: [jsxRuntime.jsx(react$1.StopIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Stop" })] })) : (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-green-700 border-green-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300", onClick: (evt) => {
+                            const currentEngine = runner.getRunningEngine();
+                            // If engine is running and user selected a different engine, switch it
+                            if (runner.isRunning() &&
+                                currentEngine &&
+                                kind &&
+                                kind !== currentEngine) {
+                                try {
+                                    await runner.switchEngine({
+                                        engine: kind,
+                                        batched: { flushIntervalMs: 0 },
+                                        hybrid: { windowMs: 250, batchThreshold: 3 },
+                                    });
+                                    onEngineChange?.(kind);
+                                }
+                                catch (err) {
+                                    const message = err instanceof Error ? err.message : String(err);
+                                    alert(`Failed to switch engine: ${message}`);
+                                    // Reset dropdown to current engine
+                                    e.target.value = currentEngine;
+                                }
+                            }
+                            else {
+                                // Normal change when not running
+                                onEngineChange?.(kind);
+                            }
+                        }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), runner.getRunningEngine() === "step" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !runner.isRunning(), title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), runner.getRunningEngine() === "batched" && (jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !runner.isRunning(), title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), runner.isRunning() ? (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1", onClick: () => runner.stop(), title: "Stop engine", children: [jsxRuntime.jsx(react$1.StopIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Stop" })] })) : (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-green-700 border-green-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300", onClick: (evt) => {
                             const kind = engine;
                             if (!kind)
                                 return alert("Select an engine first.");