fix(front): Simplfiy how the job's results are read (#483)

* fix(front): Simplfiy how the job's results are read

* fix(front): Remove useless store and compute flow state directly

* fix(front): Clear timeout + remove useless reactive statements + correctly handle prop changes

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -1,23 +1,20 @@
 <script lang="ts">
-	import { scriptPathToHref } from '$lib/utils'
-
-	import { Job, JobService } from '$lib/gen'
-	import { arePreviewsReady, workspaceStore } from '$lib/stores'
+	import { JobService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
 	import FlowJobResult from './FlowJobResult.svelte'
-	import IconedPath from './IconedPath.svelte'
 	import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte'
 	import { Button } from 'flowbite-svelte'
 	import Icon from 'svelte-awesome'
 	import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-	import ProgressBar from './ProgressBar.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import type { JobResult } from './flows/flowStateUtils'
+	import { onDestroy } from 'svelte'
+
 	const dispatch = createEventDispatcher()
 
 	export let jobId: string
 	export let root: boolean = false
 	export let forloopJobIds: string[] | undefined = undefined
-
 	export let jobResult: JobResult = {
 		job: undefined,
 		innerJobs: [],
@@ -25,23 +22,7 @@
 	}
 
 	let forloop_selected = ''
-	let isReadyIndex = $arePreviewsReady.push(false)
-
-	function shouldReset() {
-		if (jobId != lastJobid) {
-			lastJobid = jobId
-			jobResult = {
-				job: undefined,
-				innerJobs: [],
-				loopJobs: []
-			}
-			loadJobInProgress()
-		}
-	}
-
-	let lastJobid = jobId
-
-	$: jobId && shouldReset()
+	let timeout: NodeJS.Timeout
 
 	async function loadJobInProgress() {
 		const job = await JobService.getJob({
@@ -52,46 +33,44 @@
 		jobResult.job = job
 		jobResult = jobResult
 
-		if (job.type === 'CompletedJob') {
-			arePreviewsReady.update((isReady: boolean[]) => {
-				isReady[isReadyIndex - 1] = true
-				return isReady
-			})
-		} else {
-			setTimeout(() => loadJobInProgress(), 500)
+		if (job?.type !== 'CompletedJob') {
+			timeout = setTimeout(() => loadJobInProgress(), 500)
+		} else if (root) {
+			dispatch('jobsLoaded', jobResult)
 		}
 	}
 
-	$: {
-		if (root) {
-			if ($arePreviewsReady.every(Boolean) && !(hasModules && $arePreviewsReady.length === 1)) {
-				arePreviewsReady.update(() => [])
+	$: hasModules =
+		jobResult.job &&
+		Array.isArray(jobResult.job?.raw_flow?.modules) &&
+		jobResult.job?.raw_flow?.modules.length! > 1
 
-				dispatch('jobsLoaded', jobResult)
-			}
+	function updateJobId() {
+		if (jobId !== jobResult.job?.id) {
+			loadJobInProgress()
 		}
 	}
 
-	$: job = jobResult.job
-	$: innerJobs = jobResult.innerJobs
-	$: loopJobs = jobResult.loopJobs
-	$: hasModules = job && Array.isArray(job?.raw_flow?.modules) && job?.raw_flow?.modules.length! > 1
-	$: loadJobInProgress()
+	$: jobId && updateJobId()
+
+	onDestroy(() => {
+		timeout && clearTimeout(timeout)
+	})
 </script>
 
-{#if job}
+{#if jobResult.job}
 	<div class="flow-root w-full space-y-4">
 		<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Preview results</h3>
-		<FlowPreviewStatus {job} />
-		{#if `result` in job}
-			<FlowJobResult {job} />
-		{:else if job.logs}
+		<FlowPreviewStatus job={jobResult.job} />
+		{#if `result` in jobResult.job}
+			<FlowJobResult job={jobResult.job} />
+		{:else if jobResult.job.logs}
 			<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-				<pre class="w-full">{job.logs}</pre>
+				<pre class="w-full">{jobResult.job.logs}</pre>
 			</div>
 		{/if}
 
-		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(loopJobs)}
+		{#if Array.isArray(forloopJobIds) && forloopJobIds?.length > 0 && Array.isArray(jobResult.loopJobs)}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4">
 				Loop results ({forloopJobIds.length} items)
 			</h3>
@@ -116,27 +95,27 @@
 					/>
 				</Button>
 				<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
-					<svelte:self jobId={loopJobId} bind:jobResult={loopJobs[j]} />
+					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if hasModules && Array.isArray(innerJobs)}
+		{:else if hasModules && Array.isArray(jobResult.innerJobs)}
 			<ul class="w-full">
 				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
 					Detailed results
 				</h3>
 
-				{#each job?.flow_status?.modules ?? [] as module, i}
+				{#each jobResult.job?.flow_status?.modules ?? [] as module, i}
 					<p class="text-gray-500 mb-6 w-full ">
 						Step
 						<span class="font-medium text-gray-900"> {i + 1} </span> out of
-						<span class="font-medium text-gray-900">{job?.raw_flow?.modules.length}</span>
+						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
 					</p>
 
 					{#if ['InProgress', 'Success', 'Error'].includes(module.type)}
 						<li class="w-full border p-6 space-y-2">
 							<svelte:self
 								jobId={module.job}
-								bind:jobResult={innerJobs[i]}
+								bind:jobResult={jobResult.innerJobs[i]}
 								forloopJobIds={module.forloop_jobs}
 							/>
 						</li>

frontend/src/lib/stores.ts

@@ -51,5 +51,3 @@ export function clearStores(): void {
 	usersWorkspaceStore.set(undefined)
 	superadmin.set(undefined)
 }
-
-export const arePreviewsReady = writable<boolean[]>([])