Hi, I would like to display the HTML output from Glimma in a main panel in a Shiny app, but I cannot seem to get it to work. Glimma output is itself an interactive HTML in which you can hover over data points to see details, or search tables etc. I have no problem displaying a simple test HTML file with plain text (not from Glimma), so the problem must be something about how the Glimma output HTML and accompanying files are structured. Ultimately, I would like users to be able to select from selectInput the Glimma output they want to see and then be able to interact with it, but for now I have this basic problem of displaying a single output.
Below is minimal example code for the Shiny app, followed by copies of the contents of the Glimma output HTML. The accompanying JS and CSS files are too large to copy here, but I can provide snippets as requested. A screenshot of the Glimma output files/directories is here:
I am new to Shiny, so the issue could be something simple that I don't understand. Thanks for your help!
Shiny app
ui = shinyUI(fluidPage(
mainPanel(htmlOutput("glimma"))
)
)
server = function(input, output, session){
output$glimma <- renderUI({
includeHTML("glimma-plots/MD-Plot.html")
})
}
shinyApp(ui, server)
Glimma: MD-Plot.html
<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<head>
<script src='js/glimma.min.js'></script>
<link rel='stylesheet' href='css/glimma.min.css'>
<title>Glimma Plots</title>
<script>
function clickAdjPval() {
if ($('th:contains(Adj.PValue)').text()) $('th:contains(Adj.PValue)').click(); // sort table by adjusted p-value
}
</script>
</head>
<!-- sort by adjusted p-value on load if possible -->
<body onload=clickAdjPval()>
<div class='container'>
</div>
<script src='js/MD-Plot.js'></script>
<script>
glimma.init.processCharts();
glimma.init.processTables();
glimma.init.processLinkages();
glimma.init.processInputs();
</script>
<script>
d3.select('.container')
.append('div')
.style('text-align', 'right')
.text('Generated by ')
.append('a')
.text('Glimma')
.attr('href', 'https://www.github.com/shians/Glimma');
</script>
</body>
</html>