expression layout and buttons vs tabs

src/components/expression/diffExpHeatmap.js

@@ -100,77 +100,6 @@ class HeatmapRow extends React.Component {
         }}
       >
         <div style={{ width: 150, flexShrink: 0 }}>
-          <span
-            onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
-              this
-            )}
-            style={{
-              fontSize: 16,
-              color:
-                this.props.scatterplotXXaccessor === this.props.gene
-                  ? "white"
-                  : globals.brightBlue,
-              cursor: "pointer",
-              position: "relative",
-              top: 1,
-              fontWeight: 700,
-              marginRight: 4,
-              borderRadius: 3,
-              padding: "2px 3px",
-              backgroundColor:
-                this.props.scatterplotXXaccessor === this.props.gene
-                  ? globals.brightBlue
-                  : "inherit"
-            }}
-          >
-            X
-          </span>
-          <span
-            onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
-              this
-            )}
-            style={{
-              fontSize: 16,
-              color:
-                this.props.scatterplotYYaccessor === this.props.gene
-                  ? "white"
-                  : globals.brightBlue,
-              cursor: "pointer",
-              position: "relative",
-              top: 1,
-              fontWeight: 700,
-              marginRight: 4,
-              borderRadius: 3,
-              padding: "2px 3px",
-              backgroundColor:
-                this.props.scatterplotYYaccessor === this.props.gene
-                  ? globals.brightBlue
-                  : "inherit"
-            }}
-          >
-            Y
-          </span>
-          <span
-            onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)}
-            style={{
-              fontSize: 16,
-              cursor: "pointer",
-              position: "relative",
-              marginRight: 6,
-              borderRadius: 3,
-              padding: "0px 2px 2px 2px",
-              color:
-                this.props.colorAccessor === this.props.gene
-                  ? "white"
-                  : "inherit",
-              backgroundColor:
-                this.props.colorAccessor === this.props.gene
-                  ? globals.brightBlue
-                  : "inherit"
-            }}
-          >
-            <FaPaintBrush style={{ display: "inline-block" }} />
-          </span>
           <span
             style={{
               fontSize: 14
@@ -190,12 +119,84 @@ class HeatmapRow extends React.Component {
         <span
           title={this.props.aveDiff}
           style={{
-            fontSize: 14,
+            fontSize: 12,
-            paddingLeft: 10
+            marginLeft: 10,
+            marginRight: 10,
           }}
         >
           {this.props.aveDiff.toFixed(2)}
         </span>
+        <span
+          onClick={this.handleSetGeneAsScatterplotX(this.props.gene).bind(
+            this
+          )}
+          style={{
+            fontSize: 16,
+            color:
+              this.props.scatterplotXXaccessor === this.props.gene
+                ? "white"
+                : globals.brightBlue,
+            cursor: "pointer",
+            position: "relative",
+            top: 1,
+            fontWeight: 700,
+            marginRight: 4,
+            borderRadius: 3,
+            padding: "2px 3px",
+            backgroundColor:
+              this.props.scatterplotXXaccessor === this.props.gene
+                ? globals.brightBlue
+                : "inherit"
+          }}
+        >
+          X
+        </span>
+        <span
+          onClick={this.handleSetGeneAsScatterplotY(this.props.gene).bind(
+            this
+          )}
+          style={{
+            fontSize: 16,
+            color:
+              this.props.scatterplotYYaccessor === this.props.gene
+                ? "white"
+                : globals.brightBlue,
+            cursor: "pointer",
+            position: "relative",
+            top: 1,
+            fontWeight: 700,
+            marginRight: 4,
+            borderRadius: 3,
+            padding: "2px 3px",
+            backgroundColor:
+              this.props.scatterplotYYaccessor === this.props.gene
+                ? globals.brightBlue
+                : "inherit"
+          }}
+        >
+          Y
+        </span>
+        <span
+          onClick={this.handleGeneColorScaleClick(this.props.gene).bind(this)}
+          style={{
+            fontSize: 16,
+            cursor: "pointer",
+            position: "relative",
+            marginRight: 6,
+            borderRadius: 3,
+            padding: "0px 2px 2px 2px",
+            color:
+              this.props.colorAccessor === this.props.gene
+                ? "white"
+                : "inherit",
+            backgroundColor:
+              this.props.colorAccessor === this.props.gene
+                ? globals.brightBlue
+                : "inherit"
+          }}
+        >
+          <FaPaintBrush style={{ display: "inline-block" }} />
+        </span>
       </div>
     );
   }

src/components/leftsidebar.js

@@ -36,30 +36,20 @@ class LeftSideBar extends React.Component {
         <div style={{ padding: 10 }}>
           <button
             style={{
-              padding: "10px 30px",
+              padding: "none",
               outline: 0,
-              fontSize: 18,
+              fontSize: 14,
+              fontWeight:
+                this.state.currentTab === "metadata" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "metadata" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
-              borderTop:
+              borderTop: "none",
-                this.state.currentTab === "metadata"
+              borderBottom: "none",
-                  ? "4px solid " + globals.brightBlue
+              borderRight: "none",
-                  : "none",
+              borderLeft: "none",
-              borderBottom:
-                this.state.currentTab === "metadata"
-                  ? "none"
-                  : "1px solid " + globals.lightGrey,
-              borderRight:
-                this.state.currentTab === "metadata"
-                  ? "1px solid " + globals.lightGrey
-                  : "none",
-              borderLeft:
-                this.state.currentTab === "metadata"
-                  ? "1px solid " + globals.lightGrey
-                  : "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "metadata" });
@@ -69,30 +59,20 @@ class LeftSideBar extends React.Component {
           </button>
           <button
             style={{
-              padding: "10px 30px",
+              padding: "none",
               outline: 0,
-              fontSize: 18,
+              fontSize: 14,
+              fontWeight:
+                this.state.currentTab === "expression" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "expression" ? "inherit" : "italic",
               cursor: "pointer",
               border: "none",
               backgroundColor: "#FFF",
-              borderTop:
+              borderTop: "none",
-                this.state.currentTab === "expression"
+              borderBottom: "none",
-                  ? "4px solid " + globals.brightBlue
+              borderRight: "none",
-                  : "none",
+              borderLeft: "none",
-              borderBottom:
-                this.state.currentTab === "expression"
-                  ? "none"
-                  : "1px solid " + globals.lightGrey,
-              borderRight:
-                this.state.currentTab === "expression"
-                  ? "1px solid " + globals.lightGrey
-                  : "none",
-              borderLeft:
-                this.state.currentTab === "expression"
-                  ? "1px solid " + globals.lightGrey
-                  : "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "expression" });
@@ -103,8 +83,8 @@ class LeftSideBar extends React.Component {
         </div>
         <div
           style={{
-            height: 500,
+            height: 350,
-            width: 350,
+            width: 400,
             padding: 10,
             overflowY: "auto",
             overflowX: "hidden"