Fixes recursive graph rendering under new styling

kubeflow · Feb 21, 2019 · 46c54d2 · 46c54d2
1 parent 928dd65
commit 46c54d2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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) => {