feat(dashboards-v2): drill down filter-by-value into the View modal

The View modal's in-modal query builder is URL-synced (`compositeQuery`, plus
`graphType` when present), but the modal seeded its draft from the saved panel on
mount — so a page refresh discarded any in-modal edits. Seed the draft from the URL
when a query is present (else the saved panel) via a mount-only `buildViewPanelSpec`,
and clear those params on a plain open so a stale query can't bleed into the modal.
URL-backed, shareable, and refresh-safe (V1 parity).

frontend/.oxlintrc.json

@@ -328,6 +328,11 @@
           {
             "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/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 classNames from 'classnames';
+import cx from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,9 +72,7 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);
 
 	return (
-		<div
-			className={classNames('y-axis-unit-selector-component', containerClassName)}
-		>
+		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -84,12 +82,17 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						<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>
 					) : undefined
 				}
-				className={classNames({
+				className={cx({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}

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

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -6,9 +7,13 @@ 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', () => {
@@ -34,7 +39,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});
 
-	it('calls onChange when a value is selected', () => {
+	it('calls onChange when a value is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -44,9 +49,8 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const option = screen.getByText('Bytes (B)');
-		fireEvent.click(option);
+		await user.click(select);
+		await user.click(screen.getByText('Bytes (B)'));
 
 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -55,7 +59,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});
 
-	it('filters options based on search input', () => {
+	it('filters options based on search input', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -65,14 +69,13 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
-		const input = screen.getByRole('combobox');
-		fireEvent.change(input, { target: { value: 'bytes/sec' } });
+		await user.click(select);
+		await user.type(select, 'bytes/sec');
 
 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});
 
-	it('shows all categories and their units', () => {
+	it('shows all categories and their units', async () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -80,9 +83,8 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
-		const select = screen.getByRole('combobox');
 
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -93,7 +95,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});
 
-	it('shows warning message when incompatible unit is selected', () => {
+	it('shows warning message when incompatible unit is selected', async () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -104,12 +106,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		fireEvent.mouseOver(warningIcon);
-		return screen
-			.findByText(
+		await user.hover(warningIcon);
+		await expect(
+			screen.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			)
-			.then((el) => expect(el).toBeInTheDocument());
+			),
+		).resolves.toBeInTheDocument();
 	});
 
 	it('does not show warning message when compatible unit is selected', () => {
@@ -125,7 +127,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});
 
-	it('uses categories override to render custom units', () => {
+	it('uses categories override to render custom units', async () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -147,9 +149,7 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);
 
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
+		await user.click(screen.getByRole('combobox'));
 
 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -4,6 +4,13 @@
 	}
 }
 
+// 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;
@@ -17,3 +24,7 @@
 		right: 28px;
 	}
 }
+
+.y-axis-unit-warning-tooltip {
+	max-width: 240px;
+}

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

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

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

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

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

@@ -1,3 +1,4 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import {
@@ -79,6 +80,10 @@ 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>;
 }
 
 /**
@@ -99,7 +104,7 @@ export interface PieChartProps {
 	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
 	 */
 	id?: string;
-	/** Fired when a slice (or its legend entry) is clicked. */
-	onSliceClick?: (slice: PieSlice) => void;
+	/** Fired when a slice's arc is clicked; carries the DOM event for popover positioning. */
+	onSliceClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
 	'data-testid'?: string;
 }

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

@@ -3,7 +3,6 @@ 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';
@@ -11,6 +10,7 @@ import {
 	selectIsDashboardLocked,
 	useDashboardStore,
 } from 'providers/Dashboard/store/useDashboardStore';
+import { toast } from '@signozhq/ui/sonner';
 
 import { getChartManagerColumns } from './getChartMangerColumns';
 import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
@@ -44,7 +44,6 @@ export default function ChartManager({
 	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
-	const { notifications } = useNotifications();
 	const { legendItemsMap } = useLegendsSync({
 		config,
 		subscribeToFocusChange: false,
@@ -136,11 +135,9 @@ export default function ChartManager({
 
 	const handleSave = useCallback((): void => {
 		syncSeriesVisibilityToLocalStorage();
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
+		toast.success('The updated graphs & legends are saved');
 		onCancel?.();
-	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
+	}, [syncSeriesVisibilityToLocalStorage, 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 mockNotificationsSuccess = jest.fn();
+const mockToastSuccess = jest.fn();
 
 jest.mock('lib/uPlotV2/context/PlotContext', () => ({
 	usePlotContext: (): {
@@ -46,12 +46,11 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 	}): boolean => s.dashboardData?.locked ?? false,
 }));
 
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: { success: jest.Mock } } => ({
-		notifications: {
-			success: mockNotificationsSuccess,
-		},
-	}),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
+	},
 }));
 
 jest.mock('components/ResizeTable', () => {
@@ -160,7 +159,7 @@ describe('ChartManager', () => {
 		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
 	});
 
-	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
+	it('calls syncSeriesVisibilityToLocalStorage, toast.success, and onCancel when Save is clicked', async () => {
 		render(
 			<ChartManager
 				config={createMockConfig() as UPlotConfigBuilder}
@@ -172,9 +171,9 @@ describe('ChartManager', () => {
 		await userEvent.click(screen.getByRole('button', { name: /Save/ }));
 
 		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'The updated graphs & legends are saved',
-		});
+		expect(mockToastSuccess).toHaveBeenCalledWith(
+			'The updated graphs & legends are saved',
+		);
 		expect(mockOnCancel).toHaveBeenCalledTimes(1);
 	});
 });

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

@@ -5,6 +5,14 @@
 	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,6 +63,7 @@ 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,13 +79,11 @@ function Panel({
 		},
 		ENTITY_VERSION_V5,
 		{
-			queryKey: [
-				widget?.query,
-				widget?.panelTypes,
-				requestData,
-				startTime,
-				endTime,
-			],
+			// 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],
 			retry(failureCount, error): boolean {
 				if (
 					String(error).includes('status: error') &&

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

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

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
 import type {
 	DashboardtypesGettableDashboardV2DTO,
 	DashboardtypesJSONPatchOperationDTO,
@@ -9,7 +8,7 @@ import { isEqual } from 'lodash-es';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-import { useDashboardStore } from '../../store/useDashboardStore';
+import { useOptimisticPatch } from '../../hooks/useOptimisticPatch';
 import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
 import DashboardInfoForm from './DashboardInfoForm/DashboardInfoForm';
 import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
@@ -23,7 +22,7 @@ interface OverviewProps {
 function Overview({ dashboard }: OverviewProps): JSX.Element {
 	const id = dashboard.id;
 
-	const refetch = useDashboardStore((s) => s.refetch);
+	const { patchAsync } = useOptimisticPatch();
 
 	const title = dashboard.spec.display.name;
 	const description = dashboard.spec.display.description ?? '';
@@ -96,15 +95,14 @@ function Overview({ dashboard }: OverviewProps): JSX.Element {
 
 		try {
 			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
+			await patchAsync(ops);
 			toast.success('Dashboard updated');
-			refetch();
 		} catch (error) {
 			showErrorModal(error as APIError);
 		} finally {
 			setIsSaving(false);
 		}
-	}, [id, buildPatch, refetch, showErrorModal]);
+	}, [buildPatch, patchAsync, 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,14 +14,9 @@ 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 refetch = useDashboardStore((s) => s.refetch);
+	const { patchAsync } = useOptimisticPatch();
 	const { showErrorModal } = useErrorModal();
 	const [isSaving, setIsSaving] = useState(false);
 
@@ -33,9 +28,8 @@ export function useSaveVariables(): UseSaveVariables {
 			const dtos = variables.map(formModelToDto);
 			try {
 				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, buildVariablesPatch(dtos));
+				await patchAsync(buildVariablesPatch(dtos));
 				toast.success('Variables updated');
-				refetch();
 				return true;
 			} catch (error) {
 				showErrorModal(error as APIError);
@@ -44,7 +38,7 @@ export function useSaveVariables(): UseSaveVariables {
 				setIsSaving(false);
 			}
 		},
-		[dashboardId, refetch, showErrorModal],
+		[dashboardId, patchAsync, showErrorModal],
 	);
 
 	return { save, isSaving };

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

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

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

@@ -1,13 +1,12 @@
 import { Typography } from '@signozhq/ui/typography';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { EQueryType } from 'types/common/dashboard';
+import type { 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 { getPanelTypeDisabledReason } from './utils';
+import { usePanelTypeSelectItems } from './usePanelTypeSelectItems';
 
 interface PanelTypeSwitcherProps {
 	/** The current panel kind (selected value). */
@@ -31,22 +30,7 @@ function PanelTypeSwitcher({
 	signal,
 	onChange,
 }: PanelTypeSwitcherProps): JSX.Element {
-	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,
-		};
-	});
+	const items = usePanelTypeSelectItems({ queryType, signal });
 
 	return (
 		<div className={styles.field}>

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

@@ -0,0 +1,48 @@
+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,6 +34,7 @@ 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.
@@ -74,6 +75,7 @@ function SectionSlot({
 				onChangePanelKind={onChangePanelKind}
 				queryType={queryType}
 				stepInterval={stepInterval}
+				metricUnit={metricUnit}
 			/>
 		</SettingsSection>
 	);

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

@@ -19,4 +19,6 @@ 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,11 +46,10 @@ function DisconnectValuesField({
 	onChange,
 }: DisconnectValuesFieldProps): JSX.Element {
 	const duration = value?.fillLessThan || undefined;
-	const isThreshold = !!duration;
-	// Remember the last threshold so toggling Never → Threshold restores it.
-	const [lastDuration, setLastDuration] = useState(
-		duration ?? defaultDuration(stepInterval),
-	);
+	// `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);
 
 	useEffect(() => {
 		if (duration) {
@@ -59,11 +58,17 @@ function DisconnectValuesField({
 	}, [duration]);
 
 	const handleMode = (mode: DisconnectValuesMode): void => {
-		onChange(
-			mode === DisconnectValuesMode.THRESHOLD
-				? { ...value, fillLessThan: lastDuration }
-				: undefined,
-		);
+		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 });
 	};
 
 	return (
@@ -79,14 +84,16 @@ function DisconnectValuesField({
 					onChange={handleMode}
 				/>
 			</div>
-			{isThreshold && (
+			{isThreshold && duration && (
 				<div className={styles.field}>
 					<Typography.Text>Threshold value</Typography.Text>
 					<DisconnectValuesThresholdInput
 						testId={`${testId}-value`}
-						value={lastDuration}
+						value={duration}
 						minValue={stepInterval}
-						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
+						onChange={(next): void =>
+							onChange({ ...value, fillOnlyBelow: true, fillLessThan: next })
+						}
 					/>
 				</div>
 			)}

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

@@ -14,6 +14,28 @@ 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
@@ -36,24 +58,21 @@ 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 => {
-		if (!raw) {
+		// 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) {
 			return;
 		}
-		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)}`);
+		const message = validationError(raw, minValue);
+		if (message) {
+			setError(message);
 			return;
 		}
 		setError(null);
@@ -69,12 +88,9 @@ function DisconnectValuesThresholdInput({
 				status={error ? 'error' : undefined}
 				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
 				value={text}
-				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-					setText(e.target.value);
-					if (error) {
-						setError(null);
-					}
-				}}
+				onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+					handleText(e.target.value)
+				}
 				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,9 +1,34 @@
+import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardtypesLineStyleDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesLineStyleDTO,
+	type DashboardtypesTimeSeriesChartAppearanceDTO,
+} 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.
@@ -139,7 +164,7 @@ describe('ChartAppearanceSection', () => {
 		await user.click(screen.getByText('Threshold'));
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '1m' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '1m' },
 		});
 	});
 
@@ -162,7 +187,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '5m' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
 		});
 	});
 
@@ -183,7 +208,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();
 
 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '300' },
+			spanGaps: { fillOnlyBelow: true, fillLessThan: '300' },
 		});
 	});
 
@@ -200,7 +225,24 @@ describe('ChartAppearanceSection', () => {
 
 		await user.click(screen.getByText('Never'));
 
-		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
+		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();
 	});
 
 	it('shows an error and does not commit an invalid duration', async () => {
@@ -244,4 +286,117 @@ 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'>;
+	Pick<SectionEditorContext, 'tableColumns' | 'metricUnit'>;
 
 // `full` means "show the raw value, no rounding"; the digits round to that many places.
 const DECIMAL_OPTIONS: {
@@ -39,6 +39,7 @@ function FormattingSection({
 	controls,
 	onChange,
 	tableColumns = [],
+	metricUnit,
 }: FormattingSectionProps): JSX.Element {
 	return (
 		<>
@@ -50,6 +51,7 @@ 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,6 +3,8 @@ 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> {
@@ -71,4 +73,31 @@ 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 { useState } from 'react';
+import { useRef, useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -82,6 +82,15 @@ 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;
@@ -90,6 +99,11 @@ function ThresholdsSection({
 		setUnsavedIndex(nextIndex);
 	};
 
+	const beginEdit = (index: number): void => {
+		editSnapshot.current = thresholds[index] ?? null;
+		setEditingIndex(index);
+	};
+
 	const saveAt =
 		(index: number) =>
 		(next: AnyThreshold): void => {
@@ -105,11 +119,15 @@ function ThresholdsSection({
 	};
 
 	const discardAt = (index: number) => (): void => {
-		// Discarding a row that was never saved removes it; otherwise just exit edit.
+		// A never-saved row is removed; otherwise revert the live edits to the snapshot.
 		if (index === unsavedIndex) {
 			removeAt(index);
 			return;
 		}
+		const original = editSnapshot.current;
+		if (original) {
+			onChange(thresholds.map((t, i) => (i === index ? original : t)));
+		}
 		setEditingIndex(null);
 	};
 
@@ -120,8 +138,9 @@ function ThresholdsSection({
 			index,
 			yAxisUnit,
 			isEditing: editingIndex === index,
-			onEdit: (): void => setEditingIndex(index),
+			onEdit: (): void => beginEdit(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 } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import UnifiedThresholdsSection from '../ThresholdsSection';
 
@@ -36,9 +36,16 @@ const THRESHOLDS: DashboardtypesComparisonThresholdDTO[] = [
 	},
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard).
-function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
-	const [value, setValue] = useState<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);
 	return (
 		<ComparisonThresholdsSection
 			value={value}
@@ -142,24 +149,46 @@ describe('ComparisonThresholdsSection', () => {
 		expect(valueInput).toHaveValue(5);
 	});
 
-	it('does not commit edits when Discard is clicked', async () => {
+	it('reflects edits live (before Save) so the preview can react', 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'));
 
-		expect(onChange).not.toHaveBeenCalled();
-		// Back to view mode.
+		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
 		expect(
 			screen.queryByTestId('comparison-threshold-value-0'),
 		).not.toBeInTheDocument();
-		expect(screen.getByTestId('comparison-threshold-edit-0')).toBeInTheDocument();
+		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
+		expect(screen.getByTestId('comparison-threshold-value-0')).toHaveValue(80);
 	});
 
 	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 { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen, waitFor } 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,10 +10,16 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];
 
-// Stateful harness for flows that depend on the value updating (add/discard);
+// Stateful harness for flows that depend on the value updating (add/discard/live);
 // omits `controls` to exercise the default `label` variant.
-function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
-	const [value, setValue] = useState<AnyThreshold[]>([]);
+function Harness({
+	yAxisUnit,
+	initial = [],
+}: {
+	yAxisUnit?: string;
+	initial?: AnyThreshold[];
+}): JSX.Element {
+	const [value, setValue] = useState<AnyThreshold[]>(initial);
 	return (
 		<ThresholdsSection value={value} onChange={setValue} yAxisUnit={yAxisUnit} />
 	);
@@ -37,19 +43,20 @@ describe('ThresholdsSection', () => {
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
 	});
 
-	it('edits a threshold value and commits it on Save', () => {
+	it('edits a threshold value and commits it on Save', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		const valueInput = screen.getByTestId('threshold-value-0');
+		expect(valueInput).toHaveValue(80);
 
-		fireEvent.change(screen.getByTestId('threshold-value-0'), {
-			target: { value: '90' },
-		});
-		fireEvent.click(screen.getByTestId('threshold-save-0'));
+		await user.clear(valueInput);
+		await user.type(valueInput, '90');
+		await user.click(screen.getByTestId('threshold-save-0'));
 
-		expect(onChange).toHaveBeenCalledWith([
+		expect(onChange).toHaveBeenLastCalledWith([
 			{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
 		]);
 	});
@@ -70,43 +77,63 @@ describe('ThresholdsSection', () => {
 		]);
 	});
 
-	it('does not commit edits when Discard is clicked', () => {
+	it('reflects edits live (before Save) so the preview can react', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		fireEvent.change(screen.getByTestId('threshold-value-0'), {
-			target: { value: '90' },
-		});
-		fireEvent.click(screen.getByTestId('threshold-discard-0'));
+		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');
 
-		expect(onChange).not.toHaveBeenCalled();
-		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
-		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
+		// 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('removes a threshold from view mode', () => {
+	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(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
+		await user.click(screen.getByTestId('threshold-edit-0'));
+		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+	});
+
+	it('removes a threshold from view mode', async () => {
+		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);
 
-		fireEvent.click(screen.getByTestId('threshold-remove-0'));
+		await user.click(screen.getByTestId('threshold-remove-0'));
 
 		expect(onChange).toHaveBeenCalledWith([]);
 	});
 
-	it('adds a threshold that opens in edit mode, and discards it away', () => {
+	it('adds a threshold that opens in edit mode, and discards it away', async () => {
+		const user = userEvent.setup();
 		render(<Harness />);
 
-		fireEvent.click(screen.getByTestId('panel-editor-v2-add-threshold'));
+		await user.click(screen.getByTestId('panel-editor-v2-add-threshold'));
 		expect(screen.getByTestId('threshold-value-0')).toBeInTheDocument();
 
 		// Discarding a never-saved row removes it entirely.
-		fireEvent.click(screen.getByTestId('threshold-discard-0'));
+		await user.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', () => {
+	it('flags a threshold unit in a different category than the y-axis unit', async () => {
+		const user = userEvent.setup();
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -115,11 +142,12 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		await user.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', () => {
+	it('does not flag a threshold unit in the same category as the y-axis unit', async () => {
+		const user = userEvent.setup();
 		render(
 			<ThresholdsSection
 				value={[{ value: 80, color: '#F5B225', label: '', unit: 'ms' }]}
@@ -128,7 +156,7 @@ describe('ThresholdsSection', () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
+		await user.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,6 +27,7 @@ interface ComparisonThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesComparisonThresholdDTO) => void;
+	onLiveChange: (next: DashboardtypesComparisonThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -42,10 +43,15 @@ function ComparisonThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: ComparisonThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	const symbol = threshold.operator ? OPERATOR_SYMBOL[threshold.operator] : '';
 	const summary = (

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

@@ -20,6 +20,7 @@ interface LabelThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesThresholdWithLabelDTO) => void;
+	onLiveChange: (next: DashboardtypesThresholdWithLabelDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -32,10 +33,15 @@ function LabelThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: LabelThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	// 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,6 +28,7 @@ interface TableThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesTableThresholdDTO) => void;
+	onLiveChange: (next: DashboardtypesTableThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -45,10 +46,15 @@ function TableThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
+	onLiveChange,
 	onDiscard,
 	onRemove,
 }: TableThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);
+	const { draft, setDraft, setValue } = useThresholdDraft(
+		threshold,
+		isEditing,
+		onLiveChange,
+	);
 
 	// 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,4 +1,5 @@
 import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 
 interface ThresholdDraft<T> {
 	draft: T;
@@ -7,17 +8,25 @@ 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 (so Discard simply drops the draft and the
- * next edit starts clean) and exposes the numeric `value` setter all variants use.
+ * 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.
  */
 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);
@@ -25,6 +34,20 @@ 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="Stage & Run Query"
+								label="Run Query"
 								onStageRunQuery={onStageRunQuery}
 								isLoadingQueries={isLoadingQueries}
 								handleCancelQuery={onCancelQuery}

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

@@ -49,6 +49,13 @@
 	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,11 +1,13 @@
 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,
@@ -30,6 +32,14 @@ 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;
 }
 
 /**
@@ -47,6 +57,10 @@ 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);
@@ -58,18 +72,24 @@ function PreviewPane({
 
 	return (
 		<div className={styles.preview}>
-			<div className={styles.header}>
-				<PlotTag
-					queryType={queryType}
-					panelType={panelType}
-					className={styles.queryType}
-				/>
-				<div className={styles.dateTimeSelector}>
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+			{!hideHeader && (
+				<div className={styles.header}>
+					<PlotTag
+						queryType={queryType}
+						panelType={panelType}
+						className={styles.queryType}
+					/>
+					<div className={styles.dateTimeSelector}>
+						<DateTimeSelectionV2 showAutoRefresh hideShareModal />
+					</div>
 				</div>
-			</div>
+			)}
 			<div className={styles.container}>
-				<div className={styles.surface}>
+				<div
+					className={cx(styles.surface, {
+						[styles.surfaceStacked]: panelMode === PanelMode.STANDALONE_VIEW,
+					})}
+				>
 					<PanelHeader
 						panelId={panelId}
 						panel={panel}
@@ -90,9 +110,11 @@ function PreviewPane({
 						error={error}
 						refetch={refetch}
 						onDragSelect={onDragSelect}
-						panelMode={PanelMode.DASHBOARD_EDIT}
+						panelMode={panelMode}
+						dashboardPreference={dashboardPreference}
 						searchTerm={searchable ? searchTerm : undefined}
 						pagination={pagination}
+						onCloseStandaloneView={onCloseStandaloneView}
 					/>
 				</div>
 			</div>

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

@@ -0,0 +1,268 @@
+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,6 +1,8 @@
 import {
-	TelemetrytypesSignalDTO,
+	DashboardtypesComparisonOperatorDTO,
 	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
+	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 
@@ -95,4 +97,141 @@ 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,13 +1,18 @@
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
+import {
+	DashboardtypesComparisonOperatorDTO,
+	type DashboardtypesPanelSpecDTO,
+	DashboardtypesThresholdFormatDTO,
+	type TelemetrytypesSignalDTO,
+	type 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 {
-	SectionKind,
+	type AnyThreshold,
 	type PanelFormattingSlice,
+	type SectionConfig,
+	SectionKind,
+	type ThresholdVariant,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import {
 	buildDefaultPluginSpec,
@@ -24,13 +29,73 @@ 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 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.
+ * 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.
  *
  * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
  */
@@ -66,5 +131,19 @@ 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

@@ -0,0 +1,103 @@
+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,40 +1,36 @@
 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 mockInvalidateQueries = jest.fn();
+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.
 jest.mock('react-query', () => ({
-	useQueryClient: (): { invalidateQueries: jest.Mock } => ({
-		invalidateQueries: mockInvalidateQueries,
+	useQueryClient: (): { getQueryData: jest.Mock } => ({
+		getQueryData: jest.fn(),
 	}),
 }));
 
 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();
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: false,
-			error: null,
-		});
+		mockIsPatching = false;
 	});
 
-	it('emits an add patch replacing the whole panel spec and invalidates the dashboard query', async () => {
+	it('optimistically patches an add replacing the whole panel spec', async () => {
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),
 		);
@@ -50,28 +46,17 @@ describe('usePanelEditorSave', () => {
 
 		await result.current.save(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',
+		expect(mockPatchAsync).toHaveBeenCalledWith([
+			{
+				op: 'add',
+				path: '/spec/panels/panel-9/spec',
+				value: spec,
+			},
 		]);
 	});
 
-	it('surfaces the mutation loading state as isSaving', () => {
-		mockUsePatch.mockReturnValue({
-			mutateAsync,
-			isLoading: true,
-			error: null,
-		});
+	it('surfaces the patch in-flight state as isSaving', () => {
+		mockIsPatching = true;
 
 		const { result } = renderHook(() =>
 			usePanelEditorSave({ dashboardId: 'dash-1', panelId: 'panel-9' }),

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

@@ -0,0 +1,36 @@
+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

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

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

@@ -8,15 +8,11 @@ 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';
@@ -27,11 +23,9 @@ import layoutStorage from './layoutStorage';
 import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 import PreviewPane from './PreviewPane/PreviewPane';
 import { useLegendSeries } from './hooks/useLegendSeries';
-import { usePanelQuery } from '../hooks/usePanelQuery';
-import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
-import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
+import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
+import { usePanelEditSession } from './hooks/usePanelEditSession';
 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';
@@ -67,7 +61,28 @@ function PanelEditorContainer({
 	onClose,
 	onSaved,
 }: PanelEditorContainerProps): JSX.Element {
-	const { draft, spec, setSpec, isSpecDirty } = usePanelEditorDraft(panel);
+	// 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;
+
 	// 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.
@@ -91,38 +106,35 @@ 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;
 
-	// 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,
+	// 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,
 	});
 
-	// 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;
@@ -251,6 +263,7 @@ function PanelEditorContainer({
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 						stepInterval={stepInterval}
+						metricUnit={metricUnit}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>

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

@@ -0,0 +1,10 @@
+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,7 +1,9 @@
 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';
@@ -12,8 +14,6 @@ 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,7 +23,10 @@ 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';
@@ -37,6 +40,8 @@ function BarPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
+	onCloseStandaloneView,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -53,12 +58,10 @@ function BarPanelRenderer({
 		[panel.spec.queries],
 	);
 
-	// 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.
+	// X-scale clamps come from the request that produced the data, so each panel
+	// pins to the window it fetched.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -114,6 +117,32 @@ 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} />
@@ -126,10 +155,27 @@ function BarPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
+		(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 } });
 		},
-		[onClick],
+		[onClick, flatSeries, builderQueries, data.response],
 	);
 
 	return (
@@ -147,6 +193,7 @@ function BarPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}
@@ -158,7 +205,7 @@ function BarPanelRenderer({
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
+						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>
 				)}
 		</div>

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

@@ -27,5 +27,6 @@ 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,7 +20,6 @@ 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,
@@ -28,7 +27,6 @@ function HistogramPanelRenderer({
 	data,
 	refetch,
 	panelMode,
-	onClick,
 }: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -100,13 +98,6 @@ function HistogramPanelRenderer({
 
 	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
 
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
 	return (
 		<div
 			ref={graphRef}
@@ -127,7 +118,6 @@ function HistogramPanelRenderer({
 						width={containerDimensions.width}
 						height={containerDimensions.height}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
 					/>
 				)}
 		</div>

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

@@ -27,5 +27,6 @@ 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,5 +37,6 @@ 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,4 +1,9 @@
-import { useMemo } from 'react';
+import {
+	useCallback,
+	useMemo,
+	type KeyboardEvent as ReactKeyboardEvent,
+	type MouseEvent as ReactMouseEvent,
+} 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';
@@ -8,6 +13,9 @@ 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';
@@ -17,24 +25,31 @@ 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 value = useMemo(
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries || []),
+		[panel.spec.queries],
+	);
+
+	const tables = useMemo(
 		() =>
-			prepareNumberData(
-				prepareScalarTables({
-					results: getScalarResults(data.response),
-					legendMap: data.legendMap ?? {},
-					requestPayload: data.requestPayload,
-				}),
-			),
+			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],
@@ -54,10 +69,60 @@ 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,5 +27,6 @@ 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,4 +1,8 @@
-import { useCallback, useMemo } from 'react';
+import {
+	useCallback,
+	useMemo,
+	type MouseEvent as ReactMouseEvent,
+} 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';
@@ -13,6 +17,9 @@ 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';
 
@@ -22,6 +29,7 @@ function PiePanelRenderer({
 	data,
 	refetch,
 	onClick,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -30,6 +38,11 @@ function PiePanelRenderer({
 		[panel.spec.plugin.spec],
 	);
 
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries || []),
+		[panel.spec.queries],
+	);
+
 	const slices = useMemo(
 		() =>
 			preparePieData({
@@ -61,10 +74,21 @@ function PiePanelRenderer({
 	);
 
 	const handleSliceClick = useCallback(
-		(slice: PieSlice) => {
-			onClick?.({ label: slice.label, value: slice.value });
+		(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);
+			}
 		},
-		[onClick],
+		[onClick, builderQueries, data.requestPayload],
 	);
 
 	return (
@@ -79,7 +103,7 @@ function PiePanelRenderer({
 					isDarkMode={isDarkMode}
 					position={legendPosition}
 					id={panelId}
-					onSliceClick={handleSliceClick}
+					onSliceClick={enableDrillDown ? handleSliceClick : undefined}
 					data-testid="pie-chart"
 				/>
 			)}

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

@@ -0,0 +1,130 @@
+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,5 +23,6 @@ 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,6 +2,7 @@ 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`). */
@@ -11,11 +12,7 @@ export interface PreparePieDataArgs {
 	isDarkMode: boolean;
 }
 
-/**
- * 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.
- */
+/** One pie slice per (row × value column); column name labels slices when a query has several value columns. */
 export function preparePieData({
 	tables,
 	customColors,
@@ -27,26 +24,35 @@ export function preparePieData({
 
 	const slices: PieSlice[] = [];
 	tables.forEach((table) => {
-		const valueColumn = table.columns.find((column) => column.isValueColumn);
-		if (!valueColumn) {
+		const valueColumns = table.columns.filter((column) => column.isValueColumn);
+		if (valueColumns.length === 0) {
 			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 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 });
+			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,
+				});
+			});
 		});
 	});
 

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

@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type MouseEvent as ReactMouseEvent,
+} from 'react';
 import { Table } from 'antd';
 import type { DashboardtypesTablePanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -8,6 +15,9 @@ 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';
 
@@ -27,6 +37,8 @@ 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);
@@ -42,6 +54,11 @@ 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(
@@ -64,6 +81,34 @@ 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
@@ -72,9 +117,17 @@ function TablePanelRenderer({
 						columnUnits: spec.formatting?.columnUnits ?? {},
 						decimalPrecision,
 						thresholdsByColumn,
+						onCellClick: enableDrillDown ? handleCellClick : undefined,
 					})
 				: [],
-		[table, spec.formatting?.columnUnits, decimalPrecision, thresholdsByColumn],
+		[
+			table,
+			spec.formatting?.columnUnits,
+			decimalPrecision,
+			thresholdsByColumn,
+			enableDrillDown,
+			handleCellClick,
+		],
 	);
 
 	// User-resizable columns, persisted per panel to localStorage.

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

@@ -25,5 +25,6 @@ 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,6 +52,12 @@ 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;
 }
 
 /**
@@ -65,6 +71,7 @@ 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
@@ -97,19 +104,26 @@ export function buildTableColumns({
 				}
 				return text;
 			},
-			onCell: (record: TableRowData): { style?: React.CSSProperties } => {
-				if (!col.isValueColumn || colThresholds.length === 0) {
-					return {};
+			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 };
+						}
+					}
 				}
-				const num = Number(record[key]);
-				if (!Number.isFinite(num)) {
-					return {};
+
+				if (onCellClick) {
+					cellProps.onClick = (event): void =>
+						onCellClick({ columnId: key, record, event });
+					cellProps.style = { ...cellProps.style, cursor: 'pointer' };
 				}
-				const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
-				if (threshold?.format === 'background') {
-					return { style: { backgroundColor: threshold.color } };
-				}
-				return {};
+
+				return cellProps;
 			},
 		};
 	});

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

@@ -1,7 +1,9 @@
 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';
@@ -12,8 +14,6 @@ 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,7 +23,10 @@ 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';
@@ -37,6 +40,8 @@ function TimeSeriesPanelRenderer({
 	onDragSelect,
 	dashboardPreference,
 	panelMode,
+	onCloseStandaloneView,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -55,11 +60,9 @@ 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. The generated request DTO is structurally the V5 request.
+	// new data arrives.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -115,6 +118,32 @@ 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} />
@@ -127,10 +156,27 @@ function TimeSeriesPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
+		(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 } });
 		},
-		[onClick],
+		[onClick, flatSeries, builderQueries, data.response],
 	);
 
 	return (
@@ -148,6 +194,7 @@ function TimeSeriesPanelRenderer({
 						config={config}
 						data={chartData}
 						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
 						groupByPerQuery={groupByPerQuery}
 						canPinTooltip
 						timezone={timezone}
@@ -158,7 +205,7 @@ function TimeSeriesPanelRenderer({
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
+						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>
 				)}
 		</div>

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

@@ -27,5 +27,6 @@ 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,7 +108,9 @@ 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 = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
+	const spanGaps = chartAppearance?.spanGaps
+		? resolveSpanGaps(chartAppearance?.spanGaps)
+		: true;
 
 	const lineStyle = chartAppearance?.lineStyle
 		? LINE_STYLE_MAP[chartAppearance.lineStyle]

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

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

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

@@ -0,0 +1,36 @@
+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,46 +1,36 @@
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
 import type { PanelKind } from './panelKind';
-
-/** 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;
+import type { DrilldownClickPayload } from './drilldown';
 
 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: ChartClickEvent) => void;
+		onClick?: (event: DrilldownClickPayload) => void;
 		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
 	};
 	'signoz/BarChartPanel': {
-		onClick?: (event: ChartClickEvent) => void;
+		onClick?: (event: DrilldownClickPayload) => void;
 		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
 	};
-	'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>;
+	'signoz/TablePanel': { onClick?: (event: DrilldownClickPayload) => void };
+	'signoz/PieChartPanel': { onClick?: (event: DrilldownClickPayload) => void };
+	'signoz/NumberPanel': { onClick?: (event: DrilldownClickPayload) => void };
 };
 
 /**
@@ -48,6 +38,7 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
  * registry render boundary). The supertype the per-kind shapes are cast to once.
  */
 export interface AnyPanelInteractionProps {
-	onClick?: (event: PanelClickEvent) => void;
+	onClick?: (event: DrilldownClickPayload) => void;
 	onDragSelect?: DragSelect;
+	onCloseStandaloneView?: CloseStandaloneView;
 }

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

@@ -30,6 +30,11 @@ 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,3 +17,15 @@ 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

@@ -0,0 +1,46 @@
+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,22 +1,35 @@
 import { resolveSpanGaps } from '../resolvers';
 
 describe('resolveSpanGaps', () => {
-	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('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('tolerates a bare seconds number (back-compat)', () => {
-		expect(resolveSpanGaps('600')).toBe(600);
+		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '600' })).toBe(
+			600,
+		);
 	});
 
 	it('falls back to true for unparseable input', () => {
-		expect(resolveSpanGaps('abc')).toBe(true);
+		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);
 	});
 });

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

@@ -2,6 +2,7 @@ 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';
@@ -39,15 +40,14 @@ export function resolveDecimalPrecision(
 }
 
 /**
- * `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.
+ * 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).
  */
 export function resolveSpanGaps(
-	fillLessThan: string | undefined,
+	spanGaps: DashboardtypesSpanGapsDTO,
 ): boolean | number {
-	if (!fillLessThan) {
+	const fillLessThan = spanGaps.fillLessThan;
+	if (spanGaps.fillOnlyBelow === false || !fillLessThan) {
 		return true;
 	}
 	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)

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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,381 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,71 @@
+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,11 +3,13 @@ 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';
@@ -67,6 +69,7 @@ function Panel({
 	});
 
 	const { onDragSelect, dashboardPreference } = usePanelInteractions();
+	const drilldown = useDrilldown(panel, panelId);
 
 	return (
 		<div
@@ -98,8 +101,11 @@ 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,6 +14,19 @@ 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,
@@ -264,18 +277,13 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('not-yet-implemented actions (view) fire the placeholder alert with the feature name', () => {
-		const alertSpy = jest.spyOn(window, 'alert').mockImplementation(() => {});
+	it('view opens the View modal for the panel', () => {
 		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(alertSpy).toHaveBeenCalledTimes(1);
-		expect(alertSpy).toHaveBeenCalledWith('View option clicked');
-		alertSpy.mockRestore();
+		expect(mockOpenView).toHaveBeenCalledWith('panel-1');
 	});
 
 	it('create-alert seeds an alert from this panel', () => {

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

@@ -3,12 +3,13 @@ import type { ComponentTypes } from 'utils/permission';
 
 /**
  * Every action the panel menu can offer: per-kind gated capabilities (minus
- * `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.
+ * `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.
  */
 export type PanelActionId =
-	| Exclude<keyof PanelActionCapabilities, 'search'>
+	| Exclude<keyof PanelActionCapabilities, 'search' | 'drilldown'>
 	| 'move'
 	| 'delete';
 

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

@@ -30,6 +30,7 @@ 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
@@ -146,6 +147,7 @@ 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.
@@ -178,7 +180,7 @@ export function usePanelActionItems({
 				key: 'view-panel',
 				label: 'View',
 				icon: <Fullscreen size={14} />,
-				onClick: (): void => notImplementedYet('View'),
+				onClick: (): void => openView(panelId),
 			});
 		}
 		if (isEditable && canEditWidget && panelCapabilities.edit) {
@@ -263,6 +265,7 @@ export function usePanelActionItems({
 		panelActions,
 		sections,
 		panelId,
+		openView,
 		openPanelEditor,
 		createAlert,
 		movePanel,

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

@@ -3,6 +3,7 @@ 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';
@@ -32,6 +33,12 @@ 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;
 }
 
 /**
@@ -51,6 +58,9 @@ 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.
@@ -108,10 +118,12 @@ function PanelBody({
 				refetch={refetch}
 				onDragSelect={onDragSelect}
 				panelMode={panelMode}
-				enableDrillDown={false}
+				enableDrillDown={enableDrillDown}
+				onClick={onClick}
 				dashboardPreference={dashboardPreference}
 				searchTerm={searchTerm}
 				pagination={pagination}
+				onCloseStandaloneView={onCloseStandaloneView}
 			/>
 		</div>
 	);

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

@@ -1,9 +1,17 @@
 // Expanded state: a compact input that fits the header row.
 .input {
-	width: 180px;
+	width: min(100%, 320px);
+	height: 24px;
 }
 
 .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,6 +43,7 @@ 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

@@ -0,0 +1,52 @@
+@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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,136 @@
+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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,178 @@
+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

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

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useViewPanelTimeWindow.test.ts

@@ -0,0 +1,93 @@
+import { act, renderHook } from '@testing-library/react';
+import GetMinMax from 'lib/getMinMax';
+
+import { useViewPanelTimeWindow } from '../ViewPanelModal/useViewPanelTimeWindow';
+
+const NS_PER_MS = 1e6;
+
+// Global time is stored in nanoseconds; the hook must surface milliseconds.
+const mockState = {
+	globalTime: {
+		selectedTime: '6h',
+		minTime: 6_000_000 * NS_PER_MS,
+		maxTime: 7_000_000 * NS_PER_MS,
+	},
+};
+
+jest.mock('react-redux', () => ({
+	useSelector: (selector: (s: unknown) => unknown): unknown =>
+		selector(mockState),
+}));
+
+jest.mock('lib/getMinMax', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+const mockGetMinMax = GetMinMax as unknown as jest.Mock;
+
+describe('useViewPanelTimeWindow', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('seeds the window from global time, converting ns → ms', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: mockState.globalTime.minTime / NS_PER_MS,
+			endMs: mockState.globalTime.maxTime / NS_PER_MS,
+		});
+		expect(result.current.selectedInterval).toBe('6h');
+	});
+
+	it('converts GetMinMax (ns) to ms on a relative selection', () => {
+		mockGetMinMax.mockReturnValue({
+			minTime: 1_700_000_000_000 * NS_PER_MS,
+			maxTime: 1_700_000_300_000 * NS_PER_MS,
+		});
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onTimeChange('5m'));
+
+		expect(result.current.selectedInterval).toBe('5m');
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 1_700_000_000_000,
+			endMs: 1_700_000_300_000,
+		});
+	});
+
+	it('uses an absolute custom range as-is (already ms)', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onTimeChange('custom', [111, 222]));
+
+		expect(mockGetMinMax).not.toHaveBeenCalled();
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 111,
+			endMs: 222,
+		});
+	});
+
+	it('sets a custom window from a drag selection (modal-local, ms)', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+
+		act(() => result.current.onDragSelect(1000, 5000));
+
+		expect(result.current.selectedInterval).toBe('custom');
+		expect(result.current.timeOverride).toStrictEqual({
+			startMs: 1000,
+			endMs: 5000,
+		});
+	});
+
+	it('ignores a zero-width or inverted drag selection', () => {
+		const { result } = renderHook(() => useViewPanelTimeWindow());
+		const initial = result.current.timeOverride;
+
+		act(() => result.current.onDragSelect(5000, 5000));
+		act(() => result.current.onDragSelect(9000, 1000));
+
+		expect(result.current.timeOverride).toStrictEqual(initial);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/__tests__/useClonePanel.test.ts

@@ -1,12 +1,15 @@
 import { renderHook } from '@testing-library/react';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
 
 import { useDashboardStore } from '../../../../store/useDashboardStore';
 import type { DashboardSection } from '../../../../utils';
 import { useClonePanel } from '../useClonePanel';
 
-jest.mock('api/generated/services/dashboard', () => ({
-	patchDashboardV2: jest.fn().mockResolvedValue(undefined),
+const mockPatchAsync = jest.fn().mockResolvedValue(undefined);
+jest.mock('../../../../hooks/useOptimisticPatch', () => ({
+	useOptimisticPatch: (): { patchAsync: jest.Mock; isPatching: boolean } => ({
+		patchAsync: mockPatchAsync,
+		isPatching: false,
+	}),
 }));
 
 const mockToastPromise = jest.fn();
@@ -16,8 +19,6 @@ jest.mock('@signozhq/ui/sonner', () => ({
 
 jest.mock('uuid', () => ({ v4: (): string => 'cloned-id' }));
 
-const mockPatch = patchDashboardV2 as unknown as jest.Mock;
-
 const sourcePanel = {
 	kind: 'Panel',
 	spec: {
@@ -45,7 +46,7 @@ function sections(): DashboardSection[] {
 describe('useClonePanel', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		useDashboardStore.setState({ dashboardId: 'dash-1', refetch: jest.fn() });
+		useDashboardStore.setState({ dashboardId: 'dash-1' });
 	});
 
 	it('patches an add of the deep-copied spec + a new item under the same section', async () => {
@@ -53,7 +54,7 @@ describe('useClonePanel', () => {
 
 		await result.current({ panelId: 'p1', layoutIndex: 0 });
 
-		expect(mockPatch).toHaveBeenCalledWith({ id: 'dash-1' }, [
+		expect(mockPatchAsync).toHaveBeenCalledWith([
 			{
 				op: 'add',
 				path: '/spec/panels/cloned-id',
@@ -92,7 +93,7 @@ describe('useClonePanel', () => {
 
 		await result.current({ panelId: 'p1', layoutIndex: 0 });
 
-		const ops = mockPatch.mock.calls[0][1];
+		const ops = mockPatchAsync.mock.calls[0][0];
 		// Room in the last row (4 + 4 = 8 ≤ 12 cols) → sits to the right at y:0.
 		expect(ops[1].value).toMatchObject({ x: 4, y: 0, width: 4, height: 5 });
 	});
@@ -102,7 +103,7 @@ describe('useClonePanel', () => {
 
 		await result.current({ panelId: 'p1', layoutIndex: 0 });
 
-		const ops = mockPatch.mock.calls[0][1];
+		const ops = mockPatchAsync.mock.calls[0][0];
 		expect(ops[0].value).toStrictEqual(sourcePanel);
 		expect(ops[0].value).not.toBe(sourcePanel);
 	});
@@ -112,7 +113,7 @@ describe('useClonePanel', () => {
 
 		await result.current({ panelId: 'missing', layoutIndex: 0 });
 
-		expect(mockPatch).not.toHaveBeenCalled();
+		expect(mockPatchAsync).not.toHaveBeenCalled();
 		expect(mockToastPromise).not.toHaveBeenCalled();
 	});
 
@@ -132,7 +133,7 @@ describe('useClonePanel', () => {
 	});
 
 	it('swallows a patch rejection (toast owns the error UX) — does not throw', async () => {
-		mockPatch.mockRejectedValueOnce(new Error('boom'));
+		mockPatchAsync.mockRejectedValueOnce(new Error('boom'));
 		const { result } = renderHook(() => useClonePanel({ sections: sections() }));
 
 		await expect(