Try babel/importloader for parceljs. More structure overhaul

config/plugins/visualizations/scatterplot/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": ["env"],
+  "plugins": [[
+    "auto-import", {
+      "declarations": [
+        { "default": "$", "path": "jquery" }
+      ]
+    }
+  ]]
+}

config/plugins/visualizations/scatterplot/package.json

@@ -4,7 +4,6 @@
     "description": "Scatterplot visualization plugin for the Galaxy informatics framework",
     "main": " ",
     "scripts": {
-        "test": "test",
         "build": "parcel build src/scatterplot.js -d static/"
     },
     "keywords": [
@@ -15,10 +14,13 @@
     "author": "Carl Eberhard",
     "license": "BSD",
     "dependencies": {
+        "babel-plugin-auto-import": "^0.7.1",
+        "babel-preset-env": "^1.6.1",
         "backbone": "^1.3.3",
         "bootstrap": "^3.3.7",
         "d3": "^3.5.17",
         "jquery": "^3.2.1",
-        "jquery-ui-bundle": "^1.12.1"
+        "jquery-ui-bundle": "^1.12.1-migrate",
+        "underscore": "^1.8.3"
     }
 }

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

@@ -1,10 +1,15 @@
-import * as bootstrap from "bootstrap";
+import $ from "jquery";
 import * as Backbone from "backbone";
 import * as d3 from "d3";
+import * as _ from "underscore";
 import "jquery-ui-bundle";
-import * as VisualizationModel from "../../../../../client/galaxy/scripts/mvc/visualization/visualization-model";
+import "bootstrap";
 import "../../../../../client/galaxy/scripts/ui/peek-column-selector";
 import "../../../../../client/galaxy/scripts/ui/pagination";
+import * as VisualizationModel from "../../../../../client/galaxy/scripts/mvc/visualization/visualization-model";
+
+window.$ = $;
+
 //TODO: Finish unlinking this from the Galaxy codebase (package it, use that way?)
 
 /**
@@ -195,7 +200,7 @@ export function scatterplot(renderTo, config, data) {
         //console.log( 'grid.h.lines:', grid.h.lines );
         return grid;
     }
-    var grid = renderGrid();
+    renderGrid();
 
     //// .................................................................... datapoints
     var datapoints = content
@@ -256,7 +261,7 @@ export function scatterplot(renderTo, config, data) {
         $(".chart-info-box").remove();
         axis.redraw();
         _redrawDatapointsClipped();
-        grid = renderGrid();
+        renderGrid();
 
         $(svg.node()).trigger("zoom.scatterplot", {
             scale: zoom.scale(),
@@ -578,7 +583,7 @@ var ScatterplotConfigEditor = Backbone.View.extend({
             .save()
             .fail(function(xhr, status, message) {
                 console.error(xhr, status, message);
-                editor.trigger("save:error", view);
+                editor.trigger("save:error", this);
                 alert("Error loading data:\n" + xhr.responseText);
             })
             .then(function() {
@@ -756,7 +761,8 @@ ScatterplotConfigEditor.templates = {
  */
 var ScatterplotDisplay = Backbone.View.extend({
     initialize: function(attributes) {
-        (this.data = null), (this.dataset = attributes.dataset);
+        this.data = null;
+        this.dataset = attributes.dataset;
         this.lineCount = this.dataset.metadata_data_lines || null;
     },
 
@@ -766,8 +772,8 @@ var ScatterplotDisplay = Backbone.View.extend({
         var view = this,
             config = this.model.get("config"),
             //TODO: very tied to datasets - should be generalized eventually
-            baseUrl = window.parent && parent.galaxy_config ? parent.galaxy_config.root : "/",
-            xhr = jQuery.getJSON(baseUrl + "api/datasets/" + this.dataset.id, {
+            baseUrl = window.parent && window.parent.galaxy_config ? window.parent.galaxy_config.root : "/",
+            xhr = $.getJSON(baseUrl + "api/datasets/" + this.dataset.id, {
                 data_type: "raw_data",
                 provider: "dataset-column",
                 limit: config.pagination.perPage,
@@ -929,9 +935,9 @@ var ScatterplotDisplay = Backbone.View.extend({
         if (!this.data) {
             return;
         }
-        var view = this,
-            config = this.model.get("config"),
-            meanWorker = new Worker("worker-stats.js");
+        var view = this;
+        var config = this.model.get("config");
+        var meanWorker = new window.Worker("worker-stats.js");
         meanWorker.postMessage({
             data: this.data,
             keys: [config.xColumn, config.yColumn]

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

@@ -26,9 +26,6 @@ ${h.stylesheet_link( root + 'plugins/visualizations/scatterplot/static/scatterpl
 <script type="text/javascript">
 window.Galaxy = { root: '${ root }' };
 </script>
-${h.js( 'libs/jquery/jquery',
-        'libs/underscore',
-        'libs/d3')}
 ${h.javascript_link( root + 'plugins/visualizations/scatterplot/static/scatterplot.js' )}
 
 <script type="text/javascript">
@@ -42,7 +39,6 @@ ${h.javascript_link( root + 'plugins/visualizations/scatterplot/static/scatterpl
     function getHDAJSON(){
         return ${h.dumps( trans.security.encode_dict_ids( hda.to_dict() ), indent=2 )};
     }
-    window.jQuery = window.jquery = window.$;
 </script>
 
 </head>