Merge branch 'release/0.8.0'

.eslintignore

@@ -3,10 +3,9 @@ dist/
 
 # Non-code items
 docs/
-examples/
 node_modules/
 staticdata/
 package.json
 
 # ESLint seems to ignore env overrides on single files (for the es6 parser) in same directory
-files.js
+files.js

.eslintrc

@@ -12,7 +12,10 @@
         ],
         "quotes": [
             2,
-            "double"
+            "double",
+            {
+                "avoidEscape": true
+            }
         ],
         "linebreak-style": [
             2,

.npmignore

@@ -0,0 +1,2 @@
+.gitkeep
+.idea

README.md

@@ -245,7 +245,7 @@ The above command with enter forced-watch-mode, which will detect any changes to
 
 LocusZoom uses [Mocha](https://mochajs.org/) for unit testing. Tests are located in the `test` subdirectory, with a one-to-one mapping of test files to app files.
 
-**Note that the plugins used by gulp in this project require Node.js version 4.x or higher.**
+**Note that the build and test process requires Node.js version 6 LTS or higher.**
 
 ### Linting and Strict Mode
 

assets/css/locuszoom.scss

@@ -183,17 +183,13 @@ svg.#{$namespace}-locuszoom {
   }
 
   rect.#{$namespace}-data_layer-genes.#{$namespace}-boundary {
-    stroke: rgb(54, 54, 150);
     stroke-opacity: 1;
     stroke-width: 1px;
-    fill: #000099;
   }
 
   rect.#{$namespace}-data_layer-genes.#{$namespace}-exon {
-    stroke: rgb(54, 54, 150);
     stroke-opacity: 1;
     stroke-width: 1px;
-    fill: #000099;
   }
 
   g.#{$namespace}-data_layer-intervals-faded {

assets/js/app/Dashboard.js

