Add linting rules around ESLint directive comments (#1551)

* add eslint-plugin-eslint-comments and require descriptive configuration

https://eslint.org/docs/user-guide/configuring#using-configuration-comments

* update ESLint

* audit ESLint disables

* update ESLint and related dependencies

client/src/components/categorical/annoDialog.js

@@ -72,7 +72,7 @@ class AnnoDialog extends React.PureComponent {
                 </Button>
               ) : null}
               <Button
-                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading
+                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading -- Spreading props allows for modularity
                 onClick={handleSubmit}
                 disabled={!text || validationError}
                 intent="primary"

client/src/components/categorical/category/index.js

@@ -51,19 +51,21 @@ class Category extends React.Component {
           0
         ),
       };
+      /* eslint-disable react/no-did-update-set-state -- Contained in if statement to prevent infinite looping */
       if (categoryCount.selectedCatCount === categoryCount.totalCatCount) {
         /* everything is on, so not indeterminate */
         this.checkbox.indeterminate = false;
-        this.setState({ isChecked: true }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: true });
       } else if (categoryCount.selectedCatCount === 0) {
         /* nothing is on, so no */
         this.checkbox.indeterminate = false;
-        this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: false });
       } else if (categoryCount.selectedCatCount < categoryCount.totalCatCount) {
         /* to be explicit... */
         this.checkbox.indeterminate = true;
-        this.setState({ isChecked: false }); // eslint-disable-line react/no-did-update-set-state
+        this.setState({ isChecked: false });
       }
+      /* eslint-enable react/no-did-update-set-state -- re-enabling*/
     }
   }
 

client/src/components/categorical/labelInput.js

