Update nodeDataArray on the fly

GoJS
1

I have a requirement to save the graph each time a new node or link is added so thje backend can return the new nodes with few calculated properties.
My issue is that i initialize everything related to graph inside the ngAfterViewInit hook of angular.
here is the code:

 ngAfterViewInit() {
    configureShapes();
  
    this.initDiagram();

    this.diagram.model = new go.GraphLinksModel(
      this.diagramModelData.nodeDataArray,
      this.diagramModelData.linkDataArray
      );
    this.data = this.diagram.model.toJson();
    this.load();
    this.initListeners();

  }

When i try to update only the model from an input like this:

  @Input() set diagramModel(model: GraphNodeDetailsData) {
    this.diagramModelData = model;
    if(this.diagram) {
      this.diagram.startTransaction('modify nodeDataArray');
      this.diagram.model.nodeDataArray = model.nodeDataArray;
      this.diagram.commitTransaction('modify nodeDataArray');
    }
  }

the nodes are getting lost. the only way i can update the diagram is to destroy the div that is rendered from the parent by turning a flag of loading to true. whats wrong with passing the new nodeDataArray to my model? any suggestions for updating the nodes without destroying the hole graph?

2

Are you using the gojs-angular components? You don’t have to; I’m just asking to understand what might be going on.

3

no Im not using something from gojs-angular library

4

OK. Replacing the Model.nodeDataArray with a new Array of new Objects might work, but it ends up removing all of the old Nodes and creating all new Nodes corresponding to the new data. That might cause performance problems, in addition to losing some transient state.

Do you know exactly which node data objects have been modified? If so, you could just call Model.set on those data objects with the modified properties.

If you do not know what might have changed, maybe you should call Model.mergeNodeDataArray instead.

5

thanks alot