fix: improve arginput sql and object viewer args change

frontend/src/lib/components/ArgInput.svelte

@@ -166,7 +166,7 @@
 			value = undefined
 		}
 		if ((value == undefined || value == null) && !ignoreValueUndefined) {
-			value = defaultValue
+			value = structuredClone(defaultValue)
 			if (defaultValue === undefined || defaultValue === null) {
 				if (inputCat === 'string') {
 					value = nullable ? null : ''
@@ -246,17 +246,47 @@
 		)
 	}
 
+	function isRawStringEditor(inputCat?: string) {
+		return inputCat == 'sql' || inputCat == 'yaml'
+	}
+
 	function evalValueToRaw() {
-		rawValue = isObjectCat(inputCat) ? JSON.stringify(value, null, 2) : undefined
-		rawValue && editor?.getCode() != rawValue && editor?.setCode(rawValue)
+		if (setCodeDisabled) {
+			return
+		}
+		const newRawValue =
+			value == undefined || value == null
+				? ''
+				: isObjectCat(inputCat)
+				? JSON.stringify(value, null, 2)
+				: isRawStringEditor(inputCat)
+				? typeof value == 'string'
+					? value
+					: JSON.stringify(value, null, 2)
+				: undefined
+
+		if (newRawValue != rawValue) {
+			rawValue = newRawValue
+			rawValue != undefined && editor?.getCode() != rawValue && editor?.setCode(rawValue)
+		}
 		// console.log('evalValueToRaw', value, rawValue, inputCat, label)
 	}
 
-	$: inputCat &&
-		isObjectCat(inputCat) &&
-		rawValue == undefined &&
-		value != undefined &&
-		evalValueToRaw()
+	let setCodeDisabled = false
+	$: (inputCat && (isObjectCat(inputCat) || isRawStringEditor(inputCat)) && evalValueToRaw()) ||
+		value
+
+	let timeout: NodeJS.Timeout | undefined = undefined
+	function setNewValueFromCode(nvalue: any) {
+		if (!deepEqual(nvalue, value)) {
+			value = nvalue
+			timeout && clearTimeout(timeout)
+			setCodeDisabled = true
+			timeout = setTimeout(() => {
+				setCodeDisabled = false
+			}, 1000)
+		}
+	}
 
 	onMount(() => {
 		computeDefaultValue()
@@ -713,7 +743,9 @@
 								dispatch('blur')
 							}}
 							code={JSON.stringify(value ?? defaultValue ?? { s3: '' }, null, 2)}
-							bind:value
+							on:changeValue={(e) => {
+								setNewValueFromCode(e.detail)
+							}}
 						/>
 					{/await}
 					<Button
@@ -841,7 +873,9 @@
 											dispatch('blur')
 										}}
 										code={rawValue}
-										bind:value
+										on:changeValue={(e) => {
+											setNewValueFromCode(e.detail)
+										}}
 									/>
 								{/await}
 							{/if}
@@ -861,7 +895,9 @@
 									dispatch('blur')
 								}}
 								code={rawValue}
-								bind:value
+								on:change={(e) => {
+									value = e.detail
+								}}
 							/>
 						{/await}
 					{/if}
@@ -946,7 +982,9 @@
 							dispatch('blur')
 						}}
 						code={rawValue}
-						bind:value
+						on:changeValue={(e) => {
+							setNewValueFromCode(e.detail)
+						}}
 					/>
 				{/await}
 			{/if}
@@ -989,11 +1027,11 @@
 			{:else}
 				<DateTimeInput {disabled} useDropdown {autofocus} bind:value />
 			{/if}
