Can the Shiny conditionalPanel be used Horizontally?

Question

I am developing a shiny app using the sidebarLayout() and I wish to show either one or two plots side-by-side in the mainPanel() based on the value of an input in the sidebarPanel().

If only one plot is to be shown, I wish that plot to take up 100% of the mainPanel() horizontal space. However, if both plots are to be shown, I wish each to take up 50% of the mainPanel() space.

I would also like the contents of each specific column to take up all available horizontal space within its own column.

I have tried a few things.

Having a fluidRow() containing a column and a conditionalPanel()
- However, I could not get that working because fluidRow() wishes each element to provide a width argument, and conditionalPanel() does not seem compatible.
conditionalPanel() in the right side of a splitLayout()
- This only hides the right-hand side and does not allow the left plot to take up all the mainPanel() space.
A conditionalPanel() inside a right div with display: table-cell
- But this is the same result as 1 above

library(ggplot2)
library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style("
               #my_container {
                 display: table;
                 width: 100%;
               }

               .col {
                 display: table-cell;
               }

               #col_left {
                 background-color: #ffa;
               }

               #col_right {
                 background-color: #faf;
               }
               ")
  ), 

  sidebarPanel(
    checkboxInput("checkbox", 
                  "View Both", 
                  value = TRUE), 
    width = 2
  ), 

  mainPanel(
    div(id = "my_container", 
        div(id = "col_left", 
            class ="col", 
            plotOutput("plot_output_1")),
        div(id = "col_right", 
            class = "col", 
            conditionalPanel("input.checkbox == 1", 
                             plotOutput("plot_output_2")))
    ), 
    width = 10
  )
)

server <- shinyServer(function(input, output) {
  output$plot_output_1 <- renderPlot({
    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point()
  })

  output$plot_output_2 <- renderPlot({
    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point()
  })
})

shinyApp(ui, server)

I have also tried adding javascript messaging to change the div widths.
- this seems to work in the sense that the right column gets hidden and the left column (yellow background the example) is then shown. However, the plot in the left column does not get redrawn to take up the new space despite being redrawn due to the dependency on the input.

library(ggplot2)
library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style("
               #my_container {
                 display: table;
                 width: 100%;
               }

               .my_col {
                 display: table-cell;
               }

               #col_left {
                 background-color: #ffa;
               }

               #col_right {
                 background-color: #faf;
               }
               "
    ), 

    tags$script("
      Shiny.addCustomMessageHandler('n_show.onchange', function(value) {
        var col_left = document.getElementById('col_left');
        var col_right = document.getElementById('col_right');

        if(value == 'one') {
          col_left.style.width = '100%';
          col_right.style.width = '0%';
        } else {
          col_left.style.width = '50%'; 
          col_right.style.width = '50%';
        }
      });
      "
    )
  ), 

  sidebarPanel(
    selectInput(inputId = "n_show", label = "Number of Plots", choices = c("one", "two"), selected = "two"), 
    width = 2
  ), 

  mainPanel(
    div(id = "my_container", 
        div(id = "col_left", 
            class = "my_col", 
            plotOutput("plot_output_1")),
        div(id = "col_right", 
            class = "my_col", 
            conditionalPanel("input.n_show == 'two'", 
                             plotOutput("plot_output_2")))
    ), 
    width = 10
  )
)

server <- shinyServer(function(input, output, session) {
  output$plot_output_1 <- renderPlot({
    input$n_show

    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point()
  })

  output$plot_output_2 <- renderPlot({
    input$n_show

    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point()
  })

  observeEvent(input$checkbox, {
    session$sendCustomMessage("n_show.onchange", input$n_show)
  })
})

shinyApp(ui, server)

I suspect this is not as difficult as I am making it, but my css knowledge/skills do not seem up to the task - at least in the context of shiny.

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2019-06-07T00:34:31

A solution with renderUI:

library(ggplot2)
library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style("
               #col_left {
                 background-color: #ffa;
               }
               #col_right {
                 background-color: #faf;
               }
               ")
    ), 

  sidebarPanel(
    checkboxInput("checkbox", 
                  "View Both", 
                  value = TRUE), 
    width = 2
  ), 

  mainPanel(
    uiOutput("plots"), 
    width = 10
  )
    )

server <- shinyServer(function(input, output) {

  output$plot_output_1 <- renderPlot({
    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point(size = 6)
  })

  output$plot_output_2 <- renderPlot({
    ggplot(
      data.frame(x = runif(3), y = rnorm(3)), 
      aes(x = x, y = y)) + 
      geom_point(size = 6)
  })

  output$plots <- renderUI({
    if(input$checkbox){
      fluidRow(
        column(6, div(id="col_left", plotOutput("plot_output_1"))),
        column(6, div(id="col_right", plotOutput("plot_output_2")))
      )
    }else{
      fluidRow(
        column(12, div(id="col_left", plotOutput("plot_output_1")))
      )
    }
  })
})

shinyApp(ui, server)

Can the Shiny conditionalPanel be used Horizontally?

1 Answers