feat(frontend): Fix branch one

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -21,7 +21,7 @@
 	import graphBuilder from './graphBuilder'
 	import ModuleNode from './renderers/nodes/ModuleNode.svelte'
 	import InputNode from './renderers/nodes/InputNode.svelte'
-	import BranchAllStart from './renderers/nodes/BranchAllStart.svelte'
+	import BranchAllStart from './renderers/nodes/BranchOneStart.svelte'
 	import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte'
 	import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte'
 	import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte'
@@ -33,6 +33,7 @@
 	import Toggle from '../Toggle.svelte'
 	import DataflowEdge from './renderers/edges/DataflowEdge.svelte'
 	import { encodeState } from '$lib/utils'
+	import BranchOneStart from './renderers/nodes/BranchOneStart.svelte'
 
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
@@ -189,7 +190,9 @@
 		forLoopStart: ForLoopStartNode,
 		result: ResultNode,
 		whileLoopStart: ForLoopStartNode,
-		whileLoopEnd: ForLoopEndNode
+		whileLoopEnd: ForLoopEndNode,
+		branchOneStart: BranchOneStart,
+		branchOneEnd: BranchAllEndNode
 	} as any
 
 	const edgeTypes = {

frontend/src/lib/components/graph/graphBuilder.ts

@@ -119,179 +119,183 @@ export default function graphBuilder(
 	) {
 		let previousId: string | undefined = undefined
 
-		modules.forEach((module, index) => {
-			// Add the edge between the previous node and the current one
-			if (index > 0 && previousId) {
-				addEdge(previousId, module.id)
-			}
-
-			if (module.value.type === 'rawscript') {
-				addNode(module, currentOffset, 'module')
-
-				previousId = module.id
-			} else if (module.value.type === 'branchall') {
-				// Start
-				addNode(module, currentOffset, 'module')
-
-				// "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'
+		if (modules.length === 0) {
+			addEdge(beforeNode.id, nextNode.id, { subModules: modules })
+		} else {
+			modules.forEach((module, index) => {
+				// Add the edge between the previous node and the current one
+				if (index > 0 && previousId) {
+					addEdge(previousId, module.id)
 				}
-				nodes.push(endNode)
 
-				module.value.branches.forEach((branch, branchIndex) => {
-					// Start node by branch
+				if (module.value.type === 'branchall') {
+					// Start
+					addNode(module, currentOffset, 'module')
 
-					const startNode = {
-						id: `${module.id}-branch-${branchIndex}`,
+					// "Collect result of each branch" node
+					const endNode = {
+						id: `${module.id}-end`,
 						data: {
 							offset: currentOffset,
-							label: `Branch ${branchIndex + 1}`,
 							id: module.id,
-							branchIndex: branchIndex,
+							module: module,
+							modules: modules,
+							...extra
+						},
+						position: { x: -1, y: -1 },
+						type: 'branchAllEnd'
+					}
+					nodes.push(endNode)
+
+					module.value.branches.forEach((branch, branchIndex) => {
+						// Start node by branch
+
+						const startNode = {
+							id: `${module.id}-branch-${branchIndex}`,
+							data: {
+								offset: currentOffset,
+								label: `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)
+					})
+
+					previousId = endNode.id
+				} else if (module.value.type === 'forloopflow') {
+					addNode(module, currentOffset, 'module')
+
+					const startNode = {
+						id: `${module.id}-start`,
+						data: {
+							offset: currentOffset + 50,
+							id: module.id,
+							module: module,
 							modules: modules,
 							eventHandlers: eventHandlers,
 							...extra
 						},
 						position: { x: -1, y: -1 },
-						type: 'branchAllStart'
+						type: 'forLoopStart'
 					}
 
-					nodes.push(startNode)
-
 					addEdge(module.id, startNode.id, { type: 'empty' })
 
-					if (branch.modules.length === 0) {
-						addEdge(startNode.id, endNode.id, { type: 'empty' })
-					} else {
-						processModules(branch.modules, startNode, endNode)
-					}
-				})
-
-				previousId = endNode.id
-			} else if (module.value.type === 'forloopflow') {
-				addNode(module, currentOffset, 'module')
-
-				const startNode = {
-					id: `${module.id}-start`,
-					data: {
-						offset: currentOffset + 50,
-						id: module.id,
-						module: module,
-						modules: modules,
-						eventHandlers: eventHandlers,
-						...extra
-					},
-					position: { x: -1, y: -1 },
-					type: 'forLoopStart'
-				}
-
-				addEdge(module.id, startNode.id, { type: 'empty' })
-
-				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'
-				}
-
-				nodes.push(startNode)
-				nodes.push(endNode)
-
-				if (module.value.modules.length > 0) {
-					processModules(module.value.modules, startNode, endNode, currentOffset + 50)
-				} else {
-					addEdge(startNode.id, endNode.id, { subModules: module.value.modules })
-				}
-				previousId = endNode.id
-			} else if (module.value.type === 'whileloopflow') {
-				addNode(module, currentOffset, 'module')
-
-				const startNode = {
-					id: `${module.id}-start`,
-					data: {
-						offset: currentOffset + 50,
-						module: module,
-						modules: modules,
-						eventHandlers: eventHandlers,
-						...extra
-					},
-					position: { x: -1, y: -1 },
-					type: 'whileLoopStart'
-				}
-				addEdge(module.id, startNode.id, { type: 'empty' })
-
-				const endNode = {
-					id: `${module.id}-end`,
-					data: { offset: currentOffset, module: module, modules: modules, ...extra },
-					position: { x: -1, y: -1 },
-					type: 'whileLoopEnd'
-				}
-
-				nodes.push(startNode)
-				nodes.push(endNode)
-
-				processModules(module.value.modules, startNode, endNode, currentOffset + 50)
-				previousId = endNode.id
-			} else if (module.value.type === 'branchone') {
-				// Start
-				addNode(module, currentOffset, 'module')
-
-				// "Collect result of each branch" node
-				const endNode = {
-					id: `${module.id}-end`,
-					data: { offset: currentOffset },
-					position: { x: -1, y: -1 },
-					type: 'branchOneEnd'
-				}
-				nodes.push(endNode)
-
-				module.value.branches.forEach((branch, branchIndex) => {
-					// Start node by branch
-
-					const startNode = {
-						id: `${module.id}-branch-${branchIndex}`,
-						data: { offset: currentOffset },
+					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: 'branchOneStart'
+						type: 'forLoopEnd'
 					}
 
 					nodes.push(startNode)
+					nodes.push(endNode)
 
-					addEdge(module.id, startNode.id)
+					processModules(module.value.modules, startNode, endNode, currentOffset + 50)
 
-					processModules(branch.modules, startNode, endNode)
-				})
-			} else if (module.value.type === 'identity') {
-				addNode(module, currentOffset, 'module')
+					previousId = endNode.id
+				} else if (module.value.type === 'whileloopflow') {
+					addNode(module, currentOffset, 'module')
 
-				previousId = module.id
-			}
+					const startNode = {
+						id: `${module.id}-start`,
+						data: {
+							offset: currentOffset + 50,
+							module: module,
+							modules: modules,
+							eventHandlers: eventHandlers,
+							...extra
+						},
+						position: { x: -1, y: -1 },
+						type: 'whileLoopStart'
+					}
+					addEdge(module.id, startNode.id, { type: 'empty' })
 
-			if (index === 0) {
-				addEdge(beforeNode.id, module.id)
-			}
+					const endNode = {
+						id: `${module.id}-end`,
+						data: { offset: currentOffset, module: module, modules: modules, ...extra },
+						position: { x: -1, y: -1 },
+						type: 'whileLoopEnd'
+					}
 
-			if (index === modules.length - 1 && previousId) {
-				addEdge(previousId, nextNode.id)
-			}
-		})
+					nodes.push(startNode)
+					nodes.push(endNode)
+
+					processModules(module.value.modules, startNode, endNode, currentOffset + 50)
+
+					previousId = endNode.id
+				} else if (module.value.type === 'branchone') {
+					// Start
+					addNode(module, currentOffset, 'module')
+
+					// "Collect result of each branch" node
+					const endNode = {
+						id: `${module.id}-end`,
+						data: { offset: currentOffset },
+						position: { x: -1, y: -1 },
+						type: 'branchOneEnd'
+					}
+					nodes.push(endNode)
+
+					module.value.branches.forEach((branch, branchIndex) => {
+						// Start node by branch
+
+						const startNode = {
+							id: `${module.id}-branch-${branchIndex}`,
+							data: {
+								offset: currentOffset,
+								label: `Branch ${branchIndex + 1}`,
+								id: module.id,
+								branchIndex: branchIndex,
+								modules: modules,
+								eventHandlers: eventHandlers,
+								...extra
+							},
+							position: { x: -1, y: -1 },
+							type: 'branchOneStart'
+						}
+
+						nodes.push(startNode)
+
+						addEdge(module.id, startNode.id)
+
+						processModules(branch.modules, startNode, endNode)
+					})
+
+					previousId = endNode.id
+				} else {
+					addNode(module, currentOffset, 'module')
+
+					previousId = module.id
+				}
+
+				if (index === 0) {
+					addEdge(beforeNode.id, module.id)
+				}
+
+				if (index === modules.length - 1 && previousId) {
+					addEdge(previousId, nextNode.id)
+				}
+			})
+		}
 	}
 
 	processModules(modules, inputNode, resultNode)
@@ -300,10 +304,6 @@ export default function graphBuilder(
 		addNode(failureModule, 0, 'module')
 	}
 
-	if (modules.length === 0) {
-		addEdge(inputNode.id, resultNode.id)
-	}
-
 	Object.keys(parents).forEach((key) => {
 		const node = nodes.find((n) => n.id === key)
 
@@ -312,7 +312,6 @@ export default function graphBuilder(
 		}
 	})
 
-	// DATAFLOW
 	if (useDataflow && selectedId) {
 		let deps = getDependeeAndDependentComponents(selectedId, modules ?? [], failureModule)
 

frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { NodeToolbar, Position } from '@xyflow/svelte'
+	import NodeWrapper from './NodeWrapper.svelte'
+	import { X } from 'lucide-svelte'
+	import { createEventDispatcher } from 'svelte'
+	import Popover from '$lib/components/Popover.svelte'
+	import type { FlowStatusModule } from '$lib/gen'
+	import type { GraphModuleState } from '../../model'
+	import { getStateColor } from '../../util'
+	import type { FlowModule } from '$lib/gen/models/FlowModule'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+
+	export let data: {
+		label: string
+		branchIndex: number
+		insertable: boolean
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+		id: string
+		modules: FlowModule[]
+		selected: boolean
+		eventHandlers: GraphEventHandlers
+	}
+
+	const dispatch = createEventDispatcher()
+
+	let borderStatus: FlowStatusModule['type'] | undefined = undefined
+
+	let flow_jobs_success = data?.flowModuleStates?.[data?.id]?.flow_jobs_success
+	if (!flow_jobs_success) {
+		borderStatus = 'WaitingForPriorSteps'
+	} else {
+		let status = flow_jobs_success?.[data.branchIndex]
+		if (status == undefined) {
+			borderStatus = 'WaitingForExecutor'
+		} else {
+			borderStatus = status ? 'Success' : 'Failure'
+		}
+	}
+</script>
+
+<NodeToolbar isVisible position={Position.Top}>
+	{#if data.insertable}
+		<Popover>
+			<button
+				class="rounded-full border p-1 hover:bg-surface-hover bg-surface"
+				on:click={() => {
+					dispatch('deleteBranch', { branchIndex: data.branchIndex })
+				}}
+			>
+				<X size={16} />
+			</button>
+
+			<svelte:fragment slot="text">Delete branch</svelte:fragment>
+		</Popover>
+	{/if}
+</NodeToolbar>
+
+<NodeWrapper let:darkMode>
+	<VirtualItem
+		label={data.label}
+		modules={data.modules}
+		selectable
+		selected={data.selected}
+		insertable={data.insertable}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={borderStatus
+			? getStateColor(borderStatus, darkMode) + (!darkMode ? '; border-width: 3px' : '')
+			: undefined}
+		on:select={() => {
+			data.eventHandlers.select(data.id)
+		}}
+		on:deleteBranch={(e) => {
+			data.eventHandlers.deleteBranch(e.detail, data.label)
+		}}
+		on:insert={(e) => {
+			data.eventHandlers.insert(e.detail)
+		}}
+	/>
+</NodeWrapper>

frontend/src/lib/components/graph/renderers/nodes/branchOneEndNode.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import NodeWrapper from './NodeWrapper.svelte'
+	import type { FlowModule } from '$lib/gen/models/FlowModule'
+	import type { GraphEventHandlers } from '../../graphBuilder'
+	import { getStateColor } from '../../util'
+	import type { GraphModuleState } from '../../model'
+
+	export let data: {
+		id: string
+		insertable: boolean
+		modules: FlowModule[]
+		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
+	}
+</script>
+
+<NodeWrapper let:darkMode enableSourceHandle enableTargetHandle>
+	<VirtualItem
+		label={'Collect result from all branches'}
+		modules={data.modules}
+		id={data.id}
+		selectable={true}
+		selected={false}
+		insertable={false}
+		bgColor={getStateColor(undefined, darkMode)}
+		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		on:select={(e) => {
+			data?.eventHandlers?.select(e.detail)
+		}}
+	/>
+</NodeWrapper>