Plotly: Version 4.9.0 does not display properly with Flexdashboard

[enricodata]

Version 4.9.0 does not display properly with Flexdashboard

Here you can find an example:
https://community.rstudio.com/t/plotly-does-not-display-in-flexdashboard-page/32696

I solved it by deleting the version 4.9.0 and by using the version 4.8.0

[cpsievert]

Here's the JS stacktrace --

This is very likely a plotly.js bug. We'll have to come up with a more minimal example before reporting to the plotly.js team

(Update: see https://github.com/ropensci/plotly/issues/1546#issuecomment-526719041 for a workaround)

[guivo]

Are there news about this issue? I have the same problem in a complex dashboard, that unfortunately I cannot share at the moment.

I have tried to manually update the plotly-latest,min.js file within the htmlwidgets, but this didn't change the behaviour.

In particular, the dashboard I generate is fine when I open it. If I try to refresh the page, the error occurs and plots aren't rendered.

[eightsixtwo]

I also have this issue... If I run the code, rather than knit, the interactive plot appears in the viewer and seems fine. However if I knit the code then the plotly plot does not appear at all.

[guivo]

I have made a minimal example that show the problem.

To note that if the geom_hex() in the 2nd page is replace by geom_line() or other 2d primitive everything is rendered properly.

The problem is also fixed reverting to version 4.8.

debug_plotly49.zip

[jenzopr]

Here is another minimal example:

output:
  flexdashboard::flex_dashboard:
    theme: yeti
---

Page 1
====================================================

Column
----------------------------------------------------

###

Page 2
====================================================

Column
-------------------------------------

### 

```{r}
plotly::plot_ly(mtcars, x = ~mpg, y = ~wt, color = ~qsec)
```x

Please remove the terminal x before running the code - this is only to enable proper rendering of the code in this comment.

[cpsievert]

Looks like you can workaround this problem by adding config(p, fillFrame = TRUE) to any plot p that isn't shown on initial load

[Finesim97]

This seems to affect not only heat maps, but any plot with polygons.

Looks like you can workaround this problem by adding config(p, fillFrame = TRUE) to any plot p that isn't shown on initial load

But that appears to break scrollable layouts? (Will try to provide an example), the axis scaling also breaks when you produce the "polygon" plots with tagList

```{r,results="asis",eval=F}

constructPlot <-function(mat)htmltools::tagList(list(a=plot_ly(z=mat,type = "heatmap",colors = "Greys")))
plots <- lapply(qualmat_raw,function(sample)lapply(sample,constructPlot))
for(samplename in names(qualmat_raw)){
  cat("\nRow\n--------------------------------------\n")
  cat(paste0("\n\n### Quality Occurence Heatmap: ",samplename," R1","\n\n"))
  print(plots[[samplename]][["R1"]])
  cat(paste0("\n\n### Quality Occurence Heatmap: ",samplename," R2","\n\n"))
  print(plots[[samplename]][["R2"]])
}

```x

The 4.8 revert also fixes this.

Have a nice day you all and thanks for your work,
Lukas Jansen

[cpsievert]

This issue should be fixed now in the dev version -- remotes::install_github("ropensci/plotly")

Also, a CRAN release will be coming by the end of next week

[arsenij-ust]

Hi all,
unfortunately, the error still exists.
I used the minimal example from above jenzopr.
The JS stacktrace:

You can use the following Docker container for reproduction:
https://gitlab.gwdg.de/loosolab/container/i2dash.development

Rendered the minimal example Rmd with rmarkdown::render()

The offered workaround is unfortunately not suitable for our purposes, because we cannot know if the flexdashboard component will be on the first page and if it will fill the full page.

[arsenij-ust]

Workarounds, that work well for me:

p_env <- plotly::plot_ly(mtcars, x = ~mpg, y = ~wt, color = ~qsec) %>%
  plotly::layout(autosize = F, yaxis = list(automargin = T), xaxis = list(automargin = T)) %>% 
  htmlwidgets::onRender("
                        function(el, x) {
                        // workaround for plotly.js (https://github.com/ropensci/plotly/issues/1546)
                          // get size of parents div container
                          document.getElementById('scatter_env').parentElement.id = 'parent_scatter_env'
                          var clientHeight = document.getElementById('parent_scatter_env').clientHeight;
                          var clientWidth = document.getElementById('parent_scatter_env').clientWidth;

                          // avoid errors at 0 width and height
                          if (clientHeight === 0){
                            clientHeight = 450 // plotly's default value 
                          }
                          if (clientWidth === 0){
                            clientWidth = 700 // plotly's default value 
                          }

                          // get current layout and relayout plotly chart
                          var layout = el.layout;
                          layout.height = clientHeight;
                          layout.width = clientWidth;

                          Plotly.relayout(el, layout)
                        }
                        ")
p_env$elementId <- "scatter_env"
p_env

If the flexdashboard uses Shiny (with runtime: shiny), then we can embed the plotly output in renderUI function:
shiny::renderUI({plotly::plotlyOutput("plot", height = "100%")})

I would be glad to see possible improvements and optimizations of the code.