From 073c806252cb1198aee744417382b46c2428c2a9 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 12 Aug 2024 17:38:14 +0200
Subject: [PATCH] feat(frontend): Make the iterations menu work

---
 .../src/lib/components/FlowStatusViewerInner.svelte   |  1 +
 frontend/src/lib/components/flows/map/MapItem.svelte  |  2 +-
 frontend/src/lib/components/graph/FlowGraphV2.svelte  |  4 ++--
 frontend/src/lib/components/graph/graphBuilder.ts     |  2 +-
 .../graph/renderers/nodes/BranchAllStart.svelte       |  5 +++--
 .../graph/renderers/nodes/ModuleNode.svelte           | 11 +++++------
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 7c6812acff..529b01d53c 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -939,6 +939,7 @@
 							}}
 							on:selectedIteration={(e) => {
 								let detail = e.detail
+
 								setModuleState(detail.moduleId, {
 									selectedForloop: detail.id,
 									selectedForloopIndex: detail.index
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 53f449c8bb..3afe38ca06 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -79,7 +79,7 @@
 			</div>
 		{/if}
 		{#if flowJobs && !insertable}
-			<div class="absolute z-10 right-8 -top-5">
+			<div class="absolute z-50 right-8 -top-5">
 				<FlowJobsMenu
 					on:selectedIteration={(e) => {
 						dispatch('selectedIteration', e.detail)
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index e1f82ce9c1..a662f4bd15 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -159,8 +159,8 @@
 			move: (module, modules) => {
 				dispatch('move', { module, modules })
 			},
-			selectIteration: (detail, moduleId) => {
-				dispatch('selectIteration', { ...detail, moduleId: moduleId })
+			selectedIteration: (detail, moduleId) => {
+				dispatch('selectedIteration', { ...detail, moduleId: moduleId })
 			}
 		},
 		success,
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
index 3545022806..1fdbf17ecd 100644
--- a/frontend/src/lib/components/graph/graphBuilder.ts
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -10,7 +10,7 @@ export type GraphEventHandlers = {
 	delete: (detail, label: string) => void
 	newBranch: (module: FlowModule) => void
 	move: (module: FlowModule, modules: FlowModule[]) => void
-	selectIteration: (detail, moduleId: string) => void
+	selectedIteration: (detail, moduleId: string) => void
 }
 
 export default function graphBuilder(
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
index 025b4099ee..6952696dae 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
@@ -36,7 +36,7 @@
 	}
 </script>
 
-<NodeToolbar isVisible position={Position.Top}>
+<NodeToolbar isVisible position={Position.Top} align="center">
 	{#if data.insertable}
 		<Popover>
 			<button
@@ -59,7 +59,8 @@
 	{/if}
 </NodeToolbar>
 
-<NodeWrapper let:darkMode>
+<NodeWrapper let:darkMode
+	>s
 	<VirtualItem
 		label={data.label}
 		modules={data.modules}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index 82a057ae7f..1bdf031a7a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -18,7 +18,6 @@
 		bgColor: string
 		modules: FlowModule[]
 		moving: string | undefined
-		duration_ms: number | undefined
 		disableAi: boolean
 		wrapperId: string | undefined
 		retries: number | undefined
@@ -35,8 +34,8 @@
 		type = 'InProgress'
 	}
 
-	const state = data.flowModuleStates?.[data.module.id]
-	const flowJobs = state?.flow_jobs
+	$: state = data.flowModuleStates?.[data.module.id]
+	$: flowJobs = state?.flow_jobs
 		? {
 				flowJobs: state?.flow_jobs,
 				selected: state?.selectedForloopIndex ?? -1,
@@ -50,12 +49,12 @@
 		mod={data.module}
 		insertable={data.insertable}
 		annotation={state?.flow_jobs
-			? 'ierations ' + state?.flow_jobs?.length + '/' + (state?.iteration_total ?? '?')
+			? 'Iterations ' + state?.flow_jobs?.length + '/' + (state?.iteration_total ?? '?')
 			: ''}
 		bgColor={getStateColor(type, darkMode)}
 		modules={data.modules ?? []}
 		moving={data.moving}
-		duration_ms={data.duration_ms}
+		duration_ms={state?.duration_ms}
 		retries={data.retries}
 		{flowJobs}
 		on:delete={(e) => {
@@ -74,7 +73,7 @@
 			data.eventHandlers.select(e.detail)
 		}}
 		on:selectedIteration={(e) => {
-			data.eventHandlers.selectIteration(e.detail, data.module.id)
+			data.eventHandlers.selectedIteration(e.detail, data.module.id)
 		}}
 	/>
 </NodeWrapper>