General Issue: Unable to render gridified rtables in R Shiny

[NadiaAbraham]

Background Information

I am trying to use gridify to add watermark to rtables rendered with teal.widgets::table_with_settings_srv similar to the approach used in teal.modules.clinical package. However, it's not working. Appreciate any help on this. Thanks in advance.
Sample app:

library(shiny)
library(gridify)
library(teal.widgets)
app1 <- shinyApp(
  ui = fluidPage(
    table_with_settings_ui(
      id = "table_with_settings1"
    ),
    table_with_settings_ui(
      id = "table_with_settings2"
    )
  ),
  server = function(input, output, session) { 
    table_r1 <- reactive({
      l <- basic_table() %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))  
      tbl <- build_table(l, iris)     
      tbl
    })   
    table_with_settings_srv(id = "table_with_settings1", 
                            table_r = table_r1)
    table_r2 <- reactive({
      gridify_layout <- gridify::gridifyLayout(
        nrow = 3L,
        ncol = 1L,
        heights = grid::unit(c(0.05, 0.9, 0.05), "npc"),
        widths = grid::unit(1, "npc"),
        margin = grid::unit(c(t = 0.1, r = 0.1, b = 0.1, l = 0.1), units = "cm"),
        global_gpar = grid::gpar(),
        background = grid::get.gpar()$fill,
        adjust_height = FALSE,
        object = gridifyObject(row = 2, col = 1),
        cells = gridifyCells(
          title = gridifyCell(row = 1, col = 1),
          footer = gridifyCell(row = 3, col = 1),
          watermark = gridifyCell(row = 1:3, col = 1, rot = 45, gpar = grid::gpar(fontsize = 90, alpha = 0.3))
        )
      )      
      l <- basic_table() %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))
      tbl <- build_table(l, iris)
      tbl_gridified <- gridify::gridify(
        object = rtables.officer::tt_to_flextable(tbl, theme = NULL),
        layout = gridify_layout
      ) %>%
        set_cell("watermark", "DRAFT")
      tbl_gridified
    })
    table_with_settings_srv(id = "table_with_settings2", 
                            table_r = table_r2)
     
  }
)

if (interactive()) {
  runApp(app1)
}

Definition of Done

No response

[Polkas]

@NadiaAbraham thank you for trying out gridify and sharing your experience with us!

Apologies for the delay in responding, we had an extended holiday break.

The key point to understand is that gridify always returns a graphical object based on a grid layout (similar to ggplot).
Because of this, the output needs to be handled using either plotOutput or plot_with_settings.

Each approach has its own pros and cons.
In theory, we could even develop a teal server extension to handle gridify outputs more effectively in multi-page scenarios.

Here’s a working example:

library(shiny)
library(gridify)
library(teal.widgets)
library(magrittr)
library(rtables)

