first pass four corners layout

src/components/app.js

@@ -8,7 +8,6 @@ import PulseLoader from "halogen/PulseLoader";
 
 import LeftSideBar from "./leftsidebar";
 import Parallel from "./continuous/parallel";
-import DynamicScatterplot from "./scatterplot/scatterplot";
 import Joy from "./joy/joy";
 import Graph from "./graph/graph";
 import * as globals from "../globals";
@@ -71,13 +70,11 @@ class App extends React.Component {
           <div
             style={{
               padding: 15,
-              backgroundColor: "#F7F7F7",
               width: 1440 - 410 /* but responsive */,
               marginLeft: 350 /* but responsive */
             }}
           >
             <Graph />
-            <DynamicScatterplot />
             {/*<Parallel/>*/}
           </div>
         </div>

src/components/expression/cellSetButtons.js

@@ -30,6 +30,7 @@ class CellSetButton extends React.Component {
         <button
           style={{
             color: "#FFF",
+            borderRadius: 2,
             padding: "0px 10px",
             height: 30,
             backgroundColor: globals.brightBlue,

src/components/expression/expressionButtons.js

@@ -40,7 +40,7 @@ class Expression extends React.Component {
     return (
       <div>
         <div style={{ margin: 10 }}>
-          <div style={{ marginBottom: 10, width: 300 }}>
+          <div style={{ marginBottom: 15, width: 300 }}>
             There are currently
             {" " +
               _.filter(this.props.currentCellSelection, "__selected__").length +

src/components/graph/graph.js

@@ -204,117 +204,111 @@ class Graph extends React.Component {
       <div
         id="graphWrapper"
         style={{
-          height: 1050 /* move this to globals */,
-          backgroundColor: "white",
-          borderRadius: 3,
-          boxShadow: "3px 4px 13px 0px rgba(201,201,201,1)"
+          height: 1050 /* move this to globals */
         }}
       >
-        <div
-          style={{
-            padding: 10,
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "baseline"
-          }}
-        >
-          <button
-            onClick={() => {
-              this.props.dispatch(actions.regraph());
-            }}
+        <div style={{ position: "fixed", right: 0, top: 0 }}>
+          <div
             style={{
-              fontSize: 12,
-              fontWeight: 400,
-              color: "white",
-              padding: "10px 20px",
-              backgroundColor: globals.brightBlue,
-              border: "none",
-              cursor: "pointer"
+              padding: 10,
+              display: "flex",
+              justifyContent: "flex-end",
+              alignItems: "baseline"
             }}
           >
-            Regraph present selection
-          </button>
-          <div>
-            <span style={{ marginRight: 10, fontSize: 12 }}>
-              deselected opacity
-            </span>
-            <input
-              style={{ position: "relative", top: 6, marginRight: 20 }}
-              type="range"
-              onChange={this.handleOpacityRangeChange.bind(this)}
-              min={0}
-              max={1}
-              step="0.01"
-            />
-            <span style={{ position: "relative", top: 3 }}>
-              <button
-                onClick={() => {
-                  this.setState({ mode: "brush" });
-                }}
-                style={{
-                  cursor: "pointer",
-                  border:
-                    this.state.mode === "brush"
-                      ? "1px solid black"
-                      : "1px solid white",
-                  backgroundColor: "white",
-                  padding: 5,
-                  borderRadius: 3
-                }}
-              >
-                {" "}
-                <FaCrosshair />{" "}
-              </button>
-              <button
-                onClick={() => {
-                  this.setState({ mode: "zoom" });
-                }}
-                style={{
-                  cursor: "pointer",
-                  border:
-                    this.state.mode === "zoom"
-                      ? "1px solid black"
-                      : "1px solid white",
-                  backgroundColor: "white",
-                  padding: 5,
-                  borderRadius: 3
-                }}
-              >
-                {" "}
-                <FaZoom />{" "}
-              </button>
-            </span>
-          </div>
-          <div>
             <button
+              onClick={() => {
+                this.props.dispatch(actions.regraph());
+              }}
               style={{
-                fontSize: 12,
-                fontWeight: 400,
+                fontSize: 14,
+                fontWeight: 700,
                 color: "white",
                 padding: "10px 20px",
+                marginRight: 10,
+                borderRadius: 2,
                 backgroundColor: globals.brightBlue,
                 border: "none",
                 cursor: "pointer"
               }}
             >
-              {" "}
-              <FaSave style={{ display: "inline-block" }} /> csv url for present
-              selection{" "}
+              regraph selection
             </button>
+            <div>
+              <span style={{ position: "relative", top: 3 }}>
+                <button
+                  onClick={() => {
+                    this.setState({ mode: "brush" });
+                  }}
+                  style={{
+                    cursor: "pointer",
+                    border:
+                      this.state.mode === "brush"
+                        ? "1px solid black"
+                        : "1px solid white",
+                    backgroundColor: "white",
+                    padding: 5,
+                    borderRadius: 3
+                  }}
+                >
+                  {" "}
+                  <FaCrosshair />{" "}
+                </button>
+                <button
+                  onClick={() => {
+                    this.setState({ mode: "zoom" });
+                  }}
+                  style={{
+                    cursor: "pointer",
+                    border:
+                      this.state.mode === "zoom"
+                        ? "1px solid black"
+                        : "1px solid white",
+                    backgroundColor: "white",
+                    padding: 5,
+                    borderRadius: 3
+                  }}
+                >
+                  {" "}
+                  <FaZoom />{" "}
+                </button>
+              </span>
+            </div>
+            <div>
+              <button
+                style={{
+                  fontSize: 14,
+                  fontWeight: 700,
+                  color: "white",
+                  padding: "10px 20px",
+                  backgroundColor: globals.lightGrey,
+                  border: "none",
+                  cursor: "pointer"
+                }}
+              >
+                export
+              </button>
+            </div>
           </div>
         </div>
         <div
-          style={{ display: this.state.mode === "brush" ? "inherit" : "none" }}
-          id="graphAttachPoint"
-        />
-        <div style={{ padding: 0, margin: 0 }}>
-          <canvas
-            width={globals.graphWidth}
-            height={globals.graphHeight}
-            ref={canvas => {
-              this.reglCanvas = canvas;
+          style={{ position: "fixed", right: 80, bottom: 50, zIndex: -9999 }}
+        >
+          <div
+            style={{
+              display: this.state.mode === "brush" ? "inherit" : "none"
             }}
+            id="graphAttachPoint"
           />
+          <div style={{ padding: 0, margin: 0 }}>
+            <canvas
+              width={globals.graphWidth}
+              height={globals.graphHeight}
+              ref={canvas => {
+                this.reglCanvas = canvas;
+              }}
+            />
+          </div>
         </div>
       </div>
     );
@@ -322,3 +316,15 @@ class Graph extends React.Component {
 }
 
 export default Graph;
+
+// <span style={{ marginRight: 10, fontSize: 12 }}>
+//   deselected opacity
+// </span>
+// <input
+//   style={{ position: "relative", top: 6, marginRight: 20 }}
+//   type="range"
+//   onChange={this.handleOpacityRangeChange.bind(this)}
+//   min={0}
+//   max={1}
+//   step="0.01"
+// />

src/components/leftsidebar.js

@@ -7,6 +7,7 @@ import ExpressionButtons from "./expression/expressionButtons";
 import { connect } from "react-redux";
 import Heatmap from "./expression/diffExpHeatmap";
 import * as globals from "../globals";
+import DynamicScatterplot from "./scatterplot/scatterplot";
 
 @connect(state => {
   return {};
@@ -21,7 +22,15 @@ class LeftSideBar extends React.Component {
   render() {
     return (
       <div style={{ position: "fixed" }}>
-        <p style={{ margin: 10, fontSize: 16, fontWeight: 700, width: "100%" }}>
+        <p
+          style={{
+            margin: 10,
+            fontSize: 24,
+            color: globals.lightGrey,
+            fontWeight: 700,
+            width: "100%"
+          }}
+        >
           CELLxGENE {globals.datasetTitle}{" "}
         </p>
         <div style={{ padding: 10 }}>
@@ -97,7 +106,7 @@ class LeftSideBar extends React.Component {
             height: 500,
             width: 350,
             padding: 10,
-            overflowY: "scroll",
+            overflowY: "auto",
             overflowX: "hidden"
           }}
         >
@@ -105,13 +114,11 @@ class LeftSideBar extends React.Component {
           {this.state.currentTab === "metadata" ? <Continuous /> : null}
           {this.state.currentTab === "expression" ? <Heatmap /> : null}
         </div>
-        <div
-          style={{
-            boxShadow: "-3px -4px 13px 0px rgba(201,201,201,1)",
-            paddingTop: 10
-          }}
-        >
-          <ExpressionButtons />
+        <div style={{ position: "fixed", bottom: 0, left: 0 }}>
+          {this.state.currentTab === "metadata" ? <ExpressionButtons /> : null}
+          {this.state.currentTab === "expression" ? (
+            <DynamicScatterplot />
+          ) : null}
         </div>
       </div>
     );

src/components/scatterplot/scatterplot.js

@@ -265,10 +265,7 @@ class Scatterplot extends React.Component {
       <div
         style={{
           backgroundColor: "white",
-          borderRadius: 3,
-          marginTop: 15,
-          paddingBottom: 20,
-          boxShadow: "3px 4px 13px 0px rgba(201,201,201,1)"
+          paddingBottom: 20
         }}
         id="scatterplot_wrapper"
       >