chore: fixed tooltipplugin test

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -10,7 +10,15 @@ import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
+	const {
+		children,
+		isStackedBarChart,
+		renderTooltip: customRenderTooltip,
+		config,
+		data,
+		pinnedTooltipElement,
+		...rest
+	} = props;
 
 	const chartData = useBarChartStacking({
 		data,
@@ -20,16 +28,27 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
+				pinnedTooltipElement,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
+		[
+			customRenderTooltip,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			isStackedBarChart,
+			pinnedTooltipElement,
+		],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -13,6 +13,7 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 		children,
 		renderTooltip: customRenderTooltip,
 		isQueriesMerged,
+		pinnedTooltipElement,
 		...rest
 	} = props;
 
@@ -26,10 +27,17 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				pinnedTooltipElement,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customRenderTooltip,
+			pinnedTooltipElement,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+		],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -9,7 +9,12 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		pinnedTooltipElement,
+		...rest
+	} = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -21,10 +26,17 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				pinnedTooltipElement,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[
+			customRenderTooltip,
+			pinnedTooltipElement,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+		],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -2,7 +2,10 @@ import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import {
+	DashboardCursorSync,
+	TooltipClickData,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
@@ -13,6 +16,7 @@ interface BaseChartProps {
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx

@@ -18,7 +18,10 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	isPinned,
 	showTooltipHeader = true,
+	pinnedTooltipElement,
+	clickData,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
@@ -72,39 +75,45 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-					<span>{headerTitle}</span>
-				</div>
+			{isPinned && clickData ? (
+				pinnedTooltipElement?.(clickData)
+			) : (
+				<>
+					{showTooltipHeader && (
+						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+							<span>{headerTitle}</span>
+						</div>
+					)}
+					<div className="uplot-tooltip-list-container">
+						{tooltipContent.length > 0 ? (
+							<Virtuoso
+								className="uplot-tooltip-list"
+								data-testid="uplot-tooltip-list"
+								data={tooltipContent}
+								style={virtuosoStyle}
+								totalListHeightChanged={setListHeight}
+								itemContent={(_, item): JSX.Element => (
+									<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+										<div
+											className="uplot-tooltip-item-marker"
+											style={{ borderColor: item.color }}
+											data-is-legend-marker={true}
+											data-testid="uplot-tooltip-item-marker"
+										/>
+										<div
+											className="uplot-tooltip-item-content"
+											style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
+											data-testid="uplot-tooltip-item-content"
+										>
+											{item.label}: {item.tooltipValue}
+										</div>
+									</div>
+								)}
+							/>
+						) : null}
+					</div>
+				</>
 			)}
-			<div className="uplot-tooltip-list-container">
-				{tooltipContent.length > 0 ? (
-					<Virtuoso
-						className="uplot-tooltip-list"
-						data-testid="uplot-tooltip-list"
-						data={tooltipContent}
-						style={virtuosoStyle}
-						totalListHeightChanged={setListHeight}
-						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
-								<div
-									className="uplot-tooltip-item-marker"
-									style={{ borderColor: item.color }}
-									data-is-legend-marker={true}
-									data-testid="uplot-tooltip-item-marker"
-								/>
-								<div
-									className="uplot-tooltip-item-content"
-									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-									data-testid="uplot-tooltip-item-content"
-								>
-									{item.label}: {item.tooltipValue}
-								</div>
-							</div>
-						)}
-					/>
-				) : null}
-			</div>
 		</div>
 	);
 }

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -6,6 +6,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { render, RenderResult, screen } from 'tests/test-utils';
 import uPlot from 'uplot';
 
+import type { TooltipClickData } from '../../../plugins/TooltipPlugin/types';
 import { TooltipContentItem } from '../../types';
 import Tooltip from '../Tooltip';
 
@@ -92,6 +93,7 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
+		clickData: null,
 	} as TooltipTestProps;
 
 	return render(
@@ -205,4 +207,43 @@ describe('Tooltip', () => {
 		// Falls back to content length: 2 items * 38px = 76px
 		expect(list).toHaveStyle({ height: '76px' });
 	});
+
+	it('renders pinned tooltip content when clickData is provided', () => {
+		const uPlotInstance = createUPlotInstance(0);
+
+		const clickData: TooltipClickData = {
+			xValue: 100,
+			yValue: 200,
+			focusedSeries: {
+				seriesIndex: 1,
+				seriesName: 'Series A',
+				value: 10,
+				color: '#ff0000',
+			},
+			clickedDataTimestamp: 100,
+			mouseX: 50,
+			mouseY: 60,
+			absoluteMouseX: 150,
+			absoluteMouseY: 160,
+		};
+
+		const pinnedTooltipElement = jest.fn(
+			(data: TooltipClickData): JSX.Element => (
+				<div data-testid="pinned-tooltip">{`Pinned at ${data.xValue}`}</div>
+			),
+		);
+
+		renderTooltip({
+			uPlotInstance,
+			isPinned: true,
+			clickData,
+			pinnedTooltipElement,
+			content: [createTooltipContent()],
+		});
+
+		expect(pinnedTooltipElement).toHaveBeenCalledWith(clickData);
+		expect(screen.getByTestId('pinned-tooltip')).toBeInTheDocument();
+		expect(screen.queryByTestId('uplot-tooltip-header')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('uplot-tooltip-list')).not.toBeInTheDocument();
+	});
 });

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

