windmill-components 1.503.1 → 1.503.4

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -16,9 +16,10 @@ import { setScheduledPollSchedule } from '../../triggers';
 import { JobService } from '../../../gen';
 import { dfsByModule } from '../previousResults';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
+import { writable } from 'svelte/store';
 import FlowStickyNode from './FlowStickyNode.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
-let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, aiChatOpen, showFlowAiButton, toggleAiChat } = $props();
+let { sidebarSize = $bindable(undefined), disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, newFlow = false, smallErrorHandler = false, workspace = $workspaceStore, onTestUpTo, onEditInput, localModuleStates = writable({}), aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), onDelete, flowHasChanged } = $props();
 let flowTutorials = $state(undefined);
 const { customUi, selectedId, moving, history, flowStateStore, flowStore, pathStore } = getContext('FlowEditorContext');
 const { triggersCount, triggersState } = getContext('TriggerContext');
@@ -158,6 +159,10 @@ export function removeBranch(id, index) {
 }
 let deleteCallback = $state(undefined);
 let dependents = $state({});
+let graph = $state(undefined);
+export function isNodeVisible(nodeId) {
+    return graph?.isNodeVisible(nodeId) ?? false;
+}
 function shouldRunTutorial(tutorialName, name, index) {
     return ($tutorialsToDo.includes(index) &&
         name == tutorialName &&
@@ -261,6 +266,7 @@ $effect(() => {
 
 	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
+			bind:this={graph}
 			earlyStop={flowStore.val.value?.skip_expr !== undefined}
 			cache={flowStore.val.value?.cache_ttl !== undefined}
 			triggerNode={customUi?.triggers != false}
@@ -279,6 +285,13 @@ $effect(() => {
 			editMode
 			{onTestUpTo}
 			{onEditInput}
+			flowModuleStates={$localModuleStates}
+			{isOwner}
+			{individualStepTests}
+			{flowJob}
+			{showJobStatus}
+			{suspendStatus}
+			{flowHasChanged}
 			onDelete={(id) => {
 				dependents = getDependentComponents(id, flowStore.val)
 				const cb = () => {
@@ -291,6 +304,7 @@ $effect(() => {
 						removeAtId(flowStore.val.value.modules, id)
 					}
 					refreshStateStore(flowStore)
+					onDelete?.(id)
 				}
 
 				if (Object.keys(dependents).length > 0) {
@@ -473,6 +487,11 @@ $effect(() => {
 				module.mock = $state.snapshot(detail.mock)
 				refreshStateStore(flowStore)
 			}}
+			{onTestFlow}
+			{isRunning}
+			{onCancelTestFlow}
+			{onOpenPreview}
+			{onHideJobStatus}
 		/>
 	</div>
 </div>

package/package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -1,5 +1,7 @@
-import type { FlowModule } from '../../../gen';
+import type { FlowModule, Job } from '../../../gen';
 import type { InlineScript, InsertKind } from '../../graph/graphBuilder.svelte';
+import type { GraphModuleState } from '../../graph';
+import { type Writable } from 'svelte/store';
 interface Props {
     sidebarSize?: number | undefined;
     disableStaticInputs?: boolean;
@@ -11,9 +13,25 @@ interface Props {
     workspace?: string | undefined;
     onTestUpTo?: ((id: string) => void) | undefined;
     onEditInput?: (moduleId: string, key: string) => void;
+    localModuleStates?: Writable<Record<string, GraphModuleState>>;
     aiChatOpen?: boolean;
     showFlowAiButton?: boolean;
     toggleAiChat?: () => void;
+    isOwner?: boolean;
+    onTestFlow?: () => void;
+    isRunning?: boolean;
+    onCancelTestFlow?: () => void;
+    onOpenPreview?: () => void;
+    onHideJobStatus?: () => void;
+    individualStepTests?: boolean;
+    flowJob?: Job | undefined;
+    showJobStatus?: boolean;
+    suspendStatus?: Writable<Record<string, {
+        job: Job;
+        nb: number;
+    }>>;
+    onDelete?: (id: string) => void;
+    flowHasChanged?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -47,6 +65,7 @@ declare const FlowModuleSchemaMap: $$__sveltets_2_IsomorphicComponent<Props, {
     selectNextId: (id: any) => void;
     addBranch: (id: string) => Promise<void>;
     removeBranch: (id: string, index: number) => void;
+    isNodeVisible: (nodeId: string) => boolean;
     setExpr: (module: FlowModule, expr: string) => void;
 }, "sidebarSize">;
 type FlowModuleSchemaMap = InstanceType<typeof FlowModuleSchemaMap>;

package/package/components/flows/map/MapItem.svelte

@@ -10,7 +10,8 @@ import BarsStaggered from '../../icons/BarsStaggered.svelte';
 import FlowJobsMenu from './FlowJobsMenu.svelte';
 import { isTriggerStep } from '../../graph/graphBuilder.svelte';
 import { checkIfParentLoop } from '../utils';
-let { onSelectedIteration, moduleId, mod = $bindable(), insertable, annotation = undefined, bgColor = '', bgHoverColor = '', moving = undefined, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput } = $props();
+import { twMerge } from 'tailwind-merge';
+let { onSelectedIteration, moduleId, mod = $bindable(), insertable, annotation = undefined, bgColor = '', bgHoverColor = '', moving = undefined, duration_ms = undefined, retries = undefined, flowJobs, editMode = false, onSelect, onTestUpTo, onUpdateMock, onEditInput, flowJob, isOwner = false, type, darkMode, skipped } = $props();
 const { selectedId } = getContext('FlowGraphContext');
 const { flowStore } = getContext('FlowEditorContext') || {};
 const dispatch = createEventDispatcher();
@@ -39,12 +40,22 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 		{/if}
 
 		{#if duration_ms}
-			<div class="absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs">
+			<div
+				class={twMerge(
+					'absolute z-10 right-0 -top-4 center-center text-tertiary text-2xs',
+					editMode ? 'text-gray-400 dark:text-gray-500 text-2xs font-normal mr-2' : ''
+				)}
+			>
 				{msToSec(duration_ms)}s
 			</div>
 		{/if}
 		{#if annotation && annotation != ''}
-			<div class="absolute z-10 left-0 -top-5 center-center text-tertiary">
+			<div
+				class={twMerge(
+					'absolute z-10 left-0 -top-5 center-center text-tertiary',
+					editMode ? '-top-4 text-gray-400 dark:text-gray-500 text-xs font-normal' : ''
+				)}
+			>
 				{annotation}
 			</div>
 		{/if}
@@ -92,6 +103,8 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					alwaysShowOutputPicker={!mod.id.startsWith('subflow:')}
 					loopStatus={{ type: 'self', flow: mod.value.type }}
 					{onTestUpTo}
+					{type}
+					{darkMode}
 				>
 					{#snippet icon()}
 						<div>
@@ -113,6 +126,8 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{bgColor}
 					{bgHoverColor}
 					{onTestUpTo}
+					{type}
+					{darkMode}
 				>
 					{#snippet icon()}
 						<div>
@@ -134,6 +149,8 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					{bgColor}
 					{bgHoverColor}
 					{onTestUpTo}
+					{type}
+					{darkMode}
 				>
 					{#snippet icon()}
 						<div>
@@ -178,7 +195,12 @@ let parentLoop = $derived(flowStore?.val && mod ? checkIfParentLoop(flowStore.va
 					inputTransform={mod.value.type !== 'identity' ? mod.value.input_transforms : undefined}
 					{onTestUpTo}
 					{onEditInput}
+					{flowJob}
+					{isOwner}
 					enableTestRun
+					{type}
+					{darkMode}
+					{skipped}
 				>
 					{#snippet icon()}
 						<div>

package/package/components/flows/map/MapItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FlowModule } from '../../../gen';
+import type { FlowModule, FlowStatusModule, Job } from '../../../gen';
 import { type onSelectedIteration } from '../../graph/graphBuilder.svelte';
 interface Props {
     moduleId: string;
@@ -28,6 +28,11 @@ interface Props {
         };
     }) => void;
     onEditInput?: (moduleId: string, key: string) => void;
+    flowJob?: Job | undefined;
+    isOwner?: boolean;
+    type?: FlowStatusModule['type'] | undefined;
+    darkMode?: boolean;
+    skipped?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/map/VirtualItem.svelte

@@ -7,9 +7,20 @@ import { fade } from 'svelte/transition';
 import { Database, Square } from 'lucide-svelte';
 import ModuleAcceptReject, { getAiModuleAction } from '../../copilot/chat/flow/ModuleAcceptReject.svelte';
 import { aiModuleActionToBgColor } from '../../copilot/chat/flow/utils';
-let { label = undefined, bgColor = '', bgHoverColor = '', selected, selectable, id = undefined, center = true, borderColor = undefined, hideId = false, preLabel = undefined, inputJson = undefined, prefix = '', alwaysPluggable = false, cache = false, earlyStop = false, editMode = false, icon, onUpdateMock, onEditInput } = $props();
-const outputPickerVisible = $derived((alwaysPluggable || (inputJson && Object.keys(inputJson).length > 0)) && editMode);
+import FlowGraphPreviewButton from './FlowGraphPreviewButton.svelte';
+let { label = undefined, bgColor = '', bgHoverColor = '', selected, selectable, id = undefined, center = true, borderColor = undefined, hideId = false, preLabel = undefined, inputJson = undefined, prefix = '', nodeKind, cache = false, earlyStop = false, editMode = false, icon, onUpdateMock, onEditInput, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, showJobStatus = false, darkMode = false, flowHasChanged = false } = $props();
+const outputPickerVisible = $derived((nodeKind || (inputJson && Object.keys(inputJson).length > 0)) && editMode);
 let action = $derived(label === 'Input' ? getAiModuleAction(label) : undefined);
+let hoverButton = $state(false);
+const outputType = $derived(showJobStatus
+    ? job?.type === 'QueuedJob'
+        ? 'InProgress'
+        : job?.type === 'CompletedJob'
+            ? job.success
+                ? 'Success'
+                : 'Failure'
+            : undefined
+    : undefined);
 </script>
 
 <VirtualItemWrapper
@@ -61,6 +72,8 @@ let action = $derived(label === 'Input' ? getAiModuleAction(label) : undefined);
 					id={id ?? ''}
 					isConnectingCandidate={true}
 					variant="virtual"
+					type={outputType}
+					{darkMode}
 				>
 					{#snippet children({ allowCopy, isConnecting, selectConnection })}
 						<OutputPickerInner
@@ -70,18 +83,25 @@ let action = $derived(label === 'Input' ? getAiModuleAction(label) : undefined);
 							onSelect={selectConnection}
 							moduleId={''}
 							{onUpdateMock}
-							hideHeaderBar
+							hideHeaderBar={nodeKind !== 'result'}
 							simpleViewer={inputJson}
 							rightMargin
 							historyOffset={{ mainAxis: 12, crossAxis: -9 }}
 							clazz="p-1"
 							{onEditInput}
 							selectionId={id ?? label ?? ''}
+							testJob={job}
+							disableMock
+							disableHistory
+							customEmptyJobMessage={nodeKind === 'result'
+								? 'Test the flow to see results'
+								: undefined}
 						/>
 					{/snippet}
 				</OutputPicker>
 			{/if}
 		</div>
+
 		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
 			{#if cache}
 				<Popover notClickable>
@@ -111,4 +131,36 @@ let action = $derived(label === 'Input' ? getAiModuleAction(label) : undefined);
 			{/if}
 		</div>
 	{/snippet}
+	{#snippet previewButton()}
+		{#if nodeKind === 'input'}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="absolute top-1/2 -translate-y-[35px] -translate-x-[100%] -left-[0] flex py-4 justify-end w-fit px-2 min-w-32"
+				onmouseenter={() => {
+					hoverButton = true
+				}}
+				onmouseleave={() => {
+					hoverButton = false
+				}}
+			>
+				{#if outputPickerVisible}
+					<div transition:fade={{ duration: 100 }}>
+						<FlowGraphPreviewButton
+							{isRunning}
+							hover={hoverButton}
+							{selected}
+							{onTestFlow}
+							{onCancelTestFlow}
+							{onOpenPreview}
+							{onHideJobStatus}
+							{individualStepTests}
+							{job}
+							{showJobStatus}
+							{flowHasChanged}
+						/>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/snippet}
 </VirtualItemWrapper>

package/package/components/flows/map/VirtualItem.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Job } from '../../../gen';
 interface Props {
     label?: string | undefined;
     bgColor?: string;
@@ -11,7 +12,6 @@ interface Props {
     preLabel?: string | undefined;
     inputJson?: Object | undefined;
     prefix?: string;
-    alwaysPluggable?: boolean;
     cache?: boolean;
     earlyStop?: boolean;
     editMode?: boolean;
@@ -21,6 +21,18 @@ interface Props {
         return_value?: unknown;
     }) => void;
     onEditInput?: (moduleId: string, key: string) => void;
+    onTestFlow?: () => void;
+    isRunning?: boolean;
+    onCancelTestFlow?: () => void;
+    onOpenPreview?: () => void;
+    onHideJobStatus?: () => void;
+    individualStepTests?: boolean;
+    nodeKind?: 'input' | 'result';
+    job?: Job;
+    type?: string;
+    showJobStatus?: boolean;
+    darkMode?: boolean;
+    flowHasChanged?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/map/VirtualItemWrapper.svelte

@@ -1,40 +1,44 @@
 <script lang="ts">import { classNames } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let { label, selectable, selected, id, onTop = false, bgColor, bgHoverColor = '', children, outputPickerVisible = false, className } = $props();
+let { label, selectable, selected, id, onTop = false, bgColor, bgHoverColor = '', children, outputPickerVisible = false, className, previewButton } = $props();
 const dispatch = createEventDispatcher();
 let hover = $state(false);
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class={classNames('w-full flex relative rounded-sm', onTop ? 'z-[901]' : '', className)}
-	style="width: 275px; max-height: 34px; background-color: {hover && bgHoverColor && selectable
-		? bgHoverColor
-		: bgColor};"
-	onpointerdown={() => {
-		if (selectable) {
-			dispatch('select', id || label || '')
-		}
-	}}
-	onmouseenter={() => {
-		hover = true
-	}}
-	onmouseleave={() => {
-		hover = false
-	}}
-	title={label ? label + ' ' : ''}
-	id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
->
+<div class="relative">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class={twMerge(
-			'absolute  outline-gray-600 dark:outline-gray-400 rounded-sm',
-			selected ? 'outline outline-2' : '',
-			selectable ? 'cursor-pointer active:outline active:outline-2' : ''
-		)}
-		style={`width: 275px; height: ${outputPickerVisible ? '50px' : '34px'};`}
+		class={classNames('w-full flex relative rounded-sm', onTop ? 'z-[901]' : '', className)}
+		style="width: 275px; max-height: 34px; background-color: {hover && bgHoverColor && selectable
+			? bgHoverColor
+			: bgColor};"
+		onpointerdown={() => {
+			if (selectable) {
+				dispatch('select', id || label || '')
+			}
+		}}
+		onmouseenter={() => {
+			hover = true
+		}}
+		onmouseleave={() => {
+			hover = false
+		}}
+		title={label ? label + ' ' : ''}
+		id={`flow-editor-virtual-${encodeURIComponent(label || label || '')}`}
 	>
+		<div
+			class={twMerge(
+				'absolute  outline-gray-600 dark:outline-gray-400 rounded-sm',
+				selected ? 'outline outline-2' : '',
+				selectable ? 'cursor-pointer active:outline active:outline-2' : ''
+			)}
+			style={`width: 275px; height: ${outputPickerVisible ? '50px' : '34px'};`}
+		>
+		</div>
+		{@render children?.({ hover })}
 	</div>
-	{@render children?.({ hover })}
+
+	{@render previewButton?.()}
 </div>

package/package/components/flows/map/VirtualItemWrapper.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
     children?: import('svelte').Snippet<[any]>;
     outputPickerVisible?: boolean;
     className?: string;
+    previewButton?: import('svelte').Snippet;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">import Popover from '../../meltComponents/Popover.svelte';
 import { twMerge } from 'tailwind-merge';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import AnimatedButton from '../../common/button/AnimatedButton.svelte';
 import InputPickerInner from './InputPickerInner.svelte';
 import { ChevronDown, Plug } from 'lucide-svelte';
 import { useSvelteFlow } from '@xyflow/svelte';
-let { selected = false, hover = false, isConnectingCandidate = false, variant = 'default', historyOpen = false, children, inputTransform, id, bottomBarOpen = $bindable(false), loopStatus, onEditInput } = $props();
+import { getStateColor } from '../../graph/util';
+let { selected = false, hover = false, isConnectingCandidate = false, variant = 'default', historyOpen = false, children, inputTransform, id, bottomBarOpen = $bindable(false), loopStatus, onEditInput, type, darkMode, skipped } = $props();
 const context = getContext('PropPickerContext');
 const flowPropPickerConfig = context?.flowPropPickerConfig;
 const MIN_WIDTH = 375;
@@ -57,6 +58,17 @@ function updatePositioning(historyOpen, zoom) {
 $effect(() => {
     updatePositioning(historyOpen, zoom);
 });
+onMount(() => {
+    let { outputPickerOpenFns } = getContext('FlowEditorContext') || {};
+    if (outputPickerOpenFns) {
+        outputPickerOpenFns[id] = () => {
+            outputOpen = true;
+        };
+        return () => {
+            delete outputPickerOpenFns[id];
+        };
+    }
+});
 </script>
 
 <div
@@ -80,6 +92,9 @@ $effect(() => {
 			'h-1 hover:h-[20px]',
 			bottomBarOpen && 'h-[20px]'
 		)}
+		style:background-color={type && type !== 'WaitingForEvents'
+			? getStateColor(type, !!darkMode, true, skipped)
+			: undefined}
 		data-prop-picker
 	>
 		<div class="flex flex-row items-center justify-center w-full h-full">

package/package/components/flows/propPicker/OutputPicker.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { FlowStatusModule } from '../../../gen';
 interface Props {
     selected?: boolean;
     hover?: boolean;
@@ -15,6 +16,9 @@ interface Props {
     onEditInput?: (moduleId: string, key: string) => void;
     initial?: boolean;
     onResetInitial?: () => void;
+    type: FlowStatusModule['type'] | undefined;
+    darkMode?: boolean;
+    skipped?: boolean;
 }
 declare const OutputPicker: import("svelte").Component<Props, {
     toggleOpen: (forceOpen?: boolean) => void;

package/package/components/flows/propPicker/OutputPickerInner.svelte

@@ -27,7 +27,7 @@ import { twMerge } from 'tailwind-merge';
 import DisplayResultControlBar from '../../DisplayResultControlBar.svelte';
 import { base } from '../../../base';
 import { fade } from 'svelte/transition';
-let { lastJob = undefined, testJob = undefined, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, selectedJob = $bindable(undefined), forceJson = $bindable(false), isLoading = $bindable(false), preview = $bindable(undefined), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, derivedHistoryOpen = $bindable(false), historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial } = $props();
+let { lastJob = undefined, testJob = undefined, prefix = '', allowCopy = false, connectingData = undefined, mock = $bindable({ enabled: false }), moduleId = '', fullResult = false, closeOnOutsideClick = false, getLogs = false, selectedJob = $bindable(undefined), forceJson = $bindable(false), isLoading = $bindable(false), preview = $bindable(undefined), hideHeaderBar = false, simpleViewer = undefined, path = '', loopStatus = undefined, customHeight = undefined, rightMargin = false, disableMock = false, disableHistory = false, derivedHistoryOpen = $bindable(false), historyOffset = { mainAxis: 8, crossAxis: -4.5 }, clazz, copilot_fix, onSelect, onUpdateMock, onEditInput, selectionId, initial, customEmptyJobMessage } = $props();
 let jsonView = $state(false);
 let clientHeight = $state(0);
 let tmpMock = $state(undefined);
@@ -601,7 +601,7 @@ const copilot_fix_render = $derived(copilot_fix);
 			{:else if !job}
 				<div class="flex flex-col items-center justify-center h-full">
 					<p class="text-xs text-secondary">
-						Test this step to see results{#if !disableMock}
+						{customEmptyJobMessage ?? 'Test this step to see results'}{#if !disableMock}
 							{' or'}
 							<button
 								class="text-blue-500 hover:text-blue-700 underline"

package/package/components/flows/propPicker/OutputPickerInner.svelte.d.ts

@@ -50,6 +50,7 @@ interface Props {
     selectionId?: string;
     initial?: boolean;
     onResetInitial?: () => void;
+    customEmptyJobMessage?: string;
 }
 declare const OutputPickerInner: import("svelte").Component<Props, {}, "preview" | "isLoading" | "mock" | "forceJson" | "selectedJob" | "derivedHistoryOpen">;
 type OutputPickerInner = ReturnType<typeof OutputPickerInner>;

package/package/components/flows/types.d.ts

@@ -8,6 +8,7 @@ import type Editor from '../Editor.svelte';
 import type SimpleEditor from '../SimpleEditor.svelte';
 import type { StateStore } from '../../utils';
 import type { TestSteps } from './testSteps.svelte';
+import type { ModulesTestStates } from '../modulesTest.svelte';
 export type FlowInput = Record<string, {
     flowStepWarnings?: Record<string, {
         message: string;
@@ -60,4 +61,6 @@ export type FlowEditorContext = {
     customUi: FlowBuilderWhitelabelCustomUi;
     insertButtonOpen: Writable<boolean>;
     executionCount: Writable<number>;
+    modulesTestStates: ModulesTestStates;
+    outputPickerOpenFns: Record<string, () => void>;
 };

package/package/components/flows/utils.d.ts

@@ -1,7 +1,10 @@
 import { type FlowModule, type Job, type RestartedFrom, type OpenFlow } from '../../gen';
+import { type Writable } from 'svelte/store';
 import type { FlowModuleState } from './flowState';
 import { type PickableProperties } from './previousResults';
 import type { ExtendedOpenFlow } from './types';
+import type { GraphModuleState } from '../graph';
+import type { ModulesTestStates } from '../modulesTest.svelte';
 export type ModuleArgs = {
     value: Record<string, any>;
 };
@@ -32,3 +35,9 @@ export declare function checkIfParentLoop(flowStore: ExtendedOpenFlow, modId: st
     id: string;
     type: 'forloopflow' | 'whileloopflow';
 } | undefined;
+/**
+ * Updates moduleStates based on test job data from modulesTestStates
+ * Extracts job information and converts it to GraphModuleState format
+ * for graph rendering
+ */
+export declare function updateDerivedModuleStatesFromTestJobs(moduleId: string | undefined, moduleTestStates: ModulesTestStates | undefined, moduleStates: Writable<Record<string, GraphModuleState>> | undefined): void;

package/package/components/flows/utils.js

@@ -148,3 +148,42 @@ export function checkIfParentLoop(flowStore, modId) {
     }
     return undefined;
 }
+/**
+ * Updates moduleStates based on test job data from modulesTestStates
+ * Extracts job information and converts it to GraphModuleState format
+ * for graph rendering
+ */
+export function updateDerivedModuleStatesFromTestJobs(moduleId, moduleTestStates, moduleStates) {
+    if (!moduleId || !moduleTestStates || !moduleStates) {
+        return;
+    }
+    const newStates = {};
+    const testState = moduleTestStates?.states[moduleId];
+    if (testState) {
+        if (testState.testJob) {
+            const job = testState.testJob;
+            // Create GraphModuleState from job data
+            const moduleState = {
+                args: job.args,
+                type: job.type === 'QueuedJob' ? 'InProgress' : job['success'] ? 'Success' : 'Failure',
+                job_id: job.id,
+                tag: job.tag,
+                duration_ms: job['duration_ms'],
+                started_at: job.started_at ? new Date(job.started_at).getTime() : undefined
+            };
+            newStates[moduleId] = moduleState;
+        }
+        else if (testState.loading) {
+            // If test is loading, show as InProgress
+            newStates[moduleId] = {
+                type: 'InProgress',
+                args: {}
+            };
+        }
+    }
+    // Update the store with test job states
+    moduleStates.update((currentStates) => ({
+        ...currentStates,
+        ...newStates
+    }));
+}

package/package/components/graph/FlowGraphV2.svelte

@@ -36,7 +36,7 @@ const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -179,6 +179,18 @@ let eventHandler = {
     },
     editInput: (moduleId, key) => {
         onEditInput?.(moduleId, key);
+    },
+    testFlow: () => {
+        onTestFlow?.();
+    },
+    cancelTestFlow: () => {
+        onCancelTestFlow?.();
+    },
+    openPreview: () => {
+        onOpenPreview?.();
+    },
+    hideJobStatus: () => {
+        onHideJobStatus?.();
     }
 };
 let lastModules = structuredClone($state.snapshot(modules));
@@ -257,7 +269,14 @@ let graph = $derived.by(() => {
         newFlow,
         cache,
         earlyStop,
-        editMode
+        editMode,
+        isOwner,
+        isRunning,
+        individualStepTests,
+        flowJob,
+        showJobStatus,
+        suspendStatus,
+        flowHasChanged
     }, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
@@ -290,6 +309,10 @@ $effect(() => {
         }
     }, 10);
 });
+let viewportResizer = $state(undefined);
+export function isNodeVisible(nodeId) {
+    return viewportResizer?.isNodeVisible(nodeId) ?? false;
+}
 </script>
 
 {#if insertable}
@@ -312,7 +335,7 @@ $effect(() => {
 		</div>
 	{:else}
 		<SvelteFlowProvider>
-			<ViewportResizer {width} />
+			<ViewportResizer {height} {width} {nodes} bind:this={viewportResizer} />
 			<SvelteFlow
 				onpaneclick={(e) => {
 					document.dispatchEvent(new Event('focus'))
@@ -334,7 +357,7 @@ $effect(() => {
 				nodesDraggable={false}
 				--background-color={false}
 			>
-				<div class="absolute inset-0 !bg-surface-secondary"></div>
+				<div class="absolute inset-0 !bg-surface-secondary h-full"></div>
 				<Controls position="top-right" orientation="horizontal" showLock={false}>
 					{#if download}
 						<ControlButton