Change color scales to rainbow (#449)

* rainbow

* eslint

* remove comments

client/configuration/eslint/eslint.js

@@ -34,7 +34,8 @@ module.exports = {
     "object-curly-newline": ["error", { consistent: true }],
     "react/prop-types": [0],
     "space-before-function-paren": "off",
-    "function-paren-newline": "off"
+    "function-paren-newline": "off",
+    "prefer-destructuring": ["error", { object: true, array: false }]
   },
   overrides: [
     {

client/src/components/categorical/value.js

@@ -1,11 +1,13 @@
 // jshint esversion: 6
 import { connect } from "react-redux";
 import React from "react";
+import _ from "lodash";
 
 @connect(state => ({
   categoricalAsBooleansMap: state.controls.categoricalAsBooleansMap,
   colorScale: state.controls.colorScale,
-  colorAccessor: state.controls.colorAccessor
+  colorAccessor: state.controls.colorAccessor,
+  schema: _.get(state.controls.world, "schema", null)
 }))
 class CategoryValue extends React.Component {
   toggleOff() {
@@ -34,7 +36,8 @@ class CategoryValue extends React.Component {
       value,
       colorAccessor,
       colorScale,
-      i
+      i,
+      schema
     } = this.props;
 
     if (!categoricalAsBooleansMap) return null;
@@ -42,6 +45,13 @@ class CategoryValue extends React.Component {
     const selected = categoricalAsBooleansMap[metadataField][value];
     /* this is the color scale, so add swatches below */
     const c = metadataField === colorAccessor;
+    let categories = null;
+
+    if (c && schema) {
+      categories = _.filter(schema.annotations.obs, {
+        name: colorAccessor
+      })[0].categories;
+    }
 
     return (
       <div
@@ -78,7 +88,10 @@ class CategoryValue extends React.Component {
               marginLeft: 5,
               width: 11,
               height: 11,
-              backgroundColor: c ? colorScale(value) : "inherit"
+              backgroundColor:
+                c && categories
+                  ? colorScale(categories.indexOf(value))
+                  : "inherit"
             }}
           />
         </span>

client/src/components/continuousLegend/index.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import * as d3 from "d3";
-import { interpolateViridis } from "d3-scale-chromatic";
+import { interpolateViridis, interpolateWarm } from "d3-scale-chromatic";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
@@ -121,12 +121,12 @@ class ContinuousLegend extends React.Component {
         .remove();
     }
 
-    if (colorAccessor && colorScale) {
+    if (colorAccessor && colorScale && colorScale.range) {
       /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
       if (colorScale.range()[0][0] !== "#") {
         continuous(
           "#continuous_legend",
-          d3.scaleSequential(interpolateViridis).domain(colorScale.domain()),
+          d3.scaleSequential(interpolateWarm).domain(colorScale.domain()),
           colorAccessor
         );
       }

client/src/middleware/updateCellColors.js

@@ -1,7 +1,13 @@
 // jshint esversion: 6
 import _ from "lodash";
 import * as d3 from "d3";
-import { interpolateViridis } from "d3-scale-chromatic";
+import {
+  interpolateViridis,
+  interpolateSpectral,
+  interpolateRainbow,
+  interpolateBlues,
+  interpolateWarm
+} from "d3-scale-chromatic";
 import * as globals from "../globals";
 import parseRGB from "../util/parseRGB";
 
@@ -59,11 +65,17 @@ const updateCellColorsMiddleware = store => next => action => {
   */
 
   if (action.type === "color by categorical metadata") {
-    colorScale = d3.scaleOrdinal().range(globals.ordinalColors);
+    const categories = _.filter(s.controls.world.schema.annotations.obs, {
+      name: action.colorAccessor
+    })[0].categories;
+
+    colorScale = d3
+      .scaleSequential(interpolateRainbow)
+      .domain([0, categories.length]);
 
     for (let i = 0; i < obsAnnotations.length; i += 1) {
       const obs = obsAnnotations[i];
-      const c = colorScale(obs[action.colorAccessor]);
+      const c = colorScale(categories.indexOf(obs[action.colorAccessor]));
       colorsByName[i] = c;
       colorsByRGB[i] = parseRGB(c);
     }
@@ -77,7 +89,7 @@ const updateCellColorsMiddleware = store => next => action => {
 
     for (let i = 0; i < obsAnnotations.length; i += 1) {
       const obs = obsAnnotations[i];
-      const c = interpolateViridis(colorScale(obs[action.colorAccessor]));
+      const c = interpolateWarm(colorScale(obs[action.colorAccessor]));
       colorsByName[i] = c;
       colorsByRGB[i] = parseRGB(c);
     }
@@ -95,7 +107,7 @@ const updateCellColorsMiddleware = store => next => action => {
       ]); /* invert viridis... probably pass this scale through to others */
 
     for (let i = 0, len = expression.length; i < len; i += 1) {
-      const c = interpolateViridis(colorScale(expression[i]));
+      const c = interpolateWarm(colorScale(expression[i]));
       colorsByName[i] = c;
       colorsByRGB[i] = parseRGB(c);
     }