Using some kind of formulas in the help text for the tour steps

[federicomarini]

Hi Carl,

together with @csoneson and @mikelove, we are building a small package/app for exploring model matrices.

After the experiences with ideal and iSEE, I can't abandon the idea of using the rintrojs-backed tour for showcasing the app and getting the first users in touch with the UI.

As the title says: We'd like to use some kind of formulas in the help text for the tour steps. Doesn't have to be mathjax, but to borrow Charlotte's words, "we'd just like to put $\hat{\beta}=(X^TX)^{-1}X^Ty$ in there".

I know it is not really a rintrojs issue, but I wanted to ask you whether you have some suggestions for this. Grateful in advance for any advice!

Federico

[federicomarini]

Whoops, forgot to link to https://github.com/csoneson/ExploreModelMatrix

[carlganz]

I see what you want. I am not really an expert in Mathjax, so I am not 100% how to help. If you can can give minimal example of how one would include Mathjax formulas in HTML or Shiny in general I can probably make it work with rintrojs

[federicomarini]

I have made up an example where I read in the content of a markdown file, with some "normally input" latex content is present.

De facto,

$$... for formulas$$
and $for inline$

You can see it running at this branch:

https://github.com/csoneson/ExploreModelMatrix/tree/mathjax_example

To have it work in Shiny, it is "just" a call to withMathJax() (e.g. in the ui.R), then includeMarkdown("filename.md")

I wonder if a similar magic can be made for having the formulas rendered also in the elements of the tour.

[carlganz]

library(shiny)
library(rintrojs)

ui <- shinyUI(fluidPage(
    introjsUI(),
    withMathJax(),
    mainPanel(
        textInput("intro", "Enter an introduction"),
        actionButton("btn", "Press me")
    )
))

server <- shinyServer(function(input, output, session) {
    steps <- reactive(data.frame(
        element = c(NA, "#btn"),
        ### this is where we pull in markdown
        intro = c(as.character(includeMarkdown("markdown.md")), "This is a button")
    ))

    observeEvent(input$btn, {
        introjs(
            session,
            options = list(steps = steps()),
            events = list(
                ### we need to tell mathjax to look for markdown everytime it appears on screen so it renders it
                ### for some reason this only works going forwards in tour and not backwards
                onafterchange = I(
                    'if (window.MathJax) {MathJax.Hub.Queue(["Typeset", MathJax.Hub])}'
                )
            )
        )
    })

})

# Run the application
shinyApp(ui = ui, server = server)

For reasons I don't understand I can get the Mathjax to render going forward, but not when going backwards in intro tour.

@afshinm Is it possible there is intro.js issue here where onafterchange isn't actually getting triggered after the change when going backwards? When I debug I see that onafterchange definitely runs whether you are going forwards or backwards in tour, but the MathJax render call doesn't seem to affect going in backwards direction so maybe it triggers too early.

[carlganz]

https://carlganz.shinyapps.io/mathjaxrintrojs/

[federicomarini]

@carlganz you are just a good person. If you happen to come to Germany for whatevs or we catch up at a conference, at least one round is on me.

[federicomarini]

(plus, I seriously can not think of a better way than a rintrojs-based tour to showcase the feature of any app - the complex ones, well, are IMHO useless till you do it with this finest learn-by-doing approach)

[federicomarini]

There is still a weird-y behavior, snapshotted in https://github.com/csoneson/ExploreModelMatrix/commit/96324512be83b35637ff6ed2b8295ff568ef0b57

The tour element renders nicely only if it is the 1st element. Or did I miss a pointer of how the events work?

Thanks again! Federico

[federicomarini]

From your MRE, it does the same if you swap the two intro elements

steps <- reactive(data.frame(
      element = c(NA, "#btn"),
      ### this is where we pull in markdown
      intro = c(
        "This is a button",
        as.character(includeMarkdown(system.file("extdata","mathjax_example.md",package = "ExploreModelMatrix")))
        )
    ))

[carlganz]

Understood, it only works on first element, which I misinterpreted as only working going in one direction. I am probably misunderstanding something about MathJax I'll have to look into it some more thanks

[federicomarini]

Seems so, thanks for digging into this. Whatever progress you can make on this, we'd be super grateful! F

[carlganz]

@federicomarini Can you take a look at latest version and let me know if this issue is resolved?

[federicomarini]

Hi Carl, thanks for the excellent news!

Yes, I just checked and it does work as intended! Nice touch on the different shape for the "current step" marker.

From my side and @csoneson 's: Thank you!