How to display the graph after it is stabilized (vis.js)? - reactjs

Question

I am rendering a graph using implementation of vis network as shown here. Right now the graph is taking some time to stabilize after being rendered. But I want the network to be stabilized before being displayed. I tried using the stabilization options under the physics module, but I could not achieve it.
The following is my Graph Component.
import {default as React, Component} from 'react';
import isEqual from 'lodash/isEqual';
import differenceWith from 'lodash/differenceWith';
import vis from 'vis';
import uuid from 'uuid';
import PropTypes from 'prop-types';
class Graph extends Component {
constructor(props) {
super(props);
const {identifier} = props;
this.updateGraph = this.updateGraph.bind(this);
this.state = {
identifier : identifier !== undefined ? identifier : uuid.v4()
};
}
componentDidMount() {
this.edges = new vis.DataSet();
this.edges.add(this.props.graph.edges);
this.nodes = new vis.DataSet();
this.nodes.add(this.props.graph.nodes);
this.updateGraph();
}
shouldComponentUpdate(nextProps, nextState) {
let nodesChange = !isEqual(this.nodes.get(), nextProps.graph.nodes);
let edgesChange = !isEqual(this.edges.get(), nextProps.graph.edges);
let optionsChange = !isEqual(this.props.options, nextProps.options);
let eventsChange = !isEqual(this.props.events, nextProps.events);
if (nodesChange) {
const idIsEqual = (n1, n2) => n1.id === n2.id;
const nodesRemoved = differenceWith(this.nodes.get(), nextProps.graph.nodes, idIsEqual);
const nodesAdded = differenceWith(nextProps.graph.nodes, this.nodes.get(), idIsEqual);
const nodesChanged = differenceWith(differenceWith(nextProps.graph.nodes, this.nodes.get(), isEqual), nodesAdded);
this.patchNodes({nodesRemoved, nodesAdded, nodesChanged});
}
if (edgesChange) {
const edgesRemoved = differenceWith(this.edges.get(), nextProps.graph.edges, isEqual);
const edgesAdded = differenceWith(nextProps.graph.edges, this.edges.get(), isEqual);
this.patchEdges({edgesRemoved, edgesAdded});
}
if (optionsChange) {
this.Network.setOptions(nextProps.options);
}
if (eventsChange) {
let events = this.props.events || {}
for (let eventName of Object.keys(events))
this.Network.off (eventName, events[eventName])
events = nextProps.events || {}
for (let eventName of Object.keys(events))
this.Network.on (eventName, events[eventName])
}
return false;
}
componentDidUpdate() {
this.updateGraph();
}
patchEdges({edgesRemoved, edgesAdded}) {
this.edges.remove(edgesRemoved);
this.edges.add(edgesAdded);
}
patchNodes({nodesRemoved, nodesAdded, nodesChanged}) {
this.nodes.remove(nodesRemoved);
this.nodes.add(nodesAdded);
this.nodes.update(nodesChanged);
}
updateGraph() {
let options = this.props.options;
this.Network = new vis.Network(
this.refs.nw,
Object.assign(
{},
this.props.graph,
{
edges: this.edges,
nodes: this.nodes
}
),
options
);
if (this.props.getNetwork) {
this.props.getNetwork(this.Network)
}
// Add user provided events to network
let events = this.props.events || {};
for (let eventName of Object.keys(events)) {
this.Network.on(eventName, events[eventName]);
}
}
render(){
return (<div ref="nw" style={{width:'100%' , height: '480px'}}/>);
}
}
Graph.defaultProps = {
graph: {},
style: { width: '100%', height: '480px' }
};
Graph.propTypes = {
graph: PropTypes.object,
style: PropTypes.object,
getNetwork: PropTypes.func
};
export default Graph;
This is my options object
let options = {
layout: {
hierarchical: false
},
autoResize: false,
edges: {
smooth: false,
color: '#000000',
width: 0.5,
arrows: {
to: {
enabled: true,
scaleFactor: 0.5
}
}
}
};
Any help would be greatly appreciated.
Thanks in advance !

Answer 1

You mention that you tried enabling stabilization without success. The following in the options should work:
physics: {
stabilization: {
enabled: true,
iterations: 5000 // YMMV
}
}
Is this different from what you tried?