windmill-components 1.60.2 → 1.60.4

package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -0,0 +1,28 @@
+export function getAppScripts(grid) {
+    return grid.reduce((acc, gridComponent) => {
+        const component = gridComponent.data;
+        const componentInput = component.componentInput;
+        if (component.type === 'tablecomponent') {
+            component.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type !== 'runnable') {
+                    return;
+                }
+                processRunnable(actionButton.componentInput.runnable, actionButton.id, acc);
+            });
+        }
+        if (componentInput?.type === 'runnable') {
+            processRunnable(componentInput.runnable, gridComponent.id, acc);
+        }
+        return acc;
+    }, { inline: [], imported: [] });
+}
+function processRunnable(runnable, id, list) {
+    if (runnable?.type === undefined) {
+        return;
+    }
+    const type = runnable.type === 'runnableByPath' ? 'imported' : 'inline';
+    list[type].push({
+        name: runnable[runnable.type === 'runnableByPath' ? 'path' : 'name'],
+        id
+    });
+}

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -8,7 +8,7 @@ import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
 import { capitalize, classNames } from '../../../../utils';
-import { fieldTypeToTsType } from '../../utils';
+import { buildExtraLib, fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
@@ -54,20 +54,9 @@ function removeGridElement() {
         }
     }
 }
-export function buildExtraLib(components) {
-    return Object.entries(components)
-        .filter(([k, v]) => k != component?.id)
-        .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
-        .map(([k, v]) => `
-
-declare const ${k} = ${JSON.stringify(v)};
-
-`)
-        .join('\n');
-}
 $: extraLib =
     component?.componentInput?.type === 'template' && $worldStore
-        ? buildExtraLib($worldStore?.outputsById ?? {})
+        ? buildExtraLib($worldStore?.outputsById ?? {}, component?.id, false)
         : undefined;
 </script>
 
@@ -131,6 +120,7 @@ $: extraLib =
 							</svelte:fragment>
 
 							<InputsSpecsEditor
+								id={component.id}
 								shouldCapitalize={false}
 								bind:inputSpecs={component.componentInput.fields}
 								userInputEnabled={component.type !== 'buttoncomponent'}
