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

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",
  },

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;
 }

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,
  },
  };
  }

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">

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",
  },