tooltips, copy, scatterplot tray (#383)

* tooltips, copy, scatterplot tray

* reset interface

* copy

client/src/components/geneExpression/cellSetButtons.js

@@ -1,7 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import _ from "lodash";
-import { Button } from "@blueprintjs/core";
+import { Button, Tooltip } from "@blueprintjs/core";
 import { connect } from "react-redux";
 
 @connect()
@@ -29,15 +29,22 @@ class CellSetButton extends React.Component {
     const { differential, eitherCellSetOneOrTwo } = this.props;
     const cellListName = `celllist${eitherCellSetOneOrTwo}`;
     return (
-      <span style={{ marginRight: 10 }}>
-        <Button type="button" onClick={this.set.bind(this)}>
+      <Tooltip
+        content="Save current selection for differential expression computation"
+        position="top"
+      >
+        <Button
+          style={{ marginRight: 10 }}
+          type="button"
+          onClick={this.set.bind(this)}
+        >
           {eitherCellSetOneOrTwo}
           {": "}
           {differential[cellListName]
             ? `${differential[cellListName].length} cells`
             : "0 cells"}
         </Button>
-      </span>
+      </Tooltip>
     );
   }
 }

client/src/components/geneExpression/expressionButtons.js

@@ -1,7 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import _ from "lodash";
-import { Button } from "@blueprintjs/core";
+import { Button, AnchorButton, Tooltip } from "@blueprintjs/core";
 import { connect } from "react-redux";
 import * as globals from "../../globals";
 import actions from "../../actions";
@@ -60,27 +60,37 @@ class Expression extends React.Component {
         <CellSetButton {...this.props} eitherCellSetOneOrTwo={1} />
         <CellSetButton {...this.props} eitherCellSetOneOrTwo={2} />
         {!differential.diffExp ? (
-          <Button
-            style={{ marginTop: 10 }}
-            disabled={!haveBothCellSets}
-            intent="primary"
-            fill
-            type="button"
-            onClick={this.computeDiffExp.bind(this)}
+          <Tooltip
+            content="Add two cells selections, see the top 15 differentially expressed genes between them"
+            position="bottom"
           >
-            Compute Differential Expression
-          </Button>
+            <AnchorButton
+              style={{ marginTop: 10 }}
+              disabled={!haveBothCellSets}
+              intent="primary"
+              fill
+              type="button"
+              onClick={this.computeDiffExp.bind(this)}
+            >
+              Compute Differential Expression
+            </AnchorButton>
+          </Tooltip>
         ) : null}
         {differential.diffExp ? (
-          <Button
-            type="button"
-            fill
-            style={{ marginTop: 10 }}
-            intent="warning"
-            onClick={this.clearDifferentialExpression.bind(this)}
+          <Tooltip
+            content="Remove differentially expressed gene list and clear cell selections"
+            position="bottom"
           >
-            Clear Differential Expression
-          </Button>
+            <Button
+              type="button"
+              fill
+              style={{ marginTop: 10 }}
+              intent="warning"
+              onClick={this.clearDifferentialExpression.bind(this)}
+            >
+              Clear Differential Expression
+            </Button>
+          </Tooltip>
         ) : null}
       </div>
     );

client/src/components/geneExpression/index.js

@@ -5,6 +5,7 @@ import React from "react";
 import _ from "lodash";
 import * as d3 from "d3";
 import { connect } from "react-redux";
+import { Button, Tooltip } from "@blueprintjs/core";
 import HistogramBrush from "../brushableHistogram";
 import * as globals from "../../globals";
 import actions from "../../actions";
@@ -85,7 +86,7 @@ class GeneExpression extends React.Component {
               margin: 0
             })}
           >
-            Custom genes
+            Selected Genes
           </p>
           <div
             style={{ padding: globals.leftSidebarSectionPadding }}
@@ -100,17 +101,18 @@ class GeneExpression extends React.Component {
                 value={gene}
                 type="text"
                 className="bp3-input"
-                placeholder="Add a custom gene"
+                placeholder="Enter a gene name"
                 style={{ paddingRight: 94 }}
               />
             </div>
-            <button
-              type="button"
-              className="bp3-button bp3-intent-primary"
-              onClick={this.handleClick.bind(this)}
+            <Tooltip
+              content="Add a gene to see its expression levels"
+              position="bottom"
             >
-              Add
-            </button>
+              <Button intent="primary" onClick={this.handleClick.bind(this)}>
+                Add
+              </Button>
+            </Tooltip>
           </div>
           {world && userDefinedGenes.length > 0
             ? _.map(userDefinedGenes, (geneName, index) => {