wip

frontend/src/lib/components/flows/flowStore.ts

@@ -1,8 +1,9 @@
-import type { Flow, OpenFlow } from '$lib/gen'
+import type { Flow } from '$lib/gen'
 import { writable } from 'svelte/store'
 import { initFlowState, type FlowState } from './flowState'
 import { sendUserToast } from '$lib/toast'
 import type { StateStore } from '$lib/utils'
+import type { ExtendedOpenFlow } from './types'
 
 export type FlowMode = 'push' | 'pull'
 
@@ -10,16 +11,24 @@ export const importFlowStore = writable<Flow | undefined>(undefined)
 
 export async function initFlow(
 	flow: Flow,
-	flowStore: StateStore<Flow>,
+	flowStore: StateStore<ExtendedOpenFlow>,
 	flowStateStore: StateStore<FlowState>
 ) {
 	await initFlowState(flow, flowStateStore)
-	flowStore.val = flow
+	// Initialize ExtendedOpenFlow with ui.notes field if not present
+	const extendedFlow: ExtendedOpenFlow = {
+		...flow,
+		ui: {
+			notes: (flow as any).ui?.notes || [],
+			...(flow as any).ui
+		}
+	}
+	flowStore.val = extendedFlow
 }
 
 export async function copyFirstStepSchema(
 	flowState: FlowState,
-	flowStore: StateStore<OpenFlow>
+	flowStore: StateStore<ExtendedOpenFlow>
 ): Promise<void> {
 	const firstModuleId = flowStore.val.value.modules[0]?.id
 
@@ -40,7 +49,7 @@ export async function copyFirstStepSchema(
 	return sendUserToast('No first step found', true)
 }
 
-export async function getFirstStepSchema(flowState: FlowState, flow: OpenFlow) {
+export async function getFirstStepSchema(flowState: FlowState, flow: ExtendedOpenFlow) {
 	const firstModuleId = flow.value.modules[0]?.id
 
 	if (!firstModuleId || !flowState[firstModuleId]) {

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -396,6 +396,13 @@
 			maxHeight={minHeight}
 			modules={flowStore.val.value.modules}
 			{noteMode}
+			notes={flowStore.val.ui?.notes || []}
+			onNotesChange={(newNotes) => {
+				if (!flowStore.val.ui) {
+					flowStore.val.ui = {}
+				}
+				flowStore.val.ui.notes = newNotes
+			}}
 			preprocessorModule={flowStore.val.value?.preprocessor_module}
 			{selectedId}
 			{workspace}

frontend/src/lib/components/flows/types.ts

@@ -15,6 +15,14 @@ import type ResourceEditorDrawer from '../ResourceEditorDrawer.svelte'
 import type { ModulesTestStates } from '../modulesTest.svelte'
 import type { ButtonProp } from '$lib/components/DiffEditor.svelte'
 
+export type Note = {
+	id: string
+	text: string
+	position: { x: number; y: number }
+	size: { width: number; height: number }
+	color: string
+}
+
 export type FlowInput = Record<
 	string,
 	{
@@ -34,6 +42,9 @@ export type ExtendedOpenFlow = OpenFlow & {
 	dedicated_worker?: boolean
 	visible_to_runner_only?: boolean
 	on_behalf_of_email?: string
+	ui?: {
+		notes?: Note[]
+	}
 }
 
 export type FlowInputEditorState = {

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { FlowService, type FlowModule, type Job } from '../../gen'
 	import { NODE, type GraphModuleState } from '.'
+	import type { Note } from '../flows/types'
 	import { getContext, onDestroy, setContext, tick, untrack } from 'svelte'
 
 	import { get, writable, type Writable } from 'svelte/store'
@@ -105,6 +106,8 @@
 		showJobStatus?: boolean
 		suspendStatus?: Record<string, { job: Job; nb: number }>
 		noteMode?: boolean
+		notes?: Note[]
+		onNotesChange?: (notes: Note[]) => void
 		onDelete?: (id: string) => void
 		onInsert?: (detail: {
 			sourceId?: string
@@ -186,6 +189,8 @@
 		suspendStatus = {},
 		flowHasChanged = false,
 		noteMode = false,
+		notes = [],
+		onNotesChange = undefined,
 		exitNoteMode = undefined
 	}: Props = $props()
 
@@ -374,15 +379,6 @@
 	let height = $state(0)
 
 	// Note feature state
-	type NoteData = {
-		id: string
-		text: string
-		position: { x: number; y: number }
-		size: { width: number; height: number }
-		color: string
-	}
-
-	let notes = $state<NoteData[]>([])
 	let nextNoteId = $state(1)
 
 	function isSimplifiable(modules: FlowModule[] | undefined): boolean {
@@ -399,15 +395,15 @@
 
 	function onNoteAdded(newNoteFromTool: any) {
 		// Add the note to our separate notes array if a note was created
-		if (newNoteFromTool) {
-			const newNote: NoteData = {
+		if (newNoteFromTool && onNotesChange) {
+			const newNote: Note = {
 				id: `note-${nextNoteId}`,
 				text: '',
 				position: newNoteFromTool.position,
 				size: newNoteFromTool.size || { width: 200, height: 100 },
 				color: 'oklch(96.7% 0.067 122.328)'
 			}
-			notes = [...notes, newNote]
+			onNotesChange([...notes, newNote])
 			nextNoteId += 1
 		}
 		exitNoteMode?.()
@@ -415,20 +411,29 @@
 	}
 
 	function updateNoteText(noteId: string, text: string) {
-		notes = notes.map((note) => (note.id === noteId ? { ...note, text } : note))
+		if (onNotesChange) {
+			onNotesChange(notes.map((note) => (note.id === noteId ? { ...note, text } : note)))
+		}
+		updateStores()
 	}
 
 	function deleteNote(noteId: string) {
-		notes = notes.filter((note) => note.id !== noteId)
+		if (onNotesChange) {
+			onNotesChange(notes.filter((note) => note.id !== noteId))
+		}
 		updateStores()
 	}
 
 	function updateNotePosition(noteId: string, position: { x: number; y: number }) {
-		notes = notes.map((note) => (note.id === noteId ? { ...note, position } : note))
+		if (onNotesChange) {
+			onNotesChange(notes.map((note) => (note.id === noteId ? { ...note, position } : note)))
+		}
 	}
 
 	function updateNoteSize(noteId: string, size: { width: number; height: number }) {
-		notes = notes.map((note) => (note.id === noteId ? { ...note, size } : note))
+		if (onNotesChange) {
+			onNotesChange(notes.map((note) => (note.id === noteId ? { ...note, size } : note)))
+		}
 	}
 
 	function convertNotesToNodes(): Node[] {