left sidebar improvements (#368)

* left sidebar improvements

* lint

client/src/components/geneExpression/cellSetButtons.js

@@ -3,7 +3,6 @@ import React from "react";
 import _ from "lodash";
 import { Button } from "@blueprintjs/core";
 import { connect } from "react-redux";
-import * as globals from "../../globals";
 
 @connect()
 class CellSetButton extends React.Component {

client/src/components/geneExpression/expressionButtons.js

@@ -37,6 +37,9 @@ class Expression extends React.Component {
       type: "clear differential expression",
       diffExp: differential.diffExp
     });
+    dispatch({
+      type: "clear scatterplot"
+    });
   }
 
   render() {
@@ -47,7 +50,13 @@ class Expression extends React.Component {
     const haveBothCellSets =
       !!differential.celllist1 && !!differential.celllist2;
     return (
-      <div style={{ marginRight: 10, marginBottom: 10 }}>
+      <div
+        style={{
+          marginRight: 10,
+          marginBottom: 10,
+          paddingLeft: globals.leftSidebarSectionPadding
+        }}
+      >
         <CellSetButton {...this.props} eitherCellSetOneOrTwo={1} />
         <CellSetButton {...this.props} eitherCellSetOneOrTwo={2} />
         {!differential.diffExp ? (
@@ -55,6 +64,7 @@ class Expression extends React.Component {
             style={{ marginTop: 10 }}
             disabled={!haveBothCellSets}
             intent="primary"
+            fill
             type="button"
             onClick={this.computeDiffExp.bind(this)}
           >
@@ -64,6 +74,7 @@ class Expression extends React.Component {
         {differential.diffExp ? (
           <Button
             type="button"
+            fill
             style={{ marginTop: 10 }}
             intent="warning"
             onClick={this.clearDifferentialExpression.bind(this)}

client/src/components/geneExpression/index.js

@@ -76,14 +76,22 @@ class GeneExpression extends React.Component {
       <div>
         <div
           style={{
-            padding: globals.leftSidebarSectionPadding,
             marginTop: 30
           }}
         >
-          <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" />
+          <p
+            style={Object.assign({}, globals.leftSidebarSectionHeading, {
+              paddingLeft: globals.leftSidebarSectionPadding,
+              margin: 0
+            })}
+          >
+            Custom genes
+          </p>
+          <div
+            style={{ padding: globals.leftSidebarSectionPadding }}
+            className="bp3-control-group"
+          >
+            <div className="bp3-input-group bp3-fill">
               <input
                 onKeyDown={this.keyPress.bind(this)}
                 onChange={e => {
@@ -105,7 +113,7 @@ class GeneExpression extends React.Component {
             </button>
           </div>
           {world && userDefinedGenes.length > 0
-            ? _.map(userDefinedGenes, geneName => {
+            ? _.map(userDefinedGenes, (geneName, index) => {
                 const values = world.varDataCache[geneName];
                 if (!values) {
                   return null;
@@ -114,6 +122,7 @@ class GeneExpression extends React.Component {
                   <HistogramBrush
                     key={geneName}
                     field={geneName}
+                    zebra={index % 2 === 0}
                     ranges={d3.extent(values)}
                     isUserDefined
                   />
@@ -121,21 +130,18 @@ class GeneExpression extends React.Component {
               })
             : null}
         </div>
-        <div
-          style={{
-            padding: globals.leftSidebarSectionPadding
-          }}
-        >
+        <div>
           <p
             style={Object.assign({}, globals.leftSidebarSectionHeading, {
-              marginTop: 40
+              marginTop: 40,
+              paddingLeft: globals.leftSidebarSectionPadding
             })}
           >
             Differentially Expressed Genes
           </p>
           <ExpressionButtons />
           {differential.diffExp
-            ? _.map(differential.diffExp, value => {
+            ? _.map(differential.diffExp, (value, index) => {
                 const annotations = world.varAnnotations[value[0]];
                 const { name } = annotations;
                 const values = world.varDataCache[name];
@@ -146,6 +152,7 @@ class GeneExpression extends React.Component {
                   <HistogramBrush
                     key={name}
                     field={name}
+                    zebra={index % 2 === 0}
                     ranges={d3.extent(values)}
                     isDiffExp
                     avgDiff={value[1]}