feat(app): fields inputs can be picked to not trigger recompute individually

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

@@ -594,6 +594,7 @@
 			{id}
 			input={fields[key]}
 			bind:value={runnableInputValues[key]}
+			onDemandOnly={v.onDemandOnly}
 		/>
 	{/if}
 {/each}

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

@@ -116,6 +116,8 @@
 							shouldCapitalize={false}
 							bind:inputSpecs={hiddenInlineScript.script.fields}
 							userInputEnabled={false}
+							recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
+							showOnDemandOnlyToggle
 						/>
 					{/key}
 				</PanelSection>

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

@@ -309,6 +309,9 @@
 										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
 										userInputEnabled={component.type === 'formcomponent' ||
 											component.type === 'formbuttoncomponent'}
+										recomputeOnInputChanged={componentSettings.item.data.componentInput
+											.recomputeOnInputChanged}
+										showOnDemandOnlyToggle
 									/>
 								</div>
 							{/if}

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

@@ -37,6 +37,8 @@
 	export let fixedOverflowWidgets: boolean = true
 	export let loading: boolean = false
 	export let acceptSelf: boolean = false
+	export let recomputeOnInputChanged = true
+	export let showOnDemandOnlyToggle = true
 
 	const { connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -176,6 +178,8 @@
 				{id}
 				bind:componentInput
 				{fixedOverflowWidgets}
+				{recomputeOnInputChanged}
+				{showOnDemandOnlyToggle}
 			/>
 		{:else if componentInput?.type === 'upload'}
 			<UploadInputEditor bind:componentInput {fileUpload} />

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

@@ -15,6 +15,8 @@
 	export let displayType = false
 	export let deletable = false
 	export let acceptSelf: boolean = false
+	export let recomputeOnInputChanged = true
+	export let showOnDemandOnlyToggle = false
 
 	$: finalInputSpecsConfiguration = inputSpecsConfiguration ?? inputSpecs
 
@@ -35,6 +37,8 @@
 					inputSpecsConfiguration={finalInputSpecsConfiguration?.[k]?.['configuration']}
 					labels={finalInputSpecsConfiguration?.[k]?.['labels']}
 					tooltip={finalInputSpecsConfiguration?.[k]?.['tooltip']}
+					{recomputeOnInputChanged}
+					{showOnDemandOnlyToggle}
 				/>
 			{:else}
 				{@const meta = finalInputSpecsConfiguration?.[k]}
@@ -56,6 +60,8 @@
 					customTitle={meta?.['customTitle']}
 					loading={meta?.['loading']}
 					{displayType}
+					{recomputeOnInputChanged}
+					{showOnDemandOnlyToggle}
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">

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

@@ -15,6 +15,8 @@
 	export let tooltip: string | undefined
 	export let disabledOptions: string[] = []
 	export let acceptSelf: boolean = false
+	export let recomputeOnInputChanged = true
+	export let showOnDemandOnlyToggle = true
 
 	$: {
 		if (oneOf == undefined) {
@@ -82,6 +84,7 @@
 
 			{#if config && oneOf.configuration[oneOf.selected]}
 				<InputsSpecEditor
+					{recomputeOnInputChanged}
 					key={nestedKey}
 					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
 					{id}
@@ -98,6 +101,7 @@
 					tooltip={config?.['tooltip']}
 					fileUpload={config?.['fileUpload']}
 					loading={config?.['loading']}
+					{showOnDemandOnlyToggle}
 				/>
 			{/if}
 		{/each}

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -25,7 +25,7 @@
 	<div
 		transition:fade={{ duration: 150 }}
 		use:popperContent={{ placement: 'bottom', strategy: 'fixed' }}
-		class="color-picker-input z-[1002]"
+		class="color-picker-input z-[1002] !text-primary"
 		style="width: {width > 280 ? width : 280}px;"
 	>
 		<ColorPicker
@@ -33,7 +33,6 @@
 			bind:hex={value}
 			label={value}
 			components={ChromeVariant}
-			sliderDirection="horizontal"
 			--focus-color="#e0e7ff"
 		/>
 	</div>
@@ -50,6 +49,7 @@
 		border-radius: 0.375rem !important;
 		top: 6px !important;
 		z-index: 30 !important;
+		color: black;
 	}
 
 	.color-picker-input .slider-wrapper {
@@ -69,7 +69,8 @@
 
 	.color-picker-input .input-container > input {
 		background-color: #ffffff;
-		border: 1px solid #d1d5db;
+		border: 1px solid #d1d5db !important;
 		border-radius: 6px;
+		color: black !important;
 	}
 </style>

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte

@@ -9,12 +9,15 @@
 	import { Maximize2, X } from 'lucide-svelte'
 	import { Drawer } from '$lib/components/common'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import Toggle from '$lib/components/Toggle.svelte'
 
 	export let componentInput: EvalV2AppInput | undefined
 	export let id: string
 	export let field: string
 	export let fixedOverflowWidgets: boolean = true
 	export let acceptSelf: boolean = false
+	export let recomputeOnInputChanged = true
+	export let showOnDemandOnlyToggle = false
 
 	const { onchange, worldStore, state, app } = getContext<AppViewerContext>('AppViewerContext')
 	const { evalPreview } = getContext<AppEditorContext>('AppEditorContext')
@@ -143,9 +146,28 @@
 			or surround with <pre class="font-mono text-2xs inline">{'()'}</pre></div
 		>
 	{/if}
-	{#if componentInput.connections?.length > 0}
+
+	{#if componentInput.connections?.length > 0 && recomputeOnInputChanged}
 		<div class="flex flex-wrap gap-2 items-center">
-			<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
+			{#if showOnDemandOnlyToggle}
+				<Toggle
+					size="xs"
+					color="blue"
+					disabled={!recomputeOnInputChanged}
+					checked={!componentInput.onDemandOnly}
+					on:change={() => {
+						if (componentInput) {
+							componentInput.onDemandOnly = !componentInput.onDemandOnly
+							if (!componentInput.onDemandOnly) {
+								delete componentInput.onDemandOnly
+							}
+						}
+					}}
+				/>
+			{/if}
+			<div class="text-2xs text-tertiary"
+				>{componentInput.onDemandOnly ? 'NOT' : ''} Re-evaluated on changes to:</div
+			>
 			<div class="flex flex-wrap gap-1">
 				{#each componentInput.connections as connection (connection.componentId + '-' + connection.id)}
 					<span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border"