Force gradient SVG to cover the full color map and gradient ranges (#789

)

* BUG/TST: Force gradient SVG to use full [0%, 100%]

Closes #788. Also adds some test / documentation.

* STY: fix egregiously long line for gjslint

* TST: fix grammar in test title

* DOC: Clarify a test comment slightly; travis kick

now that build problems seem to have been addressed

* DOC: Travis kick; fix grammar/Q2 link in README

* REL: add note to changelog re: #788

* DOC: while we're at it, update the q2 docs link

* REL: mention README changes in the ChangeLog

ChangeLog.md

@@ -6,10 +6,15 @@ Emperor ChangeLog
 
 ### Bug Fixes
 
+* Fix a bug causing slight inaccuracies in how color gradients were drawn
+  ([#788](https://github.com/biocore/emperor/issues/788)).
+
 ### New Features
 
 ### Miscellaneous
 
+* Fix wording in the README slightly; update a link to QIIME 2's documentation.
+
 
 # Emperor 1.0.2 (20 Nov 2020)
 -----------------------------

README.md

@@ -3,15 +3,15 @@ Emperor
 
 [![Join the chat at https://gitter.im/biocore/emperor](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/biocore/emperor?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![](https://github.com/biocore/emperor/workflows/Emperor%20CI/badge.svg)](https://github.com/biocore/emperor/actions) [![Coverage Status](https://coveralls.io/repos/biocore/emperor/badge.svg)](https://coveralls.io/r/biocore/emperor)
 
-Emperor is a next-generation tool for the analysis and visualization of large microbial ecology datasets; amongst its many features Emperor provides a modern user interface that will rapidly adjust to your data analysis workflow.
+Emperor is a next-generation tool for the analysis and visualization of large microbial ecology datasets. Amongst its many features, Emperor provides a modern user interface that can be rapidly adjusted to your data analysis workflow.
 
 To start using Emperor, please refer to the [installation notes](INSTALL.md).
 
 Before contributing code to Emperor, please familiarize yourself with the [contributing guidelines](CONTRIBUTING.md).
 
 ## Usage
 
-You can start using Emperor through [QIIME2](https://qiime2.org)'s [interfaces](https://docs.qiime2.org/2018.8/interfaces/) (the command line or the graphical user interface), or alternatively using the Python interface (compatible with the Jupyter notebook, see [this example](http://nbviewer.jupyter.org/github/biocore/emperor/blob/new-api/examples/keyboard.ipynb)). For more details, refer to our [online documentation](http://emperor.microbio.me).
+You can start using Emperor through [QIIME 2](https://qiime2.org)'s [interfaces](https://docs.qiime2.org/2021.2/interfaces/) (the command line or the graphical user interface), or alternatively using the Python interface (compatible with the Jupyter notebook, see [this example](http://nbviewer.jupyter.org/github/biocore/emperor/blob/new-api/examples/keyboard.ipynb)). For more details, refer to our [online documentation](http://emperor.microbio.me).
 
 ## Publications
 

emperor/support_files/js/color-view-controller.js

@@ -419,17 +419,17 @@ define([
     _.each(split.numeric, function(element) {
       colors[element] = interpolator(+element).hex();
     });
-    //Gray out non-numeric values
+    // Gray out (or assign a user-specified color for) non-numeric values
     _.each(split.nonNumeric, function(element) {
       colors[element] = nanColor;
     });
-    //build the SVG showing the gradient of colors for values
+    // Build the SVG showing the gradient of colors for numeric values
     var mid = (min + max) / 2;
-    var step = (max - min) / 100;
-    var stopColors = [];
-    for (var s = min; s <= max; s += step) {
-      stopColors.push(interpolator(s).hex());
-    }
+    // We retrieve 101 colors from along the gradient. This is because we want
+    // to specify a color for each integer percentage in the range [0%, 100%],
+    // which contains 101 integers (since we're starting at 0:
+    // 100 - 0 + 1 = 101). See https://github.com/biocore/emperor/issues/788.
+    var stopColors = interpolator.colors(101);
     var gradientSVG = '<defs>';
     gradientSVG += '<linearGradient id="Gradient" x1="0" x2="0" y1="1" y2="0">';
     for (var pos = 0; pos < stopColors.length; pos++) {

tests/javascript_tests/test_color_view_controller.js

@@ -314,7 +314,8 @@ requirejs([
         '<stop offset="96%" stop-color="#e7e527"/>' +
         '<stop offset="97%" stop-color="#ede626"/>' +
         '<stop offset="98%" stop-color="#f2e626"/>' +
-        '<stop offset="99%" stop-color="#f8e725"/></linearGradient></defs>' +
+        '<stop offset="99%" stop-color="#f8e725"/>' +
+        '<stop offset="100%" stop-color="#fee825"/></linearGradient></defs>' +
         '<rect id="gradientRect" width="20" height="95%" ' +
         'fill="url(#Gradient)"/><text x="25" y="12px" ' +
         'font-family="sans-serif" font-size="12px" text-anchor="start">4' +
@@ -324,6 +325,34 @@ requirejs([
       ]);
     });
 
+    test('Test getScaledColors: even number of vals & an outlier', function() {
+      var vals = ['5', '6', '7', '10000'];
+      var color = ColorViewController.getScaledColors(vals, 'PiYG');
+      // The outlier's effect is so strong that 5, 6, and 7 all get assigned
+      // the same hex color (because hex color doesn't have _that_ much
+      // resolution). This is as expected.
+      deepEqual(
+          color[0],
+          {5: '#8e0152', 6: '#8e0152', 7: '#8e0152', 10000: '#276419'}
+      );
+      // Check that the gradient includes 0%, 50%, and 100% with the correct
+      // colors. Furthermore, check that the 100% stop color is the last one
+      // in the gradient.
+      // Note that the color at 50% should exactly correspond to the middle of
+      // this color map (i.e. if you go to Chroma.js' docs and type in
+      // chroma.scale("PiYG")(0.5) you should get #f7f7f7). The reason for this
+      // is that the range [0, 100] has 101 elements (i.e. an odd number of
+      // elements), of which 50 is the middle element.
+      // (This is also the case for the Viridis test above.)
+      ok(/<stop offset="0%" stop-color="#8e0152"\/>/.test(color[1]));
+      ok(/<stop offset="50%" stop-color="#f7f7f7"\/>/.test(color[1]));
+      ok(
+          /<stop offset="100%" stop-color="#276419"\/><\/linearGradient>/.test(
+              color[1]
+          )
+      );
+    });
+
     test('Test getInterpolatedColors', function() {
       var five = ['0', '1', '2', '3', '4'];
       var color = ColorViewController.getInterpolatedColors(five, 'Viridis');