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>
2026-10-05 08:18:11 +08:00 · 2021-07-26 20:18:17 +00:00
parent 7328cbdbd5
commit 934cc5c69b
206 changed files with 4719 additions and 2085 deletions
@@ -2,16 +2,21 @@ import React from "react";
 import { Button, MenuItem } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";

-class DuplicateCategorySelect extends React.PureComponent {
-  constructor(props) {
+type State = any;
+
+class DuplicateCategorySelect extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {};
  }

  render() {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'allCategoryNames' does not exist on type... Remove this comment to see the full error message
      allCategoryNames,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryToDuplicate' does not exist on t... Remove this comment to see the full error message
      categoryToDuplicate,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleModalDuplicateCategorySelection' d... Remove this comment to see the full error message
      handleModalDuplicateCategorySelection,
    } = this.props;
    return (
@@ -31,7 +36,9 @@ class DuplicateCategorySelect extends React.PureComponent {
              <MenuItem
                data-testclass="duplicate-category-dropdown-option"
                onClick={handleClick}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'Key | nu... Remove this comment to see the full error message
                key={d}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type 'unknown' is not assignable to type 'ReactNod... Remove this comment to see the full error message
                text={d}
              />
            );
@@ -5,20 +5,24 @@ import LabelInput from "../../labelInput";
 import { labelPrompt, isLabelErroneous } from "../labelUtil";
 import actions from "../../../actions";

+type State = any;
+
+// @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) => ({
-  annotations: state.annotations,
-  schema: state.annoMatrix?.schema,
-  obsCrossfilter: state.obsCrossfilter,
+  annotations: (state as any).annotations,
+  schema: (state as any).annoMatrix?.schema,
+  obsCrossfilter: (state as any).obsCrossfilter,
 }))
