fix: no floating promises (#946)

client/__tests__/e2e/cell-guide.test.ts

@@ -85,7 +85,7 @@ describe("CellGuideCXG", () => {
       "h5:has-text('Marker Gene Sets')"
     );
 
-    tryUntil(
+    await tryUntil(
       async () => {
         await markerGeneSetsHeader.click(); // Assuming clicking will expand the section
 

client/__tests__/e2e/cellxgeneActions.ts

@@ -398,7 +398,7 @@ export async function createGeneset(
           .getByTestId("add-geneset-description")
           .fill(genesetDescription);
       }
-      expect(page.getByTestId("submit-geneset")).toBeEnabled();
+      await expect(page.getByTestId("submit-geneset")).toBeEnabled();
     },
     { page }
   );
@@ -430,7 +430,7 @@ export async function editGenesetName(
   await tryUntil(
     async () => {
       await page.getByTestId("rename-geneset-modal").fill(editText);
-      expect(page.getByTestId(submitButton)).toBeEnabled();
+      await expect(page.getByTestId(submitButton)).toBeEnabled();
     },
     { page }
   );
@@ -494,8 +494,10 @@ export async function assertGenesetDoesNotExist(
   page: Page
 ): Promise<void> {
   await tryUntil(
-    () => {
-      expect(page.getByTestId(`${genesetName}:geneset-name`)).toBeHidden();
+    async () => {
+      await expect(
+        page.getByTestId(`${genesetName}:geneset-name`)
+      ).toBeHidden();
     },
     { page }
   );
@@ -533,7 +535,8 @@ export async function addGeneToSet(
       await page
         .getByTestId("add-genes-to-geneset-dialog")
         .fill(geneToAddToSet);
-      expect(page.getByTestId(submitButton)).toBeEnabled();
+
+      await expect(page.getByTestId(submitButton)).toBeEnabled();
     },
     { page }
   );
@@ -672,7 +675,7 @@ export async function duplicateCategory(
 
   const dropdownOptionClass = "duplicate-category-dropdown-option";
 
-  tryUntil(
+  await tryUntil(
     async () => {
       await page.getByTestId("duplicate-category-dropdown").click();
       await expect(page.getByTestId(dropdownOptionClass)).toBeTruthy();
@@ -685,7 +688,7 @@ export async function duplicateCategory(
 
   await option.click();
 
-  tryUntil(
+  await tryUntil(
     async () => {
       await page.getByTestId("submit-category").click();
       await expect(

client/__tests__/e2e/e2e.test.ts

@@ -181,9 +181,9 @@ for (const testDataset of testDatasets) {
       test("continuous data appears", async ({ page }, testInfo) => {
         await goToPage(page, url);
         for (const label of Object.keys(data.continuous)) {
-          expect(page.getByTestId(`histogram-${label}-plot`)).not.toHaveCount(
-            0
-          );
+          await expect(
+            page.getByTestId(`histogram-${label}-plot`)
+          ).not.toHaveCount(0);
 
           await snapshotTestGraph(page, testInfo);
         }
@@ -562,7 +562,7 @@ for (const testDataset of testDatasets) {
     });
 
     test("lasso moves after pan", async ({ page }, testInfo) => {
-      goToPage(page, url);
+      await goToPage(page, url);
 
       await tryUntil(
         async () => {
@@ -787,7 +787,7 @@ for (const testDataset of testDatasets) {
 
               expect(page.getByTestId("geneset")).toBeTruthy();
 
-              expect(
+              await expect(
                 page.getByTestId(`${data.diffexp.pop2Gene}:gene-label`)
               ).toBeVisible();
             },
@@ -810,7 +810,7 @@ for (const testDataset of testDatasets) {
 
               await setup({ option, page, url });
 
-              waitUntilNoSkeletonDetected(page);
+              await waitUntilNoSkeletonDetected(page);
 
               const genesetName = `test-geneset-foo-123`;
 

client/__tests__/e2e/playwright.global.setup.ts

@@ -4,10 +4,10 @@ import { DATASET_METADATA_RESPONSE } from "../__mocks__/apiMock";
 // (seve): mocking required to simulate metadata coming from data-portal needed for navigation header and breadcrumbs
 
 const setup = async ({ page }: { page: Page }) => {
-  await page.route("**/*/dataset-metadata", (route, request) => {
+  await page.route("**/*/dataset-metadata", async (route, request) => {
     const { referer } = request.headers();
 
-    route.fulfill({
+    await route.fulfill({
       status: 200,
       contentType: "application/json",
       body: JSON.stringify(DATASET_METADATA_RESPONSE),
@@ -23,7 +23,7 @@ const setup = async ({ page }: { page: Page }) => {
     const response = await route.fetch();
     const json = await response.json();
 
-    route.fulfill({
+    await route.fulfill({
       status: 200,
       contentType: "application/json",
       body: JSON.stringify({

client/__tests__/util/helpers.ts

@@ -121,7 +121,7 @@ export async function selectNthOption(
   // (thuang): Since the first option is now active, we need to offset by 1
   const step = number - 1;
 
-  Promise.all(
+  await Promise.all(
     Array.from({ length: step }, async () => {
       await page.keyboard.press("ArrowDown");
     })

client/configuration/eslint/eslint.js

@@ -97,6 +97,10 @@ module.exports = {
         devDependencies: true,
       },
     ],
+    "@typescript-eslint/no-floating-promises": [
+      "error",
+      { ignoreVoid: true, ignoreIIFE: true },
+    ],
   },
   overrides: [
     // Override some TypeScript rules just for .js files

client/src/actions/embedding.ts

@@ -11,7 +11,7 @@ import { Field } from "../common/types/schema";
 import * as globals from "../globals";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
-export async function _switchEmbedding(
+async function _switchEmbedding(
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
   prevAnnoMatrix: any,
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
@@ -49,11 +49,13 @@ export const layoutChoiceAction: ActionCreator<
   */
     const { annoMatrix: prevAnnoMatrix, obsCrossfilter: prevCrossfilter } =
       getState();
+
     const [annoMatrix, obsCrossfilter] = await _switchEmbedding(
       prevAnnoMatrix,
       prevCrossfilter,
       newLayoutChoice
     );
+
     dispatch({
       type: "set layout choice",
       layoutChoice: newLayoutChoice,

client/src/actions/index.ts

@@ -218,8 +218,8 @@ const doInitialDataLoad = (): ((
         userColorsFetchAndLoad(dispatch),
       ]);
 
-      datasetMetadataFetchAndLoad(dispatch, oldPrefix, config);
-      datasetUnsMetadataFetchAndLoad(dispatch, "spatial");
+      await datasetMetadataFetchAndLoad(dispatch, oldPrefix, config);
+      await datasetUnsMetadataFetchAndLoad(dispatch, "spatial");
       const baseDataUrl = `${globals.API.prefix}${globals.API.version}`;
       const annoMatrix = new AnnoMatrixLoader(baseDataUrl, schema.schema);
       const obsCrossfilter = new AnnoMatrixObsCrossfilter(annoMatrix);
@@ -242,7 +242,7 @@ const doInitialDataLoad = (): ((
         defaultEmbedding &&
         layoutSchema.some((s: EmbeddingSchema) => s.name === defaultEmbedding)
       ) {
-        dispatch(embActions.layoutChoiceAction(defaultEmbedding));
+        await dispatch(embActions.layoutChoiceAction(defaultEmbedding));
       }
     } catch (error) {
       dispatch({ type: "initial data load error", error });
@@ -292,12 +292,12 @@ const dispatchDiffExpErrors = (
 const DEFAULT_GENESETS_RESPONSE = {
   genesets: [],
 };
-const genesetsFetch = (dispatch: AppDispatch) => {
-  fetchJson("genesets").then((response) => {
-    dispatch({
-      type: "geneset: initial load",
-      data: response ?? DEFAULT_GENESETS_RESPONSE,
-    });
+const genesetsFetch = async (dispatch: AppDispatch) => {
+  const response = await fetchJson("genesets");
+
+  dispatch({
+    type: "geneset: initial load",
+    data: response ?? DEFAULT_GENESETS_RESPONSE,
   });
 };
 

client/src/annoMatrix/annoMatrix.ts

@@ -312,7 +312,7 @@ export default abstract class AnnoMatrix {
     Primary use is to being a cache load as early as is possible, reducing
     overall component rendering latency.
 		*/
-    this._fetch(field, q, nBins);
+    this._fetch(field, q, nBins).catch((error) => console.error(error));
   }
 
   /**

client/src/components/categorical/value/index.tsx

@@ -158,14 +158,15 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
     });
   };
 
-  toggleOff = () => {
+  toggleOff = async () => {
     track(EVENTS.EXPLORER_CATEGORICAL_VALUE_SELECT_BUTTON_CLICKED);
 
     const { dispatch, metadataField, categoryIndex, categorySummary } =
       this.props;
 
     const label = categorySummary.categoryValues[categoryIndex];
-    dispatch(
+
+    await dispatch(
       actions.selectCategoricalMetadataAction(
         "categorical metadata filter deselect",
         metadataField,
@@ -234,13 +235,14 @@ class CategoryValue extends React.Component<Props, InternalStateProps> {
     );
   };
 
-  toggleOn = () => {
+  toggleOn = async () => {
     track(EVENTS.EXPLORER_CATEGORICAL_VALUE_SELECT_BUTTON_CLICKED);
 
     const { dispatch, metadataField, categoryIndex, categorySummary } =
       this.props;
     const label = categorySummary.categoryValues[categoryIndex];
-    dispatch(
+
+    await dispatch(
       actions.selectCategoricalMetadataAction(
         "categorical metadata filter select",
         metadataField,

client/src/components/datasetSelector/truncatingBreadcrumbs.tsx

@@ -146,9 +146,10 @@ const TruncatingBreadcrumbs = React.memo<Props>(
 
     // Load of breadcrumbs can begin once fonts are loaded.
     useEffect(() => {
-      document.fonts.ready.then(() => {
+      (async () => {
+        await document.fonts.ready;
         setFontLoaded(true);
-      });
+      })();
     }, []);
 
     // Once we have the available width, measure element and font, build up view model.

client/src/components/embedding/index.tsx

@@ -61,7 +61,9 @@ class Embedding extends React.PureComponent<{}, EmbeddingState> {
   render() {
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'layoutChoice' does not exist on type 'Re... Remove this comment to see the full error message
     const { layoutChoice, schema, crossfilter } = this.props;
-    const { annoMatrix } = crossfilter;
+    const { annoMatrix } = crossfilter || {};
+
+    if (!crossfilter) return null;
 
     return (
       <ButtonGroup

client/src/components/geneExpression/index.tsx

@@ -36,11 +36,18 @@ class GeneExpression extends React.Component<{}, State> {
   async componentDidMount(): Promise<void> {
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Readon... Remove this comment to see the full error message
     const { annoMatrix } = this.props;
-    const { schema } = annoMatrix;
+
+    const { schema } = annoMatrix || {};
+
+    if (!schema) return;
+
     const varIndex = schema.annotations.var.index;
 
     let dfIds;
-    const df: Dataframe = await annoMatrix.fetch("var", varIndex);
+    const df: Dataframe = await annoMatrix?.fetch("var", varIndex);
+
+    if (!df) return;
+
     this.setState({
       geneNames: df.col(varIndex).asArray() as DataframeValue[],
     });

client/src/components/geneExpression/quickGene.tsx

@@ -48,9 +48,7 @@ function QuickGene() {
   useEffect(() => {
     if (!annoMatrix) return;
 
-    fetch();
-
-    async function fetch() {
+    (async function fetch() {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on commit
       if (annoMatrix !== (prevProps as any)?.annoMatrix) {
         const { schema } = annoMatrix;
@@ -92,7 +90,7 @@ function QuickGene() {
           throw error;
         }
       }
-    }
+    })();
   }, [annoMatrix, prevProps]);
 
   const handleExpand = () => setIsExpanded(!isExpanded);