如何使用 golem shiny 应用程序将 4 个盒子排成一排？答案

【问题标题】：How to bring 4 boxes into one row, with golem shiny app?如何使用 golem shiny 应用程序将 4 个盒子排成一排？
【发布时间】：2022-08-15 23:49:25
【问题描述】：

我正在尝试将每行 4 个盒子带入我闪亮的应用程序中。 BioTuring 和 Scope 我希望与 FLAT 和 GTEx 在同一行对齐。这是它现在的样子：

一句话，这个应用程序是用魔像结构完成的。因此，在帮助和使用我的结构时请记住。

话虽如此，我有 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 被带入一个模块（根据 golem）。这是我的基因表达模块。我觉得这是我可以纠正的地方，将 2 个盒子与 FLAT 和 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())))

然后上面的基因模块进入app_ui（作为golem结构）见下文。但是，将 4 个盒子放到行中不应该发生在下面的代码中，而是上面的代码中。

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

有人能帮助我吗？

标签： r shiny dashboard

【解决方案1】：

保持魔像结构，我设法通过摆脱 shiny::headerPanel(h2("")), 将 4 个盒子排成一排

这是最终代码：

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

【讨论】：