simply state management (#1628)

* simply viewport size state management

* lint

client/src/components/graph/graph.js

@@ -191,7 +191,7 @@ class Graph extends React.Component {
       camera: null,
       modelTF,
       modelInvTF: mat3.invert([], modelTF),
-      projectionTF: null,
+      projectionTF: createProjectionTF(viewport.width, viewport.height),
 
       // regl state
       regl: null,
@@ -220,14 +220,6 @@ class Graph extends React.Component {
 
   componentDidMount() {
     window.addEventListener("resize", this.handleResize);
-
-    // create all default rendering transformations
-    const { viewport } = this.state;
-    const projectionTF = createProjectionTF(viewport.width, viewport.height);
-
-    this.setState({
-      projectionTF,
-    });
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -237,20 +229,11 @@ class Graph extends React.Component {
       graphInteractionMode,
     } = this.props;
     const { toolSVG, viewport } = this.state;
-    let { projectionTF } = this.state;
     const hasResized =
       prevState.viewport.height !== viewport.height ||
       prevState.viewport.width !== viewport.width;
     let stateChanges = {};
 
-    if (hasResized) {
-      projectionTF = createProjectionTF(viewport.width, viewport.height);
-      stateChanges = {
-        ...stateChanges,
-        projectionTF,
-      };
-    }
-
     if (
       (viewport.height && viewport.width && !toolSVG) || // first time init
       hasResized || //  window size has changed we want to recreate all SVGs
@@ -298,9 +281,11 @@ class Graph extends React.Component {
   handleResize = () => {
     const { state } = this.state;
     const viewport = this.getViewportDimensions();
+    const projectionTF = createProjectionTF(viewport.width, viewport.height);
     this.setState({
       ...state,
       viewport,
+      projectionTF,
     });
   };
 

client/src/components/scatterplot/scatterplot.js

@@ -151,6 +151,7 @@ class Scatterplot extends React.PureComponent {
 
   constructor(props) {
     super(props);
+    const viewport = this.getViewportDimensions();
     this.axes = false;
     this.reglCanvas = null;
     this.renderCache = null;
@@ -158,32 +159,18 @@ class Scatterplot extends React.PureComponent {
       regl: null,
       drawPoints: null,
       minimized: null,
-      viewport: {
-        height: null,
-        width: null,
-      },
-      projectionTF: null,
+      viewport,
+      projectionTF: createProjectionTF(width, height),
     };
   }
 
   componentDidMount() {
-    // Create render transform
-    const projectionTF = createProjectionTF(
-      this.reglCanvas.width,
-      this.reglCanvas.height
-    );
-
+    // this affect point render size for the scatterplot
     window.addEventListener("resize", this.handleResize);
-    const viewport = this.getViewportDimensions();
-
-    this.setState({
-      projectionTF,
-      viewport,
-    });
   }
 
   componentWillUnmount() {
-    window.removeEventListener("resize", this.updateViewportDimensions);
+    window.removeEventListener("resize", this.handleResize);
   }
 
   setReglCanvas = (canvas) => {
@@ -195,10 +182,8 @@ class Scatterplot extends React.PureComponent {
 
   getViewportDimensions = () => {
     return {
-      viewport: {
-        height: window.height,
-        width: window.width,
-      },
+      height: window.innerHeight,
+      width: window.innerWidth,
     };
   };
 
@@ -211,10 +196,6 @@ class Scatterplot extends React.PureComponent {
     });
   };
 
-  updateViewportDimensions = () => {
-    this.setState(this.getViewportDimensions());
-  };
-
   fetchAsyncProps = async (props) => {
     const {
       scatterplotXXaccessor,
@@ -421,12 +402,7 @@ class Scatterplot extends React.PureComponent {
       crossfilter,
       pointDilation,
     } = this.props;
-    const { minimized, status, regl, viewport } = this.state;
-
-    if (status === "error") return null;
-    if (regl) {
-      this.renderCanvas();
-    }
+    const { minimized, regl, viewport } = this.state;
 
     return (
       <div