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/continuousLegend/index.js

@@ -3,7 +3,6 @@ import React from "react";
 import { connect } from "react-redux";
 import * as d3 from "d3";
 import { interpolateCool } from "d3-scale-chromatic";
-import * as globals from "../../globals";
 
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
@@ -97,22 +96,12 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
 @connect((state) => ({
   colorAccessor: state.colors.colorAccessor,
   colorScale: state.colors.scale,
-  responsive: state.responsive,
 }))
 class ContinuousLegend extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
 
   componentDidUpdate(prevProps) {
-    const { colorAccessor, responsive, colorScale } = this.props;
-    if (
-      prevProps.colorAccessor !== colorAccessor ||
-      prevProps.colorScale !== colorScale ||
-      prevProps.responsive.height !== responsive.height ||
-      prevProps.responsive.width !== responsive.width
-    ) {
+    const { colorAccessor, colorScale } = this.props;
+    if (prevProps.colorAccessor !== colorAccessor || prevProps.colorScale !== colorScale) {
       /* always remove it, if it's not continuous we don't put it back. */
       d3.select("#continuous_legend").selectAll("*").remove();
     }
@@ -130,15 +119,17 @@ class ContinuousLegend extends React.Component {
   }
 
   render() {
-    const { colorAccessor, responsive } = this.props;
+    const { colorAccessor } = this.props;
     return (
       <div
         id="continuous_legend"
+        ref={ref => {this.ref = ref}}
         style={{
-          position: "fixed",
           display: colorAccessor ? "inherit" : "none",
-          right: globals.leftSidebarWidth,
-          top: responsive.height / 2,
+          position: "absolute",
+          left: 8,
+          top: 35,
+          zIndex: 1,
         }}
       />
     );