@bian-womp/spark-workbench 0.3.9 → 0.3.10

package/lib/cjs/index.cjs

@@ -161,6 +161,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
     }
     setRegistry(registry) {
         this._registry = registry;
+        this.refreshValidation();
         this.emit("registryChanged", { registry });
     }
     /**
@@ -1034,12 +1035,12 @@ class CLIWorkbench {
 }
 
 class AbstractGraphRunner {
-    constructor(registry, backend) {
-        this.registry = registry;
+    constructor(backend, registry) {
         this.backend = backend;
         this.listeners = new Map();
         this.stagedInputs = {};
         this.runnerId = "";
+        this.registry = registry ?? sparkGraph.createSimpleGraphRegistry();
     }
     async whenIdle() {
         await this.engine?.whenIdle();
@@ -1099,7 +1100,7 @@ class AbstractGraphRunner {
 let localRunnerCounter = 0;
 class LocalGraphRunner extends AbstractGraphRunner {
     constructor(registry) {
-        super(registry, { kind: "local" });
+        super({ kind: "local" }, registry);
         this.extData = {};
         this.setEnvironment = (env, opts) => {
             if (!this.runtime)
@@ -1600,8 +1601,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         })();
         return this.clientPromise;
     }
-    constructor(registry, backend) {
-        super(registry, backend);
+    constructor(backend) {
+        super(backend);
         this.disposed = false;
         this.valueCache = new Map();
         this.listenersBound = false;
@@ -1890,7 +1891,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             return await client.api.snapshotFull();
         }
         catch {
-            return { def: undefined, environment: {}, inputs: {}, outputs: {} };
+            return { inputs: {}, outputs: {} };
         }
     }
     async applySnapshotFull(payload, options) {
@@ -4464,7 +4465,6 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         const offRunnerRegistry = runner.on("registry", async (newReg) => {
             try {
                 wb.setRegistry(newReg);
-                // Increment registry version to trigger UI updates
                 // Trigger a graph update so the UI revalidates with new types/enums/nodes
                 try {
                     await runner.update(wb.def);
@@ -5759,7 +5759,8 @@ const SelectionBoundOverlay = ({ selection, rfInstance }) => {
         } }));
 };
 
-const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize, reactFlowProps }, ref) => {
+const WorkbenchCanvasComponent = React.forwardRef((props, ref) => {
+    const { showValues, toString, toElement, getDefaultNodeSize, reactFlowProps, } = props;
     const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
@@ -5842,7 +5843,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         },
     }), []);
     const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb);
-    const ui = wb.getUI();
+    const ui = React.useMemo(() => wb.getUI(), [wb, uiVersion]);
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
         const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
@@ -5872,8 +5873,17 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         const customEdgeRenderer = ui.getEdgeRenderer();
         return { default: customEdgeRenderer || DefaultEdge };
     }, [uiVersion, ui]);
-    const { nodes, edges } = React.useMemo(() => {
-        const sel = wb.getSelection();
+    // Track selection state to prevent unnecessary re-renders
+    const [selection, setSelection] = React.useState(() => wb.getSelection());
+    React.useEffect(() => {
+        const off = wb.on("selectionChanged", (sel) => {
+            setSelection({ nodes: sel.nodes, edges: sel.edges });
+        });
+        return () => off();
+    }, [wb]);
+    // Memoize customData to prevent unnecessary recomputations
+    const customData = React.useMemo(() => wb.getCustomData(), [wb]);
+    const rfData = React.useMemo(() => {
         const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
             inputs: inputsMap,
@@ -5886,11 +5896,11 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             edgeStatus,
             nodeValidation,
             edgeValidation,
-            selectedNodeIds: new Set(sel.nodes),
-            selectedEdgeIds: new Set(sel.edges),
+            selectedNodeIds: new Set(selection.nodes),
+            selectedEdgeIds: new Set(selection.edges),
             getDefaultNodeSize,
             ui,
-            customData: wb.getCustomData(),
+            customData,
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -5984,8 +5994,10 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, [
         showValues,
         inputsMap,
+        inputDefaultsMap,
         outputsMap,
         valuesTick,
+        registryVersion,
         toString,
         toElement,
         nodeStatus,
@@ -5993,8 +6005,14 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         nodeValidation,
         edgeValidation,
         resolveNodeType,
+        selection,
+        customData,
+        ui,
+        getDefaultNodeSize,
+        wb,
+        uiVersion,
     ]);
-    const throttled = useThrottledValue({ nodes, edges }, 100);
+    const throttled = useThrottledValue(rfData, 100);
     const [menuState, setMenuState] = React.useState(null);
     // Compute the rectangular screen-space bounds of the current selection
     const getSelectionScreenBounds = () => {
@@ -6205,7 +6223,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, [menuState, wb, wb.registry, registryVersion, outputTypesMap]);
     // Keyboard shortcuts configuration
     const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
-    const keyboardShortcuts = overrides?.keyboardShortcuts || {
+    const keyboardShortcuts = React.useMemo(() => overrides?.keyboardShortcuts || {
         undo: "⌘/Ctrl + Z",
         redo: "⌘/Ctrl + Shift + Z",
         copy: "⌘/Ctrl + C",
@@ -6214,7 +6232,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         duplicateWithEdges: "⌘/Ctrl + Shift + E",
         selectAll: "⌘/Ctrl + A",
         delete: "Delete",
-    };
+    }, [overrides?.keyboardShortcuts]);
     // Toast notification for keyboard shortcuts
     const { toast, showToast, hideToast } = useKeyboardShortcutToast();
     // Keyboard shortcut handler
@@ -6272,8 +6290,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     const modKeyLabel = isMac ? "⌘" : "Ctrl";
                     showToast(`Copy (${modKeyLabel} + C)`);
                     // If single node selected, use node context menu handler; otherwise use selection handler
-                    if (selection.nodes.length === 1 &&
-                        nodeContextMenuHandlers?.onCopy) {
+                    if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onCopy) {
                         nodeContextMenuHandlers.onCopy();
                     }
                     else if (selectionContextMenuHandlers.onCopy) {
@@ -6411,8 +6428,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                                 (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
                                         ? { enableKeyboardShortcuts, keyboardShortcuts }
                                         : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
-                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: wb.getSelection(), rfInstance: rfInstanceRef.current })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: selection, rfInstance: rfInstanceRef.current })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
+const WorkbenchCanvas = WorkbenchCanvasComponent;
 
 function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
     const { wb, runner, selectedNodeId, runAutoLayout, runMode, setRunMode, isRunning, } = useWorkbenchContext();
@@ -6439,7 +6457,10 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         if (isConnecting) {
             return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-gray-500 border-gray-400 flex items-center gap-1 disabled:opacity-50", disabled: true, title: "Connecting to backend...", children: [jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 16, className: "animate-spin" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Connecting..." })] }));
         }
-        return (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 disabled:opacity-50", onClick: (evt) => {
+        if (isGraphRunning) {
+            return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-white border-none bg-green-500 flex items-center gap-1 cursor-default pointer-events-none", title: "Running", children: [jsxRuntime.jsx(react$1.RocketLaunchIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Running" })] }));
+        }
+        return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300 disabled:opacity-50", onClick: (evt) => {
                 if (evt.shiftKey && !confirm("Invalidate and re-run graph?"))
                     return;
                 try {
@@ -6454,7 +6475,7 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                 }
             }, disabled: !canControl, title: !canControl
                 ? "Waiting for connection"
-                : `Start ${runMode === "manual" ? "manual" : "auto"} mode`, children: [jsxRuntime.jsx(react$1.PlayIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
+                : `Start ${runMode === "manual" ? "manual" : "auto"} mode`, children: [jsxRuntime.jsx(react$1.RocketIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] }));
     }, [transportStatus, isGraphRunning, runner, runMode, wb, backendKind]);
     const defaultExamples = React.useMemo(() => [
         {
@@ -6498,10 +6519,6 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
     const canvasRef = React.useRef(null);
     const canvasContainerRef = React.useRef(null);
     const uploadInputRef = React.useRef(null);
-    const [registryReady, setRegistryReady] = React.useState(() => {
-        // For local backends, registry is always ready
-        return backendKind === "local";
-    });
     // Expose init callback with setInitialGraph helper
     // Note: This runs whenever runner changes
     React.useEffect(() => {
@@ -6621,21 +6638,6 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         const off = runner.on("transport", setTransportStatus);
         return () => off();
     }, [runner]);
-    // Track registry readiness for remote backends
-    React.useEffect(() => {
-        // For local backends, registry is always ready
-        if (backendKind === "local") {
-            setRegistryReady(true);
-            return;
-        }
-        // Reset readiness when switching to remote backend
-        setRegistryReady(false);
-        // For remote backends, wait for registry event
-        const off = runner.on("registry", () => {
-            setRegistryReady(true);
-        });
-        return () => off();
-    }, [runner, backendKind]);
     React.useEffect(() => {
         if (isGraphRunning)
             return;
@@ -6833,56 +6835,45 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                             } }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
-    const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
-    // Store previous runner for cleanup
-    const prevRunnerRef = React.useRef(null);
+    const backendKindToUse = React.useMemo(() => {
+        if (!backendOptions)
+            return "local";
+        return backendKind;
+    }, [backendOptions, backendKind]);
     const runner = React.useMemo(() => {
         let newRunner;
-        if (backendKind === "remote-http") {
+        if (backendKindToUse === "remote-http" && backendOptions) {
             const backend = {
                 kind: "remote-http",
                 baseUrl: httpBaseUrl,
                 connectOptions: backendOptions?.connectOptions,
                 onCustomEvent: backendOptions?.onCustomEvent,
             };
-            newRunner = new RemoteGraphRunner(registry, backend);
+            newRunner = new RemoteGraphRunner(backend);
         }
-        else if (backendKind === "remote-ws") {
+        else if (backendKindToUse === "remote-ws" && backendOptions) {
             const backend = {
                 kind: "remote-ws",
                 url: wsUrl,
                 connectOptions: backendOptions?.connectOptions,
                 onCustomEvent: backendOptions?.onCustomEvent,
             };
-            newRunner = new RemoteGraphRunner(registry, backend);
+            newRunner = new RemoteGraphRunner(backend);
         }
         else {
-            newRunner = new LocalGraphRunner(registry);
+            newRunner = new LocalGraphRunner();
         }
         return newRunner;
-    }, [registry, backendKind, httpBaseUrl, wsUrl, backendOptions]);
-    // Dispose previous runner after commit; dispose current on unmount
+    }, [backendKindToUse, httpBaseUrl, wsUrl, backendOptions]);
+    // Dispose runner when it changes or component unmounts
     React.useEffect(() => {
-        const previous = prevRunnerRef.current;
-        prevRunnerRef.current = runner;
-        if (previous && previous !== runner) {
+        return () => {
             try {
-                previous.dispose();
+                runner.dispose();
             }
             catch (err) {
-                console.warn("Error disposing previous runner:", err);
-            }
-        }
-        return () => {
-            // Only dispose if this runner is still the current one
-            if (prevRunnerRef.current === runner) {
-                try {
-                    runner.dispose();
-                }
-                catch (err) {
-                    console.warn("Error disposing runner on unmount:", err);
-                }
+                console.warn("Error disposing runner:", err);
             }
         };
     }, [runner]);
@@ -6902,7 +6893,7 @@ function WorkbenchStudio({ example, onExampleChange, backendKind, onBackendKindC
             runner.dispose();
         onBackendKindChange(v);
     }, [isGraphRunning]);
-    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, overrides: overrides, uiVersion: uiVersion, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
+    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, overrides: overrides, uiVersion: uiVersion, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, backendKind: backendKindToUse, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
 exports.AbstractWorkbench = AbstractWorkbench;
@@ -6918,6 +6909,7 @@ exports.LocalGraphRunner = LocalGraphRunner;
 exports.NodeHandles = NodeHandles;
 exports.RemoteGraphRunner = RemoteGraphRunner;
 exports.WorkbenchCanvas = WorkbenchCanvas;
+exports.WorkbenchCanvasComponent = WorkbenchCanvasComponent;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;