plotly / react-cytoscapejs

React component for Cytoscape.js network visualisations
MIT License
477 stars 68 forks source link

Node labels not visible when using stylesheet prop #44

Closed PButcher closed 4 years ago

PButcher commented 4 years ago

Whenever I include the stylesheet prop, node labels do not show. Is this expected behaviour?

Here's a quick example using some code from the examples in the repo's README:

<CytoscapeComponent
  style={{
    width: "600px",
    height: "600px"
  }}
  stylesheet={[
    {
      selector: "node",
      style: {
        width: 20,
        height: 20,
        shape: "rectangle"
      }
    },
    {
      selector: "edge",
      style: {
        width: 15
      }
    }
  ]}
  elements={CytoscapeComponent.normalizeElements({
    nodes: [
      {
        data: { id: "one", label: "Node 1" },
        position: { x: 0, y: 0 }
      },
      {
        data: { id: "two", label: "Node 2" },
        position: { x: 100, y: 0 }
      }
    ],
    edges: [
      {
        data: {
          source: "one",
          target: "two",
          label: "Edge from Node1 to Node2"
        }
      }
    ]
  })}
/>

The node labels do not appear. Removing the stylesheet prop results in the node labels reappearing. This issue is visible in a number of screenshots/gifs from various issues on this repo, although no one has mentioned it.

PButcher commented 4 years ago

Found the solution. The defaults for the stylesheet prop include the following line:

label: 'data(label)'

Including that line in my node definition fixed the issue.

70nyIT commented 3 years ago

That should be put in documentation, I spent so much time around this (non) issue!