feat: added changes for synced tooltip modes

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/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,17 +1,22 @@
 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';
-
 const { Option } = Select;
 
 function GeneralDashboardSettings(): JSX.Element {
@@ -19,6 +24,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 +112,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 +124,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 +154,88 @@ 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 => {
+								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+							}}
+						>
+							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+								Filtered
+							</Radio.Button>
+							<Radio.Button value={SyncTooltipFilterMode.All}>All</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 +249,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/ChartWrapper/ChartWrapper.tsx

@@ -29,6 +29,7 @@ export default function ChartWrapper({
 	onClick,
 	syncMode,
 	syncKey,
+	syncFilterMode,
 	onDestroy = noop,
 	children,
 	layoutChildren,
@@ -70,8 +71,9 @@ export default function ChartWrapper({
 		() => ({
 			yAxisUnit,
 			groupBy,
+			filterMode: syncFilterMode,
 		}),
-		[yAxisUnit, groupBy],
+		[yAxisUnit, groupBy, syncFilterMode],
 	);
 
 	return (

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

@@ -4,6 +4,7 @@ import { 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';
@@ -30,6 +31,7 @@ interface UPlotBasedChartProps {
 	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
+	syncFilterMode?: SyncTooltipFilterMode;
 	plotRef?: (plot: uPlot | null) => void;
 	onDestroy?: (plot: uPlot) => void;
 	children?: React.ReactNode;

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

@@ -1,9 +1,12 @@
 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 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';
@@ -34,6 +37,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 +82,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(() => {
@@ -122,6 +134,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<BarChart
+					key={`${syncMode}-${syncFilterMode}`}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -138,6 +151,8 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}
+					syncMode={syncMode}
+					syncFilterMode={syncFilterMode}
 				>
 					<ContextMenu
 						coordinates={coordinates}

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

@@ -3,10 +3,13 @@ import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSe
 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 { 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';
@@ -33,6 +36,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 +88,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(() => {
@@ -113,6 +125,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		<div className="panel-container" ref={graphRef}>
 			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
 				<TimeSeries
+					key={`${syncMode}-${syncFilterMode}`}
 					config={config}
 					legendConfig={{
 						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
@@ -125,6 +138,8 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					groupBy={groupBy}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
+					syncMode={syncMode}
+					syncFilterMode={syncFilterMode}
 					layoutChildren={layoutChildren}
 				>
 					<ContextMenu

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 the Crosshair default 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.Crosshair);
+			});
+
+			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.None);
+				});
+
+				expect(useDashboardPreferencesStore.getState().preferences).toStrictEqual(
+					{},
+				);
+				expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+				expect(result.current[0]).toBe(DashboardCursorSync.Crosshair);
+			});
+		},
+	);
+});

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

@@ -0,0 +1,129 @@
+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 },
+		});
+	});
+});

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 DEFAULT_CURSOR_SYNC_MODE = DashboardCursorSync.Crosshair;
+
+export function useDashboardCursorSyncMode(
+	dashboardId: string | undefined,
+	panelMode?: PanelMode,
+): [DashboardCursorSync, (value: DashboardCursorSync) => void] {
+	const [value, setValue] = useDashboardPreference(
+		dashboardId,
+		'cursorSyncMode',
+		DEFAULT_CURSOR_SYNC_MODE,
+	);
+
+	// Chart panels in edit / standalone modes don't participate in cross-panel
+	// sync, so return 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 [DEFAULT_CURSOR_SYNC_MODE, (): void => {}];
+	}
+
+	return [value, setValue];
+}

frontend/src/hooks/dashboard/useDashboardPreference.ts

