fix: flow status reactivity improvement

frontend/src/lib/components/Dev.svelte

@@ -17,7 +17,7 @@
 	} from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { setCopilotInfo, userStore, workspaceStore } from '$lib/stores'
-	import { emptySchema, readFieldsRecursively, sendUserToast } from '$lib/utils'
+	import { emptySchema, readFieldsRecursively, sendUserToast, type StateStore } from '$lib/utils'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -27,7 +27,7 @@
 	import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte'
 	import FlowEditorPanel from './flows/content/FlowEditorPanel.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { writable, type Writable } from 'svelte/store'
+	import { writable } from 'svelte/store'
 	import type { FlowState } from './flows/flowState'
 	import { initHistory } from '$lib/history.svelte'
 	import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
@@ -51,7 +51,6 @@
 	import { TestSteps } from './flows/testSteps.svelte'
 	import { ModulesTestStates } from './modulesTest.svelte'
 	import type { GraphModuleState } from './graph'
-	import { updateDerivedModuleStatesFromTestJobs } from './flows/utils'
 
 	let flowCopilotContext: FlowCopilotContext = {
 		shouldUpdatePropertyType: writable<{
@@ -116,7 +115,6 @@
 	const flowPreviewContent = $derived(flowPreviewButtons?.getFlowPreviewContent())
 	const job: Job | undefined = $derived(flowPreviewContent?.getJob())
 	let showJobStatus = $state(false)
-	let testModuleId: string | undefined = $state(undefined)
 
 	type LastEditScript = {
 		content: string
@@ -453,7 +451,7 @@
 		}
 	}
 
-	const flowStateStore = writable({} as FlowState)
+	const flowStateStore = $state({ val: {} }) as StateStore<FlowState>
 
 	const previewArgsStore = $state({ val: {} })
 	const scriptEditorDrawer = writable(undefined)
@@ -464,8 +462,6 @@
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	const modulesTestStates = new ModulesTestStates((moduleId) => {
 		// Update the derived store with test job states
-		delete $derivedModuleStates[moduleId]
-		testModuleId = moduleId
 		showJobStatus = false
 	})
 	const outputPickerOpenFns: Record<string, () => void> = $state({})
@@ -538,11 +534,11 @@
 					}
 
 					mod.value.input_transforms = input_transforms
-					if (!deepEqual(schema, $flowStateStore[mod.id]?.schema)) {
-						if (!$flowStateStore[mod.id]) {
-							$flowStateStore[mod.id] = { schema }
+					if (!deepEqual(schema, flowStateStore.val[mod.id]?.schema)) {
+						if (!flowStateStore.val[mod.id]) {
+							flowStateStore.val[mod.id] = { schema }
 						} else {
-							$flowStateStore[mod.id].schema = schema
+							flowStateStore.val[mod.id].schema = schema
 						}
 						reload++
 					}
@@ -586,25 +582,12 @@
 		$selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore))
 	})
 
-	const localModuleStates: Writable<Record<string, GraphModuleState>> = $derived(
-		flowPreviewContent?.getLocalModuleStates() ?? writable({})
-	)
+	let localModuleStates: Record<string, GraphModuleState> = $state({})
 
-	const suspendStatus: Writable<Record<string, { job: Job; nb: number }>> = $derived(
-		flowPreviewContent?.getSuspendStatus() ?? writable({})
-	)
+	let suspendStatus: StateStore<Record<string, { job: Job; nb: number }>> = $state({ val: {} })
 
 	// Create a derived store that only shows the module states when showModuleStatus is true
 	// this store can also be updated
-	let derivedModuleStates = writable<Record<string, GraphModuleState>>({})
-	$effect(() => {
-		derivedModuleStates.update((currentStates) => {
-			return showJobStatus ? $localModuleStates : currentStates
-		})
-	})
-	$effect(() => {
-		updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates)
-	})
 
 	let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
 	function onJobDone() {
@@ -639,14 +622,9 @@
 	}
 
 	function resetModulesStates() {
-		derivedModuleStates.set({})
 		showJobStatus = false
 	}
 
-	const individualStepTests = $derived(
-		!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0
-	)
-
 	const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged())
 </script>
 
@@ -785,7 +763,7 @@
 						bind:this={flowPreviewButtons}
 						{onJobDone}
 						onRunPreview={() => {
-							localModuleStates.set({})
+							localModuleStates = {}
 							showJobStatus = true
 						}}
 					/>
@@ -800,19 +778,20 @@
 								disableTutorials
 								smallErrorHandler={true}
 								disableStaticInputs
-								localModuleStates={derivedModuleStates}
+								{localModuleStates}
 								onTestUpTo={flowPreviewButtons?.testUpTo}
+								testModuleStates={modulesTestStates}
 								isOwner={flowPreviewContent?.getIsOwner?.()}
 								onTestFlow={flowPreviewButtons?.runPreview}
 								isRunning={flowPreviewContent?.getIsRunning?.()}
 								onCancelTestFlow={flowPreviewContent?.cancelTest}
 								onOpenPreview={flowPreviewButtons?.openPreview}
 								onHideJobStatus={resetModulesStates}
-								{individualStepTests}
 								flowJob={job}
 								{showJobStatus}
 								onDelete={(id) => {
-									delete $derivedModuleStates[id]
+									delete localModuleStates[id]
+									delete modulesTestStates.states[id]
 								}}
 								{flowHasChanged}
 							/>

frontend/src/lib/components/FirstStepInputs.svelte

