windmill-components 1.46.3 → 1.55.0

package/components/flows/content/FlowModuleWrapper.svelte

@@ -1,15 +1,16 @@
 <script>import { Script } from '../../../gen';
 import { getContext } from 'svelte';
-import FlowBranchesWrapper from './FlowBranchesWrapper.svelte';
 import FlowLoop from './FlowLoop.svelte';
 import FlowModuleComponent from './FlowModuleComponent.svelte';
 import FlowBranchAllWrapper from './FlowBranchAllWrapper.svelte';
 import FlowBranchOneWrapper from './FlowBranchOneWrapper.svelte';
-import { createInlineScriptModule, createLoop, createBranches, pickScript, createBranchAll } from '../flowStateUtils';
+import { createInlineScriptModule, pickFlow, pickScript } from '../flowStateUtils';
 import FlowInputs from './FlowInputs.svelte';
 import { flowStateStore } from '../flowState';
-import Tooltip from '../../Tooltip.svelte';
 import { Alert } from '../../common';
+import FlowInputsFlow from './FlowInputsFlow.svelte';
+import FlowBranchesAllWrapper from './FlowBranchesAllWrapper.svelte';
+import FlowBranchesOneWrapper from './FlowBranchesOneWrapper.svelte';
 const { selectedId } = getContext('FlowEditorContext');
 export let flowModule;
 // These pointers are used to easily access previewArgs of parent module, and previous module
