fix(Canvas): Fix Edge source misplaced for containers

In order to make room for the node's secondary label, the containers were expanded by `10px`. The problem comes when in vertical layout, that additional size is not taken into account when calculating the edges since the size is only reflected in the visualization part and not during the layout calculation. The solution for now is to increase the group padding just a bit to make the secondary label to fit. fix: #1575
KaotoIO · Oct 17, 2024 · 5a09d8b · 5a09d8b
1 parent 885ce63
commit 5a09d8b
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 203 deletions.
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/flow.service.test.ts.snap
@@ -223,7 +223,7 @@ exports[`FlowService getFlowDiagram should return nodes and edges for a group wi
     "label": "group-1234",
     "parentNode": undefined,
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },

diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
@@ -5,6 +5,6 @@ export class CanvasDefaults {
   static readonly DEFAULT_LAYOUT = LayoutType.DagreVertical;
   static readonly DEFAULT_NODE_SHAPE = NodeShape.rect;
   static readonly DEFAULT_NODE_DIAMETER = 75;
-  static readonly DEFAULT_GROUP_PADDING = 50;
+  static readonly DEFAULT_GROUP_PADDING = 65;
   static readonly DEFAULT_SIDEBAR_WIDTH = 500;
 }
diff --git a/packages/ui/src/components/Visualization/Canvas/flow.service.ts b/packages/ui/src/components/Visualization/Canvas/flow.service.ts
@@ -33,7 +33,7 @@ export class FlowService {
       });
 
       const containerId = vizNodeParam.id;
-      node = this.getContainer(containerId, {
+      node = this.getGroup(containerId, {
         label: containerId,
         children: children.map((child) => child.id),
         parentNode: vizNodeParam.getParentNode()?.id,
@@ -75,7 +75,7 @@ export class FlowService {
     return edges;
   }
 
-  private static getContainer(
+  private static getGroup(
     id: string,
     options: { label?: string; children?: string[]; parentNode?: string; data?: CanvasNode['data'] } = {},
   ): CanvasNode {
@@ -88,7 +88,7 @@ export class FlowService {
       parentNode: options.parentNode,
       data: options.data,
       style: {
-        padding: CanvasDefaults.DEFAULT_NODE_DIAMETER * 0.8,
+        padding: CanvasDefaults.DEFAULT_GROUP_PADDING,
       },
     };
   }

diff --git a/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx b/packages/ui/src/components/Visualization/Custom/Group/CustomGroupExpanded.tsx
@@ -46,15 +46,15 @@ export const CustomGroupExpanded: FunctionComponent<CustomGroupExpandedProps> =
               x={boxRef.current.x}
               y={boxRef.current.y}
               width={boxRef.current.width}
-              height={boxRef.current.height + 10}
+              height={boxRef.current.height}
             />
             <foreignObject
               data-nodelabel={label}
               className="foreign-object"
               x={boxRef.current.x}
               y={boxRef.current.y}
               width={boxRef.current.width}
-              height={boxRef.current.height + 10}
+              height={boxRef.current.height}
             >
               <div className={className}>
                 <div className="custom-group__title">

diff --git a/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap b/packages/ui/src/tests/__snapshots__/nodes-edges.test.ts.snap
@@ -1860,7 +1860,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "when-1234",
     "parentNode": "choice-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -2951,7 +2951,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "otherwise-1234",
     "parentNode": "choice-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -3500,7 +3500,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "choice-1234",
     "parentNode": "route-1234",
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },
@@ -4906,7 +4906,7 @@ exports[`Nodes and Edges should generate edges for steps with branches 1`] = `
     "label": "route-1234",
     "parentNode": undefined,
     "style": {
-      "padding": 60,
+      "padding": 65,
     },
     "type": "group",
   },