From 48998fc07343b124e224a63c84d7677ecdfae5ad Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 12 Aug 2024 16:32:16 +0200
Subject: [PATCH] feat(frontend): fix add and delete branches

---
 .../lib/components/graph/FlowGraphV2.svelte   |  3 ++-
 .../src/lib/components/graph/graphBuilder.ts  |  2 +-
 ...tart copy.svelte => BranchAllStart.svelte} | 11 ++++++----
 .../renderers/nodes/BranchOneStart.svelte     | 21 ++++++++-----------
 4 files changed, 19 insertions(+), 18 deletions(-)
 rename frontend/src/lib/components/graph/renderers/nodes/{BranchAllStart copy.svelte => BranchAllStart.svelte} (92%)

diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index f519222ce8..e1f82ce9c1 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/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 })
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index eb6cae9da5..3545022806 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/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'
 					}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart copy.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
similarity index 92%
rename from frontend/src/lib/components/graph/renderers/nodes/BranchAllStart copy.svelte
rename to frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
index dde67e3e5d..025b4099ee 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart copy.svelte	
+++ b/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} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
index dde67e3e5d..bcbe335f1a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+++ b/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>