Recurse into child stages to flatten the tree (#83)

Author: mikedld

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.spec.ts

@@ -240,5 +240,121 @@ describe("PipelineGraphLayout", () => {
         },
       ]);
     });
+
+    it("returns proper columns (GH#50)", () => {
+      const columns = createNodeColumns(
+        [
+          makeStage(3, "Parallel", [
+            makeParallel(4, "parallel:0", [
+              makeStage(6, "parent:0", [
+                makeStage(9, "child:0"),
+                makeStage(14, "child:1"),
+                makeStage(19, "child:3"),
+              ]),
+            ]),
+          ]),
+          makeStage(29, "parent:1"),
+        ],
+        false
+      );
+
+      expect(columns).toMatchObject([
+        {
+          hasBranchLabels: true,
+          topStage: { name: "Parallel", id: 3 },
+          rows: [
+            [
+              makeNode(6, "parent:0", "parallel:0"),
+              makeNode(9, "child:0", "parent:0"),
+              makeNode(14, "child:1", "parent:0"),
+              makeNode(19, "child:3", "parent:0"),
+            ],
+          ],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "parent:1", id: 29 },
+          rows: [[makeNode(29, "parent:1")]],
+        },
+      ]);
+    });
+
+    it("returns proper columns (GH#18)", () => {
+      const columns = createNodeColumns(
+          [
+            makeStage(6, "Stage 1"),
+            makeStage(11, "Stage 2"),
+            makeStage(31, "Stage6, When anyOf", [
+              makeStage(12, "Stage 3"),
+              makeStage(33, "Parallel", [
+                makeParallel(36, "Parallel Stage 1", [
+                  makeStage(43, "Parallel Stage 1.1"),
+                  makeStage(61, "Parallel Stage 1.2"),
+                ]),
+                makeParallel(37, "Parallel Stage 2", [
+                  makeStage(45, "Parallel Stage 2.1"),
+                  makeStage(63, "Parallel Stage 2.2"),
+                ]),
+              ]),
+              makeStage(13, "Stage 4", [
+                makeStage(14, "Stage 5", [makeStage(15, "Stage 7")]),
+              ]),
+            ]),
+          ],
+          false
+      );
+
+      expect(columns).toMatchObject([
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 1", id: 6 },
+          rows: [[makeNode(6, "Stage 1")]],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 2", id: 11 },
+          rows: [[makeNode(11, "Stage 2")]],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage6, When anyOf", id: 31 },
+          rows: [[makeNode(31, "Stage6, When anyOf")]],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 3", id: 12 },
+          rows: [[makeNode(12, "Stage 3")]],
+        },
+        {
+          hasBranchLabels: true,
+          topStage: { name: "Parallel", id: 33 },
+          rows: [
+            [
+              makeNode(43, "Parallel Stage 1.1", "Parallel Stage 1"),
+              makeNode(61, "Parallel Stage 1.2", "Parallel Stage 1"),
+            ],
+            [
+              makeNode(45, "Parallel Stage 2.1", "Parallel Stage 2"),
+              makeNode(63, "Parallel Stage 2.2", "Parallel Stage 2"),
+            ],
+          ],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 4", id: 13 },
+          rows: [[makeNode(13, "Stage 4")]],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 5", id: 14 },
+          rows: [[makeNode(14, "Stage 5")]],
+        },
+        {
+          hasBranchLabels: false,
+          topStage: { name: "Stage 7", id: 15 },
+          rows: [[makeNode(15, "Stage 7")]],
+        },
+      ]);
+    });
   });
 });

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraphLayout.ts

@@ -109,10 +109,10 @@ export function createNodeColumns(
     };
   };
 
-  for (const topStage of topLevelStages) {
+  const processTopStage = (topStage: StageInfo, willRecurse: boolean) => {
     // If stage has children, we don't draw a node for it, just its children
     const stagesForColumn =
-      topStage.children && topStage.children.length
+      !willRecurse && stageHasChildren(topStage)
         ? topStage.children
         : [topStage];
 
@@ -126,11 +126,11 @@ export function createNodeColumns(
 
     for (const nodeStage of stagesForColumn) {
       const rowNodes: Array<NodeInfo> = [];
-      if (!collasped && nodeStage.children && nodeStage.children.length) {
+      if (!collasped && !willRecurse && stageHasChildren(nodeStage)) {
         column.hasBranchLabels = true;
-        for (const childStage of nodeStage.children) {
-          rowNodes.push(makeNodeForStage(childStage, nodeStage.name));
-        }
+        forEachChildStage(nodeStage, (parentStage, childStage, _) =>
+          rowNodes.push(makeNodeForStage(childStage, parentStage.name))
+        );
       } else {
         rowNodes.push(makeNodeForStage(nodeStage));
       }
@@ -141,11 +141,49 @@ export function createNodeColumns(
     }
 
     nodeColumns.push(column);
+  };
+
+  for (const protoTopStage of topLevelStages) {
+    const selfParentTopStage = { ...protoTopStage, children: [protoTopStage] };
+
+    forEachChildStage(selfParentTopStage, (_, topStage, willRecurse) =>
+      processTopStage(topStage, willRecurse)
+    );
   }
 
   return nodeColumns;
 }
 
+/**
+ * Check if stage has children.
+ */
+function stageHasChildren(stage: StageInfo): boolean {
+  return !!(stage.children && stage.children.length);
+}
+
+/**
+ * Walk the children of the stage recursively (depth first), invoking callback for each child.
+ *
+ * Don't recurse into parallel children as those are processed separately.
+ * If one child of the stage is parallel, we assume all of its children are.
+ */
+function forEachChildStage(
+  topStage: StageInfo,
+  callback: (parent: StageInfo, child: StageInfo, willRecurse: boolean) => void
+) {
+  if (!stageHasChildren(topStage)) {
+    return;
+  }
+  for (const stage of topStage.children) {
+    const needToRecurse =
+      stageHasChildren(stage) && stage.children[0].type != "PARALLEL";
+    callback(topStage, stage, needToRecurse);
+    if (needToRecurse) {
+      forEachChildStage(stage, callback);
+    }
+  }
+}
+
 /**
  * Walks the columns of nodes giving them x and y positions. Mutates the node objects in place for now.
  */