cicerone doesn't seem to launch - possible incompatibility with `golem` or `bs4Dash`?

[yogat3ch]

Hi @JohnCoene, We're just using all your packages!

We have a golem app that's using tippy and cicerone. If you would like I can open another issue about tippyTheme not working (see below) or cross reference it, just let me know.

We've included resources in golem_add_external_resources function with mod_theme_ui:

golem_add_external_resources <- function(){

golem::add_resource_path( 'www', app_sys('app/www') )

tags$head( mod_theme_ui("theme"), golem::favicon(), golem::bundle_resources( path = app_sys('app/www'), app_title = 'crsspierViz' )

Add here other external resources

# for example, you can add shinyalert::useShinyalert() 

) } mod_theme_ui is pretty straightforward:

mod_theme_ui <- function(id){ ns <- shiny::NS(id) shiny::tagList( cicerone::use_cicerone(), tippy::useTippy(), tippy::tippyTheme("tip_theme", box_bg = crssp_theme$bg, box_color = crssp_theme$primary, content_bg = crssp_theme$bg, content_color = crssp_theme$text-color ) ) }

The cicerone setup is as follows:

#' @include mod_theme.R
guide <- cicerone::Cicerone$new(
  stage_background = crssp_theme$`card-bg`,
  id = "intro"
)
guide$step(
  el = ".main_header",
  is_id = FALSE,
  position = "bottom-center",
  title = "Welcome",
  description = "This is CrsspierViz - a collection of dashboards visualizing projections for the Colorado River Basin water table based on usage parameters.")
guide$step(
    el = "sidebar",
    title = "Sidebar Navigation",
    description = "The sidebar provides links to each dashboard that provides thematic info and visualizations as indicated by it's title.",
    position = "right"
  )
guide$step(
    el = "tip_scenario_chooser",
    title = "Tooltips",
    description = "These icons will provide more info about any content contained within their associated box.",
    position = "top-center"
  )
guide$step(
    el = "body-scenario_chooser1-scenario_chooser",
    title = "Scenario Chooser",
    description = "Each column represents a input feature for the CRSS predictive model that generates the projections visualized herein. Choose the scenario with teh combination of features that best suits your interests.",
    position = "top-center"
  )

When I search the DOM for cicerone I can find the js loading in the head portion of the page.

I've tried starting guide with guide$init()$start() in app_server, mod_welcome_server (the page that loads on start), and in mod_theme_server.

My questions are as follows:

1. I used debugonce(guide$start) and it appears like this method is firing, but the cicerone guide isn't loading?

2. Could the tippyTheme method be creating a nested head tag nested inside the head tag with our current setup and that's why it's not working properly?

Any advice will be appreciated, Stephen

[yogat3ch]

It looks it had to do with the main_header as the first step. Using the sidebar step as the first step appears to launch Cicerone as intended. However, it looks like everything that is backgrounded by the sidebar being open is not selectable by Cicerone and it skips all steps involving any element in the background?

[yogat3ch]

Seems like it just has to do with how IDs and classes are specified! Closing this

[JohnCoene]

I'm sorry I didn't answer, I was away last week and coming back to a mountain of work now.

[yogat3ch]

No worries, it was all my error anyway!