fix: improve progress bar UX

frontend/src/lib/components/flows/FlowProgressBar.svelte

@@ -9,6 +9,7 @@
 	let subIndex: number | undefined = undefined
 	let subLength: number | undefined = undefined
 	let length = 1
+	let nextInProgress = false
 
 	$: if (job) updateJobProgress(job)
 
@@ -18,46 +19,49 @@
 			return
 		}
 
-		let maxDone = 0
 		let subStepIndex: undefined | number = undefined
 		let subStepLength: undefined | number = undefined
 		let newError: number | undefined = undefined
-		modules.forEach((module, i) => {
+		let newNextInProgress = false
+
+		let maxDone = job?.flow_status?.step ?? 0
+		if (modules.length > maxDone) {
+			const nextModule = modules[maxDone]
+			if (nextModule.type === FlowStatusModule.type.IN_PROGRESS) {
+				newNextInProgress = true
+			}
+		}
+
+		let module = modules[maxDone]
+		if (module) {
 			if (
 				module.type === FlowStatusModule.type.FAILURE ||
 				(module.type === FlowStatusModule.type.SUCCESS && job['success'] === false)
 			) {
-				newError = i
+				newError = maxDone
+				maxDone = maxDone + 1
 			}
+		}
 
-			let isDone = isJobStepDone(module.type)
-			if (isDone) {
-				maxDone = i + 1
-				return
+		// Loop is still iterating
+		if (module?.iterator) {
+			const stepIndex = module.iterator.index || 0
+			const stepLength = module.iterator.itered?.length || 0
+			if (module.iterator.index != undefined) {
+				subStepIndex = stepIndex
+				subStepLength = stepLength
 			}
+		} else if (module?.branchall) {
+			subStepIndex = module.branchall.branch
+			subStepLength = module.branchall.len
+		}
 
-			// Loop is still iterating
-			if (module.iterator) {
-				const stepIndex = module.iterator.index || 0
-				const stepLength = module.iterator.itered?.length || 0
-				if (module.iterator.index != undefined) {
-					subStepIndex = stepIndex
-					subStepLength = stepLength
-				}
-			} else if (module.branchall) {
-				subStepIndex = module.branchall.branch
-				subStepLength = module.branchall.len
-			}
-		})
 		error = newError
 		subLength = subStepLength ? Math.max(subStepLength, 1) : undefined
 		subIndex = subStepIndex
 		length = Math.max(modules.length, 1)
 		index = maxDone
-	}
-
-	function isJobStepDone(type: FlowStatusModule.type | undefined) {
-		return type === FlowStatusModule.type.SUCCESS || type === FlowStatusModule.type.FAILURE
+		nextInProgress = newNextInProgress
 	}
 
 	let resetP: any
@@ -72,4 +76,13 @@
 	}
 </script>
 
-<ProgressBar bind:resetP {length} {index} {subLength} {subIndex} {error} class={$$props.class} />
+<ProgressBar
+	bind:resetP
+	{length}
+	{index}
+	{nextInProgress}
+	{subLength}
+	{subIndex}
+	{error}
+	class={$$props.class}
+/>

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

@@ -161,7 +161,7 @@
 			nodes = layered.nodes
 			let hfull = Math.max(layered.height, minHeight)
 			fullWidth = layered.width
-			height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight - 100)
+			height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight * 1.5)
 
 			let useDataflow = dataflow && showDataflow
 			edges = useDataflow ? [] : createEdges(nodes)

frontend/src/lib/components/preview/FlowPreviewStatus.svelte

@@ -9,8 +9,8 @@
 	<JobStatus {job} />
 	{#if job}
 		<div
-			><div class="text-primary whitespace-nowrap truncate">
-				<span class="font-bold">Job Id</span>
+			><div class="text-primary whitespace-nowrap truncate text-sm">
+				<span class="font-semibold mr-1">Flow's job Id:</span>
 				<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
 					{job?.id}
 				</a>

frontend/src/lib/components/progressBar/ProgressBar.svelte

@@ -2,7 +2,7 @@
 	import { tweened } from 'svelte/motion'
 	import { linear } from 'svelte/easing'
 
-	export function getTween(initialValue = 0, duration = 200) {
+	function getTween(initialValue = 0, duration = 200) {
 		return tweened(initialValue, {
 			duration,
 			easing: linear
@@ -13,6 +13,7 @@
 	export let index: number
 	export let subIndex: number | undefined
 	export let subLength: number | undefined
+	export let nextInProgress: boolean = false
 
 	export let length: number
 	let duration = 200
@@ -48,7 +49,7 @@
 			: 'text-blue-700 dark:text-blue-200'}"
 	>
 		<span class="text-base">
-			{error
+			{error != undefined
 				? 'Error occured'
 				: finished
 				? 'Done'
@@ -70,13 +71,15 @@
 	<div class="flex w-full bg-gray-200 rounded-full h-4 overflow-hidden">
 		{#each new Array(length) as _, partIndex (partIndex)}
 			<div class="h-full relative border-white {partIndex === 0 ? '' : 'border-l'} w-full">
-				{#if partIndex < index - 1}
+				{#if partIndex == index && nextInProgress}
 					<div
-						class="absolute left-0 bottom-0 h-full w-full {error == partIndex
-							? 'bg-red-400'
-							: 'bg-blue-400'}"
+						class="absolute left-0 bottom-0 h-full bg-blue-400/50 animate-pulse"
+						style="width: 100%"
 					/>
-				{:else if partIndex == index - 1 || (partIndex == index && subIndex !== undefined)}
+				{/if}
+				{#if partIndex < index - 1}
+					<div class="absolute left-0 bottom-0 h-full w-full bg-blue-400" />
+				{:else if partIndex == index - 1 || (partIndex == index && subIndex !== undefined) || error == partIndex}
 					<div
 						class="absolute left-0 bottom-0 h-full {error == partIndex
 							? 'bg-red-400'