Loading data from JSON when using gojs-angular 2

In my app I load the data from a JSON stream coming back from server. Works fine but not with the new gojs-angular 2 wrapper.

I have tried to do it in the basic sample, doesn’t work either. Relevant code from sample :

  1. comment out intial data
  public state = {
    // Diagram state props
    diagramNodeData: [
      // { id: 'Alpha', text: "Alpha", color: 'lightblue' },
      // { id: 'Beta', text: "Beta", color: 'orange' },
      // { id: 'Gamma', text: "Gamma", color: 'lightgreen' },
      // { id: 'Delta', text: "Delta", color: 'pink' }
    ],
    diagramLinkData: [
      // { key: -1, from: 'Alpha', to: 'Beta', fromPort: 'r', toPort: '1' },
      // { key: -2, from: 'Alpha', to: 'Gamma', fromPort: 'b', toPort: 't' },
      // { key: -3, from: 'Beta', to: 'Beta' },
      // { key: -4, from: 'Gamma', to: 'Delta', fromPort: 'r', toPort: 'l' },
      // { key: -5, from: 'Delta', to: 'Alpha', fromPort: 't', toPort: 'r' }
    ],

2.modify afterViewInit like this

 public ngAfterViewInit() {
    if (this.observedDiagram) return;
    this.observedDiagram = this.myDiagramComponent.diagram;


    //  console.log(this.observedDiagram.model.toJson());

    const data = JSON.parse(`{ "class": "GraphLinksModel",
    "nodeKeyProperty": "id",
    "linkKeyProperty": "key",
    "linkFromPortIdProperty": "fromPort",
    "linkToPortIdProperty": "toPort",
    "modelData": {"prop":"value"},
    "nodeDataArray": [
  {"id":"Alpha","text":"Alpha","color":"lightblue"},
  {"id":"Beta","text":"Beta","color":"orange"},
  {"id":"Gamma","text":"Gamma","color":"lightgreen"},
  {"id":"Delta","text":"Delta","color":"pink"}
  ],
    "linkDataArray": [
  {"key":-1,"from":"Alpha","to":"Beta","fromPort":"r","toPort":"1"},
  {"key":-2,"from":"Alpha","to":"Gamma","fromPort":"b","toPort":"t"},
  {"key":-3,"from":"Beta","to":"Beta"},
  {"key":-4,"from":"Gamma","to":"Delta","fromPort":"r","toPort":"l"},
  {"key":-5,"from":"Delta","to":"Alpha","fromPort":"t","toPort":"r"}
  ]}`);



    this.state = produce(this.state, draft => {
      draft.diagramNodeData = _.cloneDeep(data.nodeDataArray);
      draft.diagramLinkData = _.cloneDeep(data.linkDataArray);
      draft.skipsDiagramUpdate = false;
    });

    this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)

(I used lodash for cloning but you can use anything else)

I get a blank diagram instead of the nodes and links from json. What is the correct way to do this with the new wrapper ?

If you have produced data via JSON.parse, you don’t need to clone it again – it’s all “fresh” memory.

I’m unable to test this out right now; I’ll try it when I get a chance.

yes ok, the cloning is a copy paste from my own app in which i actually need it but you are right it is not necessary here. The issue remains the same. Diagram is blank.

can we get some support on this please ? it’s rather urgent as we have a tight deadline.

Sorry about that – I’m switching to a new machine and I have been finding all kinds of things that I’m missing. And my old machine is running a too-old version of Node.js, but I don’t want to upgrade it.

This is a tricky one.

Long answer:
gojs-angular delays the initialization of the model after calling initDiagram using Diagram.delayInitialization. So, the original node data (nothing) is passed to initDiagram, your ngAfterViewInit function in AppComponent fires (so for a split moment, you do have the right data!), then the diagram model is initialized, only after all this, with the initial data values (nothing). So, you are left with nothing.

This will only really be an issue when you initialize your Diagram component, so all later state changes can be made simply with immer produce calls as I’m sure you’ve seen. But for now, your should wrap your initial data setting inside its own delayInitialization call.

Short answer: Do this:

this.myDiagramComponent.diagram.delayInitialization(() => {
    this.state = produce(this.state, draft => {
      draft.diagramNodeData = data.nodeDataArray;
      draft.diagramLinkData = data.linkDataArray;
     /// etc.....
    });
  })

Thanks, that does the trick finally. The graph is loaded.