-		{:else if inputCat == 'sql' || inputCat == 'yaml'}
+		{:else if isRawStringEditor(inputCat)}
 			{#if disabled}
 				<textarea disabled />
 			{:else}
-				<div class="border my-1 mb-4 w-full border-secondary">
+				<div class="border my-1 mb-4 w-full">
 					{#await import('$lib/components/SimpleEditor.svelte')}
 						<Loader2 class="animate-spin" />
 					{:then Module}
@@ -1004,9 +1042,12 @@
 							on:blur={(e) => {
 								dispatch('blur')
 							}}
+							on:change={(e) => {
+								setNewValueFromCode(e.detail?.code)
+							}}
 							bind:this={editor}
 							lang={inputCat}
-							bind:code={value}
+							code={typeof rawValue == 'string' ? rawValue : JSON.stringify(rawValue, null, 2)}
 							autoHeight
 						/>
 					{/await}

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -1331,111 +1331,108 @@
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							{#key refreshSelectedSubflow}
-								<div class="pt-2 grow flex flex-col">
-									{#if selectedNode}
-										{@const node = $localModuleStates[selectedNode]}
+							<div class="pt-2 grow flex flex-col">
+								{#if selectedNode}
+									{@const node = $localModuleStates[selectedNode]}
 
-										{#if selectedNode == 'end'}
-											<FlowJobResult
-												workspaceId={job?.workspace_id}
-												jobId={job?.id}
-												filename={job.id}
-												loading={job['running']}
-												tag={job?.tag}
-												noBorder
-												col
-												result={job['result']}
-												logs={job.logs ?? ''}
-												durationStates={localDurationStatuses}
-												downloadLogs={!hideDownloadLogs}
-											/>
-										{:else if selectedNode == 'start'}
-											{#if job.args}
-												<div class="p-2">
-													<JobArgs
-														id={job.id}
-														workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-														args={job.args}
-													/>
-												</div>
-											{:else}
-												<p class="p-2 text-secondary">No arguments</p>
-											{/if}
-										{:else if node}
-											{#if node.flow_jobs_results}
-												<span class="pl-1 text-tertiary"
-													>Result of step as collection of all subflows</span
-												>
-												<div class="overflow-auto max-h-[200px] p-2">
-													<DisplayResult
-														workspaceId={job?.workspace_id}
-														result={node.flow_jobs_results}
-														nodeId={selectedNode}
-														jobId={job?.id}
-													/>
-												</div>
-												<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
-											{/if}
-											<div class="px-2 flex gap-2 min-w-0 w-full">
-												<ModuleStatus
-													type={node.type}
-													scheduled_for={node.scheduled_for}
-													skipped={node.skipped}
+									{#if selectedNode == 'end'}
+										<FlowJobResult
+											workspaceId={job?.workspace_id}
+											jobId={job?.id}
+											filename={job.id}
+											loading={job['running']}
+											tag={job?.tag}
+											noBorder
+											col
+											result={job['result']}
+											logs={job.logs ?? ''}
+											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
+										/>
+									{:else if selectedNode == 'start'}
+										{#if job.args}
+											<div class="p-2">
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job.args}
 												/>
-												{#if node.duration_ms}
-													<Badge>
-														<Hourglass class="mr-2" size={10} />
-														{msToSec(node.duration_ms)} s
-													</Badge>
-												{/if}
-												{#if node.job_id}
-													<div class="grow w-full flex flex-row-reverse">
-														<a
-															class="text-right text-xs"
-															rel="noreferrer"
-															target="_blank"
-															href="{base}/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
-														>
-															{truncateRev(node.job_id ?? '', 10)}
-														</a>
-													</div>
-												{/if}
 											</div>
-											{#if !node.isListJob}
-												<div class="px-1 py-1">
-													<JobArgs
-														id={node.job_id}
-														workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
-														args={node.args}
-													/>
+										{:else}
+											<p class="p-2 text-secondary">No arguments</p>
+										{/if}
+									{:else if node}
+										{#if node.flow_jobs_results}
+											<span class="pl-1 text-tertiary"
+												>Result of step as collection of all subflows</span
+											>
+											<div class="overflow-auto max-h-[200px] p-2">
+												<DisplayResult
+													workspaceId={job?.workspace_id}
+													result={node.flow_jobs_results}
+													nodeId={selectedNode}
+													jobId={job?.id}
+												/>
+											</div>
+											<span class="pl-1 text-tertiary text-lg pt-4">Selected subflow</span>
+										{/if}
+										<div class="px-2 flex gap-2 min-w-0 w-full">
+											<ModuleStatus
+												type={node.type}
+												scheduled_for={node.scheduled_for}
+												skipped={node.skipped}
+											/>
+											{#if node.duration_ms}
+												<Badge>
+													<Hourglass class="mr-2" size={10} />
+													{msToSec(node.duration_ms)} s
+												</Badge>
+											{/if}
+											{#if node.job_id}
+												<div class="grow w-full flex flex-row-reverse">
+													<a
+														class="text-right text-xs"
+														rel="noreferrer"
+														target="_blank"
+														href="{base}/run/{node.job_id ?? ''}?workspace={job?.workspace_id}"
+													>
+														{truncateRev(node.job_id ?? '', 10)}
+													</a>
 												</div>
 											{/if}
-											<FlowJobResult
-												workspaceId={job?.workspace_id}
-												jobId={node.job_id}
-												noBorder
-												loading={node.type != 'Success' && node.type != 'Failure'}
-												waitingForExecutor={node.type == 'WaitingForExecutor'}
-												refreshLog={node.type == 'InProgress'}
-												col
-												result={node.result}
-												tag={node.tag}
-												logs={node.logs}
-												durationStates={localDurationStatuses}
-												downloadLogs={!hideDownloadLogs}
-											/>
-										{:else}
-											<p class="p-2 text-tertiary italic"
-												>The execution of this node has no information attached to it. The job
-												likely did not run yet</p
-											>
+										</div>
+										{#if !node.isListJob}
+											<div class="px-1 py-1">
+												<JobArgs
+													id={node.job_id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={node.args}
+												/>
+											</div>
 										{/if}
-									{:else}<p class="p-2 text-tertiary italic"
-											>Select a node to see its details here</p
-										>{/if}
-								</div>
-							{/key}
+										<FlowJobResult
+											workspaceId={job?.workspace_id}
+											jobId={node.job_id}
+											noBorder
+											loading={node.type != 'Success' && node.type != 'Failure'}
+											waitingForExecutor={node.type == 'WaitingForExecutor'}
+											refreshLog={node.type == 'InProgress'}
+											col
+											result={node.result}
+											tag={node.tag}
+											logs={node.logs}
+											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
+										/>
+									{:else}
+										<p class="p-2 text-tertiary italic"
+											>The execution of this node has no information attached to it. The job likely
+											did not run yet</p
+										>
+									{/if}
+								{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
+									>{/if}
+							</div>
 						{:else if rightColumnSelect == 'node_definition'}
 							<FlowGraphViewerStep {stepDetail} />
 						{:else if rightColumnSelect == 'user_states'}

frontend/src/lib/components/JsonEditor.svelte

@@ -2,6 +2,7 @@
 	import '@codingame/monaco-vscode-standalone-json-language-features'
 
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
+	import { createEventDispatcher } from 'svelte'
 	export let code: string | undefined
 	export let value: any = undefined
 	export let error = ''
@@ -10,6 +11,8 @@
 
 	$: tooBig = code && code?.length > 1000000
 
+	const dispatch = createEventDispatcher()
+
 	function parseJson() {
 		try {
 			if (code == '') {
@@ -18,6 +21,7 @@
 				return
 			}
 			value = JSON.parse(code ?? '')
+			dispatch('changeValue', value)
 			error = ''
 		} catch (e) {
 			error = e.message

frontend/src/lib/components/SimpleEditor.svelte

@@ -109,9 +109,7 @@
 
 	export function setCode(ncode: string): void {
 		code = ncode
-		if (editor) {
-			editor.setValue(ncode)
-		}
+		editor?.setValue(ncode)
 	}
 
 	let placeholderVisible = false

frontend/src/lib/components/common/fileUpload/FileUpload.svelte

@@ -355,10 +355,12 @@
 					<div class="w-full flex flex-col gap-1 p-2">
 						<div class="flex flex-row items-center justify-between">
 							<div class="flex flex-col gap-1">
-								<span class="text-xs font-bold">{fileUpload.name}</span>
-								<span class="text-xs"
-									>{`${Math.round((fileUpload.size / 1024 / 1024) * 100) / 100} MB`}</span
-								>
+								<span class="text-xs font-bold">{fileUpload.name ?? ''}</span>
+								{#if fileUpload.size}
+									<span class="text-xs"
+										>{`${Math.round((fileUpload.size / 1024 / 1024) * 100) / 100} MB`}</span
+									>
+								{/if}
 							</div>
 							<div class="flex flex-row gap-1 items-center">
 								{#if fileUpload.errorMessage}
@@ -535,7 +537,7 @@
 			accept={acceptedFileTypes?.join(',')}
 			multiple={allowMultiple}
 			returnFileNames
-			iconSize={iconSize}
+			{iconSize}
 			on:change={({ detail }) => {
 				forceDisplayUploads = false
 				handleChange(detail)

frontend/src/lib/components/flows/map/FlowJobsMenu.svelte

@@ -5,7 +5,6 @@
 	import Popover from '$lib/components/Popover.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import VirtualList from 'svelte-tiny-virtual-list'
-	import { sendUserToast } from '$lib/toast'
 
 	const dispatch = createEventDispatcher()