@bian-womp/spark-workbench 0.2.53 → 0.2.54

package/lib/cjs/index.cjs

@@ -114,6 +114,13 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const { positions } = await this.layout.layout(this.def);
             this.positions = positions;
         }
+        const defNodeIds = new Set(this.def.nodes.map((n) => n.nodeId));
+        const defEdgeIds = new Set(this.def.edges.map((e) => e.id));
+        const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
+        const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
+        this.positions = filteredPositions;
+        this.selection = { nodes: filteredNodes, edges: filteredEdges };
         this.emit("graphChanged", { def: this.def });
         this.refreshValidation();
     }
@@ -230,29 +237,32 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
     }
     // Position and selection APIs for React Flow bridge
-    setPosition(nodeId, pos) {
+    setPosition(nodeId, pos, opts) {
         this.positions[nodeId] = pos;
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNode", nodeId, pos },
+            commit: !!opts?.commit === true,
         });
     }
-    setPositions(map) {
+    setPositions(map, opts) {
         this.positions = { ...map };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNodes" },
+            commit: opts?.commit,
         });
     }
     getPositions() {
         return { ...this.positions };
     }
-    setSelection(sel) {
+    setSelection(sel, opts) {
         this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
         this.emit("selectionChanged", this.selection);
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "selection" },
+            commit: opts?.commit,
         });
     }
     getSelection() {
@@ -261,21 +271,31 @@ class InMemoryWorkbench extends AbstractWorkbench {
             edges: [...this.selection.edges],
         };
     }
