From c5feaefec7ab55a291353d646960f6ce14c217cc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 2 Sep 2024 14:03:44 +0200
Subject: [PATCH] fix: fix erronous branchone status

---
 frontend/src/lib/components/FlowStatusViewerInner.svelte  | 1 -
 frontend/src/lib/components/flows/map/VirtualItem.svelte  | 2 +-
 frontend/src/lib/components/graph/graphBuilder.ts         | 1 +
 .../graph/renderers/nodes/BranchOneStart.svelte           | 2 +-
 .../components/graph/renderers/nodes/NoBranchNode.svelte  | 8 +++++++-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index b0e933ef8a..52283a54a2 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -938,7 +938,6 @@
 								if (rightColumnSelect != 'node_definition') {
 									rightColumnSelect = 'node_status'
 								}
-								console.log('BAR', e.detail)
 								if (typeof e.detail == 'string') {
 									if (e.detail == 'Input') {
 										selectedNode = 'start'
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index f292523741..4ab598bf9c 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -48,7 +48,7 @@
 			}
 		}
 	}}
-	id={`flow-editor-virtual-${label}`}
+	id={`flow-editor-virtual-${encodeURIComponent(label)}`}
 >
 	<div
 		style={borderColor ? `border-color: ${borderColor};` : ''}
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index 0475c1271e..a4abc2dd56 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -328,6 +328,7 @@ export default function graphBuilder(
 							branchIndex: -1,
 							modules: module.value.default,
 							eventHandlers: eventHandlers,
+							branchOne: true,
 							...extra
 						},
 						position: { x: -1, y: -1 },
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
index 37f1270a0d..c59d1baab1 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchOneStart.svelte
@@ -21,7 +21,7 @@
 	}
 
 	$: borderStatus = computeBorderStatus(
-		data.branchIndex,
+		data.branchIndex + 1,
 		'branchone',
 		data.flowModuleStates?.[data.id]
 	)
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
index f60ad18751..a87b5cbfb6 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoBranchNode.svelte
@@ -5,6 +5,7 @@
 	import type { GraphEventHandlers } from '../../graphBuilder'
 	import { getStateColor } from '../../util'
 	import type { GraphModuleState } from '../../model'
+	import { computeBorderStatus } from '../utils'
 
 	export let data: {
 		id: string
@@ -14,7 +15,12 @@
 		flowModuleStates: Record<string, GraphModuleState> | undefined
 		offset: number
 		label: string | undefined
+		branchOne: boolean
 	}
+
+	$: borderStatus = data.branchOne
+		? computeBorderStatus(0, 'branchone', data.flowModuleStates?.[data.id])
+		: undefined
 </script>
 
 <NodeWrapper offset={data.offset} let:darkMode enableSourceHandle enableTargetHandle>
@@ -25,7 +31,7 @@
 		selectable={true}
 		selected={false}
 		bgColor={getStateColor(undefined, darkMode)}
-		borderColor={getStateColor(data?.flowModuleStates?.[data?.id]?.type, darkMode)}
+		borderColor={getStateColor(borderStatus, darkMode)}
 		on:select={(e) => {
 			data?.eventHandlers?.select(e.detail)
 		}}