Intrusive CSS in shiny app

[PaulC91]

Hi, thanks for this great visualisation library! I noticed when adding a flowmap to a shiny dashboard that the CSS styling is being applied to the entire html document and overwriting my own CSS rules, causing issues. See example below of before and after adding a flowmap to the dashboard:

# empty dashboard
library(shiny)
library(bslib)

ui <- page_sidebar(
  theme = bs_theme(version = 5L, base_font = "serif"),
  title = "Flowmap Blue",
  sidebar = sidebar(title = "My Sidebar"),
  card(
    card_header("My Card"),
    card_body("Placeholder")
  )
)

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

shinyApp(ui, server)

# add a flowmap
library(shiny)
library(bslib)
library(flowmapblue)

ui <- page_sidebar(
  theme = bs_theme(version = 5L, base_font = "serif"),
  title = "Flowmap Blue",
  sidebar = sidebar(title = "My Sidebar"),
  card(
    card_header("My Card"),
    card_body(flowmapblueOutput("flowmap"))
  )
)

server <- function(input, output, session) {
  output$flowmap <- renderFlowmapblue({
    flowmapblue(
      locations = ch_locations,
      flows = ch_flows,
      mapboxAccessToken = Sys.getenv('MAPBOX_ACCESS_TOKEN'),
      clustering = TRUE,
      darkMode = TRUE,
      animation = FALSE
    )
  })
}

shinyApp(ui, server)

You can see that the flowmap background colour has been applied to the entire document body, fonts have changed and the flowmap has filled the entire card element, hiding the header title area.

Is there a way to ensure any flowmap styling is only applied within its container (the card body in this case) ?

Thanks!

[ilyabo]

Not sure if there's a workaround for the current version, but I'll keep this in mind for the next one so that the styles are isolated.

[e-kotov]

@ilyabo I am guessing this is related to #14 and the fact that CSS is hardcoded into the https://github.com/FlowmapBlue/flowmapblue.R/blob/master/inst/htmlwidgets/lib/flowmap-blue.min.js file, unlike other htmlwidget-based packages, e.g. here https://github.com/davidgohel/ggiraph/tree/master/inst/htmlwidgets/lib/ggiraphjs-0.8.10