standardize buttons, move diffexp to lower right

client/src/components/expression/cellSetButtons.js

@@ -33,17 +33,18 @@ class CellSetButton extends React.Component {
           }}
           onClick={this.set.bind(this)}
         >
-          <span style={{ fontSize: 24, fontWeight: 700 }}>
+          <span style={{ fontSize: 14, fontWeight: 700 }}>
             {" "}
-            {this.props.eitherCellSetOneOrTwo}{" "}
+            {this.props.eitherCellSetOneOrTwo}
+            {": "}
           </span>
           <span
             style={{
               fontFamily: "Georgia",
-              fontStyle: "italic",
+              fontSize: 14,
               marginLeft: 8,
               position: "relative",
-              top: -3
+              top: 0
             }}
           >
             {this.props.differential[

client/src/components/expression/diffExpHeatmap.js

@@ -244,30 +244,6 @@ class Heatmap extends React.Component {
 
     return (
       <div>
-        Color by any gene:
-        <ReactAutocomplete
-          items={this.props.allGeneNames}
-          shouldItemRender={(item, value) =>
-            item.toLowerCase().indexOf(value.toLowerCase()) > -1
-          }
-          getItemValue={item => item}
-          renderItem={(item, highlighted) => (
-            <div
-              key={item}
-              style={{ backgroundColor: highlighted ? "#eee" : "transparent" }}
-            >
-              {item}
-            </div>
-          )}
-          value={this.state.value}
-          onChange={e => this.setState({ value: e.target.value })}
-          onSelect={value => {
-            this.setState({ value });
-            this.props.dispatch(
-              actions.requestSingleGeneExpressionCountsForColoringPOST(value)
-            );
-          }}
-        />
         <div
           style={{
             display: "flex",

client/src/components/expression/expressionButtons.js

@@ -38,57 +38,46 @@ class Expression extends React.Component {
       return null;
     }
     return (
-      <div>
-        <div style={{ margin: 10 }}>
-          <div style={{ marginBottom: 15, width: 300 }}>
-            There are currently
-            {" " +
-              (this.props.crossfilter
-                ? this.props.crossfilter.cells.countFiltered()
-                : 0) +
-              " "}
-            cells selected, click a cell set button to store them.
-          </div>
-          <CellSetButton {...this.props} eitherCellSetOneOrTwo={1} />
-          <CellSetButton {...this.props} eitherCellSetOneOrTwo={2} />
-        </div>
-        <div>
-          {this.props.differential.celllist1 &&
-          this.props.differential.celllist2 ? (
-            <button
-              style={{
-                fontSize: 18,
-                margin: 10,
-                fontWeight: 700,
-                color: "#FFF",
-                padding: "12px 20px",
-                backgroundColor: globals.brightBlue,
-                border: "none",
-                cursor: "pointer"
-              }}
-              onClick={this.computeDiffExp.bind(this)}
-            >
-              Compute differential expression
-            </button>
-          ) : (
-            <button
-              style={{
-                fontSize: 18,
-                margin: 10,
-                fontWeight: 700,
-                color: "#FFF",
-                padding: "12px 20px",
-                backgroundColor: globals.mediumGrey,
-                border: "none"
-              }}
-            >
-              Compute differential expression
-            </button>
-          )}
-        </div>
+      <div style={{ marginRight: 10, marginBottom: 10 }}>
+        <CellSetButton {...this.props} eitherCellSetOneOrTwo={1} />
+        <CellSetButton {...this.props} eitherCellSetOneOrTwo={2} />
+        <button
+          style={{
+            fontSize: 14,
+            fontWeight: 400,
+            color: "#FFF",
+            padding: "0px 10px",
+            height: 30,
+            borderRadius: 2,
+            backgroundColor:
+              this.props.differential.celllist1 &&
+              this.props.differential.celllist2
+                ? globals.brightBlue
+                : globals.lightGrey,
+            border: "none",
+            cursor:
+              this.props.differential.celllist1 &&
+              this.props.differential.celllist2
+                ? "pointer"
+                : "auto"
+          }}
+          onClick={this.computeDiffExp.bind(this)}
+        >
+          Compute differential expression
+        </button>
       </div>
     );
   }
 }
 
 export default Expression;
+
+// <div style={{ marginBottom: 15, width: 300 }}>
+//   There are currently
+//   {" " +
+//     (this.props.crossfilter
+//       ? this.props.crossfilter.cells.countFiltered()
+//       : 0) +
+//     " "}
+//   cells selected, click a cell set button to store them.
+// </div>

client/src/components/graph/graph.js

@@ -36,6 +36,8 @@ class Graph extends React.Component {
     this.count = 0;
     this.inverse = mat4.identity([]);
     this.graphPaddingTop = 100;
+    this.graphPaddingBottom = 45;
+    this.graphPaddingRight = 10;
     this.renderCache = {
       positions: null,
       colors: null
@@ -315,9 +317,10 @@ class Graph extends React.Component {
               }}
               style={{
                 fontSize: 14,
-                fontWeight: 700,
+                fontWeight: 400,
                 color: "white",
-                padding: "10px 20px",
+                padding: "0px 10px",
+                height: 30,
                 marginRight: 10,
                 borderRadius: 2,
                 backgroundColor: globals.brightBlue,
@@ -333,9 +336,10 @@ class Graph extends React.Component {
               }}
               style={{
                 fontSize: 14,
-                fontWeight: 700,
+                fontWeight: 400,
                 color: "white",
-                padding: "10px 20px",
+                padding: "0px 10px",
+                height: 30,
                 marginRight: 10,
                 borderRadius: 2,
                 backgroundColor: globals.brightBlue,
@@ -346,7 +350,7 @@ class Graph extends React.Component {
               regraph selection
             </button>
             <div>
-              <span style={{ position: "relative", top: 3 }}>
+              <span>
                 <button
                   onClick={() => {
                     this.setState({ mode: "brush" });
@@ -359,6 +363,7 @@ class Graph extends React.Component {
                         : "1px solid white",
                     backgroundColor: "white",
                     padding: 5,
+                    marginRight: 10,
                     borderRadius: 3
                   }}
                 >
@@ -379,6 +384,7 @@ class Graph extends React.Component {
                         : "1px solid white",
                     backgroundColor: "white",
                     padding: 5,
+                    marginRight: 10,
                     borderRadius: 3
                   }}
                 >
@@ -391,9 +397,11 @@ class Graph extends React.Component {
               <button
                 style={{
                   fontSize: 14,
-                  fontWeight: 700,
+                  fontWeight: 400,
                   color: "white",
-                  padding: "10px 20px",
+                  padding: "0px 10px",
+                  height: 30,
+                  borderRadius: 2,
                   backgroundColor: globals.lightGrey,
                   border: "none",
                   cursor: "pointer"
@@ -410,8 +418,8 @@ class Graph extends React.Component {
             marginTop: 50,
             zIndex: -9999,
             position: "fixed",
-            right: 20,
-            bottom: 20
+            right: this.graphPaddingRight,
+            bottom: this.graphPaddingBottom
           }}
         >
           <div

client/src/components/leftsidebar.js

@@ -17,12 +17,15 @@ import DynamicScatterplot from "./scatterplot/scatterplot";
 class LeftSideBar extends React.Component {
   constructor(props) {
     super(props);
-    this.metadataSectionPadding = 300;
     this.state = {
       currentTab: "metadata"
     };
   }
   render() {
+    /* this magic number should be made less fragile, if cellxgene logo or tabs change, this must as well */
+    const metadataSectionPadding =
+      this.state.currentTab === "metadata" ? 88 : 500;
+    console.log(this.props.currentTab, metadataSectionPadding);
     return (
       <div style={{ position: "fixed" }}>
         <p
@@ -84,7 +87,7 @@ class LeftSideBar extends React.Component {
         </div>
         <div
           style={{
-            height: this.props.responsive.height - this.metadataSectionPadding,
+            height: this.props.responsive.height - metadataSectionPadding,
             width: 400,
             padding: 10,
             overflowY: "auto",
@@ -95,12 +98,21 @@ class LeftSideBar extends React.Component {
           {this.state.currentTab === "metadata" ? <Continuous /> : null}
           {this.state.currentTab === "expression" ? <Heatmap /> : null}
         </div>
-        <div style={{ position: "fixed", bottom: 0, left: 0 }}>
-          {this.state.currentTab === "metadata" ? <ExpressionButtons /> : null}
+        <div
+          style={{
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            border: "1px solid pink"
+          }}
+        >
           {this.state.currentTab === "expression" ? (
             <DynamicScatterplot />
           ) : null}
         </div>
+        <div style={{ position: "fixed", bottom: 0, right: 0 }}>
+          {this.state.currentTab === "metadata" ? <ExpressionButtons /> : null}
+        </div>
       </div>
     );
   }