app1 <- shinyApp(
  ui = fluidPage(
    tags$div(
      tags$h2("table_with_settings for rtables"),
      table_with_settings_ui(
        id = "table_with_settings"
      )
    ),
    tags$div(
      tags$h2("plot_with_settings for gridify"),
      plot_with_settings_ui(
        id = "plot_with_settings"
      )
    ),
    tags$div(
      tags$h2("plotOutput for gridify"),
      plotOutput("plotOutput")
    )
  ),
  server = function(input, output, session) {
    table_r1 <- reactive({
      l <- basic_table() %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))
      tbl <- build_table(l, iris)
      tbl
    })

    table_with_settings_srv(
      id = "table_with_settings",
      table_r = table_r1
    )

    plot_r <- reactive({
      gridify_layout <- gridify::gridifyLayout(
        nrow = 3L,
        ncol = 1L,
        heights = grid::unit(c(0.05, 0.9, 0.05), "npc"),
        widths = grid::unit(1, "npc"),
        margin = grid::unit(c(t = 0.1, r = 0.1, b = 0.1, l = 0.1), units = "cm"),
        global_gpar = grid::gpar(fontfamily = "serif"),
        background = grid::get.gpar()$fill,
        adjust_height = FALSE,
        object = gridifyObject(row = 2, col = 1),
        cells = gridifyCells(
          title = gridifyCell(row = 1, col = 1),
          footer = gridifyCell(row = 3, col = 1),
          watermark = gridifyCell(row = 1:3, col = 1, rot = 45, gpar = grid::gpar(fontsize = 90, alpha = 0.3))
        )
      )

      l <- basic_table() %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))

      tbl <- build_table(l, iris)
      ft <- rtables.officer::tt_to_flextable(tbl, theme = NULL)
      ft <- flextable::font(ft, fontname = "serif", part = "all")
      ft <- flextable::fontsize(ft, size = 14, part = "all") # can be set e.g. for body
      # ...

      plt_gridified <- gridify::gridify(
        object = ft,
        layout = gridify_layout
      ) %>%
        set_cell("watermark", "DRAFT")

      plt_gridified
    })

    plot_with_settings_srv(id = "plot_with_settings", plot_r = plot_r, height = c(250, 200, 400))
    
    output$plotOutput <- renderPlot(
      expr = {
        plot_r()
      },
      height = 250
    )
  }
)

if (interactive()) {
  runApp(app1)
}

[NadiaAbraham]

Hi @Polkas

Thanks a lot for your reply!

Unfortunately using renderPlot/plot_with_settings for rendering a gridified table seems to distort the layout, indentation which is not acceptable to our users.

Attaching example:
rtable rendered with table_with_settings:

gridified rtable rendered with plot_with_settings: (I have highlighted few issues...)

Do you have any suggestions?

I have also raised this with teal.widgets team : insightsengineering/teal.widgets#334

[Polkas]

Thank you for reaching.
It is great that you checking out gridify.

You have full control here.
The advantage is that when it is done once the code can be reused.
I can suggest that there are two steps to check:

• rtables.officer conversion to flextable
• adapt the flextable from conversion

      tbl <- build_table(l, iris)
      # rtables.officer does the conversion
      ft <- rtables.officer::tt_to_flextable(tbl, theme = NULL)
      # we need to adapt the flextable to get a perfect table
      ft <- flextable::font(ft, fontname = "serif", part = "all")
      ft <- flextable::fontsize(ft, size = 14, part = "all") # can be set e.g. for body
      # .... Here  more flextable:: steps to get a perfect table

Moreover the dimensions and font size of an image can impact the look

[Polkas]

@NadiaAbraham do you need any more support from my side?
In your last examples you not sent the code. I can help with polishing examples if you send the code.

[NadiaAbraham]

Hi @Polkas ...sorry for the late reply, I am sending a simple example with r table and rtable converted to flextable ...the layout indentation is broken....is there any way we can adjust that too?

library(shiny)
library(gridify)
library(teal.widgets)

iris_upd <- iris %>%
            mutate("Header" = "Spanning_Header")

app1 <- shinyApp(
  ui = fluidPage(
    table_with_settings_ui(
      id = "table_with_settings1"
    ),
    plot_with_settings_ui(
      id = "table_with_settings2"
    )
  ),
  server = function(input, output, session) {
    
    table_r1 <- reactive({
      l <- basic_table() %>%
        split_cols_by("Header") %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))
      
      tbl <- build_table(l, iris_upd)
      
      tbl
    })
    
    table_with_settings_srv(id = "table_with_settings1", 
                            table_r = table_r1)
    
    table_r2 <- reactive({
      gridify_layout <- gridify::gridifyLayout(
        nrow = 3L,
        ncol = 1L,
        heights = grid::unit(c(0.05, 0.9, 0.05), "npc"),
        widths = grid::unit(1, "npc"),
        margin = grid::unit(c(t = 0.1, r = 0.1, b = 0.1, l = 0.1), units = "cm"),
        global_gpar = grid::gpar(),
        background = grid::get.gpar()$fill,
        adjust_height = FALSE,
        object = gridifyObject(row = 2, col = 1),
        cells = gridifyCells(
          title = gridifyCell(row = 1, col = 1),
          footer = gridifyCell(row = 3, col = 1),
          watermark = gridifyCell(row = 1:3, col = 1, rot = 45, gpar = grid::gpar(fontsize = 90, alpha = 0.3))
        )
      )
      
      l <- basic_table() %>%
        split_cols_by("Header") %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))
      
      tbl <- build_table(l, iris_upd)
      
      tbl_gridified <- gridify::gridify(
        object = rtables.officer::tt_to_flextable(tbl, theme = NULL),
        layout = gridify_layout
      ) %>%
        set_cell("watermark", "DRAFT")
      
      tbl_gridified
    })
    
    plot_with_settings_srv(id = "table_with_settings2", 
                           plot_r = table_r2)
    
    
  }
)

