Is there a way to display a filtered data table in a Modal window in R shiny using ggiraph and onclick?

Question

I would like to have an interactive plot using ggiraph in which my onclick initiates a modal which is a pop-up window displaying the information related to the individual data point I have clicked.

here is my code below. I cannot get the modal popup to work properly. I can get a Modal pop up window to come up, but it is blank. However, I can get the table to filter itself using an example provided here.

https://davidgohel.github.io/ggiraph/articles/offcran/shiny.html

'run_girafe_example("DT")'

What I would like is for this filtered table to be presented in a Modal pop up window. Possibly with the data transposed and presented in a nicer format. But If I can get the data to be presented in the Modal, I can figure out how to represent it later. I just need to figure out how to get the Modal to show the filtered data table in the first place!

any help would be appreciated :)

library(ggiraph)
library(ggplot2)
library(tidyverse)
library(htmltools)
library(DT)
library(shinyBS)
library(shinydashboard)

theme_set(theme_minimal())

data <- mtcars

ui <- fluidPage(

  fluidRow(
    column(width=12,
           h4("click a point, the data table will be filtered...")
    )
  ),

  fluidRow(
    column(width=12,
           ggiraphOutput("fixedplot")
    )
  )
  ,

  fluidRow(
    column(width=12,
           includeScript(path = "set_search_val.js"),
           DT::dataTableOutput("modaltable")
    )
    )
)

server <- function(input, output, session) {

  output$fixedplot <-renderGirafe({
    data$label <- gsub(pattern = "'", " ", row.names(data) )
    data$onclick <- paste0("set_search_val(\"", data$label, "\");")

    gg <- ggplot(data = data,
                 mapping = aes(x=wt, y=mpg,
                               tooltip = label,
                               data_id = label, 
                               onclick = onclick 
                               ) 
                 ) +
      geom_point_interactive()

    girafe(code = print (gg), 
           options = list(
             opts_selection(type = "single")
             )
           )
    })

  observeEvent(input$fixedplot_selected,{
    showModal(modalDialog(
      tags$caption("Table"),
      tableOutput("modaltable")
    ))
  }
  )

  output$modaltable <- DT::renderDataTable({
    car_data <- data[,1:7]
    DT::datatable(car_data, escape = FALSE)
  })
}

shinyApp(ui = ui, server = server)

score 2 · Answer 1 · answered Feb 28 '20 at 06:59

You need to call DT::renderDataTable inside modalDialog call:

library(ggiraph)
library(ggplot2)
library(tidyverse)
library(htmltools)
library(DT)
library(shinyBS)
library(shinydashboard)

theme_set(theme_minimal())

data <- mtcars

ui <- fluidPage(

  fluidRow(
    column(width=12,
           h4("click a point, the data table will be filtered...")
    )
  ),

  fluidRow(
    column(width=12,
           ggiraphOutput("fixedplot")
    )
  )
  ,

  fluidRow(
    column(width=12,
           includeScript(path = "set_search_val.js"),
           DT::dataTableOutput("modaltable")
    )
  )
)

server <- function(input, output, session) {

  output$fixedplot <-renderGirafe({
    data$label <- gsub(pattern = "'", " ", row.names(data) )
    data$onclick <- paste0("set_search_val(\"", data$label, "\");")

    gg <- ggplot(data = data,
                 mapping = aes(x=wt, y=mpg,
                               tooltip = label,
                               data_id = label, 
                               onclick = onclick 
                 ) 
    ) +
      geom_point_interactive()

    girafe(code = print (gg), 
           options = list(
             opts_selection(type = "single")
           )
    )
  })

  observeEvent(input$fixedplot_selected,{
    showModal(modalDialog(
      tags$caption("Table"),
      DT::renderDataTable({
        car_data <- data[,1:7]
        DT::datatable(car_data, escape = FALSE)
      })
    ))
  }
  )

  output$modaltable <- DT::renderDataTable({
    car_data <- data[,1:7]
    DT::datatable(car_data, escape = FALSE)
  })
}

shinyApp(ui = ui, server = server)

Thanks so much for helping! This is allowing the table to be presented, however the filtering is no longer working, and the whole table is shown. I would like just the filtered data to be shown when a point is clicked. I will mess around with it today and see if I can get it to work. Thanks for getting me in the right direction! — Alex, Mar 01 '20 at 22:00
What I actually need to do is change the set_search_val.js file to not just apply a search function to the table. I need the onclick function to initiate the creation of an entirely new page which pulls data from the data.frame according to what data point I click. — Alex, Mar 02 '20 at 04:46
yes, this is just a simple example :) and you could use a server approach instead of a client only. There are many options there. If you don't know js coding, I'd suggest you to only use server approach — David Gohel, Mar 02 '20 at 08:51

Is there a way to display a filtered data table in a Modal window in R shiny using ggiraph and onclick?

1 Answers1