Dash/Cytoscape Nested JSON Selector Styling

Question

So I have a JSON data file that I am using with Dash/Cytoscope:

    "data": {
        "label": "Customer",
        "properties": {
            "score": 8.0,
        }
    }

I need to compare 'score' with the selector to see if it is bigger than 9. So far I have tried:

'selector': 'node[properties[score > 9]]'
'selector': '[score > 9]'
'selector': '[properties[score > 9]]'

Unfortunately nothing has worked so far, just invalid syntax.

Answer 1

As canbax pointed out, using functions inside the stylesheet should do the trick.

I added a border-color depending on a nodes score property like this, but you can customize it as you like:

'border-color': function (node) {
    if (node.data('properties').score >= 9) { return 'green'}
    else { return 'black' }
},

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': function(node) {
          if (node.data('properties').score >= 9) {
            return 'green'
          } else {
            return 'black'
          }
        },
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: 'n0',
          "properties": {
            "score": 9.0
          }
        }
      },
      {
        data: {
          id: 'n1',
          "properties": {
            "score": 10.0
          }
        }
      },
      {
        data: {
          id: 'n2',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n3',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n4',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n5',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n6',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n7',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n8',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n9',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n10',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n11',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n12',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n13',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n14',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n15',
          "properties": {
            "score": 8.0
          }
        }
      },
      {
        data: {
          id: 'n16',
          "properties": {
            "score": 8.0
          }
        }
      }
    ],
    edges: [{
        data: {
          source: 'n0',
          target: 'n1'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n3'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n7'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n11'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n4'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n5'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n6'
        }
      },
      {
        data: {
          source: 'n6',
          target: 'n8'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n9'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n10'
        }
      },
      {
        data: {
          source: 'n11',
          target: 'n12'
        }
      },
      {
        data: {
          source: 'n12',
          target: 'n13'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n14'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n15'
        }
      },
    ]
  },

  layout: {
    name: 'dagre',
    padding: 5
  }
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 75%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>