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

@@ -13,7 +13,6 @@ import crossfilter from "./crossfilter";
 import colors from "./colors";
 import differential from "./differential";
 import layoutChoice from "./layoutChoice";
-import responsive from "./responsive";
 import controls from "./controls";
 import resetCache from "./resetCache";
 import annotations from "./annotations";
@@ -41,7 +40,6 @@ const Reducer = undoable(
     ["controls", controls],
     ["crossfilter", crossfilter],
     ["differential", differential],
-    ["responsive", responsive],
     ["centroidLabels", centroidLabels],
     ["pointDilation", pointDialation],
     ["reembedController", reembedController],

client/src/reducers/responsive.js

@@ -1,21 +0,0 @@
-// jshint esversion: 6
-const Responsive = (
-  state = {
-    width: null,
-    height: null,
-  },
-  action
-) => {
-  switch (action.type) {
-    case "window resize":
-      return {
-        ...state,
-        width: action.data.width,
-        height: action.data.height,
-      };
-    default:
-      return state;
-  }
-};
-
-export default Responsive;