Bootstrap version 3 compatibility, use shinybootstrap2

[zkamvar]

As Shiny officially changed to bootstrap version 3 in version 0.11 https://github.com/rstudio/shiny/blob/master/README.md#bootstrap-3-migration. To address compatibility with sites that are structured off of bootstrap version 2, they suggest to use the package shinybootstrap2: https://github.com/rstudio/shinybootstrap2

[zkamvar]

Details

This was identified as an issue when there was an error running this with the current version of shiny (0.13). This site was built before shiny version 0.11, which introduced bootstrap 3, causing breaking changes if you hand-coded the HTML.

Basically, it comes down to the fact that the classes have changed in bootstrap 3 and so, what used to be slider inputs in version 2 are now not recognized. This causes the input to return NULL and break. The shinybootstrap2 package promises to allow you to run bootstrap2 with the current version of shiny by wrapping it in the function shinybootstrap2::withBootstrap2(). Unfortunately, after testing this a bit, it doesn't seem to alleviate the problem.

I see a few solutions from this:

1. Keep trying for shinybootstrap2 and see where we get
2. update to bootstrap3
3. State that the required version of shiny as 10.2.2

Of those three options, only number 3 is working straight out of the box. The drawback is that we are frozen with this framework, and it requires the user to explicitly utilize an out-of-date version of an R package which has a higher chance of failing as R continues to improve.

The obvious drawbacks to 1 and 2 is that either of them would take more time and effort than we have.

[Tabima]

All scripts and links necessary to work have been updated to work with bootstrap 3 in the 4cafbc5 commit.

@zkamvar, can you test the New_bootstrap pages and scripts (test only SSR-ID and Binary-ID, as MLST-ID won't work in your local machine due to some dependency issues)?. Then we can update shiny in the server, update Phytopthora-ID and call it a day.

[zkamvar]

It works for SSR-ID and that's what's important to me.

[alexweisberg]

How difficult was it to update the scripts to support bootstrap3? I would need to update GallID on the server and I don’t wan’t to lose anything hardcoded by switching to the new version.

On March 14, 2016 at 4:25:13 PM, Javier F. Tabima ([email protected]) wrote:

All scripts and links necessary to work have been updated to work with bootstrap 3 in the 4cafbc5 commit.

@zkamvar, can you test the New_bootstrap pages and scripts (test only SSR-ID and Binary-ID, as MLST-ID won't work in your local machine due to some dependency issues). Then we can update shiny in the server, update Phytopthora-ID and call it a day.

—
Reply to this email directly or view it on GitHub.

[zkamvar]

@alexweisberg, you could try creating a branch of GallID and then merging the new version into that branch to see what changed. If you're lucky, you will just have to rename some variables. If not, delete that branch and manually update.

[Tabima]

fantastamazing. I'll sit with @knausb during the week and update shiny.

@alexweisberg: Not very difficult. Its more tedious due to the fact we have to update the script + style links... pretty much you have to remove all previous styles + scripts (except the ones that you created or are executed by the page itself) with this new locations of the bootstrap + shiny files:

<script type="application/shiny-singletons"></script>
<script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.12.2];jqueryui[1.10.4];showdown[0.3.1];highlight.js[6.2];ionrangeslider[2.0.12];strftime[0.9.2];bootstrap[3.3.1];font-awesome[4.2.0]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<script src="shared/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="shared/showdown/compressed/showdown.js"></script>
<script src="shared/highlight/highlight.pack.js"></script>
<link href="shared/ionrangeslider/css/ion.rangeSlider.css" rel="stylesheet" />
<link href="shared/ionrangeslider/css/ion.rangeSlider.skinShiny.css" rel="stylesheet" />
<script src="shared/ionrangeslider/js/ion.rangeSlider.min.js"></script>
<script src="shared/strftime/strftime-min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
<link href="shared/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="shared/shiny-showcase.js"></script>
<link rel="stylesheet" type="text/css" href="shared/highlight/rstudio.css"/>
<link rel="stylesheet" type="text/css" href="shared/shiny-showcase.css"/>

I'd follow what @zkamvar is recommending and I would create a new branch to test and update them.

[Tabima]

Also, if you are going to change the styles of the backbone webpages (not the shiny pages) you have to manually update the Bootstrap-files folder with the latest bootstrap files, and then reference the backbone page links to the files you require. The shiny pages do not require you to add a new Bootstrap-files folder anywhere because shiny has a shared folder where it maintains the versions its supposed to be using.