feat(frontend): fix add and delete branches

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

@@ -134,6 +134,7 @@
 		{
 			deleteBranch: (detail, label) => {
 				$selectedId = label
+
 				dispatch('deleteBranch', detail)
 			},
 			insert: (detail) => {
@@ -153,7 +154,7 @@
 				dispatch('delete', detail)
 			},
 			newBranch: (module) => {
-				dispatch('newBranch', module)
+				dispatch('newBranch', { module })
 			},
 			move: (module, modules) => {
 				dispatch('move', { module, modules })

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

@@ -249,7 +249,7 @@ export default function graphBuilder(
 					// "Collect result of each branch" node
 					const endNode = {
 						id: `${module.id}-end`,
-						data: { offset: currentOffset },
+						data: { offset: currentOffset, eventHandlers: eventHandlers },
 						position: { x: -1, y: -1 },
 						type: 'branchOneEnd'
 					}

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

@@ -3,7 +3,6 @@
 	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'
@@ -22,8 +21,6 @@
 		eventHandlers: GraphEventHandlers
 	}
 
-	const dispatch = createEventDispatcher()
-
 	let borderStatus: FlowStatusModule['type'] | undefined = undefined
 
 	let flow_jobs_success = data?.flowModuleStates?.[data?.id]?.flow_jobs_success
@@ -45,7 +42,13 @@
 			<button
 				class="rounded-full border p-1 hover:bg-surface-hover bg-surface"
 				on:click={() => {
-					dispatch('deleteBranch', { branchIndex: data.branchIndex })
+					data.eventHandlers.deleteBranch(
+						{
+							module: data.modules.find((m) => m.id === data.id),
+							index: data.branchIndex
+						},
+						data.label
+					)
 				}}
 			>
 				<X size={16} />

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

@@ -3,7 +3,6 @@
 	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'
@@ -13,17 +12,15 @@
 
 	export let data: {
 		label: string
-		branchIndex: number
 		insertable: boolean
 		flowModuleStates: Record<string, GraphModuleState> | undefined
 		id: string
 		modules: FlowModule[]
 		selected: boolean
 		eventHandlers: GraphEventHandlers
+		branchIndex: number
 	}
 
-	const dispatch = createEventDispatcher()
-
 	let borderStatus: FlowStatusModule['type'] | undefined = undefined
 
 	let flow_jobs_success = data?.flowModuleStates?.[data?.id]?.flow_jobs_success
@@ -44,8 +41,14 @@
 		<Popover>
 			<button
 				class="rounded-full border p-1 hover:bg-surface-hover bg-surface"
-				on:click={() => {
-					dispatch('deleteBranch', { branchIndex: data.branchIndex })
+				on:click={(e) => {
+					data.eventHandlers.deleteBranch(
+						{
+							module: data.modules.find((m) => m.id === data.id),
+							index: data.branchIndex
+						},
+						data.label
+					)
 				}}
 			>
 				<X size={16} />
@@ -70,11 +73,5 @@
 		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>