From 68c6d37374c2013bd3f9e3fccc81f21c90a6ec15 Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 01:03:08 -0400
Subject: [PATCH 1/6] Updates to TypeScript.

---
 .eslintrc.js                                  |  30 ++-
 babel.config.json                             |   3 +-
 package.json                                  |  10 +-
 src/{App.js => App.tsx}                       | 134 ++++++-----
 ...FeatureButton.jsx => AddFeatureButton.tsx} |  19 +-
 ...riptions.jsx => AnimationDescriptions.tsx} |  11 +-
 ...ropdown.jsx => ColumnDataTypeDropdown.tsx} |  23 +-
 ...rical.jsx => ColumnDetailsCategorical.tsx} |  12 +-
 ...merical.jsx => ColumnDetailsNumerical.tsx} |  12 +-
 ...olumnInspector.jsx => ColumnInspector.tsx} |  23 +-
 .../{CrossTab.jsx => CrossTab.tsx}            |  14 +-
 .../{DataCard.jsx => DataCard.tsx}            |  24 +-
 .../{DataDisplay.jsx => DataDisplay.tsx}      |  13 +-
 .../{DataTable.jsx => DataTable.tsx}          |  40 ++--
 ...enerateResults.jsx => GenerateResults.tsx} |  19 +-
 .../{ModelCard.jsx => ModelCard.tsx}          |  27 +--
 src/UIComponents/{Predict.jsx => Predict.tsx} |  46 ++--
 src/UIComponents/{Results.jsx => Results.tsx} |  17 +-
 ...{ResultsDetails.jsx => ResultsDetails.tsx} |  24 +-
 .../{ResultsTable.jsx => ResultsTable.tsx}    |  27 +--
 .../{ResultsToggle.jsx => ResultsToggle.tsx}  |  19 +-
 .../{SaveModel.jsx => SaveModel.tsx}          |  51 ++--
 .../{ScatterPlot.jsx => ScatterPlot.tsx}      |  19 +-
 ...lableContent.jsx => ScrollableContent.tsx} |  14 +-
 .../{SelectDataset.jsx => SelectDataset.tsx}  |  31 ++-
 ...tLabelButton.jsx => SelectLabelButton.tsx} |  19 +-
 .../{Statement.jsx => Statement.tsx}          |  47 ++--
 .../{TrainModel.jsx => TrainModel.tsx}        |  31 ++-
 ...nsWarning.jsx => UniqueOptionsWarning.tsx} |  13 +-
 src/UIComponents/shapes.js                    |  83 -------
 src/assetPath.js                              |   5 -
 src/assetPath.ts                              |   5 +
 src/{constants.js => constants.ts}            |   2 +-
 ...svReaderWrapper.js => csvReaderWrapper.ts} |  40 ++--
 ...{datasetManifest.js => datasetManifest.ts} |  19 +-
 src/declarations.d.ts                         |  37 +++
 src/helpers/{accuracy.js => accuracy.ts}      |  42 ++--
 .../{columnDetails.js => columnDetails.ts}    |  50 ++--
 .../{datasetDetails.js => datasetDetails.ts}  |  13 +-
 src/helpers/{metrics.js => metrics.ts}        |   8 +-
 ...nValidation.js => navigationValidation.ts} |  41 ++--
 src/helpers/{utils.js => utils.ts}            |  10 +-
 ...{valueConversion.js => valueConversion.ts} |  20 +-
 src/{i18n.js => i18n.ts}                      |  14 +-
 src/{index.js => index.tsx}                   |  31 ++-
 src/{indexDev.js => indexDev.tsx}             |  25 +-
 src/{indexProd.js => indexProd.tsx}           |   0
 ...nReaderWrapper.js => jsonReaderWrapper.ts} |  12 +-
 src/{redux.js => redux.ts}                    | 182 ++++++++------
 src/{selectors.js => selectors.ts}            |  40 ++--
 ...Selectors.js => currentColumnSelectors.ts} | 108 ++++-----
 ...Selectors.js => visualizationSelectors.ts} |  77 +++---
 src/{train.js => train.ts}                    |  52 ++--
 src/trainers/{KNNTrainer.js => KNNTrainer.ts} |  43 ++--
 src/types.ts                                  | 104 ++++++++
 test/unit/accuracy.test.js                    |   4 +-
 test/unit/columnDetails.test.js               |   4 +-
 test/unit/currentColumnSelectors.test.js      |   2 +-
 test/unit/navigationValidation.test.js        |   2 +-
 test/unit/train.test.js                       |   4 +-
 test/unit/utils.test.js                       |   2 +-
 tsconfig.json                                 |  21 ++
 webpack.config.js                             |  10 +-
 yarn.lock                                     | 226 +++++++++++++++++-
 64 files changed, 1252 insertions(+), 858 deletions(-)
 rename src/{App.js => App.tsx} (75%)
 rename src/UIComponents/{AddFeatureButton.jsx => AddFeatureButton.tsx} (66%)
 rename src/UIComponents/{AnimationDescriptions.jsx => AnimationDescriptions.tsx} (83%)
 rename src/UIComponents/{ColumnDataTypeDropdown.jsx => ColumnDataTypeDropdown.tsx} (67%)
 rename src/UIComponents/{ColumnDetailsCategorical.jsx => ColumnDetailsCategorical.tsx} (88%)
 rename src/UIComponents/{ColumnDetailsNumerical.jsx => ColumnDetailsNumerical.tsx} (82%)
 rename src/UIComponents/{ColumnInspector.jsx => ColumnInspector.tsx} (90%)
 rename src/UIComponents/{CrossTab.jsx => CrossTab.tsx} (95%)
 rename src/UIComponents/{DataCard.jsx => DataCard.tsx} (89%)
 rename src/UIComponents/{DataDisplay.jsx => DataDisplay.tsx} (86%)
 rename src/UIComponents/{DataTable.jsx => DataTable.tsx} (89%)
 rename src/UIComponents/{GenerateResults.jsx => GenerateResults.tsx} (95%)
 rename src/UIComponents/{ModelCard.jsx => ModelCard.tsx} (92%)
 rename src/UIComponents/{Predict.jsx => Predict.tsx} (84%)
 rename src/UIComponents/{Results.jsx => Results.tsx} (93%)
 rename src/UIComponents/{ResultsDetails.jsx => ResultsDetails.tsx} (82%)
 rename src/UIComponents/{ResultsTable.jsx => ResultsTable.tsx} (92%)
 rename src/UIComponents/{ResultsToggle.jsx => ResultsToggle.tsx} (84%)
 rename src/UIComponents/{SaveModel.jsx => SaveModel.tsx} (88%)
 rename src/UIComponents/{ScatterPlot.jsx => ScatterPlot.tsx} (87%)
 rename src/UIComponents/{ScrollableContent.jsx => ScrollableContent.tsx} (54%)
 rename src/UIComponents/{SelectDataset.jsx => SelectDataset.tsx} (89%)
 rename src/UIComponents/{SelectLabelButton.jsx => SelectLabelButton.tsx} (66%)
 rename src/UIComponents/{Statement.jsx => Statement.tsx} (86%)
 rename src/UIComponents/{TrainModel.jsx => TrainModel.tsx} (91%)
 rename src/UIComponents/{UniqueOptionsWarning.jsx => UniqueOptionsWarning.tsx} (79%)
 delete mode 100644 src/UIComponents/shapes.js
 delete mode 100644 src/assetPath.js
 create mode 100644 src/assetPath.ts
 rename src/{constants.js => constants.ts} (99%)
 rename src/{csvReaderWrapper.js => csvReaderWrapper.ts} (59%)
 rename src/{datasetManifest.js => datasetManifest.ts} (73%)
 create mode 100644 src/declarations.d.ts
 rename src/helpers/{accuracy.js => accuracy.ts} (78%)
 rename src/helpers/{columnDetails.js => columnDetails.ts} (64%)
 rename src/helpers/{datasetDetails.js => datasetDetails.ts} (81%)
 rename src/helpers/{metrics.js => metrics.ts} (77%)
 rename src/helpers/{navigationValidation.js => navigationValidation.ts} (83%)
 rename src/helpers/{utils.js => utils.ts} (53%)
 rename src/helpers/{valueConversion.js => valueConversion.ts} (68%)
 rename src/{i18n.js => i18n.ts} (83%)
 rename src/{index.js => index.tsx} (75%)
 rename src/{indexDev.js => indexDev.tsx} (79%)
 rename src/{indexProd.js => indexProd.tsx} (100%)
 rename src/{jsonReaderWrapper.js => jsonReaderWrapper.ts} (75%)
 rename src/{redux.js => redux.ts} (74%)
 rename src/{selectors.js => selectors.ts} (59%)
 rename src/selectors/{currentColumnSelectors.js => currentColumnSelectors.ts} (53%)
 rename src/selectors/{visualizationSelectors.js => visualizationSelectors.ts} (69%)
 rename src/{train.js => train.ts} (72%)
 rename src/trainers/{KNNTrainer.js => KNNTrainer.ts} (78%)
 create mode 100644 src/types.ts
 create mode 100644 tsconfig.json

diff --git a/.eslintrc.js b/.eslintrc.js
index 8b42a5f9..d00f8866 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,12 +6,14 @@ module.exports = {
   "globals": {
   },
   "plugins": [
+    "@typescript-eslint",
     "jsx-a11y",
     "react-hooks"
   ],
   "extends": [
     'plugin:react/recommended',
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended"
   ],
@@ -25,7 +27,7 @@ module.exports = {
       "version": "detect"
     }
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
     "ecmaFeatures": {
@@ -40,9 +42,10 @@ module.exports = {
     "dot-location": ["error", "property"],
     "eol-last": "error",
     eqeqeq: "error",
-    "jsx-quotes": "error", // autofixable
+    "jsx-quotes": "error",
     "keyword-spacing": "error",
-    "no-array-constructor": "error",
+    "no-array-constructor": "off",
+    "@typescript-eslint/no-array-constructor": "error",
     "no-console": "off",
     "no-duplicate-imports": "error",
     "no-empty": "off",
@@ -52,31 +55,34 @@ module.exports = {
     "no-implicit-globals": "error",
     "no-new-object": "error",
     "no-trailing-spaces": "error",
-    "no-undef": "error",
-    "no-unused-vars": ["error", { args: "none" }],
+    "no-undef": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { args: "none" }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-require-imports": "off",
     "no-useless-escape": "off",
     "no-with": "error",
     "object-curly-spacing": "off",
     "react/react-in-jsx-scope": "off",
     "react/button-has-type": "error",
     "react/display-name": "off",
-    "react/jsx-closing-bracket-location": "error", // autofixable
-    "react/jsx-curly-spacing": "error", // autofixable
+    "react/jsx-closing-bracket-location": "error",
+    "react/jsx-curly-spacing": "error",
     "react/jsx-first-prop-new-line": ["error", "multiline"],
-    "react/jsx-indent-props": ["error", 2], // autofixable
+    "react/jsx-indent-props": ["error", 2],
     "react/jsx-key": "off",
     "react/jsx-no-target-blank": "off",
-    "react/jsx-wrap-multilines": "error", // autofixable
+    "react/jsx-wrap-multilines": "error",
     "react/no-danger": "error",
     "react/no-find-dom-node": "off",
     "react/no-render-return-value": "off",
     "react/no-string-refs": "off",
     "react/no-unescaped-entities": "off",
+    "react/prop-types": "off",
     "react/self-closing-comp": "error",
-    semi: "off", // enforced by babel/semi
+    semi: "off",
     "space-before-blocks": "error",
-    strict: "error",
+    strict: "off",
     "jsx-a11y/no-onchange": 0
-
   }
 };
diff --git a/babel.config.json b/babel.config.json
index fcde8385..1e588588 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -1,6 +1,7 @@
 {
   "presets": [
     ["@babel/preset-env", {"loose": true}],
-    ["@babel/preset-react", {"runtime": "automatic"}]
+    ["@babel/preset-react", {"runtime": "automatic"}],
+    "@babel/preset-typescript"
   ]
 }
diff --git a/package.json b/package.json
index e2b84902..9b44cc30 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "url": "git+ssh://git@github.com/code-dot-org/ml-playground.git"
   },
   "jest": {
+    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
     "moduleNameMapper": {
       ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif)$": "identity-obj-proxy",
       "^@public(.*)$": "<rootDir>/public/$1"
@@ -23,7 +24,7 @@
     "build": "webpack --mode production",
     "start": "yarn run dev",
     "dev": "webpack-dev-server --mode development --static public --host 0.0.0.0 --allowed-hosts all",
-    "lint": "eslint --ext .js,.jsx src",
+    "lint": "eslint --ext .ts,.tsx src",
     "test": "yarn run lint && jest",
     "test:unit": "jest ./test/unit/*.js",
     "preversion": "yarn install && yarn run test",
@@ -35,6 +36,11 @@
     "@babel/eslint-parser": "^7.28.6",
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.58.1",
+    "@typescript-eslint/parser": "^8.58.1",
     "babel-jest": "29",
     "babel-loader": "^10.1.1",
     "copy-webpack-plugin": "11",
@@ -55,6 +61,8 @@
     "react-redux": "9",
     "redux": "^4.0.5",
     "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.7",
+    "typescript": "^6.0.2",
     "webpack": "5",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "5",
diff --git a/src/App.js b/src/App.tsx
similarity index 75%
rename from src/App.js
rename to src/App.tsx
index 95ece78f..8ebcb132 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import PropTypes from "prop-types";
+import React from "react";
 import SelectDataset from "./UIComponents/SelectDataset";
 import DataDisplay from "./UIComponents/DataDisplay";
 import ColumnInspector from "./UIComponents/ColumnInspector";
@@ -24,6 +24,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import I18n from "./i18n";
 
+interface PanelButtonsProps {
+  panelButtons: any;
+  currentPanel: string;
+  setCurrentPanel: (panel: string) => void;
+  onContinue: () => void;
+  startSaveTrainedModel: (dataToSave: any) => void;
+  dataToSave: any;
+  saveStatus: string;
+  saveResponseData: any;
+  isSaveComplete: (saveStatus: string) => boolean;
+  shouldDisplaySaveStatus: (saveStatus: string) => boolean;
+}
+
 function PanelButtons({
   panelButtons,
   currentPanel,
@@ -35,7 +48,7 @@ function PanelButtons({
   saveResponseData,
   isSaveComplete: isSaveCompleteProp,
   shouldDisplaySaveStatus: shouldDisplaySaveStatusProp
-}) {
+}: PanelButtonsProps) {
   const onClickPrev = () => {
     setCurrentPanel(panelButtons.prev.panel);
   };
@@ -50,11 +63,11 @@ function PanelButtons({
     }
   };
 
-  const localizedSaveMessage = saveStatus => {
+  const localizedSaveMessage = (saveStatus: string): string => {
     return I18n.t(`saveStatus_${saveStatus}`);
   };
 
-  const saveResponseDataMessage = saveResponseData => {
+  const saveResponseDataMessage = (saveResponseData: any): string | undefined => {
     // The list of known error types from share_filtering.rb.
     const errorTypes = ["email", "address", "phone", "profanity"];
 
@@ -70,13 +83,13 @@ function PanelButtons({
     }
   };
 
-  let loadSaveStatus = isSaveCompleteProp(saveStatus) ? (
+  const loadSaveStatus = isSaveCompleteProp(saveStatus) ? (
     localizedSaveMessage(saveStatus)
   ) : (
     <FontAwesomeIcon icon={faSpinner} />
   );
 
-  let loadSaveResponseData = isSaveCompleteProp(saveStatus)
+  const loadSaveResponseData = isSaveCompleteProp(saveStatus)
     ? saveResponseDataMessage(saveResponseData)
     : undefined;
 
@@ -134,54 +147,57 @@ function PanelButtons({
   );
 }
 
-PanelButtons.propTypes = {
-  panelButtons: PropTypes.object,
-  currentPanel: PropTypes.string,
-  setCurrentPanel: PropTypes.func,
-  onContinue: PropTypes.func,
-  startSaveTrainedModel: PropTypes.func,
-  dataToSave: PropTypes.object,
-  saveStatus: PropTypes.string,
-  saveResponseData: PropTypes.object,
-  isSaveComplete: PropTypes.func,
-  shouldDisplaySaveStatus: PropTypes.func
-};
+interface BodyContainerProps {
+  children: React.ReactNode;
+}
 
-const BodyContainer = props => (
-  <div style={styles.bodyContainer}>{props.children}</div>
-);
+function BodyContainer({ children }: BodyContainerProps) {
+  return <div style={styles.bodyContainer}>{children}</div>;
+}
 
-BodyContainer.propTypes = {
-  children: PropTypes.node
-};
+interface ContainerLeftProps {
+  children: React.ReactNode;
+}
 
-const ContainerLeft = props => (
-  <div style={{ ...styles.panelContainer, ...styles.panelContainerLeft }}>
-    {props.children}
-  </div>
-);
+function ContainerLeft({ children }: ContainerLeftProps) {
+  return (
+    <div style={{ ...styles.panelContainer, ...styles.panelContainerLeft }}>
+      {children}
+    </div>
+  );
+}
 
-ContainerLeft.propTypes = {
-  children: PropTypes.node
-};
+interface ContainerRightProps {
+  children: React.ReactNode;
+}
 
-const ContainerRight = props => (
-  <div style={{ ...styles.panelContainer, ...styles.panelContainerRight }}>
-    {props.children}
-  </div>
-);
+function ContainerRight({ children }: ContainerRightProps) {
+  return (
+    <div style={{ ...styles.panelContainer, ...styles.panelContainerRight }}>
+      {children}
+    </div>
+  );
+}
 
-ContainerRight.propTypes = {
-  children: PropTypes.node
-};
+interface ContainerFullWidthProps {
+  children: React.ReactNode;
+}
 
-const ContainerFullWidth = props => (
-  <div style={styles.panelContainerFullWidth}>{props.children}</div>
-);
+function ContainerFullWidth({ children }: ContainerFullWidthProps) {
+  return <div style={styles.panelContainerFullWidth}>{children}</div>;
+}
 
-ContainerFullWidth.propTypes = {
-  children: PropTypes.node
-};
+interface AppProps {
+  panelButtons: any;
+  currentPanel: string;
+  setCurrentPanel: (panel: string) => void;
+  onContinue: () => void;
+  resultsPhase: number;
+  startSaveTrainedModel: (dataToSave: any) => void;
+  dataToSave: any;
+  saveStatus: string;
+  saveResponseData: any;
+}
 
 function App({
   panelButtons,
@@ -193,7 +209,7 @@ function App({
   dataToSave,
   saveStatus,
   saveResponseData
-}) {
+}: AppProps) {
   return (
     <div style={styles.app}>
       {currentPanel === "selectDataset" && (
@@ -280,22 +296,8 @@ function App({
   );
 }
 
-App.propTypes = {
-  panelButtons: PropTypes.object,
-  currentPanel: PropTypes.string,
-  setCurrentPanel: PropTypes.func,
-  onContinue: PropTypes.func,
-  resultsPhase: PropTypes.number,
-  startSaveTrainedModel: PropTypes.func,
-  dataToSave: PropTypes.object,
-  saveStatus: PropTypes.string,
-  saveResponseData: PropTypes.object,
-  isSaveComplete: PropTypes.func,
-  shouldDisplaySaveStatus: PropTypes.func
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     panelButtons: getPanelButtons(state),
     currentPanel: state.currentPanel,
     resultsPhase: state.resultsPhase,
@@ -303,14 +305,14 @@ export default connect(
     saveStatus: state.saveStatus,
     saveResponseData: state.saveResponseData
   }),
-  dispatch => ({
-    setCurrentPanel(panel) {
+  (dispatch: any) => ({
+    setCurrentPanel(panel: string) {
       dispatch(setCurrentPanel(panel));
     },
-    isSaveComplete(state) {
+    isSaveComplete(state: any) {
       dispatch(isSaveComplete(state));
     },
-    shouldDisplaySaveStatus(state) {
+    shouldDisplaySaveStatus(state: any) {
       dispatch(shouldDisplaySaveStatus(state));
     }
   })
diff --git a/src/UIComponents/AddFeatureButton.jsx b/src/UIComponents/AddFeatureButton.tsx
similarity index 66%
rename from src/UIComponents/AddFeatureButton.jsx
rename to src/UIComponents/AddFeatureButton.tsx
index cd0dc475..ffd09810 100644
--- a/src/UIComponents/AddFeatureButton.jsx
+++ b/src/UIComponents/AddFeatureButton.tsx
@@ -1,12 +1,16 @@
 /* React component to handle selecting columns as features. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { styles } from "../constants";
 import { addSelectedFeature } from "../redux";
 import I18n from "../i18n";
 
-function AddFeatureButton({ column, addSelectedFeature }) {
-  const addFeature = (event, column) => {
+interface AddFeatureButtonProps {
+  column?: string;
+  addSelectedFeature: (column: string) => void;
+}
+
+function AddFeatureButton({ column, addSelectedFeature }: AddFeatureButtonProps) {
+  const addFeature = (event: React.MouseEvent, column: string) => {
     addSelectedFeature(column);
     event.preventDefault();
   };
@@ -23,15 +27,10 @@ function AddFeatureButton({ column, addSelectedFeature }) {
   );
 }
 
-AddFeatureButton.propTypes = {
-  column: PropTypes.string,
-  addSelectedFeature: PropTypes.func.isRequired
-};
-
 export default connect(
-  state => ({}),
+  (state: any) => ({}),
   dispatch => ({
-    addSelectedFeature(column) {
+    addSelectedFeature(column: string) {
       dispatch(addSelectedFeature(column));
     }
   })
diff --git a/src/UIComponents/AnimationDescriptions.jsx b/src/UIComponents/AnimationDescriptions.tsx
similarity index 83%
rename from src/UIComponents/AnimationDescriptions.jsx
rename to src/UIComponents/AnimationDescriptions.tsx
index 18fc2244..15a3d5a2 100644
--- a/src/UIComponents/AnimationDescriptions.jsx
+++ b/src/UIComponents/AnimationDescriptions.tsx
@@ -1,8 +1,11 @@
 /* React component to handle animation descriptions for screen readers. */
-import PropTypes from "prop-types";
 import I18n from "../i18n";
 
-function AnimationDescription({ description }) {
+interface AnimationDescriptionProps {
+  description?: string;
+}
+
+function AnimationDescription({ description }: AnimationDescriptionProps) {
   return (
     <div id="animation-description" aria-live="polite">
       <div id="animation-description-text" style={{ display: 'none' }}>
@@ -16,10 +19,6 @@ function AnimationDescription({ description }) {
   );
 }
 
-AnimationDescription.propTypes = {
-  description: PropTypes.string
-};
-
 function TrainingAnimationDescription() {
   return (
     <AnimationDescription
diff --git a/src/UIComponents/ColumnDataTypeDropdown.jsx b/src/UIComponents/ColumnDataTypeDropdown.tsx
similarity index 67%
rename from src/UIComponents/ColumnDataTypeDropdown.jsx
rename to src/UIComponents/ColumnDataTypeDropdown.tsx
index fe4eb5c6..ad591df3 100644
--- a/src/UIComponents/ColumnDataTypeDropdown.jsx
+++ b/src/UIComponents/ColumnDataTypeDropdown.tsx
@@ -1,12 +1,17 @@
 /* React component to handle setting datatype for selected columns. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setColumnsByDataType } from "../redux";
-import { ColumnTypes } from "../constants.js";
+import { ColumnTypes } from "../constants";
 import I18n from "../i18n";
 
-function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataType }) {
-  const handleChangeDataType = (event, feature) => {
+interface ColumnDataTypeDropdownProps {
+  columnId?: string;
+  currentDataType?: string;
+  setColumnsByDataType: (column: string, dataType: string) => void;
+}
+
+function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataType }: ColumnDataTypeDropdownProps) {
+  const handleChangeDataType = (event: React.ChangeEvent<HTMLSelectElement>, feature: string) => {
     event.preventDefault();
     setColumnsByDataType(feature, event.target.value);
   };
@@ -31,16 +36,10 @@ function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataTyp
   );
 }
 
-ColumnDataTypeDropdown.propTypes = {
-  columnId: PropTypes.string,
-  currentDataType: PropTypes.oneOf(Object.values(ColumnTypes)),
-  setColumnsByDataType: PropTypes.func.isRequired
-};
-
 export default connect(
-  state => ({}),
+  (state: any) => ({}),
   dispatch => ({
-    setColumnsByDataType(column, dataType) {
+    setColumnsByDataType(column: string, dataType: string) {
       dispatch(setColumnsByDataType(column, dataType));
     }
   })
diff --git a/src/UIComponents/ColumnDetailsCategorical.jsx b/src/UIComponents/ColumnDetailsCategorical.tsx
similarity index 88%
rename from src/UIComponents/ColumnDetailsCategorical.jsx
rename to src/UIComponents/ColumnDetailsCategorical.tsx
index b3721477..88b3fc4e 100644
--- a/src/UIComponents/ColumnDetailsCategorical.jsx
+++ b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -2,11 +2,15 @@
 import { connect } from "react-redux";
 import { colors, styles } from "../constants";
 import { Bar } from "react-chartjs-2";
-import { categeoricalColumnDetailsShape } from "./shapes";
 import {
   getCategoricalColumnDetails
 } from "../selectors/currentColumnSelectors";
 import I18n from "../i18n";
+import { CategoricalColumnDetails } from "../types";
+
+interface ColumnDetailsCategoricalProps {
+  columnDetails: CategoricalColumnDetails;
+}
 
 const chartOptions = {
   scales: {
@@ -22,7 +26,7 @@ const chartOptions = {
   maintainAspectRatio: false
 };
 
-function ColumnDetailsCategorical({ columnDetails }) {
+function ColumnDetailsCategorical({ columnDetails }: ColumnDetailsCategoricalProps) {
   const { id, uniqueOptions, frequencies } = columnDetails;
   const labels = uniqueOptions && Object.values(uniqueOptions);
   const barData = {
@@ -67,10 +71,6 @@ function ColumnDetailsCategorical({ columnDetails }) {
   );
 }
 
-ColumnDetailsCategorical.propTypes = {
-  columnDetails: categeoricalColumnDetailsShape
-};
-
 export default connect(
   state => ({
     columnDetails: getCategoricalColumnDetails(state)
diff --git a/src/UIComponents/ColumnDetailsNumerical.jsx b/src/UIComponents/ColumnDetailsNumerical.tsx
similarity index 82%
rename from src/UIComponents/ColumnDetailsNumerical.jsx
rename to src/UIComponents/ColumnDetailsNumerical.tsx
index 3762294d..f6c9d855 100644
--- a/src/UIComponents/ColumnDetailsNumerical.jsx
+++ b/src/UIComponents/ColumnDetailsNumerical.tsx
@@ -2,10 +2,14 @@
 import { connect } from "react-redux";
 import { styles } from "../constants";
 import { getNumericalColumnDetails } from "../selectors/currentColumnSelectors";
-import { numericalColumnDetailsShape } from "./shapes"
 import I18n from "../i18n";
+import { NumericalColumnDetails } from "../types";
 
-function ColumnDetailsNumerical({ columnDetails }) {
+interface ColumnDetailsNumericalProps {
+  columnDetails: NumericalColumnDetails;
+}
+
+function ColumnDetailsNumerical({ columnDetails }: ColumnDetailsNumericalProps) {
   const { extrema, containsOnlyNumbers } = columnDetails;
 
   return (
@@ -27,10 +31,6 @@ function ColumnDetailsNumerical({ columnDetails }) {
   );
 }
 
-ColumnDetailsNumerical.propTypes = {
-  columnDetails: numericalColumnDetailsShape
-};
-
 export default connect(
   state => ({
     columnDetails: getNumericalColumnDetails(state)
diff --git a/src/UIComponents/ColumnInspector.jsx b/src/UIComponents/ColumnInspector.tsx
similarity index 90%
rename from src/UIComponents/ColumnInspector.jsx
rename to src/UIComponents/ColumnInspector.tsx
index f412c3b2..de9e54b5 100644
--- a/src/UIComponents/ColumnInspector.jsx
+++ b/src/UIComponents/ColumnInspector.tsx
@@ -2,10 +2,9 @@
   React component to handle displaying details, including data visualizations,
   for selected columns.
 */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { getCurrentColumnDetails } from "../selectors/currentColumnSelectors";
-import { styles, ColumnTypes } from "../constants.js";
+import { styles, ColumnTypes } from "../constants";
 import ScatterPlot from "./ScatterPlot";
 import CrossTab from "./CrossTab";
 import ScrollableContent from "./ScrollableContent";
@@ -15,11 +14,17 @@ import ColumnDataTypeDropdown from "./ColumnDataTypeDropdown";
 import AddFeatureButton from "./AddFeatureButton";
 import SelectLabelButton from "./SelectLabelButton";
 import UniqueOptionsWarning from "./UniqueOptionsWarning";
-import { currentColumnInspectorShape } from "./shapes";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { CurrentColumnInspector } from "../types";
 
-function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }) {
+interface ColumnInspectorProps {
+  currentColumnDetails: CurrentColumnInspector | undefined;
+  currentPanel: string;
+  datasetId: string;
+}
+
+function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: ColumnInspectorProps) {
   const selectingFeatures = currentPanel === "dataDisplayFeatures";
   const selectingLabel = currentPanel === "dataDisplayLabel";
 
@@ -85,14 +90,8 @@ function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }) {
   );
 }
 
-ColumnInspector.propTypes = {
-  currentColumnDetails: currentColumnInspectorShape,
-  currentPanel: PropTypes.string,
-  datasetId: PropTypes.string
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     currentColumnDetails: getCurrentColumnDetails(state),
     currentPanel: state.currentPanel,
     datasetId: state.metadata && state.metadata.name
diff --git a/src/UIComponents/CrossTab.jsx b/src/UIComponents/CrossTab.tsx
similarity index 95%
rename from src/UIComponents/CrossTab.jsx
rename to src/UIComponents/CrossTab.tsx
index 4aac9e99..8c7f24e8 100644
--- a/src/UIComponents/CrossTab.jsx
+++ b/src/UIComponents/CrossTab.tsx
@@ -6,12 +6,16 @@
 import { useCallback } from "react";
 import { connect } from "react-redux";
 import { getCrossTabData } from "../selectors/visualizationSelectors";
-import { styles } from "../constants.js";
+import { styles } from "../constants";
 import ScrollableContent from "./ScrollableContent";
-import { crossTabDataShape } from "./shapes";
 import I18n from "../i18n";
+import { CrossTabData } from "../types";
 
-function CrossTab({ crossTabData }) {
+interface CrossTabProps {
+  crossTabData: CrossTabData | null;
+}
+
+function CrossTab({ crossTabData }: CrossTabProps) {
   const getCellStyle = useCallback((percent) => {
     return {
       ...styles["crossTabCell" + Math.round(percent / 20)],
@@ -128,10 +132,6 @@ function CrossTab({ crossTabData }) {
   );
 }
 
-CrossTab.propTypes = {
-  crossTabData: crossTabDataShape
-};
-
 export default connect(state => ({
   crossTabData: getCrossTabData(state)
 }))(CrossTab);
diff --git a/src/UIComponents/DataCard.jsx b/src/UIComponents/DataCard.tsx
similarity index 89%
rename from src/UIComponents/DataCard.jsx
rename to src/UIComponents/DataCard.tsx
index eb002f59..09092293 100644
--- a/src/UIComponents/DataCard.jsx
+++ b/src/UIComponents/DataCard.tsx
@@ -1,13 +1,19 @@
 /* React component to show information about the currently-selected data set. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { styles } from "../constants.js";
+import { styles } from "../constants";
 import ScrollableContent from "./ScrollableContent";
-import { metadataShape, datasetDetailsShape } from "./shapes.js";
 import I18n from "../i18n";
 import { getDatasetDetails } from "../helpers/datasetDetails";
 
-function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount }) {
+interface DataCardProps {
+  name?: string;
+  metadata?: any;
+  datasetDetails?: any;
+  dataLength?: number;
+  removedRowsCount?: number;
+}
+
+function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount }: DataCardProps) {
   const card = metadata && metadata.card;
 
   const dataLengthLimit = 20000;
@@ -95,15 +101,7 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
   );
 }
 
-DataCard.propTypes = {
-  name: PropTypes.string,
-  metadata: metadataShape,
-  datasetDetails: datasetDetailsShape,
-  dataLength: PropTypes.number,
-  removedRowsCount: PropTypes.number
-};
-
-export default connect(state => ({
+export default connect((state: any) => ({
   name: state.name,
   metadata: state.metadata,
   datasetDetails: getDatasetDetails(state),
diff --git a/src/UIComponents/DataDisplay.jsx b/src/UIComponents/DataDisplay.tsx
similarity index 86%
rename from src/UIComponents/DataDisplay.jsx
rename to src/UIComponents/DataDisplay.tsx
index 3bf97a8a..2e2dc5e1 100644
--- a/src/UIComponents/DataDisplay.jsx
+++ b/src/UIComponents/DataDisplay.tsx
@@ -1,12 +1,15 @@
 /* React component to handle displaying imported data. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import Statement from "./Statement";
 import DataTable from "./DataTable";
 import { styles } from "../constants";
 import I18n from "../i18n";
 
-function DataDisplay({ data }) {
+interface DataDisplayProps {
+  data?: any[];
+}
+
+function DataDisplay({ data }: DataDisplayProps) {
   if (data.length === 0) {
     return null;
   }
@@ -29,12 +32,8 @@ function DataDisplay({ data }) {
   );
 }
 
-DataDisplay.propTypes = {
-  data: PropTypes.array
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     data: state.data
   })
 )(DataDisplay);
diff --git a/src/UIComponents/DataTable.jsx b/src/UIComponents/DataTable.tsx
similarity index 89%
rename from src/UIComponents/DataTable.jsx
rename to src/UIComponents/DataTable.tsx
index 1d3a357c..4d59cf93 100644
--- a/src/UIComponents/DataTable.jsx
+++ b/src/UIComponents/DataTable.tsx
@@ -1,9 +1,26 @@
 /* React component to handle displaying imported data. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { getTableData, setCurrentColumn, setHighlightColumn } from "../redux";
 import { styles } from "../constants";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+
+interface DataTableProps {
+  currentPanel: string;
+  data: any[];
+  datasetId: string;
+  labelColumn: string;
+  selectedFeatures: string[];
+  setCurrentColumn: (column: string | undefined) => void;
+  setHighlightColumn: (column: string | undefined) => void;
+  currentColumn: string;
+  highlightColumn: string;
+  reducedColumns: boolean;
+  singleRow: number | undefined;
+  startingRow: number | undefined;
+  noLabel: boolean;
+  hideLabel: boolean;
+  useResultsData?: boolean;
+}
 
 function DataTable({
   currentPanel,
@@ -20,7 +37,7 @@ function DataTable({
   startingRow,
   noLabel,
   hideLabel
-}) {
+}: DataTableProps) {
   const getColumnHeaderStyle = key => {
     let style;
 
@@ -155,23 +172,6 @@ function DataTable({
   );
 }
 
-DataTable.propTypes = {
-  currentPanel: PropTypes.string,
-  data: PropTypes.array,
-  datasetId: PropTypes.string,
-  labelColumn: PropTypes.string,
-  selectedFeatures: PropTypes.array,
-  setCurrentColumn: PropTypes.func,
-  setHighlightColumn: PropTypes.func,
-  currentColumn: PropTypes.string,
-  highlightColumn: PropTypes.string,
-  reducedColumns: PropTypes.bool,
-  singleRow: PropTypes.number,
-  startingRow: PropTypes.number,
-  noLabel: PropTypes.bool,
-  hideLabel: PropTypes.bool
-};
-
 export default connect(
   (state, props) => ({
     data: getTableData(state, props.useResultsData),
diff --git a/src/UIComponents/GenerateResults.jsx b/src/UIComponents/GenerateResults.tsx
similarity index 95%
rename from src/UIComponents/GenerateResults.jsx
rename to src/UIComponents/GenerateResults.tsx
index 03fcf9e2..156b7ed0 100644
--- a/src/UIComponents/GenerateResults.jsx
+++ b/src/UIComponents/GenerateResults.tsx
@@ -1,5 +1,4 @@
 /* React component to handle training. */
-import PropTypes from "prop-types";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { connect } from "react-redux";
 import { getTableData, readyToTrain } from "../redux";
@@ -15,7 +14,15 @@ import I18n from "../i18n";
 const framesPerCycle = 80;
 const maxNumItems = 7;
 
-function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, instructionsOverlayActive }) {
+interface GenerateResultsProps {
+  data: any[];
+  readyToTrain: boolean;
+  labelColumn: string;
+  selectedFeatures: string[];
+  instructionsOverlayActive: boolean;
+}
+
+function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, instructionsOverlayActive }: GenerateResultsProps) {
   const [frame, setFrame] = useState(0);
   const [, setFinished] = useState(false);
   const frameRef = useRef(0);
@@ -192,14 +199,6 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
   );
 }
 
-GenerateResults.propTypes = {
-  data: PropTypes.array,
-  readyToTrain: PropTypes.bool,
-  labelColumn: PropTypes.string,
-  selectedFeatures: PropTypes.array,
-  instructionsOverlayActive: PropTypes.bool
-};
-
 export default connect(state => ({
   data: getTableData(state, true),
   readyToTrain: readyToTrain(state),
diff --git a/src/UIComponents/ModelCard.jsx b/src/UIComponents/ModelCard.tsx
similarity index 92%
rename from src/UIComponents/ModelCard.jsx
rename to src/UIComponents/ModelCard.tsx
index d0c8a156..d32eefe1 100644
--- a/src/UIComponents/ModelCard.jsx
+++ b/src/UIComponents/ModelCard.tsx
@@ -1,5 +1,4 @@
 /* React component to handle displaying the model card. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { styles } from "../constants";
 import { getLabelToSave, getFeaturesToSave } from "../redux";
@@ -7,11 +6,20 @@ import { getPercentCorrect } from "../helpers/accuracy";
 import { getDatasetDetails } from "../helpers/datasetDetails";
 import Statement from "./Statement";
 import aiBotBorder from "@public/images/ai-bot/ai-bot-border.png";
-import { datasetDetailsShape, trainedModelDetailsShape, modelCardColumnShape } from "./shapes";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { ModelCardColumn } from "../types";
 
-function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }) {
+interface ModelCardProps {
+  trainedModelDetails?: any;
+  selectedFeatures?: string[];
+  percentCorrect?: string;
+  label?: ModelCardColumn;
+  features?: ModelCardColumn[];
+  datasetDetails?: any;
+}
+
+function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }: ModelCardProps) {
   console.log("trainedModelDetails", trainedModelDetails)
   const localizedLabel = getLocalizedColumnName(datasetDetails.name, label.id);
   const localizedFeatures =
@@ -144,16 +152,7 @@ function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, labe
   );
 }
 
-ModelCard.propTypes = {
-  trainedModelDetails: trainedModelDetailsShape,
-  selectedFeatures: PropTypes.arrayOf(modelCardColumnShape),
-  percentCorrect: PropTypes.string,
-  label: modelCardColumnShape,
-  features: PropTypes.arrayOf(PropTypes.string),
-  datasetDetails: datasetDetailsShape
-};
-
-export default connect(state => ({
+export default connect((state: any) => ({
   trainedModelDetails: state.trainedModelDetails,
   selectedFeatures: state.selectedFeatures,
   percentCorrect: getPercentCorrect(state),
diff --git a/src/UIComponents/Predict.jsx b/src/UIComponents/Predict.tsx
similarity index 84%
rename from src/UIComponents/Predict.jsx
rename to src/UIComponents/Predict.tsx
index 3d75bf9a..236db256 100644
--- a/src/UIComponents/Predict.jsx
+++ b/src/UIComponents/Predict.tsx
@@ -1,7 +1,7 @@
 /* React component to handle predicting and displaying predictions. */
-import PropTypes from "prop-types";
+import React from "react";
 import { connect } from "react-redux";
-import { store } from "../index.js";
+import { store } from "../index";
 import train from "../train";
 import { setTestData, getPredictAvailable } from "../redux";
 import { getConvertedPredictedLabel } from "../helpers/valueConversion";
@@ -15,7 +15,20 @@ import { styles } from "../constants";
 import aiBotBorder from "@public/images/ai-bot/ai-bot-border.png";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+
+interface PredictProps {
+  labelColumn: string;
+  selectedCategoricalFeatures: string[];
+  selectedNumericalFeatures: string[];
+  uniqueOptionsByColumn: Record<string, string[]>;
+  testData: Record<string, any>;
+  setTestData: (feature: string, value: any) => void;
+  predictedLabel: string | number;
+  getPredictAvailable: boolean;
+  extremaByColumn: Record<string, { min: number; max: number }>;
+  datasetId: string;
+}
 
 function Predict({
   labelColumn,
@@ -28,8 +41,8 @@ function Predict({
   getPredictAvailable: predictAvailable,
   extremaByColumn,
   datasetId
-}) {
-  const handleChange = (event, feature) => {
+}: PredictProps) {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, feature: string) => {
     setTestData(feature, event.target.value);
   };
 
@@ -43,8 +56,8 @@ function Predict({
       <ScrollableContent>
         <div>
           {selectedNumericalFeatures.map((feature, index) => {
-            let min = extremaByColumn[feature].min.toFixed(2);
-            let max = extremaByColumn[feature].max.toFixed(2);
+            const min = extremaByColumn[feature].min.toFixed(2);
+            const max = extremaByColumn[feature].max.toFixed(2);
 
             return (
               <div style={styles.cardRow} key={index}>
@@ -127,21 +140,8 @@ function Predict({
   );
 }
 
-Predict.propTypes = {
-  labelColumn: PropTypes.string,
-  selectedCategoricalFeatures: PropTypes.array,
-  selectedNumericalFeatures: PropTypes.array,
-  uniqueOptionsByColumn: PropTypes.object,
-  testData: PropTypes.object,
-  setTestData: PropTypes.func.isRequired,
-  predictedLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  getPredictAvailable: PropTypes.bool,
-  extremaByColumn: PropTypes.object,
-  datasetId: PropTypes.string
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     testData: state.testData,
     predictedLabel: getConvertedPredictedLabel(state),
     labelColumn: state.labelColumn,
@@ -152,8 +152,8 @@ export default connect(
     extremaByColumn: getExtremaByColumn(state),
     datasetId: state.metadata && state.metadata.name
   }),
-  dispatch => ({
-    setTestData(feature, value) {
+  (dispatch: any) => ({
+    setTestData(feature: string, value: any) {
       dispatch(setTestData(feature, value));
     }
   })
diff --git a/src/UIComponents/Results.jsx b/src/UIComponents/Results.tsx
similarity index 93%
rename from src/UIComponents/Results.jsx
rename to src/UIComponents/Results.tsx
index 8189706b..8e40f4b7 100644
--- a/src/UIComponents/Results.jsx
+++ b/src/UIComponents/Results.tsx
@@ -1,5 +1,4 @@
 /* React component to handle displaying accuracy results. */
-import PropTypes from "prop-types";
 import { useEffect, useCallback } from "react";
 import { connect } from "react-redux";
 import { styles } from "../constants";
@@ -9,7 +8,14 @@ import ResultsDetails from "./ResultsDetails";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
 
-function Results({ historicResults, showResultsDetails, setShowResultsDetails, setResultsPhase }) {
+interface ResultsProps {
+  historicResults: any[];
+  showResultsDetails: boolean;
+  setShowResultsDetails: (show: boolean) => void;
+  setResultsPhase: (phase: number) => void;
+}
+
+function Results({ historicResults, showResultsDetails, setShowResultsDetails, setResultsPhase }: ResultsProps) {
   useEffect(() => {
     setResultsPhase(0);
     const timer = setTimeout(() => {
@@ -83,13 +89,6 @@ function Results({ historicResults, showResultsDetails, setShowResultsDetails, s
   );
 }
 
-Results.propTypes = {
-  historicResults: PropTypes.array,
-  showResultsDetails: PropTypes.bool,
-  setShowResultsDetails: PropTypes.func,
-  setResultsPhase: PropTypes.func
-};
-
 export default connect(
   state => ({
     historicResults: state.historicResults,
diff --git a/src/UIComponents/ResultsDetails.jsx b/src/UIComponents/ResultsDetails.tsx
similarity index 82%
rename from src/UIComponents/ResultsDetails.jsx
rename to src/UIComponents/ResultsDetails.tsx
index ce91762e..12ac28de 100644
--- a/src/UIComponents/ResultsDetails.jsx
+++ b/src/UIComponents/ResultsDetails.tsx
@@ -1,5 +1,4 @@
 /* React component to handle displaying accuracy results. */
-import PropTypes from "prop-types";
 import { useCallback } from "react";
 import { connect } from "react-redux";
 import { setShowResultsDetails } from "../redux";
@@ -9,13 +8,22 @@ import {
   getIncorrectResults
 } from "../helpers/accuracy";
 import { ResultsGrades, styles } from "../constants";
-import { resultsPropType } from "./shapes";
 import ResultsToggle from "./ResultsToggle";
 import ResultsTable from "./ResultsTable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 
-function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorrect, setShowResultsDetails, correctResults, incorrectResults }) {
+interface ResultsDetailsProps {
+  resultsTab: string;
+  selectedFeatures: string[];
+  labelColumn: string;
+  percentCorrect: string;
+  setShowResultsDetails: (show: boolean) => void;
+  correctResults: any;
+  incorrectResults: any;
+}
+
+function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorrect, setShowResultsDetails, correctResults, incorrectResults }: ResultsDetailsProps) {
   const onClose = useCallback(() => {
     setShowResultsDetails(false);
   }, [setShowResultsDetails]);
@@ -44,16 +52,6 @@ function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorr
   );
 }
 
-ResultsDetails.propTypes = {
-  resultsTab: PropTypes.string,
-  selectedFeatures: PropTypes.array,
-  labelColumn: PropTypes.string,
-  percentCorrect: PropTypes.string,
-  setShowResultsDetails: PropTypes.func,
-  correctResults: resultsPropType,
-  incorrectResults: resultsPropType,
-};
-
 export default connect(
   state => ({
     resultsTab: state.resultsTab,
diff --git a/src/UIComponents/ResultsTable.jsx b/src/UIComponents/ResultsTable.tsx
similarity index 92%
rename from src/UIComponents/ResultsTable.jsx
rename to src/UIComponents/ResultsTable.tsx
index fb36c929..d24aaf47 100644
--- a/src/UIComponents/ResultsTable.jsx
+++ b/src/UIComponents/ResultsTable.tsx
@@ -1,14 +1,23 @@
 /* React component to handle displaying test data and A.I. Bot's guesses. */
-import PropTypes from "prop-types";
 import { useCallback } from "react";
 import { connect } from "react-redux";
 import { isRegression, setResultsHighlightRow } from "../redux";
 import { styles, colors, REGRESSION_ERROR_TOLERANCE } from "../constants";
-import { resultsPropType } from "./shapes";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { ResultsData } from "../types";
 
-function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }) {
+interface ResultsTableProps {
+  selectedFeatures: string[];
+  labelColumn: string;
+  results: ResultsData;
+  isRegression: boolean;
+  setResultsHighlightRow: (row: number | undefined) => void;
+  resultsHighlightRow: number | undefined;
+  datasetId: string;
+}
+
+function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }: ResultsTableProps) {
   const getRowCellStyle = useCallback((index) => {
     return {
       ...styles.tableCell,
@@ -126,16 +135,6 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
   );
 }
 
-ResultsTable.propTypes = {
-  selectedFeatures: PropTypes.array,
-  labelColumn: PropTypes.string,
-  results: resultsPropType,
-  isRegression: PropTypes.bool,
-  setResultsHighlightRow: PropTypes.func,
-  resultsHighlightRow: PropTypes.number,
-  datasetId: PropTypes.string
-};
-
 export default connect(
   state => ({
     selectedFeatures: state.selectedFeatures,
diff --git a/src/UIComponents/ResultsToggle.jsx b/src/UIComponents/ResultsToggle.tsx
similarity index 84%
rename from src/UIComponents/ResultsToggle.jsx
rename to src/UIComponents/ResultsToggle.tsx
index ba0ca997..117efe2a 100644
--- a/src/UIComponents/ResultsToggle.jsx
+++ b/src/UIComponents/ResultsToggle.tsx
@@ -1,5 +1,4 @@
 /* React component to handle toggling between correct/incorrect test results */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setResultsTab } from "../redux";
 import { ResultsGrades, styles } from "../constants";
@@ -7,8 +6,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes, faCheck } from "@fortawesome/free-solid-svg-icons";
 import I18n from "../i18n";
 
-function ResultsToggle({ resultsTab, setResultsTab }) {
-  const getTogglePillStyle = key => {
+interface ResultsToggleProps {
+  resultsTab?: string;
+  setResultsTab?: (key: string) => void;
+}
+
+function ResultsToggle({ resultsTab, setResultsTab }: ResultsToggleProps) {
+  const getTogglePillStyle = (key: string) => {
     let style;
     if (key === resultsTab) {
       style = { ...styles.pill, ...styles.selectedPill };
@@ -54,17 +58,12 @@ function ResultsToggle({ resultsTab, setResultsTab }) {
   );
 }
 
-ResultsToggle.propTypes = {
-  resultsTab: PropTypes.string,
-  setResultsTab: PropTypes.func
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     resultsTab: state.resultsTab
   }),
   dispatch => ({
-    setResultsTab(key) {
+    setResultsTab(key: string) {
       dispatch(setResultsTab(key));
     }
   })
diff --git a/src/UIComponents/SaveModel.jsx b/src/UIComponents/SaveModel.tsx
similarity index 88%
rename from src/UIComponents/SaveModel.jsx
rename to src/UIComponents/SaveModel.tsx
index 9283da2c..733f7a7d 100644
--- a/src/UIComponents/SaveModel.jsx
+++ b/src/UIComponents/SaveModel.tsx
@@ -1,6 +1,5 @@
 /* React component to handle saving a trained model. */
-import PropTypes from "prop-types";
-import { useState } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { setTrainedModelDetail } from "../redux";
 import {
@@ -12,7 +11,18 @@ import { styles, ModelNameMaxLength } from "../constants";
 import Statement from "./Statement";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+
+interface SaveModelProps {
+  trainedModel: any;
+  setTrainedModelDetail: (field: string, value: string, isColumn: boolean) => void;
+  trainedModelDetails: any;
+  labelColumn: string;
+  columnDescriptions: { id: string; description: string }[];
+  dataDescription: string;
+  isUserUploadedDataset: boolean;
+  datasetId: string;
+}
 
 function SaveModel({
   trainedModel,
@@ -23,19 +33,19 @@ function SaveModel({
   dataDescription,
   isUserUploadedDataset: isUserUploaded,
   datasetId
-}) {
+}: SaveModelProps) {
   const [showColumnDescriptions, setShowColumnDescriptions] = useState(isUserUploaded);
 
   const toggleColumnDescriptions = () => {
     setShowColumnDescriptions(!showColumnDescriptions);
   };
 
-  const handleChange = (event, field, isColumn) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, field: string, isColumn: boolean) => {
     setTrainedModelDetail(field, event.target.value, isColumn);
   };
 
   const getColumnFields = () => {
-    var fields = [];
+    const fields: any[] = [];
 
     for (const columnDescription of columnDescriptions) {
       const labelType = I18n.t("saveModelColumnTypeLabel");
@@ -54,7 +64,7 @@ function SaveModel({
   };
 
   const getUsesFields = () => {
-    var fields = [];
+    const fields: any[] = [];
     fields.push({
       id: "potentialUses",
       text: I18n.t("potentialUsesLabel"),
@@ -79,7 +89,7 @@ function SaveModel({
   const nameField = {
     id: "name",
     text: I18n.t("modelNameLabel")
-  };
+  } as any;
 
   const dataDescriptionField = {
     id: "datasetDescription",
@@ -120,7 +130,7 @@ function SaveModel({
                 <div>{field.description}</div>
                 <ul>
                   {field.descriptionDetails &&
-                    field.descriptionDetails.map((detail, index) => {
+                    field.descriptionDetails.map((detail: string, index: number) => {
                       return (
                         <li style={styles.regularText} key={index}>
                           {detail}
@@ -131,7 +141,7 @@ function SaveModel({
                 {!field.answer && (
                   <div>
                     <textarea
-                      rows="4"
+                      rows={4}
                       onChange={event =>
                         handleChange(event, field.id, field.isColumn)
                       }
@@ -150,7 +160,7 @@ function SaveModel({
           {isUserUploaded && (
             <div>
               <textarea
-                rows="4"
+                rows={4}
                 onChange={event =>
                   handleChange(event, dataDescriptionField.id, false)
                 }
@@ -189,7 +199,7 @@ function SaveModel({
                     {isUserUploaded && (
                       <div>
                         <textarea
-                          rows="1"
+                          rows={1}
                           onChange={event =>
                             handleChange(event, field.id, field.isColumn)
                           }
@@ -213,19 +223,8 @@ function SaveModel({
   );
 }
 
-SaveModel.propTypes = {
-  trainedModel: PropTypes.object,
-  setTrainedModelDetail: PropTypes.func,
-  trainedModelDetails: PropTypes.object,
-  labelColumn: PropTypes.string,
-  columnDescriptions: PropTypes.array,
-  dataDescription: PropTypes.string,
-  isUserUploadedDataset: PropTypes.bool,
-  datasetId: PropTypes.string
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     trainedModel: state.trainedModel,
     trainedModelDetails: state.trainedModelDetails,
     labelColumn: state.labelColumn,
@@ -234,8 +233,8 @@ export default connect(
     isUserUploadedDataset: isUserUploadedDataset(state),
     datasetId: state.metadata && state.metadata.name
   }),
-  dispatch => ({
-    setTrainedModelDetail(field, value, isColumn) {
+  (dispatch: any) => ({
+    setTrainedModelDetail(field: string, value: string, isColumn: boolean) {
       dispatch(setTrainedModelDetail(field, value, isColumn));
     }
   })
diff --git a/src/UIComponents/ScatterPlot.jsx b/src/UIComponents/ScatterPlot.tsx
similarity index 87%
rename from src/UIComponents/ScatterPlot.jsx
rename to src/UIComponents/ScatterPlot.tsx
index 1957d830..88a1fc97 100644
--- a/src/UIComponents/ScatterPlot.jsx
+++ b/src/UIComponents/ScatterPlot.tsx
@@ -1,7 +1,6 @@
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { getScatterPlotData } from "../selectors/visualizationSelectors.js";
-import { styles, colors } from "../constants.js";
+import { getScatterPlotData } from "../selectors/visualizationSelectors";
+import { styles, colors } from "../constants";
 import { Scatter } from "react-chartjs-2";
 import I18n from "../i18n";
 
@@ -54,7 +53,15 @@ const chartOptionsBase = {
   maintainAspectRatio: false
 };
 
-function ScatterPlot({ scatterPlotData }) {
+interface ScatterPlotProps {
+  scatterPlotData: {
+    coordinates: { x: number; y: number }[];
+    feature: string;
+    label: string;
+  } | null;
+}
+
+function ScatterPlot({ scatterPlotData }: ScatterPlotProps) {
   const scatterDataCombined = {
     ...scatterDataBase
   };
@@ -87,10 +94,6 @@ function ScatterPlot({ scatterPlotData }) {
   );
 }
 
-ScatterPlot.propTypes = {
-  scatterPlotData: PropTypes.object
-};
-
 export default connect(state => ({
   scatterPlotData: getScatterPlotData(state)
 }))(ScatterPlot);
diff --git a/src/UIComponents/ScrollableContent.jsx b/src/UIComponents/ScrollableContent.tsx
similarity index 54%
rename from src/UIComponents/ScrollableContent.jsx
rename to src/UIComponents/ScrollableContent.tsx
index 39cc2d01..a5109255 100644
--- a/src/UIComponents/ScrollableContent.jsx
+++ b/src/UIComponents/ScrollableContent.tsx
@@ -1,7 +1,12 @@
-import PropTypes from "prop-types";
+import { ReactNode } from "react";
 import { styles } from "../constants";
 
-export default function ScrollableContent({ tinted, children }) {
+interface ScrollableContentProps {
+  tinted?: boolean;
+  children?: ReactNode;
+}
+
+export default function ScrollableContent({ tinted, children }: ScrollableContentProps) {
   return (
     <div
       style={
@@ -12,8 +17,3 @@ export default function ScrollableContent({ tinted, children }) {
     </div>
   );
 }
-
-ScrollableContent.propTypes = {
-  tinted: PropTypes.bool,
-  children: PropTypes.node
-};
diff --git a/src/UIComponents/SelectDataset.jsx b/src/UIComponents/SelectDataset.tsx
similarity index 89%
rename from src/UIComponents/SelectDataset.jsx
rename to src/UIComponents/SelectDataset.tsx
index 02ef07cf..adf77664 100644
--- a/src/UIComponents/SelectDataset.jsx
+++ b/src/UIComponents/SelectDataset.tsx
@@ -1,5 +1,4 @@
 /* React component to handle importing CSVs and pushing data to Redux store. */
-import PropTypes from "prop-types";
 import { useState } from "react";
 import { connect } from "react-redux";
 import {
@@ -17,6 +16,20 @@ import { styles } from "../constants";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
 
+interface SelectDatasetProps {
+  setSelectedName: (name: string) => void;
+  setSelectedCSV: (csvfilePath: string | File) => void;
+  setSelectedJSON: (jsonfilePath: string) => void;
+  setHighlightDataset: (id: string | undefined) => void;
+  csvfile: string | object;
+  jsonfile: string | object;
+  resetState: () => void;
+  specifiedDatasets: string[] | undefined;
+  name: string;
+  highlightDataset: string;
+  invalidData: string;
+}
+
 function SelectDataset({
   setSelectedName,
   setSelectedCSV,
@@ -27,7 +40,7 @@ function SelectDataset({
   name,
   highlightDataset,
   invalidData
-}) {
+}: SelectDatasetProps) {
   const [, setDownload] = useState(false);
 
   const handleDatasetClick = id => {
@@ -143,20 +156,6 @@ function SelectDataset({
   );
 }
 
-SelectDataset.propTypes = {
-  setSelectedName: PropTypes.func.isRequired,
-  setSelectedCSV: PropTypes.func.isRequired,
-  setSelectedJSON: PropTypes.func.isRequired,
-  setHighlightDataset: PropTypes.func.isRequired,
-  csvfile: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  jsonfile: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  resetState: PropTypes.func.isRequired,
-  specifiedDatasets: PropTypes.arrayOf(PropTypes.string),
-  name: PropTypes.string,
-  highlightDataset: PropTypes.string,
-  invalidData: PropTypes.string
-};
-
 export default connect(
   state => ({
     csvfile: state.csvfile,
diff --git a/src/UIComponents/SelectLabelButton.jsx b/src/UIComponents/SelectLabelButton.tsx
similarity index 66%
rename from src/UIComponents/SelectLabelButton.jsx
rename to src/UIComponents/SelectLabelButton.tsx
index 09c35e5f..9977e8c6 100644
--- a/src/UIComponents/SelectLabelButton.jsx
+++ b/src/UIComponents/SelectLabelButton.tsx
@@ -1,12 +1,16 @@
 /* React component to handle selecting a column as the label. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { styles } from "../constants";
 import { setLabelColumn } from "../redux";
 import I18n from "../i18n";
 
-function SelectLabelButton({ column, setLabelColumn }) {
-  const setPredictColumn = (event, column) => {
+interface SelectLabelButtonProps {
+  column?: string;
+  setLabelColumn: (column: string) => void;
+}
+
+function SelectLabelButton({ column, setLabelColumn }: SelectLabelButtonProps) {
+  const setPredictColumn = (event: React.MouseEvent, column: string) => {
     setLabelColumn(column);
     event.preventDefault();
   };
@@ -23,15 +27,10 @@ function SelectLabelButton({ column, setLabelColumn }) {
   );
 }
 
-SelectLabelButton.propTypes = {
-  column: PropTypes.string,
-  setLabelColumn: PropTypes.func.isRequired
-};
-
 export default connect(
-  state => ({}),
+  (state: any) => ({}),
   dispatch => ({
-    setLabelColumn(column) {
+    setLabelColumn(column: string) {
       dispatch(setLabelColumn(column));
     }
   })
diff --git a/src/UIComponents/Statement.jsx b/src/UIComponents/Statement.tsx
similarity index 86%
rename from src/UIComponents/Statement.jsx
rename to src/UIComponents/Statement.tsx
index 7344f29c..598f4f70 100644
--- a/src/UIComponents/Statement.jsx
+++ b/src/UIComponents/Statement.tsx
@@ -1,12 +1,23 @@
 /* React component to display a statement about our model. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { setLabelColumn, removeSelectedFeature } from "../redux";
 import { styles } from "../constants";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import I18n from "../i18n";
-import { getLocalizedColumnName } from "../helpers/columnDetails.js";
+import { getLocalizedColumnName } from "../helpers/columnDetails";
+
+interface StatementProps {
+  shouldShow?: boolean;
+  smallFont?: boolean;
+  data?: any[];
+  currentPanel?: string;
+  labelColumn?: string;
+  selectedFeatures?: string[];
+  setLabelColumn?: (column: string | null) => void;
+  removeSelectedFeature?: (id: string) => void;
+  datasetId?: string;
+}
 
 function Statement({
   shouldShow,
@@ -18,16 +29,16 @@ function Statement({
   setLabelColumn,
   removeSelectedFeature,
   datasetId
-}) {
+}: StatementProps) {
   const removeLabel = () => {
     setLabelColumn(null);
   };
 
-  const removeFeature = id => {
+  const removeFeature = (id: string) => {
     removeSelectedFeature(id);
   };
 
-  const labelHTML = (label, currentPanel) => {
+  const labelHTML = (label: string, currentPanel: string) => {
     const localizedLabel = getLocalizedColumnName(datasetId, label);
     return (
       <div style={styles.statementLabel}>
@@ -51,7 +62,7 @@ function Statement({
     );
   };
 
-  const selectedFeaturesHTML = (selectedFeatures, currentPanel) => {
+  const selectedFeaturesHTML = (selectedFeatures: string[], currentPanel: string) => {
     return (
       <span>
         {selectedFeatures.map((selectedFeature, index) => {
@@ -106,9 +117,9 @@ function Statement({
   // "Predict __CDO_OUTPUT__ based on __CDO_INPUTS__" becomes
   // ["Predict ", "__CDO_OUTPUT__", " based on ", "__CDO_INPUTS__"]
   const regex = new RegExp(`(${OUTPUT_KEY}|${INPUTS_KEY})`);
-  const predictionStatementParts = predictionStatement.split(regex).filter((part) => part);
+  const predictionStatementParts = predictionStatement.split(regex).filter((part: string) => part);
   // Swap the OUTPUT and INPUTS placeholders with React components.
-  const predictionStatementComponents = predictionStatementParts.map((part, index) => {
+  const predictionStatementComponents = predictionStatementParts.map((part: string, index: number) => {
     if (part === OUTPUT_KEY) {
       return labelHTML(labelColumn, currentPanel);
     } else if (part === INPUTS_KEY) {
@@ -116,7 +127,7 @@ function Statement({
     } else {
       return part;
     }
-  }).map((part, index) => {
+  }).map((part: any, index: number) => {
     // React wants sibling elements in a list to have a unique "key".
     return (<span key={index}>{part}</span>);
   });
@@ -131,22 +142,10 @@ function Statement({
   );
 }
 
-Statement.propTypes = {
-  shouldShow: PropTypes.bool,
-  smallFont: PropTypes.bool,
-  data: PropTypes.array,
-  currentPanel: PropTypes.string,
-  labelColumn: PropTypes.string,
-  selectedFeatures: PropTypes.array,
-  setLabelColumn: PropTypes.func,
-  removeSelectedFeature: PropTypes.func,
-  datasetId: PropTypes.string
-};
-
 export const UnconnectedStatement = Statement;
 
 export default connect(
-  state => ({
+  (state: any) => ({
     shouldShow: state.data.length !== 0,
     data: state.data,
     currentPanel: state.currentPanel,
@@ -155,10 +154,10 @@ export default connect(
     datasetId: state.metadata && state.metadata.name
   }),
   dispatch => ({
-    setLabelColumn(labelColumn) {
+    setLabelColumn(labelColumn: string | null) {
       dispatch(setLabelColumn(labelColumn));
     },
-    removeSelectedFeature(labelColumn) {
+    removeSelectedFeature(labelColumn: string) {
       dispatch(removeSelectedFeature(labelColumn));
     }
   })
diff --git a/src/UIComponents/TrainModel.jsx b/src/UIComponents/TrainModel.tsx
similarity index 91%
rename from src/UIComponents/TrainModel.jsx
rename to src/UIComponents/TrainModel.tsx
index ca04c416..456447a1 100644
--- a/src/UIComponents/TrainModel.jsx
+++ b/src/UIComponents/TrainModel.tsx
@@ -1,8 +1,7 @@
 /* React component to handle training. */
-import PropTypes from "prop-types";
 import { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
-import { store } from "../index.js";
+import { store } from "../index";
 import train from "../train";
 import { getTableData, readyToTrain } from "../redux";
 import { styles, getFadeOpacity } from "../constants";
@@ -16,7 +15,15 @@ import I18n from "../i18n";
 const framesPerCycle = 80;
 const maxNumItems = 7;
 
-function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures, instructionsOverlayActive }) {
+interface TrainModelProps {
+  data: any[];
+  readyToTrain: boolean;
+  labelColumn: string;
+  selectedFeatures: string[];
+  instructionsOverlayActive: boolean;
+}
+
+function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures, instructionsOverlayActive }: TrainModelProps) {
   const [frame, setFrame] = useState(0);
   const [headOpen, setHeadOpen] = useState(false);
   const [, setFinished] = useState(false);
@@ -63,21 +70,21 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const getAnimationProgress = () => {
+  const getAnimationProgress = (): number => {
     let amount = (frame % framesPerCycle) / framesPerCycle;
     amount -= Math.sin(amount * 2 * Math.PI) / (2 * Math.PI);
     return amount;
   };
 
-  const getNumItems = () => {
+  const getNumItems = (): number => {
     return Math.min(maxNumItems, data.length);
   };
 
-  const getShowItemsFadingOut = () => {
+  const getShowItemsFadingOut = (): boolean => {
     return data.length > maxNumItems;
   };
 
-  const getAnimationStep = () => {
+  const getAnimationStep = (): number => {
     return Math.floor(frame / framesPerCycle);
   };
 
@@ -170,15 +177,7 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
   );
 }
 
-TrainModel.propTypes = {
-  data: PropTypes.array,
-  readyToTrain: PropTypes.bool,
-  labelColumn: PropTypes.string,
-  selectedFeatures: PropTypes.array,
-  instructionsOverlayActive: PropTypes.bool
-};
-
-export default connect(state => ({
+export default connect((state: any) => ({
   data: getTableData(state, false),
   readyToTrain: readyToTrain(state),
   labelColumn: state.labelColumn,
diff --git a/src/UIComponents/UniqueOptionsWarning.jsx b/src/UIComponents/UniqueOptionsWarning.tsx
similarity index 79%
rename from src/UIComponents/UniqueOptionsWarning.jsx
rename to src/UIComponents/UniqueOptionsWarning.tsx
index 53b79dcb..09814eae 100644
--- a/src/UIComponents/UniqueOptionsWarning.jsx
+++ b/src/UIComponents/UniqueOptionsWarning.tsx
@@ -1,5 +1,4 @@
 /* React component to handle showing warning for excessive unique options. */
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { styles, UNIQUE_OPTIONS_MAX } from "../constants";
 import {
@@ -7,7 +6,11 @@ import {
 } from "../selectors/currentColumnSelectors";
 import I18n from "../i18n";
 
-function UniqueOptionsWarning({ showWarning }) {
+interface UniqueOptionsWarningProps {
+  showWarning?: boolean;
+}
+
+function UniqueOptionsWarning({ showWarning }: UniqueOptionsWarningProps) {
   if (!showWarning) {
     return null;
   }
@@ -22,12 +25,8 @@ function UniqueOptionsWarning({ showWarning }) {
   );
 }
 
-UniqueOptionsWarning.propTypes = {
-  showWarning: PropTypes.bool
-};
-
 export default connect(
-  state => ({
+  (state: any) => ({
     showWarning: hasTooManyUniqueOptions(state)
   })
 )(UniqueOptionsWarning);
diff --git a/src/UIComponents/shapes.js b/src/UIComponents/shapes.js
deleted file mode 100644
index 3bd95384..00000000
--- a/src/UIComponents/shapes.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import PropTypes from "prop-types";
-
-export const resultsPropType = PropTypes.shape({
-  examples: PropTypes.arrayOf(PropTypes.array).isRequired,
-  labels: PropTypes.array.isRequired,
-  predictedLabels: PropTypes.array.isRequired
-});
-
-export const categeoricalColumnDetailsShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  uniqueOptions: PropTypes.array.isRequired,
-  frequencies: PropTypes.objectOf(PropTypes.number).isRequired
-});
-
-export const numericalColumnDetailsShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  extrema: PropTypes.objectOf(PropTypes.number),
-  containsOnlyNumbers: PropTypes.bool
-});
-
-export const currentColumnInspectorShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  readOnly: PropTypes.bool,
-  dataType: PropTypes.string,
-  description: PropTypes.string,
-  isSelectable: PropTypes.bool
-});
-
-export const crossTabDataShape = PropTypes.shape({
-  labelName: PropTypes.string.isRequired,
-  uniqueLabelValues: PropTypes.array.isRequired,
-  featureNames: PropTypes.arrayOf(PropTypes.string).isRequired,
-  results: PropTypes.arrayOf(PropTypes.objectOf).isRequired
-});
-
-export const metadataShape = PropTypes.shape({
-  name: PropTypes.string,
-  card: metadataCardShape,
-  defaultLabelColumn: PropTypes.string,
-  fields: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    description: PropTypes.string,
-    type: PropTypes.oneOf(['numerical', 'categorical'])
-  }))
-});
-
-const metadataCardShape = PropTypes.shape({
-  description: PropTypes.string,
-  context: metadataContextShape,
-  lastUpdated: PropTypes.string,
-  source: PropTypes.string
-});
-
-const metadataContextShape = PropTypes.shape({
-  createdBy: PropTypes.string,
-  potentialMisuses: PropTypes.string,
-  potentialUses: PropTypes.string
-});
-
-export const trainedModelDetailsShape = PropTypes.shape({
-  name: PropTypes.string,
-  potentialMisuses: PropTypes.string,
-  potentialUses: PropTypes.string
-});
-
-export const modelCardColumnShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  // If label column is numerical.
-  max: PropTypes.number,
-  min: PropTypes.number,
-  // If label column is categorical.
-  values: PropTypes.array
-});
-
-export const datasetDetailsShape = PropTypes.shape({
-  description: PropTypes.string,
-  isUserUploaded: PropTypes.bool.isRequired,
-  name: PropTypes.string,
-  numRows: PropTypes.number.isRequired,
-  potentialUses: PropTypes.string,
-  potentialMisuses: PropTypes.string
-});
diff --git a/src/assetPath.js b/src/assetPath.js
deleted file mode 100644
index e9714c40..00000000
--- a/src/assetPath.js
+++ /dev/null
@@ -1,5 +0,0 @@
-global.__ml_playground_asset_public_path__ = "./assets/";
-
-export const setAssetPath = path => {
-  global.__ml_playground_asset_public_path__ = path;
-};
diff --git a/src/assetPath.ts b/src/assetPath.ts
new file mode 100644
index 00000000..7514e5f5
--- /dev/null
+++ b/src/assetPath.ts
@@ -0,0 +1,5 @@
+(global as any).__ml_playground_asset_public_path__ = "./assets/";
+
+export const setAssetPath = (path: string): void => {
+  (global as any).__ml_playground_asset_public_path__ = path;
+};
diff --git a/src/constants.js b/src/constants.ts
similarity index 99%
rename from src/constants.js
rename to src/constants.ts
index f9da4aa5..d0cc9d75 100644
--- a/src/constants.js
+++ b/src/constants.ts
@@ -30,7 +30,7 @@ export const ModelNameMaxLength = 150;
 
 export const UNIQUE_OPTIONS_MAX = 50;
 
-export function getFadeOpacity(animationProgress) {
+export function getFadeOpacity(animationProgress: number): number {
   return animationProgress > 0.95
     ? 1 - (animationProgress - 0.95) / 0.05
     : animationProgress < 0.05
diff --git a/src/csvReaderWrapper.js b/src/csvReaderWrapper.ts
similarity index 59%
rename from src/csvReaderWrapper.js
rename to src/csvReaderWrapper.ts
index d30809db..3705c475 100644
--- a/src/csvReaderWrapper.js
+++ b/src/csvReaderWrapper.ts
@@ -1,17 +1,17 @@
 import Papa from "papaparse";
-import { store } from "./index.js";
+import { store } from "./index";
 import {
   setImportedData,
   setInvalidData,
   setColumnsByDataType,
   setRemovedRowsCount
 } from "./redux";
-import { containsOnlyNumbers } from "./helpers/columnDetails.js";
-import { ColumnTypes } from "./constants.js";
+import { containsOnlyNumbers } from "./helpers/columnDetails";
+import { ColumnTypes } from "./constants";
 
-export const parseCSV = (csvfile, download, useDefaultColumnDataType) => {
+export const parseCSV = (csvfile: string, download: boolean, useDefaultColumnDataType: boolean): void => {
   Papa.parse(csvfile, {
-    complete: result => {
+    complete: (result: any) => {
       updateData(result, useDefaultColumnDataType, !download);
     },
     header: true,
@@ -23,11 +23,11 @@ export const parseCSV = (csvfile, download, useDefaultColumnDataType) => {
 export const MIN_CSV_ROWS = 2;
 export const MIN_CSV_COLUMNS = 2;
 
-const cleanData = (data) => {
-  var cleanedData = []
+const cleanData = (data: any[]): any[] => {
+  const cleanedData: any[] = []
 
-  for (var row of data) {
-    var cleanedRow = getCleanedRow(row);
+  for (const row of data) {
+    const cleanedRow = getCleanedRow(row);
     if (cleanedRow !== null) {
       cleanedData.push(cleanedRow);
     }
@@ -36,10 +36,10 @@ const cleanData = (data) => {
   return cleanedData;
 }
 
-const getCleanedRow = (row) => {
-  for (var column in row) {
+const getCleanedRow = (row: any): any | null => {
+  for (const column in row) {
     if (column !== "__parsed_extra") {
-      var cellValue = row[column];
+      const cellValue = row[column];
 
       if (!isCellValid(cellValue)) {
         return null;
@@ -52,13 +52,13 @@ const getCleanedRow = (row) => {
   return row;
 }
 
-const isCellValid = (cell) => {
+const isCellValid = (cell: any): boolean => {
   return cell !== undefined && cell !== "" && typeof cell === "string";
 }
 
-const updateData = (result, useDefaultColumnDataType, userUploadedData) => {
-  var data = result.data;
-  var cleanedData = cleanData(data);
+const updateData = (result: any, useDefaultColumnDataType: boolean, userUploadedData: boolean): void => {
+  const data = result.data;
+  const cleanedData = cleanData(data);
 
   if (cleanedData.length < MIN_CSV_ROWS) {
     store.dispatch(setInvalidData("tooFewRows"));
@@ -75,14 +75,14 @@ const updateData = (result, useDefaultColumnDataType, userUploadedData) => {
   }
 }
 
-const countRemovedRows = (originalData, cleanedData) => {
-  var removedRowsCount = originalData.length - cleanedData.length;
+const countRemovedRows = (originalData: any[], cleanedData: any[]): void => {
+  const removedRowsCount = originalData.length - cleanedData.length;
   store.dispatch(setRemovedRowsCount(removedRowsCount));
 }
 
-const setDefaultColumnDataType = data => {
+const setDefaultColumnDataType = (data: any[]): void => {
   const columns = Object.keys(data[0]);
-  for (let column of columns) {
+  for (const column of columns) {
     if (containsOnlyNumbers(data, column)) {
       store.dispatch(setColumnsByDataType(column, ColumnTypes.NUMERICAL))
     } else {
diff --git a/src/datasetManifest.js b/src/datasetManifest.ts
similarity index 73%
rename from src/datasetManifest.js
rename to src/datasetManifest.ts
index 24bc9ef6..e5150dc6 100644
--- a/src/datasetManifest.js
+++ b/src/datasetManifest.ts
@@ -1,13 +1,20 @@
 import I18n from "./i18n";
 import datasetsManifest from "../public/datasets-manifest.json";
 
+export interface Dataset {
+  id: string;
+  name: string;
+  isToy?: boolean;
+  [key: string]: any;
+}
+
 // Cached copy of the localized datasets manifest.
-let allDatasets;
+let allDatasets: Dataset[] | undefined;
 
-export function getAvailableDatasets(specificDatasets) {
+export function getAvailableDatasets(specificDatasets?: string[]): Dataset[] {
   const datasets = getDatasets();
   // Filter datasets by a specified array (in Levelbuilder) or filter out toy datasets.
-  let availableDatasets = (specificDatasets && specificDatasets.length > 1) ?
+  const availableDatasets = (specificDatasets && specificDatasets.length > 1) ?
     datasets.filter(dataset => specificDatasets.includes(dataset.id)) :
     datasets.filter(dataset => !dataset.isToy);
 
@@ -19,7 +26,7 @@ export function getAvailableDatasets(specificDatasets) {
  * Returns all the dataset information stored in the datasets manifest.
  * @returns {Object[]}
  */
-export function getDatasets() {
+export function getDatasets(): Dataset[] {
   // Cache the localization since this shouldn't change.
   if (!allDatasets) {
     allDatasets = localizeDatasets(datasetsManifest.datasets);
@@ -32,7 +39,7 @@ export function getDatasets() {
  * @param datasets {Object[]} Array of information about datasets. Modifies the given objects.
  * @returns {Object[]} The given datasets.
  */
-export function localizeDatasets(datasets) {
+export function localizeDatasets(datasets: Dataset[]): Dataset[] {
   return datasets.map(dataset => {
     dataset.name = getDatasetName(dataset);
     return dataset;
@@ -44,7 +51,7 @@ export function localizeDatasets(datasets) {
  * @param dataset
  * @returns {string}
  */
-function getDatasetName(dataset) {
+function getDatasetName(dataset: Dataset): string {
   const fallback = dataset.name;
   return I18n.t("name", { scope: ["datasets", dataset.id], default: fallback})
 }
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 00000000..1af66e6e
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,37 @@
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}
+
+declare module "react-chartjs-2" {
+  export const Bar: any;
+  export const Scatter: any;
+}
+
+declare module "ml-knn" {
+  export default class KNN {
+    constructor(dataset: number[][], labels: any[], options?: { k?: number });
+    predict(dataset: number[][]): any[];
+  }
+}
+
+declare module "react-papaparse" {
+  export const CSVReader: any;
+}
+
+declare module "messageformat" {
+  export default class MessageFormat {
+    constructor(locale: string);
+    compile(message: string): (args?: Record<string, any>) => string;
+  }
+}
diff --git a/src/helpers/accuracy.js b/src/helpers/accuracy.ts
similarity index 78%
rename from src/helpers/accuracy.js
rename to src/helpers/accuracy.ts
index cb7e4309..7d91a0d3 100644
--- a/src/helpers/accuracy.js
+++ b/src/helpers/accuracy.ts
@@ -10,17 +10,17 @@ import {
   ResultsGrades,
   REGRESSION_ERROR_TOLERANCE,
   MLTypes
-} from "../constants.js";
-import { getExtrema } from "./columnDetails.js";
+} from "../constants";
+import { getExtrema } from "./columnDetails";
 import {
   getConvertedLabels,
   getConvertedAccuracyCheckExamples
-} from "./valueConversion.js";
-import { isRegression } from "../redux.js"
+} from "./valueConversion";
+import { isRegression } from "../redux"
 
 // Return results data so that it looks like regular data provided to the
 // DataTable.
-export function getResultsDataInDataTableForm(state) {
+export function getResultsDataInDataTableForm(state: any): Record<string, any>[] | null {
   const resultsByGrades = getAllResults(state);
 
   if (!resultsByGrades || resultsByGrades.examples.length === 0) {
@@ -32,7 +32,7 @@ export function getResultsDataInDataTableForm(state) {
   const numItems = Math.min(10, resultsByGrades.examples.length);
 
   const results = [];
-  for (var i = 0; i < numItems; i++) {
+  for (let i = 0; i < numItems; i++) {
     results[i] = {};
 
     state.selectedFeatures.map((feature, index) => {
@@ -45,20 +45,20 @@ export function getResultsDataInDataTableForm(state) {
   return results;
 }
 
-export function getAllResults(state) {
+export function getAllResults(state: any): any {
   return getResultsByGrade(state, ResultsGrades.ALL);
 }
 
-export function getCorrectResults(state) {
+export function getCorrectResults(state: any): any {
   return getResultsByGrade(state, ResultsGrades.CORRECT);
 }
 
-export function getIncorrectResults(state) {
+export function getIncorrectResults(state: any): any {
   return getResultsByGrade(state, ResultsGrades.INCORRECT);
 }
 
-export function getResultsByGrade(state, grade) {
-  const results = {};
+export function getResultsByGrade(state: any, grade: string): any {
+  const results: any = {};
   const accuracyGrades = getAccuracyGrades(state);
   const examples = getConvertedAccuracyCheckExamples(state).filter((example, index) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
@@ -75,15 +75,15 @@ export function getResultsByGrade(state, grade) {
   return results;
 }
 
-export function getAccuracyGrades(state) {
+export function getAccuracyGrades(state: any): string[] {
   const grades = isRegression(state)
     ? getAccuracyRegression(state).grades
     : getAccuracyClassification(state).grades;
   return grades;
 }
 
-export function getSummaryStat(state) {
-  let summaryStat = {};
+export function getSummaryStat(state: any): { type: string; stat: string } {
+  const summaryStat: any = {};
   summaryStat.type = isRegression(state)
     ? MLTypes.REGRESSION
     : MLTypes.CLASSIFICATION;
@@ -91,17 +91,17 @@ export function getSummaryStat(state) {
   return summaryStat;
 }
 
-export function getPercentCorrect(state) {
+export function getPercentCorrect(state: any): string {
   const percentCorrect = isRegression(state)
     ? getAccuracyRegression(state).percentCorrect
     : getAccuracyClassification(state).percentCorrect;
   return percentCorrect;
 }
 
-export function getAccuracyClassification(state) {
-  let accuracy = {};
+export function getAccuracyClassification(state: any): { percentCorrect: string; grades: string[] } {
+  const accuracy: any = {};
   let numCorrect = 0;
-  let grades = [];
+  const grades = [];
   const numPredictedLabels = state.accuracyCheckPredictedLabels
     ? state.accuracyCheckPredictedLabels.length
     : 0;
@@ -123,10 +123,10 @@ export function getAccuracyClassification(state) {
   return accuracy;
 }
 
-export function getAccuracyRegression(state) {
-  let accuracy = {};
+export function getAccuracyRegression(state: any): { percentCorrect: string; grades: string[] } {
+  const accuracy: any = {};
   let numCorrect = 0;
-  let grades = [];
+  const grades = [];
   const range = getExtrema(state.data, state.labelColumn).range;
   const errorTolerance = (range * REGRESSION_ERROR_TOLERANCE) / 100;
   const numPredictedLabels = state.accuracyCheckPredictedLabels.length;
diff --git a/src/helpers/columnDetails.js b/src/helpers/columnDetails.ts
similarity index 64%
rename from src/helpers/columnDetails.js
rename to src/helpers/columnDetails.ts
index 6128983d..f65f1c21 100644
--- a/src/helpers/columnDetails.js
+++ b/src/helpers/columnDetails.ts
@@ -2,17 +2,23 @@ import I18n from "../i18n";
 
 /* Helper functions for getting information about a column and its data. */
 
-import { ColumnTypes, UNIQUE_OPTIONS_MAX } from "../constants.js";
+import { ColumnTypes, UNIQUE_OPTIONS_MAX } from "../constants";
 
-export function isColumnCategorical(state, column) {
+export interface Extrema {
+  max: number;
+  min: number;
+  range: number;
+}
+
+export function isColumnCategorical(state: any, column: string): boolean {
   return (state.columnsByDataType[column] === ColumnTypes.CATEGORICAL);
 }
 
-export function isColumnNumerical(state, column) {
+export function isColumnNumerical(state: any, column: string): boolean {
   return (state.columnsByDataType[column] === ColumnTypes.NUMERICAL);
 }
 
-export function filterColumnsByType(columnsByDataType, columnType) {
+export function filterColumnsByType(columnsByDataType: Record<string, string>, columnType: string): string[] {
   return Object.keys(columnsByDataType).filter(
     column => columnsByDataType[column] === columnType
   );
@@ -22,18 +28,18 @@ export function filterColumnsByType(columnsByDataType, columnType) {
   accurate models, and we don't want to overflow the metadata column for saved
   models.
 */
-export function tooManyUniqueOptions(uniqueOptionsCount) {
+export function tooManyUniqueOptions(uniqueOptionsCount: number): boolean {
   return uniqueOptionsCount > UNIQUE_OPTIONS_MAX;
 }
 
-export function getUniqueOptions(data, column) {
+export function getUniqueOptions(data: Record<string, any>[], column: string): any[] {
   const columnData = getColumnData(data, column);
   return Array.from(new Set(columnData)).filter(
     option => option !== undefined && option !== ""
   );
 }
 
-export function isColumnReadOnly(metadata, column) {
+export function isColumnReadOnly(metadata: any, column: string): boolean {
   const metadataColumnType =
     column &&
     metadata &&
@@ -44,26 +50,28 @@ export function isColumnReadOnly(metadata, column) {
   return !!metadataColumnType;
 }
 
-function getColumnData(data, column) {
+function getColumnData(data: Record<string, any>[], column: string): any[] {
   return data.map(row => row[column]);
 }
 
-export function getExtrema(data, column) {
+export function getExtrema(data: Record<string, any>[], column: string): Extrema {
   const columnData = getColumnData(data, column);
-  let extrema = {};
-  extrema.max = Math.max(...columnData);
-  extrema.min = Math.min(...columnData);
+  const extrema: Extrema = {
+    max: Math.max(...columnData),
+    min: Math.min(...columnData),
+    range: 0
+  };
   extrema.range = Math.abs(extrema.max - extrema.min);
 
   return extrema;
 }
 
-export function containsOnlyNumbers(data, column) {
+export function containsOnlyNumbers(data: Record<string, any>[], column: string): boolean {
   const columnData = getColumnData(data, column);
   return columnData.every(cell => !isNaN(cell));
 }
 
-export function getColumnDescription(columnId, metadata, trainedModelDetails) {
+export function getColumnDescription(columnId: string, metadata: any, trainedModelDetails: any): string | null {
   // Use metadata if available.
   if (columnId && metadata && metadata.fields) {
     const field = metadata.fields.find(field => {
@@ -96,8 +104,8 @@ export function getColumnDescription(columnId, metadata, trainedModelDetails) {
     ...
   }
   */
-export function buildOptionNumberKey(state, feature) {
-  let optionsMappedToNumbers = {};
+export function buildOptionNumberKey(state: any, feature: string): Record<string, number> {
+  const optionsMappedToNumbers = {};
   const uniqueOptions = getUniqueOptions(state.data, feature);
   uniqueOptions.forEach(
     option => (optionsMappedToNumbers[option] = uniqueOptions.indexOf(option))
@@ -105,8 +113,8 @@ export function buildOptionNumberKey(state, feature) {
   return optionsMappedToNumbers;
 }
 
-export function getColumnDataToSave(state, column) {
-  const columnData = {};
+export function getColumnDataToSave(state: any, column: string): any {
+  const columnData: any = {};
   columnData.id = column;
   columnData.description = getColumnDescription(column, state.metadata, state.trainedModelDetails);
   if (isColumnCategorical(state, column)) {
@@ -119,15 +127,15 @@ export function getColumnDataToSave(state, column) {
   return columnData;
 }
 
-export function getLocalizedColumnName(datasetId, columnId) {
+export function getLocalizedColumnName(datasetId: string, columnId: string): string {
   return getLocalizedColumnAttr(datasetId, columnId, "id", columnId);
 }
 
-function getLocalizedColumnDescription(datasetId, columnId, description) {
+function getLocalizedColumnDescription(datasetId: string, columnId: string, description: string): string {
   return getLocalizedColumnAttr(datasetId, columnId, "description", description);
 }
 
-function getLocalizedColumnAttr(datasetId, columnId, attribute, fallback) {
+function getLocalizedColumnAttr(datasetId: string, columnId: string, attribute: string, fallback: string): string {
   return I18n.t(attribute,
     {
       scope: ["datasets", datasetId, "fields", columnId],
diff --git a/src/helpers/datasetDetails.js b/src/helpers/datasetDetails.ts
similarity index 81%
rename from src/helpers/datasetDetails.js
rename to src/helpers/datasetDetails.ts
index e6557048..672ef7fe 100644
--- a/src/helpers/datasetDetails.js
+++ b/src/helpers/datasetDetails.ts
@@ -1,8 +1,9 @@
 import I18n from "../i18n";
+import { DatasetDetails } from "../types";
 
 /* Helper functions for getting information about the selected dataset. */
 
-export function getDatasetDetails(state) {
+export function getDatasetDetails(state: any): DatasetDetails {
   const datasetDetails = {};
   datasetDetails.name = state.metadata && state.metadata.name;
   datasetDetails.description = getDatasetDescription(state);
@@ -13,7 +14,7 @@ export function getDatasetDetails(state) {
   return datasetDetails;
 }
 
-function getCardContextAttr(state, attr) {
+function getCardContextAttr(state: any, attr: string): string | undefined {
   if (
     state.metadata &&
     state.metadata.name &&
@@ -32,15 +33,15 @@ function getCardContextAttr(state, attr) {
   }
   return undefined;
 }
-function getPotentialUses(state) {
+function getPotentialUses(state: any): string | undefined {
   return getCardContextAttr(state, "potentialUses");
 }
 
-function getPotentialMisuses(state) {
+function getPotentialMisuses(state: any): string | undefined {
   return getCardContextAttr(state, "potentialMisuses");
 }
 
-export function getDatasetDescription(state) {
+export function getDatasetDescription(state: any): string | undefined {
   // If this a dataset from the internal collection that already has a description, use that.
   if (
     state.metadata &&
@@ -66,7 +67,7 @@ export function getDatasetDescription(state) {
   }
 }
 
-export function isUserUploadedDataset(state) {
+export function isUserUploadedDataset(state: any): boolean {
   // The csvfile for internally curated datasets are strings; those uploaded by
   // users are objects. Use data type as a proxy to know which case we're in.
   return typeof state.csvfile === "object" && state.csvfile !== null;
diff --git a/src/helpers/metrics.js b/src/helpers/metrics.ts
similarity index 77%
rename from src/helpers/metrics.js
rename to src/helpers/metrics.ts
index 01bebf96..f266c29d 100644
--- a/src/helpers/metrics.js
+++ b/src/helpers/metrics.ts
@@ -4,8 +4,8 @@
 import { isUserUploadedDataset } from "./datasetDetails";
 import { getPercentCorrect } from './accuracy';
 
-function getModelMetrics(state) {
-  const modelMetrics = {};
+function getModelMetrics(state: any): Record<string, any> {
+  const modelMetrics: Record<string, any> = {};
   modelMetrics.userUploaded = isUserUploadedDataset(state);
   modelMetrics.datasetName = state.metadata.name;
   modelMetrics.features = state.selectedFeatures;
@@ -14,11 +14,11 @@ function getModelMetrics(state) {
   return modelMetrics;
 }
 
-export function logFirehoseMetric(action, state) {
+export function logFirehoseMetric(action: string, state: any): any {
   return state.firehoseMetricsLogger(action, getModelMetrics(state));
 }
 
-export function reportPanelView(panel) {
+export function reportPanelView(panel: string): void {
   if (!window.ga || !panel) {
     return;
   }
diff --git a/src/helpers/navigationValidation.js b/src/helpers/navigationValidation.ts
similarity index 83%
rename from src/helpers/navigationValidation.js
rename to src/helpers/navigationValidation.ts
index b2953fa9..85d17661 100644
--- a/src/helpers/navigationValidation.js
+++ b/src/helpers/navigationValidation.ts
@@ -22,7 +22,7 @@ const panelList = [
 
 // Is a panel ready to be visited?  This determines whether a visible
 // nav button is enabled or disabled.
-export function isPanelEnabled(state, panelId) {
+export function isPanelEnabled(state: any, panelId: string): boolean {
   if (panelId === "dataDisplayLabel") {
     if (!isDataUploaded(state)) {
       return false;
@@ -68,7 +68,7 @@ export function isPanelEnabled(state, panelId) {
 
 // Is a panel available to be shown?  This determines what panels
 // can possibly be visited in the app.
-function isPanelAvailable(state, panelId) {
+function isPanelAvailable(state: any, panelId: string): boolean {
   const mode = state.mode;
 
   if (panelId === "selectDataset") {
@@ -92,19 +92,19 @@ function isPanelAvailable(state, panelId) {
   return true;
 }
 
-function isDataUploaded(state) {
+function isDataUploaded(state: any): boolean {
   return state.data.length > 0 && !state.invalidData;
 }
 
-function minOneFeatureSelected(state) {
+function minOneFeatureSelected(state: any): boolean {
   return state.selectedFeatures.length !== 0;
 }
 
-function labelSelected(state) {
+function labelSelected(state: any): boolean {
   return !!state.labelColumn;
 }
 
-export function uniqLabelFeaturesSelected(state) {
+export function uniqLabelFeaturesSelected(state: any): boolean {
   return (
     minOneFeatureSelected(state) &&
     labelSelected(state) &&
@@ -112,34 +112,34 @@ export function uniqLabelFeaturesSelected(state) {
   );
 }
 
-function resultsAvailable(state) {
+function resultsAvailable(state: any): boolean {
   if (state.accuracyCheckExamples.length === 0) {
     return false;
   }
   return !didSaveSucceed(state) || !isSaveInProgress(state);
 }
 
-function isSaveInProgress(state) {
+function isSaveInProgress(state: any): boolean {
   return state.saveStatus === "started";
 }
 
-function didSaveSucceed(state) {
+function didSaveSucceed(state: any): boolean {
   return state.saveStatus === "success";
 }
 
-export function isSaveComplete(saveStatus) {
+export function isSaveComplete(saveStatus: string): boolean {
   return ["success", "failure", "piiProfanity"].includes(saveStatus);
 }
 
-export function shouldDisplaySaveStatus(saveStatus) {
+export function shouldDisplaySaveStatus(saveStatus: string): boolean {
   return ["success", "failure", "started", "piiProfanity"].includes(saveStatus);
 }
 
-function isModelNamed(state) {
+function isModelNamed(state: any): boolean {
   return ![undefined, ""].includes(state.trainedModelDetails.name);
 }
 
-function isAccuracyAcceptable(state) {
+function isAccuracyAcceptable(state: any): boolean {
   const mode = state.mode;
 
   if (
@@ -154,8 +154,19 @@ function isAccuracyAcceptable(state) {
 }
 
 // Given the current panel, return the appropriate previous & next buttons.
-export function prevNextButtons(state) {
-  let prev, next;
+interface NavButton {
+  panel: string;
+  text: string;
+  enabled?: boolean;
+}
+
+interface PrevNextButtons {
+  prev: NavButton | null | undefined;
+  next: NavButton | null | undefined;
+}
+
+export function prevNextButtons(state: any): PrevNextButtons {
+  let prev: NavButton | null | undefined, next: NavButton | null | undefined;
 
   if (state.currentPanel === "selectDataset") {
     prev = null;
diff --git a/src/helpers/utils.js b/src/helpers/utils.ts
similarity index 53%
rename from src/helpers/utils.js
rename to src/helpers/utils.ts
index 84c3f25f..d238a405 100644
--- a/src/helpers/utils.js
+++ b/src/helpers/utils.ts
@@ -1,14 +1,14 @@
 /* Generic helper functions. */
 
-export function getKeyByValue(object, value) {
+export function getKeyByValue(object: Record<string, any>, value: any): string | undefined {
   return Object.keys(object).find(key => object[key] === value);
 }
 
-export function isEmpty(object) {
+export function isEmpty(object: Record<string, any>): boolean {
   return Object.keys(object).length === 0;
 }
 
-export function areArraysEqual(array1, array2) {
+export function areArraysEqual(array1: any[], array2: any[]): boolean {
   return (
     array1.length === array2.length &&
     array1.every((value, index) => {
@@ -17,10 +17,10 @@ export function areArraysEqual(array1, array2) {
   );
 }
 
-export function arrayIntersection(array1, array2) {
+export function arrayIntersection(array1: any[], array2: any[]): any[] {
   return array1.filter(value => array2.includes(value));
 }
 
-export function getRandomInt(max) {
+export function getRandomInt(max: number): number {
   return Math.floor(Math.random() * Math.floor(max));
 }
diff --git a/src/helpers/valueConversion.js b/src/helpers/valueConversion.ts
similarity index 68%
rename from src/helpers/valueConversion.js
rename to src/helpers/valueConversion.ts
index db7117f2..bcfc4ec2 100644
--- a/src/helpers/valueConversion.js
+++ b/src/helpers/valueConversion.ts
@@ -3,11 +3,11 @@
   convert categorical strings into ordinal integers to pass to the algorithm and
   likewise convert the returned integers back into human-readable strings.
 */
-import { isEmpty, getKeyByValue } from "./utils.js";
-import { getSelectedCategoricalColumns } from "../selectors.js";
+import { isEmpty, getKeyByValue } from "./utils";
+import { getSelectedCategoricalColumns } from "../selectors";
 
 // Take a ML-friendly integer and convert to human-readable string.
-export function convertValueForDisplay(state, value, column) {
+export function convertValueForDisplay(state: any, value: any, column: string): any {
   const convertedValue =
     getSelectedCategoricalColumns(state).includes(column) &&
     !isEmpty(state.featureNumberKey)
@@ -17,14 +17,14 @@ export function convertValueForDisplay(state, value, column) {
 }
 
 // Take a human-readable string and convert to a ML-friendly integer.
-export function convertValueForTraining(state, value, column) {
+export function convertValueForTraining(state: any, value: any, column: string): number {
   const convertedValue = getSelectedCategoricalColumns(state).includes(column)
     ? state.featureNumberKey[column][value]
     : parseFloat(value);
   return convertedValue;
 }
 
-export function getConvertedPredictedLabel(state) {
+export function getConvertedPredictedLabel(state: any): any {
   return convertValueForDisplay(
     state,
     state.prediction,
@@ -32,18 +32,18 @@ export function getConvertedPredictedLabel(state) {
   );
 }
 
-export function getConvertedLabels(state, rawLabels = []) {
+export function getConvertedLabels(state: any, rawLabels: any[] = []): any[] {
   return rawLabels.map(label =>
     convertValueForDisplay(state, label, state.labelColumn)
   );
 }
 
-export function getConvertedAccuracyCheckExamples(state) {
+export function getConvertedAccuracyCheckExamples(state: any): any[][] {
   const convertedAccuracyCheckExamples = [];
-  var example;
+  let example;
   for (example of state.accuracyCheckExamples) {
-    let convertedAccuracyCheckExample = [];
-    for (var i = 0; i < state.selectedFeatures.length; i++) {
+    const convertedAccuracyCheckExample = [];
+    for (let i = 0; i < state.selectedFeatures.length; i++) {
       convertedAccuracyCheckExample.push(
         convertValueForDisplay(
           state,
diff --git a/src/i18n.js b/src/i18n.ts
similarity index 83%
rename from src/i18n.js
rename to src/i18n.ts
index b8a07a8f..da70a859 100644
--- a/src/i18n.js
+++ b/src/i18n.ts
@@ -1,9 +1,9 @@
 import uiStrings from '../i18n/mlPlayground.json';
 import MessageFormat from 'messageformat'
 
-let messages;
+let messages: Record<string, any> | undefined;
 
-const initI18n = (i18n = {}) => {
+const initI18n = (i18n: Record<string, any> = {}): void => {
   // For now, use English pluralization rules.
   const mf = new MessageFormat('en');
   messages = {...mf.compile(uiStrings), ...i18n};
@@ -18,7 +18,13 @@ const initI18n = (i18n = {}) => {
  * to it.
  * @returns {string} The translated string. undefined if not found.
  */
-const t = (key, options = {}) => {
+interface I18nOptions {
+  default?: string;
+  scope?: string[];
+  [key: string]: any;
+}
+
+const t = (key: string, options: I18nOptions = {}): string | undefined => {
   if (!messages) {
     throw "I18n must be initialized before calling t";
   }
@@ -50,7 +56,7 @@ const t = (key, options = {}) => {
   Used to reset the state to before it was initialized.
   This should only be used in tests.
  */
-const reset = () => {
+const reset = (): void => {
   messages = undefined;
 }
 
diff --git a/src/index.js b/src/index.tsx
similarity index 75%
rename from src/index.js
rename to src/index.tsx
index 1f71313f..1f70de65 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import App from "./App.js";
+import App from "./App";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 import rootReducer, {
@@ -21,14 +21,23 @@ import I18n from "./i18n";
 
 export const store = createStore(rootReducer);
 
-let saveTrainedModel = null;
-let onContinue = null;
+let saveTrainedModel: ((dataToSave: any, callback: (response: any) => void) => void) | null = null;
+let onContinue: (() => void) | null = null;
+
+interface InitAllOptions {
+  i18n?: any;
+  mode?: any;
+  onContinue?: () => void;
+  saveTrainedModel?: (dataToSave: any, callback: (response: any) => void) => void;
+  logMetric?: (...args: any[]) => void;
+  setInstructionsKey?: (...args: any[]) => void;
+}
 
 /**
  * @param {Object} options.i18n Optional. Object where each method returns the locale relevant
  * string to display. If this is not defined, an English string will be provided.
  */
-export const initAll = function (options) {
+export const initAll = function (options: InitAllOptions): void {
   I18n.initI18n(options.i18n);
   // Handle an optional mode.
   const mode = options && options.mode;
@@ -41,7 +50,7 @@ export const initAll = function (options) {
   store.dispatch(setMode(mode));
   processMode(mode);
 
-  const root = createRoot(document.getElementById("root"));
+  const root = createRoot(document.getElementById("root")!);
   root.render(
     <Provider store={store}>
       <App
@@ -53,19 +62,19 @@ export const initAll = function (options) {
   );
 };
 
-export const instructionsDismissed = function() {
+export const instructionsDismissed = function(): void {
   store.dispatch(setInstructionsDismissed());
 }
 
 // Process an optional mode.
-const processMode = mode => {
-  const assetPath = global.__ml_playground_asset_public_path__;
+const processMode = (mode: any): void => {
+  const assetPath = (global as any).__ml_playground_asset_public_path__;
   let panelSet = false;
 
   if (mode) {
     // Load a single dataset immediately.
     if (mode.datasets && mode.datasets.length === 1) {
-      const item = getDatasets().filter(item => {
+      const item = getDatasets().filter((item: any) => {
         return item.id === mode.datasets[0];
       })[0];
       store.dispatch(setSelectedCSV(assetPath + item.path));
@@ -94,9 +103,9 @@ const processMode = mode => {
 };
 
 // Do the asynchronous save of a model.
-const startSaveTrainedModel = dataToSave => {
+const startSaveTrainedModel = (dataToSave: any): void => {
   store.dispatch(setSaveStatus("started"));
-  saveTrainedModel(dataToSave, response => {
+  saveTrainedModel!(dataToSave, (response: any) => {
     store.dispatch(setSaveStatus(response.status, response.data));
     if (response.status === "success") {
       store.dispatch(setCurrentPanel("modelSummary"));
diff --git a/src/indexDev.js b/src/indexDev.tsx
similarity index 79%
rename from src/indexDev.js
rename to src/indexDev.tsx
index 53ba4a50..afbe3cec 100644
--- a/src/indexDev.js
+++ b/src/indexDev.tsx
@@ -2,8 +2,17 @@ import "./assetPath";
 import { initAll, instructionsDismissed } from "./index";
 import queryString from "query-string";
 
+interface SampleMode {
+  datasets?: string[];
+  hideSelectLabel?: boolean;
+  hideSave?: boolean;
+  requireAccuracy?: number;
+  hideInstructionsOverlay?: boolean;
+  randomizeTestData?: boolean;
+}
+
 // A list of sample modes.  Should match the dropdown in index.html.
-const sampleModes = {
+const sampleModes: Record<string, SampleMode> = {
   minimal: {
     datasets: ["tacos_toy"],
     hideSelectLabel: true
@@ -92,24 +101,24 @@ const sampleModes = {
 };
 
 // Look for a ?mode= parameter on the URL
-let parameters = queryString.parse(location.search);
-const mode = parameters["mode"] ? sampleModes[parameters["mode"]] : null;
+const parameters = queryString.parse(location.search);
+const mode = parameters["mode"] ? sampleModes[parameters["mode"] as string] : null;
 
-function onContinueStub() {
+function onContinueStub(): void {
   console.log("This would continue to the next level.");
 }
 
-function saveTrainedModelStub(data, response) {
+function saveTrainedModelStub(data: any, response: (result: any) => void): void {
   console.log("This would save a trained model.", data);
   setTimeout(() => response({ id: 303, status: "success" }), 2000);
 }
 
-function logMetricStub(eventName, details) {
+function logMetricStub(eventName: string, details: any): void {
   console.log(`This would log a metric for ${eventName}.`, details);
 }
 
-function setInstructionsKeyStub(instructionsKey, options) {
-  const element = document.getElementById("instructions");
+function setInstructionsKeyStub(instructionsKey: string, options: any): void {
+  const element = document.getElementById("instructions")!;
 
   element.innerText =
     instructionsKey +
diff --git a/src/indexProd.js b/src/indexProd.tsx
similarity index 100%
rename from src/indexProd.js
rename to src/indexProd.tsx
diff --git a/src/jsonReaderWrapper.js b/src/jsonReaderWrapper.ts
similarity index 75%
rename from src/jsonReaderWrapper.js
rename to src/jsonReaderWrapper.ts
index 2434d87c..55a3d6b1 100644
--- a/src/jsonReaderWrapper.js
+++ b/src/jsonReaderWrapper.ts
@@ -1,13 +1,13 @@
-import { store } from "./index.js";
+import { store } from "./index";
 import {
   setImportedMetadata,
   setColumnsByDataType,
   setLabelColumn
 } from "./redux";
-import { ColumnTypes } from "./constants.js";
+import { ColumnTypes } from "./constants";
 
-export const parseJSON = jsonfile => {
-  var rawFile = new XMLHttpRequest();
+export const parseJSON = (jsonfile: string): void => {
+  const rawFile = new XMLHttpRequest();
   rawFile.overrideMimeType("application/json");
   rawFile.open("GET", jsonfile, true);
   rawFile.onreadystatechange = function() {
@@ -18,8 +18,8 @@ export const parseJSON = jsonfile => {
   rawFile.send(null);
 };
 
-const updateData = result => {
-  var metadata = JSON.parse(result);
+const updateData = (result: string): void => {
+  const metadata = JSON.parse(result);
   store.dispatch(setImportedMetadata(metadata));
 
   const state = store.getState();
diff --git a/src/redux.js b/src/redux.ts
similarity index 74%
rename from src/redux.js
rename to src/redux.ts
index d4c74b77..2c536c99 100644
--- a/src/redux.js
+++ b/src/redux.ts
@@ -1,24 +1,24 @@
 import {
   uniqLabelFeaturesSelected,
   prevNextButtons
-} from "./helpers/navigationValidation.js";
-import { reportPanelView } from "./helpers/metrics.js";
+} from "./helpers/navigationValidation";
+import { reportPanelView } from "./helpers/metrics";
 import {
   getSummaryStat,
   getResultsDataInDataTableForm
-} from "./helpers/accuracy.js";
+} from "./helpers/accuracy";
 import {
   isColumnNumerical,
   getColumnDataToSave
-} from "./helpers/columnDetails.js";
-import { getDatasetDetails } from "./helpers/datasetDetails.js";
+} from "./helpers/columnDetails";
+import { getDatasetDetails } from "./helpers/datasetDetails";
 import {
   ColumnTypes,
   RegressionTrainer,
   ClassificationTrainer,
   TestDataLocations,
   ResultsGrades
-} from "./constants.js";
+} from "./constants";
 
 // Action types
 const RESET_STATE = "RESET_STATE";
@@ -61,54 +61,101 @@ const SET_INSTRUCTIONS_DISMISSED = "SET_INSTRUCTIONS_DISMISSED";
 const SET_RESULTS_TAB = "SET_RESULTS_TAB";
 const SET_FIREHOSE_METRICS_LOGGER = "SET_FIREHOSE_METRICS_LOGGER";
 
+export interface RootState {
+  name: string | undefined;
+  csvfile: string | undefined;
+  jsonfile: string | undefined;
+  invalidData: string | undefined;
+  data: any[];
+  metadata: any;
+  removedRowsCount: number;
+  highlightDataset: string | undefined;
+  highlightColumn: string | undefined;
+  columnsByDataType: Record<string, string>;
+  selectedFeatures: string[];
+  labelColumn: string | undefined;
+  featureNumberKey: Record<string, Record<string, number>>;
+  trainingExamples: any[];
+  trainingLabels: any[];
+  reserveLocation: string;
+  accuracyCheckExamples: any[];
+  accuracyCheckLabels: any[];
+  accuracyCheckPredictedLabels: any[];
+  testData: Record<string, any>;
+  prediction: any;
+  trainedModel: any;
+  trainedModelDetails: any;
+  instructionsKeyCallback: ((...args: any[]) => void) | undefined;
+  currentPanel: string;
+  currentColumn: string | undefined;
+  resultsPhase: number | undefined;
+  saveStatus: string;
+  saveResponseData: any;
+  columnRefs: Record<string, any>;
+  historicResults: { label: string; features: string[]; accuracy: any }[];
+  showResultsDetails: boolean;
+  resultsHighlightRow: number | undefined;
+  kValue: number | null;
+  viewedPanels: string[];
+  instructionsOverlayActive: boolean;
+  resultsTab: string;
+  firehoseMetricsLogger: ((...args: any[]) => void) | undefined;
+  mode?: any;
+}
+
+interface ReduxAction {
+  type: string;
+  [key: string]: any;
+}
+
 // Action creators
-export function setMode(mode) {
+export function setMode(mode: any): ReduxAction {
   return { type: SET_MODE, mode };
 }
 
-export function setSelectedName(name) {
+export function setSelectedName(name: string): ReduxAction {
   return { type: SET_SELECTED_NAME, name };
 }
 
-export function setSelectedCSV(csvfile) {
+export function setSelectedCSV(csvfile: string): ReduxAction {
   return { type: SET_SELECTED_CSV, csvfile };
 }
 
-export function setSelectedJSON(jsonfile) {
+export function setSelectedJSON(jsonfile: string): ReduxAction {
   return { type: SET_SELECTED_JSON, jsonfile };
 }
 
-export function setInvalidData(invalidData) {
+export function setInvalidData(invalidData: string): ReduxAction {
   return { type: SET_INVALID_DATA, invalidData };
 }
 
-export function setImportedData(data, userUploadedData) {
+export function setImportedData(data: any[], userUploadedData: boolean): ReduxAction {
   return { type: SET_IMPORTED_DATA, data, userUploadedData };
 }
 
-export function setImportedMetadata(metadata) {
+export function setImportedMetadata(metadata: any): ReduxAction {
   return { type: SET_IMPORTED_METADATA, metadata };
 }
 
-export function setRemovedRowsCount(removedRowsCount) {
+export function setRemovedRowsCount(removedRowsCount: number): ReduxAction {
   return { type: SET_REMOVED_ROWS_COUNT, removedRowsCount };
 }
 
-export const setColumnsByDataType = (column, dataType) => ({
+export const setColumnsByDataType = (column: string, dataType: string): ReduxAction => ({
   type: SET_COLUMNS_BY_DATA_TYPE,
   column,
   dataType
 });
 
-export function addSelectedFeature(selectedFeature) {
+export function addSelectedFeature(selectedFeature: string): ReduxAction {
   return { type: ADD_SELECTED_FEATURE, selectedFeature };
 }
 
-export function removeSelectedFeature(selectedFeature) {
+export function removeSelectedFeature(selectedFeature: string): ReduxAction {
   return { type: REMOVE_SELECTED_FEATURE, selectedFeature };
 }
 
-export function setLabelColumn(labelColumn) {
+export function setLabelColumn(labelColumn: string): ReduxAction {
   return { type: SET_LABEL_COLUMN, labelColumn };
 }
 
@@ -127,111 +174,111 @@ export function setLabelColumn(labelColumn) {
     }
   }
 */
-export function setFeatureNumberKey(featureNumberKey) {
+export function setFeatureNumberKey(featureNumberKey: Record<string, Record<string, number>>): ReduxAction {
   return { type: SET_FEATURE_NUMBER_KEY, featureNumberKey };
 }
 
-export function setReserveLocation(reserveLocation) {
+export function setReserveLocation(reserveLocation: string): ReduxAction {
   return { type: SET_RESERVE_LOCATION, reserveLocation };
 }
 
-export function setAccuracyCheckExamples(accuracyCheckExamples) {
+export function setAccuracyCheckExamples(accuracyCheckExamples: any[]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_EXAMPLES, accuracyCheckExamples };
 }
 
-export function setAccuracyCheckLabels(accuracyCheckLabels) {
+export function setAccuracyCheckLabels(accuracyCheckLabels: any[]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_LABELS, accuracyCheckLabels };
 }
 
-export function setAccuracyCheckPredictedLabels(predictedLabels) {
+export function setAccuracyCheckPredictedLabels(predictedLabels: any[]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_PREDICTED_LABELS, predictedLabels };
 }
 
-export function setTrainingExamples(trainingExamples) {
+export function setTrainingExamples(trainingExamples: any[]): ReduxAction {
   return { type: SET_TRAINING_EXAMPLES, trainingExamples };
 }
 
-export function setTrainingLabels(trainingLabels) {
+export function setTrainingLabels(trainingLabels: any[]): ReduxAction {
   return { type: SET_TRAINING_LABELS, trainingLabels };
 }
 
-export function setTestData(feature, value) {
+export function setTestData(feature: string, value: any): ReduxAction {
   return { type: SET_TEST_DATA, feature, value };
 }
 
-export function setPrediction(prediction) {
+export function setPrediction(prediction: any): ReduxAction {
   return { type: SET_PREDICTION, prediction };
 }
 
-export function resetState() {
+export function resetState(): ReduxAction {
   return { type: RESET_STATE };
 }
 
-export function setTrainedModel(trainedModel) {
+export function setTrainedModel(trainedModel: any): ReduxAction {
   return { type: SET_TRAINED_MODEL, trainedModel };
 }
 
-export function setTrainedModelDetail(field, value, isColumn) {
+export function setTrainedModelDetail(field: string, value: string, isColumn: boolean): ReduxAction {
   return { type: SET_TRAINED_MODEL_DETAIL, field, value, isColumn };
 }
 
-export function setInstructionsKeyCallback(instructionsKeyCallback) {
+export function setInstructionsKeyCallback(instructionsKeyCallback: any): ReduxAction {
   return { type: SET_INSTRUCTIONS_KEY_CALLBACK, instructionsKeyCallback };
 }
 
-export function setCurrentPanel(currentPanel) {
+export function setCurrentPanel(currentPanel: string): ReduxAction {
   return { type: SET_CURRENT_PANEL, currentPanel };
 }
 
-export function setCurrentColumn(currentColumn) {
+export function setCurrentColumn(currentColumn: string): ReduxAction {
   return { type: SET_CURRENT_COLUMN, currentColumn };
 }
 
-export function setHighlightColumn(highlightColumn) {
+export function setHighlightColumn(highlightColumn: string): ReduxAction {
   return { type: SET_HIGHLIGHT_COLUMN, highlightColumn };
 }
 
-export function setHighlightDataset(highlightDataset) {
+export function setHighlightDataset(highlightDataset: string): ReduxAction {
   return { type: SET_HIGHLIGHT_DATASET, highlightDataset };
 }
 
-export function setResultsPhase(phase) {
+export function setResultsPhase(phase: number): ReduxAction {
   return { type: SET_RESULTS_PHASE, phase };
 }
 
-export function setResultsHighlightRow(highlightRow) {
+export function setResultsHighlightRow(highlightRow: number): ReduxAction {
   return { type: SET_RESULTS_HIGHLIGHT_ROW, highlightRow };
 }
 
-export function setSaveStatus(status, data) {
+export function setSaveStatus(status: string, data?: any): ReduxAction {
   return { type: SET_SAVE_STATUS, status, data };
 }
 
-export function setHistoricResult(label, features, accuracy) {
+export function setHistoricResult(label: string, features: string[], accuracy: any): ReduxAction {
   return { type: SET_HISTORIC_RESULT, label, features, accuracy };
 }
 
-export function setShowResultsDetails(show) {
+export function setShowResultsDetails(show: boolean): ReduxAction {
   return { type: SET_SHOW_RESULTS_DETAILS, show };
 }
 
-export function setKValue(kValue) {
+export function setKValue(kValue: number): ReduxAction {
   return { type: SET_K_VALUE, kValue };
 }
 
-export function setInstructionsDismissed() {
+export function setInstructionsDismissed(): ReduxAction {
   return { type: SET_INSTRUCTIONS_DISMISSED };
 }
 
-export function setResultsTab(key) {
+export function setResultsTab(key: string): ReduxAction {
   return { type: SET_RESULTS_TAB, key };
 }
 
-export function setFirehoseMetricsLogger(firehoseMetricsLogger) {
+export function setFirehoseMetricsLogger(firehoseMetricsLogger: any): ReduxAction {
   return { type: SET_FIREHOSE_METRICS_LOGGER, firehoseMetricsLogger };
 }
 
-const initialState = {
+const initialState: RootState = {
   name: undefined,
   csvfile: undefined,
   jsonfile: undefined,
@@ -247,6 +294,7 @@ const initialState = {
   labelColumn: undefined,
   featureNumberKey: {},
   trainingExamples: [],
+  trainingLabels: [],
   reserveLocation: TestDataLocations.END,
   accuracyCheckExamples: [],
   accuracyCheckLabels: [],
@@ -255,7 +303,7 @@ const initialState = {
   prediction: undefined,
   trainedModel: undefined,
   trainedModelDetails: {},
-  instructionCallback: undefined,
+  instructionsKeyCallback: undefined,
   currentPanel: "selectDataset",
   currentColumn: undefined,
   resultsPhase: undefined,
@@ -277,7 +325,7 @@ const initialState = {
 };
 
 // Reducer
-export default function rootReducer(state = initialState, action) {
+export default function rootReducer(state: RootState = initialState, action: ReduxAction): RootState {
   if (action.type === SET_MODE) {
     return {
       ...state,
@@ -310,7 +358,7 @@ export default function rootReducer(state = initialState, action) {
   }
   if (action.type === SET_IMPORTED_DATA) {
     if (state.currentPanel === "selectDataset") {
-      state.instructionsKeyCallback(
+      state.instructionsKeyCallback!(
         action.userUploadedData ? "uploadedDataset" : "selectedDataset",
         null
       );
@@ -322,7 +370,7 @@ export default function rootReducer(state = initialState, action) {
     };
   }
   if (action.type === SET_IMPORTED_METADATA) {
-    var newState = {
+    const newState = {
       ...state,
       metadata: action.metadata
     };
@@ -446,14 +494,14 @@ export default function rootReducer(state = initialState, action) {
     };
   }
   if (action.type === SET_TRAINED_MODEL_DETAIL) {
-    let trainedModelDetails = { ...state.trainedModelDetails };
+    const trainedModelDetails = { ...state.trainedModelDetails };
 
     if (action.isColumn) {
       if (!trainedModelDetails.columns) {
         trainedModelDetails.columns = [];
       }
 
-      const column = trainedModelDetails.columns.find(column => {
+      const column = trainedModelDetails.columns.find((column: any) => {
         return column.id === action.field;
       });
 
@@ -484,7 +532,7 @@ export default function rootReducer(state = initialState, action) {
     reportPanelView(action.currentPanel);
     let showedOverlay = false;
     if (state.instructionsKeyCallback) {
-      const options = {};
+      const options: any = {};
       if (
         !(state.mode && state.mode.hideInstructionsOverlay) &&
         !state.viewedPanels.includes(action.currentPanel)
@@ -562,7 +610,7 @@ export default function rootReducer(state = initialState, action) {
     } else if (state.currentColumn === action.currentColumn) {
       // If column is selected, then deselect.
       if (state.currentPanel === "dataDisplayFeatures") {
-        state.instructionsKeyCallback("dataDisplayFeatures", null);
+        state.instructionsKeyCallback!("dataDisplayFeatures", null);
       }
       return {
         ...state,
@@ -574,12 +622,12 @@ export default function rootReducer(state = initialState, action) {
           state.columnsByDataType[action.currentColumn] ===
           ColumnTypes.NUMERICAL
         ) {
-          state.instructionsKeyCallback("selectedFeatureNumerical", null);
+          state.instructionsKeyCallback!("selectedFeatureNumerical", null);
         } else if (
           state.columnsByDataType[action.currentColumn] ===
           ColumnTypes.CATEGORICAL
         ) {
-          state.instructionsKeyCallback("selectedFeatureCategorical", null);
+          state.instructionsKeyCallback!("selectedFeatureCategorical", null);
         }
       }
 
@@ -623,7 +671,7 @@ export default function rootReducer(state = initialState, action) {
     };
   }
   if (action.type === SET_SHOW_RESULTS_DETAILS) {
-    state.instructionsKeyCallback(
+    state.instructionsKeyCallback!(
       action.show ? "resultsDetails" : "results",
       null
     );
@@ -659,17 +707,17 @@ export default function rootReducer(state = initialState, action) {
   return state;
 }
 
-export function getSpecifiedDatasets(state) {
+export function getSpecifiedDatasets(state: RootState): string[] | undefined {
   return state.mode && state.mode.datasets;
 }
 
 /* Functions for determining UI element availability and interactivity. */
 
-function getShowColumnClicking(state) {
+function getShowColumnClicking(state: RootState): boolean {
   return !(state.mode && state.mode.hideColumnClicking);
 }
 
-export function getPredictAvailable(state) {
+export function getPredictAvailable(state: RootState): boolean {
   return (
     Object.keys(state.testData).filter(
       value => state.testData[value] && state.testData[value] !== ""
@@ -677,17 +725,17 @@ export function getPredictAvailable(state) {
   );
 }
 
-export function getPanelButtons(state) {
+export function getPanelButtons(state: RootState): any {
   return prevNextButtons(state);
 }
 
-export function readyToTrain(state) {
+export function readyToTrain(state: RootState): boolean {
   return uniqLabelFeaturesSelected(state);
 }
 
 /* Functions for processing data to display. */
 
-export function getTableData(state, useResultsData) {
+export function getTableData(state: RootState, useResultsData: boolean): any[] {
   if (useResultsData) {
     return getResultsDataInDataTableForm(state);
   } else {
@@ -695,24 +743,24 @@ export function getTableData(state, useResultsData) {
   }
 }
 
-export function isRegression(state) {
+export function isRegression(state: RootState): boolean {
   return isColumnNumerical(state, state.labelColumn);
 }
 
 /* Functions for processing data about a trained model to save. */
-export function getFeaturesToSave(state) {
+export function getFeaturesToSave(state: RootState): any[] {
   const features = state.selectedFeatures.map(feature =>
     getColumnDataToSave(state, feature)
   );
   return features;
 }
 
-export function getLabelToSave(state) {
+export function getLabelToSave(state: RootState): any {
   return getColumnDataToSave(state, state.labelColumn);
 }
 
-export function getTrainedModelDataToSave(state) {
-  const dataToSave = {};
+export function getTrainedModelDataToSave(state: RootState): any {
+  const dataToSave: any = {};
   dataToSave.name = state.trainedModelDetails.name;
   dataToSave.datasetDetails = getDatasetDetails(state);
   dataToSave.potentialUses = state.trainedModelDetails.potentialUses;
diff --git a/src/selectors.js b/src/selectors.ts
similarity index 59%
rename from src/selectors.js
rename to src/selectors.ts
index ecc0a183..c73f6097 100644
--- a/src/selectors.js
+++ b/src/selectors.ts
@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect';
-import { ColumnTypes } from "./constants.js";
+import { ColumnTypes } from "./constants";
 import {
   filterColumnsByType,
   getUniqueOptions,
@@ -8,24 +8,24 @@ import {
  } from './helpers/columnDetails';
 import { arrayIntersection } from './helpers/utils';
 
-export const getData = state => state.data;
-export const getColumnsByDataType = state => state.columnsByDataType;
-const getSelectedFeatures = state => state.selectedFeatures;
-export const getLabelColumn = state => state.labelColumn;
-export const getMetadata = state => state.metadata;
-export const getDatasetId = state => state.metadata && state.metadata.name;
-export const getTrainedModelDetails = state => state.trainedModelDetails;
+export const getData = (state: any): any[] => state.data;
+export const getColumnsByDataType = (state: any): Record<string, string> => state.columnsByDataType;
+const getSelectedFeatures = (state: any): string[] => state.selectedFeatures;
+export const getLabelColumn = (state: any): string | undefined => state.labelColumn;
+export const getMetadata = (state: any): any => state.metadata;
+export const getDatasetId = (state: any): string | undefined => state.metadata && state.metadata.name;
+export const getTrainedModelDetails = (state: any): any => state.trainedModelDetails;
 
 export const getCategoricalColumns = createSelector(
   [getColumnsByDataType],
-  (columnsByDataType) => {
+  (columnsByDataType: Record<string, string>): string[] => {
     return filterColumnsByType(columnsByDataType, ColumnTypes.CATEGORICAL);
   }
 )
 
 export const getSelectedColumns = createSelector(
   [getSelectedFeatures, getLabelColumn],
-  (selectedFeatures, labelColumn) => {
+  (selectedFeatures: string[], labelColumn: string | undefined): string[] => {
     const selectedColumns = [...selectedFeatures, labelColumn];
     return selectedColumns;
   }
@@ -33,43 +33,43 @@ export const getSelectedColumns = createSelector(
 
 export const getSelectedCategoricalColumns = createSelector(
   [getCategoricalColumns, getSelectedColumns],
-  (categoricalColumns, selectedColumns) => {
+  (categoricalColumns: string[], selectedColumns: string[]): string[] => {
     return arrayIntersection(categoricalColumns, selectedColumns);
   }
 )
 
 export const getSelectedCategoricalFeatures = createSelector(
   [getCategoricalColumns, getSelectedFeatures],
-  (categoricalColumns, selectedFeatures) => {
+  (categoricalColumns: string[], selectedFeatures: string[]): string[] => {
     return arrayIntersection(categoricalColumns, selectedFeatures);
   }
 )
 
 export const getNumericalColumns = createSelector(
   [getColumnsByDataType],
-  (columnsByDataType) => {
+  (columnsByDataType: Record<string, string>): string[] => {
     return filterColumnsByType(columnsByDataType, ColumnTypes.NUMERICAL);
   }
 )
 
 export const getSelectedNumericalColumns = createSelector(
   [getNumericalColumns, getSelectedColumns],
-  (numericalColumns, selectedColumns) => {
+  (numericalColumns: string[], selectedColumns: string[]): string[] => {
     return arrayIntersection(numericalColumns, selectedColumns);
   }
 )
 
 export const getSelectedNumericalFeatures = createSelector(
   [getNumericalColumns, getSelectedFeatures],
-  (numericalColumns, selectedFeatures) => {
+  (numericalColumns: string[], selectedFeatures: string[]): string[] => {
     return arrayIntersection(numericalColumns, selectedFeatures);
   }
 )
 
 export const getUniqueOptionsByColumn = createSelector(
   [getSelectedCategoricalColumns, getData],
-  (selectedCategoricalColumns, data) => {
-    let uniqueOptionsByColumn = {};
+  (selectedCategoricalColumns: string[], data: any[]): Record<string, string[]> => {
+    const uniqueOptionsByColumn: Record<string, string[]> = {};
     selectedCategoricalColumns.map(column => (
       uniqueOptionsByColumn[column] = getUniqueOptions(data, column).sort()
     ))
@@ -79,8 +79,8 @@ export const getUniqueOptionsByColumn = createSelector(
 
 export const getExtremaByColumn = createSelector(
   [getSelectedNumericalColumns, getData],
-  (getSelectedNumericalColumns, data) => {
-    let extremaByColumn = {};
+  (getSelectedNumericalColumns: string[], data: any[]): Record<string, { min: number; max: number }> => {
+    const extremaByColumn: Record<string, { min: number; max: number }> = {};
     getSelectedNumericalColumns.map(column => (
       extremaByColumn[column] = getExtrema(data, column)
     ))
@@ -90,7 +90,7 @@ export const getExtremaByColumn = createSelector(
 
 export const getSelectedColumnsDescriptions = createSelector(
   [getSelectedColumns, getMetadata, getTrainedModelDetails],
-  (selectedColumns, metadata, trainedModelDetails) => {
+  (selectedColumns: string[], metadata: any, trainedModelDetails: any): { id: string; description: string }[] => {
     return selectedColumns.map(column => {
       return {
         id: column,
diff --git a/src/selectors/currentColumnSelectors.js b/src/selectors/currentColumnSelectors.ts
similarity index 53%
rename from src/selectors/currentColumnSelectors.js
rename to src/selectors/currentColumnSelectors.ts
index b303f084..81c9701f 100644
--- a/src/selectors/currentColumnSelectors.js
+++ b/src/selectors/currentColumnSelectors.ts
@@ -14,25 +14,25 @@ import {
   getMetadata,
   getTrainedModelDetails
  } from '../selectors';
-import { ColumnTypes } from "../constants.js";
+import { ColumnTypes } from "../constants";
 
-export const getCurrentColumn = state => state.currentColumn;
+export const getCurrentColumn = (state: any): string | undefined => state.currentColumn;
 
 export const getCurrentColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state, props) => isCurrentColumnReadOnly(state, props),
+    (state: any, props: any) => isCurrentColumnReadOnly(state, props),
     getColumnsByDataType,
-    (state, props) => getCurrentColumnDescription(state, props),
-    (state, props) => isCurrentColumnSelectable(state, props)
+    (state: any, props: any) => getCurrentColumnDescription(state, props),
+    (state: any, props: any) => isCurrentColumnSelectable(state, props)
   ],
   (
-    currentColumn,
-    isReadOnly,
-    columnsByDataType,
-    description,
-    isSelectable
-  ) => {
+    currentColumn: string | undefined,
+    isReadOnly: boolean,
+    columnsByDataType: Record<string, string>,
+    description: string,
+    isSelectable: boolean
+  ): any => {
     if (currentColumn) {
       return {
         id: currentColumn,
@@ -47,41 +47,41 @@ export const getCurrentColumnDetails = createSelector(
 
 export const isCurrentColumnReadOnly = createSelector(
   [getCurrentColumn, getMetadata],
-  (currentColumn, metadata) => {
+  (currentColumn: string | undefined, metadata: any): boolean => {
     return isColumnReadOnly(metadata, currentColumn)
   }
 )
 
 export const getCurrentColumnDescription = createSelector(
   [getCurrentColumn, getMetadata, getTrainedModelDetails],
-  (currentColumn, metadata, trainedModelDetails) => {
+  (currentColumn: string | undefined, metadata: any, trainedModelDetails: any): string => {
     return getColumnDescription(currentColumn, metadata, trainedModelDetails);
   }
 )
 
 export const isCurrentColumnSelectable = createSelector(
   [
-    (state, props) => isCurrentColumnSelected(state, props),
-    (state, props) => isValidData(state, props)
+    (state: any, props: any) => isCurrentColumnSelected(state, props),
+    (state: any, props: any) => isValidData(state, props)
   ],
-  (selected, isValidData) => {
+  (selected: boolean, isValidData: boolean): boolean => {
     return !selected && isValidData;
   }
 )
 
 export const isCurrentColumnSelected = createSelector(
   [getSelectedColumns, getCurrentColumn],
-  (selectedColumns, currentColumn) => {
+  (selectedColumns: string[], currentColumn: string | undefined): boolean => {
     return selectedColumns.includes(currentColumn);
   }
 )
 
 export const isValidData = createSelector(
   [
-    (state, props) => isValidNumericalData(state, props),
-    (state, props) => isValidCategoricalData(state, props)
+    (state: any, props: any) => isValidNumericalData(state, props),
+    (state: any, props: any) => isValidCategoricalData(state, props)
   ],
-  (isValidNumericalData, isValidCategoricalData) => {
+  (isValidNumericalData: boolean, isValidCategoricalData: boolean): boolean => {
     return isValidNumericalData || isValidCategoricalData;
   }
 )
@@ -89,17 +89,17 @@ export const isValidData = createSelector(
 export const getNumericalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state, props) => currentColumnIsNumerical(state, props),
-    (state, props) => getExtremaCurrentColumn(state, props),
-    (state, props) => currentColumnContainsOnlyNumbers(state, props)
+    (state: any, props: any) => currentColumnIsNumerical(state, props),
+    (state: any, props: any) => getExtremaCurrentColumn(state, props),
+    (state: any, props: any) => currentColumnContainsOnlyNumbers(state, props)
   ],
   (
-    currentColumn,
-    isNumerical,
-    extrema,
-    containsOnlyNumbers
-  ) => {
-    const numericalColumnDetails = {};
+    currentColumn: string | undefined,
+    isNumerical: boolean,
+    extrema: any,
+    containsOnlyNumbers: boolean
+  ): any => {
+    const numericalColumnDetails: any = {};
     numericalColumnDetails.id = currentColumn;
     if (isNumerical) {
       numericalColumnDetails.extrema = extrema;
@@ -111,28 +111,28 @@ export const getNumericalColumnDetails = createSelector(
 
 export const currentColumnIsNumerical = createSelector(
   [getCurrentColumn, getColumnsByDataType],
-  (currentColumn, columnsByDataType) => {
-    return columnsByDataType[currentColumn] === ColumnTypes.NUMERICAL;
+  (currentColumn: string | undefined, columnsByDataType: Record<string, string>): boolean => {
+    return columnsByDataType[currentColumn!] === ColumnTypes.NUMERICAL;
   }
 )
 
 export const getExtremaCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn, data) => {
+  (currentColumn: string | undefined, data: any[]): any => {
     return getExtrema(data, currentColumn);
   }
 )
 
 export const currentColumnContainsOnlyNumbers = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn, data) => {
+  (currentColumn: string | undefined, data: any[]): boolean => {
     return containsOnlyNumbers(data, currentColumn);
   }
 )
 
 export const isValidNumericalData = createSelector(
   [currentColumnIsNumerical, currentColumnContainsOnlyNumbers],
-  (isNumerical, containsOnlyNumbers) => {
+  (isNumerical: boolean, containsOnlyNumbers: boolean): boolean => {
     return isNumerical && containsOnlyNumbers;
   }
 )
@@ -140,17 +140,17 @@ export const isValidNumericalData = createSelector(
 export const getCategoricalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state, props) => currentColumnIsCategorical(state, props),
-    (state, props) => getUniqueOptionsCurrentColumn(state, props),
-    (state, props) => getOptionFrequenciesCurrentColumn(state, props)
+    (state: any, props: any) => currentColumnIsCategorical(state, props),
+    (state: any, props: any) => getUniqueOptionsCurrentColumn(state, props),
+    (state: any, props: any) => getOptionFrequenciesCurrentColumn(state, props)
   ],
   (
-    currentColumn,
-    isCategorical,
-    uniqueOptions,
-    uniqueOptionFrequencies
-  ) => {
-    const categeoricalColumnDetails = {};
+    currentColumn: string | undefined,
+    isCategorical: boolean,
+    uniqueOptions: string[],
+    uniqueOptionFrequencies: Record<string, number>
+  ): any => {
+    const categeoricalColumnDetails: any = {};
     categeoricalColumnDetails.id = currentColumn;
     if (isCategorical) {
       categeoricalColumnDetails.uniqueOptions = uniqueOptions;
@@ -162,20 +162,20 @@ export const getCategoricalColumnDetails = createSelector(
 
 export const getUniqueOptionsCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn, data) => {
+  (currentColumn: string | undefined, data: any[]): string[] => {
     return getUniqueOptions(data, currentColumn).sort()
   }
 )
 
 export const getOptionFrequenciesCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn, data) => {
-    let optionFrequencies = {};
-    for (let row of data) {
-      if (optionFrequencies[row[currentColumn]]) {
-        optionFrequencies[row[currentColumn]]++;
+  (currentColumn: string | undefined, data: any[]): Record<string, number> => {
+    const optionFrequencies: Record<string, number> = {};
+    for (const row of data) {
+      if (optionFrequencies[row[currentColumn!]]) {
+        optionFrequencies[row[currentColumn!]]++;
       } else {
-        optionFrequencies[row[currentColumn]] = 1;
+        optionFrequencies[row[currentColumn!]] = 1;
       }
     }
     return optionFrequencies;
@@ -184,21 +184,21 @@ export const getOptionFrequenciesCurrentColumn = createSelector(
 
 export const currentColumnIsCategorical = createSelector(
   [getCurrentColumn, getColumnsByDataType],
-  (currentColumn, columnsByDataType) => {
-    return columnsByDataType[currentColumn] === ColumnTypes.CATEGORICAL;
+  (currentColumn: string | undefined, columnsByDataType: Record<string, string>): boolean => {
+    return columnsByDataType[currentColumn!] === ColumnTypes.CATEGORICAL;
   }
 )
 
 export const hasTooManyUniqueOptions = createSelector(
   [getUniqueOptionsCurrentColumn, currentColumnIsCategorical],
-  (uniqueOptions, isCategorical) => {
+  (uniqueOptions: string[], isCategorical: boolean): boolean => {
     return isCategorical && tooManyUniqueOptions(uniqueOptions.length);
   }
 )
 
 export const isValidCategoricalData = createSelector(
   [currentColumnIsCategorical, getUniqueOptionsCurrentColumn],
-  (isCategorical, uniqueOptions) => {
+  (isCategorical: boolean, uniqueOptions: string[]): boolean => {
     return isCategorical && !tooManyUniqueOptions(uniqueOptions.length);
   }
 )
diff --git a/src/selectors/visualizationSelectors.js b/src/selectors/visualizationSelectors.ts
similarity index 69%
rename from src/selectors/visualizationSelectors.js
rename to src/selectors/visualizationSelectors.ts
index e607bb53..69c02cf5 100644
--- a/src/selectors/visualizationSelectors.js
+++ b/src/selectors/visualizationSelectors.ts
@@ -1,31 +1,32 @@
 import { createSelector } from 'reselect';
-import { getLabelColumn, getData, getColumnsByDataType, getDatasetId } from "../selectors.js";
+import { getLabelColumn, getData, getColumnsByDataType, getDatasetId } from "../selectors";
 import {
   getCurrentColumn,
   currentColumnIsCategorical,
   currentColumnIsNumerical
-} from './currentColumnSelectors.js';
-import { getUniqueOptions, getLocalizedColumnName } from "../helpers/columnDetails.js";
-import { areArraysEqual } from "../helpers/utils.js";
-import { ColumnTypes } from "../constants.js";
+} from './currentColumnSelectors';
+import { getUniqueOptions, getLocalizedColumnName } from "../helpers/columnDetails";
+import { areArraysEqual } from "../helpers/utils";
+import { ColumnTypes } from "../constants";
+import { Coordinate, ScatterPlotData, CrossTabResult, CrossTabData } from "../types";
 
 export const getScatterPlotData = createSelector(
   [
     getLabelColumn,
-    (state, props) => labelColumnIsNumerical(state, props),
+    (state: any, props: any) => labelColumnIsNumerical(state, props),
     getCurrentColumn,
     currentColumnIsNumerical,
     getData,
     getDatasetId
   ],
   (
-    labelColumn,
-    labelColumnIsNumerical,
-    currentColumn,
-    currentColumnIsNumerical,
-    data,
-    datasetId
-  ) => {
+    labelColumn: string | undefined,
+    labelColumnIsNumerical: boolean,
+    currentColumn: string | undefined,
+    currentColumnIsNumerical: boolean,
+    data: any[],
+    datasetId: string | undefined
+  ): ScatterPlotData | null => {
     if (!labelColumn || !currentColumn) {
       return null;
     }
@@ -39,8 +40,8 @@ export const getScatterPlotData = createSelector(
     }
 
     // For each row, record the X (feature value) and Y (label value).
-    const coordinates = [];
-    for (let row of data) {
+    const coordinates: Coordinate[] = [];
+    for (const row of data) {
       coordinates.push({ x: row[currentColumn], y: row[labelColumn] });
     }
 
@@ -92,22 +93,22 @@ export const getScatterPlotData = createSelector(
 export const getCrossTabData = createSelector(
   [
     getLabelColumn,
-    (state, props) => labelColumnIsCategorical(state, props),
+    (state: any, props: any) => labelColumnIsCategorical(state, props),
     getCurrentColumn,
     currentColumnIsCategorical,
     getData,
-    (state, props) => getUniqueOptionsLabelColumn(state, props),
+    (state: any, props: any) => getUniqueOptionsLabelColumn(state, props),
     getDatasetId
   ],
   (
-    labelColumn,
-    labelColumnIsCategorical,
-    currentColumn,
-    currentColumnIsCategorical,
-    data,
-    uniqueOptionsLabelColumn,
-    datasetId
-  ) => {
+    labelColumn: string | undefined,
+    labelColumnIsCategorical: boolean,
+    currentColumn: string | undefined,
+    currentColumnIsCategorical: boolean,
+    data: any[],
+    uniqueOptionsLabelColumn: string[],
+    datasetId: string | undefined
+  ): CrossTabData | null => {
     if (!labelColumn || !currentColumn) {
       return null;
     }
@@ -116,18 +117,18 @@ export const getCrossTabData = createSelector(
       return null;
     }
 
-    var results = [];
+    const results: CrossTabResult[] = [];
 
     // For each row of data, determine whether we have found a new or existing
     // combination of feature values.  If new, then add a new entry to our results
     // array.  Then record or increment the count for the corresponding label
     // value.
 
-    for (let row of data) {
-      var featureValues = [];
+    for (const row of data) {
+      const featureValues: any[] = [];
       featureValues.push(row[currentColumn]);
 
-      var existingEntry = results.find(result => {
+      let existingEntry = results.find(result => {
         return areArraysEqual(result.featureValues, featureValues);
       });
 
@@ -149,13 +150,13 @@ export const getCrossTabData = createSelector(
     // Now that we have all the counts of label values, we can determine the
     // corresponding percentage values.
 
-    for (let result of results) {
+    for (const result of results) {
       let totalCount = 0;
-      for (let labelCount of Object.values(result.labelCounts)) {
+      for (const labelCount of Object.values(result.labelCounts)) {
         totalCount += labelCount;
       }
       result.labelPercents = {};
-      for (let key of Object.keys(result.labelCounts)) {
+      for (const key of Object.keys(result.labelCounts)) {
         result.labelPercents[key] = Math.round(
           (result.labelCounts[key] / totalCount) * 100
         );
@@ -164,7 +165,7 @@ export const getCrossTabData = createSelector(
 
     // Take inventory of all unique label values we have seen, which allows us
     // to generate the header at the top of the CrossTab UI.
-    const uniqueLabelValues =  uniqueOptionsLabelColumn;
+    const uniqueLabelValues = uniqueOptionsLabelColumn;
 
     const localizedLabelColumn = getLocalizedColumnName(datasetId, labelColumn);
     const localizedCurrentColumn = getLocalizedColumnName(datasetId, currentColumn);
@@ -179,21 +180,21 @@ export const getCrossTabData = createSelector(
 
 export const labelColumnIsNumerical = createSelector(
   [getLabelColumn, getColumnsByDataType],
-  (labelColumn, columnsByDataType) => {
-    return columnsByDataType[labelColumn] === ColumnTypes.NUMERICAL;
+  (labelColumn: string | undefined, columnsByDataType: Record<string, string>): boolean => {
+    return columnsByDataType[labelColumn!] === ColumnTypes.NUMERICAL;
   }
 )
 
 export const labelColumnIsCategorical = createSelector(
   [getLabelColumn, getColumnsByDataType],
-  (labelColumn, columnsByDataType) => {
-    return columnsByDataType[labelColumn] === ColumnTypes.CATEGORICAL;
+  (labelColumn: string | undefined, columnsByDataType: Record<string, string>): boolean => {
+    return columnsByDataType[labelColumn!] === ColumnTypes.CATEGORICAL;
   }
 )
 
 export const getUniqueOptionsLabelColumn = createSelector(
   [getLabelColumn, getData],
-  (labelColumn, data) => {
+  (labelColumn: string | undefined, data: any[]): string[] => {
     return getUniqueOptions(data, labelColumn).sort()
   }
 )
diff --git a/src/train.js b/src/train.ts
similarity index 72%
rename from src/train.js
rename to src/train.ts
index 8b3328d1..588c6d30 100644
--- a/src/train.js
+++ b/src/train.ts
@@ -2,7 +2,7 @@
 
 import KNNTrainer from "./trainers/KNNTrainer";
 
-import { buildOptionNumberKey } from "./helpers/columnDetails.js";
+import { buildOptionNumberKey } from "./helpers/columnDetails";
 import {
   setFeatureNumberKey,
   setTrainingExamples,
@@ -14,9 +14,9 @@ import { getSelectedCategoricalColumns } from "./selectors";
 import {
   TestDataLocations,
   PERCENT_OF_DATASET_FOR_TESTING
-} from "./constants.js";
-import { getRandomInt } from "./helpers/utils.js";
-import { convertValueForTraining } from "./helpers/valueConversion.js";
+} from "./constants";
+import { getRandomInt } from "./helpers/utils";
+import { convertValueForTraining } from "./helpers/valueConversion";
 
 /* Builds a hash that maps selected categorical features to their option-
   number keys and dispatches that hash to the Redux store.
@@ -35,12 +35,12 @@ import { convertValueForTraining } from "./helpers/valueConversion.js";
   }
   */
 
-const buildOptionNumberKeysByFeature = store => {
+const buildOptionNumberKeysByFeature = (store: any): void => {
   const state = store.getState();
-  let optionsMappedToNumbersByFeature = {};
+  const optionsMappedToNumbersByFeature: Record<string, any> = {};
   const categoricalColumnsToConvert = getSelectedCategoricalColumns(state);
   categoricalColumnsToConvert.forEach(
-    feature =>
+    (feature: string) =>
       (optionsMappedToNumbersByFeature[feature] = buildOptionNumberKey(
         state,
         feature
@@ -60,25 +60,25 @@ const buildOptionNumberKeysByFeature = store => {
   }
   @return {array}
   */
-const extractTrainingExamples = (state, row) => {
-  let exampleValues = [];
-  state.selectedFeatures.forEach(feature =>
+const extractTrainingExamples = (state: any, row: any): any[] => {
+  const exampleValues: any[] = [];
+  state.selectedFeatures.forEach((feature: string) =>
     exampleValues.push(convertValueForTraining(state, row[feature], feature))
   );
   return exampleValues;
 };
 
-const extractTrainingLabel = (state, row) => {
+const extractTrainingLabel = (state: any, row: any): any => {
   const value = row[state.labelColumn];
   return convertValueForTraining(state, value, state.labelColumn);
 };
 
-const prepareTrainingData = store => {
+const prepareTrainingData = (store: any): void => {
   const updatedState = store.getState();
-  const trainingExamples = updatedState.data.map(row =>
+  const trainingExamples = updatedState.data.map((row: any) =>
     extractTrainingExamples(updatedState, row)
   );
-  const trainingLabels = updatedState.data.map(row =>
+  const trainingLabels = updatedState.data.map((row: any) =>
     extractTrainingLabel(updatedState, row)
   );
   /*
@@ -87,8 +87,8 @@ const prepareTrainingData = store => {
   const numToReserve = Math.ceil(
     trainingExamples.length * PERCENT_OF_DATASET_FOR_TESTING
   );
-  let accuracyCheckExamples = [];
-  let accuracyCheckLabels = [];
+  let accuracyCheckExamples: any[] = [];
+  let accuracyCheckLabels: any[] = [];
   if (updatedState.reserveLocation === TestDataLocations.END) {
     const index = -1 * numToReserve;
     accuracyCheckExamples = trainingExamples.splice(index);
@@ -97,7 +97,7 @@ const prepareTrainingData = store => {
   if (updatedState.reserveLocation === TestDataLocations.RANDOM) {
     let numReserved = 0;
     while (numReserved < numToReserve) {
-      let randomIndex = getRandomInt(trainingExamples.length - 1);
+      const randomIndex = getRandomInt(trainingExamples.length - 1);
       accuracyCheckExamples.push(trainingExamples[randomIndex]);
       trainingExamples.splice(randomIndex, 1);
       accuracyCheckLabels.push(trainingLabels[randomIndex]);
@@ -111,10 +111,10 @@ const prepareTrainingData = store => {
   store.dispatch(setAccuracyCheckLabels(accuracyCheckLabels));
 };
 
-const prepareTestData = store => {
+const prepareTestData = (store: any): any[] => {
   const updatedState = store.getState();
-  let testValues = [];
-  updatedState.selectedFeatures.forEach(feature =>
+  const testValues: any[] = [];
+  updatedState.selectedFeatures.forEach((feature: string) =>
     testValues.push(
       convertValueForTraining(updatedState, updatedState.testData[feature], feature)
     )
@@ -122,20 +122,20 @@ const prepareTestData = store => {
   return testValues;
 };
 
-let trainingState = {};
-const init = store => {
+const trainingState: { trainer?: KNNTrainer } = {};
+const init = (store: any): void => {
   trainingState.trainer = new KNNTrainer(store);
   buildOptionNumberKeysByFeature(store);
   prepareTrainingData(store);
 };
 
-const onClickTrain = store => {
-  trainingState.trainer.startTraining(store);
+const onClickTrain = (store: any): void => {
+  trainingState.trainer!.startTraining(store);
 };
 
-const onClickPredict = store => {
+const onClickPredict = (store: any): void => {
   const testValues = prepareTestData(store);
-  trainingState.trainer.predict(testValues);
+  trainingState.trainer!.predict(testValues);
 };
 
 export default {
diff --git a/src/trainers/KNNTrainer.js b/src/trainers/KNNTrainer.ts
similarity index 78%
rename from src/trainers/KNNTrainer.js
rename to src/trainers/KNNTrainer.ts
index 2af53f0c..61aacbdf 100644
--- a/src/trainers/KNNTrainer.js
+++ b/src/trainers/KNNTrainer.ts
@@ -12,10 +12,17 @@ import {
 import { getPercentCorrect } from "../helpers/accuracy";
 import { logFirehoseMetric } from "../helpers/metrics";
 import KNN from "ml-knn";
+import { KNNTrainedModelDetails } from "../types";
 
 export default class KNNTrainer {
+  private store: any;
+  private knn: any;
 
-  startTraining(store) {
+  constructor(store: any) {
+    this.store = store;
+  }
+
+  startTraining(store: any): void {
     this.store = store;
     const state = store.getState();
 
@@ -37,17 +44,17 @@ export default class KNNTrainer {
     the curriculum. For large classification datasets we try a variety of K
     values and select the one that yields the most accurate model.
   */
-  getOptimalModelDetails(state) {
-    let bestModel = null;
-    let bestPredictedLabels = [];
+  getOptimalModelDetails(state: any): KNNTrainedModelDetails {
+    let bestModel: any = null;
+    let bestPredictedLabels: any[] = [];
     let bestK = -1;
     let bestAccuracy = -1;
     const kValues = this.possibleKValues(state);
-    kValues.forEach(kValue => {
+    kValues.forEach((kValue: number) => {
       this.knn = new KNN(state.trainingExamples, state.trainingLabels, {
         k: kValue
       });
-      var model = this.knn;
+      const model = this.knn;
       const predictedLabels = this.batchPredict(
         state.accuracyCheckExamples
       );
@@ -66,12 +73,12 @@ export default class KNNTrainer {
     };
   }
 
-  possibleKValues(state) {
-    let datasetSize = state.data.length;
+  possibleKValues(state: any): number[] {
+    const datasetSize = state.data.length;
     const smallDatasetSize = 10;
     const mediumDatasetSize = 100;
 
-    let kValues = [];
+    let kValues: number[] = [];
     const minimalK = 1;
     const smallK = 5;
     const defaultRegressionK = datasetSize < mediumDatasetSize
@@ -89,7 +96,7 @@ export default class KNNTrainer {
         kValues.push(defaultRegressionK)
       } else {
         kValues = this.calculatePotentialKValues(state)
-          .filter(kValue => kValue <= state.trainingExamples.length)
+          .filter((kValue: number) => kValue <= state.trainingExamples.length)
       }
     } else {
       kValues.push(defaultK)
@@ -97,36 +104,36 @@ export default class KNNTrainer {
     return kValues;
   }
 
-  calculatePotentialKValues(state) {
-    let datasetSize = state.data.length;
+  calculatePotentialKValues(state: any): number[] {
+    const datasetSize = state.data.length;
     const trainingExamplesSize = state.trainingExamples.length;
     const possibleKValues = [1, 3, 5, 7, 17, 31, 45, 61];
     const heuristicK = Math.round(Math.sqrt(datasetSize));
     possibleKValues.push(heuristicK);
     const oneThird = Math.round(datasetSize / 3);
     possibleKValues.push(oneThird);
-    return possibleKValues.filter(kValue => kValue <= trainingExamplesSize);
+    return possibleKValues.filter((kValue: number) => kValue <= trainingExamplesSize);
   }
 
-  getAccuracyPercent() {
+  getAccuracyPercent(): number {
     const state = this.store.getState();
     const percent = getPercentCorrect(state);
     return parseFloat(percent);
   }
 
-  batchPredict(accuracyCheckExamples) {
+  batchPredict(accuracyCheckExamples: any[]): any[] {
     const predictedLabels = this.knn.predict(accuracyCheckExamples);
     this.store.dispatch(setAccuracyCheckPredictedLabels(predictedLabels));
     return predictedLabels;
   }
 
-  predict(testValues) {
+  predict(testValues: any[]): void {
     const state = this.store.getState();
     const prediction = state.trainedModel.predict(testValues);
     this.store.dispatch(setPrediction(prediction));
   }
 
-  storeTrainedModel(store, trainedModel) {
+  storeTrainedModel(store: any, trainedModel: KNNTrainedModelDetails): void {
     store.dispatch(setKValue(trainedModel.kValue));
     store.dispatch(setAccuracyCheckPredictedLabels(
       trainedModel.predictedLabels
@@ -134,7 +141,7 @@ export default class KNNTrainer {
     store.dispatch(setTrainedModel(trainedModel.model));
   }
 
-  storeHistoricResult(store, state) {
+  storeHistoricResult(store: any, state: any): void {
     const accuracy = getPercentCorrect(state);
     store.dispatch(
       setHistoricResult(state.labelColumn, state.selectedFeatures, accuracy)
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..7ad8af8c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,104 @@
+export interface ResultsData {
+  examples: any[][];
+  labels: any[];
+  predictedLabels: any[];
+}
+
+export interface CategoricalColumnDetails {
+  id: string;
+  uniqueOptions: Record<string, string>;
+  frequencies: Record<string, number>;
+}
+
+export interface NumericalColumnDetails {
+  id: string;
+  extrema?: { min: number; max: number; range: number };
+  containsOnlyNumbers: boolean;
+}
+
+export interface CurrentColumnInspector {
+  id: string;
+  readOnly: boolean;
+  dataType: string;
+  description: string;
+  isSelectable: boolean;
+}
+
+export interface CrossTabResult {
+  featureValues: any[];
+  labelCounts: Record<string, number>;
+  labelPercents?: Record<string, number>;
+}
+
+export interface CrossTabData {
+  results: CrossTabResult[];
+  uniqueLabelValues: string[];
+  featureNames: string[];
+  labelName: string;
+}
+
+export interface Coordinate {
+  x: any;
+  y: any;
+}
+
+export interface ScatterPlotData {
+  label: string;
+  feature: string;
+  coordinates: Coordinate[];
+}
+
+export interface MetadataContext {
+  createdBy?: string;
+  potentialMisuses?: string;
+  potentialUses?: string;
+}
+
+export interface MetadataCard {
+  description?: string;
+  context?: MetadataContext;
+  lastUpdated?: string;
+  source?: string;
+}
+
+export interface MetadataField {
+  id?: string;
+  description?: string;
+  type?: "numerical" | "categorical";
+}
+
+export interface Metadata {
+  name?: string;
+  card?: MetadataCard;
+  defaultLabelColumn?: string;
+  fields?: MetadataField[];
+}
+
+export interface KNNTrainedModelDetails {
+  model: any;
+  predictedLabels: any[];
+  kValue: number;
+}
+
+export interface TrainedModelDetails {
+  name?: string;
+  potentialMisuses?: string;
+  potentialUses?: string;
+}
+
+export interface ModelCardColumn {
+  id?: string;
+  description?: string;
+  min?: number;
+  max?: number;
+  values?: string[];
+}
+
+export interface DatasetDetails {
+  name?: string;
+  description?: string;
+  isUserUploaded: boolean;
+  numRows: number;
+  potentialUses?: string;
+  potentialMisuses?: string;
+}
diff --git a/test/unit/accuracy.test.js b/test/unit/accuracy.test.js
index 8f56aaaa..2b79ace3 100644
--- a/test/unit/accuracy.test.js
+++ b/test/unit/accuracy.test.js
@@ -6,9 +6,9 @@ import {
   getPercentCorrect,
   getResultsDataInDataTableForm,
   getSummaryStat
-} from '../../src/helpers/accuracy.js';
+} from '../../src/helpers/accuracy';
 import { classificationState, regressionState } from './testData';
-import { ResultsGrades, MLTypes } from '../../src/constants.js';
+import { ResultsGrades, MLTypes } from '../../src/constants';
 
 const regressionGrades = [
   ResultsGrades.INCORRECT,
diff --git a/test/unit/columnDetails.test.js b/test/unit/columnDetails.test.js
index 8f461af1..564fd37d 100644
--- a/test/unit/columnDetails.test.js
+++ b/test/unit/columnDetails.test.js
@@ -8,7 +8,7 @@ import {
   getExtrema,
   containsOnlyNumbers,
   getColumnDescription
-} from '../../src/helpers/columnDetails.js';
+} from '../../src/helpers/columnDetails';
 import {
   classificationState,
   allNumericalState,
@@ -19,7 +19,7 @@ import {
   mosquitoDescription,
   premadeDatasetTranslations
 } from './testData';
-import { ColumnTypes, UNIQUE_OPTIONS_MAX } from "../../src/constants.js";
+import { ColumnTypes, UNIQUE_OPTIONS_MAX } from "../../src/constants";
 import I18n from "../../src/i18n";
 
 beforeEach(() => {
diff --git a/test/unit/currentColumnSelectors.test.js b/test/unit/currentColumnSelectors.test.js
index 1e881c4a..76830647 100644
--- a/test/unit/currentColumnSelectors.test.js
+++ b/test/unit/currentColumnSelectors.test.js
@@ -1,4 +1,4 @@
-import { getSelectedColumns } from "../../src/selectors.js";
+import { getSelectedColumns } from "../../src/selectors";
 import {
   getUniqueOptionsCurrentColumn,
   getExtremaCurrentColumn,
diff --git a/test/unit/navigationValidation.test.js b/test/unit/navigationValidation.test.js
index bdec8271..6bcb086b 100644
--- a/test/unit/navigationValidation.test.js
+++ b/test/unit/navigationValidation.test.js
@@ -1,4 +1,4 @@
-import { isPanelEnabled } from "../../src/helpers/navigationValidation.js";
+import { isPanelEnabled } from "../../src/helpers/navigationValidation";
 
 const initialState = {
   data: [],
diff --git a/test/unit/train.test.js b/test/unit/train.test.js
index 0659f4d9..3d39da29 100644
--- a/test/unit/train.test.js
+++ b/test/unit/train.test.js
@@ -1,7 +1,7 @@
 import { createStore } from "redux";
 import train from "../../src/train";
-import { ResultsGrades } from "../../src/constants.js";
-import { ColumnTypes } from "../../src/constants.js";
+import { ResultsGrades } from "../../src/constants";
+import { ColumnTypes } from "../../src/constants";
 import rootReducer, {
   setFirehoseMetricsLogger,
   setInstructionsKeyCallback,
diff --git a/test/unit/utils.test.js b/test/unit/utils.test.js
index 95f82691..a4dbcad6 100644
--- a/test/unit/utils.test.js
+++ b/test/unit/utils.test.js
@@ -4,7 +4,7 @@ import {
   areArraysEqual,
   arrayIntersection,
   getRandomInt
-} from '../../src/helpers/utils.js';
+} from '../../src/helpers/utils';
 
 const menu = {
   breakfast: "pancakes",
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..13c0189e
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": false,
+    "allowJs": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "declaration": false,
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@ml/*": ["src/*"],
+      "@public/*": ["public/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/webpack.config.js b/webpack.config.js
index bf80a400..fd7114f2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,7 +4,7 @@ const path = require("path");
 const commonConfig = {
   devtool: 'eval-cheap-module-source-map',
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".ts", ".tsx", ".js", ".jsx"],
     // Note: Separate aliases are required for aliases to work in unit tests. These should
     // be added in package.json in the jest configuration.
     alias: {
@@ -21,7 +21,7 @@ const commonConfig = {
   module: {
     rules: [
       {
-        test: /\.jsx?$/,
+        test: /\.[jt]sx?$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
@@ -80,7 +80,7 @@ const externalConfig = {
 const defaultConfig = [
   {
     entry: {
-      assetPath: './src/assetPath.js'
+      assetPath: './src/assetPath.ts'
     },
     ...commonConfig,
     ...firstConfigOnly,
@@ -88,7 +88,7 @@ const defaultConfig = [
   },
   {
     entry: {
-      mainDev: './src/indexDev.js'
+      mainDev: './src/indexDev.tsx'
     },
     ...commonConfig
   }
@@ -97,7 +97,7 @@ const defaultConfig = [
 const productionConfig = [
   {
     entry: {
-      main: './src/indexProd.js'
+      main: './src/indexProd.tsx'
     },
     ...commonConfig,
     ...externalConfig
diff --git a/yarn.lock b/yarn.lock
index 88c63fd1..d62e652c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -366,7 +366,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.28.6", "@babel/plugin-syntax-jsx@^7.7.2":
+"@babel/plugin-syntax-jsx@^7.27.1", "@babel/plugin-syntax-jsx@^7.28.6", "@babel/plugin-syntax-jsx@^7.7.2":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.28.6.tgz#f8ca28bbd84883b5fea0e447c635b81ba73997ee"
   integrity sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==
@@ -429,7 +429,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.7.2":
+"@babel/plugin-syntax-typescript@^7.28.6", "@babel/plugin-syntax-typescript@^7.7.2":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.28.6.tgz#c7b2ddf1d0a811145b1de800d1abd146af92e3a2"
   integrity sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==
@@ -632,7 +632,7 @@
     "@babel/helper-module-transforms" "^7.27.1"
     "@babel/helper-plugin-utils" "^7.27.1"
 
-"@babel/plugin-transform-modules-commonjs@^7.28.6":
+"@babel/plugin-transform-modules-commonjs@^7.27.1", "@babel/plugin-transform-modules-commonjs@^7.28.6":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz#c0232e0dfe66a734cc4ad0d5e75fc3321b6fdef1"
   integrity sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==
@@ -843,6 +843,17 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.27.1"
 
+"@babel/plugin-transform-typescript@^7.28.5":
+  version "7.28.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.6.tgz#1e93d96da8adbefdfdade1d4956f73afa201a158"
+  integrity sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.27.3"
+    "@babel/helper-create-class-features-plugin" "^7.28.6"
+    "@babel/helper-plugin-utils" "^7.28.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.27.1"
+    "@babel/plugin-syntax-typescript" "^7.28.6"
+
 "@babel/plugin-transform-unicode-escapes@^7.27.1":
   version "7.27.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz#3e3143f8438aef842de28816ece58780190cf806"
@@ -971,6 +982,17 @@
     "@babel/plugin-transform-react-jsx-development" "^7.27.1"
     "@babel/plugin-transform-react-pure-annotations" "^7.27.1"
 
+"@babel/preset-typescript@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.28.5.tgz#540359efa3028236958466342967522fd8f2a60c"
+  integrity sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.27.1"
+    "@babel/helper-validator-option" "^7.27.1"
+    "@babel/plugin-syntax-jsx" "^7.27.1"
+    "@babel/plugin-transform-modules-commonjs" "^7.27.1"
+    "@babel/plugin-transform-typescript" "^7.28.5"
+
 "@babel/template@^7.28.6", "@babel/template@^7.3.3":
   version "7.28.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.28.6.tgz#0e7e56ecedb78aeef66ce7972b082fce76a23e57"
@@ -1020,14 +1042,14 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@eslint-community/eslint-utils@^4.2.0":
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.9.1":
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz#4e90af67bc51ddee6cdef5284edf572ec376b595"
   integrity sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==
   dependencies:
     eslint-visitor-keys "^3.4.3"
 
-"@eslint-community/regexpp@^4.6.1":
+"@eslint-community/regexpp@^4.12.2", "@eslint-community/regexpp@^4.6.1":
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.2.tgz#bccdf615bcf7b6e8db830ec0b8d21c9a25de597b"
   integrity sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==
@@ -1880,6 +1902,18 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
+"@types/react-dom@^19.2.3":
+  version "19.2.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c"
+  integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==
+
+"@types/react@^19.2.14":
+  version "19.2.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.14.tgz#39604929b5e3957e3a6fa0001dafb17c7af70bad"
+  integrity sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==
+  dependencies:
+    csstype "^3.2.2"
+
 "@types/retry@0.12.2":
   version "0.12.2"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.2.tgz#ed279a64fa438bb69f2480eda44937912bb7480a"
@@ -1960,6 +1994,102 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@typescript-eslint/eslint-plugin@^8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.58.1.tgz#cb53038b83d165ca0ef96d67d875efbd56c50fa8"
+  integrity sha512-eSkwoemjo76bdXl2MYqtxg51HNwUSkWfODUOQ3PaTLZGh9uIWWFZIjyjaJnex7wXDu+TRx+ATsnSxdN9YWfRTQ==
+  dependencies:
+    "@eslint-community/regexpp" "^4.12.2"
+    "@typescript-eslint/scope-manager" "8.58.1"
+    "@typescript-eslint/type-utils" "8.58.1"
+    "@typescript-eslint/utils" "8.58.1"
+    "@typescript-eslint/visitor-keys" "8.58.1"
+    ignore "^7.0.5"
+    natural-compare "^1.4.0"
+    ts-api-utils "^2.5.0"
+
+"@typescript-eslint/parser@^8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.58.1.tgz#0943eca522ac408bcdd649882c3d95b10ff00f62"
+  integrity sha512-gGkiNMPqerb2cJSVcruigx9eHBlLG14fSdPdqMoOcBfh+vvn4iCq2C8MzUB89PrxOXk0y3GZ1yIWb9aOzL93bw==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.58.1"
+    "@typescript-eslint/types" "8.58.1"
+    "@typescript-eslint/typescript-estree" "8.58.1"
+    "@typescript-eslint/visitor-keys" "8.58.1"
+    debug "^4.4.3"
+
+"@typescript-eslint/project-service@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/project-service/-/project-service-8.58.1.tgz#c78781b1ca1ec1e7bc6522efba89318c6d249feb"
+  integrity sha512-gfQ8fk6cxhtptek+/8ZIqw8YrRW5048Gug8Ts5IYcMLCw18iUgrZAEY/D7s4hkI0FxEfGakKuPK/XUMPzPxi5g==
+  dependencies:
+    "@typescript-eslint/tsconfig-utils" "^8.58.1"
+    "@typescript-eslint/types" "^8.58.1"
+    debug "^4.4.3"
+
+"@typescript-eslint/scope-manager@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.58.1.tgz#35168f561bab4e3fd10dd6b03e8b83c157479211"
+  integrity sha512-TPYUEqJK6avLcEjumWsIuTpuYODTTDAtoMdt8ZZa93uWMTX13Nb8L5leSje1NluammvU+oI3QRr5lLXPgihX3w==
+  dependencies:
+    "@typescript-eslint/types" "8.58.1"
+    "@typescript-eslint/visitor-keys" "8.58.1"
+
+"@typescript-eslint/tsconfig-utils@8.58.1", "@typescript-eslint/tsconfig-utils@^8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.58.1.tgz#eb16792c579300c7bfb3c74b0f5e1dfbb0a2454d"
+  integrity sha512-JAr2hOIct2Q+qk3G+8YFfqkqi7sC86uNryT+2i5HzMa2MPjw4qNFvtjnw1IiA1rP7QhNKVe21mSSLaSjwA1Olw==
+
+"@typescript-eslint/type-utils@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.58.1.tgz#b21085a233087bde94c92ba6f5b4dfb77ca56730"
+  integrity sha512-HUFxvTJVroT+0rXVJC7eD5zol6ID+Sn5npVPWoFuHGg9Ncq5Q4EYstqR+UOqaNRFXi5TYkpXXkLhoCHe3G0+7w==
+  dependencies:
+    "@typescript-eslint/types" "8.58.1"
+    "@typescript-eslint/typescript-estree" "8.58.1"
+    "@typescript-eslint/utils" "8.58.1"
+    debug "^4.4.3"
+    ts-api-utils "^2.5.0"
+
+"@typescript-eslint/types@8.58.1", "@typescript-eslint/types@^8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.58.1.tgz#9dfb4723fcd2b13737d8b03d941354cf73190313"
+  integrity sha512-io/dV5Aw5ezwzfPBBWLoT+5QfVtP8O7q4Kftjn5azJ88bYyp/ZMCsyW1lpKK46EXJcaYMZ1JtYj+s/7TdzmQMw==
+
+"@typescript-eslint/typescript-estree@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.58.1.tgz#8230cc9628d2cffef101e298c62807c4b9bf2fe9"
+  integrity sha512-w4w7WR7GHOjqqPnvAYbazq+Y5oS68b9CzasGtnd6jIeOIeKUzYzupGTB2T4LTPSv4d+WPeccbxuneTFHYgAAWg==
+  dependencies:
+    "@typescript-eslint/project-service" "8.58.1"
+    "@typescript-eslint/tsconfig-utils" "8.58.1"
+    "@typescript-eslint/types" "8.58.1"
+    "@typescript-eslint/visitor-keys" "8.58.1"
+    debug "^4.4.3"
+    minimatch "^10.2.2"
+    semver "^7.7.3"
+    tinyglobby "^0.2.15"
+    ts-api-utils "^2.5.0"
+
+"@typescript-eslint/utils@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.58.1.tgz#099a327b04ed921e6ee3988cde9ef34bc4b5435a"
+  integrity sha512-Ln8R0tmWC7pTtLOzgJzYTXSCjJ9rDNHAqTaVONF4FEi2qwce8mD9iSOxOpLFFvWp/wBFlew0mjM1L1ihYWfBdQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.9.1"
+    "@typescript-eslint/scope-manager" "8.58.1"
+    "@typescript-eslint/types" "8.58.1"
+    "@typescript-eslint/typescript-estree" "8.58.1"
+
+"@typescript-eslint/visitor-keys@8.58.1":
+  version "8.58.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.58.1.tgz#7c197533177f1ba9b8249f55f7f685e32bb6f204"
+  integrity sha512-y+vH7QE8ycjoa0bWciFg7OpFcipUuem1ujhrdLtq1gByKwfbC7bPeKsiny9e0urg93DqwGcHey+bGRKCnF1nZQ==
+  dependencies:
+    "@typescript-eslint/types" "8.58.1"
+    eslint-visitor-keys "^5.0.0"
+
 "@ungap/structured-clone@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
@@ -2470,6 +2600,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+balanced-match@^4.0.2:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-4.0.4.tgz#bfb10662feed8196a2c62e7c68e17720c274179a"
+  integrity sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==
+
 baseline-browser-mapping@^2.10.12:
   version "2.10.16"
   resolved "https://registry.yarnpkg.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.16.tgz#ef80cf218a53f165689a6e32ffffdca1f35d979c"
@@ -2550,6 +2685,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-5.0.5.tgz#dcc3a37116b79f3e1b46db994ced5d570e930fdb"
+  integrity sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==
+  dependencies:
+    balanced-match "^4.0.2"
+
 braces@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
@@ -2664,7 +2806,7 @@ chalk@^2.0.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2951,6 +3093,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csstype@^3.2.2:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -3172,7 +3319,7 @@ encodeurl@~2.0.0:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
   integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
-enhanced-resolve@^5.20.0:
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.20.0:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz#eeeb3966bea62c348c40a0cc9e7912e2557d0be0"
   integrity sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==
@@ -3435,6 +3582,11 @@ eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
+eslint-visitor-keys@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz#9e3c9489697824d2d4ce3a8ad12628f91e9f59be"
+  integrity sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==
+
 eslint@8:
   version "8.57.1"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
@@ -3703,6 +3855,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fdir@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.5.0.tgz#ed2ab967a331ade62f18d077dae192684d50d350"
+  integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -4206,6 +4363,11 @@ ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+ignore@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-7.0.5.tgz#4cb5f6cd7d4c7ab0365738c7aea888baa6d7efd9"
+  integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
+
 import-fresh@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
@@ -5247,7 +5409,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
-micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.8:
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -5306,6 +5468,13 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
+minimatch@^10.2.2:
+  version "10.2.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-10.2.5.tgz#bd48687a0be38ed2961399105600f832095861d1"
+  integrity sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==
+  dependencies:
+    brace-expansion "^5.0.5"
+
 minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
@@ -5689,6 +5858,11 @@ picomatch@^2.2.3, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.2.tgz#5a942915e26b372dc0f0e6753149a16e6b1c5601"
   integrity sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==
 
+picomatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.4.tgz#fd6f5e00a143086e074dffe4c924b8fb293b0589"
+  integrity sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -6278,7 +6452,7 @@ semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.5.3, semver@^7.5.4, semver@^7.6.3:
+semver@^7.3.4, semver@^7.5.3, semver@^7.5.4, semver@^7.6.3, semver@^7.7.3:
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.4.tgz#28464e36060e991fa7a11d0279d2d3f3b57a7e8a"
   integrity sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==
@@ -6526,6 +6700,11 @@ source-map@^0.6.0, source-map@^0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.4:
+  version "0.7.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.6.tgz#a3658ab87e5b6429c8a1f3ba0083d4c61ca3ef02"
+  integrity sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==
+
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
@@ -6790,6 +6969,14 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tinyglobby@^0.2.15:
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/tinyglobby/-/tinyglobby-0.2.16.tgz#1c3b7eb953fce42b226bc5a1ee06428281aff3d6"
+  integrity sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==
+  dependencies:
+    fdir "^6.5.0"
+    picomatch "^4.0.4"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -6827,6 +7014,22 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+ts-api-utils@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.5.0.tgz#4acd4a155e22734990a5ed1fe9e97f113bcb37c1"
+  integrity sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==
+
+ts-loader@^9.5.7:
+  version "9.5.7"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.5.7.tgz#582663e853646e18506cd5cc79feb354952731c0"
+  integrity sha512-/ZNrKgA3K3PtpMYOC71EeMWIloGw3IYEa5/t1cyz2r5/PyUwTXGzYJvcD3kfUvmhlfpz1rhV8B2O6IVTQ0avsg==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+    source-map "^0.7.4"
+
 tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -6919,6 +7122,11 @@ typed-array-length@^1.0.7:
     possible-typed-array-names "^1.0.0"
     reflect.getprototypeof "^1.0.6"
 
+typescript@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-6.0.2.tgz#0b1bfb15f68c64b97032f3d78abbf98bdbba501f"
+  integrity sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==
+
 unbox-primitive@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"

From a165f1f182fc6144dca8b1b3dd96bb5d85dec4ee Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 01:25:42 -0400
Subject: [PATCH 2/6] Updates the TypeScript configuration to be strict like
 /frontend.

---
 src/App.tsx                                   |  2 +-
 src/UIComponents/AddFeatureButton.tsx         |  2 +-
 src/UIComponents/ColumnDataTypeDropdown.tsx   |  2 +-
 src/UIComponents/ColumnDetailsCategorical.tsx |  5 +-
 src/UIComponents/ColumnDetailsNumerical.tsx   |  5 +-
 src/UIComponents/ColumnInspector.tsx          |  3 +-
 src/UIComponents/CrossTab.tsx                 | 10 ++--
 src/UIComponents/DataCard.tsx                 |  6 +--
 src/UIComponents/DataDisplay.tsx              |  4 +-
 src/UIComponents/DataTable.tsx                | 46 +++++++++----------
 src/UIComponents/GenerateResults.tsx          | 18 ++++----
 src/UIComponents/ModelCard.tsx                | 20 ++++----
 src/UIComponents/Predict.tsx                  |  4 +-
 src/UIComponents/Results.tsx                  |  8 ++--
 src/UIComponents/ResultsDetails.tsx           |  8 ++--
 src/UIComponents/ResultsTable.tsx             | 10 ++--
 src/UIComponents/ResultsToggle.tsx            |  4 +-
 src/UIComponents/SaveModel.tsx                |  4 +-
 src/UIComponents/ScatterPlot.tsx              |  6 +--
 src/UIComponents/SelectDataset.tsx            | 34 +++++++-------
 src/UIComponents/SelectLabelButton.tsx        |  2 +-
 src/UIComponents/Statement.tsx                | 16 +++----
 src/UIComponents/TrainModel.tsx               |  8 ++--
 src/constants.ts                              |  2 +-
 src/datasetManifest.ts                        |  2 +-
 src/declarations.d.ts                         |  7 ++-
 src/helpers/accuracy.ts                       | 10 ++--
 src/helpers/columnDetails.ts                  | 12 ++---
 src/helpers/datasetDetails.ts                 | 15 +++---
 src/helpers/metrics.ts                        |  6 +--
 src/helpers/navigationValidation.ts           |  2 +-
 src/index.tsx                                 |  7 ++-
 src/redux.ts                                  |  8 ++--
 src/selectors.ts                              |  6 ++-
 src/selectors/currentColumnSelectors.ts       | 42 ++++++++---------
 src/selectors/visualizationSelectors.ts       | 20 ++++----
 tsconfig.json                                 | 23 ++++++----
 37 files changed, 203 insertions(+), 186 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8ebcb132..c23592a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,7 +64,7 @@ function PanelButtons({
   };
 
   const localizedSaveMessage = (saveStatus: string): string => {
-    return I18n.t(`saveStatus_${saveStatus}`);
+    return I18n.t(`saveStatus_${saveStatus}`) ?? "";
   };
 
   const saveResponseDataMessage = (saveResponseData: any): string | undefined => {
diff --git a/src/UIComponents/AddFeatureButton.tsx b/src/UIComponents/AddFeatureButton.tsx
index ffd09810..30b599f4 100644
--- a/src/UIComponents/AddFeatureButton.tsx
+++ b/src/UIComponents/AddFeatureButton.tsx
@@ -19,7 +19,7 @@ function AddFeatureButton({ column, addSelectedFeature }: AddFeatureButtonProps)
     <button
       id="uitest-add-feature-button"
       type="button"
-      onClick={event => addFeature(event, column)}
+      onClick={event => addFeature(event, column!)}
       style={styles.selectFeaturesButton}
     >
       {I18n.t("addFeatureButton")}
diff --git a/src/UIComponents/ColumnDataTypeDropdown.tsx b/src/UIComponents/ColumnDataTypeDropdown.tsx
index ad591df3..f2a488f7 100644
--- a/src/UIComponents/ColumnDataTypeDropdown.tsx
+++ b/src/UIComponents/ColumnDataTypeDropdown.tsx
@@ -20,7 +20,7 @@ function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataTyp
     <div>
       <select
         onChange={event =>
-          handleChangeDataType(event, columnId)
+          handleChangeDataType(event, columnId!)
         }
         value={currentDataType}
       >
diff --git a/src/UIComponents/ColumnDetailsCategorical.tsx b/src/UIComponents/ColumnDetailsCategorical.tsx
index 88b3fc4e..df14381a 100644
--- a/src/UIComponents/ColumnDetailsCategorical.tsx
+++ b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -72,7 +72,8 @@ function ColumnDetailsCategorical({ columnDetails }: ColumnDetailsCategoricalPro
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     columnDetails: getCategoricalColumnDetails(state)
-  })
+  }),
+  {}
 )(ColumnDetailsCategorical);
diff --git a/src/UIComponents/ColumnDetailsNumerical.tsx b/src/UIComponents/ColumnDetailsNumerical.tsx
index f6c9d855..047f9201 100644
--- a/src/UIComponents/ColumnDetailsNumerical.tsx
+++ b/src/UIComponents/ColumnDetailsNumerical.tsx
@@ -32,7 +32,8 @@ function ColumnDetailsNumerical({ columnDetails }: ColumnDetailsNumericalProps)
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     columnDetails: getNumericalColumnDetails(state)
-  })
+  }),
+  {}
 )(ColumnDetailsNumerical);
diff --git a/src/UIComponents/ColumnInspector.tsx b/src/UIComponents/ColumnInspector.tsx
index de9e54b5..81011ac3 100644
--- a/src/UIComponents/ColumnInspector.tsx
+++ b/src/UIComponents/ColumnInspector.tsx
@@ -95,5 +95,6 @@ export default connect(
     currentColumnDetails: getCurrentColumnDetails(state),
     currentPanel: state.currentPanel,
     datasetId: state.metadata && state.metadata.name
-  })
+  }),
+  {}
 )(ColumnInspector);
diff --git a/src/UIComponents/CrossTab.tsx b/src/UIComponents/CrossTab.tsx
index 8c7f24e8..1573fa5e 100644
--- a/src/UIComponents/CrossTab.tsx
+++ b/src/UIComponents/CrossTab.tsx
@@ -16,9 +16,9 @@ interface CrossTabProps {
 }
 
 function CrossTab({ crossTabData }: CrossTabProps) {
-  const getCellStyle = useCallback((percent) => {
+  const getCellStyle = useCallback((percent: number) => {
     return {
-      ...styles["crossTabCell" + Math.round(percent / 20)],
+      ...(styles as Record<string, any>)["crossTabCell" + Math.round(percent / 20)],
       ...styles.crossTabTableCell
     };
   }, []);
@@ -112,10 +112,10 @@ function CrossTab({ crossTabData }: CrossTabProps) {
                             <td
                               key={labelIndex}
                               style={getCellStyle(
-                                result.labelPercents[uniqueLabelValue]
+                                result.labelPercents?.[uniqueLabelValue] ?? 0
                               )}
                             >
-                              {result.labelPercents[uniqueLabelValue] || 0}%
+                              {result.labelPercents?.[uniqueLabelValue] || 0}%
                             </td>
                           );
                         }
@@ -132,6 +132,6 @@ function CrossTab({ crossTabData }: CrossTabProps) {
   );
 }
 
-export default connect(state => ({
+export default connect((state: any) => ({
   crossTabData: getCrossTabData(state)
 }))(CrossTab);
diff --git a/src/UIComponents/DataCard.tsx b/src/UIComponents/DataCard.tsx
index 09092293..cebc4adf 100644
--- a/src/UIComponents/DataCard.tsx
+++ b/src/UIComponents/DataCard.tsx
@@ -17,14 +17,14 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
   const card = metadata && metadata.card;
 
   const dataLengthLimit = 20000;
-  if (dataLength > dataLengthLimit) {
+  if (dataLength! > dataLengthLimit) {
     window.alert(
       I18n.t("dataCardWarningLargeDataset", {"rowCount": dataLengthLimit})
     );
   }
 
   const removedRowsMsg =
-    removedRowsCount > 0
+    removedRowsCount! > 0
       ? I18n.t("dataCardRemovedRows", {"rowCount": removedRowsCount})
       : null;
 
@@ -78,7 +78,7 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
               )}
             </div>
           )}
-          {!card && dataLength > 0 && (
+          {!card && dataLength! > 0 && (
             <div>
               <br />
               <div style={styles.cardRow}>
diff --git a/src/UIComponents/DataDisplay.tsx b/src/UIComponents/DataDisplay.tsx
index 2e2dc5e1..5f7ce06f 100644
--- a/src/UIComponents/DataDisplay.tsx
+++ b/src/UIComponents/DataDisplay.tsx
@@ -10,11 +10,11 @@ interface DataDisplayProps {
 }
 
 function DataDisplay({ data }: DataDisplayProps) {
-  if (data.length === 0) {
+  if (data!.length === 0) {
     return null;
   }
 
-  const rowCount = data.length;
+  const rowCount = data!.length;
   const rowLimit = 100;
   const rowCountMessage = (rowCount <= rowLimit) ?
     I18n.t("dataDisplayRowCount", {"rowCount": rowCount}) :
diff --git a/src/UIComponents/DataTable.tsx b/src/UIComponents/DataTable.tsx
index 4d59cf93..5be0a8c9 100644
--- a/src/UIComponents/DataTable.tsx
+++ b/src/UIComponents/DataTable.tsx
@@ -6,7 +6,7 @@ import { getLocalizedColumnName } from "../helpers/columnDetails";
 
 interface DataTableProps {
   currentPanel: string;
-  data: any[];
+  data: any[] | null;
   datasetId: string;
   labelColumn: string;
   selectedFeatures: string[];
@@ -14,11 +14,11 @@ interface DataTableProps {
   setHighlightColumn: (column: string | undefined) => void;
   currentColumn: string;
   highlightColumn: string;
-  reducedColumns: boolean;
-  singleRow: number | undefined;
-  startingRow: number | undefined;
-  noLabel: boolean;
-  hideLabel: boolean;
+  reducedColumns?: boolean;
+  singleRow?: number | undefined;
+  startingRow?: number | undefined;
+  noLabel?: boolean;
+  hideLabel?: boolean;
   useResultsData?: boolean;
 }
 
@@ -38,7 +38,7 @@ function DataTable({
   noLabel,
   hideLabel
 }: DataTableProps) {
-  const getColumnHeaderStyle = key => {
+  const getColumnHeaderStyle = (key: string) => {
     let style;
 
     if (key === labelColumn) {
@@ -53,7 +53,7 @@ function DataTable({
     return { ...styles.dataDisplayHeader, ...pointerStyle, ...style };
   };
 
-  const getColumnCellStyle = key => {
+  const getColumnCellStyle = (key: string) => {
     let style;
 
     if (hideLabel && labelColumn === key) {
@@ -77,7 +77,7 @@ function DataTable({
 
   const getColumns = () => {
     if (reducedColumns) {
-      return Object.keys(data[0])
+      return Object.keys(data![0])
         .filter(key => {
           return (
             (!noLabel && labelColumn === key) ||
@@ -89,34 +89,34 @@ function DataTable({
         });
     }
 
-    return Object.keys(data[0]);
+    return Object.keys(data![0]);
   };
 
   const getRows = () => {
     if (singleRow !== undefined) {
       return [
-        data[
-          Math.min(singleRow, data.length - 1)
+        data![
+          Math.min(singleRow, data!.length - 1)
         ]
       ];
     } else {
-      return data.slice(0, 100);
+      return data!.slice(0, 100);
     }
   };
 
-  const handleSetCurrentColumn = columnId => {
+  const handleSetCurrentColumn = (columnId: string) => {
     if (!reducedColumns) {
       setCurrentColumnProp(columnId);
     }
   };
 
-  const handleSetHighlightColumn = columnId => {
+  const handleSetHighlightColumn = (columnId: string | undefined) => {
     if (!reducedColumns) {
       setHighlightColumnProp(columnId);
     }
   };
 
-  if (data.length === 0) {
+  if (!data || data.length === 0) {
     return null;
   }
 
@@ -173,8 +173,8 @@ function DataTable({
 }
 
 export default connect(
-  (state, props) => ({
-    data: getTableData(state, props.useResultsData),
+  (state: any, props: any) => ({
+    data: getTableData(state, props.useResultsData) as any[],
     datasetId: state.metadata && state.metadata.name,
     labelColumn: state.labelColumn,
     selectedFeatures: state.selectedFeatures,
@@ -182,12 +182,12 @@ export default connect(
     highlightColumn: state.highlightColumn,
     currentPanel: state.currentPanel
   }),
-  dispatch => ({
-    setCurrentColumn(column) {
-      dispatch(setCurrentColumn(column));
+  (dispatch: any) => ({
+    setCurrentColumn(column: string | undefined) {
+      dispatch(setCurrentColumn(column as any));
     },
-    setHighlightColumn(column) {
-      dispatch(setHighlightColumn(column));
+    setHighlightColumn(column: string | undefined) {
+      dispatch(setHighlightColumn(column as any));
     }
   })
 )(DataTable);
diff --git a/src/UIComponents/GenerateResults.tsx b/src/UIComponents/GenerateResults.tsx
index 156b7ed0..740f2916 100644
--- a/src/UIComponents/GenerateResults.tsx
+++ b/src/UIComponents/GenerateResults.tsx
@@ -15,7 +15,7 @@ const framesPerCycle = 80;
 const maxNumItems = 7;
 
 interface GenerateResultsProps {
-  data: any[];
+  data: any[] | null;
   readyToTrain: boolean;
   labelColumn: string;
   selectedFeatures: string[];
@@ -34,13 +34,15 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
   }, [instructionsOverlayActive]);
 
   const getNumItems = useCallback(() => {
-    return Math.min(maxNumItems, data.length);
-  }, [data.length]);
+    return Math.min(maxNumItems, data!.length);
+  }, [data]);
+
+  const dataLength = data?.length;
 
   useEffect(() => {
     const animationTimer = setInterval(() => {
       const currentFrame = frameRef.current;
-      const numItems = Math.min(maxNumItems, data.length);
+      const numItems = Math.min(maxNumItems, data!.length);
       const animationStep = Math.floor(currentFrame / framesPerCycle);
 
       if (animationStep >= numItems) {
@@ -56,10 +58,10 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
     return () => {
       clearInterval(animationTimer);
     };
-  }, [data.length]);
+  }, [data, dataLength]);
 
   const getShowItemsFadingOut = () => {
-    return data.length > maxNumItems;
+    return data!.length > maxNumItems;
   };
 
   const getAnimationSubstep = () => {
@@ -199,8 +201,8 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
   );
 }
 
-export default connect(state => ({
-  data: getTableData(state, true),
+export default connect((state: any) => ({
+  data: getTableData(state, true) as any[],
   readyToTrain: readyToTrain(state),
   labelColumn: state.labelColumn,
   selectedFeatures: state.selectedFeatures,
diff --git a/src/UIComponents/ModelCard.tsx b/src/UIComponents/ModelCard.tsx
index d32eefe1..52178c62 100644
--- a/src/UIComponents/ModelCard.tsx
+++ b/src/UIComponents/ModelCard.tsx
@@ -21,9 +21,9 @@ interface ModelCardProps {
 
 function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }: ModelCardProps) {
   console.log("trainedModelDetails", trainedModelDetails)
-  const localizedLabel = getLocalizedColumnName(datasetDetails.name, label.id);
+  const localizedLabel = getLocalizedColumnName(datasetDetails.name, label!.id!);
   const localizedFeatures =
-    selectedFeatures.map(feature => getLocalizedColumnName(datasetDetails.name, feature));
+    selectedFeatures!.map(feature => getLocalizedColumnName(datasetDetails.name, feature));
   const predictionStatement = I18n.t("predictionStatement",
     {"output": localizedLabel, "inputs": localizedFeatures.join(", ")})
   return (
@@ -98,21 +98,21 @@ function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, labe
           <h5 style={styles.modelCardHeading}>{I18n.t("modelCardLabel")}</h5>
           <div style={styles.modelCardContent}>
             <p style={styles.bold}>{localizedLabel}</p>
-            {label.description && <p>{label.description}</p>}
-            {!label.values && (
+            {label!.description && <p>{label!.description}</p>}
+            {!label!.values && (
               <p style={styles.modelCardDetails}>
                 {I18n.t("modelCardPossibleValues")}
                 <br />
-                {I18n.t("modelCardPossibleValuesMinimum")} {label.min}
+                {I18n.t("modelCardPossibleValuesMinimum")} {label!.min}
                 <br />
-                {I18n.t("modelCardPossibleValuesMaximum")} {label.max}
+                {I18n.t("modelCardPossibleValuesMaximum")} {label!.max}
               </p>
             )}
-            {label.values && (
+            {label!.values && (
               <p style={styles.modelCardDetails}>
                 {I18n.t("modelCardPossibleValues")}
                 <br />
-                {label.values.join(" ")}
+                {label!.values.join(" ")}
               </p>
             )}
           </div>
@@ -120,8 +120,8 @@ function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, labe
         <div style={styles.modelCardSubpanel}>
           <h5 style={styles.modelCardHeading}>{I18n.t("modelCardFeatures")}</h5>
           <div style={styles.modelCardContent}>
-            {features.length > 0 &&
-              features.map((feature, index) => {
+            {features!.length > 0 &&
+              features!.map((feature, index) => {
                 return (
                   <div key={index}>
                     <p style={styles.bold}>{feature.id}</p>
diff --git a/src/UIComponents/Predict.tsx b/src/UIComponents/Predict.tsx
index 236db256..096b1d27 100644
--- a/src/UIComponents/Predict.tsx
+++ b/src/UIComponents/Predict.tsx
@@ -24,7 +24,7 @@ interface PredictProps {
   uniqueOptionsByColumn: Record<string, string[]>;
   testData: Record<string, any>;
   setTestData: (feature: string, value: any) => void;
-  predictedLabel: string | number;
+  predictedLabel: string | number | undefined;
   getPredictAvailable: boolean;
   extremaByColumn: Record<string, { min: number; max: number }>;
   datasetId: string;
@@ -132,7 +132,7 @@ function Predict({
           <div style={styles.predictBotRight}>
             <div style={styles.statement}>{I18n.t("predictAIBotPredicts")}</div>
             <div>{getLocalizedColumnName(datasetId, labelColumn)}</div>
-            <div>{getLocalizedColumnName(datasetId, predictedLabel)}</div>
+            <div>{getLocalizedColumnName(datasetId, String(predictedLabel))}</div>
           </div>
         </div>
       )}
diff --git a/src/UIComponents/Results.tsx b/src/UIComponents/Results.tsx
index 8e40f4b7..fc6eff32 100644
--- a/src/UIComponents/Results.tsx
+++ b/src/UIComponents/Results.tsx
@@ -90,15 +90,15 @@ function Results({ historicResults, showResultsDetails, setShowResultsDetails, s
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     historicResults: state.historicResults,
     showResultsDetails: state.showResultsDetails
   }),
-  dispatch => ({
-    setResultsPhase(phase) {
+  (dispatch: any) => ({
+    setResultsPhase(phase: number) {
       dispatch(setResultsPhase(phase));
     },
-    setShowResultsDetails(show) {
+    setShowResultsDetails(show: boolean) {
       dispatch(setShowResultsDetails(show));
     }
   })
diff --git a/src/UIComponents/ResultsDetails.tsx b/src/UIComponents/ResultsDetails.tsx
index 12ac28de..6b40b7df 100644
--- a/src/UIComponents/ResultsDetails.tsx
+++ b/src/UIComponents/ResultsDetails.tsx
@@ -45,7 +45,7 @@ function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorr
         >
           <FontAwesomeIcon icon={faTimes} />
         </div>
-        {!isNaN(percentCorrect) && <ResultsToggle />}
+        {!isNaN(Number(percentCorrect)) && <ResultsToggle />}
         <ResultsTable results={results} />
       </div>
     </div>
@@ -53,7 +53,7 @@ function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorr
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     resultsTab: state.resultsTab,
     selectedFeatures: state.selectedFeatures,
     labelColumn: state.labelColumn,
@@ -61,8 +61,8 @@ export default connect(
     correctResults: getCorrectResults(state),
     incorrectResults: getIncorrectResults(state)
   }),
-  dispatch => ({
-    setShowResultsDetails(show) {
+  (dispatch: any) => ({
+    setShowResultsDetails(show: boolean) {
       dispatch(setShowResultsDetails(show));
     }
   })
diff --git a/src/UIComponents/ResultsTable.tsx b/src/UIComponents/ResultsTable.tsx
index d24aaf47..9ccda8e5 100644
--- a/src/UIComponents/ResultsTable.tsx
+++ b/src/UIComponents/ResultsTable.tsx
@@ -18,7 +18,7 @@ interface ResultsTableProps {
 }
 
 function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }: ResultsTableProps) {
-  const getRowCellStyle = useCallback((index) => {
+  const getRowCellStyle = useCallback((index: number) => {
     return {
       ...styles.tableCell,
       ...(index === resultsHighlightRow &&
@@ -136,16 +136,16 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     selectedFeatures: state.selectedFeatures,
     labelColumn: state.labelColumn,
     isRegression: isRegression(state),
     resultsHighlightRow: state.resultsHighlightRow,
     datasetId: state.metadata && state.metadata.name
   }),
-  dispatch => ({
-    setResultsHighlightRow(column) {
-      dispatch(setResultsHighlightRow(column));
+  (dispatch: any) => ({
+    setResultsHighlightRow(column: number | undefined) {
+      dispatch(setResultsHighlightRow(column as any));
     }
   })
 )(ResultsTable);
diff --git a/src/UIComponents/ResultsToggle.tsx b/src/UIComponents/ResultsToggle.tsx
index 117efe2a..5f336c0b 100644
--- a/src/UIComponents/ResultsToggle.tsx
+++ b/src/UIComponents/ResultsToggle.tsx
@@ -44,8 +44,8 @@ function ResultsToggle({ resultsTab, setResultsTab }: ResultsToggleProps) {
           <div
             key={tab.key}
             style={getTogglePillStyle(tab.key)}
-            onClick={() => setResultsTab(tab.key)}
-            onKeyDown={() => setResultsTab(tab.key)}
+            onClick={() => setResultsTab!(tab.key)}
+            onKeyDown={() => setResultsTab!(tab.key)}
             role="button"
             tabIndex={0}
           >
diff --git a/src/UIComponents/SaveModel.tsx b/src/UIComponents/SaveModel.tsx
index 733f7a7d..3292ddfa 100644
--- a/src/UIComponents/SaveModel.tsx
+++ b/src/UIComponents/SaveModel.tsx
@@ -18,8 +18,8 @@ interface SaveModelProps {
   setTrainedModelDetail: (field: string, value: string, isColumn: boolean) => void;
   trainedModelDetails: any;
   labelColumn: string;
-  columnDescriptions: { id: string; description: string }[];
-  dataDescription: string;
+  columnDescriptions: { id: string; description: string | null }[];
+  dataDescription: string | undefined;
   isUserUploadedDataset: boolean;
   datasetId: string;
 }
diff --git a/src/UIComponents/ScatterPlot.tsx b/src/UIComponents/ScatterPlot.tsx
index 88a1fc97..657cd736 100644
--- a/src/UIComponents/ScatterPlot.tsx
+++ b/src/UIComponents/ScatterPlot.tsx
@@ -19,7 +19,7 @@ const scatterDataBase = {
       pointHoverBackgroundColor: "#59cad3",
       pointHoverBorderColor: "white",
       pointHoverBorderWidth: 2,
-      data: []
+      data: [] as { x: number; y: number }[]
     }
   ]
 };
@@ -94,6 +94,6 @@ function ScatterPlot({ scatterPlotData }: ScatterPlotProps) {
   );
 }
 
-export default connect(state => ({
+export default connect((state: any) => ({
   scatterPlotData: getScatterPlotData(state)
-}))(ScatterPlot);
+}), {})(ScatterPlot);
diff --git a/src/UIComponents/SelectDataset.tsx b/src/UIComponents/SelectDataset.tsx
index adf77664..891003cb 100644
--- a/src/UIComponents/SelectDataset.tsx
+++ b/src/UIComponents/SelectDataset.tsx
@@ -43,18 +43,18 @@ function SelectDataset({
 }: SelectDatasetProps) {
   const [, setDownload] = useState(false);
 
-  const handleDatasetClick = id => {
-    const assetPath = global.__ml_playground_asset_public_path__;
+  const handleDatasetClick = (id: string) => {
+    const assetPath = (global as any).__ml_playground_asset_public_path__;
     const dataset = getDatasets().find(dataset => dataset.id === id);
 
     // Don't process the click if we're just clicking the current
     // dataset again.
-    if (dataset.name !== name) {
-      const csvPath = assetPath + dataset.path;
-      const jsonPath = assetPath + dataset.metadataPath;
+    if (dataset!.name !== name) {
+      const csvPath = assetPath + dataset!.path;
+      const jsonPath = assetPath + dataset!.metadataPath;
 
       resetState();
-      setSelectedName(dataset.name);
+      setSelectedName(dataset!.name);
       setSelectedCSV(csvPath);
       setSelectedJSON(jsonPath);
       setDownload(true);
@@ -65,7 +65,7 @@ function SelectDataset({
     }
   };
 
-  const handleUploadSelect = event => {
+  const handleUploadSelect = (event: any) => {
     resetState();
     setSelectedCSV(event.target.files[0]);
     setDownload(false);
@@ -88,7 +88,7 @@ function SelectDataset({
 
   const datasets = getAvailableDatasets(specifiedDatasets);
 
-  const assetPath = global.__ml_playground_asset_public_path__;
+  const assetPath = (global as any).__ml_playground_asset_public_path__;
 
   return (
     <div id="select-dataset" style={styles.panel}>
@@ -141,7 +141,7 @@ function SelectDataset({
               type="file"
               accept=".csv,text/csv,application/vnd.ms-excel"
               name="file"
-              placeholder={null}
+              placeholder={undefined}
               onChange={handleUploadSelect}
               style={styles.csvInput}
               value=""
@@ -157,7 +157,7 @@ function SelectDataset({
 }
 
 export default connect(
-  state => ({
+  (state: any) => ({
     csvfile: state.csvfile,
     jsonfile: state.jsonfile,
     specifiedDatasets: getSpecifiedDatasets(state),
@@ -165,21 +165,21 @@ export default connect(
     highlightDataset: state.highlightDataset,
     invalidData: state.invalidData
   }),
-  dispatch => ({
+  (dispatch: any) => ({
     resetState() {
       dispatch(resetState());
     },
-    setSelectedName(name) {
+    setSelectedName(name: string) {
       dispatch(setSelectedName(name));
     },
-    setSelectedCSV(csvfilePath) {
-      dispatch(setSelectedCSV(csvfilePath));
+    setSelectedCSV(csvfilePath: string | File) {
+      dispatch(setSelectedCSV(csvfilePath as any));
     },
-    setSelectedJSON(jsonfilePath) {
+    setSelectedJSON(jsonfilePath: string) {
       dispatch(setSelectedJSON(jsonfilePath));
     },
-    setHighlightDataset(id) {
-      dispatch(setHighlightDataset(id));
+    setHighlightDataset(id: string | undefined) {
+      dispatch(setHighlightDataset(id as any));
     }
   })
 )(SelectDataset);
diff --git a/src/UIComponents/SelectLabelButton.tsx b/src/UIComponents/SelectLabelButton.tsx
index 9977e8c6..2d490ce4 100644
--- a/src/UIComponents/SelectLabelButton.tsx
+++ b/src/UIComponents/SelectLabelButton.tsx
@@ -19,7 +19,7 @@ function SelectLabelButton({ column, setLabelColumn }: SelectLabelButtonProps) {
     <button
       id="uitest-select-label-button"
       type="button"
-      onClick={event => setPredictColumn(event, column)}
+      onClick={event => setPredictColumn(event, column!)}
       style={styles.selectLabelButton}
     >
       {I18n.t("selectLabelButton")}
diff --git a/src/UIComponents/Statement.tsx b/src/UIComponents/Statement.tsx
index 598f4f70..388850b2 100644
--- a/src/UIComponents/Statement.tsx
+++ b/src/UIComponents/Statement.tsx
@@ -31,15 +31,15 @@ function Statement({
   datasetId
 }: StatementProps) {
   const removeLabel = () => {
-    setLabelColumn(null);
+    setLabelColumn!(null);
   };
 
   const removeFeature = (id: string) => {
-    removeSelectedFeature(id);
+    removeSelectedFeature!(id);
   };
 
   const labelHTML = (label: string, currentPanel: string) => {
-    const localizedLabel = getLocalizedColumnName(datasetId, label);
+    const localizedLabel = getLocalizedColumnName(datasetId!, label);
     return (
       <div style={styles.statementLabel}>
         {localizedLabel || "____"}
@@ -66,7 +66,7 @@ function Statement({
     return (
       <span>
         {selectedFeatures.map((selectedFeature, index) => {
-          const localizedName = getLocalizedColumnName(datasetId, selectedFeature);
+          const localizedName = getLocalizedColumnName(datasetId!, selectedFeature);
           return (
             <span key={index}>
               <div style={styles.statementFeature}>
@@ -117,13 +117,13 @@ function Statement({
   // "Predict __CDO_OUTPUT__ based on __CDO_INPUTS__" becomes
   // ["Predict ", "__CDO_OUTPUT__", " based on ", "__CDO_INPUTS__"]
   const regex = new RegExp(`(${OUTPUT_KEY}|${INPUTS_KEY})`);
-  const predictionStatementParts = predictionStatement.split(regex).filter((part: string) => part);
+  const predictionStatementParts = predictionStatement!.split(regex).filter((part: string) => part);
   // Swap the OUTPUT and INPUTS placeholders with React components.
   const predictionStatementComponents = predictionStatementParts.map((part: string, index: number) => {
     if (part === OUTPUT_KEY) {
-      return labelHTML(labelColumn, currentPanel);
+      return labelHTML(labelColumn!, currentPanel!);
     } else if (part === INPUTS_KEY) {
-      return selectedFeaturesHTML(selectedFeatures, currentPanel);
+      return selectedFeaturesHTML(selectedFeatures!, currentPanel!);
     } else {
       return part;
     }
@@ -155,7 +155,7 @@ export default connect(
   }),
   dispatch => ({
     setLabelColumn(labelColumn: string | null) {
-      dispatch(setLabelColumn(labelColumn));
+      dispatch(setLabelColumn(labelColumn as string));
     },
     removeSelectedFeature(labelColumn: string) {
       dispatch(removeSelectedFeature(labelColumn));
diff --git a/src/UIComponents/TrainModel.tsx b/src/UIComponents/TrainModel.tsx
index 456447a1..5f7da649 100644
--- a/src/UIComponents/TrainModel.tsx
+++ b/src/UIComponents/TrainModel.tsx
@@ -16,7 +16,7 @@ const framesPerCycle = 80;
 const maxNumItems = 7;
 
 interface TrainModelProps {
-  data: any[];
+  data: any[] | null;
   readyToTrain: boolean;
   labelColumn: string;
   selectedFeatures: string[];
@@ -50,7 +50,7 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
       }
 
       const animationStep = Math.floor(currentFrame / framesPerCycle);
-      const numItems = Math.min(maxNumItems, data.length);
+      const numItems = Math.min(maxNumItems, data!.length);
 
       if (animationStep >= numItems) {
         headOpenRef.current = false;
@@ -77,11 +77,11 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
   };
 
   const getNumItems = (): number => {
-    return Math.min(maxNumItems, data.length);
+    return Math.min(maxNumItems, data!.length);
   };
 
   const getShowItemsFadingOut = (): boolean => {
-    return data.length > maxNumItems;
+    return data!.length > maxNumItems;
   };
 
   const getAnimationStep = (): number => {
diff --git a/src/constants.ts b/src/constants.ts
index d0cc9d75..35d23877 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -962,4 +962,4 @@ export const styles = {
   navigationButtonsContainer: {
     position: "relative"
   }
-};
+} as const;
diff --git a/src/datasetManifest.ts b/src/datasetManifest.ts
index e5150dc6..57e7fe5c 100644
--- a/src/datasetManifest.ts
+++ b/src/datasetManifest.ts
@@ -53,5 +53,5 @@ export function localizeDatasets(datasets: Dataset[]): Dataset[] {
  */
 function getDatasetName(dataset: Dataset): string {
   const fallback = dataset.name;
-  return I18n.t("name", { scope: ["datasets", dataset.id], default: fallback})
+  return I18n.t("name", { scope: ["datasets", dataset.id], default: fallback}) ?? fallback
 }
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
index 1af66e6e..ecb088af 100644
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -29,9 +29,14 @@ declare module "react-papaparse" {
   export const CSVReader: any;
 }
 
+declare module "query-string" {
+  const queryString: any;
+  export default queryString;
+}
+
 declare module "messageformat" {
   export default class MessageFormat {
     constructor(locale: string);
-    compile(message: string): (args?: Record<string, any>) => string;
+    compile(message: string | Record<string, any>): Record<string, any>;
   }
 }
diff --git a/src/helpers/accuracy.ts b/src/helpers/accuracy.ts
index 7d91a0d3..02e47397 100644
--- a/src/helpers/accuracy.ts
+++ b/src/helpers/accuracy.ts
@@ -31,11 +31,11 @@ export function getResultsDataInDataTableForm(state: any): Record<string, any>[]
   // items.  Increase the value here if they do.
   const numItems = Math.min(10, resultsByGrades.examples.length);
 
-  const results = [];
+  const results: Record<string, any>[] = [];
   for (let i = 0; i < numItems; i++) {
     results[i] = {};
 
-    state.selectedFeatures.map((feature, index) => {
+    state.selectedFeatures.map((feature: string, index: number) => {
       results[i][feature] = resultsByGrades.examples[i][index];
     })
 
@@ -60,13 +60,13 @@ export function getIncorrectResults(state: any): any {
 export function getResultsByGrade(state: any, grade: string): any {
   const results: any = {};
   const accuracyGrades = getAccuracyGrades(state);
-  const examples = getConvertedAccuracyCheckExamples(state).filter((example, index) => {
+  const examples = getConvertedAccuracyCheckExamples(state).filter((example: any, index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
-  const labels = getConvertedLabels(state, state.accuracyCheckLabels).filter((example, index) => {
+  const labels = getConvertedLabels(state, state.accuracyCheckLabels).filter((example: any, index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
-  const predictedLabels = getConvertedLabels(state, state.accuracyCheckPredictedLabels).filter((example, index) => {
+  const predictedLabels = getConvertedLabels(state, state.accuracyCheckPredictedLabels).filter((example: any, index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
   results.examples = examples;
diff --git a/src/helpers/columnDetails.ts b/src/helpers/columnDetails.ts
index f65f1c21..1c5157c7 100644
--- a/src/helpers/columnDetails.ts
+++ b/src/helpers/columnDetails.ts
@@ -44,7 +44,7 @@ export function isColumnReadOnly(metadata: any, column: string): boolean {
     column &&
     metadata &&
     metadata.fields &&
-    metadata.fields.find(field => {
+    metadata.fields.find((field: any) => {
       return field.id === column;
     }).type;
   return !!metadataColumnType;
@@ -74,7 +74,7 @@ export function containsOnlyNumbers(data: Record<string, any>[], column: string)
 export function getColumnDescription(columnId: string, metadata: any, trainedModelDetails: any): string | null {
   // Use metadata if available.
   if (columnId && metadata && metadata.fields) {
-    const field = metadata.fields.find(field => {
+    const field = metadata.fields.find((field: any) => {
       return field.id === columnId;
     });
     return getLocalizedColumnDescription(metadata.name, columnId, field.description);
@@ -82,7 +82,7 @@ export function getColumnDescription(columnId: string, metadata: any, trainedMod
 
   // Try using a user-entered column description if available.
   if (trainedModelDetails && trainedModelDetails.columns) {
-    const matchedColumn = trainedModelDetails.columns.find(column => {
+    const matchedColumn = trainedModelDetails.columns.find((column: any) => {
       return column.id === columnId;
     });
     if (matchedColumn) {
@@ -105,10 +105,10 @@ export function getColumnDescription(columnId: string, metadata: any, trainedMod
   }
   */
 export function buildOptionNumberKey(state: any, feature: string): Record<string, number> {
-  const optionsMappedToNumbers = {};
+  const optionsMappedToNumbers: Record<string, number> = {};
   const uniqueOptions = getUniqueOptions(state.data, feature);
   uniqueOptions.forEach(
-    option => (optionsMappedToNumbers[option] = uniqueOptions.indexOf(option))
+    (option: any) => (optionsMappedToNumbers[option] = uniqueOptions.indexOf(option))
   );
   return optionsMappedToNumbers;
 }
@@ -141,5 +141,5 @@ function getLocalizedColumnAttr(datasetId: string, columnId: string, attribute:
       scope: ["datasets", datasetId, "fields", columnId],
       default: fallback
     }
-  );
+  ) ?? fallback;
 }
diff --git a/src/helpers/datasetDetails.ts b/src/helpers/datasetDetails.ts
index 672ef7fe..36f3b065 100644
--- a/src/helpers/datasetDetails.ts
+++ b/src/helpers/datasetDetails.ts
@@ -4,13 +4,14 @@ import { DatasetDetails } from "../types";
 /* Helper functions for getting information about the selected dataset. */
 
 export function getDatasetDetails(state: any): DatasetDetails {
-  const datasetDetails = {};
-  datasetDetails.name = state.metadata && state.metadata.name;
-  datasetDetails.description = getDatasetDescription(state);
-  datasetDetails.numRows = state.data.length;
-  datasetDetails.isUserUploaded = isUserUploadedDataset(state);
-  datasetDetails.potentialUses = getPotentialUses(state);
-  datasetDetails.potentialMisuses = getPotentialMisuses(state);
+  const datasetDetails: DatasetDetails = {
+    name: state.metadata && state.metadata.name,
+    description: getDatasetDescription(state),
+    numRows: state.data.length,
+    isUserUploaded: isUserUploadedDataset(state),
+    potentialUses: getPotentialUses(state),
+    potentialMisuses: getPotentialMisuses(state),
+  };
   return datasetDetails;
 }
 
diff --git a/src/helpers/metrics.ts b/src/helpers/metrics.ts
index f266c29d..7571ae68 100644
--- a/src/helpers/metrics.ts
+++ b/src/helpers/metrics.ts
@@ -19,11 +19,11 @@ export function logFirehoseMetric(action: string, state: any): any {
 }
 
 export function reportPanelView(panel: string): void {
-  if (!window.ga || !panel) {
+  if (!(window as any).ga || !panel) {
     return;
   }
   // Record each panel as a different page view in Google Analytics.
   const syntheticPagePath = window.location.pathname + '/' + panel;
-  window.ga('set', 'page', syntheticPagePath);
-  window.ga('send', 'pageview');
+  (window as any).ga('set', 'page', syntheticPagePath);
+  (window as any).ga('send', 'pageview');
 }
diff --git a/src/helpers/navigationValidation.ts b/src/helpers/navigationValidation.ts
index 85d17661..22b989a6 100644
--- a/src/helpers/navigationValidation.ts
+++ b/src/helpers/navigationValidation.ts
@@ -156,7 +156,7 @@ function isAccuracyAcceptable(state: any): boolean {
 // Given the current panel, return the appropriate previous & next buttons.
 interface NavButton {
   panel: string;
-  text: string;
+  text: string | undefined;
   enabled?: boolean;
 }
 
diff --git a/src/index.tsx b/src/index.tsx
index 1f70de65..2f8b255f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -21,8 +21,8 @@ import I18n from "./i18n";
 
 export const store = createStore(rootReducer);
 
-let saveTrainedModel: ((dataToSave: any, callback: (response: any) => void) => void) | null = null;
-let onContinue: (() => void) | null = null;
+let saveTrainedModel: ((dataToSave: any, callback: (response: any) => void) => void) | null | undefined = null;
+let onContinue: (() => void) | null | undefined = null;
 
 interface InitAllOptions {
   i18n?: any;
@@ -54,8 +54,7 @@ export const initAll = function (options: InitAllOptions): void {
   root.render(
     <Provider store={store}>
       <App
-        mode={mode}
-        onContinue={onContinue}
+        onContinue={onContinue!}
         startSaveTrainedModel={startSaveTrainedModel}
       />
     </Provider>
diff --git a/src/redux.ts b/src/redux.ts
index 2c536c99..57214861 100644
--- a/src/redux.ts
+++ b/src/redux.ts
@@ -735,7 +735,7 @@ export function readyToTrain(state: RootState): boolean {
 
 /* Functions for processing data to display. */
 
-export function getTableData(state: RootState, useResultsData: boolean): any[] {
+export function getTableData(state: RootState, useResultsData: boolean): any[] | null {
   if (useResultsData) {
     return getResultsDataInDataTableForm(state);
   } else {
@@ -744,7 +744,7 @@ export function getTableData(state: RootState, useResultsData: boolean): any[] {
 }
 
 export function isRegression(state: RootState): boolean {
-  return isColumnNumerical(state, state.labelColumn);
+  return isColumnNumerical(state, state.labelColumn!);
 }
 
 /* Functions for processing data about a trained model to save. */
@@ -756,7 +756,7 @@ export function getFeaturesToSave(state: RootState): any[] {
 }
 
 export function getLabelToSave(state: RootState): any {
-  return getColumnDataToSave(state, state.labelColumn);
+  return getColumnDataToSave(state, state.labelColumn!);
 }
 
 export function getTrainedModelDataToSave(state: RootState): any {
@@ -769,7 +769,7 @@ export function getTrainedModelDataToSave(state: RootState): any {
     ? RegressionTrainer
     : ClassificationTrainer;
   dataToSave.featureNumberKey = state.featureNumberKey;
-  dataToSave.label = getColumnDataToSave(state, state.labelColumn);
+  dataToSave.label = getColumnDataToSave(state, state.labelColumn!);
   dataToSave.features = getFeaturesToSave(state);
   dataToSave.summaryStat = getSummaryStat(state);
   dataToSave.trainedModel = state.trainedModel
diff --git a/src/selectors.ts b/src/selectors.ts
index c73f6097..7dd141c3 100644
--- a/src/selectors.ts
+++ b/src/selectors.ts
@@ -26,7 +26,9 @@ export const getCategoricalColumns = createSelector(
 export const getSelectedColumns = createSelector(
   [getSelectedFeatures, getLabelColumn],
   (selectedFeatures: string[], labelColumn: string | undefined): string[] => {
-    const selectedColumns = [...selectedFeatures, labelColumn];
+    const selectedColumns: string[] = labelColumn
+      ? [...selectedFeatures, labelColumn]
+      : [...selectedFeatures];
     return selectedColumns;
   }
 )
@@ -98,7 +100,7 @@ export const getSelectedColumnsDescriptions = createSelector(
           column,
           metadata,
           trainedModelDetails
-        )
+        ) ?? ""
       };
     });
   }
diff --git a/src/selectors/currentColumnSelectors.ts b/src/selectors/currentColumnSelectors.ts
index 81c9701f..a1f873cb 100644
--- a/src/selectors/currentColumnSelectors.ts
+++ b/src/selectors/currentColumnSelectors.ts
@@ -21,16 +21,16 @@ export const getCurrentColumn = (state: any): string | undefined => state.curren
 export const getCurrentColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any, props: any) => isCurrentColumnReadOnly(state, props),
+    (state: any) => isCurrentColumnReadOnly(state),
     getColumnsByDataType,
-    (state: any, props: any) => getCurrentColumnDescription(state, props),
-    (state: any, props: any) => isCurrentColumnSelectable(state, props)
+    (state: any) => getCurrentColumnDescription(state),
+    (state: any) => isCurrentColumnSelectable(state)
   ],
   (
     currentColumn: string | undefined,
     isReadOnly: boolean,
     columnsByDataType: Record<string, string>,
-    description: string,
+    description: string | undefined,
     isSelectable: boolean
   ): any => {
     if (currentColumn) {
@@ -48,21 +48,21 @@ export const getCurrentColumnDetails = createSelector(
 export const isCurrentColumnReadOnly = createSelector(
   [getCurrentColumn, getMetadata],
   (currentColumn: string | undefined, metadata: any): boolean => {
-    return isColumnReadOnly(metadata, currentColumn)
+    return isColumnReadOnly(metadata, currentColumn!)
   }
 )
 
 export const getCurrentColumnDescription = createSelector(
   [getCurrentColumn, getMetadata, getTrainedModelDetails],
-  (currentColumn: string | undefined, metadata: any, trainedModelDetails: any): string => {
-    return getColumnDescription(currentColumn, metadata, trainedModelDetails);
+  (currentColumn: string | undefined, metadata: any, trainedModelDetails: any): string | undefined => {
+    return currentColumn ? getColumnDescription(currentColumn, metadata, trainedModelDetails) ?? undefined : undefined;
   }
 )
 
 export const isCurrentColumnSelectable = createSelector(
   [
-    (state: any, props: any) => isCurrentColumnSelected(state, props),
-    (state: any, props: any) => isValidData(state, props)
+    (state: any) => isCurrentColumnSelected(state),
+    (state: any) => isValidData(state)
   ],
   (selected: boolean, isValidData: boolean): boolean => {
     return !selected && isValidData;
@@ -72,14 +72,14 @@ export const isCurrentColumnSelectable = createSelector(
 export const isCurrentColumnSelected = createSelector(
   [getSelectedColumns, getCurrentColumn],
   (selectedColumns: string[], currentColumn: string | undefined): boolean => {
-    return selectedColumns.includes(currentColumn);
+    return !!currentColumn && selectedColumns.includes(currentColumn);
   }
 )
 
 export const isValidData = createSelector(
   [
-    (state: any, props: any) => isValidNumericalData(state, props),
-    (state: any, props: any) => isValidCategoricalData(state, props)
+    (state: any) => isValidNumericalData(state),
+    (state: any) => isValidCategoricalData(state)
   ],
   (isValidNumericalData: boolean, isValidCategoricalData: boolean): boolean => {
     return isValidNumericalData || isValidCategoricalData;
@@ -89,9 +89,9 @@ export const isValidData = createSelector(
 export const getNumericalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any, props: any) => currentColumnIsNumerical(state, props),
-    (state: any, props: any) => getExtremaCurrentColumn(state, props),
-    (state: any, props: any) => currentColumnContainsOnlyNumbers(state, props)
+    (state: any) => currentColumnIsNumerical(state),
+    (state: any) => getExtremaCurrentColumn(state),
+    (state: any) => currentColumnContainsOnlyNumbers(state)
   ],
   (
     currentColumn: string | undefined,
@@ -119,14 +119,14 @@ export const currentColumnIsNumerical = createSelector(
 export const getExtremaCurrentColumn = createSelector(
   [getCurrentColumn, getData],
   (currentColumn: string | undefined, data: any[]): any => {
-    return getExtrema(data, currentColumn);
+    return getExtrema(data, currentColumn!);
   }
 )
 
 export const currentColumnContainsOnlyNumbers = createSelector(
   [getCurrentColumn, getData],
   (currentColumn: string | undefined, data: any[]): boolean => {
-    return containsOnlyNumbers(data, currentColumn);
+    return containsOnlyNumbers(data, currentColumn!);
   }
 )
 
@@ -140,9 +140,9 @@ export const isValidNumericalData = createSelector(
 export const getCategoricalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any, props: any) => currentColumnIsCategorical(state, props),
-    (state: any, props: any) => getUniqueOptionsCurrentColumn(state, props),
-    (state: any, props: any) => getOptionFrequenciesCurrentColumn(state, props)
+    (state: any) => currentColumnIsCategorical(state),
+    (state: any) => getUniqueOptionsCurrentColumn(state),
+    (state: any) => getOptionFrequenciesCurrentColumn(state)
   ],
   (
     currentColumn: string | undefined,
@@ -163,7 +163,7 @@ export const getCategoricalColumnDetails = createSelector(
 export const getUniqueOptionsCurrentColumn = createSelector(
   [getCurrentColumn, getData],
   (currentColumn: string | undefined, data: any[]): string[] => {
-    return getUniqueOptions(data, currentColumn).sort()
+    return getUniqueOptions(data, currentColumn!).sort()
   }
 )
 
diff --git a/src/selectors/visualizationSelectors.ts b/src/selectors/visualizationSelectors.ts
index 69c02cf5..36b8bec0 100644
--- a/src/selectors/visualizationSelectors.ts
+++ b/src/selectors/visualizationSelectors.ts
@@ -13,9 +13,9 @@ import { Coordinate, ScatterPlotData, CrossTabResult, CrossTabData } from "../ty
 export const getScatterPlotData = createSelector(
   [
     getLabelColumn,
-    (state: any, props: any) => labelColumnIsNumerical(state, props),
+    (state: any) => labelColumnIsNumerical(state),
     getCurrentColumn,
-    currentColumnIsNumerical,
+    (state: any) => currentColumnIsNumerical(state),
     getData,
     getDatasetId
   ],
@@ -45,8 +45,8 @@ export const getScatterPlotData = createSelector(
       coordinates.push({ x: row[currentColumn], y: row[labelColumn] });
     }
 
-    const label = getLocalizedColumnName(datasetId, labelColumn);
-    const feature = getLocalizedColumnName(datasetId, currentColumn);
+    const label = getLocalizedColumnName(datasetId ?? "", labelColumn);
+    const feature = getLocalizedColumnName(datasetId ?? "", currentColumn);
 
     return {
       label,
@@ -93,11 +93,11 @@ export const getScatterPlotData = createSelector(
 export const getCrossTabData = createSelector(
   [
     getLabelColumn,
-    (state: any, props: any) => labelColumnIsCategorical(state, props),
+    (state: any) => labelColumnIsCategorical(state),
     getCurrentColumn,
-    currentColumnIsCategorical,
+    (state: any) => currentColumnIsCategorical(state),
     getData,
-    (state: any, props: any) => getUniqueOptionsLabelColumn(state, props),
+    (state: any) => getUniqueOptionsLabelColumn(state),
     getDatasetId
   ],
   (
@@ -167,8 +167,8 @@ export const getCrossTabData = createSelector(
     // to generate the header at the top of the CrossTab UI.
     const uniqueLabelValues = uniqueOptionsLabelColumn;
 
-    const localizedLabelColumn = getLocalizedColumnName(datasetId, labelColumn);
-    const localizedCurrentColumn = getLocalizedColumnName(datasetId, currentColumn);
+    const localizedLabelColumn = getLocalizedColumnName(datasetId ?? "", labelColumn);
+    const localizedCurrentColumn = getLocalizedColumnName(datasetId ?? "", currentColumn);
     return {
       results,
       uniqueLabelValues,
@@ -195,6 +195,6 @@ export const labelColumnIsCategorical = createSelector(
 export const getUniqueOptionsLabelColumn = createSelector(
   [getLabelColumn, getData],
   (labelColumn: string | undefined, data: any[]): string[] => {
-    return getUniqueOptions(data, labelColumn).sort()
+    return getUniqueOptions(data, labelColumn!).sort()
   }
 )
diff --git a/tsconfig.json b/tsconfig.json
index 13c0189e..aa2e964f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,19 +1,24 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "node",
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "lib": [
+      "es2024",
+      "DOM",
+      "ESNext.Array",
+      "ESNext.Collection",
+      "ESNext.Iterator"
+    ],
     "jsx": "react-jsx",
-    "strict": false,
-    "allowJs": true,
-    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
     "resolveJsonModule": true,
     "declaration": false,
     "outDir": "./dist",
-    "baseUrl": ".",
     "paths": {
-      "@ml/*": ["src/*"],
-      "@public/*": ["public/*"]
+      "@ml/*": ["./src/*"],
+      "@public/*": ["./public/*"]
     }
   },
   "include": ["src/**/*"],

From 31e3658b0d562a3f3482709dfc895a5762394103 Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 01:39:30 -0400
Subject: [PATCH 3/6] Use refs to track data.

---
 src/UIComponents/GenerateResults.tsx | 18 +++++++++++++-----
 src/UIComponents/TrainModel.tsx      | 14 ++++++++++++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/UIComponents/GenerateResults.tsx b/src/UIComponents/GenerateResults.tsx
index 740f2916..8cccd050 100644
--- a/src/UIComponents/GenerateResults.tsx
+++ b/src/UIComponents/GenerateResults.tsx
@@ -27,22 +27,30 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
   const [, setFinished] = useState(false);
   const frameRef = useRef(0);
   const instructionsOverlayActiveRef = useRef(instructionsOverlayActive);
+  const dataRef = useRef(data);
 
-  // Keep ref in sync with prop
+  // Keep refs in sync with props
   useEffect(() => {
     instructionsOverlayActiveRef.current = instructionsOverlayActive;
   }, [instructionsOverlayActive]);
 
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
   const getNumItems = useCallback(() => {
     return Math.min(maxNumItems, data!.length);
   }, [data]);
 
-  const dataLength = data?.length;
-
   useEffect(() => {
     const animationTimer = setInterval(() => {
+      const currentData = dataRef.current;
+      if (!currentData) {
+        return;
+      }
+
       const currentFrame = frameRef.current;
-      const numItems = Math.min(maxNumItems, data!.length);
+      const numItems = Math.min(maxNumItems, currentData.length);
       const animationStep = Math.floor(currentFrame / framesPerCycle);
 
       if (animationStep >= numItems) {
@@ -58,7 +66,7 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
     return () => {
       clearInterval(animationTimer);
     };
-  }, [data, dataLength]);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const getShowItemsFadingOut = () => {
     return data!.length > maxNumItems;
diff --git a/src/UIComponents/TrainModel.tsx b/src/UIComponents/TrainModel.tsx
index 5f7da649..90cd33e5 100644
--- a/src/UIComponents/TrainModel.tsx
+++ b/src/UIComponents/TrainModel.tsx
@@ -31,17 +31,27 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
   const headOpenRef = useRef(false);
   const finishedRef = useRef(false);
   const instructionsOverlayActiveRef = useRef(instructionsOverlayActive);
+  const dataRef = useRef(data);
 
-  // Keep refs in sync
+  // Keep refs in sync with props
   useEffect(() => {
     instructionsOverlayActiveRef.current = instructionsOverlayActive;
   }, [instructionsOverlayActive]);
 
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
   useEffect(() => {
     train.init(store);
     train.onClickTrain(store);
 
     const animationTimer = setInterval(() => {
+      const currentData = dataRef.current;
+      if (!currentData) {
+        return;
+      }
+
       const currentFrame = frameRef.current;
 
       if (currentFrame === 15) {
@@ -50,7 +60,7 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
       }
 
       const animationStep = Math.floor(currentFrame / framesPerCycle);
-      const numItems = Math.min(maxNumItems, data!.length);
+      const numItems = Math.min(maxNumItems, currentData.length);
 
       if (animationStep >= numItems) {
         headOpenRef.current = false;

From d7a73f6e33884d09c3f9332a300012d620a5eb1e Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 03:17:08 -0400
Subject: [PATCH 4/6] Removes 'any' types.

---
 src/App.tsx                                   |  43 +++---
 src/UIComponents/AddFeatureButton.tsx         |   4 +-
 src/UIComponents/ColumnDataTypeDropdown.tsx   |   4 +-
 src/UIComponents/ColumnDetailsCategorical.tsx |   3 +-
 src/UIComponents/ColumnDetailsNumerical.tsx   |   3 +-
 src/UIComponents/ColumnInspector.tsx          |   7 +-
 src/UIComponents/CrossTab.tsx                 |   5 +-
 src/UIComponents/DataCard.tsx                 |  24 ++--
 src/UIComponents/DataDisplay.tsx              |   6 +-
 src/UIComponents/DataTable.tsx                |  26 ++--
 src/UIComponents/GenerateResults.tsx          |  11 +-
 src/UIComponents/ModelCard.tsx                |  22 ++--
 src/UIComponents/Predict.tsx                  |  27 ++--
 src/UIComponents/Results.tsx                  |  10 +-
 src/UIComponents/ResultsDetails.tsx           |  14 +-
 src/UIComponents/ResultsTable.tsx             |  19 +--
 src/UIComponents/ResultsToggle.tsx            |   4 +-
 src/UIComponents/SaveModel.tsx                |  34 ++---
 src/UIComponents/ScatterPlot.tsx              |   3 +-
 src/UIComponents/SelectDataset.tsx            |  32 ++---
 src/UIComponents/SelectLabelButton.tsx        |   4 +-
 src/UIComponents/Statement.tsx                |   8 +-
 src/UIComponents/TrainModel.tsx               |   9 +-
 src/UIComponents/UniqueOptionsWarning.tsx     |   3 +-
 src/assetPath.ts                              |   4 +-
 src/csvReaderWrapper.ts                       |  19 +--
 src/datasetManifest.ts                        |   2 +-
 src/declarations.d.ts                         |  37 ++++--
 src/helpers/accuracy.ts                       |  75 +++++------
 src/helpers/columnDetails.ts                  |  48 +++----
 src/helpers/datasetDetails.ts                 |  17 +--
 src/helpers/metrics.ts                        |  17 ++-
 src/helpers/navigationValidation.ts           |  41 +++---
 src/helpers/utils.ts                          |   8 +-
 src/helpers/valueConversion.ts                |  31 ++---
 src/i18n.ts                                   |  12 +-
 src/index.tsx                                 |  39 +++---
 src/indexDev.tsx                              |   9 +-
 src/jsonReaderWrapper.ts                      |  13 +-
 src/redux.ts                                  | 123 ++++++++++--------
 src/selectors.ts                              |  24 ++--
 src/selectors/currentColumnSelectors.ts       |  65 ++++-----
 src/selectors/visualizationSelectors.ts       |  25 ++--
 src/train.ts                                  |  37 +++---
 src/trainers/KNNTrainer.ts                    |  38 +++---
 src/types.ts                                  |  83 ++++++++++--
 46 files changed, 611 insertions(+), 481 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c23592a6..0e861e8c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,25 +14,28 @@ import { connect } from "react-redux";
 import {
   getPanelButtons,
   setCurrentPanel,
-  getTrainedModelDataToSave
+  getTrainedModelDataToSave,
+  RootState
 } from "./redux";
 import {
   isSaveComplete,
   shouldDisplaySaveStatus
 } from "./helpers/navigationValidation";
+import { PrevNextButtons, ModelDataToSave, SaveResponseData } from "./types";
+import { Dispatch } from "redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import I18n from "./i18n";
 
 interface PanelButtonsProps {
-  panelButtons: any;
+  panelButtons: PrevNextButtons;
   currentPanel: string;
   setCurrentPanel: (panel: string) => void;
   onContinue: () => void;
-  startSaveTrainedModel: (dataToSave: any) => void;
-  dataToSave: any;
+  startSaveTrainedModel: (dataToSave: ModelDataToSave) => void;
+  dataToSave: ModelDataToSave;
   saveStatus: string;
-  saveResponseData: any;
+  saveResponseData: SaveResponseData | undefined;
   isSaveComplete: (saveStatus: string) => boolean;
   shouldDisplaySaveStatus: (saveStatus: string) => boolean;
 }
@@ -50,16 +53,16 @@ function PanelButtons({
   shouldDisplaySaveStatus: shouldDisplaySaveStatusProp
 }: PanelButtonsProps) {
   const onClickPrev = () => {
-    setCurrentPanel(panelButtons.prev.panel);
+    setCurrentPanel(panelButtons.prev!.panel);
   };
 
   const onClickNext = () => {
-    if (["continue", "finish"].includes(panelButtons.next.panel)) {
+    if (["continue", "finish"].includes(panelButtons.next!.panel)) {
       onContinue();
     } else if (currentPanel === "saveModel") {
       startSaveTrainedModel(dataToSave);
     } else {
-      setCurrentPanel(panelButtons.next.panel);
+      setCurrentPanel(panelButtons.next!.panel);
     }
   };
 
@@ -67,7 +70,7 @@ function PanelButtons({
     return I18n.t(`saveStatus_${saveStatus}`) ?? "";
   };
 
-  const saveResponseDataMessage = (saveResponseData: any): string | undefined => {
+  const saveResponseDataMessage = (saveResponseData: SaveResponseData | undefined): string | undefined => {
     // The list of known error types from share_filtering.rb.
     const errorTypes = ["email", "address", "phone", "profanity"];
 
@@ -75,7 +78,7 @@ function PanelButtons({
       return undefined;
     }
 
-    const index = errorTypes.indexOf(saveResponseData.type);
+    const index = errorTypes.indexOf(saveResponseData.type || "");
     if (index !== -1) {
       return `(${index})`;
     } else {
@@ -188,15 +191,15 @@ function ContainerFullWidth({ children }: ContainerFullWidthProps) {
 }
 
 interface AppProps {
-  panelButtons: any;
+  panelButtons: PrevNextButtons;
   currentPanel: string;
   setCurrentPanel: (panel: string) => void;
   onContinue: () => void;
-  resultsPhase: number;
-  startSaveTrainedModel: (dataToSave: any) => void;
-  dataToSave: any;
+  resultsPhase: number | undefined;
+  startSaveTrainedModel: (dataToSave: ModelDataToSave) => void;
+  dataToSave: ModelDataToSave;
   saveStatus: string;
-  saveResponseData: any;
+  saveResponseData: SaveResponseData | undefined;
 }
 
 function App({
@@ -297,7 +300,7 @@ function App({
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     panelButtons: getPanelButtons(state),
     currentPanel: state.currentPanel,
     resultsPhase: state.resultsPhase,
@@ -305,15 +308,9 @@ export default connect(
     saveStatus: state.saveStatus,
     saveResponseData: state.saveResponseData
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setCurrentPanel(panel: string) {
       dispatch(setCurrentPanel(panel));
-    },
-    isSaveComplete(state: any) {
-      dispatch(isSaveComplete(state));
-    },
-    shouldDisplaySaveStatus(state: any) {
-      dispatch(shouldDisplaySaveStatus(state));
     }
   })
 )(App);
diff --git a/src/UIComponents/AddFeatureButton.tsx b/src/UIComponents/AddFeatureButton.tsx
index 30b599f4..980fcffe 100644
--- a/src/UIComponents/AddFeatureButton.tsx
+++ b/src/UIComponents/AddFeatureButton.tsx
@@ -1,7 +1,7 @@
 /* React component to handle selecting columns as features. */
 import { connect } from "react-redux";
+import { RootState, addSelectedFeature } from "../redux";
 import { styles } from "../constants";
-import { addSelectedFeature } from "../redux";
 import I18n from "../i18n";
 
 interface AddFeatureButtonProps {
@@ -28,7 +28,7 @@ function AddFeatureButton({ column, addSelectedFeature }: AddFeatureButtonProps)
 }
 
 export default connect(
-  (state: any) => ({}),
+  (state: RootState) => ({}),
   dispatch => ({
     addSelectedFeature(column: string) {
       dispatch(addSelectedFeature(column));
diff --git a/src/UIComponents/ColumnDataTypeDropdown.tsx b/src/UIComponents/ColumnDataTypeDropdown.tsx
index f2a488f7..690d0cb0 100644
--- a/src/UIComponents/ColumnDataTypeDropdown.tsx
+++ b/src/UIComponents/ColumnDataTypeDropdown.tsx
@@ -1,6 +1,6 @@
 /* React component to handle setting datatype for selected columns. */
 import { connect } from "react-redux";
-import { setColumnsByDataType } from "../redux";
+import { RootState, setColumnsByDataType } from "../redux";
 import { ColumnTypes } from "../constants";
 import I18n from "../i18n";
 
@@ -37,7 +37,7 @@ function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataTyp
 }
 
 export default connect(
-  (state: any) => ({}),
+  (state: RootState) => ({}),
   dispatch => ({
     setColumnsByDataType(column: string, dataType: string) {
       dispatch(setColumnsByDataType(column, dataType));
diff --git a/src/UIComponents/ColumnDetailsCategorical.tsx b/src/UIComponents/ColumnDetailsCategorical.tsx
index df14381a..1c13c721 100644
--- a/src/UIComponents/ColumnDetailsCategorical.tsx
+++ b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -1,5 +1,6 @@
 /* React component to handle showing details of categorical columns. */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { colors, styles } from "../constants";
 import { Bar } from "react-chartjs-2";
 import {
@@ -72,7 +73,7 @@ function ColumnDetailsCategorical({ columnDetails }: ColumnDetailsCategoricalPro
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     columnDetails: getCategoricalColumnDetails(state)
   }),
   {}
diff --git a/src/UIComponents/ColumnDetailsNumerical.tsx b/src/UIComponents/ColumnDetailsNumerical.tsx
index 047f9201..d99d2c70 100644
--- a/src/UIComponents/ColumnDetailsNumerical.tsx
+++ b/src/UIComponents/ColumnDetailsNumerical.tsx
@@ -1,5 +1,6 @@
 /* React component to handle showing details of numerical columns. */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { styles } from "../constants";
 import { getNumericalColumnDetails } from "../selectors/currentColumnSelectors";
 import I18n from "../i18n";
@@ -32,7 +33,7 @@ function ColumnDetailsNumerical({ columnDetails }: ColumnDetailsNumericalProps)
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     columnDetails: getNumericalColumnDetails(state)
   }),
   {}
diff --git a/src/UIComponents/ColumnInspector.tsx b/src/UIComponents/ColumnInspector.tsx
index 81011ac3..7872a3e0 100644
--- a/src/UIComponents/ColumnInspector.tsx
+++ b/src/UIComponents/ColumnInspector.tsx
@@ -3,6 +3,7 @@
   for selected columns.
 */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { getCurrentColumnDetails } from "../selectors/currentColumnSelectors";
 import { styles, ColumnTypes } from "../constants";
 import ScatterPlot from "./ScatterPlot";
@@ -21,7 +22,7 @@ import { CurrentColumnInspector } from "../types";
 interface ColumnInspectorProps {
   currentColumnDetails: CurrentColumnInspector | undefined;
   currentPanel: string;
-  datasetId: string;
+  datasetId: string | undefined;
 }
 
 function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: ColumnInspectorProps) {
@@ -38,7 +39,7 @@ function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: Colu
   }
 
   const localizedDataType = I18n.t(`columnType_${currentColumnDetails.dataType}`)
-  const localizedColumnName = getLocalizedColumnName(datasetId, currentColumnDetails.id);
+  const localizedColumnName = getLocalizedColumnName(datasetId!, currentColumnDetails.id);
 
   return (
     currentColumnDetails && (
@@ -91,7 +92,7 @@ function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: Colu
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     currentColumnDetails: getCurrentColumnDetails(state),
     currentPanel: state.currentPanel,
     datasetId: state.metadata && state.metadata.name
diff --git a/src/UIComponents/CrossTab.tsx b/src/UIComponents/CrossTab.tsx
index 1573fa5e..6ceb379d 100644
--- a/src/UIComponents/CrossTab.tsx
+++ b/src/UIComponents/CrossTab.tsx
@@ -5,6 +5,7 @@
 */
 import { useCallback } from "react";
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { getCrossTabData } from "../selectors/visualizationSelectors";
 import { styles } from "../constants";
 import ScrollableContent from "./ScrollableContent";
@@ -18,7 +19,7 @@ interface CrossTabProps {
 function CrossTab({ crossTabData }: CrossTabProps) {
   const getCellStyle = useCallback((percent: number) => {
     return {
-      ...(styles as Record<string, any>)["crossTabCell" + Math.round(percent / 20)],
+      ...(styles as Record<string, React.CSSProperties>)["crossTabCell" + Math.round(percent / 20)],
       ...styles.crossTabTableCell
     };
   }, []);
@@ -132,6 +133,6 @@ function CrossTab({ crossTabData }: CrossTabProps) {
   );
 }
 
-export default connect((state: any) => ({
+export default connect((state: RootState) => ({
   crossTabData: getCrossTabData(state)
 }))(CrossTab);
diff --git a/src/UIComponents/DataCard.tsx b/src/UIComponents/DataCard.tsx
index cebc4adf..abf9e1ab 100644
--- a/src/UIComponents/DataCard.tsx
+++ b/src/UIComponents/DataCard.tsx
@@ -1,14 +1,16 @@
 /* React component to show information about the currently-selected data set. */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { styles } from "../constants";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
 import { getDatasetDetails } from "../helpers/datasetDetails";
+import { Metadata, DatasetDetails } from "../types";
 
 interface DataCardProps {
   name?: string;
-  metadata?: any;
-  datasetDetails?: any;
+  metadata?: Metadata;
+  datasetDetails?: DatasetDetails;
   dataLength?: number;
   removedRowsCount?: number;
 }
@@ -35,12 +37,12 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
         <ScrollableContent>
           {card && (
             <div>
-              <div style={styles.cardRow}>{datasetDetails.description}</div>
+              <div style={styles.cardRow}>{datasetDetails!.description}</div>
               <div style={styles.cardRow}>
                 <span style={styles.italic}>
                   {I18n.t("dataCardSource")}
                   <br />
-                  {metadata.card.source}
+                  {metadata!.card!.source}
                 </span>
               </div>
               <div style={styles.cardRow}>
@@ -50,29 +52,29 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
                   {dataLength}
                 </span>
               </div>
-              {metadata.card.lastUpdated && (
+              {metadata!.card!.lastUpdated && (
                 <div style={styles.cardRow}>
                   <span style={styles.italic}>
                     {I18n.t("dataCardLastUpdated")}
                     <br />
-                    {metadata.card.lastUpdated}
+                    {metadata!.card!.lastUpdated}
                   </span>
                 </div>
               )}
 
-              {metadata.card.context.potentialUses && (
+              {metadata!.card!.context?.potentialUses && (
                 <div style={styles.cardRow}>
                   <div style={styles.bold}>{I18n.t("dataCardPotentialUses")}</div>
                   <div style={styles.italic}>
-                    {datasetDetails.potentialUses}
+                    {datasetDetails!.potentialUses}
                   </div>
                 </div>
               )}
-              {metadata.card.context.potentialMisuses && (
+              {metadata!.card!.context?.potentialMisuses && (
                 <div style={styles.cardRow}>
                   <div style={styles.bold}>{I18n.t("dataCardPotentialMisuses")}</div>
                   <div style={styles.italic}>
-                    {datasetDetails.potentialMisuses}
+                    {datasetDetails!.potentialMisuses}
                   </div>
                 </div>
               )}
@@ -101,7 +103,7 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
   );
 }
 
-export default connect((state: any) => ({
+export default connect((state: RootState) => ({
   name: state.name,
   metadata: state.metadata,
   datasetDetails: getDatasetDetails(state),
diff --git a/src/UIComponents/DataDisplay.tsx b/src/UIComponents/DataDisplay.tsx
index 5f7ce06f..1100fe10 100644
--- a/src/UIComponents/DataDisplay.tsx
+++ b/src/UIComponents/DataDisplay.tsx
@@ -1,12 +1,14 @@
 /* React component to handle displaying imported data. */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import Statement from "./Statement";
 import DataTable from "./DataTable";
 import { styles } from "../constants";
 import I18n from "../i18n";
+import { DataRow } from "../types";
 
 interface DataDisplayProps {
-  data?: any[];
+  data?: DataRow[];
 }
 
 function DataDisplay({ data }: DataDisplayProps) {
@@ -33,7 +35,7 @@ function DataDisplay({ data }: DataDisplayProps) {
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     data: state.data
   })
 )(DataDisplay);
diff --git a/src/UIComponents/DataTable.tsx b/src/UIComponents/DataTable.tsx
index 5be0a8c9..75229b63 100644
--- a/src/UIComponents/DataTable.tsx
+++ b/src/UIComponents/DataTable.tsx
@@ -1,19 +1,21 @@
 /* React component to handle displaying imported data. */
 import { connect } from "react-redux";
-import { getTableData, setCurrentColumn, setHighlightColumn } from "../redux";
+import { getTableData, setCurrentColumn, setHighlightColumn, RootState } from "../redux";
+import { Dispatch } from "redux";
 import { styles } from "../constants";
 import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { DataRow } from "../types";
 
 interface DataTableProps {
   currentPanel: string;
-  data: any[] | null;
-  datasetId: string;
-  labelColumn: string;
+  data: DataRow[] | null;
+  datasetId: string | undefined;
+  labelColumn: string | undefined;
   selectedFeatures: string[];
   setCurrentColumn: (column: string | undefined) => void;
   setHighlightColumn: (column: string | undefined) => void;
-  currentColumn: string;
-  highlightColumn: string;
+  currentColumn: string | undefined;
+  highlightColumn: string | undefined;
   reducedColumns?: boolean;
   singleRow?: number | undefined;
   startingRow?: number | undefined;
@@ -134,7 +136,7 @@ function DataTable({
                 onMouseEnter={() => handleSetHighlightColumn(columnId)}
                 onMouseLeave={() => handleSetHighlightColumn(undefined)}
               >
-                {getLocalizedColumnName(datasetId, columnId)}
+                {getLocalizedColumnName(datasetId!, columnId)}
               </th>
             );
           })}
@@ -173,8 +175,8 @@ function DataTable({
 }
 
 export default connect(
-  (state: any, props: any) => ({
-    data: getTableData(state, props.useResultsData) as any[],
+  (state: RootState, props: { useResultsData?: boolean }) => ({
+    data: getTableData(state, !!props.useResultsData),
     datasetId: state.metadata && state.metadata.name,
     labelColumn: state.labelColumn,
     selectedFeatures: state.selectedFeatures,
@@ -182,12 +184,12 @@ export default connect(
     highlightColumn: state.highlightColumn,
     currentPanel: state.currentPanel
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setCurrentColumn(column: string | undefined) {
-      dispatch(setCurrentColumn(column as any));
+      dispatch(setCurrentColumn(column as string));
     },
     setHighlightColumn(column: string | undefined) {
-      dispatch(setHighlightColumn(column as any));
+      dispatch(setHighlightColumn(column as string));
     }
   })
 )(DataTable);
diff --git a/src/UIComponents/GenerateResults.tsx b/src/UIComponents/GenerateResults.tsx
index 8cccd050..04550a71 100644
--- a/src/UIComponents/GenerateResults.tsx
+++ b/src/UIComponents/GenerateResults.tsx
@@ -1,7 +1,7 @@
 /* React component to handle training. */
 import { useState, useEffect, useRef, useCallback } from "react";
 import { connect } from "react-redux";
-import { getTableData, readyToTrain } from "../redux";
+import { getTableData, readyToTrain, RootState } from "../redux";
 import { styles, getFadeOpacity } from "../constants";
 import aiBotHead from "@public/images/ai-bot/ai-bot-head.png";
 import aiBotBody from "@public/images/ai-bot/ai-bot-body.png";
@@ -10,14 +10,15 @@ import background from "@public/images/results-background-light.jpg";
 import DataTable from "./DataTable";
 import { TestingAnimationDescription } from "./AnimationDescriptions";
 import I18n from "../i18n";
+import { DataRow } from "../types";
 
 const framesPerCycle = 80;
 const maxNumItems = 7;
 
 interface GenerateResultsProps {
-  data: any[] | null;
+  data: DataRow[] | null;
   readyToTrain: boolean;
-  labelColumn: string;
+  labelColumn: string | undefined;
   selectedFeatures: string[];
   instructionsOverlayActive: boolean;
 }
@@ -209,8 +210,8 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
   );
 }
 
-export default connect((state: any) => ({
-  data: getTableData(state, true) as any[],
+export default connect((state: RootState) => ({
+  data: getTableData(state, true),
   readyToTrain: readyToTrain(state),
   labelColumn: state.labelColumn,
   selectedFeatures: state.selectedFeatures,
diff --git a/src/UIComponents/ModelCard.tsx b/src/UIComponents/ModelCard.tsx
index 52178c62..6066ab6d 100644
--- a/src/UIComponents/ModelCard.tsx
+++ b/src/UIComponents/ModelCard.tsx
@@ -1,29 +1,29 @@
 /* React component to handle displaying the model card. */
 import { connect } from "react-redux";
 import { styles } from "../constants";
-import { getLabelToSave, getFeaturesToSave } from "../redux";
+import { getLabelToSave, getFeaturesToSave, RootState } from "../redux";
 import { getPercentCorrect } from "../helpers/accuracy";
 import { getDatasetDetails } from "../helpers/datasetDetails";
 import Statement from "./Statement";
 import aiBotBorder from "@public/images/ai-bot/ai-bot-border.png";
 import I18n from "../i18n";
 import { getLocalizedColumnName } from "../helpers/columnDetails";
-import { ModelCardColumn } from "../types";
+import { ModelCardColumn, TrainedModelDetailsSave, DatasetDetails } from "../types";
 
 interface ModelCardProps {
-  trainedModelDetails?: any;
-  selectedFeatures?: string[];
-  percentCorrect?: string;
-  label?: ModelCardColumn;
-  features?: ModelCardColumn[];
-  datasetDetails?: any;
+  trainedModelDetails: TrainedModelDetailsSave;
+  selectedFeatures: string[];
+  percentCorrect: string;
+  label: ModelCardColumn;
+  features: ModelCardColumn[];
+  datasetDetails: DatasetDetails;
 }
 
 function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }: ModelCardProps) {
   console.log("trainedModelDetails", trainedModelDetails)
-  const localizedLabel = getLocalizedColumnName(datasetDetails.name, label!.id!);
+  const localizedLabel = getLocalizedColumnName(datasetDetails.name!, label!.id!);
   const localizedFeatures =
-    selectedFeatures!.map(feature => getLocalizedColumnName(datasetDetails.name, feature));
+    selectedFeatures!.map(feature => getLocalizedColumnName(datasetDetails.name!, feature));
   const predictionStatement = I18n.t("predictionStatement",
     {"output": localizedLabel, "inputs": localizedFeatures.join(", ")})
   return (
@@ -152,7 +152,7 @@ function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, labe
   );
 }
 
-export default connect((state: any) => ({
+export default connect((state: RootState) => ({
   trainedModelDetails: state.trainedModelDetails,
   selectedFeatures: state.selectedFeatures,
   percentCorrect: getPercentCorrect(state),
diff --git a/src/UIComponents/Predict.tsx b/src/UIComponents/Predict.tsx
index 096b1d27..d135f7b5 100644
--- a/src/UIComponents/Predict.tsx
+++ b/src/UIComponents/Predict.tsx
@@ -3,7 +3,8 @@ import React from "react";
 import { connect } from "react-redux";
 import { store } from "../index";
 import train from "../train";
-import { setTestData, getPredictAvailable } from "../redux";
+import { setTestData, getPredictAvailable, RootState } from "../redux";
+import { Dispatch } from "redux";
 import { getConvertedPredictedLabel } from "../helpers/valueConversion";
 import {
   getSelectedCategoricalFeatures,
@@ -18,16 +19,16 @@ import I18n from "../i18n";
 import { getLocalizedColumnName } from "../helpers/columnDetails";
 
 interface PredictProps {
-  labelColumn: string;
+  labelColumn: string | undefined;
   selectedCategoricalFeatures: string[];
   selectedNumericalFeatures: string[];
   uniqueOptionsByColumn: Record<string, string[]>;
-  testData: Record<string, any>;
-  setTestData: (feature: string, value: any) => void;
-  predictedLabel: string | number | undefined;
+  testData: Record<string, string | number>;
+  setTestData: (feature: string, value: string | number) => void;
+  predictedLabel: string | number;
   getPredictAvailable: boolean;
   extremaByColumn: Record<string, { min: number; max: number }>;
-  datasetId: string;
+  datasetId: string | undefined;
 }
 
 function Predict({
@@ -62,7 +63,7 @@ function Predict({
             return (
               <div style={styles.cardRow} key={index}>
                 <label>
-                  {getLocalizedColumnName(datasetId, feature)}
+                  {getLocalizedColumnName(datasetId!, feature)}
                   &nbsp;
                   <input
                     type="number"
@@ -81,7 +82,7 @@ function Predict({
           {selectedCategoricalFeatures.map((feature, index) => {
             return (
               <div style={styles.cardRow} key={index}>
-                <div>{getLocalizedColumnName(datasetId, feature)}&nbsp;</div>
+                <div>{getLocalizedColumnName(datasetId!, feature)}&nbsp;</div>
                 <div>
                   <select
                     onChange={event => handleChange(event, feature)}
@@ -131,8 +132,8 @@ function Predict({
           </div>
           <div style={styles.predictBotRight}>
             <div style={styles.statement}>{I18n.t("predictAIBotPredicts")}</div>
-            <div>{getLocalizedColumnName(datasetId, labelColumn)}</div>
-            <div>{getLocalizedColumnName(datasetId, String(predictedLabel))}</div>
+            <div>{getLocalizedColumnName(datasetId!, labelColumn!)}</div>
+            <div>{getLocalizedColumnName(datasetId!, String(predictedLabel))}</div>
           </div>
         </div>
       )}
@@ -141,7 +142,7 @@ function Predict({
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     testData: state.testData,
     predictedLabel: getConvertedPredictedLabel(state),
     labelColumn: state.labelColumn,
@@ -152,8 +153,8 @@ export default connect(
     extremaByColumn: getExtremaByColumn(state),
     datasetId: state.metadata && state.metadata.name
   }),
-  (dispatch: any) => ({
-    setTestData(feature: string, value: any) {
+  (dispatch: Dispatch) => ({
+    setTestData(feature: string, value: string | number) {
       dispatch(setTestData(feature, value));
     }
   })
diff --git a/src/UIComponents/Results.tsx b/src/UIComponents/Results.tsx
index fc6eff32..fc0bc405 100644
--- a/src/UIComponents/Results.tsx
+++ b/src/UIComponents/Results.tsx
@@ -3,13 +3,15 @@ import { useEffect, useCallback } from "react";
 import { connect } from "react-redux";
 import { styles } from "../constants";
 import { UnconnectedStatement } from "./Statement";
-import { setShowResultsDetails, setResultsPhase } from "../redux";
+import { setShowResultsDetails, setResultsPhase, RootState } from "../redux";
+import { Dispatch } from "redux";
+import { HistoricResult } from "../types";
 import ResultsDetails from "./ResultsDetails";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
 
 interface ResultsProps {
-  historicResults: any[];
+  historicResults: HistoricResult[];
   showResultsDetails: boolean;
   setShowResultsDetails: (show: boolean) => void;
   setResultsPhase: (phase: number) => void;
@@ -90,11 +92,11 @@ function Results({ historicResults, showResultsDetails, setShowResultsDetails, s
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     historicResults: state.historicResults,
     showResultsDetails: state.showResultsDetails
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setResultsPhase(phase: number) {
       dispatch(setResultsPhase(phase));
     },
diff --git a/src/UIComponents/ResultsDetails.tsx b/src/UIComponents/ResultsDetails.tsx
index 6b40b7df..2eca0a64 100644
--- a/src/UIComponents/ResultsDetails.tsx
+++ b/src/UIComponents/ResultsDetails.tsx
@@ -1,7 +1,9 @@
 /* React component to handle displaying accuracy results. */
 import { useCallback } from "react";
 import { connect } from "react-redux";
-import { setShowResultsDetails } from "../redux";
+import { setShowResultsDetails, RootState } from "../redux";
+import { Dispatch } from "redux";
+import { ResultsData } from "../types";
 import {
   getPercentCorrect,
   getCorrectResults,
@@ -16,11 +18,11 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons";
 interface ResultsDetailsProps {
   resultsTab: string;
   selectedFeatures: string[];
-  labelColumn: string;
+  labelColumn: string | undefined;
   percentCorrect: string;
   setShowResultsDetails: (show: boolean) => void;
-  correctResults: any;
-  incorrectResults: any;
+  correctResults: ResultsData;
+  incorrectResults: ResultsData;
 }
 
 function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorrect, setShowResultsDetails, correctResults, incorrectResults }: ResultsDetailsProps) {
@@ -53,7 +55,7 @@ function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorr
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     resultsTab: state.resultsTab,
     selectedFeatures: state.selectedFeatures,
     labelColumn: state.labelColumn,
@@ -61,7 +63,7 @@ export default connect(
     correctResults: getCorrectResults(state),
     incorrectResults: getIncorrectResults(state)
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setShowResultsDetails(show: boolean) {
       dispatch(setShowResultsDetails(show));
     }
diff --git a/src/UIComponents/ResultsTable.tsx b/src/UIComponents/ResultsTable.tsx
index 9ccda8e5..7aa2dfbe 100644
--- a/src/UIComponents/ResultsTable.tsx
+++ b/src/UIComponents/ResultsTable.tsx
@@ -1,7 +1,8 @@
 /* React component to handle displaying test data and A.I. Bot's guesses. */
 import { useCallback } from "react";
 import { connect } from "react-redux";
-import { isRegression, setResultsHighlightRow } from "../redux";
+import { isRegression, setResultsHighlightRow, RootState } from "../redux";
+import { Dispatch } from "redux";
 import { styles, colors, REGRESSION_ERROR_TOLERANCE } from "../constants";
 import I18n from "../i18n";
 import { getLocalizedColumnName } from "../helpers/columnDetails";
@@ -9,12 +10,12 @@ import { ResultsData } from "../types";
 
 interface ResultsTableProps {
   selectedFeatures: string[];
-  labelColumn: string;
+  labelColumn: string | undefined;
   results: ResultsData;
   isRegression: boolean;
   setResultsHighlightRow: (row: number | undefined) => void;
   resultsHighlightRow: number | undefined;
-  datasetId: string;
+  datasetId: string | undefined;
 }
 
 function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }: ResultsTableProps) {
@@ -80,7 +81,7 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
                     }}
                     key={index}
                   >
-                    {getLocalizedColumnName(datasetId, feature)}
+                    {getLocalizedColumnName(datasetId!, feature)}
                   </th>
                 );
               })}
@@ -91,7 +92,7 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
                   ...styles.resultsTableSecondHeader
                 }}
               >
-                {getLocalizedColumnName(datasetId, labelColumn)}
+                {getLocalizedColumnName(datasetId!, labelColumn!)}
               </th>
               <th
                 style={{
@@ -100,7 +101,7 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
                   ...styles.resultsTableSecondHeader
                 }}
               >
-                {getLocalizedColumnName(datasetId, labelColumn)}
+                {getLocalizedColumnName(datasetId!, labelColumn!)}
               </th>
             </tr>
           </thead>
@@ -136,16 +137,16 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     selectedFeatures: state.selectedFeatures,
     labelColumn: state.labelColumn,
     isRegression: isRegression(state),
     resultsHighlightRow: state.resultsHighlightRow,
     datasetId: state.metadata && state.metadata.name
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setResultsHighlightRow(column: number | undefined) {
-      dispatch(setResultsHighlightRow(column as any));
+      dispatch(setResultsHighlightRow(column as number));
     }
   })
 )(ResultsTable);
diff --git a/src/UIComponents/ResultsToggle.tsx b/src/UIComponents/ResultsToggle.tsx
index 5f336c0b..38e988d9 100644
--- a/src/UIComponents/ResultsToggle.tsx
+++ b/src/UIComponents/ResultsToggle.tsx
@@ -1,6 +1,6 @@
 /* React component to handle toggling between correct/incorrect test results */
 import { connect } from "react-redux";
-import { setResultsTab } from "../redux";
+import { setResultsTab, RootState } from "../redux";
 import { ResultsGrades, styles } from "../constants";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes, faCheck } from "@fortawesome/free-solid-svg-icons";
@@ -59,7 +59,7 @@ function ResultsToggle({ resultsTab, setResultsTab }: ResultsToggleProps) {
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     resultsTab: state.resultsTab
   }),
   dispatch => ({
diff --git a/src/UIComponents/SaveModel.tsx b/src/UIComponents/SaveModel.tsx
index 3292ddfa..32680ce8 100644
--- a/src/UIComponents/SaveModel.tsx
+++ b/src/UIComponents/SaveModel.tsx
@@ -1,7 +1,8 @@
 /* React component to handle saving a trained model. */
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { setTrainedModelDetail } from "../redux";
+import { setTrainedModelDetail, RootState } from "../redux";
+import { Dispatch } from "redux";
 import {
   getDatasetDescription,
   isUserUploadedDataset
@@ -12,16 +13,18 @@ import Statement from "./Statement";
 import ScrollableContent from "./ScrollableContent";
 import I18n from "../i18n";
 import { getLocalizedColumnName } from "../helpers/columnDetails";
+import { TrainedModelDetailsSave } from "../types";
+import KNN from "ml-knn";
 
 interface SaveModelProps {
-  trainedModel: any;
+  trainedModel: KNN | undefined;
   setTrainedModelDetail: (field: string, value: string, isColumn: boolean) => void;
-  trainedModelDetails: any;
-  labelColumn: string;
+  trainedModelDetails: TrainedModelDetailsSave;
+  labelColumn: string | undefined;
   columnDescriptions: { id: string; description: string | null }[];
   dataDescription: string | undefined;
   isUserUploadedDataset: boolean;
-  datasetId: string;
+  datasetId: string | undefined;
 }
 
 function SaveModel({
@@ -45,7 +48,7 @@ function SaveModel({
   };
 
   const getColumnFields = () => {
-    const fields: any[] = [];
+    const fields: { id: string; isColumn: boolean; columnType: string | undefined; answer: string | null; localizedName: string; placeholder?: string }[] = [];
 
     for (const columnDescription of columnDescriptions) {
       const labelType = I18n.t("saveModelColumnTypeLabel");
@@ -57,14 +60,14 @@ function SaveModel({
         isColumn: true,
         columnType,
         answer: columnDescription.description,
-        localizedName: getLocalizedColumnName(datasetId, columnDescription.id)
+        localizedName: getLocalizedColumnName(datasetId!, columnDescription.id)
       });
     }
     return fields;
   };
 
   const getUsesFields = () => {
-    const fields: any[] = [];
+    const fields: { id: string; text: string | undefined; description: string | undefined; descriptionDetails?: (string | undefined)[]; placeholder: string | undefined; isColumn?: boolean; answer?: string }[] = [];
     fields.push({
       id: "potentialUses",
       text: I18n.t("potentialUsesLabel"),
@@ -88,8 +91,9 @@ function SaveModel({
 
   const nameField = {
     id: "name",
-    text: I18n.t("modelNameLabel")
-  } as any;
+    text: I18n.t("modelNameLabel"),
+    isColumn: false
+  };
 
   const dataDescriptionField = {
     id: "datasetDescription",
@@ -130,7 +134,7 @@ function SaveModel({
                 <div>{field.description}</div>
                 <ul>
                   {field.descriptionDetails &&
-                    field.descriptionDetails.map((detail: string, index: number) => {
+                    field.descriptionDetails.map((detail: string | undefined, index: number) => {
                       return (
                         <li style={styles.regularText} key={index}>
                           {detail}
@@ -143,7 +147,7 @@ function SaveModel({
                     <textarea
                       rows={4}
                       onChange={event =>
-                        handleChange(event, field.id, field.isColumn)
+                        handleChange(event, field.id, !!field.isColumn)
                       }
                       placeholder={field.placeholder}
                       style={styles.saveInputsWidth}
@@ -201,7 +205,7 @@ function SaveModel({
                         <textarea
                           rows={1}
                           onChange={event =>
-                            handleChange(event, field.id, field.isColumn)
+                            handleChange(event, field.id, !!field.isColumn)
                           }
                           placeholder={field.placeholder}
                           value={field.answer || ""}
@@ -224,7 +228,7 @@ function SaveModel({
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     trainedModel: state.trainedModel,
     trainedModelDetails: state.trainedModelDetails,
     labelColumn: state.labelColumn,
@@ -233,7 +237,7 @@ export default connect(
     isUserUploadedDataset: isUserUploadedDataset(state),
     datasetId: state.metadata && state.metadata.name
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     setTrainedModelDetail(field: string, value: string, isColumn: boolean) {
       dispatch(setTrainedModelDetail(field, value, isColumn));
     }
diff --git a/src/UIComponents/ScatterPlot.tsx b/src/UIComponents/ScatterPlot.tsx
index 657cd736..207de275 100644
--- a/src/UIComponents/ScatterPlot.tsx
+++ b/src/UIComponents/ScatterPlot.tsx
@@ -1,4 +1,5 @@
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { getScatterPlotData } from "../selectors/visualizationSelectors";
 import { styles, colors } from "../constants";
 import { Scatter } from "react-chartjs-2";
@@ -94,6 +95,6 @@ function ScatterPlot({ scatterPlotData }: ScatterPlotProps) {
   );
 }
 
-export default connect((state: any) => ({
+export default connect((state: RootState) => ({
   scatterPlotData: getScatterPlotData(state)
 }), {})(ScatterPlot);
diff --git a/src/UIComponents/SelectDataset.tsx b/src/UIComponents/SelectDataset.tsx
index 891003cb..5961c82a 100644
--- a/src/UIComponents/SelectDataset.tsx
+++ b/src/UIComponents/SelectDataset.tsx
@@ -7,8 +7,10 @@ import {
   setSelectedJSON,
   resetState,
   getSpecifiedDatasets,
-  setHighlightDataset
+  setHighlightDataset,
+  RootState
 } from "../redux";
+import { Dispatch } from "redux";
 import { parseCSV, MIN_CSV_ROWS, MIN_CSV_COLUMNS } from "../csvReaderWrapper";
 import { parseJSON } from "../jsonReaderWrapper";
 import { getDatasets, getAvailableDatasets } from "../datasetManifest";
@@ -21,13 +23,13 @@ interface SelectDatasetProps {
   setSelectedCSV: (csvfilePath: string | File) => void;
   setSelectedJSON: (jsonfilePath: string) => void;
   setHighlightDataset: (id: string | undefined) => void;
-  csvfile: string | object;
-  jsonfile: string | object;
+  csvfile: string | object | undefined;
+  jsonfile: string | object | undefined;
   resetState: () => void;
   specifiedDatasets: string[] | undefined;
-  name: string;
-  highlightDataset: string;
-  invalidData: string;
+  name: string | undefined;
+  highlightDataset: string | undefined;
+  invalidData: string | undefined;
 }
 
 function SelectDataset({
@@ -44,7 +46,7 @@ function SelectDataset({
   const [, setDownload] = useState(false);
 
   const handleDatasetClick = (id: string) => {
-    const assetPath = (global as any).__ml_playground_asset_public_path__;
+    const assetPath = ((global as unknown) as Record<string, string>).__ml_playground_asset_public_path__;
     const dataset = getDatasets().find(dataset => dataset.id === id);
 
     // Don't process the click if we're just clicking the current
@@ -65,11 +67,11 @@ function SelectDataset({
     }
   };
 
-  const handleUploadSelect = (event: any) => {
+  const handleUploadSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     resetState();
-    setSelectedCSV(event.target.files[0]);
+    setSelectedCSV(event.target.files![0]);
     setDownload(false);
-    parseCSV(event.target.files[0], false, true);
+    parseCSV(event.target.files![0] as unknown as string, false, true);
   };
 
   const getInvalidDataMessage = () => {
@@ -88,7 +90,7 @@ function SelectDataset({
 
   const datasets = getAvailableDatasets(specifiedDatasets);
 
-  const assetPath = (global as any).__ml_playground_asset_public_path__;
+  const assetPath = ((global as unknown) as Record<string, string>).__ml_playground_asset_public_path__;
 
   return (
     <div id="select-dataset" style={styles.panel}>
@@ -157,7 +159,7 @@ function SelectDataset({
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     csvfile: state.csvfile,
     jsonfile: state.jsonfile,
     specifiedDatasets: getSpecifiedDatasets(state),
@@ -165,7 +167,7 @@ export default connect(
     highlightDataset: state.highlightDataset,
     invalidData: state.invalidData
   }),
-  (dispatch: any) => ({
+  (dispatch: Dispatch) => ({
     resetState() {
       dispatch(resetState());
     },
@@ -173,13 +175,13 @@ export default connect(
       dispatch(setSelectedName(name));
     },
     setSelectedCSV(csvfilePath: string | File) {
-      dispatch(setSelectedCSV(csvfilePath as any));
+      dispatch(setSelectedCSV(csvfilePath as string));
     },
     setSelectedJSON(jsonfilePath: string) {
       dispatch(setSelectedJSON(jsonfilePath));
     },
     setHighlightDataset(id: string | undefined) {
-      dispatch(setHighlightDataset(id as any));
+      dispatch(setHighlightDataset(id as string));
     }
   })
 )(SelectDataset);
diff --git a/src/UIComponents/SelectLabelButton.tsx b/src/UIComponents/SelectLabelButton.tsx
index 2d490ce4..4b50a6b3 100644
--- a/src/UIComponents/SelectLabelButton.tsx
+++ b/src/UIComponents/SelectLabelButton.tsx
@@ -1,7 +1,7 @@
 /* React component to handle selecting a column as the label. */
 import { connect } from "react-redux";
+import { RootState, setLabelColumn } from "../redux";
 import { styles } from "../constants";
-import { setLabelColumn } from "../redux";
 import I18n from "../i18n";
 
 interface SelectLabelButtonProps {
@@ -28,7 +28,7 @@ function SelectLabelButton({ column, setLabelColumn }: SelectLabelButtonProps) {
 }
 
 export default connect(
-  (state: any) => ({}),
+  (state: RootState) => ({}),
   dispatch => ({
     setLabelColumn(column: string) {
       dispatch(setLabelColumn(column));
diff --git a/src/UIComponents/Statement.tsx b/src/UIComponents/Statement.tsx
index 388850b2..c776c079 100644
--- a/src/UIComponents/Statement.tsx
+++ b/src/UIComponents/Statement.tsx
@@ -1,6 +1,6 @@
 /* React component to display a statement about our model. */
 import { connect } from "react-redux";
-import { setLabelColumn, removeSelectedFeature } from "../redux";
+import { setLabelColumn, removeSelectedFeature, RootState } from "../redux";
 import { styles } from "../constants";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -10,7 +10,7 @@ import { getLocalizedColumnName } from "../helpers/columnDetails";
 interface StatementProps {
   shouldShow?: boolean;
   smallFont?: boolean;
-  data?: any[];
+  data?: Record<string, string | number>[];
   currentPanel?: string;
   labelColumn?: string;
   selectedFeatures?: string[];
@@ -127,7 +127,7 @@ function Statement({
     } else {
       return part;
     }
-  }).map((part: any, index: number) => {
+  }).map((part: string | React.ReactElement, index: number) => {
     // React wants sibling elements in a list to have a unique "key".
     return (<span key={index}>{part}</span>);
   });
@@ -145,7 +145,7 @@ function Statement({
 export const UnconnectedStatement = Statement;
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     shouldShow: state.data.length !== 0,
     data: state.data,
     currentPanel: state.currentPanel,
diff --git a/src/UIComponents/TrainModel.tsx b/src/UIComponents/TrainModel.tsx
index 90cd33e5..d83f26f4 100644
--- a/src/UIComponents/TrainModel.tsx
+++ b/src/UIComponents/TrainModel.tsx
@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { store } from "../index";
 import train from "../train";
-import { getTableData, readyToTrain } from "../redux";
+import { getTableData, readyToTrain, RootState } from "../redux";
 import { styles, getFadeOpacity } from "../constants";
 import aiBotHead from "@public/images/ai-bot/ai-bot-head.png";
 import aiBotBody from "@public/images/ai-bot/ai-bot-body.png";
@@ -11,14 +11,15 @@ import background from "@public/images/results-background-light.jpg";
 import DataTable from "./DataTable";
 import { TrainingAnimationDescription } from "./AnimationDescriptions";
 import I18n from "../i18n";
+import { DataRow } from "../types";
 
 const framesPerCycle = 80;
 const maxNumItems = 7;
 
 interface TrainModelProps {
-  data: any[] | null;
+  data: DataRow[] | null;
   readyToTrain: boolean;
-  labelColumn: string;
+  labelColumn: string | undefined;
   selectedFeatures: string[];
   instructionsOverlayActive: boolean;
 }
@@ -187,7 +188,7 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
   );
 }
 
-export default connect((state: any) => ({
+export default connect((state: RootState) => ({
   data: getTableData(state, false),
   readyToTrain: readyToTrain(state),
   labelColumn: state.labelColumn,
diff --git a/src/UIComponents/UniqueOptionsWarning.tsx b/src/UIComponents/UniqueOptionsWarning.tsx
index 09814eae..10e128fd 100644
--- a/src/UIComponents/UniqueOptionsWarning.tsx
+++ b/src/UIComponents/UniqueOptionsWarning.tsx
@@ -1,5 +1,6 @@
 /* React component to handle showing warning for excessive unique options. */
 import { connect } from "react-redux";
+import { RootState } from "../redux";
 import { styles, UNIQUE_OPTIONS_MAX } from "../constants";
 import {
   hasTooManyUniqueOptions
@@ -26,7 +27,7 @@ function UniqueOptionsWarning({ showWarning }: UniqueOptionsWarningProps) {
 }
 
 export default connect(
-  (state: any) => ({
+  (state: RootState) => ({
     showWarning: hasTooManyUniqueOptions(state)
   })
 )(UniqueOptionsWarning);
diff --git a/src/assetPath.ts b/src/assetPath.ts
index 7514e5f5..e71fa140 100644
--- a/src/assetPath.ts
+++ b/src/assetPath.ts
@@ -1,5 +1,5 @@
-(global as any).__ml_playground_asset_public_path__ = "./assets/";
+(global as unknown as Record<string, unknown>).__ml_playground_asset_public_path__ = "./assets/";
 
 export const setAssetPath = (path: string): void => {
-  (global as any).__ml_playground_asset_public_path__ = path;
+  (global as unknown as Record<string, unknown>).__ml_playground_asset_public_path__ = path;
 };
diff --git a/src/csvReaderWrapper.ts b/src/csvReaderWrapper.ts
index 3705c475..7f47c00b 100644
--- a/src/csvReaderWrapper.ts
+++ b/src/csvReaderWrapper.ts
@@ -1,4 +1,4 @@
-import Papa from "papaparse";
+import Papa, { ParseResult } from "papaparse";
 import { store } from "./index";
 import {
   setImportedData,
@@ -8,10 +8,11 @@ import {
 } from "./redux";
 import { containsOnlyNumbers } from "./helpers/columnDetails";
 import { ColumnTypes } from "./constants";
+import { DataRow } from "./types";
 
 export const parseCSV = (csvfile: string, download: boolean, useDefaultColumnDataType: boolean): void => {
   Papa.parse(csvfile, {
-    complete: (result: any) => {
+    complete: (result: ParseResult<Record<string, string>>) => {
       updateData(result, useDefaultColumnDataType, !download);
     },
     header: true,
@@ -23,8 +24,8 @@ export const parseCSV = (csvfile: string, download: boolean, useDefaultColumnDat
 export const MIN_CSV_ROWS = 2;
 export const MIN_CSV_COLUMNS = 2;
 
-const cleanData = (data: any[]): any[] => {
-  const cleanedData: any[] = []
+const cleanData = (data: Record<string, string>[]): DataRow[] => {
+  const cleanedData: DataRow[] = []
 
   for (const row of data) {
     const cleanedRow = getCleanedRow(row);
@@ -36,7 +37,7 @@ const cleanData = (data: any[]): any[] => {
   return cleanedData;
 }
 
-const getCleanedRow = (row: any): any | null => {
+const getCleanedRow = (row: Record<string, string>): DataRow | null => {
   for (const column in row) {
     if (column !== "__parsed_extra") {
       const cellValue = row[column];
@@ -52,11 +53,11 @@ const getCleanedRow = (row: any): any | null => {
   return row;
 }
 
-const isCellValid = (cell: any): boolean => {
+const isCellValid = (cell: string | undefined): boolean => {
   return cell !== undefined && cell !== "" && typeof cell === "string";
 }
 
-const updateData = (result: any, useDefaultColumnDataType: boolean, userUploadedData: boolean): void => {
+const updateData = (result: ParseResult<Record<string, string>>, useDefaultColumnDataType: boolean, userUploadedData: boolean): void => {
   const data = result.data;
   const cleanedData = cleanData(data);
 
@@ -75,12 +76,12 @@ const updateData = (result: any, useDefaultColumnDataType: boolean, userUploaded
   }
 }
 
-const countRemovedRows = (originalData: any[], cleanedData: any[]): void => {
+const countRemovedRows = (originalData: Record<string, string>[], cleanedData: DataRow[]): void => {
   const removedRowsCount = originalData.length - cleanedData.length;
   store.dispatch(setRemovedRowsCount(removedRowsCount));
 }
 
-const setDefaultColumnDataType = (data: any[]): void => {
+const setDefaultColumnDataType = (data: DataRow[]): void => {
   const columns = Object.keys(data[0]);
   for (const column of columns) {
     if (containsOnlyNumbers(data, column)) {
diff --git a/src/datasetManifest.ts b/src/datasetManifest.ts
index 57e7fe5c..e3574e4b 100644
--- a/src/datasetManifest.ts
+++ b/src/datasetManifest.ts
@@ -5,7 +5,7 @@ export interface Dataset {
   id: string;
   name: string;
   isToy?: boolean;
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 // Cached copy of the localized datasets manifest.
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
index ecb088af..260a0de2 100644
--- a/src/declarations.d.ts
+++ b/src/declarations.d.ts
@@ -1,3 +1,5 @@
+import { ComponentType } from "react";
+
 declare module "*.png" {
   const src: string;
   export default src;
@@ -14,29 +16,48 @@ declare module "*.css" {
 }
 
 declare module "react-chartjs-2" {
-  export const Bar: any;
-  export const Scatter: any;
+  export const Bar: ComponentType<{
+    data: object;
+    width?: number;
+    height?: number;
+    options?: object;
+  }>;
+  export const Scatter: ComponentType<{
+    data: object;
+    options?: object;
+  }>;
 }
 
 declare module "ml-knn" {
   export default class KNN {
-    constructor(dataset: number[][], labels: any[], options?: { k?: number });
-    predict(dataset: number[][]): any[];
+    constructor(dataset: number[][], labels: (number | string)[], options?: { k?: number });
+    predict(dataset: number[][]): (number | string)[];
+    toJSON(): object;
   }
 }
 
 declare module "react-papaparse" {
-  export const CSVReader: any;
+  export const CSVReader: ComponentType<{
+    onFileLoaded?: (data: Record<string, string>[], fileInfo: object) => void;
+    onError?: (error: Error) => void;
+    parserOptions?: object;
+    cssClass?: string;
+    label?: string;
+  }>;
 }
 
 declare module "query-string" {
-  const queryString: any;
-  export default queryString;
+  export function parse(query: string): Record<string, string | string[] | null | undefined>;
+  export function stringify(obj: Record<string, unknown>): string;
 }
 
 declare module "messageformat" {
   export default class MessageFormat {
     constructor(locale: string);
-    compile(message: string | Record<string, any>): Record<string, any>;
+    compile(message: string | Record<string, unknown>): Record<string, unknown>;
   }
 }
+
+interface Window {
+  ga?: (...args: unknown[]) => void;
+}
diff --git a/src/helpers/accuracy.ts b/src/helpers/accuracy.ts
index 02e47397..7c7d70ee 100644
--- a/src/helpers/accuracy.ts
+++ b/src/helpers/accuracy.ts
@@ -16,11 +16,12 @@ import {
   getConvertedLabels,
   getConvertedAccuracyCheckExamples
 } from "./valueConversion";
-import { isRegression } from "../redux"
+import { isRegression, RootState } from "../redux";
+import { ResultsData, DataRow } from "../types";
 
 // Return results data so that it looks like regular data provided to the
 // DataTable.
-export function getResultsDataInDataTableForm(state: any): Record<string, any>[] | null {
+export function getResultsDataInDataTableForm(state: RootState): DataRow[] | null {
   const resultsByGrades = getAllResults(state);
 
   if (!resultsByGrades || resultsByGrades.examples.length === 0) {
@@ -31,7 +32,7 @@ export function getResultsDataInDataTableForm(state: any): Record<string, any>[]
   // items.  Increase the value here if they do.
   const numItems = Math.min(10, resultsByGrades.examples.length);
 
-  const results: Record<string, any>[] = [];
+  const results: DataRow[] = [];
   for (let i = 0; i < numItems; i++) {
     results[i] = {};
 
@@ -39,67 +40,60 @@ export function getResultsDataInDataTableForm(state: any): Record<string, any>[]
       results[i][feature] = resultsByGrades.examples[i][index];
     })
 
-    results[i][state.labelColumn] = resultsByGrades.predictedLabels[i];
+    results[i][state.labelColumn!] = resultsByGrades.predictedLabels[i];
   }
 
   return results;
 }
 
-export function getAllResults(state: any): any {
+export function getAllResults(state: RootState): ResultsData {
   return getResultsByGrade(state, ResultsGrades.ALL);
 }
 
-export function getCorrectResults(state: any): any {
+export function getCorrectResults(state: RootState): ResultsData {
   return getResultsByGrade(state, ResultsGrades.CORRECT);
 }
 
-export function getIncorrectResults(state: any): any {
+export function getIncorrectResults(state: RootState): ResultsData {
   return getResultsByGrade(state, ResultsGrades.INCORRECT);
 }
 
-export function getResultsByGrade(state: any, grade: string): any {
-  const results: any = {};
+export function getResultsByGrade(state: RootState, grade: string): ResultsData {
   const accuracyGrades = getAccuracyGrades(state);
-  const examples = getConvertedAccuracyCheckExamples(state).filter((example: any, index: number) => {
+  const examples = getConvertedAccuracyCheckExamples(state).filter((_example: (string | number)[], index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
-  const labels = getConvertedLabels(state, state.accuracyCheckLabels).filter((example: any, index: number) => {
+  const labels = getConvertedLabels(state, state.accuracyCheckLabels).filter((_label: string | number, index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
-  const predictedLabels = getConvertedLabels(state, state.accuracyCheckPredictedLabels).filter((example: any, index: number) => {
+  const predictedLabels = getConvertedLabels(state, state.accuracyCheckPredictedLabels).filter((_label: string | number, index: number) => {
     return grade === ResultsGrades.ALL || grade === accuracyGrades[index];
   });
-  results.examples = examples;
-  results.labels = labels;
-  results.predictedLabels = predictedLabels;
-  return results;
+  return { examples, labels, predictedLabels };
 }
 
-export function getAccuracyGrades(state: any): string[] {
+export function getAccuracyGrades(state: RootState): string[] {
   const grades = isRegression(state)
     ? getAccuracyRegression(state).grades
     : getAccuracyClassification(state).grades;
   return grades;
 }
 
-export function getSummaryStat(state: any): { type: string; stat: string } {
-  const summaryStat: any = {};
-  summaryStat.type = isRegression(state)
-    ? MLTypes.REGRESSION
-    : MLTypes.CLASSIFICATION;
-  summaryStat.stat = getPercentCorrect(state);
-  return summaryStat;
+export function getSummaryStat(state: RootState): { type: string; stat: string } {
+  return {
+    type: isRegression(state) ? MLTypes.REGRESSION : MLTypes.CLASSIFICATION,
+    stat: getPercentCorrect(state)
+  };
 }
 
-export function getPercentCorrect(state: any): string {
+export function getPercentCorrect(state: RootState): string {
   const percentCorrect = isRegression(state)
     ? getAccuracyRegression(state).percentCorrect
     : getAccuracyClassification(state).percentCorrect;
   return percentCorrect;
 }
 
-export function getAccuracyClassification(state: any): { percentCorrect: string; grades: string[] } {
-  const accuracy: any = {};
+export function getAccuracyClassification(state: RootState): { percentCorrect: string; grades: string[] } {
   let numCorrect = 0;
   const grades = [];
   const numPredictedLabels = state.accuracyCheckPredictedLabels
@@ -116,23 +110,21 @@ export function getAccuracyClassification(state: any): { percentCorrect: string;
       grades.push(ResultsGrades.INCORRECT);
     }
   }
-  accuracy.percentCorrect = ((numCorrect / numPredictedLabels) * 100).toFixed(
-    2
-  );
-  accuracy.grades = grades;
-  return accuracy;
+  return {
+    percentCorrect: ((numCorrect / numPredictedLabels) * 100).toFixed(2),
+    grades
+  };
 }
 
-export function getAccuracyRegression(state: any): { percentCorrect: string; grades: string[] } {
-  const accuracy: any = {};
+export function getAccuracyRegression(state: RootState): { percentCorrect: string; grades: string[] } {
   let numCorrect = 0;
-  const grades = [];
-  const range = getExtrema(state.data, state.labelColumn).range;
+  const grades: string[] = [];
+  const range = getExtrema(state.data, state.labelColumn!).range;
   const errorTolerance = (range * REGRESSION_ERROR_TOLERANCE) / 100;
   const numPredictedLabels = state.accuracyCheckPredictedLabels.length;
   for (let i = 0; i < numPredictedLabels; i++) {
     const diff = Math.abs(
-      state.accuracyCheckLabels[i] - state.accuracyCheckPredictedLabels[i]
+      Number(state.accuracyCheckLabels[i]) - Number(state.accuracyCheckPredictedLabels[i])
     );
     if (diff <= errorTolerance) {
       numCorrect++;
@@ -141,9 +133,8 @@ export function getAccuracyRegression(state: any): { percentCorrect: string; gra
       grades.push(ResultsGrades.INCORRECT);
     }
   }
-  accuracy.percentCorrect = ((numCorrect / numPredictedLabels) * 100).toFixed(
-    2
-  );
-  accuracy.grades = grades;
-  return accuracy;
+  return {
+    percentCorrect: ((numCorrect / numPredictedLabels) * 100).toFixed(2),
+    grades
+  };
 }
diff --git a/src/helpers/columnDetails.ts b/src/helpers/columnDetails.ts
index 1c5157c7..c65848c2 100644
--- a/src/helpers/columnDetails.ts
+++ b/src/helpers/columnDetails.ts
@@ -3,6 +3,8 @@ import I18n from "../i18n";
 /* Helper functions for getting information about a column and its data. */
 
 import { ColumnTypes, UNIQUE_OPTIONS_MAX } from "../constants";
+import { RootState } from "../redux";
+import { DataRow, Metadata, MetadataField, TrainedModelDetailsSave, ModelCardColumn } from "../types";
 
 export interface Extrema {
   max: number;
@@ -10,11 +12,11 @@ export interface Extrema {
   range: number;
 }
 
-export function isColumnCategorical(state: any, column: string): boolean {
+export function isColumnCategorical(state: RootState, column: string): boolean {
   return (state.columnsByDataType[column] === ColumnTypes.CATEGORICAL);
 }
 
-export function isColumnNumerical(state: any, column: string): boolean {
+export function isColumnNumerical(state: RootState, column: string): boolean {
   return (state.columnsByDataType[column] === ColumnTypes.NUMERICAL);
 }
 
@@ -32,33 +34,34 @@ export function tooManyUniqueOptions(uniqueOptionsCount: number): boolean {
   return uniqueOptionsCount > UNIQUE_OPTIONS_MAX;
 }
 
-export function getUniqueOptions(data: Record<string, any>[], column: string): any[] {
+export function getUniqueOptions(data: DataRow[], column: string): (string | number)[] {
   const columnData = getColumnData(data, column);
   return Array.from(new Set(columnData)).filter(
     option => option !== undefined && option !== ""
   );
 }
 
-export function isColumnReadOnly(metadata: any, column: string): boolean {
+export function isColumnReadOnly(metadata: Metadata, column: string): boolean {
   const metadataColumnType =
     column &&
     metadata &&
     metadata.fields &&
-    metadata.fields.find((field: any) => {
+    metadata.fields.find((field: MetadataField) => {
       return field.id === column;
-    }).type;
+    })?.type;
   return !!metadataColumnType;
 }
 
-function getColumnData(data: Record<string, any>[], column: string): any[] {
+function getColumnData(data: DataRow[], column: string): (string | number)[] {
   return data.map(row => row[column]);
 }
 
-export function getExtrema(data: Record<string, any>[], column: string): Extrema {
+export function getExtrema(data: DataRow[], column: string): Extrema {
   const columnData = getColumnData(data, column);
+  const numericData = columnData.map(Number);
   const extrema: Extrema = {
-    max: Math.max(...columnData),
-    min: Math.min(...columnData),
+    max: Math.max(...numericData),
+    min: Math.min(...numericData),
     range: 0
   };
   extrema.range = Math.abs(extrema.max - extrema.min);
@@ -66,23 +69,23 @@ export function getExtrema(data: Record<string, any>[], column: string): Extrema
   return extrema;
 }
 
-export function containsOnlyNumbers(data: Record<string, any>[], column: string): boolean {
+export function containsOnlyNumbers(data: DataRow[], column: string): boolean {
   const columnData = getColumnData(data, column);
-  return columnData.every(cell => !isNaN(cell));
+  return columnData.every(cell => !isNaN(Number(cell)));
 }
 
-export function getColumnDescription(columnId: string, metadata: any, trainedModelDetails: any): string | null {
+export function getColumnDescription(columnId: string, metadata: Metadata, trainedModelDetails: TrainedModelDetailsSave): string | null {
   // Use metadata if available.
   if (columnId && metadata && metadata.fields) {
-    const field = metadata.fields.find((field: any) => {
+    const field = metadata.fields.find((field: MetadataField) => {
       return field.id === columnId;
     });
-    return getLocalizedColumnDescription(metadata.name, columnId, field.description);
+    return getLocalizedColumnDescription(metadata.name!, columnId, field?.description ?? "");
   }
 
   // Try using a user-entered column description if available.
   if (trainedModelDetails && trainedModelDetails.columns) {
-    const matchedColumn = trainedModelDetails.columns.find((column: any) => {
+    const matchedColumn = trainedModelDetails.columns.find((column: { id: string; description: string }) => {
       return column.id === columnId;
     });
     if (matchedColumn) {
@@ -104,21 +107,20 @@ export function getColumnDescription(columnId: string, metadata: any, trainedMod
     ...
   }
   */
-export function buildOptionNumberKey(state: any, feature: string): Record<string, number> {
+export function buildOptionNumberKey(state: RootState, feature: string): Record<string, number> {
   const optionsMappedToNumbers: Record<string, number> = {};
   const uniqueOptions = getUniqueOptions(state.data, feature);
   uniqueOptions.forEach(
-    (option: any) => (optionsMappedToNumbers[option] = uniqueOptions.indexOf(option))
+    (option: string | number) => (optionsMappedToNumbers[String(option)] = uniqueOptions.indexOf(option))
   );
   return optionsMappedToNumbers;
 }
 
-export function getColumnDataToSave(state: any, column: string): any {
-  const columnData: any = {};
-  columnData.id = column;
-  columnData.description = getColumnDescription(column, state.metadata, state.trainedModelDetails);
+export function getColumnDataToSave(state: RootState, column: string): ModelCardColumn {
+  const columnData: ModelCardColumn = { id: column };
+  columnData.description = getColumnDescription(column, state.metadata, state.trainedModelDetails) ?? undefined;
   if (isColumnCategorical(state, column)) {
-    columnData.values = getUniqueOptions(state.data, column);
+    columnData.values = getUniqueOptions(state.data, column).map(String);
   } else if (isColumnNumerical(state, column)) {
     const {max, min} = getExtrema(state.data, column);
     columnData.max = max;
diff --git a/src/helpers/datasetDetails.ts b/src/helpers/datasetDetails.ts
index 36f3b065..56698953 100644
--- a/src/helpers/datasetDetails.ts
+++ b/src/helpers/datasetDetails.ts
@@ -1,9 +1,10 @@
 import I18n from "../i18n";
 import { DatasetDetails } from "../types";
+import { RootState } from "../redux";
 
 /* Helper functions for getting information about the selected dataset. */
 
-export function getDatasetDetails(state: any): DatasetDetails {
+export function getDatasetDetails(state: RootState): DatasetDetails {
   const datasetDetails: DatasetDetails = {
     name: state.metadata && state.metadata.name,
     description: getDatasetDescription(state),
@@ -15,16 +16,16 @@ export function getDatasetDetails(state: any): DatasetDetails {
   return datasetDetails;
 }
 
-function getCardContextAttr(state: any, attr: string): string | undefined {
+function getCardContextAttr(state: RootState, attr: string): string | undefined {
   if (
     state.metadata &&
     state.metadata.name &&
     state.metadata.card &&
     state.metadata.card.context &&
-    state.metadata.card.context[attr]
+    state.metadata.card.context[attr as keyof typeof state.metadata.card.context]
   ) {
     const datasetId = state.metadata.name;
-    const fallback = state.metadata.card.context[attr];
+    const fallback = state.metadata.card.context[attr as keyof typeof state.metadata.card.context]!;
     return I18n.t(attr,
       {
         scope: ["datasets", datasetId, "card", "context"],
@@ -34,15 +35,15 @@ function getCardContextAttr(state: any, attr: string): string | undefined {
   }
   return undefined;
 }
-function getPotentialUses(state: any): string | undefined {
+function getPotentialUses(state: RootState): string | undefined {
   return getCardContextAttr(state, "potentialUses");
 }
 
-function getPotentialMisuses(state: any): string | undefined {
+function getPotentialMisuses(state: RootState): string | undefined {
   return getCardContextAttr(state, "potentialMisuses");
 }
 
-export function getDatasetDescription(state: any): string | undefined {
+export function getDatasetDescription(state: RootState): string | undefined {
   // If this a dataset from the internal collection that already has a description, use that.
   if (
     state.metadata &&
@@ -68,7 +69,7 @@ export function getDatasetDescription(state: any): string | undefined {
   }
 }
 
-export function isUserUploadedDataset(state: any): boolean {
+export function isUserUploadedDataset(state: RootState): boolean {
   // The csvfile for internally curated datasets are strings; those uploaded by
   // users are objects. Use data type as a proxy to know which case we're in.
   return typeof state.csvfile === "object" && state.csvfile !== null;
diff --git a/src/helpers/metrics.ts b/src/helpers/metrics.ts
index 7571ae68..f6db62a1 100644
--- a/src/helpers/metrics.ts
+++ b/src/helpers/metrics.ts
@@ -3,9 +3,10 @@
 */
 import { isUserUploadedDataset } from "./datasetDetails";
 import { getPercentCorrect } from './accuracy';
+import { RootState } from "../redux";
 
-function getModelMetrics(state: any): Record<string, any> {
-  const modelMetrics: Record<string, any> = {};
+function getModelMetrics(state: RootState): Record<string, unknown> {
+  const modelMetrics: Record<string, unknown> = {};
   modelMetrics.userUploaded = isUserUploadedDataset(state);
   modelMetrics.datasetName = state.metadata.name;
   modelMetrics.features = state.selectedFeatures;
@@ -14,16 +15,18 @@ function getModelMetrics(state: any): Record<string, any> {
   return modelMetrics;
 }
 
-export function logFirehoseMetric(action: string, state: any): any {
-  return state.firehoseMetricsLogger(action, getModelMetrics(state));
+export function logFirehoseMetric(action: string, state: RootState): void {
+  if (state.firehoseMetricsLogger) {
+    state.firehoseMetricsLogger(action, getModelMetrics(state));
+  }
 }
 
 export function reportPanelView(panel: string): void {
-  if (!(window as any).ga || !panel) {
+  if (!window.ga || !panel) {
     return;
   }
   // Record each panel as a different page view in Google Analytics.
   const syntheticPagePath = window.location.pathname + '/' + panel;
-  (window as any).ga('set', 'page', syntheticPagePath);
-  (window as any).ga('send', 'pageview');
+  window.ga('set', 'page', syntheticPagePath);
+  window.ga('send', 'pageview');
 }
diff --git a/src/helpers/navigationValidation.ts b/src/helpers/navigationValidation.ts
index 22b989a6..014eb3f3 100644
--- a/src/helpers/navigationValidation.ts
+++ b/src/helpers/navigationValidation.ts
@@ -1,4 +1,6 @@
 import I18n from "../i18n";
+import { RootState } from "../redux";
+import { NavButton, PrevNextButtons } from "../types";
 /*
 Validation checks to determine if app set up is ready for machine learning
 training. Panels prompt users to incrementally complete actions in preparation
@@ -22,7 +24,7 @@ const panelList = [
 
 // Is a panel ready to be visited?  This determines whether a visible
 // nav button is enabled or disabled.
-export function isPanelEnabled(state: any, panelId: string): boolean {
+export function isPanelEnabled(state: RootState, panelId: string): boolean {
   if (panelId === "dataDisplayLabel") {
     if (!isDataUploaded(state)) {
       return false;
@@ -68,7 +70,7 @@ export function isPanelEnabled(state: any, panelId: string): boolean {
 
 // Is a panel available to be shown?  This determines what panels
 // can possibly be visited in the app.
-function isPanelAvailable(state: any, panelId: string): boolean {
+function isPanelAvailable(state: RootState, panelId: string): boolean {
   const mode = state.mode;
 
   if (panelId === "selectDataset") {
@@ -92,38 +94,38 @@ function isPanelAvailable(state: any, panelId: string): boolean {
   return true;
 }
 
-function isDataUploaded(state: any): boolean {
+function isDataUploaded(state: RootState): boolean {
   return state.data.length > 0 && !state.invalidData;
 }
 
-function minOneFeatureSelected(state: any): boolean {
+function minOneFeatureSelected(state: RootState): boolean {
   return state.selectedFeatures.length !== 0;
 }
 
-function labelSelected(state: any): boolean {
+function labelSelected(state: RootState): boolean {
   return !!state.labelColumn;
 }
 
-export function uniqLabelFeaturesSelected(state: any): boolean {
+export function uniqLabelFeaturesSelected(state: RootState): boolean {
   return (
     minOneFeatureSelected(state) &&
     labelSelected(state) &&
-    !state.selectedFeatures.includes(state.labelColumn)
+    !state.selectedFeatures.includes(state.labelColumn!)
   );
 }
 
-function resultsAvailable(state: any): boolean {
+function resultsAvailable(state: RootState): boolean {
   if (state.accuracyCheckExamples.length === 0) {
     return false;
   }
   return !didSaveSucceed(state) || !isSaveInProgress(state);
 }
 
-function isSaveInProgress(state: any): boolean {
+function isSaveInProgress(state: RootState): boolean {
   return state.saveStatus === "started";
 }
 
-function didSaveSucceed(state: any): boolean {
+function didSaveSucceed(state: RootState): boolean {
   return state.saveStatus === "success";
 }
 
@@ -135,17 +137,17 @@ export function shouldDisplaySaveStatus(saveStatus: string): boolean {
   return ["success", "failure", "started", "piiProfanity"].includes(saveStatus);
 }
 
-function isModelNamed(state: any): boolean {
+function isModelNamed(state: RootState): boolean {
   return ![undefined, ""].includes(state.trainedModelDetails.name);
 }
 
-function isAccuracyAcceptable(state: any): boolean {
+function isAccuracyAcceptable(state: RootState): boolean {
   const mode = state.mode;
 
   if (
     mode &&
     mode.requireAccuracy &&
-    mode.requireAccuracy > state.historicResults[0].accuracy
+    mode.requireAccuracy > Number(state.historicResults[0].accuracy)
   ) {
     return false;
   }
@@ -154,18 +156,7 @@ function isAccuracyAcceptable(state: any): boolean {
 }
 
 // Given the current panel, return the appropriate previous & next buttons.
-interface NavButton {
-  panel: string;
-  text: string | undefined;
-  enabled?: boolean;
-}
-
-interface PrevNextButtons {
-  prev: NavButton | null | undefined;
-  next: NavButton | null | undefined;
-}
-
-export function prevNextButtons(state: any): PrevNextButtons {
+export function prevNextButtons(state: RootState): PrevNextButtons {
   let prev: NavButton | null | undefined, next: NavButton | null | undefined;
 
   if (state.currentPanel === "selectDataset") {
diff --git a/src/helpers/utils.ts b/src/helpers/utils.ts
index d238a405..579c6e26 100644
--- a/src/helpers/utils.ts
+++ b/src/helpers/utils.ts
@@ -1,14 +1,14 @@
 /* Generic helper functions. */
 
-export function getKeyByValue(object: Record<string, any>, value: any): string | undefined {
+export function getKeyByValue(object: Record<string, number>, value: number): string | undefined {
   return Object.keys(object).find(key => object[key] === value);
 }
 
-export function isEmpty(object: Record<string, any>): boolean {
+export function isEmpty(object: Record<string, unknown>): boolean {
   return Object.keys(object).length === 0;
 }
 
-export function areArraysEqual(array1: any[], array2: any[]): boolean {
+export function areArraysEqual<T>(array1: T[], array2: T[]): boolean {
   return (
     array1.length === array2.length &&
     array1.every((value, index) => {
@@ -17,7 +17,7 @@ export function areArraysEqual(array1: any[], array2: any[]): boolean {
   );
 }
 
-export function arrayIntersection(array1: any[], array2: any[]): any[] {
+export function arrayIntersection<T>(array1: T[], array2: T[]): T[] {
   return array1.filter(value => array2.includes(value));
 }
 
diff --git a/src/helpers/valueConversion.ts b/src/helpers/valueConversion.ts
index bcfc4ec2..8edaff41 100644
--- a/src/helpers/valueConversion.ts
+++ b/src/helpers/valueConversion.ts
@@ -5,44 +5,45 @@
 */
 import { isEmpty, getKeyByValue } from "./utils";
 import { getSelectedCategoricalColumns } from "../selectors";
+import { RootState } from "../redux";
 
 // Take a ML-friendly integer and convert to human-readable string.
-export function convertValueForDisplay(state: any, value: any, column: string): any {
+export function convertValueForDisplay(state: RootState, value: string | number, column: string): string | number {
   const convertedValue =
     getSelectedCategoricalColumns(state).includes(column) &&
     !isEmpty(state.featureNumberKey)
-      ? getKeyByValue(state.featureNumberKey[column], value)
+      ? getKeyByValue(state.featureNumberKey[column], value as number)
       : value;
-  return convertedValue;
+  return convertedValue ?? value;
 }
 
 // Take a human-readable string and convert to a ML-friendly integer.
-export function convertValueForTraining(state: any, value: any, column: string): number {
+export function convertValueForTraining(state: RootState, value: string | number, column: string): number {
   const convertedValue = getSelectedCategoricalColumns(state).includes(column)
-    ? state.featureNumberKey[column][value]
-    : parseFloat(value);
+    ? state.featureNumberKey[column][String(value)]
+    : parseFloat(String(value));
   return convertedValue;
 }
 
-export function getConvertedPredictedLabel(state: any): any {
+export function getConvertedPredictedLabel(state: RootState): string | number {
   return convertValueForDisplay(
     state,
-    state.prediction,
-    state.labelColumn
+    state.prediction as string | number,
+    state.labelColumn!
   );
 }
 
-export function getConvertedLabels(state: any, rawLabels: any[] = []): any[] {
+export function getConvertedLabels(state: RootState, rawLabels: (number | string)[] = []): (string | number)[] {
   return rawLabels.map(label =>
-    convertValueForDisplay(state, label, state.labelColumn)
+    convertValueForDisplay(state, label, state.labelColumn!)
   );
 }
 
-export function getConvertedAccuracyCheckExamples(state: any): any[][] {
-  const convertedAccuracyCheckExamples = [];
-  let example;
+export function getConvertedAccuracyCheckExamples(state: RootState): (string | number)[][] {
+  const convertedAccuracyCheckExamples: (string | number)[][] = [];
+  let example: number[];
   for (example of state.accuracyCheckExamples) {
-    const convertedAccuracyCheckExample = [];
+    const convertedAccuracyCheckExample: (string | number)[] = [];
     for (let i = 0; i < state.selectedFeatures.length; i++) {
       convertedAccuracyCheckExample.push(
         convertValueForDisplay(
diff --git a/src/i18n.ts b/src/i18n.ts
index da70a859..d64e37d5 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -1,9 +1,9 @@
 import uiStrings from '../i18n/mlPlayground.json';
 import MessageFormat from 'messageformat'
 
-let messages: Record<string, any> | undefined;
+let messages: Record<string, unknown> | undefined;
 
-const initI18n = (i18n: Record<string, any> = {}): void => {
+const initI18n = (i18n: Record<string, unknown> = {}): void => {
   // For now, use English pluralization rules.
   const mf = new MessageFormat('en');
   messages = {...mf.compile(uiStrings), ...i18n};
@@ -21,7 +21,7 @@ const initI18n = (i18n: Record<string, any> = {}): void => {
 interface I18nOptions {
   default?: string;
   scope?: string[];
-  [key: string]: any;
+  [key: string]: unknown;
 }
 
 const t = (key: string, options: I18nOptions = {}): string | undefined => {
@@ -32,10 +32,10 @@ const t = (key: string, options: I18nOptions = {}): string | undefined => {
   const defaultValue = options["default"];
 
   const scope = options["scope"] || [];
-  let scopedMessages = messages;
+  let scopedMessages: Record<string, unknown> | undefined = messages;
   scope.forEach(s => {
     if (scopedMessages !== undefined) {
-      scopedMessages = scopedMessages[s];
+      scopedMessages = scopedMessages[s] as Record<string, unknown> | undefined;
     }
   });
 
@@ -49,7 +49,7 @@ const t = (key: string, options: I18nOptions = {}): string | undefined => {
     return defaultValue;
   }
 
-  return scopedMessages[key](options);
+  return (scopedMessages[key] as (opts: I18nOptions) => string)(options);
 };
 
 /*
diff --git a/src/index.tsx b/src/index.tsx
index 2f8b255f..0e471452 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,24 +13,25 @@ import rootReducer, {
   setInstructionsDismissed,
   setFirehoseMetricsLogger
 } from "./redux";
-import { getDatasets } from "./datasetManifest";
+import { getDatasets, Dataset } from "./datasetManifest";
 import { parseCSV } from "./csvReaderWrapper";
 import { parseJSON } from "./jsonReaderWrapper";
 import { TestDataLocations } from "./constants";
 import I18n from "./i18n";
+import { Mode, ModelDataToSave, SaveResponse } from "./types";
 
 export const store = createStore(rootReducer);
 
-let saveTrainedModel: ((dataToSave: any, callback: (response: any) => void) => void) | null | undefined = null;
+let saveTrainedModel: ((dataToSave: ModelDataToSave, callback: (response: SaveResponse) => void) => void) | null | undefined = null;
 let onContinue: (() => void) | null | undefined = null;
 
 interface InitAllOptions {
-  i18n?: any;
-  mode?: any;
+  i18n?: Record<string, string>;
+  mode?: Mode;
   onContinue?: () => void;
-  saveTrainedModel?: (dataToSave: any, callback: (response: any) => void) => void;
-  logMetric?: (...args: any[]) => void;
-  setInstructionsKey?: (...args: any[]) => void;
+  saveTrainedModel?: (dataToSave: ModelDataToSave, callback: (response: SaveResponse) => void) => void;
+  logMetric?: (eventName: string, details: Record<string, unknown>) => void;
+  setInstructionsKey?: (key: string, options: { showOverlay?: boolean } | null) => void;
 }
 
 /**
@@ -43,11 +44,13 @@ export const initAll = function (options: InitAllOptions): void {
   const mode = options && options.mode;
   onContinue = options && options.onContinue;
   saveTrainedModel = options && options.saveTrainedModel;
-  store.dispatch(setFirehoseMetricsLogger(options && options.logMetric));
-  store.dispatch(
-    setInstructionsKeyCallback(options && options.setInstructionsKey)
-  );
-  store.dispatch(setMode(mode));
+  if (options && options.logMetric) {
+    store.dispatch(setFirehoseMetricsLogger(options.logMetric));
+  }
+  if (options && options.setInstructionsKey) {
+    store.dispatch(setInstructionsKeyCallback(options.setInstructionsKey));
+  }
+  store.dispatch(setMode(mode as Mode));
   processMode(mode);
 
   const root = createRoot(document.getElementById("root")!);
@@ -66,15 +69,15 @@ export const instructionsDismissed = function(): void {
 }
 
 // Process an optional mode.
-const processMode = (mode: any): void => {
-  const assetPath = (global as any).__ml_playground_asset_public_path__;
+const processMode = (mode: Mode | undefined): void => {
+  const assetPath = ((global as unknown) as Record<string, string>).__ml_playground_asset_public_path__;
   let panelSet = false;
 
   if (mode) {
     // Load a single dataset immediately.
     if (mode.datasets && mode.datasets.length === 1) {
-      const item = getDatasets().filter((item: any) => {
-        return item.id === mode.datasets[0];
+      const item = getDatasets().filter((item: Dataset) => {
+        return item.id === mode.datasets![0];
       })[0];
       store.dispatch(setSelectedCSV(assetPath + item.path));
       store.dispatch(setSelectedJSON(assetPath + item.metadataPath));
@@ -102,9 +105,9 @@ const processMode = (mode: any): void => {
 };
 
 // Do the asynchronous save of a model.
-const startSaveTrainedModel = (dataToSave: any): void => {
+const startSaveTrainedModel = (dataToSave: ModelDataToSave): void => {
   store.dispatch(setSaveStatus("started"));
-  saveTrainedModel!(dataToSave, (response: any) => {
+  saveTrainedModel!(dataToSave, (response: SaveResponse) => {
     store.dispatch(setSaveStatus(response.status, response.data));
     if (response.status === "success") {
       store.dispatch(setCurrentPanel("modelSummary"));
diff --git a/src/indexDev.tsx b/src/indexDev.tsx
index afbe3cec..2b91bb37 100644
--- a/src/indexDev.tsx
+++ b/src/indexDev.tsx
@@ -1,6 +1,7 @@
 import "./assetPath";
 import { initAll, instructionsDismissed } from "./index";
 import queryString from "query-string";
+import { ModelDataToSave, SaveResponse } from "./types";
 
 interface SampleMode {
   datasets?: string[];
@@ -102,22 +103,22 @@ const sampleModes: Record<string, SampleMode> = {
 
 // Look for a ?mode= parameter on the URL
 const parameters = queryString.parse(location.search);
-const mode = parameters["mode"] ? sampleModes[parameters["mode"] as string] : null;
+const mode = parameters["mode"] ? sampleModes[parameters["mode"] as string] : undefined;
 
 function onContinueStub(): void {
   console.log("This would continue to the next level.");
 }
 
-function saveTrainedModelStub(data: any, response: (result: any) => void): void {
+function saveTrainedModelStub(data: ModelDataToSave, response: (result: SaveResponse) => void): void {
   console.log("This would save a trained model.", data);
   setTimeout(() => response({ id: 303, status: "success" }), 2000);
 }
 
-function logMetricStub(eventName: string, details: any): void {
+function logMetricStub(eventName: string, details: Record<string, unknown>): void {
   console.log(`This would log a metric for ${eventName}.`, details);
 }
 
-function setInstructionsKeyStub(instructionsKey: string, options: any): void {
+function setInstructionsKeyStub(instructionsKey: string, options: { showOverlay?: boolean } | null): void {
   const element = document.getElementById("instructions")!;
 
   element.innerText =
diff --git a/src/jsonReaderWrapper.ts b/src/jsonReaderWrapper.ts
index 55a3d6b1..68551c33 100644
--- a/src/jsonReaderWrapper.ts
+++ b/src/jsonReaderWrapper.ts
@@ -5,6 +5,7 @@ import {
   setLabelColumn
 } from "./redux";
 import { ColumnTypes } from "./constants";
+import { Metadata } from "./types";
 
 export const parseJSON = (jsonfile: string): void => {
   const rawFile = new XMLHttpRequest();
@@ -19,17 +20,19 @@ export const parseJSON = (jsonfile: string): void => {
 };
 
 const updateData = (result: string): void => {
-  const metadata = JSON.parse(result);
+  const metadata: Metadata = JSON.parse(result);
   store.dispatch(setImportedMetadata(metadata));
 
   const state = store.getState();
 
-  for (const field of metadata.fields) {
-    const fieldType = field.type ? field.type : ColumnTypes.CATEGORICAL;
-    store.dispatch(setColumnsByDataType(field.id, fieldType));
+  if (metadata.fields) {
+    for (const field of metadata.fields) {
+      const fieldType = field.type ? field.type : ColumnTypes.CATEGORICAL;
+      store.dispatch(setColumnsByDataType(field.id!, fieldType));
+    }
   }
 
-  if (state.mode && state.mode.hideSelectLabel) {
+  if (state.mode && state.mode.hideSelectLabel && metadata.defaultLabelColumn) {
     // Use the manifest's default label instead.
     store.dispatch(setLabelColumn(metadata.defaultLabelColumn));
   }
diff --git a/src/redux.ts b/src/redux.ts
index 57214861..7eff7b1e 100644
--- a/src/redux.ts
+++ b/src/redux.ts
@@ -19,6 +19,18 @@ import {
   TestDataLocations,
   ResultsGrades
 } from "./constants";
+import {
+  DataRow,
+  Metadata,
+  Mode,
+  TrainedModelDetailsSave,
+  SaveResponseData,
+  HistoricResult,
+  ModelCardColumn,
+  ModelDataToSave,
+  PrevNextButtons
+} from "./types";
+import KNN from "ml-knn";
 
 // Action types
 const RESET_STATE = "RESET_STATE";
@@ -66,8 +78,8 @@ export interface RootState {
   csvfile: string | undefined;
   jsonfile: string | undefined;
   invalidData: string | undefined;
-  data: any[];
-  metadata: any;
+  data: DataRow[];
+  metadata: Metadata;
   removedRowsCount: number;
   highlightDataset: string | undefined;
   highlightColumn: string | undefined;
@@ -75,32 +87,32 @@ export interface RootState {
   selectedFeatures: string[];
   labelColumn: string | undefined;
   featureNumberKey: Record<string, Record<string, number>>;
-  trainingExamples: any[];
-  trainingLabels: any[];
+  trainingExamples: number[][];
+  trainingLabels: (number | string)[];
   reserveLocation: string;
-  accuracyCheckExamples: any[];
-  accuracyCheckLabels: any[];
-  accuracyCheckPredictedLabels: any[];
-  testData: Record<string, any>;
-  prediction: any;
-  trainedModel: any;
-  trainedModelDetails: any;
-  instructionsKeyCallback: ((...args: any[]) => void) | undefined;
+  accuracyCheckExamples: number[][];
+  accuracyCheckLabels: (number | string)[];
+  accuracyCheckPredictedLabels: (number | string)[];
+  testData: Record<string, string | number>;
+  prediction: number | string | undefined;
+  trainedModel: KNN | undefined;
+  trainedModelDetails: TrainedModelDetailsSave;
+  instructionsKeyCallback: ((key: string, options: { showOverlay?: boolean } | null) => void) | undefined;
   currentPanel: string;
   currentColumn: string | undefined;
   resultsPhase: number | undefined;
   saveStatus: string;
-  saveResponseData: any;
-  columnRefs: Record<string, any>;
-  historicResults: { label: string; features: string[]; accuracy: any }[];
+  saveResponseData: SaveResponseData | undefined;
+  columnRefs: Record<string, HTMLElement>;
+  historicResults: HistoricResult[];
   showResultsDetails: boolean;
   resultsHighlightRow: number | undefined;
   kValue: number | null;
   viewedPanels: string[];
   instructionsOverlayActive: boolean;
   resultsTab: string;
-  firehoseMetricsLogger: ((...args: any[]) => void) | undefined;
-  mode?: any;
+  firehoseMetricsLogger: ((eventName: string, details: Record<string, unknown>) => void) | undefined;
+  mode?: Mode;
 }
 
 interface ReduxAction {
@@ -109,7 +121,7 @@ interface ReduxAction {
 }
 
 // Action creators
-export function setMode(mode: any): ReduxAction {
+export function setMode(mode: Mode): ReduxAction {
   return { type: SET_MODE, mode };
 }
 
@@ -129,11 +141,11 @@ export function setInvalidData(invalidData: string): ReduxAction {
   return { type: SET_INVALID_DATA, invalidData };
 }
 
-export function setImportedData(data: any[], userUploadedData: boolean): ReduxAction {
+export function setImportedData(data: DataRow[], userUploadedData: boolean): ReduxAction {
   return { type: SET_IMPORTED_DATA, data, userUploadedData };
 }
 
-export function setImportedMetadata(metadata: any): ReduxAction {
+export function setImportedMetadata(metadata: Metadata): ReduxAction {
   return { type: SET_IMPORTED_METADATA, metadata };
 }
 
@@ -182,31 +194,31 @@ export function setReserveLocation(reserveLocation: string): ReduxAction {
   return { type: SET_RESERVE_LOCATION, reserveLocation };
 }
 
-export function setAccuracyCheckExamples(accuracyCheckExamples: any[]): ReduxAction {
+export function setAccuracyCheckExamples(accuracyCheckExamples: number[][]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_EXAMPLES, accuracyCheckExamples };
 }
 
-export function setAccuracyCheckLabels(accuracyCheckLabels: any[]): ReduxAction {
+export function setAccuracyCheckLabels(accuracyCheckLabels: (number | string)[]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_LABELS, accuracyCheckLabels };
 }
 
-export function setAccuracyCheckPredictedLabels(predictedLabels: any[]): ReduxAction {
+export function setAccuracyCheckPredictedLabels(predictedLabels: (number | string)[]): ReduxAction {
   return { type: SET_ACCURACY_CHECK_PREDICTED_LABELS, predictedLabels };
 }
 
-export function setTrainingExamples(trainingExamples: any[]): ReduxAction {
+export function setTrainingExamples(trainingExamples: number[][]): ReduxAction {
   return { type: SET_TRAINING_EXAMPLES, trainingExamples };
 }
 
-export function setTrainingLabels(trainingLabels: any[]): ReduxAction {
+export function setTrainingLabels(trainingLabels: (number | string)[]): ReduxAction {
   return { type: SET_TRAINING_LABELS, trainingLabels };
 }
 
-export function setTestData(feature: string, value: any): ReduxAction {
+export function setTestData(feature: string, value: string | number): ReduxAction {
   return { type: SET_TEST_DATA, feature, value };
 }
 
-export function setPrediction(prediction: any): ReduxAction {
+export function setPrediction(prediction: number | string): ReduxAction {
   return { type: SET_PREDICTION, prediction };
 }
 
@@ -214,7 +226,7 @@ export function resetState(): ReduxAction {
   return { type: RESET_STATE };
 }
 
-export function setTrainedModel(trainedModel: any): ReduxAction {
+export function setTrainedModel(trainedModel: KNN): ReduxAction {
   return { type: SET_TRAINED_MODEL, trainedModel };
 }
 
@@ -222,7 +234,7 @@ export function setTrainedModelDetail(field: string, value: string, isColumn: bo
   return { type: SET_TRAINED_MODEL_DETAIL, field, value, isColumn };
 }
 
-export function setInstructionsKeyCallback(instructionsKeyCallback: any): ReduxAction {
+export function setInstructionsKeyCallback(instructionsKeyCallback: (key: string, options: { showOverlay?: boolean } | null) => void): ReduxAction {
   return { type: SET_INSTRUCTIONS_KEY_CALLBACK, instructionsKeyCallback };
 }
 
@@ -250,11 +262,11 @@ export function setResultsHighlightRow(highlightRow: number): ReduxAction {
   return { type: SET_RESULTS_HIGHLIGHT_ROW, highlightRow };
 }
 
-export function setSaveStatus(status: string, data?: any): ReduxAction {
+export function setSaveStatus(status: string, data?: SaveResponseData): ReduxAction {
   return { type: SET_SAVE_STATUS, status, data };
 }
 
-export function setHistoricResult(label: string, features: string[], accuracy: any): ReduxAction {
+export function setHistoricResult(label: string, features: string[], accuracy: string): ReduxAction {
   return { type: SET_HISTORIC_RESULT, label, features, accuracy };
 }
 
@@ -274,7 +286,7 @@ export function setResultsTab(key: string): ReduxAction {
   return { type: SET_RESULTS_TAB, key };
 }
 
-export function setFirehoseMetricsLogger(firehoseMetricsLogger: any): ReduxAction {
+export function setFirehoseMetricsLogger(firehoseMetricsLogger: (eventName: string, details: Record<string, unknown>) => void): ReduxAction {
   return { type: SET_FIREHOSE_METRICS_LOGGER, firehoseMetricsLogger };
 }
 
@@ -501,7 +513,7 @@ export default function rootReducer(state: RootState = initialState, action: Red
         trainedModelDetails.columns = [];
       }
 
-      const column = trainedModelDetails.columns.find((column: any) => {
+      const column = trainedModelDetails.columns.find((column: { id: string; description: string }) => {
         return column.id === action.field;
       });
 
@@ -532,7 +544,7 @@ export default function rootReducer(state: RootState = initialState, action: Red
     reportPanelView(action.currentPanel);
     let showedOverlay = false;
     if (state.instructionsKeyCallback) {
-      const options: any = {};
+      const options: { showOverlay?: boolean } = {};
       if (
         !(state.mode && state.mode.hideInstructionsOverlay) &&
         !state.viewedPanels.includes(action.currentPanel)
@@ -725,7 +737,7 @@ export function getPredictAvailable(state: RootState): boolean {
   );
 }
 
-export function getPanelButtons(state: RootState): any {
+export function getPanelButtons(state: RootState): PrevNextButtons {
   return prevNextButtons(state);
 }
 
@@ -735,7 +747,7 @@ export function readyToTrain(state: RootState): boolean {
 
 /* Functions for processing data to display. */
 
-export function getTableData(state: RootState, useResultsData: boolean): any[] | null {
+export function getTableData(state: RootState, useResultsData: boolean): DataRow[] | null {
   if (useResultsData) {
     return getResultsDataInDataTableForm(state);
   } else {
@@ -748,34 +760,35 @@ export function isRegression(state: RootState): boolean {
 }
 
 /* Functions for processing data about a trained model to save. */
-export function getFeaturesToSave(state: RootState): any[] {
+export function getFeaturesToSave(state: RootState): ModelCardColumn[] {
   const features = state.selectedFeatures.map(feature =>
     getColumnDataToSave(state, feature)
   );
   return features;
 }
 
-export function getLabelToSave(state: RootState): any {
+export function getLabelToSave(state: RootState): ModelCardColumn {
   return getColumnDataToSave(state, state.labelColumn!);
 }
 
-export function getTrainedModelDataToSave(state: RootState): any {
-  const dataToSave: any = {};
-  dataToSave.name = state.trainedModelDetails.name;
-  dataToSave.datasetDetails = getDatasetDetails(state);
-  dataToSave.potentialUses = state.trainedModelDetails.potentialUses;
-  dataToSave.potentialMisuses = state.trainedModelDetails.potentialMisuses;
-  dataToSave.selectedTrainer = isRegression(state)
-    ? RegressionTrainer
-    : ClassificationTrainer;
-  dataToSave.featureNumberKey = state.featureNumberKey;
-  dataToSave.label = getColumnDataToSave(state, state.labelColumn!);
-  dataToSave.features = getFeaturesToSave(state);
-  dataToSave.summaryStat = getSummaryStat(state);
-  dataToSave.trainedModel = state.trainedModel
-    ? state.trainedModel.toJSON()
-    : null;
-  dataToSave.kValue = state.kValue;
+export function getTrainedModelDataToSave(state: RootState): ModelDataToSave {
+  const dataToSave: ModelDataToSave = {
+    name: state.trainedModelDetails.name,
+    datasetDetails: getDatasetDetails(state),
+    potentialUses: state.trainedModelDetails.potentialUses,
+    potentialMisuses: state.trainedModelDetails.potentialMisuses,
+    selectedTrainer: isRegression(state)
+      ? RegressionTrainer
+      : ClassificationTrainer,
+    featureNumberKey: state.featureNumberKey,
+    label: getColumnDataToSave(state, state.labelColumn!),
+    features: getFeaturesToSave(state),
+    summaryStat: getSummaryStat(state),
+    trainedModel: state.trainedModel
+      ? state.trainedModel.toJSON()
+      : null,
+    kValue: state.kValue
+  };
 
   return dataToSave;
 }
diff --git a/src/selectors.ts b/src/selectors.ts
index 7dd141c3..c9ccba3e 100644
--- a/src/selectors.ts
+++ b/src/selectors.ts
@@ -7,14 +7,16 @@ import {
   getColumnDescription
  } from './helpers/columnDetails';
 import { arrayIntersection } from './helpers/utils';
+import { RootState } from "./redux";
+import { DataRow, Metadata, TrainedModelDetailsSave } from "./types";
 
-export const getData = (state: any): any[] => state.data;
-export const getColumnsByDataType = (state: any): Record<string, string> => state.columnsByDataType;
-const getSelectedFeatures = (state: any): string[] => state.selectedFeatures;
-export const getLabelColumn = (state: any): string | undefined => state.labelColumn;
-export const getMetadata = (state: any): any => state.metadata;
-export const getDatasetId = (state: any): string | undefined => state.metadata && state.metadata.name;
-export const getTrainedModelDetails = (state: any): any => state.trainedModelDetails;
+export const getData = (state: RootState): DataRow[] => state.data;
+export const getColumnsByDataType = (state: RootState): Record<string, string> => state.columnsByDataType;
+const getSelectedFeatures = (state: RootState): string[] => state.selectedFeatures;
+export const getLabelColumn = (state: RootState): string | undefined => state.labelColumn;
+export const getMetadata = (state: RootState): Metadata => state.metadata;
+export const getDatasetId = (state: RootState): string | undefined => state.metadata && state.metadata.name;
+export const getTrainedModelDetails = (state: RootState): TrainedModelDetailsSave => state.trainedModelDetails;
 
 export const getCategoricalColumns = createSelector(
   [getColumnsByDataType],
@@ -70,10 +72,10 @@ export const getSelectedNumericalFeatures = createSelector(
 
 export const getUniqueOptionsByColumn = createSelector(
   [getSelectedCategoricalColumns, getData],
-  (selectedCategoricalColumns: string[], data: any[]): Record<string, string[]> => {
+  (selectedCategoricalColumns: string[], data: DataRow[]): Record<string, string[]> => {
     const uniqueOptionsByColumn: Record<string, string[]> = {};
     selectedCategoricalColumns.map(column => (
-      uniqueOptionsByColumn[column] = getUniqueOptions(data, column).sort()
+      uniqueOptionsByColumn[column] = getUniqueOptions(data, column).map(String).sort()
     ))
     return uniqueOptionsByColumn;
   }
@@ -81,7 +83,7 @@ export const getUniqueOptionsByColumn = createSelector(
 
 export const getExtremaByColumn = createSelector(
   [getSelectedNumericalColumns, getData],
-  (getSelectedNumericalColumns: string[], data: any[]): Record<string, { min: number; max: number }> => {
+  (getSelectedNumericalColumns: string[], data: DataRow[]): Record<string, { min: number; max: number }> => {
     const extremaByColumn: Record<string, { min: number; max: number }> = {};
     getSelectedNumericalColumns.map(column => (
       extremaByColumn[column] = getExtrema(data, column)
@@ -92,7 +94,7 @@ export const getExtremaByColumn = createSelector(
 
 export const getSelectedColumnsDescriptions = createSelector(
   [getSelectedColumns, getMetadata, getTrainedModelDetails],
-  (selectedColumns: string[], metadata: any, trainedModelDetails: any): { id: string; description: string }[] => {
+  (selectedColumns: string[], metadata: Metadata, trainedModelDetails: TrainedModelDetailsSave): { id: string; description: string }[] => {
     return selectedColumns.map(column => {
       return {
         id: column,
diff --git a/src/selectors/currentColumnSelectors.ts b/src/selectors/currentColumnSelectors.ts
index a1f873cb..b109408a 100644
--- a/src/selectors/currentColumnSelectors.ts
+++ b/src/selectors/currentColumnSelectors.ts
@@ -2,6 +2,7 @@ import { createSelector } from 'reselect';
 import {
   getUniqueOptions,
   getExtrema,
+  Extrema,
   isColumnReadOnly,
   getColumnDescription,
   tooManyUniqueOptions,
@@ -15,16 +16,18 @@ import {
   getTrainedModelDetails
  } from '../selectors';
 import { ColumnTypes } from "../constants";
+import { RootState } from "../redux";
+import { DataRow, Metadata, TrainedModelDetailsSave, CurrentColumnInspector, NumericalColumnDetails, CategoricalColumnDetails } from "../types";
 
-export const getCurrentColumn = (state: any): string | undefined => state.currentColumn;
+export const getCurrentColumn = (state: RootState): string | undefined => state.currentColumn;
 
 export const getCurrentColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any) => isCurrentColumnReadOnly(state),
+    (state: RootState) => isCurrentColumnReadOnly(state),
     getColumnsByDataType,
-    (state: any) => getCurrentColumnDescription(state),
-    (state: any) => isCurrentColumnSelectable(state)
+    (state: RootState) => getCurrentColumnDescription(state),
+    (state: RootState) => isCurrentColumnSelectable(state)
   ],
   (
     currentColumn: string | undefined,
@@ -32,13 +35,13 @@ export const getCurrentColumnDetails = createSelector(
     columnsByDataType: Record<string, string>,
     description: string | undefined,
     isSelectable: boolean
-  ): any => {
+  ): CurrentColumnInspector | undefined => {
     if (currentColumn) {
       return {
         id: currentColumn,
         readOnly: isReadOnly,
         dataType: columnsByDataType[currentColumn],
-        description: description,
+        description: description ?? "",
         isSelectable: isSelectable
       };
     }
@@ -47,22 +50,22 @@ export const getCurrentColumnDetails = createSelector(
 
 export const isCurrentColumnReadOnly = createSelector(
   [getCurrentColumn, getMetadata],
-  (currentColumn: string | undefined, metadata: any): boolean => {
+  (currentColumn: string | undefined, metadata: Metadata): boolean => {
     return isColumnReadOnly(metadata, currentColumn!)
   }
 )
 
 export const getCurrentColumnDescription = createSelector(
   [getCurrentColumn, getMetadata, getTrainedModelDetails],
-  (currentColumn: string | undefined, metadata: any, trainedModelDetails: any): string | undefined => {
+  (currentColumn: string | undefined, metadata: Metadata, trainedModelDetails: TrainedModelDetailsSave): string | undefined => {
     return currentColumn ? getColumnDescription(currentColumn, metadata, trainedModelDetails) ?? undefined : undefined;
   }
 )
 
 export const isCurrentColumnSelectable = createSelector(
   [
-    (state: any) => isCurrentColumnSelected(state),
-    (state: any) => isValidData(state)
+    (state: RootState) => isCurrentColumnSelected(state),
+    (state: RootState) => isValidData(state)
   ],
   (selected: boolean, isValidData: boolean): boolean => {
     return !selected && isValidData;
@@ -78,8 +81,8 @@ export const isCurrentColumnSelected = createSelector(
 
 export const isValidData = createSelector(
   [
-    (state: any) => isValidNumericalData(state),
-    (state: any) => isValidCategoricalData(state)
+    (state: RootState) => isValidNumericalData(state),
+    (state: RootState) => isValidCategoricalData(state)
   ],
   (isValidNumericalData: boolean, isValidCategoricalData: boolean): boolean => {
     return isValidNumericalData || isValidCategoricalData;
@@ -89,23 +92,23 @@ export const isValidData = createSelector(
 export const getNumericalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any) => currentColumnIsNumerical(state),
-    (state: any) => getExtremaCurrentColumn(state),
-    (state: any) => currentColumnContainsOnlyNumbers(state)
+    (state: RootState) => currentColumnIsNumerical(state),
+    (state: RootState) => getExtremaCurrentColumn(state),
+    (state: RootState) => currentColumnContainsOnlyNumbers(state)
   ],
   (
     currentColumn: string | undefined,
     isNumerical: boolean,
-    extrema: any,
+    extrema: Extrema,
     containsOnlyNumbers: boolean
-  ): any => {
-    const numericalColumnDetails: any = {};
+  ): NumericalColumnDetails => {
+    const numericalColumnDetails: Partial<NumericalColumnDetails> & { id?: string } = {};
     numericalColumnDetails.id = currentColumn;
+    numericalColumnDetails.containsOnlyNumbers = containsOnlyNumbers;
     if (isNumerical) {
       numericalColumnDetails.extrema = extrema;
-      numericalColumnDetails.containsOnlyNumbers = containsOnlyNumbers;
     }
-    return numericalColumnDetails;
+    return numericalColumnDetails as NumericalColumnDetails;
   }
 )
 
@@ -118,14 +121,14 @@ export const currentColumnIsNumerical = createSelector(
 
 export const getExtremaCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn: string | undefined, data: any[]): any => {
+  (currentColumn: string | undefined, data: DataRow[]): Extrema => {
     return getExtrema(data, currentColumn!);
   }
 )
 
 export const currentColumnContainsOnlyNumbers = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn: string | undefined, data: any[]): boolean => {
+  (currentColumn: string | undefined, data: DataRow[]): boolean => {
     return containsOnlyNumbers(data, currentColumn!);
   }
 )
@@ -140,36 +143,36 @@ export const isValidNumericalData = createSelector(
 export const getCategoricalColumnDetails = createSelector(
   [
     getCurrentColumn,
-    (state: any) => currentColumnIsCategorical(state),
-    (state: any) => getUniqueOptionsCurrentColumn(state),
-    (state: any) => getOptionFrequenciesCurrentColumn(state)
+    (state: RootState) => currentColumnIsCategorical(state),
+    (state: RootState) => getUniqueOptionsCurrentColumn(state),
+    (state: RootState) => getOptionFrequenciesCurrentColumn(state)
   ],
   (
     currentColumn: string | undefined,
     isCategorical: boolean,
     uniqueOptions: string[],
     uniqueOptionFrequencies: Record<string, number>
-  ): any => {
-    const categeoricalColumnDetails: any = {};
+  ): CategoricalColumnDetails => {
+    const categeoricalColumnDetails: Partial<CategoricalColumnDetails> & { id?: string } = {};
     categeoricalColumnDetails.id = currentColumn;
     if (isCategorical) {
       categeoricalColumnDetails.uniqueOptions = uniqueOptions;
       categeoricalColumnDetails.frequencies = uniqueOptionFrequencies;
     }
-    return categeoricalColumnDetails;
+    return categeoricalColumnDetails as CategoricalColumnDetails;
   }
 )
 
 export const getUniqueOptionsCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn: string | undefined, data: any[]): string[] => {
-    return getUniqueOptions(data, currentColumn!).sort()
+  (currentColumn: string | undefined, data: DataRow[]): string[] => {
+    return getUniqueOptions(data, currentColumn!).map(String).sort()
   }
 )
 
 export const getOptionFrequenciesCurrentColumn = createSelector(
   [getCurrentColumn, getData],
-  (currentColumn: string | undefined, data: any[]): Record<string, number> => {
+  (currentColumn: string | undefined, data: DataRow[]): Record<string, number> => {
     const optionFrequencies: Record<string, number> = {};
     for (const row of data) {
       if (optionFrequencies[row[currentColumn!]]) {
diff --git a/src/selectors/visualizationSelectors.ts b/src/selectors/visualizationSelectors.ts
index 36b8bec0..df4ed59a 100644
--- a/src/selectors/visualizationSelectors.ts
+++ b/src/selectors/visualizationSelectors.ts
@@ -8,14 +8,15 @@ import {
 import { getUniqueOptions, getLocalizedColumnName } from "../helpers/columnDetails";
 import { areArraysEqual } from "../helpers/utils";
 import { ColumnTypes } from "../constants";
-import { Coordinate, ScatterPlotData, CrossTabResult, CrossTabData } from "../types";
+import { Coordinate, ScatterPlotData, CrossTabResult, CrossTabData, DataRow } from "../types";
+import { RootState } from "../redux";
 
 export const getScatterPlotData = createSelector(
   [
     getLabelColumn,
-    (state: any) => labelColumnIsNumerical(state),
+    (state: RootState) => labelColumnIsNumerical(state),
     getCurrentColumn,
-    (state: any) => currentColumnIsNumerical(state),
+    (state: RootState) => currentColumnIsNumerical(state),
     getData,
     getDatasetId
   ],
@@ -24,7 +25,7 @@ export const getScatterPlotData = createSelector(
     labelColumnIsNumerical: boolean,
     currentColumn: string | undefined,
     currentColumnIsNumerical: boolean,
-    data: any[],
+    data: DataRow[],
     datasetId: string | undefined
   ): ScatterPlotData | null => {
     if (!labelColumn || !currentColumn) {
@@ -42,7 +43,7 @@ export const getScatterPlotData = createSelector(
     // For each row, record the X (feature value) and Y (label value).
     const coordinates: Coordinate[] = [];
     for (const row of data) {
-      coordinates.push({ x: row[currentColumn], y: row[labelColumn] });
+      coordinates.push({ x: Number(row[currentColumn]), y: Number(row[labelColumn]) });
     }
 
     const label = getLocalizedColumnName(datasetId ?? "", labelColumn);
@@ -93,11 +94,11 @@ export const getScatterPlotData = createSelector(
 export const getCrossTabData = createSelector(
   [
     getLabelColumn,
-    (state: any) => labelColumnIsCategorical(state),
+    (state: RootState) => labelColumnIsCategorical(state),
     getCurrentColumn,
-    (state: any) => currentColumnIsCategorical(state),
+    (state: RootState) => currentColumnIsCategorical(state),
     getData,
-    (state: any) => getUniqueOptionsLabelColumn(state),
+    (state: RootState) => getUniqueOptionsLabelColumn(state),
     getDatasetId
   ],
   (
@@ -105,7 +106,7 @@ export const getCrossTabData = createSelector(
     labelColumnIsCategorical: boolean,
     currentColumn: string | undefined,
     currentColumnIsCategorical: boolean,
-    data: any[],
+    data: DataRow[],
     uniqueOptionsLabelColumn: string[],
     datasetId: string | undefined
   ): CrossTabData | null => {
@@ -125,7 +126,7 @@ export const getCrossTabData = createSelector(
     // value.
 
     for (const row of data) {
-      const featureValues: any[] = [];
+      const featureValues: (string | number)[] = [];
       featureValues.push(row[currentColumn]);
 
       let existingEntry = results.find(result => {
@@ -194,7 +195,7 @@ export const labelColumnIsCategorical = createSelector(
 
 export const getUniqueOptionsLabelColumn = createSelector(
   [getLabelColumn, getData],
-  (labelColumn: string | undefined, data: any[]): string[] => {
-    return getUniqueOptions(data, labelColumn!).sort()
+  (labelColumn: string | undefined, data: DataRow[]): string[] => {
+    return getUniqueOptions(data, labelColumn!).map(String).sort()
   }
 )
diff --git a/src/train.ts b/src/train.ts
index 588c6d30..bd6360fa 100644
--- a/src/train.ts
+++ b/src/train.ts
@@ -1,15 +1,18 @@
 /* Generic machine learning handlers that route to the selected trainer. */
 
+import { Store } from "redux";
 import KNNTrainer from "./trainers/KNNTrainer";
 
 import { buildOptionNumberKey } from "./helpers/columnDetails";
 import {
+  RootState,
   setFeatureNumberKey,
   setTrainingExamples,
   setTrainingLabels,
   setAccuracyCheckExamples,
   setAccuracyCheckLabels
 } from "./redux";
+import { DataRow } from "./types";
 import { getSelectedCategoricalColumns } from "./selectors";
 import {
   TestDataLocations,
@@ -35,9 +38,9 @@ import { convertValueForTraining } from "./helpers/valueConversion";
   }
   */
 
-const buildOptionNumberKeysByFeature = (store: any): void => {
+const buildOptionNumberKeysByFeature = (store: Store<RootState>): void => {
   const state = store.getState();
-  const optionsMappedToNumbersByFeature: Record<string, any> = {};
+  const optionsMappedToNumbersByFeature: Record<string, Record<string, number>> = {};
   const categoricalColumnsToConvert = getSelectedCategoricalColumns(state);
   categoricalColumnsToConvert.forEach(
     (feature: string) =>
@@ -60,25 +63,25 @@ const buildOptionNumberKeysByFeature = (store: any): void => {
   }
   @return {array}
   */
-const extractTrainingExamples = (state: any, row: any): any[] => {
-  const exampleValues: any[] = [];
+const extractTrainingExamples = (state: RootState, row: DataRow): number[] => {
+  const exampleValues: number[] = [];
   state.selectedFeatures.forEach((feature: string) =>
     exampleValues.push(convertValueForTraining(state, row[feature], feature))
   );
   return exampleValues;
 };
 
-const extractTrainingLabel = (state: any, row: any): any => {
-  const value = row[state.labelColumn];
-  return convertValueForTraining(state, value, state.labelColumn);
+const extractTrainingLabel = (state: RootState, row: DataRow): number | string => {
+  const value = row[state.labelColumn!];
+  return convertValueForTraining(state, value, state.labelColumn!);
 };
 
-const prepareTrainingData = (store: any): void => {
+const prepareTrainingData = (store: Store<RootState>): void => {
   const updatedState = store.getState();
-  const trainingExamples = updatedState.data.map((row: any) =>
+  const trainingExamples = updatedState.data.map((row: DataRow) =>
     extractTrainingExamples(updatedState, row)
   );
-  const trainingLabels = updatedState.data.map((row: any) =>
+  const trainingLabels = updatedState.data.map((row: DataRow) =>
     extractTrainingLabel(updatedState, row)
   );
   /*
@@ -87,8 +90,8 @@ const prepareTrainingData = (store: any): void => {
   const numToReserve = Math.ceil(
     trainingExamples.length * PERCENT_OF_DATASET_FOR_TESTING
   );
-  let accuracyCheckExamples: any[] = [];
-  let accuracyCheckLabels: any[] = [];
+  let accuracyCheckExamples: number[][] = [];
+  let accuracyCheckLabels: (number | string)[] = [];
   if (updatedState.reserveLocation === TestDataLocations.END) {
     const index = -1 * numToReserve;
     accuracyCheckExamples = trainingExamples.splice(index);
@@ -111,9 +114,9 @@ const prepareTrainingData = (store: any): void => {
   store.dispatch(setAccuracyCheckLabels(accuracyCheckLabels));
 };
 
-const prepareTestData = (store: any): any[] => {
+const prepareTestData = (store: Store<RootState>): number[] => {
   const updatedState = store.getState();
-  const testValues: any[] = [];
+  const testValues: number[] = [];
   updatedState.selectedFeatures.forEach((feature: string) =>
     testValues.push(
       convertValueForTraining(updatedState, updatedState.testData[feature], feature)
@@ -123,17 +126,17 @@ const prepareTestData = (store: any): any[] => {
 };
 
 const trainingState: { trainer?: KNNTrainer } = {};
-const init = (store: any): void => {
+const init = (store: Store<RootState>): void => {
   trainingState.trainer = new KNNTrainer(store);
   buildOptionNumberKeysByFeature(store);
   prepareTrainingData(store);
 };
 
-const onClickTrain = (store: any): void => {
+const onClickTrain = (store: Store<RootState>): void => {
   trainingState.trainer!.startTraining(store);
 };
 
-const onClickPredict = (store: any): void => {
+const onClickPredict = (store: Store<RootState>): void => {
   const testValues = prepareTestData(store);
   trainingState.trainer!.predict(testValues);
 };
diff --git a/src/trainers/KNNTrainer.ts b/src/trainers/KNNTrainer.ts
index 61aacbdf..1eae6e93 100644
--- a/src/trainers/KNNTrainer.ts
+++ b/src/trainers/KNNTrainer.ts
@@ -1,7 +1,9 @@
 /* Training and prediction using a multiclassification KNN machine learning model from
 https://github.com/mljs/knn */
 
+import { Store } from "redux";
 import {
+  RootState,
   isRegression,
   setKValue,
   setTrainedModel,
@@ -15,14 +17,14 @@ import KNN from "ml-knn";
 import { KNNTrainedModelDetails } from "../types";
 
 export default class KNNTrainer {
-  private store: any;
-  private knn: any;
+  private store: Store<RootState>;
+  private knn: KNN | undefined;
 
-  constructor(store: any) {
+  constructor(store: Store<RootState>) {
     this.store = store;
   }
 
-  startTraining(store: any): void {
+  startTraining(store: Store<RootState>): void {
     this.store = store;
     const state = store.getState();
 
@@ -44,9 +46,9 @@ export default class KNNTrainer {
     the curriculum. For large classification datasets we try a variety of K
     values and select the one that yields the most accurate model.
   */
-  getOptimalModelDetails(state: any): KNNTrainedModelDetails {
-    let bestModel: any = null;
-    let bestPredictedLabels: any[] = [];
+  getOptimalModelDetails(state: RootState): KNNTrainedModelDetails {
+    let bestModel: KNN | undefined;
+    let bestPredictedLabels: (number | string)[] = [];
     let bestK = -1;
     let bestAccuracy = -1;
     const kValues = this.possibleKValues(state);
@@ -67,13 +69,13 @@ export default class KNNTrainer {
       }
     });
     return {
-      model: bestModel,
+      model: bestModel!,
       predictedLabels: bestPredictedLabels,
       kValue: bestK
     };
   }
 
-  possibleKValues(state: any): number[] {
+  possibleKValues(state: RootState): number[] {
     const datasetSize = state.data.length;
     const smallDatasetSize = 10;
     const mediumDatasetSize = 100;
@@ -104,7 +106,7 @@ export default class KNNTrainer {
     return kValues;
   }
 
-  calculatePotentialKValues(state: any): number[] {
+  calculatePotentialKValues(state: RootState): number[] {
     const datasetSize = state.data.length;
     const trainingExamplesSize = state.trainingExamples.length;
     const possibleKValues = [1, 3, 5, 7, 17, 31, 45, 61];
@@ -121,19 +123,19 @@ export default class KNNTrainer {
     return parseFloat(percent);
   }
 
-  batchPredict(accuracyCheckExamples: any[]): any[] {
-    const predictedLabels = this.knn.predict(accuracyCheckExamples);
+  batchPredict(accuracyCheckExamples: number[][]): (number | string)[] {
+    const predictedLabels = this.knn!.predict(accuracyCheckExamples);
     this.store.dispatch(setAccuracyCheckPredictedLabels(predictedLabels));
     return predictedLabels;
   }
 
-  predict(testValues: any[]): void {
+  predict(testValues: number[]): void {
     const state = this.store.getState();
-    const prediction = state.trainedModel.predict(testValues);
-    this.store.dispatch(setPrediction(prediction));
+    const predictions = state.trainedModel!.predict([testValues]);
+    this.store.dispatch(setPrediction(predictions[0]));
   }
 
-  storeTrainedModel(store: any, trainedModel: KNNTrainedModelDetails): void {
+  storeTrainedModel(store: Store<RootState>, trainedModel: KNNTrainedModelDetails): void {
     store.dispatch(setKValue(trainedModel.kValue));
     store.dispatch(setAccuracyCheckPredictedLabels(
       trainedModel.predictedLabels
@@ -141,10 +143,10 @@ export default class KNNTrainer {
     store.dispatch(setTrainedModel(trainedModel.model));
   }
 
-  storeHistoricResult(store: any, state: any): void {
+  storeHistoricResult(store: Store<RootState>, state: RootState): void {
     const accuracy = getPercentCorrect(state);
     store.dispatch(
-      setHistoricResult(state.labelColumn, state.selectedFeatures, accuracy)
+      setHistoricResult(state.labelColumn!, state.selectedFeatures, accuracy)
     );
   }
 }
diff --git a/src/types.ts b/src/types.ts
index 7ad8af8c..dbd6400d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,12 +1,26 @@
+import KNN from "ml-knn";
+
+export type DataRow = Record<string, string | number>;
+
+export interface Mode {
+  datasets?: string[];
+  hideSelectLabel?: boolean;
+  hideSave?: boolean;
+  requireAccuracy?: number;
+  hideInstructionsOverlay?: boolean;
+  randomizeTestData?: boolean;
+  hideColumnClicking?: boolean;
+}
+
 export interface ResultsData {
-  examples: any[][];
-  labels: any[];
-  predictedLabels: any[];
+  examples: (string | number)[][];
+  labels: (string | number)[];
+  predictedLabels: (string | number)[];
 }
 
 export interface CategoricalColumnDetails {
   id: string;
-  uniqueOptions: Record<string, string>;
+  uniqueOptions: string[];
   frequencies: Record<string, number>;
 }
 
@@ -25,7 +39,7 @@ export interface CurrentColumnInspector {
 }
 
 export interface CrossTabResult {
-  featureValues: any[];
+  featureValues: (string | number)[];
   labelCounts: Record<string, number>;
   labelPercents?: Record<string, number>;
 }
@@ -38,8 +52,8 @@ export interface CrossTabData {
 }
 
 export interface Coordinate {
-  x: any;
-  y: any;
+  x: number;
+  y: number;
 }
 
 export interface ScatterPlotData {
@@ -75,8 +89,8 @@ export interface Metadata {
 }
 
 export interface KNNTrainedModelDetails {
-  model: any;
-  predictedLabels: any[];
+  model: KNN;
+  predictedLabels: (number | string)[];
   kValue: number;
 }
 
@@ -86,6 +100,15 @@ export interface TrainedModelDetails {
   potentialUses?: string;
 }
 
+export interface TrainedModelDetailsSave {
+  name?: string;
+  potentialUses?: string;
+  potentialMisuses?: string;
+  datasetDescription?: string;
+  columns?: { id: string; description: string }[];
+  [key: string]: string | { id: string; description: string }[] | undefined;
+}
+
 export interface ModelCardColumn {
   id?: string;
   description?: string;
@@ -102,3 +125,45 @@ export interface DatasetDetails {
   potentialUses?: string;
   potentialMisuses?: string;
 }
+
+export interface SaveResponseData {
+  type?: string;
+  content?: string[];
+}
+
+export interface SaveResponse {
+  status: string;
+  data?: SaveResponseData;
+  id?: number;
+}
+
+export interface HistoricResult {
+  label: string;
+  features: string[];
+  accuracy: string;
+}
+
+export interface ModelDataToSave {
+  name?: string;
+  datasetDetails: DatasetDetails;
+  potentialUses?: string;
+  potentialMisuses?: string;
+  selectedTrainer: string;
+  featureNumberKey: Record<string, Record<string, number>>;
+  label: ModelCardColumn;
+  features: ModelCardColumn[];
+  summaryStat: { type: string; stat: string };
+  trainedModel: object | null;
+  kValue: number | null;
+}
+
+export interface NavButton {
+  panel: string;
+  text: string | undefined;
+  enabled?: boolean;
+}
+
+export interface PrevNextButtons {
+  prev: NavButton | null | undefined;
+  next: NavButton | null | undefined;
+}

From 322452e4d99c941925c17fbb94e1805a5c0f5566 Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 14:40:34 -0400
Subject: [PATCH 5/6] Lint issues and upgrades fontawesome.

---
 package.json | 14 ++++++++++----
 yarn.lock    | 38 ++++++++++++++++++--------------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 9b44cc30..487421d4 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,13 @@
     "url": "git+ssh://git@github.com/code-dot-org/ml-playground.git"
   },
   "jest": {
-    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json"],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
     "moduleNameMapper": {
       ".+\\.(bin|jpg|jpeg|png|mp3|ogg|wav|gif)$": "identity-obj-proxy",
       "^@public(.*)$": "<rootDir>/public/$1"
@@ -75,9 +81,9 @@
     "public/*.json"
   ],
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.7",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.3.0",
     "chart.js": "^2.9.4",
     "react-chartjs-2": "^2.11.1",
     "reselect": "^4.0.0"
diff --git a/yarn.lock b/yarn.lock
index d62e652c..23ed24e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1074,31 +1074,29 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
-"@fortawesome/fontawesome-common-types@^0.2.32":
-  version "0.2.32"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
-  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
+"@fortawesome/fontawesome-common-types@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz#ae54831ab5974bc1a64e8b07410f2da2b4abf87f"
+  integrity sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==
 
-"@fortawesome/fontawesome-svg-core@^1.2.25":
-  version "1.2.32"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
-  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
+"@fortawesome/fontawesome-svg-core@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz#813550a5e8946a798e170d3f7331a685f8f8a550"
+  integrity sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.32"
+    "@fortawesome/fontawesome-common-types" "7.2.0"
 
-"@fortawesome/free-solid-svg-icons@^5.11.2":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
-  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
+"@fortawesome/free-solid-svg-icons@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz#9c761f7ab393e281f750c54d9ed1ebbcd4d581fa"
+  integrity sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.32"
+    "@fortawesome/fontawesome-common-types" "7.2.0"
 
-"@fortawesome/react-fontawesome@^0.1.7":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.13.tgz#ce9654bf4e537108014ec022f2423dbe8114fd62"
-  integrity sha512-/HrLnIft5Ks2511Pz6TxHBIctC9QalVscAC64sufQ4sJH/sXaQlG3uR9LCu6VpEwkBemgcBLrz/QPNP/ddbjDg==
-  dependencies:
-    prop-types "^15.7.2"
+"@fortawesome/react-fontawesome@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-3.3.0.tgz#020364bdd71d785ffbb0e61425f53325f78fc647"
+  integrity sha512-EHmHeTf8WgO29sdY3iX/7ekE3gNUdlc2RW6mm/FzELlHFKfTrA9S4MlyquRR+RRCRCn8+jXfLFpLGB2l7wCWyw==
 
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"

From 3dd08bec343361a0f675ce510f7d680b1bdb6c8d Mon Sep 17 00:00:00 2001
From: wilkie <wilkie05@gmail.com>
Date: Thu, 9 Apr 2026 14:48:41 -0400
Subject: [PATCH 6/6] Converts function form into constant form.

---
 src/App.tsx                                   | 28 +++++++++----------
 src/UIComponents/AddFeatureButton.tsx         |  4 +--
 src/UIComponents/AnimationDescriptions.tsx    | 12 ++++----
 src/UIComponents/ColumnDataTypeDropdown.tsx   |  4 +--
 src/UIComponents/ColumnDetailsCategorical.tsx |  4 +--
 src/UIComponents/ColumnDetailsNumerical.tsx   |  4 +--
 src/UIComponents/ColumnInspector.tsx          |  4 +--
 src/UIComponents/CrossTab.tsx                 |  4 +--
 src/UIComponents/DataCard.tsx                 |  4 +--
 src/UIComponents/DataDisplay.tsx              |  4 +--
 src/UIComponents/DataTable.tsx                |  6 ++--
 src/UIComponents/GenerateResults.tsx          |  4 +--
 src/UIComponents/ModelCard.tsx                |  4 +--
 src/UIComponents/Predict.tsx                  |  6 ++--
 src/UIComponents/Results.tsx                  |  4 +--
 src/UIComponents/ResultsDetails.tsx           |  4 +--
 src/UIComponents/ResultsTable.tsx             |  4 +--
 src/UIComponents/ResultsToggle.tsx            |  4 +--
 src/UIComponents/SaveModel.tsx                |  6 ++--
 src/UIComponents/ScatterPlot.tsx              |  4 +--
 src/UIComponents/ScrollableContent.tsx        |  6 ++--
 src/UIComponents/SelectDataset.tsx            |  6 ++--
 src/UIComponents/SelectLabelButton.tsx        |  4 +--
 src/UIComponents/Statement.tsx                |  6 ++--
 src/UIComponents/TrainModel.tsx               |  4 +--
 src/UIComponents/UniqueOptionsWarning.tsx     |  4 +--
 26 files changed, 75 insertions(+), 73 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0e861e8c..e2498e48 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,7 +40,7 @@ interface PanelButtonsProps {
   shouldDisplaySaveStatus: (saveStatus: string) => boolean;
 }
 
-function PanelButtons({
+const PanelButtons = ({
   panelButtons,
   currentPanel,
   setCurrentPanel,
@@ -51,7 +51,7 @@ function PanelButtons({
   saveResponseData,
   isSaveComplete: isSaveCompleteProp,
   shouldDisplaySaveStatus: shouldDisplaySaveStatusProp
-}: PanelButtonsProps) {
+}: PanelButtonsProps) => {
   const onClickPrev = () => {
     setCurrentPanel(panelButtons.prev!.panel);
   };
@@ -148,47 +148,47 @@ function PanelButtons({
       )}
     </div>
   );
-}
+};
 
 interface BodyContainerProps {
   children: React.ReactNode;
 }
 
-function BodyContainer({ children }: BodyContainerProps) {
+const BodyContainer = ({ children }: BodyContainerProps) => {
   return <div style={styles.bodyContainer}>{children}</div>;
-}
+};
 
 interface ContainerLeftProps {
   children: React.ReactNode;
 }
 
-function ContainerLeft({ children }: ContainerLeftProps) {
+const ContainerLeft = ({ children }: ContainerLeftProps) => {
   return (
     <div style={{ ...styles.panelContainer, ...styles.panelContainerLeft }}>
       {children}
     </div>
   );
-}
+};
 
 interface ContainerRightProps {
   children: React.ReactNode;
 }
 
-function ContainerRight({ children }: ContainerRightProps) {
+const ContainerRight = ({ children }: ContainerRightProps) => {
   return (
     <div style={{ ...styles.panelContainer, ...styles.panelContainerRight }}>
       {children}
     </div>
   );
-}
+};
 
 interface ContainerFullWidthProps {
   children: React.ReactNode;
 }
 
-function ContainerFullWidth({ children }: ContainerFullWidthProps) {
+const ContainerFullWidth = ({ children }: ContainerFullWidthProps) => {
   return <div style={styles.panelContainerFullWidth}>{children}</div>;
-}
+};
 
 interface AppProps {
   panelButtons: PrevNextButtons;
@@ -202,7 +202,7 @@ interface AppProps {
   saveResponseData: SaveResponseData | undefined;
 }
 
-function App({
+const App = ({
   panelButtons,
   currentPanel,
   setCurrentPanel,
@@ -212,7 +212,7 @@ function App({
   dataToSave,
   saveStatus,
   saveResponseData
-}: AppProps) {
+}: AppProps) => {
   return (
     <div style={styles.app}>
       {currentPanel === "selectDataset" && (
@@ -297,7 +297,7 @@ function App({
       />
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/AddFeatureButton.tsx b/src/UIComponents/AddFeatureButton.tsx
index 980fcffe..7cc25cf5 100644
--- a/src/UIComponents/AddFeatureButton.tsx
+++ b/src/UIComponents/AddFeatureButton.tsx
@@ -9,7 +9,7 @@ interface AddFeatureButtonProps {
   addSelectedFeature: (column: string) => void;
 }
 
-function AddFeatureButton({ column, addSelectedFeature }: AddFeatureButtonProps) {
+const AddFeatureButton = ({ column, addSelectedFeature }: AddFeatureButtonProps) => {
   const addFeature = (event: React.MouseEvent, column: string) => {
     addSelectedFeature(column);
     event.preventDefault();
@@ -25,7 +25,7 @@ function AddFeatureButton({ column, addSelectedFeature }: AddFeatureButtonProps)
       {I18n.t("addFeatureButton")}
     </button>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({}),
diff --git a/src/UIComponents/AnimationDescriptions.tsx b/src/UIComponents/AnimationDescriptions.tsx
index 15a3d5a2..cd4429eb 100644
--- a/src/UIComponents/AnimationDescriptions.tsx
+++ b/src/UIComponents/AnimationDescriptions.tsx
@@ -5,7 +5,7 @@ interface AnimationDescriptionProps {
   description?: string;
 }
 
-function AnimationDescription({ description }: AnimationDescriptionProps) {
+const AnimationDescription = ({ description }: AnimationDescriptionProps) => {
   return (
     <div id="animation-description" aria-live="polite">
       <div id="animation-description-text" style={{ display: 'none' }}>
@@ -17,22 +17,22 @@ function AnimationDescription({ description }: AnimationDescriptionProps) {
       </div>
     </div>
   );
-}
+};
 
-function TrainingAnimationDescription() {
+const TrainingAnimationDescription = () => {
   return (
     <AnimationDescription
       description={I18n.t("animationDescriptionsTraining")}
     />
   );
-}
+};
 
-function TestingAnimationDescription() {
+const TestingAnimationDescription = () => {
   return (
     <AnimationDescription
       description={I18n.t("animationDescriptionsTesting")}
     />
   );
-}
+};
 
 export { TrainingAnimationDescription, TestingAnimationDescription };
diff --git a/src/UIComponents/ColumnDataTypeDropdown.tsx b/src/UIComponents/ColumnDataTypeDropdown.tsx
index 690d0cb0..b8b87644 100644
--- a/src/UIComponents/ColumnDataTypeDropdown.tsx
+++ b/src/UIComponents/ColumnDataTypeDropdown.tsx
@@ -10,7 +10,7 @@ interface ColumnDataTypeDropdownProps {
   setColumnsByDataType: (column: string, dataType: string) => void;
 }
 
-function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataType }: ColumnDataTypeDropdownProps) {
+const ColumnDataTypeDropdown = ({ columnId, currentDataType, setColumnsByDataType }: ColumnDataTypeDropdownProps) => {
   const handleChangeDataType = (event: React.ChangeEvent<HTMLSelectElement>, feature: string) => {
     event.preventDefault();
     setColumnsByDataType(feature, event.target.value);
@@ -34,7 +34,7 @@ function ColumnDataTypeDropdown({ columnId, currentDataType, setColumnsByDataTyp
       </select>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({}),
diff --git a/src/UIComponents/ColumnDetailsCategorical.tsx b/src/UIComponents/ColumnDetailsCategorical.tsx
index 1c13c721..0b9ae0b6 100644
--- a/src/UIComponents/ColumnDetailsCategorical.tsx
+++ b/src/UIComponents/ColumnDetailsCategorical.tsx
@@ -27,7 +27,7 @@ const chartOptions = {
   maintainAspectRatio: false
 };
 
-function ColumnDetailsCategorical({ columnDetails }: ColumnDetailsCategoricalProps) {
+const ColumnDetailsCategorical = ({ columnDetails }: ColumnDetailsCategoricalProps) => {
   const { id, uniqueOptions, frequencies } = columnDetails;
   const labels = uniqueOptions && Object.values(uniqueOptions);
   const barData = {
@@ -70,7 +70,7 @@ function ColumnDetailsCategorical({ columnDetails }: ColumnDetailsCategoricalPro
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ColumnDetailsNumerical.tsx b/src/UIComponents/ColumnDetailsNumerical.tsx
index d99d2c70..49c94191 100644
--- a/src/UIComponents/ColumnDetailsNumerical.tsx
+++ b/src/UIComponents/ColumnDetailsNumerical.tsx
@@ -10,7 +10,7 @@ interface ColumnDetailsNumericalProps {
   columnDetails: NumericalColumnDetails;
 }
 
-function ColumnDetailsNumerical({ columnDetails }: ColumnDetailsNumericalProps) {
+const ColumnDetailsNumerical = ({ columnDetails }: ColumnDetailsNumericalProps) => {
   const { extrema, containsOnlyNumbers } = columnDetails;
 
   return (
@@ -30,7 +30,7 @@ function ColumnDetailsNumerical({ columnDetails }: ColumnDetailsNumericalProps)
       )}
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ColumnInspector.tsx b/src/UIComponents/ColumnInspector.tsx
index 7872a3e0..5dbcc444 100644
--- a/src/UIComponents/ColumnInspector.tsx
+++ b/src/UIComponents/ColumnInspector.tsx
@@ -25,7 +25,7 @@ interface ColumnInspectorProps {
   datasetId: string | undefined;
 }
 
-function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: ColumnInspectorProps) {
+const ColumnInspector = ({ currentColumnDetails, currentPanel, datasetId }: ColumnInspectorProps) => {
   const selectingFeatures = currentPanel === "dataDisplayFeatures";
   const selectingLabel = currentPanel === "dataDisplayLabel";
 
@@ -89,7 +89,7 @@ function ColumnInspector({ currentColumnDetails, currentPanel, datasetId }: Colu
       </div>
     )
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/CrossTab.tsx b/src/UIComponents/CrossTab.tsx
index 6ceb379d..e2b67082 100644
--- a/src/UIComponents/CrossTab.tsx
+++ b/src/UIComponents/CrossTab.tsx
@@ -16,7 +16,7 @@ interface CrossTabProps {
   crossTabData: CrossTabData | null;
 }
 
-function CrossTab({ crossTabData }: CrossTabProps) {
+const CrossTab = ({ crossTabData }: CrossTabProps) => {
   const getCellStyle = useCallback((percent: number) => {
     return {
       ...(styles as Record<string, React.CSSProperties>)["crossTabCell" + Math.round(percent / 20)],
@@ -131,7 +131,7 @@ function CrossTab({ crossTabData }: CrossTabProps) {
       )}
     </div>
   );
-}
+};
 
 export default connect((state: RootState) => ({
   crossTabData: getCrossTabData(state)
diff --git a/src/UIComponents/DataCard.tsx b/src/UIComponents/DataCard.tsx
index abf9e1ab..a0b81a51 100644
--- a/src/UIComponents/DataCard.tsx
+++ b/src/UIComponents/DataCard.tsx
@@ -15,7 +15,7 @@ interface DataCardProps {
   removedRowsCount?: number;
 }
 
-function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount }: DataCardProps) {
+const DataCard = ({ name, metadata, datasetDetails, dataLength, removedRowsCount }: DataCardProps) => {
   const card = metadata && metadata.card;
 
   const dataLengthLimit = 20000;
@@ -101,7 +101,7 @@ function DataCard({ name, metadata, datasetDetails, dataLength, removedRowsCount
       </div>
     )
   );
-}
+};
 
 export default connect((state: RootState) => ({
   name: state.name,
diff --git a/src/UIComponents/DataDisplay.tsx b/src/UIComponents/DataDisplay.tsx
index 1100fe10..2078116e 100644
--- a/src/UIComponents/DataDisplay.tsx
+++ b/src/UIComponents/DataDisplay.tsx
@@ -11,7 +11,7 @@ interface DataDisplayProps {
   data?: DataRow[];
 }
 
-function DataDisplay({ data }: DataDisplayProps) {
+const DataDisplay = ({ data }: DataDisplayProps) => {
   if (data!.length === 0) {
     return null;
   }
@@ -32,7 +32,7 @@ function DataDisplay({ data }: DataDisplayProps) {
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/DataTable.tsx b/src/UIComponents/DataTable.tsx
index 75229b63..595b77c5 100644
--- a/src/UIComponents/DataTable.tsx
+++ b/src/UIComponents/DataTable.tsx
@@ -24,7 +24,7 @@ interface DataTableProps {
   useResultsData?: boolean;
 }
 
-function DataTable({
+const DataTable = ({
   currentPanel,
   data,
   datasetId,
@@ -39,7 +39,7 @@ function DataTable({
   startingRow,
   noLabel,
   hideLabel
-}: DataTableProps) {
+}: DataTableProps) => {
   const getColumnHeaderStyle = (key: string) => {
     let style;
 
@@ -172,7 +172,7 @@ function DataTable({
       </tbody>
     </table>
   );
-}
+};
 
 export default connect(
   (state: RootState, props: { useResultsData?: boolean }) => ({
diff --git a/src/UIComponents/GenerateResults.tsx b/src/UIComponents/GenerateResults.tsx
index 04550a71..611f9065 100644
--- a/src/UIComponents/GenerateResults.tsx
+++ b/src/UIComponents/GenerateResults.tsx
@@ -23,7 +23,7 @@ interface GenerateResultsProps {
   instructionsOverlayActive: boolean;
 }
 
-function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, instructionsOverlayActive }: GenerateResultsProps) {
+const GenerateResults = ({ data, readyToTrain, labelColumn, selectedFeatures, instructionsOverlayActive }: GenerateResultsProps) => {
   const [frame, setFrame] = useState(0);
   const [, setFinished] = useState(false);
   const frameRef = useRef(0);
@@ -208,7 +208,7 @@ function GenerateResults({ data, readyToTrain, labelColumn, selectedFeatures, in
       <TestingAnimationDescription />
     </div>
   );
-}
+};
 
 export default connect((state: RootState) => ({
   data: getTableData(state, true),
diff --git a/src/UIComponents/ModelCard.tsx b/src/UIComponents/ModelCard.tsx
index 6066ab6d..220ad5b9 100644
--- a/src/UIComponents/ModelCard.tsx
+++ b/src/UIComponents/ModelCard.tsx
@@ -19,7 +19,7 @@ interface ModelCardProps {
   datasetDetails: DatasetDetails;
 }
 
-function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }: ModelCardProps) {
+const ModelCard = ({ trainedModelDetails, selectedFeatures, percentCorrect, label, features, datasetDetails }: ModelCardProps) => {
   console.log("trainedModelDetails", trainedModelDetails)
   const localizedLabel = getLocalizedColumnName(datasetDetails.name!, label!.id!);
   const localizedFeatures =
@@ -150,7 +150,7 @@ function ModelCard({ trainedModelDetails, selectedFeatures, percentCorrect, labe
       </div>
     </div>
   );
-}
+};
 
 export default connect((state: RootState) => ({
   trainedModelDetails: state.trainedModelDetails,
diff --git a/src/UIComponents/Predict.tsx b/src/UIComponents/Predict.tsx
index d135f7b5..fec59438 100644
--- a/src/UIComponents/Predict.tsx
+++ b/src/UIComponents/Predict.tsx
@@ -31,7 +31,7 @@ interface PredictProps {
   datasetId: string | undefined;
 }
 
-function Predict({
+const Predict = ({
   labelColumn,
   selectedCategoricalFeatures,
   selectedNumericalFeatures,
@@ -42,7 +42,7 @@ function Predict({
   getPredictAvailable: predictAvailable,
   extremaByColumn,
   datasetId
-}: PredictProps) {
+}: PredictProps) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>, feature: string) => {
     setTestData(feature, event.target.value);
   };
@@ -139,7 +139,7 @@ function Predict({
       )}
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/Results.tsx b/src/UIComponents/Results.tsx
index fc0bc405..c206ea2e 100644
--- a/src/UIComponents/Results.tsx
+++ b/src/UIComponents/Results.tsx
@@ -17,7 +17,7 @@ interface ResultsProps {
   setResultsPhase: (phase: number) => void;
 }
 
-function Results({ historicResults, showResultsDetails, setShowResultsDetails, setResultsPhase }: ResultsProps) {
+const Results = ({ historicResults, showResultsDetails, setShowResultsDetails, setResultsPhase }: ResultsProps) => {
   useEffect(() => {
     setResultsPhase(0);
     const timer = setTimeout(() => {
@@ -89,7 +89,7 @@ function Results({ historicResults, showResultsDetails, setShowResultsDetails, s
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ResultsDetails.tsx b/src/UIComponents/ResultsDetails.tsx
index 2eca0a64..eaba36d7 100644
--- a/src/UIComponents/ResultsDetails.tsx
+++ b/src/UIComponents/ResultsDetails.tsx
@@ -25,7 +25,7 @@ interface ResultsDetailsProps {
   incorrectResults: ResultsData;
 }
 
-function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorrect, setShowResultsDetails, correctResults, incorrectResults }: ResultsDetailsProps) {
+const ResultsDetails = ({ resultsTab, selectedFeatures, labelColumn, percentCorrect, setShowResultsDetails, correctResults, incorrectResults }: ResultsDetailsProps) => {
   const onClose = useCallback(() => {
     setShowResultsDetails(false);
   }, [setShowResultsDetails]);
@@ -52,7 +52,7 @@ function ResultsDetails({ resultsTab, selectedFeatures, labelColumn, percentCorr
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ResultsTable.tsx b/src/UIComponents/ResultsTable.tsx
index 7aa2dfbe..932c4d2c 100644
--- a/src/UIComponents/ResultsTable.tsx
+++ b/src/UIComponents/ResultsTable.tsx
@@ -18,7 +18,7 @@ interface ResultsTableProps {
   datasetId: string | undefined;
 }
 
-function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }: ResultsTableProps) {
+const ResultsTable = ({ selectedFeatures, labelColumn, results, isRegression: isRegressionMode, setResultsHighlightRow, resultsHighlightRow, datasetId }: ResultsTableProps) => {
   const getRowCellStyle = useCallback((index: number) => {
     return {
       ...styles.tableCell,
@@ -134,7 +134,7 @@ function ResultsTable({ selectedFeatures, labelColumn, results, isRegression: is
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ResultsToggle.tsx b/src/UIComponents/ResultsToggle.tsx
index 38e988d9..d32ca825 100644
--- a/src/UIComponents/ResultsToggle.tsx
+++ b/src/UIComponents/ResultsToggle.tsx
@@ -11,7 +11,7 @@ interface ResultsToggleProps {
   setResultsTab?: (key: string) => void;
 }
 
-function ResultsToggle({ resultsTab, setResultsTab }: ResultsToggleProps) {
+const ResultsToggle = ({ resultsTab, setResultsTab }: ResultsToggleProps) => {
   const getTogglePillStyle = (key: string) => {
     let style;
     if (key === resultsTab) {
@@ -56,7 +56,7 @@ function ResultsToggle({ resultsTab, setResultsTab }: ResultsToggleProps) {
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/SaveModel.tsx b/src/UIComponents/SaveModel.tsx
index 32680ce8..af5e5560 100644
--- a/src/UIComponents/SaveModel.tsx
+++ b/src/UIComponents/SaveModel.tsx
@@ -27,7 +27,7 @@ interface SaveModelProps {
   datasetId: string | undefined;
 }
 
-function SaveModel({
+const SaveModel = ({
   trainedModel,
   setTrainedModelDetail,
   trainedModelDetails,
@@ -36,7 +36,7 @@ function SaveModel({
   dataDescription,
   isUserUploadedDataset: isUserUploaded,
   datasetId
-}: SaveModelProps) {
+}: SaveModelProps) => {
   const [showColumnDescriptions, setShowColumnDescriptions] = useState(isUserUploaded);
 
   const toggleColumnDescriptions = () => {
@@ -225,7 +225,7 @@ function SaveModel({
       </ScrollableContent>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/ScatterPlot.tsx b/src/UIComponents/ScatterPlot.tsx
index 207de275..3cc3ffde 100644
--- a/src/UIComponents/ScatterPlot.tsx
+++ b/src/UIComponents/ScatterPlot.tsx
@@ -62,7 +62,7 @@ interface ScatterPlotProps {
   } | null;
 }
 
-function ScatterPlot({ scatterPlotData }: ScatterPlotProps) {
+const ScatterPlot = ({ scatterPlotData }: ScatterPlotProps) => {
   const scatterDataCombined = {
     ...scatterDataBase
   };
@@ -93,7 +93,7 @@ function ScatterPlot({ scatterPlotData }: ScatterPlotProps) {
       </div>
     )
   );
-}
+};
 
 export default connect((state: RootState) => ({
   scatterPlotData: getScatterPlotData(state)
diff --git a/src/UIComponents/ScrollableContent.tsx b/src/UIComponents/ScrollableContent.tsx
index a5109255..a52d7879 100644
--- a/src/UIComponents/ScrollableContent.tsx
+++ b/src/UIComponents/ScrollableContent.tsx
@@ -6,7 +6,7 @@ interface ScrollableContentProps {
   children?: ReactNode;
 }
 
-export default function ScrollableContent({ tinted, children }: ScrollableContentProps) {
+const ScrollableContent = ({ tinted, children }: ScrollableContentProps) => {
   return (
     <div
       style={
@@ -16,4 +16,6 @@ export default function ScrollableContent({ tinted, children }: ScrollableConten
       <div style={styles.scrollingContents}>{children}</div>
     </div>
   );
-}
+};
+
+export default ScrollableContent;
diff --git a/src/UIComponents/SelectDataset.tsx b/src/UIComponents/SelectDataset.tsx
index 5961c82a..c9c8bad4 100644
--- a/src/UIComponents/SelectDataset.tsx
+++ b/src/UIComponents/SelectDataset.tsx
@@ -32,7 +32,7 @@ interface SelectDatasetProps {
   invalidData: string | undefined;
 }
 
-function SelectDataset({
+const SelectDataset = ({
   setSelectedName,
   setSelectedCSV,
   setSelectedJSON,
@@ -42,7 +42,7 @@ function SelectDataset({
   name,
   highlightDataset,
   invalidData
-}: SelectDatasetProps) {
+}: SelectDatasetProps) => {
   const [, setDownload] = useState(false);
 
   const handleDatasetClick = (id: string) => {
@@ -156,7 +156,7 @@ function SelectDataset({
       )}
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({
diff --git a/src/UIComponents/SelectLabelButton.tsx b/src/UIComponents/SelectLabelButton.tsx
index 4b50a6b3..42639b7f 100644
--- a/src/UIComponents/SelectLabelButton.tsx
+++ b/src/UIComponents/SelectLabelButton.tsx
@@ -9,7 +9,7 @@ interface SelectLabelButtonProps {
   setLabelColumn: (column: string) => void;
 }
 
-function SelectLabelButton({ column, setLabelColumn }: SelectLabelButtonProps) {
+const SelectLabelButton = ({ column, setLabelColumn }: SelectLabelButtonProps) => {
   const setPredictColumn = (event: React.MouseEvent, column: string) => {
     setLabelColumn(column);
     event.preventDefault();
@@ -25,7 +25,7 @@ function SelectLabelButton({ column, setLabelColumn }: SelectLabelButtonProps) {
       {I18n.t("selectLabelButton")}
     </button>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({}),
diff --git a/src/UIComponents/Statement.tsx b/src/UIComponents/Statement.tsx
index c776c079..2c3848a7 100644
--- a/src/UIComponents/Statement.tsx
+++ b/src/UIComponents/Statement.tsx
@@ -19,7 +19,7 @@ interface StatementProps {
   datasetId?: string;
 }
 
-function Statement({
+const Statement = ({
   shouldShow,
   smallFont,
   data,
@@ -29,7 +29,7 @@ function Statement({
   setLabelColumn,
   removeSelectedFeature,
   datasetId
-}: StatementProps) {
+}: StatementProps) => {
   const removeLabel = () => {
     setLabelColumn!(null);
   };
@@ -140,7 +140,7 @@ function Statement({
       {predictionStatementComponents}
     </div>
   );
-}
+};
 
 export const UnconnectedStatement = Statement;
 
diff --git a/src/UIComponents/TrainModel.tsx b/src/UIComponents/TrainModel.tsx
index d83f26f4..f201167b 100644
--- a/src/UIComponents/TrainModel.tsx
+++ b/src/UIComponents/TrainModel.tsx
@@ -24,7 +24,7 @@ interface TrainModelProps {
   instructionsOverlayActive: boolean;
 }
 
-function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures, instructionsOverlayActive }: TrainModelProps) {
+const TrainModel = ({ data, readyToTrain: ready, labelColumn, selectedFeatures, instructionsOverlayActive }: TrainModelProps) => {
   const [frame, setFrame] = useState(0);
   const [headOpen, setHeadOpen] = useState(false);
   const [, setFinished] = useState(false);
@@ -186,7 +186,7 @@ function TrainModel({ data, readyToTrain: ready, labelColumn, selectedFeatures,
       <TrainingAnimationDescription />
     </div>
   );
-}
+};
 
 export default connect((state: RootState) => ({
   data: getTableData(state, false),
diff --git a/src/UIComponents/UniqueOptionsWarning.tsx b/src/UIComponents/UniqueOptionsWarning.tsx
index 10e128fd..3d2c37d9 100644
--- a/src/UIComponents/UniqueOptionsWarning.tsx
+++ b/src/UIComponents/UniqueOptionsWarning.tsx
@@ -11,7 +11,7 @@ interface UniqueOptionsWarningProps {
   showWarning?: boolean;
 }
 
-function UniqueOptionsWarning({ showWarning }: UniqueOptionsWarningProps) {
+const UniqueOptionsWarning = ({ showWarning }: UniqueOptionsWarningProps) => {
   if (!showWarning) {
     return null;
   }
@@ -24,7 +24,7 @@ function UniqueOptionsWarning({ showWarning }: UniqueOptionsWarningProps) {
       </div>
     </div>
   );
-}
+};
 
 export default connect(
   (state: RootState) => ({