TS migration. #2288. (#2328)

* Added TS. Updated build and linting config. Added types.

* [ts-migrate][.] Rename files from JS/JSX to TS/TSX

Co-authored-by: ts-migrate <>

* [ts-migrate][.] Run TS Migrate

Co-authored-by: ts-migrate <>

* Corrected files mangled by ts-migrate.

* Updated lint config, minor linting.

* Re-enabled Husky.

* Updated tests and config.

* Reverted webpack devtool config.

* Removed obsolete snapshots.

* Added annotations snap.

* Updated tsconfig includes wrt linting.

* Removed ts-migrate.

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

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

@@ -5,11 +5,14 @@ import LabelInput from "../../labelInput";
 import parseBulkGeneString from "../../../util/parseBulkGeneString";
 import actions from "../../../actions";
 
+type State = any;
+
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => ({
-  genesetsUI: state.genesetsUI,
+  genesetsUI: (state as any).genesetsUI,
 }))
-class AddGeneToGenesetDialogue extends React.PureComponent {
-  constructor(props) {
+class AddGeneToGenesetDialogue extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
     super(props);
     this.state = {
       genesToAdd: "",
@@ -17,26 +20,24 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
   }
 
   disableAddGeneMode = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch } = this.props;
     dispatch({
       type: "geneset: disable add new genes mode",
     });
   };
 
