componetize buttons on diffexp to generalize

src/components/expression/cellSetButtons.js

@@ -0,0 +1,63 @@
+import React from "react";
+import _ from "lodash";
+import { connect } from "react-redux";
+import * as globals from "../../globals";
+import styles from "../framework/buttons.css";
+import actions from "../../actions";
+
+@connect()
+class CellSetButton extends React.Component {
+  set() {
+    const set = [];
+
+    _.each(this.props.currentCellSelection, (cell) => {
+      if (cell["__selected__"]) {
+        set.push(cell.CellName)
+      }
+    })
+
+    this.props.dispatch({
+      type: "store current cell selection as differential set " + this.props.eitherCellSetOneOrTwo,
+      data: set
+    })
+  }
+  render() {
+    return (
+      <span style={{marginRight: 20}}>
+        <button
+          style={{
+            color: "#FFF",
+            padding: "0px 10px",
+            height: 30,
+            backgroundColor: globals.brightBlue,
+            border: "none",
+            cursor: "pointer",
+          }}
+          onClick={this.set.bind(this)}>
+          <span style={{fontSize: 24, fontWeight: 700}}> {this.props.eitherCellSetOneOrTwo} </span>
+          <span style={{fontFamily: "Georgia", fontStyle: "italic", marginLeft: 8, position: "relative", top: -3}}>
+          {
+            this.props.differential["celllist" + this.props.eitherCellSetOneOrTwo] ?
+            this.props.differential["celllist" + this.props.eitherCellSetOneOrTwo].length + " cells" :
+            0 + " cells"
+          }
+          </span>
+        </button>
+        <button style={{
+          marginLeft: 3,
+          color: "#FFF",
+          padding: "0px 10px",
+          height: 30,
+          backgroundColor: globals.brightBlue,
+          border: "none",
+          cursor: "pointer",
+        }}>
+          <span style={{fontSize: 24, fontWeight: 700}}> X </span>
+
+        </button>
+      </span>
+    )
+  }
+}
+
+export default CellSetButton;

src/components/expression/diffExpHeatmap.js

@@ -46,7 +46,7 @@ class HeatmapSquare extends React.Component {
 ***********************************
 **********************************/
 @connect((state) => {
-  
+
   return {
     scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
     scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
@@ -166,7 +166,7 @@ class Heatmap extends React.Component {
     }
   }
   render() {
-    if (!this.props.differential.diffExp) return null
+    if (!this.props.differential.diffExp) return <p>Select cells & compute differential to see heatmap</p>
 
     const topGenesForCellSet1 = this.props.differential.diffExp.data.celllist1;
     const topGenesForCellSet2 = this.props.differential.diffExp.data.celllist2;

src/components/expression/expression.js

@@ -2,11 +2,8 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import * as globals from "../../globals";
-import styles from "./expression.css";
 import actions from "../../actions";
-import Heatmap from "./diffExpHeatmap";
-// <p> Top genes expressed by cellset 2 </p>
-// <p> Gene {"............"} Exp in set 1 {"............"} Exp in set 2 </p>
+import CellSetButton from "./cellSetButtons";
 
 @connect((state) => {
   return {
@@ -29,34 +26,6 @@ class Expression extends React.Component {
       });
     }
   }
-  set1() {
-    const set = [];
-
-    _.each(this.props.currentCellSelection, (cell) => {
-      if (cell["__selected__"]) {
-        set.push(cell.CellName)
-      }
-    })
-
-    this.props.dispatch({
-      type: "store current cell selection as differential set 1",
-      data: set
-    })
-  }
-  set2() {
-    const set = [];
-
-    _.each(this.props.currentCellSelection, (cell) => {
-      if (cell["__selected__"]) {
-        set.push(cell.CellName)
-      }
-    })
-
-    this.props.dispatch({
-      type: "store current cell selection as differential set 2",
-      data: set
-    })
-  }
   computeDiffExp() {
     this.props.dispatch(
       actions.requestDifferentialExpression(
@@ -73,70 +42,30 @@ class Expression extends React.Component {
     }
     return (
       <div>
-        <div style={{
-          marginBottom: 20,
-          width: 500,
-        }}>
-          <button
-            style={{
-              width: 200,
-              fontSize: 14,
-              margin: 5,
-              fontWeight: 400,
-              color: "#5A5F63",
-              padding: "10px 20px",
-              backgroundColor: "#C5D1D8",
-              border: "none",
-              borderRadius: 3,
-              cursor: "pointer",
-
-            }}
-            onClick={this.set1.bind(this)}>
-            {
-              this.props.differential.celllist1 ?
-              this.props.differential.celllist1.length + " cells selected" :
-              "Store current cell selection as 'set 1'"
-            }
-          </button>
-          <button
-            style={{
-              width: 200,
-              fontSize: 14,
-              margin: 5,
-              fontWeight: 400,
-              color: "#5A5F63",
-              padding: "10px 20px",
-              backgroundColor: "#C5D1D8",
-              border: "none",
-              borderRadius: 3,
-              cursor: "pointer",
-            }}
-            onClick={this.set2.bind(this)}>
-            {
-              this.props.differential.celllist2 ?
-              this.props.differential.celllist2.length + " cells selected" :
-              "Store current cell selection as 'set 2'"
-            }
-          </button>
-          </div>
+        <div style={{margin: 10}}>
+        <CellSetButton
+          {...this.props}
+          eitherCellSetOneOrTwo={1}/>
+        <CellSetButton
+          {...this.props}
+          eitherCellSetOneOrTwo={2}/>
+        </div>
         <div>
           <button
             style={{
-              fontSize: 14,
-              margin: 5,
-              fontWeight: 400,
-              color: "#41633C",
-              padding: "10px 20px",
-              backgroundColor: "#B9D1B5",
+              fontSize: 18,
+              margin: 10,
+              fontWeight: 700,
+              color: "#FFF",
+              padding: "12px 20px",
+              backgroundColor: "#448C4D",
               border: "none",
-              borderRadius: 3,
               cursor: "pointer",
             }}
             onClick={this.computeDiffExp.bind(this)}>
             Compute differential expression
           </button>
         </div>
-        <Heatmap/>
       </div>
     )
   }