move component declarations out of app to leftsidebar

src/components/app.js

@@ -2,14 +2,12 @@ import React from "react";
 import _ from "lodash";
 import Helmet from "react-helmet";
 import Container from "./framework/container";
-import buttonStyles from "./framework/buttons.css";
 import { connect } from "react-redux";
 import PulseLoader from "halogen/PulseLoader";
 
-import Categorical from "./categorical/categorical";
+import LeftSideBar from "./leftsidebar";
 import Continuous from "./continuous/continuous";
 import DynamicScatterplot from "./scatterplot/scatterplot";
-import Expression from "./expression/expression";
 import Joy from "./joy/joy";
 import Graph from "./graph/graph";
 import * as globals from "../globals";
@@ -54,41 +52,26 @@ class App extends React.Component {
         <Helmet title="cellxgene" />
         {
           this.props.cells.loading ?
-          <div style={{display: "flex", justifyContent: "center", marginTop: 20}}>
+          <div style={{position: "fixed", left: window.innerWidth / 2, marginTop: 20}}>
             <PulseLoader color="rgb(0,0,0)" size="10px" margin="4px"/>
-            <span style={{marginLeft: 10, fontFamily: globals.accentFont, fontStyle: "italic"}}>loading cells</span>
+            <span style={{fontFamily: globals.accentFont, fontStyle: "italic"}}>loading cells</span>
           </div> :
           null
         }
         {this.props.cells.error ? "Error loading cells" : null}
         {false ? <Joy data={this.state.expressions && this.state.expressions.data}/> : ""}
-        <div style={{
-          display: "flex"
-        }}>
-
-          <Categorical/>
-          <div>
+        <div>
+          <LeftSideBar/>
+          <div style={{
+            padding: 15,
+            backgroundColor: "#F7F7F7",
+            width: 1440 - 410 /* but responsive */,
+            marginLeft: 350 /* but responsive */
+          }}>
             <Graph/>
-            <button
-              onClick={() => { this.props.dispatch(actions.regraph()) }}
-              style={{
-                fontSize: 14,
-                fontWeight: 400,
-                color: "#41633C",
-                padding: "10px 20px",
-                backgroundColor: "#B9D1B5",
-                border: "none",
-                borderRadius: 3,
-                cursor: "pointer",
-              }}
-
-            >
-            Regraph
-            </button>
             <DynamicScatterplot/>
-            <Continuous/>
+            {/*<Continuous/>*/}
           </div>
-          <Expression/>
         </div>
       </Container>
     )