I have an issue with adding logo's with the golem arhitecture. This is a bit more complex than I thought.
I am trying to refactor a code for an app deploying golem. so the original code (I won't add the full code since it is huge) looks like this:
shinyUI(
navbarPage(
windowTitle = "Page",
title = div(img(src = "bare.png", height = "30px"), "Oncology Toolbox"),
theme = shinytheme("cerulean"),
tabPanel(
"Toolbox", icon = icon("wrench"),
dashboardPage(
dashboardHeader(title = "Tools", titleWidth = 300),
dashboardSidebar(
width = 300,
tags$head(HTML(
)),
br(),
br(),
sidebarMenu(
id = "",
menuItem("Pathways",
tabName = "geneapp", icon = icon("line-chart"),
selected = TRUE),
menuItem("Genomic", tabName = "mutapp",
icon = icon("universal-access")),
dashboardBody(
tabItems(
## Group 1: Pathways
tabItem(
tabName = "geneapp",
fluidRow(
headerPanel(h3("Analysis")),
br(),
column(
3,
thumbnail_label(
url = "RStudio_FLAT/",
image = "FluidigmAnalysisToolkit.v2.png",
tool = "Fludigm_Browser",
label = "Fludigm Browser",
content = "Perform Fluidigm data analysis"
)
),
column(
3,
thumbnail_label(
url = "home",
image = "gtex.png",
tool = "GTEx",
label = "GTEx Portal",
content = "Gene expression in normal tissue"
)
),
br(),
etc.... etc...
Yet, with golem my code ui, which I want to keep this way, looks like this:
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(
"Pathways",
tabName = "gene_app",
icon = icon("chart-line")
),
shinydashboard::menuSubItem(
"Genomic",
tabName = "genomic_app",
icon = icon("universal-access")
)),
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"))
)))
}
The only code/module you should look into is
shinydashboard::tabItem("gene_app",mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui_1"))
However, as you can see, there is a thumbnail_label function that is added within code above, that takes the logo into. This is the function:
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 = "...",
div(class = "caption", h3(label), p(content))
)
)
)
)
)
}
Now, thumbnail_label function with golem infrastructure is added within 02_dev file, within dev folder.
All logos that I need in the above code, are all in www folder within the simple dashboard app infrastructure. I want to keep all the logos within this folder ins/app/www
Yet do not know how to add the logo's within thumbnail_label but with golem shiny app infrastructure.
Can someone help?
TL;DR: you have defined the thumbnail function twice, and the second one is incorrect.
Have a look into the HTML code of your app:
[![enter image description here][1]][1]
As you can see, the <img> HTML tag is not correctly created.
Which you can see by running the following code:
> pkgload::load_all()
ℹ Loading bftb
> thumbnail_label(
+ url = "https:///RStudio_FLAT/",
+ image = "www/FluidigmAnalysisToolkit.v2.png",
+ tool = "Fludigm_Browser",
+ label = "Fludigm Browser",
+ content = "Perform Fluidigm data analysis"
+ )
<a href="https:RStudio_FLAT/" onclick="gtag('event', 'click', { 'event_category': 'tool', 'event_label': 'Fludigm_Browser'});" target="_blank">
<div class="row">
<div class="col-sm-14 col-md-12">
<div class="thumbnail">
<img src="www" alt="...">
www/FluidigmAnalysisToolkit.v2.png
<div class="caption">
<h3>Fludigm Browser</h3>
<p>Perform Fluidigm data analysis</p>
</div>
</img>
</div>
</div>
</div>
</a>
Issue is:
<img src="www" alt="...">
www/FluidigmAnalysisToolkit.v2.png
This function is correctly defined in https://github.com/fct_thumbnail_label.R
but you have defined it a second time in https://github.com/gabrielburcea/bftb/blob/gene_expr_sign_path/R/thumbnail_label.R and this second one is wrong.
So if you remove this second file, you'll get what you want.
> unlink("R/thumbnail_label.R")
> pkgload::load_all()
ℹ Loading bftb
> thumbnail_label(
+ url = "https:///RStudio_FLAT/",
+ image = "www/FluidigmAnalysisToolkit.v2.png",
+ tool = "Fludigm_Browser",
+ label = "Fludigm Browser",
+ content = "Perform Fluidigm data analysis"
+ )
<a href="https://RStudio_FLAT/" onclick="gtag('event', 'click', { 'event_category': 'tool', 'event_label': 'Fludigm_Browser'});" target="_blank">
<div class="row">
<div class="col-sm-14 col-md-12">
<div class="thumbnail">
<img src="www/FluidigmAnalysisToolkit.v2.png" alt="...">
<div class="caption">
<h3>Fludigm Browser</h3>
<p>Perform Fluidigm data analysis</p>
</div>
</img>
</div>
</div>
</div>
</a>