fix: fix runnable inputs not being retriggered on change in some rare cases

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

@@ -491,6 +491,7 @@
 				if (ctxMatch) {
 					nonStaticRunnableInputs[k] = '$ctx:' + ctxMatch[1]
 				} else {
+					// console.log('k', k)
 					nonStaticRunnableInputs[k] = await inputValues[k]?.computeExpr()
 				}
 				if (isEditor && field?.type == 'evalv2' && field.allowUserResources) {
@@ -506,6 +507,7 @@
 
 		const oneOfRunnableInputs = isEditor ? collectOneOfFields(fields, $app) : {}
 
+		// console.log(JSON.stringify({ id, nonStaticRunnableInputs, inputValues }))
 		const requestBody: ExecuteComponentData['requestBody'] = {
 			args: nonStaticRunnableInputs,
 			component: id,
@@ -749,7 +751,7 @@
 
 	let lastJobId: string | undefined = $state(undefined)
 
-	let inputValues: Record<string, InputValue> = $state({})
+	let inputValues: Record<string, InputValue> = {}
 
 	function updateBgRuns(loading: boolean) {
 		if (loading) {

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

@@ -91,6 +91,7 @@
 		} else {
 			outputs?.result.set(undefined)
 		}
+		console.log('outputs?.result', outputs?.result.peak())
 		untrack(() => fireOnChange())
 	})
 </script>

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

@@ -191,8 +191,8 @@
 										{#if job?.args}
 											<div class="p-2">
 												<JobArgs
-													id={job.id}
-													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													id={job?.id}
+													workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
 													args={job?.args}
 												/>
 											</div>
@@ -216,12 +216,12 @@
 													/>
 												</Pane>
 												<Pane size={50} minSize={10} class="text-sm text-secondary">
-													{#if job != undefined && 'result' in job && job.result != undefined}<div
+													{#if job != undefined && 'result' in job && job?.result != undefined}<div
 															class="relative h-full px-2"
 															><DisplayResult
 																workspaceId={$workspaceStore}
 																jobId={selectedJobId}
-																result={job.result}
+																result={job?.result}
 															/></div
 														>
 													{:else if testIsLoading}
@@ -237,7 +237,7 @@
 												{#if jobResult?.transformer}
 													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
 														<div class="font-bold">Transformer results</div>
-														{#if job != undefined && 'result' in job && job.result != undefined}
+														{#if job != undefined && 'result' in job && job?.result != undefined}
 															<div class="relative h-full px-2">
 																<DisplayResult
 																	workspaceId={$workspaceStore}

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

@@ -56,6 +56,29 @@
 {#if componentInput.fieldType !== 'any'}
 	<div class="w-full">
 		<div class="flex gap-2 justify-end" bind:clientWidth>
+			<div class="flex">
+				<ConnectionButton
+					closeConnection={() => {
+						$connectingInput = {
+							opened: false,
+							hoveredComponent: undefined,
+							input: undefined,
+							onConnect: () => {}
+						}
+						dispatch('select', true)
+					}}
+					openConnection={() => {
+						$connectingInput = {
+							opened: true,
+							input: undefined,
+							hoveredComponent: undefined,
+							onConnect: applyConnection
+						}
+					}}
+					isOpen={!!$connectingInput.opened}
+				/>
+			</div>
+
 			<ToggleButtonGroup
 				on:selected={() => {
 					onchange?.()
@@ -121,29 +144,6 @@
 					/>
 				{/snippet}
 			</ToggleButtonGroup>
-
-			<div class="flex">
-				<ConnectionButton
-					closeConnection={() => {
-						$connectingInput = {
-							opened: false,
-							hoveredComponent: undefined,
-							input: undefined,
-							onConnect: () => {}
-						}
-						dispatch('select', true)
-					}}
-					openConnection={() => {
-						$connectingInput = {
-							opened: true,
-							input: undefined,
-							hoveredComponent: undefined,
-							onConnect: applyConnection
-						}
-					}}
-					isOpen={!!$connectingInput.opened}
-				/>
-			</div>
 		</div>
 	</div>
 {/if}

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

@@ -189,6 +189,7 @@
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
 					<ConnectionButton
+						small
 						{closeConnection}
 						{openConnection}
 						isOpen={!!$connectingInput.opened}

frontend/src/lib/components/common/button/ConnectionButton.svelte

@@ -7,13 +7,25 @@
 	import type { AppViewerContext } from '$lib/components/apps/types'
 	import { twMerge } from 'tailwind-merge'
 
-	export let isOpen = false
-	export let openConnection: () => void
-	export let closeConnection: () => void
-	export let btnWrapperClasses = ''
-	export let id: string | undefined = undefined
+	interface Props {
+		isOpen?: boolean
+		openConnection: () => void
+		closeConnection: () => void
+		btnWrapperClasses?: string
+		id?: string | undefined
+		small?: boolean
+	}
 
-	let selected = false
+	let {
+		isOpen = false,
+		openConnection,
+		closeConnection,
+		btnWrapperClasses = '',
+		id = undefined,
+		small
+	}: Props = $props()
+
+	let selected = $state(false)
 
 	const { panzoomActive } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -51,25 +63,27 @@
 		}
 	}
 
-	function handlePointerDownOutside(e: CustomEvent) {
+	function handlePointerDownOutside() {
 		if (!$panzoomActive) {
 			deactivateConnection()
 		}
 	}
 
-	$: !isOpen && (selected = false)
+	$effect(() => {
+		!isOpen && (selected = false)
+	})
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	use:pointerDownOutside={{
 		capture: true,
 		stopPropagation: isOpen,
 		exclude: getConnectionButtonElements,
-		customEventName: 'pointerdown_connecting'
+		customEventName: 'pointerdown_connecting',
+		onClickOutside: () => handlePointerDownOutside()
 	}}
-	on:keydown={handleKeyDown}
-	on:pointerdown_outside={handlePointerDownOutside}
+	onkeydown={handleKeyDown}
 	data-connection-button
 >
 	<AnimatedButton
@@ -79,14 +93,14 @@
 		marginWidth="2px"
 	>
 		<Button
-			size="xs"
+			size={small ? 'xs' : 'md'}
 			variant="border"
 			color="light"
 			title="Connect"
 			on:click={() => handleConnect(true)}
 			{id}
 			wrapperClasses={twMerge(btnWrapperClasses, selected ? 'opacity-100' : '')}
-			btnClasses="p-0"
+			btnClasses={small ? 'p-0' : ''}
 		>
 			<Plug size={14} />
 		</Button>