fix: added fix for panel sync mode in non-view panels

* feat: user dashboard preference

* chore: moved to module css

* chore: pr review changes

* chore: minor fixes

* feat: added changes for synced tooltip modes (#11175)

* feat: added changes for synced tooltip modes

* chore: pr review changes

* chore: minor fix

* chore: added changes for deleting dashboard preferences on dashboard delete

frontend/src/constants/events.ts

@@ -6,6 +6,7 @@ export enum Events {
 	TOOLTIP_PINNED = 'TOOLTIP_PINNED',
 	TOOLTIP_UNPINNED = 'TOOLTIP_UNPINNED',
 	TOOLTIP_CONTENT_SCROLLED = 'TOOLTIP_CONTENT_SCROLLED',
+	TOOLTIP_SYNC_MODE_CHANGED = 'TOOLTIP_SYNC_MODE_CHANGED',
 }
 
 export enum InfraMonitoringEvents {

frontend/src/constants/localStorage.ts

@@ -38,4 +38,5 @@ export enum LOCALSTORAGE {
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 }

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -107,7 +107,7 @@ describe('BillingContainer', () => {
 			).resolves.toBeInTheDocument();
 
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 
@@ -150,7 +150,7 @@ describe('BillingContainer', () => {
 			expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 	});
@@ -162,7 +162,7 @@ describe('BillingContainer', () => {
 		it('should render when license is ACTIVATED and platform is CLOUD', async () => {
 			render(<BillingContainer />);
 			await expect(
-				screen.findByText('Cancel Subscription', { selector: 'span' }),
+				screen.findByText('Cancel your subscription', { selector: 'span' }),
 			).resolves.toBeInTheDocument();
 		});
 
@@ -186,7 +186,7 @@ describe('BillingContainer', () => {
 			);
 			await screen.findByText('billing');
 			expect(
-				screen.queryByText('Cancel Subscription', { selector: 'span' }),
+				screen.queryByText('Cancel your subscription', { selector: 'span' }),
 			).not.toBeInTheDocument();
 		});
 
@@ -225,7 +225,7 @@ describe('BillingContainer', () => {
 			render(<BillingContainer />, {}, { appContextOverrides: overrides });
 			await screen.findByText('billing');
 			expect(
-				screen.queryByText('Cancel Subscription', { selector: 'span' }),
+				screen.queryByText('Cancel your subscription', { selector: 'span' }),
 			).not.toBeInTheDocument();
 		});
 	});

frontend/src/container/BillingContainer/CancelSubscriptionBanner.module.scss

@@ -1,11 +1,11 @@
 .banner {
 	display: flex;
 	justify-content: space-between;
-	align-items: center;
+	align-items: flex-start;
 	padding: var(--padding-4);
 	border-radius: 4px;
-	border: 1px solid var(--callout-error-border);
-	background-color: var(--callout-error-background);
+	border: 1px solid var(--l1-border);
+	background-color: var(--l2-background);
 	margin: var(--spacing-4) 0 var(--spacing-12);
 }
 
@@ -15,21 +15,55 @@
 	gap: var(--spacing-2);
 }
 
+.titleRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
 .title {
-	font-size: var(--font-size-sm);
-	font-weight: var(--font-weight-medium);
-	color: var(--callout-error-title);
+	font-size: var(--paragraph-base-500-font-size);
+	font-weight: var(--paragraph-base-500-font-weight);
+	line-height: var(--paragraph-base-500-line-height);
+	color: var(--l1-foreground);
 }
 
 .subtitle {
 	font-size: var(--paragraph-base-400-font-size);
 	font-weight: var(--paragraph-base-400-font-weight);
 	line-height: var(--paragraph-base-400-line-height);
-	color: var(--callout-error-icon);
+	color: var(--l2-foreground);
+	padding-left: 20px;
 }
 
 .dialogBody {
-	font-size: var(--font-size-sm);
-	line-height: var(--line-height-relaxed);
-	color: var(--l2-foreground);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.dialogDescription {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	color: var(--l2-foreground);
+	margin: 0;
+}
+
+.dialogConfirmLabel {
+	font-size: var(--paragraph-base-400-font-size);
+	font-weight: var(--paragraph-base-400-font-weight);
+	line-height: var(--paragraph-base-400-line-height);
+	color: var(--l2-foreground);
+	margin: 0;
+
+	code {
+		font-family: var(--font-mono);
+		color: var(--l1-foreground);
+	}
+}
+
+.cancelButton {
+	background: var(--secondary-background);
+	border: 1px solid var(--l1-border);
 }

frontend/src/container/BillingContainer/CancelSubscriptionBanner.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, userEvent } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 
@@ -13,14 +13,16 @@ describe('CancelSubscriptionBanner', () => {
 	it('renders banner with title and subtitle', () => {
 		render(<CancelSubscriptionBanner />);
 		expect(
-			screen.getByText('Cancel Subscription', { selector: 'span' }),
+			screen.getByText('Cancel your subscription', { selector: 'span' }),
 		).toBeInTheDocument();
 		expect(
-			screen.getByText('Cancel your SigNoz subscription.'),
+			screen.getByText(
+				/When you cancel your SigNoz subscription, all your data will be deleted/i,
+			),
 		).toBeInTheDocument();
 	});
 
-	it('opens dialog with correct content when Cancel Subscription is clicked', async () => {
+	it('opens dialog with content when Cancel Subscription is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CancelSubscriptionBanner />);
 
@@ -30,17 +32,62 @@ describe('CancelSubscriptionBanner', () => {
 
 		expect(screen.getByRole('dialog')).toBeInTheDocument();
 		expect(
-			screen.getByText(/reach out to our support team/i),
+			screen.getByText(/Cancelling your subscription would stop your data/i),
 		).toBeInTheDocument();
+		expect(screen.getByText(/Type/i)).toBeInTheDocument();
 		expect(
-			screen.getByRole('button', { name: /keep subscription/i }),
+			screen.getByPlaceholderText(/Enter the word cancel/i),
 		).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /go back/i })).toBeInTheDocument();
 		expect(
-			screen.getByRole('button', { name: /contact support/i }),
+			screen.getByRole('button', { name: /cancel subscription/i }),
 		).toBeInTheDocument();
 	});
 
-	it('sends mailto to cloud-support with correct subject on Contact Support', async () => {
+	it('keeps Cancel subscription button disabled until "cancel" is typed', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CancelSubscriptionBanner />);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+
+		const confirmButton = screen.getByRole('button', {
+			name: /cancel subscription/i,
+		});
+		expect(confirmButton).toBeDisabled();
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'canc');
+		expect(confirmButton).toBeDisabled();
+
+		await user.type(input, 'el');
+		expect(confirmButton).toBeEnabled();
+	});
+
+	it('closes dialog and resets input when Go back is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CancelSubscriptionBanner />);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'cancel');
+
+		await user.click(screen.getByRole('button', { name: /go back/i }));
+		await waitFor(() =>
+			expect(screen.queryByRole('dialog')).not.toBeInTheDocument(),
+		);
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
+		expect(screen.getByPlaceholderText(/Enter the word cancel/i)).toHaveValue('');
+	});
+
+	it('sends mailto to cloud-support with correct subject after typing "cancel"', async () => {
 		const realCreateElement = document.createElement.bind(document);
 		const mockClick = jest.fn();
 		const mockAnchor = { href: '', click: mockClick };
@@ -57,7 +104,13 @@ describe('CancelSubscriptionBanner', () => {
 		await user.click(
 			screen.getByRole('button', { name: /cancel subscription/i }),
 		);
-		await user.click(screen.getByRole('button', { name: /contact support/i }));
+
+		const input = screen.getByPlaceholderText(/Enter the word cancel/i);
+		await user.type(input, 'cancel');
+
+		await user.click(
+			screen.getByRole('button', { name: /cancel subscription/i }),
+		);
 
 		expect(mockAnchor.href).toContain('mailto:cloud-support@signoz.io');
 		expect(mockAnchor.href).toContain('Cancel%20My%20SigNoz%20Subscription');

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -1,15 +1,17 @@
 import { useState } from 'react';
-import { X } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
+import { SolidInfoCircle, Undo2, X } from '@signozhq/icons';
+import { Button, DialogWrapper, Input } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { getBaseUrl } from 'utils/basePath';
 
 import styles from './CancelSubscriptionBanner.module.scss';
+import { Color } from '@signozhq/design-tokens';
 
 function CancelSubscriptionBanner(): JSX.Element {
 	const [open, setOpen] = useState(false);
+	const [confirmText, setConfirmText] = useState('');
 	const { user, org } = useAppContext();
 
 	const handleOpenCancelDialog = (): void => {
@@ -53,6 +55,12 @@ function CancelSubscriptionBanner(): JSX.Element {
 		link.href = `mailto:cloud-support@signoz.io?subject=${subject}&body=${body}`;
 		link.click();
 		setOpen(false);
+		setConfirmText('');
+	};
+
+	const handleClose = (): void => {
+		setOpen(false);
+		setConfirmText('');
 	};
 
 	const footer = (
@@ -60,12 +68,19 @@ function CancelSubscriptionBanner(): JSX.Element {
 			<Button
 				variant="solid"
 				color="secondary"
-				onClick={(): void => setOpen(false)}
+				prefix={<Undo2 size={14} />}
+				onClick={handleClose}
 			>
-				Keep Subscription
+				Go back
 			</Button>
-			<Button variant="solid" color="destructive" onClick={handleContactSupport}>
-				Contact Support
+			<Button
+				variant="solid"
+				color="destructive"
+				prefix={<X size={14} />}
+				disabled={confirmText !== 'cancel'}
+				onClick={handleContactSupport}
+			>
+				Cancel subscription
 			</Button>
 		</>
 	);
@@ -74,30 +89,47 @@ function CancelSubscriptionBanner(): JSX.Element {
 		<>
 			<div className={styles.banner}>
 				<div className={styles.info}>
-					<span className={styles.title}>Cancel Subscription</span>
-					<span className={styles.subtitle}>Cancel your SigNoz subscription.</span>
+					<div className={styles.titleRow}>
+						<SolidInfoCircle color={Color.BG_SAKURA_500} size={12} />
+						<span className={styles.title}>Cancel your subscription</span>
+					</div>
+					<span className={styles.subtitle}>
+						When you cancel your SigNoz subscription, all your data will be deleted
+						immediately and removed from our servers.
+					</span>
 				</div>
 				<Button
 					variant="solid"
-					color="destructive"
+					color="secondary"
 					prefix={<X size={12} />}
 					onClick={handleOpenCancelDialog}
+					className={styles.cancelButton}
 				>
 					Cancel Subscription
 				</Button>
 			</div>
 			<DialogWrapper
 				open={open}
-				onOpenChange={setOpen}
-				title="Cancel your subscription"
+				onOpenChange={handleClose}
+				title="Cancel your subscription?"
 				width="narrow"
 				showCloseButton={false}
 				footer={footer}
 			>
-				<p className={styles.dialogBody}>
-					To cancel your SigNoz subscription, please reach out to our support team.
-					We&apos;ll be happy to assist you.
-				</p>
+				<div className={styles.dialogBody}>
+					<p className={styles.dialogDescription}>
+						Cancelling your subscription would stop your data from being ingested to
+						SigNoz. All the data that has been already sent will also be deleted.
+					</p>
+					<p className={styles.dialogConfirmLabel}>
+						Type <code>cancel</code> to confirm the cancellation.
+					</p>
+					<Input
+						placeholder="Enter the word cancel..."
+						value={confirmText}
+						onChange={(e): void => setConfirmText(e.target.value)}
+					/>
+				</div>
 			</DialogWrapper>
 		</>
 	);

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,190 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.overviewSettings {
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+	padding: 16px !important;
+}
+
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.crossPanelSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.nameIconInput {
+	display: flex;
+}
+
+.dashboardImageInput {
+	:global(.ant-select-selector) {
+		display: flex;
+		width: 32px;
+		height: 32px;
+		padding: 6px;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l3-background) !important;
+
+		:global(.ant-select-selection-item) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&:global(.ant-select-dropdown) {
+		padding: 0px !important;
+	}
+
+	:global(.ant-select-item) {
+		padding: 0px;
+		align-items: center;
+		justify-content: center;
+
+		:global(.ant-select-item-option-content) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.dashboardName {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	margin-bottom: 0.5rem;
+}
+
+.descriptionTextArea {
+	padding: 6px 6px 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 0px;
+	position: fixed;
+	bottom: 0;
+	height: 32px;
+	border-top: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionBtns {
+	display: flex;
+	gap: 8px;
+}
+
+.discardBtn {
+	margin: '16px 0';
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.styles.scss

@@ -1,143 +0,0 @@
-.overview-content {
-	display: flex;
-	flex-direction: column;
-
-	.overview-settings {
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-		padding: 16px !important;
-
-		.name-icon-input {
-			display: flex;
-			.dashboard-image-input {
-				.ant-select-selector {
-					display: flex;
-					width: 32px;
-					height: 32px;
-					padding: 6px;
-					justify-content: center;
-					align-items: center;
-					border-radius: 2px 0px 0px 2px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-
-					.ant-select-selection-item {
-						display: flex;
-						align-items: center;
-
-						.list-item-image {
-							height: 16px;
-							width: 16px;
-						}
-					}
-				}
-			}
-
-			.dashboard-name-input {
-				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-			}
-		}
-
-		.dashboard-name {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-		}
-
-		.description-text-area {
-			padding: 6px 6px 6px 8px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-		}
-	}
-
-	.overview-settings-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: -webkit-fill-available;
-		padding: 12px 16px 12px 0px;
-		position: fixed;
-		bottom: 0;
-		height: 32px;
-		border-top: 1px solid var(--l1-border);
-		background: var(--l2-background);
-
-		.unsaved {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.unsaved-dot {
-				width: 6px;
-				height: 6px;
-				border-radius: 50px;
-				background: var(--primary-background);
-				box-shadow: 0px 0px 6px 0px
-					color-mix(in srgb, var(--primary-background) 40%, transparent);
-			}
-			.unsaved-changes {
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 24px; /* 171.429% */
-				letter-spacing: -0.07px;
-			}
-		}
-		.footer-action-btns {
-			display: flex;
-			gap: 8px;
-
-			.discard-btn {
-				margin: '16px 0';
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px;
-			}
-
-			.save-btn {
-				margin: 0px !important;
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 24px;
-			}
-		}
-	}
-}
-
-.dashboard-image-input {
-	&.ant-select-dropdown {
-		padding: 0px !important;
-	}
-
-	.ant-select-item {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		.ant-select-item-option-content {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			.list-item-image {
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
-}

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -1,16 +1,24 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Select, Space, Typography } from 'antd';
+import { Col, Input, Radio, Select, Space, Typography } from 'antd';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 
+import styles from './GeneralSettings.module.scss';
 import { Button } from './styles';
 import { Base64Icons } from './utils';
-
-import './GeneralSettings.styles.scss';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 const { Option } = Select;
 
@@ -19,6 +27,13 @@ function GeneralDashboardSettings(): JSX.Element {
 
 	const updateDashboardMutation = useUpdateDashboard();
 
+	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(
+		dashboardData?.id,
+	);
+
+	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
+		useSyncTooltipFilterMode(dashboardData?.id);
+
 	const selectedData = dashboardData?.data;
 
 	const {
@@ -100,8 +115,8 @@ function GeneralDashboardSettings(): JSX.Element {
 	};
 
 	return (
-		<div className="overview-content">
-			<Col className="overview-settings">
+		<div className={styles.overviewContent}>
+			<Col className={styles.overviewSettings}>
 				<Space
 					direction="vertical"
 					style={{
@@ -112,27 +127,29 @@ function GeneralDashboardSettings(): JSX.Element {
 					}}
 				>
 					<div>
-						<Typography style={{ marginBottom: '0.5rem' }} className="dashboard-name">
-							Dashboard Name
-						</Typography>
-						<section className="name-icon-input">
+						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
+						<section className={styles.nameIconInput}>
 							<Select
 								defaultActiveFirstOption
 								data-testid="dashboard-image"
 								suffixIcon={null}
-								rootClassName="dashboard-image-input"
+								rootClassName={styles.dashboardImageInput}
 								value={updatedImage}
 								onChange={(value: string): void => setUpdatedImage(value)}
 							>
 								{Base64Icons.map((icon) => (
 									<Option value={icon} key={icon}>
-										<img src={icon} alt="dashboard-icon" className="list-item-image" />
+										<img
+											src={icon}
+											alt="dashboard-icon"
+											className={styles.listItemImage}
+										/>
 									</Option>
 								))}
 							</Select>
 							<Input
 								data-testid="dashboard-name"
-								className="dashboard-name-input"
+								className={styles.dashboardNameInput}
 								value={updatedTitle}
 								onChange={(e): void => setUpdatedTitle(e.target.value)}
 							/>
@@ -140,41 +157,92 @@ function GeneralDashboardSettings(): JSX.Element {
 					</div>
 
 					<div>
-						<Typography style={{ marginBottom: '0.5rem' }} className="dashboard-name">
-							Description
-						</Typography>
+						<Typography className={styles.dashboardName}>Description</Typography>
 						<Input.TextArea
 							data-testid="dashboard-desc"
 							rows={6}
 							value={updatedDescription}
-							className="description-text-area"
+							className={styles.descriptionTextArea}
 							onChange={(e): void => setUpdatedDescription(e.target.value)}
 						/>
 					</div>
 					<div>
-						<Typography style={{ marginBottom: '0.5rem' }} className="dashboard-name">
-							Tags
-						</Typography>
+						<Typography className={styles.dashboardName}>Tags</Typography>
 						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
 					</div>
 				</Space>
 			</Col>
+			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
+				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+					Cross-Panel Sync
+				</Typography.Text>
+				<div className={styles.crossPanelSyncRow}>
+					<div className={styles.crossPanelSyncInfo}>
+						<Typography.Text className={styles.crossPanelSyncTitle}>
+							Sync Mode
+						</Typography.Text>
+						<Typography.Text className={styles.crossPanelSyncDescription}>
+							Sync crosshair and tooltip across all the dashboard panels
+						</Typography.Text>
+					</div>
+					<Radio.Group
+						value={cursorSyncMode}
+						onChange={(e): void => {
+							setCursorSyncMode(e.target.value as DashboardCursorSync);
+						}}
+					>
+						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
+						<Radio.Button value={DashboardCursorSync.Crosshair}>
+							Crosshair
+						</Radio.Button>
+						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
+					</Radio.Group>
+				</div>
+				{cursorSyncMode === DashboardCursorSync.Tooltip && (
+					<div className={styles.crossPanelSyncRow}>
+						<div className={styles.crossPanelSyncInfo}>
+							<Typography.Text className={styles.crossPanelSyncTitle}>
+								Synced Tooltip Series
+							</Typography.Text>
+							<Typography.Text className={styles.crossPanelSyncDescription}>
+								Show only series that intersect on group-by, or every series with the
+								matching ones highlighted
+							</Typography.Text>
+						</div>
+						<Radio.Group
+							value={syncTooltipFilterMode}
+							onChange={(e): void => {
+								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
+									path: getAbsoluteUrl(window.location.pathname),
+									mode: e.target.value,
+								});
+								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+							}}
+						>
+							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+								Filtered
+							</Radio.Button>
+						</Radio.Group>
+					</div>
+				)}
+			</Col>
 			{numberOfUnsavedChanges > 0 && (
-				<div className="overview-settings-footer">
-					<div className="unsaved">
-						<div className="unsaved-dot" />
-						<Typography.Text className="unsaved-changes">
+				<div className={styles.overviewSettingsFooter}>
+					<div className={styles.unsaved}>
+						<div className={styles.unsavedDot} />
+						<Typography.Text className={styles.unsavedChanges}>
 							{numberOfUnsavedChanges} unsaved change
 							{numberOfUnsavedChanges > 1 && 's'}
 						</Typography.Text>
 					</div>
-					<div className="footer-action-btns">
+					<div className={styles.footerActionBtns}>
 						<Button
 							disabled={updateDashboardMutation.isLoading}
 							icon={<X size={14} />}
 							onClick={discardHandler}
 							type="text"
-							className="discard-btn"
+							className={styles.discardBtn}
 						>
 							Discard
 						</Button>
@@ -188,7 +256,7 @@ function GeneralDashboardSettings(): JSX.Element {
 							data-testid="save-dashboard-config"
 							onClick={onSaveHandler}
 							type="primary"
-							className="save-btn"
+							className={styles.saveBtn}
 						>
 							{t('save')}
 						</Button>

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

@@ -33,11 +33,13 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
+				id: config.getId(),
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
 				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
@@ -48,6 +50,7 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			rest.decimalPrecision,
 			isStackedBarChart,
 			rest.canPinTooltip,
+			rest.renderTooltipFooter,
 		],
 	);
 

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

@@ -29,11 +29,12 @@ export default function ChartWrapper({
 	onClick,
 	syncMode,
 	syncKey,
+	syncFilterMode,
 	onDestroy = noop,
 	children,
 	layoutChildren,
 	yAxisUnit,
-	groupBy,
+	groupByPerQuery,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -69,9 +70,10 @@ export default function ChartWrapper({
 	const syncMetadata = useMemo(
 		() => ({
 			yAxisUnit,
-			groupBy,
+			groupByPerQuery,
+			filterMode: syncFilterMode,
 		}),
-		[yAxisUnit, groupBy],
+		[yAxisUnit, groupByPerQuery, syncFilterMode],
 	);
 
 	return (

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

@@ -24,13 +24,21 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			}
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
+				id: rest.config.getId(),
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision, rest.canPinTooltip],
+		[
+			customTooltip,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			rest.canPinTooltip,
+			rest.renderTooltipFooter,
+		],
 	);
 
 	return (

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

@@ -9,7 +9,7 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, customTooltip, pinnedTooltipElement, ...rest } = props;
+	const { children, customTooltip, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -18,10 +18,12 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 			}
 			const tooltipProps: TimeSeriesTooltipProps = {
 				...props,
+				id: rest.config.getId(),
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				canPinTooltip: rest.canPinTooltip,
+				renderTooltipFooter: rest.renderTooltipFooter,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
@@ -31,15 +33,12 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 			rest.yAxisUnit,
 			rest.decimalPrecision,
 			rest.canPinTooltip,
+			rest.renderTooltipFooter,
 		],
 	);
 
 	return (
-		<ChartWrapper
-			{...rest}
-			customTooltip={renderTooltip}
-			pinnedTooltipElement={pinnedTooltipElement}
-		>
+		<ChartWrapper {...rest} customTooltip={renderTooltip}>
 			{children}
 		</ChartWrapper>
 	);

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

@@ -1,9 +1,14 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
+import {
+	IRenderTooltipFooterArgs,
+	LegendConfig,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import {
 	DashboardCursorSync,
+	SyncTooltipFilterMode,
 	TooltipClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -21,6 +26,7 @@ interface BaseChartProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
+	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }
@@ -30,6 +36,7 @@ interface UPlotBasedChartProps {
 	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
+	syncFilterMode?: SyncTooltipFilterMode;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;
@@ -39,7 +46,7 @@ interface UPlotBasedChartProps {
 interface UPlotChartDataProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	groupBy?: BaseAutocompleteData[];
+	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 }
 
 export interface TimeSeriesChartProps

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

@@ -1,9 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
+import {
+	IRenderTooltipFooterArgs,
+	LegendPosition,
+} from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
@@ -14,7 +20,7 @@ import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
 import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
 
 import '../Panel.styles.scss';
-import get from 'lodash/get';
+import TooltipFooter from '../components/TooltipFooter';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -24,6 +30,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		onDragSelect,
 		isFullViewMode,
 		onToggleModelHandler,
+		groupByPerQuery,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -34,6 +41,10 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	const dashboardId = useDashboardStore((s) => s.dashboardData?.id);
+	const [syncMode] = useDashboardCursorSyncMode(dashboardId, panelMode);
+	const [syncFilterMode] = useSyncTooltipFilterMode(dashboardId);
+
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 
@@ -75,6 +86,11 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		maxTimeScale,
 		timezone,
 		panelMode,
+		// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
+		// Rebuild it on syncMode changes so the new chart instance starts from a
+		// clean config — otherwise switching to "No Sync" would inherit stale sync
+		// settings from the previous mode.
+		syncMode,
 	]);
 
 	const chartData = useMemo(() => {
@@ -114,14 +130,20 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		uPlotRef.current = plot;
 	}, []);
 
-	const groupBy = useMemo(() => {
-		return get(widget, 'query.builder.queryData[0].groupBy', []);
-	}, [widget.query]);
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => {
+			return (
+				<TooltipFooter id={widget.id} isPinned={isPinned} dismiss={dismiss} />
+			);
+		},
+		[],
+	);
 
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
+					key={`${syncMode}-${syncFilterMode}`}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -133,11 +155,14 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
-					groupBy={groupBy}
+					groupByPerQuery={groupByPerQuery}
 					isStackedBarChart={widget.stackedBarChart ?? false}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}
+					syncMode={syncMode}
+					syncFilterMode={syncFilterMode}
+					renderTooltipFooter={renderTooltipFooter}
 				>
 					<ContextMenu
 						coordinates={coordinates}

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

@@ -1,8 +1,11 @@
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
+import {
+	IRenderTooltipFooterArgs,
+	LegendPosition,
+} from 'lib/uPlotV2/components/types';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -13,6 +16,7 @@ import {
 } from './utils';
 
 import '../Panel.styles.scss';
+import TooltipFooter from '../components/TooltipFooter';
 
 function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -75,6 +79,20 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		widget.mergeAllActiveQueries,
 	]);
 
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => {
+			return (
+				<TooltipFooter
+					id={widget.id}
+					isPinned={isPinned}
+					dismiss={dismiss}
+					canDrilldown={false}
+				/>
+			);
+		},
+		[],
+	);
+
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
@@ -97,6 +115,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
+					renderTooltipFooter={renderTooltipFooter}
 				/>
 			)}
 		</div>

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

@@ -1,20 +1,26 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
+import {
+	IRenderTooltipFooterArgs,
+	LegendPosition,
+} from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
+import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
-import get from 'lodash/get';
 
 import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
 
 import '../Panel.styles.scss';
+import TooltipFooter from '../components/TooltipFooter';
 
 function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -24,6 +30,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		onDragSelect,
 		isFullViewMode,
 		onToggleModelHandler,
+		groupByPerQuery,
 	} = props;
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
@@ -33,6 +40,10 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	const dashboardId = useDashboardStore((s) => s.dashboardData?.id);
+	const [syncMode] = useDashboardCursorSyncMode(dashboardId, panelMode);
+	const [syncFilterMode] = useSyncTooltipFilterMode(dashboardId);
+
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 
@@ -81,6 +92,11 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		minTimeScale,
 		maxTimeScale,
 		timezone,
+		// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
+		// Rebuild it on syncMode changes so the new chart instance starts from a
+		// clean config — otherwise switching to "No Sync" would inherit stale sync
+		// settings from the previous mode.
+		syncMode,
 	]);
 
 	const layoutChildren = useMemo(() => {
@@ -105,14 +121,20 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		widget.decimalPrecision,
 	]);
 
-	const groupBy = useMemo(() => {
-		return get(widget, 'query.builder.queryData[0].groupBy', []);
-	}, [widget.query]);
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => {
+			return (
+				<TooltipFooter id={widget.id} isPinned={isPinned} dismiss={dismiss} />
+			);
+		},
+		[],
+	);
 
 	return (
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<TimeSeries
+					key={`${syncMode}-${syncFilterMode}`}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -122,10 +144,13 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
-					groupBy={groupBy}
+					groupByPerQuery={groupByPerQuery}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
+					syncMode={syncMode}
+					syncFilterMode={syncFilterMode}
 					layoutChildren={layoutChildren}
+					renderTooltipFooter={renderTooltipFooter}
 				>
 					<ContextMenu
 						coordinates={coordinates}

frontend/src/container/DashboardContainer/visualization/panels/components/TooltipFooter.tsx

@@ -7,22 +7,25 @@ import Styles from './TooltipFooter.module.scss';
 import { MousePointerClick } from '@signozhq/icons';
 import logEvent from 'api/common/logEvent';
 import { Events } from 'constants/events';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 interface TooltipFooterProps {
+	id: string;
 	pinKey?: string;
 	isPinned: boolean;
+	canDrilldown?: boolean;
 	dismiss: () => void;
 }
 
 export default function TooltipFooter({
+	id,
 	pinKey = DEFAULT_PIN_TOOLTIP_KEY,
 	isPinned,
+	canDrilldown = true,
 	dismiss,
 }: TooltipFooterProps): JSX.Element {
 	const handleUnpinClick = (): void => {
 		logEvent(Events.TOOLTIP_UNPINNED, {
-			path: getAbsoluteUrl(window.location.pathname),
+			id: id,
 		});
 		dismiss();
 	};
@@ -43,12 +46,14 @@ export default function TooltipFooter({
 					</div>
 				) : (
 					<div className={Styles.hintList}>
-						<div className={Styles.hint} data-active="false">
-							<Kbd>
-								<MousePointerClick size={12} />
-							</Kbd>
-							<span>Click to drilldown</span>
-						</div>
+						{canDrilldown && (
+							<div className={Styles.hint} data-active="false">
+								<Kbd>
+									<MousePointerClick size={12} />
+								</Kbd>
+								<span>Click to drilldown</span>
+							</div>
+						)}
 						<div className={Styles.hint} data-active="false">
 							<span>Press</span>
 							<Kbd>{pinKey.toUpperCase()}</Kbd>

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -0,0 +1,93 @@
+import { Events } from 'constants/events';
+import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import TooltipFooter from '../TooltipFooter';
+
+const mockLogEvent = jest.fn();
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: (...args: unknown[]): unknown => mockLogEvent(...args),
+}));
+
+describe('TooltipFooter', () => {
+	const defaultProps = {
+		id: 'panel-123',
+		isPinned: false,
+		dismiss: jest.fn(),
+	};
+
+	describe('when not pinned', () => {
+		it('renders the drilldown and pin hints by default', () => {
+			render(<TooltipFooter {...defaultProps} />);
+
+			expect(screen.getByText('Click to drilldown')).toBeInTheDocument();
+			expect(screen.getByText('to pin the tooltip')).toBeInTheDocument();
+			expect(
+				screen.getByText(DEFAULT_PIN_TOOLTIP_KEY.toUpperCase()),
+			).toBeInTheDocument();
+		});
+
+		it('hides the drilldown hint when canDrilldown is false', () => {
+			render(<TooltipFooter {...defaultProps} canDrilldown={false} />);
+
+			expect(screen.queryByText('Click to drilldown')).not.toBeInTheDocument();
+			expect(screen.getByText('to pin the tooltip')).toBeInTheDocument();
+		});
+
+		it('renders a custom pin key in uppercase', () => {
+			render(<TooltipFooter {...defaultProps} pinKey="x" />);
+
+			expect(screen.getByText('X')).toBeInTheDocument();
+		});
+
+		it('does not render the unpin button', () => {
+			render(<TooltipFooter {...defaultProps} />);
+
+			expect(screen.queryByTestId('uplot-tooltip-unpin')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('when pinned', () => {
+		it('renders the unpin hint with pin key and Esc', () => {
+			render(<TooltipFooter {...defaultProps} isPinned />);
+
+			expect(screen.getByText('to unpin')).toBeInTheDocument();
+			expect(
+				screen.getByText(DEFAULT_PIN_TOOLTIP_KEY.toUpperCase()),
+			).toBeInTheDocument();
+			expect(screen.getByText('Esc')).toBeInTheDocument();
+		});
+
+		it('renders the unpin button', () => {
+			render(<TooltipFooter {...defaultProps} isPinned />);
+
+			expect(screen.getByTestId('uplot-tooltip-unpin')).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /unpin tooltip/i }),
+			).toBeInTheDocument();
+		});
+
+		it('hides the drilldown and pin-instruction hints', () => {
+			render(<TooltipFooter {...defaultProps} isPinned />);
+
+			expect(screen.queryByText('Click to drilldown')).not.toBeInTheDocument();
+			expect(screen.queryByText('to pin the tooltip')).not.toBeInTheDocument();
+		});
+
+		it('calls dismiss and logs the unpin event when the unpin button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const dismiss = jest.fn();
+
+			render(<TooltipFooter {...defaultProps} dismiss={dismiss} isPinned />);
+
+			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
+
+			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+				id: 'panel-123',
+			});
+			expect(dismiss).toHaveBeenCalledTimes(1);
+		});
+	});
+});

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
 import Spinner from 'components/Spinner';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { PanelTypeVsPanelWrapper } from './constants';
 import { PanelWrapperProps } from './panelWrapper.types';
@@ -30,6 +31,20 @@ function PanelWrapper({
 		selectedGraph || widget.panelTypes
 	] as FC<PanelWrapperProps>;
 
+	const groupByPerQuery = useMemo<Record<string, BaseAutocompleteData[]>>(() => {
+		if (!widget.query.builder) {
+			return {};
+		}
+		const { queryData } = widget.query.builder;
+		return queryData.reduce<Record<string, BaseAutocompleteData[]>>(
+			(acc, query) => {
+				acc[query.queryName] = query.groupBy ?? [];
+				return acc;
+			},
+			{},
+		);
+	}, [widget]);
+
 	if (!Component) {
 		return <></>;
 	}
@@ -60,6 +75,7 @@ function PanelWrapper({
 			customSeries={customSeries}
 			enableDrillDown={enableDrillDown}
 			onColumnWidthsChange={onColumnWidthsChange}
+			groupByPerQuery={groupByPerQuery}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -5,6 +5,7 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import { WidgetGraphComponentProps } from 'container/GridCardLayout/GridCard/types';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
@@ -30,6 +31,7 @@ export type PanelWrapperProps = {
 	enableDrillDown?: boolean;
 	panelMode: PanelMode;
 	onColumnWidthsChange?: (widths: Record<string, number>) => void;
+	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
 };
 
 export type TooltipData = {

frontend/src/hooks/dashboard/__test__/useDashboardCursorSyncMode.test.ts

@@ -0,0 +1,150 @@
+import { act, renderHook } from '@testing-library/react';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import { useDashboardCursorSyncMode } from '../useDashboardCursorSyncMode';
+import { useDashboardPreferencesStore } from '../useDashboardPreference';
+
+const STORAGE_KEY = LOCALSTORAGE.DASHBOARD_PREFERENCES;
+
+describe('useDashboardCursorSyncMode', () => {
+	beforeEach(() => {
+		useDashboardPreferencesStore.setState({ preferences: {} });
+		localStorage.removeItem(STORAGE_KEY);
+	});
+
+	describe('in DASHBOARD_VIEW mode', () => {
+		it('uses Crosshair as the default cursor sync mode', () => {
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode('dash-1', PanelMode.DASHBOARD_VIEW),
+			);
+
+			expect(result.current[0]).toBe(DashboardCursorSync.Crosshair);
+		});
+
+		it('reads the stored cursor sync mode for the dashboard', () => {
+			useDashboardPreferencesStore.setState({
+				preferences: { 'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip } },
+			});
+
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode('dash-1', PanelMode.DASHBOARD_VIEW),
+			);
+
+			expect(result.current[0]).toBe(DashboardCursorSync.Tooltip);
+		});
+
+		it('writes the value under the cursorSyncMode key in the store', () => {
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode('dash-1', PanelMode.DASHBOARD_VIEW),
+			);
+
+			act(() => {
+				result.current[1](DashboardCursorSync.None);
+			});
+
+			expect(result.current[0]).toBe(DashboardCursorSync.None);
+			expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({
+				'dash-1': { cursorSyncMode: DashboardCursorSync.None },
+			});
+		});
+
+		it('persists the value to localStorage', () => {
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode('dash-1', PanelMode.DASHBOARD_VIEW),
+			);
+
+			act(() => {
+				result.current[1](DashboardCursorSync.None);
+			});
+
+			const persisted = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}');
+			expect(persisted.state.preferences).toStrictEqual({
+				'dash-1': { cursorSyncMode: DashboardCursorSync.None },
+			});
+		});
+
+		it('returns the default when dashboardId is undefined', () => {
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode(undefined, PanelMode.DASHBOARD_VIEW),
+			);
+
+			expect(result.current[0]).toBe(DashboardCursorSync.Crosshair);
+		});
+
+		it('treats the setter as a no-op when dashboardId is undefined', () => {
+			const { result } = renderHook(() =>
+				useDashboardCursorSyncMode(undefined, PanelMode.DASHBOARD_VIEW),
+			);
+
+			act(() => {
+				result.current[1](DashboardCursorSync.Tooltip);
+			});
+
+			expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual(
+				{},
+			);
+			expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+			expect(result.current[0]).toBe(DashboardCursorSync.Crosshair);
+		});
+	});
+
+	describe('without a panelMode (e.g. dashboard settings call site)', () => {
+		it('reads the stored value just like DASHBOARD_VIEW does', () => {
+			useDashboardPreferencesStore.setState({
+				preferences: { 'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip } },
+			});
+
+			const { result } = renderHook(() => useDashboardCursorSyncMode('dash-1'));
+
+			expect(result.current[0]).toBe(DashboardCursorSync.Tooltip);
+		});
+
+		it('writes through the setter to the store', () => {
+			const { result } = renderHook(() => useDashboardCursorSyncMode('dash-1'));
+
+			act(() => {
+				result.current[1](DashboardCursorSync.None);
+			});
+
+			expect(result.current[0]).toBe(DashboardCursorSync.None);
+			expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({
+				'dash-1': { cursorSyncMode: DashboardCursorSync.None },
+			});
+		});
+	});
+
+	describe.each([[PanelMode.DASHBOARD_EDIT], [PanelMode.STANDALONE_VIEW]])(
+		'in %s mode (cursor sync disabled)',
+		(panelMode) => {
+			it('returns None and ignores any stored value', () => {
+				useDashboardPreferencesStore.setState({
+					preferences: { 'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip } },
+				});
+
+				const { result } = renderHook(() =>
+					useDashboardCursorSyncMode('dash-1', panelMode),
+				);
+
+				expect(result.current[0]).toBe(DashboardCursorSync.None);
+			});
+
+			it('treats the setter as a no-op and does not write to the store', () => {
+				const { result } = renderHook(() =>
+					useDashboardCursorSyncMode('dash-1', panelMode),
+				);
+
+				act(() => {
+					result.current[1](DashboardCursorSync.Tooltip);
+				});
+
+				expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual(
+					{},
+				);
+				expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+				expect(result.current[0]).toBe(DashboardCursorSync.None);
+			});
+		},
+	);
+});

frontend/src/hooks/dashboard/__test__/useDashboardPreference.test.ts

@@ -0,0 +1,201 @@
+import { act, renderHook } from '@testing-library/react';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import {
+	useDashboardPreference,
+	useDashboardPreferencesStore,
+} from '../useDashboardPreference';
+
+const DEFAULT_MODE = DashboardCursorSync.Crosshair;
+
+describe('useDashboardPreference', () => {
+	beforeEach(() => {
+		useDashboardPreferencesStore.setState({ preferences: {} });
+	});
+
+	it('returns the default value when no preference is stored', () => {
+		const { result } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		expect(result.current[0]).toBe(DEFAULT_MODE);
+	});
+
+	it('returns the default value when dashboardId is undefined', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: { 'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip } },
+		});
+
+		const { result } = renderHook(() =>
+			useDashboardPreference(undefined, 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		expect(result.current[0]).toBe(DEFAULT_MODE);
+	});
+
+	it('returns the stored value for the given dashboardId', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: {
+				'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip },
+				'dash-2': { cursorSyncMode: DashboardCursorSync.None },
+			},
+		});
+
+		const { result } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		expect(result.current[0]).toBe(DashboardCursorSync.Tooltip);
+	});
+
+	it('persists the new value via the setter', () => {
+		const { result } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		act(() => {
+			result.current[1](DashboardCursorSync.None);
+		});
+
+		expect(result.current[0]).toBe(DashboardCursorSync.None);
+		expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({
+			'dash-1': { cursorSyncMode: DashboardCursorSync.None },
+		});
+	});
+
+	it('does not write when dashboardId is undefined', () => {
+		const { result } = renderHook(() =>
+			useDashboardPreference(undefined, 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		act(() => {
+			result.current[1](DashboardCursorSync.Tooltip);
+		});
+
+		expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({});
+		expect(result.current[0]).toBe(DEFAULT_MODE);
+	});
+
+	it('keeps multiple hook instances in sync after a write', () => {
+		const { result: writer } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+		const { result: reader } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		act(() => {
+			writer.current[1](DashboardCursorSync.Tooltip);
+		});
+
+		expect(writer.current[0]).toBe(DashboardCursorSync.Tooltip);
+		expect(reader.current[0]).toBe(DashboardCursorSync.Tooltip);
+	});
+
+	it('isolates preferences across different dashboardIds', () => {
+		const { result: dashOne } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+		const { result: dashTwo } = renderHook(() =>
+			useDashboardPreference('dash-2', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		act(() => {
+			dashOne.current[1](DashboardCursorSync.None);
+		});
+
+		expect(dashOne.current[0]).toBe(DashboardCursorSync.None);
+		expect(dashTwo.current[0]).toBe(DEFAULT_MODE);
+	});
+
+	it('does not overwrite preferences for other dashboards when writing', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: { 'dash-2': { cursorSyncMode: DashboardCursorSync.Tooltip } },
+		});
+
+		const { result } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		act(() => {
+			result.current[1](DashboardCursorSync.None);
+		});
+
+		expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({
+			'dash-1': { cursorSyncMode: DashboardCursorSync.None },
+			'dash-2': { cursorSyncMode: DashboardCursorSync.Tooltip },
+		});
+	});
+});
+
+describe('useDashboardPreferencesStore.removePreferences', () => {
+	beforeEach(() => {
+		useDashboardPreferencesStore.setState({ preferences: {} });
+	});
+
+	it('removes the preferences for the given dashboardId', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: {
+				'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip },
+			},
+		});
+
+		act(() => {
+			useDashboardPreferencesStore.getState().removePreferences('dash-1');
+		});
+
+		expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({});
+	});
+
+	it('leaves other dashboards untouched', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: {
+				'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip },
+				'dash-2': { cursorSyncMode: DashboardCursorSync.None },
+			},
+		});
+
+		act(() => {
+			useDashboardPreferencesStore.getState().removePreferences('dash-1');
+		});
+
+		expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual({
+			'dash-2': { cursorSyncMode: DashboardCursorSync.None },
+		});
+	});
+
+	it('is a no-op when the dashboardId is not present', () => {
+		const initial = {
+			'dash-2': { cursorSyncMode: DashboardCursorSync.Tooltip },
+		};
+		useDashboardPreferencesStore.setState({ preferences: initial });
+		const before = useDashboardPreferencesStore.getState().preferences;
+
+		act(() => {
+			useDashboardPreferencesStore.getState().removePreferences('dash-1');
+		});
+
+		// Identity-preserving so subscribers reading `preferences` don't re-render.
+		expect(useDashboardPreferencesStore.getState().preferences).toBe(before);
+	});
+
+	it('causes subsequent reads via useDashboardPreference to fall back to the default', () => {
+		useDashboardPreferencesStore.setState({
+			preferences: {
+				'dash-1': { cursorSyncMode: DashboardCursorSync.Tooltip },
+			},
+		});
+
+		const { result } = renderHook(() =>
+			useDashboardPreference('dash-1', 'cursorSyncMode', DEFAULT_MODE),
+		);
+
+		expect(result.current[0]).toBe(DashboardCursorSync.Tooltip);
+
+		act(() => {
+			useDashboardPreferencesStore.getState().removePreferences('dash-1');
+		});
+
+		expect(result.current[0]).toBe(DEFAULT_MODE);
+	});
+});

