diff --git a/webui/react/src/components/UPlot/UPlotChart/closestPointPlugin.ts b/webui/react/src/components/UPlot/UPlotChart/closestPointPlugin.ts index fcccc02c00d..7852eb2c096 100644 --- a/webui/react/src/components/UPlot/UPlotChart/closestPointPlugin.ts +++ b/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); diff --git a/webui/react/src/components/UPlot/UPlotScatter/useScatterPointTooltipPlugin.ts b/webui/react/src/components/UPlot/UPlotScatter/useScatterPointTooltipPlugin.ts index 164966c582d..60c4da35e9a 100644 --- a/webui/react/src/components/UPlot/UPlotScatter/useScatterPointTooltipPlugin.ts +++ b/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);