Self-edges missing with longer node labels

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]

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