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

Question

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?

Answer 1

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"
)
)
)
)
)
}