Redesign the teal modules

DESCRIPTION

@@ -113,12 +113,12 @@ Collate:
     'module_filter_data.R'
     'module_filter_manager.R'
     'module_init_data.R'
-    'module_nested_tabs.R'
     'module_session_info.R'
     'module_snapshot_manager.R'
     'module_teal.R'
     'module_teal_data.R'
     'module_teal_lockfile.R'
+    'module_teal_navigation.R'
     'module_teal_with_splash.R'
     'module_transform_data.R'
     'reporter_previewer_module.R'

R/include_css_js.R

@@ -19,48 +19,6 @@ include_css_files <- function(pattern = "*") {
   )
 }
 
-#' Include `JS` files from `/inst/js/` package directory to application header
-#'
-#' `system.file` should not be used to access files in other packages, it does
-#' not work with `devtools`. Therefore, we redefine this method in each package
-#' as needed. Thus, we do not export this method
-#'
-#' @param pattern (`character`) pattern of files to be included, passed to `system.file`
-#' @param except (`character`) vector of basename filenames to be excluded
-#'
-#' @return HTML code that includes `JS` files.
-#' @keywords internal
-include_js_files <- function(pattern = NULL, except = NULL) {
-  checkmate::assert_character(except, min.len = 1, any.missing = FALSE, null.ok = TRUE)
-  js_files <- list.files(system.file("js", package = "teal", mustWork = TRUE), pattern = pattern, full.names = TRUE)
-  js_files <- js_files[!(basename(js_files) %in% except)] # no-op if except is NULL
-
-  singleton(lapply(js_files, includeScript))
-}
-
-#' Run `JS` file from `/inst/js/` package directory
-#'
-#' This is triggered from the server to execute on the client
-#' rather than triggered directly on the client.
-#' Unlike `include_js_files` which includes `JavaScript` functions,
-#' the `run_js` actually executes `JavaScript` functions.
-#'
-#' `system.file` should not be used to access files in other packages, it does
-#' not work with `devtools`. Therefore, we redefine this method in each package
-#' as needed. Thus, we do not export this method.
-#'
-#' @param files (`character`) vector of filenames.
-#'
-#' @return `NULL`, invisibly.
-#' @keywords internal
-run_js_files <- function(files) {
-  checkmate::assert_character(files, min.len = 1, any.missing = FALSE)
-  lapply(files, function(file) {
-    shinyjs::runjs(paste0(readLines(system.file("js", file, package = "teal", mustWork = TRUE)), collapse = "\n"))
-  })
-  invisible(NULL)
-}
-
 #' Code to include `teal` `CSS` and `JavaScript` files
 #'
 #' This is useful when you want to use the same `JavaScript` and `CSS` files that are
