windmill-components 1.60.4 → 1.70.0

package/components/apps/components/{dataDisplay → display}/VegaLiteHtml.svelte

@@ -1,12 +1,11 @@
 <script>import { Loader2 } from 'lucide-svelte';
-import { parse } from 'path';
 import { onMount } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let configuration;
+export let initializing = undefined;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 let divEl = null;
@@ -42,7 +41,7 @@ $: vegaEmbed &&
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 		{#if !vegaEmbed}
 			<div class="p-2">
 				<Loader2 class="animate-spin" />

package/components/apps/components/{dataDisplay → display}/VegaLiteHtml.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/index.d.ts

@@ -0,0 +1,12 @@
+export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppBarChart } from './AppBarChart.svelte';
+export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
+export { default as AppHtml } from './AppHtml.svelte';
+export { default as AppIcon } from './AppIcon.svelte';
+export { default as AppImage } from './AppImage.svelte';
+export { default as AppPieChart } from './AppPieChart.svelte';
+export { default as AppScatterChart } from './AppScatterChart.svelte';
+export { default as AppText } from './AppText.svelte';
+export { default as AppTimeseries } from './AppTimeseries.svelte';
+export { default as PlotlyHtml } from './PlotlyHtml.svelte';
+export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';

package/components/apps/components/display/index.js

@@ -0,0 +1,12 @@
+export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppBarChart } from './AppBarChart.svelte';
+export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
+export { default as AppHtml } from './AppHtml.svelte';
+export { default as AppIcon } from './AppIcon.svelte';
+export { default as AppImage } from './AppImage.svelte';
+export { default as AppPieChart } from './AppPieChart.svelte';
+export { default as AppScatterChart } from './AppScatterChart.svelte';
+export { default as AppText } from './AppText.svelte';
+export { default as AppTimeseries } from './AppTimeseries.svelte';
+export { default as PlotlyHtml } from './PlotlyHtml.svelte';
+export { default as VegaLiteHtml } from './VegaLiteHtml.svelte';

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

