TS typing for Dataframe (#2382)

* initial TS typing

* first cut at Dataframe TS typing

* more Dataframe typing

* comments

* more Dataframe cleanup

* PR review fixes and improvements

client/src/components/brushableHistogram/index.tsx

@@ -11,6 +11,7 @@ import Histogram from "./histogram";
 import HistogramFooter from "./footer";
 import StillLoading from "./loading";
 import ErrorLoading from "./error";
+import { Dataframe } from "../../util/dataframe";
 
 const MARGIN = {
   LEFT: 10, // Space for 0 tick label on X axis
@@ -116,9 +117,12 @@ class HistogramBrush extends React.PureComponent {
     };
   };
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'selection' is declared but its value is never rea... Remove this comment to see the full error message
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-  onBrushEnd = (selection: any, x: any) =>
+  onBrushEnd =
+    (
+      _selection: any, // eslint-disable-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
+      x: any // eslint-disable-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
+    ) =>
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
     () => {
       const {
@@ -257,18 +261,18 @@ class HistogramBrush extends React.PureComponent {
 
     const query = this.createQuery();
     // @ts-expect-error ts-migrate(2488) FIXME: Type 'any[] | null' must have a '[Symbol.iterator]... Remove this comment to see the full error message
-    const df = await annoMatrix.fetch(...query);
+    const df: Dataframe = await annoMatrix.fetch(...query);
     const column = df.icol(0);
 
     // if we are clipped, fetch both our value and our unclipped value,
     // as we need the absolute min/max range, not just the clipped min/max.
-    const summary = column.summarize();
+    const summary = column.summarizeContinuous();
     const range = [summary.min, summary.max];
 
     let unclippedRange = [...range];
     if (isClipped) {
-      const parent = await annoMatrix.viewOf.fetch(...query);
-      const { min, max } = parent.icol(0).summarize();
+      const parent: Dataframe = await annoMatrix.viewOf.fetch(...query);
+      const { min, max } = parent.icol(0).summarizeContinuous();
       unclippedRange = [min, max];
     }
 
@@ -320,7 +324,8 @@ class HistogramBrush extends React.PureComponent {
      recalculate expensive stuff, notably bins, summaries, etc.
     */
     const histogramCache = {}; /* maybe change this so that it computes ... */
-    const summary = col.summarize(); /* this is memoized, so it's free the second time you call it */
+    const summary =
+      col.summarizeContinuous(); /* this is memoized, so it's free the second time you call it */
     const { min: domainMin, max: domainMax } = summary;
     const numBins = 40;
     const { TOP: topMargin, LEFT: leftMargin } = newMargin;
@@ -333,7 +338,7 @@ class HistogramBrush extends React.PureComponent {
       .range([leftMargin, leftMargin + newWidth]);
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-    (histogramCache as any).bins = col.histogram(numBins, [
+    (histogramCache as any).bins = col.histogramContinuous(numBins, [
       domainMin,
       domainMax,
     ]);

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

@@ -26,6 +26,7 @@ import {
   createColorQuery,
 } from "../../../util/stateManager/colorHelpers";
 import actions from "../../../actions";
+import { Dataframe } from "../../../util/dataframe";
 
 const LABEL_WIDTH = globals.leftSidebarWidth - 100;
 const ANNO_BUTTON_WIDTH = 50;
@@ -165,8 +166,20 @@ class Category extends React.PureComponent {
     };
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-  async fetchData(annoMatrix: any, metadataField: any, colors: any) {
+  async fetchData(
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
+    annoMatrix: any,
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
+    metadataField: any,
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
+    colors: any
+  ): Promise<
+    [
+      Dataframe,
+      ReturnType<typeof createCategorySummaryFromDfCol>,
+      Dataframe | null
+    ]
+  > {
     /*
     fetch our data and the color-by data if appropriate, and then build a summary
     of our category and a color table for the color-by annotation.
@@ -175,7 +188,7 @@ class Category extends React.PureComponent {
     const { colorAccessor, colorMode } = colors;
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'genesets' does not exist on type 'Readon... Remove this comment to see the full error message
     const { genesets } = this.props;
-    let colorDataPromise = Promise.resolve(null);
+    let colorDataPromise: Promise<Dataframe | null> = Promise.resolve(null);
     if (colorAccessor) {
       const query = createColorQuery(
         colorMode,
@@ -185,10 +198,10 @@ class Category extends React.PureComponent {
       );
       if (query) colorDataPromise = annoMatrix.fetch(...query);
     }
-    const [categoryData, colorData] = await Promise.all([
-      annoMatrix.fetch("obs", metadataField),
-      colorDataPromise,
-    ]);
+    const [categoryData, colorData] = await Promise.all<
+      Dataframe,
+      Dataframe | null
+    >([annoMatrix.fetch("obs", metadataField), colorDataPromise]);
 
     // our data
     const column = categoryData.icol(0);
@@ -200,8 +213,8 @@ class Category extends React.PureComponent {
     return [categoryData, categorySummary, colorData];
   }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-  updateColorTable(colorData: any) {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- - FIXME: disabled temporarily on migrate to TS.
+  updateColorTable(colorData: Dataframe|null) {
     // color table, which may be null
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
     const { schema, colors, metadataField } = this.props;

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

@@ -25,6 +25,7 @@ import actions from "../../../actions";
 import MiniHistogram from "../../miniHistogram";
 import MiniStackedBar from "../../miniStackedBar";
 import { CategoryCrossfilterContext } from "../categoryContext";
+import { Dataframe, ContinuousHistogram } from "../../../util/dataframe";
 
 const STACKED_BAR_HEIGHT = 11;
 const STACKED_BAR_WIDTH = 100;
@@ -327,13 +328,11 @@ class CategoryValue extends React.Component<{}, State> {
   createHistogramBins = (
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     metadataField: any,
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-    categoryData: any,
+    categoryData: Dataframe,
     // @ts-expect-error ts-migrate(6133) FIXME: 'colorAccessor' is declared but its value is never... Remove this comment to see the full error message
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     colorAccessor: any,
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-    colorData: any,
+    colorData: Dataframe,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     categoryValue: any,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
@@ -348,17 +347,17 @@ class CategoryValue extends React.Component<{}, State> {
     */
     const groupBy = categoryData.col(metadataField);
     const col = colorData.icol(0);
-    const range = col.summarize();
+    const range = col.summarizeContinuous();
 
-    const histogramMap = col.histogram(
+    const histogramMap = col.histogramContinuousBy(
       50,
       [range.min, range.max],
       groupBy
-    ); /* Because the signature changes we really need different names for histogram to differentiate signatures  */
+    ); 
 
     const bins = histogramMap.has(categoryValue)
-      ? histogramMap.get(categoryValue)
-      : new Array(50).fill(0);
+      ? histogramMap.get(categoryValue) as ContinuousHistogram
+      : new Array<number>(50).fill(0);
 
     const xScale = d3.scaleLinear().domain([0, bins.length]).range([0, width]);
 
@@ -377,12 +376,10 @@ class CategoryValue extends React.Component<{}, State> {
   createStackedGraphBins = (
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     metadataField: any,
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-    categoryData: any,
+    categoryData: Dataframe,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     colorAccessor: any,
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
-    colorData: any,
+    colorData: Dataframe,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     categoryValue: any,
     // @ts-expect-error ts-migrate(6133) FIXME: 'colorTable' is declared but its value is never re... Remove this comment to see the full error message
@@ -401,7 +398,7 @@ class CategoryValue extends React.Component<{}, State> {
     const groupBy = categoryData.col(metadataField);
     const occupancyMap = colorData
       .col(colorAccessor)
-      .histogramCategorical(groupBy);
+      .histogramCategoricalBy(groupBy);
 
     const occupancy = occupancyMap.get(categoryValue);
 

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

@@ -8,6 +8,8 @@ import {
   Position,
 } from "@blueprintjs/core";
 
+import { Dataframe } from "../../../util/dataframe";
+
 // @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state) => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
@@ -21,34 +23,32 @@ class Occupancy extends React.PureComponent {
 
   _HEIGHT = 11;
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
-  createHistogram = () => {
+  createHistogram = (): void => {
     /*
-          Knowing that colorScale is based off continous data,
-          createHistogram fetches the continous data in relation to the cells releveant to the catagory value.
-          It then seperates that data into 50 bins for drawing the mini-histogram
+          Knowing that colorScale is based off continuous data,
+          createHistogram fetches the continuous data in relation to the cells relevant to the category value.
+          It then separates that data into 50 bins for drawing the mini-histogram
         */
-    const {
+    const { metadataField, categoryData, colorData, categoryValue } = this
+      .props as {
       // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
-      metadataField,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
-      categoryData,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
-      colorData,
+      metadataField;
+      categoryData: Dataframe;
+      colorData: Dataframe;
       // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
-      categoryValue,
-    } = this.props;
+      categoryValue;
+    };
     if (!this.canvas) return;
     const groupBy = categoryData.col(metadataField);
     const col = colorData.icol(0);
-    const range = col.summarize();
-    const histogramMap = col.histogram(
+    const range = col.summarizeContinuous();
+    const histogramMap = col.histogramContinuousBy(
       50,
       [range.min, range.max],
       groupBy
-    ); /* Because the signature changes we really need different names for histogram to differentiate signatures  */
+    );
     const bins = histogramMap.has(categoryValue)
-      ? histogramMap.get(categoryValue)
+      ? (histogramMap.get(categoryValue) as number[])
       : new Array(50).fill(0);
     const xScale = d3
       .scaleLinear()
@@ -71,36 +71,41 @@ class Occupancy extends React.PureComponent {
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
-  createOccupancyStack = () => {
+  createOccupancyStack = (): void => {
     /*
           Knowing that the color scale is based off of catagorical data,
           createOccupancyStack obtains a map showing the number if cells per colored value
           Using the colorScale a stack of colored bars is drawn representing the map
          */
     const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'metadataField' does not exist on type 'R... Remove this comment to see the full error message
       metadataField,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryData' does not exist on type 'Re... Remove this comment to see the full error message
       categoryData,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorAccessor' does not exist on type 'R... Remove this comment to see the full error message
       colorAccessor,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'categoryValue' does not exist on type 'R... Remove this comment to see the full error message
       categoryValue,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
       colorTable,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'schema' does not exist on type 'Readonly... Remove this comment to see the full error message
       schema,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorData' does not exist on type 'Reado... Remove this comment to see the full error message
       colorData,
-    } = this.props;
+    } = this.props as {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+      metadataField: any;
+      categoryData: Dataframe;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+      colorAccessor: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+      categoryValue: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+      colorTable: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
+      schema: any;
+      colorData: Dataframe;
+    };
     const { scale: colorScale } = colorTable;
     const ctx = this.canvas?.getContext("2d");
     if (!ctx) return;
     const groupBy = categoryData.col(metadataField);
     const occupancyMap = colorData
       .col(colorAccessor)
-      .histogramCategorical(groupBy);
+      .histogramCategoricalBy(groupBy);
     const occupancy = occupancyMap.get(categoryValue);
     if (occupancy && occupancy.size > 0) {
       // not all categories have occupancy, so occupancy may be undefined.
@@ -119,7 +124,7 @@ class Occupancy extends React.PureComponent {
       let value;
       for (let i = 0, { length } = categoryValues; i < length; i += 1) {
         value = categoryValues[i];
-        o = occupancy.get(value);
+        o = occupancy.get(value) as number;
         scaledValue = x(o);
         ctx.fillStyle = o
           ? colorScale(categories.indexOf(value))

client/src/components/embedding/index.tsx

@@ -121,6 +121,7 @@ const loadAllEmbeddingCounts = async ({ annoMatrix, available }: any) => {
   return available.map((name, idx) => ({
     embeddingName: name,
     embedding: embeddings[idx],
+    // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'unknown' is not assignable...
     discreteCellIndex: getDiscreteCellEmbeddingRowIndex(embeddings[idx]),
   }));
 };

client/src/components/geneExpression/menus/addGenes.tsx

@@ -19,6 +19,7 @@ import {
 
 import { memoize } from "../../../util/dataframe/util";
 import parseBulkGeneString from "../../../util/parseBulkGeneString";
+import { Dataframe } from "../../../util/dataframe";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 const renderGene = (fuzzySortResult: any, { handleClick, modifiers }: any) => {
@@ -187,7 +188,7 @@ class AddGenes extends React.Component<{}, AddGenesState> {
 
       this.setState({ status: "pending" });
       try {
-        const df = await annoMatrix.fetch("var", varIndex);
+        const df: Dataframe = await annoMatrix.fetch("var", varIndex);
         this.setState({
           status: "success",
           geneNames: df.col(varIndex).asArray(),

client/src/components/geneExpression/quickGene.tsx

@@ -9,6 +9,7 @@ import Gene from "./gene";
 
 import { postUserErrorToast } from "../framework/toasters";
 import actions from "../../actions";
+import { Dataframe, DataframeValue } from "../../util/dataframe";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 const usePrevious = (value: any) => {
@@ -24,7 +25,7 @@ function QuickGene() {
   const dispatch = useDispatch();
 
   const [isExpanded, setIsExpanded] = useState(true);
-  const [geneNames, setGeneNames] = useState([]);
+  const [geneNames, setGeneNames] = useState([] as DataframeValue[]);
   const [, setStatus] = useState("pending");
 
   const { annoMatrix, userDefinedGenes, userDefinedGenesLoading } = useSelector(
@@ -50,9 +51,9 @@ function QuickGene() {
 
       setStatus("pending");
       try {
-        const df = await annoMatrix.fetch("var", varIndex);
+        const df: Dataframe = await annoMatrix.fetch("var", varIndex);
         setStatus("success");
-        setGeneNames(df.col(varIndex).asArray());
+        setGeneNames(df.col(varIndex).asArray() as DataframeValue[]);
       } catch (error) {
         setStatus("error");
         throw error;
@@ -95,7 +96,6 @@ function QuickGene() {
     const gene = g.target;
     if (userDefinedGenes.indexOf(gene) !== -1) {
       postUserErrorToast("That gene already exists");
-      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'any' is not assignable to parame... Remove this comment to see the full error message
     } else if (geneNames.indexOf(gene) === undefined) {
       postUserErrorToast("That doesn't appear to be a valid gene name.");
     } else {

client/src/components/graph/graph.tsx

@@ -26,6 +26,7 @@ import {
   flagSelected,
   flagHighlight,
 } from "../../util/glHelpers";
+import { Dataframe } from "../../util/dataframe";
 
 /*
 Simple 2D transforms control all point painting.  There are three:
@@ -558,7 +559,11 @@ class Graph extends React.Component<{}, GraphState> {
       handleEnd = this.handleLassoEnd.bind(this);
       handleCancel = this.handleLassoCancel.bind(this);
     }
-    const { svg: newToolSVG, tool, container } = setupSVGandBrushElements(
+    const {
+      svg: newToolSVG,
+      tool,
+      container,
+    } = setupSVGandBrushElements(
       selectionTool,
       handleStart,
       handleDrag,
@@ -592,8 +597,7 @@ class Graph extends React.Component<{}, GraphState> {
     const positions = this.computePointPositions(X, Y, modelTF);
     const colorTable = this.updateColorTable(colorsProp, colorDf);
     const colors = this.computePointColors(colorTable.rgb);
-    const { colorAccessor } = colorsProp;
-    const colorByData = colorDf?.col(colorAccessor)?.asArray();
+    const colorByData = colorDf?.icol(0)?.asArray();
     const {
       metadataField: pointDilationCategory,
       categoryField: pointDilationLabel,
@@ -627,7 +631,7 @@ class Graph extends React.Component<{}, GraphState> {
     colors: any,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     pointDilation: any
-  ) {
+  ): Promise<[Dataframe, Dataframe | null, Dataframe | null]> {
     /*
         fetch all data needed.  Includes:
           - the color by dataframe
@@ -635,22 +639,18 @@ class Graph extends React.Component<{}, GraphState> {
           - the point dilation dataframe
         */
     const { metadataField: pointDilationAccessor } = pointDilation;
-    const promises = [];
-    // layout
-    promises.push(annoMatrix.fetch("emb", layoutChoice.current));
-    // color
     const query = this.createColorByQuery(colors);
-    if (query) {
-      promises.push(annoMatrix.fetch(...query));
-    } else {
-      promises.push(Promise.resolve(null));
-    }
-    // point highlighting
-    if (pointDilationAccessor) {
-      promises.push(annoMatrix.fetch("obs", pointDilationAccessor));
-    } else {
-      promises.push(Promise.resolve(null));
-    }
+    const promises: [
+      Promise<Dataframe>,
+      Promise<Dataframe | null>,
+      Promise<Dataframe | null>
+    ] = [
+      annoMatrix.fetch("emb", layoutChoice.current),
+      query ? annoMatrix.fetch(...query) : Promise.resolve(null),
+      pointDilationAccessor
+        ? annoMatrix.fetch("obs", pointDilationAccessor)
+        : Promise.resolve(null),
+    ];
     return Promise.all(promises);
   }
 

client/src/components/scatterplot/scatterplot.tsx

@@ -22,6 +22,7 @@ import {
   flagSelected,
   flagHighlight,
 } from "../../util/glHelpers";
+import { Dataframe, DataframeColumn } from "../../util/dataframe";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 function createProjectionTF(viewportWidth: any, viewportHeight: any) {
@@ -33,9 +34,9 @@ function createProjectionTF(viewportWidth: any, viewportHeight: any) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-function getScale(col: any, rangeMin: any, rangeMax: any) {
+function getScale(col: DataframeColumn, rangeMin: any, rangeMax: any) {
   if (!col) return null;
-  const { min, max } = col.summarize();
+  const { min, max } = col.summarizeContinuous();
   return d3.scaleLinear().domain([min, max]).range([rangeMin, rangeMax]);
 }
 const getXScale = memoize(getScale);
@@ -276,17 +277,13 @@ class Scatterplot extends React.PureComponent<{}, State> {
       pointDilation,
     } = props.watchProps;
 
-    const [
-      expressionXDf,
-      expressionYDf,
-      colorDf,
-      pointDilationDf,
-    ] = await this.fetchData(
-      scatterplotXXaccessor,
-      scatterplotYYaccessor,
-      colorsProp,
-      pointDilation
-    );
+    const [expressionXDf, expressionYDf, colorDf, pointDilationDf] =
+      await this.fetchData(
+        scatterplotXXaccessor,
+        scatterplotYYaccessor,
+        colorsProp,
+        pointDilation
+      );
     const colorTable = this.updateColorTable(colorsProp, colorDf);
 
     const xCol = expressionXDf.icol(0);
@@ -383,37 +380,32 @@ class Scatterplot extends React.PureComponent<{}, State> {
     colors: any,
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any -- - FIXME: disabled temporarily on migrate to TS.
     pointDilation: any
-  ) {
+  ): Promise<
+    [Dataframe, Dataframe, Dataframe | null, Dataframe | null]
+  > {
     // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
     const { annoMatrix } = this.props;
     const { metadataField: pointDilationAccessor } = pointDilation;
 
-    const promises = [];
-    // X and Y dimensions
-    promises.push(
-      // @ts-expect-error ts-migrate(2488) FIXME: Type '(string | { where: { field: string; column: ... Remove this comment to see the full error message
-      annoMatrix.fetch(...this.createXQuery(scatterplotXXaccessor))
-    );
-    promises.push(
-      annoMatrix.fetch(...this.createXQuery(scatterplotYYaccessor))
-    );
-
-    // color
     const query = this.createColorByQuery(colors);
-    if (query) {
-      promises.push(annoMatrix.fetch(...query));
-    } else {
-      promises.push(Promise.resolve(null));
-    }
 
-    // point highlighting
-    if (pointDilationAccessor) {
-      promises.push(annoMatrix.fetch("obs", pointDilationAccessor));
-    } else {
-      promises.push(Promise.resolve(null));
-    }
+    const promises: [Dataframe, Dataframe, Dataframe | null, Dataframe | null] =
+      [
+        // @ts-expect-error ts-migrate(2488) FIXME: Type '(string | { where: { field: string; column: ... Remove this comment to see the full error message
+        annoMatrix.fetch(...this.createXQuery(scatterplotXXaccessor)),
+        annoMatrix.fetch(...this.createXQuery(scatterplotYYaccessor)),
+        query ? annoMatrix.fetch(...query) : Promise.resolve(null),
+        pointDilationAccessor
+          ? annoMatrix.fetch("obs", pointDilationAccessor)
+          : Promise.resolve(null),
+      ];
 
-    return Promise.all(promises);
+    return Promise.all<
+      Dataframe,
+      Dataframe,
+      Dataframe | null,
+      Dataframe | null
+    >(promises);
   }
 
   renderCanvas = renderThrottle(() => {