vendredi 17 mars 2023

how to give different colours to my boxes in html to mark internal and external apps, which is part of RShiny app?

I am trying to label the boxes into a different colour as a marking of internal external app. This html then is passed into an rshiny app.

Internal apps are defined by web links that have astrazeneca as word inside, and external links are those without astrazeneca word.

here is an example of html file I have (I have around 50 html files but will provide only one) for as a sample:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .box img {
            max-width: 50%;
            height: auto;
            margin-bottom: 10px;
        }
        .heading {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    
    <h2 class="heading">Gene Expression Analysis</h2>
    <div class="container">
        <div class="box">
            <a href= "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", target=”_blank” >
                <img src= "www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
                <p>Fludigm_Browser</p>
                <p>Perform Fluidigm data analysis</p>
            </a>
        </div>
        <div class="box">
            <a href="https://gtexportal.org/home", target=”_blank”>
                <img src="www/gtex.png" alt="Box 2">
                <p>GTEx Portal</p>
                <p>Gene expression in normal tissue</p>
            </a>
        </div>
        <div class="box">
            <a href="https://azcollaboration.sharepoint.com/sites/AZ208/SitePages/BioTuring.aspx?OR=Teams-HL&CT=1670593304007&clickparam =eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyOC8yMjExMzAwNDEwMCIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D", target=”_blank”>
                <img src="www/bioturing.svg" alt="Box 3">
                <p> BioTuring </p>
                <p>Platform for single-cell analysis and spatial transcriptomics exploration</p>
            </a>
        </div>
        <div class="box">
            <a href="http://informatics.medimmune.com/shiny/scope/", target=”_blank”>
                <img src="www/scope.svg" alt="Box 4">
                <p>SCOPE</p>
                <p>Explore available single cell RNA-Seq studies</p>
            </a>
        </div>
    </div>

    <h2 class="heading">Pathway Analysis</h2>
    <div class="container">
        <div class="box">
            <a href="https://clarivate.com/cortellis/learning/clarivate-for-astrazeneca1796/", target=”_blank”>
                <img src="www/clarivate.png" alt="Box 1">
                <p>Clarivate</p>
                <p>Pathway analysis tools from Cortellis including MetaCore</p>
            </a>
        </div>
        <div class="box">
            <a href="https://analysis.ingenuity.com/pa/launch.jsp">
                <img src= "www/ipa.png" alt="Box 2">
                <p>Ingenuity Pathway Analysis</p>
                <p>Analyze data using manually curated gene sets</p>
            </a>
        </div>
        <div class="box">
            <a href="https://astrazeneca.onramp.bio", target=”_blank”>
                <img src= "www/onramp.png" alt="Box 3">
                <p>OnRamp - Rosalind</p>
                <p>Interactively explore RNA-seq and ChIP-Seq data</p>
            </a>
        </div>
        <div class="box">
            <a href="http://software.broadinstitute.org/gsea/msigdb/index.jsp", target=”_blank”>
                <img src="www/gsea.png" alt="Box 4">
                <p>GSEA</p>
                <p>Gene set enrichment analysis</p>
            </a>
        </div>
    </div>

As you can see in the above html, I have few links with 'astrazeneca' as word in e.g. "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" and another one without , e.g. "www/bioturing.svg"

This is the rshiny code, for context purposes:

library(shiny)
ui <- shiny::fluidPage(
  theme = shinythemes::shinytheme("united"),

  tags$head(tags$style(".navbar {margin-bottom: 0px;}")),

  tags$head(
    tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}")
  ),

  navbarPage(
    title = div(
      img(src = "www/bftb_logo_v8_bare.png", height = "30px"),
      "AZ Oncology Bioinformatics Toolbox"
    ),
    windowTitle = "BFTB Landing Page",

    tabPanel("Toolbox", icon = icon("wrench"), disable = TRUE,
             shinydashboard::dashboardPage(
               header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300, disable = TRUE),
               shinydashboard::dashboardSidebar(
                 width = 300 ,
                 textInput("search_term", "Search for apps:"),
                 actionButton("search_button", "Search"),
                 shinydashboard::sidebarMenu(
                   shinydashboard::menuItem(
                     "Tools",
                     tabName = "tools_app",
                     icon = icon("wrench")
                   ),
                   shinydashboard::menuSubItem(
                     "Gene Expression/Signature/Pathways",
                     tabName = "gene_app",
                     icon = icon("chart-line")
                   )
                 )
               ),
               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"))
                 )
               )
             )
    )
  )
)


server <- function(input, output){


}


shinyApp(ui = ui, server = server)

And the 2 modules: tools one

mod_tools_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    
  )
}

and the gene one:

  mod_gene_expressions_sign_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinydashboard::tabItem(
      tabName = "gene_app",
      fluidRow(
        shiny::headerPanel(h3()),
        br(),
        htmltools::htmlTemplate("www/gene.html")
      )
    )
  )
  
}

Aucun commentaire:

Enregistrer un commentaire