[BUG] CyLeaflet: Click position mismatch about dash-cytoscape

[Farkites]

This issue doesn't only apply to CyLeaflet AIO component. It is caused when the Cytoscape component is loaded and then its position on the DOM changes. I have been able to reproduce this behaviour by inputing a large number of elements to Cytoscape and having a dcc.Markdown above it. For some reason, the content in the dcc.Markdown loads after the Cytoscape so this is pushed down.

Easier ways to reproduce this would be to change the style of the elements around the Cytoscape component via callback. Any changes that result in modifying the position of the Cytoscape component will cause this mouse mismatch. For example, if you look closely at the video attached in the description it's possible to see that the mismatch is only vertical and of the exact height of the text between the title and the Cytoscape component.

The issue is solved by calling the cytoscape function cy.resize(), which is equivalent to resizing the window manually (as shown in the video).

The problem is where do we call this function since it can't run automatically when the DOM changes?
A partial solution would be to add it on a viewport event and on ('dragfree add remove') so we can make sure that only the first click is mismatching.

This code can be used to replicate the issue.

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

lat_init = 45.5
lon_init = -73.576

elements = [
    {"data": {"id": str(x), "lat": lat_init + x / 1000, "lon": lon_init}}
    for x in range(10)
]

stylesheet = [
    {
        "selector": "node",
        "style": {
            "width": 1000,
            "height": 100,
            "background-color": "red",
        },
    },
]


def serve_layout():
    return html.Div(
        children=[
            html.H1("DASH CYTOSCAPE"),
            html.Hr(),
            dcc.Markdown(
                """
                    * Several
                    * lines
                    * to
                    * show
                    * mismatch
                """,
                id="text",
            ),
            cyto.CyLeaflet(
                id="cyleaflet",
                cytoscape_props=dict(
                    elements=elements,
                    stylesheet=stylesheet,   
                )
            ),
            html.Button("Show/hide text", id="btn")
        ],
    )

@callback(
    Output("text", "style"),
    Input("btn", "n_clicks")
)
def click(click):
    if not click or click % 2 == 0:
        return {"display": "block"}
    return {"display": "none"}

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


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