Fix graph attr clobbering, fixes #127

Makefile

@@ -29,16 +29,14 @@ tests: testpy testjs ## run the tests
 ###########
 lintpy:  ## Black/flake8 python
 	python -m ruff ipydagred3 setup.py
-	python -m black --check ipydagred3 setup.py
 
 lintjs:  ## ESlint javascript
 	cd js; yarn lint
 
 lint: lintpy lintjs  ## run linter
 
 fixpy:  ## Black python
-	python -m ruff ipydagred3 setup.py --fix
-	python -m black ipydagred3/ setup.py
+	python -m ruff format ipydagred3 setup.py
 
 fixjs:  ## ESlint Autofix JS
 	cd js; yarn fix

README.md

@@ -1,7 +1,7 @@
 
 # ipydagred3
 
-ipywidgets library for drawing directed acyclic graphs in jupyterlab using [dagre-d3](https://github.com/dagrejs/dagre-d3)
+ipywidgets library for drawing directed acyclic graphs in jupyterlab using [dagre-d3](https://github.com/tbo47/dagre-es)
 
 [![Build Status](https://github.com/timkpaine/ipydagred3/workflows/Build%20Status/badge.svg?branch=main)](https://github.com/timkpaine/ipydagred3/actions?query=workflow%3A%22Build+Status%22)
 [![codecov](https://codecov.io/gh/timkpaine/ipydagred3/branch/main/graph/badge.svg?token=3N6NOPL4RE)](https://codecov.io/gh/timkpaine/ipydagred3)

ipydagred3/edge.py

@@ -23,9 +23,7 @@ class Edge(HasTraits):
 
     _graph = None
 
-    def __init__(
-        self, v, w, label="", labelpos="r", labeloffset=0.0, tooltip="", **attrs
-    ):
+    def __init__(self, v, w, label="", labelpos="r", labeloffset=0.0, tooltip="", **attrs):
         super(Edge, self).__init__(
             v=v,
             w=w,

ipydagred3/graph.py

@@ -48,13 +48,7 @@ def hasEdge(self, edge):
             if isinstance(edge[0], Node):
                 return any((e for e in self.edges if e.v == edge[0] and e.w == edge[1]))
             else:
-                return any(
-                    (
-                        e
-                        for e in self.edges
-                        if e.v.name == edge[0] and e.w.name == edge[1]
-                    )
-                )
+                return any((e for e in self.edges if e.v.name == edge[0] and e.w.name == edge[1]))
         return edge in (e.label for e in self.edges)
 
     # inEdges(inNodeName: string, outNodeName?: string): Edge[]|undefined;
@@ -73,9 +67,7 @@ def setEdge(self, edge_or_node1, node2=None, label="", **attrs):
             edge_or_node1.label = label or edge_or_node1.label
             edge_or_node1.tooltip = attrs.pop("tooltip", edge_or_node1.tooltip)
             edge_or_node1.labelpos = attrs.pop("labelpos", edge_or_node1.labelpos)
-            edge_or_node1.labeloffset = attrs.pop(
-                "labeloffset", edge_or_node1.labeloffset
-            )
+            edge_or_node1.labeloffset = attrs.pop("labeloffset", edge_or_node1.labeloffset)
             edge_or_node1.attrs.update(attrs)
 
             # set edge var

ipydagred3/node.py

@@ -51,11 +51,7 @@ def _observe_attrs(self, change):
     @validate("shape")
     def _validate_shape(self, proposal):
         if proposal.value not in ("rect", "circle", "ellipse", "diamond"):
-            raise TraitError(
-                'Shape must be in ("rect", "circle", "ellipse", "diamond"), got: {}'.format(
-                    proposal
-                )
-            )
+            raise TraitError('Shape must be in ("rect", "circle", "ellipse", "diamond"), got: {}'.format(proposal))
         return proposal.value
 
     def to_dict(self):

js/package.json

@@ -59,47 +59,47 @@
     }
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^6.0.5",
+    "@jupyter-widgets/base": "^6.0.6",
     "d3": "^7.8.5",
     "dagre-d3-es": "^7.0.10",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.10",
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@jupyterlab/builder": "^4.0.5",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.23.2",
+    "@jupyterlab/builder": "^4.0.7",
     "@lumino/application": "^2.2.1",
     "@lumino/widgets": "^2.3.0",
-    "babel-jest": "^29.6.4",
+    "babel-jest": "^29.7.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.48.0",
+    "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.2.3",
-    "eslint-plugin-jsdoc": "^46.5.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-unicorn": "^49.0.0",
     "expect.js": "^0.3.1",
     "fs-extra": "^11.1.1",
     "isomorphic-fetch": "^3.0.0",
-    "jest": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-transform-css": "^6.0.1",
     "mkdirp": "^3.0.1",
     "mocha": "^10.2.0",
     "npm-run-all": "^4.1.3",
     "prettier": "^3.0.3",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "source-map-loader": "^4.0.0",
     "style-loader": "^3.3.3",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "resolutions": {

js/src/view.js

@@ -40,14 +40,13 @@ export class DagreD3View extends DOMWidgetView {
     this.svg = el.append("svg");
 
     this.inner = this.svg.append("g");
-    this.graph = new graphlib.Graph();
     this.graph = new graphlib.Graph({directed: this.model.get("_graph").directed});
     this.graph.setGraph({
-      nodesep: 70,
-      ranksep: 50,
-      marginx: 20,
-      marginy: 20,
+      nodesep: this.model.get("_graph").attrs.nodesep || 70,
+      ranksep: this.model.get("_graph").attrs.ranksep || 50,
       rankdir: this.model.get("_graph").attrs.rankdir || "TB",
+      marginx: this.model.get("_graph").attrs.marginx || 20,
+      marginy: this.model.get("_graph").attrs.marginy || 20,
     });
 
     // set height and width
@@ -112,7 +111,7 @@ export class DagreD3View extends DOMWidgetView {
     } else if (msg.type === "setEdge") {
       this.setEdge(msg.source.v.name, msg.source.w.name, msg.source.attrs);
     } else if (msg.type === "graph") {
-      const ob = {};
+      const ob = this.graph.graph();
       ob[msg.attr] = msg.value;
       this.graph.setGraph(ob);
     } else if (msg.type === "node") {
@@ -159,8 +158,8 @@ export class DagreD3View extends DOMWidgetView {
       compound: graph.compound,
       directed: graph.directed,
       multigraph: graph.multigraph,
+      ...this.graph.graph(),
     };
-
     this.graph.setGraph(ob);
 
     graph.nodes.forEach((n) => {