fix: added fix for tooltip prox on hover in uplot

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -67,7 +67,17 @@ export const prepareUPlotConfig = ({
 		maxTimeScale,
 	});
 
-	apiResponse.data?.result?.forEach((series) => {
+	const seriesList = apiResponse.data?.result || [];
+
+	if (seriesList.length === 1) {
+		builder.setCursor({
+			focus: {
+				prox: 1e3,
+			},
+		});
+	}
+
+	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts

@@ -7,11 +7,10 @@ import { merge } from 'lodash-es';
 import noop from 'lodash-es/noop';
 import uPlot, { Cursor, Hooks, Options } from 'uplot';
 
+import { DEFAULT_CURSOR_CONFIG, DEFAULT_PLOT_CONFIG } from '../constants';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
-	DEFAULT_CURSOR_CONFIG,
-	DEFAULT_PLOT_CONFIG,
 	LegendItem,
 	SelectionPreferencesSource,
 } from './types';

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,6 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import {
@@ -291,21 +292,16 @@ function getBarPathBuilder({
 			idx1: number,
 		): Series.Paths | null => {
 			let effectiveBarMaxWidth = barMaxWidth;
+			const widthBasedOnStepInterval = calculateWidthBasedOnStepInterval({
+				uPlotInstance: self,
+				stepInterval,
+			});
 
-			const xScale = self.scales.x as uPlot.Scale | undefined;
-			if (xScale && typeof xScale.min === 'number') {
-				const start = xScale.min as number;
-				const end = start + stepInterval;
-				const startPx = self.valToPos(start, 'x');
-				const endPx = self.valToPos(end, 'x');
-				const intervalPx = Math.abs(endPx - startPx);
-
-				if (intervalPx > 0) {
-					effectiveBarMaxWidth =
-						typeof barMaxWidth === 'number'
-							? Math.min(barMaxWidth, intervalPx)
-							: intervalPx;
-				}
+			if (widthBasedOnStepInterval > 0) {
+				effectiveBarMaxWidth = Math.min(
+					effectiveBarMaxWidth,
+					widthBasedOnStepInterval,
+				);
 			}
 
 			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;

frontend/src/lib/uPlotV2/config/types.ts

@@ -1,6 +1,6 @@
 import { PrecisionOption } from 'components/Graph/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import uPlot, { Cursor, Options, Series } from 'uplot';
+import uPlot, { Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
 
@@ -186,47 +186,3 @@ export interface LegendItem {
 	color: uPlot.Series['stroke'];
 	show: boolean;
 }
-
-export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
-	focus: {
-		alpha: 0.3,
-	},
-	cursor: {
-		focus: {
-			prox: 30,
-		},
-	},
-	legend: {
-		show: false,
-	},
-	padding: [16, 16, 8, 8],
-	series: [],
-	hooks: {},
-};
-
-const POINTS_FILL_COLOR = '#FFFFFF';
-
-export const DEFAULT_CURSOR_CONFIG: Cursor = {
-	drag: { setScale: true },
-	points: {
-		one: true,
-		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
-		width: (_u, _seriesIdx, size) => size / 4,
-		stroke: (u, seriesIdx): string => {
-			const points = u.series[seriesIdx]?.points;
-			const strokeFn =
-				typeof points?.stroke === 'function' ? points.stroke : undefined;
-			const strokeValue =
-				strokeFn !== undefined
-					? strokeFn(u, seriesIdx)
-					: typeof points?.stroke === 'string'
-					? points.stroke
-					: '';
-			return `${strokeValue}90`;
-		},
-		fill: (): string => POINTS_FILL_COLOR,
-	},
-	focus: {
-		prox: 30,
-	},
-};

frontend/src/lib/uPlotV2/constants.ts

@@ -0,0 +1,47 @@
+import { Cursor, Options } from 'uplot';
+
+const POINTS_FILL_COLOR = '#FFFFFF';
+
+export const DEFAULT_HOVER_PROX_VALUE = 30; // only snap if within 30px horizontally
+export const DEFAULT_FOCUS_PROX_VALUE = 30; // enable focus when the cursor is within 30px of the series
+
+export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
+	focus: {
+		alpha: 0.3,
+	},
+	legend: {
+		show: false,
+	},
+	padding: [16, 16, 8, 8],
+	series: [],
+	hooks: {},
+};
+
+export const DEFAULT_CURSOR_CONFIG: Cursor = {
+	drag: { setScale: true },
+	points: {
+		one: true,
+		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
+		width: (_u, _seriesIdx, size) => size / 4,
+		stroke: (u, seriesIdx): string => {
+			const points = u.series[seriesIdx]?.points;
+			const strokeFn =
+				typeof points?.stroke === 'function' ? points.stroke : undefined;
+			const strokeValue =
+				strokeFn !== undefined
+					? strokeFn(u, seriesIdx)
+					: typeof points?.stroke === 'string'
+					? points.stroke
+					: '';
+			return `${strokeValue}90`;
+		},
+		fill: (): string => POINTS_FILL_COLOR,
+	},
+	focus: {
+		prox: DEFAULT_FOCUS_PROX_VALUE,
+	},
+	hover: {
+		prox: DEFAULT_HOVER_PROX_VALUE,
+		bias: 0,
+	},
+};

frontend/src/lib/uPlotV2/utils/index.ts

@@ -0,0 +1,17 @@
+export function calculateWidthBasedOnStepInterval({
+	uPlotInstance,
+	stepInterval,
+}: {
+	uPlotInstance: uPlot;
+	stepInterval: number;
+}): number {
+	const xScale = uPlotInstance.scales.x;
+	if (xScale && typeof xScale.min === 'number') {
+		const start = xScale.min as number;
+		const end = start + stepInterval;
+		const startPx = uPlotInstance.valToPos(start, 'x');
+		const endPx = uPlotInstance.valToPos(end, 'x');
+		return Math.abs(endPx - startPx);
+	}
+	return 0;
+}