feat: test an iteration

frontend/src/lib/components/FlowLoopIterationPreview.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { Job, JobService, type FlowModule, type RestartedFrom } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { Button, Kbd } from './common'
+	import { createEventDispatcher, getContext } from 'svelte'
+	import type { FlowEditorContext } from './flows/types'
+	import { runFlowPreview } from './flows/utils'
+	import SchemaForm from './SchemaForm.svelte'
+	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
+	import FlowProgressBar from './flows/FlowProgressBar.svelte'
+	import { Play, RefreshCw, X } from 'lucide-svelte'
+	import { getModifierKey } from '$lib/utils'
+	import type { Schema } from '$lib/common'
+
+	export let open: boolean
+
+	export let jobId: string | undefined = undefined
+	export let job: Job | undefined = undefined
+	export let modules: FlowModule[]
+	export let previewArgs: Record<string, any> = {}
+
+	const schema: Schema = {
+		$schema: 'https://json-schema.org/draft/2020-12/schema' as string | undefined,
+		properties: {
+			iter: {
+				type: 'object',
+				properties: {
+					index: {
+						type: 'number'
+					},
+					value: {
+						type: 'object'
+					}
+				}
+			}
+		},
+		required: [],
+		type: 'object'
+	}
+
+	let selectedJobStep: string | undefined = undefined
+
+	let isRunning: boolean = false
+	let jobProgressReset: () => void
+
+	export function test() {
+		runPreview(previewArgs, undefined)
+	}
+
+	const { flowStateStore, pathStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const dispatch = createEventDispatcher()
+
+	export async function runPreview(
+		args: Record<string, any>,
+		restartedFrom: RestartedFrom | undefined
+	) {
+		jobProgressReset()
+		const newFlow = { value: { modules }, summary: '' }
+		jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom)
+		isRunning = true
+	}
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (open) {
+			switch (event.key) {
+				case 'Enter':
+					if (event.ctrlKey || event.metaKey) {
+						event.preventDefault()
+						runPreview(previewArgs, undefined)
+					}
+					break
+			}
+		}
+	}
+
+	$: if (job?.type === 'CompletedJob') {
+		isRunning = false
+	}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
+	<div class="flex flex-row justify-between w-full items-center gap-x-2">
+		<div class="w-8">
+			<Button
+				on:click={() => dispatch('close')}
+				startIcon={{ icon: X }}
+				iconOnly
+				size="sm"
+				color="light"
+				btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
+			/>
+		</div>
+
+		{#if isRunning}
+			<Button
+				color="red"
+				on:click={async () => {
+					isRunning = false
+					try {
+						jobId &&
+							(await JobService.cancelQueuedJob({
+								workspace: $workspaceStore ?? '',
+								id: jobId,
+								requestBody: {}
+							}))
+					} catch {}
+				}}
+				size="sm"
+				btnClasses="w-full max-w-lg"
+				loading={true}
+				clickableWhileLoading
+			>
+				Cancel
+			</Button>
+		{:else}
+			<Button
+				variant="contained"
+				startIcon={{ icon: isRunning ? RefreshCw : Play }}
+				color="dark"
+				size="sm"
+				btnClasses="w-full max-w-lg"
+				on:click={() => runPreview(previewArgs, undefined)}
+				id="flow-editor-test-flow-drawer"
+			>
+				Test iteration &nbsp;<Kbd small isModifier>{getModifierKey()}</Kbd>
+				<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
+			</Button>
+		{/if}
+		<div />
+	</div>
+	<div class="w-full flex flex-col gap-y-1">
+		<FlowProgressBar {job} bind:reset={jobProgressReset} />
+	</div>
+	<div class="overflow-y-auto grow pr-4">
+		<div class="max-h-1/2 overflow-auto border-b">
+			<SchemaForm
+				noVariablePicker
+				compact
+				class="py-4 max-w-3xl"
+				{schema}
+				bind:args={previewArgs}
+			/>
+		</div>
+		<div class="pt-4 grow">
+			{#if jobId}
+				<FlowStatusViewer
+					{flowStateStore}
+					{jobId}
+					on:jobsLoaded={({ detail }) => {
+						job = detail
+					}}
+					bind:selectedJobStep
+				/>
+			{:else}
+				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/components/flows/content/FlowLoop.svelte

@@ -9,13 +9,16 @@
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
-	import { Button, Tab, TabContent, Tabs } from '$lib/components/common'
+	import { Button, Drawer, Tab, TabContent, Tabs } from '$lib/components/common'
 	import type { FlowModule } from '$lib/gen/models/FlowModule'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { getStepPropPicker } from '../previousResults'
 
 	import FlowModuleSleep from './FlowModuleSleep.svelte'
 	import FlowModuleMock from './FlowModuleMock.svelte'
+	import { Play } from 'lucide-svelte'
+	import type { Job } from '$lib/gen'
+	import FlowLoopIterationPreview from '$lib/components/FlowLoopIterationPreview.svelte'
 
 	const { previewArgs, flowStateStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -37,8 +40,27 @@
 		$previewArgs,
 		false
 	)
+
+	let previewOpen = false
+	let jobId: string | undefined = undefined
+	let job: Job | undefined = undefined
+
+	$: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {}
 </script>
 
+<Drawer bind:open={previewOpen} alwaysOpen size="75%">
+	<FlowLoopIterationPreview
+		modules={mod.value.type == 'forloopflow' ? mod.value.modules : []}
+		open={previewOpen}
+		previewArgs={previewIterationArgs}
+		bind:job
+		bind:jobId
+		on:close={() => {
+			previewOpen = false
+		}}
+	/>
+</Drawer>
+
 <div class="h-full flex flex-col">
 	<FlowCard {noEditor} title="For loop">
 		<div slot="header" class="grow">
@@ -116,6 +138,11 @@
 						/>
 					{/if}
 				{/if}
+				<div class="flex mt-4">
+					<Button on:click={() => (previewOpen = true)} startIcon={{ icon: Play }} color="dark"
+						>Test an iteration</Button
+					>
+				</div>
 			</Pane>
 			<Pane size={40} minSize={20} class="flex flex-col flex-1">
 				<Tabs bind:selected>