@@ -144,7 +134,12 @@ $: extraLib =
 
 		{#if Object.values(component.configuration).length > 0}
 			<PanelSection title={`Configuration (${Object.values(component.configuration).length})`}>
-				<InputsSpecsEditor bind:inputSpecs={component.configuration} userInputEnabled={false} />
+				<InputsSpecsEditor
+					{rowColumns}
+					id={component.id}
+					bind:inputSpecs={component.configuration}
+					userInputEnabled={false}
+				/>
 			</PanelSection>
 		{/if}
 

package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -1,12 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppComponent } from '../../types';
-import type { Output } from '../../rx';
 declare const __propDef: {
     props: {
         component: AppComponent | undefined;
         onDelete?: (() => void) | undefined;
         rowColumns?: boolean | undefined;
-        buildExtraLib?: ((components: Record<string, Record<string, Output<any>>>) => string) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,6 +15,5 @@ export type ComponentPanelProps = typeof __propDef.props;
 export type ComponentPanelEvents = typeof __propDef.events;
 export type ComponentPanelSlots = typeof __propDef.slots;
 export default class ComponentPanel extends SvelteComponentTyped<ComponentPanelProps, ComponentPanelEvents, ComponentPanelSlots> {
-    get buildExtraLib(): (components: Record<string, Record<string, Output<any>>>) => string;
 }
 export {};

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -1,8 +1,10 @@
-<script>import Toggle from '../../../Toggle.svelte';
-import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
+export let id;
 export let componentInput;
+export let hasRows = false;
 </script>
 
 {#if componentInput.type === 'connected'}
@@ -11,6 +13,8 @@ export let componentInput;
 	<RowInputEditor bind:componentInput />
 {:else if componentInput.type === 'static'}
 	<StaticInputEditor bind:componentInput />
+{:else if componentInput.type === 'eval'}
+	<EvalInputEditor {hasRows} {id} bind:componentInput />
 {:else if componentInput.type === 'user'}
 	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput;
+        id: string;
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput;
+        hasRows?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -6,9 +6,9 @@ import InputsSpecEditor from './InputsSpecEditor.svelte';
 import { getContext } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import Popover from '../../../Popover.svelte';
+export let id;
 export let inputSpecs;
 export let userInputEnabled = true;
-export let staticOnly = false;
 export let shouldCapitalize = true;
 export let rowColumns = false;
 const { connectingInput } = getContext('AppEditorContext');
@@ -38,7 +38,7 @@ const { connectingInput } = getContext('AppEditorContext');
 								: capitalize(fieldTypeToTsType(input.fieldType))}
 						</Badge>
 
-						{#if !inputSpecs[inputSpecKey].onlyStatic}
+						{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
 							<ToggleButtonGroup
 								bind:selected={inputSpecs[inputSpecKey].type}
 								on:selected={(e) => {
@@ -68,9 +68,8 @@ const { connectingInput } = getContext('AppEditorContext');
 											value="row"
 											startIcon={{ icon: faTableCells }}
 											size="xs"
-											disabled={staticOnly}
 										>
-											<Tooltip>
+											<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
 												Use the column name to have the value of the cell be passed to the action
 											</Tooltip>
 										</ToggleButton>
@@ -85,7 +84,6 @@ const { connectingInput } = getContext('AppEditorContext');
 											startIcon={{ icon: faUser }}
 											size="xs"
 											iconOnly
-											disabled={staticOnly}
 										/>
 										<svelte:fragment slot="text">User Input</svelte:fragment>
 									</Popover>
@@ -97,7 +95,6 @@ const { connectingInput } = getContext('AppEditorContext');
 										startIcon={{ icon: faArrowRight }}
 										size="xs"
 										iconOnly
-										disabled={staticOnly}
 									/>
 									<svelte:fragment slot="text">Connect</svelte:fragment>
 								</Popover>
@@ -106,7 +103,11 @@ const { connectingInput } = getContext('AppEditorContext');
 					</div>
 				</div>
 
-				<InputsSpecEditor bind:componentInput={inputSpecs[inputSpecKey]} />
+				<InputsSpecEditor
+					hasRows={rowColumns}
+					{id}
+					bind:componentInput={inputSpecs[inputSpecKey]}
+				/>
 			</div>
 		{/each}
 	</div>

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { BaseAppComponent } from '../../types';
 declare const __propDef: {
     props: {
+        id: string;
         inputSpecs: BaseAppComponent['configuration'];
         userInputEnabled?: boolean | undefined;
-        staticOnly?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;
     };

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -14,7 +14,7 @@ function onChange(event, id) {
 }
 </script>
 
-<PanelSection title="Recompute after this compute">
+<PanelSection title="Recompute others" tooltip="Select components to recompute after running this script">
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -11,7 +11,7 @@ export let components;
 export let id;
 const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
 function addComponent() {
-    const actionId = getNextId(components.map((x) => x.id.split('-')[1]));
+    const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
         id: `${id}_${actionId}`,
         type: 'buttoncomponent',
@@ -32,6 +32,11 @@ function addComponent() {
                 type: 'static',
                 value: 'xs',
                 optionValuesKey: 'buttonSizeOptions'
+            },
+            disabled: {
+                fieldType: 'boolean',
+                type: 'eval',
+                expr: 'false'
             }
         },
         componentInput: {
@@ -72,7 +77,7 @@ function deleteComponent(cid) {
 	{#each components as component}
 		<div
 			class={classNames(
-				'w-full text-xs font-bold gap-1 py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
 				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
 			)}

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,8 +1,10 @@
 <script>import { classNames } from '../../../../../utils';
+import Tooltip from '../../../../Tooltip.svelte';
 export let title;
 export let smallPadding = false;
 export let noPadding = false;
 export let titlePadding = '';
+export let tooltip = '';
 </script>
 
 <div
@@ -13,7 +15,14 @@ export let titlePadding = '';
 	)}
 >
 	<div class="flex justify-between items-center w-full gap-1">
-		<div class="text-sm font-extrabold {titlePadding}">{title}</div>
+		<div class="text-sm font-extrabold {titlePadding}">
+			{title}
+			{#if tooltip}
+				<Tooltip>
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</div>
 		<slot name="action" />
 	</div>
 	<slot />

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         smallPadding?: boolean | undefined;
         noPadding?: boolean | undefined;
         titlePadding?: string | undefined;
+        tooltip?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte

@@ -0,0 +1,25 @@
+<script>import { getContext } from 'svelte';
+import SimpleEditor from '../../../../SimpleEditor.svelte';
+import { buildExtraLib } from '../../../utils';
+export let componentInput;
+export let id;
+export let hasRows = false;
+const { onchange, worldStore } = getContext('AppEditorContext');
+$: componentInput && onchange?.();
+$: extraLib =
+    componentInput?.expr && $worldStore
+        ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows)
+        : undefined;
+</script>
+
+{#if componentInput?.type === 'eval'}
+	<div class="border border-gray-300 ">
+		<SimpleEditor
+			lang="javascript"
+			bind:code={componentInput.expr}
+			shouldBindKey={false}
+			{extraLib}
+			autoHeight
+		/>
+	</div>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { EvalAppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: EvalAppInput | undefined;
+        id: string;
+        hasRows?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EvalInputEditorProps = typeof __propDef.props;
+export type EvalInputEditorEvents = typeof __propDef.events;
+export type EvalInputEditorSlots = typeof __propDef.slots;
+export default class EvalInputEditor extends SvelteComponentTyped<EvalInputEditorProps, EvalInputEditorEvents, EvalInputEditorSlots> {
+}
+export {};

package/components/apps/editorUtils.js

@@ -94,6 +94,45 @@ const DEFAULT_CODES = {
 <h1 class="absolute top-4 left-2 text-white">
 	Hello world
 </h1>'''`,
+    },
+    vegalitecomponent: {
+        deno: `
+			export async function main() {
+				return {
+					data: {
+					values: [
+						{ a: "A", b: 28 },
+						{ a: "B", b: 55 },
+						{ a: "C", b: 43 },
+						{ a: "D", b: 91 },
+					],
+					},
+					mark: "bar",
+					encoding: {
+						x: { field: "a", type: "ordinal" },
+						y: { field: "b", type: "quantitative" },
+					},
+				};
+			}			  
+`,
+        python3: `
+def main():
+	return {
+		"data": {
+		"values": [
+			{ "a": "A", "b": 28 },
+			{ "a": "B", "b": 55 },
+			{ "a": "C", "b": 43 },
+			{ "a": "D", "b": 91 },
+		],
+		},
+			"mark": "bar",
+		"encoding": {
+			"x": { "field": "a", "type": "ordinal" },
+			"y": { "field": "b", "type": "quantitative" },
+		},
+	}	
+`
     },
     piechartcomponent: {
         deno: `export async function main() {

package/components/apps/inputType.d.ts

@@ -13,6 +13,10 @@ export type UserInput<U> = {
     type: 'user';
     value: U | undefined;
 };
+export type EvalInput = {
+    type: 'eval';
+    expr: string;
+};
 export type RowInput = {
     type: 'row';
     column: string;
@@ -43,7 +47,7 @@ export type ResultInput = {
     type: 'runnable';
     value?: any;
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
+type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | ResultInput | TemplateInput) & InputConfiguration<T, U, V>;
 type InputConfiguration<T extends InputType, U, V extends InputType> = {
     fieldType: T;
     subFieldType?: V;
@@ -72,5 +76,8 @@ export type UserAppInput = Extract<AppInput, {
 export type ResultAppInput = Extract<AppInput, {
     type: 'runnable';
 }>;
+export type EvalAppInput = Extract<AppInput, {
+    type: 'eval';
+}>;
 export type AppInputs = Record<string, AppInput>;
 export {};

package/components/apps/types.d.ts

@@ -2,7 +2,7 @@ import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
 import type { FilledItem } from 'svelte-grid';
 import type { Writable } from 'svelte/store';
-import type { AppInput, ConnectedAppInput, ConnectedInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
+import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
 type BaseComponent<T extends string> = {
     type: T;
@@ -14,6 +14,7 @@ export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
 export type SliderComponent = BaseComponent<'slidercomponent'>;
 export type HtmlComponent = BaseComponent<'htmlcomponent'>;
+export type VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
     recomputeIds: string[] | undefined;
@@ -43,8 +44,9 @@ export type Aligned = {
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
+    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
         onlyStatic?: boolean;
+        evaluatedValue?: boolean;
         tooltip?: string;
     }>;
     card: boolean | undefined;
@@ -55,7 +57,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
      */
     softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent | VegaLiteComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];

package/components/apps/utils.d.ts

@@ -1,5 +1,6 @@
 import type { Schema } from '../../common';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
+import type { Output } from './rx';
 import type { App, AppComponent } from './types';
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
@@ -16,3 +17,4 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     app: App;
     summary: string;
 };
+export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string;

package/components/apps/utils.js

@@ -72,6 +72,10 @@ export const displayData = {
         name: 'Html',
         icon: Code2
     },
+    vegalitecomponent: {
+        name: 'Vega Lite',
+        icon: PieChart
+    },
     timeseriescomponent: {
         name: 'Timeseries',
         icon: GripHorizontal
@@ -198,3 +202,14 @@ export function toStatic(app, staticExporter, summary) {
     });
     return { app: newApp, summary };
 }
+export function buildExtraLib(components, idToExclude, hasRows) {
+    return Object.entries(components)
+        .filter(([k, v]) => k != idToExclude)
+        .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
+        .map(([k, v]) => `
+
+declare const ${k} = ${JSON.stringify(v)};
+
+`)
+        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '');
+}

package/components/common/button/Button.svelte

@@ -51,7 +51,7 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
+    class: classNames(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
     href,
     target,
     tabindex: disabled ? -1 : 0,

package/components/common/kbd/Kbd.svelte

@@ -1,7 +1,7 @@
-<kbd
-	class="mx-1 px-2 py-1 text-xs font-mono font-semibold text-gray-800 
-	bg-gray-100 border border-gray-200 rounded-lg 
-	dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500 {$$props.class}"
+<span
+	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
-	<slot />
-</kbd>
+	<kbd>
+		<slot />
+	</kbd>
+</span>

package/components/common/table/Row.svelte

@@ -36,7 +36,7 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
 		</div>
 	</a>
 	{#if $$slots.badges}
-		<div class="w-32 hidden md:flex flex-row gap-1 items-start flex-wrap">
+		<div class="hidden md:flex flex-row gap-1 items-start flex-wrap">
 			<slot name="badges" />
 		</div>
 	{/if}

package/components/flows/content/CapturePayload.svelte

@@ -106,11 +106,11 @@ async function getCaptureInput() {
 				Copy as flow inputs and test args
 			</Button>
 		</svelte:fragment>
-		<h3 class="mt-2">Derived inputs schema</h3>
+		<h3 class="my-2 mt-8">Derived schema</h3>
 		<div class="box p-2">
 			<SchemaViewer schema={jsonSchema} />
 		</div>
-		<h3 class="mt-2">Test args</h3>
-		<SchemaForm class="h-full pt-4" schema={$flowStore.schema} args={$previewArgs} />
+		<h3 class="mt-8">Test args</h3>
+		<SchemaForm class="pt-4" schema={$flowStore.schema} args={$previewArgs} />
 	</DrawerContent>
 </Drawer>

package/components/flows/content/FlowModuleComponent.svelte

@@ -90,6 +90,8 @@ afterUpdate(() => {
     const panesTop = panes.getBoundingClientRect().top;
     totalTopGap = panesTop - wrapperTop;
 });
+let isScript = true;
+$: isScript != (value.type === 'script') && (isScript = value.type === 'script');
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -139,7 +141,7 @@ afterUpdate(() => {
 				style="max-height: calc(100% - {totalTopGap}px) !important;"
 			>
 				<Splitpanes horizontal>
-					<Pane size={value.type === 'script' ? 30 : 50} minSize={20}>
+					<Pane size={isScript ? 30 : 50} minSize={20}>
 						{#if value.type === 'rawscript'}
 							<div class="h-full">
 								<Editor
@@ -173,7 +175,7 @@ afterUpdate(() => {
 							<FlowPathViewer path={value.path} />
 						{/if}
 					</Pane>
-					<Pane size={value.type === 'script' ? 70 : 50} minSize={20}>
+					<Pane size={isScript ? 70 : 50} minSize={20}>
 						<Tabs bind:selected>
 							<Tab value="inputs"><span class="font-semibold">Step Input</span></Tab>
 							<Tab value="test"><span class="font-semibold text-md">Test this step</span></Tab>

package/components/flows/utils.js

@@ -71,7 +71,7 @@ export async function loadSchemaFromModule(module) {
         let input_transforms = mod.input_transforms ?? module.input_transforms ?? {};
         if (JSON.stringify(keys.sort()) !== JSON.stringify(Object.keys(input_transforms).sort())) {
             input_transforms = keys.reduce((accu, key) => {
-                let nv = input_transforms[key] ?? {
+                let nv = input_transforms[key] ?? (module.id == 'failure' && ['message', 'name'].includes(key)) ? { type: 'javascript', expr: `error.${key}` } : {
                     type: 'static',
                     value: undefined
                 };

package/components/propertyPicker/PropPicker.svelte

@@ -80,7 +80,13 @@ async function loadResources() {
 			<div class="overflow-y-auto mb-2">
 				<ObjectViewer
 					pureViewer={!$propPickerConfig}
-					json={{ previous_result: { error: 'The error to handle' } }}
+					json={{
+						error: {
+							message: 'The error message',
+							name: 'The error name',
+							stack: 'The error stack'
+						}
+					}}
 					on:select
 				/>
 			</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.60.2",
+	"version": "1.60.4",
 	"devDependencies": {
 		"@playwright/test": "^1.29.2",
 		"@sveltejs/adapter-static": "^1.0.0",
@@ -25,7 +25,7 @@
 		"path-browserify": "^1.0.1",
 		"postcss": "^8.4.18",
 		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.1",
+		"prettier": "^2.8.3",
 		"prettier-plugin-svelte": "^2.9.0",
 		"simple-svelte-autocomplete": "^2.5.1",
 		"stylelint-config-recommended": "^9.0.0",
@@ -52,7 +52,7 @@
 		"@fortawesome/free-solid-svg-icons": "^6.2.1",
 		"@leeoniya/ufuzzy": "^0.9.0",
 		"@redocly/json-to-json-schema": "^0.0.1",
-		"@tanstack/svelte-table": "^8.7.2",
+		"@tanstack/svelte-table": "^8.7.6",
 		"async-mutex": "^0.4.0",
 		"chartjs-adapter-date-fns": "^2.0.0",
 		"chartjs-plugin-zoom": "^2.0.0",
@@ -125,6 +125,7 @@
 		"./components/PageHeader.svelte": "./components/PageHeader.svelte",
 		"./components/Password.svelte": "./components/Password.svelte",
 		"./components/Path.svelte": "./components/Path.svelte",
+		"./components/Popover.model": "./components/Popover.model.js",
 		"./components/Popover.svelte": "./components/Popover.svelte",
 		"./components/RadioButton.svelte": "./components/RadioButton.svelte",
 		"./components/Range.svelte": "./components/Range.svelte",
@@ -168,6 +169,7 @@
 		"./components/apps/components/dataDisplay/AppScatterChart.svelte": "./components/apps/components/dataDisplay/AppScatterChart.svelte",
 		"./components/apps/components/dataDisplay/AppText.svelte": "./components/apps/components/dataDisplay/AppText.svelte",
 		"./components/apps/components/dataDisplay/AppTimeseries.svelte": "./components/apps/components/dataDisplay/AppTimeseries.svelte",
+		"./components/apps/components/dataDisplay/VegaLiteHtml.svelte": "./components/apps/components/dataDisplay/VegaLiteHtml.svelte",
 		"./components/apps/components/dateInputs/AppDateInput.svelte": "./components/apps/components/dateInputs/AppDateInput.svelte",
 		"./components/apps/components/form/AppForm.svelte": "./components/apps/components/form/AppForm.svelte",
 		"./components/apps/components/helpers/AlignWrapper.svelte": "./components/apps/components/helpers/AlignWrapper.svelte",
@@ -209,6 +211,7 @@
 		"./components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte": "./components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte",
 		"./components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte": "./components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte",
 		"./components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte": "./components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte",
+		"./components/apps/editor/inlineScriptsPanel/utils": "./components/apps/editor/inlineScriptsPanel/utils.js",
 		"./components/apps/editor/settingsPanel/AlignmentEditor.svelte": "./components/apps/editor/settingsPanel/AlignmentEditor.svelte",
 		"./components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte": "./components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte",
 		"./components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte": "./components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte",
@@ -224,6 +227,7 @@
 		"./components/apps/editor/settingsPanel/TableActions.svelte": "./components/apps/editor/settingsPanel/TableActions.svelte",
 		"./components/apps/editor/settingsPanel/common/PanelSection.svelte": "./components/apps/editor/settingsPanel/common/PanelSection.svelte",
 		"./components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte": "./components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte",
+		"./components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte": "./components/apps/editor/settingsPanel/inputEditor/EvalInputEditor.svelte",
 		"./components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte": "./components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte",
 		"./components/apps/editor/settingsPanel/inputEditor/RowInputEditor.svelte": "./components/apps/editor/settingsPanel/inputEditor/RowInputEditor.svelte",
 		"./components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte": "./components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte",