How to bring 4 boxes into one row, with golem shiny app?

user_7425379 0
Viewed 43

I am trying to bring 4 boxes per row, into my shiny app. BioTuring and Scope I want aligned on the same row as FLAT and GTEx. This is how it looks now:

One remark, this app is done with golem structure. Thus, please bear in mind when helping and go with the structure I have.

Having said that I have thumbnail_label

thumbnail_label <- function(url, image, label="", content="", tool="misc",
                                    category = "tool") {
          tags$a(
            href = url,
            onclick = paste0("gtag('event', 'click', { 'event_category': '", category,
                             "', 'event_label': '", tool, "'});"),
            target = "_blank",
            div(class = "row",
                div(class = "col-sm-14 col-md-12",
                    div(class = "thumbnail",
                        img(src = image, alt = "...", height = 200, width = 100,
                            div(class = "caption", h5(label), p(content))
                        )
                    )
                )
            )
          )
        }

thumnail_label is brought into a module (as per golem). This is my module for gene expressions. I have the feeling this is where I can correct to bring the 2 boxes aligned into one row, alongside FLAT and GTEx.

mod_gene_expressions_sign_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinydashboard::tabItem(
      tabName = "gene_app",
      fluidRow(
        shiny::headerPanel(h2("Gene Analysis")),
        br(),
        column(
          3,
          thumbnail_label(
            url = "https://rstudio-connect.RStudio_FLAT/",
            image = "www/Fluidigm.v2.png",
            tool = "Fludigm_Browser",
            label = "Fludigm Browser",
            content = "Perform Fluidigm data analysis"
          )
        ),
        br())))

Then gene module above is going into app_ui (as golem structure) see bellow. However, to bring 4 boxes onto the row should not happen in the bellow code, but above.

app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # Your application UI logic
    shinyUI(
      navbarPage(
        windowTitle = "Page",
        title = div(img(src = ".png", height = "30px"), "Toolbox"),
        theme = shinythemes::shinytheme("cerulean"),
        tabPanel("Toolbox", icon = icon("wrench"),
                 shinydashboard::dashboardPage(
                   header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300),
                   shinydashboard::dashboardSidebar(
                     width = 300 ,
                     shinydashboard::sidebarMenu(
                       shinydashboard::menuItem(
                         "Tools",
                         tabName = "tools_app",
                         icon = icon("wrench"),
                         shinydashboard::menuSubItem(
                           "Gene /Pathways",
                           tabName = "gene_app",
                           icon = icon("chart-line")
                         ),
                         shinydashboard::menuSubItem(
                           "Genomic",
                           tabName = "genomic_app",
                           icon = icon("universal-access")
                         ),
                   shinydashboard::dashboardBody(
                     shinydashboard::tabItems(
                       shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
                       shinydashboard::tabItem("gene_app",mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui_1")),
                       shinydashboard::tabItem("genomic_app", mod_genomic_ui("genomic_ui_1")),
        tabPanel(
          "Tutorials", icon = icon("graduation-cap")),
        tabPanel("Worflows", icon = icon("list"))
      )))
}

Can someone help me, please?

shiny dashboard r
1 Answers

Keeping golem structure, I have managed to bring the 4 boxes into a row by getting rid of shiny::headerPanel(h2("")),

and this is the final code:

mod_gene_expressions_sign_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinydashboard::tabItem(
      tabName = "gene_app",
      # column(width = 9,
      fluidRow(
        shiny::headerPanel(h2("Gene Expression Analysis")),
        br(),
        column(
          3,
          thumbnail_label(
            url = "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/",
            image = "www/FluidigmAnalysisToolkit.v2.png",
            tool = "Fludigm_Browser",
            label = "Fludigm Browser",
            content = "Perform Fluidigm data analysis"
          )
        ),
        column(
          3,
          thumbnail_label(
            url = "https://gtexportal.org/home",
            image = "www/gtex.png",
            tool = "GTEx",
            label = "GTEx Portal",
            content = "Gene expression in normal tissue"
          )
        ),
        # shiny::headerPanel(h2("")),
        column(
          3,
          thumbnail_label(
            url = "https://azcollaboration.sharepoint.com/:b:/r/sites/BioinformaticsfortheBench/Shared%20Documents/Tools/BioTuring/BioTuring_Installation_Instructions.v2021.5.17.pdf?csf=1&web=1&e=TVpy8S",
            image = "www/bioturing.svg",
            content = "Platform for single-cell analysis and spatial transcriptomics exploration",
            label = "BioTuring",
            tool = "BioTuring"
          )
        ),
        column(
          3,
          thumbnail_label(
            url = "http://informatics.medimmune.com/shiny/scope/",
            image = "www/scope.svg",
            content = "Explore available single cell RNA-Seq studies",
            label = "SCOPE",
            tool = "SCOPE"
          )
        ),
        br(),
        shiny::headerPanel(h2("Pathway Analysis")),
        br(),
        column(
          3,
          thumbnail_label(
            url = "https://clarivate.com/cortellis/learning/clarivate-for-astrazeneca1796/",
            image = "www/clarivate.png",
            tool = "clarivate",
            label = "Clarivate",
            content = "Pathway analysis tools from Cortellis including MetaCore"
          )
        ),
        column(
          3,
          thumbnail_label(
            url = "https://analysis.ingenuity.com/pa/launch.jsp",
            image = "www/ipa.png",
            tool = "IPA",
            label = "Ingenuity Pathway Analysis",
            content = "Analyze data using manually curated gene sets"
          )
        ),
        column(
          3,
          thumbnail_label(
            url = "https://astrazeneca.onramp.bio",
            image = "www/onramp.png",
            tool = "OnRamp",
            label = "OnRamp - Rosalind",
            content = "Interactively explore RNA-seq and ChIP-Seq data"
          )
        ), 
        br(),
        column(
          3,
          thumbnail_label(
            url = "http://software.broadinstitute.org/gsea/msigdb/index.jsp",
            image = "www/gsea.png",
            tool = "GSEA",
            label = "GSEA",
            content = "Gene set enrichment analysis"
          )
        )
      )
    )
  )
  
}
user_74253790
Related