chore: misc typing (#849)

chanzuckerberg · Mar 25, 2024 · 92e478f · 92e478f
1 parent 188c4de
commit 92e478f
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 109 deletions.
diff --git a/client/configuration/lint-staged/lint-staged.config.js b/client/configuration/lint-staged/lint-staged.config.js
@@ -1,4 +1,5 @@
 module.exports = {
   "*.{js,ts,jsx,tsx}": "eslint --fix",
   "src/**/*": "prettier --write --ignore-unknown",
+  "*.{ts,tsx}": "tsc --noEmit",
 };
diff --git a/client/package.json b/client/package.json
@@ -16,7 +16,7 @@
     "e2e-stage": "CXG_URL_BASE=https://cellxgene.staging.single-cell.czi.technology playwright test",
     "e2e-prod": "CXG_URL_BASE=https://cellxgene.cziscience.com playwright test",
     "fmt": "eslint --fix src __tests__",
-    "lint": "eslint src __tests__ & npm run type-check",
+    "lint": "eslint src __tests__ && npm run type-check",
     "prod": "npm run build -- configuration/webpack/webpack.config.prod.js",
     "type-check": "tsc --noEmit",
     "create-supported-browsers-regex": "echo \"module.exports = $(browserslist-useragent-regexp --allowHigherVersions);\" > configuration/webpack/SUPPORTED_BROWSERS_REGEX.js",

diff --git a/client/src/components/brushableHistogram/index.tsx b/client/src/components/brushableHistogram/index.tsx
@@ -14,6 +14,7 @@ import ErrorLoading from "./error";
 import { Dataframe } from "../../util/dataframe";
 import { track } from "../../analytics";
 import { EVENTS } from "../../analytics/events";
+import { RootState } from "../../reducers";
 
 const MARGIN = {
   LEFT: 10, // Space for 0 tick label on X axis
@@ -32,32 +33,33 @@ const MARGIN_MINI = {
 const WIDTH_MINI = 120 - MARGIN_MINI.LEFT - MARGIN_MINI.RIGHT;
 const HEIGHT_MINI = 15 - MARGIN_MINI.TOP - MARGIN_MINI.BOTTOM;
 
+interface BrushableHistogramOwnProps {
+  isObs?: boolean;
+  isUserDefined?: boolean;
+  isGeneSetSummary?: boolean;
+  field: string;
+}
+
+type BrushableHistogramProps = Partial<RootState> & BrushableHistogramOwnProps;
+
 // @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, ownProps) => {
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{}'.
+@connect((state: RootState, ownProps: BrushableHistogramOwnProps) => {
   const { isObs, isUserDefined, isGeneSetSummary, field } = ownProps;
   const myName = makeContinuousDimensionName(
     { isObs, isUserDefined, isGeneSetSummary },
     field
   );
   return {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-    annoMatrix: (state as any).annoMatrix,
-    isScatterplotXXaccessor:
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      (state as any).controls.scatterplotXXaccessor === field,
-    isScatterplotYYaccessor:
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      (state as any).controls.scatterplotYYaccessor === field,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-    continuousSelectionRange: (state as any).continuousSelection[myName],
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+    annoMatrix: state.annoMatrix,
+    isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === field,
+    isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === field,
+    continuousSelectionRange: state.continuousSelection[myName],
     isColorAccessor:
-      (state as any).colors.colorAccessor === field &&
-      (state as any).colors.colorMode !== "color by categorical metadata",
+      state.colors.colorAccessor === field &&
+      state.colors.colorMode !== "color by categorical metadata",
   };
 })
-class HistogramBrush extends React.PureComponent {
+class HistogramBrush extends React.PureComponent<BrushableHistogramProps> {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
   static watchAsync(props: any, prevProps: any) {
     return !shallowEqual(props.watchProps, prevProps.watchProps);
@@ -81,18 +83,8 @@ class HistogramBrush extends React.PureComponent {
   onBrush = (selection: any, x: any, eventType: any) => {
     const type = `continuous metadata histogram ${eventType}`;
     return () => {
-      const {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
-        dispatch,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
-        field,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
-        isObs,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
-        isUserDefined,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
-        isGeneSetSummary,
-      } = this.props;
+      const { dispatch, field, isObs, isUserDefined, isGeneSetSummary } =
+        this.props;
 
       // ignore programmatically generated events
       // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
@@ -129,18 +121,8 @@ class HistogramBrush extends React.PureComponent {
     ) =>
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
     () => {
-      const {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
-        dispatch,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
-        field,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
-        isObs,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
-        isUserDefined,
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
-        isGeneSetSummary,
-      } = this.props;
+      const { dispatch, field, isObs, isUserDefined, isGeneSetSummary } =
+        this.props;
       const minAllowedBrushSize = 10;
       const smallAmountToAvoidInfiniteLoop = 0.1;
 
@@ -204,38 +186,29 @@ class HistogramBrush extends React.PureComponent {
   handleSetGeneAsScatterplotX = () => {
     track(EVENTS.EXPLORER_PLOT_X_BUTTON_CLICKED);
 
-    // @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, field } = this.props;
     dispatch({
       type: "set scatterplot x",
       data: field,
     });
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   handleSetGeneAsScatterplotY = () => {
     track(EVENTS.EXPLORER_PLOT_Y_BUTTON_CLICKED);
 
-    // @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, field } = this.props;
     dispatch({
       type: "set scatterplot y",
       data: field,
     });
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   removeHistogram = () => {
     const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
       dispatch,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
       field,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
       isColorAccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotXXaccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotYYaccessor,
     } = this.props;
     dispatch({
@@ -261,14 +234,22 @@ class HistogramBrush extends React.PureComponent {
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   fetchAsyncProps = async () => {
-    // @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, width, onGeneExpressionComplete } = this.props;
     const { isClipped } = annoMatrix;
 
     const query = this.createQuery();
-    // @ts-expect-error ts-migrate(2488) FIXME: Type 'any[] | null' must have a '[Symbol.iterator]... Remove this comment to see the full error message
+    if (!query) {
+      return {
+        histogram: null,
+        miniHistogram: null,
+        range: null,
+        unclippedRange: null,
+        unclippedRangeColor: null,
+        isSingleValue: null,
+        OK2Render: false,
+      };
+    }
     const df: Dataframe = await annoMatrix.fetch(...query, globals.numBinsObsX);
     const column = df.icol(0);
 
@@ -383,7 +364,6 @@ class HistogramBrush extends React.PureComponent {
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   createQuery() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
     const { isObs, isGeneSetSummary, field, setGenes, annoMatrix } = this.props;
     const { schema } = annoMatrix;
     if (isObs) {
@@ -422,35 +402,21 @@ class HistogramBrush extends React.PureComponent {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
   render() {
     const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
       dispatch,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
       annoMatrix,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
       field,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
       isColorAccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
       isUserDefined,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
       isGeneSetSummary,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotXXaccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotYYaccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'zebra' does not exist on type 'Readonly<... Remove this comment to see the full error message
       zebra,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'continuousSelectionRange' does not exist... Remove this comment to see the full error message
       continuousSelectionRange,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
       isObs,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'mini' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       mini,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'setGenes' does not exist on type 'Readon... Remove this comment to see the full error message
       setGenes,
     } = this.props;
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
     let { width } = this.props;
     if (!width) {
       width = mini ? WIDTH_MINI : WIDTH;

diff --git a/client/src/components/continuous/continuous.tsx b/client/src/components/continuous/continuous.tsx
@@ -4,41 +4,43 @@ import React from "react";
 import { connect } from "react-redux";
 import HistogramBrush from "../brushableHistogram";
 import Collapse from "../../util/collapse";
+import { RootState } from "../../reducers";
+import AnnoMatrix from "../../annoMatrix/annoMatrix";
+import { AnnotationColumnSchema } from "../../common/types/schema";
 
-// @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) => ({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-  schema: (state as any).annoMatrix?.schema,
-}))
-class Continuous extends React.PureComponent {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
+interface ContinuousProps {
+  schema: AnnoMatrix["schema"];
+}
+
+function mapStateToProps(state: RootState) {
+  return {
+    schema: state.annoMatrix?.schema,
+  };
+}
+class Continuous extends React.PureComponent<ContinuousProps, never> {
   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
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      .filter((col: any) => col.type === "int32" || col.type === "float32")
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      .filter((col: any) => col.name !== obsIndex)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      .filter((col: any) => !col.writable) // skip user annotations - they will be treated as categorical
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-      .map((col: any) => col.name);
+      .filter(
+        (col: AnnotationColumnSchema) =>
+          col.type === "int32" || col.type === "float32"
+      )
+      .filter((col: AnnotationColumnSchema) => col.name !== obsIndex)
+      .filter((col: AnnotationColumnSchema) => !col.writable) // skip user annotations - they will be treated as categorical
+      .map((col: AnnotationColumnSchema) => col.name);
     return allContinuousNames.length ? (
       <div>
         <Collapse>
           <span style={{ paddingLeft: 10 }}>Continuous</span>
-          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS. */}
-          {allContinuousNames.map((key: any, zebra: any) => (
+          {allContinuousNames.map((key, index) => (
             <HistogramBrush
               key={key}
-              // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
               field={key}
               isObs
-              zebra={zebra % 2 === 0}
+              zebra={index % 2 === 0}
               onGeneExpressionComplete={() => {}}
             />
           ))}
@@ -48,4 +50,4 @@ class Continuous extends React.PureComponent {
   }
 }
 
-export default Continuous;
+export default connect(mapStateToProps)(Continuous);
diff --git a/client/src/components/geneExpression/gene.tsx b/client/src/components/geneExpression/gene.tsx
@@ -221,7 +221,6 @@ class Gene extends React.Component<Props, State> {
             {!geneIsExpanded ? (
               <div style={{ width: MINI_HISTOGRAM_WIDTH }}>
                 <HistogramBrush
-                  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
                   isUserDefined
                   field={gene}
                   mini
@@ -294,7 +293,6 @@ class Gene extends React.Component<Props, State> {
         </div>
         {geneIsExpanded && (
           <HistogramBrush
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             isUserDefined
             field={gene}
             onGeneExpressionComplete={() => {}}

diff --git a/client/src/components/geneExpression/geneSet.tsx b/client/src/components/geneExpression/geneSet.tsx
@@ -160,7 +160,6 @@ class GeneSet extends React.Component<{}, State> {
         </div>
         {isOpen && !genesetIsEmpty && (
           <HistogramBrush
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             isGeneSetSummary
             field={setName}
             setGenes={setGenes}

diff --git a/client/src/components/infoDrawer/infoDrawer.tsx b/client/src/components/infoDrawer/infoDrawer.tsx
@@ -8,6 +8,7 @@ import InfoFormat, { SingleValueCategories } from "./infoFormat";
 import { AppDispatch, RootState } from "../../reducers";
 import { selectableCategoryNames } from "../../util/stateManager/controlsHelpers";
 import { DatasetMetadata } from "../../common/types/entities";
+import { Schema } from "../../common/types/schema";
 
 /**
  * Actions dispatched by info drawer.
@@ -29,8 +30,7 @@ interface OwnProps {
 interface StateProps {
   datasetMetadata: DatasetMetadata;
   isOpen: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-  schema: any;
+  schema: Schema;
 }
 
 type Props = DispatchProps & OwnProps & StateProps;

diff --git a/client/src/components/menubar/index.tsx b/client/src/components/menubar/index.tsx
@@ -330,21 +330,19 @@ class MenuBar extends React.PureComponent<{}, State> {
             justifyContent: "right",
           }}
         >
-          {seamlessEnabled ? (
-            <ButtonGroup className={styles.menubarButton}>
-              <AnchorButton
-                type="button"
-                icon={IconNames.INFO_SIGN}
-                onClick={() => {
-                  dispatch({ type: "toggle dataset drawer" });
-                }}
-                style={{
-                  cursor: "pointer",
-                }}
-                data-testid="drawer"
-              />
-            </ButtonGroup>
-          ) : null}
+          <ButtonGroup className={styles.menubarButton}>
+            <AnchorButton
+              type="button"
+              icon={IconNames.INFO_SIGN}
+              onClick={() => {
+                dispatch({ type: "toggle dataset drawer" });
+              }}
+              style={{
+                cursor: "pointer",
+              }}
+              data-testid="drawer"
+            />
+          </ButtonGroup>
           {isDownload && (
             <Tooltip
               content="Download the current graph view as a PNG"