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/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"