From 84eefadfcf06b4f38117b6c4c534f47fb2ef7cc7 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 25 Sep 2024 16:22:02 +0200
Subject: [PATCH] feat(frontend): Catch flow errors in the UI (#4429)

* feat(frontend): Catch flow errors in the UI

* feat(frontend): typo
---
 .../flows/content/FlowConstants.svelte        |   2 +-
 .../lib/components/graph/FlowGraphV2.svelte   | 141 ++--
 .../src/lib/components/graph/graphBuilder.ts  | 783 ++++++++++--------
 3 files changed, 500 insertions(+), 426 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
index 4b8185531a661..df0688f177581 100644
--- a/frontend/src/lib/components/flows/content/FlowConstants.svelte
+++ b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -121,7 +121,7 @@
 					</Alert>
 				{/if}
 			{/if}
-			{#each steps as [args, filter, m] (m.id)}
+			{#each steps as [args, filter, m], index (m.id + index)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 680fadd534a6b..4a990b4ec6e68 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -32,6 +32,9 @@
 	import { encodeState } from '$lib/utils'
 	import BranchOneStart from './renderers/nodes/BranchOneStart.svelte'
 	import NoBranchNode from './renderers/nodes/NoBranchNode.svelte'
+	import { Alert, Drawer } from '../common'
+	import Button from '../common/button/Button.svelte'
+	import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte'
 
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
@@ -178,6 +181,10 @@
 	let height = 0
 
 	function updateStores() {
+		if (graph.error) {
+			return
+		}
+
 		$nodes = layoutNodes(graph?.nodes)
 		$edges = graph.edges
 
@@ -236,69 +243,87 @@
 	onMount(() => {
 		centerViewport(width)
 	})
+	let yamlEditorDrawer: Drawer | undefined = undefined
 </script>
 
+<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
+
 <div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
-	<SvelteFlow
-		{nodes}
-		{edges}
-		{edgeTypes}
-		{nodeTypes}
-		{viewport}
-		{height}
-		minZoom={0.5}
-		connectionLineType={ConnectionLineType.SmoothStep}
-		defaultEdgeOptions={{ type: 'smoothstep' }}
-		preventScrolling={scroll}
-		zoomOnDoubleClick={false}
-		elementsSelectable={false}
-		{proOptions}
-		nodesDraggable={false}
-	>
-		<div class="absolute inset-0 !bg-surface-secondary" />
-		<Controls position="top-right" orientation="horizontal" showLock={false}>
-			{#if download}
-				<ControlButton
-					on:click={() => {
-						try {
-							localStorage.setItem(
-								'svelvet',
-								encodeState({ modules, failureModule, preprocessorModule })
-							)
-						} catch (e) {
-							console.error('error interacting with local storage', e)
-						}
-						window.open('/view_graph', '_blank')
-					}}
-					class="!bg-surface"
+	{#if graph?.error}
+		<div class="center-center">
+			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
+				{graph.error}
+
+				<Button
+					color="red"
+					size="xs"
+					btnClasses="mt-2 w-min"
+					on:click={() => yamlEditorDrawer?.openDrawer()}>Open YAML editor</Button
 				>
-					<Expand size="14" />
-				</ControlButton>
-			{/if}
-		</Controls>
-
-		<Controls
-			position="top-left"
-			orientation="horizontal"
-			showLock={false}
-			showZoom={false}
-			showFitView={false}
-			class="!shadow-none"
+			</Alert>
+		</div>
+	{:else}
+		<SvelteFlow
+			{nodes}
+			{edges}
+			{edgeTypes}
+			{nodeTypes}
+			{viewport}
+			{height}
+			minZoom={0.5}
+			connectionLineType={ConnectionLineType.SmoothStep}
+			defaultEdgeOptions={{ type: 'smoothstep' }}
+			preventScrolling={scroll}
+			zoomOnDoubleClick={false}
+			elementsSelectable={false}
+			{proOptions}
+			nodesDraggable={false}
 		>
-			{#if showDataflow}
-				<Toggle
-					value={$useDataflow}
-					on:change={() => {
-						$useDataflow = !$useDataflow
-					}}
-					size="xs"
-					options={{
-						right: 'Dataflow'
-					}}
-				/>
-			{/if}
-		</Controls>
-	</SvelteFlow>
+			<div class="absolute inset-0 !bg-surface-secondary" />
+			<Controls position="top-right" orientation="horizontal" showLock={false}>
+				{#if download}
+					<ControlButton
+						on:click={() => {
+							try {
+								localStorage.setItem(
+									'svelvet',
+									encodeState({ modules, failureModule, preprocessorModule })
+								)
+							} catch (e) {
+								console.error('error interacting with local storage', e)
+							}
+							window.open('/view_graph', '_blank')
+						}}
+						class="!bg-surface"
+					>
+						<Expand size="14" />
+					</ControlButton>
+				{/if}
+			</Controls>
+
+			<Controls
+				position="top-left"
+				orientation="horizontal"
+				showLock={false}
+				showZoom={false}
+				showFitView={false}
+				class="!shadow-none"
+			>
+				{#if showDataflow}
+					<Toggle
+						value={$useDataflow}
+						on:change={() => {
+							$useDataflow = !$useDataflow
+						}}
+						size="xs"
+						options={{
+							right: 'Dataflow'
+						}}
+					/>
+				{/if}
+			</Controls>
+		</SvelteFlow>
+	{/if}
 </div>
 
 <style lang="postcss">
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index 92f6b4942336f..eecaffc7e329f 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -29,190 +29,205 @@ export default function graphBuilder(
 ): {
 	nodes: Node[]
 	edges: Edge[]
+	error?: string | undefined
 } {
 	const nodes: Node[] = []
 	const edges: Edge[] = []
 
-	if (!modules) {
-		return { nodes, edges }
-	}
+	try {
+		if (!modules) {
+			return { nodes, edges }
+		}
 
-	function addNode(module: FlowModule, offset: number, type: string, subModules?: FlowModule[]) {
-		nodes.push({
-			id: module.id,
-			data: {
-				value: module.value,
-				offset: offset,
-				module: module,
-				modules: subModules ?? modules,
-				parentIds: [],
-				eventHandlers: eventHandlers,
-				moving: moving,
-				...extra
-			},
-			position: { x: -1, y: -1 },
-			type: type
-		})
+		function addNode(module: FlowModule, offset: number, type: string, subModules?: FlowModule[]) {
+			if (nodes.some((n) => n.id === module.id)) {
+				throw new Error(`Duplicated node detected: ${module.id}`)
+			}
 
-		return module.id
-	}
+			nodes.push({
+				id: module.id,
+				data: {
+					value: module.value,
+					offset: offset,
+					module: module,
+					modules: subModules ?? modules,
+					parentIds: [],
+					eventHandlers: eventHandlers,
+					moving: moving,
+					...extra
+				},
+				position: { x: -1, y: -1 },
+				type: type
+			})
 
-	const parents: { [key: string]: string[] } = {}
+			return module.id
+		}
 
-	function addEdge(
-		sourceId: string,
-		targetId: string,
-		options?: {
-			customId?: string
-			type?: string
-			subModules?: FlowModule[]
-			disableMoveIds?: string[]
+		const parents: { [key: string]: string[] } = {}
+
+		//
+		function detectCycle(nodeId: string, visited: Set<string>, currentPath: Set<string>): boolean {
+			// If the node hasn't been visited yet
+			if (!visited.has(nodeId)) {
+				visited.add(nodeId)
+				currentPath.add(nodeId)
+
+				// If the current node has parent nodes
+				if (parents[nodeId]) {
+					// Check each parent node
+					// Nodes can have multiple parents: the node that gathers the result for branches or loops for instance
+					for (const parentNode of parents[nodeId]) {
+						// If the parentNode hasn't been visited and a cycle is detected in its path
+						if (!visited.has(parentNode) && detectCycle(parentNode, visited, currentPath)) {
+							return true // Cycle detected
+						}
+						// If the parentNode is already in the current path, it's a cycle
+						else if (currentPath.has(parentNode)) {
+							return true // Cycle detected
+						}
+					}
+				}
+			}
+			// Remove the node from the current path as we're done processing it
+			currentPath.delete(nodeId)
+			// No cycle detected for this path
+			return false
 		}
-	) {
-		parents[targetId] = [...(parents[targetId] ?? []), sourceId]
 
-		// Find the index of the target module in the modules array
-		const mods = options?.subModules ?? modules
+		function addEdge(
+			sourceId: string,
+			targetId: string,
+			options?: {
+				customId?: string
+				type?: string
+				subModules?: FlowModule[]
+				disableMoveIds?: string[]
+			}
+		) {
+			parents[targetId] = [...(parents[targetId] ?? []), sourceId]
 
-		// Index of the target module in the modules array
-		let index = mods?.findIndex((m) => m.id === targetId) ?? -1
+			const mods = options?.subModules ?? modules
 
-		edges.push({
-			id: options?.customId || `edge:${sourceId}->${targetId}`,
-			source: sourceId,
-			target: targetId,
-			type: options?.type ?? 'edge',
-			data: {
-				insertable: extra.insertable,
-				modules: options?.subModules ?? modules,
-				sourceId,
-				targetId,
-				moving,
-				eventHandlers,
-				disableMoveIds: options?.disableMoveIds,
-				enableTrigger: sourceId === 'Input',
-				// If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
-				index: index >= 0 ? index : mods?.length ?? 0,
-				...extra
+			let index = mods?.findIndex((m) => m.id === targetId) ?? -1
+
+			const visited = new Set<string>()
+			const recStack = new Set<string>()
+
+			if (detectCycle(sourceId, visited, recStack)) {
+				throw new Error(
+					`Cycle detected: adding edge from '${sourceId}' to '${targetId}' would create a cycle.`
+				)
 			}
-		})
-	}
 
-	const inputNode: Node = {
-		id: 'Input',
-		position: { x: -1, y: -1 },
-		type: 'input2',
-		data: {
-			eventHandlers: eventHandlers,
-			modules: modules,
-			hasPreprocessor: !!preprocessorModule,
-			...extra
+			edges.push({
+				id: options?.customId || `edge:${sourceId}->${targetId}`,
+				source: sourceId,
+				target: targetId,
+				type: options?.type ?? 'edge',
+				data: {
+					insertable: extra.insertable,
+					modules: options?.subModules ?? modules,
+					sourceId,
+					targetId,
+					moving,
+					eventHandlers,
+					disableMoveIds: options?.disableMoveIds,
+					enableTrigger: sourceId === 'Input',
+					// If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
+					index: index >= 0 ? index : mods?.length ?? 0,
+					...extra
+				}
+			})
 		}
-	}
 
-	const resultNode: Node = {
-		id: 'result',
-		data: {
-			eventHandlers: eventHandlers,
-			modules: modules,
-			success: success,
-			...extra
-		},
-		position: { x: -1, y: -1 },
-		type: 'result'
-	}
+		const inputNode: Node = {
+			id: 'Input',
+			position: { x: -1, y: -1 },
+			type: 'input2',
+			data: {
+				eventHandlers: eventHandlers,
+				modules: modules,
+				hasPreprocessor: !!preprocessorModule,
+				...extra
+			}
+		}
 
-	nodes.push(inputNode)
-	nodes.push(resultNode)
-
-	function processModules(
-		modules: FlowModule[],
-		beforeNode: Node,
-		nextNode: Node,
-		currentOffset = 0,
-		disableMoveIds: string[] = [],
-		parentIndex?: string
-	) {
-		let previousId: string | undefined = undefined
-
-		if (modules.length === 0) {
-			addEdge(beforeNode.id, nextNode.id, {
-				subModules: modules,
-				disableMoveIds
-			})
-		} else {
-			modules.forEach((module, index) => {
-				const localDisableMoveIds = [...disableMoveIds, module.id]
-
-				// Add the edge between the previous node and the current one
-				if (index > 0 && previousId) {
-					addEdge(previousId, module.id, {
-						subModules: modules,
-						disableMoveIds
-					})
-				}
+		const resultNode: Node = {
+			id: 'result',
+			data: {
+				eventHandlers: eventHandlers,
+				modules: modules,
+				success: success,
+				...extra
+			},
+			position: { x: -1, y: -1 },
+			type: 'result'
+		}
 
-				if (module.value.type === 'branchall') {
-					// Start
-					addNode(module, currentOffset, 'module', modules)
-
-					// "Collect result of each branch" node
-					const endNode = {
-						id: `${module.id}-end`,
-						data: {
-							offset: currentOffset,
-							id: module.id,
-							module: module,
-							modules: modules,
-							...extra
-						},
-						position: { x: -1, y: -1 },
-						type: 'branchAllEnd'
+		nodes.push(inputNode)
+		nodes.push(resultNode)
+
+		function processModules(
+			modules: FlowModule[],
+			beforeNode: Node,
+			nextNode: Node,
+			currentOffset = 0,
+			disableMoveIds: string[] = [],
+			parentIndex?: string
+		) {
+			let previousId: string | undefined = undefined
+
+			if (modules.length === 0) {
+				addEdge(beforeNode.id, nextNode.id, {
+					subModules: modules,
+					disableMoveIds
+				})
+			} else {
+				modules.forEach((module, index) => {
+					const localDisableMoveIds = [...disableMoveIds, module.id]
+
+					// Add the edge between the previous node and the current one
+					if (index > 0 && previousId) {
+						addEdge(previousId, module.id, {
+							subModules: modules,
+							disableMoveIds
+						})
 					}
 
-					nodes.push(endNode)
+					if (module.value.type === 'branchall') {
+						// Start
+						addNode(module, currentOffset, 'module', modules)
 
-					if (module.value.branches.length === 0) {
-						// Add a "No branches" node
-						const startNode = {
-							id: `${module.id}-branch-0`,
+						// "Collect result of each branch" node
+						const endNode = {
+							id: `${module.id}-end`,
 							data: {
 								offset: currentOffset,
 								id: module.id,
-								branchIndex: -1,
+								module: module,
 								modules: modules,
-								eventHandlers: eventHandlers,
 								...extra
 							},
 							position: { x: -1, y: -1 },
-							type: 'noBranch'
+							type: 'branchAllEnd'
 						}
 
-						nodes.push(startNode)
-
-						addEdge(module.id, startNode.id, {
-							type: 'empty'
-						})
-						addEdge(startNode.id, endNode.id, {
-							type: 'empty'
-						})
-					} else {
-						module.value.branches.forEach((branch, branchIndex) => {
-							// Start node by branch
+						nodes.push(endNode)
 
+						if (module.value.branches.length === 0) {
+							// Add a "No branches" node
 							const startNode = {
-								id: `${module.id}-branch-${branchIndex}`,
+								id: `${module.id}-branch-0`,
 								data: {
 									offset: currentOffset,
-									label: defaultIfEmptyString(branch.summary, `Branch ${branchIndex + 1}`),
 									id: module.id,
-									branchIndex: branchIndex,
+									branchIndex: -1,
 									modules: modules,
 									eventHandlers: eventHandlers,
 									...extra
 								},
 								position: { x: -1, y: -1 },
-								type: 'branchAllStart'
+								type: 'noBranch'
 							}
 
 							nodes.push(startNode)
@@ -220,284 +235,318 @@ export default function graphBuilder(
 							addEdge(module.id, startNode.id, {
 								type: 'empty'
 							})
+							addEdge(startNode.id, endNode.id, {
+								type: 'empty'
+							})
+						} else {
+							module.value.branches.forEach((branch, branchIndex) => {
+								// Start node by branch
+
+								const startNode = {
+									id: `${module.id}-branch-${branchIndex}`,
+									data: {
+										offset: currentOffset,
+										label: defaultIfEmptyString(branch.summary, `Branch ${branchIndex + 1}`),
+										id: module.id,
+										branchIndex: branchIndex,
+										modules: modules,
+										eventHandlers: eventHandlers,
+										...extra
+									},
+									position: { x: -1, y: -1 },
+									type: 'branchAllStart'
+								}
+
+								nodes.push(startNode)
+
+								addEdge(module.id, startNode.id, {
+									type: 'empty'
+								})
+
+								processModules(
+									branch.modules,
+									startNode,
+									endNode,
+									currentOffset,
+									localDisableMoveIds,
+									parentIndex ? `${parentIndex}-${index}-${branchIndex}` : `${index}-${branchIndex}`
+								)
+							})
+						}
 
-							processModules(
-								branch.modules,
-								startNode,
-								endNode,
-								currentOffset,
-								localDisableMoveIds,
-								parentIndex ? `${parentIndex}-${index}-${branchIndex}` : `${index}-${branchIndex}`
-							)
+						previousId = endNode.id
+					} else if (module.value.type === 'forloopflow') {
+						addNode(module, currentOffset, 'module', modules)
+
+						const startNode = {
+							id: `${module.id}-start`,
+							data: {
+								offset: currentOffset + 25,
+								id: module.id,
+								module: module,
+								modules: modules,
+								eventHandlers: eventHandlers,
+								...extra
+							},
+							position: { x: -1, y: -1 },
+							type: 'forLoopStart'
+						}
+
+						addEdge(module.id, startNode.id, {
+							type: 'empty'
 						})
-					}
 
-					previousId = endNode.id
-				} else if (module.value.type === 'forloopflow') {
-					addNode(module, currentOffset, 'module', modules)
-
-					const startNode = {
-						id: `${module.id}-start`,
-						data: {
-							offset: currentOffset + 25,
-							id: module.id,
-							module: module,
-							modules: modules,
-							eventHandlers: eventHandlers,
-							...extra
-						},
-						position: { x: -1, y: -1 },
-						type: 'forLoopStart'
-					}
+						const endNode = {
+							id: `${module.id}-end`,
+							data: {
+								offset: currentOffset,
+								id: module.id,
+								module: module,
+								modules: modules,
+								eventHandlers: eventHandlers,
+								...extra
+							},
+							position: { x: -1, y: -1 },
+							type: 'forLoopEnd'
+						}
 
-					addEdge(module.id, startNode.id, {
-						type: 'empty'
-					})
+						nodes.push(startNode)
+						nodes.push(endNode)
 
-					const endNode = {
-						id: `${module.id}-end`,
-						data: {
-							offset: currentOffset,
-							id: module.id,
-							module: module,
-							modules: modules,
-							eventHandlers: eventHandlers,
-							...extra
-						},
-						position: { x: -1, y: -1 },
-						type: 'forLoopEnd'
-					}
+						const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex
 
-					nodes.push(startNode)
-					nodes.push(endNode)
-
-					const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex
-
-					processModules(
-						module.value.modules,
-						startNode,
-						endNode,
-						currentOffset + 25,
-						localDisableMoveIds,
-						parentIndex
-							? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
-							: `${index}-${selectedIterIndex ?? '?'}`
-					)
-
-					previousId = endNode.id
-				} else if (module.value.type === 'whileloopflow') {
-					addNode(module, currentOffset, 'module', modules)
-
-					const startNode = {
-						id: `${module.id}-start`,
-						data: {
-							offset: currentOffset + 25,
-							module: module,
-							modules: modules,
-							eventHandlers: eventHandlers,
-							...extra
-						},
-						position: { x: -1, y: -1 },
-						type: 'whileLoopStart'
-					}
-					addEdge(module.id, startNode.id, {
-						type: 'empty'
-					})
+						processModules(
+							module.value.modules,
+							startNode,
+							endNode,
+							currentOffset + 25,
+							localDisableMoveIds,
+							parentIndex
+								? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
+								: `${index}-${selectedIterIndex ?? '?'}`
+						)
 
-					const endNode = {
-						id: `${module.id}-end`,
-						data: { offset: currentOffset, module: module, modules: modules, ...extra },
-						position: { x: -1, y: -1 },
-						type: 'whileLoopEnd'
-					}
+						previousId = endNode.id
+					} else if (module.value.type === 'whileloopflow') {
+						addNode(module, currentOffset, 'module', modules)
 
-					nodes.push(startNode)
-					nodes.push(endNode)
-
-					const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex
-
-					processModules(
-						module.value.modules,
-						startNode,
-						endNode,
-						currentOffset + 25,
-						localDisableMoveIds,
-						parentIndex
-							? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
-							: `${index}-${selectedIterIndex ?? '?'}`
-					)
-
-					previousId = endNode.id
-				} else if (module.value.type === 'branchone') {
-					addNode(module, currentOffset, 'module', modules)
-
-					const endNode = {
-						id: `${module.id}-end`,
-						data: { offset: currentOffset, eventHandlers: eventHandlers },
-						position: { x: -1, y: -1 },
-						type: 'branchOneEnd'
-					}
-					nodes.push(endNode)
-
-					// Add default branch
-					const defaultBranch = {
-						id: `${module.id}-default`,
-						data: {
-							offset: currentOffset,
-							label: 'Default',
-							id: module.id,
-							branchIndex: -1,
-							modules: module.value.default,
-							eventHandlers: eventHandlers,
-							branchOne: true,
-							...extra
-						},
-						position: { x: -1, y: -1 },
-						type: 'noBranch'
-					}
+						const startNode = {
+							id: `${module.id}-start`,
+							data: {
+								offset: currentOffset + 25,
+								module: module,
+								modules: modules,
+								eventHandlers: eventHandlers,
+								...extra
+							},
+							position: { x: -1, y: -1 },
+							type: 'whileLoopStart'
+						}
+						addEdge(module.id, startNode.id, {
+							type: 'empty'
+						})
 
-					nodes.push(defaultBranch)
+						const endNode = {
+							id: `${module.id}-end`,
+							data: { offset: currentOffset, module: module, modules: modules, ...extra },
+							position: { x: -1, y: -1 },
+							type: 'whileLoopEnd'
+						}
 
-					addEdge(module.id, defaultBranch.id, { type: 'empty' })
+						nodes.push(startNode)
+						nodes.push(endNode)
 
-					processModules(
-						module.value.default,
-						defaultBranch,
-						endNode,
-						currentOffset,
-						localDisableMoveIds,
-						parentIndex ? `${parentIndex}-${index}` : index.toString()
-					)
+						const selectedIterIndex = extra.flowModuleStates?.[module.id]?.selectedForloopIndex
 
-					module.value.branches.forEach((branch, branchIndex) => {
-						// Start node by branch
+						processModules(
+							module.value.modules,
+							startNode,
+							endNode,
+							currentOffset + 25,
+							localDisableMoveIds,
+							parentIndex
+								? `${parentIndex}-${index}-${selectedIterIndex ?? '?'}`
+								: `${index}-${selectedIterIndex ?? '?'}`
+						)
 
-						const startNode = {
-							id: `${module.id}-branch-${branchIndex}`,
+						previousId = endNode.id
+					} else if (module.value.type === 'branchone') {
+						addNode(module, currentOffset, 'module', modules)
+
+						const endNode = {
+							id: `${module.id}-end`,
+							data: { offset: currentOffset, eventHandlers: eventHandlers },
+							position: { x: -1, y: -1 },
+							type: 'branchOneEnd'
+						}
+						nodes.push(endNode)
+
+						// Add default branch
+						const defaultBranch = {
+							id: `${module.id}-default`,
 							data: {
 								offset: currentOffset,
-								label: defaultIfEmptyString(branch.summary, 'Branch ' + (branchIndex + 1)),
-								preLabel: branch.summary ? '' : branch.expr,
+								label: 'Default',
 								id: module.id,
-								branchIndex: branchIndex,
-								modules: modules,
+								branchIndex: -1,
+								modules: module.value.default,
 								eventHandlers: eventHandlers,
+								branchOne: true,
 								...extra
 							},
 							position: { x: -1, y: -1 },
-							type: 'branchOneStart'
+							type: 'noBranch'
 						}
 
-						nodes.push(startNode)
+						nodes.push(defaultBranch)
 
-						addEdge(module.id, startNode.id, { type: 'empty' })
+						addEdge(module.id, defaultBranch.id, { type: 'empty' })
 
 						processModules(
-							branch.modules,
-							startNode,
+							module.value.default,
+							defaultBranch,
 							endNode,
 							currentOffset,
 							localDisableMoveIds,
 							parentIndex ? `${parentIndex}-${index}` : index.toString()
 						)
-					})
 
-					previousId = endNode.id
-				} else {
-					addNode(module, currentOffset, 'module', modules)
+						module.value.branches.forEach((branch, branchIndex) => {
+							// Start node by branch
 
-					previousId = module.id
-				}
+							const startNode = {
+								id: `${module.id}-branch-${branchIndex}`,
+								data: {
+									offset: currentOffset,
+									label: defaultIfEmptyString(branch.summary, 'Branch ' + (branchIndex + 1)),
+									preLabel: branch.summary ? '' : branch.expr,
+									id: module.id,
+									branchIndex: branchIndex,
+									modules: modules,
+									eventHandlers: eventHandlers,
+									...extra
+								},
+								position: { x: -1, y: -1 },
+								type: 'branchOneStart'
+							}
 
-				if (index === 0) {
-					addEdge(beforeNode.id, module.id, {
-						subModules: modules,
-						disableMoveIds
-					})
-				}
+							nodes.push(startNode)
 
-				if (index === modules.length - 1 && previousId) {
-					addEdge(previousId, nextNode.id, {
-						subModules: modules,
-						disableMoveIds
-					})
-				}
-			})
+							addEdge(module.id, startNode.id, { type: 'empty' })
+
+							processModules(
+								branch.modules,
+								startNode,
+								endNode,
+								currentOffset,
+								localDisableMoveIds,
+								parentIndex ? `${parentIndex}-${index}` : index.toString()
+							)
+						})
+
+						previousId = endNode.id
+					} else {
+						addNode(module, currentOffset, 'module', modules)
+
+						previousId = module.id
+					}
+
+					if (index === 0) {
+						addEdge(beforeNode.id, module.id, {
+							subModules: modules,
+							disableMoveIds
+						})
+					}
+
+					if (index === modules.length - 1 && previousId) {
+						addEdge(previousId, nextNode.id, {
+							subModules: modules,
+							disableMoveIds
+						})
+					}
+				})
+
+				if (failureModule) {
+					const id = parentIndex ? `failure-${parentIndex}` : 'failure'
+					const failureState = extra.flowModuleStates?.[id] as GraphModuleState | undefined
 
-			if (failureModule) {
-				const id = parentIndex ? `failure-${parentIndex}` : 'failure'
-				const failureState = extra.flowModuleStates?.[id] as GraphModuleState | undefined
-
-				if (failureState && failureState.parent_module) {
-					addNode(
-						{
-							...failureModule,
-							id: id
-						},
-						0,
-						'module'
-					)
-					addEdge(failureState.parent_module, id, { type: 'empty' })
+					if (failureState && failureState.parent_module) {
+						addNode(
+							{
+								...failureModule,
+								id: id
+							},
+							0,
+							'module'
+						)
+						addEdge(failureState.parent_module, id, { type: 'empty' })
+					}
 				}
 			}
 		}
-	}
 
-	processModules(modules, inputNode, resultNode)
+		processModules(modules, inputNode, resultNode)
 
-	if (preprocessorModule) {
-		addNode(preprocessorModule, 0, 'module')
-		const id = JSON.parse(JSON.stringify(preprocessorModule.id))
-		addEdge(id, 'Input', { type: 'empty' })
-	}
+		if (preprocessorModule) {
+			addNode(preprocessorModule, 0, 'module')
+			const id = JSON.parse(JSON.stringify(preprocessorModule.id))
+			addEdge(id, 'Input', { type: 'empty' })
+		}
 
-	if (failureModule && !extra.flowModuleStates) {
-		addNode(failureModule, 0, 'module')
-	}
+		if (failureModule && !extra.flowModuleStates) {
+			addNode(failureModule, 0, 'module')
+		}
 
-	Object.keys(parents).forEach((key) => {
-		const node = nodes.find((n) => n.id === key)
+		Object.keys(parents).forEach((key) => {
+			const node = nodes.find((n) => n.id === key)
 
-		if (node) {
-			node.data.parentIds = parents[key]
-		}
-	})
+			if (node) {
+				node.data.parentIds = parents[key]
+			}
+		})
 
-	if (useDataflow && selectedId) {
-		let deps = getDependeeAndDependentComponents(selectedId, modules ?? [], failureModule)
+		if (useDataflow && selectedId) {
+			let deps = getDependeeAndDependentComponents(selectedId, modules ?? [], failureModule)
 
-		if (deps) {
-			Object.entries(deps.dependees).forEach((x, i) => {
-				const inputs = x[1]
+			if (deps) {
+				Object.entries(deps.dependees).forEach((x, i) => {
+					const inputs = x[1]
 
-				inputs?.forEach((input, index) => {
-					let pid = x[0]
+					inputs?.forEach((input, index) => {
+						let pid = x[0]
 
-					if (input?.startsWith('flow_input.iter')) {
-						const parent = dfsByModule(selectedId!, modules ?? [])?.pop()
+						if (input?.startsWith('flow_input.iter')) {
+							const parent = dfsByModule(selectedId!, modules ?? [])?.pop()
 
-						if (parent?.id) {
-							pid = parent.id
+							if (parent?.id) {
+								pid = parent.id
+							}
 						}
-					}
 
-					addEdge(pid, selectedId!, {
-						customId: `dep-${pid}-${selectedId}-${input}-${index}`,
-						type: 'dataflowedge'
+						addEdge(pid, selectedId!, {
+							customId: `dep-${pid}-${selectedId}-${input}-${index}`,
+							type: 'dataflowedge'
+						})
 					})
 				})
-			})
 
-			Object.entries(deps.dependents).forEach((x, i) => {
-				let pid = x[0]
+				Object.entries(deps.dependents).forEach((x, i) => {
+					let pid = x[0]
 
-				addEdge(selectedId!, pid, {
-					customId: `dep-${selectedId}-${pid}-${i}`,
-					type: 'dataflowedge'
+					addEdge(selectedId!, pid, {
+						customId: `dep-${selectedId}-${pid}-${i}`,
+						type: 'dataflowedge'
+					})
 				})
-			})
+			}
 		}
-	}
 
-	return { nodes, edges }
+		return { nodes, edges }
+	} catch (e) {
+		return {
+			nodes: [],
+			edges: [],
+			error: e
+		}
+	}
 }