Change color scales to rainbow (#449)

* rainbow

* eslint

* remove comments

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
         );
       }