swatches

src/components/categorical/categorical.js

@@ -8,7 +8,11 @@ import SectionHeader from "../framework/sectionHeader"
 import Value from "./value";
 import { alphabeticallySortedValues } from "./util";
 
-@connect()
+@connect((state) => {
+  return {
+    colorAccessor: state.controls.colorAccessor 
+  }
+})
 class Category extends React.Component {
   constructor(props) {
     super(props);
@@ -39,6 +43,7 @@ class Category extends React.Component {
     this.setState({isChecked: false})
   }
   render() {
+
     return (
       <div style={{
           // display: "flex",

src/components/categorical/value.js

@@ -5,7 +5,9 @@ import actions from "../../actions";
 
 @connect((state) => {
   return {
-    categoricalAsBooleansMap: state.controls.categoricalAsBooleansMap
+    categoricalAsBooleansMap: state.controls.categoricalAsBooleansMap,
+    colorScale: state.controls.colorScale,
+    colorAccessor: state.controls.colorAccessor,
   }
 })
 class CategoryValue extends React.Component {
@@ -30,6 +32,7 @@ class CategoryValue extends React.Component {
     if (!this.props.categoricalAsBooleansMap) return null
 
     const selected = this.props.categoricalAsBooleansMap[this.props.metadataField][this.props.value]
+    const c = this.props.metadataField === this.props.colorAccessor /* this is the color scale, so add swatches below */
 
     return (
       <div
@@ -53,6 +56,9 @@ class CategoryValue extends React.Component {
             {this.props.value}
         </p>
         <p style={{
+            padding: "1px 10px",
+            backgroundColor: c ? this.props.colorScale(this.props.value) : "white",
+            color: c ? "white" : "black",
             margin: 0,
             lineHeight: "1em"
           }}>

src/reducers/controls.js

@@ -8,6 +8,7 @@ const Controls = (state = {
   categoricalAsBooleansMap: null,
   colorAccessor: null,
   colorScale: null,
+  opacityForDeselectedCells: .5,
   graphBrushSelection: null,
   continuousSelection: null,
   axesHaveBeenDrawn: false,
@@ -105,17 +106,20 @@ const Controls = (state = {
   case "color by continuous metadata":
     return Object.assign({}, state, {
       colorAccessor: action.colorAccessor,
-      currentCellSelection: action.currentSelectionWithUpdatedColors /* this comes from middleware */
+      currentCellSelection: action.currentSelectionWithUpdatedColors, /* this comes from middleware */
+      colorScale: action.colorScale,
     });
   case "color by expression":
     return Object.assign({}, state, {
       colorAccessor: action.gene,
-      currentCellSelection: action.currentSelectionWithUpdatedColors /* this comes from middleware */
+      currentCellSelection: action.currentSelectionWithUpdatedColors, /* this comes from middleware */
+      colorScale: action.colorScale,
     })
   case "color by categorical metadata":
     return Object.assign({}, state, {
       colorAccessor: action.colorAccessor, /* pass the scale through additionally, and it's a legend! */
-      currentCellSelection: action.currentSelectionWithUpdatedColors /* this comes from middleware */
+      currentCellSelection: action.currentSelectionWithUpdatedColors, /* this comes from middleware */
+      colorScale: action.colorScale,
     })
   case "store current cell selection as differential set 1":
     return Object.assign({}, state, {