Link exists in GoJS and React State but doesn't show up in Diagram

I am facing a peculiar issue -

I am using gojs with gojs-react with state sync between the react state and gojs implemented using handleModelChange incrementalChange event.

The scenario I am facing is -
I have nodes and links added using diagram.commit then synced up to the react state with skipsDiagramUpdate set to true in handleModelChange.

Now say we added nodes - A and B and links A->B and B->C

NOTE: Node C is not added to the diagram at this point.

Later we add Node C using diagram.commit expecting the B->C will now show up but it is not showing.

I checked both the GoJS links using findLinkByExample the B->C exists and also in the react-state. But, the link isn’t showing in canvas.

Any idea or debug technique will be of immense help here.

I do not understand. You say the user added a link from B to C. Then the user adds C again. How is that possible unless the user deletes C first, causing that link to be removed? I suppose an undo will cause both the C node and B->C link to reappear.

If the user adds a new node like C, the diagram cannot presume to know to automatically add a link from B to new C. But you could implement that policy if you want. Just think about what you should do if there are several nodes like C or like B.

The C node is not added from the first. The link between B->C is added first. It doesn’t show because the C node is not yet added to the diagram.

Then, the C node is added. So now the already existing B->C link should show up. But it doesn’t.

Basically, the link between B and C is added before the node C is actually added. Now when the C node is added, the link should show up. Right?

Edit: Changed the wording in the original post to make it more clear.

Within one transaction, we go to considerable trouble to make that expectation true.

But over multiple transactions, that is not the case. After all, if there can be partially or completely disconnected links for arbitrarily long times, why should the addition of a node that a link had been connected with cause an automatic connection with that node? I’ll investigate the possibilities.

Apparently what you are expecting is exactly what happens. For example, given this model:

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen" },
      //{ key: 4, text: "Delta", color: "pink" }
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 3, to: 4 },
      { from: 4, to: 1 }
    ]);

the three nodes Alpha, Beta, and Gamma are shown as you might expect, but there are no visible links that connect with the non-existent Delta node.

Then we add that node with the expected key:

    myDiagram.model.commit(function(m) {
      m.addNodeData({ key: 4, text: "Delta", color: "pink" });
    });

And voila, not only is the Delta node added, but it automatically connects with Alpha and Gamma by the previously existing unseen links in the model.

Right. I have depended on that in another diagram model we use. It works fine in most cases.

One particular instance it’s not working fine. I will try and add a small reproduction of it. I guess that will help debug it.

Ah, the problem is that the implementation of Model.mergeNodeDataArray is clearing all of the unresolved references, under the assumption that the whole collection of nodes is known at that time. The same is true for the Model.nodeDataArray property setter.

We will change that behavior for the next release, 2.1.30. I hope next week.