Self-edges missing with longer node labels

[jvilk]

I believe this bug is in cytoscape.js, but it could also be an issue with cytoscape-dagre.

Issue type:

Bug report

Environment info

• Cytoscape.js version: 3.2.7
• Browser/Node.js & version: Any

Current (buggy) behaviour

See codepen here: https://codepen.io/jvilk/pen/aERMMW

There is a self-edge from n1 to n1, but it is not being rendered. n1 has the label "Node2345678". If the label is changed to be one character smaller, e.g. "Node234567", the edge appears.

Desired behaviour

The self-edge should be rendered.

Minimum steps to reproduce

See Codepen: https://codepen.io/jvilk/pen/aERMMW

Here's the relevant code from the codepen:

const targetDiv = window.output;
const nodes = [
  {"data":{"id":"n1","label":"Node2345678"}},
  {"data":{"id":"n2","label": "Node234567"}}
];
const edges = [
  // Does not appear due to node label length
  {"data":{"id":"e1","source":"n1","target":"n1","label":"Edge1"}},
  // Does appear
  {"data":{"id":"e2","source":"n2","target":"n2","label":"Edge2"}}
];
const cy = cytoscape({
        container: targetDiv,
        boxSelectionEnabled: false,
        autounselectify: true,
        textureOnViewport: true,
        hideEdgesOnViewport: true,

        style: [
          {
            selector: 'node',
            css: {
              'label': 'data(label)',
              'text-valign': 'center',
              'text-halign': 'center',
              'width': 'label',
              'height': 'label',
              'shape': 'roundrectangle',
              'padding': '10px',
              'background-color': "#4fbcef"
            }
          },
          {
            selector: 'edge',
            css: {
              'target-arrow-shape': 'triangle',
              'curve-style': 'bezier',
              'label': 'data(label)',
              'text-background-color': 'white',
              'text-background-opacity': '1',
              'text-border-color': 'black',
              'text-border-opacity': '1',
              'text-border-width': '1',
              'text-background-shape': 'rectangle',
              'text-background-padding': '3px'
            }
          },
          {
            selector: ':selected',
            css: {
              'background-color': 'black',
              'line-color': 'black',
              'target-arrow-color': 'black',
              'source-arrow-color': 'black'
            }
          }
        ],

        elements: {
          nodes,
          edges
        },

        layout: {
          name: 'dagre'
        }
      });

Is this a bug in Cytoscape, or Cytoscape-dagre? Perhaps Cytoscape-dagre is providing Cytoscape w/ invalid edge coordinates (that do not take node size into consideration), and Cytoscape is culling the edge before rendering?

[maxkfranz]

Your bezier (loop) edges are not sufficiently far away from the lhs of the node, given the w:h ratio, to allow for intersection calculations to find a proper solution.

See http://js.cytoscape.org/#style/bezier-edges

You need to adjust the distance (or step size) appropriately for your stylesheet, e.g. https://codepen.io/anon/pen/ypRmjb

Aside: unpkg (https://unpkg.com/#/) works as a cdn for all npm packages

[maxkfranz]

If you try successively smaller distances in your demo, you will see roughly the point at which intersections fail.

[jvilk]

Excellent; thanks for your help! That solution works for me.

If it's possible / easy to do, maybe you could emit a warning when this happens? When I noticed some edges were missing, I spent some time thinking my application had a bug that produced invalid graphs. It took a bit longer to realize they weren't being rendered at all!

Other than that, feel free to close this bug. Thanks for the excellent library.

[maxkfranz]

There might be some automatic mitigation that could be added as a new feature, but I'd have to investigate. It probably won't give as good results as manually specifying a good value, so either way there should be a docs addition.

[maxkfranz]

Adding to Future milestone, in case an automatic mitigation can be found to show the edge with an adjusted control point. For 3.3, we'll just use a console warning: #2093