From d9c30ea0cc17a733d1fb873b80c7bcccff249e15 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Wed, 27 Apr 2022 09:39:02 -0400
Subject: [PATCH] Add ColaGroupsLayout

---
 .../demos/TopologyDemo/TopologyPackage.tsx    |  22 +-
 .../demos/TopologyDemo/data/generator.ts      |  47 +++-
 .../layouts/defaultLayoutFactory.ts           |   3 +
 .../react-topology/src/elements/BaseNode.ts   |  34 ++-
 .../react-topology/src/layouts/BaseLayout.ts  |  11 +-
 .../src/layouts/BreadthFirstLayout.ts         |   2 +-
 .../src/layouts/ColaGroupsLayout.ts           | 252 ++++++++++++++++++
 .../src/layouts/ColaGroupsNode.ts             |  58 ++++
 .../react-topology/src/layouts/ColaLayout.ts  |  47 ++--
 .../src/layouts/ConcentricLayout.ts           |   2 +-
 .../react-topology/src/layouts/DagreLayout.ts |   2 +-
 .../react-topology/src/layouts/ForceLayout.ts |   2 +-
 .../react-topology/src/layouts/GridLayout.ts  |   2 +-
 packages/react-topology/src/layouts/index.ts  |   1 +
 14 files changed, 437 insertions(+), 48 deletions(-)
 create mode 100644 packages/react-topology/src/layouts/ColaGroupsLayout.ts
 create mode 100644 packages/react-topology/src/layouts/ColaGroupsNode.ts

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
index 85497d9a3cf..83376a820b5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/TopologyPackage.tsx
@@ -81,6 +81,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
   const [numNodes, setNumNodes] = React.useState<number | undefined>(6);
   const [numEdges, setNumEdges] = React.useState<number | undefined>(2);
   const [numGroups, setNumGroups] = React.useState<number | undefined>(1);
+  const [nestedLevel, setNestedLevel] = React.useState<number | undefined>(0);
   const [medScale, setMedScale] = React.useState<number | undefined>(0.5);
   const [lowScale, setLowScale] = React.useState<number | undefined>(0.3);
   const [creationCounts, setCreationCounts] = React.useState<{ numNodes: number; numEdges: number; numGroups: number }>(
@@ -93,6 +94,7 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
       creationCounts.numNodes,
       creationCounts.numGroups,
       creationCounts.numEdges,
+      nestedLevel,
       nodeOptions,
       edgeOptions
     );
@@ -153,6 +155,9 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
             <DropdownItem key={3} onClick={() => updateLayout('Cola')}>
               Cola
             </DropdownItem>,
+            <DropdownItem key={8} onClick={() => updateLayout('ColaGroups')}>
+              ColaGroups
+            </DropdownItem>,
             <DropdownItem key={4} onClick={() => updateLayout('ColaNoForce')}>
               ColaNoForce
             </DropdownItem>,
@@ -462,21 +467,28 @@ const TopologyViewComponent: React.FunctionComponent<TopologyViewComponentProps>
             aria-label="nodes"
             type="number"
             value={numNodes || ''}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(0))}
+            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null))}
           />
           <span>Edges:</span>
           <TextInput
             aria-label="edges"
             type="number"
-            value={numEdges}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(0))}
+            value={numEdges === null ? '' : numEdges}
+            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null))}
           />
           <span>Groups:</span>
           <TextInput
             aria-label="groups"
             type="number"
