Hi all.
I struggle with zooming in on my dash cytoscape graph. It is quite big (circa 400 nodes) so I’d like to zoom-in to eg see the centre of the graph more clearly. But the zooming in is not quite possible really. The nodes get huge (as if they were the ones getting scaled) + the scrolling wheel is quite sensitive. I tried using the dcc.Slider
with a zoom-changng callback, but unless I set fit
to False
in the layout, then it wouldnt work at all. Without fit: True
on the other hand I had big problems with even setting the zoom to work at all, to see anything on the screen.
I aim to create simple and interactive graph visualisations of rather big networks so I’d appreciate help with implementing a mechanism that would help with implementing zoom.
What would be quite enough is for the nodes to stay fixed size upon zooming but just having the graph zoomed.
Code
# colours are freely inspired by adobe's colourwheel with the analogous rule
app.layout = html.Div(
[
cyto.Cytoscape(
id='cytoscape-layout-1',
elements=elements,
style={
'width': '100%',
'height': f"{HEIGHT}px",
"background-color": "ghostwhite",
"border-radius": "25px",
},
layout={
'name': 'preset',
"fit": True,
},
stylesheet=stylesheet,
userZoomingEnabled=True,
zoomingEnabled=True,
zoom=100,
autolock=True,
responsive=True,
panningEnabled=True,
pan={"x": 0, "y": 0},
),
html.Div(
id="checklist-div",
draggable="true",
children=[
pseudo_legend,
dcc.Checklist(
id="route-checklist",
options=[
{"label": f"vehicle {vid} route", "value": f"route{vid}"}
for (vid, _) in vehicle_colors
],
value=[f"route{vid}" for (vid, _) in vehicle_colors],
),
],
style={
"display": "flex",
"flex-direction": "column",
"width": "15%",
},
),
],
style={
"display": "flex",
"flex-direction": "row-reverse",
"justify-content": "space-evenly",
"background-color": "white",
},
)
when I add a placeholder callback like
@app.callback(
Output("cytoscape-layout-1", "stylesheet"),
Input("cytoscape-layout-1", "zoom"),
)
def update_node_sizes(zoom):
print(zoom)
return stylesheet
it just keeps printing the initial zoom again and again when I change it with the scrolling wheel. I thought I could use this callback to dynamically change nodes’ styling but it doesnt seem to be possible
Any help would be greatly appreciated