Lingering links after changing diagram model

It happens rarely, but it does happen and I’m trying to get to the root of it.

As you can see in the screenshot I’ve attached, there is a link which says “2k” on it. That is not in the newly changed model, but it does exist in a previous older model.

How do you switch models?

diagram.model = new GraphLinksModel(model.nodes, model.edges);

Replacing the Diagram.model should do what you would expect, so I do not see how you could have a link left over from a previous model.

Can you provide any characterizations about what is different when that link remains? How can I reproduce the problem?

I’m using a redux-like environment and I was passing along the diagram item on every click. And, somehow the item was remaining as the old item. It’s my environment, not gojs.

Weird that even if that object no longer exists, gojs will still try to draw it.

Are you saying that that Link had been treated specially in your code just before you replaced the model?

Are you sure there is no shared memory between the two models?

Well,

Because gojs doesn’t clone the model being passed (like the nodes and links), then probably some links/nodes get shared…

I still need a lot more information in order to guess what was happening.

When you see that stray Link, can the user select it?

Yes, the user can select it. It’s like this: on the click event of the diagram I dispatch an action (redux) and then in the reducer I focus on a button (which is hidden - for WCAG purposes). But, the focus of the button triggers the diagram to select the item (but, because of the react-like environment, the focus function sends the previous link, thus making the diagram link select the old link)

The Diagram.model property setter explicitly clears out the Diagram.selection collection and other places where there might be references to Parts of the old Model.

Why does the (HTML?) button getting focus cause the selection to change?

Why are you re-creating the diagram when it appears that you want to do something with the clicked Part?

For the sake of WCAG I am generating buttons for all nodes and all links. When the user focuses on one of those buttons I make the diagram select that node. The voice-over then reads everything nicely and the user thinks he’s actually tabbing on the graph

Ah, that’s clever. OK, when a particular button gets focus, how do you select the corresponding Part?

I use diagram.select(item);

And, I was passing along the whole item. Now I’m just passing along the key and it seems to work just fine (no more lingering links)

That is exactly what I was guessing was happening. I’m glad you figured that out.

But for performance reasons I hope you are not replacing the model unnecessarily. See what the gojs-react component does:

I see you’re using mergeNodeDataArray. But, that doesn’t replace the link/node data with the same key, right?

Cause, I also have different data every time I assign a new model (like for the same link, different values to display etc)

The merge… methods use the key value to find the corresponding Node or Link in the current Model, and then update its properties to correspond to the given data properties.

Under the assumption that the props data is immutable, it makes a deep copy of any data that it adds to the GoJS Model, which is assumed to be mutable.