Model data has to be passed at multiple places for proper rendering of Family Tree

[anuj9196]

I'm using gojs-angular in my Angular 8 application.

I followed the instructions from the Family Tree example: https://gojs.net/latest/samples/familyTree.html

But to render the family tree using gojs-angular, I have to pass the family data at three different places.

1. nodeDataArray input of the component
2. modelData input of the component
3. Also assign to go diagram model property.

Recreate Issue

I created an example stackblitz: https://stackblitz.com/edit/angular-gojs-family-tree

Remove any of the above property and the graph rendering will fail.

Environment

Angular: 8
gojs-angular: 1.0.0
gojs: 2.1.5

[WalterNorthwoods]

1. Yes, the nodeDataArray is required.
2. No, the modelData is not required -- it is only the shared data for the whole model, which may be used even if there are no nodes at all. However, it is infrequently used. https://gojs.net/latest/api/symbols/Model.html#modelData
3. Your initDiagram function should not be assigning Diagram.model, since passing the nodeDataArray will update the Model.nodeDataArray both initially as well as whenever that @input is changed. However, there shouldn't be any penalty for doing so other than wasted time and space.

https://gojs.net/latest/intro/angular.html

By the way, I was unable to run your stackblitz sample, even using two different browsers.

[anuj9196]

@WalterNorthwoods may be I'm doing it wrong.

I tried again and I'm attaching the screenshot of each scenario.

1. By removing dia.model = new go.TreeModel(this.familyData);
   https://ibb.co/sjtH6Qn

2. By removing [modelData]="familyData"
   https://ibb.co/vVR281t

3. By removing [nodeDataArray]="familyData"
   https://ibb.co/xCfJ6Z2

You can see in all the screenshots the diagram is not as expected and in the 3rd one, it's working even without nodeDataArray although diagram is not rendered but legend is there.

with modelData removed, its giving error in the console.

[WalterNorthwoods]

1. Yes, because the default model is a GraphLinksModel, but your app wants to use a TreeModel, you do need to set dia.model = new go.TreeModel();. But you shouldn't need to pass the node data array at that time.
2. That looks like a bug. Thanks for reporting it. For now you can just pass an empty object.
3. We'll investigate this tomorrow.

[rjohnson465]

Re: 2) I just released gojs-angular 1.0.1, which makes the "modelData" @input property for Diagram / Palette Components truly optional. You can now install it via npm or download it from the repo here

Re: 3) Yes, your Diagram will still render if you do not provide a nodeDataArray property (or linkDataArray property), but of course, it has no Nodes to render, so it appears blank.