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/reducers/annoMatrix.ts

@@ -2,7 +2,7 @@
 Reducer for the annoMatrix
 */
 
-const AnnoMatrix = (state = null, action) => {
+const AnnoMatrix = (state = null, action: any) => {
   if (action.annoMatrix) {
     return action.annoMatrix;
   }

client/src/reducers/annotations.ts

@@ -28,7 +28,7 @@ const Annotations = (
     labelEditable: { category: null, label: null },
     promptForFilename: true,
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     case "configuration load complete": {

client/src/reducers/autosave.ts

@@ -11,8 +11,8 @@ const Autosave = (
     // error state
     error: false,
   },
-  action,
-  nextSharedState
+  action: any,
+  nextSharedState: any
 ) => {
   switch (action.type) {
     case "annoMatrix: init complete": {

client/src/reducers/cascade.ts

@@ -1,4 +1,4 @@
-export default function cascadeReducers(arg) {
+export default function cascadeReducers(arg: any) {
   /*
   Combine a set of cascading reducers into a single reducer.  Cascading
   reducers are reducers which may rely on state computed by another reducer.
@@ -23,7 +23,7 @@ export default function cascadeReducers(arg) {
   */
   const reducers = arg instanceof Map ? arg : new Map(arg);
   const reducerKeys = [...reducers.keys()];
-  return (prevState, action) => {
+  return (prevState: any, action: any) => {
     const nextState = {};
     let stateChange = false;
     for (let i = 0, l = reducerKeys.length; i < l; i += 1) {
@@ -36,6 +36,7 @@ export default function cascadeReducers(arg) {
         nextState,
         prevState
       );
+      // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
       nextState[key] = nextStateForKey;
       stateChange = stateChange || nextStateForKey !== prevStateForKey;
     }

client/src/reducers/categoricalSelection.ts

@@ -11,7 +11,11 @@ Label state default (if missing) is up to the component, but typically true.
   ...
 }
 */
-const CategoricalSelection = (state, action, nextSharedState) => {
+const CategoricalSelection = (
+  state: any,
+  action: any,
+  nextSharedState: any
+) => {
   switch (action.type) {
     case "initial data load complete":
     case "subset to selection":
@@ -19,6 +23,7 @@ const CategoricalSelection = (state, action, nextSharedState) => {
     case "set clip quantiles": {
       const { annoMatrix } = nextSharedState;
       const newState = CH.createCategoricalSelection(
+        // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
         CH.selectableCategoryNames(annoMatrix.schema)
       );
       return newState;

client/src/reducers/centroidLabels.ts

@@ -2,7 +2,11 @@ const initialState = {
   showLabels: false,
 };
 
-const centroidLabels = (state = initialState, action, sharedNextState) => {
+const centroidLabels = (
+  state = initialState,
+  action: any,
+  sharedNextState: any
+) => {
   const {
     colors: { colorAccessor },
   } = sharedNextState;

client/src/reducers/colors.ts

@@ -7,7 +7,7 @@ const ColorsReducer = (
     colorMode: null /* by continuous, by expression */,
     colorAccessor: null /* tissue, Apod */,
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     case "universe: user color load success": {

client/src/reducers/config.ts

@@ -4,7 +4,7 @@ const Config = (
     features: null,
     parameters: null,
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     case "initial data load start":

client/src/reducers/continuousSelection.ts

@@ -1,6 +1,6 @@
 import { makeContinuousDimensionName } from "../util/nameCreators";
 
-const ContinuousSelection = (state = {}, action) => {
+const ContinuousSelection = (state = {}, action: any) => {
   switch (action.type) {
     case "reset subset":
     case "subset to selection":
@@ -24,6 +24,7 @@ const ContinuousSelection = (state = {}, action) => {
         action.continuousNamespace,
         action.selection
       );
+      // @ts-expect-error ts-migrate(2537) FIXME: Type '{}' has no matching index signature for type... Remove this comment to see the full error message
       const { [name]: deletedField, ...newState } = state;
       return newState;
     }

client/src/reducers/controls.ts

@@ -20,7 +20,7 @@ const Controls = (
 
     datasetDrawer: false,
   },
-  action
+  action: any
 ) => {
   /*
   For now, log anything looking like an error to the console.

client/src/reducers/differential.ts

@@ -5,7 +5,7 @@ const Differential = (
     celllist1: null,
     celllist2: null,
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     case "request differential expression started":

client/src/reducers/genesets.ts

@@ -30,7 +30,7 @@ const GeneSets = (
     lastTid: undefined,
     genesets: new Map(),
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     /**
@@ -353,6 +353,7 @@ const GeneSets = (
       const { tid } = action;
       if (!Number.isInteger(tid) || tid < 0)
         throw new Error("TID must be a positive integer number");
+      // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
       if (state.lastTid !== undefined && tid < state.lastTid)
         throw new Error("TID may not be decremented.");
       return {
@@ -374,7 +375,7 @@ const GeneSets = (
       const diffExpGeneSets = [];
       for (const polarity of Object.keys(genesetNames)) {
         const genes = new Map(
-          data[polarity].map((diffExpGene) => [
+          data[polarity].map((diffExpGene: any) => [
             diffExpGene[0],
             {
               geneSymbol: diffExpGene[0],
@@ -382,8 +383,10 @@ const GeneSets = (
           ])
         );
         diffExpGeneSets.push([
+          // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
           genesetNames[polarity],
           {
+            // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
             genesetName: genesetNames[polarity],
             genesetDescription: "",
             genes,
@@ -391,6 +394,7 @@ const GeneSets = (
         ]);
       }
 
+      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       const genesets = new Map([...diffExpGeneSets, ...state.genesets]); // clone
 
       return {

client/src/reducers/genesetsUI.ts

@@ -7,7 +7,7 @@ const GeneSetsUI = (
     isEditingGenesetName: false,
     isAddingGenesToGeneset: false,
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     /**

client/src/reducers/graphSelection.ts

@@ -3,7 +3,7 @@ const GraphSelection = (
     tool: "lasso", // what selection tool mode (lasso, brush, ...)
     selection: { mode: "all" }, // current selection, which is tool specific
   },
-  action
+  action: any
 ) => {
   switch (action.type) {
     case "set clip quantiles":

client/src/reducers/layoutChoice.ts

@@ -7,15 +7,15 @@ about commonly used names.  Preferentially, pick in the following order:
   3. "pca"
   4. give up, use the first available
 */
-function bestDefaultLayout(layouts) {
+function bestDefaultLayout(layouts: any) {
   const preferredNames = ["umap", "tsne", "pca"];
   const idx = preferredNames.findIndex((name) => layouts.indexOf(name) !== -1);
   if (idx !== -1) return preferredNames[idx];
   return layouts[0];
 }
 
-function setToDefaultLayout(schema) {
-  const available = schema.layout.obs.map((v) => v.name).sort();
+function setToDefaultLayout(schema: any) {
+  const available = schema.layout.obs.map((v: any) => v.name).sort();
   const current = bestDefaultLayout(available);
   const currentDimNames = schema.layout.obsByName[current].dims;
   return { available, current, currentDimNames };
@@ -27,8 +27,8 @@ const LayoutChoice = (
     current: undefined, // name of the current layout, eg, 'umap'
     currentDimNames: [], // dimension name
   },
-  action,
-  nextSharedState
+  action: any,
+  nextSharedState: any
 ) => {
   switch (action.type) {
     case "initial data load complete": {

client/src/reducers/obsCrossfilter.ts

@@ -2,7 +2,7 @@
 Reducer for the obsCrossfilter
 */
 
-const ObsCrossfilter = (state = null, action) => {
+const ObsCrossfilter = (state = null, action: any) => {
   if (action.obsCrossfilter) {
     return action.obsCrossfilter;
   }

client/src/reducers/pointDilation.ts

@@ -3,7 +3,7 @@ const initialState = {
   categoryField: "",
 };
 
-const pointDialation = (state = initialState, action) => {
+const pointDialation = (state = initialState, action: any) => {
   const { metadataField, label: categoryField } = action;
 
   switch (action.type) {

client/src/reducers/undoable.ts

@@ -61,13 +61,15 @@ const filterActionKey = `${historyKeyPrefix}filterAction`;
 const pendingKey = `${historyKeyPrefix}pending`;
 const defaultHistoryLimit = -100;
 
-const Undoable = (reducer, undoableKeys, options = {}) => {
+const Undoable = (reducer: any, undoableKeys: any, options = {}) => {
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'debug' does not exist on type '{}'.
   const { debug } = options;
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'historyLimit' does not exist on type '{}... Remove this comment to see the full error message
   let { historyLimit } = options;
   if (!historyLimit) historyLimit = defaultHistoryLimit;
   if (historyLimit > 0) historyLimit = -historyLimit;
   const actionFilter =
-    options.actionFilter || (() => ({ [filterActionKey]: "save" }));
+    (options as any).actionFilter || (() => ({ [filterActionKey]: "save" }));
 
   if (!Array.isArray(undoableKeys) || undoableKeys.length === 0)
     throw new Error("undoable keys array must be specified");
@@ -76,7 +78,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Undo the current to previous history
   */
-  function undo(currentState) {
+  function undo(currentState: any) {
     const past = currentState[pastKey];
     const future = currentState[futureKey];
     if (past.length === 0) return currentState;
@@ -99,7 +101,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Replay future, previously undone.
   */
-  function redo(currentState) {
+  function redo(currentState: any) {
     const past = currentState[pastKey] || [];
     const future = currentState[futureKey] || [];
     if (future.length === 0) return currentState;
@@ -122,7 +124,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Clear the history state.  No side-effects on current state.
   */
-  function clear(currentState) {
+  function clear(currentState: any) {
     return {
       ...currentState,
       [pastKey]: [],
@@ -135,7 +137,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Reduce current action, with no history side-effects
   */
-  function skip(currentState, action, filterState) {
+  function skip(currentState: any, action: any, filterState: any) {
     const past = currentState[pastKey] || [];
     const future = currentState[futureKey] || [];
     const pending = currentState[pendingKey];
@@ -152,7 +154,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Save current state in the history, then reduce action.
   */
-  function save(currentState, action, filterState) {
+  function save(currentState: any, action: any, filterState: any) {
     const past = currentState[pastKey] || [];
     const currentUndoableState = Object.entries(currentState).filter((kv) =>
       undoableKeysSet.has(kv[0])
@@ -172,7 +174,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Save current state as pending history change.  No other side effects.
   */
-  function stashPending(currentState) {
+  function stashPending(currentState: any) {
     const currentUndoableState = Object.entries(currentState).filter((kv) =>
       undoableKeysSet.has(kv[0])
     );
@@ -185,7 +187,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Cancel pending history state change.  No other side effects.
   */
-  function cancelPending(currentState) {
+  function cancelPending(currentState: any) {
     return {
       ...currentState,
       [pendingKey]: null,
@@ -195,7 +197,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   /*
   Push pending state onto the history stack
   */
-  function applyPending(currentState) {
+  function applyPending(currentState: any) {
     const past = currentState[pastKey] || [];
     const pendingState = currentState[pendingKey];
     const newPast = push(past, pendingState, historyLimit);
@@ -215,7 +217,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
       [filterStateKey]: {},
       [pendingKey]: null,
     },
-    action
+    action: any
   ) => {
     if (debug > 1) console.log("---- ACTION", action.type);
     const aType = action.type;
@@ -275,7 +277,7 @@ const Undoable = (reducer, undoableKeys, options = {}) => {
   };
 };
 
-function push(arr, val, limit = undefined) {
+function push(arr: any, val: any, limit = undefined) {
   /*
   functional array push, with a max length limit to the new array.
   Like Array.push, except it returns new array and discards as needed

client/src/reducers/undoableConfig.ts

@@ -125,7 +125,7 @@ See graph definition for the transitions that use each.
 
 Signature:  (fsm, transition, reducerState, reducerAction) => undoableAction
 */
-const stashPending = (fsm) => ({
+const stashPending = (fsm: any) => ({
   [actionKey]: "stashPending",
   [stateKey]: { fsm },
 });
@@ -137,11 +137,13 @@ const applyPending = () => ({
   [actionKey]: "applyPending",
   [stateKey]: { fsm: null },
 });
+// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'fsm' implicitly has an 'any' type.
 const skip = (fsm, transition) => ({
   [actionKey]: "skip",
   [stateKey]: { fsm: transition.to !== "done" ? fsm : null },
 });
 const clear = () => ({ [actionKey]: "clear", [stateKey]: { fsm: null } });
+// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'fsm' implicitly has an 'any' type.
 const save = (fsm, transition) => ({
   [actionKey]: "save",
   [stateKey]: { fsm: transition.to !== "done" ? fsm : null },
@@ -153,7 +155,7 @@ StateMachine when it doesn't know what to do.
 
 Signature:  (fsm, event, from) => undoableAction
 */
-const onFsmError = (fsm, event, from) => {
+const onFsmError = (fsm: any, event: any, from: any) => {
   console.error(`FSM error [event: "${event}", state: "${from}"]`, fsm);
   // In production, try to recover gracefully if we have unexpected state
   return clear();
@@ -181,7 +183,11 @@ Basic approach:
   * only implement complex state machines where absolutely required (eg,
     multi-event selection and the like)
 */
-const actionFilter = (debug) => (state, action, prevFilterState) => {
+const actionFilter = (debug: any) => (
+  state: any,
+  action: any,
+  prevFilterState: any
+) => {
   const actionType = action.type;
   const filterState = {
     ...prevFilterState,
@@ -191,6 +197,7 @@ const actionFilter = (debug) => (state, action, prevFilterState) => {
     return { [actionKey]: "skip", [stateKey]: filterState };
   }
   if (
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
     debounceOnActions.has(actionType) &&
     shallowObjectEq(action, prevFilterState.prevAction)
   ) {
@@ -226,7 +233,7 @@ return true if objA and objB are ===, OR if:
   - have same own properties
   - all values are strict equal (===)
 */
-function shallowObjectEq(objA, objB) {
+function shallowObjectEq(objA: any, objB: any) {
   if (objA === objB) return true;
   if (!objA || !objB) return false;
   if (!shallowArrayEq(Object.keys(objA), Object.keys(objB))) return false;
@@ -238,7 +245,7 @@ function shallowObjectEq(objA, objB) {
 return true if arrA and arrB contain the same strict-equal values,
 in the same order.
 */
-function shallowArrayEq(arrA, arrB) {
+function shallowArrayEq(arrA: any, arrB: any) {
   if (arrA.length !== arrB.length) return false;
   for (let i = 0, l = arrA.length; i < l; i += 1) {
     if (arrA[i] !== arrB[i]) return false;

client/src/reducers/undoableFsm.ts

@@ -19,12 +19,13 @@ b) compound actions that should be collapsed into a single history change.
 */
 
 const createFsmTransitions = (
-  stashPending,
-  cancelPending,
-  applyPending,
-  skip,
-  clear,
-  save
+  stashPending: any,
+  cancelPending: any,
+  applyPending: any,
+  skip: any,
+  // @ts-expect-error ts-migrate(6133) FIXME: 'clear' is declared but its value is never read.
+  clear: any,
+  save: any
 ) => {
   return [
     /* graph selection brushing */
@@ -45,7 +46,8 @@ const createFsmTransitions = (
       from: "graph brush in progress",
       to: "done",
       /* if current selection is all, cancelPending.  Else, applyPending */
-      action: (fsm, transition, data) =>
+      // @ts-expect-error ts-migrate(6133) FIXME: 'fsm' is declared but its value is never read.
+      action: (fsm: any, transition: any, data: any) =>
         data.state.graphSelection.selection.mode === "all"
           ? cancelPending()
           : applyPending(),
@@ -75,7 +77,8 @@ const createFsmTransitions = (
       from: "graph lasso in progress",
       to: "done",
       /* if current selection is all, cancelPending.  Else, applyPending */
-      action: (fsm, transition, data) =>
+      // @ts-expect-error ts-migrate(6133) FIXME: 'fsm' is declared but its value is never read.
+      action: (fsm: any, transition: any, data: any) =>
         data.state.graphSelection.selection.mode === "all"
           ? cancelPending()
           : applyPending(),

client/src/reducers/userInfo.ts

@@ -1,4 +1,4 @@
-const UserInfo = (state = {}, action) => {
+const UserInfo = (state = {}, action: any) => {
   switch (action.type) {
     case "initial data load start":
       return {