javascriptrshinyselectize.jskatex

Latex AND (LONG) Text in R Shiny selectInput/selectizeInput


Before you go after me regarding duplicate posts, hear me out: I already stumbled across posts like these: latex in shiny selectInput

Which are super useful! However, the main issue is that I just don't want Greek letters... I want words AND Greek letters... But ALSO, IT IS LONG and it doesn't render the way I want it to be!! Continue further in this post to see what I mean.

Here's some example test code:

library(shiny)

ui <- shinyUI(
  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")
    ),
    selectizeInput(
      inputId = "test_id", 
      label = "test_label", 
      choices = list("\\text{hahaha } \\omega \\text{ hahaha insert more text please help me...}" = 1,
                     "\\text{hahaha } \\beta \\text{ hahaha}" = 2),
      options = list(render = I("
      {
        item: function(item, escape) { 
                var html = katex.renderToString(item.label);
                return '<div>' + html + '</div>'; 
              },
        option: function(item, escape) { 
                  var html = katex.renderToString(item.label);
                  return '<div>' + html + '</div>'; 
                }
      }")
      )
    )
  )
)

server <- function(input, output, session){  
  # server side code here...
}

shinyApp(ui = ui, server = server)

Notice that when you load the app, it looks like this:

enter image description here

And you can see it is slightly cut off!! (And no, I don't want to increase the width of the sidebarlayout.) To summarize There are two things I want:

  1. Have the remaining words of the sentence not be cut off.
  2. Change the format of the text to the basic font in R Shiny. I.e, instead of the above solution where I just used \text{}, I would prefer:

enter image description here

Many thanks to whoever can help!

Edit: I realise that I can fix 1. by spamming "\newline" when it ends (to make it wrap as I wanted), but I feel like there may be a better solution.


Solution

  • If you do as follows then the text is wrapped so there's no truncation, but the problem is that this way assumes the same text for each choice.

        selectizeInput(
          inputId = "test_id", 
          label = "test_label", 
          choices = list("\\omega" = 1,
                         "\\beta" = 2),
          options = list(render = I("
          {
            item: function(item, escape) { 
                    var html = katex.renderToString(item.label);
                    return '<span>hahaha... ' + html + ' hahahahahaha insert more text here... please help me...</span>'; 
                  },
            option: function(item, escape) { 
                      var html = katex.renderToString(item.label);
                      return '<span> hahaha... ' + html + ' hahahahahaha that is really funny do you agree?</span>'; 
                    }
          }")
          )
        )
    

    Edit

    Here is how to do with individual texts:

        selectizeInput(
          inputId = "test_id", 
          label = "test_label", 
          choices = NULL,
          options = list(
            options = list(
              list(
                value = 1,
                head = "hahaha... ",
                latex = "\\omega",
                tail = " hahahahaha... insert more text here because I want to be long !! please help me !!"
              ),
              list(
                value = 2,
                head = "hohoho... ",
                latex = "\\beta",
                tail = " hohohohohoho that is really funny"
              )
            ),
            valueField = "value",
            render = I("{
            item: function(item, escape) { 
                    var html = katex.renderToString(item.latex);
                    return '<span>' + item.head + html + item.tail + '</span>'; 
                  },
            option: function(item, escape) { 
                      var html = katex.renderToString(item.latex);
                      return '<span>' + item.head + html + item.tail + '</span>';; 
                    }
          }")
          )
        )
    

    enter image description here


    Edit

    Replace span with div.