windmill-components 1.60.4 → 1.75.0

package/components/graph/FlowGraph.svelte

@@ -1,16 +1,26 @@
-<script>import Svelvet from '@windmill-labs/svelvet';
-import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
-import { FlowStatusModule, RawScript } from '../../gen';
+<script>import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
+import { FlowStatusModule } from '../../gen';
 import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
 import { defaultIfEmptyString, truncateRev } from '../../utils';
-import { createEventDispatcher } from 'svelte';
-import { charsToNumber, numberToChars } from '../flows/utils';
+import { createEventDispatcher, setContext } from 'svelte';
+import Svelvet from './svelvet/container/views/Svelvet.svelte';
+import MapItem from '../flows/map/MapItem.svelte';
+import VirtualItem from '../flows/map/VirtualItem.svelte';
+import { writable } from 'svelte/store';
+export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
 export let minHeight = 0;
+export let maxHeight = undefined;
 export let notSelectable = false;
 export let flowModuleStates = undefined;
-let selectedNode = undefined;
+export let rebuildOnChange = undefined;
+export let selectedId = writable(undefined);
+export let initialZoom = 1.0;
+export let insertable = false;
+export let moving = undefined;
+export let scroll = false;
+setContext('FlowGraphContext', { selectedId });
 let idGenerator;
 let nestedNodes;
 let nodes = [];
