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/actions/annotation.ts

@@ -9,9 +9,9 @@ import { MatrixFBS, AnnotationsHelpers } from "../util/stateManager";
 const { isUserAnnotation } = AnnotationsHelpers;
 
 export const annotationCreateCategoryAction = (
-  newCategoryName,
-  categoryToDuplicate
-) => async (dispatch, getState) => {
+  newCategoryName: any,
+  categoryToDuplicate: any
+) => async (dispatch: any, getState: any) => {
   /*
   Add a new user-created category to the obs annotations.
 
@@ -89,9 +89,9 @@ export const annotationCreateCategoryAction = (
 };
 
 export const annotationRenameCategoryAction = (
-  oldCategoryName,
-  newCategoryName
-) => (dispatch, getState) => {
+  oldCategoryName: any,
+  newCategoryName: any
+) => (dispatch: any, getState: any) => {
   /*
   Rename a user-created annotation category
   */
@@ -124,9 +124,9 @@ export const annotationRenameCategoryAction = (
   });
 };
 
-export const annotationDeleteCategoryAction = (categoryName) => (
-  dispatch,
-  getState
+export const annotationDeleteCategoryAction = (categoryName: any) => (
+  dispatch: any,
+  getState: any
 ) => {
   /*
   Delete a user-created category
@@ -149,10 +149,10 @@ export const annotationDeleteCategoryAction = (categoryName) => (
 };
 
 export const annotationCreateLabelInCategory = (
-  categoryName,
-  labelName,
-  assignSelected
-) => async (dispatch, getState) => {
+  categoryName: any,
+  labelName: any,
+  assignSelected: any
+) => async (dispatch: any, getState: any) => {
   /*
   Add a new label to a user-defined category.  If assignSelected is true, assign
   the label to all currently selected cells.
@@ -188,9 +188,9 @@ export const annotationCreateLabelInCategory = (
 };
 
 export const annotationDeleteLabelFromCategory = (
-  categoryName,
-  labelName
-) => async (dispatch, getState) => {
+  categoryName: any,
+  labelName: any
+) => async (dispatch: any, getState: any) => {
   /*
   delete a label from a user-defined category
   */
@@ -218,10 +218,10 @@ export const annotationDeleteLabelFromCategory = (
 };
 
 export const annotationRenameLabelInCategory = (
-  categoryName,
-  oldLabelName,
-  newLabelName
-) => async (dispatch, getState) => {
+  categoryName: any,
+  oldLabelName: any,
+  newLabelName: any
+) => async (dispatch: any, getState: any) => {
   /*
   label name change
   */
@@ -255,9 +255,9 @@ export const annotationRenameLabelInCategory = (
 };
 
 export const annotationLabelCurrentSelection = (
-  categoryName,
-  labelName
-) => async (dispatch, getState) => {
+  categoryName: any,
+  labelName: any
+) => async (dispatch: any, getState: any) => {
   /*
   set the label on all currently selected
   */
@@ -284,13 +284,16 @@ export const annotationLabelCurrentSelection = (
   });
 };
 
-function writableAnnotations(annoMatrix) {
+function writableAnnotations(annoMatrix: any) {
   return annoMatrix.schema.annotations.obs.columns
-    .filter((s) => s.writable)
-    .map((s) => s.name);
+    .filter((s: any) => s.writable)
+    .map((s: any) => s.name);
 }
 
-export const needToSaveObsAnnotations = (annoMatrix, lastSavedAnnoMatrix) => {
+export const needToSaveObsAnnotations = (
+  annoMatrix: any,
+  lastSavedAnnoMatrix: any
+) => {
   /*
   Return true if there are LIKELY user-defined annotation modifications between the two
   annoMatrices.  Technically not an action creator, but intimately intertwined
@@ -314,11 +317,14 @@ export const needToSaveObsAnnotations = (annoMatrix, lastSavedAnnoMatrix) => {
 
   // no schema changes; check for change in contents
   return currentWritable.some(
-    (col) => annoMatrix.col(col) !== lastSavedAnnoMatrix.col(col)
+    (col: any) => annoMatrix.col(col) !== lastSavedAnnoMatrix.col(col)
   );
 };
 
-export const saveObsAnnotationsAction = () => async (dispatch, getState) => {
+export const saveObsAnnotationsAction = () => async (
+  dispatch: any,
+  getState: any
+) => {
   /*
   Save the user-created obs annotations IF any have changed.
   */
@@ -388,7 +394,10 @@ export const saveObsAnnotationsAction = () => async (dispatch, getState) => {
   }
 };
 
-export const saveGenesetsAction = () => async (dispatch, getState) => {
+export const saveGenesetsAction = () => async (
+  dispatch: any,
+  getState: any
+) => {
   const state = getState();
 
   // bail if gene sets not available, or in readonly mode.
@@ -465,7 +474,7 @@ export const saveGenesetsAction = () => async (dispatch, getState) => {
         res,
       });
     }
-    return Promise.all([
+    return await Promise.all([
       dispatch({
         type: "autosave: genesets complete",
         lastSavedGenesets: genesets,

client/src/actions/embedding.ts

@@ -6,9 +6,9 @@ import { AnnoMatrixObsCrossfilter } from "../annoMatrix";
 import { _setEmbeddingSubset } from "../util/stateManager/viewStackHelpers";
 
 export async function _switchEmbedding(
-  prevAnnoMatrix,
-  prevCrossfilter,
-  newEmbeddingName
+  prevAnnoMatrix: any,
+  prevCrossfilter: any,
+  newEmbeddingName: any
 ) {
   /*
   DRY helper used by embedding action creators
@@ -25,9 +25,9 @@ export async function _switchEmbedding(
   return [annoMatrix, obsCrossfilter];
 }
 
-export const layoutChoiceAction = (newLayoutChoice) => async (
-  dispatch,
-  getState
+export const layoutChoiceAction = (newLayoutChoice: any) => async (
+  dispatch: any,
+  getState: any
 ) => {
   /*
   On layout choice, make sure we have selected all on the previous layout, AND the new

client/src/actions/geneset.ts

@@ -21,7 +21,10 @@ The behavior manifest in these action creators:
 Note that crossfilter indices are lazy created, as needed.
 */
 
-export const genesetDelete = (genesetName) => (dispatch, getState) => {
+export const genesetDelete = (genesetName: any) => (
+  dispatch: any,
+  getState: any
+) => {
   const state = getState();
   const { genesets } = state;
   const gs = genesets?.genesets?.get(genesetName) ?? {};
@@ -40,9 +43,9 @@ export const genesetDelete = (genesetName) => (dispatch, getState) => {
   });
 };
 
-export const genesetAddGenes = (genesetName, genes) => async (
-  dispatch,
-  getState
+export const genesetAddGenes = (genesetName: any, genes: any) => async (
+  dispatch: any,
+  getState: any
 ) => {
   const state = getState();
   const { obsCrossfilter: prevObsCrossfilter, annoMatrix } = state;
@@ -50,7 +53,7 @@ export const genesetAddGenes = (genesetName, genes) => async (
   const varIndex = schema.annotations.var.index;
   const df = await annoMatrix.fetch("var", varIndex);
   const geneNames = df.col(varIndex).asArray();
-  genes = genes.reduce((acc, gene) => {
+  genes = genes.reduce((acc: any, gene: any) => {
     if (geneNames.indexOf(gene.geneSymbol) === -1) {
       postUserErrorToast(
         `${gene.geneSymbol} doesn't appear to be a valid gene name.`
@@ -78,9 +81,9 @@ export const genesetAddGenes = (genesetName, genes) => async (
   });
 };
 
-export const genesetDeleteGenes = (genesetName, geneSymbols) => (
-  dispatch,
-  getState
+export const genesetDeleteGenes = (genesetName: any, geneSymbols: any) => (
+  dispatch: any,
+  getState: any
 ) => {
   const state = getState();
   const obsCrossfilter = dropGeneset(dispatch, state, genesetName, geneSymbols);
@@ -97,7 +100,11 @@ export const genesetDeleteGenes = (genesetName, geneSymbols) => (
 Private
 */
 
-function dropGenesetSummaryDimension(obsCrossfilter, state, genesetName) {
+function dropGenesetSummaryDimension(
+  obsCrossfilter: any,
+  state: any,
+  genesetName: any
+) {
   const { annoMatrix, genesets } = state;
   const varIndex = annoMatrix.schema.annotations?.var?.index;
   const gs = genesets?.genesets?.get(genesetName) ?? {};
@@ -113,7 +120,7 @@ function dropGenesetSummaryDimension(obsCrossfilter, state, genesetName) {
   return obsCrossfilter.dropDimension("X", query);
 }
 
-function dropGeneDimension(obsCrossfilter, state, gene) {
+function dropGeneDimension(obsCrossfilter: any, state: any, gene: any) {
   const { annoMatrix } = state;
   const varIndex = annoMatrix.schema.annotations?.var?.index;
   const query = {
@@ -126,10 +133,16 @@ function dropGeneDimension(obsCrossfilter, state, gene) {
   return obsCrossfilter.dropDimension("X", query);
 }
 
-function dropGeneset(dispatch, state, genesetName, geneSymbols) {
+function dropGeneset(
+  dispatch: any,
+  state: any,
+  genesetName: any,
+  geneSymbols: any
+) {
   const { obsCrossfilter: prevObsCrossfilter } = state;
   const obsCrossfilter = geneSymbols.reduce(
-    (crossfilter, gene) => dropGeneDimension(crossfilter, state, gene),
+    (crossfilter: any, gene: any) =>
+      dropGeneDimension(crossfilter, state, gene),
     dropGenesetSummaryDimension(prevObsCrossfilter, state, genesetName)
   );
   dispatch({
@@ -137,7 +150,7 @@ function dropGeneset(dispatch, state, genesetName, geneSymbols) {
     continuousNamespace: { isGeneSetSummary: true },
     selection: genesetName,
   });
-  geneSymbols.forEach((g) =>
+  geneSymbols.forEach((g: any) =>
     dispatch({
       type: "continuous metadata histogram cancel",
       continuousNamespace: { isUserDefined: true },

client/src/actions/index.ts

@@ -15,7 +15,7 @@ import * as genesetActions from "./geneset";
 /*
 return promise fetching user-configured colors
 */
-async function userColorsFetchAndLoad(dispatch) {
+async function userColorsFetchAndLoad(dispatch: any) {
   return fetchJson("colors").then((response) =>
     dispatch({
       type: "universe: user color load success",
@@ -28,7 +28,7 @@ async function schemaFetch() {
   return fetchJson("schema");
 }
 
-async function configFetch(dispatch) {
+async function configFetch(dispatch: any) {
   return fetchJson("config").then((response) => {
     const config = { ...globals.configDefaults, ...response.config };
     dispatch({
@@ -39,7 +39,7 @@ async function configFetch(dispatch) {
   });
 }
 
-async function userInfoFetch(dispatch) {
+async function userInfoFetch(dispatch: any) {
   return fetchJson("userinfo").then((response) => {
     const { userinfo: userInfo } = response || {};
     dispatch({
@@ -50,7 +50,7 @@ async function userInfoFetch(dispatch) {
   });
 }
 
-async function genesetsFetch(dispatch, config) {
+async function genesetsFetch(dispatch: any, config: any) {
   /* request genesets ONLY if the backend supports the feature */
   const defaultResponse = {
     genesets: [],
@@ -71,25 +71,26 @@ async function genesetsFetch(dispatch, config) {
   }
 }
 
-function prefetchEmbeddings(annoMatrix) {
+function prefetchEmbeddings(annoMatrix: any) {
   /*
   prefetch requests for all embeddings
   */
   const { schema } = annoMatrix;
-  const available = schema.layout.obs.map((v) => v.name);
-  available.forEach((embName) => annoMatrix.prefetch("emb", embName));
+  const available = schema.layout.obs.map((v: any) => v.name);
+  available.forEach((embName: any) => annoMatrix.prefetch("emb", embName));
 }
 
 /*
 Application bootstrap
 */
 const doInitialDataLoad = () =>
-  catchErrorsWrap(async (dispatch) => {
+  catchErrorsWrap(async (dispatch: any) => {
     dispatch({ type: "initial data load start" });
 
     try {
       const [config, schema] = await Promise.all([
         configFetch(dispatch),
+        // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
         schemaFetch(dispatch),
         userColorsFetchAndLoad(dispatch),
         userInfoFetch(dispatch),
@@ -113,7 +114,7 @@ const doInitialDataLoad = () =>
       const layoutSchema = schema?.schema?.layout?.obs ?? [];
       if (
         defaultEmbedding &&
-        layoutSchema.some((s) => s.name === defaultEmbedding)
+        layoutSchema.some((s: any) => s.name === defaultEmbedding)
       ) {
         dispatch(embActions.layoutChoiceAction(defaultEmbedding));
       }
@@ -122,21 +123,22 @@ const doInitialDataLoad = () =>
     }
   }, true);
 
-function requestSingleGeneExpressionCountsForColoringPOST(gene) {
+function requestSingleGeneExpressionCountsForColoringPOST(gene: any) {
   return {
     type: "color by expression",
     gene,
   };
 }
 
-const requestUserDefinedGene = (gene) => ({
+const requestUserDefinedGene = (gene: any) => ({
   type: "request user defined gene success",
+
   data: {
     genes: [gene],
   },
 });
 
-const dispatchDiffExpErrors = (dispatch, response) => {
+const dispatchDiffExpErrors = (dispatch: any, response: any) => {
   switch (response.status) {
     case 403:
       dispatchNetworkErrorMessageToUser(
@@ -159,10 +161,11 @@ const dispatchDiffExpErrors = (dispatch, response) => {
   }
 };
 
-const requestDifferentialExpression = (set1, set2, num_genes = 50) => async (
-  dispatch,
-  getState
-) => {
+const requestDifferentialExpression = (
+  set1: any,
+  set2: any,
+  num_genes = 50
+) => async (dispatch: any, getState: any) => {
   dispatch({ type: "request differential expression started" });
   try {
     /*
@@ -210,7 +213,8 @@ const requestDifferentialExpression = (set1, set2, num_genes = 50) => async (
     const varIndex = await annoMatrix.fetch("var", varIndexName);
     const diffexpLists = { negative: [], positive: [] };
     for (const polarity of Object.keys(diffexpLists)) {
-      diffexpLists[polarity] = response[polarity].map((v) => [
+      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+      diffexpLists[polarity] = response[polarity].map((v: any) => [
         varIndex.at(v[0], varIndexName),
         ...v.slice(1),
       ]);
@@ -229,7 +233,7 @@ const requestDifferentialExpression = (set1, set2, num_genes = 50) => async (
   }
 };
 
-function fetchJson(pathAndQuery) {
+function fetchJson(pathAndQuery: any) {
   return doJsonRequest(
     `${globals.API.prefix}${globals.API.version}${pathAndQuery}`
   );

client/src/actions/selection.ts

@@ -2,11 +2,11 @@
 Action creators for selection 
 */
 export const selectContinuousMetadataAction = (
-  type,
-  query,
-  range,
+  type: any,
+  query: any,
+  range: any,
   oldProps = {}
-) => async (dispatch, getState) => {
+) => async (dispatch: any, getState: any) => {
   const { obsCrossfilter: prevObsCrossfilter } = getState();
 
   const selection = range
@@ -29,13 +29,13 @@ export const selectContinuousMetadataAction = (
 };
 
 export const selectCategoricalMetadataAction = (
-  type, // action type
-  metadataField, // annotation category name
-  labels,
-  label, // the label being selected/deselected
-  isSelected, // bool
+  type: any, // action type
+  metadataField: any, // annotation category name
+  labels: any,
+  label: any, // the label being selected/deselected
+  isSelected: any, // bool
   oldProps = {}
-) => async (dispatch, getState) => {
+) => async (dispatch: any, getState: any) => {
   const {
     obsCrossfilter: prevObsCrossfilter,
     categoricalSelection,
@@ -43,7 +43,7 @@ export const selectCategoricalMetadataAction = (
 
   const labelSelectionState = new Map(categoricalSelection[metadataField]);
   labels.forEach(
-    (l) => labelSelectionState.has(l) || labelSelectionState.set(l, true)
+    (l: any) => labelSelectionState.has(l) || labelSelectionState.set(l, true)
   );
   labelSelectionState.set(label, isSelected);
 
@@ -70,19 +70,19 @@ export const selectCategoricalMetadataAction = (
 };
 
 export const selectCategoricalAllMetadataAction = (
-  type, // action type
-  metadataField, // annotation category name
-  labels,
-  isSelected, // bool, select all or none
+  type: any, // action type
+  metadataField: any, // annotation category name
+  labels: any,
+  isSelected: any, // bool, select all or none
   oldProps = {}
-) => async (dispatch, getState) => {
+) => async (dispatch: any, getState: any) => {
   const {
     obsCrossfilter: prevObsCrossfilter,
     categoricalSelection,
   } = getState();
 
   const labelSelectionState = new Map(categoricalSelection[metadataField]);
-  labels.forEach((label) => labelSelectionState.set(label, isSelected));
+  labels.forEach((label: any) => labelSelectionState.set(label, isSelected));
 
   const selection = { mode: isSelected ? "all" : "none" };
   const obsCrossfilter = await prevObsCrossfilter.select(
@@ -108,10 +108,11 @@ export const graphBrushStartAction = () =>
   /* no change to crossfilter until a change fires */
   ({ type: "graph brush start" });
 
-const _graphBrushWithinRectAction = (type, embName, brushCoords) => async (
-  dispatch,
-  getState
-) => {
+const _graphBrushWithinRectAction = (
+  type: any,
+  embName: any,
+  brushCoords: any
+) => async (dispatch: any, getState: any) => {
   const { obsCrossfilter: prevObsCrossfilter } = getState();
 
   const selection = { mode: "within-rect", ...brushCoords };
@@ -128,7 +129,10 @@ const _graphBrushWithinRectAction = (type, embName, brushCoords) => async (
   });
 };
 
-const _graphAllAction = (type, embName) => async (dispatch, getState) => {
+const _graphAllAction = (type: any, embName: any) => async (
+  dispatch: any,
+  getState: any
+) => {
   const { obsCrossfilter: prevObsCrossfilter } = getState();
 
   const obsCrossfilter = await prevObsCrossfilter.select("emb", embName, {
@@ -141,30 +145,30 @@ const _graphAllAction = (type, embName) => async (dispatch, getState) => {
   });
 };
 
-export const graphBrushChangeAction = (embName, brushCoords) =>
+export const graphBrushChangeAction = (embName: any, brushCoords: any) =>
   _graphBrushWithinRectAction("graph brush change", embName, brushCoords);
 
-export const graphBrushEndAction = (embName, brushCoords) =>
+export const graphBrushEndAction = (embName: any, brushCoords: any) =>
   _graphBrushWithinRectAction("graph brush end", embName, brushCoords);
 
-export const graphBrushCancelAction = (embName) =>
+export const graphBrushCancelAction = (embName: any) =>
   _graphAllAction("graph brush cancel", embName);
-export const graphBrushDeselectAction = (embName) =>
+export const graphBrushDeselectAction = (embName: any) =>
   _graphAllAction("graph brush deselect", embName);
 
 export const graphLassoStartAction = () =>
   /* no change to crossfilter until a change fires */
   ({ type: "graph lasso start" });
 
-export const graphLassoCancelAction = (embName) =>
+export const graphLassoCancelAction = (embName: any) =>
   _graphAllAction("graph lasso cancel", embName);
 
-export const graphLassoDeselectAction = (embName) =>
+export const graphLassoDeselectAction = (embName: any) =>
   _graphAllAction("graph lasso cancel", embName);
 
-export const graphLassoEndAction = (embName, polygon) => async (
-  dispatch,
-  getState
+export const graphLassoEndAction = (embName: any, polygon: any) => async (
+  dispatch: any,
+  getState: any
 ) => {
   const { obsCrossfilter: prevObsCrossfilter } = getState();
 
@@ -188,7 +192,10 @@ export const graphLassoEndAction = (embName, polygon) => async (
 /*
 Differential expression set selection
 */
-export const setCellSetFromSelection = (cellSetId) => (dispatch, getState) => {
+export const setCellSetFromSelection = (cellSetId: any) => (
+  dispatch: any,
+  getState: any
+) => {
   const { obsCrossfilter } = getState();
   const selected = obsCrossfilter.allSelectedLabels();
 

client/src/actions/viewStack.ts

@@ -18,7 +18,10 @@ import {
   _userResetSubsetAnnoMatrix,
 } from "../util/stateManager/viewStackHelpers";
 
-export const clipAction = (min, max) => (dispatch, getState) => {
+export const clipAction = (min: any, max: any) => (
+  dispatch: any,
+  getState: any
+) => {
   /*
   apply a clip to the current annoMatrix.  By convention, the clip
   view is ALWAYS the top view.
@@ -34,7 +37,7 @@ export const clipAction = (min, max) => (dispatch, getState) => {
   });
 };
 
-export const subsetAction = () => (dispatch, getState) => {
+export const subsetAction = () => (dispatch: any, getState: any) => {
   /*
   Subset the annoMatrix to the current crossfilter selection by pushing a 
   subset view.
@@ -58,7 +61,7 @@ export const subsetAction = () => (dispatch, getState) => {
   });
 };
 
-export const resetSubsetAction = () => (dispatch, getState) => {
+export const resetSubsetAction = () => (dispatch: any, getState: any) => {
   /*
   Reset the annoMatrix to all data.  Because we may have multiple views
   stacked, we pop them all.  By convention, any clip transformation will