-            value={numGroups}
-            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(0))}
+            value={numGroups === null ? '' : numGroups}
+            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null))}
+          />
+          <span>Nesting Depth:</span>
+          <TextInput
+            aria-label="nesting depth"
+            type="number"
+            value={nestedLevel === null ? '' : nestedLevel}
+            onChange={(val: string) => (val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null))}
           />
           <Button
             variant="link"
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/data/generator.ts b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/data/generator.ts
index e2a90463971..401ad5ffbe6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/data/generator.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/data/generator.ts
@@ -45,7 +45,7 @@ export const DefaultNodeOptions: GeneratorNodeOptions = {
   statuses: [NodeStatus.default],
   statusDecorators: false,
   showDecorators: false,
-  nodeLabels: false,
+  nodeLabels: true,
   nodeSecondaryLabels: false,
   nodeBadges: false,
   nodeIcons: false,
@@ -126,6 +126,7 @@ export const generateDataModel = (
   numNodes: number,
   numGroups: number,
   numEdges: number,
+  groupDepth: number = 0,
   nodeOptions: GeneratorNodeOptions = {},
   edgeOptions: GeneratorEdgeOptions = {}
 ): Model => {
@@ -136,13 +137,20 @@ export const generateDataModel = (
   const nodes: NodeModel[] = [];
   const edges: EdgeModel[] = [];
 
-  for (let i = 1; i <= numGroups; i++) {
-    groups.push({
-      id: `Group-${i}`,
+  const createGroup = (
+    childNodes: NodeModel[],
+    baseId: string = 'Group',
+    index: number,
+    level: number = 0
+  ): NodeModel => {
+    const id = `${baseId}-${index}`;
+    const group: NodeModel = {
+      id,
       children: [],
       type: 'group',
       group: true,
-      label: `Group-${i}`,
+      label: id,
+      style: { padding: 15 },
       data: {
         badge: nodeCreationOptions.nodeBadges ? 'GN' : undefined,
         badgeColor: '#F2F0FC',
@@ -153,16 +161,33 @@ export const generateDataModel = (
         showContextMenu: nodeCreationOptions.contextMenus,
         collapsible: true
       }
-    });
-  }
+    };
+    if (level === groupDepth) {
+      group.children = childNodes.map(n => n.id);
+    } else {
+      const nodesPerChildGroup = Math.floor(childNodes.length / 2);
+      if (nodesPerChildGroup < 1) {
+        const g1 = createGroup(childNodes, id, 1, level + 1);
+        group.children = [g1.id];
+      } else {
+        const g1 = createGroup(childNodes.slice(0, nodesPerChildGroup), id, 1, level + 1);
+        const g2 = createGroup(childNodes.slice(nodesPerChildGroup), id, 2, level + 1);
+        group.children = [g1.id, g2.id];
+      }
+    }
+
+    groups.push(group);
+    return group;
+  };
+
   for (let i = 0; i < numNodes; i++) {
     const node = generateNode(i, nodeCreationOptions);
     nodes.push(node);
+  }
 
-    const group = i % (numGroups + 1);
-    if (group > 0) {
-      groups[group - 1].children.push(node.id);
-    }
+  const nodesPerGroup = Math.floor((numNodes - 2) / numGroups);
+  for (let i = 0; i < numGroups; i++) {
+    createGroup(nodes.slice(i * nodesPerGroup, (i + 1) * nodesPerGroup), 'Group', i + 1);
   }
 
   for (let i = 0; i < numEdges; i++) {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/layouts/defaultLayoutFactory.ts b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/layouts/defaultLayoutFactory.ts
index e12694e923f..9e78541728b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/layouts/defaultLayoutFactory.ts
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TopologyDemo/layouts/defaultLayoutFactory.ts
@@ -9,6 +9,7 @@ import {
   GridLayout,
   BreadthFirstLayout
 } from '@patternfly/react-topology';
+import { ColaGroupsLayout } from '@patternfly/react-topology/dist/esm/layouts/ColaGroupsLayout';
 
 const defaultLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout | undefined => {
   switch (type) {
@@ -26,6 +27,8 @@ const defaultLayoutFactory: LayoutFactory = (type: string, graph: Graph): Layout
       return new ForceLayout(graph);
     case 'Grid':
       return new GridLayout(graph);
+    case 'ColaGroups':
+      return new ColaGroupsLayout(graph, { layoutOnDrag: false });
     default:
       return new ColaLayout(graph, { layoutOnDrag: false });
   }
diff --git a/packages/react-topology/src/elements/BaseNode.ts b/packages/react-topology/src/elements/BaseNode.ts
index 8d32e7fa944..8eca555846b 100644
--- a/packages/react-topology/src/elements/BaseNode.ts
+++ b/packages/react-topology/src/elements/BaseNode.ts
@@ -40,6 +40,8 @@ export default class BaseNode<E extends NodeModel = NodeModel, D = any> extends
 
   private positioned = false;
 
+  private uncollapsedCenter: Point = null;
+
   @observable.ref
   private position = new Point();
 
@@ -158,10 +160,31 @@ export default class BaseNode<E extends NodeModel = NodeModel, D = any> extends
   }
 
   getPosition(): Point {
+    if (this.isGroup() && !this.collapsed) {
+      return this.getBounds().getCenter();
+    }
     return this.position;
   }
 
+  updateChildrenPositions(point: Point, prevLocation: Point): void {
+    const xOffset = point.x - prevLocation.x;
+    const yOffset = point.y - prevLocation.y;
+    this.getChildren().forEach(child => {
+      if (isNode(child)) {
+        const node = child as Node;
+        const position = node.getPosition();
+        const newPosition = new Point(position.x + xOffset, position.y + yOffset);
+        node.setPosition(newPosition);
+      }
+    });
+  }
+
   setPosition(point: Point): void {
+    if (this.isGroup() && !this.collapsed) {
+      const prevLocation = this.getBounds().getCenter();
+      this.updateChildrenPositions(point, prevLocation);
+      return;
+    }
     this.position = point;
     this.positioned = true;
     try {
@@ -243,8 +266,15 @@ export default class BaseNode<E extends NodeModel = NodeModel, D = any> extends
       // keeping the nodes ln place so the layout doesn't start fresh (putting the new nodes at 0,0
       // TODO: Update to better position the nodes at a point location rather than relying on the setCenter updating the nodes.
       const prevCenter = this.getBounds().getCenter();
-      this.collapsed = collapsed;
-      this.setBounds(this.getBounds().setCenter(prevCenter.x, prevCenter.y));
+      if (!collapsed && this.uncollapsedCenter) {
+        this.updateChildrenPositions(prevCenter, this.uncollapsedCenter);
+        this.uncollapsedCenter = null;
+        this.collapsed = collapsed;
+      } else {
+        this.uncollapsedCenter = collapsed ? prevCenter : null;
+        this.collapsed = collapsed;
+        this.setBounds(this.getBounds().setCenter(prevCenter.x, prevCenter.y));
+      }
       this.getController().fireEvent(NODE_COLLAPSE_CHANGE_EVENT, { node: this });
     }
   }
diff --git a/packages/react-topology/src/layouts/BaseLayout.ts b/packages/react-topology/src/layouts/BaseLayout.ts
index dd4d158c9a7..094461a766c 100644
--- a/packages/react-topology/src/layouts/BaseLayout.ts
+++ b/packages/react-topology/src/layouts/BaseLayout.ts
@@ -43,7 +43,7 @@ export const LAYOUT_DEFAULTS: LayoutOptions = {
   layoutOnDrag: true
 };
 export class BaseLayout implements Layout {
-  private readonly graph: Graph;
+  protected readonly graph: Graph;
 
   protected forceSimulation: ForceSimulation;
 
@@ -233,8 +233,11 @@ export class BaseLayout implements Layout {
     if (!this.scheduleHandle) {
       this.scheduleHandle = window.requestAnimationFrame(() => {
         delete this.scheduleHandle;
-        this.runLayout(false, this.scheduleRestart);
-        this.scheduleRestart = false;
+        try {
+          this.runLayout(false, this.scheduleRestart);
+          this.scheduleRestart = false;
+          // eslint-disable-next-line no-empty
+        } catch (e) {}
       });
     }
   };
@@ -397,7 +400,7 @@ export class BaseLayout implements Layout {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {}
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean, onEnd?: () => void): void {}
 
   protected updateLayout(): void {
     this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
diff --git a/packages/react-topology/src/layouts/BreadthFirstLayout.ts b/packages/react-topology/src/layouts/BreadthFirstLayout.ts
index 29055947883..67299bfd095 100644
--- a/packages/react-topology/src/layouts/BreadthFirstLayout.ts
+++ b/packages/react-topology/src/layouts/BreadthFirstLayout.ts
@@ -32,7 +32,7 @@ export class BreadthFirstLayout extends BaseLayout implements Layout {
     return new BreadthFirstGroup(node, padding, index);
   }
 
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
     if (initialRun || addingNodes) {
       // Breath First algorithm
 
diff --git a/packages/react-topology/src/layouts/ColaGroupsLayout.ts b/packages/react-topology/src/layouts/ColaGroupsLayout.ts
new file mode 100644
index 00000000000..af52c63fd4d
--- /dev/null
+++ b/packages/react-topology/src/layouts/ColaGroupsLayout.ts
@@ -0,0 +1,252 @@
+import * as webcola from 'webcola';
+import * as d3 from 'd3';
+import { action } from 'mobx';
+import { Graph, Layout, Node } from '../types';
+import { BaseLayout } from './BaseLayout';
+import { LayoutLink } from './LayoutLink';
+import { LayoutGroup } from './LayoutGroup';
+import { LayoutNode } from './LayoutNode';
+import { ColaGroupsNode } from './ColaGroupsNode';
+import { ColaGroup } from './ColaGroup';
+import { ColaLink } from './ColaLink';
+import { ColaLayout } from './ColaLayout';
+
+export interface ChildGroup {
+  group: LayoutGroup;
+  nodes: LayoutNode[];
+  edges: LayoutLink[];
+  groups: LayoutGroup[];
+}
+
+class ColaGroupsLayout extends ColaLayout implements Layout {
+  private layerNodes: LayoutNode[];
+
+  private layerGroupNodes: ChildGroup[];
+
+  private layerGroups: LayoutGroup[];
+
+  private layerEdges: LayoutLink[];
+
+  private layoutNodes: LayoutNode[];
+
+  private childLayouts: BaseLayout[];
+
+  protected initializeLayout(): void {}
+
+  protected initializeColaGroupLayout(graph: Graph): void {
+    this.d3Cola = webcola.d3adaptor(d3);
+    this.d3Cola.handleDisconnected(true);
+    this.d3Cola.avoidOverlaps(true);
+    this.d3Cola.jaccardLinkLengths(40, 0.7);
+    this.d3Cola.on('tick', () => {
+      this.tickCount++;
+      if (this.tickCount >= 1 || this.tickCount % this.options.simulationSpeed === 0) {
+        action(() => this.nodes.forEach(d => d.update()))();
+      }
+      if (this.colaOptions.maxTicks >= 0 && this.tickCount > this.colaOptions.maxTicks) {
+        this.d3Cola.stop();
+      }
+    });
+    this.d3Cola.on('end', () => {
+      this.tickCount = 0;
+      this.simulationRunning = false;
+      action(() => {
+        if (this.destroyed) {
+          this.onEnd && this.onEnd();
+          return;
+        }
+        this.layoutNodes.forEach(d => {
+          if (!this.simulationStopped) {
+            d.update();
+          }
+          d.setFixed(false);
+        });
+        if (this.options.layoutOnDrag) {
+          this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
+        }
+        if (this.simulationStopped) {
+          this.simulationStopped = false;
+          if (this.restartOnEnd !== undefined) {
+            this.startColaLayout(false, this.restartOnEnd);
+            this.startLayout(graph, false, this.restartOnEnd, this.onEnd);
+            delete this.restartOnEnd;
+          }
+        } else if (this.addingNodes) {
+          // One round of simulation to adjust for new nodes
+          this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
+          this.forceSimulation.restart();
+        }
+        this.onEnd && this.onEnd();
+      })();
+    });
+  }
+
+  protected createLayoutNode(node: Node, nodeDistance: number, index: number) {
+    return new ColaGroupsNode(node, nodeDistance, index);
+  }
+
+  protected getAllLeaves(group: LayoutGroup): LayoutNode[] {
+    const leaves = [...group.leaves];
+    group.groups?.forEach(subGroup => leaves.push(...this.getAllLeaves(subGroup)));
+    return leaves;
+  }
+  protected getAllSubGroups(group: LayoutGroup): LayoutGroup[] {
+    const groups = [...group.groups];
+    group.groups?.forEach(subGroup => groups.push(...this.getAllSubGroups(subGroup)));
+    return groups;
+  }
+
+  protected isNodeInGroups(node: LayoutNode, groups: LayoutGroup[]): boolean {
+    return !!groups.find(group => group.leaves.includes(node) || this.isNodeInGroups(node, group.groups));
+  }
+
+  protected isNodeInChildGroups(node: LayoutNode, groups: ChildGroup[]): boolean {
+    return !!groups.find(group => group.nodes.includes(node) || this.isNodeInGroups(node, group.groups));
+  }
+
+  protected isSubGroup(group: ChildGroup, childGroups: ChildGroup[]): boolean {
+    return !!childGroups.find(cg => cg.groups.includes(group.group));
+  }
+
+  protected getNodeGroup(node: LayoutNode, childGroups: ChildGroup[]): ChildGroup | undefined {
+    return childGroups.find(group => group.nodes.includes(node) || this.isNodeInGroups(node, group.groups));
+  }
+
+  protected getGroupLayout(
+    graph: Graph,
+    group: LayoutGroup,
+    nodes: LayoutNode[],
+    edges: LayoutLink[],
+    groups: LayoutGroup[]
+  ): BaseLayout {
+    const layout = new ColaGroupsLayout(graph, this.options);
+    layout.setupLayout(graph, nodes, edges, groups);
+    return layout;
+  }
+
+  protected setupLayout(graph: Graph, nodes: LayoutNode[], edges: LayoutLink[], groups: LayoutGroup[]): void {
+    const constraints = this.getConstraints(nodes as ColaGroupsNode[], groups as ColaGroup[], edges);
+    let childGroups = groups.reduce((acc, group) => {
+      if (
+        !groups.find(g => group.element.getParent()?.getId() === g.element.getId()) &&
+        (group.groups.length || group.leaves.length)
+      ) {
+        const allLeaves = this.getAllLeaves(group);
+        const groupEdges = edges.filter(edge => allLeaves.includes(edge.sourceNode) && allLeaves.includes(edge.target));
+        const groupGroups = this.getAllSubGroups(group);
+        allLeaves.forEach((l, i) => {
+          l.index = i;
+          if (l.parent && !groupGroups.includes(l.parent)) {
+            l.parent = undefined;
+          }
+        });
+        groupGroups.forEach((g, i) => {
+          g.index = 2 * allLeaves.length + i;
+          g.parent = undefined;
+        });
+
+        acc.push({
+          group,
+          nodes: allLeaves,
+          edges: groupEdges,
+          groups: groupGroups
+        });
+      }
+      return acc;
+    }, [] as ChildGroup[]);
+    const constrainedGroups = groups.filter(g => constraints.find(c => c.group === g.element.getId()));
+    this.layerGroups = childGroups.filter(cg => constrainedGroups.includes(cg.group)).map(cg => cg.group);
+    childGroups = childGroups.filter(cg => !this.layerGroups.includes(cg.group));
+    this.layerNodes = nodes.filter(node => !this.isNodeInChildGroups(node, childGroups));
+    this.layerGroupNodes = childGroups.filter(cg => !this.isSubGroup(cg, childGroups));
+    this.layerEdges = edges.reduce((acc, edge) => {
+      const source = this.getNodeGroup(edge.sourceNode, childGroups);
+      const target = this.getNodeGroup(edge.targetNode, childGroups);
+      if (!source || !target || source !== target) {
+        acc.push(edge);
+      }
+      return acc;
+    }, [] as LayoutLink[]);
+    this.childLayouts = childGroups.map(childGroup =>
+      this.getGroupLayout(graph, childGroup.group, childGroup.nodes, childGroup.edges, childGroup.groups)
+    );
+  }
+
+  private startChildLayout(
+    graph: Graph,
+    childLayout: BaseLayout,
+    initialRun: boolean,
+    addingNodes: boolean
+  ): Promise<void> {
+    return new Promise<void>(resolve => {
+      childLayout.startLayout(graph, initialRun, addingNodes, () => {
+        resolve();
+      });
+    });
+  }
+
+  protected startColaLayout(initialRun: boolean, addingNodes: boolean): void {
+    this.simulationRunning = true;
+    this.tickCount = 0;
+    this.addingNodes = addingNodes;
+
+    const doStart = () => {
+      this.initializeColaGroupLayout(this.graph);
+      const { width, height } = this.graph.getBounds();
+      this.d3Cola.size([width, height]);
+      this.layoutNodes = [...this.layerNodes];
+      this.layerGroupNodes.forEach(cg => {
+        const layoutNode = this.createLayoutNode(cg.group.element, this.options.nodeDistance, cg.group.index);
+        this.layoutNodes.push(layoutNode);
+        this.layerEdges.forEach(edge => {
+          if (cg.nodes.find(n => n.id === edge.sourceNode.id) || this.isNodeInGroups(edge.sourceNode, cg.groups)) {
+            edge.sourceNode = layoutNode;
+          }
+          if (cg.nodes.find(n => n.id === edge.targetNode.id) || this.isNodeInGroups(edge.targetNode, cg.groups)) {
+            edge.targetNode = layoutNode;
+          }
+        });
+      });
+
+      // Get any custom constraints
+      const constraints = this.getConstraints(
+        this.layoutNodes as ColaGroupsNode[],
+        this.layerGroups as ColaGroup[],
+        this.layerEdges
+      );
+      this.d3Cola.constraints(constraints);
+
+      this.d3Cola.nodes(this.layoutNodes);
+      this.d3Cola.groups(this.layerGroups);
+      this.d3Cola.links(this.layerEdges);
+      this.d3Cola.alpha(0.2);
+
+      this.d3Cola.start(
+        addingNodes ? 0 : this.colaOptions.initialUnconstrainedIterations,
+        addingNodes ? 0 : this.colaOptions.initialUserConstraintIterations,
+        addingNodes ? 0 : this.colaOptions.initialAllConstraintsIterations,
+        addingNodes ? 0 : this.colaOptions.gridSnapIterations,
+        false,
+        !addingNodes
+      );
+    };
+
+    if (this.childLayouts?.length) {
+      const runLayouts = (childLayouts: BaseLayout[]): Promise<void[]> =>
+        Promise.all(
+          childLayouts.map(childLayout => this.startChildLayout(this.graph, childLayout, initialRun, addingNodes))
+        );
+
+      runLayouts(this.childLayouts)
+        .then(() => {
+          doStart();
+        })
+        .catch(() => {});
+      return;
+    }
+
+    doStart();
+  }
+}
+
+export { ColaGroupsLayout, ColaGroupsNode, ColaGroup, ColaLink };
diff --git a/packages/react-topology/src/layouts/ColaGroupsNode.ts b/packages/react-topology/src/layouts/ColaGroupsNode.ts
new file mode 100644
index 00000000000..f82fa9b4120
--- /dev/null
+++ b/packages/react-topology/src/layouts/ColaGroupsNode.ts
@@ -0,0 +1,58 @@
+import * as webcola from 'webcola';
+import { isNode, Node } from '../types';
+import { LayoutNode } from './LayoutNode';
+import { Point } from '../geom';
+
+export class ColaGroupsNode 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
+    // may need to do more here like what is done in ColaNode
+  }
+  setFixed(fixed: boolean): void {
+    super.setFixed(fixed);
+    this.fixed = fixed ? 1 : 0;
+  }
+
+  update() {
+    if (!this.isFixed && this.xx != null && this.yy != null) {
+      if (this.node.isGroup()) {
+        const prevLocation = this.node.getBounds().getCenter();
+        const xOffset = this.xx - prevLocation.x;
+        const yOffset = this.yy - prevLocation.y;
+
+        this.node.getChildren().forEach(child => {
+          if (isNode(child)) {
+            const node = child as Node;
+            const position = node.getPosition();
+            node.setPosition(new Point(position.x + xOffset, position.y + yOffset));
+          }
+        });
+      } else {
+        this.setPosition(this.xx, this.yy);
+      }
+    }
+    this.xx = undefined;
+    this.yy = undefined;
+  }
+
+  get width(): number {
+    return this.nodeBounds.width + this.distance * 2;
+  }
+
+  get height(): number {
+    return this.nodeBounds.height + this.distance * 2;
+  }
+
+  get radius(): number {
+    const bounds = this.nodeBounds;
+    return Math.max(bounds.width, bounds.height) / 2;
+  }
+
+  get collisionRadius(): number {
+    return this.radius + this.distance;
+  }
+}
diff --git a/packages/react-topology/src/layouts/ColaLayout.ts b/packages/react-topology/src/layouts/ColaLayout.ts
index 1a224bf0e95..2c2a8743222 100644
--- a/packages/react-topology/src/layouts/ColaLayout.ts
+++ b/packages/react-topology/src/layouts/ColaLayout.ts
@@ -28,21 +28,23 @@ const COLA_LAYOUT_DEFAULTS: ColaLayoutOptions = {
 };
 
 class ColaLayout extends BaseLayout implements Layout {
-  private d3Cola: any;
+  protected d3Cola: any;
 
-  private colaOptions: ColaLayoutOptions;
+  protected colaOptions: ColaLayoutOptions;
 
-  private tickCount = 0;
+  protected tickCount = 0;
 
-  private destroyed = false;
+  protected destroyed = false;
 
-  private simulationRunning = false;
+  protected simulationRunning = false;
 
-  private simulationStopped = false;
+  protected simulationStopped = false;
 
-  private restartOnEnd: boolean = undefined;
+  protected restartOnEnd: boolean = undefined;
 
-  private addingNodes: boolean = false;
+  protected addingNodes: boolean = false;
+
+  protected onEnd: () => void;
 
   constructor(graph: Graph, options?: Partial<ColaLayoutOptions & LayoutOptions>) {
     super(graph, options);
@@ -72,6 +74,7 @@ class ColaLayout extends BaseLayout implements Layout {
       this.simulationRunning = false;
       action(() => {
         if (this.destroyed) {
+          this.onEnd && this.onEnd();
           return;
         }
         this.nodes.forEach(d => {
@@ -86,7 +89,7 @@ class ColaLayout extends BaseLayout implements Layout {
         if (this.simulationStopped) {
           this.simulationStopped = false;
           if (this.restartOnEnd !== undefined) {
-            this.startColaLayout(this.restartOnEnd);
+            this.startColaLayout(false, this.restartOnEnd);
             delete this.restartOnEnd;
           }
         } else if (this.addingNodes) {
@@ -94,6 +97,7 @@ class ColaLayout extends BaseLayout implements Layout {
           this.forceSimulation.useForceSimulation(this.nodes, this.edges, this.getFixedNodeDistance);
           this.forceSimulation.restart();
         }
+        this.onEnd && this.onEnd();
       })();
     });
   }
@@ -111,12 +115,16 @@ class ColaLayout extends BaseLayout implements Layout {
     super.destroy();
 
     this.destroyed = true;
-    this.d3Cola.stop();
+    if (this.d3Cola) {
+      this.d3Cola.stop();
+    }
   }
 
   initDrag() {
     // Set the alpha to 0 to halt any ticks that may be occurring
-    this.d3Cola.alpha(0);
+    if (this.d3Cola) {
+      this.d3Cola.alpha(0);
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -127,7 +135,9 @@ class ColaLayout extends BaseLayout implements Layout {
   protected stopSimulation(): void {
     if (this.simulationRunning) {
       this.simulationStopped = true;
-      this.d3Cola.stop();
+      if (this.d3Cola) {
+        this.d3Cola.stop();
+      }
     }
     super.stopSimulation();
   }
@@ -160,13 +170,7 @@ class ColaLayout extends BaseLayout implements Layout {
     this.d3Cola.groups(groups);
   }
 
-  protected updateExistingNodes(existingNodes: LayoutNode[]) {
-    existingNodes.forEach(n => {
-      (n as ColaNode).fixed = 1;
-    });
-  }
-
-  private startColaLayout(addingNodes: boolean): void {
+  protected startColaLayout(initialRun: boolean, addingNodes: boolean): void {
     this.simulationRunning = true;
     this.d3Cola.alpha(0.2);
     this.tickCount = 0;
@@ -182,9 +186,10 @@ class ColaLayout extends BaseLayout implements Layout {
     );
   }
 
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean, onEnd?: () => void): void {
+    this.onEnd = onEnd;
     if (!this.simulationStopped) {
-      this.startColaLayout(addingNodes);
+      this.startColaLayout(initialRun, addingNodes);
     } else {
       this.restartOnEnd = addingNodes;
     }
diff --git a/packages/react-topology/src/layouts/ConcentricLayout.ts b/packages/react-topology/src/layouts/ConcentricLayout.ts
index 843836996a3..d6df58ba09d 100644
--- a/packages/react-topology/src/layouts/ConcentricLayout.ts
+++ b/packages/react-topology/src/layouts/ConcentricLayout.ts
@@ -34,7 +34,7 @@ export class ConcentricLayout extends BaseLayout implements Layout {
     return new ConcentricGroup(node, padding, index);
   }
 
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
     if (initialRun || addingNodes) {
       const weights = {};
       this.nodes.forEach(node => {
diff --git a/packages/react-topology/src/layouts/DagreLayout.ts b/packages/react-topology/src/layouts/DagreLayout.ts
index 00d243e8b26..d61087d7272 100644
--- a/packages/react-topology/src/layouts/DagreLayout.ts
+++ b/packages/react-topology/src/layouts/DagreLayout.ts
@@ -52,7 +52,7 @@ export class DagreLayout extends BaseLayout implements Layout {
     return [];
   }
 
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
     if (initialRun || addingNodes) {
       const dagreGraph = new dagre.graphlib.Graph({ compound: true });
       dagreGraph.setGraph(_.omit(this.dagreOptions, Object.keys(LAYOUT_DEFAULTS)));
diff --git a/packages/react-topology/src/layouts/ForceLayout.ts b/packages/react-topology/src/layouts/ForceLayout.ts
index aae92b559a0..711b9af9e25 100644
--- a/packages/react-topology/src/layouts/ForceLayout.ts
+++ b/packages/react-topology/src/layouts/ForceLayout.ts
@@ -28,7 +28,7 @@ export class ForceLayout extends BaseLayout implements Layout {
     return distance;
   };
 
-  protected startLayout(graph: Graph): void {
+  public startLayout(graph: Graph): void {
     const { width, height } = graph.getBounds();
     const cx = width / 2;
     const cy = height / 2;
diff --git a/packages/react-topology/src/layouts/GridLayout.ts b/packages/react-topology/src/layouts/GridLayout.ts
index a68d4096840..48ee4859322 100644
--- a/packages/react-topology/src/layouts/GridLayout.ts
+++ b/packages/react-topology/src/layouts/GridLayout.ts
@@ -32,7 +32,7 @@ export class GridLayout extends BaseLayout implements Layout {
     return new GridGroup(node, padding, index);
   }
 
-  protected startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
+  public startLayout(graph: Graph, initialRun: boolean, addingNodes: boolean): void {
     if (initialRun || addingNodes) {
       this.nodes.sort((a, b) => a.id.localeCompare(b.id));
       const totalNodes = this.nodes.length;
diff --git a/packages/react-topology/src/layouts/index.ts b/packages/react-topology/src/layouts/index.ts
index 24ab252f1f3..4efa664c427 100644
--- a/packages/react-topology/src/layouts/index.ts
+++ b/packages/react-topology/src/layouts/index.ts
@@ -1,6 +1,7 @@
 export * from './BaseLayout';
 export * from './BreadthFirstLayout';
 export * from './ColaLayout';
+export * from './ColaGroupsLayout';
 export * from './ConcentricLayout';
 export * from './DagreLayout';
 export * from './ForceLayout';