@@ -0,0 +1,78 @@
+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;
+}
+
+export const useDashboardPreferencesStore = create<DashboardPreferencesState>()(
+	persist(
+		(set) => ({
+			preferences: {},
+			setPreference: (dashboardId, key, value): void => {
+				set((state) => ({
+					preferences: {
+						...state.preferences,
+						[dashboardId]: {
+							...state.preferences[dashboardId],
+							[key]: value,
+						},
+					},
+				}));
+			},
+		}),
+		{ 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/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/components/TooltipList/TooltipList.tsx

@@ -56,7 +56,7 @@ export default function TooltipList({
 			style={{ height }}
 			totalListHeightChanged={setTotalListHeight}
 			itemContent={(_, item): JSX.Element => (
-				<TooltipItem item={item} isItemActive={false} />
+				<TooltipItem item={item} isItemActive={item.isHighlighted === true} />
 			)}
 		/>
 	);

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,9 +59,15 @@ 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 BaseTooltipProps {
@@ -106,4 +113,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,
@@ -199,10 +200,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 +222,7 @@ export default function TooltipPlugin({
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
 				syncedSeriesIndexes: controller.syncedSeriesIndexes,
+				syncFilterMode: filterMode,
 			});
 		}
 

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

@@ -2,7 +2,11 @@ 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.
@@ -30,8 +34,11 @@ function getCommonGroupByKeys(
 }
 
 /**
- * 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 (show === false) are
+ * excluded — a hidden match contributes nothing to the receiver tooltip,
+ * so treating it as "no match" lets the empty-array path suppress the
+ * tooltip entirely instead of rendering an empty shell.
  */
 function findMatchingSeriesIndexes(
 	series: uPlot.Series[],
@@ -39,7 +46,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 +83,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,6 +111,10 @@ 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;
 	}
@@ -111,7 +127,7 @@ function applyReceiverSync({
 	const sourceSeriesMetric = syncCursorRegistry.getActiveSeriesMetric(syncKey);
 	if (sourceSeriesMetric == null) {
 		uPlotInstance.setSeries(null, { focus: false });
-		return [];
+		return noMatchResult;
 	}
 
 	const matchingIdxs = findMatchingSeriesIndexes(
@@ -122,7 +138,7 @@ function applyReceiverSync({
 
 	if (matchingIdxs.length === 0) {
 		uPlotInstance.setSeries(null, { focus: false });
-		return [];
+		return noMatchResult;
 	}
 
 	uPlotInstance.setSeries(matchingIdxs[0], { focus: true });

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 {
@@ -41,6 +50,7 @@ export interface TooltipLayoutInfo {
 export interface TooltipSyncMetadata {
 	yAxisUnit?: string;
 	groupBy?: 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 = {
+	groupBy: [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',
+		});
+	});
+});

pkg/types/dashboardtypes/dashboard_v2.go

@@ -0,0 +1,262 @@
+package dashboardtypes
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"slices"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/go-playground/validator/v10"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
+	"github.com/perses/perses/pkg/model/api/v1/dashboard"
+)
+
+// StorableDashboardDataV2 wraps v1.DashboardSpec (Perses) with additional SigNoz-specific fields.
+//
+// We embed DashboardSpec (not v1.Dashboard) to avoid carrying Perses's Metadata
+// (Name, Project, CreatedAt, UpdatedAt, Tags, Version) and Kind field. SigNoz
+// manages identity (ID), timestamps (TimeAuditable), and multi-tenancy (OrgID)
+// separately on StorableDashboardV2/DashboardV2.
+//
+// The following v1 request fields map to locations inside v1.DashboardSpec:
+//   - title       → Display.Name          (common.Display)
+//   - description → Display.Description   (common.Display)
+//
+// Fields that have no Perses equivalent will be added in this wrapper (like image, uploadGrafana, etc.)
+type StorableDashboardDataV2 = v1.DashboardSpec
+
+// UnmarshalAndValidateDashboardV2JSON unmarshals the JSON into a StorableDashboardDataV2
+// (= PostableDashboardV2 = UpdatableDashboardV2) and validates plugin kinds and specs.
+func UnmarshalAndValidateDashboardV2JSON(data []byte) (*StorableDashboardDataV2, error) {
+	var d StorableDashboardDataV2
+	// Note: DashboardSpec has a custom UnmarshalJSON which prevents
+	// DisallowUnknownFields from working at the top level. Unknown
+	// fields in plugin specs are still rejected by validateAndNormalizePluginSpec.
+	if err := json.Unmarshal(data, &d); err != nil {
+		return nil, err
+	}
+	if err := validateDashboardV2(d); err != nil {
+		return nil, err
+	}
+	return &d, nil
+}
+
+// Plugin kind → spec type factory. Each value is a pointer to the zero value of the
+// expected spec struct. validatePluginSpec marshals plugin.Spec back to JSON and
+// unmarshals into the typed struct to catch field-level errors.
+var (
+	panelPluginSpecs = map[PanelPluginKind]func() any{
+		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
+		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
+		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
+		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
+		PanelKindTable:      func() any { return new(TablePanelSpec) },
+		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
+		PanelKindList:       func() any { return new(ListPanelSpec) },
+	}
+	queryPluginSpecs = map[QueryPluginKind]func() any{
+		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
+		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
+		QueryKindFormula:       func() any { return new(FormulaSpec) },
+		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
+		QueryKindClickHouseSQL: func() any { return new(ClickHouseSQLQuerySpec) },
+		QueryKindTraceOperator: func() any { return new(TraceOperatorSpec) },
+	}
+	variablePluginSpecs = map[VariablePluginKind]func() any{
+		VariableKindDynamic: func() any { return new(DynamicVariableSpec) },
+		VariableKindQuery:   func() any { return new(QueryVariableSpec) },
+		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
+		VariableKindTextbox: func() any { return new(TextboxVariableSpec) },
+	}
+	datasourcePluginSpecs = map[DatasourcePluginKind]func() any{
+		DatasourceKindSigNoz: func() any { return new(struct{}) },
+	}
+
+	// allowedQueryKinds maps each panel plugin kind to the query plugin
+	// kinds it supports. Composite sub-query types are mapped to these
+	// same kind strings via compositeSubQueryTypeToPluginKind.
+	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
+		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindList:       {QueryKindBuilder},
+	}
+
+	// compositeSubQueryTypeToPluginKind maps CompositeQuery sub-query type
+	// strings to the equivalent top-level query plugin kind for validation.
+	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
+		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeFormula:       QueryKindFormula,
+		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
+		qb.QueryTypePromQL:        QueryKindPromQL,
+		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+	}
+)
+
+func validateDashboardV2(d StorableDashboardDataV2) error {
+	for name, ds := range d.Datasources {
+		if err := validateDatasourcePlugin(&ds.Plugin, fmt.Sprintf("spec.datasources.%s.plugin", name)); err != nil {
+			return err
+		}
+	}
+
+	for i, v := range d.Variables {
+		if err := validateVariablePlugin(v, fmt.Sprintf("spec.variables[%d]", i)); err != nil {
+			return err
+		}
+	}
+
+	for key, panel := range d.Panels {
+		if panel == nil {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
+		}
+		path := fmt.Sprintf("spec.panels.%s", key)
+		if err := validatePanelPlugin(&panel.Spec.Plugin, path+".spec.plugin"); err != nil {
+			return err
+		}
+		panelKind := PanelPluginKind(panel.Spec.Plugin.Kind)
+		allowed := allowedQueryKinds[panelKind]
+		for qi := range panel.Spec.Queries {
+			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
+			if err := validateQueryPlugin(&panel.Spec.Queries[qi].Spec.Plugin, queryPath); err != nil {
+				return err
+			}
+			if err := validateQueryAllowedForPanel(panel.Spec.Queries[qi].Spec.Plugin, allowed, panelKind, queryPath); err != nil {
+				return err
+			}
+		}
+	}
+
+	return nil
+}
+
+func validateDatasourcePlugin(plugin *common.Plugin, path string) error {
+	kind := DatasourcePluginKind(plugin.Kind)
+	factory, ok := datasourcePluginSpecs[kind]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+			"%s: unknown datasource plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
+	}
+	return validateAndNormalizePluginSpec(plugin, factory, path)
+}
+
+func validateVariablePlugin(v dashboard.Variable, path string) error {
+	switch spec := v.Spec.(type) {
+	case *dashboard.ListVariableSpec:
+		pluginPath := path + ".spec.plugin"
+		kind := VariablePluginKind(spec.Plugin.Kind)
+		factory, ok := variablePluginSpecs[kind]
+		if !ok {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+				"%s: unknown variable plugin kind %q; allowed values: %s", pluginPath, kind, formatEnum(kind.Enum()))
+		}
+		return validateAndNormalizePluginSpec(&spec.Plugin, factory, pluginPath)
+	case *dashboard.TextVariableSpec:
+		// TextVariables have no plugin, nothing to validate.
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: unsupported variable kind %q", path, v.Kind)
+	}
+}
+
+func validatePanelPlugin(plugin *common.Plugin, path string) error {
+	kind := PanelPluginKind(plugin.Kind)
+	factory, ok := panelPluginSpecs[kind]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+			"%s: unknown panel plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
+	}
+	return validateAndNormalizePluginSpec(plugin, factory, path)
+}
+
+func validateQueryPlugin(plugin *common.Plugin, path string) error {
+	kind := QueryPluginKind(plugin.Kind)
+	factory, ok := queryPluginSpecs[kind]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+			"%s: unknown query plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
+	}
+	return validateAndNormalizePluginSpec(plugin, factory, path)
+}
+
+func formatEnum(values []any) string {
+	parts := make([]string, len(values))
+	for i, v := range values {
+		parts[i] = fmt.Sprintf("`%v`", v)
+	}
+	return strings.Join(parts, ", ")
+}
+
+// validateAndNormalizePluginSpec validates the plugin spec and writes the typed
+// struct (with defaults) back into plugin.Spec so that DB storage and API
+// responses contain normalized values.
+func validateAndNormalizePluginSpec(plugin *common.Plugin, factory func() any, path string) error {
+	if plugin.Kind == "" {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: plugin kind is required", path)
+	}
+	if plugin.Spec == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: plugin spec is required", path)
+	}
+	// Re-marshal the spec and unmarshal into the typed struct.
+	specJSON, err := json.Marshal(plugin.Spec)
+	if err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
+	}
+	target := factory()
+	decoder := json.NewDecoder(bytes.NewReader(specJSON))
+	decoder.DisallowUnknownFields()
+	if err := decoder.Decode(target); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
+	}
+	if err := validator.New().Struct(target); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
+	}
+	// Write the typed struct back so defaults are included.
+	plugin.Spec = target
+	return nil
+}
+
+// validateQueryAllowedForPanel checks that the query plugin kind is permitted
+// for the given panel. For composite queries it recurses into sub-queries.
+func validateQueryAllowedForPanel(plugin common.Plugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
+	queryKind := QueryPluginKind(plugin.Kind)
+	if !slices.Contains(allowed, queryKind) {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+			"%s: query kind %q is not supported by panel kind %q", path, queryKind, panelKind)
+	}
+
+	// For composite queries, validate each sub-query type.
+	if queryKind == QueryKindComposite && plugin.Spec != nil {
+		specJSON, err := json.Marshal(plugin.Spec)
+		if err != nil {
+			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
+		}
+		var composite struct {
+			Queries []struct {
+				Type qb.QueryType `json:"type"`
+			} `json:"queries"`
+		}
+		if err := json.Unmarshal(specJSON, &composite); err != nil {
+			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
+		}
+		for si, sub := range composite.Queries {
+			pluginKind, ok := compositeSubQueryTypeToPluginKind[sub.Type]
+			if !ok {
+				continue
+			}
+			if !slices.Contains(allowed, pluginKind) {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+					"%s.spec.queries[%d]: sub-query type %q is not supported by panel kind %q",
+					path, si, sub.Type, panelKind)
+			}
+		}
+	}
+	return nil
+}