@@ -0,0 +1,83 @@
+<script>import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
+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';
+export let id;
+export let componentInput;
+export let configuration;
+export let initializing = undefined;
+export const staticOutputs = ['selectedRow', 'loading', 'result', 'selectedRowIndex'];
+let result = undefined;
+const { worldStore, staticOutputs: staticOutputsStore, selectedComponent } = getContext('AppEditorContext');
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex) {
+    if (selectedRowIndex !== rowIndex) {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row.original);
+        outputs?.selectedRowIndex.set(rowIndex);
+    }
+}
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    outputs &&
+    toggleRow({ original: result[0] }, 0);
+$: outputs = $worldStore?.outputsById[id];
+$: outputs?.result?.set(result);
+let clientHeight;
+let clientWidth;
+let columnDefs = undefined;
+let allEditable = undefined;
+function onCellValueChanged(event) {
+    if (result) {
+        let dataCell = event.newValue;
+        try {
+            dataCell = JSON.parse(dataCell);
+        }
+        catch (e) { }
+        result[event.node.rowIndex][event.column.colId] = dataCell;
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
+<InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+
+<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+	{#if Array.isArray(result) && result.every(isObject)}
+		<div
+			class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full"
+			bind:clientHeight
+			bind:clientWidth
+		>
+			<div
+				on:pointerdown|stopPropagation={() => {
+					$selectedComponent = id
+				}}
+				style:height="{clientHeight}px"
+				style:width="{clientWidth}px"
+				class="ag-theme-alpine"
+			>
+				<AgGridSvelte
+					bind:rowData={result}
+					{columnDefs}
+					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+				/>
+			</div>
+		</div>
+	{:else if result != undefined}
+		<Alert title="Parsing issues" type="error" size="xs">
+			The result should be an array of objects
+		</Alert>
+	{/if}
+</RunnableWrapper>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { AppInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        initializing?: boolean | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAggridTableProps = typeof __propDef.props;
+export type AppAggridTableEvents = typeof __propDef.events;
+export type AppAggridTableSlots = typeof __propDef.slots;
+export default class AppAggridTable extends SvelteComponentTyped<AppAggridTableProps, AppAggridTableEvents, AppAggridTableSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/{table → display/table}/AppTable.svelte

@@ -1,19 +1,26 @@
 <script>import { getContext, onMount } from 'svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import InputValue from '../../helpers/InputValue.svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
 import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
-import AppButton from '../buttons/AppButton.svelte';
-import { classNames, isObject } from '../../../../utils';
-import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import AppButton from '../../buttons/AppButton.svelte';
+import { classNames, isObject } from '../../../../../utils';
+import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
-import Alert from '../../../common/alert/Alert.svelte';
+import Alert from '../../../../common/alert/Alert.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let actionButtons;
-export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
+export let initializing = undefined;
+export const staticOutputs = [
+    'selectedRow',
+    'loading',
+    'result',
+    'search',
+    'selectedRowIndex'
+];
 let result = undefined;
 let search = undefined;
 let searchValue = '';
@@ -34,6 +41,7 @@ function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original);
+        outputs?.selectedRowIndex.set(rowIndex);
     }
 }
 let mounted = false;
@@ -45,6 +53,7 @@ $: selectedRowIndex === -1 &&
     result.length > 0 &&
     // We need to wait until the component is mounted so the world is created
     mounted &&
+    outputs &&
     toggleRow({ original: result[0] }, 0);
 function setOptions(filteredResult) {
     if (!Array.isArray(result)) {
@@ -92,7 +101,7 @@ $: result && rerender();
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
@@ -167,19 +176,21 @@ $: result && rerender();
 								{/each}
 
 								{#if actionButtons.length > 0}
-									<td
-										class="flex w-full flex-row gap-2 p-4"
-										on:click={() => toggleRow(row, rowIndex)}
-									>
-										{#each actionButtons as actionButton, actionIndex (actionIndex)}
-											<AppButton
-												noWFull
-												{...actionButton}
-												extraQueryParams={{ row: row.original }}
-												bind:componentInput={actionButton.componentInput}
-												bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-											/>
-										{/each}
+									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
+										<div class="center-center h-full w-full flex-wrap gap-1">
+											{#each actionButtons as actionButton, actionIndex (actionIndex)}
+												<AppButton
+													noWFull
+													{...actionButton}
+													preclickAction={async () => {
+														toggleRow(row, rowIndex)
+													}}
+													extraQueryParams={{ row: row.original }}
+													bind:componentInput={actionButton.componentInput}
+													bind:staticOutputs={$staticOutputsStore[actionButton.id]}
+												/>
+											{/each}
+										</div>
 									</td>
 								{/if}
 							</tr>

package/components/apps/components/{table → display/table}/AppTable.svelte.d.ts

@@ -1,12 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent, ButtonComponent } from '../../types';
-import type { AppInput } from '../../inputType';
+import type { BaseAppComponent } from '../../../types';
+import type { AppInput } from '../../../inputType';
+import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/{table → display/table}/AppTableFooter.svelte

@@ -1,4 +1,4 @@
-<script>import Button from '../../../common/button/Button.svelte';
+<script>import Button from '../../../../common/button/Button.svelte';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { tableOptions } from './tableOptions';

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -2,27 +2,27 @@
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
-function tailwindHorizontalAlignment(horizontalAlignment) {
-    switch (horizontalAlignment) {
-        case 'left':
-            return 'justify-start';
-        case 'center':
-            return 'justify-center';
-        case 'right':
-            return 'justify-end';
-    }
+function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end',
+    };
+    return classes[alignment];
 }
-function tailwindVerticalAlignment(verticalAlignment) {
-    switch (verticalAlignment) {
-        case 'top':
-            return 'items-start';
-        case 'center':
-            return 'items-center';
-        case 'bottom':
-            return 'items-end';
-    }
+function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end',
+    };
+    return classes[alignment];
 }
-$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
+$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', $$props.class || '');
 </script>
 
 <div class={classes}>

package/components/apps/components/helpers/AlignWrapper.svelte.d.ts

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        [x: string]: any;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
     };
     events: {

package/components/apps/components/helpers/HiddenComponent.svelte

@@ -0,0 +1,22 @@
+<script>import RunnableComponent from './RunnableComponent.svelte';
+export let id;
+export let name;
+export let inlineScript;
+export let fields;
+let result = undefined;
+export const staticOutputs = ['result', 'loading'];
+</script>
+
+<RunnableComponent
+	{id}
+	bind:fields
+	bind:result
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+>
+	<slot />
+</RunnableComponent>

package/components/apps/components/helpers/HiddenComponent.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HiddenComponentProps = typeof __propDef.props;
+export type HiddenComponentEvents = typeof __propDef.events;
+export type HiddenComponentSlots = typeof __propDef.slots;
+export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/helpers/InputDefaultValue.svelte

@@ -0,0 +1,17 @@
+<script>export let input = undefined;
+export let defaultValue = undefined;
+function setInputValueToDefaultValue() {
+    if (defaultValue !== undefined && input) {
+        input.value = String(defaultValue);
+    }
+}
+function clearInputValue() {
+    if (input) {
+        input.value = '';
+    }
+}
+$: input && defaultValue && setInputValueToDefaultValue();
+$: input &&
+    (defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+    clearInputValue();
+</script>

package/components/apps/components/helpers/InputDefaultValue.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        input?: HTMLInputElement | undefined;
+        defaultValue?: (string | number | boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputDefaultValueProps = typeof __propDef.props;
+export type InputDefaultValueEvents = typeof __propDef.events;
+export type InputDefaultValueSlots = typeof __propDef.slots;
+export default class InputDefaultValue extends SvelteComponentTyped<InputDefaultValueProps, InputDefaultValueEvents, InputDefaultValueSlots> {
+}
+export {};

package/components/apps/components/helpers/InputValue.svelte

@@ -4,26 +4,25 @@ import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
-export let row = {};
 export let error = '';
 const { worldStore } = getContext('AppEditorContext');
 $: state = $worldStore?.state;
-$: input && $worldStore && row && handleConnection();
+$: input && $worldStore && handleConnection();
 $: input && input.type == 'template' && $state && (value = getValue(input));
 $: input && input.type == 'eval' && $state && (value = evalExpr(input));
 function handleConnection() {
     if (input.type === 'connected') {
         $worldStore?.connect(input, onValueChange);
     }
-    else if (input.type === 'row') {
-        setTimeout(() => (value = row?.[input['column']]), 0);
-    }
     else if (input.type === 'static' || input.type == 'template') {
         setTimeout(() => (value = getValue(input)), 0);
     }
     else if (input.type == 'eval') {
         setTimeout(() => ((value = evalExpr(input)), 0));
     }
+    else if (input.type == 'upload') {
+        setTimeout(() => ((value = input.value), 0));
+    }
     else {
         setTimeout(() => (value = undefined), 0);
     }
@@ -47,8 +46,7 @@ function computeGlobalContext() {
             key,
             Object.fromEntries(Object.entries(value ?? {}).map((x) => [x[0], x[1].peak()]))
         ];
-    })
-        .concat(row ? [['row', row]] : []));
+    }));
 }
 export function getValue(input) {
     if (input.type === 'template' && isCodeInjection(input.eval)) {

package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         input: AppInput;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
-        row?: Record<string, any> | undefined;
         error?: string | undefined;
         getValue?: ((input: AppInput) => any) | undefined;
     };

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -1,10 +1,11 @@
-<script>import Alert from '../../../common/alert/Alert.svelte';
+<script>import { goto } from '$app/navigation';
+import Alert from '../../../common/alert/Alert.svelte';
 import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { defaultIfEmptyString, emptySchema, sendUserToast } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
-import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
+import { computeFields } from '../../editor/inlineScriptsPanel/utils';
 import InputValue from './InputValue.svelte';
 import RefreshButton from './RefreshButton.svelte';
 // Component props
@@ -15,11 +16,12 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
-export let noMinH = false;
 export let defaultUserInput = false;
 export let flexWrap = false;
 export let wrapperClass = '';
-const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend } = getContext('AppEditorContext');
+export let initializing = undefined;
+export let gotoUrl = undefined;
+const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend, errorByComponent, mode } = getContext('AppEditorContext');
 onMount(() => {
     if (autoRefresh) {
         $runnableComponents[id] = async () => {
@@ -76,7 +78,7 @@ async function loadSchemaAndInputsByName() {
         // Inline scripts directly provide the schema
         if (inlineScript) {
             const newSchema = inlineScript.schema;
-            const newFields = reloadInputs(newSchema);
+            const newFields = computeFields(newSchema, defaultUserInput, fields);
             if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
                 setTimeout(() => {
                     fields = newFields;
@@ -85,35 +87,6 @@ async function loadSchemaAndInputsByName() {
         }
     }
 }
-// When the schema is loaded, we need to update the inputs spec
-// in order to render the inputs the component panel
-function reloadInputs(schema) {
-    let schemaCopy = JSON.parse(JSON.stringify(schema));
-    const result = {};
-    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
-    if (!fields) {
-        return newInputs;
-    }
-    Object.keys(newInputs).forEach((key) => {
-        const newInput = newInputs[key];
-        const oldInput = fields[key];
-        // If the input is not present in the old inputs, add it
-        if (oldInput === undefined) {
-            result[key] = newInput;
-        }
-        else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
-                newInput.format !== oldInput.format ||
-                newInput.subFieldType !== oldInput.subFieldType) {
-                result[key] = newInput;
-            }
-            else {
-                result[key] = oldInput;
-            }
-        }
-    });
-    return result;
-}
 $: schemaStripped = runnable && stripSchema(fields);
 function stripSchema(inputs) {
     let schema = runnable?.type == 'runnableByName' ? runnable.inlineScript?.schema : runnable?.schema;
@@ -200,16 +173,20 @@ export async function runComponent() {
     await executeComponent();
 }
 let lastStartedAt = Date.now();
+function recordError(error) {
+    if (testJob) {
+        $errorByComponent[testJob.id] = {
+            error: error,
+            componentId: id
+        };
+    }
+}
+$: result?.error && recordError(result.error);
 </script>
 
 {#each Object.entries(fields ?? {}) as [key, v]}
 	{#if v.type != 'static' && v.type != 'user'}
-		<InputValue
-			{id}
-			input={fields[key]}
-			bind:value={runnableInputValues[key]}
-			row={extraQueryParams['row'] ?? {}}
-		/>
+		<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
 	{/if}
 {/each}
 
@@ -222,6 +199,16 @@ let lastStartedAt = Date.now();
 				lastStartedAt = startedAt
 				outputs.result?.set(testJob?.result)
 				result = testJob.result
+
+				const previousJobId = Object.keys($errorByComponent).find(
+					(key) => $errorByComponent[key].componentId === id
+				)
+
+				if (previousJobId && !result?.error) {
+					delete $errorByComponent[previousJobId]
+					$errorByComponent = $errorByComponent
+				}
+				gotoUrl && gotoUrl != '' && result?.error == undefined && goto(gotoUrl)
 			}
 		}
 	}}
@@ -231,7 +218,7 @@ let lastStartedAt = Date.now();
 />
 
 <div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
-	{#if autoRefresh === true}
+	{#if !initializing && autoRefresh === true}
 		<div class="flex absolute top-1 right-1">
 			<RefreshButton componentId={id} />
 		</div>
@@ -253,19 +240,21 @@ let lastStartedAt = Date.now();
 		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 			Please select a runnable
 		</Alert>
-	{:else if result?.error}
+	{:else if result?.error && $mode === 'preview'}
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
-				See "Debug Runs" on the top right for more details
-				<pre
-					title={JSON.stringify(result.error, null, 4)}
-					class=" mt-2 text-2xs whitespace-pre-wrap">{JSON.stringify(result.error, null, 4)}</pre
-				>
+				<div class="flex flex-col gap-2">
+					An error occured, please contact the app author.
+					<span class="font-semibold">Job id: {testJob?.id}</span>
+					<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs"
+						>{JSON.stringify(result.error, null, 4)}
+				</pre>
+				</div>
 			</Alert>
 			<slot />
 		</div>
 	{:else}
-		<div class="block w-full h-full">
+		<div class="block grow w-full max-h-full">
 			<slot />
 		</div>
 	{/if}

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -9,10 +9,11 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         result?: any;
         forceSchemaDisplay?: boolean | undefined;
-        noMinH?: boolean | undefined;
         defaultUserInput?: boolean | undefined;
         flexWrap?: boolean | undefined;
         wrapperClass?: string | undefined;
+        initializing?: boolean | undefined;
+        gotoUrl?: string | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {