[release-4.4] Bug 1809546: Fix for topology layout stacking resources

frontend/packages/topology/src/layouts/BaseLayout.ts

@@ -36,6 +36,12 @@ class LayoutNode {
 
   protected yy?: number;
 
+  protected nodeWidth: number;
+
+  protected nodeHeight: number;
+
+  protected nodeRadius: number;
+
   public readonly distance: number;
 
   public parent: LayoutGroup;
@@ -49,6 +55,12 @@ class LayoutNode {
     this.node = node;
     this.distance = distance;
     this.index = index;
+
+    // Currently we support only fixed node sizes, this will need to change if/when dynamic node sizes are supported
+    const bounds = this.nodeBounds;
+    this.nodeWidth = bounds.width + this.distance * 2;
+    this.nodeHeight = bounds.height + this.distance * 2;
+    this.nodeRadius = Math.max(bounds.width, bounds.height) / 2;
   }
 
   get element(): Node {
@@ -103,17 +115,17 @@ class LayoutNode {
       return this.node
         .getBounds()
         .clone()
-        .padding(this.node.getStyle<NodeStyle>().padding);
+        .padding(padding);
     }
     return this.node.getBounds();
   }
 
   get width(): number {
-    return this.nodeBounds.width + this.distance * 2;
+    return this.nodeWidth;
   }
 
   get height(): number {
-    return this.nodeBounds.height + this.distance * 2;
+    return this.nodeHeight;
   }
 
   update() {
@@ -130,11 +142,11 @@ class LayoutNode {
   }
 
   get radius(): number {
-    return Math.max(this.node.getBounds().width, this.node.getBounds().height) / 2;
+    return this.nodeRadius;
   }
 
   get collisionRadius(): number {
-    return Math.max(this.width, this.height) / 2;
+    return this.radius + this.distance;
   }
 }
 

frontend/packages/topology/src/layouts/ColaLayout.ts

@@ -8,6 +8,17 @@ import { BaseLayout, LayoutGroup, LayoutLink, LayoutNode, LayoutOptions } from '
 class ColaNode extends LayoutNode implements webcola.Node {
   // fixed is used by Cola during node additions: 1 for fixed
   public fixed: number = 0;
+
+  constructor(node: Node, distance: number, index: number = -1) {
+    super(node, distance, index);
+
+    // TODO: Investigate why the issue with rectangular nodes causing the layout to become vertical
+    //       this setting will be a problem if nodes can change size dynamically
+    // Cola layout has issues with non-square nodes
+    const maxDimension = Math.max(this.nodeWidth, this.nodeHeight);
+    this.nodeWidth = maxDimension;
+    this.nodeHeight = maxDimension;
+  }
 }
 
 class ColaGroup extends LayoutGroup implements webcola.Group {}
@@ -18,14 +29,22 @@ class ColaLink extends LayoutLink implements webcola.Link<ColaNode | number> {
   }
 }
 
-type ColaLayoutOptions = LayoutOptions & {
+type ColaLayoutOptions = {
   maxTicks: number;
   initialUnconstrainedIterations: number;
   initialUserConstraintIterations: number;
   initialAllConstraintsIterations: number;
   gridSnapIterations: number;
 };
 
+const COLA_LAYOUT_DEFAULTS: ColaLayoutOptions = {
+  maxTicks: 300,
+  initialUnconstrainedIterations: 200,
+  initialUserConstraintIterations: 50,
+  initialAllConstraintsIterations: 150,
+  gridSnapIterations: 50,
+};
+
 class ColaLayout extends BaseLayout implements Layout {
   private d3Cola: any;
 
@@ -35,17 +54,10 @@ class ColaLayout extends BaseLayout implements Layout {
 
   private destroyed = false;
 
-  constructor(graph: Graph, options?: Partial<ColaLayoutOptions>) {
+  constructor(graph: Graph, options?: Partial<ColaLayoutOptions & LayoutOptions>) {
     super(graph, options);
     this.colaOptions = {
-      ...this.options,
-      ...{
-        maxTicks: 200,
-        initialUnconstrainedIterations: 200,
-        initialUserConstraintIterations: 50,
-        initialAllConstraintsIterations: 150,
-        gridSnapIterations: 50,
-      },
+      ...COLA_LAYOUT_DEFAULTS,
       ...options,
     };
     this.initializeLayout();

frontend/packages/topology/stories/8-Package.stories.tsx

@@ -51,7 +51,7 @@ const getModel = (layout: string): Model => {
   // create nodes from data
   const nodes: NodeModel[] = data.nodes.map((d) => {
     // randomize size somewhat
-    const width = 50 + d.id.length;
+    const width = 50 + d.id.length + 40;
     const height = 50 + d.id.length;
     return {
       id: d.id,