Skip to content

Commit 5e73c49

Browse files
rubenfiszelrubenfiszel
authored
fix: flow status reactivity improvement (#6402)
1 parent 896238a commit 5e73c49

File tree

64 files changed

+897
-816
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+897
-816
lines changed

‎frontend/src/lib/components/Dev.svelte

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
} from '$lib/gen'
1818
import { inferArgs } from '$lib/infer'
1919
import { setCopilotInfo, userStore, workspaceStore } from '$lib/stores'
20-
import { emptySchema, readFieldsRecursively, sendUserToast } from '$lib/utils'
20+
import { emptySchema, readFieldsRecursively, sendUserToast, type StateStore } from '$lib/utils'
2121
import { Pane, Splitpanes } from 'svelte-splitpanes'
2222
import { onDestroy, onMount, setContext, untrack } from 'svelte'
2323
import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -27,7 +27,7 @@
2727
import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte'
2828
import FlowEditorPanel from './flows/content/FlowEditorPanel.svelte'
2929
import { deepEqual } from 'fast-equals'
30-
import { writable, type Writable } from 'svelte/store'
30+
import { writable } from 'svelte/store'
3131
import type { FlowState } from './flows/flowState'
3232
import { initHistory } from '$lib/history.svelte'
3333
import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
@@ -51,7 +51,6 @@
5151
import { TestSteps } from './flows/testSteps.svelte'
5252
import { ModulesTestStates } from './modulesTest.svelte'
5353
import type { GraphModuleState } from './graph'
54-
import { updateDerivedModuleStatesFromTestJobs } from './flows/utils'
5554
5655
let flowCopilotContext: FlowCopilotContext = {
5756
shouldUpdatePropertyType: writable<{
@@ -116,7 +115,6 @@
116115
const flowPreviewContent = $derived(flowPreviewButtons?.getFlowPreviewContent())
117116
const job: Job | undefined = $derived(flowPreviewContent?.getJob())
118117
let showJobStatus = $state(false)
119-
let testModuleId: string | undefined = $state(undefined)
120118
121119
type LastEditScript = {
122120
content: string
@@ -453,7 +451,7 @@
453451
}
454452
}
455453
456-
const flowStateStore = writable({} as FlowState)
454+
const flowStateStore = $state({ val: {} }) as StateStore<FlowState>
457455
458456
const previewArgsStore = $state({ val: {} })
459457
const scriptEditorDrawer = writable(undefined)
@@ -464,8 +462,6 @@
464462
const triggersCount = writable<TriggersCount | undefined>(undefined)
465463
const modulesTestStates = new ModulesTestStates((moduleId) => {
466464
// Update the derived store with test job states
467-
delete $derivedModuleStates[moduleId]
468-
testModuleId = moduleId
469465
showJobStatus = false
470466
})
471467
const outputPickerOpenFns: Record<string, () => void> = $state({})
@@ -538,11 +534,11 @@
538534
}
539535
540536
mod.value.input_transforms = input_transforms
541-
if (!deepEqual(schema, $flowStateStore[mod.id]?.schema)) {
542-
if (!$flowStateStore[mod.id]) {
543-
$flowStateStore[mod.id] = { schema }
537+
if (!deepEqual(schema, flowStateStore.val[mod.id]?.schema)) {
538+
if (!flowStateStore.val[mod.id]) {
539+
flowStateStore.val[mod.id] = { schema }
544540
} else {
545-
$flowStateStore[mod.id].schema = schema
541+
flowStateStore.val[mod.id].schema = schema
546542
}
547543
reload++
548544
}
@@ -586,25 +582,12 @@
586582
$selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore))
587583
})
588584
589-
const localModuleStates: Writable<Record<string, GraphModuleState>> = $derived(
590-
flowPreviewContent?.getLocalModuleStates() ?? writable({})
591-
)
585+
let localModuleStates: Record<string, GraphModuleState> = $state({})
592586
593-
const suspendStatus: Writable<Record<string, { job: Job; nb: number }>> = $derived(
594-
flowPreviewContent?.getSuspendStatus() ?? writable({})
595-
)
587+
let suspendStatus: StateStore<Record<string, { job: Job; nb: number }>> = $state({ val: {} })
596588
597589
// Create a derived store that only shows the module states when showModuleStatus is true
598590
// this store can also be updated
599-
let derivedModuleStates = writable<Record<string, GraphModuleState>>({})
600-
$effect(() => {
601-
derivedModuleStates.update((currentStates) => {
602-
return showJobStatus ? $localModuleStates : currentStates
603-
})
604-
})
605-
$effect(() => {
606-
updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates)
607-
})
608591
609592
let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
610593
function onJobDone() {
@@ -639,14 +622,9 @@
639622
}
640623
641624
function resetModulesStates() {
642-
derivedModuleStates.set({})
643625
showJobStatus = false
644626
}
645627
646-
const individualStepTests = $derived(
647-
!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0
648-
)
649-
650628
const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged())
651629
</script>
652630

