Open jbixon13 opened 4 years ago
I am trying to embed multiple Plotly htmlwidgets in a React frontend. My goal is to reduce the file size of each plot based on the Plotly documentation:
If you want to embed numerous widgets in a larger HTML document (e.g., via HTML s), self-contained HTML is not recommended. That’s because, if you embed numerous self-contained widgets inside a larger document, your browser has to repeatedly parse the same dependencies over and over.</p> </blockquote> <p>Based on this, I have exported my plotly objects:</p> <pre><code class="language-r">htmlwidgets::saveWidget(selfcontained = FALSE)</code></pre> <p>When I embed these plots (stored in the public folder of my React app) and render them to the DOM, the calls to the JS/CSS dependencies (<code>htmlwidgets</code>, <code>jquery</code>, <code>plotly</code>, etc.) are duplicated for every plot even though <code>selfcontained = FALSE</code> is meant to avoid this. I tried removing the <code><script></code> tags from the subsequent html files to avoid reading in packages that were already fetched by the first file, but this resulted in the subsequent plot not rendering. Is there something I'm missing in order to avoid duplicating these dependency calls? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ramnathv"><img src="https://avatars.githubusercontent.com/u/346288?v=4" />ramnathv</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jbixon13 Are you generating the plots in an Rmarkdown file or in an R script? Can you provide a minimal <a href="https://reprex.tidyverse.org/">reprex</a>?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/timelyportfolio"><img src="https://avatars.githubusercontent.com/u/837910?v=4" />timelyportfolio</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jbixon13 I agree with Ramnath that reprex or just some additional details would be helpful to determine the best strategy. I thought I would mention though that you could easily strip the dependencies from the widget and provide these in the public assets in your react app. This <a href="http://www.buildingwidgets.com/blog/2016/8/4/htmlwidgets-look-ma-no-r">post</a> might be good reference.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jcheng5"><img src="https://avatars.githubusercontent.com/u/129551?v=4" />jcheng5</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't have time to fully explain it/provide examples right now but you might want to not use <code>saveWidget</code> but instead the lower-level htmltools primitives it's based on.</p> <ol> <li>Call <code>htmltools::renderTags</code> on each widget, each return value will have both HTML and a list of dependencies.</li> <li>Make a list out of all of those dependencies and deduplicate them using <code>htmltools::resolveDependencies</code>.</li> <li>Call <code>htmltools::copyDependencyToDir</code> and <code>makeDependencyRelative</code> to place the dependencies somewhere on disk relative to your final .html.</li> <li>Call <code>htmltools::renderDependencies</code> to generate the actual HTML for the dependencies.</li> </ol> <p>See <a href="https://github.com/rstudio/htmltools/blob/e60e803679eaae7475e18693a0d77b48dda8f908/R/html_print.R#L71">https://github.com/rstudio/htmltools/blob/e60e803679eaae7475e18693a0d77b48dda8f908/R/html_print.R#L71</a> for how <code>htmltools::save_html</code> (which <code>saveWidget</code> is based on) does it.</p> <p>If you would like to suppress dependencies that you are already providing to the .html page some other way, you can do so using <code>htmltools::suppressDependencies</code> and adding them to the list of dependencies you pass to <code>resolveDependencies</code>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ramnathv"><img src="https://avatars.githubusercontent.com/u/346288?v=4" />ramnathv</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@jcheng5 This might be a worthwhile utility function to add to <code>htmlwidgets</code>. I will take a crack at this next week, based on the logic you have outlined.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jbixon13"><img src="https://avatars.githubusercontent.com/u/32110237?v=4" />jbixon13</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thank you for the different approaches, I am generating the plots in an R script. Please see the following details: </p> <p>I am exporting from R with:</p> <pre><code class="language-r"> plt_ridership_viz <- ggplotly(plt_ridership) %>% layout(title = list(text = 'There is no clear trend of monthly ridership', font = list(size = 15) ) ) %>% config(displayModeBar = FALSE, scrollZoom = FALSE) %>% htmlwidgets::saveWidget(file = 'plotly_ridership.html', selfcontained = FALSE, libdir = 'plotly_files')</code></pre> <p>It compiles plotly_ridership.html and plotly_otp.html (the same file but renamed) with the following dependencies listed in the <code><head></code>: </p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style>body{background-color:white;}</style> <script src="plotly_files/htmlwidgets-1.5.1/htmlwidgets.js"></script> <script src="plotly_files/plotly-binding-4.9.1/plotly.js"></script> <script src="plotly_files/typedarray-0.1/typedarray.min.js"></script> <script src="plotly_files/jquery-1.11.3/jquery.min.js"></script> <link href="plotly_files/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" /> <script src="plotly_files/crosstalk-1.0.0/js/crosstalk.min.js"></script> <link href="plotly_files/plotly-htmlwidgets-css-1.49.4/plotly-htmlwidgets.css" rel="stylesheet" /> <script src="plotly_files/plotly-main-1.49.4/plotly-latest.min.js"></script> <title>plotly</title> </head></code></pre> <p>This is then moved to the public directory of my React application and called with the following: </p> <pre><code class="language-js"> <Scrolly> <section> <figure> <iframe title='MTA ridership plot' frameBorder='0' src='../plot_assets/MTA_article/plotly_ridership.html'/> </figure> <article> <div> <p>This is a plotly chart</p> </div> </article> </section> </Scrolly> <Scrolly> <section> <figure> <iframe title='MTA on-time performance plot' frameBorder='0' src='../plot_assets/MTA_article/plotly_otp.html'/> </figure> <article> <div> <p>This is a plotly chart</p> </div> </article> </section> </Scrolly></code></pre> <p>The following is a screenshot of my application with both plots rendering: <img src="https://user-images.githubusercontent.com/32110237/83363757-d34aa700-a369-11ea-9700-4cd87da3e02f.png" alt="image" /></p> <p>You can also see here that the JS dependencies are imported twice: <img src="https://user-images.githubusercontent.com/32110237/83363819-7a2f4300-a36a-11ea-9c21-0bd243587d5a.png" alt="image" /></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
I am trying to embed multiple Plotly htmlwidgets in a React frontend. My goal is to reduce the file size of each plot based on the Plotly documentation: