Gradient Coloring Option for Feature Metadata

empress/support_files/js/empress.js

@@ -2435,14 +2435,19 @@ define([
      * @param{Boolean} reverse Defaults to false. If true, the color scale
      *                         will be reversed, with respect to its default
      *                         orientation.
-     *
+     * @param{Boolean} continuous Defaults to false. If true, the colorer will
+     *                            use a gradient color scale.
+     * @param{function} continousFailedFunc The function to call if continuous
+     *                                      coloring failed.
      * @return {Object} Maps unique values in this f. metadata column to colors
      */
     Empress.prototype.colorByFeatureMetadata = function (
         cat,
         color,
         method,
-        reverse = false
+        reverse = false,
+        continuous = false,
+        continousFailedFunc = null
     ) {
         var fmInfo = this.getUniqueFeatureMetadataInfo(cat, method);
         var sortedUniqueValues = fmInfo.sortedUniqueValues;
@@ -2456,18 +2461,55 @@ define([
             obs[uniqueVal] = new Set(uniqueValueToFeatures[uniqueVal]);
         });
 
-        // assign colors to unique values
-        var colorer = new Colorer(
-            color,
-            sortedUniqueValues,
-            undefined,
-            undefined,
-            reverse
-        );
+        var colorer;
+        try {
+            // assign colors to unique values
+            colorer = new Colorer(
+                color,
+                sortedUniqueValues,
+                continuous,
+                // Colorer will create a special gradient ID using the number
+                // we pass into this parameter. This allows empress to display
+                // multiple gradients at the same time without them overriding
+                // each other. Currently, the barplots are set up to start at
+                // 0. So, we set this value to -1 here to avoid conflict with
+                // the barplot gradients; this allows us to display the
+                // feature metadata gradient alongside the
+                // barplot gradients.
+                continuous ? -1 : undefined,
+                reverse
+            );
+        } catch (err) {
+            // If the Colorer construction failed (should only have
+            // happened if the user asked for continuous values but the
+            // selected field doesn't have at least 2 unique numeric
+            // values), then we open a toast message about this error and
+            // use discrete coloring instead.
+            continuous = false;
+            var msg =
+                "Error with assigning colors: '" +
+                cat +
+                "' cannot use continuous coloring. Using discrete instead.";
+            util.toastMsg(msg, 5000);
+            // assign colors to unique values
+            colorer = new Colorer(
+                color,
+                sortedUniqueValues,
+                continuous,
+                undefined,
+                reverse
+            );
+            continousFailedFunc();
+        }
         // colors for drawing the tree
         var cm = colorer.getMapRGB();
         // colors for the legend
-        var keyInfo = colorer.getMapHex();
+        var keyInfo;
+        if (continuous) {
+            keyInfo = colorer.getGradientInfo();
+        } else {
+            keyInfo = colorer.getMapHex();
+        }
 
         // Do upwards propagation only if the coloring method is "tip"
         if (method === "tip") {
@@ -2479,8 +2521,11 @@ define([
 
         // color tree
         this._colorTree(obs, cm);
-
-        this.updateLegendCategorical(cat, keyInfo);
+        if (continuous) {
+            this._legend.addContinuousKey(cat, keyInfo);
+        } else {
+            this.updateLegendCategorical(cat, keyInfo);
+        }
 
         return keyInfo;
     };
@@ -2494,7 +2539,7 @@ define([
      *
      *      2) Assigns each internal node to a group if all of its children belong
      *         to the same group.
-     *@t
+     *
      *      3) Remove empty groups from return object.
      *
      * Note: All tips that are not passed into obs are considered to belong to
@@ -2946,7 +2991,7 @@ define([
         // project groups up tree
         // Note: if _projectObservations was called, then if an internal node
         // belongs to a group, all of its descendants will belong to the
-        // same group. However, this is not guaranteed if _projectOBservations
+        // same group. However, this is not guaranteed if _projectObservations
         // was not called. Thus, this loop is used to guarantee that if an
         // internal node belongs to a group then all of its descendants belong
         // to the same group.

empress/support_files/js/side-panel-handler.js

@@ -73,6 +73,10 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
         this.fCollapseCladesChk = document.getElementById(
             "feature-collapse-chk"
         );
+        this.fContinuousDiv = document.getElementById("feature-continous-div");
+        this.fContinuousChk = document.getElementById(
+            "feature-continuous-color-chk"
+        );
         this.fLineWidth = document.getElementById("feature-line-width");
         this.fUpdateBtn = document.getElementById("feature-update");
         this.fMethodChk = document.getElementById("fm-method-chk");
@@ -291,21 +295,28 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
         lwInput,
         updateBtn
     ) {
-        this.empress.resetTree();
+        try {
+            this.empress.resetTree();
 
-        // hide update button
-        updateBtn.classList.add("hidden");
+            // hide update button
+            updateBtn.classList.add("hidden");
 
-        // color tree
-        this[colorMethodName]();
+            // color tree
+            this[colorMethodName]();
 
-        if (collapseChk.checked) {
-            this.empress.collapseClades();
+            if (collapseChk.checked) {
+                this.empress.collapseClades();
+            }
+            var lw = util.parseAndValidateNum(lwInput);
+            this.empress.thickenColoredNodes(lw);
+
+            this.empress.drawTree();
+        } catch (err) {
+            this.empress.resetTree();
+            this.empress.drawTree();
+            this.empress.clearLegend();
+            updateBtn.classList.remove("hidden");
         }
-        var lw = util.parseAndValidateNum(lwInput);
-        this.empress.thickenColoredNodes(lw);
-
-        this.empress.drawTree();
     };
 
     /**
@@ -329,15 +340,23 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
      * Colors the tree based on the feature metadata coloring settings.
      */
     SidePanel.prototype._colorFeatureTree = function () {
+        var scope = this;
         var colBy = this.fSel.value;
         var col = this.fColor.value;
         var coloringMethod = this.fMethodChk.checked ? "tip" : "all";
         var reverse = this.fReverseColor.checked;
+        var continuous =
+            !this.fContinuousDiv.classList.contains("hidden") &&
+            this.fContinuousChk.checked;
         this.empress.colorByFeatureMetadata(
             colBy,
             col,
             coloringMethod,
-            reverse
+            reverse,
+            continuous,
+            () => {
+                scope.fContinuousChk.checked = false;
+            }
         );
     };
 
@@ -607,10 +626,16 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
         };
 
         var showUpdateBtn = function () {
+            if (Colorer.isColorMapDiscrete(scope.fColor.value)) {
+                scope.fContinuousDiv.classList.add("hidden");
+            } else {
+                scope.fContinuousDiv.classList.remove("hidden");
+            }
             scope.fUpdateBtn.classList.remove("hidden");
         };
         this.fSel.onchange = showUpdateBtn;
         this.fColor.onchange = showUpdateBtn;
+        this.fContinuousChk.onchange = showUpdateBtn;
         this.fReverseColor.onchange = showUpdateBtn;
         this.fLineWidth.onchange = showUpdateBtn;
         this.fMethodChk.onchange = function () {

empress/support_files/templates/side-panel.html

@@ -99,6 +99,13 @@
         If checked, collapse all clades whose members share the same feature
         metadata value.
       </p>
+      <div id="feature-continous-div" class="hidden">
+        <p>
+            <label for="feature-continuous-color-chk">Continuous values?</label>
+            <input id="feature-continuous-color-chk" type="checkbox" value="false"
+                   class="empress-input">
+        </p>
+      </div>
       <p>
         <label for="feature-line-width">Extra Line Width</label>
         <input id="feature-line-width" type="number" value="0" min="0"