search

juba / shinyglide

Glide.js component for Shiny apps
https://juba.github.io/shinyglide/
91 stars 8 forks source link

Resizing issues when sidebar toggled #23

Closed michael-keyes closed 3 years ago

michael-keyes commented 3 years ago

When the sidebar of a dashboard app is toggled, glide screens are unable to resize properly

juba commented 3 years ago

Did you try with the development version ? (see #13)

michael-keyes commented 3 years ago

Yes.

https://app.box.com/file/785023765404?s=u1ouf9ilvvmitj22asy67h19j3syfrej

Images don't show if I use the non developer version

juba commented 3 years ago

I see the problem, thanks for the video. Do you think you could provide a minimal reproducible example ?

michael-keyes commented 3 years ago

I'm not sure if it's relevant, but I do use shinydashboardPlus. Anyway, thanks for the help and here you are:
` fluidPage( box( width = 6, title = "What is happening?", glide( controls_position = "top",

height = "350px",

            screen(
                tags$img(src = 
                         dbGetQuery(pool, 'SELECT image1 from image LIMIT 1;'), width = "100%", height = "100%")
            ),
            screen(
                tags$img(src = 
                         dbGetQuery(pool, 'SELECT image1 from image LIMIT 1;'), width = "100%", height = "100%")
            ),
            screen(
                tags$img(src = 
                         dbGetQuery(pool, 'SELECT image1 from image LIMIT 1;'), width = "100%", height = "100%")
            )
          ),
    )`
juba commented 3 years ago

It seems I can't reproduce your issue. Here is an example where it seems to work fine ?

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyglide)

ui <- dashboardPage(
  options = list(sidebarExpandOnHover = TRUE),
  header = dashboardHeader(),
  sidebar = dashboardSidebar(minified = TRUE, collapsed = FALSE),
  body = dashboardBody(box(
    width = 6,
    title = "What is happening?",
    glide(
      controls_position = "top",
      screen(
        tags$img(
          src = "https://images.unsplash.com/photo-1615319532762-b4ccc69e5abf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
          width = "100%",
          height = "100%"
        )
      ),
      screen(
        tags$img(
          src = "https://images.unsplash.com/photo-1614549261869-548a48d96a5c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
          width = "100%",
          height = "100%"
        )
      ),
      screen(
        tags$img(
          src = "https://images.unsplash.com/photo-1615046727544-8fd9ac9836cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
          width = "100%",
          height = "100%"
        )
      )
    )
  )),
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)

server <- function(input, output) {

}

shiny::shinyApp(ui, server)
michael-keyes commented 3 years ago

Hmmm. I'm not sure what to do. Maybe I'm missing something. Should I share the app.R file?

juba commented 3 years ago

Is your application publicly accessible online ? Otherwise, if it is possible, you could send me your app.R, but I see that there are some db queries inside, so it may not be fully reproducible...

michael-keyes commented 3 years ago

Nevermind. I found the problem. When sidebar isn't empty, the error occurs.

michael-keyes commented 3 years ago

library(shiny) library(shinydashboard) library(shinydashboardPlus) library(shinyglide)

ui <- dashboardPagePlus( header = dashboardHeaderPlus(), sidebar = dashboardSidebar( collapsed = FALSE, sidebarMenu( menuItem("Preface", tabName = "preface", icon = icon("book")

menuItem("Chapter 1", tabName = "ch1", icon = icon("mortar-board"),

  #menuSubItem("1.1", tabName = "ch1-1", icon = icon("angle-right")),
  #menuSubItem("1.2", tabName = "ch1-2", icon = icon("angle-right")),
  #menuSubItem("1.3", tabName = "ch1-3", icon = icon("angle-right")),
  #menuSubItem("1.4", tabName = "ch1-4", icon = icon("angle-right"))
 ),       
 menuItem("Introduction", tabName = "intro", icon = icon("book")),       
 menuItem("Chapter 1", tabName = "ch1", icon = icon("bookmark-o")),       
 menuItem("Chapter 2", tabName = "ch2", icon = icon("bookmark-o")),
 menuItem("Chapter 3", tabName = "ch3", icon = icon("bookmark-o"))
 )

), body = dashboardBody( fluidPage( box( width = 6, title = "What is happening?", glide( controls_position = "top", screen( tags$img( src = "https://images.unsplash.com/photo-1615319532762-b4ccc69e5abf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80", width = "100%", height = "100%" ) ), screen( tags$img( src = "https://images.unsplash.com/photo-1614549261869-548a48d96a5c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80", width = "100%", height = "100%" ) ), screen( tags$img( src = "https://images.unsplash.com/photo-1615046727544-8fd9ac9836cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80", width = "100%", height = "100%" ) ) ) ) ) ), )

server <- function(input, output) {

}

shiny::shinyApp(ui, server)

juba commented 3 years ago

So, with your example I still cannot reproduce the problem, but it appears that when I installed shinydahspboardPlus I installed the 2.0.0 version, which has been released 3 days ago. For the example to work with this new version I just had to replace dashboardPagePlus with dashboardPage.

Do you think you could try to upgrade the package, or there may be breaking changes you would want to avoid ?

michael-keyes commented 3 years ago

It still occurs whether using shinydashboardPlus 0.75 or 2.0. I'm stumped.

juba commented 3 years ago

Does the problem occur with the following app and shinydashboardplus 2.0 ?

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyglide)

