chore: update the types to remove typing issues around uplot

Author: hkang1

webui/react/src/components/UPlot/UPlotChart/closestPointPlugin.ts

@@ -1,8 +1,7 @@
 import _ from 'lodash';
+import { CheckpointsDict } from 'pages/TrialDetails/TrialDetailsMetrics';
 import { throttle } from 'throttle-debounce';
 import uPlot, { Plugin } from 'uplot';
-
-import { CheckpointsDict } from 'pages/TrialDetails/TrialDetailsMetrics';
 import { findInsertionIndex } from 'utils/array';
 import { distance } from 'utils/chart';
 
@@ -52,8 +51,8 @@ export const closestPointPlugin = ({
     // find idx range
     // note: assuming X data to be sorted, uPlot behaves odd if that's false
     const cursorValX = uPlot.posToVal(cursorLeft, 'x');
-    const idxMax = findInsertionIndex(uPlot.data[0], cursorValX + distValX) - 1;
-    const idxMin = findInsertionIndex(uPlot.data[0], cursorValX - distValX);
+    const idxMax = findInsertionIndex(Array.from(uPlot.data[0]), cursorValX + distValX) - 1;
+    const idxMin = findInsertionIndex(Array.from(uPlot.data[0]), cursorValX - distValX);
 
     // find y value range
     const cursorValY = uPlot.posToVal(cursorTop, yScale);

webui/react/src/components/UPlot/UPlotScatter/useScatterPointTooltipPlugin.ts

@@ -1,7 +1,6 @@
+import { UPlotData } from 'components/UPlot/types';
 import { useCallback, useMemo, useRef } from 'react';
 import uPlot, { Plugin } from 'uplot';
-
-import { UPlotData } from 'components/UPlot/types';
 import { isNumber } from 'utils/data';
 import { humanReadableNumber } from 'utils/number';
 import { generateAlphaNumeric } from 'utils/string';
@@ -85,7 +84,7 @@ const useScatterPointTooltipPlugin = (props: Props = {}): Plugin => {
       const y = yData[dataIndex];
       if (x == null || y == null) return;
 
-      const keyValues = u.data[seriesIndex]
+      const keyValues = Array.from(u.data[seriesIndex])
         .map((data: unknown, index: number) => {
           if (data == null) return null;
 
@@ -147,7 +146,7 @@ const useScatterPointTooltipPlugin = (props: Props = {}): Plugin => {
           rootRef.current?.appendChild(tooltipRef.current);
         },
         setCursor: (u: uPlot) => {
-          uPlotRef.current.dataIndex = u.cursor.dataIdx?.(u, 1, 0, 0);
+          uPlotRef.current.dataIndex = u.cursor.dataIdx?.(u, 1, 0, 0) ?? undefined;
 
           if (uPlotRef.current.dataIndex != null) {
             setTooltip(u);