Highlight tabPanel of navbar

[etiennebacher]

I have an app with a navbar and I would like to present the tabs but not the specific elements inside each tab. I can do it with {rintrojs}:

library(shiny)
library(rintrojs)

ui <- navbarPage(
  introjsUI(),
  tabPanel(
    introBox("first_tab",
             data.step = 1,
             data.intro = "this is the first tab"),
  ),
  tabPanel(
    introBox("second_tab",
             data.step = 2,
             data.intro = "this is the second tab"),
  )
)

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

  introjs(session)

}

shinyApp(ui, server)

But I can't figure out how to do it with {cicerone}:

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new()$
  step(
    "first_tab",
    "Hello",
    "Hello from tab 1"
  )

ui <- navbarPage(
  title = "",
  header = list(use_cicerone()),
  tabPanel(
    "first_tab"
  ),
  tabPanel(
    "second_tab"
  )
)

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

  home_guide$init()$start()

}

shinyApp(ui, server)

Do you know how to do so? Or if it's even possible?

[JohnCoene]

Yes you can. On the latest version you can set is_id to FALSE and then use any valid CSS selectors.

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

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

  home_guide$init()$start()

}

shinyApp(ui, server)

Does that help?

[etiennebacher]

That's almost good. Your example works but adding position = "fixed-top" in the navbar makes the highlight entirely white (completely opaque), and this can't be influenced by the opacity argument in Cicerone$new().

[JohnCoene]

Looks like the CSS of cicerone and Bootstrap 3 clashes. I'll look into that.

[etiennebacher]

Hi, any news on this? I tried to modify some driver-highlighted-element* elements in driver.min.css to see what causes this but I am not comfortable at all with CSS, and I didn't find the solution (not even sure it's in this file)

[JohnCoene]

Sorry Etienne, I'll see if I can find the time today.

[etiennebacher]

Hi, any news on this? I don't want to put pressure, I understand you have other stuff to do + several packages to maintain, just wondering if you could add the hacktober label on this issue to give more visibility?

[JohnCoene]

I've just spent some time looking at it and really seems to be a bug with driver.js, also reported here

[etiennebacher]

Unfortunately, it is closed and seems "abandoned". I don't know how to test modifications on an entirely JS repo, is there a way to modify the use of driver.js directly in your repo?

[JohnCoene]

Yes indeed, but I'm afraid I do not know what to change exactly; I played with the CSS a solid hour and couldn't come up with a fix. If someone does I'll be happy to merge.

[etiennebacher]

Finally got it (I think)! Here's the CSS needed to solve this problem:

div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}

This comes from this comment on a driver.js issue. Here's the working example:

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='Description']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='Correlation']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- tagList(
  tags$head(tags$style(
    HTML(
      "div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}"
    )
  )),
  navbarPage(
  "cicerone", 
  header = list(use_cicerone()),
  id = "nav",
  position = "fixed-top",
  tabPanel(
    "Description",
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "Correlation",
    textInput("tab_secondary", "Text")
  ))
)

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

  home_guide$init()$start()

}

shinyApp(ui, server)

Now the problem is that I don't know how to implement this in the package to make a PR. I tried to modify driver.min.css but rebuilding the package doesn't seem to take this change into account. So I let you or somebody else apply the change, I'll be happy to see how to do it.

[JohnCoene]

Very nice! It does indeed work. I hope it did not take you too long.

I would not edit the driver.min.css file, this one should remain as-is so it is easy to update later on.

Place the CSS you have in inst/waiter/custom.css it should work. Please add yourself as contributor to the DESCRIPTION in your PR :+1:

[etiennebacher]

Unfortunately, creating inst/waiter/custom.css doesn't work. Isn't there something to add in another file? I tried different locations too (inst/driver/css/custom.css, inst/cicerone/custom.css, ...) with re-building the package each time but no success.

[JohnCoene]

Sorry, I'm juggling projects and have you the wrong path 🙆‍♂️

Create the file inst/cicerone/custom.css the in R/dependencies.R add the tags$link.

Let me know if this makes sense. Happy to help further :)

[etiennebacher]

It's okay, I also didn't notice that {waiter} is another package, you have too many nice ones ;)

[r-leyshon]

Hi @etiennebacher @JohnCoene , really glad you resolved this issue recently as I run into it, too. I still needed to copy the code snippet into my UI header:

tags$style(
    HTML(
      "div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}"
    )
  )

I wondered if John was going to merge this to master, or is it the CRAN update is pending? I'm using cicerone v1.0.3.

[JohnCoene]

This was merged on October 15 so should work fine now with the dev version.