diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte index 7d657fdeee..c91e3e2dfd 100644 --- a/frontend/src/lib/components/graph/FlowGraphV2.svelte +++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte @@ -118,7 +118,8 @@ let useDataflow: Writable = writable(false) let showAssets: Writable = writable(true) - // Read-only alternative layout; editing needs the insert/drag affordances of the full graph. + // Read-only alternative layout; editing needs the insert/drag affordances of the full graph, + // and it draws no diff markers, so a diff would read as an unchanged flow. let simplifiedView = $state(false) let showNotes = $state(true) @@ -343,6 +344,7 @@ // Selection manager - create one if not provided let selectionManager = untrack(() => selectionManagerProp) || new SelectionManager() const selectedId = $derived(selectionManager.getSelectedId()) + let simplifiedAvailable = $derived(!editMode && !diffBeforeFlow && !moduleActions) const noteEditorContext = getNoteEditorContext() @@ -1305,7 +1307,7 @@ {/if}
- {:else if simplifiedView && !editMode} + {:else if simplifiedView && simplifiedAvailable} onSelect?.(id)} + {selectedId} + onSelect={(id) => { + selectionManager.selectId(id) + if (!notSelectable) onSelect?.(id) + }} > {#snippet topLeftControls()} {@render simplifiedViewToggle()} @@ -1526,7 +1532,7 @@ {#if showDataflow} {/if} - {#if !editMode} + {#if simplifiedAvailable} {@render simplifiedViewToggle()} {/if} diff --git a/frontend/src/lib/components/graph/simplified/SimplifiedBox.svelte b/frontend/src/lib/components/graph/simplified/SimplifiedBox.svelte index 8e4cc4ebc0..e32b832224 100644 --- a/frontend/src/lib/components/graph/simplified/SimplifiedBox.svelte +++ b/frontend/src/lib/components/graph/simplified/SimplifiedBox.svelte @@ -1,12 +1,25 @@ @@ -16,7 +29,9 @@
diff --git a/frontend/src/lib/components/graph/simplified/SimplifiedFlowGraph.svelte b/frontend/src/lib/components/graph/simplified/SimplifiedFlowGraph.svelte index bbc37b876f..ab7cea850f 100644 --- a/frontend/src/lib/components/graph/simplified/SimplifiedFlowGraph.svelte +++ b/frontend/src/lib/components/graph/simplified/SimplifiedFlowGraph.svelte @@ -17,6 +17,8 @@ maxHeight?: number /** Called with a module id, or `Input` / `Result` / `failure` / `preprocessor` */ onSelect?: (nodeId: string) => void + /** The graph's selection, owned by the caller so it survives switching views */ + selectedId?: string /** Rendered in the top-left control stack, e.g. the toggle leading back to the full graph */ topLeftControls?: Snippet } @@ -28,12 +30,14 @@ minHeight = 0, maxHeight, onSelect, + selectedId, topLeftControls }: Props = $props() let layout = $derived( layoutSimplifiedFlow({ modules: modules ?? [], failureModule, preprocessorModule }) ) + let nodes = $derived(layout.nodes.map((n) => ({ ...n, selected: n.id === selectedId }))) const PAD = 72 const MIN_READABLE_ZOOM = 0.7 @@ -75,7 +79,7 @@ {#if width > 0} {