Final UI/UX changes #1571

vedhav · 2025-07-30T14:05:48Z

Part of fixes that will close insightsengineering/teal.gallery#216 and insightsengineering/teal.gallery#217

Please review this along with its companion PRs:

Changes:

Improved the header/footer and breadcrum spacing

The popup buttons: 🔖Bookmark, 📷Snapshot Manager, ▼ Filter Manager, 📅Load Data
will be disabled when shiny is busy. Note that the teal.reporter and teal.widgets modal buttons are handled in different PRs, the solution is the same, but they are name-spaced so they don't clash each other.

Example app for testing

devtools::load_all("../teal.widgets")
devtools::load_all("../teal.reporter")
devtools::load_all("../teal")
devtools::load_all("../teal.modules.general")

make_data <- function(datanames = c("ADSL", "ADTTE")) {
  data_obj <- teal.data::teal_data()
  if ("ADSL" %in% datanames) {
    data_obj <- within(data_obj, ADSL <- teal.data::rADSL)
  }
  if ("ADTTE" %in% datanames) {
    data_obj <- within(data_obj, ADTTE <- teal.data::rADTTE)
  }
  join_keys(data_obj) <- default_cdisc_join_keys[datanames]
  data_obj
}

error_data <- teal_data_module(
  once = FALSE,
  ui = function(id) {
    ns <- NS(id)
    tagList(
      selectizeInput(
        ns("errortype"),
        label = "Error Type",
        choices = c(
          "ok", "insufficient datasets", "no data",
          "qenv.error", "error in reactive", "validate error", "silent.shiny.error", "not a reactive"
        )
      ),
      actionButton(ns("submit"), "Submit")
    )
  },
  server = function(id, ...) {
    moduleServer(id, function(input, output, session) {
      logger::log_trace("example_module_transform2 initializing.")

      eventReactive(input$submit, {
        switch(req(input$errortype),
          ok = make_data(),
          `insufficient datasets` = make_data(datanames = "ADSL"),
          `no data` = teal_data(),
          qenv.error = within(teal_data(), stop("this is qenv.error in teal_data_module (from inside within())")),
          `error in reactive` = stop("error in a reactive in teal_data_module (manual stop call)"),
          `validate error` = validate(need(FALSE, "validate error in teal_data_module (with newline )")),
          `silent.shiny.error` = req(FALSE)
        )
      })
    })
  }
)

modules <- modules(
  module(
    "test wait",
    server = function(id, data) {
      moduleServer(id, function(input, output, session) {
        observeEvent(input$wait, {
          Sys.sleep(2)
        })
      })
    },
    ui = function(id) {
      ns <- NS(id)
      actionButton(ns("wait"), "Wait for 2 seconds `Sys.sleep(2)`")
    }
  ),
  example_module("One"),
  teal.modules.general::tm_g_distribution(
    "Distribution",
    dist_var = teal.transform::data_extract_spec(
      dataname = "iris",
      select = teal.transform::select_spec(teal.transform::variable_choices("iris"), "Petal.Length")
    )
  ),
  example_module("One"),
  example_module("Two"),
  example_module("Two"),
  teal.modules.general::tm_variable_browser("Variable Browser"),
  teal.modules.general::tm_variable_browser("Variable Browser"),
  modules(
    label = "Nest level 1",
    example_module("Two"),
    example_module("Double Nested module"),
    modules(
      label = "Nest level 2",
      example_module("Inception two"),
      modules(
        label = "Nest level 3",
        example_module("Double Inception")
      )
    )
  ),
  modules(
    label = "Nested",
    example_module("Nested one"),
    example_module("Nested two")
  ),
  example_module("Three")
)

app <- init(
  data = error_data,
  modules = modules
) |>
  modify_title(title = "Custom title") |>
  modify_header(
    element = tags$div("Custom header")
  ) |>
  modify_footer(
    element = tags$div(h3("Custom footer"))
  )
shinyApp(app$ui, app$server, enableBookmarking = "server")

github-actions · 2025-07-30T14:16:12Z

Unit Tests Summary

1 files 25 suites 2m 4s ⏱️
266 tests 210 ✅ 56 💤 0 ❌
451 runs 395 ✅ 56 💤 0 ❌

