feat(Canvas): Use path+scope as VizNode ID

Currently, when transforming a flow into `VisualizationNodes`, the nodes `Id`s are randomly generated, causing that whenever there's a change in the structure of the flow, previous `Id`s change. This commit uses the `path` + `scope` so the `VisualizationNodes` IDs are stable between interacting with the flow.
KaotoIO · Dec 13, 2024 · 90f234f · 90f234f
1 parent 15def29
commit 90f234f
Show file tree

Hide file tree

Showing 21 changed files with 912 additions and 565 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -74,7 +74,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
     entities.forEach((entity) => {
       if (visibleFlows[entity.id]) {
-        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.toVizNode());
+        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(entity.id, entity.toVizNode());
         nodes.push(...childNodes);
         edges.push(...childEdges);
       }

diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.test.tsx
@@ -16,7 +16,7 @@ describe('CanvasSideBar', () => {
     const camelResource = new CamelRouteResource();
     camelResource.addNewEntity(EntityType.Route);
     const visualEntity = camelResource.getVisualEntities()[0];
-    selectedNode = FlowService.getFlowDiagram(visualEntity.toVizNode()).nodes[0];
+    selectedNode = FlowService.getFlowDiagram('test', visualEntity.toVizNode()).nodes[0];
     Provider = TestProvidersWrapper({ camelResource }).Provider;
   });
 

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.test.tsx
@@ -53,7 +53,7 @@ describe('CanvasForm', () => {
 
   beforeEach(() => {
     camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[2]; // choice
   });
 
@@ -146,7 +146,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -183,7 +183,7 @@ describe('CanvasForm', () => {
     const flowId = camelRouteVisualEntity.id;
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -221,7 +221,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewId';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -261,7 +261,7 @@ describe('CanvasForm', () => {
     const newName = 'MyNewName';
     const dispatchSpy = jest.fn();
     const visualFlowsApi = new VisualFlowsApi(dispatchSpy);
-    const { nodes } = FlowService.getFlowDiagram(kameletVisualEntity.toVizNode());
+    const { nodes } = FlowService.getFlowDiagram('test', kameletVisualEntity.toVizNode());
     selectedNode = nodes[nodes.length - 1];
 
     render(
@@ -293,7 +293,7 @@ describe('CanvasForm', () => {
   describe('should show the User-updated field under the modified tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 
@@ -630,7 +630,7 @@ describe('CanvasForm', () => {
   describe('should show the Required field under the required tab', () => {
     beforeEach(() => {
       camelRouteVisualEntity = new CamelRouteVisualEntity(camelRouteJson);
-      const { nodes } = FlowService.getFlowDiagram(camelRouteVisualEntity.toVizNode());
+      const { nodes } = FlowService.getFlowDiagram('test', camelRouteVisualEntity.toVizNode());
       selectedNode = nodes[0]; // timer
     });
 

diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`CanvasForm should render 1`] = `
           >
             <img
               alt="icon"
-              class="form-header__icon-log-1234"
+              class="form-header__icon-test|route.from.steps.1.choice.when.0.steps.0.log"
               src=""
             />
             <h2
@@ -32,7 +32,7 @@ exports[`CanvasForm should render 1`] = `
               data-ouia-component-type="PF5/Title"
               data-ouia-safe="true"
             >
-              log
+              route.from.steps.1.choice.when.0.steps.0.log
             </h2>
           </div>
           <div