Support rendering recursive static DAGs (#845)

* Adds support for rendering recursive pipelines to the StaticGraphParser

* Adds a recursive pipeline to the list of mocks

* Fixes recursive graph rendering under new styling

* Adds additional comments and surfaces pipeline yaml error to users

* Remove unnecessary comment

frontend/mock-backend/fixed-data.ts

@@ -668,9 +668,11 @@ export const data = {
   runs,
 };
 
+// tslint:disable:object-literal-sort-keys
 export const namedPipelines = {
-  examplePipeline: pipelines[0],
-  examplePipeline2: pipelines[1],
+  unstructuredTextPipeline: pipelines[0],
+  imageClassificationPipeline: pipelines[1],
   noParamsPipeline: pipelines[2],
   undefinedParamsPipeline: pipelines[3],
 };
+// tslint:enable:object-literal-sort-keys

frontend/mock-backend/mock-api-middleware.ts

@@ -478,9 +478,14 @@ export default (app: express.Application) => {
       res.status(404).send(`No pipeline was found with ID: ${req.params.pid}`);
       return;
     }
-    const filePath = req.params.pid === namedPipelines.noParamsPipeline.id
-      ? './mock-backend/mock-conditional-template.yaml'
-      : './mock-backend/mock-template.yaml';
+    let filePath = '';
+    if (req.params.pid === namedPipelines.noParamsPipeline.id) {
+      filePath = './mock-backend/mock-conditional-template.yaml';
+    } else if (req.params.pid === namedPipelines.unstructuredTextPipeline.id) {
+      filePath = './mock-backend/mock-recursive-template.yaml';
+    } else {
+      filePath = './mock-backend/mock-template.yaml';
+    }
     res.send(JSON.stringify({ template: fs.readFileSync(filePath, 'utf-8') }));
   });
 

frontend/mock-backend/mock-recursive-template.yaml

@@ -0,0 +1,52 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Workflow
+metadata:
+  generateName: entry-point-test-
+spec:
+  arguments:
+    parameters: []
+  entrypoint: entry-point-test
+  templates:
+  - dag:
+      tasks:
+      - name: recurse-1
+        template: recurse-1
+      - name: leaf-1
+        template: leaf-1
+    name: start
+  - dag:
+      tasks:
+      - name: start
+        template: start
+      - name: recurse-2
+        template: recurse-2
+    name: recurse-1
+  - dag:
+      tasks:
+      - name: start
+        template: start
+      - name: leaf-2
+        template: leaf-2
+      - name: recurse-3
+        template: recurse-3
+    name: recurse-2
+  - dag:
+      tasks:
+      - name: start
+        template: start
+      - name: recurse-1
+        template: recurse-1
+      - name: recurse-2
+        template: recurse-2
+    name: recurse-3
+  - dag:
+      tasks:
+      - name: start
+        template: start
+    name: entry-point-test
+  - container:
+    name: leaf-1
+  - container:
+    name: leaf-2
+
+

frontend/src/components/Graph.tsx

@@ -141,6 +141,10 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
 
           let xStart = edge.points[i - 1].x;
           let yStart = edge.points[i - 1].y;
+          let xEnd = edge.points[i].x;
+          let yEnd = edge.points[i].y;
+
+          const downwardPointingSegment = yStart <= yEnd;
 
           // Adjustments made to the start of the first segment for each edge to ensure that it
           // begins at the bottom of the source node and that there are at least EDGE_X_BUFFER
@@ -150,15 +154,14 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
           if (i === 1) {
             const sourceNode = graph.node(edgeInfo.v);
 
-            // Set the edge's first segment to start at the bottom of the source node.
-            yStart = sourceNode.y + (sourceNode.height / 2) - 3;
+            // Set the edge's first segment to start at the bottom or top of the source node.
+            yStart = downwardPointingSegment
+              ? sourceNode.y + (sourceNode.height / 2) - 3
+              : sourceNode.y - (sourceNode.height / 2);
 
             xStart = this._ensureXIsWithinNode(sourceNode, xStart);
           }
 
-          let xEnd = edge.points[i].x;
-          let yEnd = edge.points[i].y;
-
           const finalSegment = i === edge.points.length - 1;
 
           // Adjustments made to the end of the final segment for each edge to ensure that it ends
@@ -176,8 +179,11 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
             // Placeholder nodes never need adjustment because they always have only a single
             // incoming edge.
             if (!destinationNode.isPlaceholder) {
-              // Set the edge's final segment to terminate at the top of the destination node.
-              yEnd = destinationNode.y - this.TOP_OFFSET + 5;
+              // Set the edge's final segment to terminate at the top or bottom of the destination
+              // node.
+              yEnd = downwardPointingSegment
+                ? destinationNode.y - this.TOP_OFFSET + 5
+                : destinationNode.y + (destinationNode.height / 2) + 3;
 
               xEnd = this._ensureXIsWithinNode(destinationNode, xEnd);
             }
@@ -190,14 +196,25 @@ export default class Graph extends React.Component<GraphProps, GraphState> {
             this._addDiagonalSegment(segments, xStart, yStart, xEnd, yHalf);
 
             // Vertical segment
-            segments.push({
-              angle: 270,
-              length: yEnd - yHalf,
-              x1: xEnd - 5,
-              x2: xEnd,
-              y1: yHalf + 4,
-              y2: yEnd,
-            });
+            if (downwardPointingSegment) {
+              segments.push({
+                angle: 270,
+                length: yEnd - yHalf,
+                x1: xEnd - 5,
+                x2: xEnd,
+                y1: yHalf + 4,
+                y2: yEnd,
+              });
+            } else {
+              segments.push({
+                angle: 90,
+                length: yHalf - yEnd,
+                x1: xEnd - 5,
+                x2: xEnd,
+                y1: yHalf - 4,
+                y2: yEnd,
+              });
+            }
           } else {
             this._addDiagonalSegment(segments, xStart, yStart, xEnd, yEnd);
           }