Refactor CSS and React logic for layout (#1424)

* Refactor CSS layout and react logic for layout

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1022

* Menubar should wrap inside middle pane instead of overlapping left
  sidebar when window is scrunched
* cellxgene should have a minimum width of 1240px

1. Replace absolute positioning and dimension calculation with css grid
2. Use flexbox for wrapping menubar buttons

* Middle pane (graph) can calculate its own size
* Removing components calculating their size/position relative to
  eachother increases modularity, decreases use of global variables
* Improved some scrollbar behavior
* Removed responsive reducer, propagating window size to components
  triggers unnecessary events and encourages breaking modularity; doing
  this made some components state agnostic

Reference: https://css-tricks.com/snippets/css/complete-guide-grid/

* Reposition the continuous legend

* Small fixes

* Respond to feedback from @colinmegill

* Respond to feedback from @colinmegill

Add more documentation on the renderGraph method.

client/src/components/leftSidebar/index.js

@@ -7,41 +7,29 @@ import DynamicScatterplot from "../scatterplot/scatterplot";
 import TopLeftLogoAndTitle from "./topLeftLogoAndTitle";
 
 @connect((state) => ({
-  responsive: state.responsive,
   scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
 }))
 class LeftSideBar extends React.Component {
+
   render() {
-    const {
-      responsive,
-      scatterplotXXaccessor,
-      scatterplotYYaccessor,
-    } = this.props;
-
-    /*
-    this magic number should be made less fragile,
-    if cellxgene logo or tabs change, this must as well
-    */
-    const logoRelatedPadding = 50;
-
+    const { scatterplotXXaccessor, scatterplotYYaccessor } = this.props;
     return (
       <div
         style={{
-          position: "fixed",
-          backgroundColor: "white",
           /* x y blur spread color */
           borderRight: `1px solid ${globals.lightGrey}`,
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
         }}
       >
         <TopLeftLogoAndTitle />
         <div
           style={{
-            height: responsive.height - logoRelatedPadding,
-            marginTop: logoRelatedPadding,
+            height: "100%",
             width: globals.leftSidebarWidth,
             overflowY: "auto",
-            overflowX: "hidden",
           }}
         >
           <Categorical />

client/src/components/leftSidebar/topLeftLogoAndTitle.js

@@ -4,8 +4,7 @@ import { connect } from "react-redux";
 import * as globals from "../../globals";
 import Logo from "../framework/logo";
 
-@connect((state) => ({
-  responsive: state.responsive,
+@connect(state => ({
   datasetTitle: state.config?.displayNames?.dataset ?? "",
   aboutURL: state.config?.links?.["about-dataset"],
   scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
@@ -15,8 +14,6 @@ class LeftSideBar extends React.Component {
   render() {
     const { datasetTitle, aboutURL } = this.props;
 
-    const paddingToAvoidScrollBar = 15;
-
     const displayTitle =
       datasetTitle.length > globals.datasetTitleMaxCharacterCount
         ? `${datasetTitle.substring(
@@ -32,12 +29,9 @@ class LeftSideBar extends React.Component {
         style={{
           paddingLeft: 8,
           paddingTop: 8,
-          width: globals.leftSidebarWidth - paddingToAvoidScrollBar,
-          position: "absolute",
-          backgroundColor: "white",
-          zIndex: 8888,
-          /* x y blur spread color */
-          // boxShadow: "-5px -1px 4px 2px rgba(225,225,225,0.4)"
+          width: globals.leftSidebarWidth,
+          zIndex: 1,
+          borderBottom: `1px solid ${globals.lighterGrey}`,
         }}
       >
         <Logo size={30} />