[BUG] CyLeaflet: Click position mismatch

[Emily KL]

Description

Under some conditions, the click position of the user does not match the click position interpreted by Cytoscape. This results in, for example, the user clicking on a node but Cytoscape interpreting the click as below the node. The issue disappears after the browser window is resized.

Suspect this is caused by some nuance of CSS styling messing up the position of the Cytoscape canvas, but difficult to debug as I have not been able to reproduce on my machine.

Screen Recording

click.position.mismatch.mov

Steps/Code to Reproduce

import dash
from dash import html, dcc, callback, Input, Output
import dash_cytoscape as cyto
import dash_leaflet as dl


ELEMENTS = [
    {"data": {"id": "a", "label": "Node A", "lat": 45.519, "lon": -73.576}},
    {"data": {"id": "b", "label": "Node B", "lat": 45.521, "lon": -73.574}},
    {"data": {"id": "c", "label": "Node C", "lat": 45.520, "lon": -73.572}},
    {"data": {"id": "ab", "source": "a", "target": "b"}},
]

def serve_layout():
    return html.Div(
        children=[
            html.H1("CyLeaflet: Initial click position mismatch / Resize issue"),
            html.Hr(),
            dcc.Markdown("""
            * Make sure you refresh the browser (F5)
            * After the initial load, try to click in the center of a Node B.
            * Notice the grey circle displayed BELOW your click location, resulting in a pan insted of a node selection or a node drag.
            * To set things straight, here are 2 ways i found:
                * Resizing the browser window
                * Modifify the application file (.py), save, and let it reload by itself
            * But then if whenever you refresh the browser, the problem comes up again.
            """),
            cyto.CyLeaflet(
                id="cyleaflet",
                cytoscape_props=dict(
                    elements=ELEMENTS,
                ),
            ),
        ],
    )


app = dash.Dash(__name__)
server = app.server
app.layout = serve_layout


if __name__ == "__main__":
    app.run_server(debug=True)

Versions

OS: Windows
Browser: Chrome