[turbolizer] Improve edge drawing in graph view

* When the source node is above the target node we draw curved (cubic bezier) lines.
* Else, we fallback to rectangular lines.

Change-Id: Ic80245c7b449942e4477f0056e63618cfbeaaaf7
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/3565715Reviewed-by: Tobias Tebbi <tebbi@chromium.org>
Auto-Submit: Harshal Nandigramwar <pro.bbcom18@gmail.com>
Commit-Queue: Tobias Tebbi <tebbi@chromium.org>
Cr-Commit-Position: refs/heads/main@{#79807}

tools/turbolizer/src/edge.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { GNode, DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node";
+import { GNode, MINIMUM_EDGE_SEPARATION, DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node";
 import { Graph } from "./graph";
 
-export const MINIMUM_EDGE_SEPARATION = 20;
+const BEZIER_CONSTANT = 0.3;
 
 export class Edge {
   target: GNode;
@@ -64,20 +64,31 @@ export class Edge {
     const outputApproach = source.getOutputApproach(showTypes);
     const horizontalPos = this.getInputHorizontalPosition(graph, showTypes);
 
-    let result = "M" + outputX + "," + outputY +
-      "L" + outputX + "," + outputApproach +
-      "L" + horizontalPos + "," + outputApproach;
+    let result: string;
+
+    if (inputY < outputY) {
+      result = `M ${outputX} ${outputY}
+                L ${outputX} ${outputApproach}
+                L ${horizontalPos} ${outputApproach}`;
 
       if (horizontalPos != inputX) {
-      result += "L" + horizontalPos + "," + inputApproach;
+        result += `L ${horizontalPos} ${inputApproach}`;
       } else {
         if (inputApproach < outputApproach) {
           inputApproach = outputApproach;
         }
       }
 
-    result += "L" + inputX + "," + inputApproach +
-      "L" + inputX + "," + inputY;
+      result += `L ${inputX} ${inputApproach}
+                 L ${inputX} ${inputY}`;
+    } else {
+      const controlY = outputY + (inputY - outputY) * BEZIER_CONSTANT;
+      result = `M ${outputX} ${outputY}
+                C ${outputX} ${controlY},
+                  ${inputX} ${outputY},
+                  ${inputX} ${inputY}`;
+    }
+
     return result;
   }
 

tools/turbolizer/src/graph-layout.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import { MAX_RANK_SENTINEL } from "../src/constants";
-import { MINIMUM_EDGE_SEPARATION, Edge } from "../src/edge";
-import { NODE_INPUT_WIDTH, MINIMUM_NODE_OUTPUT_APPROACH, DEFAULT_NODE_BUBBLE_RADIUS, GNode } from "../src/node";
+import { Edge } from "../src/edge";
+import { GNode, MINIMUM_EDGE_SEPARATION, NODE_INPUT_WIDTH, MINIMUM_NODE_OUTPUT_APPROACH, DEFAULT_NODE_BUBBLE_RADIUS } from "../src/node";
 import { Graph } from "./graph";
 
 const DEFAULT_NODE_ROW_SEPARATION = 150;

tools/turbolizer/src/graph.ts

-import { GNode } from "./node";
-import { Edge, MINIMUM_EDGE_SEPARATION } from "./edge";
+import { GNode, MINIMUM_EDGE_SEPARATION } from "./node";
+import { Edge } from "./edge";
 
 export class Graph {
   nodeMap: Array<GNode>;

tools/turbolizer/src/node.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import { MINIMUM_EDGE_SEPARATION, Edge } from "../src/edge";
+import { Edge } from "../src/edge";
 import { NodeLabel } from "./node-label";
 import { MAX_RANK_SENTINEL } from "./constants";
 import { alignUp, measureText } from "./util";
@@ -10,6 +10,7 @@ import { alignUp, measureText } from "./util";
 export const DEFAULT_NODE_BUBBLE_RADIUS = 12;
 export const NODE_INPUT_WIDTH = 50;
 export const MINIMUM_NODE_OUTPUT_APPROACH = 15;
+export const MINIMUM_EDGE_SEPARATION = 20;
 const MINIMUM_NODE_INPUT_APPROACH = 15 + 2 * DEFAULT_NODE_BUBBLE_RADIUS;
 
 export class GNode {