remove all linting errors on client/src (#1463)

* run eslint --fix

* camelcase

* camelCase config part 1

* part 2

* part 3 - removing subscripts

* fix "class-methods-use-this"

* fix "class-methods-use-this"

* fix eslint ignores

* add eslint ignore for set state in update

* reformat comments to appease eslint

* add a11y features

* sort-comp fix

* a11y fix

* add ignore for set state in update

* add a11y htmlFor

* remove unused toast

* remove unnecessary bind

* add ignore for set state in update

* add rel="noopener noreferrer"

Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener

* use arrow function to bind

* remove unused definitions/declarations

* prettier

* remove unused state

* add comments to empty catch blocks remove curly brackets

* escape '

* use eqeqeq

* switch from default export

* remove ignore log

* remove static

* fix import

* revert subscripting config

* clean-up

* remove unnecessary subscript

* fix new errors from master

* change category click handler to a class property

* fix camelcase changes that slipped by

* unused import

* Fix newly introduced ESLint errors from addGenes

client/src/components/graph/graph.js

@@ -10,7 +10,6 @@ import setupSVGandBrushElements from "./setupSVGandBrush";
 import _camera from "../../util/camera";
 import _drawPoints from "./drawPointsRegl";
 import { isTypedArray } from "../../util/typeHelpers";
-import styles from "./graph.css";
 
 import GraphOverlayLayer from "./overlays/graphOverlayLayer";
 import CentroidLabels from "./overlays/centroidLabels";
@@ -190,7 +189,7 @@ class Graph extends React.Component {
       tool: null,
       container: null,
       cameraRender: 0,
-      viewport
+      viewport,
     };
   }
 
@@ -209,7 +208,10 @@ class Graph extends React.Component {
 
     // create all default rendering transformations
     const modelTF = createModelTF();
-    const projectionTF = createProjectionTF(this.reglCanvas.width, this.reglCanvas.height);
+    const projectionTF = createProjectionTF(
+      this.reglCanvas.width,
+      this.reglCanvas.height
+    );
 
     // initial draw to canvas
     this.renderPoints(
@@ -250,7 +252,8 @@ class Graph extends React.Component {
     } = this.props;
     const { regl, toolSVG, camera, modelTF, viewport } = this.state;
     let { projectionTF } = this.state;
-    const hasResized = prevState.viewport.height !== this.reglCanvas.height ||
+    const hasResized =
+      prevState.viewport.height !== this.reglCanvas.height ||
       prevState.viewport.width !== this.reglCanvas.width;
     let stateChanges = {};
     let needsRepaint = hasResized;
@@ -261,7 +264,10 @@ class Graph extends React.Component {
       const { drawPoints, pointBuffer, colorBuffer, flagBuffer } = this.state;
 
       if (hasResized) {
-        projectionTF = createProjectionTF(this.reglCanvas.width, this.reglCanvas.height);
+        projectionTF = createProjectionTF(
+          this.reglCanvas.width,
+          this.reglCanvas.height
+        );
         stateChanges = {
           ...stateChanges,
           projectionTF,
@@ -322,7 +328,10 @@ class Graph extends React.Component {
         ...stateChanges,
         ...this.createToolSVG(),
       };
-    } else if ((viewport.height && viewport.width && !toolSVG) || selectionTool !== prevProps.selectionTool ) {
+    } else if (
+      (viewport.height && viewport.width && !toolSVG) ||
+      selectionTool !== prevProps.selectionTool
+    ) {
       // first time or change of selection tool
       stateChanges = { ...stateChanges, ...this.createToolSVG() };
     } else if (prevProps.graphInteractionMode !== graphInteractionMode) {
@@ -349,6 +358,7 @@ class Graph extends React.Component {
       );
     }
     if (Object.keys(stateChanges).length > 0) {
+      // Preventing update loop via stateChanges and diff checks
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState(stateChanges);
     }
@@ -371,12 +381,11 @@ class Graph extends React.Component {
     const { viewportRef } = this.props;
     return {
       height: viewportRef.clientHeight,
-      width: viewportRef.clientWidth
+      width: viewportRef.clientWidth,
     };
   };
 
-
-  handleCanvasEvent = e => {
+  handleCanvasEvent = (e) => {
     const { camera, projectionTF } = this.state;
     if (e.type !== "wheel") e.preventDefault();
     if (camera.handleEvent(e, projectionTF)) {
@@ -547,12 +556,8 @@ class Graph extends React.Component {
     vec2.transformMat3(xy, xy, projectionTF);
 
     return [
-      Math.round(
-        (xy[0] + 1) * viewport.width / 2
-      ),
-      Math.round(
-        -((xy[1] + 1) / 2 - 1) * viewport.height
-      )
+      Math.round(((xy[0] + 1) * viewport.width) / 2),
+      Math.round(-((xy[1] + 1) / 2 - 1) * viewport.height),
     ];
   }
 
@@ -698,7 +703,7 @@ class Graph extends React.Component {
       count: this.count,
       projView,
       nPoints: universe.nObs,
-      minViewportDimension: Math.min(width, height)
+      minViewportDimension: Math.min(width, height),
     });
     regl._gl.flush();
   }
@@ -744,9 +749,11 @@ class Graph extends React.Component {
           cameraTF={cameraTF}
           modelTF={modelTF}
           projectionTF={projectionTF}
-          handleCanvasEvent={graphInteractionMode === "zoom" ? this.handleCanvasEvent : undefined}
+          handleCanvasEvent={
+            graphInteractionMode === "zoom" ? this.handleCanvasEvent : undefined
+          }
         >
-          <CentroidLabels/>
+          <CentroidLabels />
         </GraphOverlayLayer>
         <svg
           id="lasso-layer"
@@ -756,13 +763,11 @@ class Graph extends React.Component {
             position: "absolute",
             top: 0,
             left: 0,
-            zIndex: 1
+            zIndex: 1,
           }}
           width={viewport.width}
           height={viewport.height}
-          pointerEvents={
-            graphInteractionMode === "select" ? "auto" : "none"
-          }
+          pointerEvents={graphInteractionMode === "select" ? "auto" : "none"}
         />
         <canvas
           width={viewport.width}
@@ -777,7 +782,9 @@ class Graph extends React.Component {
           }}
           className="graph-canvas"
           data-testid="layout-graph"
-          ref={canvas => { this.reglCanvas = canvas; }}
+          ref={(canvas) => {
+            this.reglCanvas = canvas;
+          }}
           onMouseDown={this.handleCanvasEvent}
           onMouseUp={this.handleCanvasEvent}
           onMouseMove={this.handleCanvasEvent}