@@ -142,7 +142,7 @@ export default class LabelInput extends React.PureComponent {
       return (
         <InputGroup
           autoFocus={autoFocus}
-          {...props.inputProps} // eslint-disable-line react/jsx-props-no-spreading
+          {...props.inputProps} // eslint-disable-line react/jsx-props-no-spreading --- Allows for modularity
           value={label}
           onChange={this.handleChange}
         />

client/src/components/categorical/value/index.js

@@ -62,8 +62,7 @@ class CategoryValue extends React.Component {
       prevProps.metadataField !== metadataField ||
       prevProps.categoryIndex !== categoryIndex
     ) {
-      // adequately checked to prevent looping
-      // eslint-disable-next-line react/no-did-update-set-state
+      // eslint-disable-next-line react/no-did-update-set-state --- adequately checked to prevent looping
       this.setState({
         editedLabelText: this.currentLabel(),
       });

client/src/components/geneExpression/addGenes.js

@@ -84,7 +84,7 @@ class AddGenes extends React.Component {
     return upperGenes;
   };
 
-  // eslint-disable-next-line react/sort-comp
+  // eslint-disable-next-line react/sort-comp -- memo requires a defined _genesToUpper
   _memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
 
   handleBulkAddClick = () => {

client/src/components/graph/graph.js

@@ -358,8 +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
+      // eslint-disable-next-line react/no-did-update-set-state --- Preventing update loop via stateChanges and diff checks
       this.setState(stateChanges);
     }
   }

client/src/components/graph/overlays/centroidLabels.js

@@ -70,16 +70,14 @@ class CentroidLabels extends PureComponent {
 
       labelSVGS.push(
         <g
-          // label is unique so disabling eslint rule
-          // eslint-disable-next-line react/no-array-index-key
+          // eslint-disable-next-line react/no-array-index-key --- label is unique and consistent
           key={label}
           className="centroid-label"
           transform={`translate(${coords[0]}, ${coords[1]})`}
           data-testclass="centroid-label"
           data-testid={`${label}-centroid-label`}
         >
-          {/* The mouse actions for centroid labels do not have a screen reader alternative */}
-          {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
+          {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events --- the mouse actions for centroid labels do not have a screen reader alternative*/}
           <text
             transform={inverseTransform}
             textAnchor="middle"

client/src/components/menubar/diffexpButtons.js

@@ -42,7 +42,13 @@ class DiffexpButtons extends React.Component {
 
   render() {
     /* diffexp-related buttons may be disabled */
-    const { differential, diffexpMayBeSlow, diffexpCellcountMax } = this.props;
+    const {
+      differential,
+      diffexpMayBeSlow,
+      diffexpCellcountMax,
+      crossfilter,
+      dispatch,
+    } = this.props;
 
     const haveBothCellSets =
       !!differential.celllist1 && !!differential.celllist2;
@@ -66,14 +72,17 @@ class DiffexpButtons extends React.Component {
 
     return (
       <ButtonGroup className={styles.menubarButton}>
+        {/* eslint-disable react/jsx-props-no-spreading --- disable until eslint-config-airbnb v18.1.1*/}
         <CellSetButton
-          {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+          {...{ differential, crossfilter, dispatch }}
           eitherCellSetOneOrTwo={1}
         />
         <CellSetButton
-          {...this.props} // eslint-disable-line react/jsx-props-no-spreading
+          {...{ differential, crossfilter, dispatch }}
           eitherCellSetOneOrTwo={2}
         />
+        {/* eslint-enable react/jsx-props-no-spreading --- end disable*/}
+
         {!differential.diffExp ? (
           <Tooltip
             content={warnMaxSizeExceeded ? tipMessageWarn : tipMessage}

client/src/util/camera.js

@@ -151,11 +151,10 @@ class Camera {
     let viewChanged = false;
     switch (e.type) {
       case "mousemove": {
-        /* eslint-disable no-bitwise */
+        /* eslint-disable-next-line no-bitwise --- MouseEvent.buttons exposes a bitmask, best acted on with bitops */
         if (e.buttons & 0x1) {
           viewChanged = this.mousePan(e, projectionTF);
         }
-        /* eslint-enable no-bitwise */
         this.flush(e);
         break;
       }

client/src/util/dataframe/labelIndex.js

@@ -1,4 +1,4 @@
-/* eslint-disable max-classes-per-file */
+/* eslint-disable max-classes-per-file -- Classes are interrelated*/
 /**
 Label indexing - map a label to & from an integer offset.  See Dataframe
 for how this is used.
@@ -11,7 +11,7 @@ Private utility functions
 */
 function extent(tarr) {
   let min = 0x7fffffff;
-  let max = ~min; // eslint-disable-line no-bitwise
+  let max = ~min; // eslint-disable-line no-bitwise -- Establishes 0 of same size
   for (let i = 0, l = tarr.length; i < l; i += 1) {
     const v = tarr[i];
     if (v < min) {
@@ -41,25 +41,22 @@ class IdentityInt32Index {
     return k;
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  /* eslint-disable class-methods-use-this -- having these accessors as class methods allows for polymorphism */
   getOffset(i) {
     // label to offset
     return i;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getOffsets(arr) {
     // labels to offsets
     return arr;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getLabel(i) {
     // offset to label
     return i;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getLabels(arr) {
     // offsets to labels
     return arr;
@@ -68,6 +65,7 @@ class IdentityInt32Index {
   size() {
     return this.maxOffset;
   }
+  /* eslint-enable class-methods-use-this -- enable */
 
   __promote(labelArray) {
     /*
@@ -215,7 +213,6 @@ class DenseInt32Index {
     return this.__promote(labels);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   isubset(offsets) {
     /* validate subset */
     const { rindex } = this;
@@ -317,7 +314,6 @@ class KeyIndex {
     return new KeyIndex(labels);
   }
 
-  // eslint-disable-next-line class-methods-use-this
   isubset(offsets) {
     const { rindex } = this;
     const maxOffset = rindex.length;
@@ -347,7 +343,6 @@ class KeyIndex {
     return new KeyIndex(labelArray);
   }
 }
-/* eslint-enable class-methods-use-this */
 
 function isLabelIndex(i) {
   return (
@@ -358,3 +353,4 @@ function isLabelIndex(i) {
 }
 
 export { DenseInt32Index, IdentityInt32Index, KeyIndex, isLabelIndex };
+/* eslint-enable max-classes-per-file -- enable*/

client/src/util/typedCrossfilter/bitArray.js

@@ -1,5 +1,4 @@
-// jshint esversion: 6
-/* eslint no-bitwise: "off" */
+/* eslint-disable no-bitwise -- crossfilter relies on bitwise ops */
 
 // BitArray is a 2D bitarray with size [length, nBitWidth].
 // Each bit is referred to as a `dimension`.  Dimensions may be
@@ -291,3 +290,4 @@ class BitArray {
 }
 
 export default BitArray;
+/* eslint-enable no-bitwise -- enable */

client/src/util/typedCrossfilter/crossfilter.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line max-classes-per-file
+// eslint-disable-next-line max-classes-per-file -- classes are interrelated
 import PositiveIntervals from "./positiveIntervals";
 import BitArray from "./bitArray";
 import {
@@ -408,7 +408,7 @@ class ImmutableScalarDimension extends _ImmutableBaseDimension {
     this.index = makeSortIndex(array);
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  // eslint-disable-next-line class-methods-use-this -- needed for polymorphism
   _createValueArray(data, mapf, array) {
     // create dimension value array
     const len = data.length;
@@ -512,7 +512,7 @@ class ImmutableEnumDimension extends ImmutableScalarDimension {
     });
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  // eslint-disable-next-line class-methods-use-this -- enables polymorphism
   selectRange() {
     throw new Error("range selection unsupported on Enumerated dimension");
   }

client/src/util/typedCrossfilter/positiveIntervals.js

@@ -30,7 +30,8 @@ class PositiveIntervals {
         res.push(copy[i]);
       } else if (copy[i][1] > res[res.length - 1][1]) {
         // merge this into previous
-        res[res.length - 1][1] = copy[i][1]; // eslint-disable-line prefer-destructuring
+        // eslint-disable-line prefer-destructuring -- destructuring impedes readability
+        res[res.length - 1][1] = copy[i][1];
       }
     }
     return res;

client/src/util/typedCrossfilter/sort.js

@@ -1,6 +1,6 @@
 import { isTypedArray, isFpTypedArray } from "../typeHelpers";
 
-/* eslint no-bitwise: "off" */
+/* eslint-disable no-bitwise -- code relies on bitwise ops */
 
 /*
  ** fast sort and search, with separate code paths for floats (NaN ordering),
@@ -426,3 +426,4 @@ export function binarySearch(valueArray, value, first, last) {
   if (index !== last && value === valueArray[index]) return index;
   return last;
 }
+/* eslint-enable no-bitwise -- enable */