windmill-components 1.46.3 → 1.52.0

package/components/flows/content/FlowLoop.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowLoopProps = typeof __propDef.props;
-export declare type FlowLoopEvents = typeof __propDef.events;
-export declare type FlowLoopSlots = typeof __propDef.slots;
+export type FlowLoopProps = typeof __propDef.props;
+export type FlowLoopEvents = typeof __propDef.events;
+export type FlowLoopSlots = typeof __propDef.slots;
 export default class FlowLoop extends SvelteComponentTyped<FlowLoopProps, FlowLoopEvents, FlowLoopSlots> {
 }
 export {};

package/components/flows/content/FlowModuleComponent.svelte

@@ -2,7 +2,7 @@
 import Tab from '../../common/tabs/Tab.svelte';
 import Tabs from '../../common/tabs/Tabs.svelte';
 import Editor from '../../Editor.svelte';
-import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from '../../EditorBar.svelte';
+import EditorBar from '../../EditorBar.svelte';
 import ModulePreview from '../../ModulePreview.svelte';
 import { createScriptFromInlineScript, fork } from '../flowStateUtils';
 import { flowStore } from '../flowStore';
@@ -20,8 +20,6 @@ import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte';
 import FlowModuleSuspend from './FlowModuleSuspend.svelte';
 import FlowRetries from './FlowRetries.svelte';
 import { getStepPropPicker } from '../previousResults';
-import Tooltip from '../../Tooltip.svelte';
-import { Kbd } from '../../common';
 import Button from '../../common/button/Button.svelte';
 import Alert from '../../common/alert/Alert.svelte';
 const { selectedId, previewArgs } = getContext('FlowEditorContext');
@@ -53,7 +51,7 @@ $: stepPropPicker = failureModule
         },
         extraLib: ''
     }
-    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, previewArgs, false, true);
+    : getStepPropPicker($flowStateStore, parentModule, previousModule, flowModule.id, $flowStore, $previewArgs, false, true);
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
         event.preventDefault();