@@ -19,7 +19,7 @@
 	let mod: any | undefined = $state(undefined)
 	async function loadSchema() {
 		try {
-			const res = await getFirstStepSchema($flowStateStore, flowStore.val)
+			const res = await getFirstStepSchema(flowStateStore.val, flowStore.val)
 			schema = res.schema
 			mod = res.mod
 			dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode })
@@ -28,7 +28,7 @@
 		}
 	}
 	$effect(() => {
-		flowStore.val && $flowStateStore && untrack(() => loadSchema())
+		flowStore.val && flowStateStore && untrack(() => loadSchema())
 	})
 
 	function handleClick() {

frontend/src/lib/components/FlowBuilder.svelte

@@ -25,6 +25,7 @@
 		orderedJsonStringify,
 		readFieldsRecursively,
 		replaceFalseWithUndefined,
+		type StateStore,
 		type Value
 	} from '$lib/utils'
 	import { sendUserToast } from '$lib/toast'
@@ -33,7 +34,7 @@
 	import AIChangesWarningModal from '$lib/components/copilot/chat/flow/AIChangesWarningModal.svelte'
 
 	import { onMount, setContext, untrack, type ComponentType } from 'svelte'
-	import { writable, type Writable } from 'svelte/store'
+	import { writable } from 'svelte/store'
 	import CenteredPage from './CenteredPage.svelte'
 	import { Badge, Button, UndoRedo } from './common'
 	import FlowEditor from './flows/FlowEditor.svelte'
@@ -42,7 +43,7 @@
 	import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
-	import { cleanInputs, updateDerivedModuleStatesFromTestJobs } from './flows/utils'
+	import { cleanInputs } from './flows/utils'
 	import {
 		Calendar,
 		Pen,
@@ -577,13 +578,7 @@
 	}
 
 	let insertButtonOpen = writable<boolean>(false)
-	let testModuleId: string | undefined = $state(undefined)
-	let modulesTestStates = new ModulesTestStates((moduleId) => {
-		// Update the derived store with test job states
-		delete $derivedModuleStates[moduleId]
-		testModuleId = moduleId
-		showJobStatus = false
-	})
+	let modulesTestStates = new ModulesTestStates()
 	let outputPickerOpenFns: Record<string, () => void> = $state({})
 	let flowEditor: FlowEditor | undefined = $state(undefined)
 
@@ -933,33 +928,8 @@
 		}
 	}
 
-	const localModuleStates: Writable<Record<string, GraphModuleState>> = $derived(
-		flowPreviewContent?.getLocalModuleStates() ?? writable({})
-	)
-	const suspendStatus: Writable<Record<string, { job: Job; nb: number }>> = $derived(
-		flowPreviewContent?.getSuspendStatus() ?? writable({})
-	)
-
-	// Create a derived store that only shows the module states when showModuleStatus is true
-	// this store can also be updated
-	let derivedModuleStates = writable<Record<string, GraphModuleState>>({})
-	$effect(() => {
-		derivedModuleStates.update((currentStates) => {
-			return showJobStatus ? $localModuleStates : currentStates
-		})
-	})
-	$effect(() => {
-		updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates)
-	})
-
-	function resetModulesStates() {
-		derivedModuleStates.set({})
-		showJobStatus = false
-	}
-
-	const individualStepTests = $derived(
-		!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0
-	)
+	let localModuleStates: Record<string, GraphModuleState> = $state({})
+	let suspendStatus: StateStore<Record<string, { job: Job; nb: number }>> = $state({ val: {} })
 
 	const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged())
 </script>
@@ -1025,7 +995,7 @@
 							for (const mod of restoredModules) {
 								if (mod) {
 									try {
-										loadFlowModuleState(mod).then((state) => ($flowStateStore[mod.id] = state))
+										loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state))
 									} catch (e) {
 										console.error('Error loading state for restored node', e)
 									}
@@ -1155,10 +1125,12 @@
 							showCaptureHint.set(true)
 						}}
 						{onJobDone}
+						bind:localModuleStates
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
-							localModuleStates.set({})
+							modulesTestStates.hideJobsInGraph()
+							localModuleStates = {}
 							showJobStatus = true
 						}}
 					/>
@@ -1185,7 +1157,7 @@
 				</div>
 			</div>
 			<!-- metadata -->
-			{#if $flowStateStore}
+			{#if flowStateStore}
 				<FlowEditor
 					bind:this={flowEditor}
 					{disabledFlowInputs}
@@ -1228,18 +1200,22 @@
 					showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
 					toggleAiChat={() => aiChatManager.toggleOpen()}
 					onOpenPreview={flowPreviewButtons?.openPreview}
-					localModuleStates={derivedModuleStates}
+					localModuleStates={showJobStatus ? localModuleStates : {}}
+					{showJobStatus}
+					testModuleStates={modulesTestStates}
 					isOwner={flowPreviewContent?.getIsOwner()}
 					onTestFlow={flowPreviewButtons?.runPreview}
 					isRunning={flowPreviewContent?.getIsRunning()}
 					onCancelTestFlow={flowPreviewContent?.cancelTest}
-					onHideJobStatus={resetModulesStates}
-					{individualStepTests}
+					onHideJobStatus={() => {
+						modulesTestStates.hideJobsInGraph()
+						showJobStatus = false
+					}}
 					{job}
 					{suspendStatus}
-					{showJobStatus}
 					onDelete={(id) => {
-						delete $derivedModuleStates[id]
+						delete localModuleStates[id]
+						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
 				/>