chore: minor fix

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

@@ -33,6 +33,7 @@ export default function ChartWrapper({
 	children,
 	layoutChildren,
 	yAxisUnit,
+	groupBy,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -68,8 +69,9 @@ export default function ChartWrapper({
 	const syncMetadata = useMemo(
 		() => ({
 			yAxisUnit,
+			groupBy,
 		}),
-		[yAxisUnit],
+		[yAxisUnit, groupBy],
 	);
 
 	return (

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

@@ -6,6 +6,7 @@ import {
 	DashboardCursorSync,
 	TooltipClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 interface BaseChartProps {
 	width: number;
@@ -38,6 +39,7 @@ interface UPlotBasedChartProps {
 interface UPlotChartDataProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
+	groupBy?: BaseAutocompleteData[];
 }
 
 export interface TimeSeriesChartProps

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -113,6 +113,10 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		uPlotRef.current = plot;
 	}, []);
 
+	const groupBy = useMemo(() => {
+		return widget.query.builder.queryData[0].groupBy;
+	}, [widget.query]);
+
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
@@ -128,6 +132,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
+					groupBy={groupBy}
 					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}

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

@@ -105,6 +105,7 @@ export function prepareBarPanelConfig({
 			colorMapping: widget.customLegendColors ?? {},
 			isDarkMode,
 			stepInterval: currentStepInterval,
+			metric: series.metric,
 		});
 	});
 

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -104,6 +104,10 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		widget.decimalPrecision,
 	]);
 
+	const groupBy = useMemo(() => {
+		return widget.query.builder.queryData[0].groupBy;
+	}, [widget.query]);
+
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
@@ -117,6 +121,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
+					groupBy={groupBy}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}

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

@@ -131,6 +131,7 @@ export const prepareUPlotConfig = ({
 			pointSize: 5,
 			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
+			metric: series.metric,
 		});
 	});
 

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

@@ -16,6 +16,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
 				isStackedBarChart: props.isStackedBarChart,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 			props.yAxisUnit,
 			props.decimalPrecision,
 			props.isStackedBarChart,
+			props.syncedSeriesIndexes,
 		],
 	);
 

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

@@ -17,6 +17,7 @@ export default function HistogramTooltip(
 				uPlotInstance: props.uPlotInstance,
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function HistogramTooltip(
 			props.dataIndexes,
 			props.yAxisUnit,
 			props.decimalPrecision,
+			props.syncedSeriesIndexes,
 		],
 	);
 

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

