react-network-vis diagram is automatically set to network.fit()

Question

im my react-network-vis diagram im postioning my nodes with the values saved in database and it working properly. after loading the the nodes if try to go to some other page and came back all the nodes are set with network.fit() function. i havent called the function at any where it is automatically calling the particular function. how can i stop calling the function automatically?

this is my option of the diagram

options = {
    layout: {
},
physics: {
  enabled: false,
},
interaction: {
  hover: true,
  dragView: true,
  selectable: true,
hover: true,
  
},

nodes: {
  shape: "dot",
  font: {
    size: 14,
    face: "courier",
    vadjust: 1,
  },
},
edges:{
  font:{
    strokeWidth:0
  }
},

manipulation: {
  enabled: false,
  initiallyActive: false,
  /*  Adding new node to the graph */
  addNode: (data, callback) => {
    this.handleAddPopOpen(true);
  },
  addEdge: function (data, callback) {
    if(data.from !== data.to){
      this.setState({fromId : data.from, toId : data.to})
      this.handleAddLinkPopOpen(true)
    }
   
  }.bind(this),
  editEdge: true,
  deleteNode: true,
  deleteEdge: true,
},
};

 events = {
click: function (event) {
  this.handleClick(event);
}.bind(this),
dragEnd: function (event) {
  this.handleDragEnd(event);
}.bind(this),
dragStart: function (event) {

}.bind(this),
oncontext: function (e) {
  e.event.preventDefault(); // This prevents opening usual right click
  this.handleRightClick(e);
}.bind(this),

};`

Answer 1

It would be great, if the component code is shared to understand the issue better.

As a bypass, we can explicitly disable the automatic adjustments by setting the layout options,

options = {
layout: {
  hierarchical: false,
},
physics: {
  enabled: false,
},
....

With this approach, the layout could be controlled from automatic adjustments.

If not, some of the other possibilities would be,

• Invoking network.fit() inside componentDidMount() or componentDidUpdate() lifecycle methods,
• There might be a Parent Component with the actions that might cause a re-render,
• While navigating to another page, you might be unmounting and remounting the component. Try to use conditional rendering,
• The state that you are using to manage the data of the diagram, might trigger a re-render.