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: GitHub - plotly/docs-demos-dashbio: Examples for Dash Bio documentation at dash.plot.ly.
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 
Thanks for the explanation and the link @shammamah! 