frontend/src/hooks/dashboard/useDashboardCursorSyncMode.ts

@@ -0,0 +1,26 @@
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import { useDashboardPreference } from './useDashboardPreference';
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+
+const NOOP = (): void => {};
+
+export function useDashboardCursorSyncMode(
+	dashboardId: string | undefined,
+	panelMode?: PanelMode,
+): [DashboardCursorSync, (value: DashboardCursorSync) => void] {
+	const [value, setValue] = useDashboardPreference(
+		dashboardId,
+		'cursorSyncMode',
+		DashboardCursorSync.Crosshair,
+	);
+
+	// Chart panels in edit / standalone modes don't participate in cross-panel
+	// sync, so surface the default with a no-op setter for them. Callers without
+	// a panelMode (e.g. dashboard settings) read/write the preference normally.
+	if (panelMode && panelMode !== PanelMode.DASHBOARD_VIEW) {
+		return [DashboardCursorSync.None, NOOP];
+	}
+
+	return [value, setValue];
+}

frontend/src/hooks/dashboard/useDashboardPreference.ts

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+// Per-dashboard preferences persisted in localStorage. Add new preference
+// fields here as they are introduced.
+export type DashboardPreferences = {
+	cursorSyncMode?: DashboardCursorSync;
+	syncTooltipFilterMode?: SyncTooltipFilterMode;
+};
+
+interface DashboardPreferencesState {
+	preferences: Record<string, DashboardPreferences>;
+	setPreference: <K extends keyof DashboardPreferences>(
+		dashboardId: string,
+		key: K,
+		value: NonNullable<DashboardPreferences[K]>,
+	) => void;
+	removePreferences: (dashboardId: string) => void;
+}
+
+export const useDashboardPreferencesStore = create<DashboardPreferencesState>()(
+	persist(
+		(set) => ({
+			preferences: {},
+			setPreference: (dashboardId, key, value): void => {
+				set((state) => ({
+					preferences: {
+						...state.preferences,
+						[dashboardId]: {
+							...state.preferences[dashboardId],
+							[key]: value,
+						},
+					},
+				}));
+			},
+			removePreferences: (dashboardId): void => {
+				set((state) => {
+					if (!(dashboardId in state.preferences)) {
+						return state;
+					}
+					const { [dashboardId]: _, ...rest } = state.preferences;
+					return { preferences: rest };
+				});
+			},
+		}),
+		{ name: LOCALSTORAGE.DASHBOARD_PREFERENCES },
+	),
+);
+
+export function useDashboardPreference<K extends keyof DashboardPreferences>(
+	dashboardId: string | undefined,
+	key: K,
+	defaultValue: NonNullable<DashboardPreferences[K]>,
+): [
+	NonNullable<DashboardPreferences[K]>,
+	(value: NonNullable<DashboardPreferences[K]>) => void,
+] {
+	type Value = NonNullable<DashboardPreferences[K]>;
+
+	const value = useDashboardPreferencesStore((state): Value => {
+		if (!dashboardId) {
+			return defaultValue;
+		}
+		return (
+			(state.preferences[dashboardId]?.[key] as Value | undefined) ?? defaultValue
+		);
+	});
+
+	const setPreference = useDashboardPreferencesStore((s) => s.setPreference);
+
+	const updateValue = useCallback(
+		(next: Value): void => {
+			if (!dashboardId) {
+				return;
+			}
+			setPreference(dashboardId, key, next);
+		},
+		[dashboardId, key, setPreference],
+	);
+
+	return [value, updateValue];
+}

