change default recomputeOnInputChanges

frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte

@@ -14,7 +14,7 @@
 	export let name: string
 	export let inlineScript: InlineScript | undefined
 	export let fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
-	export let doNotRecomputeOnInputChanged: boolean
+	export let recomputeOnInputChanged: boolean
 	export let recomputableByRefreshButton: boolean
 
 	let result: any = undefined
@@ -32,7 +32,7 @@
 	{id}
 	{fields}
 	autoRefresh={true}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 	bind:result
 	transformer={undefined}
 	runnable={{

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -31,7 +31,7 @@
 	export let render: boolean
 	export let outputs: { result: Output<any>; loading: Output<boolean> }
 	export let extraKey = ''
-	export let doNotRecomputeOnInputChanged: boolean = false
+	export let recomputeOnInputChanged: boolean = false
 	export let loading = false
 	export let recomputableByRefreshButton: boolean = true
 
@@ -99,7 +99,8 @@
 		runnable && runnable.type === 'runnableByName' ? runnable.inlineScript?.refreshOn ?? [] : []
 
 	function refreshIfAutoRefresh(_src: string) {
-		const refreshEnabled = autoRefresh && (!doNotRecomputeOnInputChanged || refreshOn?.length > 0)
+		const refreshEnabled =
+			autoRefresh && ((recomputeOnInputChanged ?? true) || refreshOn?.length > 0)
 		if (refreshEnabled && $worldStore.initialized) {
 			setDebouncedExecute()
 		}

frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte

@@ -107,7 +107,7 @@
 		runnable={componentInput.runnable}
 		transformer={componentInput.transformer}
 		{autoRefresh}
-		bind:doNotRecomputeOnInputChanged={componentInput.doNotRecomputeOnInputChanged}
+		bind:recomputeOnInputChanged={componentInput.recomputeOnInputChanged}
 		{id}
 		{extraQueryParams}
 		{forceSchemaDisplay}

frontend/src/lib/components/apps/components/inputs/AppSelect.svelte

@@ -127,25 +127,16 @@
 				css?.input?.style}
 			{value}
 			{placeholder}
-			on:click={() => {
-				if (!$connectingInput.opened) {
-					$selectedComponent = [id]
-				}
-			}}
 			on:focus={() => {
 				if (!$connectingInput.opened) {
 					$selectedComponent = [id]
 				}
 			}}
-			floatingConfig={{
-				strategy: 'fixed'
-			}}
 		>
 			<div slot="item" let:item>
 				{#if create}
 					{item.created ? 'Add new: ' : ''}
 				{/if}
-
 				{item.label}
 			</div>
 		</Select>

frontend/src/lib/components/apps/editor/AppPreview.svelte

@@ -169,7 +169,7 @@
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
 				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}

frontend/src/lib/components/apps/editor/GridEditor.svelte

@@ -87,7 +87,7 @@
 			<RecomputeAllComponents />
 		{/if}
 		<div class="flex text-2xs text-gray-600 gap-1 items-center">
-			<div class="py-2 pr-2  text-gray-600 flex gap-2 items-center">
+			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
 				Hide bar on view
 				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
 			</div>
@@ -164,7 +164,7 @@
 				inlineScript={script.inlineScript}
 				name={script.name}
 				fields={script.fields}
-				doNotRecomputeOnInputChanged={script.doNotRecomputeOnInputChanged ?? false}
+				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
 				recomputableByRefreshButton={script.autoRefresh ?? false}
 			/>
 		{/if}

frontend/src/lib/components/apps/editor/SettingsPanel.svelte

@@ -102,7 +102,8 @@
 					fields={hiddenInlineScript.script.fields}
 					autoRefresh={hiddenInlineScript.script.autoRefresh}
 					id={`bg_${hiddenInlineScript.index}`}
-					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
+					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
+					doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
 					bind:inlineScript={hiddenInlineScript.script.inlineScript}
 				/>
 			{:else}

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -52,6 +52,14 @@ export function selectId(
 	selectedComponent: Writable<string[] | undefined>,
 	app: App
 ) {
+	// this ensure handleClickOutside are triggered
+	window.dispatchEvent(
+		new MouseEvent('click', {
+			view: window,
+			bubbles: true,
+			cancelable: true
+		})
+	)
 	if (e.shiftKey) {
 		selectedComponent.update((old) => {
 			if (old && old?.[0]) {

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -94,7 +94,7 @@
 	{/if}
 
 	{#if ismoving}
-		<div class="absolute -top-8 w-40 ">
+		<div class="absolute -top-8 w-40">
 			<button
 				class="border p-0.5 text-xs"
 				on:click={() => {
@@ -464,5 +464,18 @@
 	</div>
 </div>
 {#if initializing}
-	<div class="absolute inset-0 center-center flex-col bg- border animate-skeleton" />
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		on:mouseover|stopPropagation={() => {
+			if (component.id !== $hoverStore) {
+				$hoverStore = component.id
+			}
+		}}
+		on:mouseout|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class="absolute inset-0 center-center flex-col bg- border animate-skeleton"
+	/>
 {/if}

frontend/src/lib/components/apps/editor/component/ComponentWrapper.svelte

@@ -13,6 +13,7 @@
 
 	function selectComponent(e: PointerEvent, id: string) {
 		if (!$connectingInput.opened) {
+			e.stopPropagation()
 			selectId(e, id, selectedComponent, $app)
 			if ($focusedGrid?.parentComponentId != id) {
 				$focusedGrid = undefined

frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -22,49 +22,51 @@
 </script>
 
 {#if componentInput.fieldType !== 'any'}
-	<div class="w-full overflow-x-auto" bind:clientWidth>
-		<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
-			{#if componentInput.fieldType === 'template'}
-				<ToggleButton position="left" value="template" size="xs" disable={disableStatic}>
-					{brackets}&nbsp;<span class="hidden lg:block">Template</span>
-				</ToggleButton>
-			{:else}
+	<div class="w-full">
+		<div class="overflow-x-auto" bind:clientWidth>
+			<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+				{#if componentInput.fieldType === 'template'}
+					<ToggleButton position="left" value="template" size="xs" disable={disableStatic}>
+						{brackets}&nbsp;<span class="hidden lg:block">Template</span>
+					</ToggleButton>
+				{:else}
+					<ToggleButton
+						title="Static"
+						position="left"
+						value="static"
+						startIcon={{ icon: faPen }}
+						size="xs"
+						disable={disableStatic}
+					>
+						{#if clientWidth > 250}
+							<span class="hidden lg:block">Static</span>
+						{/if}
+					</ToggleButton>
+				{/if}
+
 				<ToggleButton
-					title="Static"
-					position="left"
-					value="static"
-					startIcon={{ icon: faPen }}
+					title="Connect"
+					value="connected"
+					position="center"
+					startIcon={{ icon: faArrowRight }}
 					size="xs"
-					disable={disableStatic}
 				>
 					{#if clientWidth > 250}
-						<span class="hidden lg:block">Static</span>
+						<span class="hidden lg:block">Connect</span>
 					{/if}
 				</ToggleButton>
-			{/if}
-
-			<ToggleButton
-				title="Connect"
-				value="connected"
-				position="center"
-				startIcon={{ icon: faArrowRight }}
-				size="xs"
-			>
-				{#if clientWidth > 250}
-					<span class="hidden lg:block">Connect</span>
-				{/if}
-			</ToggleButton>
-			<ToggleButton
-				title="Compute"
-				position="right"
-				value="runnable"
-				startIcon={{ icon: faCode }}
-				size="xs"
-			>
-				{#if clientWidth > 250}
-					<span class="hidden lg:block">Compute</span>
-				{/if}
-			</ToggleButton>
-		</ToggleButtonGroup>
+				<ToggleButton
+					title="Compute"
+					position="right"
+					value="runnable"
+					startIcon={{ icon: faCode }}
+					size="xs"
+				>
+					{#if clientWidth > 250}
+						<span class="hidden lg:block">Compute</span>
+					{/if}
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
 	</div>
 {/if}

frontend/src/lib/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -30,6 +30,12 @@
 	function clear() {
 		appInput = clearResultAppInput(appInput)
 	}
+
+	if (appInput.recomputeOnInputChanged === undefined) {
+		appInput.recomputeOnInputChanged = true
+	} else if (appInput.doNotRecomputeOnInputChanged == true) {
+		appInput.recomputeOnInputChanged = false
+	}
 </script>
 
 <div class="flex justify-between w-full items-center gap-1">
@@ -40,7 +46,7 @@
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1  justify-center">
+	<div class="flex gap-1 justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" on:click={detach}>
 				Detach&nbsp;
@@ -102,11 +108,9 @@
 		<div class="flex items-center">
 			<Toggle
 				size="xs"
-				color="red"
-				bind:checked={appInput.doNotRecomputeOnInputChanged}
-				options={{ right: 'do NOT recompute on input changes' }}
+				bind:checked={appInput.recomputeOnInputChanged}
+				options={{ right: 'recompute on any input changes' }}
 			/>
-			<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
 		</div>
 	{/if}
 
@@ -115,7 +119,7 @@
 			bind:runnable={appInput.runnable}
 			{appComponent}
 			fields={appInput.fields}
-			doNotRecomputeOnInputChanged={appInput.doNotRecomputeOnInputChanged}
+			recomputeOnInputChanged={appInput.recomputeOnInputChanged}
 		/>
 	</div>
 {/if}

frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -181,7 +181,7 @@
 		color="light"
 		variant="border"
 		startIcon={{ icon: faPlus }}
-		btnClasses="truncate"
+		btnClasses="truncate w-full"
 	>
 		Create an inline script
 	</Button>
@@ -190,7 +190,7 @@
 		size="sm"
 		color="blue"
 		startIcon={{ icon: faMousePointer }}
-		btnClasses="truncate"
+		btnClasses="truncate w-full"
 	>
 		Select a script or flow
 	</Button>

frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte

@@ -7,7 +7,6 @@
 	} from '$lib/components/apps/inputType'
 	import type { InlineScript } from '$lib/components/apps/types'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	import TriggerBadgesList from './TriggerBadgesList.svelte'
 	import { getDependencies } from './triggerListUtils'
@@ -16,7 +15,16 @@
 	export let autoRefresh: boolean = false
 	export let id: string
 	export let inlineScript: InlineScript
-	export let doNotRecomputeOnInputChanged: boolean = false
+	export let recomputeOnInputChanged: boolean | undefined = true
+	export let doNotRecomputeOnInputChanged: undefined | boolean = undefined
+
+	if (doNotRecomputeOnInputChanged == true) {
+		recomputeOnInputChanged = false
+	}
+
+	if (recomputeOnInputChanged == undefined) {
+		recomputeOnInputChanged = true
+	}
 
 	$: dependencies = getDependencies(fields)
 </script>
@@ -25,11 +33,9 @@
 	<div class="flex items-center px-1">
 		<Toggle
 			size="xs"
-			color="red"
-			bind:checked={doNotRecomputeOnInputChanged}
-			options={{ right: 'do NOT recompute on input changes' }}
+			bind:checked={recomputeOnInputChanged}
+			options={{ right: 'recompute on any input changes' }}
 		/>
-		<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
 	</div>
 {/if}
 
@@ -38,5 +44,5 @@
 	{id}
 	inputDependencies={dependencies}
 	onLoad={autoRefresh}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 />

frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -16,7 +16,7 @@
 	export let fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 	export let appComponent: AppComponent
 	export let runnable: RunnableByName
-	export let doNotRecomputeOnInputChanged: boolean = false
+	export let recomputeOnInputChanged: boolean = false
 
 	const onClick = ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(
 		appComponent.type
@@ -33,7 +33,7 @@
 	inputDependencies={onClick ? [] : getDependencies(fields)}
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 	id={$selectedComponent?.[0]}
 	{onClick}
 />

frontend/src/lib/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -11,7 +11,7 @@
 	export let onClick: boolean = false
 	export let onLoad: boolean = false
 	export let id: string | undefined = undefined
-	export let doNotRecomputeOnInputChanged: boolean = false
+	export let recomputeOnInputChanged: boolean = false
 
 	const colors = {
 		red: 'text-red-800 border-red-600 bg-red-100',
@@ -84,11 +84,11 @@
 
 <div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
 	{#if recomputedBadges.length === 0 && !onLoad && !onClick && inputDependencies?.length === 0 && !frontendDependencies}
-		<p class="text-xs font-semibold text-slate-800 ">
+		<p class="text-xs font-semibold text-slate-800">
 			This script has no triggers. It will never run.
 		</p>
 	{:else}
-		<div class="text-sm font-semibold text-gray-800 ">Triggered by</div>
+		<div class="text-sm font-semibold text-gray-800">Triggered by</div>
 
 		{#if onLoad || onClick}
 			<div class="w-full">
@@ -104,7 +104,7 @@
 				</div>
 			</div>
 		{/if}
-		{#if inputDependencies.length > 0 && !doNotRecomputeOnInputChanged}
+		{#if inputDependencies.length > 0 && (recomputeOnInputChanged ?? true)}
 			<div class="w-full">
 				<div class="flex justify-between items-center mb-1">
 					<div class="text-xs font-semibold text-slate-800">Change on values</div>
@@ -130,7 +130,7 @@
 			</div>
 		{/if}
 	{/if}
-	{#if frontendDependencies && !doNotRecomputeOnInputChanged}
+	{#if frontendDependencies && !recomputeOnInputChanged}
 		<div class="w-full">
 			<div class="flex justify-between items-center">
 				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>

frontend/src/lib/components/apps/inputType.ts

@@ -89,7 +89,9 @@ export type ResultInput = {
 	fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 	type: 'runnable'
 	value?: any
+	// kept for migration purposes
 	doNotRecomputeOnInputChanged?: boolean
+	recomputeOnInputChanged?: boolean
 }
 
 type AppInputSpec<T extends InputType, U, V extends InputType = never> = (

frontend/src/lib/components/apps/types.ts

@@ -114,7 +114,9 @@ export type App = {
 		inlineScript: InlineScript | undefined
 		fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>
 		autoRefresh?: boolean
+		//deprecated and to be removed after migration
 		doNotRecomputeOnInputChanged?: boolean
+		recomputeOnInputChanged?: boolean
 	}>
 	css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>
 	subgrids?: Record<string, GridItem[]>

frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte

@@ -204,7 +204,7 @@
 			{/if}
 
 			{#if showPassword}
-				<div class="mt-6">
+				<div>
 					<div class="space-y-6">
 						{#if isCloudHosted()}
 							<p class="text-xs text-gray-500 italic pb-6">
@@ -216,7 +216,7 @@
 							<label for="email" class="block text-sm font-medium leading-6 text-gray-900">
 								Email
 							</label>
-							<div class="mt-1">
+							<div>
 								<input
 									type="email"
 									bind:value={email}
@@ -231,7 +231,7 @@
 							<label for="password" class="block text-sm font-medium leading-6 text-gray-900">
 								Password
 							</label>
-							<div class="mt-1">
+							<div>
 								<input
 									on:keyup={handleKeyUp}
 									bind:value={password}
@@ -243,7 +243,7 @@
 							</div>
 						</div>
 
-						<div>
+						<div class="pt-2">
 							<button
 								on:click={login}
 								disabled={!email || !password}