From 7a379da666331c50ecfeef9be46d250bb7df389f Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 9 Aug 2024 08:25:08 +0200
Subject: [PATCH] feat(frontend): flow status viewer

---
 .../components/FlowStatusViewerInner.svelte   | 10 +--
 .../lib/components/graph/FlowGraphV2.svelte   | 72 ++++---------------
 .../graph/renderers/nodes/ModuleNode.svelte   | 10 ++-
 3 files changed, 26 insertions(+), 66 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 1b4f87479d..df056cd613 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -16,12 +16,7 @@
 	import { Badge, Button, Tab } from './common'
 	import DisplayResult from './DisplayResult.svelte'
 	import Tabs from './common/tabs/Tabs.svelte'
-	import {
-		FlowGraph,
-		type DurationStatus,
-		type FlowStatusViewerContext,
-		type GraphModuleState
-	} from './graph'
+	import { type DurationStatus, type FlowStatusViewerContext, type GraphModuleState } from './graph'
 	import ModuleStatus from './ModuleStatus.svelte'
 	import { emptyString, msToSec, truncateRev } from '$lib/utils'
 	import JobArgs from './JobArgs.svelte'
@@ -33,6 +28,7 @@
 	import { writable, type Writable } from 'svelte/store'
 	import Alert from './common/alert/Alert.svelte'
 	import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
+	import FlowGraphV2 from './graph/FlowGraphV2.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -914,7 +910,7 @@
 							{/each}
 						</div>
 
-						<FlowGraph
+						<FlowGraphV2
 							download
 							success={jobId != undefined && isSuccess(job?.['success'])}
 							flowModuleStates={$localModuleStates}
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 593060db3f..7db727d64a 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -64,7 +64,7 @@
 	let fullWidth = 0
 	let width = 0
 
-	function layoutNodes(nodes: Node[], edges: Edge[]): { nodes: Node[]; edges: Edge[] } {
+	function layoutNodes(nodes: Node[]): Node[] {
 		let seenId: string[] = []
 		for (const n of nodes) {
 			if (seenId.includes(n.id)) {
@@ -100,7 +100,9 @@
 			id: des.data.id,
 			position: {
 				x: des.x
-					? (des.data.data.offset ?? 0) +
+					? // @ts-ignore
+					  (des.data.data.offset ?? 0) +
+					  // @ts-ignore
 					  des.x +
 					  (fullSize ? fullWidth : width) / 2 -
 					  boxSize.width / 2 -
@@ -110,17 +112,15 @@
 			}
 		}))
 
-		return {
-			nodes: newNodes,
-			edges
-		}
+		return newNodes
 	}
 
-	const { nodes: initialNodes, edges: initialEdges } = graphBuilder(
+	$: graph = graphBuilder(
 		modules,
 		{
 			disableAi,
-			insertable
+			insertable,
+			flowModuleStates
 		},
 		failureModule,
 		{
@@ -155,64 +155,20 @@
 			}
 		}
 	)
-	const { nodes: layoutedNodes, edges: layoutedEdges } = layoutNodes(initialNodes, initialEdges)
 
-	const nodes = writable<Node[]>(layoutedNodes)
-	const edges = writable<Edge[]>(layoutedEdges)
-
-	let renderCount: number = 0
+	const nodes = writable<Node[]>([])
+	const edges = writable<Edge[]>([])
 
 	function updateStores() {
-		const { nodes: initialNodes, edges: initialEdges } = graphBuilder(
-			modules,
-			{
-				disableAi,
-				insertable
-			},
-			failureModule,
-			{
-				deleteBranch: (detail, label) => {
-					$selectedId = label
-					dispatch('deleteBranch', detail)
-				},
-				insert: (detail) => {
-					dispatch('insert', detail)
-				},
-				select: (mod) => {
-					if (!notSelectable) {
-						if ($selectedId != mod.id) {
-							$selectedId = mod.id
-						}
-						dispatch('select', mod)
-					}
-				},
-				delete: (detail, label) => {
-					$selectedId = label
-
-					dispatch('delete', detail)
-				},
-				newBranch: (detail, label) => {
-					dispatch('newBranch', detail)
-				},
-				move: (module, modules) => {
-					dispatch('move', { module, modules })
-				},
-				selectIteration: (detail, moduleId) => {
-					dispatch('selectIteration', { ...detail, moduleId: moduleId })
-				}
-			}
-		)
-		const { nodes: layoutedNodes, edges: layoutedEdges } = layoutNodes(initialNodes, initialEdges)
-
-		$nodes = layoutedNodes
-		$edges = layoutedEdges
+		$nodes = layoutNodes(graph?.nodes)
+		$edges = graph.edges
 
 		renderCount++
 	}
 
-	$: console.log('rebuildOnChange', rebuildOnChange)
+	$: graph && updateStores()
 
-	$: rebuildOnChange && updateStores()
+	let renderCount: number = 0
 
 	const nodeTypes = {
 		input2: InputNode,
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index f0afefd406..d9d8dd0b30 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -7,6 +7,8 @@
 	import { createEventDispatcher } from 'svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { GraphEventHandlers } from '../../graphBuilder'
+	import type { GraphModuleState } from '../../model'
+	import { getStateColor } from '../../util'
 
 	export let data: {
 		offset: number
@@ -28,12 +30,18 @@
 			| { flowJobs: string[]; selected: number; flowJobsSuccess: (boolean | undefined)[] }
 			| undefined
 		eventHandlers: GraphEventHandlers
+		flowModuleStates: Record<string, GraphModuleState> | undefined
 	}
 
 	$: idx = data.modules?.findIndex((m) => m.id === data.module.id)
 
 	const dispatch = createEventDispatcher()
 	let openMenu: boolean | undefined = undefined
+
+	let type = data.flowModuleStates?.[data.module.id]?.type
+	if (!type && data.flowJobs) {
+		type = 'InProgress'
+	}
 </script>
 
 <NodeWrapper offset={data.offset} let:darkMode>
@@ -44,7 +52,7 @@
 		insertableEnd={data.insertableEnd}
 		annotation={data.annotation}
 		branchable={data.branchable}
-		bgColor={darkMode ? '#2e3440' : '#dfe6ee'}
+		bgColor={getStateColor(type, darkMode)}
 		modules={data.modules ?? []}
 		moving={data.moving}
 		duration_ms={data.duration_ms}