While updating and adding data in model getting over stack issue

After updating and adding data to the model, when executing obj.diagram.layoutDiagram(true) to reflect the new changes in the diagram, I am encountering an over stack issue.

How can I handle the over stack issue while ensuring that the updated changes are reflected in the diagram and overlapping is avoided?

Code:

this.updateNodeRef(model, selectedNode, newDetails);

_APIJsonData.nodedata.forEach((newNode: any) => {
  if (newNode.category == "StartNode") {
    this.updateBackwardLinkages(newNode, selectedNode, obj);
  }

  this.updateFlowchartNodeParentID(newNode, selectedNode, _APIJsonData);

  if (newNode.calledruleidlist.length > 0) {
    this.updateForwardLinkages(newNode, selectedNode, allPossibleForwardNodes);
  }
});

model.addLinkDataCollection(_APIJsonData.linkdata);

this.calculateForwardNodeRef(model, allPossibleForwardNodes);
obj.diagram.layoutDiagram(true);
this.displayDiv = false;

Can you describe what these methods are editing and what calls this code? If a node is changing side, or a node or link is getting added, its possible that yet another layout is getting triggered.

Or is it a TreeLayout and the tree is very deep?

  1. In the mentioned methods, I simply perform operations such as:
    model.addNodeData(newNode);
    model.addLinkDataCollection(_APIJsonData.linkdata);
    model.removeLinkData(link);
    model.setDataProperty(link, "to", newNode.key);

    2.Yes, it is a TreeLayout, and it might be a deep tree. To handle deep tree structures, I have divided the data into dummy groups, as I have previously encountered issues with deeply nested trees.

It’s hard to guess from this alone what’s causing an infinite loop. Can you make a small reproducible case of this? Or if you inspect the stack, is there something obvious that’s repeating (like an addNodeData) that is unexpected?

After updating the model successfully, when I try to execute this.myDiagram.layoutDiagram(true);, I lose control.

The web page is getting stuck.

In developer tools, after executing layoutDiagram, if you pause:

Can you see the stack and find out what’s looping?

While executing layoutDiagram, I observed that after pausing script execution, the loop inside go-debug.mjs continues running for a long time, after which a “Maximum call stack size exceeded” exception is thrown.

Below at line no.21 loop executing for long time:

Exception:

Can we see more of that call stack?

What happens if you turn off AvoidsNodes routing?

It’s possible that there is an infinite loop possible within AvoidsNodes that we’ll have to investigate. Anything you can give us (such as your diagram model data at the time and templates) that may be helpful for reproducing this would be helpful. You can always email gojs @nwoods.comnwoods.com for privacy.

Can we see more of that call stack?
→ What kind of additional information are you looking for?

What happens if you turn off AvoidsNodes?
→ I am not using AvoidsNodes property in my template.

I will share the model data via email in JSON format, along with the node and link templates.