TS migration. #2288. (#2328)

* Added TS. Updated build and linting config. Added types.

* [ts-migrate][.] Rename files from JS/JSX to TS/TSX

Co-authored-by: ts-migrate <>

* [ts-migrate][.] Run TS Migrate

Co-authored-by: ts-migrate <>

* Corrected files mangled by ts-migrate.

* Updated lint config, minor linting.

* Re-enabled Husky.

* Updated tests and config.

* Reverted webpack devtool config.

* Removed obsolete snapshots.

* Added annotations snap.

* Updated tsconfig includes wrt linting.

* Removed ts-migrate.

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

client/src/components/brushableHistogram/error.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import * as globals from "../../globals";
 
-const ErrorLoading = ({ displayName, zebra }) => {
+const ErrorLoading = ({ displayName, zebra }: any) => {
   return (
     <div
       style={{

client/src/components/brushableHistogram/footer.tsx

@@ -2,13 +2,21 @@ import React from "react";
 
 const HistogramFooter = React.memo(
   ({
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'displayName' does not exist on type '{ c... Remove this comment to see the full error message
     displayName,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'hideRanges' does not exist on type '{ ch... Remove this comment to see the full error message
     hideRanges,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeMin' does not exist on type '{ chil... Remove this comment to see the full error message
     rangeMin,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeMax' does not exist on type '{ chil... Remove this comment to see the full error message
     rangeMax,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeColorMin' does not exist on type '{... Remove this comment to see the full error message
     rangeColorMin,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'rangeColorMax' does not exist on type '{... Remove this comment to see the full error message
     rangeColorMax,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{ childre... Remove this comment to see the full error message
     isObs,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
     isGeneSetSummary,
   }) => {
     /*

client/src/components/brushableHistogram/header.tsx

@@ -5,14 +5,23 @@ import * as globals from "../../globals";
 
 const HistogramHeader = React.memo(
   ({
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'fieldId' does not exist on type '{ child... Remove this comment to see the full error message
     fieldId,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorBy' does not exist on type '{ chi... Remove this comment to see the full error message
     isColorBy,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onColorByClick' does not exist on type '... Remove this comment to see the full error message
     onColorByClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onRemoveClick' does not exist on type '{... Remove this comment to see the full error message
     onRemoveClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterPlotX' does not exist on type '... Remove this comment to see the full error message
     isScatterPlotX,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterPlotY' does not exist on type '... Remove this comment to see the full error message
     isScatterPlotY,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onScatterPlotXClick' does not exist on t... Remove this comment to see the full error message
     onScatterPlotXClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'onScatterPlotYClick' does not exist on t... Remove this comment to see the full error message
     onScatterPlotYClick,
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{ childre... Remove this comment to see the full error message
     isObs,
   }) => {
     /*

client/src/components/brushableHistogram/histogram.tsx

@@ -18,7 +18,7 @@ const Histogram = ({
   isColorBy,
   selectionRange,
   mini,
-}) => {
+}: any) => {
   const svgRef = useRef(null);
   const [brush, setBrush] = useState(null);
 
@@ -69,14 +69,18 @@ const Histogram = ({
         .data(bins)
         .enter()
         .append("rect")
+        // @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
         .attr("x", (d, i) => x(binStart(i)) + 1)
         .attr("y", (d) => y(d))
+        // @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
         .attr("width", (d, i) => x(binEnd(i)) - x(binStart(i)) - binPadding)
         .attr("height", (d) => y(0) - y(d))
         .style(
           "fill",
+          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
           isColorBy
-            ? (d, i) => colorScale(histogramScale(binStart(i)))
+            ? // @ts-expect-error ts-migrate(6133) FIXME: 'd' is declared but its value is never read.
+              (d: any, i: any) => colorScale(histogramScale(binStart(i)))
             : defaultBarColor
         );
     }
@@ -101,6 +105,7 @@ const Histogram = ({
       const brushXselection = container
         .insert("g")
         .attr("class", "brush")
+        // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
         .attr("data-testid", `${svgRef.current.dataset.testid}-brushable-area`)
         .call(brushX);
 
@@ -113,6 +118,7 @@ const Histogram = ({
           d3
             .axisBottom(x)
             .ticks(4)
+            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             .tickFormat(d3.format(maybeScientific(x)))
         );
 
@@ -126,8 +132,9 @@ const Histogram = ({
             .axisRight(y)
             .ticks(3)
             .tickFormat(
+              // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
               d3.format(
-                y.domain().some((n) => Math.abs(n) >= 10000) ? ".0e" : ","
+                y.domain().some((n: any) => Math.abs(n) >= 10000) ? ".0e" : ","
               )
             )
         );
@@ -137,6 +144,7 @@ const Histogram = ({
       svg.selectAll(".axis path").style("stroke", "rgb(230,230,230)");
       svg.selectAll(".axis line").style("stroke", "rgb(230,230,230)");
 
+      // @ts-expect-error ts-migrate(2345) FIXME: Argument of type '{ brushX: d3.BrushBehavior<unkno... Remove this comment to see the full error message
       setBrush({ brushX, brushXselection });
     }
   }, [histogram, isColorBy]);
@@ -146,6 +154,7 @@ const Histogram = ({
       paint/update selection brush
       */
     if (!brush) return;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'brushX' does not exist on type 'null'.
     const { brushX, brushXselection } = brush;
     const selection = d3.brushSelection(brushXselection.node());
     if (!selectionRange && selection) {
@@ -162,7 +171,9 @@ const Histogram = ({
       } else {
         /* there is an active selection and a brush - make sure they match */
         const moveDeltaThreshold = 1;
+        // @ts-expect-error ts-migrate(2363) FIXME: The right-hand side of an arithmetic operation mus... Remove this comment to see the full error message
         const dX0 = Math.abs(x0 - selection[0]);
+        // @ts-expect-error ts-migrate(2363) FIXME: The right-hand side of an arithmetic operation mus... Remove this comment to see the full error message
         const dX1 = Math.abs(x1 - selection[1]);
         /*
           only update the brush if it is grossly incorrect,

client/src/components/brushableHistogram/index.tsx

@@ -29,27 +29,31 @@ const MARGIN_MINI = {
 const WIDTH_MINI = 120 - MARGIN_MINI.LEFT - MARGIN_MINI.RIGHT;
 const HEIGHT_MINI = 15 - MARGIN_MINI.TOP - MARGIN_MINI.BOTTOM;
 
+// @ts-expect-error ts-migrate(1238) FIXME: Unable to resolve signature of class decorator whe... Remove this comment to see the full error message
 @connect((state, ownProps) => {
+  // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type '{}'.
   const { isObs, isUserDefined, isGeneSetSummary, field } = ownProps;
   const myName = makeContinuousDimensionName(
     { isObs, isUserDefined, isGeneSetSummary },
     field
   );
   return {
-    annoMatrix: state.annoMatrix,
-    isScatterplotXXaccessor: state.controls.scatterplotXXaccessor === field,
-    isScatterplotYYaccessor: state.controls.scatterplotYYaccessor === field,
-    continuousSelectionRange: state.continuousSelection[myName],
-    isColorAccessor: state.colors.colorAccessor === field,
+    annoMatrix: (state as any).annoMatrix,
+    isScatterplotXXaccessor:
+      (state as any).controls.scatterplotXXaccessor === field,
+    isScatterplotYYaccessor:
+      (state as any).controls.scatterplotYYaccessor === field,
+    continuousSelectionRange: (state as any).continuousSelection[myName],
+    isColorAccessor: (state as any).colors.colorAccessor === field,
   };
 })
 class HistogramBrush extends React.PureComponent {
-  static watchAsync(props, prevProps) {
+  static watchAsync(props: any, prevProps: any) {
     return !shallowEqual(props.watchProps, prevProps.watchProps);
   }
 
   /* memoized closure to prevent HistogramHeader unecessary repaint */
-  handleColorAction = memoize((dispatch) => (field, isObs) => {
+  handleColorAction = memoize((dispatch) => (field: any, isObs: any) => {
     if (isObs) {
       dispatch({
         type: "color by continuous metadata",
@@ -60,25 +64,31 @@ class HistogramBrush extends React.PureComponent {
     }
   });
 
-  onBrush = (selection, x, eventType) => {
+  // @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
+  onBrush = (selection: any, x: any, eventType: any) => {
     const type = `continuous metadata histogram ${eventType}`;
     return () => {
       const {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
         dispatch,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
         field,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
         isObs,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
         isUserDefined,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
         isGeneSetSummary,
       } = this.props;
 
       // ignore programmatically generated events
-      if (!d3.event.sourceEvent) return;
+      if (!(d3 as any).event.sourceEvent) return;
       // ignore cascading events, which are programmatically generated
-      if (d3.event.sourceEvent.sourceEvent) return;
+      if ((d3 as any).event.sourceEvent.sourceEvent) return;
 
       const query = this.createQuery();
-      const range = d3.event.selection
-        ? [x(d3.event.selection[0]), x(d3.event.selection[1])]
+      const range = (d3 as any).event.selection
+        ? [x((d3 as any).event.selection[0]), x((d3 as any).event.selection[1])]
         : null;
       const otherProps = {
         selection: field,
@@ -94,42 +104,52 @@ class HistogramBrush extends React.PureComponent {
     };
   };
 
-  onBrushEnd = (selection, x) => {
+  // @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
+  onBrushEnd = (selection: any, x: any) => {
     return () => {
       const {
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
         dispatch,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
         field,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
         isObs,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
         isUserDefined,
+        // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
         isGeneSetSummary,
       } = this.props;
       const minAllowedBrushSize = 10;
       const smallAmountToAvoidInfiniteLoop = 0.1;
 
       // ignore programmatically generated events
-      if (!d3.event.sourceEvent) return;
+      if (!(d3 as any).event.sourceEvent) return;
       // ignore cascading events, which are programmatically generated
-      if (d3.event.sourceEvent.sourceEvent) return;
+      if ((d3 as any).event.sourceEvent.sourceEvent) return;
 
       let type;
       let range = null;
-      if (d3.event.selection) {
+      if ((d3 as any).event.selection) {
         type = "continuous metadata histogram end";
         if (
-          d3.event.selection[1] - d3.event.selection[0] >
+          (d3 as any).event.selection[1] - (d3 as any).event.selection[0] >
           minAllowedBrushSize
         ) {
-          range = [x(d3.event.selection[0]), x(d3.event.selection[1])];
+          range = [
+            x((d3 as any).event.selection[0]),
+            x((d3 as any).event.selection[1]),
+          ];
         } else {
           /* the user selected range is too small and will be hidden #587, so take control of it procedurally */
           /* https://stackoverflow.com/questions/12354729/d3-js-limit-size-of-brush */
-
           const procedurallyResizedBrushWidth =
-            d3.event.selection[0] +
+            (d3 as any).event.selection[0] +
             minAllowedBrushSize +
             smallAmountToAvoidInfiniteLoop; //
-
-          range = [x(d3.event.selection[0]), x(procedurallyResizedBrushWidth)];
+          range = [
+            x((d3 as any).event.selection[0]),
+            x(procedurallyResizedBrushWidth),
+          ];
         }
       } else {
         type = "continuous metadata histogram cancel";
@@ -151,6 +171,7 @@ class HistogramBrush extends React.PureComponent {
   };
 
   handleSetGeneAsScatterplotX = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, field } = this.props;
     dispatch({
       type: "set scatterplot x",
@@ -159,6 +180,7 @@ class HistogramBrush extends React.PureComponent {
   };
 
   handleSetGeneAsScatterplotY = () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
     const { dispatch, field } = this.props;
     dispatch({
       type: "set scatterplot y",
@@ -168,10 +190,15 @@ class HistogramBrush extends React.PureComponent {
 
   removeHistogram = () => {
     const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
       dispatch,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
       field,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
       isColorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotXXaccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotYYaccessor,
     } = this.props;
     dispatch({
@@ -198,11 +225,13 @@ class HistogramBrush extends React.PureComponent {
   };
 
   fetchAsyncProps = async () => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
     const { annoMatrix, width } = this.props;
 
     const { isClipped } = annoMatrix;
 
     const query = this.createQuery();
+    // @ts-expect-error ts-migrate(2488) FIXME: Type 'any[] | null' must have a '[Symbol.iterator]... Remove this comment to see the full error message
     const df = await annoMatrix.fetch(...query);
     const column = df.icol(0);
 
@@ -261,7 +290,7 @@ class HistogramBrush extends React.PureComponent {
   };
 
   // eslint-disable-next-line class-methods-use-this -- instance method allows for memoization per annotation
-  calcHistogramCache(col, newMargin, newWidth, newHeight) {
+  calcHistogramCache(col: any, newMargin: any, newWidth: any, newHeight: any) {
     /*
      recalculate expensive stuff, notably bins, summaries, etc.
     */
@@ -269,35 +298,30 @@ class HistogramBrush extends React.PureComponent {
     const summary = col.summarize(); /* 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; /* changes with mini */
-
-    histogramCache.domain = [
-      domainMin,
-      domainMax,
-    ]; /* doesn't change with mini */
-
-    histogramCache.x = d3
+    const { TOP: topMargin, LEFT: leftMargin } = newMargin;
+    (histogramCache as any).domain = [domainMin, domainMax];
+    /* doesn't change with mini */ (histogramCache as any).x = d3
       .scaleLinear()
       .domain([domainMin, domainMax])
       .range([leftMargin, leftMargin + newWidth]);
 
-    histogramCache.bins = col.histogram(numBins, [
+    (histogramCache as any).bins = col.histogram(numBins, [
       domainMin,
       domainMax,
-    ]); /* memoized */
+    ]);
+    /* memoized */ (histogramCache as any).binWidth =
+      (domainMax - domainMin) / numBins;
 
-    histogramCache.binWidth = (domainMax - domainMin) / numBins;
+    (histogramCache as any).binStart = (i: any) =>
+      domainMin + i * (histogramCache as any).binWidth;
+    (histogramCache as any).binEnd = (i: any) =>
+      domainMin + (i + 1) * (histogramCache as any).binWidth;
 
-    histogramCache.binStart = (i) => domainMin + i * histogramCache.binWidth;
-    histogramCache.binEnd = (i) =>
-      domainMin + (i + 1) * histogramCache.binWidth;
+    const yMax = (histogramCache as any).bins.reduce((l: any, r: any) =>
+      l > r ? l : r
+    );
 
-    const yMax = histogramCache.bins.reduce((l, r) => (l > r ? l : r));
-
-    histogramCache.y = d3
+    (histogramCache as any).y = d3
       .scaleLinear()
       .domain([0, yMax])
       .range([topMargin + newHeight, topMargin]);
@@ -306,13 +330,8 @@ class HistogramBrush extends React.PureComponent {
   }
 
   createQuery() {
-    const {
-      isObs,
-      isGeneSetSummary,
-      field,
-      setGenes,
-      annoMatrix,
-    } = this.props;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
+    const { isObs, isGeneSetSummary, field, setGenes, annoMatrix } = this.props;
     const { schema } = annoMatrix;
     if (isObs) {
       return ["obs", field];
@@ -349,21 +368,35 @@ class HistogramBrush extends React.PureComponent {
 
   render() {
     const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'dispatch' does not exist on type 'Readon... Remove this comment to see the full error message
       dispatch,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoMatrix' does not exist on type 'Read... Remove this comment to see the full error message
       annoMatrix,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'field' does not exist on type 'Readonly<... Remove this comment to see the full error message
       field,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isColorAccessor' does not exist on type ... Remove this comment to see the full error message
       isColorAccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isUserDefined' does not exist on type 'R... Remove this comment to see the full error message
       isUserDefined,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isGeneSetSummary' does not exist on type... Remove this comment to see the full error message
       isGeneSetSummary,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotXXaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotXXaccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isScatterplotYYaccessor' does not exist ... Remove this comment to see the full error message
       isScatterplotYYaccessor,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'zebra' does not exist on type 'Readonly<... Remove this comment to see the full error message
       zebra,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'continuousSelectionRange' does not exist... Remove this comment to see the full error message
       continuousSelectionRange,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isObs' does not exist on type 'Readonly<... Remove this comment to see the full error message
       isObs,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'mini' does not exist on type 'Readonly<{... Remove this comment to see the full error message
       mini,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'setGenes' does not exist on type 'Readon... Remove this comment to see the full error message
       setGenes,
     } = this.props;
 
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
     let { width } = this.props;
     if (!width) {
       width = mini ? WIDTH_MINI : WIDTH;
@@ -392,7 +425,7 @@ class HistogramBrush extends React.PureComponent {
         </Async.Rejected>
         <Async.Fulfilled>
           {(asyncProps) =>
-            asyncProps.OK2Render ? (
+            (asyncProps as any).OK2Render ? (
               <div
                 id={`histogram_${fieldForId}`}
                 data-testid={`histogram-${field}`}
@@ -404,6 +437,7 @@ class HistogramBrush extends React.PureComponent {
               >
                 {!mini && isObs ? (
                   <HistogramHeader
+                    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ fieldId: any; isColorBy: any; isObs: any; ... Remove this comment to see the full error message
                     fieldId={field}
                     isColorBy={isColorAccessor}
                     isObs={isObs}
@@ -422,9 +456,11 @@ class HistogramBrush extends React.PureComponent {
                 <Histogram
                   field={field}
                   fieldForId={fieldForId}
-                  display={asyncProps.isSingleValue ? "none" : "block"}
+                  display={(asyncProps as any).isSingleValue ? "none" : "block"}
                   histogram={
-                    mini ? asyncProps.miniHistogram : asyncProps.histogram
+                    mini
+                      ? (asyncProps as any).miniHistogram
+                      : (asyncProps as any).histogram
                   }
                   width={width}
                   height={mini ? HEIGHT_MINI : HEIGHT}
@@ -437,14 +473,15 @@ class HistogramBrush extends React.PureComponent {
                 />
                 {!mini && (
                   <HistogramFooter
+                    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isGeneSetSummary: any; isObs: any; display... Remove this comment to see the full error message
                     isGeneSetSummary={isGeneSetSummary}
                     isObs={isObs}
                     displayName={field}
-                    hideRanges={asyncProps.isSingleValue}
-                    rangeMin={asyncProps.unclippedRange[0]}
-                    rangeMax={asyncProps.unclippedRange[1]}
-                    rangeColorMin={asyncProps.unclippedRangeColor[0]}
-                    rangeColorMax={asyncProps.unclippedRangeColor[1]}
+                    hideRanges={(asyncProps as any).isSingleValue}
+                    rangeMin={(asyncProps as any).unclippedRange[0]}
+                    rangeMax={(asyncProps as any).unclippedRange[1]}
+                    rangeColorMin={(asyncProps as any).unclippedRangeColor[0]}
+                    rangeColorMax={(asyncProps as any).unclippedRangeColor[1]}
                   />
                 )}
               </div>

client/src/components/brushableHistogram/loading.tsx

@@ -3,7 +3,7 @@ import { Button } from "@blueprintjs/core";
 
 import * as globals from "../../globals";
 
-const StillLoading = ({ zebra, displayName }) => {
+const StillLoading = ({ zebra, displayName }: any) => {
   /*
     Render a loading indicator for the field.
     */