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/menubar/cellSetButtons.js

@@ -45,7 +45,9 @@ class CellSetButton extends React.PureComponent {
         <AnchorButton
           type="button"
           disabled={differential.diffExp}
-          onClick={this.set.bind(this)}
+          onClick={() => {
+            this.set();
+          }}
           data-testid={`cellset-button-${eitherCellSetOneOrTwo}`}
         >
           {eitherCellSetOneOrTwo}

client/src/components/menubar/diffexpButtons.js

@@ -1,14 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import { connect } from "react-redux";
-import {
-  Popover,
-  Button,
-  ButtonGroup,
-  AnchorButton,
-  Tooltip,
-  Position,
-} from "@blueprintjs/core";
+import { Button, ButtonGroup, AnchorButton, Tooltip } from "@blueprintjs/core";
 import * as globals from "../../globals";
 import styles from "./menubar.css";
 import actions from "../../actions";
@@ -21,16 +14,9 @@ import CellSetButton from "./cellSetButtons";
   celllist1: state.differential?.celllist1,
   celllist2: state.differential?.celllist2,
   diffexpMayBeSlow: state.config?.parameters?.["diffexp-may-be-slow"] ?? false,
-  diffexpCellcountMax: state.config?.limits?.diffexp_cellcount_max,
+  diffexpCellcountMax: state.config?.limits?.["diffexp_cellcount_max"],
 }))
 class DiffexpButtons extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      userDismissedPopover: false,
-    };
-  }
-
   computeDiffExp = () => {
     const { dispatch, differential } = this.props;
     if (differential.celllist1 && differential.celllist2) {
@@ -54,16 +40,9 @@ class DiffexpButtons extends React.Component {
     });
   };
 
