Merge remote-tracking branch 'upstream/dev' into viz-staging

config/plugins/visualizations/scatterplot/.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": ["env"],
+    "plugins": [
+        [
+            "auto-import",
+            {
+                "declarations": [{ "default": "$", "path": "jquery" }, { "default": "jQuery", "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": [
@@ -13,12 +12,16 @@
         "d3"
     ],
     "author": "Carl Eberhard",
-    "license": "BSD",
+    "license": "0BSD",
     "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",
+        "parcel-bundler": "^1.6.2",
+        "underscore": "^1.8.3"
     }
 }

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

@@ -0,0 +1,2 @@
+import $ from "jquery";
+window.jQuery = window.$ = window.jquery = $;

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

@@ -1,12 +1,66 @@
-import * as bootstrap from "bootstrap";
+import "./jqglobals";
+// This is a really annoying hack to get bootstrap/jqui jquery bindings available correctly.
+/* global $ */
 import * as Backbone from "backbone";
 import * as d3 from "d3";
-import "jquery-ui-bundle";
-import * as VisualizationModel from "../../../../../client/galaxy/scripts/mvc/visualization/visualization-model";
+import * as _ from "underscore";
 import "../../../../../client/galaxy/scripts/ui/peek-column-selector";
 import "../../../../../client/galaxy/scripts/ui/pagination";
+import "jquery-ui-bundle";
+import "bootstrap";
+
 //TODO: Finish unlinking this from the Galaxy codebase (package it, use that way?)
 
+var Visualization = Backbone.Model.extend({
+        /** default attributes for a model */
+        defaults: {
+            config: {}
+        },
+
+        /** override urlRoot to handle prefix */
+        urlRoot: function() {
+            var apiUrl = "api/visualizations";
+            return Galaxy.root + apiUrl;
+        },
+
+        /** Set up the model, determine if accessible, bind listeners
+         *  @see Backbone.Model#initialize
+         */
+        initialize: function(data) {
+            // munge config sub-object here since bbone won't handle defaults with this
+            if (_.isObject(data.config) && _.isObject(this.defaults.config)) {
+                _.defaults(data.config, this.defaults.config);
+            }
+
+            this._setUpListeners();
+        },
+
+        /** set up any event listeners */
+        _setUpListeners: function() {},
+
+        /** override set to properly allow update and trigger change when setting the sub-obj 'config' */
+        set: function(key, val) {
+            if (key === "config") {
+                var oldConfig = this.get("config");
+                if (_.isObject(oldConfig)) {
+                    val = _.extend(_.clone(oldConfig), val);
+                }
+            }
+            Backbone.Model.prototype.set.call(this, key, val);
+            return this;
+        },
+
+        /** String representation */
+        toString: function() {
+            var idAndTitle = this.get("id") || "";
+            if (this.get("title")) {
+                idAndTitle += `:${this.get("title")}`;
+            }
+            return `Visualization(${idAndTitle})`;
+        }
+    }
+);
+
 /**
  *  Two Variable scatterplot visualization using d3
  *      Uses semi transparent circles to show density of data in x, y grid
@@ -195,7 +249,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 +310,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(),
@@ -377,7 +431,7 @@ var ScatterplotConfigEditor = Backbone.View.extend({
     /** initialize requires a configuration Object containing a dataset Object */
     initialize: function(attributes) {
         if (!this.model) {
-            this.model = new VisualizationModel.Visualization({ type: "scatterplot" });
+            this.model = new Visualization({ type: "scatterplot" });
         }
         //this.log( this + '.initialize, attributes:', attributes );
 
@@ -578,7 +632,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 +810,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 +821,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 +984,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]
@@ -980,7 +1035,7 @@ var ScatterplotDisplay = Backbone.View.extend({
         return "ScatterplotView()";
     }
 });
-var ScatterplotModel = VisualizationModel.Visualization.extend({
+var ScatterplotModel = Visualization.extend({
     defaults: {
         type: "scatterplot",
 

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>