Error using sortable in Quarto documents

[saudiwin]

I am able to include sortable elements produced by rank_list in interactive mode in a Quarto document, but rendering files produces the following error:

processing file: test_sortable.qmd
  |..........................................          |  80% [test_sort]      Error in `validateCssUnit()`:
! "NApx" is not a valid CSS unit (e.g., "100%", "400px", "auto")
Backtrace:
  1. global .main()
  2. execute(...)
  3. rmarkdown::render(...)
  4. knitr::knit(knit_input, knit_output, envir = envir, quiet = quiet)
  5. knitr:::process_file(text, output)
     ...
 16. base::withRestarts(...)
 17. base (local) withRestartList(expr, restarts)
 18. base (local) withOneRestart(withRestartList(expr, restarts[-nr]), restarts[[nr]])
 19. base (local) docall(restart$handler, restartArgs)
 21. evaluate (local) fun(base::quote(`<smplErrr>`))

I have tried with both the CRAN and development version of sortable. A stub Quarto document to reproduce the error is below:

---
title: "test_sortable"
format: html
---

```{r}
library(sortable)

rank_list(
  text = "Notice that dragging causes items to swap",
  labels = c("Fish","Bread","Apples"),
  input_id = "rank_list_swap",
  options = sortable_options(swap = TRUE)
)

My sessionInfo is as follows:

R version 4.4.2 (2024-10-31) Platform: aarch64-apple-darwin20 Running under: macOS Sequoia 15.0

Matrix products: default BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib LAPACK: /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/lib/libRlapack.dylib; LAPACK version 3.12.0

locale: [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: America/New_York tzcode source: internal

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

other attached packages: [1] sortable_0.5.0.9000 shiny_1.9.1 glue_1.7.0 surveydown_0.7.2

loaded via a namespace (and not attached): [1] jsonlite_1.8.8 compiler_4.4.2 promises_1.3.0 Rcpp_1.0.13
[5] assertthat_0.2.1 callr_3.7.6 later_1.3.2 yaml_2.3.10
[9] fastmap_1.2.0 mime_0.12 R6_2.5.1 commonmark_1.9.1
[13] curl_5.2.2 knitr_1.48 htmlwidgets_1.6.4 desc_1.4.3
[17] rprojroot_2.0.4 rlang_1.1.4 httpuv_1.6.15 xfun_0.47
[21] fs_1.6.4 cli_3.6.3 withr_3.0.1 magrittr_2.0.3
[25] learnr_0.11.5 ps_1.8.0 digest_0.6.37 processx_3.8.4
[29] rstudioapi_0.16.0 xtable_1.8-4 markdown_1.13 remotes_2.5.0
[33] lifecycle_1.0.4 evaluate_1.0.1.9000 pkgbuild_1.4.4 tools_4.4.2
[37] htmltools_0.5.8.1

[andrie]

Interesting. I wouldn't expect this to work, since sortable provides an htmlwidget for use with shiny. Thus behaviour in a standard quarto doc will be undefined, even if it doesn't throw an error.

You may be able to get this to work using a shiny runtime in your quarto doc, but I haven't tested this.

On Mon, 23 Dec 2024, 19:48 Robert Kubinec, @.***> wrote:

I am able to include sortable elements produced by rank_list in interactive mode in a Quarto document, but rendering files produces the following error:

processing file: test_sortable.qmd |.......................................... | 80% [test_sort] Error in validateCssUnit(): ! "NApx" is not a valid CSS unit (e.g., "100%", "400px", "auto") Backtrace:

1. global .main()
2. execute(...)
3. rmarkdown::render(...)
4. knitr::knit(knit_input, knit_output, envir = envir, quiet = quiet)
5. knitr:::process_file(text, output) ...
6. base::withRestarts(...)
7. base (local) withRestartList(expr, restarts)
8. base (local) withOneRestart(withRestartList(expr, restarts[-nr]), restarts[[nr]])
9. base (local) docall(restart$handler, restartArgs)
10. evaluate (local) fun(base::quote(<smplErrr>))

I have tried with both the CRAN and development version of sortable. A stub Quarto document to reproduce the error is below:

---

title: "test_sortable" format: html

library(sortable)


rank_list(
  text = "Notice that dragging causes items to swap",
  labels = c("Fish","Bread","Apples"),
  input_id = "rank_list_swap",
  options = sortable_options(swap = TRUE)
)



My sessionInfo is as follows:


R version 4.4.2 (2024-10-31)
Platform: aarch64-apple-darwin20
Running under: macOS Sequoia 15.0

Matrix products: default
BLAS:
/System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK:
/Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/lib/libRlapack.dylib;
LAPACK version 3.12.0

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: America/New_York
tzcode source: internal

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

other attached packages:
[1] sortable_0.5.0.9000 shiny_1.9.1 glue_1.7.0 surveydown_0.7.2

loaded via a namespace (and not attached):
[1] jsonlite_1.8.8 compiler_4.4.2 promises_1.3.0 Rcpp_1.0.13
[5] assertthat_0.2.1 callr_3.7.6 later_1.3.2 yaml_2.3.10
[9] fastmap_1.2.0 mime_0.12 R6_2.5.1 commonmark_1.9.1
[13] curl_5.2.2 knitr_1.48 htmlwidgets_1.6.4 desc_1.4.3
[17] rprojroot_2.0.4 rlang_1.1.4 httpuv_1.6.15 xfun_0.47
[21] fs_1.6.4 cli_3.6.3 withr_3.0.1 magrittr_2.0.3
[25] learnr_0.11.5 ps_1.8.0 digest_0.6.37 processx_3.8.4
[29] rstudioapi_0.16.0 xtable_1.8-4 markdown_1.13 remotes_2.5.0
[33] lifecycle_1.0.4 evaluate_1.0.1.9000 pkgbuild_1.4.4 tools_4.4.2
[37] htmltools_0.5.8.1

—
Reply to this email directly, view it on GitHub
<https://github.com/rstudio/sortable/issues/117>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AADVF7UQJ5WEDPISRR76DMT2HBEIXAVCNFSM6AAAAABUDN4ZL2VHI2DSMVQWIX3LMV43ASLTON2WKOZSG42TMNBZGIYDOMY>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>

[saudiwin]

Quarto supports shiny:

https://quarto.org/docs/interactive/shiny/

So it should work, including with htmlwidgets. The error seems to be related to something about the size of the widget not propagating through. I can also post in the Quarto repo.

[saudiwin]

After playing around, the problem is that sortable_js has a default width/height that is NULL to allow for automatic resizing. See from your repo in sortable_JS.R:

sortable_js <- function(
  css_id,
  options = sortable_options(),
  width = 0,
  height = 0,
  elementId = NULL, # nolint
  preRenderHook = NULL # nolint
)

There is no way to set the width/height explicitly from rank_question to sortable_js. I'd be happy to write a quick pull to allow for that if it's OK with you.

[andrie]

You are missing the server: shiny directive in your yaml.

On Mon, 30 Dec 2024, 22:24 Robert Kubinec, @.***> wrote:

After playing around, the problem is that sortable_js has a default width/height that is NULL to allow for automatic resizing. See from your repo in sortable_JS.R:

sortable_js <- function( css_id, options = sortable_options(), width = 0, height = 0, elementId = NULL, # nolint preRenderHook = NULL # nolint )

There is no way to set the width/height explicitly from rank_question to sortable_js. I'd be happy to write a quick pull to allow for that if it's OK with you.

— Reply to this email directly, view it on GitHub https://github.com/rstudio/sortable/issues/117#issuecomment-2565885380, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADVF7SB2ZCTWOMFIA7E5E32IGTXHAVCNFSM6AAAAABUDN4ZL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRVHA4DKMZYGA . You are receiving this because you commented.Message ID: @.***>

[saudiwin]

True, though that isn't actually required to the run document--once I set width="100%" and height="100%" in the call to sortable_js, the quarto doc compiles fine and displays the widget correctly.

I.e. I just added these arguments to the rank_list function:

rank_list2 <- function(
  text = "",
  labels,
  input_id,
  css_id = input_id,
  options = sortable_options(),
  orientation = c("vertical", "horizontal"),
  class = "default-sortable",
  width_widget="100%",
  height_widget="100%"
) {
  if (is.null(css_id)) {
    css_id <- increment_rank_list()
  }
  orientation = match.arg(orientation)
  if (orientation == "horizontal") class = paste0(class, " horizontal")
  assert_that(is_sortable_options(options))
  assert_that(is_input_id(input_id))

  options$onSort <- chain_js_events( # nolint
    options$onSort, # nolint
    sortable_js_capture_input(input_id)
  )
  options$onLoad <- chain_js_events( # nolint
    options$onLoad, # nolint
    sortable_js_capture_input(input_id),
    sortable_js_set_empty_class(css_id)
  )

  title_tag <- if (!is.null(text) && nchar(text) > 0) {
    tags$p(class = "rank-list-title", text)
  } else {
    NULL
  }

  label_tags <- as_label_tags(labels)

  rank_list_tags <- tagList(
    tags$div(
      class = paste("rank-list-container", paste(class, collapse = " ")),
      id = as_rank_list_id(css_id),
      title_tag,
      tags$div(
        class = "rank-list",
        id = css_id,
        label_tags
      )
    ),
    sortable_js(
      css_id = css_id,
      options = options,
      width=width_widget,
      height=height_widget
    ),
    rank_list_dependencies()
  )

  as_rank_list(rank_list_tags)

}

[andrie]

Adding the documentation label as a reminder to write some guidance for using in a quarto doc.