perf(tsconfig): enable incremental & fix large type resolution

docs/api/openapi.yml

@@ -3571,7 +3571,7 @@ components:
       - user
       - system
       - integration
-      type: string
+      type: object
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:

frontend/.oxlintrc.json

@@ -328,11 +328,6 @@
           {
             "name": "immer",
             "message": "[State mgmt] Direct immer usage is deprecated. Use Zustand (which integrates immer via the immer middleware) instead."
-          },
-          {
-            "name": "api/generated/services/dashboard",
-            "importNames": ["patchDashboardV2", "usePatchDashboardV2"],
-            "message": "[dashboard-v2] Don't call patchDashboardV2/usePatchDashboardV2 directly — use useOptimisticPatch().patchAsync so spec edits update the react-query cache optimistically and reconcile on settle."
           }
         ]
       }

frontend/src/components/Graph/utils.ts

@@ -1,5 +1,14 @@
 import { MutableRefObject } from 'react';
-import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+import {
+	ActiveElement,
+	Chart,
+	ChartConfiguration,
+	ChartData,
+	ChartEvent,
+	ChartType,
+	Color,
+	TooltipItem,
+} from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -60,184 +69,189 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions => ({
-	animation: {
-		duration: animate ? 200 : 0,
-	},
-	responsive: true,
-	maintainAspectRatio: false,
-	interaction: {
-		mode: 'index',
-		intersect: true,
-	},
-	plugins: {
-		...(staticLine
-			? {
-					annotation: {
-						annotations: [
-							{
-								type: 'line',
-								yMin: staticLine.yMin,
-								yMax: staticLine.yMax,
-								borderColor: staticLine.borderColor,
-								borderWidth: staticLine.borderWidth,
-								label: {
-									content: staticLine.lineText,
-									enabled: true,
-									font: {
-										size: 10,
+): CustomChartOptions =>
+	({
+		animation: {
+			duration: animate ? 200 : 0,
+		},
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: 'index',
+			intersect: true,
+		},
+		plugins: {
+			...(staticLine
+				? {
+						annotation: {
+							annotations: [
+								{
+									type: 'line',
+									yMin: staticLine.yMin,
+									yMax: staticLine.yMax,
+									borderColor: staticLine.borderColor,
+									borderWidth: staticLine.borderWidth,
+									label: {
+										content: staticLine.lineText,
+										enabled: true,
+										font: {
+											size: 10,
+										},
+										borderWidth: 0,
+										position: 'start',
+										backgroundColor: 'transparent',
+										color: staticLine.textColor,
 									},
-									borderWidth: 0,
-									position: 'start',
-									backgroundColor: 'transparent',
-									color: staticLine.textColor,
 								},
-							},
-						],
+							],
+						},
+					}
+				: {}),
+			title: {
+				display: title !== undefined,
+				text: title,
+			},
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				callbacks: {
+					title(context: TooltipItem<'line'>[]): string | string[] {
+						const date = dayjs(context[0].parsed.x);
+						return date
+							.tz(timezone.value)
+							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+					},
+					label(context: TooltipItem<'line'>): string | string[] {
+						let label = context.dataset.label || '';
+
+						if (label) {
+							label += ': ';
+						}
+						if (context.parsed.y !== null) {
+							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+						}
+
+						return label;
+					},
+					labelTextColor(labelData: TooltipItem<'line'>): Color {
+						if (labelData.datasetIndex === nearestDatasetIndex.current) {
+							return 'rgba(255, 255, 255, 1)';
+						}
+
+						return 'rgba(255, 255, 255, 0.75)';
 					},
-				}
-			: {}),
-		title: {
-			display: title !== undefined,
-			text: title,
-		},
-		legend: {
-			display: false,
-		},
-		tooltip: {
-			callbacks: {
-				title(context): string | string[] {
-					const date = dayjs(context[0].parsed.x);
-					return date
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
 				},
-				label(context): string | string[] {
-					let label = context.dataset.label || '';
-
-					if (label) {
-						label += ': ';
-					}
-					if (context.parsed.y !== null) {
-						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-					}
-
-					return label;
-				},
-				labelTextColor(labelData): Color {
-					if (labelData.datasetIndex === nearestDatasetIndex.current) {
-						return 'rgba(255, 255, 255, 1)';
-					}
-
-					return 'rgba(255, 255, 255, 0.75)';
+				position: 'custom',
+				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
+					return item2.parsed.y - item1.parsed.y;
 				},
 			},
-			position: 'custom',
-			itemSort(item1, item2): number {
-				return item2.parsed.y - item1.parsed.y;
-			},
+			[dragSelectPluginId]: createDragSelectPluginOptions(
+				!!onDragSelect,
+				onDragSelect,
+				dragSelectColor,
+			),
+			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+				!!onDragSelect,
+				currentTheme === 'dark' ? 'white' : 'black',
+			),
 		},
-		[dragSelectPluginId]: createDragSelectPluginOptions(
-			!!onDragSelect,
-			onDragSelect,
-			dragSelectColor,
-		),
-		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-			!!onDragSelect,
-			currentTheme === 'dark' ? 'white' : 'black',
-		),
-	},
-	layout: {
-		padding: 0,
-	},
-	scales: {
-		x: {
-			stacked: isStacked,
-			offset: false,
-			grid: {
+		layout: {
+			padding: 0,
+		},
+		scales: {
+			x: {
+				stacked: isStacked,
+				offset: false,
+				grid: {
+					display: true,
+					color: getGridColor(),
+					drawTicks: true,
+				},
+				adapters: {
+					date: chartjsAdapter,
+				},
+				time: {
+					unit: xAxisTimeUnit?.unitName || 'minute',
+					stepSize: xAxisTimeUnit?.stepSize || 1,
+					displayFormats: {
+						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+						second: DATE_TIME_FORMATS.TIME_SECONDS,
+						minute: DATE_TIME_FORMATS.TIME,
+						hour: DATE_TIME_FORMATS.SLASH_SHORT,
+						day: DATE_TIME_FORMATS.DATE_SHORT,
+						week: DATE_TIME_FORMATS.DATE_SHORT,
+						month: DATE_TIME_FORMATS.YEAR_MONTH,
+						year: DATE_TIME_FORMATS.YEAR_SHORT,
+					},
+				},
+				type: 'time',
+				ticks: { color: getAxisLabelColor(currentTheme) },
+				...(minTime && {
+					min: dayjs(minTime).tz(timezone.value).format(),
+				}),
+				...(maxTime && {
+					max: dayjs(maxTime).tz(timezone.value).format(),
+				}),
+			},
+			y: {
+				stacked: isStacked,
 				display: true,
-				color: getGridColor(),
-				drawTicks: true,
-			},
-			adapters: {
-				date: chartjsAdapter,
-			},
-			time: {
-				unit: xAxisTimeUnit?.unitName || 'minute',
-				stepSize: xAxisTimeUnit?.stepSize || 1,
-				displayFormats: {
-					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-					second: DATE_TIME_FORMATS.TIME_SECONDS,
-					minute: DATE_TIME_FORMATS.TIME,
-					hour: DATE_TIME_FORMATS.SLASH_SHORT,
-					day: DATE_TIME_FORMATS.DATE_SHORT,
-					week: DATE_TIME_FORMATS.DATE_SHORT,
-					month: DATE_TIME_FORMATS.YEAR_MONTH,
-					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				grid: {
+					display: true,
+					color: getGridColor(),
 				},
-			},
-			type: 'time',
-			ticks: { color: getAxisLabelColor(currentTheme) },
-			...(minTime && {
-				min: dayjs(minTime).tz(timezone.value).format(),
-			}),
-			...(maxTime && {
-				max: dayjs(maxTime).tz(timezone.value).format(),
-			}),
-		},
-		y: {
-			stacked: isStacked,
-			display: true,
-			grid: {
-				display: true,
-				color: getGridColor(),
-			},
-			ticks: {
-				color: getAxisLabelColor(currentTheme),
-				// Include a dollar sign in the ticks
-				callback(value): string {
-					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				ticks: {
+					color: getAxisLabelColor(currentTheme),
+					// Include a dollar sign in the ticks
+					callback(value: number | string): string {
+						return getYAxisFormattedValue(value.toString(), yAxisUnit);
+					},
 				},
 			},
 		},
-	},
-	elements: {
-		line: {
-			tension: 0,
-			cubicInterpolationMode: 'monotone',
-		},
-		point: {
-			hoverBackgroundColor: (ctx: any): string => {
-				if (ctx?.element?.options?.borderColor) {
-					return ctx.element.options.borderColor;
-				}
-				return 'rgba(0,0,0,0.1)';
+		elements: {
+			line: {
+				tension: 0,
+				cubicInterpolationMode: 'monotone',
 			},
-			hoverRadius: 5,
-		},
-	},
-	onClick: (event, element, chart): void => {
-		if (onClickHandler) {
-			onClickHandler(event, element, chart, data);
-		}
-	},
-	onHover: (event, _, chart): void => {
-		if (event.native) {
-			const interactions = chart.getElementsAtEventForMode(
-				event.native,
-				'nearest',
-				{
-					intersect: false,
+			point: {
+				hoverBackgroundColor: (ctx: any): string => {
+					if (ctx?.element?.options?.borderColor) {
+						return ctx.element.options.borderColor;
+					}
+					return 'rgba(0,0,0,0.1)';
 				},
-				true,
-			);
-
-			if (interactions[0]) {
-				nearestDatasetIndex.current = interactions[0].datasetIndex;
+				hoverRadius: 5,
+			},
+		},
+		onClick: (
+			event: ChartEvent,
+			element: ActiveElement[],
+			chart: Chart,
+		): void => {
+			if (onClickHandler) {
+				onClickHandler(event, element, chart, data);
 			}
-		}
-	},
-});
+		},
+		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
+			if (event.native) {
+				const interactions = chart.getElementsAtEventForMode(
+					event.native,
+					'nearest',
+					{
+						intersect: false,
+					},
+					true,
+				);
+
+				if (interactions[0]) {
+					nearestDatasetIndex.current = interactions[0].datasetIndex;
+				}
+			}
+		},
+	}) as CustomChartOptions;
 
 declare module 'chart.js' {
 	interface TooltipPositionerMap {

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import cx from 'classnames';
+import classNames from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,7 +72,9 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);
 
 	return (
-		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
+		<div
+			className={classNames('y-axis-unit-selector-component', containerClassName)}
+		>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -82,17 +84,12 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip
-							title={incompatibleUnitMessage}
-							overlayClassName="y-axis-unit-warning-tooltip"
-						>
-							<span className="y-axis-unit-warning" role="img" aria-label="warning">
-								<SolidAlertTriangle size="md" />
-							</span>
+						<Tooltip title={incompatibleUnitMessage}>
+							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
 						</Tooltip>
 					) : undefined
 				}
-				className={cx({
+				className={classNames({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}

frontend/src/components/YAxisUnitSelector/__tests__/YAxisUnitSelector.test.tsx

@@ -1,5 +1,4 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -7,13 +6,9 @@ import YAxisUnitSelector from '../YAxisUnitSelector';
 
 describe('YAxisUnitSelector', () => {
 	const mockOnChange = jest.fn();
-	// antd injects its `pointer-events` styles via cssinjs in jsdom, but the SCSS
-	// overrides aren't loaded — skip the pointer-events check so hovers/clicks register.
-	let user: ReturnType<typeof userEvent.setup>;
 
 	beforeEach(() => {
 		mockOnChange.mockClear();
-		user = userEvent.setup({ pointerEventsCheck: 0 });
 	});
 
 	it('renders with default placeholder', () => {
@@ -39,7 +34,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});
 
-	it('calls onChange when a value is selected', async () => {
+	it('calls onChange when a value is selected', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -49,8 +44,9 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		await user.click(select);
-		await user.click(screen.getByText('Bytes (B)'));
+		fireEvent.mouseDown(select);
+		const option = screen.getByText('Bytes (B)');
+		fireEvent.click(option);
 
 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -59,7 +55,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});
 
-	it('filters options based on search input', async () => {
+	it('filters options based on search input', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -69,13 +65,14 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		await user.click(select);
-		await user.type(select, 'bytes/sec');
+		fireEvent.mouseDown(select);
+		const input = screen.getByRole('combobox');
+		fireEvent.change(input, { target: { value: 'bytes/sec' } });
 
 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});
 
-	it('shows all categories and their units', async () => {
+	it('shows all categories and their units', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -83,8 +80,9 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
+		const select = screen.getByRole('combobox');
 
-		await user.click(screen.getByRole('combobox'));
+		fireEvent.mouseDown(select);
 
 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -95,7 +93,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});
 
-	it('shows warning message when incompatible unit is selected', async () => {
+	it('shows warning message when incompatible unit is selected', () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -106,12 +104,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		await user.hover(warningIcon);
-		await expect(
-			screen.findByText(
+		fireEvent.mouseOver(warningIcon);
+		return screen
+			.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			),
-		).resolves.toBeInTheDocument();
+			)
+			.then((el) => expect(el).toBeInTheDocument());
 	});
 
 	it('does not show warning message when compatible unit is selected', () => {
@@ -127,7 +125,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});
 
-	it('uses categories override to render custom units', async () => {
+	it('uses categories override to render custom units', () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -149,7 +147,9 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);
 
-		await user.click(screen.getByRole('combobox'));
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
 
 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -4,13 +4,6 @@
 	}
 }
 
-// Re-enable hover on the warning icon: its `.ant-select-arrow` parent sets
-// `pointer-events: none`, which would otherwise suppress the tooltip.
-.y-axis-unit-warning {
-	display: inline-flex;
-	pointer-events: auto;
-}
-
 .warning-state {
 	.ant-select-selector {
 		border-color: var(--bg-amber-400) !important;
@@ -24,7 +17,3 @@
 		right: 28px;
 	}
 }
-
-.y-axis-unit-warning-tooltip {
-	max-width: 240px;
-}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -1,4 +1,3 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { PrecisionOption } from 'components/Graph/types';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
@@ -28,7 +27,7 @@ interface PieArcProps {
 	fill: string;
 	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
 	onLeave: () => void;
-	onClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
+	onClick?: (slice: PieSlice) => void;
 }
 
 /**
@@ -73,7 +72,7 @@ export default function PieArc({
 		<g
 			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
 			onMouseLeave={onLeave}
-			onClick={(event): void => onClick?.(slice, event)}
+			onClick={(): void => onClick?.(slice)}
 		>
 			<path d={arcPath} fill={fill} />
 			{shouldShowLabel && (

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -80,7 +80,6 @@ describe('PieArc', () => {
 		expect(onLeave).toHaveBeenCalledTimes(1);
 
 		fireEvent.click(g);
-		// onClick now also receives the DOM event (for drill-down popover positioning).
-		expect(onClick).toHaveBeenCalledWith(SLICE, expect.anything());
+		expect(onClick).toHaveBeenCalledWith(SLICE);
 	});
 });

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

@@ -1,4 +1,3 @@
-import type { MouseEvent as ReactMouseEvent } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import {
@@ -80,10 +79,6 @@ export interface PieSlice {
 	label: string;
 	value: number;
 	color: string;
-	/** Source query of the slice's value column — the drill-down target (present for V2 panels). */
-	queryName?: string;
-	/** Group-by key→value of the slice's source row, used to build drill-down filters. */
-	labels?: Record<string, string>;
 }
 
 /**
@@ -104,7 +99,7 @@ export interface PieChartProps {
 	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
 	 */
 	id?: string;
-	/** Fired when a slice's arc is clicked; carries the DOM event for popover positioning. */
-	onSliceClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
+	/** Fired when a slice (or its legend entry) is clicked. */
+	onSliceClick?: (slice: PieSlice) => void;
 	'data-testid'?: string;
 }

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -3,6 +3,7 @@ import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
+import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -10,7 +11,6 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
-import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,6 +44,7 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
+	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -135,9 +136,11 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		toast.success('The updated graphs & legends are saved');
+		notifications.success({
+			message: 'The updated graphs & legends are saved',
+		});
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -5,7 +5,7 @@ import { render, screen } from 'tests/test-utils';
 import ChartManager from '../ChartManager';
 
 const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockToastSuccess = jest.fn();
+const mockNotificationsSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,11 +46,12 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
-	},
+jest.mock('hooks/useNotifications', () => ({
+	useNotifications: (): { notifications: { success: jest.Mock } } => ({
+		notifications: {
+			success: mockNotificationsSuccess,
+		},
+	}),
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -159,7 +160,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -171,9 +172,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockToastSuccess).toHaveBeenCalledWith(
-			'The updated graphs & legends are saved',
-		);
+		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
+			message: 'The updated graphs & legends are saved',
+		});
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -5,14 +5,6 @@
 	height: 100%;
 	flex-direction: column;
 
-	// Stacked children (the FullView / standalone graph-manager) sit below the chart
-	// in the same container; size the chart region to its content so they aren't
-	// pushed out. Only this case opts out of filling the height — the dashboard grid,
-	// alert preview, and other charts keep 100% so they fill their container.
-	&--with-layout-children {
-		height: auto;
-	}
-
 	&--legend-right {
 		flex-direction: row;
 	}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -63,7 +63,6 @@ export default function ChartLayout({
 				className={cx('chart-layout', {
 					'chart-layout--legend-right':
 						legendConfig.position === LegendPosition.RIGHT,
-					'chart-layout--with-layout-children': !!layoutChildren,
 				})}
 			>
 				<div className="chart-layout__content">

frontend/src/container/PublicDashboardContainer/Panel.tsx

@@ -79,11 +79,13 @@ function Panel({
 		},
 		ENTITY_VERSION_V5,
 		{
-			// Public data is fetched by index and the payload redacts each widget's
-			// filters, so query bodies are identical across panels. Key on panel
-			// identity + time — the only inputs that determine the response — so
-			// panels don't collapse onto one cache entry.
-			queryKey: [widget?.id, index, startTime, endTime],
+			queryKey: [
+				widget?.query,
+				widget?.panelTypes,
+				requestData,
+				startTime,
+				endTime,
+			],
 			retry(failureCount, error): boolean {
 				if (
 					String(error).includes('status: error') &&

frontend/src/container/PublicDashboardContainer/__tests__/Panel.test.tsx

@@ -1,79 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { render } from 'tests/test-utils';
-import { Widgets } from 'types/api/dashboard/getAll';
-
-import Panel from '../Panel';
-
-const useGetQueryRangeMock = jest.fn();
-
-jest.mock('hooks/queryBuilder/useGetQueryRange', () => ({
-	useGetQueryRange: (...args: unknown[]): unknown => {
-		useGetQueryRangeMock(...args);
-		return {
-			data: undefined,
-			isFetching: false,
-			isLoading: false,
-			isSuccess: true,
-			isError: false,
-		};
-	},
-}));
-
-jest.mock('container/GridCardLayout/GridCard/WidgetGraphComponent', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="widget-graph" />,
-}));
-
-const buildWidget = (id: string): Widgets =>
-	({
-		id,
-		panelTypes: PANEL_TYPES.LIST,
-		query: {
-			builder: {
-				queryData: [{ dataSource: 'logs', limit: 100, orderBy: [] }],
-			},
-		},
-		timePreferance: 'GLOBAL_TIME',
-	}) as unknown as Widgets;
-
-describe('Public dashboard Panel', () => {
-	beforeEach(() => {
-		useGetQueryRangeMock.mockClear();
-	});
-
-	it('keys each panel by widget id + index so identical queries do not collide (bug 5503)', () => {
-		render(
-			<>
-				<Panel
-					widget={buildWidget('widget-a')}
-					index={2}
-					dashboardId="dash-1"
-					startTime={100}
-					endTime={200}
-				/>
-				<Panel
-					widget={buildWidget('widget-b')}
-					index={62}
-					dashboardId="dash-1"
-					startTime={100}
-					endTime={200}
-				/>
-			</>,
-		);
-
-		const [callA, callB] = useGetQueryRangeMock.mock.calls;
-		const queryKeyA = callA[2].queryKey;
-		const metaA = callA[4];
-		const queryKeyB = callB[2].queryKey;
-		const metaB = callB[4];
-
-		// Key is panel identity + time only — the redacted query body is not part
-		// of it, so identical query bodies can't collapse two panels onto one key.
-		expect(queryKeyA).toStrictEqual(['widget-a', 2, 100, 200]);
-		expect(queryKeyB).toStrictEqual(['widget-b', 62, 100, 200]);
-		expect(queryKeyA).not.toStrictEqual(queryKeyB);
-
-		expect(metaA.widgetIndex).toBe(2);
-		expect(metaB.widgetIndex).toBe(62);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -4,6 +4,7 @@ import { toast } from '@signozhq/ui/sonner';
 import logEvent from 'api/common/logEvent';
 import {
 	lockDashboardV2,
+	patchDashboardV2,
 	unlockDashboardV2,
 } from 'api/generated/services/dashboard';
 import type {
@@ -17,7 +18,6 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
 import { useCreatePanel } from '../hooks/useCreatePanel';
-import { useOptimisticPatch } from '../hooks/useOptimisticPatch';
 import PanelTypeSelectionModal from '../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
@@ -51,7 +51,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 
 	const { user } = useAppContext();
 	const { showErrorModal } = useErrorModal();
-	const { patchAsync } = useOptimisticPatch();
 	const { isPickerOpen, openPicker, closePicker, createPanel } =
 		useCreatePanel();
 
@@ -89,13 +88,14 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 						value: next,
 					},
 				];
-				await patchAsync(patch);
+				await patchDashboardV2({ id }, patch);
 				toast.success('Dashboard renamed successfully');
+				refetch();
 			} catch (error) {
 				showErrorModal(error as APIError);
 			}
 		},
-		[id, patchAsync, showErrorModal],
+		[id, refetch, showErrorModal],
 	);
 
 	const { isEditing, draft, setDraft, startEdit, cancel, commit } =

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
 import type {
 	DashboardtypesGettableDashboardV2DTO,
 	DashboardtypesJSONPatchOperationDTO,
@@ -8,7 +9,7 @@ import { isEqual } from 'lodash-es';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
+import { useDashboardStore } from '../../store/useDashboardStore';
 import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
 import DashboardInfoForm from './DashboardInfoForm/DashboardInfoForm';
 import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
@@ -22,7 +23,7 @@ interface OverviewProps {
 function Overview({ dashboard }: OverviewProps): JSX.Element {
 	const id = dashboard.id;
 
-	const { patchAsync } = useOptimisticPatch();
+	const refetch = useDashboardStore((s) => s.refetch);
 
 	const title = dashboard.spec.display.name;
 	const description = dashboard.spec.display.description ?? '';
@@ -95,14 +96,15 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 
 		try {
 			setIsSaving(true);
-			await patchAsync(ops);
+			await patchDashboardV2({ id }, ops);
 			toast.success('Dashboard updated');
+			refetch();
 		} catch (error) {
 			showErrorModal(error as APIError);
 		} finally {
 			setIsSaving(false);
 		}
-	}, [buildPatch, patchAsync, showErrorModal]);
+	}, [id, buildPatch, refetch, showErrorModal]);
 
 	useEffect(() => {
 		let numberOfUnsavedChanges = 0;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/useSaveVariables.ts

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
 import { toast } from '@signozhq/ui/sonner';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { useDashboardStore } from '../../store/useDashboardStore';
 import { formModelToDto } from './variableAdapters';
 import type { VariableFormModel } from './variableFormModel';
@@ -14,9 +14,14 @@ interface UseSaveVariables {
 	isSaving: boolean;
 }
 
+/**
+ * Persists the dashboard's variable list via a single `/spec/variables` patch,
+ * then refetches. Mirrors the General-settings save flow (patch → toast →
+ * refetch → surface errors).
+ */
 export function useSaveVariables(): UseSaveVariables {
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const { patchAsync } = useOptimisticPatch();
+	const refetch = useDashboardStore((s) => s.refetch);
 	const { showErrorModal } = useErrorModal();
 	const [isSaving, setIsSaving] = useState(false);
 
@@ -28,8 +33,9 @@ export function useSaveVariables(): UseSaveVariables {
 			const dtos = variables.map(formModelToDto);
 			try {
 				setIsSaving(true);
-				await patchAsync(buildVariablesPatch(dtos));
+				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
 				toast.success('Variables updated');
+				refetch();
 				return true;
 			} catch (error) {
 				showErrorModal(error as APIError);
@@ -38,7 +44,7 @@ export function useSaveVariables(): UseSaveVariables {
 				setIsSaving(false);
 			}
 		},
-		[dashboardId, patchAsync, showErrorModal],
+		[dashboardId, refetch, showErrorModal],
 	);
 
 	return { save, isSaving };

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -40,8 +40,6 @@ interface ConfigPaneProps {
 	 */
 	panel: DashboardtypesPanelDTO;
 	panelId: string;
-	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
-	metricUnit?: string;
 }
 
 /**
@@ -60,7 +58,6 @@ function ConfigPane({
 	stepInterval,
 	panel,
 	panelId,
-	metricUnit,
 }: ConfigPaneProps): JSX.Element {
 	const panelKind = spec.plugin.kind;
 	const definition = getPanelDefinition(panelKind);
@@ -121,7 +118,6 @@ function ConfigPane({
 									onChangePanelKind={onChangePanelKind}
 									queryType={queryType}
 									stepInterval={stepInterval}
-									metricUnit={metricUnit}
 								/>
 							))}
 						</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.tsx

@@ -1,12 +1,13 @@
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { EQueryType } from 'types/common/dashboard';
+import { EQueryType } from 'types/common/dashboard';
 
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
 
 import styles from './PanelTypeSwitcher.module.scss';
-import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
+import { getPanelTypeDisabledReason } from './utils';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
@@ -30,7 +31,22 @@ function PanelTypeSwitcher({
 	signal,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	const items = usePanelTypeSelectItems({ queryType, signal });
+	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
+		// One reason drives both the disabled flag and the tooltip, so they can't disagree.
+		const disabledReason = getPanelTypeDisabledReason({
+			kind: panelKind,
+			queryType: queryType ?? EQueryType.QUERY_BUILDER,
+			signal,
+			label,
+		});
+		return {
+			value: panelKind,
+			label,
+			icon: <Icon size={14} />,
+			disabled: !!disabledReason,
+			tooltip: disabledReason,
+		};
+	});
 
 	return (
 		<div className={styles.field}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -1,48 +0,0 @@
-import { useMemo } from 'react';
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
-
-import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
-import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
-
-import { getPanelTypeDisabledReason } from './utils';
-
-interface UsePanelTypeSelectItemsArgs {
-	/** Active query type — a kind that can't be authored in it is disabled (defaults to Query Builder). */
-	queryType?: EQueryType;
-	/** Current datasource — also gates the disabled rule (List needs logs/traces, not metrics). */
-	signal?: TelemetrytypesSignalDTO;
-}
-
-/**
- * Visualization-kind options for a `ConfigSelect`, each disabled (with a reason
- * tooltip) when the active query type or signal is incompatible — resolved through
- * the capabilities guard. Shared by the editor's `PanelTypeSwitcher` and the View
- * modal's header so the two selectors apply the same rule and can't drift.
- */
-export function usePanelTypeSelectItems({
-	queryType,
-	signal,
-}: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
-	return useMemo(
-		() =>
-			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
-				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
-				const disabledReason = getPanelTypeDisabledReason({
-					kind: panelKind,
-					queryType: queryType ?? EQueryType.QUERY_BUILDER,
-					signal,
-					label,
-				});
-				return {
-					value: panelKind,
-					label,
-					icon: <Icon size={14} />,
-					disabled: !!disabledReason,
-					tooltip: disabledReason,
-				};
-			}),
-		[queryType, signal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx

@@ -34,7 +34,6 @@ function SectionSlot({
 	onChangePanelKind,
 	queryType,
 	stepInterval,
-	metricUnit,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -75,7 +74,6 @@ function SectionSlot({
 				onChangePanelKind={onChangePanelKind}
 				queryType={queryType}
 				stepInterval={stepInterval}
-				metricUnit={metricUnit}
 			/>
 		</SettingsSection>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -19,6 +19,4 @@ export interface SectionEditorContext {
 	yAxisUnit?: string;
 	queryType?: EQueryType;
 	stepInterval?: number;
-	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
-	metricUnit?: string;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesField.tsx

@@ -46,10 +46,11 @@ function DisconnectValuesField({
 	onChange,
 }: DisconnectValuesFieldProps): JSX.Element {
 	const duration = value?.fillLessThan || undefined;
-	// `fillOnlyBelow` is authoritative; fall back to a stored duration for legacy panels.
-	const isThreshold = value?.fillOnlyBelow ?? !!duration;
-	// Remember the last committed threshold so Never → Threshold restores it.
-	const [lastDuration, setLastDuration] = useState<string | undefined>(duration);
+	const isThreshold = !!duration;
+	// Remember the last threshold so toggling Never → Threshold restores it.
+	const [lastDuration, setLastDuration] = useState(
+		duration ?? defaultDuration(stepInterval),
+	);
 
 	useEffect(() => {
 		if (duration) {
@@ -58,17 +59,11 @@ function DisconnectValuesField({
 	}, [duration]);
 
 	const handleMode = (mode: DisconnectValuesMode): void => {
-		if (mode === DisconnectValuesMode.THRESHOLD) {
-			onChange({
-				...value,
-				fillOnlyBelow: true,
-				// Seed from the live stepInterval (async — undefined until results load), not mount.
-				fillLessThan: lastDuration ?? defaultDuration(stepInterval),
-			});
-			return;
-		}
-		// Never spans every gap; drop the duration so the renderer reads a clean "span all".
-		onChange({ ...value, fillOnlyBelow: false, fillLessThan: undefined });
+		onChange(
+			mode === DisconnectValuesMode.THRESHOLD
+				? { ...value, fillLessThan: lastDuration }
+				: undefined,
+		);
 	};
 
 	return (
@@ -84,16 +79,14 @@ function DisconnectValuesField({
 					onChange={handleMode}
 				/>
 			</div>
-			{isThreshold && duration && (
+			{isThreshold && (
 				<div className={styles.field}>
 					<Typography.Text>Threshold value</Typography.Text>
 					<DisconnectValuesThresholdInput
 						testId={`${testId}-value`}
-						value={duration}
+						value={lastDuration}
 						minValue={stepInterval}
-						onChange={(next): void =>
-							onChange({ ...value, fillOnlyBelow: true, fillLessThan: next })
-						}
+						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
 					/>
 				</div>
 			)}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesThresholdInput.tsx

@@ -14,28 +14,6 @@ interface DisconnectValuesThresholdInputProps {
 	onChange: (duration: string) => void;
 }
 
-/**
- * Inline error for a raw duration, or `null` when valid and in range. The parse is
- * guarded: `isValidTimeSpan` passes some strings `intervalToSeconds` throws on (e.g. "5x").
- */
-function validationError(raw: string, minValue?: number): string | null {
-	let seconds: number;
-	try {
-		seconds = rangeUtil.isValidTimeSpan(raw)
-			? rangeUtil.intervalToSeconds(raw)
-			: NaN;
-	} catch {
-		seconds = NaN;
-	}
-	if (!Number.isFinite(seconds) || seconds <= 0) {
-		return 'Enter a valid duration (e.g. 30s, 1m, 1h)';
-	}
-	if (minValue !== undefined && seconds < minValue) {
-		return `Threshold should be > ${rangeUtil.secondsToHms(minValue)}`;
-	}
-	return null;
-}
-
 /**
  * Duration input for the span-gaps threshold: shows/accepts and reports a human
  * duration ("30s", "1m", "1h"), which is the value stored verbatim in
@@ -58,21 +36,24 @@ function DisconnectValuesThresholdInput({
 		setError(null);
 	}, [value]);
 
-	// Validate live so an invalid entry surfaces immediately, not only on blur.
-	const handleText = (raw: string): void => {
-		setText(raw);
-		setError(raw ? validationError(raw, minValue) : null);
-	};
-
 	const commit = (raw: string): void => {
-		// Skip no-op commits: blur fires when clicking the Never toggle, and re-emitting
-		// the unchanged value there would race the toggle and snap back to Threshold.
-		if (!raw || raw === value) {
+		if (!raw) {
 			return;
 		}
-		const message = validationError(raw, minValue);
-		if (message) {
-			setError(message);
+		let seconds: number;
+		try {
+			seconds = rangeUtil.isValidTimeSpan(raw)
+				? rangeUtil.intervalToSeconds(raw)
+				: NaN;
+		} catch {
+			seconds = NaN;
+		}
+		if (!Number.isFinite(seconds) || seconds <= 0) {
+			setError('Enter a valid duration (e.g. 30s, 1m, 1h)');
+			return;
+		}
+		if (minValue !== undefined && seconds < minValue) {
+			setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
 			return;
 		}
 		setError(null);
@@ -88,9 +69,12 @@ function DisconnectValuesThresholdInput({
 				status={error ? 'error' : undefined}
 				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
 				value={text}
-				onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-					handleText(e.target.value)
-				}
+				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+					setText(e.target.value);
+					if (error) {
+						setError(null);
+					}
+				}}
 				onBlur={(e): void => commit(e.currentTarget.value)}
 				onKeyDown={(e): void => {
 					if (e.key === 'Enter') {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/ChartAppearanceSection.test.tsx

@@ -1,34 +1,9 @@
-import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-	DashboardtypesLineStyleDTO,
-	type DashboardtypesTimeSeriesChartAppearanceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesLineStyleDTO } from 'api/generated/services/sigNoz.schemas';
 
 import ChartAppearanceSection from '../ChartAppearanceSection';
 
-/** Stateful wrapper that feeds onChange back as the spec, mirroring the real editor. */
-function StatefulSpanGaps({
-	initial,
-	stepInterval,
-}: {
-	initial?: DashboardtypesTimeSeriesChartAppearanceDTO;
-	stepInterval?: number;
-}): JSX.Element {
-	const [value, setValue] = useState<
-		DashboardtypesTimeSeriesChartAppearanceDTO | undefined
-	>(initial);
-	return (
-		<ChartAppearanceSection
-			value={value}
-			controls={{ spanGaps: true }}
-			stepInterval={stepInterval}
-			onChange={setValue}
-		/>
-	);
-}
-
 // Open the antd Select by clicking its selector, then pick the option by label. The
 // line-style and fill-mode controls are ConfigSegmented (buttons), so this helper is
 // only used for the line-interpolation ConfigSelect.
@@ -164,7 +139,7 @@ describe('ChartAppearanceSection', () => {
 		await user.click(screen.getByText('Threshold'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '1m' },
+			spanGaps: { fillLessThan: '1m' },
 		});
 	});
 
@@ -187,7 +162,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
+			spanGaps: { fillLessThan: '5m' },
 		});
 	});
 
@@ -208,7 +183,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '300' },
+			spanGaps: { fillLessThan: '300' },
 		});
 	});
 
@@ -225,24 +200,7 @@ describe('ChartAppearanceSection', () => {
 
 		await user.click(screen.getByText('Never'));
 
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: false, fillLessThan: undefined },
-		});
-	});
-
-	it('selects Never when fillOnlyBelow is false even if a duration lingers', () => {
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillOnlyBelow: false, fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		// The flag is authoritative: a stale fillLessThan must not show Threshold.
-		expect(
-			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
-		).not.toBeInTheDocument();
+		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
 	});
 
 	it('shows an error and does not commit an invalid duration', async () => {
@@ -286,117 +244,4 @@ describe('ChartAppearanceSection', () => {
 		expect(screen.getByText(/Threshold should be >/)).toBeInTheDocument();
 		expect(onChange).not.toHaveBeenCalled();
 	});
-
-	it('seeds the threshold from the step interval when switching to Threshold', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				stepInterval={300}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByText('Threshold'));
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
-		});
-	});
-
-	it('seeds from the step interval even when it arrives after mount', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		// The step interval is undefined until the query response carries step metadata,
-		// so the panel first renders without it and receives it on a later render.
-		const { rerender } = render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-		rerender(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				stepInterval={300}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByText('Threshold'));
-
-		// Regression: a value seeded at mount would still be the 1m fallback.
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
-		});
-	});
-
-	it('shows a validation error while typing, before blur', async () => {
-		const user = userEvent.setup();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		await user.clear(input);
-		await user.type(input, 'abc');
-		// No blur / Enter — the error must already be visible.
-
-		expect(screen.getByText(/valid duration/i)).toBeInTheDocument();
-	});
-
-	it('does not re-commit the threshold when blurred without a change', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		await user.click(input);
-		await user.tab();
-
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it('fully switches from Threshold to Never (the input disappears)', async () => {
-		const user = userEvent.setup();
-		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '1m' } }} />);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-span-gaps-value'),
-		).toBeInTheDocument();
-
-		// Focus the input first so clicking Never also fires its blur (the toggle race).
-		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-value'));
-		await user.click(screen.getByText('Never'));
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('remembers the last threshold when toggling Never → Threshold', async () => {
-		const user = userEvent.setup();
-		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '5m' } }} />);
-
-		await user.click(screen.getByText('Never'));
-		await user.click(screen.getByText('Threshold'));
-
-		expect(screen.getByTestId('panel-editor-v2-span-gaps-value')).toHaveValue(
-			'5m',
-		);
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/FormattingSection.tsx

@@ -14,7 +14,7 @@ import ColumnUnits from './ColumnUnits';
 import styles from './FormattingSection.module.scss';
 
 type FormattingSectionProps = SectionEditorProps<SectionKind.Formatting> &
-	Pick<SectionEditorContext, 'tableColumns' | 'metricUnit'>;
+	Pick<SectionEditorContext, 'tableColumns'>;
 
 // `full` means "show the raw value, no rounding"; the digits round to that many places.
 const DECIMAL_OPTIONS: {
@@ -39,7 +39,6 @@ function FormattingSection({
 	controls,
 	onChange,
 	tableColumns = [],
-	metricUnit,
 }: FormattingSectionProps): JSX.Element {
 	return (
 		<>
@@ -51,7 +50,6 @@ function FormattingSection({
 						data-testid="panel-editor-v2-unit"
 						source={YAxisSource.DASHBOARDS}
 						value={value?.unit}
-						initialValue={metricUnit}
 						onChange={(unit): void => onChange({ ...value, unit })}
 					/>
 				</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/__tests__/FormattingSection.test.tsx

@@ -3,8 +3,6 @@ import userEvent from '@testing-library/user-event';
 
 import FormattingSection from '../FormattingSection';
 
-// Auto-seeding is covered by useMetricYAxisUnit's tests; here `metricUnit` is just a prop.
-
 // Open the Decimals select (clicking its antd selector) and pick the option with the
 // given visible label.
 async function pickDecimal(label: string): Promise<void> {
@@ -73,31 +71,4 @@ describe('FormattingSection', () => {
 			decimalPrecision: '2',
 		});
 	});
-
-	it('warns when the selected unit mismatches the metric unit', () => {
-		// metric sent in seconds, but bytes is selected.
-		render(
-			<FormattingSection
-				value={{ unit: 'By' }}
-				controls={{ unit: true }}
-				metricUnit="s"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByLabelText('warning')).toBeInTheDocument();
-	});
-
-	it('shows no warning when the selected unit matches the metric unit', () => {
-		render(
-			<FormattingSection
-				value={{ unit: 's' }}
-				controls={{ unit: true }}
-				metricUnit="s"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.queryByLabelText('warning')).not.toBeInTheDocument();
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -82,15 +82,6 @@ function ThresholdsSection({
 	// Which row is being edited, and whether it was just added (so Discard removes it).
 	const [editingIndex, setEditingIndex] = useState<number | null>(null);
 	const [unsavedIndex, setUnsavedIndex] = useState<number | null>(null);
-	// The saved threshold captured on edit entry, restored if the edit is discarded
-	// (edits stream into the spec live, so Discard can't just drop a local draft).
-	const editSnapshot = useRef<AnyThreshold | null>(null);
-
-	const updateAt =
-		(index: number) =>
-		(next: AnyThreshold): void => {
-			onChange(thresholds.map((t, i) => (i === index ? next : t)));
-		};
 
 	const addThreshold = (): void => {
 		const nextIndex = thresholds.length;
@@ -99,11 +90,6 @@ function ThresholdsSection({
 		setUnsavedIndex(nextIndex);
 	};
 
-	const beginEdit = (index: number): void => {
-		editSnapshot.current = thresholds[index] ?? null;
-		setEditingIndex(index);
-	};
-
 	const saveAt =
 		(index: number) =>
 		(next: AnyThreshold): void => {
@@ -119,15 +105,11 @@ function ThresholdsSection({
 	};
 
 	const discardAt = (index: number) => (): void => {
-		// A never-saved row is removed; otherwise revert the live edits to the snapshot.
+		// Discarding a row that was never saved removes it; otherwise just exit edit.
 		if (index === unsavedIndex) {
 			removeAt(index);
 			return;
 		}
-		const original = editSnapshot.current;
-		if (original) {
-			onChange(thresholds.map((t, i) => (i === index ? original : t)));
-		}
 		setEditingIndex(null);
 	};
 
@@ -138,9 +120,8 @@ function ThresholdsSection({
 			index,
 			yAxisUnit,
 			isEditing: editingIndex === index,
-			onEdit: (): void => beginEdit(index),
+			onEdit: (): void => setEditingIndex(index),
 			onSave: saveAt(index),
-			onLiveChange: updateAt(index),
 			onDiscard: discardAt(index),
 			onRemove: (): void => removeAt(index),
 		};

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.comparison.test.tsx

@@ -5,7 +5,7 @@ import {
 	DashboardtypesThresholdFormatDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { render, screen, userEvent } from 'tests/test-utils';
 
 import UnifiedThresholdsSection from '../ThresholdsSection';
 
@@ -36,16 +36,9 @@ const THRESHOLDS: DashboardtypesComparisonThresholdDTO[] = [
 	},
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard/live).
-function Harness({
-	yAxisUnit,
-	initial = [],
-}: {
-	yAxisUnit?: string;
-	initial?: DashboardtypesComparisonThresholdDTO[];
-}): JSX.Element {
-	const [value, setValue] =
-		useState<DashboardtypesComparisonThresholdDTO[]>(initial);
+// Stateful harness for flows that depend on the value updating (add/discard).
+function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
+	const [value, setValue] = useState<DashboardtypesComparisonThresholdDTO[]>([]);
 	return (
 		<ComparisonThresholdsSection
 			value={value}
@@ -149,46 +142,24 @@ describe('ComparisonThresholdsSection', () => {
 		expect(valueInput).toHaveValue(5);
 	});
 
-	it('reflects edits live (before Save) so the preview can react', async () => {
+	it('does not commit edits when Discard is clicked', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(
 			<ComparisonThresholdsSection value={THRESHOLDS} onChange={onChange} />,
 		);
 
-		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
-		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
-		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
-
-		// No Save click — the latest edit is pushed up (debounced) for the preview.
-		await waitFor(() =>
-			expect(onChange).toHaveBeenLastCalledWith([
-				{
-					value: 90,
-					color: '#F5B225',
-					operator: DashboardtypesComparisonOperatorDTO.above,
-					unit: 'percent',
-					format: DashboardtypesThresholdFormatDTO.background,
-				},
-			]),
-		);
-	});
-
-	it('reverts the live edits to the saved value on Discard', async () => {
-		const user = userEvent.setup();
-		render(<Harness initial={THRESHOLDS} />);
-
 		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
 		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
 		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
 		await user.click(screen.getByTestId('comparison-threshold-discard-0'));
 
-		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
+		expect(onChange).not.toHaveBeenCalled();
+		// Back to view mode.
 		expect(
 			screen.queryByTestId('comparison-threshold-value-0'),
 		).not.toBeInTheDocument();
-		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
-		expect(screen.getByTestId('comparison-threshold-value-0')).toHaveValue(80);
+		expect(screen.getByTestId('comparison-threshold-edit-0')).toBeInTheDocument();
 	});
 
 	it('removes a threshold from view mode', async () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/__tests__/ThresholdsSection.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { DashboardtypesThresholdWithLabelDTO } from 'api/generated/services/sigNoz.schemas';
 import type { AnyThreshold } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
@@ -10,16 +10,10 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard/live);
+// Stateful harness for flows that depend on the value updating (add/discard);
 // omits `controls` to exercise the default `label` variant.
-function Harness({
-	yAxisUnit,
-	initial = [],
-}: {
-	yAxisUnit?: string;
-	initial?: AnyThreshold[];
-}): JSX.Element {
-	const [value, setValue] = useState<AnyThreshold[]>(initial);
+function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
+	const [value, setValue] = useState<AnyThreshold[]>([]);
 	return (
 		<ThresholdsSection value={value} onChange={setValue} yAxisUnit={yAxisUnit} />
 	);
@@ -43,20 +37,19 @@ describe('ThresholdsSection', () => {
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 	});
 
-	it('edits a threshold value and commits it on Save', async () => {
-		const user = userEvent.setup();
+	it('edits a threshold value and commits it on Save', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		await user.click(screen.getByTestId('threshold-edit-0'));
-		const valueInput = screen.getByTestId('threshold-value-0');
-		expect(valueInput).toHaveValue(80);
+		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
 
-		await user.clear(valueInput);
-		await user.type(valueInput, '90');
-		await user.click(screen.getByTestId('threshold-save-0'));
+		fireEvent.change(screen.getByTestId('threshold-value-0'), {
+			target: { value: '90' },
+		});
+		fireEvent.click(screen.getByTestId('threshold-save-0'));
 
-		expect(onChange).toHaveBeenLastCalledWith([
+		expect(onChange).toHaveBeenCalledWith([
 			{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
 		]);
 	});
@@ -77,63 +70,43 @@ describe('ThresholdsSection', () => {
 		]);
 	});
 
-	it('reflects edits live (before Save) so the preview can react', async () => {
-		const user = userEvent.setup();
+	it('does not commit edits when Discard is clicked', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		await user.click(screen.getByTestId('threshold-edit-0'));
-		await user.clear(screen.getByTestId('threshold-value-0'));
-		await user.type(screen.getByTestId('threshold-value-0'), '90');
+		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		fireEvent.change(screen.getByTestId('threshold-value-0'), {
+			target: { value: '90' },
+		});
+		fireEvent.click(screen.getByTestId('threshold-discard-0'));
 
-		// No Save click — the edit is pushed up (debounced) for the preview to render.
-		await waitFor(() =>
-			expect(onChange).toHaveBeenLastCalledWith([
-				{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
-			]),
-		);
-	});
-
-	it('reverts the live edits to the saved value on Discard', async () => {
-		const user = userEvent.setup();
-		render(<Harness initial={THRESHOLDS} />);
-
-		await user.click(screen.getByTestId('threshold-edit-0'));
-		await user.clear(screen.getByTestId('threshold-value-0'));
-		await user.type(screen.getByTestId('threshold-value-0'), '90');
-		await user.click(screen.getByTestId('threshold-discard-0'));
-
-		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
+		expect(onChange).not.toHaveBeenCalled();
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
-		await user.click(screen.getByTestId('threshold-edit-0'));
-		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 	});
 
-	it('removes a threshold from view mode', async () => {
-		const user = userEvent.setup();
+	it('removes a threshold from view mode', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		await user.click(screen.getByTestId('threshold-remove-0'));
+		fireEvent.click(screen.getByTestId('threshold-remove-0'));
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
 
-	it('adds a threshold that opens in edit mode, and discards it away', async () => {
-		const user = userEvent.setup();
+	it('adds a threshold that opens in edit mode, and discards it away', () => {
 		render(<Harness />);
 
-		await user.click(screen.getByTestId('panel-editor-v2-add-threshold'));
+		fireEvent.click(screen.getByTestId('panel-editor-v2-add-threshold'));
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
 
 		// Discarding a never-saved row removes it entirely.
-		await user.click(screen.getByTestId('threshold-discard-0'));
+		fireEvent.click(screen.getByTestId('threshold-discard-0'));
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 		expect(screen.queryByTestId('threshold-edit-0')).not.toBeInTheDocument();
 	});
 
-	it('flags a threshold unit in a different category than the y-axis unit', async () => {
-		const user = userEvent.setup();
+	it('flags a threshold unit in a different category than the y-axis unit', () => {
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -142,12 +115,11 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByTestId('threshold-edit-0'));
+		fireEvent.click(screen.getByTestId('threshold-edit-0'));
 		expect(screen.getByTestId('threshold-unit-invalid-0')).toBeInTheDocument();
 	});
 
-	it('does not flag a threshold unit in the same category as the y-axis unit', async () => {
-		const user = userEvent.setup();
+	it('does not flag a threshold unit in the same category as the y-axis unit', () => {
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -156,7 +128,7 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		await user.click(screen.getByTestId('threshold-edit-0'));
+		fireEvent.click(screen.getByTestId('threshold-edit-0'));
 		expect(
 			screen.queryByTestId('threshold-unit-invalid-0'),
 		).not.toBeInTheDocument();

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/ComparisonThresholdRow.tsx

@@ -27,7 +27,6 @@ interface ComparisonThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesComparisonThresholdDTO) => void;
-	onLiveChange: (next: DashboardtypesComparisonThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -43,15 +42,10 @@ function ComparisonThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: ComparisonThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
 
 	const symbol = threshold.operator ? OPERATOR_SYMBOL[threshold.operator] : '';
 	const summary = (

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx

@@ -20,7 +20,6 @@ interface LabelThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesThresholdWithLabelDTO) => void;
-	onLiveChange: (next: DashboardtypesThresholdWithLabelDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -33,15 +32,10 @@ function LabelThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: LabelThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
 
 	// Persist an empty-string label when none was entered — the spec requires a string.
 	const handleSave = useCallback((): void => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/TableThresholdRow.tsx

@@ -28,7 +28,6 @@ interface TableThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesTableThresholdDTO) => void;
-	onLiveChange: (next: DashboardtypesTableThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -46,15 +45,10 @@ function TableThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: TableThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
 
 	// Stored columnName is the query key; resolve its label + configured unit.
 	const columnUnit = tableColumns.find((c) => c.key === draft.columnName)?.unit;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/shared/useThresholdDraft.ts

@@ -1,5 +1,4 @@
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 
 interface ThresholdDraft<T> {
 	draft: T;
@@ -8,25 +7,17 @@ interface ThresholdDraft<T> {
 	setValue: (raw: string) => void;
 }
 
-const LIVE_PREVIEW_DEBOUNCE_MS = 150;
-
 /**
  * Local draft for a threshold row, shared by every variant. Snapshots the saved
- * threshold on each entry into edit mode and exposes the numeric `value` setter all
- * variants use. `onLiveChange` mirrors the draft into the spec as the user edits, so the
- * panel preview updates live (without Save); the section reverts it on Discard.
+ * threshold on each entry into edit mode (so Discard simply drops the draft and the
+ * next edit starts clean) and exposes the numeric `value` setter all variants use.
  */
 export function useThresholdDraft<T extends { value: number }>(
 	threshold: T,
 	isEditing: boolean,
-	onLiveChange?: (draft: T) => void,
 ): ThresholdDraft<T> {
 	const [draft, setDraft] = useState<T>(threshold);
 
-	const emitLiveChange = useDebouncedFn((next) => {
-		onLiveChange?.(next as T);
-	}, LIVE_PREVIEW_DEBOUNCE_MS);
-
 	useEffect(() => {
 		if (isEditing) {
 			setDraft(threshold);
@@ -34,20 +25,6 @@ export function useThresholdDraft<T extends { value: number }>(
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- snapshot only on edit entry
 	}, [isEditing]);
 
-	useEffect(() => {
-		if (isEditing) {
-			emitLiveChange(draft);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- propagate on draft change only
-	}, [draft]);
-
-	useEffect(() => {
-		if (!isEditing) {
-			emitLiveChange.cancel();
-		}
-		return (): void => emitLiveChange.cancel();
-	}, [isEditing, emitLiveChange]);
-
 	const setValue = (raw: string): void => {
 		const next = Number(raw);
 		setDraft((d) => ({ ...d, value: Number.isNaN(next) ? d.value : next }));

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -164,7 +164,7 @@ function PanelEditorQueryBuilder({
 							<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
 							<RunQueryBtn
 								className="run-query-dashboard-btn"
-								label="Run Query"
+								label="Stage & Run Query"
 								onStageRunQuery={onStageRunQuery}
 								isLoadingQueries={isLoadingQueries}
 								handleCancelQuery={onCancelQuery}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.module.scss

@@ -49,13 +49,6 @@
 	background: var(--l2-background);
 }
 
-// Standalone View stacks the graph-manager below the chart inside the surface (it
-// must stay within the chart's PlotContext). Let it flow out of the surface so the
-// modal body scrolls as a whole, instead of clipping it or scrolling the panel.
-.surfaceStacked {
-	overflow: visible;
-}
-
 .state {
 	flex: 1;
 	display: flex;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -1,13 +1,11 @@
 import { useState } from 'react';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
 	PanelPagination,
@@ -32,14 +30,6 @@ interface PreviewPaneProps {
 	onDragSelect: (start: number, end: number) => void;
 	/** Server-side pager for raw/list panels; absent for non-paginated panels. */
 	pagination?: PanelPagination;
-	/** Render context — defaults to the editor's DASHBOARD_EDIT; the View modal passes STANDALONE_VIEW. */
-	panelMode?: PanelMode;
-	/** Hide the preview's top row entirely (query-type badge + time picker) — the View modal has its own header. */
-	hideHeader?: boolean;
-	/** Dashboard-wide preferences (cursor sync, …) forwarded to the body; the modal isolates cursor-sync. */
-	dashboardPreference?: DashboardPreference;
-	/** Close the standalone View modal — forwarded to the time-series/bar graph manager. */
-	onCloseStandaloneView?: () => void;
 }
 
 /**
@@ -57,10 +47,6 @@ function PreviewPane({
 	refetch,
 	onDragSelect,
 	pagination,
-	panelMode = PanelMode.DASHBOARD_EDIT,
-	hideHeader = false,
-	dashboardPreference,
-	onCloseStandaloneView,
 }: PreviewPaneProps): JSX.Element {
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind];
 	const queryType = getPanelQueryType(panel);
@@ -72,24 +58,18 @@ function PreviewPane({
 
 	return (
 		<div className={styles.preview}>
-			{!hideHeader && (
-				<div className={styles.header}>
-					<PlotTag
-						queryType={queryType}
-						panelType={panelType}
-						className={styles.queryType}
-					/>
-					<div className={styles.dateTimeSelector}>
-						<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					</div>
+			<div className={styles.header}>
+				<PlotTag
+					queryType={queryType}
+					panelType={panelType}
+					className={styles.queryType}
+				/>
+				<div className={styles.dateTimeSelector}>
+					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
 				</div>
-			)}
+			</div>
 			<div className={styles.container}>
-				<div
-					className={cx(styles.surface, {
-						[styles.surfaceStacked]: panelMode === PanelMode.STANDALONE_VIEW,
-					})}
-				>
+				<div className={styles.surface}>
 					<PanelHeader
 						panelId={panelId}
 						panel={panel}
@@ -110,11 +90,9 @@ function PreviewPane({
 						error={error}
 						refetch={refetch}
 						onDragSelect={onDragSelect}
-						panelMode={panelMode}
-						dashboardPreference={dashboardPreference}
+						panelMode={PanelMode.DASHBOARD_EDIT}
 						searchTerm={searchable ? searchTerm : undefined}
 						pagination={pagination}
-						onCloseStandaloneView={onCloseStandaloneView}
 					/>
 				</div>
 			</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/PanelEditorContainer.test.tsx

@@ -1,268 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import PanelEditorContainer from '../index';
-
-/**
- * Characterization test for the editor's composition: which derived values and
- * options it forwards to the draft/query/query-sync/type-switch hooks and to its
- * children. The leaf hooks are mocked as arg-capturing spies so this pins the
- * wiring; it stays valid (and guards behavior) after that wiring is pulled into a
- * shared edit-session hook, since the mocks intercept the leaf hooks either way.
- */
-
-const mockSetSpec = jest.fn();
-const mockRefetch = jest.fn();
-const mockCancelQuery = jest.fn();
-const mockBuildSaveSpec = jest.fn((spec: unknown) => spec);
-const mockOnChangePanelKind = jest.fn();
-const mockSave = jest.fn().mockResolvedValue(undefined);
-
-const mockUseDraft = jest.fn();
-jest.mock('../hooks/usePanelEditorDraft', () => ({
-	usePanelEditorDraft: (panel: unknown): unknown => mockUseDraft(panel),
-}));
-
-const mockUseQuery = jest.fn();
-jest.mock('../../hooks/usePanelQuery', () => ({
-	usePanelQuery: (args: unknown): unknown => mockUseQuery(args),
-}));
-
-const mockUseQuerySync = jest.fn();
-jest.mock('../hooks/usePanelEditorQuerySync', () => ({
-	usePanelEditorQuerySync: (args: unknown): unknown => mockUseQuerySync(args),
-}));
-
-const mockUseTypeSwitch = jest.fn();
-jest.mock('../hooks/usePanelTypeSwitch', () => ({
-	usePanelTypeSwitch: (args: unknown): unknown => mockUseTypeSwitch(args),
-}));
-
-jest.mock('../hooks/usePanelEditorSave', () => ({
-	usePanelEditorSave: (): unknown => ({ save: mockSave, isSaving: false }),
-}));
-
-jest.mock('../hooks/useSwitchColumnsOnSignalChange', () => ({
-	useSwitchColumnsOnSignalChange: jest.fn(),
-}));
-jest.mock('../hooks/useSeedNewListColumns', () => ({
-	useSeedNewListColumns: jest.fn(),
-}));
-jest.mock('../hooks/useLegendSeries', () => ({
-	useLegendSeries: (): [] => [],
-}));
-jest.mock('../hooks/useTableColumns', () => ({
-	useTableColumns: (): [] => [],
-}));
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => ({ currentQuery: { queryType: 'builder' } }),
-}));
-jest.mock(
-	'../../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions',
-	() => ({
-		usePanelInteractions: (): unknown => ({
-			onDragSelect: jest.fn(),
-			dashboardPreference: {},
-		}),
-	}),
-);
-
-jest.mock('@signozhq/ui/resizable', () => ({
-	__esModule: true,
-	ResizablePanelGroup: ({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element => <div>{children}</div>,
-	ResizablePanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-	ResizableHandle: (): null => null,
-	useDefaultLayout: (): unknown => ({
-		defaultLayout: undefined,
-		onLayoutChanged: jest.fn(),
-	}),
-}));
-jest.mock('@signozhq/ui/sonner', () => ({
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-// Children mocked to capture props (and expose a Save trigger / footer slot).
-const mockHeaderProps = jest.fn();
-jest.mock('../Header/Header', () => ({
-	__esModule: true,
-	default: (props: { onSave: () => void }): JSX.Element => {
-		mockHeaderProps(props);
-		return (
-			<button type="button" data-testid="editor-save" onClick={props.onSave}>
-				save
-			</button>
-		);
-	},
-}));
-const mockPreviewProps = jest.fn();
-jest.mock('../PreviewPane/PreviewPane', () => ({
-	__esModule: true,
-	default: (props: unknown): JSX.Element => {
-		mockPreviewProps(props);
-		return <div data-testid="preview" />;
-	},
-}));
-const mockQbProps = jest.fn();
-jest.mock('../PanelEditorQueryBuilder/PanelEditorQueryBuilder', () => ({
-	__esModule: true,
-	default: (props: { footer?: React.ReactNode }): JSX.Element => {
-		mockQbProps(props);
-		return <div data-testid="qb">{props.footer}</div>;
-	},
-}));
-const mockConfigProps = jest.fn();
-jest.mock('../ConfigPane/ConfigPane', () => ({
-	__esModule: true,
-	default: (props: unknown): JSX.Element => {
-		mockConfigProps(props);
-		return <div data-testid="config" />;
-	},
-}));
-jest.mock('../ListColumnsEditor/ListColumnsEditor', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="list-columns" />,
-}));
-
-function makePanel(kind: string): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'CPU' },
-			plugin: { kind, spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-const baseProps = {
-	dashboardId: 'dash-1',
-	panelId: 'panel-1',
-	onClose: jest.fn(),
-	onSaved: jest.fn(),
-};
-
-function setup(
-	panel: DashboardtypesPanelDTO,
-	overrides?: Partial<React.ComponentProps<typeof PanelEditorContainer>>,
-): void {
-	mockUseDraft.mockReturnValue({
-		draft: panel,
-		spec: panel.spec,
-		setSpec: mockSetSpec,
-		isSpecDirty: false,
-	});
-	mockUseQuery.mockReturnValue({
-		data: { response: undefined },
-		isFetching: false,
-		error: null,
-		cancelQuery: mockCancelQuery,
-		refetch: mockRefetch,
-		pagination: undefined,
-	});
-	mockUseQuerySync.mockReturnValue({
-		runQuery: jest.fn(),
-		isQueryDirty: false,
-		buildSaveSpec: mockBuildSaveSpec,
-	});
-	mockUseTypeSwitch.mockReturnValue({
-		onChangePanelKind: mockOnChangePanelKind,
-	});
-	render(<PanelEditorContainer {...baseProps} panel={panel} {...overrides} />);
-}
-
-describe('PanelEditorContainer composition', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('renders the editor shell with preview, query builder, and config pane', () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel);
-
-		expect(screen.getByTestId('panel-editor-v2')).toBeInTheDocument();
-		expect(screen.getByTestId('preview')).toBeInTheDocument();
-		expect(screen.getByTestId('qb')).toBeInTheDocument();
-		expect(screen.getByTestId('config')).toBeInTheDocument();
-
-		expect(mockPreviewProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panel,
-				panelDefinition: getPanelDefinition('signoz/TimeSeriesPanel'),
-			}),
-		);
-		expect(mockQbProps).toHaveBeenCalledWith(
-			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
-		);
-		expect(mockConfigProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panel,
-				spec: panel.spec,
-				onChangePanelKind: mockOnChangePanelKind,
-			}),
-		);
-	});
-
-	it('forwards the derived panel type + query-sync options to the leaf hooks', () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel);
-
-		expect(mockUseQuery).toHaveBeenCalledWith(
-			expect.objectContaining({ panel, panelId: 'panel-1', enabled: true }),
-		);
-		expect(mockUseQuerySync).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelType: PANEL_TYPES.TIME_SERIES,
-				setSpec: mockSetSpec,
-				refetch: mockRefetch,
-				alwaysSerializeQuery: false,
-				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
-			}),
-		);
-		expect(mockUseTypeSwitch).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelType: PANEL_TYPES.TIME_SERIES,
-				spec: panel.spec,
-				setSpec: mockSetSpec,
-			}),
-		);
-	});
-
-	it('marks a new panel dirty and always serializes its query', () => {
-		setup(makePanel('signoz/TimeSeriesPanel'), { isNew: true });
-
-		expect(mockUseQuerySync).toHaveBeenCalledWith(
-			expect.objectContaining({ alwaysSerializeQuery: true }),
-		);
-		expect(mockHeaderProps).toHaveBeenCalledWith(
-			expect.objectContaining({ isDirty: true }),
-		);
-	});
-
-	it('bakes the live query into the spec on save, then notifies', async () => {
-		const panel = makePanel('signoz/TimeSeriesPanel');
-		setup(panel, { onSaved: baseProps.onSaved });
-
-		await userEvent.click(screen.getByTestId('editor-save'));
-
-		await waitFor(() => expect(baseProps.onSaved).toHaveBeenCalled());
-		expect(mockBuildSaveSpec).toHaveBeenCalledWith(panel.spec);
-		expect(mockSave).toHaveBeenCalledWith(panel.spec);
-	});
-
-	it('renders the list-columns editor only for list panels', () => {
-		setup(makePanel('signoz/ListPanel'));
-		expect(screen.getByTestId('list-columns')).toBeInTheDocument();
-	});
-
-	it('omits the list-columns editor for non-list panels', () => {
-		setup(makePanel('signoz/TimeSeriesPanel'));
-		expect(screen.queryByTestId('list-columns')).not.toBeInTheDocument();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/getSwitchedPluginSpec.test.ts

@@ -1,8 +1,6 @@
 import {
-	DashboardtypesComparisonOperatorDTO,
-	type DashboardtypesPanelSpecDTO,
-	DashboardtypesThresholdFormatDTO,
 	TelemetrytypesSignalDTO,
+	type DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 
@@ -97,141 +95,4 @@ describe('getSwitchedPluginSpec', () => {
 
 		expect(result.legend?.position).toBe('bottom');
 	});
-
-	describe('thresholds', () => {
-		it('does not carry thresholds when the new kind has no thresholds section', () => {
-			mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/ListPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toBeUndefined();
-		});
-
-		it('carries thresholds verbatim within the label variant (color/value/unit/label)', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/BarChartPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' },
-			]);
-		});
-
-		it('remaps label thresholds into the comparison variant, defaulting operator + format', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'comparison' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/NumberPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			// The label is dropped; operator/format are seeded so the threshold can match.
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.above,
-					format: DashboardtypesThresholdFormatDTO.text,
-				},
-			]);
-		});
-
-		it('remaps comparison thresholds into the table variant, keeping operator/format and seeding a column', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'table' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.below,
-						format: DashboardtypesThresholdFormatDTO.text,
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TablePanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.below,
-					format: DashboardtypesThresholdFormatDTO.text,
-					columnName: '',
-				},
-			]);
-		});
-
-		it('drops the table-only columnName when remapping into the label variant', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.above,
-						format: DashboardtypesThresholdFormatDTO.background,
-						columnName: 'p99',
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([{ value: 80, color: '#F1575F' }]);
-		});
-
-		it('defaults the variant to label when the thresholds section omits controls', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: {} }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', label: 'warn' },
-			]);
-		});
-	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts

@@ -1,18 +1,13 @@
-import {
-	DashboardtypesComparisonOperatorDTO,
-	type DashboardtypesPanelSpecDTO,
-	DashboardtypesThresholdFormatDTO,
-	type TelemetrytypesSignalDTO,
-	type TelemetrytypesTelemetryFieldKeyDTO,
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import {
-	type AnyThreshold,
-	type PanelFormattingSlice,
-	type SectionConfig,
 	SectionKind,
-	type ThresholdVariant,
+	type PanelFormattingSlice,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import {
 	buildDefaultPluginSpec,
@@ -29,73 +24,13 @@ import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
 export interface SwitchedPluginSpec extends DefaultPluginSpec {
 	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
 	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
-	thresholds?: AnyThreshold[];
-}
-
-/** Every field any threshold variant can hold; switching reads across shapes to remap. */
-interface AnyThresholdFields {
-	color: string;
-	value: number;
-	unit?: string;
-	operator?: DashboardtypesComparisonOperatorDTO;
-	format?: DashboardtypesThresholdFormatDTO;
-	columnName?: string;
-	label?: string;
-}
-
-/** The threshold variant a kind edits, or `undefined` when it has no Thresholds section. */
-function getThresholdVariant(
-	sections: SectionConfig[],
-): ThresholdVariant | undefined {
-	const section = sections.find(
-		(s): s is Extract<SectionConfig, { kind: SectionKind.Thresholds }> =>
-			s.kind === SectionKind.Thresholds,
-	);
-	return section ? (section.controls.variant ?? 'label') : undefined;
-}
-
-/**
- * Remaps a threshold to the target kind's variant: keeps the shared core (color, value,
- * unit) plus any cross-variant fields, and seeds the rest with the variant's defaults so
- * the carried threshold stays functional (a comparison/table threshold needs an operator
- * to match, a table threshold a column).
- */
-function toThresholdVariant(
-	source: AnyThresholdFields,
-	variant: ThresholdVariant,
-): AnyThreshold {
-	const core = {
-		color: source.color,
-		value: source.value,
-		...(source.unit !== undefined && { unit: source.unit }),
-	};
-	if (variant === 'comparison') {
-		return {
-			...core,
-			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
-			format: source.format ?? DashboardtypesThresholdFormatDTO.text,
-		};
-	}
-	if (variant === 'table') {
-		return {
-			...core,
-			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
-			format: source.format ?? DashboardtypesThresholdFormatDTO.background,
-			columnName: source.columnName ?? '',
-		};
-	}
-	return {
-		...core,
-		...(source.label !== undefined && { label: source.label }),
-	};
 }
 
 /**
  * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
  * section defaults (so the config pane opens populated, matching new-panel seeding) plus
- * the cross-kind config worth keeping — unit + decimal precision, and thresholds when the
- * new kind supports them (remapped to its variant). Switching into a List seeds the
- * current signal's default columns so the columns control isn't empty.
+ * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
+ * List seeds the current signal's default columns so the columns control isn't empty.
  *
  * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
  */
@@ -131,19 +66,5 @@ export function getSwitchedPluginSpec(
 		}
 	}
 
-	const thresholdVariant = getThresholdVariant(sections);
-	if (thresholdVariant) {
-		const oldThresholds = (
-			oldSpec.plugin.spec as {
-				thresholds?: AnyThreshold[] | null;
-			}
-		).thresholds;
-		if (oldThresholds && oldThresholds.length > 0) {
-			result.thresholds = oldThresholds.map((threshold) =>
-				toThresholdVariant(threshold as AnyThresholdFields, thresholdVariant),
-			);
-		}
-	}
-
 	return result;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/useMetricYAxisUnit.test.ts

@@ -1,103 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-import { useMetricYAxisUnit } from '../useMetricYAxisUnit';
-
-jest.mock('hooks/useGetYAxisUnit', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockUseGetYAxisUnit = useGetYAxisUnit as unknown as jest.Mock;
-
-function mockMetricUnit(
-	yAxisUnit: string | undefined,
-	isLoading = false,
-): void {
-	mockUseGetYAxisUnit.mockReturnValue({ yAxisUnit, isLoading, isError: false });
-}
-
-describe('useMetricYAxisUnit', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('seeds the unit from the metric on a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).toHaveBeenCalledWith('bytes');
-	});
-
-	it('does not seed when not a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: false, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the metric has no unit', () => {
-		mockMetricUnit(undefined);
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the unit already matches the metric', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: 'bytes', onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('re-seeds when the resolved metric unit changes', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		const { rerender } = renderHook(
-			(props: { unit: string | undefined }) =>
-				useMetricYAxisUnit({
-					isNewPanel: true,
-					unit: props.unit,
-					onSelectUnit,
-				}),
-			{ initialProps: { unit: undefined as string | undefined } },
-		);
-		expect(onSelectUnit).toHaveBeenLastCalledWith('bytes');
-
-		// The metric changes; the panel now holds the previously-seeded unit.
-		mockMetricUnit('ms');
-		rerender({ unit: 'bytes' });
-
-		expect(onSelectUnit).toHaveBeenLastCalledWith('ms');
-	});
-
-	it('returns the resolved metric unit and loading state', () => {
-		mockMetricUnit('bytes', true);
-
-		const { result } = renderHook(() =>
-			useMetricYAxisUnit({
-				isNewPanel: false,
-				unit: undefined,
-				onSelectUnit: jest.fn(),
-			}),
-		);
-
-		expect(result.current.metricUnit).toBe('bytes');
-		expect(result.current.isLoading).toBe(true);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/__tests__/usePanelEditorSave.test.ts

@@ -1,36 +1,40 @@
 import { renderHook } from '@testing-library/react';
+import {
+	getGetDashboardV2QueryKey,
+	usePatchDashboardV2,
+} from 'api/generated/services/dashboard';
 import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { usePanelEditorSave } from '../usePanelEditorSave';
 
-const mockPatchAsync = jest.fn().mockResolvedValue(undefined);
-let mockIsPatching = false;
-jest.mock('../../../hooks/useOptimisticPatch', () => ({
-	useOptimisticPatch: (): {
-		patchAsync: jest.Mock;
-		isPatching: boolean;
-		error: Error | null;
-	} => ({ patchAsync: mockPatchAsync, isPatching: mockIsPatching, error: null }),
-}));
-
-// The hook reads getQueryData only for the isNew branch; a stub client is enough here.
+const mockInvalidateQueries = jest.fn();
 jest.mock('react-query', () => ({
-	useQueryClient: (): { getQueryData: jest.Mock } => ({
-		getQueryData: jest.fn(),
+	useQueryClient: (): { invalidateQueries: jest.Mock } => ({
+		invalidateQueries: mockInvalidateQueries,
 	}),
 }));
 
 jest.mock('api/generated/services/dashboard', () => ({
+	usePatchDashboardV2: jest.fn(),
 	getGetDashboardV2QueryKey: jest.fn(() => ['/api/v2/dashboards/dash-1']),
 }));
 
+const mockUsePatch = usePatchDashboardV2 as unknown as jest.Mock;
+const mockGetQueryKey = getGetDashboardV2QueryKey as unknown as jest.Mock;
+
 describe('usePanelEditorSave', () => {
+	const mutateAsync = jest.fn().mockResolvedValue(undefined);
+
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockIsPatching = false;
+		mockUsePatch.mockReturnValue({
+			mutateAsync,
+			isLoading: false,
+			error: null,
+		});
 	});
 
-	it('optimistically patches an add replacing the whole panel spec', async () => {
+	it('emits an add patch replacing the whole panel spec and invalidates the dashboard query', async () => {
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),
 		);
@@ -46,17 +50,28 @@ describe('usePanelEditorSave', () => {
 
 		await result.current.save(spec);
 
-		expect(mockPatchAsync).toHaveBeenCalledWith([
-			{
-				op: 'add',
-				path: '/spec/panels/panel-9/spec',
-				value: spec,
-			},
+		expect(mutateAsync).toHaveBeenCalledWith({
+			pathParams: { id: 'dash-1' },
+			data: [
+				{
+					op: 'add',
+					path: '/spec/panels/panel-9/spec',
+					value: spec,
+				},
+			],
+		});
+		expect(mockGetQueryKey).toHaveBeenCalledWith({ id: 'dash-1' });
+		expect(mockInvalidateQueries).toHaveBeenCalledWith([
+			'/api/v2/dashboards/dash-1',
 		]);
 	});
 
-	it('surfaces the patch in-flight state as isSaving', () => {
-		mockIsPatching = true;
+	it('surfaces the mutation loading state as isSaving', () => {
+		mockUsePatch.mockReturnValue({
+			mutateAsync,
+			isLoading: true,
+			error: null,
+		});
 
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useMetricYAxisUnit.ts

@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-interface UseMetricYAxisUnitArgs {
-	/** Only a new panel auto-seeds; editing never overwrites the saved unit. */
-	isNewPanel: boolean;
-	unit: string | undefined;
-	onSelectUnit: (unit: string) => void;
-}
-
-interface UseMetricYAxisUnitResult {
-	metricUnit: string | undefined;
-	isLoading: boolean;
-}
-
-/**
- * Resolves the selected metric's unit and, on a new panel only, seeds the formatting unit
- * from it (V1 parity); returns the unit for the selector's mismatch warning.
- */
-export function useMetricYAxisUnit({
-	isNewPanel,
-	unit,
-	onSelectUnit,
-}: UseMetricYAxisUnitArgs): UseMetricYAxisUnitResult {
-	const { yAxisUnit: metricUnit, isLoading } = useGetYAxisUnit();
-
-	useEffect(() => {
-		if (isNewPanel && metricUnit && metricUnit !== unit) {
-			onSelectUnit(metricUnit);
-		}
-		// Re-seed only when the resolved metric unit changes, not on every unit edit.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel, metricUnit]);
-
-	return { metricUnit, isLoading };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession.ts

@@ -1,119 +0,0 @@
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import {
-	usePanelQuery,
-	type PanelQueryTimeOverride,
-	type UsePanelQueryResult,
-} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-
-import { usePanelEditorDraft } from './usePanelEditorDraft';
-import { usePanelEditorQuerySync } from './usePanelEditorQuerySync';
-import { usePanelTypeSwitch } from './usePanelTypeSwitch';
-
-interface UsePanelEditSessionArgs {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Per-view time window (epoch ms); omit to follow the dashboard's global window. */
-	time?: PanelQueryTimeOverride;
-	/** Serialize the live builder query into the spec on save even if unchanged (new panels). */
-	alwaysSerializeQuery?: boolean;
-	/** Seed an empty builder with the kind's default signal (new panels) — off for drilldown. */
-	seedQuerySignal?: boolean;
-}
-
-export interface UsePanelEditSessionApi {
-	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
-	draft: DashboardtypesPanelDTO;
-	spec: DashboardtypesPanelSpecDTO;
-	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	isSpecDirty: boolean;
-	/** Restore the draft to the originally-loaded panel. */
-	reset: () => void;
-	/** Draft kind → V1 panel type (drives the query builder + preview). */
-	panelType: PANEL_TYPES;
-	panelDefinition: RenderablePanelDefinition;
-	/** The kind's first supported signal — seeds new queries/columns. */
-	defaultSignal: TelemetrytypesSignalDTO;
-	/** Shared query result for the draft over the resolved time window. */
-	query: UsePanelQueryResult;
-	/** Stage & run the live builder query into the draft. */
-	runQuery: () => void;
-	isQueryDirty: boolean;
-	/** Bake the live (possibly un-run) query into a spec — for save / editor handoff. */
-	buildSaveSpec: (
-		spec: DashboardtypesPanelSpecDTO,
-	) => DashboardtypesPanelSpecDTO;
-	/** Switch the draft's visualization kind in place (reversible per session). */
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The panel-editing pipeline shared by the full-page editor and the View modal's
- * drilldown editor: a local draft, its query result over the resolved time window,
- * the staged-query sync, and the visualization-kind switch. Each consumer layers its
- * own concerns on top (the editor adds save + list seeding; the modal adds per-view
- * time isolation + reset). Keeping the wiring here stops the two from drifting.
- */
-export function usePanelEditSession({
-	panel,
-	panelId,
-	time,
-	alwaysSerializeQuery = false,
-	seedQuerySignal = false,
-}: UsePanelEditSessionArgs): UsePanelEditSessionApi {
-	const { draft, spec, setSpec, isSpecDirty, reset } =
-		usePanelEditorDraft(panel);
-
-	const fullKind = draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(fullKind);
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[fullKind];
-	const defaultSignal = panelDefinition.supportedSignals[0];
-
-	const query = usePanelQuery({
-		panel: draft,
-		panelId,
-		time,
-		enabled: !!panelDefinition,
-	});
-
-	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
-		draft,
-		panelType,
-		setSpec,
-		refetch: query.refetch,
-		alwaysSerializeQuery,
-		signal: seedQuerySignal ? defaultSignal : undefined,
-	});
-
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draft.spec,
-		panelType,
-		setSpec,
-	});
-
-	return {
-		draft,
-		spec,
-		setSpec,
-		isSpecDirty,
-		reset,
-		panelType,
-		panelDefinition,
-		defaultSignal,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-		onChangePanelKind,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditorSave.ts

@@ -1,7 +1,10 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
 import { v4 as uuid } from 'uuid';
-import { getGetDashboardV2QueryKey } from 'api/generated/services/dashboard';
+import {
+	getGetDashboardV2QueryKey,
+	usePatchDashboardV2,
+} from 'api/generated/services/dashboard';
 import {
 	type DashboardtypesJSONPatchOperationDTO,
 	type DashboardtypesPanelSpecDTO,
@@ -10,7 +13,6 @@ import {
 	type GetDashboardV2200,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import { createPanelOps } from '../../patchOps';
 
 interface UsePanelEditorSaveArgs {
@@ -41,14 +43,15 @@ export function usePanelEditorSave({
 	layoutIndex,
 }: UsePanelEditorSaveArgs): UsePanelEditorSaveApi {
 	const queryClient = useQueryClient();
-	const { patchAsync, isPatching, error } = useOptimisticPatch(dashboardId);
+	const { mutateAsync, isLoading, error } = usePatchDashboardV2();
 
 	const save = useCallback(
 		async (spec: DashboardtypesPanelSpecDTO): Promise<void> => {
+			const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
+
 			let ops: DashboardtypesJSONPatchOperationDTO[];
 			if (isNew) {
 				// Resolve the target section against the freshest dashboard we have.
-				const dashboardQueryKey = getGetDashboardV2QueryKey({ id: dashboardId });
 				const cached =
 					queryClient.getQueryData<GetDashboardV2200>(dashboardQueryKey);
 				ops = createPanelOps({
@@ -67,11 +70,11 @@ export function usePanelEditorSave({
 				];
 			}
 
-			// Optimistic cache write + settle refetch (replaces the manual invalidate).
-			await patchAsync(ops);
+			await mutateAsync({ pathParams: { id: dashboardId }, data: ops });
+			await queryClient.invalidateQueries(dashboardQueryKey);
 		},
-		[dashboardId, panelId, isNew, layoutIndex, patchAsync, queryClient],
+		[dashboardId, panelId, isNew, layoutIndex, mutateAsync, queryClient],
 	);
 
-	return { save, isSaving: isPatching, error };
+	return { save, isSaving: isLoading, error: (error as Error) ?? null };
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx

@@ -8,11 +8,15 @@ import {
 import { toast } from '@signozhq/ui/sonner';
 import {
 	type DashboardtypesPanelDTO,
-	type DashboardtypesPanelFormattingDTO,
-	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
 import { getExecStats } from '../queryV5/v5ResponseData';
@@ -23,9 +27,11 @@ import layoutStorage from './layoutStorage';
 import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from './PreviewPane/PreviewPane';
 import { useLegendSeries } from './hooks/useLegendSeries';
-import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
-import { usePanelEditSession } from './hooks/usePanelEditSession';
+import { usePanelQuery } from '../hooks/usePanelQuery';
+import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
+import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
@@ -61,28 +67,7 @@ function PanelEditorContainer({
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
-	// Shared editing pipeline (draft + query + staged-query sync + kind switch). A new
-	// panel always serializes its seed query and seeds the builder's default signal.
-	const {
-		draft,
-		spec,
-		setSpec,
-		isSpecDirty,
-		panelDefinition,
-		defaultSignal,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-		onChangePanelKind,
-	} = usePanelEditSession({
-		panel,
-		panelId,
-		alwaysSerializeQuery: isNew,
-		seedQuerySignal: true,
-	});
-	const { data, isFetching, error, cancelQuery, refetch, pagination } = query;
-
+	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
 	// Live query type (the selected tab) — the type switcher disables kinds that can't be
 	// authored in it. Read from the provider, not the spec: a new panel's spec carries no
 	// query until staged, so the spec would lag the tab.
@@ -106,35 +91,38 @@ function PanelEditorContainer({
 		storage: layoutStorage,
 	});
 
+	// Panel kind → V1 panel type, which drives the query builder and preview.
 	const fullKind = draft.spec.plugin.kind;
+	const panelType =
+		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind as PanelKind]) ??
+		PANEL_TYPES.TIME_SERIES;
 
-	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
-	const formattingUnit = (
-		spec.plugin.spec as {
-			formatting?: DashboardtypesPanelFormattingDTO;
-		}
-	).formatting?.unit;
-	const seedFormattingUnit = useCallback(
-		(unit: string): void => {
-			const pluginSpec = spec.plugin.spec as {
-				formatting?: DashboardtypesPanelFormattingDTO;
-			};
-			setSpec({
-				...spec,
-				plugin: {
-					...spec.plugin,
-					spec: { ...pluginSpec, formatting: { ...pluginSpec.formatting, unit } },
-				},
-			} as DashboardtypesPanelSpecDTO);
-		},
-		[spec, setSpec],
-	);
-	const { metricUnit } = useMetricYAxisUnit({
-		isNewPanel: isNew,
-		unit: formattingUnit,
-		onSelectUnit: seedFormattingUnit,
+	// One shared query result for the whole editor; the preview renders it.
+	const panelDefinition = getPanelDefinition(draft.spec.plugin.kind);
+	const { data, isFetching, error, cancelQuery, refetch, pagination } =
+		usePanelQuery({
+			panel: draft,
+			panelId,
+			enabled: !!panelDefinition,
+		});
+
+	// A new panel's default signal (its kind's first supported) — seeds the query and columns.
+	const defaultSignal = panelDefinition.supportedSignals[0];
+
+	const { runQuery, isQueryDirty, buildSaveSpec } = usePanelEditorQuerySync({
+		draft,
+		panelType,
+		setSpec,
+		refetch,
+		// New panel's seed query is the builder default, not a real saved query —
+		// always serialize it on save.
+		alwaysSerializeQuery: isNew,
+		signal: defaultSignal,
 	});
 
+	// Switch the panel's visualization kind in place (reversible per session).
+	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
+
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
@@ -263,7 +251,6 @@ function PanelEditorContainer({
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 						stepInterval={stepInterval}
-						metricUnit={metricUnit}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/panelEditorHandoff.ts

@@ -1,10 +0,0 @@
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-
-/**
- * Router location state for opening the panel editor pre-loaded with edits instead of
- * the saved panel. The View modal sets this so "Switch to Edit Mode" carries its
- * drilldown-edited spec (queries/plugin) into the editor.
- */
-export interface PanelEditorHandoffState {
-	editSpec?: DashboardtypesPanelSpecDTO;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
@@ -14,6 +12,8 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
 import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
 import { useTimezone } from 'providers/Timezone';
+import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
 
 import NoData from '../../components/NoData/NoData';
 import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
@@ -23,10 +23,7 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
-import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
-import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
-import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { buildBarChartConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -40,8 +37,6 @@ function BarPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
-	onCloseStandaloneView,
-	enableDrillDown,
 }: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -58,10 +53,12 @@ function BarPanelRenderer({
 		[panel.spec.queries],
 	);
 
-	// X-scale clamps come from the request that produced the data, so each panel
-	// pins to the window it fetched.
+	// X-scale clamps come from the request that produced the data. The generated
+	// request DTO is structurally the V5 request; the cast is the boundary.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
+		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
+			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
+		);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -117,32 +114,6 @@ function BarPanelRenderer({
 		return resolveLegendPosition(spec.legend?.position);
 	}, [spec.legend?.position]);
 
-	// The standalone View modal shows V1's graph-manager legend below the chart:
-	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
-	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
-	const layoutChildren = useMemo(
-		() =>
-			panelMode === PanelMode.STANDALONE_VIEW ? (
-				<div className={PanelStyles.chartManagerContainer}>
-					<ChartManager
-						config={config}
-						alignedData={chartData}
-						yAxisUnit={spec.formatting?.unit}
-						decimalPrecision={decimalPrecision}
-						onCancel={onCloseStandaloneView}
-					/>
-				</div>
-			) : null,
-		[
-			panelMode,
-			config,
-			chartData,
-			spec.formatting?.unit,
-			decimalPrecision,
-			onCloseStandaloneView,
-		],
-	);
-
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
 			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
@@ -155,27 +126,10 @@ function BarPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData): void => {
-			if (!onClick) {
-				return;
-			}
-			const payload = enrichChartClick({
-				clickData: args,
-				series: flatSeries,
-				builderQueries,
-			});
-			if (!payload) {
-				return;
-			}
-			const timeRange = stepClickTimeRange({
-				clickedDataTimestamp: args.clickedDataTimestamp,
-				queryName: payload.context.queryName,
-				builderQueries,
-				stepIntervals: getExecStats(data.response)?.stepIntervals,
-			});
-			onClick({ ...payload, context: { ...payload.context, timeRange } });
+		(args: ChartClickData) => {
+			onClick?.(args);
 		},
-		[onClick, flatSeries, builderQueries, data.response],
+		[onClick],
 	);
 
 	return (
@@ -193,7 +147,6 @@ function BarPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
-						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}
@@ -205,7 +158,7 @@ function BarPanelRenderer({
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={enableDrillDown ? handleChartClick : undefined}
+						onClick={handleChartClick}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -27,6 +27,5 @@ export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
-		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -20,6 +20,7 @@ import { getBuilderQueries } from '../../utils/getBuilderQueries';
 
 import { buildHistogramConfig } from './utils/buildConfig';
 import { prepareHistogramData } from './prepareData';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 function HistogramPanelRenderer({
 	panelId,
@@ -27,6 +28,7 @@ function HistogramPanelRenderer({
 	data,
 	refetch,
 	panelMode,
+	onClick,
 }: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -98,6 +100,13 @@ function HistogramPanelRenderer({
 
 	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
 
+	const handleChartClick = useCallback(
+		(args: ChartClickData) => {
+			onClick?.(args);
+		},
+		[onClick],
+	);
+
 	return (
 		<div
 			ref={graphRef}
@@ -118,6 +127,7 @@ function HistogramPanelRenderer({
 						width={containerDimensions.width}
 						height={containerDimensions.height}
 						renderTooltipFooter={renderTooltipFooter}
+						onClick={handleChartClick}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -27,6 +27,5 @@ export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
-		drilldown: false,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -37,6 +37,5 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		download: false,
 		createAlert: false,
 		search: true,
-		drilldown: false,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -1,9 +1,4 @@
-import {
-	useCallback,
-	useMemo,
-	type KeyboardEvent as ReactKeyboardEvent,
-	type MouseEvent as ReactMouseEvent,
-} from 'react';
+import { useMemo } from 'react';
 import type { DashboardtypesNumberPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
 import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
@@ -13,9 +8,6 @@ import PanelStyles from '../../panel.module.scss';
 import { PanelRendererProps } from '../../types/rendererProps';
 import { formatPanelValue } from '../../utils/formatPanelValue';
 import { resolveDecimalPrecision } from '../../utils/chartAppearance/resolvers';
-import { enrichNumberClick } from '../../utils/drilldown/enrichNumberClick';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { prepareNumberData } from './prepareData';
 import { mapNumberThresholds } from './utils';
@@ -25,31 +17,24 @@ function NumberPanelRenderer({
 	panel,
 	data,
 	refetch,
-	onClick,
-	enableDrillDown,
 }: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
 	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
 		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);
 
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel.spec.queries || []),
-		[panel.spec.queries],
-	);
-
-	const tables = useMemo(
+	const value = useMemo(
 		() =>
-			prepareScalarTables({
-				results: getScalarResults(data.response),
-				legendMap: data.legendMap ?? {},
-				requestPayload: data.requestPayload,
-			}),
+			prepareNumberData(
+				prepareScalarTables({
+					results: getScalarResults(data.response),
+					legendMap: data.legendMap ?? {},
+					requestPayload: data.requestPayload,
+				}),
+			),
 		[data.response, data.legendMap, data.requestPayload],
 	);
 
-	const value = useMemo(() => prepareNumberData(tables), [tables]);
-
 	const thresholds = useMemo(
 		() => mapNumberThresholds(spec.thresholds),
 		[spec.thresholds],
@@ -69,60 +54,10 @@ function NumberPanelRenderer({
 		[value, unit, decimalPrecision],
 	);
 
-	const openDrilldown = useCallback(
-		(coordinates: { x: number; y: number }): void => {
-			if (!onClick) {
-				return;
-			}
-			const payload = enrichNumberClick({
-				tables,
-				builderQueries,
-				coordinates,
-				timeRange: getPanelTimeRange(data.requestPayload),
-			});
-			if (payload) {
-				onClick(payload);
-			}
-		},
-		[onClick, tables, data.requestPayload, builderQueries],
-	);
-
-	const handleClick = useCallback(
-		(event: ReactMouseEvent<HTMLDivElement>): void =>
-			openDrilldown({ x: event.clientX, y: event.clientY }),
-		[openDrilldown],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: ReactKeyboardEvent<HTMLDivElement>): void => {
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				const rect = event.currentTarget.getBoundingClientRect();
-				openDrilldown({
-					x: rect.left + rect.width / 2,
-					y: rect.top + rect.height / 2,
-				});
-			}
-		},
-		[openDrilldown],
-	);
-
-	// The whole panel is the value, so the container itself is the drill-down target.
-	const isClickable = enableDrillDown && !!onClick && value !== null;
-
 	return (
 		<div
 			data-testid="number-panel-renderer"
 			className={PanelStyles.panelContainer}
-			{...(isClickable
-				? {
-						role: 'button',
-						tabIndex: 0,
-						onClick: handleClick,
-						onKeyDown: handleKeyDown,
-						style: { cursor: 'pointer' },
-					}
-				: {})}
 		>
 			{value === null ? (
 				<NoData data-testid="number-panel-no-data" onRetry={refetch} />

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -27,6 +27,5 @@ export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
-		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -1,8 +1,4 @@
-import {
-	useCallback,
-	useMemo,
-	type MouseEvent as ReactMouseEvent,
-} from 'react';
+import { useCallback, useMemo } from 'react';
 import type { DashboardtypesPieChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import Pie from 'container/DashboardContainer/visualization/charts/Pie/Pie';
 import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
@@ -17,9 +13,6 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
-import { enrichPieClick } from '../../utils/drilldown/enrichPieClick';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { preparePieData } from './prepareData';
 
@@ -29,7 +22,6 @@ function PiePanelRenderer({
 	data,
 	refetch,
 	onClick,
-	enableDrillDown,
 }: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -38,11 +30,6 @@ function PiePanelRenderer({
 		[panel.spec.plugin.spec],
 	);
 
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel.spec.queries || []),
-		[panel.spec.queries],
-	);
-
 	const slices = useMemo(
 		() =>
 			preparePieData({
@@ -74,21 +61,10 @@ function PiePanelRenderer({
 	);
 
 	const handleSliceClick = useCallback(
-		(slice: PieSlice, event: ReactMouseEvent): void => {
-			if (!onClick) {
-				return;
-			}
-			const payload = enrichPieClick({
-				slice,
-				builderQueries,
-				coordinates: { x: event.clientX, y: event.clientY },
-				timeRange: getPanelTimeRange(data.requestPayload),
-			});
-			if (payload) {
-				onClick(payload);
-			}
+		(slice: PieSlice) => {
+			onClick?.({ label: slice.label, value: slice.value });
 		},
-		[onClick, builderQueries, data.requestPayload],
+		[onClick],
 	);
 
 	return (
@@ -103,7 +79,7 @@ function PiePanelRenderer({
 					isDarkMode={isDarkMode}
 					position={legendPosition}
 					id={panelId}
-					onSliceClick={enableDrillDown ? handleSliceClick : undefined}
+					onSliceClick={handleSliceClick}
 					data-testid="pie-chart"
 				/>
 			)}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/__tests__/prepareData.test.ts

@@ -1,130 +0,0 @@
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-import { preparePieData } from '../prepareData';
-
-function tableWith(
-	columns: PanelTable['columns'],
-	rows: PanelTable['rows'],
-	overrides: Partial<PanelTable> = {},
-): PanelTable {
-	return { queryName: 'A', legend: '', columns, rows, ...overrides };
-}
-
-const args = (tables: PanelTable[]): Parameters<typeof preparePieData>[0] => ({
-	tables,
-	isDarkMode: true,
-});
-
-describe('preparePieData', () => {
-	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { col1: 23399927, col2: 588691297 } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['col1', 23399927],
-			['col2', 588691297],
-		]);
-	});
-
-	it('keeps one slice per group row for a single value column', () => {
-		const table = tableWith(
-			[
-				{
-					name: 'service.name',
-					queryName: 'A',
-					isValueColumn: false,
-					id: 'service.name',
-				},
-				{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
-			],
-			[
-				{ data: { 'service.name': 'adservice', A: 100 } },
-				{ data: { 'service.name': 'cartservice', A: 200 } },
-			],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['adservice', 100],
-			['cartservice', 200],
-		]);
-	});
-
-	it('prefixes the group when multiple value columns are grouped', () => {
-		const table = tableWith(
-			[
-				{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { env: 'prod', col1: 10, col2: 20 } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => s.label)).toStrictEqual([
-			'prod · col1',
-			'prod · col2',
-		]);
-	});
-
-	it('falls back to legend/query name when a single value column has no group', () => {
-		const table = tableWith(
-			[{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' }],
-			[{ data: { A: 42 } }],
-			{ legend: 'requests' },
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['requests', 42],
-		]);
-	});
-
-	it('honours customColors over the generated palette', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { col1: 10, col2: 20 } }],
-		);
-
-		const slices = preparePieData({
-			tables: [table],
-			isDarkMode: true,
-			customColors: { col1: '#ff0000' },
-		});
-
-		expect(slices[0].color).toBe('#ff0000');
-		expect(slices[1].color).not.toBe('#ff0000');
-	});
-
-	it('drops non-positive and non-numeric values', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-				{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
-			],
-			[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
-	});
-
-	it('returns no slices for empty tables', () => {
-		expect(preparePieData(args([]))).toStrictEqual([]);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -23,6 +23,5 @@ export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 		download: false,
 		createAlert: false,
 		search: false,
-		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -2,7 +2,6 @@ import { themeColors } from 'constants/theme';
 import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { coerceToString } from 'utils/stringUtils';
 
 export interface PreparePieDataArgs {
 	/** Scalar tables from the V5 response (see `prepareScalarTables`). */
@@ -12,7 +11,11 @@ export interface PreparePieDataArgs {
 	isDarkMode: boolean;
 }
 
-/** One pie slice per (row × value column); column name labels slices when a query has several value columns. */
+/**
+ * Turns the scalar tables of a V5 response into pie slices (one per group row):
+ * value column → value, group column(s) → label. Colours honour `customColors`
+ * then fall back to the deterministic palette; non-positive/non-numeric dropped.
+ */
 export function preparePieData({
 	tables,
 	customColors,
@@ -24,35 +27,26 @@ export function preparePieData({
 
 	const slices: PieSlice[] = [];
 	tables.forEach((table) => {
-		const valueColumns = table.columns.filter((column) => column.isValueColumn);
-		if (valueColumns.length === 0) {
+		const valueColumn = table.columns.find((column) => column.isValueColumn);
+		if (!valueColumn) {
 			return;
 		}
+		const valueKey = valueColumn.id || valueColumn.name;
 		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
-		const hasMultipleValueColumns = valueColumns.length > 1;
 
 		table.rows.forEach((row) => {
-			const groupLabel = labelColumns
-				.map((column) => row.data[column.id || column.name])
-				.filter((part) => part != null)
-				.map(String)
-				.join(', ');
-
-			valueColumns.forEach((column) => {
-				let label: string;
-				if (hasMultipleValueColumns) {
-					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
-				} else {
-					label = groupLabel || table.legend || table.queryName || '';
-				}
-
-				const color = customColors?.[label] ?? generateColor(label, colorMap);
-				slices.push({
-					label,
-					value: Number(row.data[column.id || column.name]),
-					color,
-				});
-			});
+			const value = Number(row.data[valueKey]);
+			const label =
+				labelColumns
+					.map((column) => row.data[column.id || column.name])
+					.filter((part) => part != null)
+					.map(String)
+					.join(', ') ||
+				table.legend ||
+				table.queryName ||
+				'';
+			const color = customColors?.[label] ?? generateColor(label, colorMap);
+			slices.push({ label, value, color });
 		});
 	});
 

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx

@@ -1,11 +1,4 @@
-import {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	type MouseEvent as ReactMouseEvent,
-} from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Table } from 'antd';
 import type { DashboardtypesTablePanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -15,9 +8,6 @@ import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/query
 import PanelStyles from '../../panel.module.scss';
 import { PanelRendererProps } from '../../types/rendererProps';
 import { resolveDecimalPrecision } from '../../utils/chartAppearance/resolvers';
-import { enrichTableClick } from '../../utils/drilldown/enrichTableClick';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 import { useResizableColumns } from '../../hooks/useResizableColumns';
 import NoData from '../../components/NoData/NoData';
 
@@ -37,8 +27,6 @@ function TablePanelRenderer({
 	data,
 	refetch,
 	searchTerm = '',
-	onClick,
-	enableDrillDown,
 }: PanelRendererProps<'signoz/TablePanel'>): JSX.Element {
 	// Measure the panel so each page roughly fills it (min 10 rows) with a pinned header.
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -54,11 +42,6 @@ function TablePanelRenderer({
 		[panel.spec.plugin.spec],
 	);
 
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel.spec.queries || []),
-		[panel.spec.queries],
-	);
-
 	// V5 joins every query into a single scalar result, so the first non-empty
 	// table is the whole panel.
 	const table = useMemo(
@@ -81,34 +64,6 @@ function TablePanelRenderer({
 		[spec.thresholds],
 	);
 
-	const handleCellClick = useCallback(
-		({
-			columnId,
-			record,
-			event,
-		}: {
-			columnId: string;
-			record: TableRowData;
-			event: ReactMouseEvent<HTMLElement>;
-		}): void => {
-			if (!onClick || !table) {
-				return;
-			}
-			const payload = enrichTableClick({
-				record,
-				columnId,
-				table,
-				builderQueries,
-				coordinates: { x: event.clientX, y: event.clientY },
-				timeRange: getPanelTimeRange(data.requestPayload),
-			});
-			if (payload) {
-				onClick(payload);
-			}
-		},
-		[onClick, table, builderQueries, data.requestPayload],
-	);
-
 	const columns = useMemo(
 		() =>
 			table
@@ -117,17 +72,9 @@ function TablePanelRenderer({
 						columnUnits: spec.formatting?.columnUnits ?? {},
 						decimalPrecision,
 						thresholdsByColumn,
-						onCellClick: enableDrillDown ? handleCellClick : undefined,
 					})
 				: [],
-		[
-			table,
-			spec.formatting?.columnUnits,
-			decimalPrecision,
-			thresholdsByColumn,
-			enableDrillDown,
-			handleCellClick,
-		],
+		[table, spec.formatting?.columnUnits, decimalPrecision, thresholdsByColumn],
 	);
 
 	// User-resizable columns, persisted per panel to localStorage.

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -25,6 +25,5 @@ export const definition: PanelDefinition<'signoz/TablePanel'> = {
 		createAlert: false,
 		// V1 parity: only tables (and lists) expose the header search box.
 		search: true,
-		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/tableColumns.tsx

@@ -52,12 +52,6 @@ export interface BuildTableColumnsArgs {
 	decimalPrecision?: PrecisionOption;
 	/** Thresholds grouped by column name (see `mapTableThresholds`). */
 	thresholdsByColumn: Record<string, PanelThreshold[]>;
-	/** When set, every body cell becomes a drill-down target (keyed by its column id). */
-	onCellClick?: (args: {
-		columnId: string;
-		record: TableRowData;
-		event: React.MouseEvent<HTMLElement>;
-	}) => void;
 }
 
 /**
@@ -71,7 +65,6 @@ export function buildTableColumns({
 	columnUnits,
 	decimalPrecision,
 	thresholdsByColumn,
-	onCellClick,
 }: BuildTableColumnsArgs): TableProps<TableRowData>['columns'] {
 	return table.columns.map((col) => {
 		// Column key = query identifier for value columns, group name otherwise. Units
@@ -104,26 +97,19 @@ export function buildTableColumns({
 				}
 				return text;
 			},
-			onCell: (record: TableRowData): React.HTMLAttributes<HTMLElement> => {
-				const cellProps: React.HTMLAttributes<HTMLElement> = {};
-
-				if (col.isValueColumn && colThresholds.length > 0) {
-					const num = Number(record[key]);
-					if (Number.isFinite(num)) {
-						const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
-						if (threshold?.format === 'background') {
-							cellProps.style = { backgroundColor: threshold.color };
-						}
-					}
+			onCell: (record: TableRowData): { style?: React.CSSProperties } => {
+				if (!col.isValueColumn || colThresholds.length === 0) {
+					return {};
 				}
-
-				if (onCellClick) {
-					cellProps.onClick = (event): void =>
-						onCellClick({ columnId: key, record, event });
-					cellProps.style = { ...cellProps.style, cursor: 'pointer' };
+				const num = Number(record[key]);
+				if (!Number.isFinite(num)) {
+					return {};
 				}
-
-				return cellProps;
+				const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
+				if (threshold?.format === 'background') {
+					return { style: { backgroundColor: threshold.color } };
+				}
+				return {};
 			},
 		};
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -1,9 +1,7 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
@@ -14,6 +12,8 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
 import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
 import { useTimezone } from 'providers/Timezone';
+import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
+import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
 
 import NoData from '../../components/NoData/NoData';
 import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
@@ -23,10 +23,7 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
-import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
-import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
-import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { buildTimeSeriesConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -40,8 +37,6 @@ function TimeSeriesPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
-	onCloseStandaloneView,
-	enableDrillDown,
 }: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -60,9 +55,11 @@ function TimeSeriesPanelRenderer({
 
 	// X-scale clamps come from the request that produced the data, so each panel
 	// pins to the window it fetched — matters during drag-zoom transitions before
-	// new data arrives.
+	// new data arrives. The generated request DTO is structurally the V5 request.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
+		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
+			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
+		);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -118,32 +115,6 @@ function TimeSeriesPanelRenderer({
 		return resolveLegendPosition(spec.legend?.position);
 	}, [spec.legend?.position]);
 
-	// The standalone View modal shows V1's graph-manager legend below the chart:
-	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
-	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
-	const layoutChildren = useMemo(
-		() =>
-			panelMode === PanelMode.STANDALONE_VIEW ? (
-				<div className={PanelStyles.chartManagerContainer}>
-					<ChartManager
-						config={config}
-						alignedData={chartData}
-						yAxisUnit={spec.formatting?.unit}
-						decimalPrecision={decimalPrecision}
-						onCancel={onCloseStandaloneView}
-					/>
-				</div>
-			) : null,
-		[
-			panelMode,
-			config,
-			chartData,
-			spec.formatting?.unit,
-			decimalPrecision,
-			onCloseStandaloneView,
-		],
-	);
-
 	const renderTooltipFooter = useCallback(
 		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
 			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
@@ -156,27 +127,10 @@ function TimeSeriesPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData): void => {
-			if (!onClick) {
-				return;
-			}
-			const payload = enrichChartClick({
-				clickData: args,
-				series: flatSeries,
-				builderQueries,
-			});
-			if (!payload) {
-				return;
-			}
-			const timeRange = stepClickTimeRange({
-				clickedDataTimestamp: args.clickedDataTimestamp,
-				queryName: payload.context.queryName,
-				builderQueries,
-				stepIntervals: getExecStats(data.response)?.stepIntervals,
-			});
-			onClick({ ...payload, context: { ...payload.context, timeRange } });
+		(args: ChartClickData) => {
+			onClick?.(args);
 		},
-		[onClick, flatSeries, builderQueries, data.response],
+		[onClick],
 	);
 
 	return (
@@ -194,7 +148,6 @@ function TimeSeriesPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
-						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}
@@ -205,7 +158,7 @@ function TimeSeriesPanelRenderer({
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={enableDrillDown ? handleChartClick : undefined}
+						onClick={handleChartClick}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -27,6 +27,5 @@ export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
-		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts

@@ -108,9 +108,7 @@ function addSeries({
 	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
 	// a defined record (it dereferences keys without a guard).
 	const colorMapping = spec.legend?.customColors ?? {};
-	const spanGaps = chartAppearance?.spanGaps
-		? resolveSpanGaps(chartAppearance?.spanGaps)
-		: true;
+	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
 
 	const lineStyle = chartAppearance?.lineStyle
 		? LINE_STYLE_MAP[chartAppearance.lineStyle]

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/panel.module.scss

@@ -7,7 +7,3 @@
 	height: 100%;
 	position: relative;
 }
-
-.chartManagerContainer {
-	padding: 36px 0;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown.ts

@@ -1,36 +0,0 @@
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
-
-// Drilldown is the click-to-context-menu feature ported from V1. Every renderer turns its native
-// click into one `DrilldownClickPayload`; the kind-agnostic orchestration layer consumes only that.
-// `FilterData` is imported read-only from the V1 util so the payload feeds `buildDrilldownUrl`
-// directly, with no intermediate translation.
-
-/** The clicked point's drilldown context, derived from the flattened series/columns the renderer holds. */
-export interface DrilldownContext {
-	/** The clicked series'/column's query. Drives query selection in `getViewQuery`. */
-	queryName: string;
-	/** Telemetry signal of the clicked query — picks the explorer the drilldown navigates to. */
-	signal: TelemetrytypesSignalDTO;
-	/** Key/value/op filters from the clicked point's group-by labels (empty when ungrouped). */
-	filters: FilterData[];
-	/** Explorer time window. Charts use the clicked bucket ±step; scalar panels use the fetched window. */
-	timeRange?: { startTime: number; endTime: number };
-	/** Series/slice display name, shown as the menu header's second line. */
-	label?: string;
-	/** Series/slice colour; tints the menu header label and item icons (charts/pie only). */
-	seriesColor?: string;
-	/** Tables only: a value column opens the aggregate menu; a group column opens filter-by-value. */
-	columnKind?: 'aggregate' | 'group';
-	/** Group-column click only: the clicked column's key, for the filter-by-value menu. */
-	clickedKey?: string;
-	/** Group-column click only: the clicked cell's value, for the filter-by-value menu. */
-	clickedValue?: string | number;
-}
-
-/** What each renderer's `onClick` emits: where to anchor the popover plus the drilldown context. */
-export interface DrilldownClickPayload {
-	/** Absolute viewport coordinates for the popover anchor. */
-	coordinates: { x: number; y: number };
-	context: DrilldownContext;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/interactions.ts

@@ -1,36 +1,46 @@
+import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
 import type { PanelKind } from './panelKind';
-import type { DrilldownClickPayload } from './drilldown';
+
+/** Source-tagged click events; each non-chart kind carries its own drill-down context. */
+export type ChartClickEvent = ChartClickData;
+export type TableClickEvent = {
+	rowData: Record<string, unknown>;
+	columnId?: string;
+};
+export type ListClickEvent = {
+	rowData: Record<string, unknown>;
+};
+export type PieClickEvent = { label: string; value: number };
+
+/** Union of every panel click event — switched on by `source` at the boundary. */
+export type PanelClickEvent =
+	| ChartClickEvent
+	| TableClickEvent
+	| ListClickEvent
+	| PieClickEvent;
 
 type DragSelect = (start: number, end: number) => void;
 
-/** Close the standalone View modal — fired by the chart's graph-manager Save/Cancel. */
-type CloseStandaloneView = () => void;
-
 /**
  * Per-kind interaction props — each kind exposes only the gestures it supports.
  * Keyed by `PanelKind`; `PanelRendererProps<K>` indexes this, so a missing kind
  * is a compile error there.
- *
- * Every interactive kind's `onClick` receives the unified `DrilldownClickPayload`
- * its renderer enriches from the native click. Number/Value drills down on its
- * single value. Histogram and List are omitted (V1 has no drill-down for either):
- * they inherit the empty `object` base, so their renderers get only base props
- * with no click gesture.
  */
 export type PanelInteractionMap = Record<PanelKind, object> & {
 	'signoz/TimeSeriesPanel': {
-		onClick?: (event: DrilldownClickPayload) => void;
+		onClick?: (event: ChartClickEvent) => void;
 		onDragSelect?: DragSelect;
-		onCloseStandaloneView?: CloseStandaloneView;
 	};
 	'signoz/BarChartPanel': {
-		onClick?: (event: DrilldownClickPayload) => void;
+		onClick?: (event: ChartClickEvent) => void;
 		onDragSelect?: DragSelect;
-		onCloseStandaloneView?: CloseStandaloneView;
 	};
-	'signoz/TablePanel': { onClick?: (event: DrilldownClickPayload) => void };
-	'signoz/PieChartPanel': { onClick?: (event: DrilldownClickPayload) => void };
-	'signoz/NumberPanel': { onClick?: (event: DrilldownClickPayload) => void };
+	'signoz/HistogramPanel': { onClick?: (event: ChartClickEvent) => void };
+	'signoz/TablePanel': { onClick?: (event: TableClickEvent) => void };
+	'signoz/ListPanel': { onClick?: (event: ListClickEvent) => void };
+	'signoz/PieChartPanel': { onClick?: (event: PieClickEvent) => void };
+	'signoz/NumberPanel': Record<string, never>;
 };
 
 /**
@@ -38,7 +48,6 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
  * registry render boundary). The supertype the per-kind shapes are cast to once.
  */
 export interface AnyPanelInteractionProps {
-	onClick?: (event: DrilldownClickPayload) => void;
+	onClick?: (event: PanelClickEvent) => void;
 	onDragSelect?: DragSelect;
-	onCloseStandaloneView?: CloseStandaloneView;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -30,11 +30,6 @@ export interface PanelActionCapabilities {
 	 * tabular kinds). Not a menu action — the renderer must consume `searchTerm`.
 	 */
 	search: boolean;
-	/**
-	 * Kind supports click-to-drilldown (context menu + View/Breakout). V1 parity: charts + scalar
-	 * Pie/Value/Table; Histogram/List opt out. AND-ed with "has a builder query" in `useDrilldown`.
-	 */
-	drilldown: boolean;
 }
 
 export interface PanelDefinition<K extends PanelKind = PanelKind> {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind.ts

@@ -17,15 +17,3 @@ export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
 	'signoz/HistogramPanel': PANEL_TYPES.HISTOGRAM,
 	'signoz/ListPanel': PANEL_TYPES.LIST,
 };
-
-/**
- * Reverse of {@link PANEL_KIND_TO_PANEL_TYPE} — the mapping is a bijection, so every
- * panel kind round-trips. Partial because `PANEL_TYPES` also has types with no V2 kind
- * (e.g. trace/empty); a lookup on those returns `undefined`.
- */
-export const PANEL_TYPE_TO_PANEL_KIND: Partial<Record<PANEL_TYPES, PanelKind>> =
-	Object.fromEntries(
-		(Object.entries(PANEL_KIND_TO_PANEL_TYPE) as [PanelKind, PANEL_TYPES][]).map(
-			([kind, type]) => [type, kind],
-		),
-	);

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/getPanelTimeRange.test.ts

@@ -1,46 +0,0 @@
-import type { Querybuildertypesv5QueryRangeRequestDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { getPanelTimeRange } from '../getPanelTimeRange';
-
-// Fallback path reads the redux global-time selection; stub both so the no-payload branch
-// is deterministic.
-jest.mock('store', () => ({
-	__esModule: true,
-	default: { getState: (): unknown => ({ globalTime: { selectedTime: '5m' } }) },
-}));
-jest.mock('lib/getStartEndRangeTime', () => ({
-	__esModule: true,
-	default: (): { start: string; end: string } => ({
-		start: '1700',
-		end: '1800',
-	}),
-}));
-
-const request = (
-	start?: number,
-	end?: number,
-): Querybuildertypesv5QueryRangeRequestDTO =>
-	({ start, end }) as Querybuildertypesv5QueryRangeRequestDTO;
-
-describe('getPanelTimeRange', () => {
-	it('converts the request start/end from ms to seconds', () => {
-		expect(getPanelTimeRange(request(5_000, 9_000))).toStrictEqual({
-			startTime: 5,
-			endTime: 9,
-		});
-	});
-
-	it('falls back to the global-time window when there is no request', () => {
-		expect(getPanelTimeRange(undefined)).toStrictEqual({
-			startTime: 1700,
-			endTime: 1800,
-		});
-	});
-
-	it('falls back when the request is missing an endpoint', () => {
-		expect(getPanelTimeRange(request(5_000, undefined))).toStrictEqual({
-			startTime: 1700,
-			endTime: 1800,
-		});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/__tests__/resolvers.test.ts

@@ -1,35 +1,22 @@
 import { resolveSpanGaps } from '../resolvers';
 
 describe('resolveSpanGaps', () => {
-	it('parses a duration string into seconds when thresholding', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '5s' })).toBe(5);
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '10m' })).toBe(
-			600,
-		);
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '1h' })).toBe(
-			3600,
-		);
+	it('spans all gaps (true) when unset', () => {
+		expect(resolveSpanGaps(undefined)).toBe(true);
+		expect(resolveSpanGaps('')).toBe(true);
+	});
+
+	it('parses a duration string into seconds', () => {
+		expect(resolveSpanGaps('5s')).toBe(5);
+		expect(resolveSpanGaps('10m')).toBe(600);
+		expect(resolveSpanGaps('1h')).toBe(3600);
 	});
 
 	it('tolerates a bare seconds number (back-compat)', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '600' })).toBe(
-			600,
-		);
+		expect(resolveSpanGaps('600')).toBe(600);
 	});
 
 	it('falls back to true for unparseable input', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: 'abc' })).toBe(
-			true,
-		);
-	});
-
-	it('spans all gaps when fillOnlyBelow is explicitly false, ignoring any duration', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: false, fillLessThan: '5m' })).toBe(
-			true,
-		);
-	});
-
-	it('treats a duration with no fillOnlyBelow flag as a threshold (legacy panels)', () => {
-		expect(resolveSpanGaps({ fillLessThan: '5m' })).toBe(300);
+		expect(resolveSpanGaps('abc')).toBe(true);
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts

@@ -2,7 +2,6 @@ import { rangeUtil } from '@grafana/data';
 import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
-	type DashboardtypesSpanGapsDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
@@ -40,14 +39,15 @@ export function resolveDecimalPrecision(
 }
 
 /**
- * Resolves `spanGaps` to uPlot's value. `fillOnlyBelow: false` spans every gap regardless
- * of `fillLessThan`; a duration with no flag still thresholds (panels predating the flag).
+ * `spec.chartAppearance.spanGaps.fillLessThan` is a duration string on the wire
+ * ("10m", "5s"). Empty/missing → span all gaps (default); otherwise forward the
+ * threshold in seconds so uPlot only bridges short runs of nulls. Tolerates a
+ * bare seconds number for back-compat.
  */
 export function resolveSpanGaps(
-	spanGaps: DashboardtypesSpanGapsDTO,
+	fillLessThan: string | undefined,
 ): boolean | number {
-	const fillLessThan = spanGaps.fillLessThan;
-	if (spanGaps.fillOnlyBelow === false || !fillLessThan) {
+	if (!fillLessThan) {
 		return true;
 	}
 	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/__tests__/buildViewPanelSpec.test.ts

@@ -1,73 +0,0 @@
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getSwitchedPluginSpec } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec';
-import { PANEL_TYPE_TO_PANEL_KIND } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { toPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { buildViewPanelSpec } from '../buildViewPanelSpec';
-
-// The query conversion + kind-switch spec builder are tested in their own suites; here we
-// isolate buildViewPanelSpec's branching (same kind vs. kind switch).
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
-	() => ({ toPerses: jest.fn(() => [{ kind: 'mock-query' }]) }),
-);
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec',
-	() => ({ getSwitchedPluginSpec: jest.fn(() => ({ switched: true })) }),
-);
-
-const query = {} as Query;
-
-function specOfKind(kind: string): DashboardtypesPanelSpecDTO {
-	return {
-		plugin: { kind, spec: { formatting: {} } },
-		queries: [],
-		display: { name: 'panel' },
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-describe('PANEL_TYPE_TO_PANEL_KIND', () => {
-	it('is the inverse of the kind→type map', () => {
-		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.VALUE]).toBe(
-			'signoz/NumberPanel',
-		);
-		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.TABLE]).toBe('signoz/TablePanel');
-		expect(PANEL_TYPE_TO_PANEL_KIND[PANEL_TYPES.TIME_SERIES]).toBe(
-			'signoz/TimeSeriesPanel',
-		);
-	});
-});
-
-describe('buildViewPanelSpec', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('keeps the kind and only swaps the queries when the target type matches', () => {
-		const spec = specOfKind('signoz/TimeSeriesPanel');
-		const result = buildViewPanelSpec({
-			spec,
-			query,
-			panelType: PANEL_TYPES.TIME_SERIES,
-		});
-
-		expect(result.plugin.kind).toBe('signoz/TimeSeriesPanel');
-		expect(result.plugin.spec).toBe(spec.plugin.spec);
-		expect(result.queries).toStrictEqual([{ kind: 'mock-query' }]);
-		expect(toPerses).toHaveBeenCalledWith(query, PANEL_TYPES.TIME_SERIES);
-		expect(getSwitchedPluginSpec).not.toHaveBeenCalled();
-	});
-
-	it('switches the kind (Value → Table) and rebuilds the plugin spec', () => {
-		const result = buildViewPanelSpec({
-			spec: specOfKind('signoz/NumberPanel'),
-			query,
-			panelType: PANEL_TYPES.TABLE,
-		});
-
-		expect(result.plugin.kind).toBe('signoz/TablePanel');
-		expect(result.plugin.spec).toStrictEqual({ switched: true });
-		expect(getSwitchedPluginSpec).toHaveBeenCalled();
-		expect(toPerses).toHaveBeenCalledWith(query, PANEL_TYPES.TABLE);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/__tests__/drilldown.test.ts

@@ -1,381 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import type {
-	PanelSeries,
-	PanelTable,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import type { DrilldownContext } from '../../../types/drilldown';
-import { buildAggregateData } from '../buildAggregateData';
-import { stepClickTimeRange } from '../chartClickTimeRange';
-import { enrichChartClick } from '../enrichChartClick';
-import { enrichNumberClick } from '../enrichNumberClick';
-import { enrichPieClick } from '../enrichPieClick';
-import { enrichTableClick } from '../enrichTableClick';
-import { resolveDrilldownSignal } from '../signal';
-
-// The v5 BuilderQuery union is too verbose to construct field-typed inline; cast at the boundary.
-function builderQuery(spec: Record<string, unknown>): BuilderQuery {
-	return spec as unknown as BuilderQuery;
-}
-
-function panelSeries(overrides: Partial<PanelSeries> = {}): PanelSeries {
-	return {
-		queryName: 'A',
-		legend: '',
-		labels: { 'service.name': 'frontend' },
-		kind: 'series',
-		values: [],
-		aggregation: { index: 0, alias: '' },
-		...overrides,
-	};
-}
-
-function chartClick(
-	focusedSeries: ChartClickData['focusedSeries'],
-): ChartClickData {
-	return {
-		xValue: 0,
-		yValue: 0,
-		focusedSeries,
-		clickedDataTimestamp: 1_700_000_000,
-		mouseX: 10,
-		mouseY: 20,
-		absoluteMouseX: 110,
-		absoluteMouseY: 220,
-	};
-}
-
-function focused(seriesIndex: number): ChartClickData['focusedSeries'] {
-	return { seriesIndex, seriesName: 'frontend', value: 1, color: '#fff' };
-}
-
-describe('resolveDrilldownSignal', () => {
-	it('maps logs/traces directly', () => {
-		expect(resolveDrilldownSignal(builderQuery({ signal: 'logs' }))).toBe('logs');
-		expect(resolveDrilldownSignal(builderQuery({ signal: 'traces' }))).toBe(
-			'traces',
-		);
-	});
-
-	it('falls back to metrics for metrics, meter and unknown/missing signals', () => {
-		expect(resolveDrilldownSignal(builderQuery({ signal: 'metrics' }))).toBe(
-			'metrics',
-		);
-		expect(resolveDrilldownSignal(builderQuery({ signal: 'meter' }))).toBe(
-			'metrics',
-		);
-		expect(resolveDrilldownSignal(undefined)).toBe('metrics');
-	});
-});
-
-describe('enrichChartClick', () => {
-	const series = [
-		panelSeries({ queryName: 'A', labels: { 'service.name': 'frontend' } }),
-		panelSeries({ queryName: 'B', labels: { 'service.name': 'cart' } }),
-	];
-
-	it('maps the uPlot series index to the (index - 1) flattened series', () => {
-		// uPlot series[0] is the x-axis, so data series start at 1.
-		const payload = enrichChartClick({
-			clickData: chartClick(focused(2)),
-			series,
-			builderQueries: [
-				builderQuery({ name: 'A', signal: 'metrics' }),
-				builderQuery({ name: 'B', signal: 'logs' }),
-			],
-		});
-
-		expect(payload?.context.queryName).toBe('B');
-		expect(payload?.context.signal).toBe('logs');
-		expect(payload?.context.filters).toStrictEqual([
-			expect.objectContaining({ filterKey: 'service.name', filterValue: 'cart' }),
-		]);
-		expect(payload?.context.seriesColor).toBe('#fff');
-		expect(payload?.coordinates).toStrictEqual({ x: 110, y: 220 });
-	});
-
-	it('passes through the caller-computed time range and resolves the signal', () => {
-		const payload = enrichChartClick({
-			clickData: chartClick(focused(1)),
-			series,
-			builderQueries: [builderQuery({ name: 'A', signal: 'traces' })],
-			timeRange: { startTime: 100, endTime: 200 },
-		});
-
-		expect(payload?.context.signal).toBe('traces');
-		expect(payload?.context.timeRange).toStrictEqual({
-			startTime: 100,
-			endTime: 200,
-		});
-	});
-
-	it('returns null when there is no focused series', () => {
-		expect(
-			enrichChartClick({
-				clickData: chartClick(null),
-				series,
-				builderQueries: [],
-			}),
-		).toBeNull();
-	});
-
-	it('returns null when the series index maps to no series', () => {
-		expect(
-			enrichChartClick({
-				clickData: chartClick(focused(99)),
-				series,
-				builderQueries: [],
-			}),
-		).toBeNull();
-	});
-
-	it('returns null for formula queries (queryName starts with F)', () => {
-		expect(
-			enrichChartClick({
-				clickData: chartClick(focused(1)),
-				series: [panelSeries({ queryName: 'F1' })],
-				builderQueries: [],
-			}),
-		).toBeNull();
-	});
-
-	it('emits empty filters for an ungrouped series', () => {
-		const payload = enrichChartClick({
-			clickData: chartClick(focused(1)),
-			series: [panelSeries({ queryName: 'A', labels: {} })],
-			builderQueries: [builderQuery({ name: 'A', signal: 'metrics' })],
-		});
-
-		expect(payload?.context.filters).toStrictEqual([]);
-		expect(payload?.context.queryName).toBe('A');
-	});
-});
-
-describe('buildAggregateData', () => {
-	it('projects the drilldown context onto the V1 AggregateData shape', () => {
-		const context: DrilldownContext = {
-			queryName: 'A',
-			signal: TelemetrytypesSignalDTO.logs,
-			filters: [{ filterKey: 'k', filterValue: 'v', operator: '=' }],
-			timeRange: { startTime: 1, endTime: 2 },
-			label: 'frontend',
-			seriesColor: '#abc',
-			columnKind: 'aggregate',
-		};
-
-		expect(buildAggregateData(context)).toStrictEqual({
-			queryName: 'A',
-			filters: [{ filterKey: 'k', filterValue: 'v', operator: '=' }],
-			timeRange: { startTime: 1, endTime: 2 },
-			label: 'frontend',
-			seriesColor: '#abc',
-		});
-	});
-});
-
-describe('enrichNumberClick', () => {
-	const numberTable = (queryName: string): PanelTable => ({
-		queryName,
-		legend: '',
-		columns: [{ name: 'value', queryName, isValueColumn: true, id: queryName }],
-		rows: [{ data: { [queryName]: 42 } }],
-	});
-
-	it('drills down on the displayed value column with empty filters and no label', () => {
-		const payload = enrichNumberClick({
-			tables: [numberTable('A')],
-			builderQueries: [builderQuery({ name: 'A', signal: 'logs' })],
-			coordinates: { x: 5, y: 6 },
-			timeRange: { startTime: 1, endTime: 2 },
-		});
-
-		// No label: the menu header falls back to the aggregation expression (V1 parity).
-		expect(payload?.context).toStrictEqual({
-			queryName: 'A',
-			signal: 'logs',
-			filters: [],
-			timeRange: { startTime: 1, endTime: 2 },
-		});
-		expect(payload?.coordinates).toStrictEqual({ x: 5, y: 6 });
-	});
-
-	it('drills into the displayed value column, not the first builder query', () => {
-		// Panel shows query B's value column; drilldown must target B, not A.
-		const payload = enrichNumberClick({
-			tables: [numberTable('B')],
-			builderQueries: [
-				builderQuery({ name: 'A', signal: 'logs' }),
-				builderQuery({ name: 'B', signal: 'traces' }),
-			],
-			coordinates: { x: 0, y: 0 },
-		});
-
-		expect(payload?.context.queryName).toBe('B');
-		expect(payload?.context.signal).toBe('traces');
-	});
-
-	it('returns null when there is no drillable query', () => {
-		expect(
-			enrichNumberClick({
-				tables: [],
-				builderQueries: [],
-				coordinates: { x: 0, y: 0 },
-			}),
-		).toBeNull();
-	});
-
-	it('returns null for a formula query', () => {
-		expect(
-			enrichNumberClick({
-				tables: [numberTable('F1')],
-				builderQueries: [],
-				coordinates: { x: 0, y: 0 },
-			}),
-		).toBeNull();
-	});
-});
-
-describe('enrichTableClick', () => {
-	const table: PanelTable = {
-		queryName: 'A',
-		legend: '',
-		columns: [
-			{
-				name: 'service.name',
-				queryName: 'A',
-				isValueColumn: false,
-				id: 'service.name',
-			},
-			{ name: 'p99', queryName: 'A', isValueColumn: true, id: 'A' },
-		],
-		rows: [{ data: { 'service.name': 'frontend', A: 42 } }],
-	};
-	const record = { 'service.name': 'frontend', A: 42 };
-	const builderQueries = [builderQuery({ name: 'A', signal: 'traces' })];
-
-	it('builds equality filters from the row group cells for a value-column click', () => {
-		const payload = enrichTableClick({
-			record,
-			columnId: 'A',
-			table,
-			builderQueries,
-			coordinates: { x: 1, y: 2 },
-			timeRange: { startTime: 10, endTime: 20 },
-		});
-
-		expect(payload?.context.queryName).toBe('A');
-		expect(payload?.context.signal).toBe('traces');
-		expect(payload?.context.columnKind).toBe('aggregate');
-		expect(payload?.context.clickedKey).toBeUndefined();
-		// No label: the aggregate menu header falls back to the aggregation expression,
-		// not the value column name (V1 parity).
-		expect(payload?.context.label).toBeUndefined();
-		expect(payload?.context.filters).toStrictEqual([
-			{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
-		]);
-	});
-
-	it('falls back to the row value column and carries the clicked cell for a group click', () => {
-		const payload = enrichTableClick({
-			record,
-			columnId: 'service.name',
-			table,
-			builderQueries,
-			coordinates: { x: 1, y: 2 },
-		});
-
-		expect(payload?.context.queryName).toBe('A');
-		expect(payload?.context.columnKind).toBe('group');
-		expect(payload?.context.clickedKey).toBe('service.name');
-		expect(payload?.context.clickedValue).toBe('frontend');
-	});
-
-	it('returns null when the table has no value column', () => {
-		const groupOnly: PanelTable = {
-			queryName: 'A',
-			legend: '',
-			columns: [
-				{
-					name: 'service.name',
-					queryName: 'A',
-					isValueColumn: false,
-					id: 'service.name',
-				},
-			],
-			rows: [{ data: { 'service.name': 'frontend' } }],
-		};
-		expect(
-			enrichTableClick({
-				record,
-				columnId: 'service.name',
-				table: groupOnly,
-				builderQueries,
-				coordinates: { x: 1, y: 2 },
-			}),
-		).toBeNull();
-	});
-});
-
-describe('enrichPieClick', () => {
-	it('builds filters from the slice labels and resolves the signal', () => {
-		const payload = enrichPieClick({
-			slice: {
-				label: 'frontend',
-				value: 12,
-				color: '#abc',
-				queryName: 'A',
-				labels: { 'service.name': 'frontend' },
-			},
-			builderQueries: [builderQuery({ name: 'A', signal: 'traces' })],
-			coordinates: { x: 7, y: 8 },
-			timeRange: { startTime: 1, endTime: 2 },
-		});
-
-		expect(payload?.context.queryName).toBe('A');
-		expect(payload?.context.signal).toBe('traces');
-		expect(payload?.context.filters).toStrictEqual([
-			{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
-		]);
-	});
-
-	it('returns null for a slice with no source query', () => {
-		expect(
-			enrichPieClick({
-				slice: { label: 'x', value: 1, color: '#000' },
-				builderQueries: [],
-				coordinates: { x: 0, y: 0 },
-			}),
-		).toBeNull();
-	});
-});
-
-describe('stepClickTimeRange', () => {
-	it('returns [clickedTs, clickedTs + step] for a non-APM query', () => {
-		expect(
-			stepClickTimeRange({
-				clickedDataTimestamp: 1000,
-				queryName: 'A',
-				builderQueries: [builderQuery({ name: 'A', signal: 'logs' })],
-				stepIntervals: { A: 30 },
-			}),
-		).toStrictEqual({ startTime: 1000, endTime: 1030 });
-	});
-
-	it('falls back to a 60s step when no interval is provided', () => {
-		expect(
-			stepClickTimeRange({
-				clickedDataTimestamp: 1000,
-				queryName: 'A',
-				builderQueries: [
-					builderQuery({
-						name: 'A',
-						signal: 'metrics',
-						aggregations: [{ metricName: 'custom_metric' }],
-					}),
-				],
-			}),
-		).toStrictEqual({ startTime: 1000, endTime: 1060 });
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildAggregateData.ts

@@ -1,18 +0,0 @@
-import type { AggregateData } from 'container/QueryTable/Drilldown/useAggregateDrilldown';
-
-import type { DrilldownContext } from '../../types/drilldown';
-
-/**
- * Adapts a V2 `DrilldownContext` to the V1 `AggregateData` that `buildDrilldownUrl`/the drilldown
- * navigate hook consume. The single boundary between the V2 click payload and the reused V1
- * navigation machinery.
- */
-export function buildAggregateData(context: DrilldownContext): AggregateData {
-	return {
-		queryName: context.queryName,
-		filters: context.filters,
-		timeRange: context.timeRange,
-		label: context.label,
-		seriesColor: context.seriesColor,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec.ts

@@ -1,52 +0,0 @@
-import type {
-	DashboardtypesPanelPluginDTO,
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { getSwitchedPluginSpec } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec';
-import {
-	PANEL_TYPE_TO_PANEL_KIND,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { toPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getBuilderQueries } from '../getBuilderQueries';
-
-/**
- * Bakes a V1 query + target panel type into a View-modal spec (drilldown seed + URL re-hydration).
- * When `panelType` maps to a different kind than the panel's (e.g. a breakout turns Value → Table),
- * the kind is switched via the editor's `getSwitchedPluginSpec` so it opens with populated config.
- */
-export function buildViewPanelSpec({
-	spec,
-	query,
-	panelType,
-}: {
-	spec: DashboardtypesPanelSpecDTO;
-	query: Query;
-	panelType: PANEL_TYPES;
-}): DashboardtypesPanelSpecDTO {
-	const queries = toPerses(query, panelType);
-	const currentKind = spec.plugin.kind as PanelKind;
-	const newKind = PANEL_TYPE_TO_PANEL_KIND[panelType] ?? currentKind;
-
-	if (newKind === currentKind) {
-		return { ...spec, queries };
-	}
-
-	// The plugin cast mirrors the editor's type-switch — a dynamically chosen kind can't be
-	// correlated with its spec statically.
-	const signal = getBuilderQueries(spec.queries ?? [])[0]
-		?.signal as TelemetrytypesSignalDTO;
-	return {
-		...spec,
-		plugin: {
-			...spec.plugin,
-			kind: newKind,
-			spec: getSwitchedPluginSpec(spec, newKind, signal),
-		} as DashboardtypesPanelPluginDTO,
-		queries,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/chartClickTimeRange.ts

@@ -1,39 +0,0 @@
-import {
-	getTimeRangeFromStepInterval,
-	isApmMetric,
-} from 'container/PanelWrapper/utils';
-import type { BuilderQuery, MetricAggregation } from 'types/api/v5/queryRange';
-
-/** Fallback step (seconds) when the response carries no per-query step interval (V1 parity). */
-const DEFAULT_STEP_INTERVAL = 60;
-
-interface StepClickTimeRangeArgs {
-	/** Clicked bucket timestamp, in the chart's x-unit (epoch seconds). */
-	clickedDataTimestamp: number;
-	/** The clicked series' query — selects its step and detects APM metrics. */
-	queryName: string;
-	builderQueries: BuilderQuery[];
-	/** Per-query step intervals (seconds) from the response exec stats. */
-	stepIntervals?: Record<string, number>;
-}
-
-/**
- * Time window for a time-axis chart click: the clicked bucket plus one step (V1 parity). APM-metric
- * panels widen the window one step to the left. Shared by the TimeSeries and Bar renderers; the
- * matching field remapping happens later inside `getViewQuery`.
- */
-export function stepClickTimeRange({
-	clickedDataTimestamp,
-	queryName,
-	builderQueries,
-	stepIntervals,
-}: StepClickTimeRangeArgs): { startTime: number; endTime: number } {
-	const builderQuery = builderQueries.find((query) => query.name === queryName);
-	const stepInterval = stepIntervals?.[queryName] ?? DEFAULT_STEP_INTERVAL;
-	const isApm =
-		builderQuery?.signal === 'metrics' &&
-		isApmMetric(
-			(builderQuery?.aggregations?.[0] as MetricAggregation)?.metricName ?? '',
-		);
-	return getTimeRangeFromStepInterval(stepInterval, clickedDataTimestamp, isApm);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichChartClick.ts

@@ -1,60 +0,0 @@
-import {
-	getFiltersFromMetric,
-	isValidQueryName,
-} from 'container/QueryTable/Drilldown/drilldownUtils';
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import type { DrilldownClickPayload } from '../../types/drilldown';
-
-import { resolveDrilldownSignal } from './signal';
-
-interface EnrichChartClickArgs {
-	clickData: ChartClickData;
-	/** Flattened series in the same order they were added to uPlot (see `prepareAlignedData`/`addSeries`). */
-	series: PanelSeries[];
-	/** The panel's builder queries, for resolving the clicked series' signal by `queryName`. */
-	builderQueries: BuilderQuery[];
-	/** Explorer time window; the caller computes it (clicked bucket ±step for time charts, panel window for histograms). */
-	timeRange?: { startTime: number; endTime: number };
-}
-
-/**
- * Turns a uPlot click (time-series or bar) into a drilldown payload. Resolves the clicked series via
- * uPlot's series index (index 0 is the x-axis, so data series start at 1 → `series[seriesIndex - 1]`)
- * and builds equality filters from its group-by labels. Returns `null` when the click can't be
- * attributed to a drillable series (no focused series, unmapped index, or a formula query).
- */
-export function enrichChartClick({
-	clickData,
-	series,
-	builderQueries,
-	timeRange,
-}: EnrichChartClickArgs): DrilldownClickPayload | null {
-	const { focusedSeries } = clickData;
-	if (!focusedSeries) {
-		return null;
-	}
-
-	const panelSeries = series[focusedSeries.seriesIndex - 1];
-	if (!panelSeries || !isValidQueryName(panelSeries.queryName)) {
-		return null;
-	}
-
-	const builderQuery = builderQueries.find(
-		(query) => query.name === panelSeries.queryName,
-	);
-
-	return {
-		coordinates: { x: clickData.absoluteMouseX, y: clickData.absoluteMouseY },
-		context: {
-			queryName: panelSeries.queryName,
-			signal: resolveDrilldownSignal(builderQuery),
-			filters: getFiltersFromMetric(panelSeries.labels),
-			timeRange,
-			label: focusedSeries.seriesName,
-			seriesColor: focusedSeries.color,
-		},
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichNumberClick.ts

@@ -1,49 +0,0 @@
-import { isValidQueryName } from 'container/QueryTable/Drilldown/drilldownUtils';
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import type { DrilldownClickPayload } from '../../types/drilldown';
-
-import { resolveDrilldownSignal } from './signal';
-
-interface EnrichNumberClickArgs {
-	/** The panel's scalar tables — the displayed value's column selects the drilldown query. */
-	tables: PanelTable[];
-	/** The panel's builder queries; resolves the clicked query's signal by name. */
-	builderQueries: BuilderQuery[];
-	coordinates: { x: number; y: number };
-	/** Explorer time window — the panel's fetched window (the value has no clicked bucket). */
-	timeRange?: { startTime: number; endTime: number };
-}
-
-/**
- * Turns a Number/Value click into a drilldown payload. Drills into the query the panel actually
- * displays — the first table-with-rows' value column (mirrors `prepareNumberData`), not blindly
- * `builderQueries[0]` (they diverge for multi-query panels). Returns `null` when that query isn't
- * drillable (promql/formula).
- */
-export function enrichNumberClick({
-	tables,
-	builderQueries,
-	coordinates,
-	timeRange,
-}: EnrichNumberClickArgs): DrilldownClickPayload | null {
-	const valueColumn = tables
-		.find((table) => table.rows.length > 0)
-		?.columns.find((column) => column.isValueColumn);
-	const queryName = valueColumn?.queryName ?? builderQueries[0]?.name ?? '';
-	if (!isValidQueryName(queryName)) {
-		return null;
-	}
-
-	const builderQuery = builderQueries.find((query) => query.name === queryName);
-	return {
-		coordinates,
-		context: {
-			queryName,
-			signal: resolveDrilldownSignal(builderQuery),
-			filters: [],
-			timeRange,
-		},
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichPieClick.ts

@@ -1,47 +0,0 @@
-import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
-import {
-	getFiltersFromMetric,
-	isValidQueryName,
-} from 'container/QueryTable/Drilldown/drilldownUtils';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import type { DrilldownClickPayload } from '../../types/drilldown';
-
-import { resolveDrilldownSignal } from './signal';
-
-interface EnrichPieClickArgs {
-	slice: PieSlice;
-	builderQueries: BuilderQuery[];
-	coordinates: { x: number; y: number };
-	/** Explorer time window — the panel's fetched window (pie slices have no clicked bucket). */
-	timeRange?: { startTime: number; endTime: number };
-}
-
-/**
- * Turns a pie-slice click into a drilldown payload, using the slice's source-row labels (carried by
- * `preparePieData`) as equality filters. Returns `null` when the slice has no drillable query.
- */
-export function enrichPieClick({
-	slice,
-	builderQueries,
-	coordinates,
-	timeRange,
-}: EnrichPieClickArgs): DrilldownClickPayload | null {
-	const queryName = slice.queryName ?? '';
-	if (!isValidQueryName(queryName)) {
-		return null;
-	}
-
-	const builderQuery = builderQueries.find((query) => query.name === queryName);
-	return {
-		coordinates,
-		context: {
-			queryName,
-			signal: resolveDrilldownSignal(builderQuery),
-			filters: getFiltersFromMetric(slice.labels ?? {}),
-			timeRange,
-			label: slice.label,
-			seriesColor: slice.color,
-		},
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichTableClick.ts

@@ -1,91 +0,0 @@
-import { OPERATORS } from 'constants/queryBuilder';
-import {
-	type FilterData,
-	isValidQueryName,
-} from 'container/QueryTable/Drilldown/drilldownUtils';
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-import type { DrilldownClickPayload } from '../../types/drilldown';
-
-import { resolveDrilldownSignal } from './signal';
-
-interface EnrichTableClickArgs {
-	/** The clicked row's data, keyed by column id (see `prepareScalarTables`). */
-	record: Record<string, unknown>;
-	/** The clicked column's key (`column.id || column.name`). */
-	columnId: string;
-	table: PanelTable;
-	builderQueries: BuilderQuery[];
-	coordinates: { x: number; y: number };
-	/** Explorer time window — the panel's fetched window (scalar tables have no clicked bucket). */
-	timeRange?: { startTime: number; endTime: number };
-}
-
-/**
- * Turns a table cell click into a drilldown payload. The clicked value column (or the row's first
- * value column) selects the aggregate query, and the row's group-by cells become equality filters
- * (V1 `getFiltersToAddToView` parity). `columnKind` records whether a value or group column was
- * clicked, for the future filter-by-value menu. Returns `null` when the row has no drillable
- * aggregate query.
- */
-export function enrichTableClick({
-	record,
-	columnId,
-	table,
-	builderQueries,
-	coordinates,
-	timeRange,
-}: EnrichTableClickArgs): DrilldownClickPayload | null {
-	const clickedColumn = table.columns.find(
-		(col) => (col.id || col.name) === columnId,
-	);
-	const valueColumn = clickedColumn?.isValueColumn
-		? clickedColumn
-		: table.columns.find((col) => col.isValueColumn);
-	if (!valueColumn || !isValidQueryName(valueColumn.queryName)) {
-		return null;
-	}
-
-	const filters = table.columns.reduce<FilterData[]>((acc, col) => {
-		if (col.isValueColumn) {
-			return acc;
-		}
-		const value = record[col.id || col.name];
-		if (value != null) {
-			// Group cell value → equality filter. Cast at the boundary: row data is `unknown`,
-			// group cells hold scalar label values.
-			acc.push({
-				filterKey: col.name,
-				filterValue: value as string | number,
-				operator: OPERATORS['='],
-			});
-		}
-		return acc;
-	}, []);
-
-	const builderQuery = builderQueries.find(
-		(query) => query.name === valueColumn.queryName,
-	);
-
-	// A group-column click filters by that single cell (V1 filter-by-value); a value-column click
-	// opens the aggregate menu scoped by the whole row.
-	const isGroupColumn = clickedColumn != null && !clickedColumn.isValueColumn;
-
-	return {
-		coordinates,
-		context: {
-			queryName: valueColumn.queryName,
-			signal: resolveDrilldownSignal(builderQuery),
-			filters,
-			timeRange,
-			// No `label`: like Number/Value, the aggregate menu header falls back to the
-			// aggregation expression (e.g. `sum(signoz_calls_total)`), not the column name (V1 parity).
-			columnKind: isGroupColumn ? 'group' : 'aggregate',
-			clickedKey: isGroupColumn ? clickedColumn?.name : undefined,
-			clickedValue: isGroupColumn
-				? (record[columnId] as string | number)
-				: undefined,
-		},
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/signal.ts

@@ -1,19 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-/**
- * Maps a V5 builder query's `signal` to the drilldown signal. Meter and unknown signals fall back to
- * `metrics` so the drilldown always targets a real explorer.
- */
-export function resolveDrilldownSignal(
-	query: BuilderQuery | undefined,
-): TelemetrytypesSignalDTO {
-	switch (query?.signal) {
-		case 'logs':
-			return TelemetrytypesSignalDTO.logs;
-		case 'traces':
-			return TelemetrytypesSignalDTO.traces;
-		default:
-			return TelemetrytypesSignalDTO.metrics;
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelTimeRange.ts

@@ -1,28 +0,0 @@
-import type { Querybuildertypesv5QueryRangeRequestDTO } from 'api/generated/services/sigNoz.schemas';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import store from 'store';
-
-/** Panel time window in epoch SECONDS (uPlot X-scale + drilldown explorer window). */
-interface PanelTimeRange {
-	startTime: number;
-	endTime: number;
-}
-
-/**
- * Time window a panel's data was fetched over, read off the request's `start`/`end` (ms → s).
- * Falls back to the dashboard global-time window when the panel hasn't fetched yet.
- */
-export function getPanelTimeRange(
-	request: Querybuildertypesv5QueryRangeRequestDTO | undefined,
-): PanelTimeRange {
-	if (request?.start && request?.end) {
-		return { startTime: request.start / 1000, endTime: request.end / 1000 };
-	}
-
-	const { globalTime } = store.getState();
-	const { start, end } = getStartEndRangeTime({
-		type: 'GLOBAL_TIME',
-		interval: globalTime.selectedTime,
-	});
-	return { startTime: parseInt(start, 10), endTime: parseInt(end, 10) };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownAggregateMenu.tsx

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { DraftingCompass, ScrollText } from '@signozhq/icons';
-import { getAggregateColumnHeader } from 'container/QueryTable/Drilldown/drilldownUtils';
-import ContextMenu from 'periscope/components/ContextMenu';
-import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-interface DrilldownAggregateMenuProps {
-	context: DrilldownContext;
-	/** Panel's V5→V1 query — supplies the aggregation-expression header fallback. */
-	query: Query;
-	onViewLogs: () => void;
-	onViewTraces: () => void;
-}
-
-/**
- * The base aggregate drill-down menu: a tinted header + View in Logs/Traces. Metrics is
- * omitted — V1 surfaces only Logs/Traces.
- */
-function DrilldownAggregateMenu({
-	context,
-	query,
-	onViewLogs,
-	onViewTraces,
-}: DrilldownAggregateMenuProps): JSX.Element {
-	const aggregations = useMemo(
-		() => getAggregateColumnHeader(query, context.queryName).aggregations,
-		[query, context.queryName],
-	);
-
-	return (
-		<>
-			<ContextMenu.Header>
-				<div style={{ textTransform: 'capitalize' }}>{context.signal}</div>
-				<div
-					style={{
-						fontWeight: 'normal',
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-						color: context.seriesColor,
-					}}
-				>
-					{context.label || aggregations}
-				</div>
-			</ContextMenu.Header>
-			<ContextMenu.Item
-				icon={
-					<span style={{ color: context.seriesColor }}>
-						<ScrollText size={16} />
-					</span>
-				}
-				onClick={onViewLogs}
-			>
-				<span data-testid="drilldown-view-logs">View in Logs</span>
-			</ContextMenu.Item>
-			<ContextMenu.Item
-				icon={
-					<span style={{ color: context.seriesColor }}>
-						<DraftingCompass size={16} />
-					</span>
-				}
-				onClick={onViewTraces}
-			>
-				<span data-testid="drilldown-view-traces">View in Traces</span>
-			</ContextMenu.Item>
-		</>
-	);
-}
-
-export default DrilldownAggregateMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -3,13 +3,11 @@ import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesTimePreferenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import ContextMenu from 'periscope/components/ContextMenu';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { panelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
 
 import type { DashboardSection } from '../../utils';
-import { useDrilldown } from './hooks/useDrilldown';
 import { usePanelInteractions } from './hooks/usePanelInteractions';
 import PanelBody from './PanelBody/PanelBody';
 import PanelHeader from './PanelHeader/PanelHeader';
@@ -69,7 +67,6 @@ function Panel({
 	});
 
 	const { onDragSelect, dashboardPreference } = usePanelInteractions();
-	const drilldown = useDrilldown(panel, panelId);
 
 	return (
 		<div
@@ -101,11 +98,8 @@ function Panel({
 					dashboardPreference={dashboardPreference}
 					searchTerm={searchable ? searchTerm : undefined}
 					pagination={pagination}
-					onClick={drilldown.onPanelClick}
-					enableDrillDown={drilldown.enableDrillDown}
 				/>
 			)}
-			<ContextMenu {...drilldown.contextMenuProps} />
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -14,19 +14,6 @@ jest.mock(
 	}),
 );
 
-const mockOpenView = jest.fn();
-jest.mock('../../hooks/useViewPanel', () => ({
-	useViewPanel: (): {
-		openView: jest.Mock;
-		closeView: jest.Mock;
-		expandedPanelId: string | null;
-	} => ({
-		openView: mockOpenView,
-		closeView: jest.fn(),
-		expandedPanelId: null,
-	}),
-}));
-
 const mockMovePanel = jest.fn();
 jest.mock('../../hooks/useMovePanelToSection', () => ({
 	useMovePanelToSection: (): jest.Mock => mockMovePanel,
@@ -277,13 +264,18 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('view opens the View modal for the panel', () => {
+	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
+		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+
 		const view = result.current.items.find(
 			(i) => 'key' in i && i.key === 'view-panel',
 		);
 		(view as { onClick: () => void }).onClick();
-		expect(mockOpenView).toHaveBeenCalledWith('panel-1');
+
+		expect(alertSpy).toHaveBeenCalledTimes(1);
+		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
+		alertSpy.mockRestore();
 	});
 
 	it('create-alert seeds an alert from this panel', () => {

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/panelActionMeta.ts

@@ -3,13 +3,12 @@ import type { ComponentTypes } from 'utils/permission';
 
 /**
  * Every action the panel menu can offer: per-kind gated capabilities (minus
- * `search` and `drilldown`, which are renderer-wired controls, not menu items)
- * plus the chrome actions every kind gets. The `Record<PanelActionId, …>` below
- * forces a meta entry per id, so adding an action without declaring its gates is
- * a compile error.
+ * `search`, a header control) plus the chrome actions every kind gets. The
+ * `Record<PanelActionId, …>` below forces a meta entry per id, so adding an
+ * action without declaring its gates is a compile error.
  */
 export type PanelActionId =
-	| Exclude<keyof PanelActionCapabilities, 'search' | 'drilldown'>
+	| Exclude<keyof PanelActionCapabilities, 'search'>
 	| 'move'
 	| 'delete';
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/usePanelActionItems.tsx

@@ -30,7 +30,6 @@ import {
 	type MovePanelArgs,
 	useMovePanelToSection,
 } from '../hooks/useMovePanelToSection';
-import { useViewPanel } from '../hooks/useViewPanel';
 import { PANEL_ACTION_META } from './panelActionMeta';
 
 // Stable fallback so renders without layout context don't churn the mutation
@@ -147,7 +146,6 @@ export function usePanelActionItems({
 	const isEditable = useDashboardStore((s) => s.isEditable);
 	const openPanelEditor = useOpenPanelEditor();
 	const createAlert = useCreateAlertFromPanel();
-	const { openView } = useViewPanel();
 
 	// Mutations are store-backed (dashboardId/refetch) — the layout tree only
 	// supplies data (`sections`), so no callbacks are threaded through it.
@@ -180,7 +178,7 @@ export function usePanelActionItems({
 				key: 'view-panel',
 				label: 'View',
 				icon: <Fullscreen size={14} />,
-				onClick: (): void => openView(panelId),
+				onClick: (): void => notImplementedYet('View'),
 			});
 		}
 		if (isEditable && canEditWidget && panelCapabilities.edit) {
@@ -265,7 +263,6 @@ export function usePanelActionItems({
 		panelActions,
 		sections,
 		panelId,
-		openView,
 		openPanelEditor,
 		createAlert,
 		movePanel,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.tsx

@@ -3,7 +3,6 @@ import { Loader, RotateCw, SquarePlus, TriangleAlert } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import PanelMessage from 'pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage';
-import type { AnyPanelInteractionProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/interactions';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { hasRunnableQueries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
@@ -33,12 +32,6 @@ interface PanelBodyProps {
 	searchTerm?: string;
 	/** Server-side paging handles — only consumed by raw/list renderers. */
 	pagination?: PanelPagination;
-	/** Close the standalone View modal — only consumed by the time-series/bar graph manager. */
-	onCloseStandaloneView?: () => void;
-	/** Opens the drill-down context menu; threaded to interactive renderers. */
-	onClick?: AnyPanelInteractionProps['onClick'];
-	/** Gate for the drill-down menu — kind supported and the panel has a builder query. */
-	enableDrillDown?: boolean;
 }
 
 /**
@@ -58,9 +51,6 @@ function PanelBody({
 	panelMode = PanelMode.DASHBOARD_VIEW,
 	searchTerm,
 	pagination,
-	onCloseStandaloneView,
-	onClick,
-	enableDrillDown = false,
 }: PanelBodyProps): JSX.Element {
 	// react-query keeps the previous response during refetches, so its presence is
 	// the "have something to show" signal — only fail hard when there's nothing.
@@ -118,12 +108,10 @@ function PanelBody({
 				refetch={refetch}
 				onDragSelect={onDragSelect}
 				panelMode={panelMode}
-				enableDrillDown={enableDrillDown}
-				onClick={onClick}
+				enableDrillDown={false}
 				dashboardPreference={dashboardPreference}
 				searchTerm={searchTerm}
 				pagination={pagination}
-				onCloseStandaloneView={onCloseStandaloneView}
 			/>
 		</div>
 	);

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeaderSearch.module.scss

@@ -1,17 +1,9 @@
 // Expanded state: a compact input that fits the header row.
 .input {
-	width: min(100%, 320px);
-	height: 24px;
+	width: 180px;
 }
 
 .clear {
 	--button-height: 18px;
-	--button-width: 18px;
 	--button-padding: 0;
 }
-
-.searchTrigger {
-	--button-width: 24px;
-	--button-height: 24px;
-	--button-padding: 4px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeaderSearch.tsx

@@ -43,7 +43,6 @@ function PanelHeaderSearch({
 					color="secondary"
 					size="icon"
 					onClick={(): void => setExpanded(true)}
-					className={styles.searchTrigger}
 					data-testid="panel-header-search-trigger"
 					aria-label="Search"
 				>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.module.scss

@@ -1,52 +0,0 @@
-@use '../../../../../../styles/scrollbar' as *;
-
-.modal {
-	:global(.ant-modal-body) {
-		padding: 0px;
-	}
-}
-
-// Tall, fixed-height column so the renderer's resize observer measures real
-// dimensions — the chart self-sizes to fill whatever space it's given.
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	height: 78vh;
-	overflow: auto;
-	padding: 12px;
-
-	@include custom-scrollbar;
-}
-
-.queryBuilder {
-	flex: 0 0 auto;
-	overflow: auto;
-	display: flex;
-	flex-direction: column;
-}
-
-.toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 8px;
-	flex: 0 0 auto;
-}
-
-.toolbarTime {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.body {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	min-height: 480px;
-}
-
-.panelTypeSelector {
-	width: 240px;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModal.tsx

@@ -1,49 +0,0 @@
-import { Modal } from 'antd';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import ViewPanelModalContent from './ViewPanelModalContent';
-import styles from './ViewPanelModal.module.scss';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-interface ViewPanelModalProps {
-	/**
-	 * The expanded panel and its id. Absent while the modal is closed — a single
-	 * host instance lives at the layout level and only carries a panel when open.
-	 */
-	panel?: DashboardtypesPanelDTO;
-	panelId?: string;
-	open: boolean;
-	onClose: () => void;
-}
-
-function ViewPanelModal({
-	panel,
-	panelId,
-	open,
-	onClose,
-}: ViewPanelModalProps): JSX.Element {
-	const name = panel?.spec.display.name ?? '';
-
-	return (
-		<Modal
-			open={open}
-			onCancel={onClose}
-			footer={null}
-			centered
-			width="85%"
-			destroyOnClose
-			className={styles.modal}
-			title={
-				<TooltipSimple title={name} arrow>
-					<span className={styles.title}>{name} - (View mode)</span>
-				</TooltipSimple>
-			}
-		>
-			{open && panel && panelId && (
-				<ViewPanelModalContent panel={panel} panelId={panelId} onClose={onClose} />
-			)}
-		</Modal>
-	);
-}
-
-export default ViewPanelModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalContent.tsx

@@ -1,126 +0,0 @@
-import { useMemo } from 'react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import PanelEditorQueryBuilder from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder';
-import PreviewPane from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
-import { useOpenPanelEditor } from 'pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor';
-
-import { usePanelInteractions } from '../hooks/usePanelInteractions';
-import ViewPanelModalHeader from './ViewPanelModalHeader';
-import { useViewPanelEditor } from './useViewPanelEditor';
-import { useViewPanelTimeWindow } from './useViewPanelTimeWindow';
-import styles from './ViewPanelModal.module.scss';
-
-interface ViewPanelModalContentProps {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Close the modal — wired to the graph manager's Save/Cancel. */
-	onClose: () => void;
-}
-
-/**
- * Body of the View modal: a compact drilldown editor. It renders an editable draft of
- * the panel (preview) over a per-view time window plus the shared query builder, so the
- * user can tweak + Stage & Run without touching the dashboard. Edits are temporary.
- */
-function ViewPanelModalContent({
-	panel,
-	panelId,
-	onClose,
-}: ViewPanelModalContentProps): JSX.Element | null {
-	const {
-		timeOverride,
-		selectedInterval,
-		onTimeChange,
-		refreshWindow,
-		onDragSelect,
-	} = useViewPanelTimeWindow();
-
-	const {
-		draft,
-		panelDefinition,
-		signal,
-		defaultSignal,
-		queryType,
-		query,
-		runQuery,
-		onChangePanelKind,
-		resetQuery,
-		buildSaveSpec,
-	} = useViewPanelEditor({ panel, panelId, time: timeOverride });
-	const { data, isFetching, error, refetch, cancelQuery, pagination } = query;
-
-	// Drag-to-zoom stays inside the modal; opt the chart out of the dashboard's
-	// cursor-sync group so a drag here can't replay onto the grid panels.
-	const { dashboardPreference } = usePanelInteractions();
-	const isolatedPreference = useMemo<DashboardPreference>(
-		() => ({ ...dashboardPreference, syncMode: DashboardCursorSync.None }),
-		[dashboardPreference],
-	);
-	const openPanelEditor = useOpenPanelEditor();
-
-	// The View action only appears for registered kinds, so this is defensive.
-	if (!panelDefinition) {
-		return null;
-	}
-
-	return (
-		<div className={styles.content} data-testid="view-panel-modal-content">
-			<ViewPanelModalHeader
-				selectedInterval={selectedInterval}
-				startMs={timeOverride.startMs}
-				endMs={timeOverride.endMs}
-				onTimeChange={onTimeChange}
-				isFetching={isFetching}
-				onRefresh={(): void => {
-					// Relative windows re-anchor to now (new key → refetch); a fixed
-					// custom window just re-runs the same query.
-					if (selectedInterval === 'custom') {
-						refetch();
-					} else {
-						refreshWindow();
-					}
-				}}
-				onSwitchToEdit={(): void =>
-					// Carry the drilldown edits so the editor opens on them, not the saved panel.
-					openPanelEditor(panelId, { editSpec: buildSaveSpec(draft.spec) })
-				}
-				panelKind={draft.spec.plugin.kind}
-				queryType={queryType}
-				signal={signal}
-				onChangePanelKind={onChangePanelKind}
-				onResetQuery={resetQuery}
-			/>
-			<div className={styles.queryBuilder}>
-				<PanelEditorQueryBuilder
-					panelKind={draft.spec.plugin.kind}
-					signal={signal ?? defaultSignal}
-					isLoadingQueries={isFetching}
-					onStageRunQuery={runQuery}
-					onCancelQuery={cancelQuery}
-				/>
-			</div>
-			<div className={styles.body}>
-				<PreviewPane
-					panelId={panelId}
-					panel={draft}
-					panelDefinition={panelDefinition}
-					data={data}
-					isFetching={isFetching}
-					error={error}
-					refetch={refetch}
-					onDragSelect={onDragSelect}
-					pagination={pagination}
-					panelMode={PanelMode.STANDALONE_VIEW}
-					dashboardPreference={isolatedPreference}
-					onCloseStandaloneView={onClose}
-					hideHeader
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default ViewPanelModalContent;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelModalHeader.tsx

@@ -1,119 +0,0 @@
-import { PenLine, RotateCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import cx from 'classnames';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import { usePanelTypeSelectItems } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems';
-import ConfigSelect from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSelect/ConfigSelect';
-import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import type { EQueryType } from 'types/common/dashboard';
-
-import styles from './ViewPanelModal.module.scss';
-
-interface ViewPanelModalHeaderProps {
-	selectedInterval: Time | CustomTimeType;
-	/** Current window bounds (epoch ms) — seed the picker's modal display. */
-	startMs: number;
-	endMs: number;
-	onTimeChange: (
-		interval: Time | CustomTimeType,
-		range?: [number, number],
-	) => void;
-	/** Any query in flight — spins the refresh icon and disables it. */
-	isFetching: boolean;
-	onRefresh: () => void;
-	onSwitchToEdit: () => void;
-	/** Draft's current kind (selected value of the panel-type selector). */
-	panelKind: PanelKind;
-	/** Active query type — disables kinds that can't be authored in it (e.g. List under PromQL). */
-	queryType?: EQueryType;
-	/** Current builder datasource — disables types that don't support it. */
-	signal?: TelemetrytypesSignalDTO;
-	onChangePanelKind: (kind: PanelKind) => void;
-	/** Restore the saved query + kind (drilldown reset). */
-	onResetQuery: () => void;
-}
-
-/**
- * Toolbar for the View modal: reset the drilldown, open the full editor, switch the
- * visualization kind, pick a per-view time window (isolated from the dashboard), and
- * refresh. Mirrors V1's FullView header controls.
- */
-function ViewPanelModalHeader({
-	selectedInterval,
-	startMs,
-	endMs,
-	onTimeChange,
-	isFetching,
-	onRefresh,
-	onSwitchToEdit,
-	panelKind,
-	queryType,
-	signal,
-	onChangePanelKind,
-	onResetQuery,
-}: ViewPanelModalHeaderProps): JSX.Element {
-	// Same capabilities-guarded options as the editor's PanelTypeSwitcher, so the two
-	// selectors disable the same kinds (e.g. List under PromQL, metrics-only kinds).
-	const panelTypeItems = usePanelTypeSelectItems({ queryType, signal });
-
-	return (
-		<div className={styles.toolbar}>
-			<div className={styles.panelTypeSelector}>
-				<ConfigSelect<PanelKind>
-					testId="view-panel-type-selector"
-					value={panelKind}
-					items={panelTypeItems}
-					onChange={onChangePanelKind}
-				/>
-			</div>
-			<Button
-				variant="outlined"
-				color="secondary"
-				prefix={<PenLine />}
-				onClick={onSwitchToEdit}
-				data-testid="view-panel-switch-to-edit"
-			>
-				Switch to Edit Mode
-			</Button>
-			<Button
-				variant="link"
-				color="primary"
-				onClick={onResetQuery}
-				data-testid="view-panel-reset-query"
-			>
-				Reset Query
-			</Button>
-			<div className={styles.toolbarTime}>
-				<DateTimeSelectionV2
-					showAutoRefresh={false}
-					showRefreshText={false}
-					hideShareModal
-					isModalTimeSelection
-					disableUrlSync
-					onTimeChange={onTimeChange}
-					modalSelectedInterval={selectedInterval as Time}
-					modalInitialStartTime={startMs}
-					modalInitialEndTime={endMs}
-				/>
-				<Button
-					size="icon"
-					variant="solid"
-					color="primary"
-					onClick={onRefresh}
-					disabled={isFetching}
-					aria-label="Refresh"
-					data-testid="view-panel-refresh"
-				>
-					<RotateCw className={cx({ 'animate-spin': isFetching })} />
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default ViewPanelModalHeader;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelEditor.ts

@@ -1,136 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import type {
-	DashboardtypesPanelDTO,
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { QueryParams } from 'constants/query';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { usePanelEditSession } from 'pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/usePanelEditSession';
-import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
-import { buildViewPanelSpec } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildViewPanelSpec';
-import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
-import {
-	type PanelQueryTimeOverride,
-	type UsePanelQueryResult,
-} from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-import type { EQueryType } from 'types/common/dashboard';
-
-interface UseViewPanelEditorArgs {
-	panel: DashboardtypesPanelDTO;
-	panelId: string;
-	/** Per-view time window (epoch ms); isolates the preview from the dashboard. */
-	time: PanelQueryTimeOverride;
-}
-
-export interface UseViewPanelEditorApi {
-	/** Local editable copy of the panel — the preview renders this, not the saved panel. */
-	draft: DashboardtypesPanelDTO;
-	/** Resolved renderer for the draft's current kind. */
-	panelDefinition: RenderablePanelDefinition | undefined;
-	/** Current builder datasource — drives the panel-type selector's disabled rule. */
-	signal?: TelemetrytypesSignalDTO;
-	/** The kind's first supported signal — the query builder's fallback datasource. */
-	defaultSignal: TelemetrytypesSignalDTO;
-	/** Active query type (selected builder tab) — drives the panel-type selector's disabled rule. */
-	queryType: EQueryType;
-	/** Query result for the draft over the per-view window. */
-	query: UsePanelQueryResult;
-	/** Stage & run the live builder query into the draft (drilldown; not persisted). */
-	runQuery: () => void;
-	/** Switch the draft's visualization kind (temporary; reversible per session). */
-	onChangePanelKind: (kind: PanelKind) => void;
-	/** Restore the query the view opened with, discarding in-modal edits. */
-	resetQuery: () => void;
-	/** Bake the live (possibly un-run) query into a spec — used to hand edits to the full editor. */
-	buildSaveSpec: (
-		spec: DashboardtypesPanelSpecDTO,
-	) => DashboardtypesPanelSpecDTO;
-}
-
-/**
- * The View modal's compact drilldown editor on the shared `usePanelEditSession`. Edits are
- * temporary — they live in the builder/URL + draft, never the dashboard (V1 parity).
- */
-export function useViewPanelEditor({
-	panel,
-	panelId,
-	time,
-}: UseViewPanelEditorArgs): UseViewPanelEditorApi {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-
-	// Seed the draft from the URL (`compositeQuery` + `graphType`) when present, else the saved
-	// panel — mount-only, so a refresh re-seeds from the URL and in-modal edits survive (V1 parity).
-	const urlQuery = useGetCompositeQueryParam();
-	const urlGraphType = useUrlQuery().get(
-		QueryParams.graphType,
-	) as PANEL_TYPES | null;
-	const initialPanel = useMemo<DashboardtypesPanelDTO>(
-		() =>
-			urlQuery
-				? {
-						...panel,
-						spec: buildViewPanelSpec({
-							spec: panel.spec,
-							query: urlQuery,
-							panelType:
-								urlGraphType ?? PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
-						}),
-					}
-				: panel,
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only seed from the URL
-		[],
-	);
-
-	const {
-		draft,
-		panelDefinition,
-		defaultSignal,
-		query,
-		runQuery,
-		onChangePanelKind,
-		buildSaveSpec,
-		reset,
-	} = usePanelEditSession({ panel: initialPanel, panelId, time });
-
-	// The query the view opened with, captured once — the Reset target.
-	const savedQuery = useMemo(
-		() =>
-			fromPerses(
-				panel.spec.queries,
-				PANEL_KIND_TO_PANEL_TYPE[panel.spec.plugin.kind],
-			),
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only snapshot
-		[],
-	);
-
-	const resetQuery = useCallback((): void => {
-		reset();
-		redirectWithQueryBuilderData(savedQuery);
-	}, [reset, redirectWithQueryBuilderData, savedQuery]);
-
-	// Current builder datasource for the panel-type disabled rule — resolved the same
-	// way as the full editor's ConfigPane so the two selectors stay in sync.
-	const signal = resolveSignal(draft.spec.queries, defaultSignal);
-
-	return {
-		draft,
-		panelDefinition,
-		signal,
-		defaultSignal,
-		queryType: currentQuery.queryType,
-		query,
-		runQuery,
-		onChangePanelKind,
-		resetQuery,
-		buildSaveSpec,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/useViewPanelTimeWindow.ts

@@ -1,108 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports -- global time still lives in redux
-import { useSelector } from 'react-redux';
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import GetMinMax from 'lib/getMinMax';
-import type { PanelQueryTimeOverride } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-const NS_PER_MS = 1e6;
-
-export interface ViewPanelTimeWindow {
-	/** Absolute window (epoch ms) to pass to usePanelQuery as a time override. */
-	timeOverride: PanelQueryTimeOverride;
-	/** Interval shown in the picker — a relative `Time` or `'custom'`. */
-	selectedInterval: Time | CustomTimeType;
-	/** Apply a selection from DateTimeSelectionV2 (modal mode). */
-	onTimeChange: (
-		interval: Time | CustomTimeType,
-		range?: [number, number],
-	) => void;
-	/** Re-anchor a relative window to "now" (manual refresh); no-op for custom. */
-	refreshWindow: () => void;
-	/** Drag-to-zoom on a time chart → set a custom window locally (not the dashboard's). */
-	onDragSelect: (start: number, end: number) => void;
-}
-
-/**
- * Per-view time window for the panel View modal, isolated from the dashboard's
- * global time (V1 parity: the modal's time selector doesn't move the grid). Seeded
- * once from the current global window, then owned locally. Relative intervals
- * resolve to an absolute ms window via the same `GetMinMax` the app-wide picker uses.
- */
-export function useViewPanelTimeWindow(): ViewPanelTimeWindow {
-	const { selectedTime, minTime, maxTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
-	const [selectedInterval, setSelectedInterval] = useState<
-		Time | CustomTimeType
-	>(selectedTime as Time);
-	const [timeOverride, setTimeOverride] = useState<PanelQueryTimeOverride>(
-		() => ({
-			startMs: Math.floor(minTime / NS_PER_MS),
-			endMs: Math.floor(maxTime / NS_PER_MS),
-		}),
-	);
-
-	const onTimeChange = useCallback(
-		(interval: Time | CustomTimeType, range?: [number, number]): void => {
-			setSelectedInterval(interval);
-			// Absolute range comes through directly (already epoch ms).
-			if (interval === 'custom' && range) {
-				setTimeOverride({
-					startMs: Math.floor(range[0]),
-					endMs: Math.floor(range[1]),
-				});
-				return;
-			}
-			// GetMinMax returns nanoseconds — convert to the ms window we work in.
-			const { minTime: startNs, maxTime: endNs } = GetMinMax(interval);
-			setTimeOverride({
-				startMs: Math.floor(startNs / NS_PER_MS),
-				endMs: Math.floor(endNs / NS_PER_MS),
-			});
-		},
-		[],
-	);
-
-	const refreshWindow = useCallback((): void => {
-		// A custom window is fixed; only relative intervals re-anchor to now.
-		if (selectedInterval === 'custom') {
-			return;
-		}
-		const { minTime: startNs, maxTime: endNs } = GetMinMax(selectedInterval);
-		setTimeOverride({
-			startMs: Math.floor(startNs / NS_PER_MS),
-			endMs: Math.floor(endNs / NS_PER_MS),
-		});
-	}, [selectedInterval]);
-
-	const onDragSelect = useCallback((start: number, end: number): void => {
-		// Drag values are already epoch ms (same as the global custom range).
-		const startMs = Math.floor(start);
-		const endMs = Math.floor(end);
-		// Ignore a click / zero-width or inverted selection.
-		if (startMs >= endMs) {
-			return;
-		}
-		setSelectedInterval('custom');
-		setTimeOverride({ startMs, endMs });
-	}, []);
-
-	return useMemo(
-		() => ({
-			timeOverride,
-			selectedInterval,
-			onTimeChange,
-			refreshWindow,
-			onDragSelect,
-		}),
-		[timeOverride, selectedInterval, onTimeChange, refreshWindow, onDragSelect],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/ViewPanelModal.test.tsx

@@ -1,178 +0,0 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { ReactElement } from 'react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
-
-// The preview reuses the edit page's PreviewPane (chart + header + heavy render
-// path); stub it (capturing props) so this suite asserts the modal shell + what it
-// threads down, not the preview internals (PreviewPane/PanelHeader own those).
-const mockPreviewPaneRender = jest.fn();
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
-	() =>
-		function MockPreviewPane(props: Record<string, unknown>): ReactElement {
-			mockPreviewPaneRender(props);
-			return <div data-testid="preview-pane" />;
-		},
-);
-
-// Isolate from the draft/query-builder plumbing (its own suite covers it).
-jest.mock('../ViewPanelModal/useViewPanelEditor', () => ({
-	useViewPanelEditor: (args: {
-		panel: { spec: { plugin: { kind: string } } };
-	}): unknown => {
-		const { kind } = args.panel.spec.plugin;
-		return {
-			draft: args.panel,
-			panelDefinition: {
-				kind,
-				actions: { search: kind === 'signoz/ListPanel' },
-				Renderer: (): null => null,
-			},
-			query: {
-				data: { response: undefined, requestPayload: undefined, legendMap: {} },
-				isLoading: false,
-				isFetching: false,
-				error: null,
-				refetch: jest.fn(),
-				cancelQuery: jest.fn(),
-				pagination: undefined,
-			},
-			runQuery: jest.fn(),
-			onChangePanelKind: jest.fn(),
-			resetQuery: jest.fn(),
-			signal: undefined,
-			defaultSignal: 'logs',
-			buildSaveSpec: (spec: unknown): unknown => spec,
-		};
-	},
-}));
-
-// The View modal reuses the edit page's query builder, which reads the global
-// QueryBuilder context and pulls in the ClickHouse/PromQL editors; stub it here.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder',
-	() =>
-		function MockPanelEditorQueryBuilder(): ReactElement {
-			return <div data-testid="panel-editor-v2-query-builder" />;
-		},
-);
-
-jest.mock('../hooks/usePanelInteractions', () => ({
-	usePanelInteractions: (): unknown => ({
-		onDragSelect: jest.fn(),
-		dashboardPreference: { syncMode: 0 },
-	}),
-}));
-
-// The header mounts DateTimeSelectionV2 (redux + router + heavy deps); stub it so
-// this suite asserts the modal body, not the toolbar internals.
-jest.mock(
-	'../ViewPanelModal/ViewPanelModalHeader',
-	() =>
-		function MockViewPanelModalHeader(): ReactElement {
-			return <div data-testid="view-panel-header" />;
-		},
-);
-
-jest.mock('../ViewPanelModal/useViewPanelTimeWindow', () => ({
-	useViewPanelTimeWindow: (): unknown => ({
-		timeOverride: { startMs: 0, endMs: 0 },
-		selectedInterval: '5m',
-		onTimeChange: jest.fn(),
-		refreshWindow: jest.fn(),
-		onDragSelect: jest.fn(),
-	}),
-}));
-
-const mockOpenEditor = jest.fn();
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor',
-	() => ({
-		useOpenPanelEditor: (): jest.Mock => mockOpenEditor,
-	}),
-);
-
-const renderWithProvider = (ui: ReactElement): ReturnType<typeof render> =>
-	render(<TooltipProvider>{ui}</TooltipProvider>);
-
-function makePanel(kind: string, name = 'My panel'): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name },
-			plugin: { kind, spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-describe('ViewPanelModal', () => {
-	it('renders nothing until opened', () => {
-		renderWithProvider(
-			<ViewPanelModal
-				panel={makePanel('signoz/TimeSeriesPanel')}
-				panelId="p1"
-				open={false}
-				onClose={jest.fn()}
-			/>,
-		);
-		expect(
-			screen.queryByTestId('view-panel-modal-content'),
-		).not.toBeInTheDocument();
-	});
-
-	it('renders the header, query builder, and preview when open', () => {
-		renderWithProvider(
-			<ViewPanelModal
-				panel={makePanel('signoz/TimeSeriesPanel', 'CPU usage')}
-				panelId="p1"
-				open
-				onClose={jest.fn()}
-			/>,
-		);
-		expect(screen.getByTestId('view-panel-modal-content')).toBeInTheDocument();
-		expect(screen.getByTestId('view-panel-header')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-query-builder'),
-		).toBeInTheDocument();
-		expect(screen.getByTestId('preview-pane')).toBeInTheDocument();
-	});
-
-	it('invokes onClose when the modal is dismissed', async () => {
-		const user = userEvent.setup();
-		const onClose = jest.fn();
-		renderWithProvider(
-			<ViewPanelModal
-				panel={makePanel('signoz/TimeSeriesPanel')}
-				panelId="p1"
-				open
-				onClose={onClose}
-			/>,
-		);
-		await user.click(screen.getByLabelText('Close'));
-		expect(onClose).toHaveBeenCalled();
-	});
-
-	// Charts share one global cursor-sync key and uPlot replays drag across the
-	// group; the modal must opt out so a drag here can't move the dashboard's time.
-	it('opts the chart out of the dashboard cursor-sync group', () => {
-		mockPreviewPaneRender.mockClear();
-		renderWithProvider(
-			<ViewPanelModal
-				panel={makePanel('signoz/TimeSeriesPanel')}
-				panelId="p1"
-				open
-				onClose={jest.fn()}
-			/>,
-		);
-		const props = mockPreviewPaneRender.mock.calls.at(-1)?.[0] as {
-			dashboardPreference?: { syncMode?: unknown };
-		};
-		expect(props.dashboardPreference?.syncMode).toBe(DashboardCursorSync.None);
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldown.test.tsx

@@ -1,180 +0,0 @@
-import {
-	act,
-	fireEvent,
-	render,
-	renderHook,
-	screen,
-} from '@testing-library/react';
-import {
-	type DashboardtypesPanelDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
-
-import { useDrilldown } from '../hooks/useDrilldown';
-
-const mockOpenViewWithQuery = jest.fn();
-const mockNavigate = jest.fn();
-const mockGetBuilderQueries = jest.fn();
-
-// Boundaries tested elsewhere / needing external context — mocked so this suite isolates
-// useDrilldown's orchestration (gating, which menu shows, the View-modal handoff).
-jest.mock('../hooks/useViewPanel', () => ({
-	useViewPanel: (): unknown => ({ openViewWithQuery: mockOpenViewWithQuery }),
-}));
-jest.mock('container/QueryTable/Drilldown/useBaseDrilldownNavigate', () => ({
-	__esModule: true,
-	default: (): unknown => mockNavigate,
-}));
-jest.mock('container/QueryTable/Drilldown/contextConfig', () => ({
-	getGroupContextMenuConfig: ({
-		onColumnClick,
-	}: {
-		onColumnClick: (op: string) => void;
-	}): unknown => ({
-		items: (
-			<button
-				type="button"
-				data-testid="filter-op"
-				onClick={(): void => onColumnClick('=')}
-			>
-				Is this
-			</button>
-		),
-	}),
-}));
-jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
-	addFilterToQuery: jest.fn(() => 'REFINED_QUERY'),
-	getAggregateColumnHeader: (): unknown => ({
-		aggregations: 'sum(x)',
-		dataSource: 'metrics',
-	}),
-	getBaseMeta: (): unknown => undefined,
-	isNumberDataType: (): boolean => false,
-}));
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
-	() => ({
-		fromPerses: (): string => 'V1_QUERY',
-		toPerses: jest.fn(() => [{ kind: 'REFINED' }]),
-	}),
-);
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries',
-	() => ({
-		getBuilderQueries: (...args: unknown[]): unknown =>
-			mockGetBuilderQueries(...args),
-	}),
-);
-// Capability lookup mocked (its per-kind values are data in the definitions); avoids
-// importing the whole renderer registry into the test.
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: (kind: string): unknown => ({
-		actions: { drilldown: kind !== 'signoz/ListPanel' },
-	}),
-}));
-
-function panelOfKind(kind: string): DashboardtypesPanelDTO {
-	return {
-		spec: { plugin: { kind, spec: {} }, queries: [{ x: 1 }] },
-		display: { name: 'P' },
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-const tsPanel = panelOfKind('signoz/TimeSeriesPanel');
-
-const aggregateContext: DrilldownContext = {
-	queryName: 'A',
-	signal: TelemetrytypesSignalDTO.metrics,
-	filters: [],
-	label: 'frontend',
-	seriesColor: '#fff',
-};
-
-const groupContext: DrilldownContext = {
-	queryName: 'A',
-	signal: TelemetrytypesSignalDTO.metrics,
-	filters: [],
-	columnKind: 'group',
-	clickedKey: 'service.name',
-	clickedValue: 'frontend',
-};
-
-describe('useDrilldown', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGetBuilderQueries.mockReturnValue([{ name: 'A' }]);
-	});
-
-	describe('enableDrillDown', () => {
-		it('is true when the kind declares drilldown and has a builder query', () => {
-			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
-			expect(result.current.enableDrillDown).toBe(true);
-		});
-
-		it('is false when there is no builder query', () => {
-			mockGetBuilderQueries.mockReturnValue([]);
-			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
-			expect(result.current.enableDrillDown).toBe(false);
-		});
-
-		it('is false for a kind that opts out of drilldown', () => {
-			const { result } = renderHook(() =>
-				useDrilldown(panelOfKind('signoz/ListPanel'), 'p1'),
-			);
-			expect(result.current.enableDrillDown).toBe(false);
-		});
-	});
-
-	describe('aggregate menu', () => {
-		it('shows View in Logs/Traces on an aggregate click', () => {
-			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
-			act(() =>
-				result.current.onPanelClick({
-					coordinates: { x: 1, y: 1 },
-					context: aggregateContext,
-				}),
-			);
-			render(<div>{result.current.contextMenuProps.items}</div>);
-
-			expect(screen.getByTestId('drilldown-view-logs')).toBeInTheDocument();
-			expect(screen.getByTestId('drilldown-view-traces')).toBeInTheDocument();
-		});
-
-		it('navigates to logs when View in Logs is clicked', () => {
-			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
-			act(() =>
-				result.current.onPanelClick({
-					coordinates: { x: 1, y: 1 },
-					context: aggregateContext,
-				}),
-			);
-			render(<div>{result.current.contextMenuProps.items}</div>);
-
-			fireEvent.click(screen.getByTestId('drilldown-view-logs'));
-			expect(mockNavigate).toHaveBeenCalledWith('view_logs');
-		});
-	});
-
-	describe('filter-by-value', () => {
-		it('opens the View modal with the refined query on a group-column filter', () => {
-			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
-			act(() =>
-				result.current.onPanelClick({
-					coordinates: { x: 1, y: 1 },
-					context: groupContext,
-				}),
-			);
-			render(<div>{result.current.contextMenuProps.items}</div>);
-
-			fireEvent.click(screen.getByTestId('filter-op'));
-			// Opens the View modal on the refined query at the panel's kind — persisted in the URL.
-			expect(mockOpenViewWithQuery).toHaveBeenCalledWith(
-				'p1',
-				'REFINED_QUERY',
-				PANEL_TYPES.TIME_SERIES,
-			);
-		});
-	});
-});