Unable to replace model/add nodes and links once app initializes in gojs sample

GoJS
#1

I am using the gojs angular sample application. In that application, i am trying to load the nodedataarray and linkdatarray from the server using some API calls.
Initially, when I was not using an API call, my node template was working absolutely fine.
as soon as I started data pulling from the server and replacing it with the diagram model using any of the ways it changes the look(UI representation) of the Node.

Expected or Initial:
image

After replacing model:
image

For e.g. it doesn’t bind my FullName property to text, it doesn’t bind my BackgroundColor property, Image, etc…

Am I missing anything? pls, help.

#2

Well, the first thing to look at is to make sure the Node.data object has exactly the properties and values that you are expecting. I’m betting that the data is wrong for some reason, and I’m hoping you can set breakpoints in your code or in the gojs-angular code to figure out what is going wrong.

#3

I was also thinking the same, but to verify it i did serialization of the API response (to json) and copy/ pasted same to diagramNodeData and diagramLinkData objects manually. That works absolutely fine.
So what my guess is when i am changing that programatically its not able to bind those properties.

can you share any sample which uses gojs-angular package and adds new node and links data programatically? it will be helpful.

#4

If gojs-angular-basic doesn’t do what you want, then I’m not sure we have any samples that do exactly what you are asking for.

How are you adding nodes and links? It should just be a matter of adding data to the model, all within a transaction.

#5

image
image836×78 9.05 KB

#6

If you are using gojs-angular, then your data should basically be immutable, right? Is that how your architecture is set up?

I think you should not be setting the actual Model.nodeDataArray directly, but through the component. But I’m not sure I understand how that would cause the incorrect data that you saw.

#7

I am not sure if i am following you, but i tried first setting up like this. i thought sincediagramNodeData object is passed into gojs-diagram then technically if i make any change to this it should automatically update.

But surprisingly when i am only doing this, it doesn’t add any node/link. so then i started trying all the other options.

image

Is it expected that if we change the json it doesn’t update diagram in real time ?

#8

Instead of setting Model.nodeDataArray directly, try setting it on the DiagramComponent. And similarly for GraphLinksModel.linkDataArray.