nit svelte 5

frontend/src/lib/components/FlowJobResult.svelte

@@ -9,26 +9,44 @@
 	import AllFlowLogs from './AllFlowLogs.svelte'
 	import type { DurationStatus } from './graph'
 	import type { Writable } from 'svelte/store'
+	import { untrack } from 'svelte'
 
-	export let waitingForExecutor: boolean = false
-	export let result: any
-	export let logs: string | undefined
-	export let col: boolean = false
-	export let noBorder = false
-	export let loading: boolean
-	export let filename: string | undefined = undefined
-	export let jobId: string | undefined = undefined
-	export let tag: string | undefined = undefined
-	export let workspaceId: string | undefined = undefined
-	export let refreshLog: boolean = false
-	export let durationStates: Writable<Record<string, DurationStatus>> | undefined
-	export let downloadLogs = true
-	export let tagLabel: string | undefined = undefined
+	interface Props {
+		waitingForExecutor?: boolean
+		result: any
+		logs: string | undefined
+		col?: boolean
+		noBorder?: boolean
+		loading: boolean
+		filename?: string | undefined
+		jobId?: string | undefined
+		tag?: string | undefined
+		workspaceId?: string | undefined
+		refreshLog?: boolean
+		durationStates: Writable<Record<string, DurationStatus>> | undefined
+		downloadLogs?: boolean
+		tagLabel?: string | undefined
+	}
 
-	let lastJobId: string | undefined = undefined
-	let drawer: Drawer | undefined = undefined
+	let {
+		waitingForExecutor = false,
+		result,
+		logs = $bindable(),
+		col = false,
+		noBorder = false,
+		loading,
+		filename = undefined,
+		jobId = undefined,
+		tag = undefined,
+		workspaceId = undefined,
+		refreshLog = false,
+		durationStates,
+		downloadLogs = true,
+		tagLabel = undefined
+	}: Props = $props()
 
-	$: jobId != lastJobId && diffJobId()
+	let lastJobId: string | undefined = $state(undefined)
+	let drawer: Drawer | undefined = $state(undefined)
 
 	let iteration = 0
 	let logOffset = 0
@@ -66,6 +84,12 @@
 			)
 		}
 	}
+	$effect(() => {
+		jobId
+		untrack(() => {
+			jobId != lastJobId && diffJobId()
+		})
+	})
 </script>
 
 <Drawer bind:this={drawer}>
@@ -91,7 +115,7 @@
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
 		<div class="absolute z-40 text-xs top-0 left-1"
-			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
+			><button class="" onclick={drawer.openDrawer}>explore all steps' logs</button></div
 		>
 		<LogViewer
 			{tagLabel}

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { run, stopPropagation } from 'svelte/legacy'
+	import { stopPropagation } from 'svelte/legacy'
 
 	import { type Job, JobService, type RestartedFrom, type OpenFlow } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { Badge, Button } from './common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import { runFlowPreview } from './flows/utils'
 	import SchemaForm from './SchemaForm.svelte'
@@ -207,9 +207,12 @@
 		renderCount++
 	}
 
-	let scrollableDiv: HTMLDivElement | undefined = undefined
+	let scrollableDiv: HTMLDivElement | undefined = $state(undefined)
 	function handleScroll() {
-		scrollTop = scrollableDiv?.scrollTop ?? 0
+		let newScroll = scrollableDiv?.scrollTop ?? 0
+		if (newScroll != 0 && render) {
+			scrollTop = newScroll
+		}
 	}
 
 	function onScrollableDivChange() {
@@ -217,11 +220,11 @@
 			scrollableDiv.scrollTop = scrollTop
 		}
 	}
