fix: improved graph rendering logic, fixes #64

js/Graph.js

@@ -1,15 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import * as d3 from 'd3';
-
 import { store, activity, useQuery, useDepIncludes, usePane, useInspectorOpen, useModule, useGraph, useColorize } from './App';
 import { $, tagElement, report, fetchJSON } from './util';
 import { graphviz } from '@hpcc-js/wasm';
 import wasmUrl from 'url:@hpcc-js/wasm/dist/graphvizlib.wasm';
 
 import '/css/Graph.scss';
 
-// Fetch WASM binary for graphviz rendering
-const wasmBinaryPromise = fetch(wasmUrl, { credentials: 'same-origin' })
+// Promise<ArrayBuffer> contents of graphviz WASM file
+const wasmData = fetch(wasmUrl, { credentials: 'same-origin' })
   .then(res => {
     if (!res.ok) throw Error(`Failed to load '${wasmUrl}'`);
     return res.arrayBuffer();
@@ -304,13 +303,21 @@ export default function Graph(props) {
 
     const graph = await modulesForQuery(query, depIncludes);
 
+    setGraph(graph);
+    setPane(graph.size ? 'graph' : 'info');
+
     console.log('Render graph');
     const onFinish = activity.start('Rendering');
 
-    const wasmBinary = await wasmBinaryPromise; // Avoid race if wasmBinary fetch hasn't completed
-    const svg = await graphviz.layout(composeDOT(graph), 'svg', 'dot', { wasmBinary });
+    const svgMarkup = graph.size ? await graphviz.layout(
+      composeDOT(graph),
+      'svg',
+      'dot',
+      { wasmBinary: await wasmData }
+    )
+      : '<svg />';
 
-    let svgDom = (new DOMParser()).parseFromString(svg, 'image/svg+xml');
+    let svgDom = (new DOMParser()).parseFromString(svgMarkup, 'image/svg+xml');
     svgDom = svgDom.children[0];
     svgDom.remove();
 
@@ -366,9 +373,6 @@ export default function Graph(props) {
 
     onFinish();
 
-    setGraph(graph);
-    setPane(graph.size ? 'graph' : 'info');
-
     return () => cancelled = true;
   }, [query, depIncludes]);