@@ -102,9 +100,9 @@ afterUpdate(() => {
 			<svelte:fragment slot="header">
 				<FlowModuleHeader
 					bind:module={flowModule}
-					on:toggleSuspend={() => (selected = 'suspend')}
-					on:toggleRetry={() => (selected = 'retries')}
-					on:toggleStopAfterIf={() => (selected = 'early-stop')}
+					on:toggleSuspend={() => (selected = 'advanced-suspend')}
+					on:toggleRetry={() => (selected = 'advanced-retries')}
+					on:toggleStopAfterIf={() => (selected = 'advanced-early-stop')}
 					on:fork={async () => {
 						const [module, state] = await fork(flowModule)
 						flowModule = module
@@ -123,7 +121,7 @@ afterUpdate(() => {
 			</svelte:fragment>
 
 			{#if flowModule.value.type === 'rawscript'}
-				<div class="border-b-2 shadow-sm p-1 mb-1">
+				<div class="border-b-2 shadow-sm px-1 mb-1">
 					<EditorBar
 						{validCode}
 						{editor}
@@ -140,9 +138,9 @@ afterUpdate(() => {
 				style="max-height: calc(100% - {totalTopGap}px) !important;"
 			>
 				<Splitpanes horizontal>
-					<Pane size={50} minSize={20}>
+					<Pane size={flowModule.value.type === 'script' ? 30 : 50} minSize={20}>
 						{#if flowModule.value.type === 'rawscript'}
-							<div on:mouseleave={() => reload(flowModule)} class="h-full">
+							<div class="h-full">
 								<Editor
 									bind:websocketAlive
 									bind:this={editor}
@@ -153,9 +151,15 @@ afterUpdate(() => {
 									automaticLayout={true}
 									cmdEnterAction={async () => {
 										selected = 'test'
+										if (flowModule.value.type === 'rawscript') {
+											flowModule.value.content = editor.getCode()
+										}
 										await reload(flowModule)
 										modulePreview?.runTestWithStepArgs()
 									}}
+									on:change={async (event) => {
+										await reload(flowModule)
+									}}
 									formatAction={() => reload(flowModule)}
 								/>
 							</div>
@@ -163,21 +167,11 @@ afterUpdate(() => {
 							<FlowModuleScript path={flowModule.value.path} />
 						{/if}
 					</Pane>
-					<Pane size={50} minSize={20}>
+					<Pane size={flowModule.value.type === 'script' ? 70 : 50} minSize={20}>
 						<Tabs bind:selected>
-							<Tab value="inputs"
-								><Tooltip>
-									Move the focus outside of the text editor to recompute the inputs or press
-									<Kbd>Ctrl/Cmd</Kbd> + <Kbd>S</Kbd>
-								</Tooltip><span class="font-semibold">Step Input</span></Tab
-							>
+							<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
 							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>
-							<Tab value="retries">Retries</Tab>
-							{#if !$selectedId.includes('failure')}
-								<Tab value="early-stop">Early Stop</Tab>
-								<Tab value="suspend">Sleep/Suspend</Tab>
-								<Tab value="same_worker">Same Worker/Shared dir</Tab>
-							{/if}
+							<Tab value="advanced">Advanced</Tab>
 						</Tabs>
 						<div class="h-[calc(100%-32px)]">
 							{#if selected === 'inputs'}
@@ -186,7 +180,7 @@ afterUpdate(() => {
 										<SchemaForm
 											schema={$flowStateStore[$selectedId]?.schema ?? {}}
 											inputTransform={true}
-											importPath={$selectedId}
+											previousModuleId={previousModule?.id}
 											bind:args={flowModule.value.input_transforms}
 											bind:extraLib={stepPropPicker.extraLib}
 										/>
@@ -198,27 +192,37 @@ afterUpdate(() => {
 									mod={flowModule}
 									schema={$flowStateStore[$selectedId]?.schema ?? {}}
 								/>
-							{:else if selected === 'retries'}
-								<FlowRetries bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
-							{:else if selected === 'early-stop'}
-								<FlowModuleEarlyStop bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
-							{:else if selected === 'suspend'}
-								<div class="px-4 pb-4 h-full overflow-auto">
-									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule />
-								</div>
-							{:else if selected === 'same_worker'}
-								<div class="p-4  h-full overflow-auto">
-									<Alert type="info" title="Share a directory using same worker">
-										If same worker is set, all steps will be run on the same worker and will share
-										the folder `/shared` to pass data between each other.
-									</Alert>
-									<Button
-										btnClasses="mt-4"
-										on:click={() => {
-											$selectedId = 'settings-same-worker'
-										}}>Set same worker in the flow settings</Button
-									>
-								</div>
+							{:else if selected.startsWith('advanced')}
+								<Tabs bind:selected>
+									<Tab value="advanced-retries">Retries</Tab>
+									{#if !$selectedId.includes('failure')}
+										<Tab value="advanced-early-stop">Early Stop</Tab>
+										<Tab value="advanced-suspend">Sleep/Suspend</Tab>
+										<Tab value="advanced-same_worker">Same Worker/Shared dir</Tab>
+									{/if}
+								</Tabs>
+								{#if selected === 'advanced-retries'}
+									<FlowRetries bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
+								{:else if selected === 'advanced-early-stop'}
+									<FlowModuleEarlyStop bind:flowModule class="px-4 pb-4 h-full overflow-auto" />
+								{:else if selected === 'advanced-suspend'}
+									<div class="px-4 pb-4 h-full overflow-auto">
+										<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule />
+									</div>
+								{:else if selected === 'advanced-same_worker'}
+									<div class="p-4  h-full overflow-auto">
+										<Alert type="info" title="Share a directory using same worker">
+											If same worker is set, all steps will be run on the same worker and will share
+											the folder `./shared` to pass data between each other.
+										</Alert>
+										<Button
+											btnClasses="mt-4"
+											on:click={() => {
+												$selectedId = 'settings-same-worker'
+											}}>Set same worker in the flow settings</Button
+										>
+									</div>
+								{/if}
 							{/if}
 						</div>
 					</Pane>

package/components/flows/content/FlowModuleComponent.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleComponentProps = typeof __propDef.props;
-export declare type FlowModuleComponentEvents = typeof __propDef.events;
-export declare type FlowModuleComponentSlots = typeof __propDef.slots;
+export type FlowModuleComponentProps = typeof __propDef.props;
+export type FlowModuleComponentEvents = typeof __propDef.events;
+export type FlowModuleComponentSlots = typeof __propDef.slots;
 export default class FlowModuleComponent extends SvelteComponentTyped<FlowModuleComponentProps, FlowModuleComponentEvents, FlowModuleComponentSlots> {
 }
 export {};

package/components/flows/content/FlowModuleEarlyStop.svelte

@@ -40,7 +40,7 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 			<Toggle
 				bind:checked={flowModule.stop_after_if.skip_if_stopped}
 				options={{
-					right: 'Skip if stopped'
+					right: 'Label flow as "skipped" if stopped'
 				}}
 			/>
 			<span class="text-xs font-bold">Stop condition expression</span>
@@ -57,6 +57,7 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 						lang="javascript"
 						bind:code={flowModule.stop_after_if.expr}
 						class="small-editor"
+						extraLib={`declare const result = ${JSON.stringify(result)};`}
 					/>
 				</PropPickerWrapper>
 			</div>
@@ -64,7 +65,7 @@ $: result = $flowStateStore[flowModule.id]?.previewResult ?? NEVER_TESTED_THIS_F
 			<Toggle
 				disabled
 				options={{
-					right: 'Skip if stopped'
+					right: 'Label flow as "skipped" if stopped'
 				}}
 			/> <span class="text-xs font-bold">Stop condition expression</span>
 			<textarea disabled rows="3" class="min-h-[80px]" />

package/components/flows/content/FlowModuleEarlyStop.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleEarlyStopProps = typeof __propDef.props;
-export declare type FlowModuleEarlyStopEvents = typeof __propDef.events;
-export declare type FlowModuleEarlyStopSlots = typeof __propDef.slots;
+export type FlowModuleEarlyStopProps = typeof __propDef.props;
+export type FlowModuleEarlyStopEvents = typeof __propDef.events;
+export type FlowModuleEarlyStopSlots = typeof __propDef.slots;
 export default class FlowModuleEarlyStop extends SvelteComponentTyped<FlowModuleEarlyStopProps, FlowModuleEarlyStopEvents, FlowModuleEarlyStopSlots> {
 }
 export {};

package/components/flows/content/FlowModuleHeader.svelte

@@ -28,7 +28,10 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			<Icon data={faArrowRotateForward} scale={0.8} />
 		</span>
 		<span
-			class={classNames('badge', Boolean(module.suspend) ? 'badge-on' : 'badge-off')}
+			class={classNames(
+				'badge',
+				Boolean(module.suspend) || Boolean(module.sleep) ? 'badge-on' : 'badge-off'
+			)}
 			on:click={() => dispatch('toggleSuspend')}
 		>
 			<Icon data={faBed} scale={0.8} />
@@ -41,7 +44,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			variant="border"
 			on:click={() => dispatch('fork')}
 			startIcon={{ icon: faCodeBranch }}
-			{iconOnly}
+			iconOnly={false}
 		>
 			Fork
 		</Button>
@@ -54,7 +57,7 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 			variant="border"
 			startIcon={{ icon: faSave }}
 			on:click={() => dispatch('createScriptFromInlineScript')}
-			{iconOnly}
+			iconOnly={false}
 		>
 			Save to workspace
 		</Button>

package/components/flows/content/FlowModuleHeader.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleHeaderProps = typeof __propDef.props;
-export declare type FlowModuleHeaderEvents = typeof __propDef.events;
-export declare type FlowModuleHeaderSlots = typeof __propDef.slots;
+export type FlowModuleHeaderProps = typeof __propDef.props;
+export type FlowModuleHeaderEvents = typeof __propDef.events;
+export type FlowModuleHeaderSlots = typeof __propDef.slots;
 export default class FlowModuleHeader extends SvelteComponentTyped<FlowModuleHeaderProps, FlowModuleHeaderEvents, FlowModuleHeaderSlots> {
 }
 export {};

package/components/flows/content/FlowModuleScript.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleScriptProps = typeof __propDef.props;
-export declare type FlowModuleScriptEvents = typeof __propDef.events;
-export declare type FlowModuleScriptSlots = typeof __propDef.slots;
+export type FlowModuleScriptProps = typeof __propDef.props;
+export type FlowModuleScriptEvents = typeof __propDef.events;
+export type FlowModuleScriptSlots = typeof __propDef.slots;
 export default class FlowModuleScript extends SvelteComponentTyped<FlowModuleScriptProps, FlowModuleScriptEvents, FlowModuleScriptSlots> {
 }
 export {};

package/components/flows/content/FlowModuleSuspend.svelte

@@ -62,8 +62,9 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 
 <h2 class="mt-4"
 	>Sleep<Tooltip>
-		If defined, at the end of the step, the flow will sleep for a number of seconds before being
-		resumed. Sleeping is passive and does not consume any resources.</Tooltip
+		If defined, at the end of the step, the flow will sleep for a number of seconds before
+		scheduling the next job (if any, no effect if the step is the last one). Sleeping is passive and
+		does not consume any resources.</Tooltip
 	></h2
 >
 <Toggle
@@ -96,7 +97,12 @@ $: isSleepEnabled = Boolean(flowModule.sleep);
 					editor?.insertAtCursor(detail)
 				}}
 			>
-				<InputTransformForm bind:arg={flowModule.sleep} argName="sleep" {schema} />
+				<InputTransformForm
+					bind:arg={flowModule.sleep}
+					argName="sleep"
+					{schema}
+					{previousModuleId}
+				/>
 			</PropPickerWrapper>
 		</div>
 	{:else}

package/components/flows/content/FlowModuleSuspend.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleSuspendProps = typeof __propDef.props;
-export declare type FlowModuleSuspendEvents = typeof __propDef.events;
-export declare type FlowModuleSuspendSlots = typeof __propDef.slots;
+export type FlowModuleSuspendProps = typeof __propDef.props;
+export type FlowModuleSuspendEvents = typeof __propDef.events;
+export type FlowModuleSuspendSlots = typeof __propDef.slots;
 export default class FlowModuleSuspend extends SvelteComponentTyped<FlowModuleSuspendProps, FlowModuleSuspendEvents, FlowModuleSuspendSlots> {
 }
 export {};

package/components/flows/content/FlowModuleWrapper.svelte

@@ -34,34 +34,12 @@ export let previousModule = undefined;
 				Steps are retried until they succeed, or until the maximum number of retries defined for that
 				spec is reached, at which point the error handler is called.
 			</Alert>
-		{:else}
-			<h1 class="p-4"
-				>Select a step kind <Tooltip
-					>Until being defined, this step acts as an identify function, returning as result its
-					input and assigning it a key 'previous_result' if the input is not a json object</Tooltip
-				></h1
-			>
 		{/if}
 
 		<FlowInputs
 			shouldDisableTriggerScripts={parentModule !== undefined ||
 				previousModule !== undefined ||
 				$selectedId == 'failure'}
-			on:loop={async () => {
-				const [module, state] = await createLoop(flowModule.id)
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
-			on:branchone={async () => {
-				const [module, state] = await createBranches(flowModule.id)
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
-			on:branchall={async () => {
-				const [module, state] = await createBranchAll(flowModule.id)
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
 			on:pick={async ({ detail }) => {
 				const { path, summary, kind } = detail
 				const [module, state] = await pickScript(path, summary, flowModule.id)

package/components/flows/content/FlowModuleWrapper.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowModuleWrapperProps = typeof __propDef.props;
-export declare type FlowModuleWrapperEvents = typeof __propDef.events;
-export declare type FlowModuleWrapperSlots = typeof __propDef.slots;
+export type FlowModuleWrapperProps = typeof __propDef.props;
+export type FlowModuleWrapperEvents = typeof __propDef.events;
+export type FlowModuleWrapperSlots = typeof __propDef.slots;
 export default class FlowModuleWrapper extends SvelteComponentTyped<FlowModuleWrapperProps, FlowModuleWrapperEvents, FlowModuleWrapperSlots> {
 }
 export {};

package/components/flows/content/FlowRetries.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowRetriesProps = typeof __propDef.props;
-export declare type FlowRetriesEvents = typeof __propDef.events;
-export declare type FlowRetriesSlots = typeof __propDef.slots;
+export type FlowRetriesProps = typeof __propDef.props;
+export type FlowRetriesEvents = typeof __propDef.events;
+export type FlowRetriesSlots = typeof __propDef.slots;
 export default class FlowRetries extends SvelteComponentTyped<FlowRetriesProps, FlowRetriesEvents, FlowRetriesSlots> {
 }
 export {};

package/components/flows/content/FlowSchedules.svelte.d.ts

@@ -6,9 +6,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowSchedulesProps = typeof __propDef.props;
-export declare type FlowSchedulesEvents = typeof __propDef.events;
-export declare type FlowSchedulesSlots = typeof __propDef.slots;
+export type FlowSchedulesProps = typeof __propDef.props;
+export type FlowSchedulesEvents = typeof __propDef.events;
+export type FlowSchedulesSlots = typeof __propDef.slots;
 export default class FlowSchedules extends SvelteComponentTyped<FlowSchedulesProps, FlowSchedulesEvents, FlowSchedulesSlots> {
 }
 export {};

package/components/flows/content/FlowSettings.svelte

@@ -10,7 +10,8 @@ import SvelteMarkdown from 'svelte-markdown';
 import Toggle from '../../Toggle.svelte';
 import { Alert } from '../../common';
 import { FlowGraph } from '../../graph';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { getContext } from 'svelte';
+const { selectedId } = getContext('FlowEditorContext');
 export let initialPath;
 export let defaultTab = 'metadata';
 let topHeight = 0;
@@ -19,106 +20,100 @@ let topHeight = 0;
 <div class="h-full overflow-hidden">
 	<FlowCard title="Settings">
 		<div class="h-full flex-1">
-			<Splitpanes horizontal>
-				<Pane size={50} minSize={20}>
-					<div bind:clientHeight={topHeight} class="max-w-full w-full overflow-hidden h-full">
-						{#if $flowStore.value.modules}
-							<FlowGraph
-								minHeight={topHeight}
-								modules={$flowStore.value.modules}
-								failureModule={$flowStore.value.failure_module}
-							/>
-						{/if}
-					</div>
-				</Pane>
-				<Pane size={50} minSize={20}>
-					<Tabs selected={defaultTab}>
-						<Tab value="metadata">Metadata</Tab>
-						<Tab value="schedule">Schedule</Tab>
-						<Tab value="same-worker">Same Worker</Tab>
+			<Tabs selected={defaultTab}>
+				<Tab value="metadata">Metadata</Tab>
+				<Tab value="schedule">Schedule</Tab>
+				<Tab value="same-worker">Same Worker</Tab>
+				<Tab value="graph">Graph</Tab>
 
-						<svelte:fragment slot="content">
-							<TabContent value="metadata" class="p-4">
-								<Path
-									bind:path={$flowStore.path}
-									{initialPath}
-									namePlaceholder="my_flow"
-									kind="flow"
-								/>
+				<svelte:fragment slot="content">
+					<TabContent value="metadata" class="p-4">
+						<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="my_flow" kind="flow" />
 
-								<label class="block my-4">
-									<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-									<input
-										type="text"
-										bind:value={$flowStore.summary}
-										placeholder="A very short summary of the flow displayed when the flow is listed"
-										rows="1"
-										id="flow-summary"
-									/>
-								</label>
+						<label class="block my-4">
+							<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
+							<input
+								type="text"
+								bind:value={$flowStore.summary}
+								placeholder="A very short summary of the flow displayed when the flow is listed"
+								rows="1"
+								id="flow-summary"
+							/>
+						</label>
 
-								<label class="block my-4" for="inp">
-									<span class="text-gray-700 text-sm">
-										Description
-										<Required required={false} detail="markdown" />
-										<textarea
-											type="text"
-											class="text-sm"
-											id="inp"
-											bind:value={$flowStore.description}
-											placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
-											rows="3"
-										/>
-									</span>
-								</label>
+						<label class="block my-4" for="inp">
+							<span class="text-gray-700 text-sm">
+								Description
+								<Required required={false} detail="markdown" />
+								<textarea
+									type="text"
+									class="text-sm"
+									id="inp"
+									bind:value={$flowStore.description}
+									placeholder="A description to help users understand what this flow does and how to use it. Markdown accepted."
+									rows="3"
+								/>
+							</span>
+						</label>
 
-								<div>
-									<div class="font-bold pb-1 mt-4">Description preview</div>
-									{#if $flowStore.description}
-										<div
-											class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto"
-										>
-											<SvelteMarkdown source={$flowStore.description} />
-										</div>
-									{:else}
-										<div class="text-sm text-gray-500">
-											Enter a description to see the preview
-										</div>
-									{/if}
+						<div>
+							<div class="font-bold pb-1 mt-4">Description preview</div>
+							{#if $flowStore.description}
+								<div class="prose max-h-48 mt-5 text-xs shadow-inner shadow-blue p-4 overflow-auto">
+									<SvelteMarkdown source={$flowStore.description} />
 								</div>
-							</TabContent>
-							<TabContent value="schedule" class="p-4">
-								<Alert type="info" title="Primary Schedule">
-									Flows can be triggered by any schedules, their webhooks or their UI but they only
-									have only one primary schedules with which they share the same path. The primary
-									schedule can be set here.
-								</Alert>
-								<div class="mt-4" />
-								<FlowSchedules />
-							</TabContent>
+							{:else}
+								<div class="text-sm text-gray-500"> Enter a description to see the preview </div>
+							{/if}
+						</div>
+					</TabContent>
+					<TabContent value="schedule" class="p-4">
+						<Alert type="info" title="Primary Schedule">
+							Flows can be triggered by any schedules, their webhooks or their UI but they only have
+							only one primary schedules with which they share the same path. The primary schedule
+							can be set here.
+						</Alert>
+						<div class="mt-4" />
+						<FlowSchedules />
+					</TabContent>
 
-							<TabContent value="same-worker" class="p-4 flex flex-col">
-								<Alert
-									type="info"
-									title="Toggle Same Worker to have all steps be ran on the same worker"
-								>
-									Steps will be run one after the other on the same worker, and will share a folder
-									at `/shared` in which they can store heavier data and pass them to the next step. <br
-									/><br />Beware that the `/shared` folder is not preserved across suspends and
-									sleeps.
-								</Alert>
-								<span class="my-2 text-sm font-bold">Same Worker</span>
-								<Toggle
-									bind:checked={$flowStore.value.same_worker}
-									options={{
-										right: 'Same Worker'
+					<TabContent value="same-worker" class="p-4 flex flex-col">
+						<Alert
+							type="info"
+							title="Toggle Same Worker to have all steps be ran on the same worker"
+						>
+							Steps will be run one after the other on the same worker, and will share a folder at
+							`./shared` in which they can store heavier data and pass them to the next step. <br
+							/><br />Beware that the `./shared` folder is not preserved across suspends and sleeps.
+						</Alert>
+						<span class="my-2 text-sm font-bold">Same Worker</span>
+						<Toggle
+							bind:checked={$flowStore.value.same_worker}
+							options={{
+								right: 'Same Worker'
+							}}
+						/>
+					</TabContent>
+					<TabContent value="graph">
+						<div
+							bind:clientHeight={topHeight}
+							class="max-w-full w-full overflow-hidden h-screen bg-gray-50"
+						>
+							{#if $flowStore.value.modules}
+								<FlowGraph
+									on:click={(e) => {
+										$selectedId = e.detail.id
 									}}
+									minHeight={topHeight}
+									modules={$flowStore.value.modules}
+									failureModule={$flowStore.value.failure_module}
+									notSelectable
 								/>
-							</TabContent>
-						</svelte:fragment>
-					</Tabs>
-				</Pane>
-			</Splitpanes>
+							{/if}
+						</div>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
 		</div>
 	</FlowCard>
 </div>

package/components/flows/content/FlowSettings.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowSettingsProps = typeof __propDef.props;
-export declare type FlowSettingsEvents = typeof __propDef.events;
-export declare type FlowSettingsSlots = typeof __propDef.slots;
+export type FlowSettingsProps = typeof __propDef.props;
+export type FlowSettingsEvents = typeof __propDef.events;
+export type FlowSettingsSlots = typeof __propDef.slots;
 export default class FlowSettings extends SvelteComponentTyped<FlowSettingsProps, FlowSettingsEvents, FlowSettingsSlots> {
 }
 export {};

package/components/flows/content/RemoveStepConfirmationModal.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type RemoveStepConfirmationModalProps = typeof __propDef.props;
-export declare type RemoveStepConfirmationModalEvents = typeof __propDef.events;
-export declare type RemoveStepConfirmationModalSlots = typeof __propDef.slots;
+export type RemoveStepConfirmationModalProps = typeof __propDef.props;
+export type RemoveStepConfirmationModalEvents = typeof __propDef.events;
+export type RemoveStepConfirmationModalSlots = typeof __propDef.slots;
 export default class RemoveStepConfirmationModal extends SvelteComponentTyped<RemoveStepConfirmationModalProps, RemoveStepConfirmationModalEvents, RemoveStepConfirmationModalSlots> {
 }
 export {};