windmill-components 1.83.0 → 1.83.2

package/components/ArgInput.svelte

@@ -140,6 +140,7 @@ $: {
 }
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let redraw = 0;
+let itemsLimit = 50;
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
@@ -249,34 +250,41 @@ let redraw = 0;
 						{#key redraw}
 							{#if Array.isArray(value)}
 								{#each value ?? [] as v, i}
-									<div class="flex max-w-md mt-1 w-full items-center">
-										{#if itemsType?.type == 'number'}
-											<input type="number" bind:value={v} />
-										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-											<input
-												type="file"
-												class="my-6"
-												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-												multiple={false}
-											/>
-										{:else if itemsType?.type == 'object'}
-											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-										{:else}
-											<input type="text" bind:value={v} />
-										{/if}
-										<button
-											transition:fade|local={{ duration: 100 }}
-											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
-											aria-label="Clear"
-											on:click={() => {
-												value.splice(i, 1)
-												redraw += 1
-											}}
-										>
-											<X size={14} />
-										</button>
-									</div>
+									{#if i < itemsLimit}
+										<div class="flex max-w-md mt-1 w-full items-center">
+											{#if itemsType?.type == 'number'}
+												<input type="number" bind:value={v} />
+											{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+												<input
+													type="file"
+													class="my-6"
+													on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+													multiple={false}
+												/>
+											{:else if itemsType?.type == 'object'}
+												<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+											{:else}
+												<input type="text" bind:value={v} />
+											{/if}
+											<button
+												transition:fade|local={{ duration: 100 }}
+												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+												aria-label="Clear"
+												on:click={() => {
+													value.splice(i, 1)
+													redraw += 1
+												}}
+											>
+												<X size={14} />
+											</button>
+										</div>
+									{/if}
 								{/each}
+								{#if value.length > itemsLimit}
+									<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+										>{itemsLimit}/{value.length}: Load 50 more...</button
+									>
+								{/if}
 							{/if}
 						{/key}
 					</div>

package/components/DisplayResult.svelte

@@ -8,6 +8,7 @@ import { ClipboardCopy } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 export let result;
 export let requireHtmlApproval = false;
+export let filename = undefined;
 let resultKind;
 $: resultKind = inferResultKind(result);
 let forceJson = false;
@@ -214,7 +215,15 @@ let jsonViewer;
 				>
 			</div>
 		{:else}
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+			{#if jsonStr.length > 10000}
+				JSON too large. <a
+					download="{filename ?? 'result'}.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+				>
+			{:else}
+				<Highlight language={json} code={jsonStr} />
+			{/if}
 		{/if}
 	{:else}
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>

package/components/DisplayResult.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         result: any;
         requireHtmlApproval?: boolean | undefined;
+        filename?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowGraphViewer.svelte

@@ -34,11 +34,7 @@ let topHeight = 0;
 				</div>
 				<div class="text-2xs mb-4">
 					<h3 class="mb-2">Step Inputs</h3>
-					<InputTransformsViewer
-						inputTransforms={stepDetail?.value?.input_transforms ??
-							stepDetail?.input_transforms ??
-							{}}
-					/>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 				{#if stepDetail.value.path.startsWith('hub/')}
 					<div class="mt-6">
@@ -54,11 +50,7 @@ let topHeight = 0;
 			{:else if stepDetail.value.type == 'rawscript'}
 				<div class="text-2xs mb-4">
 					<h3 class="mb-2">Step Inputs</h3>
-					<InputTransformsViewer
-						inputTransforms={stepDetail?.value?.input_transforms ??
-							stepDetail?.input_transforms ??
-							{}}
-					/>
+					<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 				</div>
 
 				<h3 class="mb-2">Code</h3>
@@ -107,11 +99,7 @@ let topHeight = 0;
 				{:else if stepDetail.value.type == 'rawscript'}
 					<div class="text-2xs mb-4">
 						<h3 class="mb-2">Step Inputs</h3>
-						<InputTransformsViewer
-							inputTransforms={stepDetail?.value?.input_transforms ??
-								stepDetail?.input_transforms ??
-								{}}
-						/>
+						<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 					</div>
 
 					<h3 class="mb-2"
@@ -135,11 +123,7 @@ let topHeight = 0;
 					</div>
 					<div class="text-2xs mb-4">
 						<h3 class="mb-2">Step Inputs</h3>
-						<InputTransformsViewer
-							inputTransforms={stepDetail?.value?.input_transforms ??
-								stepDetail?.input_transforms ??
-								{}}
-						/>
+						<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
 					</div>
 					{#if stepDetail.value.path.startsWith('hub/')}
 						<div class="mt-6">

package/components/FlowJobResult.svelte

@@ -6,6 +6,7 @@ export let logs;
 export let col = false;
 export let noBorder = false;
 export let loading;
+export let filename = undefined;
 </script>
 
 <div
@@ -15,7 +16,7 @@ export let loading;
 	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		{#if result}
-			<DisplayResult {result} />
+			<DisplayResult {filename} {result} />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}

package/components/FlowJobResult.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         col?: boolean | undefined;
         noBorder?: boolean | undefined;
         loading: any;
+        filename?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowStatusViewer.svelte

@@ -440,6 +440,7 @@ function isSuccess(arg) {
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
 							<FlowJobResult
+								filename={job.id}
 								loading={job['running']}
 								noBorder
 								col

package/components/Range.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Range extends SvelteComponentTyped<{
     value?: number | undefined;
     id?: null | undefined;
-    min?: number | undefined;
     max?: number | undefined;
+    min?: number | undefined;
     initialValue?: number | undefined;
 }, {
     pointerdown: PointerEvent;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         value?: number | undefined;
         id?: null | undefined;
-        min?: number | undefined;
         max?: number | undefined;
+        min?: number | undefined;
         initialValue?: number | undefined;
     };
     events: {

package/components/RunForm.svelte

@@ -6,7 +6,7 @@ import SchemaForm from './SchemaForm.svelte';
 import { Badge, Button } from './common';
 import SharedBadge from './SharedBadge.svelte';
 import Toggle from './Toggle.svelte';
-import { userStore } from '../stores';
+import { runFormStore, userStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
 import CliHelpBox from './CliHelpBox.svelte';
 import InlineCodeCopy from './InlineCodeCopy.svelte';
@@ -21,7 +21,11 @@ export let loading = false;
 export let noVariablePicker = false;
 export let viewCliRun = false;
 export let isFlow;
-export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
+export let args = {};
+if ($runFormStore) {
+    args = $runFormStore;
+    $runFormStore = undefined;
+}
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
 }

package/components/ScriptBuilder.svelte

@@ -21,6 +21,7 @@ export let initialPath = '';
 export let template = 'script';
 export let initialArgs = {};
 export let lockedLanguage = false;
+export let topHash = undefined;
 const langs = [
     ['Typescript', Script.language.DENO],
     ['Python', Script.language.PYTHON3],
@@ -70,7 +71,7 @@ async function editScript(leave) {
             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);
+            sendUserToast(`The main signature was not parsable. This script is considered to be without main function`);
         }
         const newHash = await ScriptService.createScript({
             workspace: $workspaceStore,
@@ -79,7 +80,7 @@ async function editScript(leave) {
                 summary: script.summary,
                 description: script.description ?? '',
                 content: script.content,
-                parent_hash: script.hash != '' ? script.hash : undefined,
+                parent_hash: script.hash != '' ? topHash ?? script.hash : undefined,
                 schema: script.schema,
                 is_template: script.is_template,
                 language: script.language,
@@ -93,10 +94,11 @@ async function editScript(leave) {
         else {
             await goto(`/scripts/edit/${newHash}?step=2`);
             script.hash = newHash;
+            topHash = undefined;
         }
     }
     catch (error) {
-        sendUserToast(`Impossible to save the script: ${error.body || error.message}`, true);
+        sendUserToast(`Error while saving the script: ${error.body || error.message}`, true);
     }
     loadingSave = false;
 }
@@ -107,7 +109,7 @@ async function changeStep(step) {
             await inferArgs(script.language, script.content, script.schema);
         }
         catch (error) {
-            console.info('Impossible to infer the schema. Assuming this is a script without main function');
+            console.info('The main signature was not parsable. This script is considered to be without main function');
         }
     }
     goto(`?step=${step}`);

package/components/ScriptBuilder.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         template?: "script" | "pgsql" | "mysql" | undefined;
         initialArgs?: Record<string, any> | undefined;
         lockedLanguage?: boolean | undefined;
+        topHash?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/TemplateEditor.svelte.d.ts

@@ -1 +1,206 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        conf?: {
+            wordPattern: RegExp;
+            comments: {
+                lineComment: string;
+                blockComment: [string, string];
+            };
+            brackets: [string, string][];
+            onEnterRules: never[];
+            autoClosingPairs: ({
+                open: string;
+                close: string;
+                notIn?: undefined;
+            } | {
+                open: string;
+                close: string;
+                notIn: string[];
+            })[];
+            folding: {
+                markers: {
+                    start: RegExp;
+                    end: RegExp;
+                };
+            };
+        } | undefined;
+        language?: {
+            defaultToken: string;
+            tokenPostfix: string;
+            keywords: string[];
+            operators: string[];
+            symbols: RegExp;
+            escapes: RegExp;
+            digits: RegExp;
+            octaldigits: RegExp;
+            binarydigits: RegExp;
+            hexdigits: RegExp;
+            regexpctl: RegExp;
+            regexpesc: RegExp;
+            tokenizer: {
+                root: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                })[])[];
+                common: ((string | RegExp)[] | (RegExp | {
+                    cases: {
+                        '@keywords': string;
+                        '@default': string;
+                    };
+                })[] | {
+                    include: string;
+                } | (RegExp | {
+                    token: string;
+                    bracket: string;
+                    next: string;
+                })[] | (RegExp | {
+                    cases: {
+                        '@operators': string;
+                        '@default': string;
+                    };
+                })[])[];
+                whitespace: (string | RegExp)[][];
+                comment: (string | RegExp)[][];
+                jsdoc: (string | RegExp)[][];
+                regexp: ((string | RegExp)[] | (RegExp | (string | {
+                    token: string;
+                    next: string;
+                })[])[] | (RegExp | (string | {
+                    token: string;
+                    bracket: string;
+                    next: string;
+                })[])[])[];
+                regexrange: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                    bracket: string;
+                })[])[];
+                string_double: (string | RegExp)[][];
+                string_single: (string | RegExp)[][];
+                string_backtick: ((string | RegExp)[] | (RegExp | {
+                    token: string;
+                    next: string;
+                })[])[];
+                bracketCounting: ((string | RegExp)[] | {
+                    include: string;
+                })[];
+            };
+        } | undefined;
+        code?: string | undefined;
+        hash?: string | undefined;
+        automaticLayout?: boolean | undefined;
+        extraLib?: string | undefined;
+        autoHeight?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        fontSize?: number | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        setCode?: ((ncode: string) => void) | undefined;
+        getCode?: (() => string) | undefined;
+        focus?: (() => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TemplateEditorProps = typeof __propDef.props;
+export type TemplateEditorEvents = typeof __propDef.events;
+export type TemplateEditorSlots = typeof __propDef.slots;
+export default class TemplateEditor extends SvelteComponentTyped<TemplateEditorProps, TemplateEditorEvents, TemplateEditorSlots> {
+    get conf(): {
+        wordPattern: RegExp;
+        comments: {
+            lineComment: string;
+            blockComment: [string, string];
+        };
+        brackets: [string, string][];
+        onEnterRules: never[];
+        autoClosingPairs: ({
+            open: string;
+            close: string;
+            notIn?: undefined;
+        } | {
+            open: string;
+            close: string;
+            notIn: string[];
+        })[];
+        folding: {
+            markers: {
+                start: RegExp;
+                end: RegExp;
+            };
+        };
+    };
+    get language(): {
+        defaultToken: string;
+        tokenPostfix: string;
+        keywords: string[];
+        operators: string[];
+        symbols: RegExp;
+        escapes: RegExp;
+        digits: RegExp;
+        octaldigits: RegExp;
+        binarydigits: RegExp;
+        hexdigits: RegExp;
+        regexpctl: RegExp;
+        regexpesc: RegExp;
+        tokenizer: {
+            root: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+            })[])[];
+            common: ((string | RegExp)[] | (RegExp | {
+                cases: {
+                    '@keywords': string;
+                    '@default': string;
+                };
+            })[] | {
+                include: string;
+            } | (RegExp | {
+                token: string;
+                bracket: string;
+                next: string;
+            })[] | (RegExp | {
+                cases: {
+                    '@operators': string;
+                    '@default': string;
+                };
+            })[])[];
+            whitespace: (string | RegExp)[][];
+            comment: (string | RegExp)[][];
+            jsdoc: (string | RegExp)[][];
+            regexp: ((string | RegExp)[] | (RegExp | (string | {
+                token: string;
+                next: string;
+            })[])[] | (RegExp | (string | {
+                token: string;
+                bracket: string;
+                next: string;
+            })[])[])[];
+            regexrange: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+                bracket: string;
+            })[])[];
+            string_double: (string | RegExp)[][];
+            string_single: (string | RegExp)[][];
+            string_backtick: ((string | RegExp)[] | (RegExp | {
+                token: string;
+                next: string;
+            })[])[];
+            bracketCounting: ((string | RegExp)[] | {
+                include: string;
+            })[];
+        };
+    };
+    get insertAtCursor(): (code: string) => void;
+    get setCode(): (ncode: string) => void;
+    get getCode(): () => string;
+    get focus(): () => void;
+}
 export {};

package/components/apps/components/display/PlotlyHtml.svelte

@@ -1,4 +1,5 @@
-<script>import { getContext, onMount } from 'svelte';
+<script>import { Alert } from '../../../common';
+import { getContext, onMount } from 'svelte';
 import { initConfig, initOutput } from '../../editor/appUtils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
@@ -24,18 +25,23 @@ onMount(async () => {
 });
 let h = undefined;
 let w = undefined;
-$: Plotly &&
-    render &&
-    result &&
-    divEl &&
-    h &&
-    w &&
-    Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
-        width: w,
-        height: h,
-        margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
-        ...resolvedConfig.layout
-    }, { responsive: true, displayModeBar: false });
+$: Plotly && render && result && divEl && h && w && plot();
+let error = '';
+function plot() {
+    try {
+        Plotly.newPlot(divEl, Array.isArray(result) ? result : [result], {
+            width: w,
+            height: h,
+            margin: { l: 50, r: 40, b: 40, t: 40, pad: 4 },
+            ...resolvedConfig.layout
+        }, { responsive: true, displayModeBar: false });
+        error = '';
+    }
+    catch (e) {
+        error = e.message;
+        console.error(e);
+    }
+}
 </script>
 
 {#each Object.keys(components['plotlycomponent'].initialData.configuration) as key (key)}
@@ -49,6 +55,13 @@ $: Plotly &&
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
 	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+		{#if error != ''}
+			<div class="flex flex-col h-full w-full overflow-auto">
+				<Alert title="Plotly error" type="error" size="xs" class="h-full w-full ">
+					<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap">{error}</pre>
+				</Alert>
+			</div>
+		{/if}
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -2,11 +2,12 @@
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { getContext, onMount } from 'svelte';
-import InputValue from '../../helpers/InputValue.svelte';
 import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { isObject } from '../../../../../utils';
 import Alert from '../../../../common/alert/Alert.svelte';
-import { initOutput } from '../../../editor/appUtils';
+import { initConfig, initOutput } from '../../../editor/appUtils';
+import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+import { components } from '../../../editor/component';
 export let id;
 export let componentInput;
 export let configuration;
@@ -14,11 +15,14 @@ export let initializing = undefined;
 export let render;
 let result = undefined;
 const { worldStore, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['aggridcomponent'].initialData.configuration, configuration);
 let outputs = initOutput($worldStore, id, {
     selectedRowIndex: 0,
     selectedRow: {},
     result: [],
-    loading: false
+    loading: false,
+    page: 0,
+    newChange: { row: 0, column: '', value: undefined }
 });
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
@@ -42,10 +46,6 @@ $: selectedRowIndex === -1 &&
 $: outputs?.result?.set(result ?? []);
 let clientHeight;
 let clientWidth;
-let columnDefs = undefined;
-let allEditable = undefined;
-let pagination = undefined;
-let pageSize = 10;
 function onCellValueChanged(event) {
     if (result) {
         let dataCell = event.newValue;
@@ -53,15 +53,24 @@ function onCellValueChanged(event) {
             dataCell = JSON.parse(dataCell);
         }
         catch (e) { }
-        result[event.node.rowIndex][event.column.colId] = dataCell;
+        outputs?.newChange?.set({
+            row: event.node.rowIndex,
+            column: event.colDef.field,
+            value: dataCell
+        });
+        result[event.node.rowIndex][event.colDef.field] = dataCell;
     }
 }
 </script>
 
-<InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
-<InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
-<InputValue {id} input={configuration.pagination} bind:value={pagination} />
-<InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
+{#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
@@ -78,13 +87,16 @@ function onCellValueChanged(event) {
 				style:width="{clientWidth}px"
 				class="ag-theme-alpine"
 			>
-				{#key pagination}
+				{#key resolvedConfig?.pagination}
 					<AgGridSvelte
 						bind:rowData={result}
-						{columnDefs}
-						{pagination}
-						paginationPageSize={pageSize}
-						defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+						columnDefs={resolvedConfig?.columnDefs}
+						pagination={resolvedConfig?.pagination}
+						paginationAutoPageSize={resolvedConfig?.pagination}
+						defaultColDef={{ flex: 1, editable: resolvedConfig?.allEditable, onCellValueChanged }}
+						onPaginationChanged={(event) => {
+							outputs?.page.set(event.api.paginationGetCurrentPage())
+						}}
 					/>
 				{/key}
 			</div>