debug

README.md

@@ -28,7 +28,7 @@ Whether you need to visualize one thousand cells or one million, CELLxGENE Annot
 
 ### Quick start
 
-To install CELLxGENE Annotate you need Python 3.10+. We recommend [installing Annotate into a conda or virtual environment.](https://github.com/chanzuckerberg/cellxgene-documentation/blob/main/desktop/install.md)
+_To install CELLxGENE Annotate you need Python 3.10+_. We recommend [installing Annotate into a conda or virtual environment.](https://github.com/chanzuckerberg/cellxgene-documentation/blob/main/desktop/install.md)
 
 Install the package.
 

client/__tests__/e2e/config.js

@@ -1,4 +1,4 @@
-import * as ENV_DEFAULT from "Code/cellxgene/environment.default.json";
+import * as ENV_DEFAULT from "../../../environment.default.json";
 
 export const jestEnv = process.env.JEST_ENV || ENV_DEFAULT.JEST_ENV;
 export const appUrlBase =

client/__tests__/e2e/puppeteer.setup.js

@@ -5,8 +5,8 @@
  */
 
 import { setDefaultOptions } from "expect-puppeteer";
-import * as ENV_DEFAULT from "Code/cellxgene/environment.default.json";
 import { isDebug, isDev } from "./config";
+import * as ENV_DEFAULT from "../../../environment.default.json";
 
 // (thuang): This is the max time a test can take to run.
 // Since when debugging, we run slowMo and !headless, this means

client/__tests__/util/promiseLimit.test.js

@@ -76,7 +76,7 @@ describe("PromiseLimit", () => {
     const plimit = new PromiseLimit(1);
 
     let finishOrder = 0;
-    const callback = async () => {
+    const callback = () => async () => {
       await delay(100);
       const result = finishOrder;
       finishOrder += 1;
@@ -84,11 +84,11 @@ describe("PromiseLimit", () => {
     };
 
     const result = await Promise.all([
-      plimit.add(callback),
-      plimit.priorityAdd(4, callback),
-      plimit.priorityAdd(0, callback),
-      plimit.priorityAdd(1, callback),
-      plimit.priorityAdd(-1, callback),
+      plimit.add(callback()),
+      plimit.priorityAdd(4, callback()),
+      plimit.priorityAdd(0, callback()),
+      plimit.priorityAdd(1, callback()),
+      plimit.priorityAdd(-1, callback()),
     ]);
 
     expect(result).toEqual([0, 4, 2, 3, 1]);

client/configuration/eslint/eslint.js

@@ -82,14 +82,13 @@ module.exports = {
       },
       // Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
       // "extends": ["plugin:jest/recommended"]
-      plugins: ["jest", "no-floating-promise"],
+      plugins: ["jest"],
       rules: {
         "jest/no-disabled-tests": "warn",
         "jest/no-focused-tests": "error",
         "jest/no-identical-title": "error",
         "jest/prefer-to-have-length": "warn",
         "jest/valid-expect": "error",
-        "no-floating-promise/no-floating-promise": 2,
       },
     },
   ],

client/package.json

@@ -10,8 +10,8 @@
     "dev": "npm run build -- configuration/webpack/webpack.config.dev.js",
     "e2e": "jest --config __tests__/e2e/e2eJestConfig.json e2e/e2e.test.js",
     "e2e-annotations": "jest --config __tests__/e2e/e2eJestConfig.json e2e/e2eAnnotations.test.js",
-    "fmt": "eslint --fix __tests__",
-    "lint": "eslint --fix __tests__",
+    "fmt": "eslint --fix src __tests__",
+    "lint": "eslint --fix src __tests__",
     "prod": "npm run build -- configuration/webpack/webpack.config.prod.js",
     "test": "jest --testPathIgnorePatterns e2e",
     "prepare": "cd .. && husky install client/.husky"
@@ -92,7 +92,7 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/register": "^7.13.16",
     "@babel/runtime": "^7.13.16",
-    "@blueprintjs/eslint-plugin": "^6.1.4",
+    "@blueprintjs/eslint-plugin": "^0.3.0",
     "@sentry/webpack-plugin": "^1.15.0",
     "babel-jest": "^26.1.0",
     "babel-loader": "^8.1.0",
@@ -104,16 +104,15 @@
     "codecov": "^3.7.1",
     "css-loader": "^5.2.4",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-airbnb": "^19.0.4",
+    "eslint": "^7.24.0",
+    "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jest": "^24.3.5",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-no-floating-promise": "^2.0.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.0.8",
     "expect-puppeteer": "^5.0.0",

client/src/components/brushableHistogram/error.js

@@ -1,8 +1,8 @@
 import React from "react";
 import * as globals from "../../globals";
 
-function ErrorLoading({ displayName, zebra }) {
-  return <div
+const ErrorLoading = ({ displayName, zebra }) => (
+    <div
       style={{
         backgroundColor: zebra ? globals.lightestGrey : "white",
         fontStyle: "italic",
@@ -10,6 +10,6 @@ function ErrorLoading({ displayName, zebra }) {
     >
       <span>{`Failure loading ${displayName}`}</span>
     </div>
-}
+  );
 
 export default ErrorLoading;

client/src/components/brushableHistogram/histogram.js

@@ -5,7 +5,7 @@ import * as d3 from "d3";
 import maybeScientific from "../../util/maybeScientific";
 import clamp from "../../util/clamp";
 
-function Histogram({
+const Histogram = ({
   field,
   fieldForId,
   display,
@@ -18,7 +18,7 @@ function Histogram({
   isColorBy,
   selectionRange,
   mini,
-}) {
+}) => {
   const svgRef = useRef(null);
   const [brush, setBrush] = useState(null);
 
@@ -186,6 +186,6 @@ function Histogram({
       ref={svgRef}
     />
   );
-}
+};
 
 export default Histogram;

client/src/components/brushableHistogram/loading.js

@@ -3,8 +3,12 @@ import { Button } from "@blueprintjs/core";
 
 import * as globals from "../../globals";
 
-function StillLoading({ zebra, displayName }) {
-  return <div
+const StillLoading = ({ zebra, displayName }) => 
+  /*
+    Render a loading indicator for the field.
+    */
+   (
+    <div
       data-testclass="gene-loading-spinner"
       style={{
         padding: globals.leftSidebarSectionPadding,
@@ -33,6 +37,7 @@ function StillLoading({ zebra, displayName }) {
         </div>
       </div>
     </div>
-}
+  )
+;
 
 export default StillLoading;

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

@@ -71,7 +71,8 @@ class Category extends React.PureComponent {
     const { metadataField, annotations, obsCrossfilter } = this.props;
 
     return (
-      <AnnoDialog
+      <>
+        <AnnoDialog
           isActive={
             annotations.isAddingNewLabel &&
             annotations.categoryAddingNewLabel === metadataField
@@ -104,6 +105,7 @@ class Category extends React.PureComponent {
             />
           }
         />
+      </>
     );
   }
 }

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

@@ -105,7 +105,8 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
     const { metadataField, annotations } = this.props;
 
     return (
-      <AnnoDialog
+      <>
+        <AnnoDialog
           isActive={
             annotations.isEditingCategoryName &&
             annotations.categoryBeingEdited === metadataField
@@ -140,6 +141,7 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
             />
           }
         />
+      </>
     );
   }
 }

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

@@ -288,8 +288,11 @@ class Category extends React.PureComponent {
 
 export default Category;
 
-function StillLoading({ metadataField, checkboxID }) {
-  return <div
+const StillLoading = ({ metadataField, checkboxID }) => (
+  /*
+  We are still loading this category, so render a "busy" signal.
+  */
+  <div
     style={{
       maxWidth: globals.maxControlsWidth,
     }}
@@ -332,8 +335,8 @@ function StillLoading({ metadataField, checkboxID }) {
       </div>
     </div>
   </div>
-}
-function ErrorLoading({ metadataField, error }) {
+);
+const ErrorLoading = ({ metadataField, error }) => {
   console.error(error); // log error to console as it is unexpected.
   return (
     <div style={{ marginBottom: 10, marginTop: 4 }}>
@@ -349,7 +352,7 @@ function ErrorLoading({ metadataField, error }) {
       </span>
     </div>
   );
-}
+};
 
 const CategoryHeader = React.memo(
   ({

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

@@ -162,7 +162,7 @@ class CategoryValue extends React.Component {
     );
   };
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate = (nextProps, nextState) => {
     /*
     Checks to see if at least one of the following changed:
     * world state

client/src/components/embedding/index.js

@@ -109,7 +109,7 @@ const loadAllEmbeddingCounts = async ({ annoMatrix, available }) => {
   }));
 };
 
-function EmbeddingChoices({ onChange, annoMatrix, layoutChoice }) {
+const EmbeddingChoices = ({ onChange, annoMatrix, layoutChoice }) => {
   const { available } = layoutChoice;
   const { data, error, isPending } = useAsync({
     promiseFn: loadAllEmbeddingCounts,
@@ -149,4 +149,4 @@ function EmbeddingChoices({ onChange, annoMatrix, layoutChoice }) {
     );
   }
   return null;
-}
+};

client/src/components/framework/logo.js

@@ -1,7 +1,7 @@
 import React from "react";
 import icon from "../../images/icon.png";
 
-function Logo(props) {
+const Logo = (props) => {
   const { size } = props;
   return (
     <img
@@ -11,6 +11,6 @@ function Logo(props) {
       alt="CELLxGENE Annotate Logo"
      />
   );
-}
+};
 
 export default Logo;

client/src/components/geneExpression/menus/addGeneToGenesetDialogue.js

@@ -53,7 +53,8 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
     const { genesToAdd } = this.state;
 
     return (
-      <AnnoDialog
+      <>
+        <AnnoDialog
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
           inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{
@@ -80,6 +81,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
           handleSubmit={this.handleAddGeneToGeneSet}
           handleCancel={this.disableAddGeneMode}
         />
+      </>
     );
   }
 }

client/src/components/geneExpression/menus/createGenesetDialogue.js

@@ -125,7 +125,8 @@ class CreateGenesetDialogue extends React.PureComponent {
     const { genesetsUI, genesets } = this.props;
 
     return (
-      <Dialog
+      <>
+        <Dialog
           icon="tag"
           title="Create gene set"
           isOpen={genesetsUI.createGenesetModeActive}
@@ -209,6 +210,7 @@ class CreateGenesetDialogue extends React.PureComponent {
             </div>
           </form>
         </Dialog>
+      </>
     );
   }
 }

client/src/components/geneExpression/menus/editGenesetNameDialogue.js

@@ -109,7 +109,8 @@ class RenameGeneset extends React.PureComponent {
     } = this.props;
 
     return (
-      <AnnoDialog
+      <>
+        <AnnoDialog
           isActive={genesetsUI.isEditingGenesetName === originalGenesetName}
           inputProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
@@ -160,6 +161,7 @@ class RenameGeneset extends React.PureComponent {
           handleSubmit={this.renameGeneset}
           handleCancel={this.disableEditGenesetNameMode}
         />
+      </>
     );
   }
 }

client/src/components/graph/graph.js

@@ -935,7 +935,7 @@ class Graph extends React.Component {
   }
 }
 
-function ErrorLoading({ displayName, error, width, height }) {
+const ErrorLoading = ({ displayName, error, width, height }) => {
   console.log(error); // log to console as this is an unepected error
   return (
     <div
@@ -949,10 +949,14 @@ function ErrorLoading({ displayName, error, width, height }) {
       <span>{`Failure loading ${displayName}`}</span>
     </div>
   );
-}
+};
 
-function StillLoading({ displayName, width, height }) {
-  return <div
+const StillLoading = ({ displayName, width, height }) => 
+  /*
+  Render a busy/loading indicator
+  */
+   (
+    <div
       style={{
         position: "fixed",
         fontWeight: 500,
@@ -972,6 +976,7 @@ function StillLoading({ displayName, width, height }) {
         <span style={{ fontStyle: "italic" }}>Loading {displayName}</span>
       </div>
     </div>
-}
+  )
+;
 
 export default Graph;

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

@@ -167,7 +167,7 @@ class CentroidLabels extends PureComponent {
   }
 }
 
-function Label({
+const Label = ({
   label,
   dilatedValue,
   coords,
@@ -177,7 +177,7 @@ function Label({
   displayLabel,
   onMouseEnter,
   onMouseOut,
-}) {
+}) => {
   /*
   Render a label at a given coordinate.
   */
@@ -215,4 +215,4 @@ function Label({
       </text>
     </g>
   );
-}
+};

client/src/components/labelInput.js

@@ -159,7 +159,8 @@ export default class LabelInput extends React.PureComponent {
     };
     const { queryResults } = this.state;
     return (
-      <Suggest
+      <>
+        <Suggest
           fill
           inputValueRenderer={(i) => i.target}
           items={queryResults}
@@ -171,6 +172,7 @@ export default class LabelInput extends React.PureComponent {
           inputProps={inputProps}
           onKeyDown={this.handleKeyDown}
         />
+      </>
     );
   }
 }

client/src/components/miniHistogram/index.js

@@ -35,11 +35,11 @@ export default class MiniHistogram extends React.PureComponent {
     }
   };
 
-  componentDidMount() {
+  componentDidMount = () => {
     this.drawHistogram();
   };
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate = (prevProps) => {
     const { obsOrVarContinuousFieldDisplayName, bins } = this.props;
     if (
       prevProps.obsOrVarContinuousFieldDisplayName !==

client/src/components/miniStackedBar/index.js

@@ -42,12 +42,12 @@ export default class MiniStackedBar extends React.PureComponent {
     }
   };
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate = (prevProps) => {
     const { occupancy } = this.props;
     if (occupancy !== prevProps.occupancy) this.drawStacks();
   };
 
-  componentDidMount() {
+  componentDidMount = () => {
     this.drawStacks();
   };
 

client/src/components/util/truncate.js

@@ -32,7 +32,7 @@ const SECOND_HALF_INNER_STYLE = {
   right: 0,
 };
 
-export default function(props) {
+export default (props) => {
   const { children, isGenesetDescription, tooltipAddendum = "" } = props;
   // Truncate only support a single child with a text child
 

client/src/globals.js

@@ -1,6 +1,6 @@
 import { Colors } from "@blueprintjs/core";
-import ENV_DEFAULT from "Code/cellxgene/environment.default.json";
 import { dispatchNetworkErrorMessageToUser } from "./util/actionHelpers";
+import ENV_DEFAULT from "../../environment.default.json";
 
 /* overflow category values are created  using this string */
 export const overflowCategoryLabel = ": all other labels";