pkg/types/dashboardtypes/dashboard_v2_test.go

@@ -7,75 +7,33 @@ import (
 	"testing"
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
 
-func unmarshalDashboard(data []byte) (*DashboardData, error) {
-	var d DashboardData
-	if err := json.Unmarshal(data, &d); err != nil {
-		return nil, err
-	}
-	return &d, nil
-}
-
 func TestValidateBigExample(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses.json")
 	require.NoError(t, err, "reading example file")
-	_, err = unmarshalDashboard(data)
+	_, err = UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestValidateDashboardWithSections(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses_with_sections.json")
 	require.NoError(t, err, "reading example file")
-	_, err = unmarshalDashboard(data)
+	_, err = UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestInvalidateNotAJSON(t *testing.T) {
-	_, err := unmarshalDashboard([]byte("not json"))
+	_, err := UnmarshalAndValidateDashboardV2JSON([]byte("not json"))
 	require.Error(t, err, "expected error for invalid JSON")
 }
 
-// TestUnmarshalErrorPreservesNestedMessage guards the wrap on dec.Decode in
-// DashboardData.UnmarshalJSON. The wrap stamps a consistent type/code on
-// decode failures, but must not smother the rich messages produced by nested
-// UnmarshalJSON methods (panel/query/variable/datasource plugin envelopes).
-func TestUnmarshalErrorPreservesNestedMessage(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "NonExistentPanel", "spec": {}}
-				}
-			}
-		},
-		"layouts": []
-	}`)
-
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err)
-
-	require.Contains(t, err.Error(), "unknown panel plugin kind",
-		"outer wrap should not smother the inner UnmarshalJSON message")
-	require.Contains(t, err.Error(), `"NonExistentPanel"`,
-		"the offending value should still appear in the error")
-	require.Contains(t, err.Error(), "allowed values:",
-		"the allowed-values hint should still appear in the error")
-
-	assert.True(t, errors.Ast(err, errors.TypeInvalidInput),
-		"outer wrap should classify the error as TypeInvalidInput")
-	assert.True(t, errors.Asc(err, ErrCodeDashboardInvalidInput),
-		"outer wrap should stamp ErrCodeDashboardInvalidInput")
-}
-
 func TestValidateEmptySpec(t *testing.T) {
 	// no variables no panels
 	data := []byte(`{}`)
-	_, err := unmarshalDashboard(data)
+	_, err := UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "expected valid")
 }
 
@@ -101,13 +59,17 @@ func TestValidateOnlyVariables(t *testing.T) {
 				"kind": "TextVariable",
 				"spec": {
 					"name": "mytext",
-					"value": "default"
+					"value": "default",
+					"plugin": {
+						"kind": "signoz/TextboxVariable",
+						"spec": {}
+					}
 				}
 			}
 		],
 		"layouts": []
 	}`)
-	_, err := unmarshalDashboard(data)
+	_, err := UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "expected valid")
 }
 
