Begin integrating blueprint (#359)

* toast test

* modify webpack build to allow for global CSS; use CSS modules to scope component styling

* remove heatmap

* add label to index resets

* swapping out buttons for blueprint

* adding constants to globals

* swapping out blueprint buttons

* title position, sidebar improvements

* sidebar styles

* adding toasts for validation errors

* zebra section trial

* integrating blueprint, switching buttons over, breaking out scatter

* clean up console

client/src/components/leftsidebar.js

@@ -5,8 +5,6 @@ import { connect } from "react-redux";
 import Categorical from "./categorical/categorical";
 import Continuous from "./continuous/continuous";
 import GeneExpression from "./geneExpression";
-import ExpressionButtons from "./expression/expressionButtons";
-import Heatmap from "./expression/diffExpHeatmap";
 import * as globals from "../globals";
 import DynamicScatterplot from "./scatterplot/scatterplot";
 
@@ -37,30 +35,36 @@ class LeftSideBar extends React.Component {
     this magic number should be made less fragile,
     if cellxgene logo or tabs change, this must as well
     */
-    const metadataSectionPadding =
-      scatterplotXXaccessor && scatterplotYYaccessor ? 450 : 0;
+    const metadataSectionPadding = 0;
+    // scatterplotXXaccessor && scatterplotYYaccessor ? 450 : 0;
+
     return (
-      <div style={{ position: "fixed" }}>
+      <div
+        style={{
+          position: "fixed",
+          backgroundColor: "white",
+          /* x y blur spread color */
+          boxShadow: "1px 0px 6px 2px rgba(153,153,153,0.4)"
+        }}
+      >
         <p
           style={{
             position: "fixed",
-            left: responsive.width / 2,
-            top: 14,
+            top: globals.cellxgeneTitleTopPadding,
+            left: globals.leftSidebarWidth + globals.cellxgeneTitleLeftPadding,
             margin: 0,
-            fontSize: 24,
+            fontSize: globals.largestFontSize,
             color: globals.darkerGrey,
-            fontWeight: 700,
             width: "100%"
           }}
         >
-          cellxgene: &nbsp;
-          {datasetTitle}
+          cellxgene: {datasetTitle}
         </p>
+
         <div
           style={{
             height: responsive.height - metadataSectionPadding,
-            width: 400,
-            padding: "0px 10px 10px 10px",
+            width: globals.leftSidebarWidth,
             overflowY: "auto",
             overflowX: "hidden"
           }}
@@ -69,20 +73,9 @@ class LeftSideBar extends React.Component {
           <GeneExpression />
           <Continuous />
         </div>
-        <div
-          style={{
-            position: "fixed",
-            bottom: 0,
-            left: 0
-          }}
-        >
-          {scatterplotXXaccessor && scatterplotYYaccessor ? (
-            <DynamicScatterplot />
-          ) : null}
-        </div>
-        <div style={{ position: "fixed", bottom: 0, right: 0 }}>
-          {currentTab === "metadata" ? <ExpressionButtons /> : null}
-        </div>
+        {scatterplotXXaccessor && scatterplotYYaccessor ? (
+          <DynamicScatterplot />
+        ) : null}
       </div>
     );
   }