Results for commit 21e8e4b.

♻️ This comment has been updated with latest results.

github-actions · 2025-07-30T14:16:16Z

Unit Test Performance Difference

Test Suite	$Status$	Time on `main`	$±Time$	$±Tests$	$±Skipped$	$±Failures$	$±Errors$
module_teal	💚	$105.65$	$-5.11$	$0$	$0$	$0$	$0$
shinytest2-show-rcode	👶		$+0.23$	$+3$	$+3$	$0$	$0$

Additional test case details

Test Suite	$Status$	Time on `main`	$±Time$	Test Case
shinytest2-reporter	💀	$0.02$	$-0.02$	unnamed
shinytest2-show-rcode	👶		$+0.08$	e2e_Module_with_Show_R_Code_has_code
shinytest2-show-rcode	👶		$+0.08$	e2e_Module_with_Show_R_Code_has_modal_with_dismiss_and_copy_to_clipboard_buttons
shinytest2-show-rcode	👶		$+0.08$	e2e_Module_with_Show_R_Code_initializes_with_visible_button

Results for commit 39bbcd2

♻️ This comment has been updated with latest results.

github-actions · 2025-07-30T14:16:26Z

Code Coverage Summary

Filename                          Stmts    Miss  Cover    Missing
------------------------------  -------  ------  -------  ---------------------------------------------------------------------------------------------------------------------------------------------
R/checkmate.R                        24       0  100.00%
R/dummy_functions.R                  67      11  83.58%   46, 48, 90-98
R/include_css_js.R                   11      11  0.00%    12-37
R/init.R                            146     100  31.51%   137-158, 188-196, 206-235, 238-239, 246-255, 258-267, 270-279, 283-293, 295
R/landing_popup_module.R             34      34  0.00%    22-57
R/module_bookmark_manager.R         153     122  20.26%   47-58, 78-133, 138-139, 151, 198, 233-310
R/module_data_summary.R             177      10  94.35%   25-26, 40, 50, 205, 236-240
R/module_filter_data.R               64       2  96.88%   22-23
R/module_filter_manager.R           229      56  75.55%   56-61, 72-81, 89-94, 107-111, 116-117, 290-313, 339, 366, 378, 385-386
R/module_init_data.R                 74       6  91.89%   38-43
R/module_nested_tabs.R              363     206  43.25%   68-98, 125, 140-320, 352, 470-473, 477-480, 484-487, 502, 536, 589-592
R/module_session_info.R              18       7  61.11%   35-41
R/module_snapshot_manager.R         265     194  26.79%   89-94, 103-112, 120-144, 163-164, 181-204, 208-223, 225-232, 239-269, 273, 277-281, 283-289, 292-305, 308-316, 346-360, 363-374, 377-391, 404
R/module_teal_data.R                149      76  48.99%   43-149
R/module_teal_lockfile.R            131      69  47.33%   33-37, 45-57, 60-62, 76, 86-88, 92-96, 100-102, 110-119, 122, 124, 126-127, 142-146, 161-162, 177-186, 196-201
R/module_teal_with_splash.R          33      33  0.00%    24-61
R/module_teal.R                     206      84  59.22%   50-115, 133, 144-145, 186, 204-220, 222
R/module_transform_data.R           116       7  93.97%   20, 46, 130-134
R/modules.R                         291      53  81.79%   174-178, 233-236, 360-380, 388, 394, 571-577, 590-598, 613-628, 661, 674
R/reporter_previewer_module.R        41      41  0.00%    22-85
R/show_rcode_modal.R                 31      31  0.00%    17-49
R/tdata.R                            14      14  0.00%    19-61
R/teal_data_module-eval_code.R       24       0  100.00%
R/teal_data_module-within.R           7       0  100.00%
R/teal_data_module.R                 20       0  100.00%
R/teal_data_utils.R                  10       0  100.00%
R/teal_modifiers.R                   71      71  0.00%    26-214
R/teal_reporter.R                    70       8  88.57%   69, 77-82, 131-132, 135, 152
R/teal_slices-store.R                29       0  100.00%
R/teal_slices.R                      63       0  100.00%
R/teal_transform_module.R            45       0  100.00%
R/TealAppDriver.R                   377     377  0.00%    57-756
R/utils.R                           291      60  79.38%   402-451, 499-510, 539-548
R/validate_inputs.R                  32       0  100.00%
R/validations.R                      58      37  36.21%   118-406
R/zzz.R                              16      12  25.00%   4-19
TOTAL                              3750    1732  53.81%

