Custom EPA CSS conflicts with usability of leaflet, plotly

[ehinman]

Describe the bug
The leaflet map in the overview page is hard to drag and zoom in to. The points appear to move in a delayed fashion when zooming in/out panning. Additionally, in plotly plots, the hover info flies in from the left of the plot, and the text becomes separated from the bubble, flying to varying heights above the bubble itself.

To Reproduce
Steps to reproduce the behavior:

1. Start Shiny app
2. Upload example data
3. Go to overview map and try zooming or grabbing the map and dragging, go to Explore page and build some plotly figures and try hovering over a point or box.

Expected behavior
Map should update more quickly.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
This is a problem with some of the styling contained here: https://www.epa.gov/themes/epa_theme/css/styles.css?r6lsex
This css info is contained on line 94 of the epa_markup.R file: https://github.com/USEPA/TADAShiny/blob/develop/R/epa_markup.R

[ehinman]

From Brad and Kiki - https://www.epa.gov/themes/epa_theme/pattern-lab/?p=pages-standalone-template This is the theme template we should use. I tried substituting it into shiny and was having issues. I'm sure someone could handily make this change!

[cristinamullin]

Commenting out following line in epa_markup.R file (for now):

# commenting out because of plotly conflicts. for future debugging, note that js files also tend to cause issues - Hui discussion)
# tags$link(rel = "stylesheet", media = "all", href = "https://www.epa.gov/themes/epa_theme/css/styles.css?r6lsex"),

Updating following lines with new template Brad provided:

# tags$meta(property = "og:url", content = "https://www.epa.gov/themes/epa_theme/pattern-lab/.markup-only.html"),
# tags$link(rel = "canonical", href = "https://www.epa.gov/themes/epa_theme/pattern-lab/.markup-only.html"),
# tags$link(rel = "shortlink", href = "https://www.epa.gov/themes/epa_theme/pattern-lab/.markup-only.html"),
# tags$meta(property = "og:url", content = "https://www.epa.gov/themes/epa_theme/pattern-lab/.markup-only.html"),
tags$meta(property = "og:url", content = "https://www.epa.gov/themes/epa_theme/pattern-lab/?p=pages-standalone-template"),
tags$link(rel = "canonical", href = "https://www.epa.gov/themes/epa_theme/pattern-lab/?p=pages-standalone-template"),
tags$link(rel = "shortlink", href = "https://www.epa.gov/themes/epa_theme/pattern-lab/?p=pages-standalone-template"),
tags$meta(property = "og:url", content = "https://www.epa.gov/themes/epa_theme/pattern-lab/?p=pages-standalone-template"),

[cristinamullin]

Here is the current state of this issue:

This issue is related to the EPA banner. I have tried to fix on my own but it requires CSS/HTML and R Shiny experience to troubleshoot.
• fix-epa-style uses the current styles.css file downloaded from here: https://www.epa.gov/themes/epa_theme/pattern-lab/patterns/pages-standalone-template/pages-standalone-template.rendered.html.
o In this version, plotly and leaflet maps and plots do not work correctly unless I remove the .css file completely. Because this is the case even on my laptop, I think we can rule-out any buildtime or containerization issues. The culprit may be the sequencing of when the overall page styles are computed on page load versus when the styles invoked by leaflet and plotly are computed.

• We may be able to edit the css file to fix this issue. ... or We might be able to sidestep this issue by having ERG create a basic HTML page, apply the EPA header/footer/etc to that page, and then embed the app's UI within an HTML element within that page. Doing so would separate the two sources of styles (I think).