CODEWITHSUNDEEP
pythonpython-3.xnodesplotly-dashcytoscape
bison72
bison72

Reputation: 324

Customize individual node sizes in Dash Cytypscape

I wish to adjust individual node sizes based on a given value using Dash Cytoscape. However, I only managed to understand using 'selector' : 'node' to adjust size for ALL nodes. I could not figure out how to give a specific value (or at least width and height) to individual sample. Is there a way to manually give a node size value to individual sample? The code I currently have for ALL nodes is as below :

{       
        'selector': 'node',
        'style': {
                'content': 'data(label)',
                'width': '30%',
                'height': '30%'
        }
}

Thanks in advance.

Upvotes: 0

Views: 859

Answers (1)

John Collins
John Collins

Reputation: 2961

Yes, you can set a[n unique] ID value the dictionary key "classes"＊ for any of the nodes as defined listed in your elements parameter of a cyto.Cytoscape object.

E.g.,:

cyto.Cytoscape(
    id="network-output",
    elements=[
        {
            "data": {"id": "A", "label": "A"},
            "position": {"x": 75, "y": 75},
            "classes": "A",  # ← ＊This node now can be referenced ".A"  
        },
        {
            "data": {"id": "B", "label": "B"},
            "position": {"x": 200, "y": 200},
            "classes": "B",
        },
        {"data": {"source": "A", "target": "B"}},
    ],
    layout=my_layout,
    style=my_style,
    stylesheet=[
        {"selector": "node", "style": {"width": "50px", "height": "50px"}}
    ],
)

and then in the stylesheet parameter:

stylesheet = [
    {
        "selector": f".{value}",
        "style": {
            "background-color": "#FD8008",
            "background-opacity": "0.8",
            "border-color": "#00C1FF",
            "border-width": "2",
            "width": "55px",
            "height": "55px",
            "label": "data(label)",
        },
    }
]

where the variable value could be "A", or "B", or any other name you assigned per the classes key to any node in the elements. This way each node's style can be addressed uniquely, as needed. Including via callbacks where the output is the stylesheet for any Cytoscape.

Upvotes: 1

Related Questions