@bian-womp/spark-workbench 0.2.5 → 0.2.7

package/lib/cjs/index.cjs

@@ -6,8 +6,8 @@ var React = require('react');
 var react = require('@xyflow/react');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@phosphor-icons/react');
-var isEqual = require('lodash/isEqual');
 var cx = require('classnames');
+var isEqual = require('lodash/isEqual');
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -1288,7 +1288,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     const FALLBACK_TOTAL_MS = 2 * 60 * 1000;
     const [fallbackStarts, setFallbackStarts] = React.useState({});
     // Track runs that emitted an error so we can keep progress on completion
-    const [errorRuns, setErrorRuns] = React.useState({});
+    const errorRunsRef = React.useRef({});
     // Periodically advance fallback progress for running nodes without explicit progress
     React.useEffect(() => {
         const interval = setInterval(() => {
@@ -1451,6 +1451,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             }
             else if (nodeError.nodeId) {
                 const nodeId = nodeError.nodeId;
+                const runId = nodeError.runId;
                 setNodeStatus((s) => ({
                     ...s,
                     [nodeId]: {
@@ -1459,11 +1460,11 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                     },
                 }));
                 // Mark this runId as errored
-                if (nodeError.runId) {
-                    setErrorRuns((prev) => ({
-                        ...prev,
-                        [nodeId]: { ...(prev[nodeId] || {}), [nodeError.runId]: true },
-                    }));
+                if (runId) {
+                    errorRunsRef.current[nodeId] = {
+                        ...errorRunsRef.current[nodeId],
+                        [runId]: true,
+                    };
                 }
             }
             return add("runner", "error")(e);
@@ -1516,38 +1517,29 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                 setNodeStatus((prev) => {
                     const current = prev[id]?.activeRuns ?? 0;
                     const nextActive = current - 1;
-                    const hadError = !!(runId && errorRuns[id]?.[runId]);
+                    const hadError = !!(runId && errorRunsRef.current[id]?.[runId]);
                     const keepProgress = hadError || nextActive > 0;
+                    // Clear error flag for this runId
+                    if (runId && errorRunsRef.current[id]?.[runId]) {
+                        delete errorRunsRef.current[id]?.[runId];
+                    }
                     return {
                         ...prev,
                         [id]: {
                             ...prev[id],
                             activeRuns: nextActive,
                             progress: keepProgress ? prev[id]?.progress : 0,
+                            lastError: hadError ? prev[id]?.lastError : undefined,
                         },
                     };
                 });
                 // Clear fallback start timestamp if no more active runs
                 setFallbackStarts((prev) => {
-                    prev[id];
                     const nextPrev = { ...prev };
                     // If we don't know nextActive here, conservatively clear to stop animation
                     delete nextPrev[id];
                     return nextPrev;
                 });
-                // Clear error flag for this runId
-                if (runId) {
-                    setErrorRuns((prev) => {
-                        const nodeMap = { ...(prev[id] || {}) };
-                        delete nodeMap[runId];
-                        const next = { ...prev };
-                        if (Object.keys(nodeMap).length === 0)
-                            delete next[id];
-                        else
-                            next[id] = nodeMap;
-                        return next;
-                    });
-                }
             }
             else if (s.kind === "edge-start") {
                 const id = s.edgeId;
@@ -1989,7 +1981,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 const y = placed?.y;
                 const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
                     outputClassName;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
                                 top: (y ?? 0) - 8,
                                 left: "50%",
                                 textAlign: "right",
@@ -2002,7 +1994,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
 
 const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
     const updateNodeInternals = react.useUpdateNodeInternals();
-    const { typeId, showValues, inputValues, outputValues, toString } = data;
+    const { typeId, showValues } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     React.useEffect(() => {
@@ -2020,14 +2012,11 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         outputs: [],
         issues: [],
     };
-    const hasError = !!status.lastError;
-    const isRunning = !!status.activeRuns;
     const containerBorder = getNodeBorderClassNames({
         selected,
         status,
         validation,
     });
-    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
     return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
@@ -2035,11 +2024,24 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         }, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
                     maxHeight: NODE_HEADER_HEIGHT_PX,
                     minHeight: NODE_HEADER_HEIGHT_PX,
-                }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react$1.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
                                     ? "error"
                                     : "warning", size: 12, className: "w-3 h-3", title: validation.issues
                                     .map((v) => `${v.code}: ${v.message}`)
-                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
+                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
+});
+DefaultNode.displayName = "DefaultNode";
+function DefaultNodeContent({ data, isConnectable, }) {
+    const { showValues, inputValues, outputValues, toString } = data;
+    const inputEntries = data.inputHandles ?? [];
+    const outputEntries = data.outputHandles ?? [];
+    const status = data.status ?? { activeRuns: 0 };
+    const validation = data.validation ?? {
+        inputs: [],
+        outputs: []};
+    const isRunning = !!status.activeRuns;
+    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
                     const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
                     const hasAny = vIssues.length > 0;
                     const hasErr = vIssues.some((v) => v.level === "error");
@@ -2055,7 +2057,6 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                     const title = vIssues
                         .map((v) => `${v.code}: ${v.message}`)
                         .join("; ");
-                    // Compose label with truncated value to prevent layout growth
                     const valueText = (() => {
                         if (!showValues)
                             return undefined;
@@ -2069,8 +2070,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
                     })();
                     return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
-});
-DefaultNode.displayName = "DefaultNode";
+}
 
 function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const { registry } = useWorkbenchContext();
@@ -2459,7 +2459,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const addNodeAt = (typeId, pos) => {
         wb.addNode({ typeId, position: pos });
     };
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, onlyRenderVisibleElements: true, selectionOnDrag: true, onInit: (inst) => (rfInstanceRef.current = inst), onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.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) })] }) }) }));
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => (rfInstanceRef.current = inst), onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.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, onInit, onChange, }) {
@@ -2945,6 +2945,8 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
 
 exports.AbstractWorkbench = AbstractWorkbench;
 exports.CLIWorkbench = CLIWorkbench;
+exports.DefaultNode = DefaultNode;
+exports.DefaultNodeContent = DefaultNodeContent;
 exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
 exports.InMemoryWorkbench = InMemoryWorkbench;
 exports.Inspector = Inspector;