-	run(() => {
-		selectedJobStep !== undefined && onSelectedJobStepChange()
+	$effect.pre(() => {
+		selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange())
 	})
-	run(() => {
-		scrollableDiv && onScrollableDivChange()
+	$effect(() => {
+		scrollableDiv && render && untrack(() => onScrollableDivChange())
 	})
 
 	export async function cancelTest() {

frontend/src/lib/components/FlowStatusViewer.svelte

@@ -2,32 +2,55 @@
 	import { writable, type Writable } from 'svelte/store'
 	import FlowStatusViewerInner from './FlowStatusViewerInner.svelte'
 	import type { FlowState } from './flows/flowState'
-	import { createEventDispatcher, setContext } from 'svelte'
+	import { createEventDispatcher, setContext, untrack } from 'svelte'
 	import type { DurationStatus, FlowStatusViewerContext, GraphModuleState } from './graph'
 	import { isOwner as loadIsOwner } from '$lib/utils'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import type { Job } from '$lib/gen'
 
-	export let jobId: string
-	export let initialJob: Job | undefined = undefined
-	export let workspaceId: string | undefined = undefined
-	export let flowStateStore: Writable<FlowState> = writable({})
-	export let selectedJobStep: string | undefined = undefined
-	export let hideFlowResult = false
-	export let hideTimeline = false
-	export let hideDownloadInGraph = false
-	export let hideNodeDefinition = false
-	export let hideJobId = false
-	export let hideDownloadLogs = false
-	export let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' =
-		'timeline'
-	export let isOwner = false
-	export let wideResults = false
-	export let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
-	export let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
-	export let job: Job | undefined = undefined
-	export let render = true
-	export let suspendStatus = writable({})
+	interface Props {
+		jobId: string
+		initialJob?: Job | undefined
+		workspaceId?: string | undefined
+		flowStateStore?: Writable<FlowState>
+		selectedJobStep?: string | undefined
+		hideFlowResult?: boolean
+		hideTimeline?: boolean
+		hideDownloadInGraph?: boolean
+		hideNodeDefinition?: boolean
+		hideJobId?: boolean
+		hideDownloadLogs?: boolean
+		rightColumnSelect?: 'timeline' | 'node_status' | 'node_definition' | 'user_states'
+		isOwner?: boolean
+		wideResults?: boolean
+		localModuleStates?: Writable<Record<string, GraphModuleState>>
+		localDurationStatuses?: Writable<Record<string, DurationStatus>>
+		job?: Job | undefined
+		render?: boolean
+		suspendStatus?: any
+	}
+
+	let {
+		jobId,
+		initialJob = undefined,
+		workspaceId = undefined,
+		flowStateStore = writable({}),
+		selectedJobStep = $bindable(undefined),
+		hideFlowResult = false,
+		hideTimeline = false,
+		hideDownloadInGraph = false,
+		hideNodeDefinition = false,
+		hideJobId = false,
+		hideDownloadLogs = false,
+		rightColumnSelect = $bindable('timeline'),
+		isOwner = $bindable(false),
+		wideResults = false,
+		localModuleStates = $bindable(writable({})),
+		localDurationStatuses = $bindable(writable({})),
+		job = $bindable(undefined),
+		render = true,
+		suspendStatus = $bindable(writable({}))
+	}: Props = $props()
 
 	let lastJobId: string = jobId
 
@@ -57,9 +80,14 @@
 
 	const dispatch = createEventDispatcher()
 
-	let lastScriptPath: string | undefined = undefined
+	let lastScriptPath: string | undefined = $state(undefined)
 
-	$: jobId && updateJobId()
+	$effect.pre(() => {
+		jobId
+		untrack(() => {
+			jobId && updateJobId()
+		})
+	})
 </script>
 
 <FlowStatusViewerInner

frontend/src/lib/components/JobLogs.svelte

@@ -3,15 +3,21 @@
 	import { workspaceStore } from '$lib/stores'
 	import LogViewer from './LogViewer.svelte'
 
-	export let jobId: string
-	export let tagLabel: string | undefined = undefined
+	interface Props {
+		jobId: string
+		tagLabel?: string | undefined
+	}
 
-	let logs: string | undefined = undefined
+	let { jobId, tagLabel = undefined }: Props = $props()
+
+	let logs: string | undefined = $state(undefined)
 
-	$: jobId && loadLogs()
 	async function loadLogs() {
 		logs = await JobService.getJobLogs({ workspace: $workspaceStore!, id: jobId })
 	}
+	$effect(() => {
+		jobId && loadLogs()
+	})
 </script>
 
 <LogViewer content={logs} isLoading={false} tag={undefined} {jobId} {tagLabel} />