[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/1076234
Reviewed-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-lock.json

@@ -5,14 +5,529 @@
   "requires": true,
   "dependencies": {
     "@types/d3": {
-      "version": "3.5.40",
+      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-3.5.40.tgz",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.0.0.tgz",
-      "integrity": "sha512-GrJeI6Yg6uCIYRtWlMGxDtgsKSs2aMW0edrO/GJk+O7y4iayn8lEoHAn50wkjb9voRq9JimhCN/FIXLzAxkCoA=="
+      "integrity": "sha512-BVfPw7ha+UgsG24v6ymerMY4+pJgQ/6p+hJA4loCeaaqV9snGS/G6ReVaQEn8Himn67dWn/Je9WhRbnDO7MzLw==",
+      "requires": {
+        "@types/d3-array": "1.2.1",
+        "@types/d3-axis": "1.0.10",
+        "@types/d3-brush": "1.0.8",
+        "@types/d3-chord": "1.0.7",
+        "@types/d3-collection": "1.0.7",
+        "@types/d3-color": "1.2.1",
+        "@types/d3-contour": "1.2.1",
+        "@types/d3-dispatch": "1.0.6",
+        "@types/d3-drag": "1.2.1",
+        "@types/d3-dsv": "1.0.33",
+        "@types/d3-ease": "1.0.7",
+        "@types/d3-fetch": "1.1.2",
+        "@types/d3-force": "1.1.1",
+        "@types/d3-format": "1.3.0",
+        "@types/d3-geo": "1.10.3",
+        "@types/d3-hierarchy": "1.1.2",
+        "@types/d3-interpolate": "1.2.0",
+        "@types/d3-path": "1.0.7",
+        "@types/d3-polygon": "1.0.6",
+        "@types/d3-quadtree": "1.0.5",
+        "@types/d3-random": "1.1.1",
+        "@types/d3-scale": "2.0.1",
+        "@types/d3-scale-chromatic": "1.2.0",
+        "@types/d3-selection": "1.3.1",
+        "@types/d3-shape": "1.2.3",
+        "@types/d3-time": "1.0.8",
+        "@types/d3-time-format": "2.1.0",
+        "@types/d3-timer": "1.0.7",
+        "@types/d3-transition": "1.1.1",
+        "@types/d3-voronoi": "1.1.7",
+        "@types/d3-zoom": "1.7.1"
+      }
+    },
+    "@types/d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-YBaAfimGdWE4nDuoGVKsH89/dkz2hWZ0i8qC+xxqmqi+XJ/aXiRF0jPtzXmN7VdkpVjy1xuDmM5/m1FNuB6VWA=="
+    },
+    "@types/d3-axis": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.10.tgz",
+      "integrity": "sha512-5YF0wfdQMPKw01VAAupLIlg/T4pn5M3/vL9u0KZjiemnVnnKBEWE24na4X1iW+TfZiYJ8j+BgK2KFYnAAT54Ug==",
+      "requires": {
+        "@types/d3-selection": "1.3.1"
+      }
+    },
+    "@types/d3-brush": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.0.8.tgz",
+      "integrity": "sha512-9Thv09jvolu9T1BE3fHmIeYSgbwSpdxtF6/A5HZEDjSTfgtA0mtaXRk5AiWOo0KjuLsI+/7ggD3ZGN5Ye8KXPQ==",
+      "requires": {
+        "@types/d3-selection": "1.3.1"
+      }
+    },
+    "@types/d3-chord": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.7.tgz",
+      "integrity": "sha512-WbCN7SxhZMpQQw46oSjAovAmvl3IdjhLuQ4r7AXCzNKyxtXXBWuihSPZ4bVwFQF3+S2z37i9d4hfUBatcSJpog=="
+    },
+    "@types/d3-collection": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.7.tgz",
+      "integrity": "sha512-vR3BT0GwHc5y93Jv6bxn3zoxP/vGu+GdXu/r1ApjbP9dLk9I2g6NiV7iP/QMQSuFZd0It0n/qWrfXHxCWwHIkg=="
+    },
+    "@types/d3-color": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.1.tgz",
+      "integrity": "sha512-xwb1tqvYNWllbHuhMFhiXk63Imf+QNq/dJdmbXmr2wQVnwGenCuj3/0IWJ9hdIFQIqzvhT7T37cvx93jtAsDbQ=="
+    },
+    "@types/d3-contour": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-1.2.1.tgz",
+      "integrity": "sha512-p8iC4KeVFyT3qRTGQRj0Jf5QDdPsDUevBEnma7gEsY1yDolVSLanG2eFAiLV+xj8/5DK7oU7Ey8z0drs3pbsug==",
+      "requires": {
+        "@types/d3-array": "1.2.1",
+        "@types/geojson": "7946.0.3"
+      }
+    },
+    "@types/d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-xyWJQMr832vqhu6fD/YqX+MSFBWnkxasNhcStvlhqygXxj0cKqPft0wuGoH5TIq5ADXgP83qeNVa4R7bEYN3uA=="
+    },
+    "@types/d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.1.tgz",
+      "integrity": "sha512-J9liJ4NNeV0oN40MzPiqwWjqNi3YHCRtHNfNMZ1d3uL9yh1+vDuo346LBEr8yyBm30WHvrHssAkExVZrGCswtA==",
+      "requires": {
+        "@types/d3-selection": "1.3.1"
+      }
+    },
+    "@types/d3-dsv": {
+      "version": "1.0.33",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.33.tgz",
+      "integrity": "sha512-jx5YvaVC3Wfh6LobaiWTeU1NkvL2wPmmpmajk618bD+xVz98yNWzmZMvmlPHGK0HXbMeHmW/6oVX48V9AH1bRQ=="
+    },
+    "@types/d3-ease": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.7.tgz",
+      "integrity": "sha1-k6MBhovp4VBh89RDQ7GrP4rLbwk="
+    },
+    "@types/d3-fetch": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-1.1.2.tgz",
+      "integrity": "sha512-w6ANZv/mUh+6IV3drT22zgPWMRobzuGXhzOZC8JPD+ygce0/Vx6vTci3m3dizkocnQQCOwNbrWWWPYqpWiKzRQ==",
+      "requires": {
+        "@types/d3-dsv": "1.0.33"
+      }
+    },
+    "@types/d3-force": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.1.1.tgz",
+      "integrity": "sha512-ePkELuaFWY4yOuf+Bvx5Xd+ihFiYG4bdnW0BlvigovIm8Sob2t76e9RGO6lybQbv6AlW9Icn9HuZ9fmdzEoJyg=="
+    },
+    "@types/d3-format": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.0.tgz",
+      "integrity": "sha512-ZiY4j3iJvAdOwzwW24WjlZbUNvqOsnPAMfPBmdXqxj3uKJbrzBlRrdGl5uC89pZpFs9Dc92E81KcwG2uEgkIZA=="
+    },
+    "@types/d3-geo": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.10.3.tgz",
+      "integrity": "sha512-hfdaxM2L0wA9mDZrrSf2o+DyhEpnJYCiAN+lHFtpfZOVCQrYBA5g33sGRpUbAvjSMyO5jkHbftMWPEhuCMChSg==",
+      "requires": {
+        "@types/geojson": "7946.0.3"
+      }
+    },
+    "@types/d3-hierarchy": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.2.tgz",
+      "integrity": "sha512-L+Ht4doqlCIH8jYN2AC1mYIOj13OxlRhdWNWXv2pc3o5A9i3YmQ0kz6A7w8c+Ujylfusi/FO+zVlVnQoOHc2Qw=="
+    },
+    "@types/d3-interpolate": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
+      "integrity": "sha512-qM9KlUrqbwIhBRtw9OtAEbkis1AxsOJEun2uxaX/vEsBp3vyNBmhPz9boXXEqic9ZRi7fCpUNRwyZvxa0PioIw==",
+      "requires": {
+        "@types/d3-color": "1.2.1"
+      }
+    },
+    "@types/d3-path": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.7.tgz",
+      "integrity": "sha512-U8dFRG+8WhkLJr2sxZ9Cw/5WeRgBnNqMxGdA1+Z0+ZG6tK0s75OQ4OXnxeyfKuh6E4wQPY8OAKr1+iNDx01BEQ=="
+    },
+    "@types/d3-polygon": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.6.tgz",
+      "integrity": "sha512-E6Kyodn9JThgLq20nxSbEce9ow5/ePgm9PX2EO6W1INIL4DayM7cFaiG10DStuamjYAd0X4rntW2q+GRjiIktw=="
+    },
+    "@types/d3-quadtree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.5.tgz",
+      "integrity": "sha1-HOHmWerkUw3wyxJ/KX8XQaNnqC4="
+    },
+    "@types/d3-random": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.1.tgz",
+      "integrity": "sha512-jUPeBq1XKK9/5XasTvy5QAUwFeMsjma2yt/nP02yC2Tijovx7i/W5776U/HZugxc5SSmtpx4Z3g9KFVon0QrjQ=="
+    },
+    "@types/d3-scale": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-2.0.1.tgz",
+      "integrity": "sha512-D5ZWv8ToLvqacE7XkdMNHMiiVDULdDxT7FMMGU0YJC3/nVzBmApjyTyxracUWOQyY3KK7YhZ05on8pOcNi0dfQ==",
+      "requires": {
+        "@types/d3-time": "1.0.8"
+      }
+    },
+    "@types/d3-scale-chromatic": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz",
+      "integrity": "sha512-bhS2SVzUzRtrxp1REhGCfHmj8pyDv9oDmsonYiPvBl8KCxPJTxnfXBF39PzAJrYnRKM41TR0kQzsJvL+NmcDtg=="
+    },
+    "@types/d3-selection": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.3.1.tgz",
+      "integrity": "sha512-G+eO+2G1iW3GNrROxhoU+ar+bIJbQq1QkxcfhwjQ19xA20n3T31j5pSJqAOWvPSoFTz4Ets/DQgYhmgT4jepDg=="
+    },
+    "@types/d3-shape": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.2.3.tgz",
+      "integrity": "sha512-iP9TcX0EVi+LlX+jK9ceS+yhEz5abTitF+JaO2ugpRE/J+bccaYLe/0/3LETMmdaEkYarIyboZW8OF67Mpnj1w==",
+      "requires": {
+        "@types/d3-path": "1.0.7"
+      }
+    },
+    "@types/d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.8.tgz",
+      "integrity": "sha512-/UCphyyw97YAq4zKsuXH33R3UNB4jDSza0fLvMubWr/ONh9IePi1NbgFP222blhiCe724ebJs8U87+aDuAq/jA=="
+    },
+    "@types/d3-time-format": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
+      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA=="
+    },
+    "@types/d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.7.tgz",
+      "integrity": "sha512-830pT+aYZrgbA91AuynP3KldfB1A1s60d0gKiV+L7JcSKSJapUzUffAm8VZod7RQOxF5SzoItV6cvrTzjbmrJQ=="
+    },
+    "@types/d3-transition": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.1.tgz",
+      "integrity": "sha512-GHTghl0YYB8gGgbyKxVLHyAp9Na0HqsX2U7M0u0lGw4IdfEaslooykweZ8fDHW13T+KZeZAuzhbmqBZVFO+6kg==",
+      "requires": {
+        "@types/d3-selection": "1.3.1"
+      }
+    },
+    "@types/d3-voronoi": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.7.tgz",
+      "integrity": "sha512-/dHFLK5jhXTb/W4XEQcFydVk8qlIAo85G3r7+N2fkBFw190l0R1GQ8C1VPeXBb2GfSU5GbT2hjlnE7i7UY5Gvg=="
+    },
+    "@types/d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.1.tgz",
+      "integrity": "sha512-Ofjwz6Pt53tRef9TAwwayN+JThNVYC/vFOepa/H4KtwjhsqkmEseHvc2jpJM7vye5PQ5XHtTSOpdY4Y/6xZWEg==",
+      "requires": {
+        "@types/d3-interpolate": "1.2.0",
+        "@types/d3-selection": "1.3.1"
+      }
+    },
+    "@types/geojson": {
+      "version": "7946.0.3",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz",
+      "integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug=="
+    },
+    "commander": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+      "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
+    },
+    "d3": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.4.0.tgz",
+      "integrity": "sha1-CQGZqFadHeI9BKP/B/4TYJX+p04=",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-axis": "1.0.8",
+        "d3-brush": "1.0.4",
+        "d3-chord": "1.0.4",
+        "d3-collection": "1.0.4",
+        "d3-color": "1.2.0",
+        "d3-contour": "1.2.0",
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-dsv": "1.0.8",
+        "d3-ease": "1.0.3",
+        "d3-fetch": "1.1.0",
+        "d3-force": "1.1.0",
+        "d3-format": "1.3.0",
+        "d3-geo": "1.10.0",
+        "d3-hierarchy": "1.1.6",
+        "d3-interpolate": "1.2.0",
+        "d3-path": "1.0.5",
+        "d3-polygon": "1.0.3",
+        "d3-quadtree": "1.0.3",
+        "d3-random": "1.1.0",
+        "d3-scale": "2.0.0",
+        "d3-scale-chromatic": "1.3.0",
+        "d3-selection": "1.3.0",
+        "d3-shape": "1.2.0",
+        "d3-time": "1.0.8",
+        "d3-time-format": "2.1.1",
+        "d3-timer": "1.0.7",
+        "d3-transition": "1.1.1",
+        "d3-voronoi": "1.1.2",
+        "d3-zoom": "1.7.1"
+      }
+    },
+    "d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+      "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+    },
+    "d3-axis": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz",
+      "integrity": "sha1-MacFoLU15ldZ3hQXOjGTMTfxjvo="
+    },
+    "d3-brush": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz",
+      "integrity": "sha1-AMLyOAGfJPbAoZSibUGhUw/+e8Q=",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-interpolate": "1.2.0",
+        "d3-selection": "1.3.0",
+        "d3-transition": "1.1.1"
+      }
+    },
+    "d3-chord": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz",
+      "integrity": "sha1-fexPC6iG9xP+ERxF92NBT290yiw=",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-path": "1.0.5"
+      }
+    },
+    "d3-collection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz",
+      "integrity": "sha1-NC39EoN8kJdPM/HMCnha6lcNzcI="
+    },
+    "d3-color": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.0.tgz",
+      "integrity": "sha512-dmL9Zr/v39aSSMnLOTd58in2RbregCg4UtGyUArvEKTTN6S3HKEy+ziBWVYo9PTzRyVW+pUBHUtRKz0HYX+SQg=="
+    },
+    "d3-contour": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-1.2.0.tgz",
+      "integrity": "sha512-nDzZ2KDnrgTrhMjV8TH0RNrljk6uPNAGkG/v/1SKNVvJa2JU8szjh7o2ZYTX8yufA2oCI5HyeMqbzwiB+oDoIA==",
+      "requires": {
+        "d3-array": "1.2.1"
+      }
+    },
+    "d3-dispatch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz",
+      "integrity": "sha1-RuFJHqqbWMNY/OW+TovtYm54cfg="
+    },
+    "d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz",
+      "integrity": "sha512-Cg8/K2rTtzxzrb0fmnYOUeZHvwa4PHzwXOLZZPwtEs2SKLLKLXeYwZKBB+DlOxUvFmarOnmt//cU4+3US2lyyQ==",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-selection": "1.3.0"
+      }
+    },
+    "d3-dsv": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz",
+      "integrity": "sha512-IVCJpQ+YGe3qu6odkPQI0KPqfxkhbP/oM1XhhE/DFiYmcXKfCRub4KXyiuehV1d4drjWVXHUWx4gHqhdZb6n/A==",
+      "requires": {
+        "commander": "2.15.1",
+        "iconv-lite": "0.4.23",
+        "rw": "1.3.3"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz",
+      "integrity": "sha1-aL+8NJM4o4DETYrMT7wzBKotjA4="
+    },
+    "d3-fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-1.1.0.tgz",
+      "integrity": "sha512-j+V4vtT6dceQbcKYLtpTueB8Zvc+wb9I93WaFtEQIYNADXl0c1ZJMN3qQo0CssiTsAqK8pePwc7f4qiW+b0WOg==",
+      "requires": {
+        "d3-dsv": "1.0.8"
+      }
+    },
+    "d3-force": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz",
+      "integrity": "sha512-2HVQz3/VCQs0QeRNZTYb7GxoUCeb6bOzMp/cGcLa87awY9ZsPvXOGeZm0iaGBjXic6I1ysKwMn+g+5jSAdzwcg==",
+      "requires": {
+        "d3-collection": "1.0.4",
+        "d3-dispatch": "1.0.3",
+        "d3-quadtree": "1.0.3",
+        "d3-timer": "1.0.7"
+      }
+    },
+    "d3-format": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz",
+      "integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg=="
+    },
+    "d3-geo": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.10.0.tgz",
+      "integrity": "sha512-VK/buVGgexthTTqGRNXQ/LSo3EbOFu4p2Pjud5drSIaEnOaF2moc8A3P7WEljEO1JEBEwbpAJjFWMuJiUtoBcw==",
+      "requires": {
+        "d3-array": "1.2.1"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.6.tgz",
+      "integrity": "sha512-nn4bhBnwWnMSoZgkBXD7vRyZ0xVUsNMQRKytWYHhP1I4qHw+qzApCTgSQTZqMdf4XXZbTMqA59hFusga+THA/g=="
+    },
+    "d3-interpolate": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.2.0.tgz",
+      "integrity": "sha512-zLvTk8CREPFfc/2XglPQriAsXkzoRDAyBzndtKJWrZmHw7kmOWHNS11e40kPTd/oGk8P5mFJW5uBbcFQ+ybxyA==",
+      "requires": {
+        "d3-color": "1.2.0"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz",
+      "integrity": "sha1-JB6xhJvZ6egCHA0KeZ+KDo5EF2Q="
+    },
+    "d3-polygon": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz",
+      "integrity": "sha1-FoiOkCZGCTPysXllKtN4Ik04LGI="
+    },
+    "d3-quadtree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz",
+      "integrity": "sha1-rHmH4+I/6AWpkPKOG1DTj8uCJDg="
+    },
+    "d3-random": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz",
+      "integrity": "sha1-ZkLlBsb6OmSFldKyRpeIqNElKdM="
+    },
+    "d3-scale": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
+      "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
+      "requires": {
+        "d3-array": "1.2.1",
+        "d3-collection": "1.0.4",
+        "d3-format": "1.3.0",
+        "d3-interpolate": "1.2.0",
+        "d3-time": "1.0.8",
+        "d3-time-format": "2.1.1"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.3.0.tgz",
+      "integrity": "sha512-YwMbiaW2bStWvQFByK8hA6hk7ToWflspIo2TRukCqERd8isiafEMBXmwfh8c7/0Z94mVvIzIveRLVC6RAjhgeA==",
+      "requires": {
+        "d3-color": "1.2.0",
+        "d3-interpolate": "1.2.0"
+      }
+    },
+    "d3-selection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",
+      "integrity": "sha512-qgpUOg9tl5CirdqESUAu0t9MU/t3O9klYfGfyKsXEmhyxyzLpzpeh08gaxBUTQw1uXIOkr/30Ut2YRjSSxlmHA=="
+    },
+    "d3-shape": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz",
+      "integrity": "sha1-RdAVOPBkuv0F6j1tLLdI/YxB93c=",
+      "requires": {
+        "d3-path": "1.0.5"
+      }
+    },
+    "d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
+      "integrity": "sha512-YRZkNhphZh3KcnBfitvF3c6E0JOFGikHZ4YqD+Lzv83ZHn1/u6yGenRU1m+KAk9J1GnZMnKcrtfvSktlA1DXNQ=="
+    },
+    "d3-time-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz",
+      "integrity": "sha512-8kAkymq2WMfzW7e+s/IUNAtN/y3gZXGRrdGfo6R8NKPAA85UBTxZg5E61bR6nLwjPjj4d3zywSQe1CkYLPFyrw==",
+      "requires": {
+        "d3-time": "1.0.8"
+      }
+    },
+    "d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz",
+      "integrity": "sha512-vMZXR88XujmG/L5oB96NNKH5lCWwiLM/S2HyyAQLcjWJCloK5shxta4CwOFYLZoY3AWX73v8Lgv4cCAdWtRmOA=="
+    },
+    "d3-transition": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz",
+      "integrity": "sha512-xeg8oggyQ+y5eb4J13iDgKIjUcEfIOZs2BqV/eEmXm2twx80wTzJ4tB4vaZ5BKfz7XsI/DFmQL5me6O27/5ykQ==",
+      "requires": {
+        "d3-color": "1.2.0",
+        "d3-dispatch": "1.0.3",
+        "d3-ease": "1.0.3",
+        "d3-interpolate": "1.2.0",
+        "d3-selection": "1.3.0",
+        "d3-timer": "1.0.7"
+      }
+    },
+    "d3-voronoi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz",
+      "integrity": "sha1-Fodmfo8TotFYyAwUgMWinLDYlzw="
+    },
+    "d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz",
+      "integrity": "sha512-sZHQ55DGq5BZBFGnRshUT8tm2sfhPHFnOlmPbbwTkAoPeVdRTkB4Xsf9GCY0TSHrTD8PeJPZGmP/TpGicwJDJQ==",
+      "requires": {
+        "d3-dispatch": "1.0.3",
+        "d3-drag": "1.2.1",
+        "d3-interpolate": "1.2.0",
+        "d3-selection": "1.3.0",
+        "d3-transition": "1.1.1"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+      "requires": {
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "typescript": {
-      "version": "2.8.3",
+      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.3.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
-      "integrity": "sha512-K7g15Bb6Ra4lKf7Iq2l/I5/En+hLIHmxWZGq3D4DIRNFxMNV6j2SHSvDOqs2tGd4UvD/fJvrwopzQXjLrT7Itw==",
+      "integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
       "dev": true
     }
   }

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);
   }
 
