Merge pull request #99 from timkpaine/tkp/dagrees

migrate from dagre-d3 to dagre-d3-es
timkpaine · Dec 10, 2022 · 22c9637 · 22c9637
2 parents 51436b9 + d6ed536
commit 22c9637
Show file tree

Hide file tree

Showing 4 changed files with 251 additions and 249 deletions.
diff --git a/js/jest.config.js b/js/jest.config.js
@@ -6,8 +6,9 @@
  * the Apache License 2.0.  The full license can be found in the LICENSE file.
  *
  */
+const esModules = ["@jupyterlab", "@jupyter-widgets", "lib0", "y-protocols", "dagre-d3-es", "d3", "internmap", "delaunator", "robust-predicates", "lodash-es"].join("|");
 
- module.exports = {
+module.exports = {
   transform: {
     "^.+\\.jsx?$": "babel-jest",
     ".+\\.(css|styl|less|sass|scss)$": "jest-transform-css",
@@ -18,5 +19,5 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/fileMock.js",
   },
   moduleDirectories: ["node_modules", "src", "tests"],
-  transformIgnorePatterns: ["/node_modules/(?!(@jupyterlab|@jupyter-widgets|@finos*|lib0|y-protocols))"],
+  transformIgnorePatterns: [`/node_modules/(?!(${esModules}))`],
 };
diff --git a/js/package.json b/js/package.json
@@ -60,8 +60,7 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.1",
-    "d3": "^5.15.0",
-    "dagre-d3": "^0.6.4"
+    "dagre-d3-es": "^7.0.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",

diff --git a/js/src/view.js b/js/src/view.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import {DOMWidgetView} from "@jupyter-widgets/base";
-import {graphlib, render} from "dagre-d3";
+import {graphlib, render} from "dagre-d3-es";
 import * as d3 from "d3";
 
 // Import the CSS
@@ -50,8 +50,8 @@ export class DagreD3View extends DOMWidgetView {
 
     this.displayed.then(() => {
       // Set up zoom support
-      const zoom = d3.zoom().on("zoom", () => {
-        this.inner.attr("transform", d3.event.transform);
+      const zoom = d3.zoom().on("zoom", (event) => {
+        this.inner.attr("transform", event.transform);
       });
       this.svg.call(zoom);
 
@@ -80,16 +80,17 @@ export class DagreD3View extends DOMWidgetView {
     const tooltip = d3.select("#dagred3tooltip");
     this.inner
       .selectAll("g.node")
-      .attr("data-tooltip", (v) => this.graph.node(v).tooltip)
-      .on("click", (v) => {
-        this.send({event: "click", value: v});
+      // TODO commenting out for d3v5 -> d3v7 seems to have no effect ¯\_(ツ)_/¯
+      // .attr("data-tooltip", (event, value) => this.graph.node(value).tooltip)
+      .on("click", (event, value) => {
+        this.send({event: "click", value});
       })
       .on("mouseover", () => tooltip.style("visibility", "visible"))
-      .on("mousemove", (v) => {
+      .on("mousemove", (event, value) => {
         tooltip
-          .text(this.graph.node(v).tooltip)
-          .style("top", `${d3.event.pageY - 10}px`)
-          .style("left", `${d3.event.pageX + 10}px`);
+          .text(this.graph.node(value).tooltip)
+          .style("top", `${event.pageY - 10}px`)
+          .style("left", `${event.pageX + 10}px`);
       })
       .on("mouseout", () => tooltip.style("visibility", "hidden"));