htmlwidgets no render with fullPage

[jbkunst]

Hi everyone!

Thanks @JohnCoene for this!

I can't render htmlwidgets using fullPage (I can in pagePiling) the only widget that I tested and works is shiny::dataTableOutput. The error in the console is:

Can you guide me please to solve this problem?

Some test app to replicate.

# ui.R
fullPage(
    menu = c("Full Page" = "link1"),
    fullSection(
        menu = "intro",
        "Widget testings",
        # echarts4r::echarts4rOutput("widget")
        # highcharter::highchartOutput("widget")
        # plotly::plotlyOutput("widget")
        # leaflet::leafletOutput("widget")
        # DT::dataTableOutput("widget")
        shiny::dataTableOutput("widget")
    )
)

# server.R
function(input, output){

    output$widget <- 
        # echarts4r::renderEcharts4r({
            # mtcars %>% echarts4r::e_charts(Sepal.Length) %>% echarts4r::e_scatter(Petal.Length)

        # highcharter::renderHighchart({
        #     highcharter::hchart(iris, "scatter", highcharter::hcaes(Sepal.Length, Petal.Length))

         # plotly::renderPlotly({
         #     plotly::plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)

        # leaflet::renderLeaflet({
        #     leaflet::leaflet() %>% leaflet::addTiles()

        # DT::renderDataTable({
        #     iris

        shiny::renderDataTable({
            iris

    })

}

[JohnCoene]

Hi Joshua,

Should work, make sure you import shiny too. This works for me:

library(shiny)
devtools::load_all()

ui <- fullPage(
  menu = c("Full Page" = "intro"),
  fullSection(
    menu = "intro",
    "Widget testings",
    shiny::dataTableOutput("widget")
  )
)

server <- function(input, output){

  output$widget <- shiny::renderDataTable({
    iris
  })

}

shinyApp(ui, server)

[jbkunst]

Hi @JohnCoene

Please consider this reproducible example https://rstudio.cloud/project/1589722

library(shiny)
library(fullPage)
library(echarts4r)

ui <- fullPage(
    menu = c("Full Page" = "intro"),
    fullSection(
        menu = "intro",
        "Widget testings",
        fullRow(
            fullColumn(
                shiny::dataTableOutput("widget")
            ),
            fullColumn(
                echarts4rOutput("widget2")
            )
        )

    )
)

server <- function(input, output){

    output$widget <- shiny::renderDataTable({
        iris
    })

    output$widget2 <- renderEcharts4r({
        mtcars %>%
            e_charts(qsec) %>%
            e_line(mpg)
    })

}

shinyApp(ui, server)

[JohnCoene]

Ah sorry my bad. I can't fix this right now as I won't have access to a laptop for a few days. This can be solved by using shiny's grid system instead of fullPage: use fluidRow() and column() instead

[etiennebacher]

Hi, I tried to replace fullRow by fluidRow and fullColumn by column but no success. Do you have any idea how to fix this?

[corriebar]

I'm using ggiraph and am encountering the same problem. The shiny::renderDataTable works but using any girafeOutput() breaks. It also breaks any other plotOutput, even the normal ones. I tested the code above, and the same happens with echarts4r.

Reproducible example: I adapted

library(shiny)
library(fullPage)
library(ggiraph)
library(tidyverse)
library(shiny)

options <- list(
  sectionsColor = c('#f2f2f2', '#4BBFC3', '#7BAABE'),
  parallax = TRUE
)

ui <- fullPage(
  menu = c(  "Sections" = "link2",
           "Slides" = "section3"),
  opts = options,
  fullSection(
    menu = "link2",
    fullContainer(
      fluidRow(
        column(width=2,
               h3("Column 1"),
               selectInput(
                 "dd",
                 "data points",
                 choices = c(10, 20, 30)
               )
        ),
        column(width = 10,
               plotOutput("hist")
        ),
        column(width = 10,
              ################## breaking code:
              # girafeOutput("plot")     # does not work and breaks everything else
               plotOutput("plot")        # works (might be empty if used with renderGirafe instead of renderPlot)
        )
      )
    )
  ),
  fullSection(
    menu = "section3",
    fullSlide(
      fullContainer(
        center = TRUE,
        h3("With container"),
        plotOutput("slideplot2"),
        shiny::verbatimTextOutput("containerCode")
      )
    ),
    fullSlide(
      center = TRUE,
      h3("Without container"),
      plotOutput("slideplot1")
    )
  )
)

server <- function(input, output){

output$plot <- renderGirafe({

  girafe(code = {print(ggplot(data = tibble(x = rnorm(input$dd, 1, 10)),
                              aes(x=x)) + geom_histogram() ) })
})

# output$plot <- renderPlot({
#
#   ggplot(data = tibble(x = rnorm(input$dd, 1, 10)),
#          aes(x=x)) + geom_histogram()
#
# })

  output$hist <- renderPlot({
    hist(rnorm(input$dd, 1, 10))
  })

  output$slideplot1 <- renderPlot({
    plot(mtcars$mpg, mtcars$drat)
  })

  output$slideplot2 <- renderPlot({
    plot(mtcars$wt, mtcars$mpg)
  })

  output$containerCode <- renderText({
    "fullSlide(
      fullContainer(...)
    )"
  })

}

shinyApp(ui, server)

[etiennebacher]

Still looking for a solution for this. The error that @jbkunst sees in the console is the same as in this issue. I followed the solution proposed by Joe Cheng, i.e replace jQuery by jquery in the whole package but that didn't change anything.

However, I don't have the same error when I run the reproducible example provided above (3rd comment). The first error is different, this is what I get:

and it comes from:

I'd really appreciate a solution to this problem as it blocks the use of htmlwidgets with fullPage().