htmlwidgets doesn't work in JS Reveal

[johncarew]

I am trying to add HTML widgets from the htmlwidgets package, such as rbokeh and visNetwork elements, to a JS Reveal presentation, but they do not always appear on the slides. They will appear on the slides as long as they are the first things in the presentation, but after anything other than r code for a widget is placed in the presentation, widgets on later slides will not appear. The code will compile and knit, so I am calling all the correct packages.

# Topic 1

## Some Bullets

- Here
- Is some
- Info

# HTML widgets {class="center"}

##rbokeh plot
<header2>Topic 13</header2>

```{r}
library(rbokeh)
figure(width = NULL, height = NULL) %>%
  ly_points(Sepal.Length, Sepal.Width, data = iris,
    color = Species, glyph = Species,
    hover = list(Sepal.Length, Sepal.Width)
```

Thus, the above code will produce a slide with "Some Bullets" as the header followed by three bullets, and then a blank slide with the title "rbokeh plot."

Additionally, sometimes html widgets after other content will appear in the preview window (the window that opens after I press knit), but when I open the presentation in my browser, the widgets disappear. I tried comparing the .html documents produced by the R markdown codes of the presentations with widgets appearing and those without widgets appearing, but the two files seemed to be identical. If anyone has any idea why this is happening or how to remedy it, it would be much appreciated!

It seems that the widget will appear in the preview window if the window opens to the slide with the widget on it. When the preview window opens to the title slide or bulleted slide, the html widget does not appear. Is it possible to force the widgets to load before the rest of the presentation, but for the presentation to still open with the title slide? Perhaps that would make the widgets appear.

[jjallaire]

Most htmlwidgets we have tested work fine in the scenario you describe.
When a widget doesn't work it's usually one of two things:

1. The widget doesn't implement the resize method (I believe rbokeh does
   implement it though)
2. The widget or underlying library doesn't deal well with being shown
   hidden or at size 0,0

In this case I loaded up your example and noted that bokeh.min.js is
throwing an error ("unsatifiable constraint") when the deck loads. I broke
in the debugger where the exception is thrown and noted that indeed the
width and height of the element containing the rbokeh widget is 0,0. Likely
rbokeh needs to mask out this case (i.e. just refuse to render at all at
0,0 and wait for a resize method to be called at the appropriate time when
it has an actual size).

On Tue, Jul 19, 2016 at 5:07 PM, johncarew notifications@github.com wrote:

I am trying to add HTML widgets from the htmlwidgets package, such as
rbokeh and visNetwork elements, to a JS Reveal presentation, but they do
not always appear on the slides. They will appear on the slides as long as
they are the first things in the presentation, but after anything other
than r code for a widget is placed in the presentation, widgets on later
slides will not appear. The code will compile and knit, so I am calling all
the correct packages.

Topic 1

Some Bullets

• Here
• Is some
• Info

HTML widgets {class="center"}

##rbokeh plot
Topic 13

library(rbokeh)
figure(width = NULL, height = NULL) %>%
  ly_points(Sepal.Length, Sepal.Width, data = iris,
    color = Species, glyph = Species,
    hover = list(Sepal.Length, Sepal.Width)

Thus, the above code will produce a slide with "Some Bullets" as the
header followed by three bullets, and then a blank slide with the title
"rbokeh plot."

Additionally, sometimes html widgets after other content will appear in
the preview window (the window that opens after I press knit), but when I
open the presentation in my browser, the widgets disappear. I tried
comparing the .html documents produced by the R markdown codes of the
presentations with widgets appearing and those without widgets appearing,
but the two files seemed to be identical. If anyone has any idea why this
is happening or how to remedy it, it would be much appreciated!

It seems that the widget will appear in the preview window if the window
opens to the slide with the widget on it. When the preview window opens to
the title slide or bulleted slide, the html widget does not appear. Is it
possible to force the widgets to load before the rest of the presentation,
but for the presentation to still open with the title slide? Perhaps that
would make the widgets appear.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#219, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGXx_tWwWsD2qgo7AvGyhH-aWoYX6t0ks5qXTydgaJpZM4JQK_8
.

[johncarew]

Thank you so much, jjallaire! All I had to do was change height=NULL and width=NULL to pixel values and all of the widgets appeared! However, now I am having trouble hovering over data on the robokeh graph and the dygraphs graph. When I try to hover over a data point to see its data, a different point, up and to the left of my cursor, will be selected. The same thing is happening with some graphs from the plot.ly package.

[hafen]

I've run into issues with hover not working in rbokeh and others when the size of the element is controlled using the css scale transformation. In those cases I don't think the hover location information is processed with respect to the scaling. I wonder if reveal is using this approach to adjust the size of your content to fit whatever size the browser window is.

[jjallaire]

Yes, reveal does indeed use css scale.

On Wed, Jul 20, 2016 at 2:18 PM, hafen notifications@github.com wrote:

I've run into issues with hover not working in rbokeh and others when the
size of the element is controlled using the css scale transformation. In
those cases I don't think the hover location information is processed with
respect to the scaling. I wonder if reveal is using this approach to adjust
the size of your content to fit whatever size the browser window is.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#219 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGXx2TLRiUIdow1X97y0E0OX3fWjkqyks5qXmZjgaJpZM4JQK_8
.

[jjallaire]

You can actually set the minScale and maxScale within the reveal_options so the following might fix the issue:

output:
  revealjs::revealjs_presentation:
    reveal_options:
      minScale: 1.0
      maxScale: 1.0

[johncarew]

That did fix the issue! Thank you jjallaire! Everything is working well now!

[jjallaire]

Great!

On Wed, Jul 20, 2016 at 3:17 PM, johncarew notifications@github.com wrote:

That did fix the issue! Thank you jjallaire! Everything is working well
now!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#219 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGXx8PDXleBK3ebp-PB3Shyk93rFpK9ks5qXnRNgaJpZM4JQK_8
.