I’m currently engaged in a project where I’m using GoJS to create interactive diagrams, and everything is going well up to this point. However, I have run into a small roadblock. I am trying to update individual node data dynamically - such as the label or color of a node - based on user input from a form and I am using model.setDataProperty() to make changes, but the changes do not always update on the diagram until I actually rebuild the model (which is very inefficient).
Is there a better way to do this to trigger a real-time visual update of just the node that was changed? I want smooth, efficient updates since there is an increase in the number of nodes to be rendered.
Having worked with data visualization tools before (I just completed looker training last week which helped me structure and make sense of dynamic data), I am trying to accomplish a similar concept of real-time updates with GoJS.
If anyone has any tips, code samples, or best practices, that would be extremely helpful. I am interested in how people are handling their node updates in a scalable manner.
Thanks in advance!
Samples Index | GoJS includes several samples that demonstrate real-time monitoring and thus dynamically changing visual state.
There are several ways to design it. Does your app need to support editing as well as monitoring at the same time? To support editing you will want to enable the UndoManager, but you will not want it to record any of the changes that you make to show monitoring state. Thus when you make any changes to show new status you will need to temporarily set skipsUndoManager to true. Since in an editor you need to make each set of changes within a transaction anyway, you can do that by passing null as the second argument to Diagram.commit or Model.commit, where the first argument is a function that makes all of the diagram or model modifications for that transaction.
This is demonstrated in the Shop Floor Monitor sample, Shop Floor Monitor | GoJS Diagramming Library. Look at the randomProblems function.
Alternatively, if your app is only a monitoring diagram, then you don’t need to enable the UndoManager at all, and you can just make the modifications that you want. Although we still recommend wrapping sets of changes within a transaction, just to make sure everything is updated correctly. The Production Process sample, Production Process Diagram with Details and Animated Flows | GoJS Diagramming Library, demonstrates this along with its companion editor sample app, Production Process Diagram Editor | GoJS Diagramming Library.