When the sidebar is open, events on the cytoscape component get an offset

[Akronix]

When the left sidebar is open, there is an offset equals to the left side bar width for the events that are passed to the cytoscape component.

Extracted from #9

[xhluca]

Hey @Akronix! Do you know if the Cytoscape object is updated by a callback when you open the left sidebar? If not then this might be the cause, since sometimes the graph will visually update but the coordinates stay. A simple way to do that would be to add your sidebar as an input that usually updates your Cytoscape object.

[xhluca]

If this doesn't solve it, feel free to isolate the problem inside a simple react app, and use react-cytoscapejs and a sidebar library. I like to use create-react-app to setup my boilerplate.

[Akronix]

@xhlulu so you are suggesting to re-print the cytoscape component everytime the sidebar is shown/hidden?

Hum, we didn't need to do that for WikiChron classic. There we are just using plotly scatter plots inside the Graph component from dash-core-components.

[xhluca]

If that's possible to do, please try it out.

It is indeed possible that plotly figures are automatically resized, whereas Cytoscape objects need to be refreshed. This is because the plotly graphs were ported to Dash with a custom wrapping of plotly.js (it might have been updated to use react-plotly.js, will need to verify), whereas Cytoscape relies on the react-cytoscapejs library, which has a substantial difference in design, including how it is reloaded.

Thanks for raising this issue! I'll see what can be done on the Dash Cytoscape side, and make an update if it helps making it more consistent with Dash core.

In the meantime, feel free to isolate the example in a simple dash app with only the sidebar and Cytoscape.

[Akronix]

I'll try that. Thank you for your help @xhlulu!

[Akronix]

@xhlulu would it be possible to do that the Cytoscape coordinates were set relative to the outer container of the component, instead of absolute to the screen? Thus, if the html layout changes around, it does not affect the cytoscape coordinates.

[xhluca]

That's possible. Check out: http://js.cytoscape.org/#notation/position

[xhluca]

would it be possible to do that the Cytoscape coordinates were set relative to the outer container of the component, instead of absolute to the screen? Thus, if the html layout changes around, it does not affect the cytoscape coordinates.

If this is true, then the problem likely comes from react-cytoscapejs, in which case I highly encourage you to open an issue with a simple react example, where the maintainer (Max) could right away understand why the problem happens.

[xhluca]

@Akronix Were you able to figure out a solution? Feel free to open an issue here: https://github.com/plotly/react-cytoscapejs

[Akronix]

@Akronix Were you able to figure out a solution? Feel free to open an issue here: https://github.com/plotly/react-cytoscapejs

@xhlulu I worked around the problem adding a padding space equal to the extra offset when the sidebar is gets opened and removing it when the sidebar gets closed.

I have had no time to write a code example to isolate the problem to just the react cytoscape component with a collapsible element. Maybe I'll do later this week.

[xhluca]

Good luck!

On Wed, Feb 13, 2019, 3:07 PM Abel Serrano Juste <notifications@github.com wrote:

@Akronix https://github.com/Akronix Were you able to figure out a solution? Feel free to open an issue here: https://github.com/plotly/react-cytoscapejs

@xhlulu https://github.com/xhlulu I worked around the problem adding a padding space equal to the extra offset when the sidebar is gets opened and removing it when it gets closed.

I have had no time to write a code example to isolate the problem to just the react cytoscape component with a collapsible element. Maybe I'll do later this week.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Grasia/WikiChron-networks/issues/22#issuecomment-463348460, or mute the thread https://github.com/notifications/unsubscribe-auth/AUMwWXB1ciV6bsI7-Sw0vPoirwvFv1MYks5vNHCCgaJpZM4andyb .

[Akronix]

Strangely enough, now that we have removed the sidebar in WikiChron v2, we are getting a negative vertical offset and it does not happen always but only sometimes. I think it doesn't happen with first load in the same browser, but in subsequent loads of the page with the same browser, or maybe with subsequent generations of the cytoscape component (any time that the slider is being moved, the cytoscape component gets re-loaded). The behaviour is weird in any case.

You can test it here: http://staging.networks.wikichron.science/app/?wikis=cities.wikia.com&network=user_talk_network