windmill-components 1.60.1 → 1.60.3

package/components/apps/components/dataDisplay/VegaLiteHtml.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VegaLiteHtmlProps = typeof __propDef.props;
+export type VegaLiteHtmlEvents = typeof __propDef.events;
+export type VegaLiteHtmlSlots = typeof __propDef.slots;
+export default class VegaLiteHtml extends SvelteComponentTyped<VegaLiteHtmlProps, VegaLiteHtmlEvents, VegaLiteHtmlSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -1,28 +1,44 @@
 <script>import { isCodeInjection } from '../../../flows/utils';
-import { createEventDispatcher, getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 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 && $state && input.type == 'template' && (value = getValue(input));
+$: 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);
+        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 {
         setTimeout(() => (value = undefined), 0);
     }
 }
+function evalExpr(input) {
+    try {
+        const r = eval_like(input.expr, computeGlobalContext());
+        error = '';
+        return r;
+    }
+    catch (e) {
+        error = e.message;
+        return value;
+    }
+}
 function computeGlobalContext() {
     return Object.fromEntries(Object.entries($worldStore?.outputsById ?? {})
         .filter(([k, _]) => k != id)
@@ -31,12 +47,15 @@ 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)) {
         try {
-            return eval_like('`' + input.eval + '`', computeGlobalContext());
+            const r = eval_like('`' + input.eval + '`', computeGlobalContext());
+            error = '';
+            return r;
         }
         catch (e) {
             return e.message;

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

@@ -6,6 +6,7 @@ declare const __propDef: {
         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;
     };
     events: {

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

@@ -257,12 +257,15 @@ let lastStartedAt = Date.now();
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
 				See "Debug Runs" on the top right for more details
-				<pre title={result.error} class=" mt-2 text-2xs whitespace-pre-wrap">{result.error}</pre>
+				<pre
+					title={JSON.stringify(result.error, null, 4)}
+					class=" mt-2 text-2xs whitespace-pre-wrap">{JSON.stringify(result.error, null, 4)}</pre
+				>
 			</Alert>
 			<slot />
 		</div>
 	{:else}
-		<div class="grow min-w-1/2 {noMinH ? '' : 'min-h-[66%]'}">
+		<div class="block w-full h-full">
 			<slot />
 		</div>
 	{/if}

package/components/apps/components/selectInputs/AppSelect.svelte

@@ -12,10 +12,13 @@ let label;
 let items;
 let itemKey;
 $: outputs = $worldStore?.outputsById[id];
-function onChange({ detail }) {
-    outputs?.result.set(detail?.[itemKey] || undefined);
+function onChange(e) {
+    e?.stopPropagation();
+    window.dispatchEvent(new Event('pointerup'));
+    outputs?.result.set(e.detail?.[itemKey] || undefined);
 }
-const dispatch = createEventDispatcher();
+let value = undefined;
+$: items?.[0]?.['value'] != value && (value = items?.[0]?.['value']);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={label} />
@@ -28,7 +31,12 @@ const dispatch = createEventDispatcher();
 		class="select"
 		on:clear={onChange}
 		on:change={onChange}
+		on:focus={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		{items}
+		{value}
 		placeholder="Select an item"
 		on:click={() => {
 			if (!$connectingInput.opened) {

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

@@ -29,13 +29,9 @@ const options = writable({
 });
 let table = createSvelteTable(options);
 const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
-let selectedRowIndex = -1;
+let selectedRowIndex = 0;
 function toggleRow(row, rowIndex) {
-    if (selectedRowIndex === rowIndex) {
-        selectedRowIndex = -1;
-        outputs.selectedRow.set(null);
-    }
-    else {
+    if (selectedRowIndex !== rowIndex) {
         selectedRowIndex = rowIndex;
         outputs?.selectedRow.set(row.original);
     }
@@ -101,7 +97,7 @@ $: result && rerender();
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 bg-gray-50 text-left">
+					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -121,9 +117,7 @@ $: result && rerender();
 								{/each}
 								{#if actionButtons.length > 0}
 									<th class="!p-0">
-										<span class="block px-4 py-4 text-sm font-semibold border-b">
-											Actions
-										</span>
+										<span class="block px-4 py-4 text-sm font-semibold border-b"> Actions </span>
 									</th>
 								{/if}
 							</tr>
@@ -133,11 +127,11 @@ $: result && rerender();
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
 							<tr
 								class={classNames(
+									'last-of-type:!border-b-0',
 									selectedRowIndex === rowIndex
 										? 'bg-blue-100 hover:bg-blue-200'
 										: 'hover:bg-blue-50',
-									'divide-x',
-									'border-b w-full',
+									'divide-x w-full',
 									selectedRowIndex === rowIndex
 										? 'divide-blue-200 hover:divide-blue-300'
 										: 'divide-gray-200'

package/components/apps/editor/AppEditor.svelte

@@ -19,6 +19,7 @@ import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import SettingsPanel from './SettingsPanel.svelte';
 import { fly } from 'svelte/transition';
 import UnsavedConfirmationModal from '../../common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { page } from '$app/stores';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -73,7 +74,11 @@ let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: context = { email: $userStore?.email, username: $userStore?.username };
+$: context = {
+    email: $userStore?.email,
+    username: $userStore?.username,
+    query: Object.fromEntries($page.url.searchParams.entries())
+};
 $: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore, context));
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'min-w-[400px] max-w-[656px]' : 'min-w-[710px] w-full';
@@ -170,7 +175,7 @@ else {
 						{#if $connectingInput.opened}
 							<div
 								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly={{ duration: 100, y: -100 }}
+								transition:fly|local={{ duration: 100, y: -100 }}
 							>
 								<Alert title="Connecting" type="info">
 									<div class="flex gap-2 flex-col">

package/components/apps/editor/AppPreview.svelte

@@ -50,7 +50,7 @@ $: mounted && ($worldStore = buildWorld($staticOutputs, undefined, context));
 $: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
 </script>
 
-<div class="h-full w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
+<div class="h-full max-h-[calc(100%-41px)] overflow-auto w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto">
 	{#if $appStore.grid}
 		<div class={classNames('mx-auto pb-4', width)}>
 			<GridEditor {policy} />

package/components/apps/editor/componentsPanel/data.js

@@ -167,6 +167,11 @@ const buttons = {
                     onlyStatic: true,
                     optionValuesKey: 'buttonSizeOptions',
                     value: 'xs'
+                },
+                disabled: {
+                    fieldType: 'boolean',
+                    type: 'eval',
+                    expr: 'false'
                 }
             },
             card: false

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,4 +1,5 @@
-<script>import { classNames } from '../../../../utils';
+<script>import { page } from '$app/stores';
+import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
 import { key } from 'svelte-awesome/icons';
 import { displayData } from '../../utils';
@@ -32,7 +33,7 @@ function getComponentNameById(componentId) {
         return 'Table action';
     }
 }
-$: panels = [['ctx', ['email', 'username']]].concat(Object.entries($staticOutputs));
+$: panels = [['ctx', ['email', 'username', 'query']]].concat(Object.entries($staticOutputs));
 </script>
 
 <PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -38,7 +38,7 @@ let runLoading = false;
 
 <InlineScriptEditorDrawer {editor} bind:this={inlineScriptEditorDrawer} bind:inlineScript />
 
-<div class="h-full flex flex-col gap-1" transition:fly={{ duration: 50 }}>
+<div class="h-full flex flex-col gap-1" transition:fly|local={{ duration: 50 }}>
 	<div class="flex justify-between w-full gap-1 px-2 pt-1 flex-row items-center">
 		{#if name !== undefined}
 			<input bind:value={name} placeholder="Inline script name" />
@@ -119,6 +119,9 @@ let runLoading = false;
 			on:change={async (e) => {
 				if (inlineScript) {
 					const oldSchema = JSON.stringify(inlineScript.schema)
+					if (inlineScript.schema == undefined) {
+						inlineScript.schema = emptySchema()
+					}
 					await inferInlineScriptSchema(inlineScript?.language, e.detail, inlineScript.schema)
 					if (JSON.stringify(inlineScript.schema) != oldSchema) {
 						inlineScript = inlineScript

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -2,6 +2,7 @@
 import { classNames } from '../../../../utils';
 import { getContext } from 'svelte';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+import { getAppScripts } from './utils';
 export let selectedScriptComponentId = undefined;
 const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
 function selectInlineScript(id) {
@@ -10,56 +11,7 @@ function selectInlineScript(id) {
         $selectedComponent = selectedScriptComponentId;
     }
 }
-$: runnablesByName = $lazyGrid.reduce((acc, gridComponent) => {
-    const component = gridComponent.data;
-    if (component.type === 'tablecomponent') {
-        component.actionButtons.forEach((actionButton) => {
-            if (actionButton.componentInput?.type === 'runnable') {
-                if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                    acc.push({
-                        name: actionButton.componentInput.runnable.name,
-                        id: actionButton.id
-                    });
-                }
-            }
-        });
-    }
-    const componentInput = component.componentInput;
-    if (componentInput?.type === 'runnable') {
-        if (componentInput.runnable?.type === 'runnableByName') {
-            acc.push({
-                name: componentInput.runnable.name,
-                id: gridComponent.id
-            });
-        }
-    }
-    return acc;
-}, []);
-$: runnablesByPath = $lazyGrid.reduce((acc, gridComponent) => {
-    const component = gridComponent.data;
-    if (component.type === 'tablecomponent') {
-        component.actionButtons.forEach((actionButton) => {
-            if (actionButton.componentInput?.type === 'runnable') {
-                if (actionButton.componentInput.runnable?.type === 'runnableByPath') {
-                    acc.push({
-                        name: actionButton.componentInput.runnable.path,
-                        id: actionButton.id
-                    });
-                }
-            }
-        });
-    }
-    const componentInput = component.componentInput;
-    if (componentInput?.type === 'runnable') {
-        if (componentInput.runnable?.type === 'runnableByPath') {
-            acc.push({
-                name: componentInput.runnable.path,
-                id: gridComponent.id
-            });
-        }
-    }
-    return acc;
-}, []);
+$: runnables = getAppScripts($lazyGrid);
 // When seleced component changes, update selectedScriptComponentId
 $: {
     if (selectedComponent) {
@@ -71,9 +23,9 @@ $: {
 <div class="min-h-full flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByName.length > 0}
+			{#if runnables.inline.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByName as { name, id }, index (index)}
+					{#each runnables.inline as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(
@@ -109,17 +61,17 @@ $: {
 				</div>
 			{/if}
 
-			{#if runnablesByName.length == 0 && $app.unusedInlineScripts?.length == 0}
+			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
 				<div class="text-sm text-gray-500">No inline scripts</div>
 			{/if}
 		</div>
 	</PanelSection>
 
-	<PanelSection title="Others" smallPadding>
+	<PanelSection title="Imported scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
-			{#if runnablesByPath.length > 0}
+			{#if runnables.imported.length > 0}
 				<div class="flex gap-2 flex-col ">
-					{#each runnablesByPath as { name, id }, index (index)}
+					{#each runnables.imported as { name, id }, index (index)}
 						<!-- svelte-ignore a11y-click-events-have-key-events -->
 						<div
 							class="{classNames(

package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -0,0 +1,15 @@
+import type { AppComponent, GridItem } from "../../types";
+export interface AppScriptsList {
+    inline: {
+        name: string;
+        id: string;
+    }[];
+    imported: {
+        name: string;
+        id: string;
+    }[];
+}
+export declare function getAppScripts(grid: GridItem[]): FilledItem<{
+    data: AppComponent;
+    id: string;
+}>;

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' : ''
 			)}