windmill-components 1.503.3 → 1.503.4

package/package/components/FlowPreviewContent.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { JobService } from '../gen';
+<script lang="ts">import { run, stopPropagation } from 'svelte/legacy';
+import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Badge, Button } from './common';
 import Popover from './meltComponents/Popover.svelte';
@@ -20,36 +21,26 @@ import { writable } from 'svelte/store';
 import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { stateSnapshot } from '../svelte5Utils.svelte';
-export let previewMode;
-export let open;
-export let preventEscape = false;
-export let jobId = undefined;
-export let job = undefined;
-export let selectedJobStep = undefined;
-export let selectedJobStepIsTopLevel = undefined;
-export let selectedJobStepType = 'single';
-export let rightColumnSelect = 'timeline';
-export let branchOrIterationN = 0;
-export let scrollTop = 0;
-export let localModuleStates = writable({});
-export let localDurationStatuses = writable({});
+let { previewMode = $bindable(), open, preventEscape = $bindable(false), jobId = $bindable(undefined), job = $bindable(undefined), initial = $bindable(false), selectedJobStep = $bindable(undefined), selectedJobStepIsTopLevel = $bindable(undefined), selectedJobStepType = $bindable('single'), rightColumnSelect = $bindable('timeline'), branchOrIterationN = $bindable(0), scrollTop = $bindable(0), localModuleStates = $bindable(writable({})), localDurationStatuses = $bindable(writable({})), onRunPreview, render = false, onJobDone, upToId = undefined } = $props();
 let restartBranchNames = [];
-let isRunning = false;
-let jobProgressReset;
-let jsonView = false;
-let jsonEditor;
-let schemaHeight = 0;
-let isValid = true;
+let isRunning = $state(false);
+let jsonView = $state(false);
+let jsonEditor = $state(undefined);
+let schemaHeight = $state(0);
+let isValid = $state(true);
+let suspendStatus = $state(writable({}));
+let isOwner = $state(false);
 export function test() {
     renderCount++;
     runPreview(previewArgs.val, undefined);
 }
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPathStore, fakeInitialPath, customUi, executionCount } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPathStore, fakeInitialPath, customUi, executionCount } = $state(getContext('FlowEditorContext'));
 const dispatch = createEventDispatcher();
+let renderCount = $state(0);
+let schemaFormWithArgPicker = $state(undefined);
+let currentJobId = $state(undefined);
 let stepHistoryLoader = getStepHistoryLoaderContext();
-let renderCount = 0;
-let schemaFormWithArgPicker = undefined;
-let currentJobId = undefined;
+let flowProgressBar = $state(undefined);
 function extractFlow(previewMode) {
     const previewFlow = aiChatManager.flowAiChatHelpers?.getPreviewFlow();
     if (previewMode === 'whole') {
@@ -58,21 +49,21 @@ function extractFlow(previewMode) {
     else {
         const flow = previewFlow ?? stateSnapshot(flowStore).val;
         const idOrders = dfs(flow.value.modules, (x) => x.id);
-        let upToIndex = idOrders.indexOf($selectedId);
+        let upToIndex = idOrders.indexOf(upToId ?? $selectedId);
         if (upToIndex != -1) {
             flow.value.modules = sliceModules(flow.value.modules, upToIndex, idOrders);
         }
         return flow;
     }
 }
-let lastPreviewFlow = undefined;
+let lastPreviewFlow = $state(undefined);
 export async function runPreview(args, restartedFrom) {
     if (stepHistoryLoader?.flowJobInitial) {
         stepHistoryLoader?.setFlowJobInitial(false);
     }
     try {
         lastPreviewFlow = JSON.stringify(flowStore.val);
-        jobProgressReset();
+        flowProgressBar?.reset();
         const newFlow = extractFlow(previewMode);
         jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
         isRunning = true;
@@ -80,6 +71,7 @@ export async function runPreview(args, restartedFrom) {
             savedArgs = previewArgs.val;
             inputSelected = undefined;
         }
+        onRunPreview?.();
     }
     catch (e) {
         sendUserToast('Could not run preview', true, undefined, e.toString());
@@ -129,8 +121,8 @@ function onSelectedJobStepChange() {
         }
     }
 }
-let savedArgs = previewArgs.val;
-let inputSelected = undefined;
+let savedArgs = $state(previewArgs.val);
+let inputSelected = $state(undefined);
 async function selectInput(input, type) {
     if (!input) {
         previewArgs.val = savedArgs;
@@ -149,293 +141,327 @@ async function selectInput(input, type) {
 export function refresh() {
     renderCount++;
 }
-$: if (job?.type === 'CompletedJob') {
-    isRunning = false;
-}
-$: selectedJobStep !== undefined && onSelectedJobStepChange();
 let scrollableDiv = undefined;
 function handleScroll() {
     scrollTop = scrollableDiv?.scrollTop ?? 0;
 }
-$: scrollableDiv && onScrollableDivChange();
 function onScrollableDivChange() {
     if (scrollTop != 0 && scrollableDiv) {
         scrollableDiv.scrollTop = scrollTop;
     }
 }
+run(() => {
+    selectedJobStep !== undefined && onSelectedJobStepChange();
+});
+run(() => {
+    scrollableDiv && onScrollableDivChange();
+});
+export async function cancelTest() {
+    isRunning = false;
+    try {
+        jobId &&
+            (await JobService.cancelQueuedJob({
+                workspace: $workspaceStore ?? '',
+                id: jobId,
+                requestBody: {}
+            }));
+    }
+    catch { }
+}
+export function getLocalModuleStates() {
+    return localModuleStates;
+}
+export function getLocalDurationStatuses() {
+    return localDurationStatuses;
+}
+export function getSuspendStatus() {
+    return suspendStatus;
+}
+export function getIsRunning() {
+    return isRunning;
+}
+export function getIsOwner() {
+    return isOwner;
+}
+export function getJob() {
+    return job;
+}
+export function flowHasChanged() {
+    return !!lastPreviewFlow && JSON.stringify(flowStore.val) != lastPreviewFlow;
+}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <div class="flex flex-col space-y-2 h-screen bg-surface px-4 py-2 w-full" id="flow-preview-content">
-	<div class="flex flex-row 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}
-			<div class="mx-auto">
+	{#if render}
+		<div class="flex flex-row w-full items-center gap-x-2">
+			<div class="w-8">
 				<Button
-					color="red"
-					on:click={async () => {
-						isRunning = false
-						try {
-							jobId &&
-								(await JobService.cancelQueuedJob({
-									workspace: $workspaceStore ?? '',
-									id: jobId,
-									requestBody: {}
-								}))
-						} catch {}
-					}}
+					on:click={() => dispatch('close')}
+					startIcon={{ icon: X }}
+					iconOnly
 					size="sm"
-					btnClasses="w-full max-w-lg"
-					loading={true}
-					clickableWhileLoading
-				>
-					Cancel
-				</Button>
+					color="light"
+					btnClasses="hover:bg-surface-hover  bg-surface-secondaryw-8 h-8 rounded-full p-0"
+				/>
 			</div>
-		{:else}
-			<div class="grow justify-center flex flex-row gap-4">
-				{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel && aiChatManager.flowAiChatHelpers?.getModuleAction(selectedJobStep) !== 'removed'}
-					{#if selectedJobStepType == 'single'}
-						<Button
-							size="xs"
-							color="light"
-							variant="border"
-							title={`Re-start this flow from step ${selectedJobStep} (included).`}
-							on:click={() => {
-								runPreview(previewArgs.val, {
-									flow_job_id: jobId,
-									step_id: selectedJobStep,
-									branch_or_iteration_n: 0
-								})
-							}}
-							startIcon={{ icon: Play }}
-						>
-							Re-start from
-							<Badge baseClass="ml-1" color="indigo">
-								{selectedJobStep}
-							</Badge>
-						</Button>
-					{:else}
-						<Popover
-							floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
-							contentClasses="p-4"
-						>
-							<svelte:fragment slot="button">
-								<Button
-									title={`Re-start this flow from step ${selectedJobStep} (included).`}
-									variant="border"
-									color="blue"
-									startIcon={{ icon: RefreshCw }}
-									on:click={() => {
-										runPreview(previewArgs.val, {
-											flow_job_id: jobId,
-											step_id: selectedJobStep,
-											branch_or_iteration_n: 0
-										})
-									}}
-									nonCaptureEvent={true}
-								>
-									Re-start from
-									<Badge baseClass="ml-1" color="indigo">
-										{selectedJobStep}
-									</Badge>
-								</Button>
-							</svelte:fragment>
-							<svelte:fragment slot="content">
-								<label class="block text-primary p-4">
-									<div class="pb-1 text-sm text-secondary"
-										>{selectedJobStepType == 'forloop' ? 'From iteration #:' : 'From branch:'}</div
+
+			{#if isRunning}
+				<div class="mx-auto">
+					<Button
+						color="red"
+						on:click={async () => {
+							cancelTest()
+						}}
+						size="sm"
+						btnClasses="w-full max-w-lg"
+						loading={true}
+						clickableWhileLoading
+					>
+						Cancel
+					</Button>
+				</div>
+			{:else}
+				<div class="grow justify-center flex flex-row gap-4">
+					{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel && aiChatManager.flowAiChatHelpers?.getModuleAction(selectedJobStep) !== 'removed'}
+						{#if selectedJobStepType == 'single'}
+							<Button
+								size="xs"
+								color="light"
+								variant="border"
+								title={`Re-start this flow from step ${selectedJobStep} (included).`}
+								on:click={() => {
+									runPreview(previewArgs.val, {
+										flow_job_id: jobId,
+										step_id: selectedJobStep,
+										branch_or_iteration_n: 0
+									})
+								}}
+								startIcon={{ icon: Play }}
+							>
+								Re-start from
+								<Badge baseClass="ml-1" color="indigo">
+									{selectedJobStep}
+								</Badge>
+							</Button>
+						{:else}
+							<Popover
+								floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
+								contentClasses="p-4"
+							>
+								{#snippet button()}
+									<Button
+										title={`Re-start this flow from step ${selectedJobStep} (included).`}
+										variant="border"
+										color="blue"
+										startIcon={{ icon: RefreshCw }}
+										on:click={() => {
+											runPreview(previewArgs.val, {
+												flow_job_id: jobId,
+												step_id: selectedJobStep,
+												branch_or_iteration_n: 0
+											})
+										}}
+										nonCaptureEvent={true}
 									>
-									<div class="flex w-full">
-										{#if selectedJobStepType === 'forloop'}
-											<input
-												type="number"
-												min="0"
-												bind:value={branchOrIterationN}
-												class="!w-32 grow"
-												on:click|stopPropagation={() => {}}
-											/>
-										{:else}
-											<select
-												bind:value={branchOrIterationN}
-												class="!w-32 grow"
-												on:click|stopPropagation={() => {}}
-											>
-												{#each restartBranchNames as [branchIdx, branchName]}
-													<option value={branchIdx}>{branchName}</option>
-												{/each}
-											</select>
-										{/if}
-										<Button
-											size="xs"
-											color="blue"
-											buttonType="button"
-											btnClasses="!p-1 !w-[34px] !ml-1"
-											aria-label="Restart flow"
-											on:click|once={() => {
-												runPreview(previewArgs.val, {
-													flow_job_id: jobId,
-													step_id: selectedJobStep,
-													branch_or_iteration_n: branchOrIterationN
-												})
-											}}
+										Re-start from
+										<Badge baseClass="ml-1" color="indigo">
+											{selectedJobStep}
+										</Badge>
+									</Button>
+								{/snippet}
+								{#snippet content()}
+									<label class="block text-primary p-4">
+										<div class="pb-1 text-sm text-secondary"
+											>{selectedJobStepType == 'forloop'
+												? 'From iteration #:'
+												: 'From branch:'}</div
 										>
-											<ArrowRight size={18} />
-										</Button>
-									</div>
-								</label>
-							</svelte:fragment>
-						</Popover>
-					{/if}
-				{/if}
-				<Button
-					variant="contained"
-					startIcon={{ icon: isRunning ? RefreshCw : Play }}
-					color="dark"
-					size="sm"
-					btnClasses="w-full max-w-lg"
-					on:click={() => runPreview(previewArgs.val, undefined)}
-					id="flow-editor-test-flow-drawer"
-					shortCut={{ Icon: CornerDownLeft }}
-				>
-					{#if previewMode == 'upTo'}
-						Test up to
-						<Badge baseClass="ml-1" color="indigo">
-							{$selectedId}
-						</Badge>
-					{:else}
-						Test flow
+										<div class="flex w-full">
+											{#if selectedJobStepType === 'forloop'}
+												<input
+													type="number"
+													min="0"
+													bind:value={branchOrIterationN}
+													class="!w-32 grow"
+													onclick={stopPropagation(() => {})}
+												/>
+											{:else}
+												<select
+													bind:value={branchOrIterationN}
+													class="!w-32 grow"
+													onclick={stopPropagation(() => {})}
+												>
+													{#each restartBranchNames as [branchIdx, branchName]}
+														<option value={branchIdx}>{branchName}</option>
+													{/each}
+												</select>
+											{/if}
+											<Button
+												size="xs"
+												color="blue"
+												buttonType="button"
+												btnClasses="!p-1 !w-[34px] !ml-1"
+												aria-label="Restart flow"
+												on:click|once={() => {
+													runPreview(previewArgs.val, {
+														flow_job_id: jobId,
+														step_id: selectedJobStep,
+														branch_or_iteration_n: branchOrIterationN
+													})
+												}}
+											>
+												<ArrowRight size={18} />
+											</Button>
+										</div>
+									</label>
+								{/snippet}
+							</Popover>
+						{/if}
 					{/if}
-				</Button>
-			</div>
-		{/if}
-	</div>
-	<div class="w-full flex flex-col gap-y-1">
-		{#if lastPreviewFlow && JSON.stringify(flowStore.val) != lastPreviewFlow}
-			<div class="pt-1">
-				<div
-					class="bg-orange-200 text-orange-600 border border-orange-600 p-2 flex items-center gap-2 rounded"
-				>
-					<AlertTriangle size={14} /> Flow changed since last preview
-					<div class="flex"></div>
+					<Button
+						variant="contained"
+						startIcon={{ icon: isRunning ? RefreshCw : Play }}
+						color="dark"
+						size="sm"
+						btnClasses="w-full max-w-lg"
+						on:click={() => runPreview(previewArgs.val, undefined)}
+						id="flow-editor-test-flow-drawer"
+						shortCut={{ Icon: CornerDownLeft }}
+					>
+						{#if previewMode == 'upTo'}
+							Test up to
+							<Badge baseClass="ml-1" color="indigo">
+								{$selectedId}
+							</Badge>
+						{:else}
+							Test flow
+						{/if}
+					</Button>
 				</div>
-			</div>
-		{/if}
-		<FlowProgressBar {job} bind:reset={jobProgressReset} />
-	</div>
+			{/if}
+		</div>
 
+		<div class="w-full flex flex-col gap-y-1">
+			{#if flowHasChanged()}
+				<div class="pt-1">
+					<div
+						class="bg-orange-200 text-orange-600 border border-orange-600 p-2 flex items-center gap-2 rounded"
+					>
+						<AlertTriangle size={14} /> Flow changed since last preview
+						<div class="flex"></div>
+					</div>
+				</div>
+			{/if}
+			<FlowProgressBar {job} bind:this={flowProgressBar} />
+		</div>
+	{/if}
 	<div
 		bind:this={scrollableDiv}
 		class="overflow-y-auto grow flex flex-col pt-4"
-		on:scroll={(e) => handleScroll()}
+		onscroll={(e) => handleScroll()}
 	>
-		<div class="border-b">
-			<SchemaFormWithArgPicker
-				bind:this={schemaFormWithArgPicker}
-				runnableId={$initialPathStore}
-				stablePathForCaptures={$initialPathStore || fakeInitialPath}
-				runnableType={'FlowPath'}
-				previewArgs={previewArgs.val}
-				on:openTriggers
-				on:select={(e) => {
-					selectInput(e.detail.payload, e.detail?.type)
-				}}
-				{isValid}
-				{jsonView}
-			>
-				<div class="w-full flex flex-row justify-between">
-					<InputSelectedBadge
-						onReject={() => schemaFormWithArgPicker?.resetSelected()}
-						{inputSelected}
-					/>
-					<div class="flex flex-row gap-2">
-						<Toggle
-							bind:checked={jsonView}
-							label="JSON View"
-							size="xs"
-							options={{
-								right: 'JSON',
-								rightTooltip: 'Fill args from JSON'
-							}}
-							lightMode
-							on:change={(e) => {
-								jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
-								refresh()
-							}}
-						/>
-					</div>
-				</div>
-				{#if jsonView}
-					<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
-						<JsonInputs
-							bind:this={jsonEditor}
-							on:select={(e) => {
-								if (e.detail) {
-									previewArgs.val = e.detail
-								}
-							}}
-							updateOnBlur={false}
-							placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+		{#if render}
+			<div class="border-b">
+				<SchemaFormWithArgPicker
+					bind:this={schemaFormWithArgPicker}
+					runnableId={$initialPathStore}
+					stablePathForCaptures={$initialPathStore || fakeInitialPath}
+					runnableType={'FlowPath'}
+					previewArgs={previewArgs.val}
+					on:openTriggers
+					on:select={(e) => {
+						selectInput(e.detail.payload, e.detail?.type)
+					}}
+					{isValid}
+					{jsonView}
+				>
+					<div class="w-full flex flex-row justify-between">
+						<InputSelectedBadge
+							onReject={() => schemaFormWithArgPicker?.resetSelected()}
+							{inputSelected}
 						/>
+						<div class="flex flex-row gap-2">
+							<Toggle
+								bind:checked={jsonView}
+								label="JSON View"
+								size="xs"
+								options={{
+									right: 'JSON',
+									rightTooltip: 'Fill args from JSON'
+								}}
+								lightMode
+								on:change={(e) => {
+									jsonEditor?.setCode(JSON.stringify(previewArgs.val ?? {}, null, '\t'))
+									refresh()
+								}}
+							/>
+						</div>
 					</div>
-				{:else}
-					{#key renderCount}
-						<div bind:clientHeight={schemaHeight} class="min-h-[40vh]">
-							<SchemaForm
-								noVariablePicker
-								compact
-								schema={flowStore.val.schema}
-								bind:args={previewArgs.val}
-								on:change={() => {
-									savedArgs = previewArgs.val
+					{#if jsonView}
+						<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
+							<JsonInputs
+								bind:this={jsonEditor}
+								on:select={(e) => {
+									if (e.detail) {
+										previewArgs.val = e.detail
+									}
 								}}
-								bind:isValid
+								updateOnBlur={false}
+								placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
 							/>
 						</div>
-					{/key}
-				{/if}
-			</SchemaFormWithArgPicker>
-		</div>
+					{:else}
+						{#key renderCount}
+							<div bind:clientHeight={schemaHeight} class="min-h-[40vh]">
+								<SchemaForm
+									noVariablePicker
+									compact
+									schema={flowStore.val.schema}
+									bind:args={previewArgs.val}
+									on:change={() => {
+										savedArgs = previewArgs.val
+									}}
+									bind:isValid
+								/>
+							</div>
+						{/key}
+					{/if}
+				</SchemaFormWithArgPicker>
+			</div>
+		{/if}
 		<div class="pt-4 flex flex-col grow relative">
 			<div
 				class="absolute top-[22px] right-2 border p-1.5 hover:bg-surface-hover rounded-md center-center"
 			>
-				<FlowHistoryJobPicker
-					selectInitial={jobId == undefined}
-					on:select={(e) => {
-						if (!currentJobId) {
-							currentJobId = jobId
-						}
-						const detail = e.detail
-						jobId = detail.jobId
-						if (detail.initial && stepHistoryLoader?.flowJobInitial === undefined) {
-							stepHistoryLoader?.setFlowJobInitial(detail.initial)
-						}
-					}}
-					on:unselect={() => {
-						jobId = currentJobId
-						currentJobId = undefined
-					}}
-					path={$initialPathStore == '' ? $pathStore : $initialPathStore}
-				/>
+				{#if render}
+					<FlowHistoryJobPicker
+						selectInitial={jobId == undefined}
+						on:select={(e) => {
+							if (!currentJobId) {
+								currentJobId = jobId
+							}
+							const detail = e.detail
+							jobId = detail.jobId
+							if (detail.initial && stepHistoryLoader?.flowJobInitial === undefined) {
+								stepHistoryLoader?.setFlowJobInitial(detail.initial)
+							}
+						}}
+						on:unselect={() => {
+							jobId = currentJobId
+							currentJobId = undefined
+						}}
+						path={$initialPathStore == '' ? $pathStore : $initialPathStore}
+					/>
+				{/if}
 			</div>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
 			{#if jobId}
 				{#if stepHistoryLoader?.flowJobInitial}
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<div
-						on:click={() => {
+						onclick={() => {
 							stepHistoryLoader?.setFlowJobInitial(false)
 						}}
 						class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 rounded bg-gray-500/40 absolute top-0 left-0 w-full z-50"
@@ -451,15 +477,20 @@ function onScrollableDivChange() {
 					bind:job
 					bind:localModuleStates
 					bind:localDurationStatuses
+					bind:suspendStatus
 					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
 					{flowStateStore}
 					{jobId}
 					on:done={() => {
+						isRunning = false
 						$executionCount = $executionCount + 1
+						onJobDone?.()
 					}}
 					bind:selectedJobStep
 					bind:rightColumnSelect
+					bind:isOwner
+					{render}
 				/>
 			{:else}
 				<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>