simply state management (#1628)

* simply viewport size state management

* lint

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