Reasonable zooming in Dash cytoscape

Dash Python
1

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