@bian-womp/spark-workbench 0.1.19 → 0.1.21

package/lib/cjs/index.cjs

@@ -819,7 +819,10 @@ function useQueryParamString(key, defaultValue) {
 
 function resolveOutputDisplay(raw, declared) {
     if (sparkGraph.isTypedOutput(raw)) {
-        return { typeId: String(raw.__spark_type), value: raw.__spark_value };
+        return {
+            typeId: sparkGraph.getTypedOutputTypeId(raw),
+            value: sparkGraph.getTypedOutputValue(raw),
+        };
     }
     let typeId = undefined;
     if (Array.isArray(declared)) {
@@ -841,7 +844,7 @@ function preformatValueForDisplay(typeId, value, registry) {
         return "";
     // Unwrap typed outputs
     if (sparkGraph.isTypedOutput(value)) {
-        return preformatValueForDisplay(String(value.__spark_type), value.__spark_value, registry);
+        return preformatValueForDisplay(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value), registry);
     }
     // Enums
     if (typeId && typeId.includes("enum:") && registry) {
@@ -885,7 +888,7 @@ function summarizeDeep(value) {
     }
     // Typed output wrapper
     if (sparkGraph.isTypedOutput(value)) {
-        return summarizeDeep(value.__spark_value);
+        return summarizeDeep(sparkGraph.getTypedOutputValue(value));
     }
     // Arrays
     if (Array.isArray(value)) {
@@ -1078,6 +1081,21 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     const def = wb.export();
     const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
     const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    const outputTypesMap = React.useMemo(() => {
+        const out = {};
+        // Local: runtimeTypeId is not stored; derive from typed wrapper in outputsMap
+        for (const n of def.nodes) {
+            const handles = Object.keys(registry.nodes.get(n.typeId)?.outputs ?? {});
+            const cur = {};
+            for (const h of handles) {
+                const v = outputsMap[n.nodeId]?.[h];
+                cur[h] = sparkGraph.getTypedOutputTypeId(v);
+            }
+            if (Object.keys(cur).length > 0)
+                out[n.nodeId] = cur;
+        }
+        return out;
+    }, [def, outputsMap, registry]);
     // Initialize nodes as invalidated by default until first successful run
     React.useEffect(() => {
         setNodeStatus((prev) => {
@@ -1425,6 +1443,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         valuesTick,
         inputsMap,
         outputsMap,
+        outputTypesMap,
         validationByNode,
         validationByEdge,
         validationGlobal,
@@ -1521,7 +1540,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             return String(value ?? "");
         }
     };
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, outputTypesMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
     const nodeValidationIssues = validationByNode.issues;
     const edgeValidationIssues = validationByEdge.issues;
     const nodeValidationHandles = validationByNode;
@@ -1644,7 +1663,7 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                     if (e.key === "Escape")
                                                         revert();
                                                 }, ...commonProps }))] }, h));
-                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("label", { className: "w-20", children: h }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
+                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: h }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: outputTypesMap[selectedNodeId]?.[h] ?? "" })] }), jsxRuntime.jsx("div", { className: "flex-1", children: (() => {
                                                 const { typeId, value } = resolveOutputDisplay(nodeOutputs[h], selectedDesc?.outputs?.[h]);
                                                 return toElement(typeId, value);
                                             })() }), (() => {
@@ -1960,7 +1979,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement }, r
     return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, onInit: (inst) => (rfInstanceRef.current = inst), children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }));
 });
 
-function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, }) {
+function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
     const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedDesc = selectedNode
@@ -2009,6 +2028,54 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     const lastAutoLaunched = React.useRef(undefined);
     const autoLayoutRan = React.useRef(false);
     const canvasRef = React.useRef(null);
+    // Expose init callback with setInitialGraph helper
+    const initCalled = React.useRef(false);
+    React.useEffect(() => {
+        if (initCalled.current)
+            return;
+        initCalled.current = true;
+        if (!onInit)
+            return;
+        const setInitialGraph = async (d, inputs) => {
+            await wb.load(d);
+            try {
+                runner.build(wb.export());
+            }
+            catch { }
+            if (inputs) {
+                for (const [nodeId, map] of Object.entries(inputs)) {
+                    runner.setInputs(nodeId, map);
+                }
+            }
+            runAutoLayout();
+        };
+        onInit({ wb, runner, setInitialGraph });
+    }, [onInit, wb, runner, runAutoLayout]);
+    // Expose change callback on graph/value changes
+    React.useEffect(() => {
+        if (!onChange)
+            return;
+        const off1 = wb.on("graphChanged", () => {
+            try {
+                const cur = wb.export();
+                const inputs = runner.getInputs(cur);
+                onChange({ def: cur, inputs });
+            }
+            catch { }
+        });
+        const off2 = runner.on("value", () => {
+            try {
+                const cur = wb.export();
+                const inputs = runner.getInputs(cur);
+                onChange({ def: cur, inputs });
+            }
+            catch { }
+        });
+        return () => {
+            off1();
+            off2();
+        };
+    }, [wb, runner, onChange]);
     const applyExample = React.useCallback(async (key) => {
         if (runner.isRunning()) {
             alert(`Stop engine before switching example.`);
@@ -2260,7 +2327,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return "";
         // Normalize typed wrapper
         if (sparkGraph.isTypedOutput(value)) {
-            return baseToString(String(value.__spark_type), value.__spark_value);
+            return baseToString(sparkGraph.getTypedOutputTypeId(value), sparkGraph.getTypedOutputValue(value));
         }
         const pre = preformatValueForDisplay(typeId, value, registry);
         if (pre !== undefined)
@@ -2352,7 +2419,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             }
                         }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), 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 }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.useMemo(() => {
@@ -2373,7 +2440,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                 if (runner.isRunning())
                     runner.dispose();
                 onBackendKindChange(v);
-            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides }) }));
+            }, 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;