@@ -19,7 +29,9 @@ let width, height;
 let errorHandlers = {};
 let dispatch = createEventDispatcher();
 $: {
-    width && height && minHeight && selectedNode && flowModuleStates;
+    rebuildOnChange;
+    moving;
+    width && height && minHeight && $selectedId && flowModuleStates;
     nodes = edges = [];
     errorHandlers = {};
     createGraph();
@@ -33,12 +45,12 @@ async function createGraph() {
         return;
     }
     nestedNodes = nodes = [];
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Input'));
-    modules.forEach((m) => {
-        const item = getConvertedFlowModule(m);
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, 'after', undefined, undefined, 0, 0, true, undefined));
+    modules.forEach((m, i) => {
+        const item = getConvertedFlowModule(m, undefined, undefined, 0, i + 1 == modules?.length, modules);
         item && nestedNodes.push(item);
     });
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Result'));
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, 'before', undefined, undefined, 0, modules.length, true, undefined));
     if (!flowModuleStates) {
         if (failureModule)
             nestedNodes.push(createErrorHandler(failureModule));
@@ -54,35 +66,36 @@ async function createGraph() {
     const layered = layoutNodes(flatNodes);
     nodes = layered.nodes;
     // width = layered.width
-    height = layered.height;
+    height = Math.min(Math.max(layered.height, minHeight), maxHeight ?? window.innerHeight - 100);
     edges = createEdges(nodes);
 }
-function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefined, insideLoop = false) {
+function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertableEnd, modules) {
     const type = module.value.type;
     const parentIds = getParentIds(parent);
-    if (type === 'rawscript') {
-        const lang = module.value.language;
-        return flowModuleToNode(parentIds, module.id, module.summary || 'Inline script', 'inline', module, lang, edgeLabel, undefined, insideLoop);
-    }
-    else if (type === 'script') {
-        const isHub = module.value.path.startsWith('hub/');
-        return flowModuleToNode(parentIds, module.id, module.summary || module.value.path, isHub ? 'hub' : 'workspace', module, undefined, edgeLabel, undefined, insideLoop);
-    }
-    else if (type === 'forloopflow') {
-        return flowModuleToLoop(module.value.modules, module, parent);
+    if (type === 'forloopflow') {
+        //@ts-ignore
+        return flowModuleToLoop(modules, module, parent, loopDepth);
     }
     else if (type === 'branchone') {
-        const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
-        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent, insideLoop);
+        const branches = [
+            { summary: 'Default Branch', modules: module.value.default, removable: false },
+            ...module.value.branches.map((b, i) => ({
+                summary: defaultIfEmptyString(b.summary, 'Branch ' + (i + 1)),
+                modules: b.modules,
+                removable: true
+            }))
+        ];
+        return flowModuleToBranch(module, modules, branches, ['', ...module.value.branches.map((x) => `${truncateRev(x.expr, 20)}`)], parent, loopDepth, false);
     }
     else if (type === 'branchall') {
-        const branches = module.value.branches.map((b) => b.modules);
-        return flowModuleToBranch(module, branches, [], parent, insideLoop);
+        const branches = module.value.branches.map((b, i) => ({
+            summary: defaultIfEmptyString(b.summary, `Branch ${i + 1}`),
+            modules: b.modules,
+            removable: true
+        }));
+        return flowModuleToBranch(module, modules, branches, [], parent, loopDepth, true);
     }
-    else if (type === 'flow') {
-        return flowModuleToNode(parentIds, module.id, module.summary || 'Flow ' + module.value.path, 'inline', module, undefined, edgeLabel, undefined, insideLoop);
-    }
-    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity step', 'inline', module, undefined, edgeLabel, undefined, insideLoop);
+    return flowModuleToNode(parentIds, module, edgeLabel, undefined, loopDepth, insertableEnd, false, modules);
 }
 function getParentIds(items = undefined) {
     if (typeof items == 'string') {
@@ -92,14 +105,14 @@ function getParentIds(items = undefined) {
     if (!item)
         return [];
     if (isNode(item)) {
-        const id = numberToChars(item.id);
+        const id = item.id;
         return [id];
     }
     else if (isLoop(item)) {
         return getParentIds(item.items);
     }
     else if (isBranch(item)) {
-        return item.items.map((i) => getParentIds(i)).flat();
+        return [item.nodeEnd.id];
     }
     return [];
 }
@@ -119,102 +132,112 @@ function getStateColor(state) {
             return '#fff';
     }
 }
-function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel, header, insideLoop = false) {
-    const langImg = {
-        deno: '/icons/ts-lang.svg',
-        go: '/icons/go-lang.svg',
-        python3: '/icons/python-lang.svg',
-        bash: '/icons/bash-lang.svg'
-    };
-    const hostImg = {
-        hub: '/icons/hub-script.svg',
-        workspace: '/icons/inline-script.svg',
-        inline: ''
-    };
-    const wrapperWidth = lang ? 'w-[calc(100%-70px)]' : 'w-[calc(100%-50px)]';
-    let nodeId = id ?? numberToChars(idGenerator.next().value - 1);
+function getResultColor() {
+    switch (success) {
+        case true:
+            return getStateColor(FlowStatusModule.type.SUCCESS);
+        case false:
+            return getStateColor(FlowStatusModule.type.FAILURE);
+        default:
+            return '#fff';
+    }
+}
+function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules) {
     return {
-        id: charsToNumber(nodeId),
+        type: 'node',
+        id: mod.id,
         position: { x: -1, y: -1 },
         data: {
-            html: `
-				<div class="w-full flex justify-between items-center px-1">
-					<div class="${wrapperWidth} text-left ellipsize text-2xs truncate">
-						${title}
-					</div>
-					<div class="flex items-center">
-						${lang ? `<img src="${langImg[lang]}" class="grayscale">` : ''}
-						${host != 'inline' ? `<img src="${hostImg[host]}" class="grayscale">` : ''}
-						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
-							${nodeId}
-						</span>
-					</div>
-				</div>
-				<div class="text-2xs absolute -top-6 text-gray-600 truncate">${flowModuleStates?.[nodeId]?.scheduled_for ?? header ?? ''}<div>
-			`
+            custom: {
+                component: MapItem,
+                props: {
+                    trigger: parentIds.length == 0,
+                    mod,
+                    insertable,
+                    insertableEnd,
+                    branchable,
+                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+                    annotation,
+                    modules,
+                    moving
+                },
+                cb: (e, detail) => {
+                    if (e == 'delete') {
+                        dispatch('delete', detail);
+                    }
+                    else if (e == 'select') {
+                        if (!notSelectable) {
+                            if ($selectedId != mod.id) {
+                                $selectedId = mod.id;
+                                dispatch('select', mod);
+                            }
+                        }
+                    }
+                    else if (e == 'insert') {
+                        dispatch('insert', detail);
+                    }
+                    else if (e == 'newBranch') {
+                        dispatch('newBranch', detail);
+                    }
+                    else if (e == 'move') {
+                        dispatch('move', { module: mod, modules });
+                    }
+                }
+            }
         },
-        host,
-        width: insideLoop ? NODE.width * 0.8 : NODE.width,
+        width: NODE.width,
         height: NODE.height,
-        borderColor: selectedNode == nodeId ? 'black' : '#999',
-        bgColor: selectedNode == nodeId ? '#f5f5f5' : getStateColor(flowModuleStates?.[nodeId]?.type),
         parentIds,
-        clickCallback: (node) => {
-            if (!notSelectable) {
-                selectedNode = nodeId;
-            }
-            if (onClickDetail.id == undefined) {
-                onClickDetail.id = nodeId;
-            }
-            dispatch('click', onClickDetail);
-        },
-        edgeLabel
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
+        edgeLabel,
+        loopDepth
     };
 }