-    setViewport(viewport) {
+    setViewport(viewport, opts) {
         this.viewport = { ...viewport };
+        this.emit("graphUiChanged", {
+            def: this.def,
+            change: { type: "viewport" },
+            commit: opts?.commit,
+        });
     }
     getViewport() {
         return this.viewport ? { ...this.viewport } : null;
     }
     getUIState() {
+        const defNodeIds = new Set(this.def.nodes.map((n) => n.nodeId));
+        const defEdgeIds = new Set(this.def.edges.map((e) => e.id));
+        const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
+        const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
         return {
-            positions: Object.keys(this.positions).length > 0
-                ? { ...this.positions }
+            positions: Object.keys(filteredPositions).length > 0
+                ? filteredPositions
                 : undefined,
-            selection: this.selection.nodes.length > 0 || this.selection.edges.length > 0
+            selection: filteredNodes.length > 0 || filteredEdges.length > 0
                 ? {
-                    nodes: [...this.selection.nodes],
-                    edges: [...this.selection.edges],
+                    nodes: filteredNodes,
+                    edges: filteredEdges,
                 }
                 : undefined,
             viewport: this.viewport ? { ...this.viewport } : undefined,
@@ -842,10 +862,13 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // Auto-fetch registry on first connection (only once)
             if (!this.registryFetched && !this.registryFetching) {
                 // Log loading state (UI can listen to transport status for loading indication)
-                console.info("Loading registry from remote...");
-                this.fetchRegistry(client).catch((err) => {
+                console.info("[RemoteGraphRunner] Loading registry from remote...");
+                this.fetchRegistry(client)
+                    .then(() => {
+                    console.info("[RemoteGraphRunner] Loaded registry from remote");
+                })
+                    .catch((err) => {
                     console.error("[RemoteGraphRunner] Failed to fetch registry:", err);
-                    // Error handling is done inside fetchRegistry, but we catch unhandled rejections
                 });
             }
             // Clear promise on success
@@ -1479,10 +1502,10 @@ function useWorkbenchBridge(wb) {
         });
     }, [wb]);
     const onNodesChange = React.useCallback((changes) => {
-        // Apply position updates
+        // Apply position updates continuously, but mark commit only on drag end
         changes.forEach((c) => {
             if (c.type === "position" && c.position) {
-                wb.setPosition(c.id, c.position);
+                wb.setPosition(c.id, c.position, { commit: !c.dragging });
             }
         });
         // Derive next node selection from change set
@@ -1956,6 +1979,99 @@ function getHandleClassName(args) {
     return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
 }
 
+function generateTimestamp() {
+    const d = new Date();
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
+}
+function downloadJSON(payload, filename) {
+    const pretty = JSON.stringify(payload, null, 2);
+    const blob = new Blob([pretty], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+}
+function isSnapshotPayload(parsed) {
+    return (parsed !== null &&
+        typeof parsed === "object" &&
+        ("def" in parsed ||
+            "inputs" in parsed ||
+            "outputs" in parsed ||
+            "environment" in parsed));
+}
+async function download(wb, runner) {
+    try {
+        const def = wb.export();
+        const uiState = wb.getUIState();
+        let snapshot;
+        if (runner.isRunning()) {
+            const fullSnapshot = await runner.snapshotFull();
+            snapshot = {
+                ...fullSnapshot,
+                def,
+                extData: {
+                    ...(fullSnapshot.extData || {}),
+                    ui: uiState,
+                },
+            };
+        }
+        else {
+            const inputs = runner.getInputs(def);
+            snapshot = {
+                def,
+                inputs,
+                outputs: {},
+                environment: {},
+                extData: { ui: uiState },
+            };
+        }
+        downloadJSON(snapshot, `spark-snapshot-${generateTimestamp()}.json`);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        throw new Error(`Failed to download snapshot: ${message}`);
+    }
+}
+async function upload(parsed, wb, runner) {
+    if (!isSnapshotPayload(parsed)) {
+        throw new Error("Invalid snapshot format - expected RuntimeSnapshotFull");
+    }
+    const def = parsed.def;
+    const environment = parsed.environment || {};
+    const inputs = parsed.inputs || {};
+    const outputs = parsed.outputs || {};
+    const extData = parsed.extData || {};
+    if (!def) {
+        throw new Error("Graph definition is empty");
+    }
+    await wb.load(def);
+    if (extData.ui && typeof extData.ui === "object") {
+        wb.setUIState(extData.ui);
+    }
+    if (runner.isRunning()) {
+        await runner.applySnapshotFull({
+            def,
+            environment,
+            inputs,
+            outputs,
+            extData,
+        });
+    }
+    else {
+        runner.build(wb.export());
+        if (inputs && typeof inputs === "object") {
+            for (const [nodeId, map] of Object.entries(inputs)) {
+                runner.setInputs(nodeId, map);
+            }
+        }
+    }
+}
+
 const WorkbenchContext = React.createContext(null);
 function useWorkbenchContext() {
     const ctx = React.useContext(WorkbenchContext);
@@ -2141,7 +2257,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             curX += maxWidth + H_GAP;
         }
-        wb.setPositions(pos);
+        wb.setPositions(pos, { commit: true });
     }, [wb, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = React.useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
@@ -3663,7 +3779,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onMoveEnd = React.useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
-            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom });
+            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom }, { commit: true });
         }
     }, [wb]);
     const viewportRef = React.useRef(null);
@@ -3830,9 +3946,20 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             }
             catch { }
         });
+        const off3 = wb.on("graphUiChanged", (evt) => {
+            if (!evt.commit)
+                return;
+            try {
+                const cur = wb.export();
+                const inputs = runner.getInputs(cur);
+                onChange({ def: cur, inputs });
+            }
+            catch { }
+        });
         return () => {
             off1();
             off2();
+            off3();
         };
     }, [wb, runner, onChange]);
     const applyExample = React.useCallback(async (key) => {
@@ -3868,24 +3995,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         setRegistry,
         backendKind,
     ]);
