Where is the documentation for setting a Cytoscape node label width to the width of the label text?

One can set the width of the node to label and the node width will be based on the label text. However, I cannot locate any documentation for this behavior. I happened across it with other google searches.

I do now see with the code snippet that this feature is deprecated...? Has it been replaced with a new, modern method...?

I am also wondering if it is possible to base the size of the node on the background svg image and where this might be documented, if possible.

const cy = cytoscape({
  container: document.getElementById("chart"),

  elements: [
    {
      data: { id: "a", custom: "\uf3c5" }
    }
  ],

  style: [
    {
      selector: "node",
      style: {
        width: "label",
        "background-color": "#666",
        "text-valign": "center",
        "text-halign": "center",
        shape: "round-rectangle",
        label: "hello node width based on me"
      }
    }
  ],

  layout: {
    name: "grid",
    rows: 1
  }
});

.chart {
  color: red;
  width: 1000px;
  height: 400px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>

<div class="chart" id="chart">
</div>

Solution

The documentation you are looking for no longer exists. Using width: 'label', has been deprecated since Sep 14, 2020.

As you can see here, the main contributer of cytoscape.js deprecated this feature.

There are ways to still get a similar result, as can be seen in this StackOverflow answer:

{
    selector: 'node',
    style: {
        'width': (node) => { node.data('label') * magicNumber; },
        'height': (node) => { node.data('label') * magicNumber; },
    }
}

Below, I added an MRE with a working solution:

const cy = cytoscape({
  container: document.getElementById("chart"),

  elements: [{
    data: {
      id: "a",
      custom: "\uf3c5",
      name: "hello node width based on me"
    }
  }],

  style: [{
    selector: "node",
    style: {
      "width": (node) => {
        const ctx = document.createElement('canvas').getContext("2d");
        const fStyle = node.pstyle('font-style').strValue;
        const size = node.pstyle('font-size').pfValue + 'px';
        const family = node.pstyle('font-family').strValue;
        const weight = node.pstyle('font-weight').strValue;

        ctx.font = fStyle + ' ' + weight + ' ' + size + ' ' + family;
        return ctx.measureText(node.data('name')).width;
      },
      "background-color": "#666",
      "text-valign": "center",
      "text-halign": "center",
      "shape": "round-rectangle",
      "label": "data(name)",

    }
  }],

  layout: {
    name: "grid",
    rows: 1,
  }
});

cy.unbind('layoutready');
cy.bind('layoutready', function() {
  cy.fit();
  cy.center();
});

body {
  font-family: helvetica;
  font-size: 14px;
}

#chart {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

h1 {
  opacity: 0.5;
  font-size: 1em;
}

<!DOCTYPE>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape@3.28.1/dist/cytoscape.min.js">
  </script>
</head>

<body>
  <div class="chart" id="chart"></div>
</body>

</html>