edge-control-points.js: findEdgeControlPoints - Cannot read properties of undefined (reading 'source')

[jdstapleton]

Before you post

A request for help or a request for a how-to should be directed to Phind.

If your issue pertains to an extension, your issue should be filed in that extension's repository -- not here.

Environment info

• Cytoscape.js version : 3.31.0
• Browser/Node.js & version : Chrome 131.0.6778.265 (Official Build) (64-bit)

Current (buggy) behaviour

What does the bug do?

TypeError: Cannot read properties of undefined (reading 'source')
at _loop2 (cytoscape.esm.mjs:23132:25)
at BRp$c.findEdgeControlPoints (cytoscape.esm.mjs:23286:5)
at BRp$a.recalculateEdgeProjections (cytoscape.esm.mjs:23621:8)
at BRp$7.recalculateRenderedStyle (cytoscape.esm.mjs:24265:8)
at Object.updateEleCalcs2 [as fn] (cytoscape.esm.mjs:24195:9)
at beforeRenderCallbacks2 (cytoscape.esm.mjs:26820:12)
at renderFn2 (cytoscape.esm.mjs:26836:7)

https://github.com/cytoscape/cytoscape.js/blob/v3.31.0/src/extensions/renderer/base/coord-ele-math/edge-control-points.js#L788-L800

Stepping through the code when it breaks, !pairInfo.hasUnbundled is truthy, so it ges into that block. pllEdges becomes an empty collection (so I guess no parallelEdges has isBundledBezier is true.
Then clearArray removes all entries from pairInfo.eles.
Since pllEdges is empty, no new edges are added to pairInfo.

So then when line 799 gets executed, pairInfo.eles[0] makes firstEdge undefined. Which then line 800 blows up as it tries to call source() on an undefined object.

after this happens, cytoscape stops drawing anything. So none of the nodes or edges are on the graph. When I interspect cytoscape core object's elements or nodes, I see the collections filled with the nodes/edges I expect, just nothing is being displayed.

Desired behaviour

For it not to throw an Cannot read properties of undefined (reading 'source'), and nodes and edges should be rendered.

What do you expect Cytoscape.js to do instead?

I don't know the code

Minimum steps to reproduce

What do you need to do to reproduce the issue?

I don't know cytoscape code well enough to set this up. But what my internal app is doing at the time of the error is calling remove() to all elements on the graph (cy.elements().remove()), followed by cy.add(newElements) (which has all different IDs). Then it does a layout of breadthfirst over the new elements.
Afterwards ... there is an array of cytoscape selectors that it runs over to addClass('.nonSelectedItem') on. This is where it will blow up.

cy.nodes('node[type = "Hello"], node[type = "World"]').addClass('.nonSelectedItem');

The style linked to the class is:

{ selector: '.nonSelectedItem', css: { display: 'none' } }

Fork/clone this JSBin demo and reproduce your issue so that your issue can be addressed quickly and effectively:

I failed to create a simplified version that replicated the issue. But my attempt is: https://jsbin.com/ganahuqacu/1/edit?html,css,js,console,output

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

• Ensure that the reporter has included a reproducible demo. They can easily fork this JSBin demo: http://jsbin.com/fiqugiq
• The issue has been associated with a corresponding milestone.
• The commits have been incorporated into the corresponding branches. Bug-fix patches go on
  • master,
  • unstable, and
  • the previous feature release branch (e.g. 1.1.x if the current release is 1.2).
• The issue has been labelled as a bug, if necessary.

[maxkfranz]

Would you try #3323?