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/__tests__/util/stateManager/colorHelpers.test.ts

@@ -81,6 +81,7 @@ describe("categorical color helpers", () => {
         ),
     ],
     null,
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'KeyIndex' is not assignable to p... Remove this comment to see the full error message
     new Dataframe.KeyIndex(["continuousColumn", "categoricalColumn"])
   );
 
@@ -95,6 +96,7 @@ describe("categorical color helpers", () => {
     const data = obsDataframe.col("categoricalColumn").asArray();
     const cats = schema.annotations.obsByName.categoricalColumn.categories;
     for (let i = 0; i < schema.dataframe.nObs; i += 1) {
+      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
       expect(makeScale(ct.rgb[i])).toEqual(ct.scale(cats.indexOf(data[i])));
     }
   });
@@ -112,6 +114,7 @@ describe("categorical color helpers", () => {
     const data = obsDataframe.col("categoricalColumn").asArray();
     const cats = schemaClone.annotations.obsByName.categoricalColumn.categories;
     for (let i = 0; i < schemaClone.dataframe.nObs; i += 1) {
+      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
       expect(makeScale(ct.rgb[i])).toEqual(ct.scale(cats.indexOf(data[i])));
     }
   });
@@ -122,7 +125,7 @@ describe("categorical color helpers", () => {
       Array.from(schema.annotations.obsByName.categoricalColumn.categories)
     );
     const userDefinedColorTable = {
-      categoricalColumn: shuffleCats.reduce((acc, label) => {
+      categoricalColumn: shuffleCats.reduce((acc: any, label: any) => {
         acc[label] = randRGBColor();
         return acc;
       }, {}),
@@ -136,12 +139,14 @@ describe("categorical color helpers", () => {
       "categoricalColumn",
       obsDataframe,
       schema,
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{}' is not assignable to paramet... Remove this comment to see the full error message
       userColors
     );
     expect(ct).toBeDefined();
     const data = obsDataframe.col("categoricalColumn").asArray();
     for (let i = 0; i < schema.dataframe.nObs; i += 1) {
       expect(makeScale(ct.rgb[i])).toEqual(
+        // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
         ct.scale(cats.indexOf(data[i])).toString()
       );
     }
@@ -154,31 +159,31 @@ TODO:
 2. user defined colors
 */
 
-function indexSchema(schema) {
+function indexSchema(schema: any) {
   schema.annotations.obsByName = Object.fromEntries(
-    schema.annotations?.obs?.columns?.map((v) => [v.name, v]) ?? []
+    schema.annotations?.obs?.columns?.map((v: any) => [v.name, v]) ?? []
   );
   schema.annotations.varByName = Object.fromEntries(
-    schema.annotations?.var?.columns?.map((v) => [v.name, v]) ?? []
+    schema.annotations?.var?.columns?.map((v: any) => [v.name, v]) ?? []
   );
   schema.layout.obsByName = Object.fromEntries(
-    schema.layout?.obs?.map((v) => [v.name, v]) ?? []
+    schema.layout?.obs?.map((v: any) => [v.name, v]) ?? []
   );
   schema.layout.varByName = Object.fromEntries(
-    schema.layout?.var?.map((v) => [v.name, v]) ?? []
+    schema.layout?.var?.map((v: any) => [v.name, v]) ?? []
   );
 
   return schema;
 }
 
-function makeScale(rgb) {
+function makeScale(rgb: any) {
   // make a scale string from a rgb float triple
   return `rgb(${(rgb[0] * 255) >>> 0}, ${(rgb[1] * 255) >>> 0}, ${
     (rgb[2] * 256) >>> 0
   })`;
 }
 
-function shuffle(array) {
+function shuffle(array: any) {
   for (let i = array.length - 1; i > 0; i -= 1) {
     const j = (Math.random() * (i + 1)) >>> 0;
     [array[i], array[j]] = [array[j], array[i]];

client/__tests__/util/stateManager/fbs.test.ts

@@ -24,6 +24,7 @@ describe("encode/decode", () => {
     expect(dfA.columns).toEqual(columns);
 
     const colIndex = new KeyIndex(["a", "b", "c", "d"]);
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'KeyIndex' is not assignable to p... Remove this comment to see the full error message
     const dfWithColIdx = new Dataframe([3, 4], columns, null, colIndex);
     const dfB = decodeMatrixFBS(encodeMatrixFBS(dfWithColIdx));
     expect([dfB.nRows, dfB.nCols]).toEqual(dfWithColIdx.dims);

client/__tests__/util/stateManager/sampleResponses.ts

@@ -75,6 +75,7 @@ const aSchemaResponse = {
 
 const anAnnotationsObsJSONResponse = {
   names: ["name", "field1", "field2", "field3", "field4"],
+  // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
   data: _()
     .range(nObs)
     .map((idx) => [
@@ -91,6 +92,7 @@ const anAnnotationsObsJSONResponse = {
 
 const anAnnotationsVarJSONResponse = {
   names: ["fieldA", "fieldB", "fieldC", "fieldD", "name"],
+  // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
   data: _()
     .range(nVar)
     .map((idx) => [
@@ -105,7 +107,7 @@ const anAnnotationsVarJSONResponse = {
     .value(),
 };
 
-function encodeTypedArray(builder, uType, uData) {
+function encodeTypedArray(builder: any, uType: any, uData: any) {
   const uTypeName = NetEncoding.TypedArray[uType];
   const ArrayType = NetEncoding[uTypeName];
   const dv = ArrayType.createDataVector(builder, uData);
@@ -114,7 +116,7 @@ function encodeTypedArray(builder, uType, uData) {
   return builder.endObject();
 }
 
-function encodeMatrix(columns, colIndex = undefined) {
+function encodeMatrix(columns: any, colIndex = undefined) {
   /*
   IMPORTANT: this is not a general purpose encoder.  in particular,
   it doesn't correctly handle all column index types, nor does it
@@ -123,6 +125,7 @@ function encodeMatrix(columns, colIndex = undefined) {
   encodeMatrixFBS in matrix.py is more general.  This is used only
   as a testing santity check (alt implementation).
   */
+  // @ts-expect-error ts-migrate(2554) FIXME: Expected 0 arguments, but got 1.
   const utf8Encoder = new TextEncoder("utf-8");
   const builder = new flatbuffers.Builder(1024);
   const cols = map(columns, (carr) => {
@@ -172,11 +175,13 @@ function encodeMatrix(columns, colIndex = undefined) {
 
 const anAnnotationsObsFBSResponse = (() => {
   const columns = zip(...anAnnotationsObsJSONResponse.data).slice(1);
+  // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string[]' is not assignable to p... Remove this comment to see the full error message
   return encodeMatrix(columns, anAnnotationsObsJSONResponse.names);
 })();
 
 const anAnnotationsVarFBSResponse = (() => {
   const columns = zip(...anAnnotationsVarJSONResponse.data).slice(1);
+  // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string[]' is not assignable to p... Remove this comment to see the full error message
   return encodeMatrix(columns, anAnnotationsVarJSONResponse.names);
 })();
 
@@ -185,11 +190,13 @@ const aLayoutFBSResponse = (() => {
     new Float32Array(nObs).fill(Math.random()),
     new Float32Array(nObs).fill(Math.random()),
   ];
+  // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'string[]' is not assignable to p... Remove this comment to see the full error message
   return encodeMatrix(coords, ["umap_0", "umap_1"]);
 })();
 
 const aDataObsResponse = {
   var: [2, 4, 29],
+  // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
   obs: _()
     .range(nObs)
     .map((idx) => [idx, Math.random(), Math.random(), Math.random()])