[turbolizer] Migrate d3 from v3 to v5

This CL updates the d3.js library to version 5.4. The most notable
change is that the library can now distinguish between click and drag
events if an element supports both selection via click and displacement
via drag.

Curiously, npm created a 'package-lock.json', which is ~500 lines, and
which is supposed to be checked into the repository according to documentation.

Change-Id: Ifabd236296d951f390e0a1516d89e73138ce1713
Reviewed-on: https://chromium-review.googlesource.com/1076234Reviewed-by: Tobias Tebbi <tebbi@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Cr-Commit-Position: refs/heads/master@{#53604}

tools/turbolizer/index.html

@@ -58,7 +58,7 @@
              src="right-arrow.png" class="button-input">
     </div>
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>
     <script src="build/turbolizer.js"></script>
   </body>
 </html>

tools/turbolizer/package.json

@@ -4,18 +4,20 @@
   "description": "Visualization tool for V8 TurboFan IR graphs",
   "main": "index.html",
   "scripts": {
-    "build": "tsc; echo Done. Note that typescript errors are currently ignored."
+    "build": "tsc",
+    "watch": "tsc --watch"
   },
   "author": "The V8 team",
   "license": "MIT",
   "dependencies": {
-    "@types/d3": "^3.5.40"
+    "@types/d3": "^5.0.0",
+    "d3": "^5.4.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/v8/v8.git"
   },
   "devDependencies": {
-    "typescript": "^2.8.3"
+    "typescript": "^2.9.1"
   }
 }

tools/turbolizer/src/edge.ts

@@ -87,4 +87,6 @@ class Edge {
     return this.target.hasBackEdges() && (this.target.rank < this.source.rank);
   }
 
-}
\ No newline at end of file
+}
+
+const edgeToStr = (e:Edge) => e.stringID();

tools/turbolizer/src/graph-layout.ts

@@ -456,7 +456,6 @@ function layoutNodeGraph(graph) {
   });
 
   redetermineGraphBoundingBox(graph);
-
 }
 
 function redetermineGraphBoundingBox(graph) {
@@ -489,4 +488,15 @@ function redetermineGraphBoundingBox(graph) {
 
   graph.maxGraphX = graph.maxGraphNodeX +
     graph.maxBackEdgeNumber * MINIMUM_EDGE_SEPARATION;
+
+  const width = (graph.maxGraphX - graph.minGraphX);
+  const height = graph.maxGraphY - graph.minGraphY;
+  graph.width = width;
+  graph.height = height;
+
+  const extent = [
+    [graph.minGraphX-width/2, graph.minGraphY-height/2],
+    [graph.maxGraphX+width/2, graph.maxGraphY+height/2]
+  ];
+  graph.panZoom.translateExtent(extent);
 }

tools/turbolizer/src/graphmultiview.ts

@@ -23,19 +23,15 @@ class GraphMultiView extends View {
     const view = this;
     view.sourceResolver = sourceResolver;
     view.selectionBroker = selectionBroker;
+    const searchInput = document.getElementById("search-input");
+    searchInput.addEventListener("keyup", e => {
+      if (!view.currentPhaseView) return;
+      view.currentPhaseView.searchInputAction(this.currentPhaseView, searchInput, e)
+    });
+    searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || "");
     this.graph = new GraphView(id, selectionBroker,
       (phaseName) => view.displayPhaseByName(phaseName));
     this.schedule = new ScheduleView(id, selectionBroker);
-
-
-    function handleSearch(e) {
-      if (this.currentPhaseView) {
-        this.currentPhaseView.searchInputAction(this.currentPhaseView, this, e)
-      }
-    }
-    const searchInput = document.getElementById("search-input");
-    searchInput.addEventListener("keyup", handleSearch);
-    searchInput.setAttribute("value", window.sessionStorage.getItem("lastSearch") || "");
     this.selectMenu = (<HTMLSelectElement>document.getElementById('display-selector'));
   }
 

