Usability and UI issues when using esquisse with bootstrap5

[daattali]

Demo small app:

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 4),
  esquisse::esquisse_ui("test")
)

server <- function(input, output, session) {
  esquisse::esquisse_server("test")  
}

shinyApp(ui, server)

The data loading module is especially broken, but the plotting area also has a lot of broken UI. It would be nice if there was a way to include esquisse in a larger shiny app that uses bootstrap4/5

[pvictor]

Yes esquisse_ui used shiny::fixedPage that is only needed in the addin and which comes with its own Bootstrap theme independently of what is used in the page. It should work now. esquisse and datamods should work with Bootstrap 5, but I won't do much for Bootstrap 4 since the default version in bslib is already 5.

[daattali]

They do not currently work with bs5.

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 5),
  esquisse::esquisse_ui("test")
)

server <- function(input, output, session) {
  esquisse::esquisse_server("test")  
}

shinyApp(ui, server)

A lot of the inputs aren't working, for example the radio buttons for selecting an import method and any of the dropdowns. So it might be a shinyWidgets issue?

[pvictor]

With last GitHub version of esquisse I have :

Full session info :

 package       * version    date (UTC) lib source
 assertthat      0.2.1      2019-03-21 [1] CRAN (R 4.1.0)
 bslib           0.4.0      2022-07-16 [1] CRAN (R 4.1.2)
 cachem          1.0.6      2021-08-19 [1] CRAN (R 4.1.0)
 cellranger      1.1.0      2016-07-27 [1] RSPM (R 4.1.0)
 cli             3.4.0      2022-09-08 [1] CRAN (R 4.1.2)
 colorspace      2.0-3      2022-02-21 [1] CRAN (R 4.1.2)
 curl            4.3.2      2021-06-23 [1] CRAN (R 4.1.0)
 data.table      1.14.2     2021-09-27 [1] CRAN (R 4.1.2)
 datamods        1.3.4      2022-09-01 [1] CRAN (R 4.1.2)
 DBI             1.1.3      2022-06-18 [1] CRAN (R 4.1.2)
 digest          0.6.29     2021-12-01 [1] CRAN (R 4.1.1)
 dplyr           1.0.10     2022-09-01 [1] CRAN (R 4.1.2)
 ellipsis        0.3.2      2021-04-29 [1] RSPM (R 4.1.0)
 esquisse        1.1.2.9010 2022-09-22 [1] Github (dreamRs/esquisse@7cb9765)
 evaluate        0.16       2022-08-09 [1] CRAN (R 4.1.2)
 extrafont       0.18       2022-04-12 [1] CRAN (R 4.1.2)
 extrafontdb     1.0        2012-06-11 [1] CRAN (R 4.1.0)
 fansi           1.0.3      2022-03-24 [1] CRAN (R 4.1.2)
 farver          2.1.1      2022-07-06 [1] CRAN (R 4.1.2)
 fastmap         1.1.0      2021-01-25 [1] RSPM (R 4.1.0)
 forcats         0.5.2      2022-08-19 [1] CRAN (R 4.1.2)
 foreign         0.8-82     2022-01-13 [4] CRAN (R 4.1.2)
 fs              1.5.2      2021-12-08 [1] CRAN (R 4.1.2)
 gdtools         0.2.4      2022-02-14 [1] CRAN (R 4.1.2)
 generics        0.1.3      2022-07-05 [1] CRAN (R 4.1.2)
 ggplot2         3.3.6      2022-05-03 [1] CRAN (R 4.1.2)
 ggthemes        4.2.4      2021-01-20 [1] CRAN (R 4.1.2)
 glue            1.6.2      2022-02-24 [1] CRAN (R 4.1.2)
 gtable          0.3.1      2022-09-01 [1] CRAN (R 4.1.2)
 haven           2.5.1      2022-08-22 [1] CRAN (R 4.1.2)
 hms             1.1.2      2022-08-19 [1] CRAN (R 4.1.2)
 hrbrthemes      0.8.0      2020-03-06 [1] CRAN (R 4.1.2)
 htmltools       0.5.3      2022-07-18 [1] CRAN (R 4.1.2)
 htmlwidgets     1.5.4      2021-09-08 [1] CRAN (R 4.1.1)
 httpuv          1.6.6      2022-09-08 [1] CRAN (R 4.1.2)
 jquerylib       0.1.4      2021-04-26 [1] RSPM (R 4.1.0)
 jsonlite        1.8.0      2022-02-22 [1] CRAN (R 4.1.2)
 knitr           1.40       2022-08-24 [1] CRAN (R 4.1.2)
 later           1.3.0      2021-08-18 [1] CRAN (R 4.1.0)
 lifecycle       1.0.2      2022-09-09 [1] CRAN (R 4.1.2)
 magrittr        2.0.3      2022-03-30 [1] CRAN (R 4.1.2)
 memoise         2.0.1      2021-11-26 [1] CRAN (R 4.1.1)
 mime            0.12       2021-09-28 [1] CRAN (R 4.1.1)
 munsell         0.5.0      2018-06-12 [1] RSPM (R 4.1.0)
 openxlsx        4.2.5      2021-12-14 [1] CRAN (R 4.1.2)
 phosphoricons   0.1.2      2022-04-11 [1] CRAN (R 4.1.2)
 pillar          1.8.1      2022-08-19 [1] CRAN (R 4.1.2)
 pkgconfig       2.0.3      2019-09-22 [1] RSPM (R 4.1.0)
 promises        1.2.0.1    2021-02-11 [1] RSPM (R 4.1.0)
 purrr           0.3.4      2020-04-17 [1] RSPM (R 4.1.0)
 R6              2.5.1      2021-08-19 [1] CRAN (R 4.1.0)
 ragg            1.2.2      2022-02-21 [1] CRAN (R 4.1.2)
 RColorBrewer    1.1-3      2022-04-03 [1] CRAN (R 4.1.2)
 Rcpp            1.0.9      2022-07-08 [1] CRAN (R 4.1.2)
 reactable       0.3.0      2022-05-26 [1] CRAN (R 4.1.2)
 reactR          0.4.4      2021-02-22 [1] CRAN (R 4.1.0)
 readxl          1.4.1      2022-08-17 [1] CRAN (R 4.1.2)
 rio             0.5.29     2021-11-22 [1] CRAN (R 4.1.1)
 rlang           1.0.5      2022-08-31 [1] CRAN (R 4.1.2)
 rmarkdown       2.16       2022-08-24 [1] CRAN (R 4.1.2)
 rstudioapi      0.14       2022-08-22 [1] CRAN (R 4.1.2)
 Rttf2pt1        1.3.10     2022-02-07 [1] CRAN (R 4.1.2)
 sass            0.4.2      2022-07-16 [1] CRAN (R 4.1.2)
 scales          1.2.1      2022-08-20 [1] CRAN (R 4.1.2)
 sessioninfo     1.2.2      2021-12-06 [1] CRAN (R 4.1.2)
 shiny         * 1.7.2      2022-07-19 [1] CRAN (R 4.1.2)
 shinyWidgets    0.7.3      2022-08-31 [1] CRAN (R 4.1.2)
 stringi         1.7.8      2022-07-11 [1] CRAN (R 4.1.2)
 stringr         1.4.1      2022-08-20 [1] CRAN (R 4.1.2)
 systemfonts     1.0.4      2022-02-11 [1] CRAN (R 4.1.2)
 textshaping     0.3.6      2021-10-13 [1] CRAN (R 4.1.1)
 tibble          3.1.8      2022-07-22 [1] CRAN (R 4.1.2)
 tidyselect      1.1.2      2022-02-21 [1] CRAN (R 4.1.2)
 utf8            1.2.2      2021-07-24 [1] CRAN (R 4.1.0)
 vctrs           0.4.1      2022-04-13 [1] CRAN (R 4.1.2)
 viridisLite     0.4.1      2022-08-22 [1] CRAN (R 4.1.2)
 xfun            0.33       2022-09-12 [1] CRAN (R 4.1.2)
 xtable          1.8-4      2019-04-21 [1] RSPM (R 4.1.0)
 yaml            2.3.5      2022-02-21 [1] CRAN (R 4.1.2)
 zip             2.2.1      2022-09-08 [1] CRAN (R 4.1.2)

