Pushing new data resets the zoom and pan

[Alex Nault]

Whenever I push new data (nodes/edges) to the Graph component, the zoom and pan are reset to fit the graph.

I believe it's caused by the fact that a new instance of Network is created on every React cycle:

componentDidUpdate() {
    ...
    this.Network = new vis.Network(/*{data, options, ...}*/);
    ...
}

Is there a workaround?

[Bryan Goldstein]

There appears to be a network.setOptions(options); and setData you could try using them instead.

[Vincent Lecrubier]

This seems to be a duplicate of #16 , which was supposedly fixed by #17 ...

[Bryan Goldstein]

@crubier - thought it would have also, @ANault - would you be able to provide a test case where you are seeing this behavior?

[yuefeic]

Could you provide some specific examples for dynamically update like update the node1's label in the example on the front page?

[Bryan Goldstein]

@yuefeic I'm not sure what you are asking for, what would you like to see this example do?

[yuefeic]

@brysgo how can you use nodes.update just like you use it directly in vis.js?

[Bryan Goldstein]

In an ideal world, we would do things the react way and make them declarative. That means when you update the data sent in through the props, the component will update.

Now the implementation may be imperfect, and maybe you need to add some extra state diff-ing to convert the difference to the imperative vis.js api, but that is how I would recommend doing it.

[yuefeic]

@brysgo So for example if I want to add a dragStart and a dragEnd event to make nodes be able to move while dragging but stay where they are when drag end. How could I be able to achieve this?
My code now looks like this:
dragStart: function(event) {
var { nodes } = event;
for(var i=0;i<nodes.length;i++){
nodes.update({id: nodes[i], fixed: {x:true, y: true}});
}
},

This doesn't seem like to be the right way since we cannot use nodes.update directly.

[Bryan Goldstein]

Ideally, you could just update properties on the nodes without "calling" update directly. Does it not work to just set the properties on the nodes? Because of the way react works, you may need to do Array.from(nodes) to get the component to rerender.

[yuefeic]

Yes. Simply change the properties manually doesn’t work. However, when I tried it with update method in pure vis it worked. Besides, what do you mean by using Array.from(nodes). Can you elaborate on that? Thanks.

[Bryan Goldstein]

Array.from(nodes) will create a new array of nodes. React will only know to rerender a component if the object you are passing in (the array) changes, it does not know when other things (number of elements in array, properties of the elements) change.

[Matt]

This is still a problem. I'm trying to use setData to work around the graph not re-rendering when the state is updated (you can verify this in the react dev tools by just changing any node's label or position) in your state. setData forces it to re-render but then this new problem happens - the zoom/pan get reset.

[Vincent Lecrubier]

Solved in the last release, there is even an example of this in action (double click)

http://crubier.github.io/react-graph-vis/

Source at:

https://github.com/crubier/react-graph-vis/tree/master/example/src/index.js