feat(frontend): add notes to flow

backend/windmill-api/openapi.yaml

@@ -572,12 +572,12 @@ paths:
                 use_case:
                   type: string
       responses:
-        '200':
+        "200":
           description: Onboarding data submitted successfully
           content:
             application/json:
               schema:
-                type: string                
+                type: string
 
   /w/{workspace}/users/delete/{username}:
     delete:
@@ -14963,17 +14963,15 @@ components:
 
     CreatedAfterQueue:
       name: created_after_queue
-      description:
-        filter on jobs created after X for jobs in the queue only
+      description: filter on jobs created after X for jobs in the queue only
       in: query
       schema:
         type: string
         format: date-time
 
     CreatedBeforeQueue:
       name: created_before_queue
-      description:
-        filter on jobs created before X for jobs in the queue only
+      description: filter on jobs created before X for jobs in the queue only
       in: query
       schema:
         type: string
@@ -15154,6 +15152,8 @@ components:
       $ref: "../../openflow.openapi.yaml#/components/schemas/FlowStatus"
     FlowStatusModule:
       $ref: "../../openflow.openapi.yaml#/components/schemas/FlowStatusModule"
+    FlowNote:
+      $ref: "../../openflow.openapi.yaml#/components/schemas/FlowNote"
     # -- INLINE END --
     # Do not change line above
 
@@ -16419,30 +16419,30 @@ components:
     ScriptLang:
       type: string
       enum: [
-        python3,
-        deno,
-        go,
-        bash,
-        powershell,
-        postgresql,
-        mysql,
-        bigquery,
-        snowflake,
-        mssql,
-        oracledb,
-        graphql,
-        nativets,
-        bun,
-        php,
-        rust,
-        ansible,
-        csharp,
-        nu,
-        java,
-        ruby,
-        duckdb,
-        # for related places search: ADD_NEW_LANG
-      ]
+          python3,
+          deno,
+          go,
+          bash,
+          powershell,
+          postgresql,
+          mysql,
+          bigquery,
+          snowflake,
+          mssql,
+          oracledb,
+          graphql,
+          nativets,
+          bun,
+          php,
+          rust,
+          ansible,
+          csharp,
+          nu,
+          java,
+          ruby,
+          duckdb,
+          # for related places search: ADD_NEW_LANG
+        ]
 
     Preview:
       type: object

backend/windmill-api/src/flows.rs

