Math Mode in Shiny Table

Math mode in shiny table

You can use xtable to generate a LaTeX table:

library(shiny)
library(xtable)

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    uiOutput("table")
  )
)

server <- function(input, output) {

  output$table <- renderUI({
    x <- rnorm(2)
    y <- rnorm(2, 1)
    tab <- data.frame(x = x, y = y)
    rownames(tab) <- c("\\alpha", 
                       "\\beta")
    LaTeXtab <- print(xtable(tab, align=rep("c", ncol(tab)+1)), 
                      floating=FALSE, tabular.environment="array", comment=FALSE, 
                      print.results=FALSE, 
                      sanitize.rownames.function = function(x) x)
    tagList(
      withMathJax(),
      HTML(paste0("$$", LaTeXtab, "$$"))
    )
  })

}

shinyApp(ui, server)

Sample Image

If you don't want to use xtable, you can do:

library(shiny)

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    withMathJax(tableOutput("table"))
  )
)

server <- function(input, output) {

  output$table <- renderTable({
    x <- rnorm(2)
    y <- rnorm(2, 1)
    tab <- data.frame(x = x, y = y)
    rownames(tab) <- c("\\(\\alpha\\)", 
                       "\\(\\beta\\)")
    tab
  },
  include.rownames = TRUE,
  include.colnames = TRUE)

}

shinyApp(ui, server)

Sample Image

EDIT

As noted by the OP, this doesn't work when the table is re-rendered. Here is a working solution:

ui <- fluidPage(
  titlePanel("Hello Shiny!"),
  mainPanel(
    numericInput("mean", label = "mean", value = 1),
    uiOutput("tableUI")
  )
)

server <- function(input, output) {

  output$table <- renderTable({
    x <- rnorm(2)
    y <- rnorm(2, input$mean)
    tab <- data.frame(x = x, y = y)
    rownames(tab) <- c("\\(\\alpha\\)", 
                       "\\(\\beta\\)")
    tab
  },
  include.rownames = TRUE,
  include.colnames = TRUE)

  output$tableUI <- renderUI({
    input$mean # in order to re-render when input$mean changes
    tagList(
      withMathJax(),
      withMathJax(tableOutput("table"))
    )
  })

}

EDIT 2

The previous solution works but there are some jumps, and it is not convenient because it requires to include the reactive dependencies in the renderUI. Below is a solution which uses katex instead of MathJax. No jumps, and no renderUI.

library(shiny)

js <- " 
$(document).on('shiny:value', function(event) {
  if(event.name === 'table'){
    var matches = event.value.match(/(%%+[^%]+%%)/g);
    var newvalue = event.value;
    for(var i=0; i<matches.length; i++){
      var code = '\\\\' + matches[i].slice(2,-2);
      newvalue = newvalue.replace(matches[i], katex.renderToString(code));
    }
    event.value = newvalue;
  }
})
" 

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css", integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH", crossorigin="anonymous"),
    tags$script(src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js", integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm", crossorigin="anonymous"),
    tags$script(HTML(js))
  ),
  titlePanel("Hello Shiny!"),
  mainPanel(
    numericInput("mean", "Enter mean", value = 1),
    tableOutput("table")
  )
)

server <- function(input, output) {

  output$table <- renderTable({
    x <- rnorm(2)
    y <- rnorm(2, input$mean)
    tab <- data.frame(x = x, y = y, z = c("hello", "%%gamma%%%%delta%%"))
    rownames(tab) <- c("%%alpha%%", "%%beta%%")
    tab
  }, rownames = TRUE)

}

shinyApp(ui, server)

Sample Image

Every occurrence like %%string%% is replaced by \\string and then rendered in math.

External js for math mode in shiny tables

I think that if(event.name.indexOf(event.name.match(/\\b\\w*coef_\\w+\\b/g)) > -1) is not correct.

One wants to test whether event.name contains the string coef_. I'm not fluent in regular expressions but this should work:

if((/\\b\\w*coef_\\w*\\b/g).test(event.name)){ ...

If you put the JS code in an external file, use single backslashes:

if((/\b\w*coef_\w*\b/g).test(event.name)){ ...

(and var code = '\\' + matches[i].slice(2,-2);).

Math mode in bsTooltip in shiny

No way with 'shinyBS'.

Here is a way using the qTip2 JavaScript library.

In order to use it, you have to download the files jquery.qtip.min.css and jquery.qtip.min.js, and put these two files in the www subfolder of the Shiny app.

Sample Image

library(shiny)

js <- "
    $(document).ready(function() {
      $('#Equation').qtip({
        overwrite: true,
        content: {
          text: $('#tooltip')
        },
        position: {
          my: 'top left',
          at: 'bottom right'
        },
        show: {
          ready: false
        },
        hide: {
          event: 'unfocus'
        },
        style: {
          classes: 'qtip-youtube qtip-rounded'
        },
        events: {
          blur: function(event, api) {
            api.elements.tooltip.hide();
          }
        }
      });
    });
"

library(shiny)

ui <- basicPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "jquery.qtip.min.css"),
    tags$script(src = "jquery.qtip.min.js"),
    tags$script(HTML(js)),
  ),
  withMathJax(),
  headerPanel("Tooltip test"),

  mainPanel(
    p("some text", htmlOutput("Equation", inline = TRUE)),
    div(
      id = "tooltip", style = "display: none;",
      HTML("$$\\int_0^1 f(x) dx = \\pi$$")
    )
  )
)

server <- shinyServer(function(input, output,session) {

  output$Equation <- 
    renderUI({HTML("<font color='blue'><u>something which needs equation</u></font>")})

})

shinyApp(ui = ui, server = server)

R shiny with mathjax: How to avoid parentheses being automatically placed in math mode?

solution 1

The simplest workaround is to delete ['\$','\$'] in the script. This tells the math engine that between "(" and ")" will be treated as math mode. If you want to use math mode, you can still use "$xxx$".

library(shiny)

server <- shinyServer(function(input, output) {
})

ui <- shinyUI(fluidPage( 
    withMathJax(),
    tags$div(HTML("<script type='text/x-mathjax-config'>
                MathJax.Hub.Config({
                tex2jax: {inlineMath: [['$','$']]}
                });
                </script>
                ")),

    titlePanel("Minimal application"),
    sidebarLayout(  
        sidebarPanel( 
            fluidRow(h4("(Hello!)"))),
        mainPanel(
            fluidRow(h4("Hello!")))
    )
))

shinyApp(ui=ui, server=server)

solution 2

Directly escape "()" in the HTML by using <span class='tex2jax_ignore'>. Replace your h4 with this:

fluidRow(HTML("<h4><span class='tex2jax_ignore'>(Hello!)</span></h4>"))),

This will allow you to even escape "$".

Inserting Latex equations in R Markdown in Shiny mode

There are two possible solutions. The first one is to click the button Open in Browser to open the page in your web browser, and the math expression will render correctly. The problem in the RStudio window is that the HTTPS link to MathJax is used by default (documentation here), and you can replace it with a normal http link, e.g.

---
title: "Untitled"
date: "Saturday, August 02, 2014"
output:
  html_document:
    mathjax: "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
runtime: shiny
---

Test 

* test 1 :  $x$
* test 2 : \(x\)

Or to make it even more portable, use

mathjax: "//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"

But please note the "protocol-less" //... link may not work in certain cases (read more).

Math Mode in Shiny Table