if (interactive()) {
  runApp(app1)
}

[Polkas]

Thank you for your quick feedback.

Luckily we have full control over flextable.
You can control padding in flextable with flextable::padding and I recommend to use teal.widgets::plot_with_settings_srv with adjusted height. I applied a flextable vanilla theme to make the look more fancy.

library(shiny)
library(gridify)
library(teal.widgets)
library(dplyr)
library(rtables)

iris_upd <- iris %>%
  mutate("Header" = "Spanning_Header")

app1 <- shinyApp(
  ui = fluidPage(
    table_with_settings_ui(
      id = "table_with_settings1"
    ),
    plot_with_settings_ui(
      id = "table_with_settings2"
    )
  ),
  server = function(input, output, session) {
    table_r1 <- reactive({
      l <- basic_table() %>%
        split_cols_by("Header") %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))

      tbl <- build_table(l, iris_upd)

      tbl
    })

    table_with_settings_srv(
      id = "table_with_settings1",
      table_r = table_r1
    )

    table_r2 <- reactive({
      gridify_layout <- gridify::gridifyLayout(
        nrow = 3L,
        ncol = 1L,
        heights = grid::unit(c(0.05, 0.9, 0.05), "npc"),
        widths = grid::unit(1, "npc"),
        margin = grid::unit(c(t = 0.1, r = 0.1, b = 0.1, l = 0.1), units = "cm"),
        global_gpar = grid::gpar(),
        background = grid::get.gpar()$fill,
        adjust_height = FALSE,
        object = gridifyObject(row = 2, col = 1),
        cells = gridifyCells(
          title = gridifyCell(row = 1, col = 1),
          footer = gridifyCell(row = 3, col = 1),
          watermark = gridifyCell(row = 1:3, col = 1, rot = 45, gpar = grid::gpar(fontsize = 90, alpha = 0.3))
        )
      )

      l <- basic_table() %>%
        split_cols_by("Header") %>%
        split_cols_by("Species") %>%
        analyze(c("Sepal.Length", "Sepal.Width"))

      tbl <- build_table(l, iris_upd)

      tbl_final <- rtables.officer::tt_to_flextable(tbl, theme = NULL)
      tbl_final <- flextable::font(tbl_final, fontname = "serif", part = "all")
      tbl_final <- flextable::fontsize(tbl_final, size = 14, part = "all") # can be set e.g. for body
      tbl_final <- flextable::padding(tbl_final, i = 2, j = 1, padding.left = 20)
      tbl_final <- flextable::padding(tbl_final, i = 4, j = 1, padding.left = 20)
      tbl_final <- tbl_final %>%
        flextable::theme_vanilla()
  
      tbl_gridified <- gridify::gridify(
        object = tbl_final,
        layout = gridify_layout
      ) %>%
        set_cell("watermark", "DRAFT")

      tbl_gridified
    })

    plot_with_settings_srv(
      id = "table_with_settings2",
      plot_r = table_r2, height = c(250, 100, 400)
    )
  }
)

if (interactive()) {
  runApp(app1)
}