color emoji icon and colocate with names

src/components/categorical/categorical.js

@@ -36,20 +36,37 @@ class Category extends React.Component {
         }}>
           <p style={{
               // flexShrink: 0,
-              width: 200,
               fontWeight: 500,
               // textAlign: "right",
               // fontFamily: globals.accentFont,
               // fontStyle: "italic",
-              marginRight: 20,
+              marginRight: 10,
             }}>
-            {this.props.metadataField}:
+            {this.props.metadataField}
+            <span
+              onClick={this.handleColorChange.bind(this)}
+              style={{
+                fontSize: 24,
+                marginLeft: 10,
+                position: "relative",
+                top: 4,
+                cursor: "pointer",
+              }}>
+              🎨
+            </span>
           </p>
-          <button
-          onClick={this.handleColorChange.bind(this)}
-          style={{
-            fontSize: 10
-          }}> as color scale </button>
+          <span
+            onClick={this.toggleAll.bind(this)}
+            style={{
+              fontFamily: globals.accentFont,
+              fontSize: 10,
+              fontWeight: 100,
+              fontStyle: "italic",
+              cursor: "pointer",
+            }}>
+          {"all"}
+          </span>
+
         </div>
         <div>
           {
@@ -91,12 +108,10 @@ class Categories extends React.Component {
 
     return (
       <div style={{
-        position: "fixed",
-        left: 40,
-        height: 200,
-
+        width: 320,
+        marginRight: 40,
+        flexShrink: 0
       }}>
-
         {
           _.map(this.props.ranges, (value, key) => {
             const isColorField = key.includes("color") || key.includes("Color");

src/components/categorical/value.js

@@ -75,7 +75,7 @@ class CategoryValue extends React.Component {
             fontStyle: "italic",
             cursor: "pointer",
           }}>
-        {" only"}
+        {"only"}
         </span>
       </div>
     )

src/components/continuous/continuous.js

@@ -8,7 +8,6 @@ import SectionHeader from "../framework/sectionHeader";
 import setupParallelCoordinates from "./setupParallelCoordinates";
 import drawAxes from "./drawAxes";
 import drawLinesCanvas from "./drawLinesCanvas";
-import ColorControl from "../controls/color";
 
 import {
   margin,
@@ -80,6 +79,7 @@ class Continuous extends React.Component {
         height,
         width,
         this.handleBrushAction.bind(this),
+        this.handleColorAction.bind(this),
       );
 
       this.setState({
@@ -128,6 +128,13 @@ class Continuous extends React.Component {
       data: selection
     })
   }
+  handleColorAction (key) {
+    this.props.dispatch({
+      type: "color by continuous metadata",
+      colorAccessor: key,
+      rangeMaxForColorAccessor: this.props.initializeRanges[key].range.max
+    });
+  }
 
   render() {
 
@@ -140,7 +147,6 @@ class Continuous extends React.Component {
             width:  width + margin.left + margin.right + "px",
             height: height + margin.top + margin.bottom + "px"
           }}></div>
-          <ColorControl/>
       </div>
     )
   }

src/components/continuous/drawAxes.js

@@ -14,6 +14,7 @@ const drawAxes = (
   height,
   width,
   handleBrushAction,
+  handleColorAction,
 ) => {
 
   /*****************************************
@@ -52,9 +53,10 @@ const drawAxes = (
         d3.select(this).call(renderAxis);
       })
     .append("text")
+      .on("click", (d) => { handleColorAction(d.key) })
       .attr("class", styles.title)
       .attr("text-anchor", "start")
-      .text(function(d) { return "description" in d ? d.description : d.key; });
+      .text(function(d) { return "description" in d ? d.description + "  🎨" : d.key + "  🎨"; });
 
   // Add and store a brush for each axis.
   axes.append("g")

src/components/continuous/parallelCoordinates.css

@@ -26,8 +26,12 @@ body {
   font-size: 10px;
   transform: rotate(-21deg) translate(-5px,-6px);
   fill: #222;
+  cursor: pointer;
 }
 
+/* -webkit-filter: grayscale(100%);
+ filter: grayscale(100%); */
+
 .axis line,
 .axis path {
   fill: none;

src/components/controls/color.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import _ from "lodash";
-import styles from "./controls.css";
-// import SectionHeader from "../framework/sectionHeader";
-import { connect } from "react-redux";
-
-const Option = ({name, selected, handleClick}) => {
-  return (
-    <button
-      onClick={handleClick(name)}
-      style={{
-        textDecoration: selected ? "underline" : "none",
-        border: "none",
-        background: "none",
-        cursor: "pointer",
-        outline: "none",
-      }}>
-      {name}
-    </button>
-  )
-}
-
-@connect((state) => {
-  const ranges = state.cells.cells && state.cells.cells.data.ranges ? state.cells.cells.data.ranges : null;
-  const initializeRanges = state.initialize.data && state.initialize.data.data.ranges ? state.initialize.data.data.ranges : null;
-  return {
-    ranges,
-    initializeRanges,
-    colorAccessor: state.controls.colorAccessor,
-  }
-})
-class ColorOptions extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-
-    };
-  }
-
-  handleClick (name) {
-    return () => {
-      this.props.dispatch({
-        type: "color by continuous metadata",
-        colorAccessor: name,
-        rangeMaxForColorAccessor: this.props.initializeRanges[name].range.max
-      });
-    }
-  }
-
-  render() {
-    if (!this.props.ranges || !this.props.initializeRanges) { return null }
-    return (
-      <div>
-        Color:
-        {
-          _.map(this.props.ranges, (value, key) => {
-            if ( /* value.options  */
-              value.range &&
-              key !== "CellName"
-            ) {
-            return <Option
-              key={key}
-              handleClick={this.handleClick.bind(this)}
-              selected={this.props.colorAccessor === key}
-              name={key}
-              />
-            }
-          })
-        }
-      </div>
-    )
-  }
-};
-
-export default ColorOptions;
-
-// <SectionHeader text="Color"/>