Fix previous results in Flow preview (#332)

frontend/src/lib/components/FlowBuilder.svelte

@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { FlowService, ScheduleService, type Flow } from '$lib/gen'
-	import { clearPreviewResults, workspaceStore } from '$lib/stores'
+	import { clearPreviewResults, previewResults, workspaceStore } from '$lib/stores'
 	import {
 		encodeState,
 		formatCron,
@@ -18,7 +18,7 @@
 	import FlowEditor from './FlowEditor.svelte'
 	import FlowPreviewContent from './FlowPreviewContent.svelte'
 	import { flowStore, mode } from './flows/flowStore'
-	import { flowToMode } from './flows/utils'
+	import { flowToMode, jobsToResults } from './flows/utils'
 
 	import ScriptSchema from './ScriptSchema.svelte'
 
@@ -134,72 +134,70 @@
 
 <div class="flex flex-row w-full h-full justify-between">
 	<div class="flex flex-col max-w-screen-md mb-96 m-auto">
-		<div class="mx-4">
-			<!-- Nav between steps-->
-			<div class="justify-between flex flex-row w-full my-4">
-				<Breadcrumb>
-					<BreadcrumbItem>
-						<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
-							Flow Editor
-						</button>
-					</BreadcrumbItem>
-					<BreadcrumbItem>
-						<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
-							UI customisation
-						</button>
-					</BreadcrumbItem>
-				</Breadcrumb>
-				<div class="flex flex-row-reverse ml-2">
-					{#if step == 1}
-						<button
-							disabled={pathError != ''}
-							class="default-button px-6 max-h-8"
-							on:click={() => changeStep(2)}
-						>
-							Next
-						</button>
-						<button
-							disabled={pathError != ''}
-							class="default-button-secondary px-6 max-h-8 mr-2"
-							on:click={saveFlow}
-						>
-							Save
-						</button>
-					{:else}
-						<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
-					{/if}
-				</div>
-			</div>
-			<div class="flex flex-row-reverse">
-				<span class="my-1 text-sm text-gray-500 italic">
-					{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
-					{$flowStore?.path}
-				</span>
-			</div>
-
-			<!-- metadata -->
-
-			{#if $flowStore}
-				{#if step === 1}
-					<FlowEditor
-						bind:pathError
-						bind:initialPath
-						bind:scheduleEnabled
-						bind:scheduleCron
-						bind:scheduleArgs
-					/>
-				{:else if step === 2}
-					<ScriptSchema
-						synchronizedHeader={false}
-						bind:summary={$flowStore.summary}
-						bind:description={$flowStore.description}
-						bind:schema={$flowStore.schema}
-					/>
+		<!-- Nav between steps-->
+		<div class="justify-between flex flex-row w-full my-4">
+			<Breadcrumb>
+				<BreadcrumbItem>
+					<button on:click={() => changeStep(1)} class={step === 1 ? 'font-bold' : null}>
+						Flow Editor
+					</button>
+				</BreadcrumbItem>
+				<BreadcrumbItem>
+					<button on:click={() => changeStep(2)} class={step === 2 ? 'font-bold' : null}>
+						UI customisation
+					</button>
+				</BreadcrumbItem>
+			</Breadcrumb>
+			<div class="flex flex-row-reverse ml-2">
+				{#if step == 1}
+					<button
+						disabled={pathError != ''}
+						class="default-button px-6 max-h-8"
+						on:click={() => changeStep(2)}
+					>
+						Next
+					</button>
+					<button
+						disabled={pathError != ''}
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={saveFlow}
+					>
+						Save
+					</button>
+				{:else}
+					<button class="default-button px-6 self-end" on:click={saveFlow}>Save</button>
 				{/if}
-			{:else}
-				<p>Loading</p>
-			{/if}
+			</div>
 		</div>
+		<div class="flex flex-row-reverse">
+			<span class="my-1 text-sm text-gray-500 italic">
+				{#if initialPath && initialPath != $flowStore?.path} {initialPath} &rightarrow; {/if}
+				{$flowStore?.path}
+			</span>
+		</div>
+
+		<!-- metadata -->
+
+		{#if $flowStore}
+			{#if step === 1}
+				<FlowEditor
+					bind:pathError
+					bind:initialPath
+					bind:scheduleEnabled
+					bind:scheduleCron
+					bind:scheduleArgs
+				/>
+			{:else if step === 2}
+				<ScriptSchema
+					synchronizedHeader={false}
+					bind:summary={$flowStore.summary}
+					bind:description={$flowStore.description}
+					bind:schema={$flowStore.schema}
+				/>
+			{/if}
+		{:else}
+			<p>Loading</p>
+		{/if}
 	</div>
 
 	<Button
@@ -219,6 +217,9 @@
 					flow={$flowStore}
 					bind:args={scheduleArgs}
 					on:close={() => (previewOpen = !previewOpen)}
+					on:change={(e) => {
+						previewResults.set(jobsToResults(e.detail))
+					}}
 				/>
 			</div>
 		</div>

frontend/src/lib/components/ModuleStep.svelte

@@ -19,7 +19,7 @@
 		schemasStore,
 		type FlowMode
 	} from './flows/flowStore'
-	import { getPickableProperties } from './flows/utils'
+	import { getPickableProperties, jobsToResults } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
 	import Tooltip from './Tooltip.svelte'
 
@@ -43,16 +43,6 @@
 		i === 0 ? schemaToTsType($flowStore?.schema) : objectToTsType($previewResults[i])
 	)
 
-	function toResults(jobs: any) {
-		return jobs.map((job) => {
-			if (job.result) {
-				return job.result
-			} else if (Array.isArray(job)) {
-				return toResults(job)
-			}
-		})
-	}
-
 	const isTrigger = mode === 'pull' && i === 0
 </script>
 
@@ -157,7 +147,7 @@
 						{mode}
 						schemas={$schemasStore}
 						on:change={(e) => {
-							previewResults.set(toResults(e.detail))
+							previewResults.set(jobsToResults(e.detail))
 						}}
 					/>
 				</div>

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

@@ -71,6 +71,7 @@ export const isCopyFirstStepSchemaDisabled = derived(flowStore, (flow: Flow | un
 	if (flow) {
 		const modules = flow.value.modules
 		const [firstModule] = modules
+
 		return (
 			modules.length === 0 || (firstModule.value.type === 'script' && firstModule.value.path === '')
 		)

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

@@ -1,5 +1,5 @@
 import type { Schema } from '$lib/common'
-import type { Flow, FlowModule, FlowModuleValue, InputTransform, RawScript } from '$lib/gen'
+import type { Flow, FlowModule, FlowModuleValue, InputTransform, Job, RawScript } from '$lib/gen'
 import { inferArgs } from '$lib/infer'
 import { loadSchema } from '$lib/scripts'
 import { emptySchema, getScriptByPath, schemaToObject } from '$lib/utils'
@@ -208,3 +208,13 @@ export function getPickableProperties(
 
 	return pickableProperties
 }
+
+export function jobsToResults(jobs: Job[]) {
+	return jobs.map((job) => {
+		if ('result' in job) {
+			return job.result
+		} else if (Array.isArray(job)) {
+			return jobsToResults(job)
+		}
+	})
+}