Gradient Coloring Option for Feature Metadata

empress/support_files/js/barplot-layer.js

@@ -3,9 +3,9 @@ define([
     "underscore",
     "spectrum",
     "Colorer",
-    "Legend",
+    "BarplotLegend",
     "util",
-], function ($, _, spectrum, Colorer, Legend, util) {
+], function ($, _, spectrum, Colorer, BarplotLegend, util) {
     /**
      *
      * @class BarplotLayer
@@ -634,14 +634,14 @@ define([
         this.colorLegendDiv.classList.add("hidden");
         this.colorLegendDiv.classList.add("legend");
         this.colorLegendDiv.classList.add("barplot-layer-legend");
-        this.colorLegend = new Legend(this.colorLegendDiv);
+        this.colorLegend = new BarplotLegend(this.colorLegendDiv);
         this.layerDiv.appendChild(this.colorLegendDiv);
 
         this.lengthLegendDiv = document.createElement("div");
         this.lengthLegendDiv.classList.add("hidden");
         this.lengthLegendDiv.classList.add("legend");
         this.lengthLegendDiv.classList.add("barplot-layer-legend");
-        this.lengthLegend = new Legend(this.lengthLegendDiv);
+        this.lengthLegend = new BarplotLegend(this.lengthLegendDiv);
         this.layerDiv.appendChild(this.lengthLegendDiv);
 
         // TODO: if possible, making the legend text selectable (overriding
@@ -757,7 +757,7 @@ define([
      * effect) will be excluded from the Array. However, if all legends are
      * active, the order in the Array will always be color then length.
      *
-     * @return {Array} Array of Legend objects
+     * @return {Array} Array of BarplotLegend objects
      */
     BarplotLayer.prototype.getLegends = function () {
         var containedLegends = [this.colorLegend, this.lengthLegend];

empress/support_files/js/barplot-legend.js

@@ -0,0 +1,35 @@
+define(["Legend"], function (Legend) {
+    /**
+     * @class SampleFeatureColorLegend
+     */
+    function BarplotLegend(container) {
+        // call Legend constructor
+        Legend.call(this, container);
+
+        /**
+         * @type {String}
+         * Text to display at the bottom of the continuous legend when some
+         * values in a continuous are either missing or non-numeric.
+         */
+        this.continuousMissingNonNumericWarning =
+            "Some value(s) in this field were missing and/or not numeric. " +
+            "These value(s) have been left out of the gradient, and no " +
+            "bar(s) have been drawn for them.";
+
+        /**
+         * @type {String}
+         * Short version of the above warning, shown for the same legends when
+         * exported to SVG
+         */
+        this.continuousMissingNonNumericWarningShort =
+            "Missing / non-numeric value(s) omitted.";
+    }
+
+    // inherit Legend functions
+    BarplotLegend.prototype = Object.create(Legend.prototype);
+
+    // set BarplotLegend's constructor
+    BarplotLegend.prototype.constructor = BarplotLegend;
+
+    return BarplotLegend;
+});

empress/support_files/js/empress.js

@@ -6,7 +6,7 @@ define([
     "VectorOps",
     "CanvasEvents",
     "BarplotPanel",
-    "Legend",
+    "SampleFeatureColorLegend",
     "util",
     "chroma",
     "LayoutsUtil",
@@ -20,7 +20,7 @@ define([
     VectorOps,
     CanvasEvents,
     BarplotPanel,
-    Legend,
+    SampleFeatureColorLegend,
     util,
     chroma,
     LayoutsUtil,
@@ -159,24 +159,12 @@ define([
         }
 
         /**
-         * @type {String}
-         * Text to display at the bottom of the continuous legend when some
-         *  values in a continuous are either missing or non-numeric.
-         */
-        this._continuousMissingNonNumericWarning =
-            "Some value(s) in this field were missing and/or not numeric. " +
-            "These value(s) have been left out of the gradient, and the " +
-            "corresponding nodes have been set to the default color.";
-        /**
-         * @type {Legend}
+         * @type {SampleFeatureColorLegend}
          * Legend describing the way the tree is colored.
          * @private
          */
-        this._legend = new Legend(document.getElementById("legend-main"));
-        this._legend.setMissingNonNumericWarning(
-            "Some value(s) in this field were missing and/or not numeric. " +
-                "These value(s) are not included in the gradient, and the " +
-                "associated nodes have been left as the default color."
+        this._legend = new SampleFeatureColorLegend(
+            document.getElementById("legend-main")
         );
 
         /**
@@ -2514,7 +2502,7 @@ define([
                 '" has less than 2 unique numeric values, so it cannot be ' +
                 "used for continuous coloring. " +
                 "Using discrete coloring instead.";
-            util.toastMsg(msg, 5000);
+            util.toastMsg("Feature metadata coloring error", msg, 5000);
             // assign colors to unique values
             colorer = new Colorer(
                 color,
@@ -2545,6 +2533,8 @@ define([
 
         // color tree
         this._colorTree(obs, cm);
+
+        this.resizeLegend();
         if (continuous) {
             this._legend.addContinuousKey(cat, keyInfo);
         } else {

empress/support_files/js/legend.js

@@ -1,6 +1,7 @@
 define(["jquery", "underscore", "util"], function ($, _, util) {
     /**
      *
+     * @Abstract
      * @class Legend
      *
      * Creates a legend within a given HTML element. (You'll need to call
@@ -11,7 +12,6 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
      *                                will be added.
      *
      * @return {Legend}
-     * @constructs Legend
      */
     function Legend(container) {
         /**
@@ -102,6 +102,25 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
          */
         this._minLengthVal = null;
         this._maxLengthVal = null;
+
+        /**
+         * @type {String}
+         * Text to display at the bottom of the continuous legend when some
+         * values in a continuous are either missing or non-numeric.
+         */
+        this.continuousMissingNonNumericWarning = null;
+
+        /**
+         * @type {String}
+         * Short version of the above warning, shown for the same legends when
+         * exported to SVG
+         */
+        this.continuousMissingNonNumericWarningShort = null;
+
+        // make Legend an abstract class
+        if (this.constructor === Legend) {
+            throw new Error("Abstract class Legend can not be instantiated.");
+        }
     }
 
     /**
@@ -183,7 +202,20 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
         containerSVG.setAttribute("style", "display: block; margin: auto;");
         // just kinda plop the combined SVG code into containerSVG's HTML
         containerSVG.innerHTML = totalHTMLSVG;
-        this._container.appendChild(containerSVG);
+
+        // We need to put the svg container inside a div otherwise some unwanted
+        // behavior will occur when users resize the legend.
+        // The gradient bar's height is set to be 80% of the legend's
+        // height. This works for most cases howevr, some issues come up when
+        // the uesr resizes the legned. i.e. the height of the graident color
+        // bar will continuously be set to 80% of the legend's height which
+        // can hide the warning message(s) that appear benith the gradient.
+        // By putting the svg container inside a div, the gradient color bar
+        // will be set to 80% of the initial size of the legend and will remain
+        // fixed when users resize the legend.
+        var fixSizeDiv = document.createElement("div");
+        fixSizeDiv.appendChild(containerSVG);
+        this._container.appendChild(fixSizeDiv);
         if (this._missingNonNumericWarningShown) {
             var missingText = this.getMissingNonNumericWarning();
             var warningP = document.createElement("p");
@@ -744,40 +776,23 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
         };
     };
 
-    Legend.prototype.setMissingNonNumericWarning = function (
-        full,
-        short = null
-    ) {
-        this.continuousMissingNonNumericWarning = full;
-        this.continuousMissingNonNumericWarningShort = short;
-    };
-
+    /**
+     * Returns the full and short versions of the continuous missing
+     * non-numeric warning messages.
+     *
+     * @return {Object} The object is formated as follows
+     * {
+     *      full: messageString,
+     *      short: messageString
+     * }
+     */
     Legend.prototype.getMissingNonNumericWarning = function () {
-        var missingText = {
-            full: Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING,
-            short: Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING_SHORT,
+        return {
+            full: this.continuousMissingNonNumericWarning,
+            short: this.continuousMissingNonNumericWarningShort,
         };
-        if (this.hasOwnProperty("continuousMissingNonNumericWarning")) {
-            missingText.full = this.continuousMissingNonNumericWarning;
-        }
-        if (this.hasOwnProperty("continuousMissingNonNumericWarningShort")) {
-            missingText.short = this.continuousMissingNonNumericWarningShort;
-        }
-        return missingText;
     };
 
-    // Shown at the bottom of continuous legends in the page when some values
-    // in a continuous field can't be represented on a gradient
-    Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING =
-        "Some value(s) in this field were missing and/or not numeric. " +
-        "These value(s) have been left out of the gradient, and no bar(s) " +
-        "have been drawn for them.";
-
-    // Short version of the above warning, shown for the same legends when
-    // exported to SVG
-    Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING_SHORT =
-        "Missing / non-numeric value(s) omitted.";
-
     // Various SVG attributes stored here since they're used every time the
     // export function is called
     Legend.LINE_HEIGHT = 54;

empress/support_files/js/sample-feature-color-legend.js

@@ -0,0 +1,36 @@
+define(["Legend"], function (Legend) {
+    /**
+     * @class SampleFeatureColorLegend
+     */
+    function SampleFeatureColorLegend(container) {
+        // call Legend constructor
+        Legend.call(this, container);
+
+        /**
+         * @type {String}
+         * Text to display at the bottom of the continuous legend when some
+         *  values in a continuous are either missing or non-numeric.
+         */
+        this.continuousMissingNonNumericWarning =
+            "Some value(s) in this field were missing and/or not numeric. " +
+            "These value(s) have been left out of the gradient, and the " +
+            "corresponding nodes have been set to the default color.";
+
+        /**
+         * @type {String}
+         * Short version of the above warning, shown for the same legends when
+         * exported to SVG
+         */
+        this.continuousMissingNonNumericWarningShort =
+            "Missing / non-numeric value(s)' associated nodes left as " +
+            "default color.";
+    }
+
+    // inherit Legend functions
+    SampleFeatureColorLegend.prototype = Object.create(Legend.prototype);
+
+    // set SampleFeatureColorLegend's constructor
+    SampleFeatureColorLegend.prototype.constructor = SampleFeatureColorLegend;
+
+    return SampleFeatureColorLegend;
+});

empress/support_files/templates/empress-template.html

@@ -114,7 +114,9 @@ <h3 id="menu-sm-header">Sample Presence Information</h3>
             'util' : './js/util',
             'LayoutsUtil': './js/layouts-util',
             'ExportUtil': './js/export-util',
-            'TreeController': './js/tree-controller'
+            'TreeController': './js/tree-controller',
+            'SampleFeatureColorLegend': './js/sample-feature-color-legend',
+            'BarplotLegend': './js/barplot-legend',
         }
     });
 

tests/index.html

@@ -205,6 +205,8 @@ <h3 id="menu-sm-header">Sample Presence Information</h3>
           'LayoutsUtil' : './support_files/js/layouts-util',
           'ExportUtil' : './support_files/js/export-util',
           'TreeController' : './support_files/js/tree-controller',
+          'SampleFeatureColorLegend': './support_files/js/sample-feature-color-legend',
+          'BarplotLegend': './support_files/js/barplot-legend',
 
           /* test utility code */
           'UtilitiesForTesting' : './../tests/utilities-for-testing',

tests/test-animation-panel-handler.js

@@ -5,7 +5,7 @@ require([
     "BPTree",
     "Empress",
     "BiomTable",
-    "Legend",
+    "SampleFeatureColorLegend",
     "util",
     "Colorer",
 ], function (
@@ -15,7 +15,7 @@ require([
     BPTree,
     Empress,
     BiomTable,
-    Legend,
+    SampleFeatureColorLegend,
     util,
     Colorer
 ) {
@@ -96,7 +96,7 @@ require([
             var empress = new Empress({ size: 0 }, biom, [], [], {}, {}, null);
             var animator = new Animator(
                 empress,
-                new Legend(
+                new SampleFeatureColorLegend(
                     document.createElement("div"),
                     document.createElement("div"),
                     document.createElement("div")

tests/test-empress.js

@@ -376,6 +376,12 @@ require([
             var resultProperties = util.naturalSort(Object.keys(cm));
             deepEqual(resultProperties, properties);
 
+            deepEqual(cm.gradientID, "Gradient-1");
+            deepEqual(cm.maxValStr, "2");
+            deepEqual(cm.midValStr, "1.5");
+            deepEqual(cm.minValStr, "1");
+            deepEqual(cm.missingNonNumerics, false);
+
             // make sure nodes were assigned correct color
             var node;
             var group1 = new Set([2, 3, 4]);
@@ -445,18 +451,18 @@ require([
             }
         });
 
-        test("Test colorByFeatureMetadata, continuous no numberic values", function () {
-            // hack to add a metadata column with no numberic data
+        test("Test colorByFeatureMetadata, continuous: failure due to no numberic values", function () {
+            // hack to add a metadata column with no numeric data
             this.empress._featureMetadataColumns = ["f1", "f2", "f3"];
             this.empress._tipMetadata = {
                 1: ["2", "2", "n1"],
                 2: ["1", "2", "n2"],
                 3: ["1", "2", "n3"],
                 6: ["2", "2", "n4"],
             };
-            var faileFunctionCalled = false;
+            var failedFunctionCalled = false;
             var failedFunction = () => {
-                faileFunctionCalled = true;
+                failedFunctionCalled = true;
             };
             var cm = this.empress.colorByFeatureMetadata(
                 "f3",
@@ -466,7 +472,7 @@ require([
                 true,
                 failedFunction
             );
-            ok(faileFunctionCalled, "continousFailedFunc was not called.");
+            ok(failedFunctionCalled, "continousFailedFunc was called.");
         });
 
         test("Test _projectObservations, all tips in obs", function () {