@@ -75,9 +33,6 @@ run_js_files <- function(files) {
 include_teal_css_js <- function() {
   tagList(
     shinyjs::useShinyjs(),
-    include_css_files(),
-    # init.js is executed from the server
-    include_js_files(except = "init.js"),
-    shinyjs::hidden(icon("fas fa-gear")), # add hidden icon to load font-awesome css for icons
+    include_css_files()
   )
 }

R/module_teal.R

@@ -51,54 +51,7 @@ ui_teal <- function(id, modules) {
   checkmate::assert_class(modules, "teal_modules")
   ns <- NS(id)
 
-  modules <- append_reporter_module(modules)
-
-  # show busy icon when `shiny` session is busy computing stuff
-  # based on https://stackoverflow.com/questions/17325521/r-shiny-display-loading-message-while-function-is-running/22475216#22475216 # nolint: line_length.
-  shiny_busy_message_panel <- conditionalPanel(
-    condition = "(($('html').hasClass('shiny-busy')) && (document.getElementById('shiny-notification-panel') == null))", # nolint: line_length.
-    tags$div(
-      icon("arrows-rotate", class = "fa-spin", prefer_type = "solid"),
-      "Computing ...",
-      style = "position: fixed; bottom: 0; right: 0;
-      width: 140px; margin: 15px; padding: 5px 0 5px 10px;
-      text-align: left; font-weight: bold; font-size: 100%;
-      color: #ffffff; background-color: #347ab7; z-index: 105;"
-    )
-  )
-
-  bslib::page_fluid(
-    id = id,
-    theme = get_teal_bs_theme(),
-    include_teal_css_js(),
-    shiny_busy_message_panel,
-    tags$div(
-      id = ns("tabpanel_wrapper"),
-      class = "teal-body",
-      ui_teal_module(id = ns("teal_modules"), modules = modules)
-    ),
-    tags$div(
-      id = ns("options_buttons"),
-      style = "position: absolute; right: 10px;",
-      ui_bookmark_panel(ns("bookmark_manager"), modules),
-      ui_snapshot_manager_panel(ns("snapshot_manager_panel")),
-      ui_filter_manager_panel(ns("filter_manager_panel"))
-    ),
-    tags$script(
-      HTML(
-        sprintf(
-          "
-            $(document).ready(function() {
-              $('#%s').appendTo('#%s');
-            });
-          ",
-          ns("options_buttons"),
-          ns("teal_modules-active_tab")
-        )
-      )
-    ),
-    tags$hr(style = "margin: 1rem 0 0.5rem 0;")
-  )
+  uiOutput(ns("main_teal_ui"))
 }
 
 #' @rdname module_teal
@@ -109,7 +62,9 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
   checkmate::assert_class(modules, "teal_modules")
   checkmate::assert_class(filter, "teal_slices")
 
+  modules <- drop_module(modules, "teal_module_landing")
   modules <- append_reporter_module(modules)
+  teal_data_resolved_state <- reactiveVal(FALSE)
 
   moduleServer(id, function(input, output, session) {
     logger::log_debug("srv_teal initializing.")
@@ -118,8 +73,40 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
       shinyjs::showLog()
     }
 
-    # `JavaScript` code
-    run_js_files(files = "init.js")
+    output$main_teal_ui <- renderUI({
+      # show busy icon when `shiny` session is busy computing stuff
+      # based on https://stackoverflow.com/questions/17325521/r-shiny-display-loading-message-while-function-is-running/22475216#22475216 # nolint: line_length.
+      shiny_busy_message_panel <- conditionalPanel(
+        condition = "(($('html').hasClass('shiny-busy')) && (document.getElementById('shiny-notification-panel') == null))", # nolint: line_length.
+        tags$div(
+          icon("arrows-rotate", class = "fa-spin", prefer_type = "solid"),
+          "Computing ...",
+          style = "position: fixed; bottom: 0; right: 0;
+          width: 140px; margin: 15px; padding: 5px 0 5px 10px;
+          text-align: left; font-weight: bold; font-size: 100%;
+          color: #ffffff; background-color: #347ab7; z-index: 105;"
+        )
+      )
+      bslib::page_fluid(
+        id = id,
+        theme = get_teal_bs_theme(),
+        include_teal_css_js(),
+        shiny_busy_message_panel,
+        tags$div(
+          id = session$ns("options_buttons"),
+          style = "position: absolute; right: 10px;",
+          ui_bookmark_panel(session$ns("bookmark_manager"), modules),
+          ui_snapshot_manager_panel(session$ns("snapshot_manager_panel")),
+          ui_filter_manager_panel(session$ns("filter_manager_panel"))
+        ),
+        tags$div(
+          id = session$ns("tabpanel_wrapper"),
+          class = "teal-body",
+          ui_teal_module(id = session$ns("teal_modules"), modules = modules)
+        ),
+        tags$hr(style = "margin: 1rem 0 0.5rem 0;")
+      )
+    })
 
     # set timezone in shiny app
     # timezone is set in the early beginning so it will be available also
@@ -165,8 +152,12 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
 
     data_load_status <- reactive({
       if (inherits(data_handled(), "teal_data")) {
+        shinyjs::enable(id = "close_teal_data_module_modal")
+        teal_data_resolved_state(TRUE)
         "ok"
       } else if (inherits(data, "teal_data_module")) {
+        shinyjs::disable(id = "close_teal_data_module_modal")
+        teal_data_resolved_state(FALSE)
         "teal_data_module failed"
       } else {
         "external failed"
@@ -182,28 +173,47 @@ srv_teal <- function(id, data, modules, filter = teal_slices()) {
     }
 
 
-
     if (inherits(data, "teal_data_module")) {
       setBookmarkExclude(c("teal_modules-active_tab"))
-      bslib::nav_insert(
-        id = "teal_modules-active_tab",
-        position = "before",
-        select = TRUE,
-        bslib::nav_panel(
-          title = icon("fas fa-database"),
-          value = "teal_data_module",
-          tags$div(
-            ui_init_data(session$ns("data")),
-            validate_ui
+      insertUI(
+        selector = ".teal-modules-wrapper .nav-item-custom",
+        where = "beforeBegin",
+        actionButton(session$ns("open_teal_data_module_ui"), NULL, icon = icon("database"))
+      )
+      observeEvent(input$open_teal_data_module_ui, ignoreInit = TRUE, ignoreNULL = FALSE, {
+        showModal(
+          div(
+            class = "teal teal-data-module-popup",
+            modalDialog(
+              id = session$ns("teal_data_module_ui"),
+              size = "xl",
+              tags$div(
+                ui_init_data(session$ns("data")),
+                validate_ui
+              ),
+              easyClose = FALSE,
+              footer = tags$div(id = session$ns("close_teal_data_module_modal"), modalButton("Dismiss"))
+            )
           )
         )
-      )
+        if (teal_data_resolved_state()) {
+          shinyjs::enable(id = "close_teal_data_module_modal")
+        } else {
+          shinyjs::disable(id = "close_teal_data_module_modal")
+        }
+      })
 
       if (attr(data, "once")) {
         observeEvent(data_signatured(), once = TRUE, {
           logger::log_debug("srv_teal@2 removing data tab.")
           # when once = TRUE we pull data once and then remove data tab
-          removeTab("teal_modules-active_tab", target = "teal_data_module")
+          shinyjs::runjs(
+            sprintf(
+              "document.querySelector('#%s button').click();",
+              session$ns("close_teal_data_module_modal")
+            )
+          )
+          removeUI(sprintf("#%s", session$ns("open_teal_data_module_ui")))
         })
       }
     } else {