-  handleAddGeneToGeneSet = (e) => {
+  handleAddGeneToGeneSet = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
     const { geneset, dispatch } = this.props;
     const { genesToAdd } = this.state;
-
-    const genesTmpHardcodedFormat = [];
-
+    const genesTmpHardcodedFormat: any = [];
     const genesArrayFromString = parseBulkGeneString(genesToAdd);
-
     genesArrayFromString.forEach((_gene) => {
       genesTmpHardcodedFormat.push({
         geneSymbol: _gene,
       });
     });
-
     dispatch(actions.genesetAddGenes(geneset, genesTmpHardcodedFormat));
     dispatch({
       type: "geneset: disable add new genes mode",
@@ -44,17 +45,18 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
     if (e) e.preventDefault();
   };
 
-  handleChange = (e) => {
+  handleChange = (e: any) => {
     this.setState({ genesToAdd: e });
   };
 
   render() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
     const { geneset, genesetsUI } = this.props;
     const { genesToAdd } = this.state;
-
     return (
       <>
         <AnnoDialog
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
           inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{
@@ -68,6 +70,7 @@ class AddGeneToGenesetDialogue extends React.PureComponent {
           validationError={false}
           annoInput={
             <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
               onChange={this.handleChange}
               inputProps={{
                 "data-testid": "add-genes",

client/src/components/geneExpression/menus/addGenes.tsx

@@ -20,7 +20,7 @@ import {
 import { memoize } from "../../../util/dataframe/util";
 import parseBulkGeneString from "../../../util/parseBulkGeneString";
 
-const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
+const renderGene = (fuzzySortResult: any, { handleClick, modifiers }: any) => {
   if (!modifiers.matchesPredicate) {
     return null;
   }
@@ -33,8 +33,7 @@ const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
       disabled={modifiers.disabled}
       data-testid={`suggest-menu-item-${geneName}`}
       key={geneName}
-      onClick={(g) =>
-        /* this fires when user clicks a menu item */
+      onClick={(g: any /* this fires when user clicks a menu item */) =>
         handleClick(g)
       }
       text={geneName}
@@ -42,22 +41,25 @@ const renderGene = (fuzzySortResult, { handleClick, modifiers }) => {
   );
 };
 
-const filterGenes = (query, genes) =>
+const filterGenes = (query: any, genes: any) =>
   /* fires on load, once, and then for each character typed into the input */
   fuzzysort.go(query, genes, {
     limit: 5,
     threshold: -10000, // don't return bad results
   });
 
+type AddGenesState = any;
+
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => {
   return {
-    annoMatrix: state.annoMatrix,
-    userDefinedGenes: state.controls.userDefinedGenes,
-    userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
+    annoMatrix: (state as any).annoMatrix,
+    userDefinedGenes: (state as any).controls.userDefinedGenes,
+    userDefinedGenesLoading: (state as any).controls.userDefinedGenesLoading,
   };
 })
-class AddGenes extends React.Component {
-  constructor(props) {
+class AddGenes extends React.Component<{}, AddGenesState> {
+  constructor(props: {}) {
     super(props);
     this.state = {
       bulkAdd: "",
@@ -69,14 +71,16 @@ class AddGenes extends React.Component {
   }
 
   componentDidMount() {
+    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
     this.updateState();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: {}) {
     this.updateState(prevProps);
   }
 
-  handleClick(g) {
+  handleClick(g: any) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, userDefinedGenes } = this.props;
     const { geneNames } = this.state;
     if (!g) return;
@@ -96,7 +100,7 @@ class AddGenes extends React.Component {
     }
   }
 
-  _genesToUpper = (listGenes) => {
+  _genesToUpper = (listGenes: any) => {
     // Has to be a Map to preserve index
     const upperGenes = new Map();
     for (let i = 0, { length } = listGenes; i < length; i += 1) {
@@ -107,9 +111,10 @@ class AddGenes extends React.Component {
   };
 
   // eslint-disable-next-line react/sort-comp -- memo requires a defined _genesToUpper
-  _memoGenesToUpper = memoize(this._genesToUpper, (arr) => arr);
+  _memoGenesToUpper = memoize(this._genesToUpper, (arr: any) => arr);
 
   handleBulkAddClick = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, userDefinedGenes } = this.props;
     const { bulkAdd, geneNames } = this.state;
 
@@ -159,7 +164,8 @@ class AddGenes extends React.Component {
     return undefined;
   };
 
-  async updateState(prevProps) {
+  async updateState(prevProps: any) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
     const { annoMatrix } = this.props;
     if (!annoMatrix) return;
     if (annoMatrix !== prevProps?.annoMatrix) {
@@ -210,6 +216,7 @@ class AddGenes extends React.Component {
   }
 
   render() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'userDefinedGenesLoading' does not exist ... Remove this comment to see the full error message
     const { userDefinedGenesLoading } = this.props;
     const { tab, bulkAdd, activeItem, status, geneNames } = this.state;
 
@@ -265,10 +272,12 @@ class AddGenes extends React.Component {
                 this.handleClick(g);
               }}
               initialContent={<MenuItem disabled text="Enter a gene…" />}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ "data-testid": string; }' is not assignabl... Remove this comment to see the full error message
               inputProps={{ "data-testid": "gene-search" }}
               inputValueRenderer={() => {
                 return "";
               }}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '(query: any, genes: any) => Fuzzysort.Result... Remove this comment to see the full error message
               itemListPredicate={filterGenes}
               onActiveItemChange={(item) => this.setState({ activeItem: item })}
               itemRenderer={renderGene}

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

@@ -7,15 +7,18 @@ import { Tooltip2 } from "@blueprintjs/popover2";
 import LabelInput from "../../labelInput";
 import actions from "../../../actions";
 
+type State = any;
+
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => ({
-  annotations: state.annotations,
-  schema: state.annoMatrix?.schema,
-  obsCrossfilter: state.obsCrossfilter,
-  genesets: state.genesets.genesets,
-  genesetsUI: state.genesetsUI,
+  annotations: (state as any).annotations,
+  schema: (state as any).annoMatrix?.schema,
+  obsCrossfilter: (state as any).obsCrossfilter,
+  genesets: (state as any).genesets.genesets,
+  genesetsUI: (state as any).genesetsUI,
 }))
-class CreateGenesetDialogue extends React.PureComponent {
-  constructor(props) {
+class CreateGenesetDialogue extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
     super(props);
     this.state = {
       genesetName: "",
@@ -24,7 +27,8 @@ class CreateGenesetDialogue extends React.PureComponent {
     };
   }
 
-  disableCreateGenesetMode = (e) => {
+  disableCreateGenesetMode = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch } = this.props;
     this.setState({
       genesetName: "",
@@ -38,33 +42,30 @@ class CreateGenesetDialogue extends React.PureComponent {
     if (e) e.preventDefault();
   };
 
-  createGeneset = (e) => {
+  createGeneset = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch } = this.props;
     const {
       genesetName,
       genesToPopulateGeneset,
       genesetDescription,
     } = this.state;
-
     dispatch({
       type: "geneset: create",
       genesetName: genesetName.trim(),
       genesetDescription,
     });
     if (genesToPopulateGeneset) {
-      const genesTmpHardcodedFormat = [];
-
+      const genesTmpHardcodedFormat: any = [];
       const genesArrayFromString = pull(
         uniq(genesToPopulateGeneset.split(/[ ,]+/)),
         ""
       );
-
       genesArrayFromString.forEach((_gene) => {
         genesTmpHardcodedFormat.push({
           geneSymbol: _gene,
         });
       });
-
       dispatch(actions.genesetAddGenes(genesetName, genesTmpHardcodedFormat));
     }
     dispatch({
@@ -81,34 +82,34 @@ class CreateGenesetDialogue extends React.PureComponent {
     return false;
   };
 
-  handleChange = (e) => {
+  handleChange = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
     const { genesets } = this.props;
     this.setState({ genesetName: e });
     this.validate(e, genesets);
   };
 
-  handleGenesetInputChange = (e) => {
+  handleGenesetInputChange = (e: any) => {
     this.setState({ genesToPopulateGeneset: e });
   };
 
-  handleDescriptionInputChange = (e) => {
+  handleDescriptionInputChange = (e: any) => {
     this.setState({ genesetDescription: e });
   };
 
-  instruction = (genesetName, genesets) => {
+  instruction = (genesetName: any, genesets: any) => {
     return genesets.has(genesetName)
       ? "Gene set name must be unique."
       : "New, unique gene set name";
   };
 
-  validate = (genesetName, genesets) => {
+  validate = (genesetName: any, genesets: any) => {
     if (genesets.has(genesetName)) {
       this.setState({
         nameErrorMessage: "There is already a geneset with that name",
       });
       return false;
     }
-
     if (
       genesetName.length > 1 &&
       // eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
@@ -128,8 +129,8 @@ class CreateGenesetDialogue extends React.PureComponent {
 
   render() {
     const { genesetName, nameErrorMessage } = this.state;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesetsUI' does not exist on type 'Read... Remove this comment to see the full error message
     const { genesetsUI, genesets } = this.props;
-
     return (
       <>
         <Dialog
@@ -147,6 +148,7 @@ class CreateGenesetDialogue extends React.PureComponent {
               <div style={{ marginBottom: 20 }}>
                 <p>{this.instruction(genesetName, genesets)}</p>
                 <LabelInput
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
                   onChange={this.handleChange}
                   inputProps={{
                     "data-testid": "create-geneset-input",
@@ -171,6 +173,7 @@ class CreateGenesetDialogue extends React.PureComponent {
                   gene set
                 </p>
                 <LabelInput
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
                   onChange={this.handleDescriptionInputChange}
                   inputProps={{
                     "data-testid": "add-geneset-description",
@@ -186,6 +189,7 @@ class CreateGenesetDialogue extends React.PureComponent {
                   gene set
                 </p>
                 <LabelInput
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ onChange: (e: any) => void; inputProps: { ... Remove this comment to see the full error message
                   onChange={this.handleGenesetInputChange}
                   inputProps={{
                     "data-testid": "add-genes",

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

@@ -3,23 +3,29 @@ import { connect } from "react-redux";
 import AnnoDialog from "../../annoDialog";
 import LabelInput from "../../labelInput";
 
+type State = any;
+
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => ({
-  annotations: state.annotations,
-  schema: state.annoMatrix?.schema,
-  obsCrossfilter: state.obsCrossfilter,
-  genesetsUI: state.genesetsUI,
-  genesets: state.genesets.genesets,
+  annotations: (state as any).annotations,
+  schema: (state as any).annoMatrix?.schema,
+  obsCrossfilter: (state as any).obsCrossfilter,
+  genesetsUI: (state as any).genesetsUI,
+  genesets: (state as any).genesets.genesets,
 }))
-class RenameGeneset extends React.PureComponent {
-  constructor(props) {
+class RenameGeneset extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
     super(props);
     this.state = {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGeneset' does not exist on type '{... Remove this comment to see the full error message
       newGenesetName: props.parentGeneset,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGenesetDescription' does not exist... Remove this comment to see the full error message
       newGenesetDescription: props.parentGenesetDescription,
     };
   }
 
-  disableEditGenesetNameMode = (e) => {
+  disableEditGenesetNameMode = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch } = this.props;
     this.setState({
       newGenesetName: "",
@@ -31,10 +37,10 @@ class RenameGeneset extends React.PureComponent {
     if (e) e.preventDefault();
   };
 
-  renameGeneset = (e) => {
+  renameGeneset = (e: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, genesetsUI } = this.props;
     const { newGenesetName, newGenesetDescription } = this.state;
-
     dispatch({
       type: "geneset: update",
       genesetName: genesetsUI.isEditingGenesetName,
@@ -53,15 +59,15 @@ class RenameGeneset extends React.PureComponent {
     return false;
   };
 
-  handleChange = (e) => {
+  handleChange = (e: any) => {
     this.setState({ newGenesetName: e });
   };
 
-  handleChangeDescription = (e) => {
+  handleChangeDescription = (e: any) => {
     this.setState({ newGenesetDescription: e });
   };
 
-  validate = (genesetName, genesets) => {
+  validate = (genesetName: any, genesets: any) => {
     return (
       !genesets.has(genesetName) &&
       // eslint-disable-next-line no-control-regex -- unicode 0-31 127-65535
@@ -73,15 +79,19 @@ class RenameGeneset extends React.PureComponent {
   render() {
     const { newGenesetName, newGenesetDescription } = this.state;
     const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesetsUI' does not exist on type 'Read... Remove this comment to see the full error message
       genesetsUI,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGeneset' does not exist on type 'Read... Remove this comment to see the full error message
       parentGeneset,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'parentGenesetDescription' does not exist on type 'Read... Remove this comment to see the full error message
       parentGenesetDescription,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Read... Remove this comment to see the full error message
       genesets,
     } = this.props;
-
     return (
       <>
         <AnnoDialog
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isEditingGenesetName === parentGeneset}
           inputProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
@@ -101,6 +111,7 @@ class RenameGeneset extends React.PureComponent {
           }
           annoInput={
             <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; onChange: (e: any) => void; in... Remove this comment to see the full error message
               label={newGenesetName}
               onChange={this.handleChange}
               inputProps={{
@@ -114,6 +125,7 @@ class RenameGeneset extends React.PureComponent {
           secondaryInstructions="Edit description"
           secondaryInput={
             <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; onChange: (e: any) => void; in... Remove this comment to see the full error message
               label={newGenesetDescription}
               onChange={this.handleChangeDescription}
               inputProps={{ "data-testid": "change geneset description" }}

client/src/components/geneExpression/menus/genesetMenus.tsx

@@ -17,19 +17,23 @@ import * as globals from "../../../globals";
 import actions from "../../../actions";
 import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
 
+type State = any;
+
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => {
   return {
-    genesetsUI: state.genesetsUI,
-    colorAccessor: state.colors.colorAccessor,
+    genesetsUI: (state as any).genesetsUI,
+    colorAccessor: (state as any).colors.colorAccessor,
   };
 })
-class GenesetMenus extends React.PureComponent {
-  constructor(props) {
+class GenesetMenus extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
     super(props);
     this.state = {};
   }
 
   activateAddGeneToGenesetMode = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, geneset } = this.props;
     dispatch({
       type: "geneset: activate add new genes mode",
@@ -38,6 +42,7 @@ class GenesetMenus extends React.PureComponent {
   };
 
   activateEditGenesetNameMode = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, geneset } = this.props;
 
     dispatch({
@@ -47,6 +52,7 @@ class GenesetMenus extends React.PureComponent {
   };
 
   handleColorByEntireGeneset = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, geneset } = this.props;
 
     dispatch({
@@ -56,11 +62,13 @@ class GenesetMenus extends React.PureComponent {
   };
 
   handleDeleteGeneset = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, geneset } = this.props;
     dispatch(actions.genesetDelete(geneset));
   };
 
   render() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'geneset' does not exist on type 'Readonl... Remove this comment to see the full error message
     const { geneset, genesetsEditable, createText, colorAccessor } = this.props;
 
     const isColorBy = geneset === colorAccessor;
@@ -84,6 +92,7 @@ class GenesetMenus extends React.PureComponent {
                 minimal
               />
             </Tooltip2>
+            {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ geneset: any; }' is not assignable to type... Remove this comment to see the full error message */}
             <AddGeneToGenesetDialogue geneset={geneset} />
             <Popover
               interactionKind={PopoverInteractionKind.HOVER}