From cb68511afd10d8732e1898e94960b43fbc218d0a Mon Sep 17 00:00:00 2001 From: Robert Sesek Date: Mon, 16 Mar 2020 22:56:09 -0400 Subject: [PATCH] Add graphviz display of line Traces. --- package-lock.json | 98 +++++++++++++++++++++++++++++++++++++++++ package.json | 1 + public/graphvizlib.wasm | 1 + src/FormView.tsx | 19 +++++--- src/ustaxviewer.ts | 4 +- 5 files changed, 116 insertions(+), 7 deletions(-) create mode 120000 public/graphvizlib.wasm diff --git a/package-lock.json b/package-lock.json index a1ef3d0..31ad2d7 100644 --- 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 215f335..9dfa541 100644 --- 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 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 dc8eead..3f4ceed 100644 --- 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; - 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 (

Trace {props.line.id}

-
{props.trace}
+
); } diff --git a/src/ustaxviewer.ts b/src/ustaxviewer.ts index c20d4c7..ce78307 100755 --- 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`); -- 2.22.5