styles overriding

[joseberlines]

with this graph and style:

claims_cyto= '''{
    "nodes": [
        {"data": { "id": "1", "label":"apparatus"} },
        {"data": { "id": "2", "label":"apparatus"}},
        {"data": { "id": "3", "label":"apparatus"}},
        {"data": { "id": "4", "label":"method"}},
        {"data": { "id": "5", "label":"method"}},
        {"data": { "id": "6", "label":"method"}}
        ],
    "edges": [
        {"data": { "source": "1", "target": "2" }},
        {"data": { "source": "1", "target": "3" }},
        {"data": { "source": "2", "target": "3" }},
        {"data": { "source": "3", "target": "4" }},
        {"data": { "source": "6", "target": "5" }}

    ]
  }'''

my_style = [
    {'selector': 'node[label="apparatus"]','style': {
        'font-family': 'helvetica',
        'font-size': '20px',
        'label': 'data(label)',
        'background-color':'red'},
    'selector': 'node[label="method"]','style': {
        'font-family': 'helvetica',
        'font-size': '20px',
        'label': 'data(label)',
        'background-color':'green'}},
    ]

I dont understand why the label=method style overrides the label=apparatus and the nodes with apparatus dont get any color. Why? ( I would expect the grey nodes to be red)

[ianhi]

I'm also confused by this. Interesting if you flip the style definition then only the apparatus nodes end up colored:

my_style = [
    {'selector': 'node[label="method"]','style': {
        'font-family': 'helvetica',
        'font-size': '20px',
        'label': 'data(label)',
        'background-color':'green'},

     'selector': 'node[label="apparatus"]','style': {
        'font-family': 'helvetica',
        'font-size': '20px',
        'label': 'data(label)',
        'background-color':'red'}
    },
    ]

[ianhi]

My guess is that this behavior is intrinsic to cytoscape.js that is what handles all of the actual interpretation of the style and applying it to the nodes.

[joseberlines]

But that means that the approach of "adding" styles to the style sheet assuming you can override all others is not correct. As mentioned in other issue #197 it is not clear to me what the coder is supposed to do a)update style sheet b) rewriting it from scratch c) In any case build the entire Graph again with new style data.

[marimeireles]

I also don't understand many of these keywords. I'd recommend opening an issue upstream. I've recently tried a few of these myself and couldn't grasp how they work, I imagine is just because I don't know CSS? Regarding to your last comment I'm moving this discussion to: https://github.com/cytoscape/ipycytoscape/issues/56