Gradient Coloring Option for Feature Metadata

empress/support_files/css/empress.css

@@ -604,7 +604,7 @@ p.side-header button:hover,
 #legend-main {
     margin: 20px;
     min-width: 150px;
-    max-width: 33vw;
+    max-width: 30vw;
     min-height: 30px;
     max-height: 85vh;
     padding-bottom: 0.1px;

empress/support_files/js/empress.js

@@ -158,12 +158,26 @@ define([
             this._treeData[i].splice(this._tdToInd.visible, 0, true);
         }
 
+        /**
+         * @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}
          * 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."
+        );
 
         /**
          * @type {BiomTable}
@@ -2443,14 +2457,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
+     *                            try to 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;
@@ -2464,18 +2483,57 @@ 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: the feature metadata field "' +
+                cat +
+                '" has less than 2 unique numeric values, so it cannot be ' +
+                "used for continuous coloring. " +
+                "Using discrete coloring 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") {
@@ -2487,8 +2545,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;
     };
@@ -2502,7 +2563,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
@@ -2969,7 +3030,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/legend.js

@@ -179,14 +179,15 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
             "svg"
         );
         containerSVG.setAttribute("width", "100%");
-        containerSVG.setAttribute("height", "100%");
+        containerSVG.setAttribute("height", "80%");
         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);
         if (this._missingNonNumericWarningShown) {
+            var missingText = this.getMissingNonNumericWarning();
             var warningP = document.createElement("p");
-            warningP.innerText = Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING;
+            warningP.innerText = missingText.full;
             warningP.classList.add("side-panel-notes");
             // All legends have white-space: nowrap; set to prevent color
             // labels from breaking onto the next line (which would look
@@ -542,6 +543,7 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
         // But first, let's add a warning about missing / non-numeric values if
         // needed.
         if (this._missingNonNumericWarningShown) {
+            var missingText = this.getMissingNonNumericWarning();
             // We use a hanging baseline to add some extra vertical space
             // between the gradient minimum value and the warning text. This
             // seems to look nice.
@@ -551,9 +553,9 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
                 '" y="' +
                 (gradientTopY + gradientHeight + Legend.HALF_LINE_HEIGHT) +
                 '" dominant-baseline="hanging">' +
-                Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING_SHORT +
+                missingText.short +
                 "</text>\n";
-            texts.push(Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING_SHORT);
+            texts.push(missingText.short);
         }
         _.each(texts, function (text) {
             maxLineWidth = Math.max(
@@ -742,6 +744,28 @@ define(["jquery", "underscore", "util"], function ($, _, util) {
         };
     };
 
+    Legend.prototype.setMissingNonNumericWarning = function (
+        full,
+        short = null
+    ) {
+        this.continuousMissingNonNumericWarning = full;
+        this.continuousMissingNonNumericWarningShort = short;
+    };
+
+    Legend.prototype.getMissingNonNumericWarning = function () {
+        var missingText = {
+            full: Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING,
+            short: Legend.CONTINUOUS_MISSING_NON_NUMERIC_WARNING_SHORT,
+        };
+        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 =

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");
@@ -330,15 +334,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;
+            }
         );
     };
 
@@ -608,10 +620,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"