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/continuous/continuous.js

@@ -1,32 +0,0 @@
-/* rc slider https://www.npmjs.com/package/rc-slider */
-
-import React from "react";
-import { connect } from "react-redux";
-import HistogramBrush from "../brushableHistogram";
-
-@connect((state) => ({
-  schema: state.annoMatrix?.schema,
-}))
-class Continuous extends React.PureComponent {
-  render() {
-    /* initial value for iterator to simulate index, ranges is an object */
-    const { schema } = this.props;
-    if (!schema) return null;
-    const obsIndex = schema.annotations.obs.index;
-    const allContinuousNames = schema.annotations.obs.columns
-      .filter((col) => col.type === "int32" || col.type === "float32")
-      .filter((col) => col.name !== obsIndex)
-      .filter((col) => !col.writable) // skip user annotations - they will be treated as categorical
-      .map((col) => col.name);
-
-    return (
-      <div>
-        {allContinuousNames.map((key, zebra) => (
-          <HistogramBrush key={key} field={key} isObs zebra={zebra % 2 === 0} />
-        ))}
-      </div>
-    );
-  }
-}
-
-export default Continuous;

client/src/components/continuous/continuous.tsx

@@ -0,0 +1,34 @@
+/* rc slider https://www.npmjs.com/package/rc-slider */
+
+import React from "react";
+import { connect } from "react-redux";
+import HistogramBrush from "../brushableHistogram";
+
+// @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) => ({
+  schema: (state as any).annoMatrix?.schema,
+}))
+class Continuous extends React.PureComponent {
+  render() {
+    /* initial value for iterator to simulate index, ranges is an object */
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
+    const { schema } = this.props;
+    if (!schema) return null;
+    const obsIndex = schema.annotations.obs.index;
+    const allContinuousNames = schema.annotations.obs.columns
+      .filter((col: any) => col.type === "int32" || col.type === "float32")
+      .filter((col: any) => col.name !== obsIndex)
+      .filter((col: any) => !col.writable) // skip user annotations - they will be treated as categorical
+      .map((col: any) => col.name);
+    return (
+      <div>
+        {allContinuousNames.map((key: any, zebra: any) => (
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
+          <HistogramBrush key={key} field={key} isObs zebra={zebra % 2 === 0} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Continuous;

client/src/components/continuous/setupParallelCoordinates.ts

@@ -5,7 +5,7 @@
 ******************************************/
 import * as d3 from "d3";
 
-const setupParallelCoordinates = (width, height, margin) => {
+const setupParallelCoordinates = (width: any, height: any, margin: any) => {
   const container = d3.select("#parcoords");
 
   const svg = container
@@ -24,10 +24,15 @@ const setupParallelCoordinates = (width, height, margin) => {
     .style("margin-top", `${margin.top}px`)
     .style("margin-left", `${margin.left}px`);
 
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
   const ctx = canvas.node().getContext("2d");
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
   ctx.globalCompositeOperation = "darken";
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
   ctx.globalAlpha = 0.15;
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
   ctx.lineWidth = 1.5;
+  // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
   ctx.scale(devicePixelRatio, devicePixelRatio);
 
   return {

client/src/components/continuous/util.ts

@@ -12,14 +12,14 @@ export const innerHeight = height - 2;
 
 export const devicePixelRatio = window.devicePixelRatio || 1;
 
-export const createDimensions = (data) => {
-  const newArr = [];
+export const createDimensions = (data: any) => {
+  const newArr: any = [];
   each(data, (value, key) => {
     if (value.range) {
       newArr.push({
         key /* room for confusion: lodash calls this key, it's also the name of the property parallel coords code is looking for */,
         type: {
-          within: (d, extent, dim) =>
+          within: (d: any, extent: any, dim: any) =>
             extent[0] <= dim.scale(d) && dim.scale(d) <= extent[1],
         },
         scale: d3
@@ -32,16 +32,17 @@ export const createDimensions = (data) => {
   return newArr;
 };
 
+// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
 export const yAxis = d3.axisLeft();
 
 export const brushstart = () => {
-  d3.event.sourceEvent.stopPropagation();
+  (d3 as any).event.sourceEvent.stopPropagation();
 };
 
 // Unused.
 // export const d3_functor = v => (typeof v === "function" ? v : () => v);
-export const project = (d, dimensions, xscale) =>
-  dimensions.map((p, i) => {
+export const project = (d: any, dimensions: any, xscale: any) =>
+  dimensions.map((p: any, i: any) => {
     // check if data element has property and contains a value
     if (!(p.key in d) || d[p.key] === null) return null;