windmill-components 1.86.0 → 1.89.0

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

@@ -0,0 +1,132 @@
+<script>import Tabs from '../../common/tabs/Tabs.svelte';
+import Tab from '../../common/tabs/Tab.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import Path from '../../Path.svelte';
+import Required from '../../Required.svelte';
+import FlowCard from '../common/FlowCard.svelte';
+import FlowSchedules from './FlowSchedules.svelte';
+import Toggle from '../../Toggle.svelte';
+import { Alert } from '../../common';
+import { getContext } from 'svelte';
+import autosize from 'svelte-autosize';
+import Slider from '../../Slider.svelte';
+import { page } from '$app/stores';
+import { workspaceStore } from '../../../stores';
+import { copyToClipboard } from '../../../utils';
+import { Icon } from 'svelte-awesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
+const { selectedId, flowStore } = getContext('FlowEditorContext');
+export let initialPath;
+$: url = `${$page.url.hostname}/api/w/${$workspaceStore}/jobs/run/f/${$flowStore?.path}`;
+</script>
+
+<div class="h-full overflow-hidden">
+	<FlowCard title="Settings">
+		<div class="h-full flex-1">
+			<Tabs bind:selected={$selectedId}>
+				<Tab value="settings-metadata">Metadata</Tab>
+				<Tab value="settings-schedule">Schedule</Tab>
+				<Tab value="settings-same-worker">Shared Directory</Tab>
+
+				<svelte:fragment slot="content">
+					<TabContent value="settings-metadata" class="p-4 h-full">
+						<div class="overflow-auto h-full">
+							<Path bind:path={$flowStore.path} {initialPath} namePlaceholder="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="Short summary to be displayed when listed"
+									id="flow-summary"
+								/>
+							</label>
+
+							<label class="block my-4" for="inp">
+								<span class="text-gray-700 text-sm">
+									Description
+									<Required required={false} />
+									<textarea
+										use:autosize
+										type="text"
+										class="text-sm"
+										id="inp"
+										bind:value={$flowStore.description}
+										placeholder="What this flow does and how to use it."
+										rows="3"
+									/>
+								</span>
+							</label>
+							<Slider text="How to trigger from external events?">
+								<div class="text-sm text-gray-600 border p-4">
+									There are 2 ways to trigger a flow based on external events:
+									<ul class="pt-4">
+										<li
+											>1. Send a webhook after each event: <a
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(url)
+												}}
+												href={$page.url.protocol + '//' + url}
+												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
+											>
+												{url}
+												<span class="text-gray-700 ml-2">
+													<Icon data={faClipboard} />
+												</span>
+											</a>
+										</li>
+										<li class="mt-2">
+											<div class="flex flex-col gap-2">
+												<p>
+													2. Use a trigger script and schedule this flow to run as frequently as
+													needed and compare a state persisted in Windmill to the state of the
+													external system. If a difference is detected, then the rest of the flow is
+													triggered. Oftentimes, the second step of a flow is a for-loop that will
+													iterate over every elements. When using a trigger, a default schedule will
+													be created.
+												</p>
+												<div>
+													<img
+														class="shadow-lg border rounded"
+														alt="static button"
+														src="/trigger_button.png"
+													/>
+												</div>
+											</div>
+										</li></ul
+									>
+								</div>
+							</Slider>
+						</div>
+					</TabContent>
+					<TabContent value="settings-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="settings-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 Directory</span>
+						<Toggle
+							bind:checked={$flowStore.value.same_worker}
+							options={{
+								right: 'Shared Directory on `./shared`'
+							}}
+						/>
+					</TabContent>
+				</svelte:fragment>
+			</Tabs>
+		</div>
+	</FlowCard>
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        initialPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    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/package/components/flows/content/RemoveStepConfirmationModal.svelte

