Different graphviz library (#57)

* Different graphviz library

* Changeset

* Whitespace

.changeset/cuddly-carpets-lay.md

@@ -0,0 +1,5 @@
+---
+"@use-coordination/graphviz-renderer": patch
+---
+
+Use more modern graphviz library.

.github/workflows/deploy.yml

@@ -32,7 +32,10 @@ jobs:
           run_install: true
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
-      - run: pnpm run build && pnpm run build-json-schema
+      - run: |
+          pnpm run build
+          pnpm run build-json-schema
+          pnpm run bundle
       - run: pnpm exec playwright test
       - run: pnpm run changeset-status
       - name: Create Release Pull Request or Publish to NPM

packages/graphviz-renderer/package.json

@@ -27,6 +27,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "graphviz": "^0.0.9"
+    "ts-graphviz": "^1.8.1"
   }
 }

packages/graphviz-renderer/src/index.js

@@ -1,34 +1,43 @@
-import * as graphviz from 'graphviz';
+import { attribute as _, Digraph, Subgraph, Node, Edge, toDot } from 'ts-graphviz';
 
-const cScopeStyle = { "color": "green" };
-const cValueStyle = { "color": "red" };
-const viewStyle = { "color": "yellow" };
+const cScopeStyle = { [_.color]: "green" };
+const cValueStyle = { [_.color]: "red" };
+const viewStyle = { [_.color]: "yellow" };
 
 function addCscopeNode(g, cType, cScope, cValue) {
-  const cScopeNode = g.addNode(`cType_${cType}_cScope_${cScope}`, { ...cScopeStyle, label: cScope });
-  const cValueNode = g.addNode(`cType_${cType}_cScope_${cScope}_value`, { ...cValueStyle, label: cValue });
-  g.addEdge(cScopeNode, cValueNode);
-
+  const cScopeNode = new Node(`cType_${cType}_cScope_${cScope}`, {
+    ...cScopeStyle,
+    [_.label]: cScope,
+  })
+  g.addNode(cScopeNode);
+  const cValueNode = new Node(`cType_${cType}_cScope_${cScope}_value`, {
+    ...cValueStyle,
+    [_.label]: JSON.stringify(cValue),
+  });
+  g.addNode(cValueNode);
+  g.addEdge(new Edge([cScopeNode, cValueNode]));
 }
 
 function addViewNode(g, view) {
-  g.addNode(`view_${view}`, { ...viewStyle, label: view });
+  g.addNode(new Node(`view_${view}`, { ...viewStyle, [_.label]: view }));
 }
 
 function addViewScopeEdge(g, view, cType, cScope) {
-  g.addEdge(`view_${view}`, `cType_${cType}_cScope_${cScope}`);
+  g.addEdge(new Edge([new Node(`view_${view}`), new Node(`cType_${cType}_cScope_${cScope}`)]));
 }
 
 // TODO: implement using TS
 export function toGraphviz(config) {
-  const g = graphviz.digraph("G");
-  g.set("rankdir", "LR");
-
+  const g = new Digraph({
+    [_.rankdir]: "LR",
+  });  
   // TODO: handle meta-coordination, multi-coordination, and multi-level coordination.
 
   Object.entries(config.coordinationSpace).forEach(([cType, cObj]) => {
-    const cTypeCluster = g.addCluster(`cluster_cType_${cType}`);
-    cTypeCluster.set("label", cType);
+    const cTypeCluster = new Subgraph(`cluster_cType_${cType}`, {
+      [_.label]: cType,
+    });
+    g.addSubgraph(cTypeCluster);
 
     Object.entries(cObj).forEach(([cScope, cValue]) => {
       addCscopeNode(cTypeCluster, cType, cScope, cValue);
@@ -43,5 +52,5 @@ export function toGraphviz(config) {
     });
   });
 
-  return g.to_dot();
+  return toDot(g);
 }

packages/graphviz-renderer/src/index.test.js

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import {
+    toGraphviz
+} from './index.js';
+
+describe('Graphviz Rendering', () => {
+  describe('toGraphviz', () => {
+    it('works', () => {
+      const config = {
+        key: 1,
+        coordinationSpace: {
+          "barSelection": {
+            "A": [],
+          }
+        },
+        viewCoordination: {
+          vegaLite: {
+            coordinationScopes: {
+              barSelection: "A",
+            },
+          },
+          d3: {
+            coordinationScopes: {
+              barSelection: "A",
+            },
+          },
+          visx: {
+            coordinationScopes: {
+              barSelection: "A",
+            },
+          },
+          plotly: {
+            coordinationScopes: {
+              barSelection: "A",
+            },
+          },
+        },
+      };
+
+      const dot = toGraphviz(config);
+      expect(dot).toEqual(`digraph {
+  rankdir = "LR";
+  "view_vegaLite" [
+    color = "yellow";
+    label = "vegaLite";
+  ];
+  "view_d3" [
+    color = "yellow";
+    label = "d3";
+  ];
+  "view_visx" [
+    color = "yellow";
+    label = "visx";
+  ];
+  "view_plotly" [
+    color = "yellow";
+    label = "plotly";
+  ];
+  subgraph "cluster_cType_barSelection" {
+    label = "barSelection";
+    "cType_barSelection_cScope_A" [
+      color = "green";
+      label = "A";
+    ];
+    "cType_barSelection_cScope_A_value" [
+      color = "red";
+      label = "[]";
+    ];
+    "cType_barSelection_cScope_A" -> "cType_barSelection_cScope_A_value";
+  }
+  "view_vegaLite" -> "cType_barSelection_cScope_A";
+  "view_d3" -> "cType_barSelection_cScope_A";
+  "view_visx" -> "cType_barSelection_cScope_A";
+  "view_plotly" -> "cType_barSelection_cScope_A";
+}`);
+    });
+  });
+});