fix(frontend): wip

frontend/src/lib/components/flows/map/InsertModuleButton.svelte

@@ -37,7 +37,7 @@
 	>
 		<Cross class="mx-[5px]" size={15} />
 	</button>
-	<div id="flow-editor-insert-module">
+	<div id="flow-editor-insert-module" class="z-50">
 		<StepGen on:insert {index} bind:funcDesc bind:open {close} {modules} {disableAi} />
 
 		{#if funcDesc.length === 0}

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

@@ -120,7 +120,8 @@
 		{
 			disableAi,
 			insertable,
-			flowModuleStates
+			flowModuleStates,
+			selectedId: $selectedId
 		},
 		failureModule,
 		{
@@ -131,12 +132,12 @@
 			insert: (detail) => {
 				dispatch('insert', detail)
 			},
-			select: (mod) => {
+			select: (modId) => {
 				if (!notSelectable) {
-					if ($selectedId != mod.id) {
-						$selectedId = mod.id
+					if ($selectedId != modId) {
+						$selectedId = modId
 					}
-					dispatch('select', mod)
+					dispatch('select', modId)
 				}
 			},
 			delete: (detail, label) => {
@@ -250,4 +251,8 @@
 	:global(.svelte-flow__controls-button:hover) {
 		@apply bg-surface-hover;
 	}
+
+	:global(.svelte-flow__edgelabel-renderer) {
+		@apply z-50;
+	}
 </style>

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

@@ -4,7 +4,7 @@ import { type Node, type Edge } from '@xyflow/svelte'
 export type GraphEventHandlers = {
 	insert: (detail) => void
 	deleteBranch: (detail, label: string) => void
-	select: (mod: FlowModule) => void
+	select: (modId: string) => void
 	delete: (detail, label: string) => void
 	newBranch: (detail, label: string) => void
 	move: (module: FlowModule, modules: FlowModule[], index: number) => void
@@ -130,6 +130,9 @@ export default function graphBuilder(
 							offset: currentOffset,
 							label: `Branch ${branchIndex + 1}`,
 							id: module.id,
+							branchIndex: branchIndex,
+							modules: modules,
+							eventHandlers: eventHandlers,
 							...extra
 						},
 						position: { x: -1, y: -1 },
@@ -158,6 +161,7 @@ export default function graphBuilder(
 						id: module.id,
 						module: module,
 						modules: modules,
+						eventHandlers: eventHandlers,
 						...extra
 					},
 					position: { x: -1, y: -1 },
@@ -173,6 +177,7 @@ export default function graphBuilder(
 						id: module.id,
 						module: module,
 						modules: modules,
+						eventHandlers: eventHandlers,
 						...extra
 					},
 					position: { x: -1, y: -1 },
@@ -194,6 +199,7 @@ export default function graphBuilder(
 						offset: currentOffset + 50,
 						module: module,
 						modules: modules,
+						eventHandlers: eventHandlers,
 						...extra
 					},
 					position: { x: -1, y: -1 },

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -43,7 +43,6 @@
 			: edgePath
 </script>
 
-<BaseEdge path={completeEdge} {markerEnd} {style} />
 <EdgeLabelRenderer>
 	{#if data?.insertable}
 		<div
@@ -54,6 +53,7 @@
 		</div>
 	{/if}
 </EdgeLabelRenderer>
+<BaseEdge path={completeEdge} {markerEnd} {style} />
 
 <style>
 	.edgeButtonContainer {

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

@@ -6,14 +6,38 @@
 	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}>
@@ -36,11 +60,23 @@
 <NodeWrapper let:darkMode>
 	<VirtualItem
 		label={data.label}
-		modules={[]}
+		modules={data.modules}
 		index={data.branchIndex}
 		selectable
-		selected={false}
+		selected={data.selected}
 		insertable={data.insertable}
-		bgColor={darkMode ? '#2e3440' : '#dfe6ee'}
+		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/ModuleNode.svelte

@@ -31,6 +31,7 @@
 			| undefined
 		eventHandlers: GraphEventHandlers
 		flowModuleStates: Record<string, GraphModuleState> | undefined
+		selected: boolean
 	}
 
 	$: idx = data.modules?.findIndex((m) => m.id === data.module.id)
@@ -63,7 +64,9 @@
 		on:delete={(e) => {
 			data.eventHandlers.delete(e.detail, '')
 		}}
-		on:insert
+		on:insert={(e) => {
+			data.eventHandlers.insert(e.detail)
+		}}
 		on:move
 		on:newBranch
 		on:select