merge with Colin responsive edits

chanzuckerberg · May 14, 2018 · 87958af · 87958af
2 parents 1e88764 + e739179
commit 87958af
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 16 deletions.
diff --git a/src/components/app.js b/src/components/app.js
@@ -39,6 +39,23 @@ class App extends React.Component {
       first request includes query straight off the url bar for now
     */
     this.props.dispatch(actions.requestCells(window.location.search));
+    /* listen for resize events */
+    window.addEventListener("resize", () => {
+      this.props.dispatch({
+        type: "window resize",
+        data: {
+          height: window.innerHeight,
+          width: window.innerWidth
+        }
+      });
+    });
+    this.props.dispatch({
+      type: "window resize",
+      data: {
+        height: window.innerHeight,
+        width: window.innerWidth
+      }
+    });
   }
 
   render() {

diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js
@@ -45,14 +45,16 @@ import FaSave from "react-icons/lib/fa/download";
     graphVec: state.controls.graphVec,
     currentCellSelection: state.controls.currentCellSelection,
     graphBrushSelection: state.controls.graphBrushSelection,
-    opacityForDeselectedCells: state.controls.opacityForDeselectedCells
+    opacityForDeselectedCells: state.controls.opacityForDeselectedCells,
+    responsive: state.responsive
   };
 })
 class Graph extends React.Component {
   constructor(props) {
     super(props);
     this.count = 0;
     this.inverse = mat4.identity([]);
+    this.graphPaddingTop = 100;
     this.state = {
       drawn: false,
       svg: null,
@@ -291,7 +293,16 @@ class Graph extends React.Component {
             </div>
           </div>
         </div>
-        <div style={{ marginRight: 50, marginTop: 50, zIndex: -9999 }}>
+        <div
+          style={{
+            marginRight: 50,
+            marginTop: 50,
+            zIndex: -9999,
+            position: "fixed",
+            right: 20,
+            bottom: 20
+          }}
+        >
           <div
             style={{
               display: this.state.mode === "brush" ? "inherit" : "none"
@@ -300,8 +311,8 @@ class Graph extends React.Component {
           />
           <div style={{ padding: 0, margin: 0 }}>
             <canvas
-              width={globals.graphWidth}
-              height={globals.graphHeight}
+              width={this.props.responsive.height - this.graphPaddingTop}
+              height={this.props.responsive.height - this.graphPaddingTop}
               ref={canvas => {
                 this.reglCanvas = canvas;
               }}

diff --git a/src/components/leftsidebar.js b/src/components/leftsidebar.js
@@ -10,11 +10,14 @@ import * as globals from "../globals";
 import DynamicScatterplot from "./scatterplot/scatterplot";
 
 @connect(state => {
-  return {};
+  return {
+    responsive: state.responsive
+  };
 })
 class LeftSideBar extends React.Component {
   constructor(props) {
     super(props);
+    this.metadataSectionPadding = 300;
     this.state = {
       currentTab: "metadata"
     };
@@ -39,8 +42,7 @@ class LeftSideBar extends React.Component {
               padding: "none",
               outline: 0,
               fontSize: 14,
-              fontWeight:
-                this.state.currentTab === "metadata" ? 700 : 400,
+              fontWeight: this.state.currentTab === "metadata" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "metadata" ? "inherit" : "italic",
               cursor: "pointer",
@@ -49,7 +51,7 @@ class LeftSideBar extends React.Component {
               borderTop: "none",
               borderBottom: "none",
               borderRight: "none",
-              borderLeft: "none",
+              borderLeft: "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "metadata" });
@@ -62,8 +64,7 @@ class LeftSideBar extends React.Component {
               padding: "none",
               outline: 0,
               fontSize: 14,
-              fontWeight:
-                this.state.currentTab === "expression" ? 700 : 400,
+              fontWeight: this.state.currentTab === "expression" ? 700 : 400,
               fontStyle:
                 this.state.currentTab === "expression" ? "inherit" : "italic",
               cursor: "pointer",
@@ -72,7 +73,7 @@ class LeftSideBar extends React.Component {
               borderTop: "none",
               borderBottom: "none",
               borderRight: "none",
-              borderLeft: "none",
+              borderLeft: "none"
             }}
             onClick={() => {
               this.setState({ currentTab: "expression" });
@@ -83,7 +84,7 @@ class LeftSideBar extends React.Component {
         </div>
         <div
           style={{
-            height: 350,
+            height: this.props.responsive.height - this.metadataSectionPadding,
             width: 400,
             padding: 10,
             overflowY: "auto",

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -11,13 +11,15 @@ import cells from "./cells";
 import expression from "./expression";
 import controls from "./controls";
 import differential from "./differential";
+import responsive from "./responsive";
 
 const Reducer = combineReducers({
   initialize,
   cells,
   expression,
   controls,
-  differential
+  differential,
+  responsive
 });
 
 let store = createStore(

diff --git a/src/reducers/responsive.js b/src/reducers/responsive.js
@@ -7,10 +7,10 @@ const Responsive = (
   action
 ) => {
   switch (action.type) {
-    case "resize event":
+    case "window resize":
       return Object.assign({}, state, {
-        width: action.data,
-        height: action.data
+        width: action.data.width,
+        height: action.data.height
       });
     default:
       return state;