@@ -875,6 +875,7 @@ LocusZoom.Dashboard.Components.add("download", function(layout){
     for (var stylesheet in Object.keys(document.styleSheets)){
         if ( document.styleSheets[stylesheet].href !== null
              && document.styleSheets[stylesheet].href.indexOf("locuszoom.css") !== -1){
+            // TODO: "Download image" button will render the image incorrectly if the stylesheet has been renamed or concatenated
             LocusZoom.createCORSPromise("GET", document.styleSheets[stylesheet].href)
                 .then(function(response){
                     this.css_string = response.replace(/[\r\n]/g," ").replace(/\s+/g," ");

assets/js/app/DataLayer.js

@@ -109,7 +109,8 @@ LocusZoom.DataLayer.prototype.addField = function(fieldName, namespace, transfor
  *   possible to reset without destroying the panel entirely. It is used by `Plot.clearPanelData`.
  */
 LocusZoom.DataLayer.prototype.setDefaultState = function() {
-    // Define state parameters specific to this data layer
+    // Define state parameters specific to this data layer. Within plot state, this will live under a key
+    //  `panel_name.layer_name`.
     if (this.parent){
         this.state = this.parent.state;
         this.state_id = this.parent.id + "." + this.id;
@@ -742,14 +743,13 @@ LocusZoom.DataLayer.Statuses.verbs.forEach(function(verb, idx){
 
 /**
  * Toggle a status (e.g. highlighted, selected, identified) on an element
- * @param {String} status
- * @param {String|Object} element
- * @param {Boolean} toggle
- * @param {Boolean} exclusive
+ * @param {String} status The name of a recognized status to be added/removed on an appropriate element
+ * @param {String|Object} element The data bound to the element of interest
+ * @param {Boolean} toggle True to add the status (and associated CSS styles); false to remove it
+ * @param {Boolean} exclusive Whether to only allow a state for a single element at a time
  * @returns {LocusZoom.DataLayer}
  */
 LocusZoom.DataLayer.prototype.setElementStatus = function(status, element, toggle, exclusive){
-
     // Sanity checks
     if (typeof status == "undefined" || LocusZoom.DataLayer.Statuses.adjectives.indexOf(status) === -1){
         throw("Invalid status passed to DataLayer.setElementStatus()");
@@ -793,9 +793,13 @@ LocusZoom.DataLayer.prototype.setElementStatus = function(status, element, toggl
     this.showOrHideTooltip(element);
 
     // Trigger layout changed event hook
-    this.parent.emit("layout_changed");
-    this.parent_plot.emit("layout_changed");
-
+    this.parent.emit("layout_changed", true);
+    if (status === "selected") {
+        // Notify parents that a given element has been interacted with. For now, we will only notify on
+        //   "selected" type events, which is (usually) a toggle-able state. If elements are exclusive, two selection
+        //   events will be sent in short order as the previously selected element has to be de-selected first
+        this.parent.emit("element_selection", { element: element, active: toggle }, true);
+    }
     return this;
 
 };
@@ -870,7 +874,7 @@ LocusZoom.DataLayer.prototype.setAllElementStatus = function(status, toggle){
 };
 
 /**
- * Apply all layout-defined behaviors to a selection of elements with event handlers
+ * Apply all layout-defined behaviors (DOM event handlers) to a selection of elements
  * @param {d3.selection} selection
  */
 LocusZoom.DataLayer.prototype.applyBehaviors = function(selection){
@@ -1048,16 +1052,15 @@ LocusZoom.DataLayer.prototype.reMap = function(){
     this.destroyAllTooltips(); // hack - only non-visible tooltips should be destroyed
     // and then recreated if returning to visibility
 
-    // Fetch new data
-    var promise = this.parent_plot.lzd.getData(this.state, this.layout.fields); //,"ld:best"
-    promise.then(function(new_data){
+    // Fetch new data. Datalayers are only given access to the final consolidated data from the chain (not headers or raw payloads)
+    var promise = this.parent_plot.lzd.getData(this.state, this.layout.fields);
+    promise.then(function(new_data) {
         this.data = new_data.body;
         this.applyDataMethods();
         this.initialized = true;
     }.bind(this));
 
     return promise;
-
 };
 
 

assets/js/app/DataLayers/forest.js

@@ -183,9 +183,8 @@ LocusZoom.DataLayers.add("forest", function(layout){
         points_selection.exit().remove();
 
         // Apply default event emitters to selection
-        points_selection.on("click.event_emitter", function(element){
-            this.parent.emit("element_clicked", element);
-            this.parent_plot.emit("element_clicked", element);
+        points_selection.on("click.event_emitter", function(element_data){
+            this.parent.emit("element_clicked", element_data, true);
         }.bind(this));
 
         // Apply behaviors to points

assets/js/app/DataLayers/genes.js

@@ -13,11 +13,14 @@ LocusZoom.DataLayers.add("genes", function(layout){
      * @member {Object}
      * */
     this.DefaultLayout = {
+        // Optionally specify different fill and stroke properties
+        stroke: "rgb(54, 54, 150)",
+        color: "#363696",
         label_font_size: 12,
         label_exon_spacing: 4,
         exon_height: 16,
         bounding_box_padding: 6,
-        track_vertical_spacing: 10,
+        track_vertical_spacing: 10
     };
     layout = LocusZoom.Layouts.merge(layout, this.DefaultLayout);
 
@@ -206,6 +209,7 @@ LocusZoom.DataLayers.add("genes", function(layout){
      */
     this.render = function(){
 
+        var self = this;
         this.assignTracks();
 
         var width, height, x, y;
@@ -266,8 +270,11 @@ LocusZoom.DataLayers.add("genes", function(layout){
                 bboxes.exit().remove();
 
                 // Render gene boundaries
+                var boundary_fill = function(d){ return self.resolveScalableParameter(self.layout.color, d); };
+                var boundary_stroke = function(d){ return self.resolveScalableParameter(self.layout.stroke, d); };
                 var boundaries = d3.select(this).selectAll("rect.lz-data_layer-genes.lz-boundary")
-                    .data([gene], function(d){ return d.gene_name + "_boundary"; });
+                    .data([gene], function(d){ return d.gene_name + "_boundary"; })
+                    .style({ fill: boundary_fill, stroke: boundary_stroke });
 
                 boundaries.enter().append("rect")
                     .attr("class", "lz-data_layer-genes lz-boundary");
@@ -345,12 +352,19 @@ LocusZoom.DataLayers.add("genes", function(layout){
                 labels.exit().remove();
 
                 // Render exon rects (first transcript only, for now)
+                // Exons: by default color on gene properties for consistency with the gene boundary track- hence color uses d.parent.parent
+                var exon_fill = function(d){ return self.resolveScalableParameter(self.layout.color, d.parent.parent); };
+                var exon_stroke = function(d){ return self.resolveScalableParameter(self.layout.stroke, d.parent.parent); };
+
                 var exons = d3.select(this).selectAll("rect.lz-data_layer-genes.lz-exon")
                     .data(gene.transcripts[gene.parent.transcript_idx].exons, function(d){ return d.exon_id; });
-                        
+
                 exons.enter().append("rect")
                     .attr("class", "lz-data_layer-genes lz-exon");
-
+
+                exons
+                    .style({ fill: exon_fill, stroke: exon_stroke });
+
                 width = function(d){
                     return data_layer.parent.x_scale(d.end) - data_layer.parent.x_scale(d.start);
                 };
@@ -425,8 +439,7 @@ LocusZoom.DataLayers.add("genes", function(layout){
 
                 // Apply default event emitters to clickareas
                 clickareas.on("click.event_emitter", function(element){
-                    element.parent.parent.emit("element_clicked", element);
-                    element.parent.parent_plot.emit("element_clicked", element);
+                    element.parent.parent.emit("element_clicked", element, true);
                 });
 
                 // Apply mouse behaviors to clickareas

assets/js/app/DataLayers/intervals.js

@@ -316,9 +316,8 @@ LocusZoom.DataLayers.add("intervals", function(layout){
                 clickareas.exit().remove();
 
                 // Apply default event emitters to clickareas
-                clickareas.on("click", function(element){
-                    element.parent.parent.emit("element_clicked", element);
-                    element.parent.parent_plot.emit("element_clicked", element);
+                clickareas.on("click", function(element_data){
+                    element_data.parent.parent.emit("element_clicked", element_data, true);
                 }.bind(this));
 
                 // Apply mouse behaviors to clickareas

assets/js/app/DataLayers/line.js

@@ -286,9 +286,7 @@ LocusZoom.DataLayers.add("line", function(layout){
         this.path.attr("class", path_class);
 
         // Trigger layout changed event hook
-        this.parent.emit("layout_changed");
-        this.parent_plot.emit("layout_changed");
-
+        this.parent.emit("layout_changed", true);
         return this;
     };
 

assets/js/app/DataLayers/scatter.js

@@ -423,8 +423,7 @@ LocusZoom.DataLayers.add("scatter", function(layout){
 
         // Apply default event emitters to selection
         selection.on("click.event_emitter", function(element){
-            this.parent.emit("element_clicked", element);
-            this.parent_plot.emit("element_clicked", element);
+            this.parent.emit("element_clicked", element, true);
         }.bind(this));
 
         // Apply mouse behaviors
@@ -437,8 +436,7 @@ LocusZoom.DataLayers.add("scatter", function(layout){
             this.separate_labels();
             // Apply default event emitters to selection
             this.label_texts.on("click.event_emitter", function(element){
-                this.parent.emit("element_clicked", element);
-                this.parent_plot.emit("element_clicked", element);
+                this.parent.emit("element_clicked", element, true);
             }.bind(this));
             // Extend mouse behaviors to labels
             this.applyBehaviors(this.label_texts);

assets/js/app/Layouts.js

@@ -434,7 +434,7 @@ LocusZoom.Layouts.add("data_layer", "genes", {
     namespace: { "gene": "gene", "constraint": "constraint" },
     id: "genes",
     type: "genes",
-    fields: ["{{namespace[gene]}}gene", "{{namespace[constraint]}}constraint"],
+    fields: ["{{namespace[gene]}}all", "{{namespace[constraint]}}all"],
     id_field: "gene_id",
     behaviors: {
         onmouseover: [
@@ -550,14 +550,6 @@ LocusZoom.Layouts.add("dashboard", "standard_plot", {
             subtitle: "<a href=\"https://statgen.github.io/locuszoom/\" target=\"_blank\">v" + LocusZoom.version + "</a>",
             position: "left"
         },
-        {
-            type: "dimensions",
-            position: "right"
-        },
-        {
-            type: "region_scale",
-            position: "right"
-        },
         {
             type: "download",
             position: "right"

assets/js/app/LocusZoom.js

@@ -2,7 +2,7 @@
  * @namespace
  */
 var LocusZoom = {
-    version: "0.7.2"
+    version: "0.8.0"
 };
 
 /**
@@ -706,26 +706,34 @@ LocusZoom.generateLoader = function(){
  *   enable code reuse and customization of known LZ core functionality.
  *
  * @param {Function} parent A parent class constructor that will be extended by the child class
- * @param {Object} extra An object of additional properties and methods to add/override behavior for the child class
- * @param {Function} [new_constructor] An optional constructor function that performs additional setup. If omitted,
- *   just calls the parent constructor by default. Implementer must manage super calls when overriding the constructor.
+ * @param {Object} extra An object of additional properties and methods to add/override behavior for the child class.
+ *   The special "constructor" property can be used to specify a custom constructor, or it will call parent by default.
+ *   Implementer must manage super calls when overriding the constructor.
  * @returns {Function} The constructor for the new child class
  */
-LocusZoom.subclass = function(parent, extra, new_constructor) {
+LocusZoom.subclass = function(parent, extra) {
     if (typeof parent !== "function" ) {
         throw "Parent must be a callable constructor";
     }
 
     extra = extra || {};
-    var Sub = new_constructor || function() {
+    var Sub = extra.hasOwnProperty("constructor") ? extra.constructor : function() {
         parent.apply(this, arguments);
     };
 
     Sub.prototype = Object.create(parent.prototype);
     Object.keys(extra).forEach(function(k) {
         Sub.prototype[k] = extra[k];
     });
-    Sub.prototype.constructor = Sub;
-
     return Sub;
 };
+
+
+/**
+ * LocusZoom optional extensions will live under this namespace.
+ *
+ * Extension code is not part of the core LocusZoom app.js bundle.
+ * @namespace
+ * @public
+ */
+LocusZoom.ext = {};