frontend/src/hooks/dashboard/useDeleteDashboard.tsx

@@ -5,10 +5,15 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
 
+import { useDashboardPreferencesStore } from './useDashboardPreference';
+
 export const useDeleteDashboard = (
 	id: string,
 ): UseMutationResult<SuccessResponseV2<null>, APIError, void, unknown> => {
 	const { showErrorModal } = useErrorModal();
+	const removePreferences = useDashboardPreferencesStore(
+		(state) => state.removePreferences,
+	);
 
 	return useMutation<SuccessResponseV2<null>, APIError>({
 		mutationKey: REACT_QUERY_KEY.DELETE_DASHBOARD,
@@ -16,6 +21,9 @@ export const useDeleteDashboard = (
 			deleteDashboard({
 				id,
 			}),
+		onSuccess: () => {
+			removePreferences(id);
+		},
 		onError: (error: APIError) => {
 			showErrorModal(error);
 		},

frontend/src/hooks/dashboard/useSyncTooltipFilterMode.ts

@@ -0,0 +1,15 @@
+import { SyncTooltipFilterMode } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+import { useDashboardPreference } from './useDashboardPreference';
+
+const DEFAULT_SYNC_TOOLTIP_FILTER_MODE = SyncTooltipFilterMode.Filtered;
+
+export function useSyncTooltipFilterMode(
+	dashboardId: string | undefined,
+): [SyncTooltipFilterMode, (value: SyncTooltipFilterMode) => void] {
+	return useDashboardPreference(
+		dashboardId,
+		'syncTooltipFilterMode',
+		DEFAULT_SYNC_TOOLTIP_FILTER_MODE,
+	);
+}

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

@@ -17,6 +17,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 				decimalPrecision: props.decimalPrecision,
 				isStackedBarChart: props.isStackedBarChart,
 				syncedSeriesIndexes: props.syncedSeriesIndexes,
+				syncFilterMode: props.syncFilterMode,
 			}),
 		[
 			props.uPlotInstance,
@@ -26,6 +27,7 @@ export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
 			props.decimalPrecision,
 			props.isStackedBarChart,
 			props.syncedSeriesIndexes,
+			props.syncFilterMode,
 		],
 	);
 

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

@@ -18,6 +18,7 @@ export default function HistogramTooltip(
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
 				syncedSeriesIndexes: props.syncedSeriesIndexes,
+				syncFilterMode: props.syncFilterMode,
 			}),
 		[
 			props.uPlotInstance,
@@ -26,6 +27,7 @@ export default function HistogramTooltip(
 			props.yAxisUnit,
 			props.decimalPrecision,
 			props.syncedSeriesIndexes,
+			props.syncFilterMode,
 		],
 	);
 

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

