From 9430f3a5dfd53c857296c2d79cda1eb53915078e Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 23 Sep 2022 04:28:02 -0700
Subject: [PATCH] fix(frontend): loading flows with for loops +
 flowStatusViewer treat single jobs properly

---
 .../lib/components/FlowStatusViewer.svelte    | 21 +++--
 .../lib/components/flows/FlowEditor.svelte    | 10 ++-
 .../lib/components/flows/flowStateUtils.ts    |  4 +-
 .../flows/map/FlowModuleSchemaMap.svelte      | 12 +--
 frontend/src/routes/run/[...run].svelte       | 86 ++++++++++---------
 5 files changed, 74 insertions(+), 59 deletions(-)

diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index b6a47e6fdf..9806df468e 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -23,6 +23,8 @@
 	let forloop_selected = ''
 	let timeout: NodeJS.Timeout
 
+	$: innerModules = jobResult.job?.flow_status?.modules ?? []
+
 	async function loadJobInProgress() {
 		const job = await JobService.getJob({
 			workspace: $workspaceStore ?? '',
@@ -57,7 +59,9 @@
 
 {#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">Flow result</h3>
+		{#if innerModules.length > 0}
+			<h3 class="text-md leading-6 font-bold text-gray-900 border-b pb-2">Flow result</h3>
+		{/if}
 		<FlowPreviewStatus job={jobResult.job} />
 		{#if `result` in jobResult.job}
 			<FlowJobResult job={jobResult.job} />
@@ -95,17 +99,22 @@
 					<svelte:self jobId={loopJobId} bind:jobResult={jobResult.loopJobs[j]} />
 				</div>
 			{/each}
-		{:else if Array.isArray(jobResult.innerJobs)}
+		{:else if innerModules.length > 0}
 			<ul class="w-full">
 				<h3 class="text-md leading-6 font-bold text-gray-900 border-b mb-4 py-2">
-					Detailed results
+					Step-by-step results
 				</h3>
 
-				{#each jobResult.job?.flow_status?.modules ?? [] as mod, i}
-					<p class="text-gray-500 mb-6 w-full ">
+				{#each innerModules as mod, i}
+					<p class="text-gray-500 mb-2 w-full ">
 						Step
 						<span class="font-medium text-gray-900"> {i + 1} </span> out of
 						<span class="font-medium text-gray-900">{jobResult.job?.raw_flow?.modules.length}</span>
+						{#if jobResult.job.raw_flow?.modules[i]?.summary}
+							: <span class="font-medium text-gray-900"
+								>{jobResult.job.raw_flow?.modules[i]?.summary ?? ''}</span
+							>
+						{/if}
 					</p>
 
 					<li class="w-full border p-6 space-y-2">
@@ -127,5 +136,5 @@
 		{/if}
 	</div>
 {:else}
-	Job starting...
+	Job loading...
 {/if}
diff --git a/frontend/src/lib/components/flows/FlowEditor.svelte b/frontend/src/lib/components/flows/FlowEditor.svelte
index 186c8747b9..ca435f568f 100644
--- a/frontend/src/lib/components/flows/FlowEditor.svelte
+++ b/frontend/src/lib/components/flows/FlowEditor.svelte
@@ -14,10 +14,12 @@
 	<HSplitPane leftPaneSize="25%" rightPaneSize="75%" minLeftPaneSize="20%" minRightPaneSize="20%">
 		<left slot="left" class="h-full ">
 			<div class="h-full overflow-auto p-4 bg-gray-50">
-				<FlowModuleSchemaMap
-					bind:modules={$flowStore.value.modules}
-					bind:moduleStates={$flowStateStore.modules}
-				/>
+				{#if $flowStore.value.modules && $flowStateStore.modules}
+					<FlowModuleSchemaMap
+						bind:modules={$flowStore.value.modules}
+						bind:moduleStates={$flowStateStore.modules}
+					/>
+				{/if}
 			</div>
 		</left>
 		<right slot="right" class="h-full">
diff --git a/frontend/src/lib/components/flows/flowStateUtils.ts b/frontend/src/lib/components/flows/flowStateUtils.ts
index 36fe933255..1d8e010c6f 100644
--- a/frontend/src/lib/components/flows/flowStateUtils.ts
+++ b/frontend/src/lib/components/flows/flowStateUtils.ts
@@ -271,7 +271,7 @@ function extractPreviewResults(flowModuleSchemas: FlowModuleState[]) {
 
 export type JobResult = {
 	job?: Job
-	innerJobs?: JobResult[]
+	innerJobs: JobResult[]
 	loopJobs?: JobResult[]
 }
 
@@ -298,7 +298,7 @@ export function mapJobResultsToFlowState(
 			return flowState
 		})
 	} else {
-		if (!Array.isArray(jobs.innerJobs) || jobs.innerJobs.length === 0) {
+		if (jobs.innerJobs.length === 0) {
 			return
 		}
 
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index f58b613106..353b1966ec 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -91,11 +91,13 @@
 					<div class="line mr-2 w-8" />
 
 					<div class="w-full mb-2">
-						<svelte:self
-							prefix={String(index)}
-							moduleStates={moduleStates[index].childFlowModules}
-							modules={mod.value.modules}
-						/>
+						{#if moduleStates[index]?.childFlowModules}
+							<svelte:self
+								prefix={String(index)}
+								moduleStates={moduleStates[index].childFlowModules}
+								modules={mod.value.modules}
+							/>
+						{/if}
 					</div>
 				</div>
 
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index 6cd322b2ad..674fa23faf 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -396,54 +396,56 @@
 		</div>
 	</div>
 
-	<!-- Logs and outputs-->
-	<div class="mr-2 sm:mr-0 mt-12">
-		<div class="flex flex-col sm:flex-row text-base">
-			<button
-				class=" py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'result'
-					? 'text-gray-500'
-					: 'text-gray-700 font-semibold  '}"
-				on:click={() => (viewTab = 'result')}
-			>
-				Result <Tooltip
-					>What is returned by the <span class="font-mono">main</span> function of the script. Dictionary
-					of columns are rendered as a table</Tooltip
-				>
-			</button>
-			<button
-				class="py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'logs'
-					? 'text-gray-500'
-					: 'text-gray-700 font-semibold  '}"
-				on:click={() => (viewTab = 'logs')}
-			>
-				Logs
-			</button>
-			{#if job && 'raw_code' in job && job.raw_code}
+	{#if job?.job_kind != 'flow' && job?.job_kind != 'flowpreview'}
+		<!-- Logs and outputs-->
+		<div class="mr-2 sm:mr-0 mt-12">
+			<div class="flex flex-col sm:flex-row text-base">
 				<button
-					class="py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'code'
+					class=" py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'result'
 						? 'text-gray-500'
 						: 'text-gray-700 font-semibold  '}"
-					on:click={() => (viewTab = 'code')}
+					on:click={() => (viewTab = 'result')}
 				>
-					{job.job_kind == 'dependencies' ? 'Input Dependencies' : 'Code previewed'}
+					Result <Tooltip
+						>What is returned by the <span class="font-mono">main</span> function of the script. Dictionary
+						of columns are rendered as a table</Tooltip
+					>
 				</button>
-			{/if}
-		</div>
-		<div class="flex flex-row border rounded-md p-3">
-			<pre
-				class="text-xs overflow-auto max-h-96 w-full p-3">{#if viewTab == 'logs'}{#if job && 'logs' in job && job.logs}{job.logs}
-					{:else if job}No logs are available yet
-					{:else}Loading...{/if}
-				{:else if viewTab == 'code'}
-					{#if job && 'raw_code' in job && job.raw_code}
-						<HighlightCode language={job.language} code={job.raw_code} />
-					{:else if job}No code is available
-					{:else}Loading...{/if}
-				{:else if job && 'result' in job && job.result}<DisplayResult result={job.result} />
-				{:else if job}No output is available yet
-				{:else}Loading...
+				<button
+					class="py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'logs'
+						? 'text-gray-500'
+						: 'text-gray-700 font-semibold  '}"
+					on:click={() => (viewTab = 'logs')}
+				>
+					Logs
+				</button>
+				{#if job && 'raw_code' in job && job.raw_code}
+					<button
+						class="py-1 px-6 block border-gray-200 hover:bg-gray-50  {viewTab != 'code'
+							? 'text-gray-500'
+							: 'text-gray-700 font-semibold  '}"
+						on:click={() => (viewTab = 'code')}
+					>
+						{job.job_kind == 'dependencies' ? 'Input Dependencies' : 'Code previewed'}
+					</button>
 				{/if}
+			</div>
+			<div class="flex flex-row border rounded-md p-3">
+				<pre
+					class="text-xs overflow-auto max-h-96 w-full p-3">{#if viewTab == 'logs'}{#if job && 'logs' in job && job.logs}{job.logs}
+						{:else if job}No logs are available yet
+						{:else}Loading...{/if}
+					{:else if viewTab == 'code'}
+						{#if job && 'raw_code' in job && job.raw_code}
+							<HighlightCode language={job.language} code={job.raw_code} />
+						{:else if job}No code is available
+						{:else}Loading...{/if}
+					{:else if job && 'result' in job && job.result}<DisplayResult result={job.result} />
+					{:else if job}No output is available yet
+					{:else}Loading...
+					{/if}
 			</pre>
+			</div>
 		</div>
-	</div>
+	{/if}
 </CenteredPage>