@@ -782,8 +782,8 @@ async fn update_flow(
 
     sqlx::query!(
         "
-        UPDATE 
-            flow 
+        UPDATE
+            flow
         SET
             path = $1,
             summary = $2,
@@ -799,7 +799,7 @@ async fn update_flow(
             schema = $9::text::json,
             edited_by = $10,
             edited_at = now()
-        WHERE 
+        WHERE
             path = $11 AND workspace_id = $12",
         if is_new_path { flow_path } else { &nf.path },
         nf.summary,
@@ -823,8 +823,8 @@ async fn update_flow(
     if is_new_path {
         // if new path, must clone flow to new path and delete old flow for flow_version foreign key constraint
         sqlx::query!(
-            "INSERT INTO flow 
-                (workspace_id, path, summary, description, archived, extra_perms, dependency_job, draft_only, tag, ws_error_handler_muted, dedicated_worker, timeout, visible_to_runner_only, on_behalf_of_email, concurrency_key, versions, value, schema, edited_by, edited_at) 
+            "INSERT INTO flow
+                (workspace_id, path, summary, description, archived, extra_perms, dependency_job, draft_only, tag, ws_error_handler_muted, dedicated_worker, timeout, visible_to_runner_only, on_behalf_of_email, concurrency_key, versions, value, schema, edited_by, edited_at)
             SELECT workspace_id, $1, summary, description, archived, extra_perms, dependency_job, draft_only, tag, ws_error_handler_muted, dedicated_worker, timeout, visible_to_runner_only, on_behalf_of_email, concurrency_key, versions, value, schema, edited_by, edited_at
                 FROM flow
                 WHERE path = $2 AND workspace_id = $3",
@@ -1118,33 +1118,33 @@ async fn get_flow_by_path(
     let flow_o = if query.with_starred_info.unwrap_or(false) {
         sqlx::query_as::<_, FlowWithStarred>(
             r#"
-        SELECT 
-            flow.workspace_id, 
-            flow.path, 
-            flow.lock_error_logs, 
-            flow.summary, 
-            flow.description, 
-            flow.archived, 
-            flow.extra_perms, 
-            flow.draft_only, 
-            flow.dedicated_worker, 
-            flow.tag, 
-            flow.ws_error_handler_muted, 
-            flow.timeout, 
-            flow.visible_to_runner_only, 
-            flow.on_behalf_of_email, 
-            flow_version.schema, 
-            flow_version.value, 
-            flow_version.created_at AS edited_at, 
+        SELECT
+            flow.workspace_id,
+            flow.path,
+            flow.lock_error_logs,
+            flow.summary,
+            flow.description,
+            flow.archived,
+            flow.extra_perms,
+            flow.draft_only,
+            flow.dedicated_worker,
+            flow.tag,
+            flow.ws_error_handler_muted,
+            flow.timeout,
+            flow.visible_to_runner_only,
+            flow.on_behalf_of_email,
+            flow_version.schema,
+            flow_version.value,
+            flow_version.created_at AS edited_at,
             flow_version.created_by AS edited_by,
             favorite.path IS NOT NULL AS starred
         FROM flow
         LEFT JOIN favorite
-            ON favorite.favorite_kind = 'flow' 
-            AND favorite.workspace_id = flow.workspace_id 
-            AND favorite.path = flow.path 
+            ON favorite.favorite_kind = 'flow'
+            AND favorite.workspace_id = flow.workspace_id
+            AND favorite.path = flow.path
             AND favorite.usr = $3
-        LEFT JOIN flow_version 
+        LEFT JOIN flow_version
             ON flow_version.id = flow.versions[array_upper(flow.versions, 1)]
         WHERE flow.path = $1 AND flow.workspace_id = $2
         "#,
@@ -1157,28 +1157,28 @@ async fn get_flow_by_path(
     } else {
         sqlx::query_as::<_, FlowWithStarred>(
             r#"
-        SELECT 
-            flow.workspace_id, 
-            flow.path, 
-            flow.lock_error_logs, 
-            flow.summary, 
-            flow.description, 
-            flow.archived, 
-            flow.extra_perms, 
-            flow.draft_only, 
-            flow.dedicated_worker, 
-            flow.tag, 
-            flow.ws_error_handler_muted, 
-            flow.timeout, 
-            flow.visible_to_runner_only, 
-            flow.on_behalf_of_email, 
-            flow_version.schema, 
-            flow_version.value, 
-            flow_version.created_at AS edited_at, 
-            flow_version.created_by AS edited_by, 
+        SELECT
+            flow.workspace_id,
+            flow.path,
+            flow.lock_error_logs,
+            flow.summary,
+            flow.description,
+            flow.archived,
+            flow.extra_perms,
+            flow.draft_only,
+            flow.dedicated_worker,
+            flow.tag,
+            flow.ws_error_handler_muted,
+            flow.timeout,
+            flow.visible_to_runner_only,
+            flow.on_behalf_of_email,
+            flow_version.schema,
+            flow_version.value,
+            flow_version.created_at AS edited_at,
+            flow_version.created_by AS edited_by,
             NULL AS starred
         FROM flow
-        LEFT JOIN flow_version 
+        LEFT JOIN flow_version
             ON flow_version.id = flow.versions[array_upper(flow.versions, 1)]
         WHERE flow.path = $1 AND flow.workspace_id = $2
         "#,
@@ -1636,6 +1636,7 @@ mod tests {
             chat_input_enabled: None,
             debounce_key: None,
             debounce_delay_s: None,
+            ui: None,
         };
         let expect = serde_json::json!({
           "modules": [

backend/windmill-common/src/flows.rs

@@ -192,6 +192,29 @@ pub struct FlowValue {
     pub priority: Option<i16>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub chat_input_enabled: Option<bool>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub notes: Option<Vec<FlowNote>>,
+}
+
+#[derive(Deserialize, Serialize, Debug, Clone)]
+pub struct FlowNote {
+    pub id: String,
+    pub text: String,
+    pub position: FlowNotePosition,
+    pub size: FlowNoteSize,
+    pub color: String,
+}
+
+#[derive(Deserialize, Serialize, Debug, Clone)]
+pub struct FlowNotePosition {
+    pub x: f64,
+    pub y: f64,
+}
+
+#[derive(Deserialize, Serialize, Debug, Clone)]
+pub struct FlowNoteSize {
+    pub width: f64,
+    pub height: f64,
 }
 
 impl FlowValue {

backend/windmill-queue/src/jobs.rs

@@ -4149,6 +4149,7 @@ pub async fn push<'c, 'd>(
                 skip_expr: None,
                 preprocessor_module: None,
                 chat_input_enabled: None,
+                notes: None,
             };
             // this is a new flow being pushed, flow_status is set to flow_value:
             let flow_status: FlowStatus = FlowStatus::new(&flow_value);

frontend/src/lib/components/GfmMarkdown.svelte

@@ -3,15 +3,20 @@
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import rehypeRaw from 'rehype-raw'
 	import { rehypeGithubAlerts } from 'rehype-github-alerts'
-	export let md: string
+	interface Props {
+		md: string
+		noPadding?: boolean
+	}
+
+	let { md, noPadding }: Props = $props()
 	const plugins: Plugin[] = [
 		gfmPlugin(),
 		{ rehypePlugin: [rehypeRaw] },
 		{ rehypePlugin: [rehypeGithubAlerts] }
 	]
 </script>
 
-<div class="!prose-xs pgap">
+<div class="!prose-xs {noPadding ? '' : 'pgap'}">
 	<Markdown {md} {plugins} />
 </div>
 

frontend/src/lib/components/common/button/model.ts

@@ -194,7 +194,7 @@ export namespace ButtonType {
 		accent:
 			'bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
 		default:
-			'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-900/20 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+			'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
 		subtle:
 			'bg-transparent hover:bg-red-500 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
 	}

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

@@ -290,10 +290,15 @@
 	let dependents: Record<string, string[]> = $state({})
 
 	let graph: FlowGraphV2 | undefined = $state(undefined)
+	let noteMode = $state(false)
 	export function isNodeVisible(nodeId: string): boolean {
 		return graph?.isNodeVisible(nodeId) ?? false
 	}
 
+	function toggleNoteMode() {
+		noteMode = !noteMode
+	}
+
 	function shouldRunTutorial(tutorialName: string, name: string, index: number) {
 		return (
 			$tutorialsToDo.includes(index) &&
@@ -400,6 +405,8 @@
 			on:generateStep
 			{aiChatOpen}
 			{toggleAiChat}
+			{noteMode}
+			{toggleNoteMode}
 		/>
 	</div>
 
@@ -418,6 +425,11 @@
 			moving={$moving?.id}
 			maxHeight={minHeight}
 			modules={flowStore.val.value.modules}
+			{noteMode}
+			notes={flowStore.val.value?.notes || []}
+			onNotesChange={(newNotes) => {
+				flowStore.val.value.notes = newNotes
+			}}
 			preprocessorModule={flowStore.val.value?.preprocessor_module}
 			{selectedId}
 			{workspace}
@@ -645,6 +657,7 @@
 			{onCancelTestFlow}
 			{onOpenPreview}
 			{onHideJobStatus}
+			exitNoteMode={() => (noteMode = false)}
 		/>
 	</div>
 </div>