shiny.router icon indicating copy to clipboard operation
shiny.router copied to clipboard

[Bug]: plotly inside router does not fill the page when used inside bslib::page_fillable

Open vibalre opened this issue 7 months ago • 1 comments

Guidelines

  • [X] I agree to follow this project's Contributing Guidelines.

Project Version

No response

Platform and OS Version

No response

Existing Issues

No response

What happened?

We are using bslib:page_fillable . Without shiny.router , plots and cards are fillable. With shiny.router, plots and cards are no longer fillable.

Steps to reproduce

  1. Create a UI using bslib::page_fillable.
  2. Add a shiny.router::router_ui.
  3. Wrap a plotly inside shiny.router::route.
  4. Create server to render plotly.
  5. Run app.

Expected behavior

The plots inside the router should still fill the page.

Attachments

# Plot occupies full height
ui <- bslib::page_fillable(
  bslib::card(
    shiny::h1("Hello"),
    plotly::plotlyOutput("my_plot")
  )
)

server <- function(input,output) {
  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

# Plot only occupies about the top half of the window with router
ui <- bslib::page_fillable(
  shiny.router::router_ui(
    shiny.router::route(
      "/",
      shiny::h1("Hello")
    ),
    shiny.router::route(
      "plots",
      plotly::plotlyOutput("my_plot")
    )
  )
)

server <- function(input,output, session) {
  shiny.router::router_server()

  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

Screenshots or Videos

No router

plot fills page without router

With router

plot only covers a part o the page with router

Additional Information

Workaround for plots to fill page is to add classes to .html-fill-container and .html-fill-item to both .router-page-wrapper and .router. It would be nice to have an easy way to add classes to these router classes.

# Should be possible as JS too
ui <- function() {
  app_ui <- bslib::page_fillable(
    shiny.router::router_ui(
      shiny.router::route(
        "/",
        shiny::h1("Hello")
      ),
      shiny.router::route(
        "plots",
        plotly::plotlyOutput("my_plot")
      )
    )
  )
  
  all_tags <- htmltools::tagQuery(app_ui)
  all_tags$find("#router-page-wrapper")$addClass("html-fill-item html-fill-container")
  all_tags$find(".router")$addClass("html-fill-item html-fill-container")
  
  all_tags$allTags()
}

server <- function(input,output, session) {
  shiny.router::router_server()
  
  output$my_plot <- plotly::renderPlotly(
    plotly::plot_ly(mtcars, x = ~cyl, y = ~mpg, type = "scatter", mode = "markers")
  )
}

shiny::shinyApp(ui, server)

vibalre avatar Jul 22 '24 10:07 vibalre