如何将大图平滑渲染为 react.js 组件？

Question

. Answers to this question are eligible for a +50 reputation bounty. 0x90 wants to to this question.

I want to visualize large graphs, but the UI freezes and the V8 engine throws out-of-memory errors after about 25 seconds.

Ideally, I want the graph rendering will be smooth and non-blocking.

My Graph.js file below assigns the graph dot string to the src variable when the "Set" button is pressed and attempts to display the graph when the "Render" button is pressed.

import React, { useRef, useState } from 'react';
import Viz from 'viz.js';
import { Module, render } from 'viz.js/full.render.js';

const largegraph = "digraph { " + Array.from(Array(1000).keys()).map(i => "a" + i + " [label=" + i + "];").join(" ") + Array.from(Array(10000).keys()).map(i => "a" + Math.floor(Math.random() * 1000) + " -> " + "a" + Math.floor(Math.random() * 1000) + ";").join(" ") + " }";

function GraphvizGraph(props) {
    const container = useRef(null);
    const [src, setSrc] = useState(props.src);

    const renderGraph = (src) => {
        const viz = new Viz({ Module, render });
        viz.renderSVGElement(src)
            .then(function (element) {
                container.current.innerHTML = "";
                container.current.appendChild(element);
            });
    }

    console.log(largegraph)

    return (
        <div>
            <button onClick={() => setSrc(largegraph)}>Set</button>
            <button onClick={() => renderGraph(src)}>Render</button>
            <div ref={container} />
        </div>
    );
}

export default GraphvizGraph;

After setting up the large graph, clicking the "Render" button fails to display anything and causes the UI to freeze. After a few seconds, Chrome throws an exception. Is there a way to fix this issue and successfully visualize smoothly the graph?

full.render.js:24 Cannot enlarge memory arrays. Either (1) compile with  -s TOTAL_MEMORY=X  with X higher than the current value 16777216, (2) compile with  -s ALLOW_MEMORY_GROWTH=1  which allows increasing the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or (4) if you want malloc to return NULL (0) instead of this abort, compile with  -s ABORTING_MALLOC=0 
abort @ full.render.js:24
react-dom.development.js:4161 [Violation] 'click' handler took 23773ms
[Violation] 'click' handler took 23773ms

Uncaught (in promise) abort("Cannot enlarge memory arrays. Either (1) compile with  -s TOTAL_MEMORY=X  with X higher than the current value 16777216, (2) compile with  -s ALLOW_MEMORY_GROWTH=1  which allows increasing the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or (4) if you want malloc to return NULL (0) instead of this abort, compile with  -s ABORTING_MALLOC=0 "). Build with -s ASSERTIONS=1 for more info.

Answer 1

There are a few ways to go about improving the graph rendering performance. The first is to tune graph attributes like nslimit , maxiter , and splines . Adjusting them to be less complex can offer significant speed-ups in exchange for "attractiveness".

Another way is to use a different layout engine. viz.renderSVGElement() by default uses the dot layout engine, which isn't particularly fast. osage and twopi are typically a lot faster, but they also trade it for "attractiveness". In order to specify which layout engine to use,viz.renderSVGElement(src, renderOptions) takes a second parameter which is a Render Options object, in which you can set {engine: "osage"} .

Other Notes :

• You should probably add overlap=false; to your graph attributes to ensure nodes don't overlap and remain somewhat readable.
• For the most idiomatic React code and to prevent potential bugs from rerenders, save the SVG string to the component state, and use dangerouslySetInnerHTML to render it.

function GraphvizGraph(props) {
    const [src, setSrc] = useState(props.src);
    const [svgStr, setSvgStr] = useState("");

    const renderGraph = (src) => {
        const viz = new Viz({ Module, render });
        viz.renderSVGElement(src, {engine: "osage"})
            .then((svg) => setSvgStr(svg.outerHTML));
    }

    console.log(largegraph)

    return (
        <div>
            <button onClick={() => setSrc(largegraph)}>Set</button>
            <button onClick={() => renderGraph(src)}>Render</button>
            <div dangerouslySetInnerHTML={{__html: svgStr}} />
        </div>
    );
}

Answer 2

I did something similar to what was suggested earlier on , just using hpcc-js/wasm/graphviz which seems a more established solution that viz.js mentioned by OP.

import './App.css';
import { Graphviz } from "@hpcc-js/wasm/graphviz";

import React from 'react';

function Graph(props) {
  const [svg, setSvg] = React.useState(null);
  React.useEffect(() => {
    async function name(params) {
      const graphviz = await Graphviz.load();

      const dot = `digraph G5 {
        edge [fontcolor=black fontsize="10" fontname=Arial];
        subgraph referenceNodes {
            node [style="filled" fontcolor=white fontsize="12" fontname=Arial];
            subgraph person {
                node [fillcolor="blue"];
                person_JaneDoe [label="<person>\nJane Doe"];
                person_WendyDoe [label="<person>\nWendy Doe"];
                person_StacyDoe [label="<person>\nStacy Doe"];
            }
            subgraph profession {
                node [fillcolor="darkGreen"];
                profession_Programmer [label="<profession>\nProgrammer"];
                profession_Writer [label="<profession>\nWriter"];
            }
            subgraph vehicle {
                node [fillcolor="purple"];
                vehicle_Subaru [label="<vehicle>\nSubaru"];
                vehicle_Ford [label="<vehicle>\nFord"];
            }
        }
        subgraph dataNodes {
            node [shape=box style="filled" fillcolor=yellow fontcolor=black fontsize="12" fontname=Arial];
            value_age24_1 [label="<integer>\n24";];
            value_age24_2 [label="<integer>\n24";];
            value_age21_1 [label="<integer>\n21";];
        }
        subgraph JaneDoe {
            person_JaneDoe -> person_WendyDoe [label=" has sister" dir=both];
            person_JaneDoe -> person_StacyDoe [label=" has sister" dir=both];
            person_JaneDoe -> profession_Programmer [label=" is a"];
            person_JaneDoe -> vehicle_Subaru [label=" owns a"];
            person_JaneDoe -> value_age24_1 [label="has age"];
        }
        subgraph WendyDoe {
            person_WendyDoe -> profession_Writer [label=" is a"];
            person_WendyDoe -> vehicle_Subaru [label=" owns a"];
            person_WendyDoe -> value_age24_2 [label="has age"];
            person_WendyDoe -> person_StacyDoe [label=" has sister" dir=both];
        }
        subgraph StacyDoe {
            person_StacyDoe -> profession_Writer [label="is a"]
            person_StacyDoe -> vehicle_Ford [label="owns a"]
            person_StacyDoe -> value_age21_1 [label="has age"];
        }
}`;

      const svg_tmp = graphviz.dot(dot);
      setSvg(svg_tmp);
      console.log(graphviz.version(), svg_tmp);
    } name();
  }, [])

  return <div>
    <div dangerouslySetInnerHTML={{ __html: svg }} />
  </div>

}

function App() {
  return (

    <div className="App">
      <Graph />
    </div>
  );
}

export default App;