windmill-components 1.448.50 → 1.472.2

package/package/components/apps/components/display/AppMenu.svelte

@@ -8,9 +8,9 @@ import InitializeComponent from '../helpers/InitializeComponent.svelte';
 import { Button } from '../../../common';
 import { loadIcon } from '../icon';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
-import Menu from '../../../common/menu/MenuV2.svelte';
 import { AppButton } from '../buttons';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import { Menubar, Menu, MeltButton } from '../../../meltComponents';
 export let id;
 export let configuration;
 export let customCss = undefined;
@@ -65,71 +65,82 @@ async function handleAfterIcon() {
 
 {#if render}
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		<Menu placement="bottom-end" justifyEnd={false} on:close on:open>
-			<div slot="trigger">
-				<Button
-					on:pointerdown={(e) => e.stopPropagation()}
-					btnClasses={twMerge(
-						css?.button?.class,
-						'wm-button',
-						'wm-menu-button',
-						resolvedConfig.fillContainer ? 'w-full h-full' : ''
-					)}
-					wrapperClasses={twMerge(
-						'wm-button-container',
-						'wm-menu-button-container',
-						resolvedConfig.fillContainer ? 'w-full h-full' : ''
-					)}
-					style={css?.button?.style}
-					size={resolvedConfig.size}
-					color={resolvedConfig.color}
-					nonCaptureEvent
-				>
-					<span class="truncate inline-flex gap-2 items-center">
-						{#if resolvedConfig.beforeIcon}
-							{#key resolvedConfig.beforeIcon}
-								<div class="min-w-4" bind:this={beforeIconComponent} />
-							{/key}
-						{/if}
-						{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
-							<div>{resolvedConfig.label}</div>
-						{/if}
-						{#if resolvedConfig.afterIcon}
-							{#key resolvedConfig.afterIcon}
-								<div class="min-w-4" bind:this={afterIconComponent} />
-							{/key}
-						{/if}
-					</span>
-				</Button>
-			</div>
+		<Menubar let:createMenu class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}>
+			<Menu
+				{createMenu}
+				placement="bottom-end"
+				justifyEnd={false}
+				class={resolvedConfig.fillContainer ? 'w-full h-full' : ''}
+				usePointerDownOutside={true}
+			>
+				<svelte:fragment slot="trigger" let:trigger>
+					<MeltButton meltElement={trigger} class="w-full h-full">
+						<Button
+							on:pointerdown={(e) => e.stopPropagation()}
+							btnClasses={twMerge(
+								css?.button?.class,
+								'wm-button',
+								'wm-menu-button',
+								resolvedConfig.fillContainer ? 'w-full h-full' : ''
+							)}
+							wrapperClasses={twMerge(
+								'wm-button-container',
+								'wm-menu-button-container',
+								resolvedConfig.fillContainer ? 'w-full h-full' : ''
+							)}
+							style={css?.button?.style}
+							size={resolvedConfig.size}
+							color={resolvedConfig.color}
+							nonCaptureEvent
+						>
+							<span class="truncate inline-flex gap-2 items-center">
+								{#if resolvedConfig.beforeIcon}
+									{#key resolvedConfig.beforeIcon}
+										<div class="min-w-4" bind:this={beforeIconComponent} />
+									{/key}
+								{/if}
+								{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+									<div>{resolvedConfig.label}</div>
+								{/if}
+								{#if resolvedConfig.afterIcon}
+									{#key resolvedConfig.afterIcon}
+										<div class="min-w-4" bind:this={afterIconComponent} />
+									{/key}
+								{/if}
+							</span>
+						</Button>
+					</MeltButton>
+				</svelte:fragment>
 
-			<div class="flex flex-col w-full p-1 gap-2">
-				{#if menuItems.length > 0}
-					{#each menuItems as actionButton, actionIndex (actionButton?.id)}
-						{#if actionButton.type == 'buttoncomponent'}
-							<div
-								on:pointerup={() => {
-									outputs?.result.set({
-										latestButtonClicked: actionButton.id
-									})
-								}}
-							>
-								<AppButton
-									extraKey={'idx' + actionIndex}
-									{render}
-									id={actionButton.id}
-									customCss={actionButton.customCss}
-									configuration={actionButton.configuration}
-									recomputeIds={actionButton.recomputeIds}
-									componentInput={actionButton.componentInput}
-									noWFull={false}
-									isMenuItem={true}
-								/>
-							</div>
-						{/if}
-					{/each}
-				{/if}
-			</div>
-		</Menu>
+				<div class="flex flex-col w-full p-1 gap-2 max-h-[50vh] overflow-y-auto">
+					{#if menuItems.length > 0}
+						{#each menuItems as actionButton, actionIndex (actionButton?.id)}
+							{#if actionButton.type == 'buttoncomponent'}
+								<div
+									on:pointerup={() => {
+										outputs?.result.set({
+											latestButtonClicked: actionButton.id
+										})
+									}}
+								>
+									<AppButton
+										noInitialize
+										extraKey={'idx' + actionIndex}
+										render={true}
+										id={actionButton.id}
+										customCss={actionButton.customCss}
+										configuration={actionButton.configuration}
+										recomputeIds={actionButton.recomputeIds}
+										componentInput={actionButton.componentInput}
+										noWFull={false}
+										isMenuItem={true}
+									/>
+								</div>
+							{/if}
+						{/each}
+					{/if}
+				</div>
+			</Menu>
+		</Menubar>
 	</AlignWrapper>
 {/if}

package/package/components/apps/components/display/AppMenu.svelte.d.ts

@@ -12,9 +12,6 @@ declare const __propDef: {
         menuItems: (BaseAppComponent & ButtonComponent)[];
     };
     events: {
-        close: CustomEvent<any>;
-        open: CustomEvent<any>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/components/display/AppRecomputeAll.svelte

@@ -14,13 +14,24 @@ export let customCss = undefined;
 export let configuration;
 export let render;
 export let horizontalAlignment = undefined;
-const { app, worldStore, policy } = getContext('AppViewerContext');
+const { app, worldStore, policy, recomputeAllContext } = getContext('AppViewerContext');
 let resolvedConfig = initConfig(components['recomputeallcomponent'].initialData.configuration, configuration);
 initOutput($worldStore, id, {
     loading: undefined
 });
 initializing = false;
 let css = initCss($app.css?.recomputeallcomponent, customCss);
+$: resolvedConfig.defaultRefreshInterval && handleRefreshInterval();
+function handleRefreshInterval() {
+    if (resolvedConfig.defaultRefreshInterval !== undefined) {
+        const newInterval = typeof resolvedConfig.defaultRefreshInterval === 'number'
+            ? resolvedConfig.defaultRefreshInterval * 1000
+            : parseInt(resolvedConfig.defaultRefreshInterval) * 1000;
+        if (newInterval !== $recomputeAllContext.interval && newInterval) {
+            $recomputeAllContext.setInter?.(newInterval);
+        }
+    }
+}
 </script>
 
 {#each Object.keys(components['recomputeallcomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppText.svelte

@@ -190,7 +190,7 @@ function autosize() {
 				{:else}
 					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						class="flex flex-wrap gap-2 pb-0.5 w-full {$mode === 'dnd' &&
+						class="flex flex-wrap gap-0.5 pb-0.5 w-full {$mode === 'dnd' &&
 						(componentInput?.type == 'template' || componentInput?.type == 'templatev2')
 							? 'cursor-text'
 							: 'overflow-auto'}"
@@ -198,7 +198,7 @@ function autosize() {
 						<svelte:element
 							this={component}
 							class={twMerge(
-								'whitespace-pre-wrap w-full',
+								'whitespace-pre-wrap grow',
 
 								css?.text?.class,
 								classes,
@@ -217,7 +217,7 @@ function autosize() {
 						</svelte:element>
 
 						{#if resolvedConfig.copyButton && result}
-							<div class="flex">
+							<div class="flex items-center">
 								<Button
 									title="Copy to clipboard"
 									variant="border"
@@ -236,3 +236,8 @@ function autosize() {
 		{/if}
 	</div>
 </RunnableWrapper>
+
+<style>
+	h1 {
+		font-size: 29px;
+	}</style>

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

@@ -79,15 +79,19 @@ function plot() {
 	/>
 {/each}
 
-<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-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
-				</Alert>
-			</div>
-		{/if}
-		<div on:pointerdown bind:this={divEl} />
-	</RunnableWrapper>
-</div>
+{#if render}
+	<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-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
+					</Alert>
+				</div>
+			{/if}
+			<div on:pointerdown bind:this={divEl} />
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} {render} {componentInput} {id} />
+{/if}

package/package/components/apps/components/display/PlotlyHtmlV2.svelte

@@ -131,15 +131,19 @@ let resolvedXData = [];
 	{/each}
 {/if}
 
-<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-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
-				</Alert>
-			</div>
-		{/if}
-		<div on:pointerdown bind:this={divEl} />
-	</RunnableWrapper>
-</div>
+{#if render}
+	<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-surface p-2 rounded-md whitespace-pre-wrap">{error}</pre>
+					</Alert>
+				</div>
+			{/if}
+			<div on:pointerdown bind:this={divEl} />
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} {render} {componentInput} {id} />
+{/if}

package/package/components/apps/components/display/VegaLiteHtml.svelte

@@ -52,8 +52,12 @@ $: vegaEmbed &&
 
 <InputValue key={'canvas'} {id} input={configuration.canvas} bind:value={canvas} />
 
-<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
-		<div on:pointerdown bind:this={divEl} />
-	</RunnableWrapper>
-</div>
+{#if render}
+	<div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
+		<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+			<div on:pointerdown bind:this={divEl} />
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} {render} {componentInput} {id} />
+{/if}

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -511,13 +511,13 @@ let loading = false;
 		{/if}
 	</div>
 </RunnableWrapper>
+
 <Portal name="db-explorer">
 	<Drawer bind:this={insertDrawer} size="800px">
 		<DrawerContent title="Insert row" on:close={insertDrawer.closeDrawer}>
 			<svelte:fragment slot="actions">
 				<Button color="dark" size="xs" on:click={insert} disabled={!isInsertable}>Insert</Button>
 			</svelte:fragment>
-
 			<InsertRow
 				bind:args
 				bind:isInsertable

package/package/components/apps/components/display/dbtable/InsertRow.svelte

@@ -1,16 +1,16 @@
-<script>import LightweightSchemaForm from '../../../../LightweightSchemaForm.svelte';
-import { ColumnIdentity } from './utils';
+<script>import { ColumnIdentity } from './utils';
 import init, { parse_sql, parse_mysql, parse_bigquery, parse_snowflake, parse_mssql } from 'windmill-sql-datatype-parser-wasm';
 import wasmUrl from 'windmill-sql-datatype-parser-wasm/windmill_sql_datatype_parser_wasm_bg.wasm?url';
 init(wasmUrl);
 import { argSigToJsonSchemaType } from '../../../../../inferArgSig';
+import SchemaForm from '../../../../SchemaForm.svelte';
 export let args = {};
 export let dbType = 'postgresql';
 let schema = undefined;
 export let columnDefs = [];
 $: fields = columnDefs
     ?.filter((t) => {
-    const shouldFilter = t.isidentity !== ColumnIdentity.Always && t?.hideInsert === true;
+    const shouldFilter = t.isidentity === ColumnIdentity.Always || t?.hideInsert === true;
     return !shouldFilter;
 })
     .map((column) => {
@@ -114,5 +114,5 @@ $: if (schema) {
 </script>
 
 {#if schema}
-	<LightweightSchemaForm {schema} bind:args />
+	<SchemaForm onlyMaskPassword {schema} bind:args />
 {/if}

package/package/components/apps/components/display/dbtable/utils.js

@@ -388,10 +388,28 @@ export async function getDbSchemas(resourceType, resourcePath, workspace, dbSche
                         console.error(testResult.result?.['error']?.['message']);
                     }
                     else {
+                        if (testResult.result === 'WINDMILL_TOO_BIG') {
+                            console.info('Result is too big, fetching result separately');
+                            const data = await JobService.getCompletedJobResult({
+                                workspace,
+                                id: job
+                            });
+                            testResult.result = data;
+                        }
                         if (resourceType !== undefined) {
                             if (resourceType !== 'graphql') {
                                 const { processingFn } = scripts[resourceType];
-                                const schema = processingFn !== undefined ? processingFn(testResult.result) : testResult.result;
+                                let schema;
+                                try {
+                                    schema =
+                                        processingFn !== undefined ? processingFn(testResult.result) : testResult.result;
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    errorCallback('Error processing schema');
+                                    resolve();
+                                    return;
+                                }
                                 const dbSchema = {
                                     lang: resourceTypeToLang(resourceType),
                                     schema,

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

@@ -11,6 +11,7 @@ import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import { Button } from '../../../../common';
 import { cellRendererFactory, defaultCellRenderer } from './utils';
 import { Download, Trash2 } from 'lucide-svelte';
+import { ColumnIdentity } from '../dbtable/utils';
 import AppAggridTableActions from './AppAggridTableActions.svelte';
 import Popover from '../../../../Popover.svelte';
 export let id;
@@ -222,6 +223,11 @@ function validateColumnDefs(columnDefs) {
     // Validate each column definition
     columnDefs.forEach((colDef, index) => {
         let noField = !colDef.field || typeof colDef.field !== 'string' || colDef.field.trim() === '';
+        if ((colDef.isidentity === ColumnIdentity.ByDefault ||
+            colDef.isidentity === ColumnIdentity.Always) &&
+            colDef.hideInsert == undefined) {
+            colDef.hideInsert = true;
+        }
         // Check if 'field' property exists and is a non-empty string
         if (noField && !(colDef.children && Array.isArray(colDef.children))) {
             isValid = false;

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

@@ -147,6 +147,10 @@ $: searchValue !== undefined && updateSearchInOutputs();
 	bind:result
 	bind:loading
 	bind:runnableComponent
+	on:recompute={() => {
+		console.log('recompute')
+		clear()
+	}}
 	{render}
 	autoRefresh={true}
 	allowConcurentRequests

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

@@ -146,7 +146,7 @@ let state = undefined;
 $: loaded && eGui && mountGrid();
 function refreshActions(actions) {
     if (!deepEqual(actions, lastActions)) {
-        lastActions = [...actions];
+        lastActions = structuredClone(actions);
         updateOptions();
     }
 }

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

@@ -5,11 +5,11 @@ import AppButton from '../../buttons/AppButton.svelte';
 import AppCheckbox from '../../inputs/AppCheckbox.svelte';
 import AppSelect from '../../inputs/AppSelect.svelte';
 import { twMerge } from 'tailwind-merge';
-import { Popup } from '../../../../common';
 import { Plug2 } from 'lucide-svelte';
 import ComponentOutputViewer from '../../../editor/contextPanel/ComponentOutputViewer.svelte';
 import { connectOutput } from '../../../editor/appUtils';
 import RowWrapper from '../../layout/RowWrapper.svelte';
+import Popover from '../../../../meltComponents/Popover.svelte';
 export let p;
 export let id;
 export let render;
@@ -23,12 +23,14 @@ export let selectRow;
 const dispatch = createEventDispatcher();
 const { selectedComponent, hoverStore, mode, connectingInput } = getContext('AppViewerContext');
 let rowDiv = undefined;
+let visible = false;
 onMount(() => {
     // apply w-full to the the parent of the parent of the rowDiv
     if (rowDiv) {
         const parent = rowDiv.parentElement?.parentElement?.parentElement;
         if (parent) {
             parent.classList.add('w-full');
+            visible = true;
         }
         else {
             //sometimes the parent is not available immediately
@@ -37,6 +39,7 @@ onMount(() => {
                 if (parent) {
                     parent.classList.add('w-full');
                 }
+                visible = true;
             }, 10);
         }
     }
@@ -51,8 +54,9 @@ onMount(() => {
 >
 	<div
 		class={twMerge(
-			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full',
-			wrapActions ? 'flex-wrap' : ''
+			'flex flex-row justify-center items-center gap-4 h-full px-4 py-1 w-full transition-opacity duration-50',
+			wrapActions ? 'flex-wrap' : '',
+			visible ? 'opacity-100' : 'opacity-0'
 		)}
 		bind:this={rowDiv}
 	>
@@ -113,34 +117,38 @@ onMount(() => {
 
 					{#if $connectingInput.opened}
 						<div class="absolute z-50 left-8 -top-[10px]">
-							<Popup
+							<Popover
 								floatingConfig={{
 									strategy: 'absolute',
 									placement: 'bottom-start'
 								}}
+								closeOnOtherPopoverOpen
+								contentClasses="p-4"
 							>
-								<svelte:fragment slot="button">
+								<svelte:fragment slot="trigger">
 									<button
 										class="bg-red-500/70 border border-red-600 px-1 py-0.5"
 										title="Outputs"
 										aria-label="Open output"><Plug2 size={12} /></button
 									>
 								</svelte:fragment>
-								<ComponentOutputViewer
-									suffix="table"
-									on:select={({ detail }) => {
-										const tableId = action.id.split('_')[0]
+								<svelte:fragment slot="content">
+									<ComponentOutputViewer
+										suffix="table"
+										on:select={({ detail }) => {
+											const tableId = action.id.split('_')[0]
 
-										connectOutput(
-											connectingInput,
-											action.type,
-											tableId,
-											`inputs.${action.id}[${rowIndex}].${detail}`
-										)
-									}}
-									componentId={action.id}
-								/>
-							</Popup>
+											connectOutput(
+												connectingInput,
+												action.type,
+												tableId,
+												`inputs.${action.id}[${rowIndex}].${detail}`
+											)
+										}}
+										componentId={action.id}
+									/>
+								</svelte:fragment>
+							</Popover>
 						</div>
 					{/if}
 				{/if}

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

@@ -17,12 +17,12 @@ import AppCheckbox from '../../inputs/AppCheckbox.svelte';
 import AppSelect from '../../inputs/AppSelect.svelte';
 import RowWrapper from '../../layout/RowWrapper.svelte';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
-import { Popup } from '../../../../common';
 import ComponentOutputViewer from '../../../editor/contextPanel/ComponentOutputViewer.svelte';
 import { EyeIcon, Plug2 } from 'lucide-svelte';
 import AppCell from './AppCell.svelte';
 import sum from 'hash-sum';
 import RefreshButton from '../../helpers/RefreshButton.svelte';
+import Popover from '../../../../meltComponents/Popover.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -471,31 +471,35 @@ function updateCellValue(rowIndex, columnIndex, newCellValue) {
 
 																{#if $connectingInput.opened}
 																	<div class="absolute z-50 left-8 -top-[10px]">
-																		<Popup
+																		<Popover
 																			floatingConfig={{
 																				strategy: 'absolute',
 																				placement: 'bottom-start'
 																			}}
+																			closeOnOtherPopoverOpen
+																			contentClasses="p-4"
 																		>
-																			<svelte:fragment slot="button">
+																			<svelte:fragment slot="trigger">
 																				<button
 																					class="bg-red-500/70 border border-red-600 px-1 py-0.5"
 																					title="Outputs"
 																					aria-label="Open output"><Plug2 size={12} /></button
 																				>
 																			</svelte:fragment>
-																			<ComponentOutputViewer
-																				suffix="table"
-																				on:select={({ detail }) =>
-																					connectOutput(
-																						connectingInput,
-																						'buttoncomponent',
-																						actionButton.id,
-																						detail
-																					)}
-																				componentId={actionButton.id}
-																			/>
-																		</Popup>
+																			<svelte:fragment slot="content">
+																				<ComponentOutputViewer
+																					suffix="table"
+																					on:select={({ detail }) =>
+																						connectOutput(
+																							connectingInput,
+																							'buttoncomponent',
+																							actionButton.id,
+																							detail
+																						)}
+																					componentId={actionButton.id}
+																				/>
+																			</svelte:fragment>
+																		</Popover>
 																	</div>
 																{/if}
 															{/if}

package/package/components/apps/components/helpers/InitializeComponent.svelte

@@ -4,6 +4,7 @@ const { initialized } = getContext('AppViewerContext');
 onMount(() => {
     if (!$initialized.initializedComponents.includes(id)) {
         $initialized.initializedComponents = [...$initialized.initializedComponents, id];
+        $initialized = { ...$initialized };
     }
 });
 onDestroy(() => {

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

@@ -208,7 +208,7 @@ async function getValue(input) {
         return;
     if ((input.type === 'template' || input.type == 'templatev2') && isCodeInjection(input.eval)) {
         try {
-            const r = await eval_like('`' + input.eval + '`', computeGlobalContext($worldStore, fullContext), $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false, groupContext?.id);
+            const r = await eval_like('`' + input.eval.replaceAll('`', '\\`') + '`', computeGlobalContext($worldStore, fullContext), $state, $mode == 'dnd', $componentControl, $worldStore, $runnableComponents, false, groupContext?.id);
             error = '';
             return r;
         }
@@ -224,10 +224,11 @@ async function getValue(input) {
         return input.eval;
     }
 }
-function onValueChange(newValue) {
+function onValueChange(newValue, force) {
     if (iterContext && $iterContext.disabled)
         return;
-    if (lastInput?.type === 'connected' && newValue !== undefined && newValue !== null) {
+    if (lastInput?.type === 'connected' &&
+        ((newValue !== undefined && newValue !== null) || force)) {
         const { connection } = lastInput;
         if (!connection) {
             // No connection

package/package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -64,6 +64,4 @@ $: result != undefined && outputs && setOutput(result);
 			<RefreshIndicator {loading} />
 		</div>
 	</div>
-{:else}
-	<div class="w-full h-full" />
 {/if}