Diff against main

Filename      Stmts    Miss  Cover
----------  -------  ------  -------
R/utils.R        +8       0  +0.58%
TOTAL            +8       0  +0.10%

Results for commit: 21e8e4b

Minimum allowed coverage is 80%

♻️ This comment has been updated with latest results

averissimo

It looks good 💯

I'm not approving as waiting for discussion to play out in other related PRs

averissimo · 2025-07-31T15:32:42Z

FYI: the example app fails on the distribution module

inst/js/busy-disable.js

Signed-off-by: Vedha Viyash <[email protected]>

Companion of insightsengineering/teal#1571 Additionally, it improves the preview button's position in the vignette.

Companion of insightsengineering/teal#1571 <details> <summary> Example app for testing </summary> ```r library(shiny) devtools::load_all("../teal.widgets") ui <- bslib::page_fluid( actionButton("wait", "Wait for 2 seconds `Sys.sleep(2)`"), verbatim_popup_ui("button_popup", button_label = "Button popup"), verbatim_popup_ui("link_popup", button_label = "Link popup", type = "link") ) srv <- function(input, output) { observeEvent(input$wait, { Sys.sleep(2) }) verbatim_popup_srv( "button_popup", "if (TRUE) { print('Popups are the best') }", title = "My custom title", style = TRUE ) verbatim_popup_srv( "link_popup", "if (TRUE) { print('Popups are the best') }", title = "My custom title", style = TRUE ) } shinyApp(ui, srv) ``` </details>

averissimo

Let's go!

vedhav added 2 commits July 28, 2025 19:29

feat: improve spacing

cd46064

feat: disable modal-open buttons when shiny is busy

002c73f

vedhav added the core label Jul 30, 2025

This was referenced Jul 30, 2025

Final UI/UX changes insightsengineering/teal.reporter#366

Merged

Final UI/UX changes insightsengineering/teal.widgets#310

Merged

vedhav enabled auto-merge (squash) July 30, 2025 14:27

Merge branch 'main' into ui_changes@main

3eff164

averissimo reviewed Jul 31, 2025

View reviewed changes

vedhav commented Aug 1, 2025

View reviewed changes

inst/js/busy-disable.js Show resolved Hide resolved

Update inst/js/busy-disable.js

ced7fe7

Signed-off-by: Vedha Viyash <[email protected]>

vedhav added a commit to insightsengineering/teal.reporter that referenced this pull request Aug 1, 2025

Final UI/UX changes (#366)

a646b7a

Companion of insightsengineering/teal#1571 Additionally, it improves the preview button's position in the vignette.

averissimo approved these changes Aug 1, 2025

View reviewed changes

Merge branch 'main' into ui_changes@main

21e8e4b

vedhav merged commit 0382cdb into main Aug 5, 2025
25 checks passed

vedhav deleted the ui_changes@main branch August 5, 2025 05:38

github-actions bot locked and limited conversation to collaborators Aug 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Final UI/UX changes #1571

Final UI/UX changes #1571

Uh oh!

vedhav commented Jul 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 30, 2025 •

edited

Loading

Uh oh!

averissimo left a comment

Uh oh!

averissimo commented Jul 31, 2025

Uh oh!

Uh oh!

averissimo left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Final UI/UX changes #1571

Final UI/UX changes #1571

Uh oh!

Conversation

vedhav commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unit Tests Summary

Uh oh!

github-actions bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unit Test Performance Difference

Uh oh!

github-actions bot commented Jul 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Diff against main

Uh oh!

averissimo left a comment

Choose a reason for hiding this comment

Uh oh!

averissimo commented Jul 31, 2025

Uh oh!

Uh oh!

averissimo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vedhav commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading

github-actions bot commented Jul 30, 2025 •

edited

Loading