@@ -186,7 +148,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard([]byte(tt.data))
+			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -207,7 +169,7 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 		},
 		"layouts": []
 	}`)
-	_, err := unmarshalDashboard(data)
+	_, err := UnmarshalAndValidateDashboardV2JSON(data)
 	require.Error(t, err, "expected error for invalid panel plugin kind")
 	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
@@ -283,7 +245,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard([]byte(tt.data))
+			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
 			require.Error(t, err, "expected error for unknown field")
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -361,7 +323,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard([]byte(tt.data))
+			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
 			require.Error(t, err, "expected validation error")
 			if tt.wantContain != "" {
 				require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
@@ -569,46 +531,13 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard([]byte(tt.data))
+			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
 
-func TestInvalidatePanelWithoutQueries(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}}}
-			}
-		},
-		"layouts": []
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err, "expected panel-without-queries to be rejected")
-	require.Contains(t, err.Error(), "at least one query")
-}
-
-func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
-	data := []byte(`{
-		"panels": {
-			"p1": {
-				"kind": "Panel",
-				"spec": {
-					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-					"queries": []
-				}
-			}
-		},
-		"layouts": []
-	}`)
-	_, err := unmarshalDashboard(data)
-	require.Error(t, err, "expected panel with explicit empty queries array to be rejected")
-	require.Contains(t, err.Error(), "at least one query")
-}
-
 func TestValidateRequiredFields(t *testing.T) {
 	wrapVariable := func(pluginKind, pluginSpec string) string {
 		return `{
@@ -697,7 +626,7 @@ func TestValidateRequiredFields(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := unmarshalDashboard([]byte(tt.data))
+			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -713,14 +642,13 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
-					},
-					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					}
 				}
 			}
 		},
 		"layouts": []
 	}`)
-	d, err := unmarshalDashboard(data)
+	d, err := UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	// After validation+normalization, the plugin spec should be a typed struct.
@@ -761,14 +689,13 @@ func TestNumberPanelDefaults(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
-					},
-					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					}
 				}
 			}
 		},
 		"layouts": []
 	}`)
-	d, err := unmarshalDashboard(data)
+	d, err := UnmarshalAndValidateDashboardV2JSON(data)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	require.IsType(t, &NumberPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
@@ -789,30 +716,6 @@ func TestNumberPanelDefaults(t *testing.T) {
 		"expected stored/response JSON to contain operator:>, got: %s", outputStr)
 }
 
-// TestPersesFixtureStorageRoundTrip exercises the typed → map[string]any →
-// typed cycle that the create/get path performs against the kitchen-sink
-// fixture. Catches plugin specs whose UnmarshalJSON expects a different shape
-// than the default MarshalJSON emits.
-func TestPersesFixtureStorageRoundTrip(t *testing.T) {
-	raw, err := os.ReadFile("testdata/perses.json")
-	require.NoError(t, err)
-
-	var data DashboardData
-	require.NoError(t, json.Unmarshal(raw, &data), "initial unmarshal")
-
-	marshaled, err := json.Marshal(data)
-	require.NoError(t, err, "marshal typed → JSON")
-
-	var asMap map[string]any
-	require.NoError(t, json.Unmarshal(marshaled, &asMap), "JSON → map (storage shape)")
-
-	remarshaled, err := json.Marshal(asMap)
-	require.NoError(t, err, "map → JSON (read-back shape)")
-
-	var roundtripped DashboardData
-	require.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
-}
-
 // TestStorageRoundTrip simulates the future DB store/load cycle:
 // marshal the normalized dashboard to JSON (what would be written to DB),
 // then unmarshal it back (what would be read from DB), and verify defaults survive.
@@ -825,8 +728,7 @@ func TestStorageRoundTrip(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
-					},
-					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					}
 				}
 			},
 			"p2": {
@@ -835,8 +737,7 @@ func TestStorageRoundTrip(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
-					},
-					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					}
 				}
 			}
 		},
