Alignment viewer: Issues with sync between subplots

[jackparmer]

• If you zoom into the center heatmap, the viewport of the bottom global view doesn't always update.
• When you are very zoomed into the main heatmap, if you click-drag on the bottom global view, only the x-axis labels of the center heatmap update.

I thought this might be a plotly.js issue, but I don't get this off synch behavior in Chart Studio: https://plot.ly/~jackp/18501/#/

So I wonder if this app is using an older version of plotly.js.

The JS console is full of these bundle.js errors from click-dragging. I see calcdata in the compressed source, so it does seem plotly.js is having trouble in this particular environment.

[jackluo]

Difference between here and on Chart Studio is that drag is manually handled on MSA
Seems like its the same bug I previously mentionned: plotly/plotly.js#3305

I'll make a local copy of the React code inside the Dash component instead of just wrapping the imported react-alignment-viewer for now if we can't get a quick solution before release, thoughts

[etpinard]

@jackluo I'm curious. What makes you so sure that plotly/plotly.js#3305 is at the root of the problem?

[jackluo]

@etpinard zoom causes trouble when its the drag zoom tool, but + - (zoom buttons) works fine
Seems like onRelayout events don't always get triggered either, can be confirmed by console logging

[etpinard]

Ok, and what is the app suppose to do on drag?

[jackluo]

Both the heatmap and webgl text overlay should drag/zoom together

[etpinard]

OK now, why do need an on-relayout handler?

https://plot.ly/~jackp/18501/#/ has a shared x-axis, and seems to zoom/pan properly.

Moreover, are you using subplots are multiple graph divs in your app? If you're using multiple graph divs, then you should not encounter plotly/plotly.js#3305

[jackparmer]

FWIW, https://plot.ly/~jackp/18501/#/ is exported directly into Chart Studio from Jack Luo's Dash app. I didn't make any further modifications. JL's Dash app is not using multiple graph divs. You can inspect it here: https://dash-bio.plotly.host/dash-alignment-viewer/

…

On Fri, Feb 8, 2019 at 3:10 PM Étienne Tétreault-Pinard < ***@***.***> wrote: OK now, why do need an on-relayout hanlder? https://plot.ly/~jackp/18501/#/ has a shared x-axis, and seems to zoom/pan properly. Moreover, are you using subplots are multiple graph divs in your app? If you're using multiple graph divs, then you should not encounter plotly/plotly.js#3305 <plotly/plotly.js#3305> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#159 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABx4asztlCVt7j8D2Mwee70bxlkJRQ_Bks5vLdmlgaJpZM4apY2k> .

[etpinard]

Is there an easy way to try a new plotly.js bundle in a dash app?

If so, could something try (or tell me how to do it) this bundle -> https://31572-45646037-gh.circle-artifacts.com/0/dist/plotly.min.js ? I think it might solve the syncing problems presented here.