Add graphviz display of line Traces.

diff --git a/package-lock.json b/package-lock.json
index a1ef3d01fad01ed11ceaf751ac3e1ad3e2bbc9d1..31ad2d7a350de5e1c81cd27756666420a455c1a4 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -173,6 +173,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@hpcc-js/wasm": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@hpcc-js/wasm/-/wasm-0.3.8.tgz",
+      "integrity": "sha512-TAWBC5bpWsM2/K6dQUBNgUH/1vnJbLAWX+S5ltJBVIOhINURdaaCiQQXWot2xlDFcyM7b2WQx4TA5Fbx76QXWg=="
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -1346,6 +1351,99 @@
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
       "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
     },
+    "d3-color": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
+      "integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
+    },
+    "d3-dispatch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
+      "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
+    },
+    "d3-drag": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
+      "integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-selection": "1"
+      }
+    },
+    "d3-ease": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
+      "integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
+    },
+    "d3-format": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.3.tgz",
+      "integrity": "sha512-mm/nE2Y9HgGyjP+rKIekeITVgBtX97o1nrvHCWX8F/yBYyevUTvu9vb5pUnKwrcSw7o7GuwMOWjS9gFDs4O+uQ=="
+    },
+    "d3-graphviz": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/d3-graphviz/-/d3-graphviz-3.0.4.tgz",
+      "integrity": "sha512-PDT+W/k1OAygY5kZiQTQyHnsEHMCRRG0Mh3mZ1o8JVZeD/ekIOCrXeIHsx+UZOSC/2nr6j6+5Ut4OL47Y7TzuA==",
+      "requires": {
+        "@hpcc-js/wasm": "^0.3.8",
+        "d3-dispatch": "^1.0.6",
+        "d3-format": "^1.4.3",
+        "d3-interpolate": "^1.4.0",
+        "d3-path": "^1.0.9",
+        "d3-selection": "^1.4.1",
+        "d3-timer": "^1.0.10",
+        "d3-transition": "^1.3.2",
+        "d3-zoom": "1.7.3"
+      }
+    },
+    "d3-interpolate": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
+      "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
+      "requires": {
+        "d3-color": "1"
+      }
+    },
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-selection": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
+      "integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
+    },
+    "d3-timer": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
+      "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
+    },
+    "d3-transition": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
+      "integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
+      "requires": {
+        "d3-color": "1",
+        "d3-dispatch": "1",
+        "d3-ease": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "^1.1.0",
+        "d3-timer": "1"
+      }
+    },
+    "d3-zoom": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.3.tgz",
+      "integrity": "sha512-xEBSwFx5Z9T3/VrwDkMt+mr0HCzv7XjpGURJ8lWmIC8wxe32L39eWHIasEe/e7Ox8MPU4p1hvH8PKN2olLzIBg==",
+      "requires": {
+        "d3-dispatch": "1",
+        "d3-drag": "1",
+        "d3-interpolate": "1",
+        "d3-selection": "1",
+        "d3-transition": "1"
+      }
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",

diff --git a/package.json b/package.json
index 215f335b0640d0a974e80e7141877140c12445b9..9dfa541beba01517ca4430e9a7919ecdcf4f2c7f 100644 (file)
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "babel-loader": "^8.0.6",
     "babel-preset-solid": "^0.16.8",
     "css-loader": "^3.4.2",
+    "d3-graphviz": "^3.0.4",
     "html-webpack-plugin": "^3.2.0",
     "solid-js": "^0.16.14",
     "style-loader": "^1.1.3",

diff --git a/public/graphvizlib.wasm b/public/graphvizlib.wasm
new file mode 120000 (symlink)
index 0000000..bd3c318
--- /dev/null
+++ b/public/graphvizlib.wasm
@@ -0,0 +1 @@
+../node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm
\ No newline at end of file

diff --git a/src/FormView.tsx b/src/FormView.tsx
index dc8eead3fb80733b68649ee3c5545b3ec3c1de33..3f4ceedcb3a3fdef99bf4432eb258f679d1bb32d 100644 (file)
--- a/src/FormView.tsx
+++ b/src/FormView.tsx
@@ -6,7 +6,8 @@
 import { createDependentEffect, createMemo, createState } from 'solid-js';
 import { For, Show } from 'solid-js/dom';
 import { TaxReturn, Form, Line } from 'ustaxlib/core';
-import { getLastTraceList } from 'ustaxlib/core/Trace';
+import { Edge, getLastTraceList } from 'ustaxlib/core/Trace';
+import { graphviz } from 'd3-graphviz';
 
 const S = require('./FormView.css');
 
@@ -51,11 +52,11 @@ function LineView(props: LineProps) {
   });
 
   const [ state, setState ] = createState({
-    trace: "",
+    trace: [] as readonly Edge[],
     showTrace: false
   });
 
-  createDependentEffect(() => setState('trace', JSON.stringify(getLastTraceList(), null, '  ')), [value]);
+  createDependentEffect(() => setState('trace', getLastTraceList()), [value]);
 
   const toggleTrace = () => setState('showTrace', !state.showTrace);
 
@@ -76,14 +77,22 @@ function LineView(props: LineProps) {
 
 interface TraceProps {
   line: Line<any>;
-  trace: string;
+  trace: readonly Edge[];
 }
 
 function TraceViewer(props: TraceProps) {
+  const renderGraph = (ref) => {
+    let graph = '';
+    for (const edge of props.trace) {
+      graph += `"${edge[1]}" -> "${edge[0]}"; `;
+    }
+    graphviz(ref)
+      .renderDot(`digraph { ${graph} }`);
+  };
   return (
     <div class={S.traceViewer}>
       <h2>Trace {props.line.id}</h2>
-      <div class={S.trace}>{props.trace}</div>
+      <div forwardRef={renderGraph}></div>
     </div>
   );
 }

diff --git a/src/ustaxviewer.ts b/src/ustaxviewer.ts
index c20d4c7bffd4ca9dcb97a23025ecd68565a7b408..ce78307c23d3087f6935cc1a1383144ae3146f8a 100755 (executable)
--- a/src/ustaxviewer.ts
+++ b/src/ustaxviewer.ts
@@ -82,7 +82,7 @@ const compiler = webpack({
   devServer: {
     contentBase: PUBLIC,
     port: 8488
- },
+  },
 
   devtool: 'cheap-module-eval-source-map',
 
@@ -97,7 +97,7 @@ const compiler = webpack({
   ]
 });
 
-const server = new WebpackDevServer(compiler);
+const server = new WebpackDevServer(compiler, compiler.options.devServer);
 
 server.listen(8488, 'localhost', () => {
   console.log(`ustaxviewer for ${TAX_RETURN_PATH} at http://localhost:8488`);