-class Category extends React.PureComponent {
-  constructor(props) {
+class Category extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {
      newLabelText: "",
    };
  }

-  disableAddNewLabelMode = (e) => {
+  disableAddNewLabelMode = (e: any) => {
+    // @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 } = this.props;
    this.setState({
      newLabelText: "",
@@ -29,10 +33,11 @@ class Category extends React.PureComponent {
    if (e) e.preventDefault();
  };

-  handleAddNewLabelToCategory = (e) => {
+  handleAddNewLabelToCategory = (e: any) => {
+    // @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, metadataField } = this.props;
    const { newLabelText } = this.state;
-
+    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
    this.disableAddNewLabelMode();
    dispatch(
      actions.annotationCreateLabelInCategory(
@@ -44,10 +49,11 @@ class Category extends React.PureComponent {
    e.preventDefault();
  };

-  addLabelAndAssignCells = (e) => {
+  addLabelAndAssignCells = (e: any) => {
+    // @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, metadataField } = this.props;
    const { newLabelText } = this.state;
-
+    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
    this.disableAddNewLabelMode();
    dispatch(
      actions.annotationCreateLabelInCategory(metadataField, newLabelText, true)
@@ -55,26 +61,28 @@ class Category extends React.PureComponent {
    e.preventDefault();
  };

-  labelNameError = (name) => {
+  labelNameError = (name: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField, schema } = this.props;
    return isLabelErroneous(name, metadataField, schema);
  };

-  instruction = (label) => {
+  instruction = (label: any) => {
    return labelPrompt(this.labelNameError(label), "New, unique label", ":");
  };

-  handleChangeOrSelect = (label) => {
+  handleChangeOrSelect = (label: any) => {
    this.setState({ newLabelText: label });
  };

  render() {
    const { newLabelText } = this.state;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField, annotations, obsCrossfilter } = this.props;
-
    return (
      <>
        <AnnoDialog
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
          isActive={
            annotations.isAddingNewLabel &&
            annotations.categoryAddingNewLabel === metadataField
@@ -95,6 +103,7 @@ class Category extends React.PureComponent {
          handleCancel={this.disableAddNewLabelMode}
          annoInput={
            <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ labelSuggestions: null; onChange: (label: ... Remove this comment to see the full error message
              labelSuggestions={null}
              onChange={this.handleChangeOrSelect}
              onSelect={this.handleChangeOrSelect}
@@ -7,25 +7,30 @@ import { labelPrompt } from "../labelUtil";
 import { AnnotationsHelpers } from "../../../util/stateManager";
 import actions from "../../../actions";

+type State = any;
+
+// @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) => ({
-  annotations: state.annotations,
-  schema: state.annoMatrix?.schema,
+  annotations: (state as any).annotations,
+  schema: (state as any).annoMatrix?.schema,
 }))
-class AnnoDialogEditCategoryName extends React.PureComponent {
-  constructor(props) {
+class AnnoDialogEditCategoryName extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
      newCategoryText: props.metadataField,
    };
  }

-  handleChangeOrSelect = (name) => {
+  handleChangeOrSelect = (name: any) => {
    this.setState({
      newCategoryText: name,
    });
  };

  disableEditCategoryMode = () => {
+    // @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, metadataField } = this.props;
    dispatch({
      type: "annotation: disable category edit mode",
@@ -33,17 +38,19 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
    this.setState({ newCategoryText: metadataField });
  };

-  handleEditCategory = (e) => {
+  handleEditCategory = (e: any) => {
+    // @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, metadataField } = this.props;
    const { newCategoryText } = this.state;
-
    /*
-    test for uniqueness against *all* annotation names, not just the subset
-    we render as categorical.
-    */
+        test for uniqueness against *all* annotation names, not just the subset
+        we render as categorical.
+        */
+    // @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;
-    const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
-
+    const allCategoryNames = schema.annotations.obs.columns.map(
+      (c: any) => c.name
+    );
    if (
      (allCategoryNames.indexOf(newCategoryText) > -1 &&
        newCategoryText !== metadataField) ||
@@ -51,9 +58,7 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
    ) {
      return;
    }
-
    this.disableEditCategoryMode();
-
    if (metadataField !== newCategoryText)
      dispatch(
        actions.annotationRenameCategoryAction(metadataField, newCategoryText)
@@ -61,35 +66,34 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
    e.preventDefault();
  };

-  editedCategoryNameError = (name) => {
+  editedCategoryNameError = (name: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField } = this.props;
-
    /* check for syntax errors in category name */
    const error = AnnotationsHelpers.annotationNameIsErroneous(name);
    if (error) {
      return error;
    }
-
    /* check for duplicative categories */
-
    /*
-    test for uniqueness against *all* annotation names, not just the subset
-    we render as categorical.
-    */
+        test for uniqueness against *all* annotation names, not just the subset
+        we render as categorical.
+        */
+    // @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;
-    const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
-
+    const allCategoryNames = schema.annotations.obs.columns.map(
+      (c: any) => c.name
+    );
    const categoryNameAlreadyExists = allCategoryNames.indexOf(name) > -1;
    const sameName = name === metadataField;
    if (categoryNameAlreadyExists && !sameName) {
      return "duplicate";
    }
-
    /* otherwise, no error */
    return false;
  };

-  instruction = (name) => {
+  instruction = (name: any) => {
    return labelPrompt(
      this.editedCategoryNameError(name),
      "New, unique category name",
@@ -98,17 +102,19 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
  };

  allCategoryNames() {
+    // @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;
-    return schema.annotations.obs.columns.map((c) => c.name);
+    return schema.annotations.obs.columns.map((c: any) => c.name);
  }

  render() {
    const { newCategoryText } = this.state;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField, annotations } = this.props;
-
    return (
      <>
        <AnnoDialog
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
          isActive={
            annotations.isEditingCategoryName &&
            annotations.categoryBeingEdited === metadataField
@@ -129,6 +135,7 @@ class AnnoDialogEditCategoryName extends React.PureComponent {
          handleCancel={this.disableEditCategoryMode}
          annoInput={
            <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; labelSuggestions: null; onChan... Remove this comment to see the full error message
              label={newCategoryText}
              labelSuggestions={null}
              onChange={this.handleChangeOrSelect}
@@ -16,16 +16,20 @@ import { IconNames } from "@blueprintjs/icons";
 import * as globals from "../../../globals";
 import actions from "../../../actions";

+type State = any;
+
+// @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) => ({
-  annotations: state.annotations,
+  annotations: (state as any).annotations,
 }))
-class AnnoMenuCategory extends React.PureComponent {
-  constructor(props) {
+class AnnoMenuCategory extends React.PureComponent<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {};
  }

  activateAddNewLabelMode = () => {
+    // @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, metadataField } = this.props;
    dispatch({
      type: "annotation: activate add new label mode",
@@ -34,8 +38,8 @@ class AnnoMenuCategory extends React.PureComponent {
  };

  activateEditCategoryMode = () => {
+    // @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, metadataField } = this.props;
-
    dispatch({
      type: "annotation: activate category edit mode",
      data: metadataField,
@@ -43,20 +47,26 @@ class AnnoMenuCategory extends React.PureComponent {
  };

  handleDeleteCategory = () => {
+    // @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, metadataField } = this.props;
    dispatch(actions.annotationDeleteCategoryAction(metadataField));
  };

  render() {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
      annotations,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
      isUserAnno,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'createText' does not exist on type 'Read... Remove this comment to see the full error message
      createText,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'editText' does not exist on type 'Readon... Remove this comment to see the full error message
      editText,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'deleteText' does not exist on type 'Read... Remove this comment to see the full error message
      deleteText,
    } = this.props;
-
    return (
      <>
        {isUserAnno ? (
@@ -31,33 +31,39 @@ const LABEL_WIDTH = globals.leftSidebarWidth - 100;
 const ANNO_BUTTON_WIDTH = 50;
 const LABEL_WIDTH_ANNO = LABEL_WIDTH - ANNO_BUTTON_WIDTH;

+// @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) => {
-  const schema = state.annoMatrix?.schema;
+  const schema = (state as any).annoMatrix?.schema;
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
  const { metadataField } = ownProps;
  const isUserAnno = schema?.annotations?.obsByName[metadataField]?.writable;
-  const categoricalSelection = state.categoricalSelection?.[metadataField];
+  const categoricalSelection = (state as any).categoricalSelection?.[
+    metadataField
+  ];
  return {
-    colors: state.colors,
+    colors: (state as any).colors,
    categoricalSelection,
-    annotations: state.annotations,
-    annoMatrix: state.annoMatrix,
+    annotations: (state as any).annotations,
+    annoMatrix: (state as any).annoMatrix,
    schema,
-    crossfilter: state.obsCrossfilter,
+    crossfilter: (state as any).obsCrossfilter,
    isUserAnno,
-    genesets: state.genesets.genesets,
+    genesets: (state as any).genesets.genesets,
  };
 })
 class Category extends React.PureComponent {
  static getSelectionState(
-    categoricalSelection,
-    metadataField,
-    categorySummary
+    categoricalSelection: any,
+    // @ts-expect-error ts-migrate(6133) FIXME: 'metadataField' is declared but its value is never... Remove this comment to see the full error message
+    metadataField: any,
+    categorySummary: any
  ) {
    // total number of categories in this dimension
    const totalCatCount = categorySummary.numCategoryValues;
    // number of selected options in this category
    const selectedCatCount = categorySummary.categoryValues.reduce(
-      (res, label) => (categoricalSelection.get(label) ?? true ? res + 1 : res),
+      (res: any, label: any) =>
+        categoricalSelection.get(label) ?? true ? res + 1 : res,
      0
    );
    return selectedCatCount === totalCatCount
@@ -67,13 +73,14 @@ class Category extends React.PureComponent {
      : "some";
  }

-  static watchAsync(props, prevProps) {
+  static watchAsync(props: any, prevProps: any) {
    return !shallowEqual(props.watchProps, prevProps.watchProps);
  }

  createCategorySummaryFromDfCol = memoize(createCategorySummaryFromDfCol);

-  getSelectionState(categorySummary) {
+  getSelectionState(categorySummary: any) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
    const { categoricalSelection, metadataField } = this.props;
    return Category.getSelectionState(
      categoricalSelection,
@@ -83,6 +90,7 @@ class Category extends React.PureComponent {
  }

  handleColorChange = () => {
+    // @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, metadataField } = this.props;
    dispatch({
      type: "color by categorical metadata",
@@ -91,6 +99,7 @@ class Category extends React.PureComponent {
  };

  handleCategoryClick = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
    const { annotations, metadataField, onExpansionChange } = this.props;
    const editingCategory =
      annotations.isEditingCategoryName &&
@@ -100,13 +109,13 @@ class Category extends React.PureComponent {
    }
  };

-  handleCategoryKeyPress = (e) => {
+  handleCategoryKeyPress = (e: any) => {
    if (e.key === "Enter") {
      this.handleCategoryClick();
    }
  };

-  handleToggleAllClick = (categorySummary) => {
+  handleToggleAllClick = (categorySummary: any) => {
    const isChecked = this.getSelectionState(categorySummary);
    if (isChecked === "all") {
      this.toggleNone(categorySummary);
@@ -115,8 +124,9 @@ class Category extends React.PureComponent {
    }
  };

-  fetchAsyncProps = async (props) => {
+  fetchAsyncProps = async (props: any) => {
    const { annoMatrix, metadataField, colors } = props.watchProps;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
    const { crossfilter } = this.props;

    const [categoryData, categorySummary, colorData] = await this.fetchData(
@@ -136,13 +146,14 @@ class Category extends React.PureComponent {
    };
  };

-  async fetchData(annoMatrix, metadataField, colors) {
+  async fetchData(annoMatrix: any, metadataField: any, colors: any) {
    /*
    fetch our data and the color-by data if appropriate, and then build a summary
    of our category and a color table for the color-by annotation.
    */
    const { schema } = annoMatrix;
    const { colorAccessor, colorMode } = colors;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
    const { genesets } = this.props;
    let colorDataPromise = Promise.resolve(null);
    if (colorAccessor) {
@@ -169,8 +180,9 @@ class Category extends React.PureComponent {
    return [categoryData, categorySummary, colorData];
  }

-  updateColorTable(colorData) {
+  updateColorTable(colorData: any) {
    // color table, which may be null
+    // @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, colors, metadataField } = this.props;
    const { colorAccessor, userColors, colorMode } = colors;
    return {
@@ -187,7 +199,8 @@ class Category extends React.PureComponent {
    };
  }

-  toggleNone(categorySummary) {
+  toggleNone(categorySummary: any) {
+    // @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, metadataField } = this.props;
    dispatch(
      actions.selectCategoricalAllMetadataAction(
@@ -199,7 +212,8 @@ class Category extends React.PureComponent {
    );
  }

-  toggleAll(categorySummary) {
+  toggleAll(categorySummary: any) {
+    // @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, metadataField } = this.props;
    dispatch(
      actions.selectCategoricalAllMetadataAction(
@@ -213,12 +227,19 @@ class Category extends React.PureComponent {

  render() {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isExpanded' does not exist on type 'Read... Remove this comment to see the full error message
      isExpanded,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoricalSelection' does not exist on ... Remove this comment to see the full error message
      categoricalSelection,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'crossfilter' does not exist on type 'Rea... Remove this comment to see the full error message
      crossfilter,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colors' does not exist on type 'Readonly... Remove this comment to see the full error message
      colors,
+      // @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 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
      isUserAnno,
    } = this.props;

@@ -250,18 +271,26 @@ class Category extends React.PureComponent {
          <Async.Fulfilled persist>
            {(asyncProps) => {
              const {
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'u... Remove this comment to see the full error message
                colorAccessor,
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'unkn... Remove this comment to see the full error message
                colorTable,
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'unkno... Remove this comment to see the full error message
                colorData,
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'un... Remove this comment to see the full error message
                categoryData,
+                // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
                categorySummary,
+                // @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 'handleCategoryToggleAllClick' does not e... Remove this comment to see the full error message
                handleCategoryToggleAllClick,
              } = asyncProps;
              const isTruncated = !!categorySummary?.isTruncated;
              const selectionState = this.getSelectionState(categorySummary);
              return (
                <CategoryRender
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; checkboxID: string; is... Remove this comment to see the full error message
                  metadataField={metadataField}
                  checkboxID={checkboxID}
                  isUserAnno={isUserAnno}
@@ -290,7 +319,7 @@ class Category extends React.PureComponent {

 export default Category;

-const StillLoading = ({ metadataField, checkboxID }) => {
+const StillLoading = ({ metadataField, checkboxID }: any) => {
  /*
  We are still loading this category, so render a "busy" signal.
  */
@@ -341,7 +370,7 @@ const StillLoading = ({ metadataField, checkboxID }) => {
  );
 };

-const ErrorLoading = ({ metadataField, error }) => {
+const ErrorLoading = ({ metadataField, error }: any) => {
  console.error(error); // log error to console as it is unexpected.
  return (
    <div style={{ marginBottom: 10, marginTop: 4 }}>
@@ -361,16 +390,27 @@ const ErrorLoading = ({ metadataField, error }) => {

 const CategoryHeader = React.memo(
  ({
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
    metadataField,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'checkboxID' does not exist on type '{ ch... Remove this comment to see the full error message
    checkboxID,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
    isUserAnno,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isTruncated' does not exist on type '{ c... Remove this comment to see the full error message
    isTruncated,
+    // @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 'isExpanded' does not exist on type '{ ch... Remove this comment to see the full error message
    isExpanded,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionState' does not exist on type '... Remove this comment to see the full error message
    selectionState,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorChangeClick' does not exist on ty... Remove this comment to see the full error message
    onColorChangeClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuClick' does not exist on t... Remove this comment to see the full error message
    onCategoryMenuClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuKeyPress' does not exist o... Remove this comment to see the full error message
    onCategoryMenuKeyPress,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryToggleAllClick' does not exist... Remove this comment to see the full error message
    onCategoryToggleAllClick,
  }) => {
    /*
@@ -379,6 +419,7 @@ const CategoryHeader = React.memo(
    const checkboxRef = useRef(null);

    useEffect(() => {
+      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
      checkboxRef.current.indeterminate = selectionState === "some";
    }, [checkboxRef.current, selectionState]);

@@ -408,6 +449,7 @@ const CategoryHeader = React.memo(
          </label>
          <span
            role="menuitem"
+            // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
            tabIndex="0"
            data-testclass="category-expand"
            data-testid={`${metadataField}:category-expand`}
@@ -423,6 +465,7 @@ const CategoryHeader = React.memo(
                  maxWidth: isUserAnno ? LABEL_WIDTH_ANNO : LABEL_WIDTH,
                }}
                data-testid={`${metadataField}:category-label`}
+                // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
                tabIndex="-1"
              >
                {metadataField}
@@ -441,10 +484,13 @@ const CategoryHeader = React.memo(
            )}
          </span>
        </div>
-        {<AnnoDialogEditCategoryName metadataField={metadataField} />}
-        {<AnnoDialogAddLabel metadataField={metadataField} />}
+        {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; }' is not assignable t... Remove this comment to see the full error message */}
+        <AnnoDialogEditCategoryName metadataField={metadataField} />
+        {/* @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; }' is not assignable t... Remove this comment to see the full error message */}
+        <AnnoDialogAddLabel metadataField={metadataField} />
        <div>
          <AnnoMenu
+            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; isUserAnno: any; creat... Remove this comment to see the full error message
            metadataField={metadataField}
            isUserAnno={isUserAnno}
            createText="Add a new label to this category"
@@ -484,21 +530,37 @@ const CategoryHeader = React.memo(

 const CategoryRender = React.memo(
  ({
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
    metadataField,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'checkboxID' does not exist on type '{ ch... Remove this comment to see the full error message
    checkboxID,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
    isUserAnno,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isTruncated' does not exist on type '{ c... Remove this comment to see the full error message
    isTruncated,
+    // @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 'isExpanded' does not exist on type '{ ch... Remove this comment to see the full error message
    isExpanded,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'selectionState' does not exist on type '... Remove this comment to see the full error message
    selectionState,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type '{ ... Remove this comment to see the full error message
    categoryData,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
    categorySummary,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type '{... Remove this comment to see the full error message
    colorAccessor,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type '{ chi... Remove this comment to see the full error message
    colorData,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type '{ ch... Remove this comment to see the full error message
    colorTable,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorChangeClick' does not exist on ty... Remove this comment to see the full error message
    onColorChangeClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuClick' does not exist on t... Remove this comment to see the full error message
    onCategoryMenuClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryMenuKeyPress' does not exist o... Remove this comment to see the full error message
    onCategoryMenuKeyPress,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onCategoryToggleAllClick' does not exist... Remove this comment to see the full error message
    onCategoryToggleAllClick,
  }) => {
    /*
@@ -533,6 +595,7 @@ const CategoryRender = React.memo(
          }}
        >
          <CategoryHeader
+            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ metadataField: any; checkboxID: any; isUse... Remove this comment to see the full error message
            metadataField={metadataField}
            checkboxID={checkboxID}
            isUserAnno={isUserAnno}
@@ -551,6 +614,7 @@ const CategoryRender = React.memo(
            /* values*/
            isExpanded ? (
              <CategoryValueList
+                // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isUserAnno: any; metadataField: any; categ... Remove this comment to see the full error message
                isUserAnno={isUserAnno}
                metadataField={metadataField}
                categoryData={categoryData}
@@ -574,12 +638,19 @@ const CategoryRender = React.memo(

 const CategoryValueList = React.memo(
  ({
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type '{ ch... Remove this comment to see the full error message
    isUserAnno,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
    metadataField,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type '{ ... Remove this comment to see the full error message
    categoryData,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
    categorySummary,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type '{... Remove this comment to see the full error message
    colorAccessor,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type '{ chi... Remove this comment to see the full error message
    colorData,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type '{ ch... Remove this comment to see the full error message
    colorTable,
  }) => {
    const tuples = [...categorySummary.categoryValueIndices];
@@ -594,6 +665,7 @@ const CategoryValueList = React.memo(
          {tuples.map(([value, index]) => (
            <Value
              key={value}
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: any; isUserAnno: any; metadataField: ... Remove this comment to see the full error message
              isUserAnno={isUserAnno}
              metadataField={metadataField}
              categoryIndex={index}
@@ -615,6 +687,7 @@ const CategoryValueList = React.memo(
        {tuples.map(([value, index]) => (
          <Flipped key={value} flipId={value}>
            <Value
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isUserAnno: any; metadataField: any; categ... Remove this comment to see the full error message
              isUserAnno={isUserAnno}
              metadataField={metadataField}
              categoryIndex={index}
@@ -10,13 +10,17 @@ import LabelInput from "../labelInput";
 import { labelPrompt } from "./labelUtil";
 import actions from "../../actions";

+type State = any;
+
+// @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) => ({
-  writableCategoriesEnabled: state.config?.parameters?.annotations ?? false,
-  schema: state.annoMatrix?.schema,
-  userInfo: state.userInfo,
+  writableCategoriesEnabled:
+    (state as any).config?.parameters?.annotations ?? false,
+  schema: (state as any).annoMatrix?.schema,
+  userInfo: (state as any).userInfo,
 }))
-class Categories extends React.Component {
-  constructor(props) {
+class Categories extends React.Component<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {
      createAnnoModeActive: false,
@@ -26,7 +30,8 @@ class Categories extends React.Component {
    };
  }

-  handleCreateUserAnno = (e) => {
+  handleCreateUserAnno = (e: any) => {
+    // @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 } = this.props;
    const { newCategoryText, categoryToDuplicate } = this.state;
    dispatch(
@@ -55,50 +60,48 @@ class Categories extends React.Component {
    });
  };

-  handleModalDuplicateCategorySelection = (d) => {
+  handleModalDuplicateCategorySelection = (d: any) => {
    this.setState({ categoryToDuplicate: d });
  };

-  categoryNameError = (name) => {
+  categoryNameError = (name: any) => {
    /*
-    return false if this is a LEGAL/acceptable category name or NULL/empty string,
-    or return an error type.
-    */
-
+        return false if this is a LEGAL/acceptable category name or NULL/empty string,
+        or return an error type.
+        */
    /* allow empty string */
    if (name === "") return false;
-
    /*
-    test for uniqueness against *all* annotation names, not just the subset
-    we render as categorical.
-    */
+        test for uniqueness against *all* annotation names, not just the subset
+        we render as categorical.
+        */
+    // @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;
-    const allCategoryNames = schema.annotations.obs.columns.map((c) => c.name);
-
+    const allCategoryNames = schema.annotations.obs.columns.map(
+      (c: any) => c.name
+    );
    /* check category name syntax */
    const error = AnnotationsHelpers.annotationNameIsErroneous(name);
    if (error) {
      return error;
    }
-
    /* disallow duplicates */
    if (allCategoryNames.indexOf(name) !== -1) {
      return "duplicate";
    }
-
    /* otherwise, no error */
    return false;
  };

-  handleChange = (name) => {
+  handleChange = (name: any) => {
    this.setState({ newCategoryText: name });
  };

-  handleSelect = (name) => {
+  handleSelect = (name: any) => {
    this.setState({ newCategoryText: name });
  };

-  instruction = (name) => {
+  instruction = (name: any) => {
    return labelPrompt(
      this.categoryNameError(name),
      "New, unique category name",
@@ -106,7 +109,7 @@ class Categories extends React.Component {
    );
  };

-  onExpansionChange = (catName) => {
+  onExpansionChange = (catName: any) => {
    const { expandedCats } = this.state;
    if (expandedCats.has(catName)) {
      const _expandedCats = new Set(expandedCats);
@@ -126,16 +129,13 @@ class Categories extends React.Component {
      newCategoryText,
      expandedCats,
    } = this.state;
-    const {
-      writableCategoriesEnabled,
-      schema,
-      userInfo,
-    } = this.props;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'writableCategoriesEnabled' does not exis... Remove this comment to see the full error message
+    const { writableCategoriesEnabled, schema, userInfo } = this.props;
    /* all names, sorted in display order.  Will be rendered in this order */
+    // @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 1.
    const allCategoryNames = ControlsHelpers.selectableCategoryNames(
      schema
    ).sort();
-
    return (
      <div
        style={{
@@ -143,6 +143,7 @@ class Categories extends React.Component {
        }}
      >
        <AnnoDialog
+          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; title: string; instruction:... Remove this comment to see the full error message
          isActive={createAnnoModeActive}
          title="Create new category"
          instruction={this.instruction(newCategoryText)}
@@ -155,6 +156,7 @@ class Categories extends React.Component {
          handleCancel={this.handleDisableAnnoMode}
          annoInput={
            <LabelInput
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ labelSuggestions: null; onChange: (name: a... Remove this comment to see the full error message
              labelSuggestions={null}
              onChange={this.handleChange}
              onSelect={this.handleSelect}
@@ -169,6 +171,7 @@ class Categories extends React.Component {
          }
          annoSelect={
            <AnnoSelect
+              // @ts-expect-error ts-migrate(2322) FIXME: Type '{ handleModalDuplicateCategorySelection: (d:... Remove this comment to see the full error message
              handleModalDuplicateCategorySelection={
                this.handleModalDuplicateCategorySelection
              }
@@ -209,12 +212,13 @@ class Categories extends React.Component {

        {/* READ ONLY CATEGORICAL FIELDS */}
        {/* this is duplicative but flat, could be abstracted */}
-        {allCategoryNames.map((catName) =>
+        {allCategoryNames.map((catName: any) =>
          !schema.annotations.obsByName[catName].writable &&
          (schema.annotations.obsByName[catName].categories?.length > 1 ||
            !schema.annotations.obsByName[catName].categories) ? (
            <Category
              key={catName}
+              // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
              metadataField={catName}
              onExpansionChange={this.onExpansionChange}
              isExpanded={expandedCats.has(catName)}
@@ -223,10 +227,11 @@ class Categories extends React.Component {
          ) : null
        )}
        {/* WRITEABLE FIELDS */}
-        {allCategoryNames.map((catName) =>
+        {allCategoryNames.map((catName: any) =>
          schema.annotations.obsByName[catName].writable ? (
            <Category
              key={catName}
+              // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
              metadataField={catName}
              onExpansionChange={this.onExpansionChange}
              isExpanded={expandedCats.has(catName)}
@@ -3,7 +3,7 @@ import { Colors } from "@blueprintjs/core";

 import { AnnotationsHelpers } from "../../util/stateManager";

-export function isLabelErroneous(label, metadataField, schema) {
+export function isLabelErroneous(label: any, metadataField: any, schema: any) {
  /*
    return false if this is a LEGAL/acceptable category name or NULL/empty string,
    or return an error type.
@@ -35,9 +35,10 @@ const errorMessageMap = {
  "multi-space-run": "Multiple consecutive spaces not allowed",
 };

-export function labelPrompt(err, prolog, epilog) {
+export function labelPrompt(err: any, prolog: any, epilog: any) {
  let errPrompt = null;
  if (err) {
+    // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
    let errMsg = errorMessageMap[err] ?? "error";
    errMsg = errMsg[0].toLowerCase() + errMsg.slice(1);
    errPrompt = (
@@ -13,6 +13,7 @@ import {
  Position,
 } from "@blueprintjs/core";
 import * as globals from "../../../globals";
+// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../categorical.css' or its cor... Remove this comment to see the full error message
 import styles from "../categorical.css";
 import AnnoDialog from "../../annoDialog";
 import LabelInput from "../../labelInput";
@@ -29,15 +30,20 @@ const STACKED_BAR_HEIGHT = 11;
 const STACKED_BAR_WIDTH = 100;

 /* this is defined outside of the class so we can use it in connect() */
-function _currentLabelAsString(ownProps) {
+function _currentLabelAsString(ownProps: any) {
  const { label } = ownProps;
  // when called as a function, the String() constructor performs type conversion,
  // and returns a primitive string.
  return String(label);
 }

+type State = any;
+
+// @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 'pointDilation' does not exist on type 'D... Remove this comment to see the full error message
  const { pointDilation, categoricalSelection } = state;
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type '{... Remove this comment to see the full error message
  const { metadataField, categorySummary, categoryIndex } = ownProps;
  const isDilated =
    pointDilation.metadataField === metadataField &&
@@ -48,27 +54,28 @@ function _currentLabelAsString(ownProps) {
  const isSelected = category.get(label) ?? true;

  return {
-    annotations: state.annotations,
-    schema: state.annoMatrix?.schema,
+    annotations: (state as any).annotations,
+    schema: (state as any).annoMatrix?.schema,
    isDilated,
    isSelected,
    label,
  };
 })
-class CategoryValue extends React.Component {
-  constructor(props) {
+class CategoryValue extends React.Component<{}, State> {
+  constructor(props: {}) {
    super(props);
    this.state = {
      editedLabelText: this.currentLabelAsString(),
    };
  }

-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: {}) {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField, categoryIndex, categorySummary } = this.props;
    if (
-      prevProps.metadataField !== metadataField ||
-      prevProps.categoryIndex !== categoryIndex ||
-      prevProps.categorySummary !== categorySummary
+      (prevProps as any).metadataField !== metadataField ||
+      (prevProps as any).categoryIndex !== categoryIndex ||
+      (prevProps as any).categorySummary !== categorySummary
    ) {
      // eslint-disable-next-line react/no-did-update-set-state --- adequately checked to prevent looping
      this.setState({
@@ -79,22 +86,26 @@ class CategoryValue extends React.Component {

  // If coloring by and this isn't the colorAccessor and it isn't being edited
  get shouldRenderStackedBarOrHistogram() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
    const { colorAccessor, isColorBy, annotations } = this.props;

    return !!colorAccessor && !isColorBy && !annotations.isEditingLabelName;
  }

  handleDeleteValue = () => {
+    // @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, metadataField, label } = this.props;
    dispatch(actions.annotationDeleteLabelFromCategory(metadataField, label));
  };

  handleAddCurrentSelectionToThisLabel = () => {
+    // @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, metadataField, label } = this.props;
    dispatch(actions.annotationLabelCurrentSelection(metadataField, label));
  };

-  handleEditValue = (e) => {
+  handleEditValue = (e: any) => {
+    // @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, metadataField, label } = this.props;
    const { editedLabelText } = this.state;
    this.cancelEditMode();
@@ -108,7 +119,8 @@ class CategoryValue extends React.Component {
    e.preventDefault();
  };

-  handleCreateArbitraryLabel = (txt) => {
+  handleCreateArbitraryLabel = (txt: any) => {
+    // @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, metadataField, label } = this.props;
    this.cancelEditMode();
    dispatch(
@@ -116,17 +128,19 @@ class CategoryValue extends React.Component {
    );
  };

-  labelNameError = (name) => {
+  labelNameError = (name: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
    const { metadataField, schema } = this.props;
    if (name === this.currentLabelAsString()) return false;
    return isLabelErroneous(name, metadataField, schema);
  };

-  instruction = (label) => {
+  instruction = (label: any) => {
    return labelPrompt(this.labelNameError(label), "New, unique label", ":");
  };

  activateEditLabelMode = () => {
+    // @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, metadataField, categoryIndex, label } = this.props;
    dispatch({
      type: "annotation: activate edit label mode",
@@ -137,6 +151,7 @@ class CategoryValue extends React.Component {
  };

  cancelEditMode = () => {
+    // @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, metadataField, categoryIndex, label } = this.props;
    this.setState({
      editedLabelText: this.currentLabelAsString(),
@@ -151,9 +166,13 @@ class CategoryValue extends React.Component {

  toggleOff = () => {
    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 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
      categoryIndex,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
      categorySummary,
    } = this.props;
    const label = categorySummary.categoryValues[categoryIndex];
@@ -168,7 +187,7 @@ class CategoryValue extends React.Component {
    );
  };

-  shouldComponentUpdate = (nextProps, nextState) => {
+  shouldComponentUpdate = (nextProps: any, nextState: any) => {
    /*
    Checks to see if at least one of the following changed:
    * world state
@@ -179,6 +198,7 @@ class CategoryValue extends React.Component {
    If and only if true, update the component
    */
    const { props, state } = this;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
    const { categoryIndex, categorySummary, isSelected } = props;
    const {
      categoryIndex: newCategoryIndex,
@@ -191,10 +211,12 @@ class CategoryValue extends React.Component {
    const labelChanged = label !== newLabel;
    const valueSelectionChange = isSelected !== newIsSelected;

-    const colorAccessorChange = props.colorAccessor !== nextProps.colorAccessor;
-    const annotationsChange = props.annotations !== nextProps.annotations;
+    const colorAccessorChange =
+      (props as any).colorAccessor !== nextProps.colorAccessor;
+    const annotationsChange =
+      (props as any).annotations !== nextProps.annotations;
    const editingLabel = state.editedLabelText !== nextState.editedLabelText;
-    const dilationChange = props.isDilated !== nextProps.isDilated;
+    const dilationChange = (props as any).isDilated !== nextProps.isDilated;

    const count = categorySummary.categoryValueCounts[categoryIndex];
    const newCount = newCategorySummary.categoryValueCounts[newCategoryIndex];
@@ -205,7 +227,7 @@ class CategoryValue extends React.Component {
    // if any one changes, but only for the currently colored-by category.
    const colorMightHaveChanged =
      nextProps.colorAccessor === nextProps.metadataField &&
-      props.categorySummary !== nextProps.categorySummary;
+      (props as any).categorySummary !== nextProps.categorySummary;

    return (
      labelChanged ||
@@ -221,9 +243,13 @@ class CategoryValue extends React.Component {

  toggleOn = () => {
    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 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
      categoryIndex,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
      categorySummary,
    } = this.props;
    const label = categorySummary.categoryValues[categoryIndex];
@@ -239,6 +265,7 @@ class CategoryValue extends React.Component {
  };

  handleMouseEnter = () => {
+    // @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, metadataField, categoryIndex, label } = this.props;
    dispatch({
      type: "category value mouse hover start",
@@ -249,6 +276,7 @@ class CategoryValue extends React.Component {
  };

  handleMouseExit = () => {
+    // @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, metadataField, categoryIndex, label } = this.props;
    dispatch({
      type: "category value mouse hover end",
@@ -258,23 +286,24 @@ class CategoryValue extends React.Component {
    });
  };

-  handleTextChange = (text) => {
+  handleTextChange = (text: any) => {
    this.setState({ editedLabelText: text });
  };

-  handleChoice = (e) => {
+  handleChoice = (e: any) => {
    /* Blueprint Suggest format */
    this.setState({ editedLabelText: e.target });
  };

  createHistogramBins = (
-    metadataField,
-    categoryData,
-    colorAccessor,
-    colorData,
-    categoryValue,
-    width,
-    height
+    metadataField: any,
+    categoryData: any,
+    // @ts-expect-error ts-migrate(6133) FIXME: 'colorAccessor' is declared but its value is never... Remove this comment to see the full error message
+    colorAccessor: any,
+    colorData: any,
+    categoryValue: any,
+    width: any,
+    height: any
  ) => {
    /*
      Knowing that colorScale is based off continuous data,
@@ -309,14 +338,15 @@ class CategoryValue extends React.Component {
  };

  createStackedGraphBins = (
-    metadataField,
-    categoryData,
-    colorAccessor,
-    colorData,
-    categoryValue,
-    colorTable,
-    schema,
-    width
+    metadataField: any,
+    categoryData: any,
+    colorAccessor: any,
+    colorData: any,
+    categoryValue: any,
+    // @ts-expect-error ts-migrate(6133) FIXME: 'colorTable' is declared but its value is never re... Remove this comment to see the full error message
+    colorTable: any,
+    schema: any,
+    width: any
  ) => {
    /*
      Knowing that the color scale is based off of categorical data,
@@ -357,12 +387,13 @@ class CategoryValue extends React.Component {
    return _currentLabelAsString(this.props);
  }

-  isAddCurrentSelectionDisabled(crossfilter, category, value) {
+  isAddCurrentSelectionDisabled(crossfilter: any, category: any, value: any) {
    /*
    disable "add current selection to label", if one of the following is true:
    1. no cells are selected
    2. all currently selected cells already have this label, on this category
    */
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
    const { categoryData } = this.props;

    // 1. no cells selected?
@@ -382,12 +413,19 @@ class CategoryValue extends React.Component {

  renderMiniStackedBar = () => {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
      colorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
      categoryData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
      colorData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
      colorTable,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
      schema,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
      label,
    } = this.props;
    const isColorBy = metadataField === colorAccessor;
@@ -425,6 +463,7 @@ class CategoryValue extends React.Component {
          domain,
          occupancy,
        }}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ height: number; width: number; colorTable:... Remove this comment to see the full error message
        height={STACKED_BAR_HEIGHT}
        width={STACKED_BAR_WIDTH}
      />
@@ -433,12 +472,19 @@ class CategoryValue extends React.Component {

  renderMiniHistogram = () => {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
      colorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
      colorData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
      categoryData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
      colorTable,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
      schema,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
      label,
    } = this.props;
    const colorScale = colorTable?.scale;
@@ -473,6 +519,7 @@ class CategoryValue extends React.Component {
          yScale,
          bins,
        }}
+        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ obsOrVarContinuousFieldDisplayName: any; d... Remove this comment to see the full error message
        obsOrVarContinuousFieldDisplayName={colorAccessor}
        domainLabel={label}
        height={STACKED_BAR_HEIGHT}
@@ -483,15 +530,25 @@ class CategoryValue extends React.Component {

  render() {
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryIndex' does not exist on type 'R... Remove this comment to see the full error message
      categoryIndex,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
      colorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
      colorTable,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserAnno' does not exist on type 'Read... Remove this comment to see the full error message
      isUserAnno,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annotations' does not exist on type 'Rea... Remove this comment to see the full error message
      annotations,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isDilated' does not exist on type 'Reado... Remove this comment to see the full error message
      isDilated,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isSelected' does not exist on type 'Read... Remove this comment to see the full error message
      isSelected,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categorySummary' does not exist on type ... Remove this comment to see the full error message
      categorySummary,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'label' does not exist on type 'Readonly<... Remove this comment to see the full error message
      label,
    } = this.props;
    const colorScale = colorTable?.scale;
@@ -587,6 +644,7 @@ class CategoryValue extends React.Component {
              <span
                data-testid={`categorical-value-${metadataField}-${displayString}`}
                data-testclass="categorical-value"
+                // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
                tabIndex="-1"
                style={{
                  width: labelWidth,
@@ -612,6 +670,7 @@ class CategoryValue extends React.Component {
            {editModeActive ? (
              <div>
                <AnnoDialog
+                  // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: any; inputProps: { "data-testid"... Remove this comment to see the full error message
                  isActive={editModeActive}
                  inputProps={{
                    "data-testid": `${metadataField}:edit-label-name-dialog`,
@@ -630,6 +689,7 @@ class CategoryValue extends React.Component {
                  handleCancel={this.cancelEditMode}
                  annoInput={
                    <LabelInput
+                      // @ts-expect-error ts-migrate(2322) FIXME: Type '{ label: any; labelSuggestions: null; onChan... Remove this comment to see the full error message
                      label={editedLabelText}
                      labelSuggestions={null}
                      onChange={this.handleTextChange}
@@ -8,64 +8,59 @@ import {
  Position,
 } from "@blueprintjs/core";

+// @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.annoMatrix?.schema,
+  schema: (state as any).annoMatrix?.schema,
 }))
 class Occupancy extends React.PureComponent {
+  canvas: any;
+
  _WIDTH = 100;

  _HEIGHT = 11;

  createHistogram = () => {
    /*
-      Knowing that colorScale is based off continous data,
-      createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
-      It then seperates that data into 50 bins for drawing the mini-histogram
-    */
+          Knowing that colorScale is based off continous data,
+          createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
+          It then seperates that data into 50 bins for drawing the mini-histogram
+        */
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
      categoryData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
      colorData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
      categoryValue,
    } = this.props;
-
    if (!this.canvas) return;
-
    const groupBy = categoryData.col(metadataField);
    const col = colorData.icol(0);
    const range = col.summarize();
-
    const histogramMap = col.histogram(
      50,
      [range.min, range.max],
      groupBy
    ); /* Because the signature changes we really need different names for histogram to differentiate signatures  */
-
    const bins = histogramMap.has(categoryValue)
      ? histogramMap.get(categoryValue)
      : new Array(50).fill(0);
-
    const xScale = d3
      .scaleLinear()
      .domain([0, bins.length])
      .range([0, this._WIDTH]);
-
    const largestBin = Math.max(...bins);
-
    const yScale = d3
      .scaleLinear()
      .domain([0, largestBin])
      .range([0, this._HEIGHT]);
-
    const ctx = this.canvas.getContext("2d");
-
    ctx.fillStyle = "#000";
-
    let x;
    let y;
-
    const rectWidth = this._WIDTH / bins.length;
-
    for (let i = 0, { length } = bins; i < length; i += 1) {
      x = xScale(i);
      y = yScale(bins[i]);
@@ -75,32 +70,34 @@ class Occupancy extends React.PureComponent {

  createOccupancyStack = () => {
    /*
-      Knowing that the color scale is based off of catagorical data,
-      createOccupancyStack obtains a map showing the number if cells per colored value
-      Using the colorScale a stack of colored bars is drawn representing the map
-     */
+          Knowing that the color scale is based off of catagorical data,
+          createOccupancyStack obtains a map showing the number if cells per colored value
+          Using the colorScale a stack of colored bars is drawn representing the map
+         */
    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
      metadataField,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
      categoryData,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
      colorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
      categoryValue,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
      colorTable,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
      schema,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
      colorData,
    } = this.props;
    const { scale: colorScale } = colorTable;
-
    const ctx = this.canvas?.getContext("2d");
-
    if (!ctx) return;
-
    const groupBy = categoryData.col(metadataField);
    const occupancyMap = colorData
      .col(colorAccessor)
      .histogramCategorical(groupBy);
-
    const occupancy = occupancyMap.get(categoryValue);
-
    if (occupancy && occupancy.size > 0) {
      // not all categories have occupancy, so occupancy may be undefined.
      const x = d3
@@ -110,15 +107,12 @@ class Occupancy extends React.PureComponent {
        .range([0, this._WIDTH]);
      const categories =
        schema.annotations.obsByName[colorAccessor]?.categories;
-
      let currentOffset = 0;
      const dfColumn = colorData.col(colorAccessor);
      const categoryValues = dfColumn.summarizeCategorical().categories;
-
      let o;
      let scaledValue;
      let value;
-
      for (let i = 0, { length } = categoryValues; i < length; i += 1) {
        value = categoryValues[i];
        o = occupancy.get(value);
@@ -133,11 +127,11 @@ class Occupancy extends React.PureComponent {
  };

  render() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
    const { colorAccessor, categoryValue, colorByIsCategorical } = this.props;
    const { canvas } = this;
    if (canvas)
      canvas.getContext("2d").clearRect(0, 0, this._WIDTH, this._HEIGHT);
-
    return (
      <Popover
        interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}