[daattali]

Ah, I didn't understand that you had fixed it today before my last comment! It is functional now!

There are some UI/usability issues with bs5, I'm going to change this issue to be about that. Namely (for each one I have two screenshots, the first is classic and the second is bs5):

1. The names of the variables are hard to read

VS

2. The background of the selected geom is now grey which looks awkward when everything around it is white

VS

3. The tabs on the bottom are impossible to differentiate since the entire row is just one long grey rectangle

VS

4. Geoms that are invalid and therefore cannot be selected no longer have a "not-allowed" cursor on hover

VS

5. The tabs on the bottom used to always be a consistent height, now they break up into multiple lines which looks worse. It's especially noticeable beause bs5 made the font size larger and there's more whitespace, so this issue happens a lot, even on screens that were wide enough previously

VS

6. "Copy to clipboard" button location and size and look are completely different

VS

7. All the options in the export dropmenu are now underlined

VS

8. "Update preview" button in the export panel is always too big - no matter how wide the browser is, the button takes up two lines

VS

9. Some broken UI with radio buttons in the "Appearance" tab

VS

10. Some other buttons were converted to grey because of bs5 and it would be nicer to explicitly set them to white to have a more consistent look for the whole app. The button for export options is one example, and all the "+" buttons in the labels+title menu is another example

[pvictor]

Sorry, I should have been clearer. Thank you for this very complete list, it will be very useful to me. In some cases I think I have to do without Bootstrap, like for the variable badges. For the buttons we have to see, I wanted to touch as little as possible their appearance to let users the possibility later to modify them according to their desire, but I agree that their appearance currently with a BS 5 theme is not terrible.

[daattali]

For planning purposes (because I planned on using esquisse in a project), do you think these issues will be tackled soon? I just want to know if I should expect to be able to use esquisse or not, because in its current form it's not usable with bs5

[pvictor]

I'll look in the next week, lot of those seems related to actionButton / actionLink.