From 46c54d2938da7d5ebf2ddecb13bca87b9d01ef26 Mon Sep 17 00:00:00 2001
From: rileyjbauer <rjbauer@google.com>
Date: Wed, 20 Feb 2019 22:40:19 -0800
Subject: [PATCH] Fixes recursive graph rendering under new styling

---
 .../mock-backend/mock-recursive-template.yaml | 17 +++++--
 frontend/src/components/Graph.tsx             | 47 +++++++++++++------
 frontend/src/lib/StaticGraphParser.ts         | 10 +---
 3 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/frontend/mock-backend/mock-recursive-template.yaml b/frontend/mock-backend/mock-recursive-template.yaml
index 57150bdaca4..d7f08d0df47 100644
--- a/frontend/mock-backend/mock-recursive-template.yaml
+++ b/frontend/mock-backend/mock-recursive-template.yaml
@@ -12,7 +12,7 @@ spec:
       - name: recurse-1
         template: recurse-1
       - name: leaf-1
-        template: leaf-2
+        template: leaf-1
     name: start
   - dag:
       tasks:
@@ -27,9 +27,18 @@ spec:
         template: start
       - name: leaf-2
         template: leaf-2
-      - name: leaf-3
-        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
@@ -39,7 +48,5 @@ spec:
     name: leaf-1
   - container:
     name: leaf-2
-  - container:
-    name: leaf-3
   
   
diff --git a/frontend/src/components/Graph.tsx b/frontend/src/components/Graph.tsx
index c753c75b85f..b802baf3fe9 100644
--- a/frontend/src/components/Graph.tsx
+++ b/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);
           }
diff --git a/frontend/src/lib/StaticGraphParser.ts b/frontend/src/lib/StaticGraphParser.ts
index fa93a546944..e848a9a288a 100644
--- a/frontend/src/lib/StaticGraphParser.ts
+++ b/frontend/src/lib/StaticGraphParser.ts
@@ -70,14 +70,6 @@ export function _populateInfoFromTemplate(info: SelectedNodeInfo, template?: Tem
   return info;
 }
 
-// function printMap(m: Map<string, string>): string {
-//   let s = '\n - ';
-//   m.forEach((v, k) => {
-//     s = s + k + ': ' + v + ',\n - ';
-//   });
-//   return s;
-// }
-
 /**
  * Recursively construct the static graph of the Pipeline.
  *
@@ -104,7 +96,7 @@ function buildDag(
 
   if (root && root.nodeType === 'dag') {
     // Mark that we have visited this DAG, and save the original qualified path to it.
-    alreadyVisited.set(rootTemplateId, parentFullPath || '/' + rootTemplateId);
+    alreadyVisited.set(rootTemplateId, parentFullPath || ('/' + rootTemplateId));
     const template = root.template;
 
     (template.dag.tasks || []).forEach((task) => {