Information not shown when hovering over data points in an ioslides presentation with multiple plots

[drwagner]

Hi

I'm trying to use Plotly with ioslides presentations and ran into the problem that hovering over the plot didn't show information for data points. This bug is somehow related to using multiple plots.

In the following example, I use the same plot on two slides. Hovering does not work with the first plot but it works with the second plot.

RMarkdown Document:

---
title: "Plotly Bug"
output: ioslides_presentation
runtime: shiny

---

```{r, include=FALSE}
library(plotly)
```

## First Plot

```{r, echo=FALSE}
plot_ly(economics, x = date, y = uempmed, mode = "markers")
```

## Second Plot

```{r, echo=FALSE}
plot_ly(economics, x = date, y = uempmed, mode = "markers")
```

Output of devtools::session_info()

Session info ----------------------------------------------------------------------------------------------------
 setting  value                       
 version  R version 3.2.3 (2015-12-10)
 system   x86_64, darwin14.5.0        
 ui       RStudio (0.99.878)          
 language (EN)                        
 collate  de_DE.UTF-8                 
 tz       Europe/Berlin               
 date     2016-02-13                  

Packages --------------------------------------------------------------------------------------------------------
 package     * version date       source                            
 base64enc     0.1-3   2015-07-28 CRAN (R 3.2.0)                    
 colorspace    1.2-6   2015-03-11 CRAN (R 3.2.0)                    
 devtools      1.9.1   2015-09-11 CRAN (R 3.2.0)                    
 digest        0.6.8   2014-12-31 CRAN (R 3.2.0)                    
 ggplot2     * 2.0.0   2015-12-18 CRAN (R 3.2.3)                    
 gridExtra     2.0.0   2015-07-14 CRAN (R 3.2.0)                    
 gtable        0.1.2   2012-12-05 CRAN (R 3.2.0)                    
 htmltools     0.3     2015-12-29 CRAN (R 3.2.3)                    
 htmlwidgets   0.5     2015-06-21 CRAN (R 3.2.0)                    
 httr          1.0.0   2015-06-25 CRAN (R 3.2.0)                    
 jsonlite      0.9.19  2015-11-28 CRAN (R 3.2.2)                    
 magrittr      1.5     2014-11-22 CRAN (R 3.2.0)                    
 memoise       0.2.1   2014-04-22 CRAN (R 3.2.0)                    
 munsell       0.4.2   2013-07-11 CRAN (R 3.2.0)                    
 plotly      * 2.4.4   2016-02-13 Github (ropensci/plotly@b79e9d2)  
 plyr          1.8.3   2015-06-12 CRAN (R 3.2.0)                    
 R6            2.1.1   2015-08-19 CRAN (R 3.2.0)                    
 Rcpp          0.12.2  2015-11-15 CRAN (R 3.2.2)                    
 rmarkdown     0.9.5   2016-02-13 Github (rstudio/rmarkdown@1a76e23)
 rstudioapi    0.4.0   2015-12-09 CRAN (R 3.2.3)                    
 scales        0.3.0   2015-08-25 CRAN (R 3.2.0)                    
 stringi       1.0-1   2015-10-22 CRAN (R 3.2.0)                    
 stringr       1.0.0   2015-04-30 CRAN (R 3.2.0)                    
 viridis       0.3.2   2015-12-31 CRAN (R 3.2.3)                    
 yaml          2.1.13  2014-06-12 CRAN (R 3.2.0)   

[drwagner]

Does anybody know a workaround for using more than one plot in an ioslides presentations?

[cpsievert]

I've noticed this recently, but haven't had the time to debug. As a workaround, you can include a blank slide between plots.

[wamuir]

Another workaround is to use iframes:

---
title: "Plotly Bug"
output: ioslides_presentation
runtime: shiny
---

## First Plot

<iframe src="https://plot.ly/~chris/17474" style="height: 475px; border-style: none; background-color: transparent;"></iframe>

## Second Plot

<iframe src="https://plot.ly/~chris/17468" style="height: 475px; border-style: none; background-color: transparent;"></iframe>

[wamuir]

Here's a jquery hack that seems to do the trick (and avoids iframes). Add this to the tail of of your R Markdown doc:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
  (function() {
    if (window.jQuery) {
      $('.plotly').hide();
       window.jQuery(document).on('slideleave', function(e) {
         window.jQuery(e.target).find('.plotly').hide();
      });
       window.jQuery(document).on('slideenter', function(e) {
         window.jQuery(e.target).find('.plotly').show();      
      });
    }
  })();
</script>

[timelyportfolio]

All of the slide frameworks cause htmlwidgets authors fits. This is no exception. In this particular instance, it appears ioslides sets opacity:0 to all not current slides, but for some reason this does not completely mask or hide the other plotly svg on other slides. @wamuir's solution works, but unfortunately requires jQuery and JavaScript event handling. We could do something fairly easy in vanilla JavaScript to do the same thing, but I think the best method to correct would be to add some CSS.

slide:not(.current) .plotly{
  display: none;
}

or with htmltools in rmarkdown

htmltools::tags$head(
  htmltools::tags$style("slide:not(.current) .plotly{display: none;}")
)

Unfortunately though, this issue is not limited to plotly, and any svg might conflict with our tooltip. We could extend the rule to set display:none for all svg, but I just don't know all the side effects of doing this.

slide:not(.current) svg{
  display: none;
}

Lastly, we could make this default behavior by adding custom CSS in the plotly yaml or add some JavaScript, but I'm not sure if this would be deemed desirable to handle specific exceptions in a broader context. If we want this to always be included, I can easily submit a pull for this solution. I am guessing revealjs will present its own set of unique issues.

[cpsievert]

Hmm, I certainly wouldn't mind using the R package as a playground for testing solutions, but considering others might run into similar problems using our other APIs, this sounds like something that should/could be safeguarded against in plotly.js itself.

[timelyportfolio]

I think this should be limited to the R package as it is very specific. I am not even all that crazy about adding since it is a very specific problem, but I do think based on previous experience with other htmlwidgets(ramnathv/htmlwidgets#129) that accommodating the popular slide frameworks is probably good practice.

[timelyportfolio]

I am going to close this since I believe we have a solution. Please reopen if this is not your experience.