External js for math mode in shiny tables

Question

This questions is related to this one.

EDIT

I reformulated the question to reproduce the problem in more complex app.

I'm trying to include math mode in tables. Solution of @Stéphane Laurent using katex in EDIT 2 works excellent. I edited the code as my app includes a lot of tables which have names including string coef_.

library(shiny)

js <- " 
$(document).on('shiny:value', function(event) {
if(event.name.indexOf(event.name.match(/\\b\\w*coef_\\w+\\b/g)) > -1){
if(event.value.match(/(%%+[^%]+%%)/g) !== null) {
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;
} else {
event.value;
}
}
});
"

In case that table name does not include string coef_ or n case that table with name including string coef_ does not include terms with %%, js should have no impact on it.

# UI 1
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("coef_table1"),
    tableOutput("coef_table2"),
    tableOutput("table")
  ))

# SERVER
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)

}

However, when I create js file with code in js variable, save it in www folder and load it, it does not work:

# UI 2
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(src="math_in_tables.js")
  ),
  titlePanel("Hello Shiny!"),
  mainPanel(
    numericInput("mean", "Enter mean", value = 1),
    tableOutput("coef_table1"),
    tableOutput("coef_table2"),
    tableOutput("table")
  ))

Math mode no longer works in the first table. What am I missing here? There are no errors in browser.

Where do you put the `math_in_tables.js` file ? It should be in the `www` subfolder. — Stéphane Laurent, Mar 27 '19 at 12:55
Are you sure there's no error in the js file (post it, maybe) ? Do you have any error message in the browser console (Ctrl+Shift+I) ? For me this works if I replace `var code = '\\\\' + matches[i].slice(2,-2);` with `var code = '\\' + matches[i].slice(2,-2);`. But your issue is different. — Stéphane Laurent, Mar 27 '19 at 14:26
I tried change `\\\\` to `\\` but with no success. I edited original post and added errors obtained in browser. — Adela, Mar 28 '19 at 09:16
For me it works. So perhaps there's an error in your `math_in_tables.js` file. Please post it. — Stéphane Laurent, Mar 28 '19 at 09:31
What is this js code ? Why did you change the original one ? I don't understand what you are doing in the first `if`. — Stéphane Laurent, Mar 28 '19 at 09:41
I tried to explain it in edit, hope that it is more clear now. — Adela, Mar 28 '19 at 10:18

score 1 · Accepted Answer · answered Mar 28 '19 at 10:33

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);).

External js for math mode in shiny tables

EDIT

1 Answers1