Bootstrap.js bug was preventing loading the 'correct' way; resolved with an update.

client/galaxy/scripts/mvc/visualization/visualization-model.js

@@ -1,3 +1,4 @@
+import * as Backbone from "libs/backbone";
 //==============================================================================
 /** @class Model for a saved Galaxy visualization.
  *

client/package.json

@@ -15,6 +15,7 @@
     "axios": "^0.17.0",
     "backbone": "1.3",
     "bibtex-parse-js": "^0.0.24",
+    "bootstrap": "^3.3.7",
     "d3": "3",
     "jquery": "2",
     "jquery-migrate": "~1.4",
@@ -47,7 +48,7 @@
     "build-toolshed": "grunt --app=toolshed",
     "jshint": "jshint --exclude='galaxy/scripts/libs/**' galaxy/scripts/**/*.js",
     "build-charts": "webpack -p --config ../config/plugins/visualizations/charts/webpack.config.js",
-    "build-scatterplot": "NODE_PATH=./node_modules webpack -d --config ../config/plugins/visualizations/scatterplot/webpack.config.js",
+    "build-scatterplot": "NODE_PATH=./node_modules webpack -p --config ../config/plugins/visualizations/scatterplot/webpack.config.js",
     "prettier": "prettier --write --tab-width 4 --print-width 120 \"galaxy/scripts/{,!(libs)/**/}/*.js\""
   },
   "devDependencies": {

client/yarn.lock

@@ -1142,6 +1142,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+
 bower@~1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/bower/-/bower-1.8.2.tgz#adf53529c8d4af02ef24fb8d5341c1419d33e2f7"

config/plugins/visualizations/scatterplot/src/scatterplot.js

@@ -1,4 +1,7 @@
 import * as VisualizationModel from "mvc/visualization/visualization-model";
+import * as bootstrap from "bootstrap";
+import * as Backbone from "libs/backbone";
+import * as d3 from "libs/d3";
 
 /**
  *  Two Variable scatterplot visualization using d3

config/plugins/visualizations/scatterplot/templates/scatterplot.mako

@@ -28,15 +28,11 @@ ${h.stylesheet_link( root + 'plugins/visualizations/scatterplot/static/scatterpl
 window.Galaxy = { root: '${ root }' };
 </script>
 ${h.js( 'libs/jquery/jquery',
-        'libs/jquery/jquery-ui',
-        'libs/require',
-        'libs/bootstrap',
         'libs/underscore',
-        'libs/backbone',
         'libs/d3')}
-
 ${h.javascript_link( root + 'plugins/visualizations/scatterplot/static/scatterplot.bundle.js' )}
-    <script type="text/javascript">
+
+<script type="text/javascript">
     function getModel(){
         return new ScatterplotModel({
             id      : ${h.dumps( visualization_id )} || undefined,
@@ -48,7 +44,7 @@ ${h.javascript_link( root + 'plugins/visualizations/scatterplot/static/scatterpl
         return ${h.dumps( trans.security.encode_dict_ids( hda.to_dict() ), indent=2 )};
     }
     window.jQuery = window.jquery = window.$;
-    </script>
+</script>
 
 </head>
 

config/plugins/visualizations/scatterplot/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = {
         alias: {
             jquery: path.join(lroot, "jquery/jquery"),
             underscore: path.join(lroot, "underscore.js"),
-            backbone: path.join(lroot, "backbone.js")
+            backbone: path.join(lroot, "backbone.js"),
         }
     },
     module: {
@@ -28,9 +28,9 @@ module.exports = {
     },
     plugins: [
         new webpack.ProvidePlugin({
-            $: "jquery",
-            _: "underscore",
-            Backbone: "backbone"
+            jquery: "jquery",
+            jQuery: "jquery",
+            $: "jquery"
         })
     ]
 };