tools/turbolizer/src/monkey.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-Math.alignUp = function(raw, multiple) {
-  return Math.floor((raw + multiple - 1) / multiple) * multiple;
-}
+const MoreMath = {
+  alignUp: (raw, multiple) => {
+    return Math.floor((raw + multiple - 1) / multiple) * multiple;
+  }
+};

tools/turbolizer/src/node.ts

@@ -31,6 +31,7 @@ class GNode {
   visible: boolean;
   rank: number;
   opinfo: string;
+  labelbbox: {width: number, height: number};
 
   isControl() {
     return this.control;
@@ -165,3 +166,5 @@ class GNode {
         this.inputs[this.inputs.length - 1].source.opcode == "Loop");
   }
 };
+
+const nodeToStr = (n:GNode) => "N" + n.id;

tools/turbolizer/src/source-resolver.ts

@@ -44,7 +44,11 @@ interface Phase {
 
 interface Schedule {}
 
-interface NodeOrigin {}
+interface NodeOrigin {
+  nodeId: number;
+  phase: string;
+  reducer: string;
+}
 
 class SourceResolver {
   nodePositionMap: Array<SourcePosition>;

tools/turbolizer/src/turbo-visualizer.ts

@@ -103,8 +103,8 @@ class Resizer {
   sep_right_snap: number;
   sep_width_offset: number;
   panes_updated_callback: () => void;
-  resizer_right: d3.Selection<any>;
-  resizer_left: d3.Selection<any>;
+  resizer_right: d3.Selection<HTMLDivElement, any, any, any>;
+  resizer_left: d3.Selection<HTMLDivElement, any, any, any>;
 
   constructor(panes_updated_callback: () => void, dead_width: number) {
     let resizer = this;
@@ -124,38 +124,38 @@ class Resizer {
     // Offset to prevent resizers from sliding slightly over one another.
     resizer.sep_width_offset = 7;
 
-    let dragResizeLeft = d3.behavior.drag()
+    let dragResizeLeft = d3.drag()
       .on('drag', function () {
         let x = d3.mouse(this.parentElement)[0];
         resizer.sep_left = Math.min(Math.max(0, x), resizer.sep_right - resizer.sep_width_offset);
         resizer.updatePanes();
       })
-      .on('dragstart', function () {
+      .on('start', function () {
         resizer.resizer_left.classed("dragged", true);
         let x = d3.mouse(this.parentElement)[0];
         if (x > dead_width) {
           resizer.sep_left_snap = resizer.sep_left;
         }
       })
-      .on('dragend', function () {
+      .on('end', function () {
         resizer.resizer_left.classed("dragged", false);
       });
     resizer.resizer_left.call(dragResizeLeft);
 
-    let dragResizeRight = d3.behavior.drag()
+    let dragResizeRight = d3.drag()
       .on('drag', function () {
         let x = d3.mouse(this.parentElement)[0];
         resizer.sep_right = Math.max(resizer.sep_left + resizer.sep_width_offset, Math.min(x, resizer.client_width));
         resizer.updatePanes();
       })
-      .on('dragstart', function () {
+      .on('start', function () {
         resizer.resizer_right.classed("dragged", true);
         let x = d3.mouse(this.parentElement)[0];
         if (x < (resizer.client_width - dead_width)) {
           resizer.sep_right_snap = resizer.sep_right;
         }
       })
-      .on('dragend', function () {
+      .on('end', function () {
         resizer.resizer_right.classed("dragged", false);
       });;
     resizer.resizer_right.call(dragResizeRight);
@@ -269,7 +269,7 @@ window.onload = function () {
     // button #upload.
     d3.select("#upload").on("click",
       () => document.getElementById("upload-helper").click());
-    d3.select("#upload-helper").on("change", function () {
+    d3.select("#upload-helper").on("change", function (this: HTMLInputElement) {
       var uploadFile = this.files && this.files[0];
       var filereader = new FileReader();
       filereader.onload = function (e) {

tools/turbolizer/tsconfig.json

@@ -2,7 +2,8 @@
     "compilerOptions": {
         "outFile": "build/turbolizer.js",
         "allowJs": true,
-        "target": "es2017"
+        "target": "es2017",
+        "sourceMap": true
     },
     "files": [
         "src/monkey.ts",