"Image/Live" toggles from Dash docs -- is source available?

Hi all,

I really like the “image/live” toggles on the dash-bio docs: https://dash.plot.ly/dash-bio/

In particular, how the images seem to be 1-to-1 equivalent with the live Dash versions. Is this using Percy somehow?

I’d really like to try this out in my own app to improve initial page load times and responsiveness, especially when we have plots with a large number of points.

Is the source or an example of how to do this publicly available?

Thanks,

Matt

Hey there @mkhorton! I’m the author of the Dash Bio docs. I’m really glad that you like it!

In particular, how the images seem to be 1-to-1 equivalent with the live Dash versions. Is this using Percy somehow?

Unfortunately, I can’t say that I generated the images programmatically. I just displayed the component and took a properly aligned screenshot, then fiddled with margins. It’s not a super clean implementation (and I’d like to improve it). If you end up finding a way to do it with Percy, I’d love to hear about it!

Is the source or an example of how to do this publicly available?

Yes! The repo that contains the source code is here: https://github.com/plotly/docs-demos-dashbio

The component demos are actually iframes with this app as the source: https://dash-bio.plotly.host/docs-demos-dashbio/. You need to type in the name of the component at the end to get to its specific page – e.g., https://dash-bio.plotly.host/docs-demos-dashbio/clustergram goes to the live version/image of the clustergram component.

Please let me know if you have any more questions :slight_smile:

Thanks for the explanation and the link @shammamah! :slight_smile:

1 Like