[feat] sync subgraph node titles with breadcrumb renaming (#4565)

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -42,6 +42,7 @@ import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
+import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
 
 const MIN_WIDTH = 28
 const ITEM_GAP = 8
@@ -71,6 +72,14 @@ const items = computed(() => {
       if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
       canvas.setGraph(subgraph)
+    },
+    updateTitle: (title: string) => {
+      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
+      if (!rootGraph) return
+
+      forEachSubgraphNode(rootGraph, subgraph.id, (node) => {
+        node.title = title
+      })
     }
   }))
 

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -81,6 +81,9 @@ const rename = async (
   initialName: string
 ) => {
   if (newName && newName !== initialName) {
+    // Synchronize the node titles with the new name
+    props.item.updateTitle?.(newName)
+
     if (workflowStore.activeSubgraph) {
       workflowStore.activeSubgraph.name = newName
     } else if (workflowStore.activeWorkflow) {