-  handlePopoverDismiss = () => {
-    this.setState({
-      userDismissedPopover: true,
-    });
-  };
-
   render() {
     /* diffexp-related buttons may be disabled */
     const { differential, diffexpMayBeSlow, diffexpCellcountMax } = this.props;
-    const { userDismissedPopover } = this.state;
 
     const haveBothCellSets =
       !!differential.celllist1 && !!differential.celllist2;
@@ -86,7 +65,7 @@ class DiffexpButtons extends React.Component {
         diffexpCellcountMax;
 
     return (
-      <ButtonGroup className={styles.menubarButton} >
+      <ButtonGroup className={styles.menubarButton}>
         <CellSetButton
           {...this.props} // eslint-disable-line react/jsx-props-no-spreading
           eitherCellSetOneOrTwo={1}

client/src/components/menubar/embedding.js

@@ -69,9 +69,7 @@ class Embedding extends React.PureComponent {
     const { layoutChoice } = this.props;
 
     return (
-      <ButtonGroup
-        className={styles.menubarButton}
-      >
+      <ButtonGroup className={styles.menubarButton}>
         <Popover
           target={
             <Tooltip

client/src/components/menubar/index.js

@@ -1,7 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import { connect } from "react-redux";
-import { Button, ButtonGroup, AnchorButton, Tooltip } from "@blueprintjs/core";
+import { ButtonGroup, AnchorButton, Tooltip } from "@blueprintjs/core";
 
 import * as globals from "../../globals";
 import styles from "./menubar.css";
@@ -28,7 +28,7 @@ import DiffexpButtons from "./diffexpButtons";
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor,
   celllist1: state.differential.celllist1,
   celllist2: state.differential.celllist2,
-  libraryVersions: state.config?.library_versions, // eslint-disable-line camelcase
+  libraryVersions: state.config?.["library_versions"],
   undoDisabled: state["@@undoable/past"].length === 0,
   redoDisabled: state["@@undoable/future"].length === 0,
   aboutLink: state.config?.links?.["about-dataset"],
@@ -207,9 +207,10 @@ class MenuBar extends React.Component {
     const { pendingClipPercentiles } = this.state;
 
     // constants used to create selection tool button
-    const [selectionTooltip, selectionButtonIcon] = selectionTool === "brush"
-      ? ["Brush selection", "Lasso selection"]
-      : ["select", "polygon-filter"];
+    const [selectionTooltip, selectionButtonIcon] =
+      selectionTool === "brush"
+        ? ["Brush selection", "Lasso selection"]
+        : ["select", "polygon-filter"];
 
     return (
       <div
@@ -245,80 +246,82 @@ class MenuBar extends React.Component {
           handleClipCommit={this.handleClipCommit}
           isClipDisabled={this.isClipDisabled}
           handleClipOnKeyPress={this.handleClipOnKeyPress}
-          handleClipPercentileMaxValueChange={this.handleClipPercentileMaxValueChange}
-          handleClipPercentileMinValueChange={this.handleClipPercentileMinValueChange}
+          handleClipPercentileMaxValueChange={
+            this.handleClipPercentileMaxValueChange
+          }
+          handleClipPercentileMinValueChange={
+            this.handleClipPercentileMinValueChange
+          }
         />
-    <Embedding />
-    <Tooltip
-      content="When a category is colored by, show labels on the graph"
-      position="bottom"
-      disabled={graphInteractionMode === "zoom"}
-    >
-      <AnchorButton
-        className={styles.menubarButton}
-        type="button"
-        data-testid="centroid-label-toggle"
-        icon="property"
-        onClick={this.handleCentroidChange}
-        active={showCentroidLabels}
-        intent={showCentroidLabels ? "primary" : "none"}
-      />
-    </Tooltip>
-    <ButtonGroup
-      className={styles.menubarButton}
-    >
-      <Tooltip
-        content={selectionTooltip}
-        position="bottom"
-        hoverOpenDelay={globals.tooltipHoverOpenDelay}
-      >
-        <AnchorButton
-          type="button"
-          data-testid="mode-lasso"
-          icon={selectionButtonIcon}
-          active={graphInteractionMode === "select"}
-          onClick={() => {
-            dispatch({
-              type: "change graph interaction mode",
-              data: "select"
-            });
+        <Embedding />
+        <Tooltip
+          content="When a category is colored by, show labels on the graph"
+          position="bottom"
+          disabled={graphInteractionMode === "zoom"}
+        >
+          <AnchorButton
+            className={styles.menubarButton}
+            type="button"
+            data-testid="centroid-label-toggle"
+            icon="property"
+            onClick={this.handleCentroidChange}
+            active={showCentroidLabels}
+            intent={showCentroidLabels ? "primary" : "none"}
+          />
+        </Tooltip>
+        <ButtonGroup className={styles.menubarButton}>
+          <Tooltip
+            content={selectionTooltip}
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
+            <AnchorButton
+              type="button"
+              data-testid="mode-lasso"
+              icon={selectionButtonIcon}
+              active={graphInteractionMode === "select"}
+              onClick={() => {
+                dispatch({
+                  type: "change graph interaction mode",
+                  data: "select",
+                });
+              }}
+            />
+          </Tooltip>
+          <Tooltip
+            content="Drag to pan, scroll to zoom"
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
+            <AnchorButton
+              type="button"
+              data-testid="mode-pan-zoom"
+              icon="zoom-in"
+              active={graphInteractionMode === "zoom"}
+              onClick={() => {
+                dispatch({
+                  type: "change graph interaction mode",
+                  data: "zoom",
+                });
+              }}
+            />
+          </Tooltip>
+        </ButtonGroup>
+        <Subset
+          subsetPossible={this.subsetPossible()}
+          subsetResetPossible={this.subsetResetPossible()}
+          handleSubset={() => {
+            dispatch(actions.setWorldToSelection());
+            dispatch({ type: "increment graph render counter" });
+          }}
+          handleSubsetReset={() => {
+            dispatch(actions.resetWorldToUniverse());
+            dispatch({ type: "increment graph render counter" });
           }}
         />
-      </Tooltip>
-      <Tooltip
-        content="Drag to pan, scroll to zoom"
-        position="bottom"
-        hoverOpenDelay={globals.tooltipHoverOpenDelay}
-      >
-        <AnchorButton
-          type="button"
-          data-testid="mode-pan-zoom"
-          icon="zoom-in"
-          active={graphInteractionMode === "zoom"}
-          onClick={() => {
-            dispatch({
-              type: "change graph interaction mode",
-              data: "zoom"
-            });
-          }}
-        />
-      </Tooltip>
-    </ButtonGroup>
-    <Subset
-      subsetPossible={this.subsetPossible()}
-      subsetResetPossible={this.subsetResetPossible()}
-      handleSubset={() => {
-        dispatch(actions.setWorldToSelection());
-        dispatch({ type: "increment graph render counter" });
-      }}
-      handleSubsetReset={() => {
-        dispatch(actions.resetWorldToUniverse());
-        dispatch({ type: "increment graph render counter" });
-      }}
-    />
-    {disableDiffexp ? null : <DiffexpButtons/>}
-    </div>
-  );
+        {disableDiffexp ? null : <DiffexpButtons />}
+      </div>
+    );
   }
 }