-    const downloadGraph = React.useCallback(() => {
+    const download$1 = React.useCallback(async () => {
         try {
-            const def = wb.export();
-            const inputs = runner.getInputs(def);
-            const payload = { def, inputs };
-            const pretty = JSON.stringify(payload, null, 2);
-            const blob = new Blob([pretty], { type: "application/json" });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            const d = new Date();
-            const pad = (n) => String(n).padStart(2, "0");
-            const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
-            a.href = url;
-            a.download = `spark-graph-${ts}.json`;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            URL.revokeObjectURL(url);
+            await download(wb, runner);
         }
         catch (err) {
             const message = err instanceof Error ? err.message : String(err);
@@ -3899,51 +4011,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                 return;
             const text = await file.text();
             const parsed = JSON.parse(text);
-            // Support both Graph and Snapshot payloads
-            const isSnapshot = parsed &&
-                typeof parsed === "object" &&
-                (parsed.def || parsed.inputs || parsed.outputs || parsed.environment);
-            if (isSnapshot) {
-                const def = parsed.def;
-                const positions = parsed.positions || {};
-                const environment = parsed.environment || {};
-                const inputs = parsed.inputs || {};
-                if (def && runner.isRunning()) {
-                    // Remote exact restore path
-                    await runner.applySnapshotFull({
-                        def,
-                        environment,
-                        inputs,
-                        outputs: parsed.outputs || {},
-                    });
-                    await wb.load(def);
-                    if (positions && typeof positions === "object")
-                        wb.setPositions(positions);
-                }
-                else if (!runner.isRunning()) {
-                    alert("Engine is not running");
-                }
-                else {
-                    alert("Graph definition is empty");
-                }
-            }
-            else {
-                const def = parsed?.def ?? parsed;
-                const inputs = parsed?.inputs ?? {};
-                await wb.load(def);
-                try {
-                    runner.build(wb.export());
-                }
-                catch { }
-                if (inputs && typeof inputs === "object") {
-                    for (const [nodeId, map] of Object.entries(inputs)) {
-                        try {
-                            runner.setInputs(nodeId, map);
-                        }
-                        catch { }
-                    }
-                }
-            }
+            await upload(parsed, wb, runner);
         }
         catch (err) {
             const message = err instanceof Error ? err.message : String(err);
@@ -4199,36 +4267,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 // 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" })] }), engineKind === "step" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: downloadGraph, children: jsxRuntime.jsx(react$1.DownloadSimpleIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
-                            try {
-                                const def = wb.export();
-                                const positions = wb.getPositions();
-                                const snapshot = await runner.snapshotFull();
-                                const payload = {
-                                    ...snapshot,
-                                    def,
-                                    positions,
-                                    schemaVersion: 1,
-                                };
-                                const pretty = JSON.stringify(payload, null, 2);
-                                const blob = new Blob([pretty], { type: "application/json" });
-                                const url = URL.createObjectURL(blob);
-                                const a = document.createElement("a");
-                                const d = new Date();
-                                const pad = (n) => String(n).padStart(2, "0");
-                                const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
-                                a.href = url;
-                                a.download = `spark-snapshot-${ts}.json`;
-                                document.body.appendChild(a);
-                                a.click();
-                                a.remove();
-                                URL.revokeObjectURL(url);
-                            }
-                            catch (err) {
-                                const message = err instanceof Error ? err.message : String(err);
-                                alert(message);
-                            }
-                        }, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, 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" })] }), engineKind === "step" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, 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());
@@ -4320,6 +4359,7 @@ exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
 exports.computeEffectiveHandles = computeEffectiveHandles;
 exports.countVisibleHandles = countVisibleHandles;
+exports.download = download;
 exports.estimateNodeSize = estimateNodeSize;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
@@ -4331,6 +4371,7 @@ exports.prettyHandle = prettyHandle;
 exports.resolveOutputDisplay = resolveOutputDisplay;
 exports.summarizeDeep = summarizeDeep;
 exports.toReactFlow = toReactFlow;
+exports.upload = upload;
 exports.useQueryParamBoolean = useQueryParamBoolean;
 exports.useQueryParamString = useQueryParamString;
 exports.useThrottledValue = useThrottledValue;