Gradient Coloring Option for Feature Metadata

empress/support_files/js/empress.js

@@ -2257,7 +2257,8 @@ define([
         cat,
         color,
         method,
-        reverse = false
+        reverse = false,
+        continuous = false
     ) {
         var fmInfo = this.getUniqueFeatureMetadataInfo(cat, method);
         var sortedUniqueValues = fmInfo.sortedUniqueValues;
@@ -2275,14 +2276,19 @@ define([
         var colorer = new Colorer(
             color,
             sortedUniqueValues,
-            undefined,
-            undefined,
+            continuous,
+            continuous ? -1 : undefined,
             reverse
         );
         // 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") {
@@ -2294,8 +2300,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;
     };

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");
@@ -333,11 +337,15 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
         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
         );
     };
 
@@ -607,10 +615,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"