windmill-components 1.83.1 → 1.83.3

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/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/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>

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

@@ -88,7 +88,8 @@ function setFilteredResult() {
         filteredResult = searchInResult(result ?? [], searchValue);
     }
 }
-$: (result || resolvedConfig.search || searchValue) && setFilteredResult();
+$: (result || resolvedConfig.search || searchValue || resolvedConfig.pagination) &&
+    setFilteredResult();
 $: outputs.page.set($table.getState().pagination.pageIndex);
 function rerender() {
     if (!Array.isArray(result)) {
@@ -97,7 +98,19 @@ function rerender() {
     const headers = Array.from(new Set(result.flatMap((row) => (typeof row == 'object' ? Object.keys(row) : []))));
     $options = {
         ...tableOptions,
-        manualPagination: resolvedConfig.manualPagination,
+        ...(resolvedConfig?.pagination?.selected != 'manual'
+            ? {
+                initialState: {
+                    pagination: {
+                        pageSize: resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20
+                    }
+                }
+            }
+            : {}),
+        manualPagination: resolvedConfig?.pagination?.selected == 'manual',
+        pageCount: resolvedConfig?.pagination?.selected == 'manual'
+            ? resolvedConfig?.pagination?.configuration.manual.pageCount ?? -1
+            : undefined,
         data: filteredResult,
         columns: headers.map((header) => {
             return {
@@ -333,8 +346,8 @@ $componentControl[id] = {
 			</div>
 
 			<AppTableFooter
-				paginationEnabled
-				manualPagination={resolvedConfig.manualPagination}
+				pageSize={resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20}
+				manualPagination={resolvedConfig?.pagination?.selected == 'manual'}
 				result={filteredResult}
 				{table}
 				class={css?.tableFooter?.class}

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

@@ -4,8 +4,8 @@ import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import { tableOptions } from './tableOptions';
 export let result;
-export let paginationEnabled = false;
 export let manualPagination;
+export let pageSize;
 export let table;
 let c = '';
 export { c as class };
@@ -25,7 +25,7 @@ function downloadResultAsJSON() {
 	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
 	{style}
 >
-	{#if (paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)) || manualPagination}
+	{#if result.length > pageSize || manualPagination}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"

package/components/apps/components/display/table/AppTableFooter.svelte.d.ts

@@ -4,8 +4,8 @@ import type { Readable } from 'svelte/store';
 declare const __propDef: {
     props: {
         result: Record<string, any>[];
-        paginationEnabled?: boolean | undefined;
         manualPagination: boolean;
+        pageSize: number;
         table: Readable<Table<Record<string, any>>>;
         class?: string | undefined;
         style?: string | undefined;

package/components/apps/components/layout/AppDrawer.svelte

@@ -70,21 +70,39 @@ $: css = concatCustomCss($app.css?.containercomponent, customCss);
 				$focusedGrid = undefined
 			}}
 		>
-			{#if $app.subgrids?.[`${id}-0`]}
-				<SubGridEditor
-					visible={open && render}
-					{id}
-					class={css?.container?.class}
-					style={css?.container?.style}
-					subGridId={`${id}-0`}
-					containerHeight={1200}
-					on:focus={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = [id]
+			<div
+				class="h-full"
+				on:pointerdown={(e) => {
+					e?.stopPropagation()
+					if (!$connectingInput.opened) {
+						$selectedComponent = [id]
+						$focusedGrid = {
+							parentComponentId: id,
+							subGridIndex: 0
 						}
-					}}
-				/>
-			{/if}
+					}
+				}}
+			>
+				{#if $app.subgrids?.[`${id}-0`]}
+					<SubGridEditor
+						visible={open && render}
+						{id}
+						class={css?.container?.class}
+						style={css?.container?.style}
+						subGridId={`${id}-0`}
+						containerHeight={1200}
+						on:focus={() => {
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: 0
+								}
+							}
+						}}
+					/>
+				{/if}
+			</div>
 		</DrawerContent>
 	</Drawer>
 </Portal>

package/components/apps/editor/AppEditor.svelte

@@ -54,8 +54,9 @@ let context = {
     query: Object.fromEntries($page.url.searchParams.entries()),
     hash: $page.url.hash
 };
+const worldStore = buildWorld(context);
 setContext('AppViewerContext', {
-    worldStore: buildWorld(context),
+    worldStore,
     app: appStore,
     summary: summaryStore,
     selectedComponent,
@@ -115,7 +116,6 @@ let befSelected = undefined;
 $: if ($selectedComponent?.[0] != befSelected) {
     befSelected = $selectedComponent?.[0];
     selectedTab = 'settings';
-    console.log('focusedGrid1', befSelected);
     if (befSelected) {
         if (!['ctx', 'state'].includes(befSelected) && !befSelected?.startsWith('bg_')) {
             let item = findGridItem($appStore, befSelected);
@@ -125,11 +125,15 @@ $: if ($selectedComponent?.[0] != befSelected) {
                     subGridIndex: 0
                 };
             }
+            else if (item?.data.type === 'tabscomponent') {
+                $focusedGrid = {
+                    parentComponentId: befSelected,
+                    subGridIndex: $worldStore.outputsById?.[befSelected]?.selectedTabIndex?.peak() ?? 0
+                };
+            }
             else {
-                console.log('focusedGrid2', befSelected);
                 let subgrid = findGridItemParentGrid($appStore, befSelected);
                 if (subgrid) {
-                    console.log('focusedGrid3', befSelected);
                     try {
                         $focusedGrid = {
                             parentComponentId: subgrid.split('-')[0],

package/components/apps/editor/component/components.d.ts

@@ -768,14 +768,34 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly selectOptions: string[];
-                    readonly value: "Disabled";
+                    readonly value: string;
                 };
-                readonly manualPagination: {
-                    readonly fieldType: "boolean";
-                    readonly type: "static";
-                    readonly onlyStatic: true;
-                    readonly value: false;
-                    readonly tooltip: "Pagination would not be handled by the component but by the script itself. Connect to the pagination output";
+                readonly pagination: {
+                    readonly type: "oneOf";
+                    readonly selected: "auto";
+                    readonly labels: {
+                        readonly auto: "Auto";
+                        readonly manual: "Manual";
+                    };
+                    readonly configuration: {
+                        readonly auto: {
+                            readonly pageSize: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: 20;
+                                readonly onlyStatic: true;
+                                readonly tooltip: "Number of rows per page";
+                            };
+                        };
+                        readonly manual: {
+                            readonly pageCount: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: -1;
+                                readonly tooltip: "Number of pages (-1 if you do not know)";
+                            };
+                        };
+                    };
                 };
             };
             readonly componentInput: StaticAppInput;
@@ -803,13 +823,6 @@ export declare const components: {
                     readonly value: false;
                     readonly onlyStatic: true;
                 };
-                readonly pageSize: {
-                    readonly type: "static";
-                    readonly fieldType: "number";
-                    readonly value: 10;
-                    readonly onlyStatic: true;
-                    readonly tooltip: "Number of rows per page";
-                };
             };
             readonly componentInput: StaticAppInput;
         };