ui <- dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(
        collapsed = FALSE,
        sidebarMenu(
            menuItem("Preface",
                tabName = "preface", icon = icon("book")
            ),
            menuItem("Introduction", tabName = "intro", icon = icon("book")),
            menuItem("Chapter 1", tabName = "ch1", icon = icon("bookmark-o")),
            menuItem("Chapter 2", tabName = "ch2", icon = icon("bookmark-o")),
            menuItem("Chapter 3", tabName = "ch3", icon = icon("bookmark-o"))
        )
    ),
    body = dashboardBody(
        fluidPage(
            box(
                width = 6,
                title = "What is happening?",
                glide(
                    controls_position = "top",
                    screen(
                        tags$img(
                            src = "https://images.unsplash.com/photo-1615319532762-b4ccc69e5abf?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80",
                            width = "100%",
                            height = "100%"
                        )
                    ),
                    screen(
                        tags$img(
                            src = "https://images.unsplash.com/photo-1614549261869-548a48d96a5c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                            width = "100%",
                            height = "100%"
                        )
                    ),
                    screen(
                        tags$img(
                            src = "https://images.unsplash.com/photo-1615046727544-8fd9ac9836cf?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                            width = "100%",
                            height = "100%"
                        )
                    )
                )
            )
        )
    ),
)

server <- function(input, output) {

}

shiny::shinyApp(ui, server)
michael-keyes commented 3 years ago

yes

juba commented 3 years ago

Just to be sure, the problem is that when you toggle the sidebar the images inside the glide are not resized properly ?

Could you please send the output of your sessionInfo() ?

michael-keyes commented 3 years ago

That is correct. R version 4.0.4 (2021-02-15) Platform: x86_64-pc-linux-gnu (64-bit) Running under: Debian GNU/Linux 10 (buster)

Matrix products: default BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.8.0 LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.8.0

locale: [1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C [3] LC_TIME=en_US.UTF-8 LC_COLLATE=en_US.UTF-8 [5] LC_MONETARY=en_US.UTF-8 LC_MESSAGES=en_US.UTF-8 [7] LC_PAPER=en_US.UTF-8 LC_NAME=C [9] LC_ADDRESS=C LC_TELEPHONE=C [11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C

attached base packages: [1] stats graphics grDevices utils datasets methods base

loaded via a namespace (and not attached): [1] compiler_4.0.4

juba commented 3 years ago

Sorry, I should have been more specific : could you send me your sessionInfo() after running the previous shiny app, so that I could see your packages versions ?

michael-keyes commented 3 years ago

No, no. I'm sorry. I'm not sure how to do that. The app is running on server and I ran sessionInfo() within R while the app is running.

juba commented 3 years ago

If on a distant server, you can always open an R session and run this : 

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyglide)
sessionInfo()

You ran all the sample apps in this issue on a server, never locally ?

michael-keyes commented 3 years ago

Both actually. I usually just sync to my server and work in vim. It seems to be working now that I switched back to the git branch. Thanks a lot. That said, the performance locally and on the server is not very good after a few resizes. Thanks a lot for your help. I switched away from the git branch due to the performance.