update `init` documentation

[chlebowa]

Some argument descriptions should be rephrased to be more clear.
The id parameter is completely opaque to me and it refers to a vignette which I believe no longer exists.

[kartikeyakirar]

Investigation:

The id parameter was initially introduced during the early stages of development when the init function was a straightforward wrapper mainly for end-user. This function essentially delegates directly to module_teal_with_splash.R.

The primary purpose of the id parameter was to facilitate the embedding of two separate teal applications side-by-side. This concept is also applicable for integrating these applications into other Shiny modules.

To individually access elements within init, we utilize the id argument of theinitfunction.

However, for above case it is also recommanded to use ui_teal_with_splash and srv_teal_with_splash directly for shiny modules.

now init with default id = character(0). Instead of separately calling ui_teal_with_splash and srv_teal_with_splash, we use init with id = character(0).

An earlier example demonstrating how to display two teal apps side-by-side, or embed them in a larger application, is as follows: I am not able to run complete application as tabs and encoding are not visible

# Code to have two teal apps side-by-side or embed it in a larger application
create_teal_app <- function(title, id) {
  init(
    data = teal_data(
      new_iris = transform(iris, id = seq_len(nrow(iris))),
      new_mtcars = transform(mtcars, id = seq_len(nrow(mtcars))),
      code = "
      new_iris <- transform(iris, id = seq_len(nrow(iris)))
      new_mtcars <- transform(mtcars, id = seq_len(nrow(mtcars)))
    "
    ),
    modules = modules(
      module(
        label = "data source",
        server = function(input, output, session, data) {},
        ui = function(id, ...) div(p("information about data source")),
        datanames = "all"
      ),
      example_module(label = "example teal module"),
      module(
        "Iris Sepal.Length histogram",
        server = function(input, output, session, data) {
          output$hist <- renderPlot(
            hist(data()[["new_iris"]]$Sepal.Length)
          )
        },
        ui = function(id, ...) {
          ns <- NS(id)
          plotOutput(ns("hist"))
        },
        datanames = "new_iris"
      )
    ),
    title = title,
    filter = teal_slices(
      teal_slice(dataname = "new_iris", varname = "Species"),
      teal_slice(dataname = "new_iris", varname = "Sepal.Length"),
      teal_slice(dataname = "new_mtcars", varname = "cyl"),
      exclude_varnames = list(new_iris = c("Sepal.Width", "Petal.Width")),
      mapping = list(
        `example teal module` = "new_iris Species",
        `Iris Sepal.Length histogram` = "new_iris Species",
        global_filters = "new_mtcars cyl"
      )
    ),
    header = tags$h1("Sample App"),
    footer = tags$p("Copyright 2017 - 2023")
  )
}
app1 <- create_teal_app("Sample App1", id = "app1")
app2 <- create_teal_app("Sample App2", id = "app2")
shinyApp(ui = app1$ui,
         server = function(input, output, session) {
  callModule(app1$server, "app1")
})

# However, recommended way to use `ui_teal_with_splash` and `srv_teal_with_splash` if you would
# want to use the teal app in the same way as Shiny modules with `callModule`, `ARGS` needs to
# be filled in:
app1 <- create_teal_app("Sample App1")
app2 <- create_teal_app("Sample App2")
shinyApp(ui = fluidPage(
  fluidRow(
    column(6, ui_teal_with_splash("app1", ARGS)),
    column(6, ui_teal_with_splash("app2", ARGS))
  )
), server = function(input, output, session) {
  callModule(srv_teal_with_splash, "app1", ARGS)
  callModule(srv_teal_with_splash, "app2", ARGS)
})

[kartikeyakirar]

Is it feasible to embed two teal applications within a single app using the method from the provided example?
I tried this approach but encountered difficulties, and I believe it might not be intended for users to directly utilize ui_teal_with_splash and server_teal_with_splash.

is there an alternative advantage or purpose for maintaining the id parameter in theinitfunction? Could a default id be automatically generated within init instead give user option to set?

[averissimo]

This is a biased opinion, but it's useful to integrate with Rhino framework.

To get automated testing, custom CSS, custom JS and other features without having to much overhead.

We used ui_teal_with_splash and server_teal_with_splash and the id argument before joining the team to develop: https://connect.appsilon.com/rhino-fda-pilot/ (source code)

server <- function(id) {
  moduleServer(id, function(input, output, session) {
    srv_teal_with_splash(id = "teal_wrapper", data = teal_data, modules = teal_modules)

    observe({
      session$sendCustomMessage("toggle_dark", input$theme_mode_toggle)
    }) |>
      bindEvent(input$theme_mode_toggle, once = FALSE, ignoreInit = TRUE)
  })
}

Which was a POC to show that

• Rhino supports {teal}
• Add minor functionality (dark/light mode) without having to change/extend the {teal} package
• Unit testing for logic
• E2E test for UI

This use case might not be enough to warrant keeping the argument though... it's just a case of {teal} out in the wild 😁

[averissimo]

Is it feasible to embed two teal applications within a single app using the method from the provided example?

It is possible to have 2 {teal} applications side by side (filter panel has a weird behavior though)

A minor tweak to the repo I mentioned in the comment before

diff