@@ -785,7 +763,7 @@
785763
bind:this={flowPreviewButtons}
786764
{onJobDone}
787765
onRunPreview={() => {
788-
localModuleStates.set({})
766+
localModuleStates = {}
789767
showJobStatus = true
790768
}}
791769
/>
@@ -800,19 +778,20 @@
800778
disableTutorials
801779
smallErrorHandler={true}
802780
disableStaticInputs
803-
localModuleStates={derivedModuleStates}
781+
{localModuleStates}
804782
onTestUpTo={flowPreviewButtons?.testUpTo}
783+
testModuleStates={modulesTestStates}
805784
isOwner={flowPreviewContent?.getIsOwner?.()}
806785
onTestFlow={flowPreviewButtons?.runPreview}
807786
isRunning={flowPreviewContent?.getIsRunning?.()}
808787
onCancelTestFlow={flowPreviewContent?.cancelTest}
809788
onOpenPreview={flowPreviewButtons?.openPreview}
810789
onHideJobStatus={resetModulesStates}
811-
{individualStepTests}
812790
flowJob={job}
813791
{showJobStatus}
814792
onDelete={(id) => {
815-
delete $derivedModuleStates[id]
793+
delete localModuleStates[id]
794+
delete modulesTestStates.states[id]
816795
}}
817796
{flowHasChanged}
818797
/>

