Plotly.react + Scattergl issues

[chriddyp]

As reported by a dash community user: https://community.plot.ly/t/proper-way-to-plot-large-datasets/9793/8?u=chriddyp

[etpinard]

Can you give us a hint on how to reproduce this bug. That is, how does dash call Plotly.react?

[chriddyp]

And here's another one: plotly/dash#253.

@lamourj - Let's continue the discussions over here, as this is most likely an issue with the underlying plotly.js

[chriddyp]

That is, how does dash call Plotly.react

Here's the code: https://github.com/plotly/dash-core-components/blob/bdb22329b6a62e392ae7707da0369354cf908678/src/components/Graph.react.js#L73-L102

Users pass in a figure and we call .react, we place no restrictions on how one figure could transition to the next figure. I'll leave it up to @lamourj to get us some test data / reproducable example

[lamourj]

Alright. For the Pan tool issue ( plotly/dash#253 ), here is an example: https://plot.ly/~lamourj/1/
Select the pan tool and try to move one of the traces. You'll observe the issue (or at least I did).

[lamourj]

Regarding my other issue described in the forum, as I mentioned there, I was not able to reproduce it in Safari neither in Chrome when opening the plot through the Chart Editor. It only shows up when the page is loaded with Chrome directly from my Dash app.

[chriddyp]

I was not able to reproduce it in Safari neither in Chrome when opening the plot through the Chart Editor.

Got it - it sounds like it's an issue with the transitions of figures in repeated Plotly.react calls - i.e. it's not an issue with the fig itself but rather how one fig transitions to the next fig.

My dataset is too large for my graph to fit in the free Plotly account. I’ll try create another example with a small dataset to be able to share the plot.

I'll upgrade your account to Pro 👍

[chriddyp]

I'll upgrade your account to Pro 👍

@lamourj - I just upgraded your account. Could you try exporting the chart again?

[lamourj]

Thanks! I’m on it, just trying to make my app work again since it broke after the upgrade of dash-core-components (I was using 0.21.0, and now upgraded to the latest, which also shows the Pan issue). It seems like the recent updates (dash, dash-core-components and dash-html-components) broke -at least partially- rmarren1/dash-resumable-upload 😞

[lamourj]

So, I finally have a dataset leading to the "missing trace" issue.
I have updated my libraries meanwhile, and the problem is still here.
Current setup:

• MacOS Sierra 10.12.6
• Google Chrome Version 66.0.3359.139 (Official Build) (64-bit)
• dash 0.21.1
• dash_core_components 0.22.1
• dash_html_components 0.10.1

You might need to zoom quite a bit, and then try different windows sizes until you find a point where
this happen. I was able to do it:

Normal content:

After resizing the Chrome window of just a few pixels (same zoom level):

The dataset used to generate these plot is here: https://plot.ly/~lamourj/3/

[lamourj]

Note on the previous comment:
I just realised (quite late...) that my Chrome zoom level was set at 67%. White resetting the zoom to 100%, I can't reproduce the issue. However, when I look at the data through the Chart Editor, even at 67% zoom, the issue doesn't appear.
Maybe you can help me draw a conclusion on whether it comes from the zoom of Chrome or from Dash/Plotly.react, I'm not sure which one to pick 🤣

If it'd come from Chrome itself, I should be able to observe the issue when opening the Chart Editor page with the same zoom level as my Dash app, right?

Edit:
I was able to observe the issue in Safari as well when using a zoom level < 100%. I guess this strengthen the Dash-problem hypothesis.

[etpinard]

About https://plot.ly/~lamourj/1.json, you're trying to plot a scattergl trace with a range slider - which isn't supported yet. Removing the range slider solves the issues on pan. @lamourj feel free to open a new issue (a feature request this time) about scattergl range sliders.

I'm a little confused with the ticket. Looks like @lamourj has encountered more than one seemingly unrelated problems. Can these be broken down into a bullet-point list? Thank you.

[lamourj]

Thanks for your answer @etpinard
You're right that 2 different issues were discovered there:

1. Issue on pan, that you described being due to the use of a range slider with Scattergl.
2. Disappearing data at various zoom level when using Scattergl (described here). I'm now realizing that I ran into that while also using Scattergl in combination with a range slider, so the explanation might be the same. I quickly tried to reproduce without the range slider and couldn't do so, so it might clearly be it; I will try to further investigate a bit later.

I will definitely open a feature request for the compatibility of range slider with Scattergl, as I have seen that requested by several users on the community forum.

Thanks for the great work!