-}
+}
+
+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/graph-view.ts

@@ -19,25 +19,27 @@ interface GraphState {
 }
 
 class GraphView extends View {
-  divElement: d3.Selection<any>;
+  divElement: d3.Selection<any, any, any, any>;
-  svg: d3.Selection<any>;
+  svg: d3.Selection<any, any, any, any>;
   showPhaseByName: (string) => void;
   state: GraphState;
   nodes: Array<GNode>;
   edges: Array<any>;
   selectionHandler: NodeSelectionHandler;
-  graphElement: d3.Selection<any>;
+  graphElement: d3.Selection<any, any, any, any>;
-  visibleNodes: d3.Selection<GNode>;
+  visibleNodes: d3.Selection<any, GNode, any, any>;
-  visibleEdges: d3.Selection<Edge>;
+  visibleEdges: d3.Selection<any, Edge, any, any>;
   minGraphX: number;
   maxGraphX: number;
   minGraphY: number;
   maxGraphY: number;
+  width: number;
+  height: number;
   maxGraphNodeX: number;
-  drag: d3.behavior.Drag<{}>;
+  drag: d3.DragBehavior<any, GNode, GNode>;
-  dragSvg: d3.behavior.Zoom<{}>;
+  panZoom: d3.ZoomBehavior<SVGElement, any>;
   nodeMap: Array<any>;
-  visibleBubbles: d3.Selection<any>;
+  visibleBubbles: d3.Selection<any, any, any, any>;
   transitionTimout: number;
 
   createViewElement() {
@@ -54,7 +56,9 @@ class GraphView extends View {
     const svg = this.divElement.append("svg").attr('version', '1.1')
       .attr("width", "100%")
       .attr("height", "100%");
-    svg.on("mouseup", function (d) { graph.svgMouseUp.call(graph, d); });
+    svg.on("click", function (d) {
+      graph.selectionHandler.clear();
+    });
     graph.svg = svg;
 
     graph.nodes = [];
@@ -133,14 +137,13 @@ class GraphView extends View {
     graph.visibleEdges = this.graphElement.append("g");
     graph.visibleNodes = this.graphElement.append("g");
 
-    graph.drag = d3.behavior.drag<GNode>()
+    graph.drag = d3.drag<any, GNode, GNode>()
-      .origin(function (d) {
+      .on("drag", function (d) {
-        return { x: d.x, y: d.y };
+        d.x += d3.event.dx;
-      })
+        d.y += d3.event.dy;
-      .on("drag", function (args) {
+        graph.updateGraphVisibility();
-        graph.state.justDragged = true;
+      });
-        graph.dragmove.call(graph, args);
+
-      })
 
     d3.select("#layout").on("click", partial(this.layoutAction, graph));
     d3.select("#show-all").on("click", partial(this.showAllAction, graph));
@@ -153,30 +156,33 @@ class GraphView extends View {
     // listen for key events
     d3.select(window).on("keydown", function (e) {
       graph.svgKeyDown.call(graph);
-    })
+    }).on("keyup", function () {
-      .on("keyup", function () {
+      graph.svgKeyUp.call(graph);
-        graph.svgKeyUp.call(graph);
+    });
-      });
 
-    graph.dragSvg = d3.behavior.zoom()
+    function zoomed() {
-      .on("zoom", function () {
+      if (d3.event.shiftKey) return false;
-        if (d3.event.sourceEvent.shiftKey) {
+      graph.graphElement.attr("transform", d3.event.transform);
-          return false;
+    }
-        } else {
+
-          graph.zoomed.call(graph);
+    const zoomSvg = d3.zoom<SVGElement, any>()
-        }
+      .scaleExtent([0.2, 40])
-        return true;
+      .on("zoom", zoomed)
+      .on("start", function () {
+        if (d3.event.shiftKey) return;
+        d3.select('body').style("cursor", "move");
       })
-      .on("zoomstart", function () {
+      .on("end", function () {
-        if (!d3.event.sourceEvent.shiftKey) d3.select('body').style("cursor", "move");
-      })
-      .on("zoomend", function () {
         d3.select('body').style("cursor", "auto");
       });
 
-    svg.call(graph.dragSvg).on("dblclick.zoom", null);
+    svg.call(zoomSvg).on("dblclick.zoom", null);
+
+    graph.panZoom = zoomSvg;
+
   }
 
+
   static get selectedClass() {
     return "selected";
   }
@@ -190,7 +196,7 @@ class GraphView extends View {
     return 50;
   }
 
-  getNodeHeight(d) {
+  getNodeHeight(d): number {
     if (this.state.showTypes) {
       return d.normalheight + d.labelbbox.height;
     } else {
@@ -242,22 +248,15 @@ class GraphView extends View {
     }
   }
 
-  dragmove(d) {
-    var graph = this;
-    d.x += d3.event.dx;
-    d.y += d3.event.dy;
-    graph.updateGraphVisibility();
-  }
-
   initializeContent(data, rememberedSelection) {
     this.createGraph(data, rememberedSelection);
     if (rememberedSelection != null) {
       this.attachSelection(rememberedSelection);
       this.connectVisibleSelectedNodes();
       this.viewSelection();
+    } else {
+      this.viewWholeGraph();
     }
-    this.updateGraphVisibility();
-    this.fitGraphViewToWindow();
   }
 
   deleteContent() {
@@ -302,7 +301,7 @@ class GraphView extends View {
       n.labelbbox = g.measureText(n.displayLabel);
       n.typebbox = g.measureText(n.getDisplayType());
       var innerwidth = Math.max(n.labelbbox.width, n.typebbox.width);
-      n.width = Math.alignUp(innerwidth + NODE_INPUT_WIDTH * 2,
+      n.width = MoreMath.alignUp(innerwidth + NODE_INPUT_WIDTH * 2,
         NODE_INPUT_WIDTH);
       var innerheight = Math.max(n.labelbbox.height, n.typebbox.height);
       n.normalheight = innerheight + 20;
@@ -328,7 +327,6 @@ class GraphView extends View {
         }
       }
     });
-    g.fitGraphViewToWindow();
     g.updateGraphVisibility();
     g.layoutGraph();
     g.updateGraphVisibility();
@@ -404,41 +402,6 @@ class GraphView extends View {
     return this.state.selection.detachSelection();
   }
 
-  pathMouseUp(path, d) {
-    d3.event.stopPropagation();
-    const edge = path.datum();
-    if (!d3.event.shiftKey) {
-      this.selectionHandler.clear();
-    }
-    this.selectionHandler.select([edge.source, edge.target], true);
-    return false;
-  };
-
-  nodeMouseDown(node, d) {
-    d3.event.stopPropagation();
-    this.state.mouseDownNode = d;
-  }
-
-  nodeMouseUp(d3node, d) {
-    let graph = this;
-    let state = graph.state;
-
-    if (!state.mouseDownNode) return;
-
-    if (state.justDragged) {
-      // dragged, not clicked
-      redetermineGraphBoundingBox(graph);
-      state.justDragged = false;
-    } else {
-      // clicked, not dragged
-      var extend = d3.event.shiftKey;
-      if (!extend) {
-        graph.selectionHandler.clear();
-      }
-      graph.selectionHandler.select([d3node.datum()], undefined);
-    }
-  }
-
   selectAllNodes() {
     var graph = this;
     if (!d3.event.shiftKey) {
@@ -511,7 +474,7 @@ class GraphView extends View {
     graph.toggleTypes();
   }
 
-  searchInputAction(graph, searchBar, e:KeyboardEvent) {
+  searchInputAction(graph, searchBar, e: KeyboardEvent) {
     if (e.keyCode == 13) {
       graph.selectionHandler.clear();
       var query = searchBar.value;
@@ -544,21 +507,6 @@ class GraphView extends View {
     e.stopPropagation();
   }
 
-  svgMouseUp() {
-    const graph = this;
-    const state = graph.state;
-    if (state.justScaleTransGraph) {
-      // Dragged
-      state.justScaleTransGraph = false;
-    } else {
-      // Clicked
-      if (state.mouseDownNode == null && !d3.event.shiftKey) {
-        graph.selectionHandler.clear();
-      }
-    }
-    state.mouseDownNode = null;
-  }
-
   svgKeyDown() {
     var state = this.state;
     var graph = this;
@@ -620,8 +568,8 @@ class GraphView extends View {
       case 69:
         // 'e'
         showSelectionFrontierNodes(d3.event.altKey,
-            (edge, index) => { return edge.type == 'effect'; },
+          (edge, index) => { return edge.type == 'effect'; },
-            true);
+          true);
         break;
       case 79:
         // 'o'
@@ -656,7 +604,6 @@ class GraphView extends View {
       case 191:
         // '/'
         document.getElementById("search-input").focus();
-        document.getElementById("search-input").select();
         break;
       default:
         eventHandled = false;
@@ -706,9 +653,7 @@ class GraphView extends View {
     var filteredEdges = graph.edges.filter(function (e) {
       return e.isVisible();
     });
-    const selEdges = graph.visibleEdges.selectAll("path").data(filteredEdges, function (edge) {
+    const selEdges = graph.visibleEdges.selectAll<SVGPathElement, Edge>("path").data(filteredEdges, edgeToStr);
-      return edge.stringID();
-    });
 
     // remove old links
     selEdges.exit().remove();
@@ -721,8 +666,12 @@ class GraphView extends View {
         return !e.isVisible();
       })
       .attr("id", function (edge) { return "e," + edge.stringID(); })
-      .on("mouseup", function (d) {
+      .on("click", function (edge) {
-        graph.pathMouseUp.call(graph, d3.select(this), d);
+        d3.event.stopPropagation();
+        if (!d3.event.shiftKey) {
+          graph.selectionHandler.clear();
+        }
+        graph.selectionHandler.select([edge.source, edge.target], true);
       })
       .attr("adjacentToHover", "false");
 
@@ -741,12 +690,9 @@ class GraphView extends View {
     });
 
     // select existing nodes
-    const filteredNodes = graph.nodes.filter(function (n) {
+    const filteredNodes = graph.nodes.filter(n => n.visible);
-      return n.visible;
+    const allNodes = graph.visibleNodes.selectAll<SVGGElement, GNode>("g");
-    });
+    const selNodes = allNodes.data(filteredNodes, nodeToStr);
-    let selNodes = graph.visibleNodes.selectAll("g").data(filteredNodes, function (d) {
-      return d.id;
-    });
 
     // remove old nodes
     selNodes.exit().remove();
@@ -763,44 +709,36 @@ class GraphView extends View {
       .classed("input", function (n) { return n.isInput(); })
       .classed("simplified", function (n) { return n.isSimplified(); })
       .classed("machine", function (n) { return n.isMachine(); })
-      .on("mousedown", function (d) {
+      .on('mouseenter', function (node) {
-        graph.nodeMouseDown.call(graph, d3.select(this), d);
+        const visibleEdges = graph.visibleEdges.selectAll<SVGPathElement, Edge>('path');
-      })
+        const adjInputEdges = visibleEdges.filter(e => { return e.target === node; });
-      .on("mouseup", function (d) {
+        const adjOutputEdges = visibleEdges.filter(e => { return e.source === node; });
-        graph.nodeMouseUp.call(graph, d3.select(this), d);
-      })
-      .on('mouseover', function (d) {
-        var nodeSelection = d3.select(this);
-        let node = graph.nodeMap[d.id];
-        let visibleEdges = graph.visibleEdges.selectAll('path');
-        let adjInputEdges = visibleEdges.filter(e => { return e.target === node; });
-        let adjOutputEdges = visibleEdges.filter(e => { return e.source === node; });
         adjInputEdges.attr('relToHover', "input");
         adjOutputEdges.attr('relToHover', "output");
-        let adjInputNodes = adjInputEdges.data().map(e => e.source);
+        const adjInputNodes = adjInputEdges.data().map(e => e.source);
-        let visibleNodes = graph.visibleNodes.selectAll("g");
+        const visibleNodes = graph.visibleNodes.selectAll<SVGGElement, GNode>("g");
-        visibleNodes.data(adjInputNodes, function (d) {
+        const input = visibleNodes.data<GNode>(adjInputNodes, nodeToStr)
-          return d.id;
+          .attr('relToHover', "input");
-        }).attr('relToHover', "input");
+        const adjOutputNodes = adjOutputEdges.data().map(e => e.target);
-        let adjOutputNodes = adjOutputEdges.data().map(e => e.target);
+        const output = visibleNodes.data<GNode>(adjOutputNodes, nodeToStr)
-        visibleNodes.data(adjOutputNodes, function (d) {
+          .attr('relToHover', "output");
-          return d.id;
-        }).attr('relToHover', "output");
         graph.updateGraphVisibility();
       })
-      .on('mouseout', function (d) {
+      .on('mouseleave', function (node) {
-        var nodeSelection = d3.select(this);
+        const visibleEdges = graph.visibleEdges.selectAll<SVGPathElement, Edge>('path');
-        let node = graph.nodeMap[d.id];
+        const adjEdges = visibleEdges.filter(e => { return e.target === node || e.source === node; });
-        let visibleEdges = graph.visibleEdges.selectAll('path');
-        let adjEdges = visibleEdges.filter(e => { return e.target === node || e.source === node; });
         adjEdges.attr('relToHover', "none");
-        let adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
+        const adjNodes = adjEdges.data().map(e => e.target).concat(adjEdges.data().map(e => e.source));
-        let visibleNodes = graph.visibleNodes.selectAll("g");
+        const visibleNodes = graph.visibleNodes.selectAll<SVGPathElement, GNode>("g");
-        let nodes = visibleNodes.data(adjNodes, function (d) {
+        const nodes = visibleNodes.data(adjNodes, nodeToStr)
-          return d.id;
+          .attr('relToHover', "none");
-        }).attr('relToHover', "none");
         graph.updateGraphVisibility();
       })
+      .on("click", (d) => {
+        if (!d3.event.shiftKey) graph.selectionHandler.clear();
+        graph.selectionHandler.select([d], undefined);
+        d3.event.stopPropagation();
+      })
       .call(graph.drag)
 
     newGs.append("rect")
@@ -829,7 +767,7 @@ class GraphView extends View {
           .attr("transform", function (d) {
             return "translate(" + x + "," + y + ")";
           })
-          .on("mousedown", function (d) {
+          .on("click", function (d) {
             var components = this.id.split(',');
             var node = graph.nodeMap[components[3]];
             var edge = node.inputs[components[2]];
@@ -857,7 +795,7 @@ class GraphView extends View {
           .attr("transform", function (d) {
             return "translate(" + x + "," + y + ")";
           })
-          .on("mousedown", function (d) {
+          .on("click", function (d) {
             d.setOutputVisibility(d.areAnyOutputsVisible() == 0);
             d3.event.stopPropagation();
             graph.updateGraphVisibility();
@@ -901,7 +839,7 @@ class GraphView extends View {
       }
     });
 
-    selNodes.select('.type').each(function (d) {
+    selNodes.select<SVGTextElement>('.type').each(function (d) {
       this.setAttribute('visibility', graph.state.showTypes ? 'visible' : 'hidden');
     });
 
@@ -922,113 +860,30 @@ class GraphView extends View {
     selEdges.attr("d", function (edge) {
       return edge.generatePath(graph);
     });
-
-    redetermineGraphBoundingBox(this);
   }
 
-  getVisibleTranslation(translate, scale) {
-    var graph = this;
-    var height = (graph.maxGraphY - graph.minGraphY + 2 * GRAPH_MARGIN) * scale;
-    var width = (graph.maxGraphX - graph.minGraphX + 2 * GRAPH_MARGIN) * scale;
-
-    var dimensions = this.getSvgViewDimensions();
-
-    var baseY = translate[1];
-    var minY = (graph.minGraphY - GRAPH_MARGIN) * scale;
-    var maxY = (graph.maxGraphY + GRAPH_MARGIN) * scale;
-
-    var adjustY = 0;
-    var adjustYCandidate = 0;
-    if ((maxY + baseY) < dimensions[1]) {
-      adjustYCandidate = dimensions[1] - (maxY + baseY);
-      if ((minY + baseY + adjustYCandidate) > 0) {
-        adjustY = (dimensions[1] / 2) - (maxY - (height / 2)) - baseY;
-      } else {
-        adjustY = adjustYCandidate;
-      }
-    } else if (-baseY < minY) {
-      adjustYCandidate = -(baseY + minY);
-      if ((maxY + baseY + adjustYCandidate) < dimensions[1]) {
-        adjustY = (dimensions[1] / 2) - (maxY - (height / 2)) - baseY;
-      } else {
-        adjustY = adjustYCandidate;
-      }
-    }
-    translate[1] += adjustY;
-
-    var baseX = translate[0];
-    var minX = (graph.minGraphX - GRAPH_MARGIN) * scale;
-    var maxX = (graph.maxGraphX + GRAPH_MARGIN) * scale;
-
-    var adjustX = 0;
-    var adjustXCandidate = 0;
-    if ((maxX + baseX) < dimensions[0]) {
-      adjustXCandidate = dimensions[0] - (maxX + baseX);
-      if ((minX + baseX + adjustXCandidate) > 0) {
-        adjustX = (dimensions[0] / 2) - (maxX - (width / 2)) - baseX;
-      } else {
-        adjustX = adjustXCandidate;
-      }
-    } else if (-baseX < minX) {
-      adjustXCandidate = -(baseX + minX);
-      if ((maxX + baseX + adjustXCandidate) < dimensions[0]) {
-        adjustX = (dimensions[0] / 2) - (maxX - (width / 2)) - baseX;
-      } else {
-        adjustX = adjustXCandidate;
-      }
-    }
-    translate[0] += adjustX;
-    return translate;
-  }
-
-  translateClipped(translate, scale, transition?: boolean): void{
-    var graph = this;
-    var graphNode = this.graphElement.node() as SVGElement;
-    var translate = this.getVisibleTranslation(translate, scale);
-    if (transition) {
-      graphNode.classList.add('visible-transition');
-      clearTimeout(graph.transitionTimout);
-      graph.transitionTimout = setTimeout(function () {
-        graphNode.classList.remove('visible-transition');
-      }, 1000);
-    }
-    var translateString = "translate(" + translate[0] + "px," + translate[1] + "px) scale(" + scale + ")";
-    graphNode.style.transform = translateString;
-    graph.dragSvg.translate(translate);
-    graph.dragSvg.scale(scale);
-  }
-
-  zoomed() {
-    this.state.justScaleTransGraph = true;
-    var scale = this.dragSvg.scale();
-    this.translateClipped(d3.event.translate, scale);
-  }
-
-
   getSvgViewDimensions() {
-    var canvasWidth = this.container.clientWidth;
+    return [this.container.clientWidth, this.container.clientHeight];
-    var documentElement = document.documentElement;
-    var canvasHeight = documentElement.clientHeight;
-    return [canvasWidth, canvasHeight];
   }
 
+  getSvgExtent(): [[number, number], [number, number]] {
+    return [[0, 0], [this.container.clientWidth, this.container.clientHeight]];
+  }
 
   minScale() {
-    var graph = this;
+    const graph = this;
-    var dimensions = this.getSvgViewDimensions();
+    const dimensions = this.getSvgViewDimensions();
-    var width = graph.maxGraphX - graph.minGraphX;
+    const minXScale = dimensions[0] / (2 * graph.width);
-    var height = graph.maxGraphY - graph.minGraphY;
+    const minYScale = dimensions[1] / (2 * graph.height);
-    var minScale = dimensions[0] / (width + GRAPH_MARGIN * 2);
+    const minScale = Math.min(minXScale, minYScale);
-    var minScaleYCandidate = dimensions[1] / (height + GRAPH_MARGIN * 2);
+    this.panZoom.scaleExtent([minScale, 40]);
-    if (minScaleYCandidate < minScale) {
-      minScale = minScaleYCandidate;
-    }
-    this.dragSvg.scaleExtent([minScale, 1.5]);
     return minScale;
   }
 
   fitGraphViewToWindow() {
-    this.translateClipped(this.dragSvg.translate(), this.dragSvg.scale());
+    const trans = d3.zoomTransform(this.svg.node());
+    const ctrans = this.panZoom.constrain()(trans, this.getSvgExtent(), this.panZoom.translateExtent())
+    this.panZoom.transform(this.svg, ctrans)
   }
 
   toggleTypes() {
@@ -1043,7 +898,7 @@ class GraphView extends View {
     var graph = this;
     var minX, maxX, minY, maxY;
     var hasSelection = false;
-    graph.visibleNodes.selectAll("g").each(function (n) {
+    graph.visibleNodes.selectAll<SVGGElement, GNode>("g").each(function (n) {
       if (graph.state.selection.isSelected(n)) {
         hasSelection = true;
         minX = minX ? Math.min(minX, n.x) : n.x;
@@ -1062,23 +917,21 @@ class GraphView extends View {
   }
 
   viewGraphRegion(minX, minY, maxX, maxY, transition) {
-    var graph = this;
+    const [width, height] = this.getSvgViewDimensions();
-    var dimensions = this.getSvgViewDimensions();
+    const dx = maxX - minX;
-    var width = maxX - minX;
+    const dy = maxY - minY;
-    var height = maxY - minY;
+    const x = (minX + maxX) / 2;
-    var scale = Math.min(dimensions[0] / width, dimensions[1] / height);
+    const y = (minY + maxY) / 2;
-    scale = Math.min(1.5, scale);
+    const scale = Math.min(width / (1.1 * dx), height / (1.1 * dy));
-    scale = Math.max(graph.minScale(), scale);
+    const transform = d3.zoomIdentity.translate(1500, 100).scale(0.75);
-    var translation = [-minX * scale, -minY * scale];
+    this.svg
-    translation = graph.getVisibleTranslation(translation, scale);
+      .transition().duration(300).call(this.panZoom.translateTo, x, y)
-    graph.translateClipped(translation, scale, transition);
+      .transition().duration(300).call(this.panZoom.scaleTo, scale)
+      .transition().duration(300).call(this.panZoom.translateTo, x, y);
   }
 
   viewWholeGraph() {
-    var graph = this;
+    this.panZoom.scaleTo(this.svg, 0);
-    var minScale = graph.minScale();
+    this.panZoom.translateTo(this.svg, this.minGraphX + this.width / 2, this.minGraphY + this.height / 2)
-    var translation = [0, 0];
-    translation = graph.getVisibleTranslation(translation, minScale);
-    graph.translateClipped(translation, minScale);
   }
 }

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) {
+const MoreMath = {
-  return Math.floor((raw + multiple - 1) / multiple) * multiple;
+  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_right: d3.Selection<HTMLDivElement, any, any, any>;
-  resizer_left: d3.Selection<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",