Adjust shape size in cytoscape.js with dagre layout

Question

I am trying to resize the shapes of the nodes to the size of the node text. I followed instructions from https://github.com/cytoscape/cytoscape.js/issues/649 . However:

1. The shapes always end up with height = width
2. The size of all shapes is the same.
3. The shape size seems to reach a max above which it can't grow.

(I am not sure if this has something to do with dagre layout.)

I am using the following libraries with the dagre layout:

• cytoscape.min.js
• dagre.min.js

• cytoscape-dagre.js

  container: document.getElementById('cy'),
  boxSelectionEnabled: false, autounselectify: true,
  
  layout: {name: 'dagre', rankDir: 'LR', align: 'LR'},
  
  style: [{
      selector: 'node',
      style: {
          'content': 'data(name)',
          'label': 'data(name)',
          'text-opacity': 1,
          'text-valign': 'center',
          'text-halign': 'center',
          'text-wrap': 'wrap',
          'font-size': 9,
          'background-color': '#AAA',
          'shape':'rectangle',
          'width': 'data(width)' * 50,
          'height': 'data(height)' * 50 }
  },{
      selector: 'edge',
      style: {
          'width': 4,
          'content': 'data(name)',
          'target-arrow-shape': 'triangle',
          'line-color': 'data(color)',
          'text-wrap': 'wrap',
          'target-arrow-color': 'data(color)',
          'font-size': 10,
      }
  }]
  

Answer 1

You've specified invalid style. "somestring" * 50 is NaN.

You want width: label, as indicated in the docs: http://js.cytoscape.org/#style/node-body