@@ -844,7 +745,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	}`)
 
 	// Step 1: Unmarshal + validate + normalize (what the API handler does).
-	d, err := unmarshalDashboard(input)
+	d, err := UnmarshalAndValidateDashboardV2JSON(input)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	// Step 1.5: Verify struct fields have correct defaults (extra validation before storing).
@@ -864,7 +765,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	require.NoError(t, err, "marshal for storage failed")
 
 	// Step 3: Unmarshal from JSON (simulates reading from DB).
-	loaded, err := unmarshalDashboard(stored)
+	loaded, err := UnmarshalAndValidateDashboardV2JSON(stored)
 	require.NoError(t, err, "unmarshal from storage failed")
 
 	// Step 3.5: Verify struct fields have correct defaults after loading (before returning in API).
@@ -977,7 +878,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {
-			_, err := unmarshalDashboard(tc.data)
+			_, err := UnmarshalAndValidateDashboardV2JSON(tc.data)
 			if tc.wantErr {
 				require.Error(t, err)
 			} else {

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -1,107 +0,0 @@
-package dashboardtypes
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"slices"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	v1 "github.com/perses/perses/pkg/model/api/v1"
-	"github.com/perses/perses/pkg/model/api/v1/common"
-)
-
-// DashboardData is the SigNoz dashboard v2 spec shape. It mirrors
-// v1.DashboardSpec (Perses) field-for-field, except every common.Plugin
-// occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
-// per-site discriminated oneOf.
-type DashboardData struct {
-	Display         *common.Display            `json:"display,omitempty"`
-	Datasources     map[string]*DatasourceSpec `json:"datasources,omitempty"`
-	Variables       []Variable                 `json:"variables,omitempty"`
-	Panels          map[string]*Panel          `json:"panels"`
-	Layouts         []Layout                   `json:"layouts"`
-	Duration        common.DurationString      `json:"duration"`
-	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
-	Links           []v1.Link                  `json:"links,omitempty"`
-}
-
-// ══════════════════════════════════════════════
-// Unmarshal + validate entry point
-// ══════════════════════════════════════════════
-
-func (d *DashboardData) UnmarshalJSON(data []byte) error {
-	dec := json.NewDecoder(bytes.NewReader(data))
-	dec.DisallowUnknownFields()
-	type alias DashboardData
-	var tmp alias
-	if err := dec.Decode(&tmp); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid dashboard spec")
-	}
-	*d = DashboardData(tmp)
-	return d.Validate()
-}
-
-// ══════════════════════════════════════════════
-// Cross-field validation
-// ══════════════════════════════════════════════
-
-func (d *DashboardData) Validate() error {
-	for key, panel := range d.Panels {
-		if panel == nil {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
-		}
-		path := fmt.Sprintf("spec.panels.%s", key)
-		panelKind := panel.Spec.Plugin.Kind
-		if len(panel.Spec.Queries) == 0 {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel must have at least one query", path)
-		}
-		allowed := allowedQueryKinds[panelKind]
-		for qi, q := range panel.Spec.Queries {
-			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
-			if err := validateQueryAllowedForPanel(q.Spec.Plugin, allowed, panelKind, queryPath); err != nil {
-				return err
-			}
-		}
-	}
-	return nil
-}
-
-func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
-	if !slices.Contains(allowed, plugin.Kind) {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
-	}
-
-	if plugin.Kind != QueryKindComposite {
-		return nil
-	}
-	composite, ok := plugin.Spec.(*CompositeQuerySpec)
-	if !ok || composite == nil {
-		// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
-		return errors.NewInternalf(errors.CodeInternal, "%s: composite query plugin has unexpected spec type %T", path, plugin.Spec)
-	}
-	for si, sub := range composite.Queries {
-		subKind, ok := compositeSubQueryTypeToPluginKind[sub.Type]
-		if !ok {
-			continue
-		}
-		if !slices.Contains(allowed, subKind) {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-				"%s.spec.queries[%d]: sub-query type %q is not supported by panel kind %q",
-				path, si, sub.Type, panelKind)
-		}
-	}
-	return nil
-}
-
-var (
-	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
-		qb.QueryTypeBuilder:       QueryKindBuilder,
-		qb.QueryTypeFormula:       QueryKindFormula,
-		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
-		qb.QueryTypePromQL:        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
-	}
-)

pkg/types/dashboardtypes/perses_drift_test.go

@@ -1,170 +0,0 @@
-package dashboardtypes
-
-// TestDashboardDataMatchesPerses asserts that DashboardData
-// and every nested SigNoz-owned type cover the JSON field set of their Perses
-// counterpart.
-
-import (
-	"reflect"
-	"sort"
-	"strings"
-	"testing"
-
-	v1 "github.com/perses/perses/pkg/model/api/v1"
-	"github.com/perses/perses/pkg/model/api/v1/dashboard"
-
-	"github.com/stretchr/testify/assert"
-)
-
-func TestDashboardDataMatchesPerses(t *testing.T) {
-	cases := []struct {
-		name   string
-		ours   reflect.Type
-		perses reflect.Type
-	}{
-		{"DashboardSpec", typeOf[DashboardData](), typeOf[v1.DashboardSpec]()},
-		{"Panel", typeOf[Panel](), typeOf[v1.Panel]()},
-		{"PanelSpec", typeOf[PanelSpec](), typeOf[v1.PanelSpec]()},
-		{"Query", typeOf[Query](), typeOf[v1.Query]()},
-		{"QuerySpec", typeOf[QuerySpec](), typeOf[v1.QuerySpec]()},
-		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[v1.DatasourceSpec]()},
-		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
-		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
-		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},
-	}
-
-	for _, c := range cases {
-		t.Run(c.name, func(t *testing.T) {
-			missing, extra := drift(c.ours, c.perses)
-
-			assert.Empty(t, missing,
-				"DashboardData (%s) is missing json fields present on Perses %s — upstream likely added or renamed a field",
-				c.ours.Name(), c.perses.Name())
-			assert.Empty(t, extra,
-				"DashboardData (%s) has json fields absent on Perses %s — upstream likely removed a field or we added one without the counterpart",
-				c.ours.Name(), c.perses.Name())
-		})
-	}
-}
-
-func TestDriftDetectionMechanics(t *testing.T) {
-	t.Run("upstream added a field", func(t *testing.T) {
-		type ours struct {
-			Name string `json:"name"`
-		}
-		type perses struct {
-			Name        string `json:"name"`
-			Description string `json:"description"`
-		}
-		missing, extra := drift(typeOf[ours](), typeOf[perses]())
-		assert.Equal(t, []string{"description"}, missing, "missing fires: upstream has a field we don't")
-		assert.Empty(t, extra)
-	})
-
-	t.Run("upstream removed a field", func(t *testing.T) {
-		type ours struct {
-			Name        string `json:"name"`
-			Description string `json:"description"`
-		}
-		type perses struct {
-			Name string `json:"name"`
-		}
-		missing, extra := drift(typeOf[ours](), typeOf[perses]())
-		assert.Empty(t, missing)
-		assert.Equal(t, []string{"description"}, extra, "extra fires: we kept a field upstream removed")
-	})
-
-	t.Run("upstream renamed a field", func(t *testing.T) {
-		type ours struct {
-			Name string `json:"name"`
-		}
-		type perses struct {
-			Name string `json:"title"`
-		}
-		missing, extra := drift(typeOf[ours](), typeOf[perses]())
-		assert.Equal(t, []string{"title"}, missing, "missing fires for the new name")
-		assert.Equal(t, []string{"name"}, extra, "extra fires for the old name — both fire on a rename")
-	})
-
-	t.Run("we added a field upstream does not have", func(t *testing.T) {
-		type ours struct {
-			Name     string `json:"name"`
-			Internal string `json:"internal"`
-		}
-		type perses struct {
-			Name string `json:"name"`
-		}
-		missing, extra := drift(typeOf[ours](), typeOf[perses]())
-		assert.Empty(t, missing)
-		assert.Equal(t, []string{"internal"}, extra, "extra fires: we added a field with no upstream counterpart")
-	})
-
-	t.Run("embedded struct flattens — drift inside the embed is caught", func(t *testing.T) {
-		type embedded struct {
-			Display string `json:"display"`
-			NewBit  string `json:"newBit"` // upstream added this inside the embed
-		}
-		type ours struct {
-			Display string `json:"display"`
-			Name    string `json:"name"`
-		}
-		type perses struct {
-			embedded `json:",inline"`
-			Name     string `json:"name"`
-		}
-		missing, extra := drift(typeOf[ours](), typeOf[perses]())
-		assert.Equal(t, []string{"newBit"}, missing, "field added inside an inlined embed surfaces at the parent level")
-		assert.Empty(t, extra)
-	})
-}
-
-func drift(ours, perses reflect.Type) (missing, extra []string) {
-	o, p := jsonFields(ours), jsonFields(perses)
-	return sortedDiff(p, o), sortedDiff(o, p)
-}
-
-// jsonFields returns the set of json tag names for a struct, flattening
-// anonymous embedded fields (matching encoding/json behavior).
-func jsonFields(t reflect.Type) map[string]struct{} {
-	out := map[string]struct{}{}
-	if t.Kind() != reflect.Struct {
-		return out
-	}
-	for i := 0; i < t.NumField(); i++ {
-		f := t.Field(i)
-		// Skip unexported fields (e.g., dashboard.ListVariableSpec has an
-		// unexported `variableSpec` interface tag).
-		if !f.IsExported() && !f.Anonymous {
-			continue
-		}
-		tag := f.Tag.Get("json")
-		name := strings.Split(tag, ",")[0]
-		// Anonymous embed with empty json name (no tag, or `json:",inline"` /
-		// `json:",omitempty"`-style options-only tag) is flattened by encoding/json.
-		if f.Anonymous && name == "" {
-			for k := range jsonFields(f.Type) {
-				out[k] = struct{}{}
-			}
-			continue
-		}
-		if tag == "-" || name == "" {
-			continue
-		}
-		out[name] = struct{}{}
-	}
-	return out
-}
-
-// sortedDiff returns keys in a but not in b, sorted.
-func sortedDiff(a, b map[string]struct{}) []string {
-	var diff []string
-	for k := range a {
-		if _, ok := b[k]; !ok {
-			diff = append(diff, k)
-		}
-	}
-	sort.Strings(diff)
-	return diff
-}
-
-func typeOf[T any]() reflect.Type { return reflect.TypeOf((*T)(nil)).Elem() }

pkg/types/dashboardtypes/perses_plugin_types.go

@@ -8,7 +8,6 @@ import (
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/swaggest/jsonschema-go"
 )
 
 // ══════════════════════════════════════════════
@@ -21,10 +20,11 @@ const (
 	VariableKindDynamic VariablePluginKind = "signoz/DynamicVariable"
 	VariableKindQuery   VariablePluginKind = "signoz/QueryVariable"
 	VariableKindCustom  VariablePluginKind = "signoz/CustomVariable"
+	VariableKindTextbox VariablePluginKind = "signoz/TextboxVariable"
 )
 
 func (VariablePluginKind) Enum() []any {
-	return []any{VariableKindDynamic, VariableKindQuery, VariableKindCustom}
+	return []any{VariableKindDynamic, VariableKindQuery, VariableKindCustom, VariableKindTextbox}
 }
 
 type DynamicVariableSpec struct {
@@ -42,6 +42,8 @@ type CustomVariableSpec struct {
 	CustomValue string `json:"customValue" validate:"required" required:"true"`
 }
 
+type TextboxVariableSpec struct{}
+
 // ══════════════════════════════════════════════
 // SigNoz query plugin specs — aliased from querybuildertypesv5
 // ══════════════════════════════════════════════
@@ -85,30 +87,6 @@ func (b *BuilderQuerySpec) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
-// MarshalJSON delegates to the inner Spec so the on-wire shape matches what
-// UnmarshalJSON expects (a flat builder-query payload with `signal` at the top
-// level). Without this, Go's default would wrap it as {"Spec": {...}} and the
-// signal-dispatch on read would fail.
-func (b BuilderQuerySpec) MarshalJSON() ([]byte, error) {
-	return json.Marshal(b.Spec)
-}
-
-// PrepareJSONSchema drops the reflected struct shape so only the
-// JSONSchemaOneOf result binds.
-func (BuilderQuerySpec) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-// JSONSchemaOneOf exposes the three signal-dispatched shapes a builder query
-// can take. Mirrors qb.UnmarshalBuilderQueryBySignal's runtime dispatch.
-func (BuilderQuerySpec) JSONSchemaOneOf() []any {
-	return []any{
-		qb.QueryBuilderQuery[qb.LogAggregation]{},
-		qb.QueryBuilderQuery[qb.MetricAggregation]{},
-		qb.QueryBuilderQuery[qb.TraceAggregation]{},
-	}
-}
-
 // ══════════════════════════════════════════════
 // SigNoz panel plugin specs
 // ══════════════════════════════════════════════

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -1,312 +0,0 @@
-package dashboardtypes
-
-import (
-	"bytes"
-	"encoding/json"
-	"maps"
-	"slices"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-
-	"github.com/go-playground/validator/v10"
-	"github.com/swaggest/jsonschema-go"
-)
-
-// ══════════════════════════════════════════════
-// Panel plugin
-// ══════════════════════════════════════════════
-
-type PanelPlugin struct {
-	Kind PanelPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
-}
-
-// PrepareJSONSchema drops the reflected struct shape (type: object, properties)
-// from the envelope so that only the JSONSchemaOneOf result binds.
-func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (p *PanelPlugin) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	factory, ok := panelPluginSpecs[PanelPluginKind(kind)]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown panel plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(panelPluginSpecs))))
-	}
-	spec, err := decodeSpec(specJSON, factory(), kind)
-	if err != nil {
-		return err
-	}
-	p.Kind = PanelPluginKind(kind)
-	p.Spec = spec
-	return nil
-}
-
-func (PanelPlugin) JSONSchemaOneOf() []any {
-	return []any{
-		PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)},
-		PanelPluginVariant[BarChartPanelSpec]{Kind: string(PanelKindBarChart)},
-		PanelPluginVariant[NumberPanelSpec]{Kind: string(PanelKindNumber)},
-		PanelPluginVariant[PieChartPanelSpec]{Kind: string(PanelKindPieChart)},
-		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
-		PanelPluginVariant[HistogramPanelSpec]{Kind: string(PanelKindHistogram)},
-		PanelPluginVariant[ListPanelSpec]{Kind: string(PanelKindList)},
-	}
-}
-
-type PanelPluginVariant[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v PanelPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}
-
-// ══════════════════════════════════════════════
-// Query plugin
-// ══════════════════════════════════════════════
-
-type QueryPlugin struct {
-	Kind QueryPluginKind `json:"kind"`
-	Spec any             `json:"spec"`
-}
-
-func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	factory, ok := queryPluginSpecs[QueryPluginKind(kind)]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown query plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(queryPluginSpecs))))
-	}
-	spec, err := decodeSpec(specJSON, factory(), kind)
-	if err != nil {
-		return err
-	}
-	p.Kind = QueryPluginKind(kind)
-	p.Spec = spec
-	return nil
-}
-
-func (QueryPlugin) JSONSchemaOneOf() []any {
-	return []any{
-		QueryPluginVariant[BuilderQuerySpec]{Kind: string(QueryKindBuilder)},
-		QueryPluginVariant[CompositeQuerySpec]{Kind: string(QueryKindComposite)},
-		QueryPluginVariant[FormulaSpec]{Kind: string(QueryKindFormula)},
-		QueryPluginVariant[PromQLQuerySpec]{Kind: string(QueryKindPromQL)},
-		QueryPluginVariant[ClickHouseSQLQuerySpec]{Kind: string(QueryKindClickHouseSQL)},
-		QueryPluginVariant[TraceOperatorSpec]{Kind: string(QueryKindTraceOperator)},
-	}
-}
-
-type QueryPluginVariant[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v QueryPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}
-
-// ══════════════════════════════════════════════
-// Variable plugin
-// ══════════════════════════════════════════════
-
-type VariablePlugin struct {
-	Kind VariablePluginKind `json:"kind"`
-	Spec any                `json:"spec"`
-}
-
-func (VariablePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (p *VariablePlugin) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	factory, ok := variablePluginSpecs[VariablePluginKind(kind)]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(variablePluginSpecs))))
-	}
-	spec, err := decodeSpec(specJSON, factory(), kind)
-	if err != nil {
-		return err
-	}
-	p.Kind = VariablePluginKind(kind)
-	p.Spec = spec
-	return nil
-}
-
-func (VariablePlugin) JSONSchemaOneOf() []any {
-	return []any{
-		VariablePluginVariant[DynamicVariableSpec]{Kind: string(VariableKindDynamic)},
-		VariablePluginVariant[QueryVariableSpec]{Kind: string(VariableKindQuery)},
-		VariablePluginVariant[CustomVariableSpec]{Kind: string(VariableKindCustom)},
-	}
-}
-
-type VariablePluginVariant[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}
-
-// ══════════════════════════════════════════════
-// Datasource plugin
-// ══════════════════════════════════════════════
-
-type DatasourcePlugin struct {
-	Kind DatasourcePluginKind `json:"kind"`
-	Spec any                  `json:"spec"`
-}
-
-func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (p *DatasourcePlugin) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	factory, ok := datasourcePluginSpecs[DatasourcePluginKind(kind)]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown datasource plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(datasourcePluginSpecs))))
-	}
-	spec, err := decodeSpec(specJSON, factory(), kind)
-	if err != nil {
-		return err
-	}
-	p.Kind = DatasourcePluginKind(kind)
-	p.Spec = spec
-	return nil
-}
-
-func (DatasourcePlugin) JSONSchemaOneOf() []any {
-	return []any{
-		DatasourcePluginVariant[struct{}]{Kind: string(DatasourceKindSigNoz)},
-	}
-}
-
-type DatasourcePluginVariant[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v DatasourcePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}
-
-// ══════════════════════════════════════════════
-// Helpers
-// ══════════════════════════════════════════════
-
-var (
-	panelPluginSpecs = map[PanelPluginKind]func() any{
-		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
-		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
-		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
-		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
-		PanelKindTable:      func() any { return new(TablePanelSpec) },
-		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
-		PanelKindList:       func() any { return new(ListPanelSpec) },
-	}
-	queryPluginSpecs = map[QueryPluginKind]func() any{
-		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
-		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
-		QueryKindFormula:       func() any { return new(FormulaSpec) },
-		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
-		QueryKindClickHouseSQL: func() any { return new(ClickHouseSQLQuerySpec) },
-		QueryKindTraceOperator: func() any { return new(TraceOperatorSpec) },
-	}
-	variablePluginSpecs = map[VariablePluginKind]func() any{
-		VariableKindDynamic: func() any { return new(DynamicVariableSpec) },
-		VariableKindQuery:   func() any { return new(QueryVariableSpec) },
-		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
-	}
-	datasourcePluginSpecs = map[DatasourcePluginKind]func() any{
-		DatasourceKindSigNoz: func() any { return new(struct{}) },
-	}
-
-	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
-		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:       {QueryKindBuilder},
-	}
-)
-
-func allowedValuesForKind[K ~string](kinds []K) string {
-	parts := make([]string, len(kinds))
-	for i, k := range kinds {
-		parts[i] = "`" + string(k) + "`"
-	}
-	return strings.Join(parts, ", ")
-}
-
-// extractKindAndSpec parses a {"kind": "...", "spec": {...}} envelope and returns
-// kind and the raw spec bytes for typed decoding.
-func extractKindAndSpec(data []byte) (string, []byte, error) {
-	var head struct {
-		Kind string          `json:"kind"`
-		Spec json.RawMessage `json:"spec"`
-	}
-	if err := json.Unmarshal(data, &head); err != nil {
-		return "", nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid plugin envelope")
-	}
-	return head.Kind, head.Spec, nil
-}
-
-// decodeSpec strict-decodes a spec JSON into target and runs struct-tag validation (go-playground/validator).
-func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
-	if len(specJSON) == 0 {
-		return nil, errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "kind %q: spec is required", kind)
-	}
-	dec := json.NewDecoder(bytes.NewReader(specJSON))
-	dec.DisallowUnknownFields()
-	if err := dec.Decode(target); err != nil {
-		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: invalid spec JSON", kind)
-	}
-	if err := validator.New().Struct(target); err != nil {
-		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: spec failed validation", kind)
-	}
-	return target, nil
-}
-
-// clearOneOfParentShape drops Type and Properties on a schema that also has a JSONSchemaOneOf.
-func clearOneOfParentShape(s *jsonschema.Schema) error {
-	s.Type = nil
-	s.Properties = nil
-	return nil
-}
-
-// restrictKindToOneValue ensures that the schema only allows one Kind value for a type.
-// For eg. PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)} should
-// only allow "signoz/TimeSeriesPanel" in its kind field.
-func restrictKindToOneValue(schema *jsonschema.Schema, kind string) error {
-	kindProp, ok := schema.Properties["kind"]
-	if !ok || kindProp.TypeObject == nil {
-		return errors.NewInternalf(errors.CodeInternal, "variant schema missing `kind` property")
-	}
-	kindProp.TypeObject.WithEnum(kind)
-	schema.Properties["kind"] = kindProp
-	return nil
-}

pkg/types/dashboardtypes/perses_replicas.go

@@ -1,182 +0,0 @@
-package dashboardtypes
-
-import (
-	"maps"
-	"slices"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	v1 "github.com/perses/perses/pkg/model/api/v1"
-	"github.com/perses/perses/pkg/model/api/v1/common"
-	"github.com/perses/perses/pkg/model/api/v1/dashboard"
-	"github.com/perses/perses/pkg/model/api/v1/variable"
-	"github.com/swaggest/jsonschema-go"
-)
-
-// ══════════════════════════════════════════════
-// Datasource
-// ══════════════════════════════════════════════
-
-type DatasourceSpec struct {
-	Display *common.Display  `json:"display,omitempty"`
-	Default bool             `json:"default"`
-	Plugin  DatasourcePlugin `json:"plugin"`
-}
-
-// ══════════════════════════════════════════════
-// Panel
-// ══════════════════════════════════════════════
-
-type Panel struct {
-	Kind string    `json:"kind"`
-	Spec PanelSpec `json:"spec"`
-}
-
-type PanelSpec struct {
-	Display *v1.PanelDisplay `json:"display,omitempty"`
-	Plugin  PanelPlugin      `json:"plugin"`
-	Queries []Query          `json:"queries,omitempty"`
-	Links   []v1.Link        `json:"links,omitempty"`
-}
-
-// ══════════════════════════════════════════════
-// Query
-// ══════════════════════════════════════════════
-
-type Query struct {
-	Kind string    `json:"kind"`
-	Spec QuerySpec `json:"spec"`
-}
-
-type QuerySpec struct {
-	Name   string      `json:"name,omitempty"`
-	Plugin QueryPlugin `json:"plugin"`
-}
-
-// ══════════════════════════════════════════════
-// Variable
-// ══════════════════════════════════════════════
-
-// Variable is the list/text sum type. Spec is set to *ListVariableSpec or
-// *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
-// discriminated oneOf (see JSONSchemaOneOf).
-type Variable struct {
-	Kind variable.Kind `json:"kind"`
-	Spec any           `json:"spec"`
-}
-
-func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (v *Variable) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	switch kind {
-	case string(variable.KindList):
-		spec, err := decodeSpec(specJSON, new(ListVariableSpec), kind)
-		if err != nil {
-			return err
-		}
-		v.Kind = variable.KindList
-		v.Spec = spec
-	case string(variable.KindText):
-		spec, err := decodeSpec(specJSON, new(dashboard.TextVariableSpec), kind)
-		if err != nil {
-			return err
-		}
-		v.Kind = variable.KindText
-		v.Spec = spec
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable kind %q; allowed values: %s", kind, allowedValuesForKind([]variable.Kind{variable.KindList, variable.KindText}))
-	}
-	return nil
-}
-
-func (Variable) JSONSchemaOneOf() []any {
-	return []any{
-		VariableEnvelope[ListVariableSpec]{Kind: string(variable.KindList)},
-		VariableEnvelope[dashboard.TextVariableSpec]{Kind: string(variable.KindText)},
-	}
-}
-
-type VariableEnvelope[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}
-
-// ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
-// fields + Name) but with a typed VariablePlugin replacing common.Plugin.
-type ListVariableSpec struct {
-	Display         *variable.Display      `json:"display,omitempty"`
-	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
-	AllowAllValue   bool                   `json:"allowAllValue"`
-	AllowMultiple   bool                   `json:"allowMultiple"`
-	CustomAllValue  string                 `json:"customAllValue,omitempty"`
-	CapturingRegexp string                 `json:"capturingRegexp,omitempty"`
-	Sort            *variable.Sort         `json:"sort,omitempty"`
-	Plugin          VariablePlugin         `json:"plugin"`
-	Name            string                 `json:"name"`
-}
-
-// ══════════════════════════════════════════════
-// Layout
-// ══════════════════════════════════════════════
-
-// Layout is the dashboard layout sum type. Spec is populated by UnmarshalJSON
-// with the concrete layout spec struct (today only dashboard.GridLayoutSpec)
-// based on Kind. No plugin is involved, so we reuse the Perses spec types as
-// leaf imports.
-type Layout struct {
-	Kind dashboard.LayoutKind `json:"kind"`
-	Spec any                  `json:"spec"`
-}
-
-// layoutSpecs is the layout sum type factory. Perses only defines
-// KindGridLayout today; adding a new kind upstream surfaces as an
-// "unknown layout kind" runtime error here until we add it.
-var layoutSpecs = map[dashboard.LayoutKind]func() any{
-	dashboard.KindGridLayout: func() any { return new(dashboard.GridLayoutSpec) },
-}
-
-func (Layout) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return clearOneOfParentShape(s)
-}
-
-func (l *Layout) UnmarshalJSON(data []byte) error {
-	kind, specJSON, err := extractKindAndSpec(data)
-	if err != nil {
-		return err
-	}
-	factory, ok := layoutSpecs[dashboard.LayoutKind(kind)]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown layout kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(layoutSpecs))))
-	}
-	spec, err := decodeSpec(specJSON, factory(), kind)
-	if err != nil {
-		return err
-	}
-	l.Kind = dashboard.LayoutKind(kind)
-	l.Spec = spec
-	return nil
-}
-
-func (Layout) JSONSchemaOneOf() []any {
-	return []any{
-		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},
-	}
-}
-
-type LayoutEnvelope[S any] struct {
-	Kind string `json:"kind" required:"true"`
-	Spec S      `json:"spec" required:"true"`
-}
-
-func (v LayoutEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
-	return restrictKindToOneValue(s, v.Kind)
-}

pkg/types/dashboardtypes/testdata/perses.json

@@ -76,7 +76,11 @@
                 "display": {
                     "name": "textboxvar"
                 },
-                "value": "defaultvaluegoeshere"
+                "value": "defaultvaluegoeshere",
+                "plugin": {
+                    "kind": "signoz/TextboxVariable",
+                    "spec": {}
+                }
             }
         }
     ],