ReactDiagram not updating properly model changes?

GoJS
1

Hi Northwoods team,

I am a developer (with a GoJS license) with a question regarding the ReactDiagram component.
We have setup a public Github repo scoping down and explaining the issue we are facing, to make it easier for everyone: https://github.com/dgulabs/gojs-react-minimal

After yarn installing/starting, you could see two diagrams. On the left side, after an interval of 1 second, there is a change in the nodes and links passed to ReactDiagram, “moving” Step 2.A outside Group A, having it after Step 1. We expect that this diagram on the left is rendered like the one on the right, which is only rendering the same nodes/links attributes that we pass to ReactDiagram after 1 second on the left diagram… the links are properly updated, but not the nodes…

Could you help us debug if we are doing anything wrong here? Thank you!

2

Changes to the node and link data are merged into existing model data. These merges are not destructive, so if you have a property set in your data that you no longer want set, you need to explicitly make it undefined in the new data object.

In your case, this means setting Step 2.A’s group property to undefined in nextNodes. I didn’t check if there were any other missing properties between the initial data and next set.

  {
    "thumbnailUrl": "/images/no-instrument-thumbnail.png",
    "phaseName": "Whatever",
    "name": "Step 2.A",
    "timers": { "surgicalTimers": [], "repetitiveTimers": [] },
    "note": null,
    "duration": "1 min",
    "isGroup": false,
    "role": "Surgeon",
    "groupType": null,
    "key": "8e8bfd07-f4db-4802-87fa-0d1700bb51bf",
    "group": undefined
  }

See the notes about the node/linkDataArray props here.

3

Thank you very much, that was it! The behaviour is still a bit confusing, but good to know :)