‎frontend/src/lib/components/FirstStepInputs.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
let mod: any | undefined = $state(undefined)
2020
async function loadSchema() {
2121
try {
22-
const res = await getFirstStepSchema($flowStateStore, flowStore.val)
22+
const res = await getFirstStepSchema(flowStateStore.val, flowStore.val)
2323
schema = res.schema
2424
mod = res.mod
2525
dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode })
@@ -28,7 +28,7 @@
2828
}
2929
}
3030
$effect(() => {
31-
flowStore.val && $flowStateStore && untrack(() => loadSchema())
31+
flowStore.val && flowStateStore && untrack(() => loadSchema())
3232
})
3333
3434
function handleClick() {

‎frontend/src/lib/components/FlowBuilder.svelte

Lines changed: 20 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
orderedJsonStringify,
2626
readFieldsRecursively,
2727
replaceFalseWithUndefined,
28+
type StateStore,
2829
type Value
2930
} from '$lib/utils'
3031
import { sendUserToast } from '$lib/toast'
@@ -33,7 +34,7 @@
3334
import AIChangesWarningModal from '$lib/components/copilot/chat/flow/AIChangesWarningModal.svelte'
3435
3536
import { onMount, setContext, untrack, type ComponentType } from 'svelte'
36-
import { writable, type Writable } from 'svelte/store'
37+
import { writable } from 'svelte/store'
3738
import CenteredPage from './CenteredPage.svelte'
3839
import { Badge, Button, UndoRedo } from './common'
3940
import FlowEditor from './flows/FlowEditor.svelte'
@@ -42,7 +43,7 @@
4243
import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte'
4344
import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
4445
import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
45-
import { cleanInputs, updateDerivedModuleStatesFromTestJobs } from './flows/utils'
46+
import { cleanInputs } from './flows/utils'
4647
import {
4748
Calendar,
4849
Pen,
@@ -577,13 +578,7 @@
577578
}
578579
579580
let insertButtonOpen = writable<boolean>(false)
580-
let testModuleId: string | undefined = $state(undefined)
581-
let modulesTestStates = new ModulesTestStates((moduleId) => {
582-
// Update the derived store with test job states
583-
delete $derivedModuleStates[moduleId]
584-
testModuleId = moduleId
585-
showJobStatus = false
586-
})
581+
let modulesTestStates = new ModulesTestStates()
587582
let outputPickerOpenFns: Record<string, () => void> = $state({})
588583
let flowEditor: FlowEditor | undefined = $state(undefined)
589584
@@ -933,33 +928,8 @@
933928
}
934929
}
935930
936-
const localModuleStates: Writable<Record<string, GraphModuleState>> = $derived(
937-
flowPreviewContent?.getLocalModuleStates() ?? writable({})
938-
)
939-
const suspendStatus: Writable<Record<string, { job: Job; nb: number }>> = $derived(
940-
flowPreviewContent?.getSuspendStatus() ?? writable({})
941-
)
942-
943-
// Create a derived store that only shows the module states when showModuleStatus is true
944-
// this store can also be updated
945-
let derivedModuleStates = writable<Record<string, GraphModuleState>>({})
946-
$effect(() => {
947-
derivedModuleStates.update((currentStates) => {
948-
return showJobStatus ? $localModuleStates : currentStates
949-
})
950-
})
951-
$effect(() => {
952-
updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates)
953-
})
954-
955-
function resetModulesStates() {
956-
derivedModuleStates.set({})
957-
showJobStatus = false
958-
}
959-
960-
const individualStepTests = $derived(
961-
!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0
962-
)
931+
let localModuleStates: Record<string, GraphModuleState> = $state({})
932+
let suspendStatus: StateStore<Record<string, { job: Job; nb: number }>> = $state({ val: {} })
963933
964934
const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged())
965935
</script>
@@ -1025,7 +995,7 @@
1025995
for (const mod of restoredModules) {
1026996
if (mod) {
1027997
try {
1028-
loadFlowModuleState(mod).then((state) => ($flowStateStore[mod.id] = state))
998+
loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state))
1029999
} catch (e) {
10301000
console.error('Error loading state for restored node', e)
10311001
}
@@ -1155,10 +1125,12 @@
11551125
showCaptureHint.set(true)
11561126
}}
11571127
{onJobDone}
1128+
bind:localModuleStates
11581129
bind:this={flowPreviewButtons}
11591130
{loading}
11601131
onRunPreview={() => {
1161-
localModuleStates.set({})
1132+
modulesTestStates.hideJobsInGraph()
1133+
localModuleStates = {}
11621134
showJobStatus = true
11631135
}}
11641136
/>
@@ -1185,7 +1157,7 @@
11851157
</div>
11861158
</div>
11871159
<!-- metadata -->
1188-
{#if $flowStateStore}
1160+
{#if flowStateStore}
11891161
<FlowEditor
11901162
bind:this={flowEditor}
11911163
{disabledFlowInputs}
@@ -1228,18 +1200,22 @@
12281200
showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
12291201
toggleAiChat={() => aiChatManager.toggleOpen()}
12301202
onOpenPreview={flowPreviewButtons?.openPreview}
1231-
localModuleStates={derivedModuleStates}
1203+
localModuleStates={showJobStatus ? localModuleStates : {}}
1204+
{showJobStatus}
1205+
testModuleStates={modulesTestStates}
12321206
isOwner={flowPreviewContent?.getIsOwner()}
12331207
onTestFlow={flowPreviewButtons?.runPreview}
12341208
isRunning={flowPreviewContent?.getIsRunning()}
12351209
onCancelTestFlow={flowPreviewContent?.cancelTest}
1236-
onHideJobStatus={resetModulesStates}
1237-
{individualStepTests}
1210+
onHideJobStatus={() => {
1211+
modulesTestStates.hideJobsInGraph()
1212+
showJobStatus = false
1213+
}}
12381214
{job}
12391215
{suspendStatus}
1240-
{showJobStatus}
12411216
onDelete={(id) => {
1242-
delete $derivedModuleStates[id]
1217+
delete localModuleStates[id]
1218+
delete modulesTestStates.states[id]
12431219
}}
12441220
{flowHasChanged}
12451221
/>

0 commit comments

Comments
 (0)