diff --git a/app/main.R b/app/main.R
index dee06c4..8d3f2b3 100644
--- a/app/main.R
+++ b/app/main.R
@@ -145,6 +145,67 @@ ui <- function(id) {
           )
         )
       )
+    ),
+    ui_teal_with_splash(
+      title = "Pilot 2 Shiny Rhino Application",
+      id = ns("teal_wrapper2"),
+      data = teal_data,
+      header = tags$div(
+        class = "flex",
+        tags$h1(
+          "Pilot 2 Shiny Application",
+          tags$span(
+            class = "text-muted text-smaller text-italic",
+            "(using Rhino framework)"
+          )
+        ),
+        tags$div(
+          class = "logos-wrapper",
+          tags$div(
+            class = "center-wrap",
+            actionButton(
+              ns("theme_mode_toggle"),
+              class = "color-mode-toggle",
+              label = tagList(
+                tags$span(
+                  class = "color-mode dark",
+                  title = "Switch to light mode",
+                  "☀️"
+                ),
+                tags$span(
+                  class = "color-mode light",
+                  title = "Switch to light mode",
+                  "🌑"
+                )
+              )
+            ),
+            tags$a(
+              href = "https://rconsortium.github.io/submissions-wg/",
+              target = "_blank",
+              tags$img(class = "logo", src = "static/logos/rconsortium.svg")
+            )
+          )
+        )
+      ),
+      footer = tagList(
+        tags$p(
+          class = "text-muted",
+          "Source: R Consortium. Adapted to a Rhino application by Appsilon."
+        ),
+        tags$div(
+          class = "logos-wrapper",
+          tags$a(
+            href = "https://rconsortium.github.io/submissions-wg/",
+            target = "_blank",
+            tags$img(class = "logo", src = "static/logos/rconsortium.svg")
+          ),
+          tags$a(
+            href = "https://appsilon.com",
+            target = "_blank",
+            tags$img(class = "logo", src = "static/logos/appsilon.svg")
+          )
+        )
+      )
     )
   )
 }
@@ -153,6 +214,7 @@ ui <- function(id) {
 server <- function(id) {
   moduleServer(id, function(input, output, session) {
     srv_teal_with_splash(id = "teal_wrapper", data = teal_data, modules = teal_modules)
+    srv_teal_with_splash(id = "teal_wrapper2", data = teal_data, modules = teal_modules)
 
     observe({
       session$sendCustomMessage("toggle_dark", input$theme_mode_toggle)

[averissimo]

Showing different tabs selected

[kartikeyakirar]

Thank you, @averissimo, for the examples demonstrating to use teal applications with Rhino. I noticed that you are utilizing ui_teal_with_splash and server_teal_with_splash in this context. However, I'm wondering whether the id parameter is still necessary in the init function for this purpose. I may not know the use case at the moment but it might be redundant in this case.

[averissimo]

The integration of teal on a Shiny app can be made due to this id argument. Without it, it's not possible as it is a required param to ui_teal_with_splash to create the proper namespace

edit: nevermind, I see that new documentation is great and reflects just this.

[gogonzo]

To call app within another app one need to call server directly and avoid callModule. Here is working example

library(teal)
app <- teal::init(
  data = teal_data(iris = iris, mtcars = mtcars),
  modules = modules(
    example_module("mod1"),
    example_module("mod2")
  )
)

shinyApp(
  ui = app$ui,
  server = function(input, output, session) {
    app$server(input, output, session)
  }
)

[averissimo]

That may be a way to add some server-side logic, but it would be difficult to add UI elements.

One can also use moduleServer (taking advantage of id to create a namespace for ui/server) as I showed here (with a simple working example): #1071 (comment)

(copying the comment here)

teal_modules <- teal::modules(teal::example_module())

ui <- function(id) {
  ns <- shiny::NS(id)
  shiny::div(
    style = "background-color: #ffc6c4;",
    shiny::h1("This is a shiny app wrapper around teal"),
    shiny::hr(),
    shiny::div(
      style = "margin: 5em; border: 1px solid black; background-color: white",
      shiny::div(
        teal::ui_teal_with_splash(id = ns("teal_wrapper"), data = teal.data::teal_data())
      )
    )
  )
}

server <- function(id) {
  shiny::moduleServer(id, function(input, output, session) {
    teal::srv_teal_with_splash(
      id = "teal_wrapper", data = teal.data::teal_data(iris = iris), modules = teal_modules
    )
  })
}

shiny::shinyApp(ui("app"), function(input, output, session) server("app"))

[kartikeyakirar]

Addtional Note:

For running two teal applications side by side, as demonstrated by the example provided by @gogonzo. However, specifying a unique id for each application is important to ensure they function correctly in this setup. (without this it doesn't so encoding or tabs)

library(teal)
app1 <- teal::init(
  data = teal_data(iris = iris),
  modules = modules(
    example_module("mod1"),
    example_module("mod2")
  ),
  id = "op"
)

app2 <- teal::init(
  data = teal_data(mtcars = mtcars),
  modules = modules(
    example_module("mod3"),
    example_module("mod4")
  )
)


shinyApp(ui = fluidPage(
  fluidRow(
    column(6, app1$ui),
    column(6, app2$ui)
  )
), server = function(input, output, session) {
  app1$server(input, output, session)
  app2$server(input, output, session)
})