Efficient way to remove all the nodes and links and generate new arrays

GoJS
1
  • I already render my diagram once.
  • Upon node click I obtain a newly generated arrays for node and link data.

How should I go about deleting the nodeDataArray and linkDataArray?

within_trigger_function(...) {
       let newInstance = new BtreeClass();
       // generate new arrays..
       let newNodeDataArray = newInstance.getNodeDataArray();
       let newLinkDataArray = newInstance.getLinkDataArray();

       let model = this.myDiagram.model;
       model.startTransaction('remove nodes and links');
                  if(model instanceof go.GraphLinksModel) {
             model.removeLinkDataCollection(model.linkDataArray);
       }
      model.removeNodeDataCollection(model.nodeDataArray);
      model.commitTransaction('remove nodes and links');
}

This somehow only removes certain nodes and links

grafik.png876×709 89.3 KB

and throws an error value is not an instance of object: undefined

Upon investigating, the nodes removed from the transaction are only odd number ones. The error prevails only when remove links and nodes.

Upon adding a new transaction like below the removal and commenting out the removal part:

    model.startTransaction('add nodes and links');
    model.addNodeDataCollection(newNodeDataArray);
    model.addLinkDataCollection(newLinkDataArray);
    model.commitTransaction('add nodes and links');

I get a jumbled up render of the links and nodes which makes sense as none of the links and nodes were previously removed.

grafik.png960×795 200 KB

Is it possible what I am doing? where can I use the ChangedEvents for nodeDataArray and linkDataArray and how?

All of this just so that I do not have to render the diagram completely again and lose all my selections from previous rendering

2

Two choices:

  • set Model.nodeDataArray and GraphLinksModel.linkDataArray, in a transaction
  • create a new GraphLinksModel and assign Diagram.model; no transaction needed or allowed.

You may need to remember the keys of the selected nodes beforehand and then reselect them afterwards.

3

I am using the option for creating a new GraphLinksModel and assigning it to the model anyway when I am rendering the diagram.

However, your suggestion for storing keys for the nodes and using them for later purposes (selection again) helps.

onNodeClick(e, node) {
       this.selectedNodeKeys.push(node.part.data.key); // push the keys in an array
}

within the trigger_function above:

for (let eachNodeKey in this.selectedNodeKeys) {
    let nodeToBeSelected = this.myDiagram.findNodeforKey(eachNodeKey);
    nodeToBeSelected.isSelected = true; // select the previous nodes again
}

Thanks for saving the day again @walter.