From 37140b20e2f8620947555855c4bc4cf59aeb2190 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 26 Apr 2025 22:03:44 +0200
Subject: [PATCH] persist flow state better between drawer close/open

---
 frontend/src/lib/components/FlowPreviewContent.svelte  |  8 ++++++++
 frontend/src/lib/components/FlowStatusViewer.svelte    | 10 ++++++++--
 .../src/lib/components/FlowStatusViewerInner.svelte    |  5 +++--
 .../components/flows/header/FlowPreviewButtons.svelte  |  7 +++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 5829d4c8a3..73ac4ddced 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -19,6 +19,8 @@
 	import JsonInputs from './JsonInputs.svelte'
 	import FlowHistoryJobPicker from './FlowHistoryJobPicker.svelte'
 	import { NEVER_TESTED_THIS_FAR } from './flows/models'
+	import { writable, type Writable } from 'svelte/store'
+	import type { DurationStatus, GraphModuleState } from './graph'
 
 	export let previewMode: 'upTo' | 'whole'
 	export let open: boolean
@@ -37,6 +39,9 @@
 	export let branchOrIterationN: number = 0
 	export let scrollTop: number = 0
 
+	export let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
+	export let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
+
 	let restartBranchNames: [number, string][] = []
 
 	let isRunning: boolean = false
@@ -507,6 +512,9 @@
 					</div>
 				{/if}
 				<FlowStatusViewer
+					bind:job
+					bind:localModuleStates
+					bind:localDurationStatuses
 					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
 					{flowStateStore}
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 9584ddb926..ff58e71c90 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -3,7 +3,7 @@
 	import FlowStatusViewerInner from './FlowStatusViewerInner.svelte'
 	import type { FlowState } from './flows/flowState'
 	import { createEventDispatcher, setContext } from 'svelte'
-	import type { FlowStatusViewerContext } from './graph'
+	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'
@@ -23,6 +23,9 @@
 		'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
 
 	let lastJobId: string = jobId
 
@@ -68,11 +71,14 @@
 		}
 		dispatch('jobsLoaded', job)
 	}}
-	globalDurationStatuses={[]}
 	globalModuleStates={[]}
+	globalDurationStatuses={[]}
+	bind:localModuleStates
+	bind:localDurationStatuses
 	bind:selectedNode={selectedJobStep}
 	on:start
 	on:done
+	bind:job
 	{initialJob}
 	{jobId}
 	{workspaceId}
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 291c1fc2e2..d25bf607da 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -84,6 +84,8 @@
 	export let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' =
 		'timeline'
 
+	export let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
+	export let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
 	let recursiveRefresh: Record<string, (clear, root) => Promise<void>> = {}
 
 	let jobResults: any[] =
@@ -92,8 +94,6 @@
 	let retry_selected = ''
 	let timeout: NodeJS.Timeout | undefined = undefined
 
-	let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
-	let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
 	let expandedSubflows: Record<string, FlowModule[]> = {}
 
 	$: flowJobIds?.moduleId && onFlowModuleId()
@@ -495,6 +495,7 @@
 
 	async function updateJobId() {
 		if (jobId !== job?.id) {
+			console.log('updating job id', globalDurationStatuses.length)
 			$localModuleStates = {}
 			flowTimeline?.reset()
 			timeout && clearTimeout(timeout)
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index 643e81dbde..f053c6cb62 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -10,6 +10,8 @@
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
 	import { Play } from 'lucide-svelte'
+	import { writable, type Writable } from 'svelte/store'
+	import type { DurationStatus, GraphModuleState } from '$lib/components/graph'
 
 	export let loading = false
 
@@ -41,6 +43,9 @@
 
 	let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = 'timeline'
 
+	let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
+	let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
+
 	$: upToDisabled =
 		$selectedId == undefined ||
 		[
@@ -106,6 +111,8 @@
 	<Drawer bind:open={previewOpen} size="75%" {preventEscape}>
 		<FlowPreviewContent
 			bind:this={flowPreviewContent}
+			bind:localModuleStates
+			bind:localDurationStatuses
 			open={previewOpen}
 			bind:scrollTop
 			bind:previewMode