Bug with Dash Cytoscape: mouse events get an offset


So one colleague and I are working on a network visualization tool called WikiChron-networks that will allow to visualize different network representations of wiki communities. And for that we are using the new Dash Cytoscape component.

However, working with that we have encountered an issue we don’t know how to solve. Our tool has a left sidebar that can be hidden or shown by the user. The problem is that, if our app starts with the sidebar hidden, it works OK as long as the sidebar is hidden; but when the user hides the sidebar all the mouse events corresponding to the cytoscape component get an offset of the same width of the sidebar. Similarly, if the app starts with the sidebar unfolded, all the cytoscape events get an offset of the same width of the sidebar but in the opposite direction than the previous case.

And here it’s our open issue in Github regarding this bug.

I haven’t found the source of the issue yet, so that’s why I haven’t opened an issue in github yet, but I think it’s related with how the react-cytoscape.js component catches the mouse events. I open this thread here, in the hope that we can collaborate to find the source of the problem and sort it out. Maybe @xhlu could help us out?!

Another more isolated way to reproduce it would be to have a layout where some space can be added or removed, and check if adding / removing that space affect where the events for the cytoscape component are trigger.