Forcing MathJax to Wrap in Shiny div - shiny

I have a long MathJax expression that I need to print in a Shiny app. Because the expression's so long, it needs to wrap across lines. However, it currently refuses to do so.
I strongly suspect it has to do with the equation not being rendered as conventional text (i.e., it's not being rendered as a string, but as a series of spans), which rules out the usual ways you'd make a div's content wrap.
I know that MathJax supports line wraps (here). I can also get UI equations to wrap using KaTeX (see second code block below), but would prefer to keep everything in MathJax, with how complex the overall app is.
What I've tried:
Via CSS, variants of the following for the "MathJax" class (.MathJax)
word-break: break-all;
word-wrap: break-word;
display: flex;
flex-wrap: wrap;
Setting white-space: nowrap; to white-space: normal; for .MathJax (which shouldn't matter at all, I recognize)
Putting the equation in a wrapper div, and then trying to set that wrapper div's CSS properties as in the two bullets above (plus a variant where I also hardcoded the div's width)
Declaring the following as the first line within the UI function:
tags$script(type="text/x-mathjax-config", "
MathJax.Hub.Config({
\"HTML-CSS\": { linebreaks: { automatic: true;} },
});
"),
Another variant of the above:
tags$script(type="text/x-mathjax-config", "
MathJax.Hub.Config({
\"HTML-CSS\": { linebreaks: { automatic: true;} },
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
"),
The above <script> chunk, plus shifting the MathJax expression in the UI to in-line by replacing the (\\ and )// with $$s.
There are possibly a few different problems all running into each other at once. Thoughts on what those problems may be?
A MWE (no MathJax output wraps)
# UI
ui <- bootstrapPage(
h2("UI"),
# something arbitrary and long
withMathJax(
"\\( f \\left( \\alpha, \\beta_1 | x_i\\right) = \\left(3.5-0.75*-1.414\\right)+ \\left(3.5-0.75*0.189\\right)+ \\left(3.5-0.75*0.026\\right)+ \\left(3.5-0.75*-0.779\\right)+ \\left(3.5-0.75*0.683\\right)+ \\left(3.5-0.75*-0.503\\right)+ \\left(3.5-0.75*-1.18\\right)+ \\left(3.5-0.75*-1.736\\right)+ \\left(3.5-0.75*-1.497\\right)+ \\left(3.5-0.75*-1.12\\right)+ \\left(3.5-0.75*1.263\\right)+ \\left(3.5-0.75*0.512\\right)+ \\left(3.5-0.75*-0.143\\right)+ \\left(3.5-0.75*-0.464\\right)+ \\left(3.5-0.75*-0.016\\right)+ \\left(3.5-0.75*-0.835\\right)+ \\left(3.5-0.75*0.611\\right)+ \\left(3.5-0.75*0\\right)+ \\left(3.5-0.75*-0.117\\right)+ \\left(3.5-0.75*-1.645\\right)+ \\left(3.5-0.75*-1.929\\right)+ \\left(3.5-0.75*-0.026\\right)+ \\left(3.5-0.75*-1.121\\right)+ \\left(3.5-0.75*0.61\\right)+ \\left(3.5-0.75*-0.619\\right)+ \\left(3.5-0.75*0.806\\right)+ \\left(3.5-0.75*-0.123\\right)+ \\left(3.5-0.75*-1.617\\right)+ \\left(3.5-0.75*-0.683\\right)+ \\left(3.5-0.75*0.431\\right)+ \\left(3.5-0.75*2.705\\right)+ \\left(3.5-0.75*0.726\\right)+ \\left(3.5-0.75*-0.483\\right)+ \\left(3.5-0.75*2.135\\right)+ \\left(3.5-0.75*-0.399\\right)+ \\left(3.5-0.75*-0.087\\right)+ \\left(3.5-0.75*-1.004\\right)+ \\left(3.5-0.75*0.18\\right)+ \\left(3.5-0.75*0.229\\right)+ \\left(3.5-0.75*0.671\\right)+ \\left(3.5-0.75*0.234\\right)+ \\left(3.5-0.75*0.874\\right)+ \\left(3.5-0.75*-0.275\\right)+ \\left(3.5-0.75*-0.812\\right)+ \\left(3.5-0.75*0.363\\right)+ \\left(3.5-0.75*-0.549\\right)+ \\left(3.5-0.75*0.32\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*0.44\\right)+ \\left(3.5-0.75*-0.492\\right)+ \\left(3.5-0.75*0.879\\right)+ \\left(3.5-0.75*3.122\\right)+ \\left(3.5-0.75*-0.82\\right)+ \\left(3.5-0.75*-0.65\\right)+ \\left(3.5-0.75*-0.4\\right)+ \\left(3.5-0.75*-0.144\\right)+ \\left(3.5-0.75*1.132\\right)+ \\left(3.5-0.75*0.505\\right)+ \\left(3.5-0.75*0.452\\right)+ \\left(3.5-0.75*0.615\\right)+ \\left(3.5-0.75*-0.94\\right)+ \\left(3.5-0.75*-2.144\\right)+ \\left(3.5-0.75*-1.2\\right)+ \\left(3.5-0.75*-2.893\\right)+ \\left(3.5-0.75*-0.19\\right)+ \\left(3.5-0.75*0.433\\right)+ \\left(3.5-0.75*2.023\\right)+ \\left(3.5-0.75*0.046\\right)+ \\left(3.5-0.75*0.602\\right)+ \\left(3.5-0.75*-0.862\\right)+ \\left(3.5-0.75*-0.687\\right)+ \\left(3.5-0.75*0.907\\right)+ \\left(3.5-0.75*-0.966\\right)+ \\left(3.5-0.75*-1.694\\right)+ \\left(3.5-0.75*1.28\\right)+ \\left(3.5-0.75*1.178\\right)+ \\left(3.5-0.75*-1.077\\right)+ \\left(3.5-0.75*-0.433\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-0.725\\right)+ \\left(3.5-0.75*0.735\\right)+ \\left(3.5-0.75*-0.067\\right)+ \\left(3.5-0.75*0.176\\right)+ \\left(3.5-0.75*1.653\\right)+ \\left(3.5-0.75*0.212\\right)+ \\left(3.5-0.75*2.976\\right)+ \\left(3.5-0.75*-0.523\\right)+ \\left(3.5-0.75*-1.426\\right)+ \\left(3.5-0.75*0.673\\right)+ \\left(3.5-0.75*-1.079\\right)+ \\left(3.5-0.75*0.99\\right)+ \\left(3.5-0.75*0.628\\right)+ \\left(3.5-0.75*0.188\\right)+ \\left(3.5-0.75*0.992\\right)+ \\left(3.5-0.75*0.467\\right)+ \\left(3.5-0.75*-0.251\\right)+ \\left(3.5-0.75*1.403\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*1.23\\right)+ \\left(3.5-0.75*1.342\\right)+ \\left(3.5-0.75*1.713\\right)+ \\left(3.5-0.75*0.182\\right)+ \\left(3.5-0.75*0.758\\right)+ \\left(3.5-0.75*0.035\\right)+ \\left(3.5-0.75*0.932\\right)+ \\left(3.5-0.75*0.702\\right)+ \\left(3.5-0.75*0.436\\right)+ \\left(3.5-0.75*-1.355\\right)+ \\left(3.5-0.75*-1.318\\right)+ \\left(3.5-0.75*-0.109\\right)+ \\left(3.5-0.75*0.437\\right)+ \\left(3.5-0.75*-0.842\\right)+ \\left(3.5-0.75*0.977\\right)+ \\left(3.5-0.75*-1.503\\right)+ \\left(3.5-0.75*-0.253\\right)+ \\left(3.5-0.75*-1.166\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-1.083\\right)+ \\left(3.5-0.75*0.086\\right)+ \\left(3.5-0.75*0.807\\right)+ \\left(3.5-0.75*-0.068\\right)+ \\left(3.5-0.75*0.682\\right)+ \\left(3.5-0.75*0.26\\right)+ \\left(3.5-0.75*1.225\\right)+ \\left(3.5-0.75*1.82\\right)+ \\left(3.5-0.75*-1.444\\right)+ \\left(3.5-0.75*-0.579\\right)+ \\left(3.5-0.75*-0.945\\right)+ \\left(3.5-0.75*-0.743\\right)+ \\left(3.5-0.75*-0.423\\right)+ \\left(3.5-0.75*-0.086\\right)+ \\left(3.5-0.75*-0.105\\right)+ \\left(3.5-0.75*0.385\\right)+ \\left(3.5-0.75*0.733\\right)+ \\left(3.5-0.75*-1.131\\right)+ \\left(3.5-0.75*3.334\\right)+ \\left(3.5-0.75*-0.254\\right)+ \\left(3.5-0.75*0.304\\right)+ \\left(3.5-0.75*1.234\\right)+ \\left(3.5-0.75*1.144\\right)+ \\left(3.5-0.75*0.558\\right)+ \\left(3.5-0.75*-0.675\\right)+ \\left(3.5-0.75*-1.729\\right)+ \\left(3.5-0.75*-1.504\\right)+ \\left(3.5-0.75*-1.951\\right)+ \\left(3.5-0.75*0.203\\right)+ \\left(3.5-0.75*-0.154\\right)+ \\left(3.5-0.75*-0.545\\right)+ \\left(3.5-0.75*-0.913\\right)+ \\left(3.5-0.75*-1.11\\right) \\)"
),
h2("Server"),
uiOutput("eqSrv")
)
# Server
server <- function(input, output) {
output$eqSrv<- renderUI({
# something arbitrary and long
withMathJax(
"\\( f \\left( \\alpha, \\beta_1 | x_i\\right) = \\left(3.5-0.75*-1.414\\right)+ \\left(3.5-0.75*0.189\\right)+ \\left(3.5-0.75*0.026\\right)+ \\left(3.5-0.75*-0.779\\right)+ \\left(3.5-0.75*0.683\\right)+ \\left(3.5-0.75*-0.503\\right)+ \\left(3.5-0.75*-1.18\\right)+ \\left(3.5-0.75*-1.736\\right)+ \\left(3.5-0.75*-1.497\\right)+ \\left(3.5-0.75*-1.12\\right)+ \\left(3.5-0.75*1.263\\right)+ \\left(3.5-0.75*0.512\\right)+ \\left(3.5-0.75*-0.143\\right)+ \\left(3.5-0.75*-0.464\\right)+ \\left(3.5-0.75*-0.016\\right)+ \\left(3.5-0.75*-0.835\\right)+ \\left(3.5-0.75*0.611\\right)+ \\left(3.5-0.75*0\\right)+ \\left(3.5-0.75*-0.117\\right)+ \\left(3.5-0.75*-1.645\\right)+ \\left(3.5-0.75*-1.929\\right)+ \\left(3.5-0.75*-0.026\\right)+ \\left(3.5-0.75*-1.121\\right)+ \\left(3.5-0.75*0.61\\right)+ \\left(3.5-0.75*-0.619\\right)+ \\left(3.5-0.75*0.806\\right)+ \\left(3.5-0.75*-0.123\\right)+ \\left(3.5-0.75*-1.617\\right)+ \\left(3.5-0.75*-0.683\\right)+ \\left(3.5-0.75*0.431\\right)+ \\left(3.5-0.75*2.705\\right)+ \\left(3.5-0.75*0.726\\right)+ \\left(3.5-0.75*-0.483\\right)+ \\left(3.5-0.75*2.135\\right)+ \\left(3.5-0.75*-0.399\\right)+ \\left(3.5-0.75*-0.087\\right)+ \\left(3.5-0.75*-1.004\\right)+ \\left(3.5-0.75*0.18\\right)+ \\left(3.5-0.75*0.229\\right)+ \\left(3.5-0.75*0.671\\right)+ \\left(3.5-0.75*0.234\\right)+ \\left(3.5-0.75*0.874\\right)+ \\left(3.5-0.75*-0.275\\right)+ \\left(3.5-0.75*-0.812\\right)+ \\left(3.5-0.75*0.363\\right)+ \\left(3.5-0.75*-0.549\\right)+ \\left(3.5-0.75*0.32\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*0.44\\right)+ \\left(3.5-0.75*-0.492\\right)+ \\left(3.5-0.75*0.879\\right)+ \\left(3.5-0.75*3.122\\right)+ \\left(3.5-0.75*-0.82\\right)+ \\left(3.5-0.75*-0.65\\right)+ \\left(3.5-0.75*-0.4\\right)+ \\left(3.5-0.75*-0.144\\right)+ \\left(3.5-0.75*1.132\\right)+ \\left(3.5-0.75*0.505\\right)+ \\left(3.5-0.75*0.452\\right)+ \\left(3.5-0.75*0.615\\right)+ \\left(3.5-0.75*-0.94\\right)+ \\left(3.5-0.75*-2.144\\right)+ \\left(3.5-0.75*-1.2\\right)+ \\left(3.5-0.75*-2.893\\right)+ \\left(3.5-0.75*-0.19\\right)+ \\left(3.5-0.75*0.433\\right)+ \\left(3.5-0.75*2.023\\right)+ \\left(3.5-0.75*0.046\\right)+ \\left(3.5-0.75*0.602\\right)+ \\left(3.5-0.75*-0.862\\right)+ \\left(3.5-0.75*-0.687\\right)+ \\left(3.5-0.75*0.907\\right)+ \\left(3.5-0.75*-0.966\\right)+ \\left(3.5-0.75*-1.694\\right)+ \\left(3.5-0.75*1.28\\right)+ \\left(3.5-0.75*1.178\\right)+ \\left(3.5-0.75*-1.077\\right)+ \\left(3.5-0.75*-0.433\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-0.725\\right)+ \\left(3.5-0.75*0.735\\right)+ \\left(3.5-0.75*-0.067\\right)+ \\left(3.5-0.75*0.176\\right)+ \\left(3.5-0.75*1.653\\right)+ \\left(3.5-0.75*0.212\\right)+ \\left(3.5-0.75*2.976\\right)+ \\left(3.5-0.75*-0.523\\right)+ \\left(3.5-0.75*-1.426\\right)+ \\left(3.5-0.75*0.673\\right)+ \\left(3.5-0.75*-1.079\\right)+ \\left(3.5-0.75*0.99\\right)+ \\left(3.5-0.75*0.628\\right)+ \\left(3.5-0.75*0.188\\right)+ \\left(3.5-0.75*0.992\\right)+ \\left(3.5-0.75*0.467\\right)+ \\left(3.5-0.75*-0.251\\right)+ \\left(3.5-0.75*1.403\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*1.23\\right)+ \\left(3.5-0.75*1.342\\right)+ \\left(3.5-0.75*1.713\\right)+ \\left(3.5-0.75*0.182\\right)+ \\left(3.5-0.75*0.758\\right)+ \\left(3.5-0.75*0.035\\right)+ \\left(3.5-0.75*0.932\\right)+ \\left(3.5-0.75*0.702\\right)+ \\left(3.5-0.75*0.436\\right)+ \\left(3.5-0.75*-1.355\\right)+ \\left(3.5-0.75*-1.318\\right)+ \\left(3.5-0.75*-0.109\\right)+ \\left(3.5-0.75*0.437\\right)+ \\left(3.5-0.75*-0.842\\right)+ \\left(3.5-0.75*0.977\\right)+ \\left(3.5-0.75*-1.503\\right)+ \\left(3.5-0.75*-0.253\\right)+ \\left(3.5-0.75*-1.166\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-1.083\\right)+ \\left(3.5-0.75*0.086\\right)+ \\left(3.5-0.75*0.807\\right)+ \\left(3.5-0.75*-0.068\\right)+ \\left(3.5-0.75*0.682\\right)+ \\left(3.5-0.75*0.26\\right)+ \\left(3.5-0.75*1.225\\right)+ \\left(3.5-0.75*1.82\\right)+ \\left(3.5-0.75*-1.444\\right)+ \\left(3.5-0.75*-0.579\\right)+ \\left(3.5-0.75*-0.945\\right)+ \\left(3.5-0.75*-0.743\\right)+ \\left(3.5-0.75*-0.423\\right)+ \\left(3.5-0.75*-0.086\\right)+ \\left(3.5-0.75*-0.105\\right)+ \\left(3.5-0.75*0.385\\right)+ \\left(3.5-0.75*0.733\\right)+ \\left(3.5-0.75*-1.131\\right)+ \\left(3.5-0.75*3.334\\right)+ \\left(3.5-0.75*-0.254\\right)+ \\left(3.5-0.75*0.304\\right)+ \\left(3.5-0.75*1.234\\right)+ \\left(3.5-0.75*1.144\\right)+ \\left(3.5-0.75*0.558\\right)+ \\left(3.5-0.75*-0.675\\right)+ \\left(3.5-0.75*-1.729\\right)+ \\left(3.5-0.75*-1.504\\right)+ \\left(3.5-0.75*-1.951\\right)+ \\left(3.5-0.75*0.203\\right)+ \\left(3.5-0.75*-0.154\\right)+ \\left(3.5-0.75*-0.545\\right)+ \\left(3.5-0.75*-0.913\\right)+ \\left(3.5-0.75*-1.11\\right) \\)"
)
})
}
# Run
shinyApp(ui = ui, server = server)
A MWE with KaTeX (which does wrap for the UI-printed eq, but not server-printed eq. Would also prefer to do everything with MathJax.)
# Define the UI
ui <- bootstrapPage(
tags$head(
tags$link(rel="stylesheet",
href="https://cdn.jsdelivr.net/npm/katex#0.10.1/dist/katex.min.css",
integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
crossorigin="anonymous"),
HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex#0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
HTML('<script defer src="https://cdn.jsdelivr.net/npm/katex#0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
HTML('
<script>
document.addEventListener("DOMContentLoaded", function(){
renderMathInElement(document.body, {
delimiters: [{left: "$", right: "$", display: false}]
});
})
</script>')
),
h2("UI"),
withMathJax(),
# something arbitrary and long
p(" $ f\\left( \\alpha, \\beta_1 | x_i\\right) = \\left(3.5-0.75*-1.414\\right)+ \\left(3.5-0.75*0.189\\right)+ \\left(3.5-0.75*0.026\\right)+ \\left(3.5-0.75*-0.779\\right)+ \\left(3.5-0.75*0.683\\right)+ \\left(3.5-0.75*-0.503\\right)+ \\left(3.5-0.75*-1.18\\right)+ \\left(3.5-0.75*-1.736\\right)+ \\left(3.5-0.75*-1.497\\right)+ \\left(3.5-0.75*-1.12\\right)+ \\left(3.5-0.75*1.263\\right)+ \\left(3.5-0.75*0.512\\right)+ \\left(3.5-0.75*-0.143\\right)+ \\left(3.5-0.75*-0.464\\right)+ \\left(3.5-0.75*-0.016\\right)+ \\left(3.5-0.75*-0.835\\right)+ \\left(3.5-0.75*0.611\\right)+ \\left(3.5-0.75*0\\right)+ \\left(3.5-0.75*-0.117\\right)+ \\left(3.5-0.75*-1.645\\right)+ \\left(3.5-0.75*-1.929\\right)+ \\left(3.5-0.75*-0.026\\right)+ \\left(3.5-0.75*-1.121\\right)+ \\left(3.5-0.75*0.61\\right)+ \\left(3.5-0.75*-0.619\\right)+ \\left(3.5-0.75*0.806\\right)+ \\left(3.5-0.75*-0.123\\right)+ \\left(3.5-0.75*-1.617\\right)+ \\left(3.5-0.75*-0.683\\right)+ \\left(3.5-0.75*0.431\\right)+ \\left(3.5-0.75*2.705\\right)+ \\left(3.5-0.75*0.726\\right)+ \\left(3.5-0.75*-0.483\\right)+ \\left(3.5-0.75*2.135\\right)+ \\left(3.5-0.75*-0.399\\right)+ \\left(3.5-0.75*-0.087\\right)+ \\left(3.5-0.75*-1.004\\right)+ \\left(3.5-0.75*0.18\\right)+ \\left(3.5-0.75*0.229\\right)+ \\left(3.5-0.75*0.671\\right)+ \\left(3.5-0.75*0.234\\right)+ \\left(3.5-0.75*0.874\\right)+ \\left(3.5-0.75*-0.275\\right)+ \\left(3.5-0.75*-0.812\\right)+ \\left(3.5-0.75*0.363\\right)+ \\left(3.5-0.75*-0.549\\right)+ \\left(3.5-0.75*0.32\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*0.44\\right)+ \\left(3.5-0.75*-0.492\\right)+ \\left(3.5-0.75*0.879\\right)+ \\left(3.5-0.75*3.122\\right)+ \\left(3.5-0.75*-0.82\\right)+ \\left(3.5-0.75*-0.65\\right)+ \\left(3.5-0.75*-0.4\\right)+ \\left(3.5-0.75*-0.144\\right)+ \\left(3.5-0.75*1.132\\right)+ \\left(3.5-0.75*0.505\\right)+ \\left(3.5-0.75*0.452\\right)+ \\left(3.5-0.75*0.615\\right)+ \\left(3.5-0.75*-0.94\\right)+ \\left(3.5-0.75*-2.144\\right)+ \\left(3.5-0.75*-1.2\\right)+ \\left(3.5-0.75*-2.893\\right)+ \\left(3.5-0.75*-0.19\\right)+ \\left(3.5-0.75*0.433\\right)+ \\left(3.5-0.75*2.023\\right)+ \\left(3.5-0.75*0.046\\right)+ \\left(3.5-0.75*0.602\\right)+ \\left(3.5-0.75*-0.862\\right)+ \\left(3.5-0.75*-0.687\\right)+ \\left(3.5-0.75*0.907\\right)+ \\left(3.5-0.75*-0.966\\right)+ \\left(3.5-0.75*-1.694\\right)+ \\left(3.5-0.75*1.28\\right)+ \\left(3.5-0.75*1.178\\right)+ \\left(3.5-0.75*-1.077\\right)+ \\left(3.5-0.75*-0.433\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-0.725\\right)+ \\left(3.5-0.75*0.735\\right)+ \\left(3.5-0.75*-0.067\\right)+ \\left(3.5-0.75*0.176\\right)+ \\left(3.5-0.75*1.653\\right)+ \\left(3.5-0.75*0.212\\right)+ \\left(3.5-0.75*2.976\\right)+ \\left(3.5-0.75*-0.523\\right)+ \\left(3.5-0.75*-1.426\\right)+ \\left(3.5-0.75*0.673\\right)+ \\left(3.5-0.75*-1.079\\right)+ \\left(3.5-0.75*0.99\\right)+ \\left(3.5-0.75*0.628\\right)+ \\left(3.5-0.75*0.188\\right)+ \\left(3.5-0.75*0.992\\right)+ \\left(3.5-0.75*0.467\\right)+ \\left(3.5-0.75*-0.251\\right)+ \\left(3.5-0.75*1.403\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*1.23\\right)+ \\left(3.5-0.75*1.342\\right)+ \\left(3.5-0.75*1.713\\right)+ \\left(3.5-0.75*0.182\\right)+ \\left(3.5-0.75*0.758\\right)+ \\left(3.5-0.75*0.035\\right)+ \\left(3.5-0.75*0.932\\right)+ \\left(3.5-0.75*0.702\\right)+ \\left(3.5-0.75*0.436\\right)+ \\left(3.5-0.75*-1.355\\right)+ \\left(3.5-0.75*-1.318\\right)+ \\left(3.5-0.75*-0.109\\right)+ \\left(3.5-0.75*0.437\\right)+ \\left(3.5-0.75*-0.842\\right)+ \\left(3.5-0.75*0.977\\right)+ \\left(3.5-0.75*-1.503\\right)+ \\left(3.5-0.75*-0.253\\right)+ \\left(3.5-0.75*-1.166\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-1.083\\right)+ \\left(3.5-0.75*0.086\\right)+ \\left(3.5-0.75*0.807\\right)+ \\left(3.5-0.75*-0.068\\right)+ \\left(3.5-0.75*0.682\\right)+ \\left(3.5-0.75*0.26\\right)+ \\left(3.5-0.75*1.225\\right)+ \\left(3.5-0.75*1.82\\right)+ \\left(3.5-0.75*-1.444\\right)+ \\left(3.5-0.75*-0.579\\right)+ \\left(3.5-0.75*-0.945\\right)+ \\left(3.5-0.75*-0.743\\right)+ \\left(3.5-0.75*-0.423\\right)+ \\left(3.5-0.75*-0.086\\right)+ \\left(3.5-0.75*-0.105\\right)+ \\left(3.5-0.75*0.385\\right)+ \\left(3.5-0.75*0.733\\right)+ \\left(3.5-0.75*-1.131\\right)+ \\left(3.5-0.75*3.334\\right)+ \\left(3.5-0.75*-0.254\\right)+ \\left(3.5-0.75*0.304\\right)+ \\left(3.5-0.75*1.234\\right)+ \\left(3.5-0.75*1.144\\right)+ \\left(3.5-0.75*0.558\\right)+ \\left(3.5-0.75*-0.675\\right)+ \\left(3.5-0.75*-1.729\\right)+ \\left(3.5-0.75*-1.504\\right)+ \\left(3.5-0.75*-1.951\\right)+ \\left(3.5-0.75*0.203\\right)+ \\left(3.5-0.75*-0.154\\right)+ \\left(3.5-0.75*-0.545\\right)+ \\left(3.5-0.75*-0.913\\right)+ \\left(3.5-0.75*-1.11\\right)$ "
),
h2("Server"),
uiOutput("eqSrv")
)
# Define the server code
server <- function(input, output) {
output$eqSrv<- renderUI({
# something arbitrary and long
withMathJax(
"$$ f\\left( \\alpha, \\beta_1 | x_i\\right) = \\left(3.5-0.75*-1.414\\right)+ \\left(3.5-0.75*0.189\\right)+ \\left(3.5-0.75*0.026\\right)+ \\left(3.5-0.75*-0.779\\right)+ \\left(3.5-0.75*0.683\\right)+ \\left(3.5-0.75*-0.503\\right)+ \\left(3.5-0.75*-1.18\\right)+ \\left(3.5-0.75*-1.736\\right)+ \\left(3.5-0.75*-1.497\\right)+ \\left(3.5-0.75*-1.12\\right)+ \\left(3.5-0.75*1.263\\right)+ \\left(3.5-0.75*0.512\\right)+ \\left(3.5-0.75*-0.143\\right)+ \\left(3.5-0.75*-0.464\\right)+ \\left(3.5-0.75*-0.016\\right)+ \\left(3.5-0.75*-0.835\\right)+ \\left(3.5-0.75*0.611\\right)+ \\left(3.5-0.75*0\\right)+ \\left(3.5-0.75*-0.117\\right)+ \\left(3.5-0.75*-1.645\\right)+ \\left(3.5-0.75*-1.929\\right)+ \\left(3.5-0.75*-0.026\\right)+ \\left(3.5-0.75*-1.121\\right)+ \\left(3.5-0.75*0.61\\right)+ \\left(3.5-0.75*-0.619\\right)+ \\left(3.5-0.75*0.806\\right)+ \\left(3.5-0.75*-0.123\\right)+ \\left(3.5-0.75*-1.617\\right)+ \\left(3.5-0.75*-0.683\\right)+ \\left(3.5-0.75*0.431\\right)+ \\left(3.5-0.75*2.705\\right)+ \\left(3.5-0.75*0.726\\right)+ \\left(3.5-0.75*-0.483\\right)+ \\left(3.5-0.75*2.135\\right)+ \\left(3.5-0.75*-0.399\\right)+ \\left(3.5-0.75*-0.087\\right)+ \\left(3.5-0.75*-1.004\\right)+ \\left(3.5-0.75*0.18\\right)+ \\left(3.5-0.75*0.229\\right)+ \\left(3.5-0.75*0.671\\right)+ \\left(3.5-0.75*0.234\\right)+ \\left(3.5-0.75*0.874\\right)+ \\left(3.5-0.75*-0.275\\right)+ \\left(3.5-0.75*-0.812\\right)+ \\left(3.5-0.75*0.363\\right)+ \\left(3.5-0.75*-0.549\\right)+ \\left(3.5-0.75*0.32\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*0.44\\right)+ \\left(3.5-0.75*-0.492\\right)+ \\left(3.5-0.75*0.879\\right)+ \\left(3.5-0.75*3.122\\right)+ \\left(3.5-0.75*-0.82\\right)+ \\left(3.5-0.75*-0.65\\right)+ \\left(3.5-0.75*-0.4\\right)+ \\left(3.5-0.75*-0.144\\right)+ \\left(3.5-0.75*1.132\\right)+ \\left(3.5-0.75*0.505\\right)+ \\left(3.5-0.75*0.452\\right)+ \\left(3.5-0.75*0.615\\right)+ \\left(3.5-0.75*-0.94\\right)+ \\left(3.5-0.75*-2.144\\right)+ \\left(3.5-0.75*-1.2\\right)+ \\left(3.5-0.75*-2.893\\right)+ \\left(3.5-0.75*-0.19\\right)+ \\left(3.5-0.75*0.433\\right)+ \\left(3.5-0.75*2.023\\right)+ \\left(3.5-0.75*0.046\\right)+ \\left(3.5-0.75*0.602\\right)+ \\left(3.5-0.75*-0.862\\right)+ \\left(3.5-0.75*-0.687\\right)+ \\left(3.5-0.75*0.907\\right)+ \\left(3.5-0.75*-0.966\\right)+ \\left(3.5-0.75*-1.694\\right)+ \\left(3.5-0.75*1.28\\right)+ \\left(3.5-0.75*1.178\\right)+ \\left(3.5-0.75*-1.077\\right)+ \\left(3.5-0.75*-0.433\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-0.725\\right)+ \\left(3.5-0.75*0.735\\right)+ \\left(3.5-0.75*-0.067\\right)+ \\left(3.5-0.75*0.176\\right)+ \\left(3.5-0.75*1.653\\right)+ \\left(3.5-0.75*0.212\\right)+ \\left(3.5-0.75*2.976\\right)+ \\left(3.5-0.75*-0.523\\right)+ \\left(3.5-0.75*-1.426\\right)+ \\left(3.5-0.75*0.673\\right)+ \\left(3.5-0.75*-1.079\\right)+ \\left(3.5-0.75*0.99\\right)+ \\left(3.5-0.75*0.628\\right)+ \\left(3.5-0.75*0.188\\right)+ \\left(3.5-0.75*0.992\\right)+ \\left(3.5-0.75*0.467\\right)+ \\left(3.5-0.75*-0.251\\right)+ \\left(3.5-0.75*1.403\\right)+ \\left(3.5-0.75*0.667\\right)+ \\left(3.5-0.75*1.23\\right)+ \\left(3.5-0.75*1.342\\right)+ \\left(3.5-0.75*1.713\\right)+ \\left(3.5-0.75*0.182\\right)+ \\left(3.5-0.75*0.758\\right)+ \\left(3.5-0.75*0.035\\right)+ \\left(3.5-0.75*0.932\\right)+ \\left(3.5-0.75*0.702\\right)+ \\left(3.5-0.75*0.436\\right)+ \\left(3.5-0.75*-1.355\\right)+ \\left(3.5-0.75*-1.318\\right)+ \\left(3.5-0.75*-0.109\\right)+ \\left(3.5-0.75*0.437\\right)+ \\left(3.5-0.75*-0.842\\right)+ \\left(3.5-0.75*0.977\\right)+ \\left(3.5-0.75*-1.503\\right)+ \\left(3.5-0.75*-0.253\\right)+ \\left(3.5-0.75*-1.166\\right)+ \\left(3.5-0.75*-0.274\\right)+ \\left(3.5-0.75*-1.083\\right)+ \\left(3.5-0.75*0.086\\right)+ \\left(3.5-0.75*0.807\\right)+ \\left(3.5-0.75*-0.068\\right)+ \\left(3.5-0.75*0.682\\right)+ \\left(3.5-0.75*0.26\\right)+ \\left(3.5-0.75*1.225\\right)+ \\left(3.5-0.75*1.82\\right)+ \\left(3.5-0.75*-1.444\\right)+ \\left(3.5-0.75*-0.579\\right)+ \\left(3.5-0.75*-0.945\\right)+ \\left(3.5-0.75*-0.743\\right)+ \\left(3.5-0.75*-0.423\\right)+ \\left(3.5-0.75*-0.086\\right)+ \\left(3.5-0.75*-0.105\\right)+ \\left(3.5-0.75*0.385\\right)+ \\left(3.5-0.75*0.733\\right)+ \\left(3.5-0.75*-1.131\\right)+ \\left(3.5-0.75*3.334\\right)+ \\left(3.5-0.75*-0.254\\right)+ \\left(3.5-0.75*0.304\\right)+ \\left(3.5-0.75*1.234\\right)+ \\left(3.5-0.75*1.144\\right)+ \\left(3.5-0.75*0.558\\right)+ \\left(3.5-0.75*-0.675\\right)+ \\left(3.5-0.75*-1.729\\right)+ \\left(3.5-0.75*-1.504\\right)+ \\left(3.5-0.75*-1.951\\right)+ \\left(3.5-0.75*0.203\\right)+ \\left(3.5-0.75*-0.154\\right)+ \\left(3.5-0.75*-0.545\\right)+ \\left(3.5-0.75*-0.913\\right)+ \\left(3.5-0.75*-1.11\\right) $$"
)
})
}
# Return a Shiny app object
shinyApp(ui = ui, server = server)

The MathJax config works if you put it in tags$head:
tags$head(tags$script(type = "text/x-mathjax-config",
'MathJax.Hub.Config({
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});')),

Related

Shiny: Display textOutput() if input is different from the default value

I have a Shiny App with multiple inputs of different kinds (checkboxGroupInput, sliderInput, dateRangeInput ...) with default selected values.
I am trying to display a text message at the top of my dashboardBody if the input values are different from the default ones.
ui <- dashboardPage(
#one of the inputs
dateRangeInput(
"date_reception",
"Sélectionnez une plage de dates",
start = min(dataset_all$date_reception),
end = max(dataset_all$date_reception),
),
#the output to show if input is different from default
textOutput("warning_filters")
----------
)
server <- function(input, output) {
observeEvent(input$date_reception,
{
if ((input$date_reception[1] != min(dataset_all$date_reception)) |
(input$date_reception[2] != max(dataset_all$date_reception))) {
output$warning_filters <-
renderText({
"Warning: filters apply"
})
} else{
NULL
}
})
}
My issue is that the message is correctly displayed when I change one of the dates but does not disappear when I select again the default value (here, min(dataset_all$date_reception) or max(dataset_all$date_reception)).
I have tried playing with ignoreNULL and ignoreInit but nothing changed.
Thank you for your help!
You need to re-assign warning_filters when the condition is false. Now, the warning_filters gets set to the warning text and even though you have the function return NULL when the condition doesn't hold, you don't actually change the values of warning_filters. The code below should work.
observeEvent(input$date_reception,
{
if ((input$date_reception[1] != min(dataset_all$date_reception)) |
(input$date_reception[2] != max(dataset_all$date_reception))) {
output$warning_filters <-
renderText({
"Warning: filters apply"
})
} else{
output$warning_filters <- NULL
}
})
}

Conditional highlighting of output

I suppose I'm missing something obvious here, but I've been stumped for a while on this. I have my .Rmd file setup, and almost everything knits fine to Markdown_strict and latex_fragment (with a little preprocessing on that one), but nevermind for now.
Here's a sample.Rmd file that I have as input. I couldn't figure how to nest backticks, so for now it's pseudo-escaped.
---
title: "Sample"
output:
md_document:
preserve_yaml: yes
variant: markdown_strict+raw_html+all_symbols_escapable
latex_fragment: default
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_dir = ".", output_format = "all") })
---
\`\`\`{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
sqlcode <- function(sql, code = "") {
if (knitr::is_latex_output()) {
return(paste0('\n```{=sql}\n',sql,'\n```\n'))
} else if (!knitr::is_html_output(excludes = "markdown")) {
if (length(code)>0) {
code = paste0(" ", code," ")
} else {
code = " "
}
pre <- paste0("{{< sql",code,">}}\n")
post <- "\n{{< /sql >}}"
return(knitr::raw_html(paste0(pre,sql,post)))
}
}
\`\`\`
This is a sample.
\`\`\`{r echo=FALSE}
sqlcode("SELECT *
FROM TABLE", "sample")
\`\`\`
The LaTeX fragment I want is:
This is a sample.
\begin{Shaded}
\begin{Highlighting}[]
\KeywordTok{SELECT} \OperatorTok{*}
\KeywordTok{FROM}\NormalTok{ TABLE}
\end{Highlighting}
\end{Shaded}
What I get is:
This is a sample.
\begin{verbatim}
## [1] "\n```{=sql}\nSELECT *\nFROM TABLE\n```\n"
\end{verbatim}
And on the MD side, I do get what I want, that is:
---
title: "Sample"
output:
md_document:
preserve_yaml: yes
variant: markdown_strict+raw_html+all_symbols_escapable
latex_fragment: default
knit: (function(inputFile, encoding) {
rmarkdown::render(inputFile, encoding = encoding,
output_dir = ".", output_format = "all") })
---
This is a sample.
{{< sql sample >}}
SELECT *
FROM TABLE
{{< /sql >}}
For those familiar with Hugo, these are custom shortcodes I use for a Hugo-generated site. The lack of ident of the SQL code is on purpose, it's then highlighted through hugo.
At any rate, how do I get sqlcode(...) to output a fenced block that pandoc will correctly highlight in LaTeX, or alternatively, what part of pdf_document.R should I customize in order to achieve that ?
I've tried various knitr functions that mark output and I can get an intermediary MD file that I could process to remove some markers, but I can't manage to process that intermediary MD file before knitr sends it to Pandoc.
After a while of trial and error I figured it out. It's as simple as changing one line -_-
sqlcode <- function(sql, code = "") {
if (knitr::is_latex_output()) {
knitr::raw_output(paste0('\n```sql\n',sql,'\n```\n'), markers=NULL)
} else if (!knitr::is_html_output(excludes = "markdown")) {
if (length(code)>0) {
code = paste0(" ", code," ")
} else {
code = " "
}
pre <- paste0("{{< sql",code,">}}\n")
post <- "\n{{< /sql >}}"
return(knitr::raw_html(paste0(pre,sql,post)))
}
}

Accessing values inside eventReactive

I need help with a basic Shiny question. My goal is to make a simple math quiz app (What is 4 x 4?). I want to create values with one button, select a numeric answer, and then press another answer button. My problem is that i cannot find a way to access the values that are stored inside eventReactive. I have simplified the problem in the code below. The goal of this app is to ask for a number, and then to supply it. Thank you in advance!
# Goal: Fetch a number, then input that number, then receive paste("correct")/paste("incorrect)
ui <- fluidPage(
textOutput(outputId = "out"),
numericInput(inputId = "inn",
label = "",
value = 0),
actionButton("answer", "Answer"),
actionButton("question", "New Question"),
)
server <- function(input, output) {
data <- eventReactive(input$question,{
a <- sample.int(10,1)
paste("Enter",a)
})
output$out <- renderText({data()})
}
shinyApp(ui,server)
Here is what I would do
ui <- fluidPage(
textOutput(outputId = "out"),
numericInput(inputId = "inn", label = "", value = 0),
actionButton("answer", "Answer"),
actionButton("question", "New Question"),
)
server <- function(input, output, session) {
data <- reactiveValues(number = NULL)
output$out <- renderText({
if (is.null(data$number))
"Press 'New Question' button"
else
paste("Enter", data$number)
})
observeEvent(input$question, {
data$number = sample(10, 1)
})
observeEvent(input$answer, {
req(data$number, input$inn)
if (data$number == input$inn)
print("Correct")
# Do something exciting
else
print("Incorrect")
# Do something else
})
}
shinyApp(ui,server)
IMO it's good practice to keep reactive data and input/output generation separate. What I mean by that is that in the above example we use
reactiveValues to keep track of the changing data, and
observeEvent to monitor button clicks which may change specific elements of our reactive data,
renderText can print either fixed text or reactive data.

How to create and display an animated GIF in Shiny?

I'm able to load a saved file as an image but unable to use gganimate to do it directly. Alternate ways of rendering GIFs would be nice to know but knowing how to render gganimate specifically would really solve my problem.
library(gapminder)
library(ggplot2)
library(shiny)
library(gganimate)
theme_set(theme_bw())
ui <- basicPage(
plotOutput("plot1")
)
server <- function(input, output) {
output$plot1 <- renderPlot({
p = ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop, color = continent, frame = year)) +
geom_point() +
scale_x_log10()
gg_animate(p)
})
}
shinyApp(ui, server)
Now that there's a newer breaking version of gganimate, #kt.leap's answer is deprecated. Here's what worked for me with the new gganimate:
library(gapminder)
library(ggplot2)
library(shiny)
library(gganimate)
theme_set(theme_bw())
ui <- basicPage(
imageOutput("plot1"))
server <- function(input, output) {
output$plot1 <- renderImage({
# A temp file to save the output.
# This file will be removed later by renderImage
outfile <- tempfile(fileext='.gif')
# now make the animation
p = ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop,
color = continent)) + geom_point() + scale_x_log10() +
transition_time(year) # New
anim_save("outfile.gif", animate(p)) # New
# Return a list containing the filename
list(src = "outfile.gif",
contentType = 'image/gif'
# width = 400,
# height = 300,
# alt = "This is alternate text"
)}, deleteFile = TRUE)}
shinyApp(ui, server)
I was dealing with the same issue and found only your question and no answers... But the way you phrased it reminded me that renderPlot is finicky:
it won’t send just any image file to the browser – the image must be generated by code that uses R’s graphical output device system. Other methods of creating images can’t be sent by renderPlot()... The solution in these cases is the renderImage() function. source
Modifying the code from that article gives you the following:
library(gapminder)
library(ggplot2)
library(shiny)
library(gganimate)
theme_set(theme_bw())
ui <- basicPage(
imageOutput("plot1"))
server <- function(input, output) {
output$plot1 <- renderImage({
# A temp file to save the output.
# This file will be removed later by renderImage
outfile <- tempfile(fileext='.gif')
# now make the animation
p = ggplot(gapminder, aes(gdpPercap, lifeExp, size = pop,
color = continent, frame = year)) + geom_point() + scale_x_log10()
gg_animate(p,"outfile.gif")
# Return a list containing the filename
list(src = "outfile.gif",
contentType = 'image/gif'
# width = 400,
# height = 300,
# alt = "This is alternate text"
)}, deleteFile = TRUE)}
shinyApp(ui, server)

django-nvd3 remove the graph attributes Grouped,Stacked

I displayed multiBarHorizontalChart in Django but it includes 2 radio buttons that is Grouped and Stacked Serie1,So i want to remove it....anyone give me the proper solution.
views.py
def demo_multibarhorizontalchart(request):
nb_element = 10
xdata = range(nb_element)
ydata = [i + random.randint(-10, 10) for i in range(nb_element)]
ydata2 = map(lambda x: x * 2, ydata)
extra_serie = {"tooltip": {"y_start": "", "y_end": " mins"}}
chartdata = {
’x’: xdata,
’name1’: ’series 1’, ’y1’: ydata, ’extra1’: extra_serie,
’name2’: ’series 2’, ’y2’: ydata2, ’extra2’: extra_serie,
}
charttype = "multiBarHorizontalChart"
data = {
’charttype’: charttype,
’chartdata’: chartdata
}
return render_to_response(’multibarhorizontalchart.html’, data)
There aren't any option to turn it off builded in django-ndv3. Your two options to this are:
Fork django-ndv3 with your solution (hard version)
Set .nv-controlsWrap to display:none; in your css (this will disable Grouped, Stacked)
Set .nv-legendWrap to display:none; in css (this will disable Series1 etc.)
I'm currently working with django-ndv3 too, so maybe I will later need to do something more with it.