@@ -0,0 +1,31 @@
+<script>import Alert from '../../common/alert/Alert.svelte';
+import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
+import { createEventDispatcher } from 'svelte';
+export let open;
+const dispatch = createEventDispatcher();
+</script>
+
+<ConfirmationModal
+	{open}
+	title="Remove step"
+	confirmationText="Remove"
+	on:canceled={() => {
+		open = false
+		dispatch('canceled')
+	}}
+	on:confirmed={() => {
+		open = false
+		dispatch('confirmed')
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this step?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<kbd color="dark-gray">SHIFT</kbd>
+				while removing a step to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open: boolean;
+    };
+    events: {
+        canceled: CustomEvent<any>;
+        confirmed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    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/package/components/flows/content/ScriptEditorDrawer.svelte

@@ -0,0 +1,99 @@
+<script>import { Button, Drawer, DrawerContent } from '../../common';
+import ScriptEditor from '../../ScriptEditor.svelte';
+import { ScriptService } from '../../../gen';
+import { inferArgs } from '../../../infer';
+import { workspaceStore } from '../../../stores';
+import { emptySchema, sendUserToast } from '../../../utils';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { Loader2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+let scriptEditorDrawer;
+const dispatch = createEventDispatcher();
+export async function openDrawer(hash, cb) {
+    script = undefined;
+    scriptEditorDrawer.openDrawer?.();
+    script = await ScriptService.getScriptByHash({
+        workspace: $workspaceStore,
+        hash
+    });
+    callback = cb;
+}
+let callback = undefined;
+let script = undefined;
+async function saveScript() {
+    if (script) {
+        try {
+            script.schema = script.schema ?? emptySchema();
+            try {
+                await inferArgs(script.language, script.content, script.schema);
+            }
+            catch (error) {
+                sendUserToast(`Impossible to infer the schema. Assuming this is a script without main function`, true);
+            }
+            await ScriptService.createScript({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: script.path,
+                    summary: script.summary,
+                    description: script.description ?? '',
+                    content: script.content,
+                    parent_hash: script.hash != '' ? script.hash : undefined,
+                    schema: script.schema,
+                    is_template: false,
+                    language: script.language,
+                    kind: script.kind
+                }
+            });
+            callback?.();
+        }
+        catch (error) {
+            sendUserToast(`Impossible to save the script: ${error.body}`, true);
+        }
+    }
+}
+</script>
+
+<Drawer bind:this={scriptEditorDrawer} size="1200px">
+	<DrawerContent
+		title="Script Editor"
+		noPadding
+		forceOverflowVisible
+		on:close={() => {
+			scriptEditorDrawer.closeDrawer()
+		}}
+	>
+		{#if script}
+			{#key script.hash}
+				<ScriptEditor
+					noSyncFromGithub
+					lang={script.language}
+					path={script.path}
+					fixedOverflowWidgets={false}
+					bind:code={script.content}
+					bind:schema={script.schema}
+					tag={undefined}
+				/>
+			{/key}
+		{:else}
+			<div
+				out:fade={{ duration: 200 }}
+				class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+			>
+				<Loader2 class="animate-spin" size={16} />
+				<span class="text-xs mt-1">Loading</span>
+			</div>
+		{/if}
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={async () => {
+					await saveScript()
+					dispatch('save')
+					scriptEditorDrawer.closeDrawer()
+				}}
+				disabled={!script}
+				startIcon={{ icon: faSave }}>Save</Button
+			>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        openDrawer?: ((hash: string, cb: () => void) => Promise<void>) | undefined;
+    };
+    events: {
+        save: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptEditorDrawerProps = typeof __propDef.props;
+export type ScriptEditorDrawerEvents = typeof __propDef.events;
+export type ScriptEditorDrawerSlots = typeof __propDef.slots;
+export default class ScriptEditorDrawer extends SvelteComponentTyped<ScriptEditorDrawerProps, ScriptEditorDrawerEvents, ScriptEditorDrawerSlots> {
+    get openDrawer(): (hash: string, cb: () => void) => Promise<void>;
+}
+export {};

package/package/components/flows/flowState.d.ts

@@ -0,0 +1,15 @@
+import type { Schema } from '../../common';
+import type { Flow } from '../../gen';
+import type { Writable } from 'svelte/store';
+export type FlowModuleState = {
+    schema: Schema;
+    previewResult?: any;
+    previewArgs?: any;
+};
+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.
+ * We also hold the data of the results of a test job, ran by the user.
+ */
+export declare function initFlowState(flow: Flow, flowStateStore: Writable<FlowState>): Promise<void>;

package/package/components/flows/flowState.js

@@ -0,0 +1,44 @@
+import { loadFlowModuleState } from './flowStateUtils';
+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.
+ * We also hold the data of the results of a test job, ran by the user.
+ */
+export async function initFlowState(flow, flowStateStore) {
+    const modulesState = {};
+    await mapFlowModules(flow.value.modules, modulesState);
+    const failureModule = flow.value.failure_module
+        ? await loadFlowModuleState(flow.value.failure_module)
+        : emptyFlowModuleState();
+    flowStateStore.set({
+        ...modulesState,
+        failure: failureModule
+    });
+}
+/**
+ * mapFlowModule recursively explore the flow, following deeply nested loop and branches modules
+ * to build the initial state.
+ */
+async function mapFlowModule(flowModule, modulesState) {
+    const value = flowModule.value;
+    if (value.type === 'forloopflow') {
+        await mapFlowModules(value.modules, modulesState);
+    }
+    if (value.type === 'branchone') {
+        await mapFlowModules(value.default, modulesState);
+    }
+    if (value.type === 'branchone' || value.type === 'branchall') {
+        await Promise.all(value.branches.map((branchModule) => mapFlowModules(branchModule.modules, modulesState)));
+    }
+    if (value.type === 'identity') {
+        modulesState[flowModule.id] = emptyFlowModuleState();
+    }
+    else {
+        const flowModuleState = await loadFlowModuleState(flowModule);
+        modulesState[flowModule.id] = flowModuleState;
+    }
+}
+async function mapFlowModules(flowModules, modulesState) {
+    await Promise.all(flowModules.map((flowModule) => mapFlowModule(flowModule, modulesState)));
+}

package/package/components/flows/flowStateUtils.d.ts

@@ -0,0 +1,25 @@
+import type { Schema } from '../../common';
+import { Script, type Flow, type FlowModule, type PathFlow, type PathScript, type RawScript } from '../../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowModuleState, FlowState } from './flowState';
+export declare function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState>;
+export declare function nextId(flowState: FlowState): string;
+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(flowState: FlowState, flow?: boolean): FlowModule;
+export declare function createScriptFromInlineScript(flowModule: FlowModule, suffix: string, schema: Schema, flow: Flow): Promise<[FlowModule & {
+    value: PathScript;
+}, FlowModuleState]>;
+export declare function deleteFlowStateById(id: string, flowStateStore: Writable<FlowState>): void;

package/package/components/flows/flowStateUtils.js

@@ -0,0 +1,173 @@
+import { Script, ScriptService } from '../../gen';
+import { initialCode } from '../../script_helpers';
+import { userStore, workspaceStore } from '../../stores';
+import { getScriptByPath } from '../../utils';
+import { get } from 'svelte/store';
+import { charsToNumber, numberToChars } from './idUtils';
+import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule, NEVER_TESTED_THIS_FAR } from './utils';
+export async function loadFlowModuleState(flowModule) {
+    try {
+        const { input_transforms, schema } = await loadSchemaFromModule(flowModule);
+        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 };
+    }
+    catch (e) {
+        console.error(e);
+        return emptyFlowModuleState();
+    }
+}
+// Computes the next available id
+export function nextId(flowState) {
+    const max = Object.keys(flowState).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);
+}
+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: 'flow', path, input_transforms: {} },
+        summary
+    };
+    return [flowModule, await loadFlowModuleState(flowModule)];
+}
+export async function createInlineScriptModule(language, kind, subkind, id) {
+    const code = initialCode(language, kind, subkind);
+    const flowModule = {
+        id,
+        value: { type: 'rawscript', content: code, language, input_transforms: {} }
+    };
+    return [flowModule, await loadFlowModuleState(flowModule)];
+}
+export async function createLoop(id) {
+    const loopFlowModule = {
+        id,
+        value: {
+            type: 'forloopflow',
+            modules: [],
+            iterator: { type: 'javascript', expr: '["dynamic or static array"]' },
+            skip_failures: true
+        }
+    };
+    const flowModuleState = await loadFlowModuleState(loopFlowModule);
+    return [loopFlowModule, flowModuleState];
+}
+export async function createBranches(id) {
+    const branchesFlowModules = {
+        id,
+        value: {
+            type: 'branchone',
+            branches: [],
+            default: []
+        },
+        summary: ''
+    };
+    const flowModuleState = await loadFlowModuleState(branchesFlowModules);
+    return [branchesFlowModules, flowModuleState];
+}
+export async function createBranchAll(id) {
+    const branchesFlowModules = {
+        id,
+        value: {
+            type: 'branchall',
+            branches: []
+        },
+        summary: ''
+    };
+    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');
+    }
+    const forkedFlowModule = await createInlineScriptModuleFromPath(flowModule.value.path ?? '', flowModule.id);
+    const flowModuleState = await loadFlowModuleState(forkedFlowModule);
+    return [forkedFlowModule, flowModuleState];
+}
+async function createInlineScriptModuleFromPath(path, id) {
+    const { content, language } = await getScriptByPath(path);
+    return {
+        id,
+        value: {
+            type: 'rawscript',
+            language: language,
+            content: content,
+            path,
+            input_transforms: {}
+        }
+    };
+}
+export function emptyModule(flowState, flow) {
+    return {
+        id: nextId(flowState),
+        value: { type: 'identity', flow }
+    };
+}
+export async function createScriptFromInlineScript(flowModule, suffix, schema, flow) {
+    const user = get(userStore);
+    if (flowModule.value.type != 'rawscript') {
+        throw new Error("Can't create script from non-inline script");
+    }
+    const originalScriptPath = flowModule.value.path;
+    const wasForked = Boolean(originalScriptPath);
+    if (wasForked && originalScriptPath) {
+        const [_first, _second, ...others] = originalScriptPath.split('/');
+        suffix = others.join('/');
+    }
+    const path = `${flow.path}/${suffix}`;
+    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);
+    const hash = await ScriptService.createScript({
+        workspace: get(workspaceStore),
+        requestBody: {
+            path: availablePath,
+            summary: flowModule.summary ?? '',
+            description,
+            content: flowModule.value.content,
+            parent_hash: undefined,
+            schema,
+            is_template: false,
+            language: flowModule.value.language
+        }
+    });
+    return pickScript(availablePath, flowModule.summary ?? '', flowModule.id, hash);
+}
+export function deleteFlowStateById(id, flowStateStore) {
+    flowStateStore.update((fss) => {
+        delete fss[id];
+        return fss;
+    });
+}