@@ -18,6 +18,7 @@ export default function TimeSeriesTooltip(
 				yAxisUnit: props.yAxisUnit ?? '',
 				decimalPrecision: props.decimalPrecision,
 				syncedSeriesIndexes: props.syncedSeriesIndexes,
+				syncFilterMode: props.syncFilterMode,
 			}),
 		[
 			props.uPlotInstance,
@@ -26,6 +27,7 @@ export default function TimeSeriesTooltip(
 			props.yAxisUnit,
 			props.decimalPrecision,
 			props.syncedSeriesIndexes,
+			props.syncFilterMode,
 		],
 	);
 

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.module.scss

@@ -8,15 +8,15 @@
 	border: 1px solid var(--l2-border);
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 
 	&.pinned {
 		border-color: var(--ring);
 	}
-
-	.divider {
-		width: 100%;
-		height: 1px;
-		background-color: var(--l2-border);
-	}
+}
+
+.divider {
+	display: block;
+	width: 100%;
+	height: 1px;
+	background-color: var(--l2-border);
 }

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

@@ -2,19 +2,19 @@ import { useMemo } from 'react';
 import cx from 'classnames';
 
 import { TooltipProps } from '../types';
-import TooltipFooter from './components/TooltipFooter/TooltipFooter';
 import TooltipHeader from './components/TooltipHeader/TooltipHeader';
 import TooltipList from './components/TooltipList/TooltipList';
 
 import Styles from './Tooltip.module.scss';
 
 export default function Tooltip({
+	id,
 	uPlotInstance,
 	timezone,
 	content,
 	showTooltipHeader = true,
 	isPinned,
-	canPinTooltip,
+	renderTooltipFooter,
 	dismiss,
 }: TooltipProps): JSX.Element {
 	const tooltipContent = useMemo(() => content ?? [], [content]);
@@ -31,7 +31,9 @@ export default function Tooltip({
 
 	return (
 		<div
-			className={cx(Styles.container, isPinned && Styles.pinned)}
+			className={cx(Styles.container, {
+				[Styles.pinned]: isPinned,
+			})}
 			data-testid="uplot-tooltip-container"
 		>
 			{showHeader && (
@@ -46,9 +48,9 @@ export default function Tooltip({
 
 			{showDivider && <span className={Styles.divider} />}
 
-			{showList && <TooltipList content={tooltipContent} />}
+			{showList && <TooltipList id={id} content={tooltipContent} />}
 
-			{canPinTooltip && <TooltipFooter isPinned={isPinned} dismiss={dismiss} />}
+			{renderTooltipFooter && renderTooltipFooter({ isPinned, dismiss })}
 		</div>
 	);
 }

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

@@ -7,7 +7,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { render, RenderResult, screen } from 'tests/test-utils';
 import uPlot from 'uplot';
 
-import { TooltipContentItem } from '../../types';
+import { IRenderTooltipFooterArgs, TooltipContentItem } from '../../types';
 import Tooltip from '../Tooltip';
 
 type MockVirtuosoProps = {
@@ -83,6 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
+		id: 'tooltip-1',
 		uPlotInstance: createUPlotInstance(null),
 		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
 		content: [],
@@ -192,63 +193,88 @@ describe('Tooltip', () => {
 	});
 });
 
-describe('Tooltip footer hint', () => {
+describe('Tooltip renderTooltipFooter', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockUseIsDarkMode.mockReturnValue(false);
 	});
 
-	it('renders footer with "Press P to pin the tooltip" hint when not pinned', () => {
-		renderTooltip({ isPinned: false, canPinTooltip: true });
+	it('does not render footer content when renderTooltipFooter is not provided', () => {
+		renderTooltip();
 
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toBeInTheDocument();
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('P');
-		expect(footer).toHaveTextContent('to pin the tooltip');
+		expect(screen.queryByTestId('custom-tooltip-footer')).not.toBeInTheDocument();
 	});
 
-	it('renders footer with "Press P or Esc to unpin" hint when pinned', () => {
-		renderTooltip({ isPinned: true, canPinTooltip: true });
+	it('renders content returned by renderTooltipFooter', () => {
+		const renderTooltipFooter = jest.fn(
+			(): JSX.Element => <div data-testid="custom-tooltip-footer">Footer</div>,
+		);
 
-		const footer = screen.getByTestId('uplot-tooltip-footer');
-		expect(footer).toHaveTextContent('Press');
-		expect(footer).toHaveTextContent('P');
-		expect(footer).toHaveTextContent('Esc');
-		expect(footer).toHaveTextContent('to unpin');
+		renderTooltip({ renderTooltipFooter });
+
+		expect(screen.getByTestId('custom-tooltip-footer')).toBeInTheDocument();
 	});
 
-	it('does not render Unpin button when not pinned', () => {
-		renderTooltip({ isPinned: false, canPinTooltip: true });
+	it('calls renderTooltipFooter with isPinned=false when tooltip is not pinned', () => {
+		const renderTooltipFooter = jest.fn(() => null);
 
-		expect(screen.queryByTestId('uplot-tooltip-unpin')).not.toBeInTheDocument();
+		renderTooltip({ renderTooltipFooter, isPinned: false });
+
+		expect(renderTooltipFooter).toHaveBeenCalledWith(
+			expect.objectContaining({ isPinned: false }),
+		);
 	});
 
-	it('renders Unpin button when pinned', () => {
-		renderTooltip({ isPinned: true, canPinTooltip: true });
+	it('calls renderTooltipFooter with isPinned=true when tooltip is pinned', () => {
+		const renderTooltipFooter = jest.fn(() => null);
 
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		expect(unpinBtn).toBeInTheDocument();
-		expect(unpinBtn).toHaveAttribute('aria-label', 'Unpin tooltip');
+		renderTooltip({ renderTooltipFooter, isPinned: true });
+
+		expect(renderTooltipFooter).toHaveBeenCalledWith(
+			expect.objectContaining({ isPinned: true }),
+		);
 	});
 
-	it('calls dismiss when Unpin button is clicked', async () => {
+	it('calls renderTooltipFooter with the dismiss callback', () => {
 		const dismiss = jest.fn();
-		renderTooltip({ isPinned: true, canPinTooltip: true, dismiss });
+		const renderTooltipFooter = jest.fn(() => null);
+
+		renderTooltip({ renderTooltipFooter, dismiss });
+
+		expect(renderTooltipFooter).toHaveBeenCalledWith(
+			expect.objectContaining({ dismiss }),
+		);
+	});
+
+	it('footer content reflects pinned state via renderTooltipFooter args', () => {
+		const renderTooltipFooter = jest.fn(
+			({ isPinned }: IRenderTooltipFooterArgs): JSX.Element => (
+				<div data-testid="footer-state">{isPinned ? 'Pinned' : 'Not pinned'}</div>
+			),
+		);
+
+		renderTooltip({ renderTooltipFooter, isPinned: true });
+
+		expect(screen.getByTestId('footer-state')).toHaveTextContent('Pinned');
+	});
+
+	it('dismiss is callable when invoked from renderTooltipFooter', async () => {
+		const dismiss = jest.fn();
+		const renderTooltipFooter = jest.fn(
+			({ dismiss: onDismiss }: IRenderTooltipFooterArgs): JSX.Element => (
+				<button data-testid="dismiss-btn" onClick={onDismiss}>
+					Dismiss
+				</button>
+			),
+		);
+
+		renderTooltip({ renderTooltipFooter, isPinned: true, dismiss });
 
 		const user = userEvent.setup();
-		const unpinBtn = screen.getByTestId('uplot-tooltip-unpin');
-		await user.click(unpinBtn);
+		await user.click(screen.getByTestId('dismiss-btn'));
 
 		expect(dismiss).toHaveBeenCalledTimes(1);
 	});
-
-	it('footer has role="status" for screen reader announcements', () => {
-		renderTooltip({ canPinTooltip: true });
-
-		const footer = screen.getByRole('status');
-		expect(footer).toBeInTheDocument();
-	});
 });
 
 describe('Tooltip header status pill', () => {

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.module.scss

@@ -11,11 +11,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--spacing-2);
-	margin-bottom: var(--spacing-2);
 }
 
 .pinnedItem {
-	padding: var(--spacing-4) var(--spacing-4) 0 var(--spacing-4);
+	padding: var(--spacing-4);
 }
 
 .status {

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipList/TooltipList.module.scss

@@ -1,9 +1,13 @@
+.container {
+	padding-bottom: var(--spacing-6);
+}
+
 .list {
 	width: 100%;
 	:global(div[data-viewport-type='element']) {
 		left: 0;
 		box-sizing: border-box;
-		padding: 0px var(--spacing-2) 0 var(--spacing-4);
+		padding: var(--spacing-4) var(--spacing-2) var(--spacing-4) var(--spacing-4);
 
 		[data-test-id='virtuoso-item-list'] > * + * {
 			margin-top: var(--spacing-2);

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

@@ -9,17 +9,18 @@ import logEvent from 'api/common/logEvent';
 import { Events } from 'constants/events';
 
 import Styles from './TooltipList.module.scss';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 // Fallback per-item height before Virtuoso reports the real total.
 const TOOLTIP_ITEM_HEIGHT = 38;
 const LIST_MAX_HEIGHT = 300;
 
 interface TooltipListProps {
+	id: string;
 	content: TooltipContentItem[];
 }
 
 export default function TooltipList({
+	id,
 	content,
 }: TooltipListProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
@@ -41,23 +42,25 @@ export default function TooltipList({
 		if (!isScrollEventTriggered.current) {
 			// TODO: remove event in July 2026
 			logEvent(Events.TOOLTIP_CONTENT_SCROLLED, {
-				path: getAbsoluteUrl(window.location.pathname),
+				id,
 			});
 			isScrollEventTriggered.current = true;
 		}
 	}, []);
 
 	return (
-		<Virtuoso
-			className={cx(Styles.list, !isDarkMode && Styles.listLightMode)}
-			data-testid="uplot-tooltip-list"
-			data={content}
-			onScroll={handleScroll}
-			style={{ height }}
-			totalListHeightChanged={setTotalListHeight}
-			itemContent={(_, item): JSX.Element => (
-				<TooltipItem item={item} isItemActive={false} />
-			)}
-		/>
+		<div className={Styles.container}>
+			<Virtuoso
+				className={cx(Styles.list, !isDarkMode && Styles.listLightMode)}
+				data-testid="uplot-tooltip-list"
+				data={content}
+				onScroll={handleScroll}
+				style={{ height }}
+				totalListHeightChanged={setTotalListHeight}
+				itemContent={(_, item): JSX.Element => (
+					<TooltipItem item={item} isItemActive={item.isHighlighted === true} />
+				)}
+			/>
+		</div>
 	);
 }

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

@@ -2,6 +2,7 @@ import { PrecisionOption } from 'components/Graph/types';
 import { getToolTipValue } from 'components/Graph/yAxisConfig';
 import uPlot, { AlignedData, Series } from 'uplot';
 
+import { SyncTooltipFilterMode } from '../../plugins/TooltipPlugin/types';
 import { TooltipContentItem } from '../types';
 
 export const FALLBACK_SERIES_COLOR = '#000000';
@@ -63,6 +64,7 @@ export function buildTooltipContent({
 	decimalPrecision,
 	isStackedBarChart,
 	syncedSeriesIndexes,
+	syncFilterMode,
 }: {
 	data: AlignedData;
 	series: Series[];
@@ -73,10 +75,16 @@ export function buildTooltipContent({
 	decimalPrecision?: PrecisionOption;
 	isStackedBarChart?: boolean;
 	syncedSeriesIndexes?: number[] | null;
+	syncFilterMode?: SyncTooltipFilterMode;
 }): TooltipContentItem[] {
 	const items: TooltipContentItem[] = [];
-	const allowedIndexes =
+	const matchedIndexes =
 		syncedSeriesIndexes != null ? new Set(syncedSeriesIndexes) : null;
+	const filterMode = syncFilterMode ?? SyncTooltipFilterMode.Filtered;
+	// In Filtered mode the matched indexes act as a whitelist; in All mode every
+	// series renders and matched indexes only drive row highlighting.
+	const allowedIndexes =
+		filterMode === SyncTooltipFilterMode.All ? null : matchedIndexes;
 
 	for (let seriesIndex = 1; seriesIndex < series.length; seriesIndex += 1) {
 		const seriesItem = series[seriesIndex];
@@ -89,6 +97,7 @@ export function buildTooltipContent({
 
 		const dataIndex = dataIndexes[seriesIndex];
 		const isSync = allowedIndexes != null;
+		const isHighlighted = matchedIndexes?.has(seriesIndex) ?? false;
 
 		if (dataIndex === null) {
 			if (isSync) {
@@ -98,6 +107,7 @@ export function buildTooltipContent({
 					tooltipValue: 'No Data',
 					color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
 					isActive: false,
+					isHighlighted,
 				});
 			}
 			continue;
@@ -118,6 +128,7 @@ export function buildTooltipContent({
 				tooltipValue: getToolTipValue(baseValue, yAxisUnit, decimalPrecision),
 				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
 				isActive: seriesIndex === activeSeriesIndex,
+				isHighlighted,
 			});
 		} else if (isSync) {
 			items.push({
@@ -126,6 +137,7 @@ export function buildTooltipContent({
 				tooltipValue: 'No Data',
 				color: resolveSeriesColor(seriesItem.stroke, uPlotInstance, seriesIndex),
 				isActive: false,
+				isHighlighted,
 			});
 		}
 	}

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 { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
  * Props for the Plot component
@@ -58,17 +59,31 @@ 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 */
+	/** In Tooltip sync mode, identifies receiver series that match the source's
+	 * focused series on the shared groupBy keys.
+	 * Filtered mode: limits which series are rendered (null = no filter,
+	 *   [] = no matches/tooltip hidden upstream, [...] = allowed indexes).
+	 * All mode: same indexes are interpreted as a highlight set; non-matching
+	 *   series still render. */
 	syncedSeriesIndexes?: number[] | null;
+	/** Receiver-side filter mode for the synced tooltip. Defaults to Filtered. */
+	syncFilterMode?: SyncTooltipFilterMode;
+}
+
+export interface IRenderTooltipFooterArgs {
+	pinKey?: string;
+	isPinned: boolean;
+	dismiss: () => void;
 }
 
 export interface BaseTooltipProps {
+	id: string;
 	showTooltipHeader?: boolean;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
+	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => ReactNode;
 	timezone?: Timezone;
 }
 
@@ -106,4 +121,9 @@ export interface TooltipContentItem {
 	tooltipValue: string;
 	color: string;
 	isActive: boolean;
+	/** Synced receiver series whose metric matches the source's focused series
+	 * on the shared groupBy keys, in 'all' filter mode. List rendering uses this
+	 * to apply the active highlight to matching rows while non-matching rows
+	 * stay dimmed. */
+	isHighlighted?: boolean;
 }

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

@@ -18,6 +18,7 @@ import {
 import {
 	DashboardCursorSync,
 	DEFAULT_PIN_TOOLTIP_KEY,
+	SyncTooltipFilterMode,
 	TooltipControllerContext,
 	TooltipControllerState,
 	TooltipLayoutInfo,
@@ -32,7 +33,6 @@ import {
 import { Events } from 'constants/events';
 
 import Styles from './TooltipPlugin.module.scss';
-import { getAbsoluteUrl } from 'utils/basePath';
 
 // Delay before hiding an unpinned tooltip when the cursor briefly leaves
 // the plot – this avoids flicker when moving between nearby points.
@@ -199,10 +199,14 @@ 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.
+			const filterMode =
+				syncMetadata?.filterMode ?? SyncTooltipFilterMode.Filtered;
+			// In Filtered Tooltip sync mode, suppress the receiver tooltip entirely
+			// when no receiver series match the source panel's focused series. In
+			// All mode the tooltip still renders with every series visible.
 			if (
 				syncTooltipWithDashboard &&
+				filterMode === SyncTooltipFilterMode.Filtered &&
 				controller.cursorDrivenBySync &&
 				Array.isArray(controller.syncedSeriesIndexes) &&
 				controller.syncedSeriesIndexes.length === 0
@@ -217,6 +221,7 @@ export default function TooltipPlugin({
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
 				syncedSeriesIndexes: controller.syncedSeriesIndexes,
+				syncFilterMode: filterMode,
 			});
 		}
 
@@ -304,7 +309,7 @@ export default function TooltipPlugin({
 			if (event.key === 'Escape') {
 				if (controller.pinned) {
 					logEvent(Events.TOOLTIP_UNPINNED, {
-						path: getAbsoluteUrl(window.location.pathname),
+						id: config.getId(),
 					});
 					dismissTooltip();
 				}
@@ -318,7 +323,7 @@ export default function TooltipPlugin({
 			// Toggle off: P pressed while already pinned.
 			if (controller.pinned) {
 				logEvent(Events.TOOLTIP_UNPINNED, {
-					path: getAbsoluteUrl(window.location.pathname),
+					id: config.getId(),
 				});
 				dismissTooltip();
 				return;
@@ -352,7 +357,7 @@ export default function TooltipPlugin({
 			controller.clickData = buildClickData(syntheticEvent, plot);
 			controller.pinned = true;
 			logEvent(Events.TOOLTIP_PINNED, {
-				path: getAbsoluteUrl(window.location.pathname),
+				id: config.getId(),
 			});
 			scheduleRender(true);
 		};

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

@@ -2,10 +2,33 @@ import uPlot from 'uplot';
 
 import type { ExtendedSeries } from '../../config/types';
 import { syncCursorRegistry } from './syncCursorRegistry';
-import type { TooltipControllerState, TooltipSyncMetadata } from './types';
+import {
+	SyncTooltipFilterMode,
+	type TooltipControllerState,
+	type TooltipSyncMetadata,
+} from './types';
 
 /**
- * Returns the dimension keys present in both groupBy arrays.
+ * Flattens per-query groupBys into a deduped set of dimension keys.
+ * A panel's effective groupBy is the union across all of its queries.
+ */
+function collectGroupByKeys(
+	groupByPerQuery: TooltipSyncMetadata['groupByPerQuery'],
+): Set<string> {
+	const keys = new Set<string>();
+	if (!groupByPerQuery) {
+		return keys;
+	}
+	for (const groupBy of Object.values(groupByPerQuery)) {
+		for (const dim of groupBy) {
+			keys.add(dim.key);
+		}
+	}
+	return keys;
+}
+
+/**
+ * Returns the dimension keys present in both panels' groupBys.
  * An empty result means no overlap — series highlighting should not run.
  *
  *   exact    [A, B] vs [A, B]  → [A, B]   one match
@@ -14,24 +37,28 @@ import type { TooltipControllerState, TooltipSyncMetadata } from './types';
  *   partial  [A, B] vs [B, C]  → [B]
  */
 function getCommonGroupByKeys(
-	a: TooltipSyncMetadata['groupBy'],
-	b: TooltipSyncMetadata['groupBy'],
+	a: TooltipSyncMetadata['groupByPerQuery'],
+	b: TooltipSyncMetadata['groupByPerQuery'],
 ): string[] {
-	if (
-		!Array.isArray(a) ||
-		a.length === 0 ||
-		!Array.isArray(b) ||
-		b.length === 0
-	) {
+	const aKeys = collectGroupByKeys(a);
+	const bKeys = collectGroupByKeys(b);
+	if (aKeys.size === 0 || bKeys.size === 0) {
 		return [];
 	}
-	const bKeys = new Set(b.map((g) => g.key));
-	return a.filter((g) => bKeys.has(g.key)).map((g) => g.key);
+	const common: string[] = [];
+	aKeys.forEach((key) => {
+		if (bKeys.has(key)) {
+			common.push(key);
+		}
+	});
+	return common;
 }
 
 /**
- * Returns the 1-based indexes of every series whose metric matches
- * sourceMetric on all commonKeys.
+ * Returns the 1-based indexes of every visible series whose metric matches
+ * sourceMetric on all commonKeys. Hidden series (toggled off in the legend)
+ * are excluded so the synced tooltip is suppressed when no visible series
+ * would match.
  */
 function findMatchingSeriesIndexes(
 	series: uPlot.Series[],
@@ -39,7 +66,7 @@ function findMatchingSeriesIndexes(
 	commonKeys: string[],
 ): number[] {
 	return series.reduce<number[]>((acc, s, i) => {
-		if (i === 0) {
+		if (i === 0 || s.show === false) {
 			return acc;
 		}
 		const metric = (s as ExtendedSeries).metric;
@@ -76,10 +103,15 @@ function applySourceSync({
 }
 
 /**
- * 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)
+ * Computes receiver-side series filtering / highlighting for Tooltip sync.
+ *
+ * Returns the indexes that the tooltip render path should treat per
+ * `syncMetadata.filterMode`:
+ *   - Filtered (default): null = no filter, [] = no matches (suppress tooltip),
+ *      number[] = allowed indexes (show only these).
+ *   - All: null = no highlight (show all), number[] = highlight set (show all,
+ *      emphasize matching rows). Never returns [] in this mode so the synced
+ *      tooltip is not suppressed when matches are missing.
  */
 function applyReceiverSync({
 	uPlotInstance,
@@ -99,8 +131,13 @@ function applyReceiverSync({
 	yCrosshairEl.style.display =
 		sourceMetadata?.yAxisUnit === syncMetadata?.yAxisUnit ? '' : 'none';
 
+	const filterMode = syncMetadata?.filterMode ?? SyncTooltipFilterMode.Filtered;
+	const noMatchResult: number[] | null =
+		filterMode === SyncTooltipFilterMode.All ? null : [];
+
 	if (commonKeys.length === 0) {
-		return null;
+		uPlotInstance.setSeries(null, { focus: false });
+		return [];
 	}
 
 	if ((uPlotInstance.cursor.left ?? -1) < 0) {
@@ -111,7 +148,7 @@ function applyReceiverSync({
 	const sourceSeriesMetric = syncCursorRegistry.getActiveSeriesMetric(syncKey);
 	if (sourceSeriesMetric == null) {
 		uPlotInstance.setSeries(null, { focus: false });
-		return [];
+		return noMatchResult;
 	}
 
 	const matchingIdxs = findMatchingSeriesIndexes(
@@ -122,7 +159,7 @@ function applyReceiverSync({
 
 	if (matchingIdxs.length === 0) {
 		uPlotInstance.setSeries(null, { focus: false });
-		return [];
+		return noMatchResult;
 	}
 
 	uPlotInstance.setSeries(matchingIdxs[0], { focus: true });
@@ -140,7 +177,7 @@ export function createSyncDisplayHook(
 
 	// 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 lastSourceGroupBy: TooltipSyncMetadata['groupByPerQuery'];
 	let cachedCommonKeys: string[] = [];
 
 	return (u: uPlot): void => {
@@ -165,11 +202,11 @@ export function createSyncDisplayHook(
 		// inside applyReceiverSync.
 		const sourceMetadata = syncCursorRegistry.getMetadata(syncKey);
 
-		if (sourceMetadata?.groupBy !== lastSourceGroupBy) {
-			lastSourceGroupBy = sourceMetadata?.groupBy;
+		if (sourceMetadata?.groupByPerQuery !== lastSourceGroupBy) {
+			lastSourceGroupBy = sourceMetadata?.groupByPerQuery;
 			cachedCommonKeys = getCommonGroupByKeys(
-				sourceMetadata?.groupBy,
-				syncMetadata?.groupBy,
+				sourceMetadata?.groupByPerQuery,
+				syncMetadata?.groupByPerQuery,
 			);
 		}
 

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

@@ -16,9 +16,18 @@ export const TOOLTIP_OFFSET = 10;
 export const DEFAULT_PIN_TOOLTIP_KEY = 'p';
 
 export enum DashboardCursorSync {
-	Crosshair,
-	None,
-	Tooltip,
+	Crosshair = 'crosshair',
+	None = 'none',
+	Tooltip = 'tooltip',
+}
+
+/**
+ * Controls whether a synced tooltip filters series by groupBy intersection
+ * or shows every series with the matching ones highlighted.
+ */
+export enum SyncTooltipFilterMode {
+	Filtered = 'filtered',
+	All = 'all',
 }
 
 export interface TooltipViewState {
@@ -40,7 +49,8 @@ export interface TooltipLayoutInfo {
 
 export interface TooltipSyncMetadata {
 	yAxisUnit?: string;
-	groupBy?: BaseAutocompleteData[];
+	groupByPerQuery?: Record<string, BaseAutocompleteData[]>;
+	filterMode?: SyncTooltipFilterMode;
 }
 
 export interface TooltipPluginProps {

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

@@ -0,0 +1,152 @@
+import type { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import type uPlot from 'uplot';
+
+import type { ExtendedSeries } from '../../config/types';
+import { syncCursorRegistry } from '../TooltipPlugin/syncCursorRegistry';
+import { createSyncDisplayHook } from '../TooltipPlugin/syncDisplayHook';
+import type {
+	TooltipControllerState,
+	TooltipSyncMetadata,
+} from '../TooltipPlugin/types';
+
+const SYNC_KEY = 'test-sync';
+
+function makeController(): TooltipControllerState {
+	return {
+		plot: null,
+		hoverActive: false,
+		isAnySeriesActive: false,
+		pinned: false,
+		clickData: null,
+		style: {},
+		horizontalOffset: 0,
+		verticalOffset: 0,
+		seriesIndexes: [],
+		focusedSeriesIndex: null,
+		syncedSeriesIndexes: null,
+		cursorDrivenBySync: false,
+		plotWithinViewport: true,
+		windowWidth: 1024,
+		windowHeight: 768,
+		pendingPinnedUpdate: false,
+	};
+}
+
+function makeFakePlot(
+	series: ExtendedSeries[],
+	cursorEvent: Record<string, unknown> | null = null,
+): uPlot {
+	const root = document.createElement('div');
+	const yCrosshair = document.createElement('div');
+	yCrosshair.className = 'u-cursor-y';
+	root.appendChild(yCrosshair);
+
+	return {
+		root,
+		series,
+		cursor: { event: cursorEvent, left: 50 },
+		setSeries: jest.fn(),
+	} as unknown as uPlot;
+}
+
+const SERVICE_NAME_KEY: BaseAutocompleteData = {
+	key: 'service.name',
+	type: 'tag',
+};
+
+const groupByService: TooltipSyncMetadata = {
+	groupByPerQuery: { queryName: [SERVICE_NAME_KEY] },
+};
+
+function seedSourcePanel(activeMetric: Record<string, string>): void {
+	syncCursorRegistry.setMetadata(SYNC_KEY, groupByService);
+	syncCursorRegistry.setActiveSeriesMetric(SYNC_KEY, activeMetric);
+}
+
+function makeReceiverSeries(
+	entries: { name: string; show?: boolean }[],
+): ExtendedSeries[] {
+	return [
+		{} as ExtendedSeries,
+		...entries.map(
+			(e) =>
+				({
+					show: e.show ?? true,
+					metric: { 'service.name': e.name },
+				}) as unknown as ExtendedSeries,
+		),
+	];
+}
+
+describe('createSyncDisplayHook (receiver-side filtering)', () => {
+	beforeEach(() => {
+		syncCursorRegistry.setMetadata(SYNC_KEY, undefined);
+		syncCursorRegistry.setActiveSeriesMetric(SYNC_KEY, null);
+	});
+
+	it('returns indexes of visible matching series only', () => {
+		seedSourcePanel({ 'service.name': 'flagd' });
+
+		const series = makeReceiverSeries([
+			{ name: 'flagd', show: true },
+			{ name: 'frontend', show: true },
+			{ name: 'flagd', show: true },
+		]);
+		const plot = makeFakePlot(series, null);
+		const controller = makeController();
+
+		createSyncDisplayHook(SYNC_KEY, groupByService, controller)(plot);
+
+		expect(controller.syncedSeriesIndexes).toStrictEqual([1, 3]);
+	});
+
+	it('treats all matching series being hidden as no match → empty array', () => {
+		seedSourcePanel({ 'service.name': 'frontendproxy' });
+
+		const series = makeReceiverSeries([
+			{ name: 'flagd', show: true },
+			{ name: 'frontendproxy', show: false },
+		]);
+		const plot = makeFakePlot(series, null);
+		const controller = makeController();
+
+		createSyncDisplayHook(SYNC_KEY, groupByService, controller)(plot);
+
+		expect(controller.syncedSeriesIndexes).toStrictEqual([]);
+		expect(plot.setSeries).toHaveBeenCalledWith(null, { focus: false });
+	});
+
+	it('excludes hidden series and keeps the visible matches', () => {
+		seedSourcePanel({ 'service.name': 'flagd' });
+
+		const series = makeReceiverSeries([
+			{ name: 'flagd', show: false },
+			{ name: 'frontend', show: true },
+			{ name: 'flagd', show: true },
+		]);
+		const plot = makeFakePlot(series, null);
+		const controller = makeController();
+
+		createSyncDisplayHook(SYNC_KEY, groupByService, controller)(plot);
+
+		expect(controller.syncedSeriesIndexes).toStrictEqual([3]);
+		// Focuses the first visible match, not the hidden one at index 1.
+		expect(plot.setSeries).toHaveBeenCalledWith(3, { focus: true });
+	});
+
+	it('returns null (no filtering) when the hook runs on the source panel', () => {
+		const series = makeReceiverSeries([{ name: 'flagd', show: true }]);
+		// cursor.event != null marks this invocation as the source panel.
+		const plot = makeFakePlot(series, { type: 'mousemove' });
+		const controller = makeController();
+		controller.focusedSeriesIndex = 1;
+		(series[1] as ExtendedSeries).metric = { 'service.name': 'flagd' };
+
+		createSyncDisplayHook(SYNC_KEY, groupByService, controller)(plot);
+
+		expect(controller.syncedSeriesIndexes).toBeNull();
+		expect(syncCursorRegistry.getActiveSeriesMetric(SYNC_KEY)).toStrictEqual({
+			'service.name': 'flagd',
+		});
+	});
+});