@@ -4,6 +4,7 @@ import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
+import { TooltipClickData } from '../plugins/TooltipPlugin/types';
 
 /**
  * Props for the Plot component
@@ -58,6 +59,7 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
+	clickData: TooltipClickData | null;
 }
 
 export interface BaseTooltipProps {
@@ -66,6 +68,7 @@ export interface BaseTooltipProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
+	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 }
 
 export interface TimeSeriesTooltipProps

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
 import {
@@ -142,6 +143,7 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
+			controller.clickData = null;
 			if (controller.plot) {
 				controller.plot.setCursor({ left: -10, top: -10 });
 			}
@@ -161,6 +163,7 @@ export default function TooltipPlugin({
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
+				clickData: controller.clickData,
 			});
 		}
 
@@ -247,6 +250,26 @@ export default function TooltipPlugin({
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
+				const xValue = u.posToVal(event.offsetX, 'x');
+				const yValue = u.posToVal(event.offsetY, 'y');
+				const focusedSeries = getFocusedSeriesAtPosition(event, u);
+
+				let clickedDataTimestamp = xValue;
+				if (focusedSeries) {
+					clickedDataTimestamp = u.data[0][u.posToIdx(event.offsetX)];
+				}
+
+				controller.clickData = {
+					xValue,
+					yValue,
+					focusedSeries,
+					clickedDataTimestamp,
+					mouseX: event.offsetX,
+					mouseY: event.offsetY,
+					absoluteMouseX: event.clientX,
+					absoluteMouseY: event.clientY,
+				};
+
 				setTimeout(() => {
 					controller.pinned = true;
 					scheduleRender(true);

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -26,6 +26,7 @@ export function createInitialControllerState(): TooltipControllerState {
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
 		windowHeight: window.innerHeight - WINDOW_OFFSET,
 		pendingPinnedUpdate: false,
+		clickData: null,
 	};
 }
 

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -42,6 +42,22 @@ export interface TooltipPluginProps {
 	maxHeight?: number;
 }
 
+export interface TooltipClickData {
+	xValue: number;
+	yValue: number;
+	focusedSeries: {
+		seriesIndex: number;
+		seriesName: string;
+		value: number;
+		color: string;
+	} | null;
+	clickedDataTimestamp: number;
+	mouseX: number;
+	mouseY: number;
+	absoluteMouseX: number;
+	absoluteMouseY: number;
+}
+
 /**
  * Mutable, non-React state that drives tooltip behaviour:
  * - whether the tooltip is active / pinned
@@ -68,6 +84,9 @@ export interface TooltipControllerState {
 	windowWidth: number;
 	windowHeight: number;
 	pendingPinnedUpdate: boolean;
+
+	/** Data about the click that triggered the tooltip */
+	clickData: TooltipClickData | null;
 }
 
 /**

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -9,6 +9,12 @@ import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
 import { DashboardCursorSync } from '../TooltipPlugin/types';
 
+// Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
+// We only care that pinning logic runs without throwing, not which series is focused.
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => null),
+}));
+
 // ---------------------------------------------------------------------------
 // Mock helpers
 // ---------------------------------------------------------------------------
@@ -55,11 +61,21 @@ function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
 	cursor: { event: Record<string, unknown> };
+	posToVal: jest.Mock<number, [value: number]>;
+	posToIdx: jest.Mock<number, []>;
+	data: [number[], number[]];
 } {
+	const over = document.createElement('div');
+
+	// Provide the minimal uPlot surface used by TooltipPlugin's pin logic.
 	return {
-		over: document.createElement('div'),
+		over,
 		setCursor: jest.fn(),
 		cursor: { event: {} },
+		// In real uPlot these map overlay coordinates to data-space values.
+		posToVal: jest.fn((value: number) => value),
+		posToIdx: jest.fn(() => 0),
+		data: [[0], [0]],
 	};
 }