search

noaa-onms / cinms

Channel Islands National Marine Sanctuary
https://noaa-onms.github.io/cinms
MIT License
3 stars 1 forks source link

get glossary to work with interactive figures (md to html with JS libs) #49

Closed bbest closed 3 years ago

bbest commented 3 years ago

Hi @superjai,

I was trying to render the key-climate-ocean modal like so:

rmd2html("modals/key-climate-ocean.Rmd")

And noticed that the output does not include any interactive plots:

image

The rmd2html() calls glossarize_md() but it appears that the JavaScript libraries are not transferred over to the final html from md in order for the interactive maps and time series plots to show up.

For now to render key-climate-ocean.html, I've switched from using rmd2html() to render() here:

https://github.com/marinebon/cinms/commit/1ca6b7b716216c4447521d4555342f4978ab3afe#diff-d0fef1a0db28b7d7ca4d08fc7bc6373eR10-R12

This issue is a reminder for us to fix the function to transfer JS libraries so we can have both glossary entries on click/hover as well as interactive figures. The rmd2html() and glossarize_md() functions are defined here:

https://github.com/marinebon/cinms/blob/8a3a78a305e243b976ca8a4bc46cb309e1b4bb37/scripts/utility.R#L288-L429

We should probably transfer these functions into nms4r.

bbest commented 3 years ago

Manually got this going by pasting the JS libs from render() html output into the rmd2html() html output here: key-climate-ocean_manual-working-js.html.

TODO: Automate with regular expression to look for \n<script ... <style, and replace with other chunk

Like so:

<!--- BB comment

Regular expression: look for </title>\n<script ... <style, and replace with other chunk

<script src="modal_libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="modal_libs/bootstrap-3.3.5/css/lumen.min.css" rel="stylesheet" />
<script src="modal_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="modal_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="modal_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="modal_libs/navigation-1.1/tabsets.js"></script>
<link href="modal_libs/highlightjs-9.12.0/default.css" rel="stylesheet" />
<script src="modal_libs/highlightjs-9.12.0/highlight.js"></script>
-->

<script src="modal_libs/jquery-1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="modal_libs/bootstrap-3.3.5/css/lumen.min.css" rel="stylesheet" />
<script src="modal_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="modal_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="modal_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="modal_libs/navigation-1.1/tabsets.js"></script>
<link href="modal_libs/highlightjs-9.12.0/default.css" rel="stylesheet" />
<script src="modal_libs/highlightjs-9.12.0/highlight.js"></script>
<script src="modal_libs/htmlwidgets-1.5.1/htmlwidgets.js"></script>
<link href="modal_libs/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
<script src="modal_libs/leaflet-1.3.1/leaflet.js"></script>
<link href="modal_libs/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="modal_libs/Proj4Leaflet-1.0.1/proj4-compressed.js"></script>
<script src="modal_libs/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
<link href="modal_libs/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
<script src="modal_libs/leaflet-binding-2.0.3/leaflet.js"></script>
<link href="modal_libs/dygraphs-1.1.1/dygraph.css" rel="stylesheet" />
<script src="modal_libs/dygraphs-1.1.1/dygraph-combined.js"></script>
<script src="modal_libs/dygraphs-1.1.1/shapes.js"></script>
<script src="modal_libs/moment-2.8.4/moment.js"></script>
<script src="modal_libs/moment-timezone-0.2.5/moment-timezone-with-data.js"></script>
<script src="modal_libs/moment-fquarter-1.0.0/moment-fquarter.min.js"></script>
<script src="modal_libs/dygraphs-binding-1.1.1.6/dygraphs.js"></script>