-function flowModuleToLoop(modules, module, parent = undefined) {
-    const value = module.value;
-    const expr = value.iterator.type == 'static' ? value.iterator.value : value.iterator.expr;
+function flowModuleToLoop(modules, module, parent, loopDepth) {
     const loop = {
         type: 'loop',
         items: [
-            flowModuleToNode(getParentIds(parent), module.id, module.summary || `For Loop: ${defaultIfEmptyString(expr ?? '', 'TBD')}`, 'inline', module, undefined, undefined, flowModuleStates?.[module.id]?.iteration_total
+            flowModuleToNode(getParentIds(parent), module, undefined, flowModuleStates?.[module.id]?.iteration_total
                 ? 'Iteration ' + flowModuleStates?.[module.id]?.iteration_total
-                : '')
+                : '', loopDepth, false, false, modules)
         ]
     };
-    modules.forEach((module) => {
-        const item = getConvertedFlowModule(module, loop.items, undefined, true);
+    const innerModules = module.value.modules;
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, 'after', undefined, 1000, loopDepth + 1, 0, true, undefined, undefined));
+    innerModules.forEach((module, i) => {
+        const item = getConvertedFlowModule(module, loop.items, undefined, loopDepth + 1, i + 1 == innerModules?.length, innerModules);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id ?? ''}`, undefined, 1000));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, 'after', undefined, 1000, loopDepth, 0, true, undefined, module.id));
     return loop;
 }
-function flowModuleToBranch(module, branches, edgesLabel, parent = undefined, insideLoop = false) {
-    const branch = {
-        type: 'branch',
-        node: flowModuleToNode(getParentIds(parent), module.id, module.summary || module.value.type == 'branchall'
-            ? 'Run all branches'
-            : 'Run one branch given predicate', 'inline', module, undefined, undefined, undefined, insideLoop),
-        items: []
-    };
-    const branchParent = [numberToChars(branch.node.id)];
+function flowModuleToBranch(module, modules, branches, edgesLabel, parent = undefined, loopDepth, branchall) {
+    const node = flowModuleToNode(getParentIds(parent), module, undefined, undefined, loopDepth, false, true, modules);
+    const bitems = [];
+    const branchParent = [node.id];
     if (branches.length == 0) {
-        branch.items.push([createVirtualNode(branchParent, 'No branches')]);
+        bitems.push([
+            createVirtualNode(branchParent, 'No branches', undefined, 'after', undefined, 0, loopDepth, 0, false, undefined)
+        ]);
     }
-    branches.forEach((modules, i) => {
+    branches.forEach(({ summary, modules, removable }, i) => {
         const items = [];
-        if (!modules.length) {
-            items.push(createVirtualNode(branchParent, 'Empty branch', edgesLabel[i]));
-        }
-        else {
-            modules.forEach((module) => {
-                const item = getConvertedFlowModule(module, items.length ? items : numberToChars(branch.node.id), edgesLabel[i], insideLoop);
+        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined));
+        if (modules.length) {
+            modules.forEach((module, j) => {
+                const item = getConvertedFlowModule(module, items, undefined, loopDepth, j + 1 == modules?.length, modules);
                 item && items.push(item);
             });
         }
-        items.length && branch.items.push(items);
+        items.length && bitems.push(items);
     });
-    return branch;
+    return {
+        type: 'branch',
+        node,
+        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, 'after', undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id),
+        items: bitems
+    };
 }
 function flattenNestedNodes(nestedNodes, nodes = []) {
     const array = nodes;
@@ -230,28 +253,40 @@ function flattenNestedNodes(nestedNodes, nodes = []) {
             node.items.forEach((item) => {
                 flattenNestedNodes(item, array);
             });
+            array.push(node.nodeEnd);
         }
     });
     return array;
 }
 function layoutNodes(nodes) {
-    const stratify = dagStratify().id(({ id }) => numberToChars(id));
+    const stratify = dagStratify().id(({ id }) => id);
     const dag = stratify(nodes);
-    const layout = sugiyama()
-        .decross(decrossOpt())
-        .coord(coordCenter())
-        .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
-    const boxSize = layout(dag);
+    let boxSize;
+    try {
+        const layout = sugiyama()
+            .decross(decrossOpt())
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
+    catch {
+        const layout = sugiyama()
+            .coord(coordCenter())
+            .nodeSize(() => [NODE.width + NODE.gap.horizontal, NODE.height + NODE.gap.vertical]);
+        boxSize = layout(dag);
+    }
     return {
         nodes: dag.descendants().map((des) => ({
             ...des.data,
             id: des.data.id,
             position: {
-                x: des.x ? des.x + (width - boxSize.width - NODE.width) / 2 : 0,
+                x: des.x
+                    ? des.data.loopDepth * 50 + des.x + width / 2 - boxSize.width / 2 - NODE.width / 2
+                    : 0,
                 y: des.y || 0
             }
         })),
-        height: Math.max(boxSize.height + NODE.height, minHeight)
+        height: boxSize.height + NODE.height
     };
 }
 function createEdges(nodes) {
@@ -259,108 +294,156 @@ function createEdges(nodes) {
     nodes.forEach((node) => {
         node.parentIds.forEach((pid, i) => {
             // skip virtual nodes such as collect result
-            if (errorHandlers[pid] && node.id < 900 && nodes.find((x) => x.id == errorHandlers[pid])) {
+            if (false &&
+                errorHandlers[pid] &&
+                parseInt(node.id) < 900 &&
+                nodes.find((x) => x.id == errorHandlers[pid])) {
                 edges.push({
                     id: `e-${pid}-${node.id}`,
-                    source: charsToNumber(pid),
+                    source: pid,
                     target: errorHandlers[pid],
                     labelBgColor: 'white',
-                    arrow: true,
+                    arrow: false,
                     animate: false,
-                    noHandle: false,
-                    label: node.edgeLabel
-                    // type: 'smoothstep'
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    type: 'bezier'
                 });
                 edges.push({
                     id: `e-${pid}-${node.id}`,
                     source: errorHandlers[pid],
                     target: node.id,
                     labelBgColor: 'white',
-                    arrow: true,
+                    arrow: false,
                     animate: false,
-                    noHandle: false,
-                    label: node.edgeLabel
-                    // type: 'smoothstep'
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    type: 'bezier'
                 });
             }
             else {
                 edges.push({
                     id: `e-${pid}-${node.id}`,
-                    source: charsToNumber(pid),
+                    source: pid,
                     target: node.id,
                     labelBgColor: 'white',
-                    arrow: true,
+                    arrow: false,
                     animate: false,
-                    noHandle: false,
-                    label: node.edgeLabel
-                    // type: 'smoothstep'
+                    noHandle: true,
+                    label: node.edgeLabel,
+                    edgeColor: '#999',
+                    type: 'bezier'
                 });
             }
         });
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, edgesLabel, offset) {
+function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid = undefined) {
+    const id = -idGenerator.next().value - 2 + (offset ?? 0);
     return {
-        id: -idGenerator.next().value - 1 + (offset ?? 0),
+        type: 'node',
+        id: id.toString(),
         position: { x: -1, y: -1 },
         data: {
-            html: `
-				<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
-					${label}
-				</div>
-			`
+            // html: `
+            // 	<div class="w-full max-h-full text-center ellipsize-multi-line text-2xs [-webkit-line-clamp:2] px-1">
+            // 		${label}
+            // 	</div>
+            // `
+            custom: {
+                component: VirtualItem,
+                props: {
+                    label,
+                    insertable,
+                    modules,
+                    bgColor: label == 'Result' ? getResultColor() : '#dfe6ee',
+                    selected: $selectedId == label,
+                    index,
+                    selectable,
+                    whereInsert,
+                    deleteBranch,
+                    id: mid,
+                    moving
+                },
+                cb: (e, detail) => {
+                    if (e == 'insert') {
+                        dispatch('insert', detail);
+                    }
+                    else if (e == 'select') {
+                        $selectedId = detail;
+                        dispatch('select', detail);
+                    }
+                    else if (e == 'deleteBranch') {
+                        $selectedId = label;
+                        dispatch('deleteBranch', detail);
+                    }
+                }
+            }
         },
         width: NODE.width,
         height: NODE.height,
-        borderColor: selectedNode == label ? 'black' : '#999',
-        bgColor: selectedNode == label ? '#f5f5f5' : '#d4e4ff',
+        borderColor: $selectedId == label ? 'black' : '#999',
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
         parentIds,
-        clickCallback: (node) => {
-            if (!notSelectable) {
-                selectedNode = label;
-            }
-            dispatch('click', label);
-        }
+        edgeLabel,
+        loopDepth
     };
 }
 function createErrorHandler(mod, parent_module) {
-    const nId = -idGenerator.next().value - 1 + 1100;
+    const nId = (-idGenerator.next().value - 1 + 1100).toString();
     parent_module && (errorHandlers[parent_module] = nId);
+    let label = 'Error handler';
     return {
+        type: 'node',
         id: nId,
         position: { x: -1, y: -1 },
         data: {
-            html: `
-				<div class="w-full flex justify-between items-center px-1">
-					<div class="text-left ellipsize text-2xs truncate">
-						Error Handler
-					</div>
-					<div class="flex items-center">
-						<span class="center-center font-semibold bg-indigo-100 text-indigo-800 rounded px-1 pb-[2px] ml-[2px]">
-							${mod.id}
-						</span>
-					</div>
-				</div>
-			`
+            custom: {
+                component: VirtualItem,
+                props: {
+                    label,
+                    insertable: false,
+                    modules: undefined,
+                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
+                    selected: $selectedId == mod.id,
+                    index: 0,
+                    selectable: true,
+                    id: mod.id
+                },
+                cb: (e, detail) => {
+                    console.log(detail);
+                    if (e == 'select') {
+                        $selectedId = detail;
+                        dispatch('select', detail);
+                    }
+                }
+            }
         },
         width: NODE.width,
         height: NODE.height,
-        bgColor: selectedNode == mod.id ? '#f5f5f5' : getStateColor(flowModuleStates?.[mod.id]?.type),
-        borderColor: selectedNode == mod.id ? 'black' : '#999',
+        sourcePosition: 'bottom',
+        targetPosition: 'top',
         parentIds: parent_module ? [parent_module] : [],
-        clickCallback: (node) => {
-            if (!notSelectable) {
-                selectedNode = mod.id;
-            }
-            dispatch('click', mod);
-        }
+        loopDepth: 0
     };
 }
 </script>
 
 <div bind:clientWidth={width} class="w-full h-full overflow-hidden relative">
 	{#if width && height}
-		<Svelvet {nodes} {width} {edges} {height} bgColor="rgb(249 250 251)" />
+		<Svelvet
+			highlightEdges={false}
+			locked
+			{initialZoom}
+			{nodes}
+			{width}
+			{edges}
+			{height}
+			{scroll}
+			background={false}
+			bgColor="rgb(249 250 251)"
+		/>
 	{/if}
 </div>

package/components/graph/FlowGraph.svelte.d.ts

@@ -1,16 +1,30 @@
 import { SvelteComponentTyped } from "svelte";
 import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
+import { type Writable } from 'svelte/store';
 declare const __propDef: {
     props: {
+        success?: boolean | undefined;
         modules?: FlowModule[] | undefined;
         failureModule?: FlowModule | undefined;
         minHeight?: number | undefined;
+        maxHeight?: number | undefined;
         notSelectable?: boolean | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
+        rebuildOnChange?: any;
+        selectedId?: Writable<string | undefined> | undefined;
+        initialZoom?: number | undefined;
+        insertable?: boolean | undefined;
+        moving?: string | undefined;
+        scroll?: boolean | undefined;
     };
     events: {
-        click: CustomEvent<any>;
+        delete: CustomEvent<any>;
+        select: CustomEvent<any>;
+        insert: CustomEvent<any>;
+        newBranch: CustomEvent<any>;
+        move: CustomEvent<any>;
+        deleteBranch: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/graph/model.d.ts

@@ -1,44 +1,12 @@
 import type { FlowStatusModule } from "../../gen";
-export interface SvelvetNode<T = any> {
-    id: number;
-    position: {
-        x: number;
-        y: number;
-    };
-    data: T;
-    width: number;
-    height: number;
-    bgColor?: string;
-    fontSize?: number;
-    borderColor?: string;
-    parentNode?: number;
-    childNodes?: number[];
-    borderRadius?: number;
-    textColor?: string;
-    clickCallback?: Function;
-    image?: boolean;
-    src?: string;
-    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
-    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
-}
-export interface Edge {
-    id: string;
-    source: number;
-    target: number;
-    label?: string;
-    labelBgColor?: string;
-    labelTextColor?: string;
-    edgeColor?: string;
-    type?: string;
-    animate?: boolean;
-    noHandle?: boolean;
-    arrow?: boolean;
-}
+import type { UserNodeType } from "./svelvet/types";
 export type ModuleHost = 'workspace' | 'inline' | 'hub';
-export type Node = SvelvetNode & {
+export type Node = UserNodeType & {
     parentIds: string[];
     edgeLabel?: string;
     host?: ModuleHost;
+    type: 'node';
+    loopDepth: number;
 };
 export type Loop = {
     type: 'loop';
@@ -46,12 +14,14 @@ export type Loop = {
 };
 export type Branch = {
     node: Node;
+    nodeEnd: Node;
     type: 'branch';
     items: NestedNodes[];
 };
 export type GraphItem = Node | Loop | Branch;
 export type GraphModuleState = {
     type: FlowStatusModule.type;
+    args: any;
     logs?: string;
     result?: any;
     scheduled_for?: string;