@@ -22,8 +23,10 @@ export let previousModule = undefined;
 {#if flowModule.id === $selectedId}
 	{#if flowModule.value.type === 'forloopflow'}
 		<FlowLoop bind:mod={flowModule} {parentModule} {previousModule} />
-	{:else if flowModule.value.type === 'branchone' || flowModule.value.type === 'branchall'}
-		<FlowBranchesWrapper {previousModule} bind:flowModule {parentModule} />
+	{:else if flowModule.value.type === 'branchone'}
+		<FlowBranchesOneWrapper {previousModule} bind:flowModule />
+	{:else if flowModule.value.type === 'branchall'}
+		<FlowBranchesAllWrapper {previousModule} bind:flowModule />
 	{:else if flowModule.value.type === 'identity'}
 		{#if $selectedId == 'failure'}
 			<Alert type="info" title="Error handlers are triggered upon non recovered errors">
@@ -34,66 +37,62 @@ 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)
+		{#if flowModule.value.flow}
+			<FlowInputsFlow
+				failureModule={$selectedId === 'failure'}
+				on:pick={async ({ detail }) => {
+					const { path, summary } = detail
+					const [module, state] = await pickFlow(path, summary, flowModule.id)
+
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+			/>
+		{:else}
+			<FlowInputs
+				shouldDisableTriggerScripts={parentModule !== undefined ||
+					previousModule !== undefined ||
+					$selectedId == 'failure'}
+				on:pick={async ({ detail }) => {
+					const { path, summary, kind, hash } = detail
+					const [module, state] = await pickScript(path, summary, flowModule.id, hash)
 
-				if (kind == Script.kind.APPROVAL) {
-					module.suspend = { required_events: 1, timeout: 1800 }
-				}
+					if (kind == Script.kind.APPROVAL) {
+						module.suspend = { required_events: 1, timeout: 1800 }
+					}
 
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
-			on:new={async ({ detail }) => {
-				const { language, kind, subkind } = detail
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+				on:new={async ({ detail }) => {
+					const { language, kind, subkind } = detail
 
-				const [module, state] = await createInlineScriptModule(
-					language,
-					kind,
-					subkind,
-					flowModule.id
-				)
+					const [module, state] = await createInlineScriptModule(
+						language,
+						kind,
+						subkind,
+						flowModule.id
+					)
 
-				if (kind == Script.kind.APPROVAL) {
-					module.suspend = { required_events: 1, timeout: 1800 }
-				}
+					if (kind == Script.kind.APPROVAL) {
+						module.suspend = { required_events: 1, timeout: 1800 }
+					}
 
-				flowModule = module
-				$flowStateStore[module.id] = state
-			}}
+					flowModule = module
+					$flowStateStore[module.id] = state
+				}}
+				failureModule={$selectedId === 'failure'}
+			/>
+		{/if}
+	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script' || flowModule.value.type === 'flow'}
+		<FlowModuleComponent
+			bind:flowModule
+			{parentModule}
+			{previousModule}
 			failureModule={$selectedId === 'failure'}
 		/>
-	{:else if flowModule.value.type === 'rawscript' || flowModule.value.type === 'script'}
-		<FlowModuleComponent bind:flowModule {parentModule} {previousModule} />
 	{/if}
 {:else if flowModule.value.type === 'forloopflow'}
 	{#each flowModule.value.modules as submodule, index (index)}
@@ -105,7 +104,10 @@ export let previousModule = undefined;
 	{/each}
 {:else if flowModule.value.type === 'branchone'}
 	{#if $selectedId === `${flowModule?.id}-branch-default`}
-		<div class="p-4 text-sm truncate">Default branch</div>
+		<div class="p-2">
+			<h3 class="mb-4">Default branch</h3>
+			Nothing to configure, this is the default branch if none of the predicates are met.
+		</div>
 	{:else}
 		{#each flowModule.value.default as submodule, index}
 			<svelte:self

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/FlowPathViewer.svelte

@@ -0,0 +1,20 @@
+<script>import Skeleton from '../../common/skeleton/Skeleton.svelte';
+import FlowGraphViewer from '../../FlowGraphViewer.svelte';
+import { FlowService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
+export let path;
+export let noSide = false;
+let flow = undefined;
+async function loadFlow(path) {
+    flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });
+}
+$: path && loadFlow(path);
+</script>
+
+<div class="flex flex-col flex-1 h-full overflow-auto">
+	{#if flow}
+		<FlowGraphViewer {noSide} {flow} />
+	{:else}
+		<Skeleton layout={[[40]]} />
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        path: string;
+        noSide?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowPathViewerProps = typeof __propDef.props;
+export type FlowPathViewerEvents = typeof __propDef.events;
+export type FlowPathViewerSlots = typeof __propDef.slots;
+export default class FlowPathViewer extends SvelteComponentTyped<FlowPathViewerProps, FlowPathViewerEvents, FlowPathViewerSlots> {
+}
+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

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     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

@@ -6,11 +6,11 @@ import Path from '../../Path.svelte';
 import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
-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 +19,97 @@ 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">Shared Directory</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">
+									{$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="Shared Directory">
+							Steps 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">Shared Directoryr</span>
+						<Toggle
+							bind:checked={$flowStore.value.same_worker}
+							options={{
+								right: 'Shared Directory on `./shared`'
+							}}
+						/>
+					</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 {};

package/components/flows/flowState.d.ts

@@ -1,11 +1,11 @@
 import type { Schema } from '../../common';
 import type { Flow } from '../../gen';
-export declare type FlowModuleState = {
+export type FlowModuleState = {
     schema: Schema;
     previewResult?: any;
     previewArgs?: any;
 };
-export declare type FlowState = Record<string, FlowModuleState>;
+export type FlowState = Record<string, FlowModuleState>;
 /**
  * flowStateStore represents the local state of each module indexed by its id.
  * It contains data loaded that are not contained in a Flow object i.e. schemas.

package/components/flows/flowState.js

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import { loadFlowModuleState } from './flowStateUtils';
-import { emptyFlowModuleState, isEmptyFlowModule } from './utils';
+import { emptyFlowModuleState } from './utils';
 /**
  * flowStateStore represents the local state of each module indexed by its id.
  * It contains data loaded that are not contained in a Flow object i.e. schemas.
@@ -33,7 +33,7 @@ async function mapFlowModule(flowModule, modulesState) {
     if (value.type === 'branchone' || value.type === 'branchall') {
         await Promise.all(value.branches.map((branchModule) => mapFlowModules(branchModule.modules, modulesState)));
     }
-    if (isEmptyFlowModule(flowModule)) {
+    if (value.type === 'identity') {
         modulesState[flowModule.id] = emptyFlowModuleState();
     }
     else {

package/components/flows/flowStateUtils.d.ts

@@ -1,21 +1,26 @@
 import type { Schema } from '../../common';
-import { Script, type FlowModule, type PathScript, type RawScript } from '../../gen';
+import { Script, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
 import { type FlowModuleState } from './flowState';
 import { Mutex } from 'async-mutex';
 export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
 export declare const idMutex: Mutex;
+export declare function getNextId(currentKeys: string[]): string;
 export declare function nextId(): string;
-export declare function pickScript(path: string, summary: string, id: string): Promise<[FlowModule & {
+export declare function pickScript(path: string, summary: string, id: string, hash?: string): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;
+export declare function pickFlow(path: string, summary: string, id: string): Promise<[FlowModule & {
+    value: PathFlow;
+}, FlowModuleState]>;
 export declare function createInlineScriptModule(language: RawScript.language, kind: Script.kind, subkind: 'pgsql' | 'flow', id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createLoop(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranches(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function createBranchAll(id: string): Promise<[FlowModule, FlowModuleState]>;
+export declare function createFlow(id: string): Promise<[FlowModule, FlowModuleState]>;
 export declare function fork(flowModule: FlowModule): Promise<[FlowModule & {
     value: RawScript;
 }, FlowModuleState]>;
-export declare function emptyModule(): FlowModule;
+export declare function emptyModule(flow?: boolean): FlowModule;
 export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema): Promise<[FlowModule & {
     value: PathScript;
 }, FlowModuleState]>;

package/components/flows/flowStateUtils.js

@@ -10,7 +10,7 @@ import { Mutex } from 'async-mutex';
 export async function loadFlowModuleState(flowModule) {
     try {
         const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
-        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript') {
+        if (flowModule.value.type == 'script' || flowModule.value.type == 'rawscript' || flowModule.value.type == 'flow') {
             flowModule.value.input_transforms = input_transforms;
         }
         return { schema, previewResult: NEVER_TESTED_THIS_FAR };
@@ -21,11 +21,22 @@ export async function loadFlowModuleState(flowModule) {
     }
 }
 export const idMutex = new Mutex();
+export function getNextId(currentKeys) {
+    const max = currentKeys.reduce((acc, key) => {
+        if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
+            return acc;
+        }
+        else {
+            const num = charsToNumber(key);
+            return Math.max(acc, num + 1);
+        }
+    }, 0);
+    return numberToChars(max);
+}
 // Computes the next available id
 export function nextId() {
     const flowState = get(flowStateStore);
-    const max = Object.keys(flowState)
-        .reduce((acc, key) => {
+    const max = Object.keys(flowState).reduce((acc, key) => {
         if (key === 'failure' || key.includes('branch') || key.includes('loop')) {
             return acc;
         }
@@ -36,10 +47,18 @@ export function nextId() {
     }, 0);
     return numberToChars(max);
 }
-export async function pickScript(path, summary, id) {
+export async function pickScript(path, summary, id, hash) {
+    const flowModule = {
+        id,
+        value: { type: 'script', path, hash, input_transforms: {} },
+        summary
+    };
+    return [flowModule, await loadFlowModuleState(flowModule)];
+}
+export async function pickFlow(path, summary, id) {
     const flowModule = {
         id,
-        value: { type: 'script', path, input_transforms: {} },
+        value: { type: 'flow', path, input_transforms: {} },
         summary
     };
     return [flowModule, await loadFlowModuleState(flowModule)];
@@ -58,7 +77,7 @@ export async function createLoop(id) {
         value: {
             type: 'forloopflow',
             modules: [],
-            iterator: { type: 'javascript', expr: '' },
+            iterator: { type: 'javascript', expr: '["dynamic or static array"]' },
             skip_failures: true
         }
     };
@@ -90,6 +109,19 @@ export async function createBranchAll(id) {
     const flowModuleState = await loadFlowModuleState(branchesFlowModules);
     return [branchesFlowModules, flowModuleState];
 }
+export async function createFlow(id) {
+    const flowFlowModules = {
+        id,
+        value: {
+            type: 'flow',
+            path: '',
+            input_transforms: {},
+        },
+        summary: ''
+    };
+    const flowModuleState = await loadFlowModuleState(flowFlowModules);
+    return [flowFlowModules, flowModuleState];
+}
 export async function fork(flowModule) {
     if (flowModule.value.type !== 'script') {
         throw new Error('Can only fork a script module');
@@ -111,10 +143,10 @@ async function createInlineScriptModuleFromPath(path, id) {
         }
     };
 }
-export function emptyModule() {
+export function emptyModule(flow) {
     return {
         id: nextId(),
-        value: { type: 'identity' }
+        value: { type: 'identity', flow }
     };
 }
 export async function createScriptFromInlineScript(flowModule, suffix, schema) {
@@ -133,7 +165,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
     const forkedDescription = wasForked ? `as a fork of ${originalScriptPath}` : '';
     const description = `This script was edited in place of flow ${flow.path} ${forkedDescription} by ${user?.username}.`;
     const availablePath = await findNextAvailablePath(path);
-    await ScriptService.createScript({
+    const hash = await ScriptService.createScript({
         workspace: get(workspaceStore),
         requestBody: {
             path: availablePath,
@@ -146,7 +178,7 @@ export async function createScriptFromInlineScript(flowModule, suffix, schema) {
             language: flowModule.value.language
         }
     });
-    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id);
+    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
 }
 export function deleteFlowStateById(id) {
     flowStateStore.update((fss) => {