Begin integrating blueprint (#359)

* toast test

* modify webpack build to allow for global CSS; use CSS modules to scope component styling

* remove heatmap

* add label to index resets

* swapping out buttons for blueprint

* adding constants to globals

* swapping out blueprint buttons

* title position, sidebar improvements

* sidebar styles

* adding toasts for validation errors

* zebra section trial

* integrating blueprint, switching buttons over, breaking out scatter

* clean up console

client/src/components/geneExpression/index.js

@@ -5,10 +5,11 @@ import React from "react";
 import _ from "lodash";
 import * as d3 from "d3";
 import { connect } from "react-redux";
-import { FaPlusCircle } from "react-icons/fa";
 import HistogramBrush from "../brushableHistogram";
 import * as globals from "../../globals";
 import actions from "../../actions";
+import { ErrorToastTopCenter } from "../framework/toasters";
+import ExpressionButtons from "./expressionButtons";
 
 @connect(state => {
   const metadata = _.get(state.controls.world, "obsAnnotations", null);
@@ -45,13 +46,18 @@ class GeneExpression extends React.Component {
     const { gene } = this.state;
 
     if (userDefinedGenes.indexOf(gene) !== -1) {
-      console.log("That gene already exists");
+      ErrorToastTopCenter.show({
+        message: "That gene already exists"
+      });
     } else if (userDefinedGenes.length > 15) {
-      console.log(
-        "That's too many genes, you can have at most 15 user defined genes"
-      );
+      ErrorToastTopCenter.show({
+        message:
+          "That's too many genes, you can have at most 15 user defined genes"
+      });
     } else if (!_.find(world.varAnnotations, { name: gene })) {
-      console.log("That doesn't appear to be a valid gene name.");
+      ErrorToastTopCenter.show({
+        message: "That doesn't appear to be a valid gene name."
+      });
     } else {
       dispatch(actions.requestUserDefinedGene(gene));
       dispatch({
@@ -68,79 +74,88 @@ class GeneExpression extends React.Component {
 
     return (
       <div>
-        <input
-          onKeyDown={this.keyPress.bind(this)}
-          onChange={e => {
-            this.setState({ gene: e.target.value });
-          }}
-          type="text"
-          value={gene}
-        />
-        <button
-          type="button"
+        <div
           style={{
-            border: "none",
-            background: "none",
-            cursor: "pointer",
-            outline: "none",
-            marginTop: 20,
-            padding: 0
+            padding: globals.leftSidebarSectionPadding,
+            marginTop: 30
           }}
-          onClick={this.handleClick.bind(this)}
         >
-          <FaPlusCircle
-            style={{
-              display: "inline-block",
-              marginLeft: 7,
-              position: "relative",
-              top: 5,
-              color: globals.brightBlue,
-              fontSize: 22
-            }}
-          />{" "}
-          add gene{" "}
-        </button>
-        {world && userDefinedGenes.length > 0 ? (
-          <p>User defined genes</p>
-        ) : null}
-        {world && userDefinedGenes.length > 0
-          ? _.map(userDefinedGenes, geneName => {
-              const values = world.varDataCache[geneName];
-              if (!values) {
-                return null;
-              }
-              return (
-                <HistogramBrush
-                  key={geneName}
-                  field={geneName}
-                  ranges={d3.extent(values)}
-                  isUserDefined
-                />
-              );
-            })
-          : null}
-        {differential.diffExp ? <p> Differentially Expressed Genes </p> : null}
-        {differential.diffExp
-          ? _.map(differential.diffExp, value => {
-              const annotations = world.varAnnotations[value[0]];
-              const { name } = annotations;
-              const values = world.varDataCache[name];
-              if (!values) {
-                return null;
-              }
-              return (
-                <HistogramBrush
-                  key={name}
-                  field={name}
-                  ranges={d3.extent(values)}
-                  isDiffExp
-                  diffExp_avgDiff={value[1]}
-                  diffExp_set1AvgExp={value[4]}
-                  diffExp_set2AvgExp={value[5]}
-                />
-              );
-            })
-          : null}
+          <p style={globals.leftSidebarSectionHeading}>Custom genes</p>
+          <div style={{ marginTop: 11 }} className="bp3-control-group">
+            <div className="bp3-input-group">
+              <span className="bp3-icon bp3-icon-symbol-cross" />
+              <input
+                onKeyDown={this.keyPress.bind(this)}
+                onChange={e => {
+                  this.setState({ gene: e.target.value });
+                }}
+                value={gene}
+                type="text"
+                className="bp3-input"
+                placeholder="Add a custom gene"
+                style={{ paddingRight: 94 }}
+              />
+            </div>
+            <button
+              type="button"
+              className="bp3-button bp3-intent-primary"
+              onClick={this.handleClick.bind(this)}
+            >
+              Add
+            </button>
+          </div>
+          {world && userDefinedGenes.length > 0
+            ? _.map(userDefinedGenes, geneName => {
+                const values = world.varDataCache[geneName];
+                if (!values) {
+                  return null;
+                }
+                return (
+                  <HistogramBrush
+                    key={geneName}
+                    field={geneName}
+                    ranges={d3.extent(values)}
+                    isUserDefined
+                  />
+                );
+              })
+            : null}
+        </div>
+        <div
+          style={{
+            padding: globals.leftSidebarSectionPadding
+          }}
+        >
+          <p
+            style={Object.assign({}, globals.leftSidebarSectionHeading, {
+              marginTop: 40
+            })}
+          >
+            Differentially Expressed Genes
+          </p>
+          <ExpressionButtons />
+          {differential.diffExp
+            ? _.map(differential.diffExp, value => {
+                const annotations = world.varAnnotations[value[0]];
+                const { name } = annotations;
+                const values = world.varDataCache[name];
+                if (!values) {
+                  return null;
+                }
+                return (
+                  <HistogramBrush
+                    key={name}
+                    field={name}
+                    ranges={d3.extent(values)}
+                    isDiffExp
+                    avgDiff={value[1]}
+                    set1AvgExp={value[4]}
+                    set2AvgExp={value[5]}
+                  />
+                );
+              })
+            : null}
+        </div>
       </div>
     );
   }