Cytoscape disappearing edges with bezier curves and nodes moving/longer labels in nodes

Question

I am using cytoscape with bezier curves but edges are disappearing when having a node with longer label or just moving source node next to target node.

• Video: https://www.screencast.com/t/N2f5eZ5M7
• Runnable sample: https://stackblitz.com/edit/web-platform-vpl72r?file=index.html

I have already seen "Edge xxxxx has invalid endpoints and so it is impossible to draw" warning and searched corresponding threads but couldn't find a solution.

Does anyone know how to handle that ?

Answer 1

I see some warnings on the console

The style value of label is deprecated for width

The style value of label is deprecated for height

After I deleted 'width': 'label', 'height':'label', I no longer observe such problem.

--- Update 1.1 ---

but I'd like to have node's dimensions based on label's dimensions.

To do this I think you should write a function style. See the below example. In the example, you can see that we are setting the size of the nodes dynamically based on their name length. I assumed name is a string that stores labels.

cy.style().selector('node').style({
      'width': (x) => { return x.data('name').length + 'px;' }
      'height': (x) => { return x.data('name').length + 'px;' }
    }).update();