package/package/components/flows/flowStore.d.ts

@@ -0,0 +1,8 @@
+import type { Flow, FlowModule } from '../../gen';
+import { type Writable } from 'svelte/store';
+import { type FlowState } from './flowState';
+export type FlowMode = 'push' | 'pull';
+export declare const importFlowStore: Writable<Flow | undefined>;
+export declare function dfs<T>(modules: FlowModule[], f: (x: FlowModule) => T): T[];
+export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
+export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<Flow>): Promise<void>;

package/package/components/flows/flowStore.js

@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+import { initFlowState } from './flowState';
+export const importFlowStore = writable(undefined);
+export function dfs(modules, f) {
+    let result = [];
+    for (const module of modules) {
+        if (module.value.type == 'forloopflow') {
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.modules, f));
+        }
+        else if (module.value.type == 'branchone') {
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches
+                .map((b) => b.modules)
+                .flat()
+                .concat(module.value.default), f));
+        }
+        else if (module.value.type == 'branchall') {
+            result = result.concat(f(module));
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat(), f));
+        }
+        else {
+            result.push(f(module));
+        }
+    }
+    return result;
+}
+export async function initFlow(flow, flowStore, flowStateStore) {
+    await initFlowState(flow, flowStateStore);
+    flowStore.set(flow);
+}
+export async function copyFirstStepSchema(flowState, flowStore) {
+    flowStore.update((flow) => {
+        const firstModuleId = flow.value.modules[0]?.id;
+        if (flowState[firstModuleId] && firstModuleId) {
+            flow.schema = flowState[firstModuleId].schema;
+            const v = flow.value.modules[0].value;
+            if (v.type == 'rawscript' || v.type == 'script') {
+                Object.keys(v.input_transforms ?? {}).forEach((key) => {
+                    v.input_transforms[key] = {
+                        type: 'javascript',
+                        expr: `flow_input.${key}`
+                    };
+                });
+            }
+        }
+        return flow;
+    });
+}

package/package/components/flows/header/FlowImportExportMenu.svelte

@@ -0,0 +1,30 @@
+<script>import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import FlowViewer from '../../FlowViewer.svelte';
+import { faFileExport } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { Button } from '../../common';
+import { cleanInputs } from '../utils';
+const { flowStore } = getContext('FlowEditorContext');
+let jsonViewerDrawer;
+</script>
+
+<Button
+	btnClasses="mr-2"
+	size="xs"
+	variant="border"
+	color="light"
+	on:click={() => jsonViewerDrawer.toggleDrawer()}
+>
+	<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+	Export JSON
+</Button>
+
+<Drawer bind:this={jsonViewerDrawer} size="800px">
+	<DrawerContent title="OpenFlow JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+		{#if $flowStore}
+			<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
+		{/if}
+	</DrawerContent>
+</Drawer>