Collapse default attributes into graph, node, edge attributes

packages/viz/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 ## Unreleased
 
+* Collapse default attributes into separate graphAttributes, edgeAttributes, nodeAttributes objects.
+
+  For example, to set the default shape attribute for nodes:
+
+      viz.render("digraph { a -> b }", { nodeAttributes: { shape: "circle" } });
+
+  This is equivalent to specifying `-Nshape=circle` in command-line arguments.
+
+  Example usage in graph objects:
+
+      viz.render({
+        graphAttributes: {
+          label: "Test"
+        },
+        nodeAttributes: {
+          shape: "circle"
+        },
+        edges: [
+          { tail: "a", head: "b" }
+        ]
+      });
+
+  Equivalent in DOT:
+
+      digraph {
+        graph [label="Test"]
+        node [shape="circle"]
+        
+        a -> b
+      }
+      
+  Specifying default graph attributes had the same effect as specifying attributes for the graph. This removes that ambiguity.
+
 * Accept HTML attribute values in object input.
 
   HTML attribute values are written as an object literal with a "html" property:
@@ -30,7 +63,7 @@
       viz.render({
         directed: true,
         defaultAttributes: {
-        node: {
+          node: {
             shape: "circle"
           }
         },

packages/viz/src/viz.mjs

@@ -60,25 +60,25 @@ function withStringPointer(module, graphPointer, value, callbackFn) {
   module.ccall("viz_string_free", "number", ["number", "number"], [graphPointer, stringPointer]);
 }
 
-function setDefaultAttributes(module, graphPointer, defaultAttributes) {
-  if (defaultAttributes.graph) {
-    for (const [name, value] of Object.entries(defaultAttributes.graph)) {
+function setDefaultAttributes(module, graphPointer, data) {
+  if (data.graphAttributes) {
+    for (const [name, value] of Object.entries(data.graphAttributes)) {
       withStringPointer(module, graphPointer, value, stringPointer => {
         module.ccall("viz_set_default_graph_attribute", "number", ["number", "string", "number"], [graphPointer, name, stringPointer]);
       });
     }
   }
 
-  if (defaultAttributes.node) {
-    for (const [name, value] of Object.entries(defaultAttributes.node)) {
+  if (data.nodeAttributes) {
+    for (const [name, value] of Object.entries(data.nodeAttributes)) {
       withStringPointer(module, graphPointer, value, stringPointer => {
         module.ccall("viz_set_default_node_attribute", "number", ["number", "string", "number"], [graphPointer, name, stringPointer]);
       });
     }
   }
 
-  if (defaultAttributes.edge) {
-    for (const [name, value] of Object.entries(defaultAttributes.edge)) {
+  if (data.edgeAttributes) {
+    for (const [name, value] of Object.entries(data.edgeAttributes)) {
       withStringPointer(module, graphPointer, value, stringPointer => {
         module.ccall("viz_set_default_edge_attribute", "number", ["number", "string", "number"], [graphPointer, name, stringPointer]);
       });
@@ -111,13 +111,7 @@ function setAttributes(module, graphPointer, objectPointer, attributes) {
 }
 
 function readGraph(module, graphPointer, graphData) {
-  if (graphData.defaultAttributes) {
-    setDefaultAttributes(module, graphPointer, graphData.defaultAttributes);
-  }
-
-  if (graphData.attributes) {
-    setAttributes(module, graphPointer, graphPointer, graphData.attributes);
-  }
+  setDefaultAttributes(module, graphPointer, graphData);
 
   if (graphData.nodes) {
     graphData.nodes.forEach(nodeData => {
@@ -179,9 +173,7 @@ function renderInput(module, input, options) {
       };
     }
 
-    if (options.defaultAttributes) {
-      setDefaultAttributes(module, graphPointer, options.defaultAttributes);
-    }
+    setDefaultAttributes(module, graphPointer, options);
 
     module.ccall("viz_set_y_invert", "number", ["number"], [options.yInvert ? 1 : 0]);
     module.ccall("viz_set_reduce", "number", ["number"], [options.reduce ? 1 : 0]);

packages/viz/test/standalone.test.mjs

@@ -151,16 +151,14 @@ describe("standalone", function() {
 
       it("accepts default attributes", function() {
         const result = viz.render("graph {}", {
-          defaultAttributes: {
-            graph: {
-              a: 123
-            },
-            node: {
-              b: false
-            },
-            edge: {
-              c: "test"
-            }
+          graphAttributes: {
+            a: 123
+          },
+          nodeAttributes: {
+            b: false
+          },
+          edgeAttributes: {
+            c: "test"
           }
         });
 
@@ -182,10 +180,8 @@ describe("standalone", function() {
 
       it("default attribute values can be html strings", function() {
         const result = viz.render("graph {}", {
-          defaultAttributes: {
-            node: {
-              label: { html: "<b>test</b>" }
-            }
+          nodeAttributes: {
+            label: { html: "<b>test</b>" }
           }
         });
 
@@ -391,17 +387,13 @@ stop
         it("default attributes render options override options in input", function() {
           const result = viz.render(
             {
-              defaultAttributes: {
-                node: {
-                  shape: "rectangle"
-                }
+              nodeAttributes: {
+                shape: "rectangle"
               }
             },
             {
-              defaultAttributes: {
-                node: {
-                  shape: "circle"
-                }
+              nodeAttributes: {
+                shape: "circle"
               }
             }
           );
@@ -496,16 +488,14 @@ stop
           });
         });
 
-        it("default attributes, graph attributes, nodes, edges, and nested subgraphs", function() {
+        it("default attributes, nodes, edges, and nested subgraphs", function() {
           const result = viz.render({
-            defaultAttributes: {
-              node: {
-                shape: "circle"
-              }
-            },
-            attributes: {
+            graphAttributes: {
               rankdir: "LR"
             },
+            nodeAttributes: {
+              shape: "circle"
+            },
             nodes: [
               { name: "a", attributes: { label: "A", color: "red" } },
               { name: "b", attributes: { label: "B", color: "green" } }

packages/viz/test/types/index.ts

@@ -24,11 +24,9 @@ instance().then(viz => {
   options.format = "dot";
   options.engine = "dot";
   options.yInvert = true;
-  options.defaultAttributes = {
-    graph: { rankdir: "LR" },
-    node: { width: 2 },
-    edge: { color: "green" }
-  };
+  options.graphAttributes = { rankdir: "LR" };
+  options.nodeAttributes = { width: 2 };
+  options.edgeAttributes = { color: "green" };
 
   // @ts-expect-error
   options.format = false;
@@ -50,7 +48,7 @@ instance().then(viz => {
 
   result = viz.render("digraph { a -> b }", { format: "svg", engine: "dot", yInvert: false });
 
-  result = viz.render("digraph { a -> b }", { defaultAttributes: { node: { shape: "circle" } } });
+  result = viz.render("digraph { a -> b }", { nodeAttributes: { shape: "circle" } });
 
   result = viz.render({});
 
@@ -63,12 +61,10 @@ instance().then(viz => {
     directed: false,
     strict: false,
     name: "G",
-    defaultAttributes: {
-      node: {
-        shape: "circle"
-      }
+    nodeAttributes: {
+      shape: "circle"
     },
-    attributes: {
+    graphAttributes: {
       label: "Test"
     },
     nodes: [
@@ -80,12 +76,10 @@ instance().then(viz => {
     subgraphs: [
       {
         name: "cluster1",
-        defaultAttributes: {
-          edge: {
-            color: "blue"
-          }
+        edgeAttributes: {
+          color: "blue"
         },
-        attributes: {
+        graphAttributes: {
           color: "green"
         },
         subgraphs: [
@@ -100,18 +94,11 @@ instance().then(viz => {
   });
 
   result = viz.render({
-    attributes: {
+    graphAttributes: {
       width: 2,
       abc: true,
       label: { html: "<b>test</b>" }
     },
-    defaultAttributes: {
-      node: {
-        width: 2,
-        abc: true,
-        label: { html: "<b>test</b>" }
-      }
-    },
     nodes: [
       {
         name: "a",
@@ -125,7 +112,7 @@ instance().then(viz => {
   });
 
   result = viz.render({
-    attributes: {
+    graphAttributes: {
       // @ts-expect-error
       blah: null,
       // @ts-expect-error

packages/viz/types/index.d.ts

@@ -4,12 +4,6 @@ type AttributeValue = string | number | boolean | HTMLString;
 
 type Attributes = { [key: string]: AttributeValue };
 
-type DefaultAttributes = {
-  graph?: Attributes,
-  node?: Attributes,
-  edge?: Attributes
-};
-
 type Node = {
   name: string,
   attributes?: Attributes
@@ -23,8 +17,9 @@ type Edge = {
 
 type Graph = {
   name?: string,
-  defaultAttributes?: DefaultAttributes,
-  attributes?: Attributes,
+  graphAttributes?: Attributes,
+  nodeAttributes?: Attributes,
+  edgeAttributes?: Attributes,
   nodes?: Node[],
   edges?: Edge[],
   subgraphs?: Graph[]
@@ -44,7 +39,9 @@ export type RenderOptions = {
   engine?: string;
   yInvert?: boolean;
   reduce?: boolean;
-  defaultAttributes?: DefaultAttributes
+  graphAttributes?: Attributes;
+  nodeAttributes?: Attributes;
+  edgeAttributes?: Attributes;
 };
 
 export type RenderError = {