improve flow's UX

frontend/src/lib/components/FlowJobResult.svelte

@@ -4,17 +4,16 @@
 	import DisplayResult from './DisplayResult.svelte'
 	import LogViewer from './LogViewer.svelte'
 
-	export let job: CompletedJob | undefined
+	export let result: any
+	export let logs: string
 </script>
 
-{#if job}
-	<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
-		<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
-			<span class="text-gray-500">Result</span>
-			<DisplayResult result={job.result} />
-		</div>
-		<div class="overflow-auto max-h-80 h-full relative">
-			<LogViewer content={job.logs ?? ''} isLoading={false} />
-		</div>
+<div class="grid grid-cols-2 shadow border border-gray-800 h-full">
+	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+		<span class="text-gray-500">Result</span>
+		<DisplayResult {result} />
 	</div>
-{/if}
+	<div class="overflow-auto max-h-80 h-full relative">
+		<LogViewer content={logs ?? ''} isLoading={false} />
+	</div>
+</div>

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -9,6 +9,7 @@
 	import { onDestroy } from 'svelte'
 	import type { FlowState } from './flows/flowState'
 	import { Button } from './common'
+	import DisplayResult from './DisplayResult.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -23,9 +24,20 @@
 		| undefined = undefined
 	export let job: Job | undefined = undefined
 
+	let jobResults: any[] = []
+
 	let forloop_selected = ''
 	let timeout: NodeJS.Timeout
 
+	let lastSize = 0
+	$: {
+		let len = (flowJobIds?.flowJobs ?? []).length
+		if (len != lastSize) {
+			forloop_selected = flowJobIds?.flowJobs[len - 1] ?? ''
+			lastSize = len
+		}
+	}
+
 	$: innerModules =
 		job?.flow_status?.modules
 			.filter((x) => x.job != jobId)
@@ -64,6 +76,8 @@
 
 	$: jobId && updateJobId()
 
+	$: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs)
+
 	onDestroy(() => {
 		timeout && clearTimeout(timeout)
 	})
@@ -74,23 +88,30 @@
 		{#if innerModules.length > 0}
 			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
 		{/if}
-		<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
-			<FlowPreviewStatus {job} />
-			{#if `result` in job}
-				<div class="w-full h-ful">
-					<FlowJobResult {job} />
-				</div>
-			{:else if job.logs}
-				<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
-					<pre class="w-full">{job.logs}</pre>
-				</div>
-			{/if}
-		</div>
-		{#if flowJobIds && Array.isArray(flowJobIds?.flowJobs) && flowJobIds?.flowJobs.length > 0}
+		{#if isListJob}
+			<div class="w-full h-full border border-gray-600 bg-white p-1">
+				<DisplayResult result={jobResults} />
+			</div>
+		{:else}
+			<div class={innerModules.length > 0 ? 'border border-gray-400 shadow p-2' : ''}>
+				<FlowPreviewStatus {job} />
+				{#if `result` in job}
+					<div class="w-full h-full">
+						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
+					</div>
+				{:else if job.logs}
+					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+						<pre class="w-full">{job.logs}</pre>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if isListJob}
 			<h3 class="text-md leading-6 font-bold text-gray-600 border-b mb-4">
 				Embedded flows: ({flowJobIds?.flowJobs.length} items)
 			</h3>
-			{#each flowJobIds.flowJobs as loopJobId, j}
+			{#each flowJobIds?.flowJobs ?? [] as loopJobId, j}
 				<Button
 					variant={forloop_selected === loopJobId ? 'contained' : 'border'}
 					color={forloop_selected === loopJobId ? 'dark' : 'light'}
@@ -128,6 +149,7 @@
 									}
 									flowState[flowJobIds.moduleId].previewResult[j] = e.detail.result
 									flowState[flowJobIds.moduleId].previewArgs = e.detail.args
+									jobResults[j] = e.detail.result == null ? 'Job in progress ...' : e.detail.result
 								}
 							}
 						}}

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -84,7 +84,7 @@ export async function createLoop(id: string): Promise<[FlowModule, FlowModuleSta
 		value: {
 			type: 'forloopflow',
 			modules: [],
-			iterator: { type: 'javascript', expr: 'previous_result' },
+			iterator: { type: 'javascript', expr: '' },
 			skip_failures: true
 		}
 	}

frontend/src/lib/components/flows/previousResults.ts

@@ -112,12 +112,12 @@ export function getStepPropPicker(
 	}
 
 
-	let priorIds = Object.fromEntries(previousIds.map((id) => [id, flowState[id]?.previewResult ?? {}]))
+	let priorIds = Object.fromEntries(previousIds.map((id) => [id, flowState[id]?.previewResult ?? {}]).reverse())
 
 
 	const pickableProperties = {
 		flow_input: flowInput,
-		priorIds,
+		priorIds: priorIds,
 		previousId: previousIds[0]
 	}