@@ -17,6 +17,7 @@ export default function TimeSeriesTooltip(
 				uPlotInstance: props.uPlotInstance,
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
+				syncedSeriesIndexes: props.syncedSeriesIndexes,
 			}),
 		[
 			props.uPlotInstance,
@@ -24,6 +25,7 @@ export default function TimeSeriesTooltip(
 			props.dataIndexes,
 			props.yAxisUnit,
 			props.decimalPrecision,
+			props.syncedSeriesIndexes,
 		],
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -62,6 +62,7 @@ export function buildTooltipContent({
 	yAxisUnit,
 	decimalPrecision,
 	isStackedBarChart,
+	syncedSeriesIndexes,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -71,18 +72,34 @@ export function buildTooltipContent({
 	yAxisUnit: string;
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
+	syncedSeriesIndexes?: number[] | null;
 }): TooltipContentItem[] {
 	const items: TooltipContentItem[] = [];
+	const allowedIndexes =
+		syncedSeriesIndexes != null ? new Set(syncedSeriesIndexes) : null;
 
 	for (let seriesIndex = 1; seriesIndex < series.length; seriesIndex += 1) {
 		const seriesItem = series[seriesIndex];
 		if (!seriesItem?.show) {
 			continue;
 		}
+		if (allowedIndexes != null && !allowedIndexes.has(seriesIndex)) {
+			continue;
+		}
 
 		const dataIndex = dataIndexes[seriesIndex];
-		// Skip series with no data at the current cursor position
+		const isSync = allowedIndexes != null;
+
 		if (dataIndex === null) {
+			if (isSync) {
+				items.push({
+					label: String(seriesItem.label ?? ''),
+					value: 0,
+					tooltipValue: 'No Data',
+					color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
+					isActive: false,
+				});
+			}
 			continue;
 		}
 
@@ -102,6 +119,14 @@ export function buildTooltipContent({
 				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
 				isActive: seriesIndex === activeSeriesIndex,
 			});
+		} else if (isSync) {
+			items.push({
+				label: String(seriesItem.label ?? ''),
+				value: 0,
+				tooltipValue: 'No Data',
+				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
+				isActive: false,
+			});
 		}
 	}
 

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

@@ -58,6 +58,9 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
+	/** In Tooltip sync mode, limits which series are rendered in the receiver tooltip.
+	 * null = no filtering; [] = no matches (tooltip hidden upstream); [...] = allowed indexes */
+	syncedSeriesIndexes?: number[] | null;
 }
 
 export interface BaseTooltipProps {

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

@@ -9,6 +9,7 @@ import {
 	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
+	ExtendedSeries,
 	FillMode,
 	LineInterpolation,
 	LineStyle,
@@ -27,7 +28,10 @@ let builders: PathBuilders | null = null;
 
 const DEFAULT_LINE_WIDTH = 2;
 export const POINT_SIZE_FACTOR = 2.5;
-export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
+export class UPlotSeriesBuilder extends ConfigBuilder<
+	SeriesProps,
+	ExtendedSeries
+> {
 	constructor(props: SeriesProps) {
 		super(props);
 		const pathBuilders = uPlot.paths;
@@ -205,8 +209,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		);
 	}
 
-	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+	getConfig(): ExtendedSeries {
+		const { scaleKey, label, spanGaps, show = true, metric } = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -233,6 +237,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			...lineConfig,
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
+			metric,
 		};
 	}
 }

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

@@ -171,6 +171,10 @@ export enum FillMode {
 	None = 'none',
 }
 
+export type ExtendedSeries = Series & {
+	metric?: { [key: string]: string };
+};
+
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
@@ -194,6 +198,7 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	fillMode?: FillMode;
 	isDarkMode?: boolean;
 	stepInterval?: number;
+	metric?: { [key: string]: string };
 }
 
 export interface LegendItem {

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

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import uPlot from 'uplot';
 
-import { syncCursorRegistry } from './syncCursorRegistry';
+import { createSyncDisplayHook } from './syncDisplayHook';
 import {
 	createInitialControllerState,
 	createSetCursorHandler,
@@ -104,32 +104,22 @@ export default function TooltipPlugin({
 
 		// Enable uPlot's built-in cursor sync when requested so that
 		// crosshair / tooltip can follow the dashboard-wide cursor.
+		let removeSyncDisplayHook: (() => void) | null = null;
 		if (syncMode !== DashboardCursorSync.None && config.scales[0]?.props.time) {
 			config.setCursor({
-				sync: { key: syncKey, scales: ['x', 'y'] },
+				sync: {
+					key: syncKey,
+					scales:
+						syncMode === DashboardCursorSync.Crosshair
+							? ['x', 'y']
+							: ['x', null],
+				},
 			});
 
-			// Show the horizontal crosshair only when the receiving panel shares
-			// the same y-axis unit as the source panel. When this panel is the
-			// source (cursor.event != null) the line is always shown and this
-			// panel's metadata is written to the registry so receivers can read it.
-			config.addHook('setCursor', (u: uPlot): void => {
-				const yCursorEl = u.root.querySelector<HTMLElement>('.u-cursor-y');
-				if (!yCursorEl) {
-					return;
-				}
-
-				if (u.cursor.event != null) {
-					// This panel is the source — publish metadata and always show line.
-					syncCursorRegistry.setMetadata(syncKey, syncMetadata);
-					yCursorEl.style.display = '';
-				} else {
-					// This panel is receiving sync — show only if units match.
-					const sourceMeta = syncCursorRegistry.getMetadata(syncKey);
-					yCursorEl.style.display =
-						sourceMeta?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
-				}
-			});
+			removeSyncDisplayHook = config.addHook(
+				'setCursor',
+				createSyncDisplayHook(syncKey, syncMetadata, controller),
+			);
 		}
 
 		// Dismiss the tooltip when the user clicks / presses a key
@@ -137,7 +127,12 @@ export default function TooltipPlugin({
 		const onOutsideInteraction = (event: Event): void => {
 			const target = event.target as Node;
 			if (!containerRef.current?.contains(target)) {
-				dismissTooltip();
+				// Don't dismiss if the click landed inside any other pinned tooltip.
+				const isInsideAnyPinnedTooltip =
+					(target as Element).closest?.('[data-pinned="true"]') != null;
+				if (!isInsideAnyPinnedTooltip) {
+					dismissTooltip();
+				}
 			}
 		};
 
@@ -156,7 +151,7 @@ export default function TooltipPlugin({
 		function updateCursorLock(): void {
 			const plot = getPlot(controller);
 			if (plot) {
-				// @ts-ignore uPlot cursor lock is not working as expected
+				// @ts-expect-error uPlot cursor lock is not working as expected
 				plot.cursor._lock = controller.pinned;
 			}
 		}
@@ -203,6 +198,16 @@ export default function TooltipPlugin({
 			if (!controller.hoverActive || !plot) {
 				return null;
 			}
+			// In Tooltip sync mode, suppress the receiver tooltip entirely when
+			// no receiver series match the source panel's focused series.
+			if (
+				syncTooltipWithDashboard &&
+				controller.cursorDrivenBySync &&
+				Array.isArray(controller.syncedSeriesIndexes) &&
+				controller.syncedSeriesIndexes.length === 0
+			) {
+				return null;
+			}
 			return renderRef.current({
 				uPlotInstance: plot,
 				dataIndexes: controller.seriesIndexes,
@@ -210,6 +215,7 @@ export default function TooltipPlugin({
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
+				syncedSeriesIndexes: controller.syncedSeriesIndexes,
 			});
 		}
 
@@ -431,6 +437,7 @@ export default function TooltipPlugin({
 			removeSetSeriesHook();
 			removeSetLegendHook();
 			removeSetCursorHook();
+			removeSyncDisplayHook?.();
 			if (overClickHandler) {
 				const plot = getPlot(controller);
 				plot?.over.removeEventListener('click', overClickHandler);
@@ -493,7 +500,7 @@ export default function TooltipPlugin({
 		isHovering,
 		contents,
 	]);
-	const isTooltipVisible = isHovering || tooltipBody != null;
+	const isTooltipVisible = tooltipBody != null;
 
 	if (!hasPlot) {
 		return null;

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

@@ -9,9 +9,13 @@ import type { TooltipSyncMetadata } from './types';
  *
  * Receivers use this to make decisions such as:
  * - Whether to show the horizontal crosshair line (matching yAxisUnit)
- * - Future: what to render inside the tooltip (matching groupBy, etc.)
+ * - Which series to highlight when panels share the same groupBy
  */
 const metadataBySyncKey = new Map<string, TooltipSyncMetadata | undefined>();
+const activeSeriesMetricBySyncKey = new Map<
+	string,
+	Record<string, string> | null
+>();
 
 export const syncCursorRegistry = {
 	setMetadata(syncKey: string, metadata: TooltipSyncMetadata | undefined): void {
@@ -21,4 +25,15 @@ export const syncCursorRegistry = {
 	getMetadata(syncKey: string): TooltipSyncMetadata | undefined {
 		return metadataBySyncKey.get(syncKey);
 	},
+
+	setActiveSeriesMetric(
+		syncKey: string,
+		metric: Record<string, string> | null,
+	): void {
+		activeSeriesMetricBySyncKey.set(syncKey, metric);
+	},
+
+	getActiveSeriesMetric(syncKey: string): Record<string, string> | null {
+		return activeSeriesMetricBySyncKey.get(syncKey) ?? null;
+	},
 };

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

@@ -0,0 +1,175 @@
+import uPlot from 'uplot';
+
+import type { ExtendedSeries } from '../../config/types';
+import { syncCursorRegistry } from './syncCursorRegistry';
+import type { TooltipControllerState, TooltipSyncMetadata } from './types';
+
+/**
+ * Returns the dimension keys present in both groupBy arrays.
+ * An empty result means no overlap — series highlighting should not run.
+ *
+ *   exact    [A, B] vs [A, B]  → [A, B]   one match
+ *   subset   [A]    vs [A, B]  → [A]      multiple receiver series may match
+ *   superset [A, B] vs [A]     → [A]      one receiver series matches
+ *   partial  [A, B] vs [B, C]  → [B]
+ */
+function getCommonGroupByKeys(
+	a: TooltipSyncMetadata['groupBy'],
+	b: TooltipSyncMetadata['groupBy'],
+): string[] {
+	if (!Array.isArray(a) || a.length === 0 || !Array.isArray(b) || b.length === 0) {
+		return [];
+	}
+	const bKeys = new Set(b.map((g) => g.key));
+	return a.filter((g) => bKeys.has(g.key)).map((g) => g.key);
+}
+
+/**
+ * Returns the 1-based indexes of every series whose metric matches
+ * sourceMetric on all commonKeys.
+ */
+function findMatchingSeriesIndexes(
+	series: uPlot.Series[],
+	sourceMetric: Record<string, string>,
+	commonKeys: string[],
+): number[] {
+	return series.reduce<number[]>((acc, s, i) => {
+		if (i === 0) {return acc;}
+		const metric = (s as ExtendedSeries).metric;
+		if (
+			metric != null &&
+			commonKeys.every((key) => metric[key] === sourceMetric[key])
+		) {
+			acc.push(i);
+		}
+		return acc;
+	}, []);
+}
+
+function applySourceSync({
+	uPlotInstance,
+	syncKey,
+	syncMetadata,
+	focusedSeriesIndex,
+}: {
+	uPlotInstance: uPlot;
+	syncKey: string;
+	syncMetadata: TooltipSyncMetadata | undefined;
+	focusedSeriesIndex: number | null;
+}): void {
+	syncCursorRegistry.setMetadata(syncKey, syncMetadata);
+	const focusedSeries =
+		focusedSeriesIndex != null
+			? (uPlotInstance.series[focusedSeriesIndex] as ExtendedSeries)
+			: null;
+	syncCursorRegistry.setActiveSeriesMetric(syncKey, focusedSeries?.metric ?? null);
+}
+
+/**
+ * Returns:
+ *   null      – no groupBy filtering configured or cursor off-chart (no-op for tooltip)
+ *   []        – groupBy configured but no receiver series match the source (hide synced tooltip)
+ *   number[]  – 1-based indexes of matching receiver series (show only these)
+ */
+function applyReceiverSync({
+	uPlotInstance,
+	yCrosshairEl,
+	syncKey,
+	syncMetadata,
+	sourceMetadata,
+	commonKeys,
+}: {
+	uPlotInstance: uPlot;
+	yCrosshairEl: HTMLElement;
+	syncKey: string;
+	syncMetadata: TooltipSyncMetadata | undefined;
+	sourceMetadata: TooltipSyncMetadata | undefined;
+	commonKeys: string[];
+}): number[] | null {
+	yCrosshairEl.style.display =
+		sourceMetadata?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
+
+	if (commonKeys.length === 0) {
+		return null;
+	}
+
+	if ((uPlotInstance.cursor.left ?? -1) < 0) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return null;
+	}
+
+	const sourceSeriesMetric = syncCursorRegistry.getActiveSeriesMetric(syncKey);
+	if (sourceSeriesMetric == null) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return [];
+	}
+
+	const matchingIdxs = findMatchingSeriesIndexes(
+		uPlotInstance.series,
+		sourceSeriesMetric,
+		commonKeys,
+	);
+
+	if (matchingIdxs.length === 0) {
+		uPlotInstance.setSeries(null, { focus: false });
+		return [];
+	}
+
+	uPlotInstance.setSeries(matchingIdxs[0], { focus: true });
+
+	return matchingIdxs;
+}
+
+export function createSyncDisplayHook(
+	syncKey: string,
+	syncMetadata: TooltipSyncMetadata | undefined,
+	controller: TooltipControllerState,
+): (u: uPlot) => void {
+	// Cached once — avoids a DOM query on every cursor move.
+	let yCrosshairEl: HTMLElement | null = null;
+
+	// groupBy on both panels is stable (set at config time). Recompute the
+	// intersection only when the source panel's groupBy reference changes.
+	let lastSourceGroupBy: TooltipSyncMetadata['groupBy'];
+	let cachedCommonKeys: string[] = [];
+
+	return (u: uPlot): void => {
+		yCrosshairEl ??= u.root.querySelector<HTMLElement>('.u-cursor-y');
+		if (!yCrosshairEl) {
+			return;
+		}
+
+		if (u.cursor.event != null) {
+			controller.syncedSeriesIndexes = null;
+			applySourceSync({
+				uPlotInstance: u,
+				syncKey,
+				syncMetadata,
+				focusedSeriesIndex: controller.focusedSeriesIndex,
+			});
+			yCrosshairEl.style.display = '';
+			return;
+		}
+
+		// Read metadata once and pass it down — avoids a second registry lookup
+		// inside applyReceiverSync.
+		const sourceMetadata = syncCursorRegistry.getMetadata(syncKey);
+
+		if (sourceMetadata?.groupBy !== lastSourceGroupBy) {
+			lastSourceGroupBy = sourceMetadata?.groupBy;
+			cachedCommonKeys = getCommonGroupByKeys(
+				sourceMetadata?.groupBy,
+				syncMetadata?.groupBy,
+			);
+		}
+
+		controller.syncedSeriesIndexes = applyReceiverSync({
+			uPlotInstance: u,
+			yCrosshairEl,
+			syncKey,
+			syncMetadata,
+			sourceMetadata,
+			commonKeys: cachedCommonKeys,
+		});
+	};
+}

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

@@ -27,6 +27,7 @@ export function createInitialControllerState(): TooltipControllerState {
 		verticalOffset: 0,
 		seriesIndexes: [],
 		focusedSeriesIndex: null,
+		syncedSeriesIndexes: null,
 		cursorDrivenBySync: false,
 		plotWithinViewport: false,
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
@@ -184,7 +185,7 @@ export function createSetLegendHandler(
 			return;
 		}
 
-		const newSeriesIndexes = plot.cursor.idxs.slice();
+		const newSeriesIndexes = [...plot.cursor.idxs];
 		const isAnySeriesActive = newSeriesIndexes.some((v, i) => i > 0 && v != null);
 
 		const previousCursorDrivenBySync = controller.cursorDrivenBySync;

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

@@ -4,6 +4,7 @@ import type {
 	ReactNode,
 	RefObject,
 } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import type uPlot from 'uplot';
 
 import type { TooltipRenderArgs } from '../../components/types';
@@ -39,6 +40,7 @@ export interface TooltipLayoutInfo {
 
 export interface TooltipSyncMetadata {
 	yAxisUnit?: string;
+	groupBy?: BaseAutocompleteData[];
 }
 
 export interface TooltipPluginProps {
@@ -95,6 +97,11 @@ export interface TooltipControllerState {
 	verticalOffset: number;
 	seriesIndexes: Array<number | null>;
 	focusedSeriesIndex: number | null;
+	/** Receiver-side series filtering for Tooltip sync mode.
+	 * null  = no filtering (source panel or no groupBy configured)
+	 * []    = no matching series found → hide the synced tooltip
+	 * [...] = only these 1-based series indexes should appear in the synced tooltip */
+	syncedSeriesIndexes: number[] | null;
 	cursorDrivenBySync: boolean;
 	plotWithinViewport: boolean;
 	windowWidth: number;

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

@@ -210,7 +210,7 @@ describe('TooltipPlugin', () => {
 			expect(container.parentElement).toBe(document.body);
 
 			const fullscreenRoot = document.createElement('div');
-			document.body.appendChild(fullscreenRoot);
+			document.body.append(fullscreenRoot);
 
 			act(() => {
 				mockedFullscreenElement = fullscreenRoot;
@@ -252,7 +252,7 @@ describe('TooltipPlugin', () => {
 			renderAndActivateHover(config, undefined, { canPinTooltip: true });
 
 			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.dataset.pinned === 'true').toBe(false);
 
 			act(() => {
 				document.body.dispatchEvent(
@@ -266,7 +266,7 @@ describe('TooltipPlugin', () => {
 			return waitFor(() => {
 				const updated = screen.getByTestId('tooltip-plugin-container');
 				expect(updated).toBeInTheDocument();
-				expect(updated.getAttribute('data-pinned') === 'true').toBe(true);
+				expect(updated.dataset.pinned === 'true').toBe(true);
 			});
 		});
 
@@ -340,7 +340,7 @@ describe('TooltipPlugin', () => {
 			// Wait until the tooltip is actually pinned.
 			await waitFor(() => {
 				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(true);
+				expect(container.dataset.pinned === 'true').toBe(true);
 			});
 
 			const button = await screen.findByRole('button', { name: 'Dismiss' });
@@ -353,7 +353,7 @@ describe('TooltipPlugin', () => {
 
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.dataset.pinned === 'true').toBe(false);
 				expect(container.textContent).toBe('');
 			});
 		});
@@ -392,8 +392,7 @@ describe('TooltipPlugin', () => {
 
 			expect(
 				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+					.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 			).toBe(true);
 
 			// Simulate data update – should dismiss the pinned tooltip.
@@ -405,7 +404,7 @@ describe('TooltipPlugin', () => {
 			const container = screen.getByTestId('tooltip-plugin-container');
 			expect(container).toBeInTheDocument();
 			expect(container.getAttribute('aria-hidden')).toBe('true');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.dataset.pinned === 'true').toBe(false);
 
 			jest.useRealTimers();
 		});
@@ -444,8 +443,7 @@ describe('TooltipPlugin', () => {
 
 			expect(
 				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+					.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 			).toBe(true);
 
 			// Click outside the tooltip container.
@@ -459,7 +457,7 @@ describe('TooltipPlugin', () => {
 
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.dataset.pinned === 'true').toBe(false);
 			});
 
 			jest.useRealTimers();
@@ -499,8 +497,7 @@ describe('TooltipPlugin', () => {
 
 			expect(
 				screen
-					.getByTestId('tooltip-plugin-container')
-					.getAttribute('data-pinned') === 'true',
+					.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 			).toBe(true);
 
 			// Press Escape to release.
@@ -515,7 +512,7 @@ describe('TooltipPlugin', () => {
 				const container = screen.getByTestId('tooltip-plugin-container');
 				expect(container).toBeInTheDocument();
 				expect(container.getAttribute('aria-hidden')).toBe('true');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.dataset.pinned === 'true').toBe(false);
 			});
 
 			jest.useRealTimers();
@@ -542,8 +539,7 @@ describe('TooltipPlugin', () => {
 			await waitFor(() => {
 				expect(
 					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
+						.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 				).toBe(true);
 			});
 
@@ -560,7 +556,7 @@ describe('TooltipPlugin', () => {
 
 			await waitFor(() => {
 				const container = screen.getByTestId('tooltip-plugin-container');
-				expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+				expect(container.dataset.pinned === 'true').toBe(false);
 			});
 
 			jest.useRealTimers();
@@ -580,7 +576,7 @@ describe('TooltipPlugin', () => {
 			const container = screen.getByTestId('tooltip-plugin-container');
 			// Tooltip should still be hovering (visible), not dismissed.
 			expect(container.getAttribute('aria-hidden')).toBe('false');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.dataset.pinned === 'true').toBe(false);
 		});
 
 		it('does not unpin on arbitrary keys that are not Escape or the pin key', async () => {
@@ -604,8 +600,7 @@ describe('TooltipPlugin', () => {
 			await waitFor(() => {
 				expect(
 					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
+						.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 				).toBe(true);
 			});
 
@@ -620,8 +615,7 @@ describe('TooltipPlugin', () => {
 			await waitFor(() => {
 				expect(
 					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
+						.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 				).toBe(true);
 			});
 
@@ -665,7 +659,7 @@ describe('TooltipPlugin', () => {
 			});
 
 			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.dataset.pinned === 'true').toBe(false);
 		});
 
 		it('does not pin when hover is not active', () => {
@@ -699,7 +693,7 @@ describe('TooltipPlugin', () => {
 			// The container exists once the plot is initialised, but it should
 			// be hidden and not pinned since hover was never activated.
 			const container = screen.getByTestId('tooltip-plugin-container');
-			expect(container.getAttribute('data-pinned') === 'true').toBe(false);
+			expect(container.dataset.pinned === 'true').toBe(false);
 			expect(container.getAttribute('aria-hidden')).toBe('true');
 		});
 
@@ -724,8 +718,7 @@ describe('TooltipPlugin', () => {
 			await waitFor(() => {
 				expect(
 					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
+						.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 				).toBe(false);
 			});
 
@@ -739,8 +732,7 @@ describe('TooltipPlugin', () => {
 			await waitFor(() => {
 				expect(
 					screen
-						.getByTestId('tooltip-plugin-container')
-						.getAttribute('data-pinned') === 'true',
+						.getByTestId('tooltip-plugin-container').dataset.pinned === 'true',
 				).toBe(true);
 			});
 		});
@@ -796,7 +788,7 @@ describe('TooltipPlugin', () => {
 	// ---- Cursor sync ------------------------------------------------------------
 
 	describe('cursor sync', () => {
-		it('enables uPlot cursor sync for time-based scales when mode is Tooltip', () => {
+		it('enables uPlot cursor sync on x-axis only when mode is Tooltip', () => {
 			const config = createConfigMock();
 			const setCursorSpy = jest.spyOn(config, 'setCursor');
 			config.addScale({ scaleKey: 'x', time: true });
@@ -810,6 +802,25 @@ describe('TooltipPlugin', () => {
 				}),
 			);
 
+			expect(setCursorSpy).toHaveBeenCalledWith({
+				sync: { key: 'dashboard-sync', scales: ['x', null] },
+			});
+		});
+
+		it('enables uPlot cursor sync on both axes when mode is Crosshair', () => {
+			const config = createConfigMock();
+			const setCursorSpy = jest.spyOn(config, 'setCursor');
+			config.addScale({ scaleKey: 'x', time: true });
+
+			render(
+				React.createElement(TooltipPlugin, {
+					config,
+					render: () => null,
+					syncMode: DashboardCursorSync.Crosshair,
+					syncKey: 'dashboard-sync',
+				}),
+			);
+
 			expect(setCursorSpy).toHaveBeenCalledWith({
 				sync: { key: 'dashboard-sync', scales: ['x', 'y'] },
 			});