fix(dashboard-v2): open the View modal and editor on the panel's own query (#12345)

* fix(dashboard-v2): seed the query builder before the View modal mounts

The query builder context is global and outlives the View modal, so it still
holds the previously-viewed panel's query when the modal for the next panel
mounts. The modal only re-seeded it in a mount effect, and the builder's fields
seed themselves on mount — PromQL inputs are uncontrolled and QueryAddOns picks
its visible rows once — so they kept rendering the previous panel's query until
the modal was closed and reopened.

Seed the context in the open handlers instead, before the modal renders.
resetQuery (not initQueryBuilderData): the latter sets a staged query, and
swapping one staged id for another makes useSyncTimeOnStagedQueryChange
re-anchor global time, refetching every panel on the grid. Clearing the staged
query also stops the previous panel's query being committed into the new
panel's draft, and keeps the provider's URL hydration running for drilldowns.

* fix: fixed bar panel ordering issue

* test(dashboard-v2): drop the userEvent delay in the View modal suites

`userEvent.setup()` defaults to `delay: 0`, which awaits a macrotask between
every sub-event of a click. Each await flushes React, so every one re-renders
the real query builder these two suites mount — enough to push both add-on
tests past jest's 5s default timeout on CI.

`delay: null` dispatches the sequence synchronously: the add-on tests drop from
3172ms/1171ms to ~495ms/262ms and PromQL from 815ms to ~455ms, with the full
tree still rendered and every assertion unchanged. Verified to still fail
against the unseeded builder, so the regressions stay pinned.

* fix(dashboard-v2): carry the opened panel's query in compositeQuery

The query builder context is mounted above the router, so opening the panel
editor or the View modal leaves the previously-opened panel's query in it.
Fields that read the query once on mount then keep showing that panel: PromQL
inputs are uncontrolled and their rows are keyed by query name, and QueryAddOns
picks its visible rows once.

Both surfaces now state the panel's query in the URL as compositeQuery, so they
derive from the URL and survive a refresh or a shared link (V1 does the same in
WidgetHeader.onEditHandler). The URL alone isn't enough — the provider applies
it in an effect, a tick after those fields have mounted — so the same query goes
into the context before navigating. resetQuery, not initQueryBuilderData:
swapping one staged id for another makes useSyncTimeOnStagedQueryChange
re-anchor global time and refetch the grid.

* fix(dashboard-v2): order time series by mean, sharing the bar sort

Review feedback: the sort shouldn't be a bar-panel local. The mean/tiebreak
rules move to the visualization layer as a generic `sortByMeanDesc`, with a
`PanelSeries` adapter in `Panels/utils` that the bar and time-series renderers
both call, so any other bar consumer can adopt it in one line.

Time series flipped for the same reason bar did — the backend returns a query's
series in Go map-iteration order — so it now sorts too: draw order, legend order
and the View modal's legend table are deterministic across refreshes. Colours
are unaffected, since `generateColor` hashes the label rather than the position.

The order still has to be settled before the uPlot config and aligned data are
built: those two and drilldown click attribution index the flattened list
positionally, and uPlot draws a stacked bar's segments in series-index order, so
sorting inside `BarChart` paints the accumulated total over every segment.

---------

Co-authored-by: Ashwin Bhatkal <ashwin96@gmail.com>

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/sortByMeanDesc.test.ts

@@ -0,0 +1,66 @@
+import { sortByMeanDesc } from '../sortByMeanDesc';
+
+interface Item {
+	name: string;
+	values: (number | null)[];
+}
+
+const item = (name: string, values: (number | null)[]): Item => ({
+	name,
+	values,
+});
+
+const sorted = (items: Item[]): string[] =>
+	sortByMeanDesc(items, {
+		getValues: (entry) => entry.values,
+		getKey: (entry) => entry.name,
+	}).map((entry) => entry.name);
+
+describe('sortByMeanDesc', () => {
+	it('orders items by descending mean', () => {
+		expect(
+			sorted([item('a', [1, 1]), item('b', [10, 20]), item('c', [5, 5])]),
+		).toStrictEqual(['b', 'c', 'a']);
+	});
+
+	it('sinks items with no finite values to the bottom', () => {
+		expect(
+			sorted([item('a', []), item('b', [NaN, Infinity]), item('c', [1])]),
+		).toStrictEqual(['c', 'a', 'b']);
+	});
+
+	it('ignores non-finite and null values when averaging', () => {
+		// Mean over the finite values only is 10, so NaN must not poison it to last place.
+		expect(
+			sorted([item('a', [2, 2]), item('b', [10, NaN]), item('c', [4, null])]),
+		).toStrictEqual(['b', 'c', 'a']);
+	});
+
+	it('produces the same order whichever order the items arrive in', () => {
+		const a = item('a', [5]);
+		const b = item('b', [5]);
+		const c = item('c', [9]);
+
+		expect(sorted([a, b, c])).toStrictEqual(sorted([c, b, a]));
+		expect(sorted([b, a, c])).toStrictEqual(['c', 'a', 'b']);
+	});
+
+	it('tiebreaks equal means on the key', () => {
+		expect(sorted([item('b', [1]), item('a', [1])])).toStrictEqual(['a', 'b']);
+	});
+
+	it('tiebreaks on the key for items that have no finite values either', () => {
+		expect(sorted([item('b', []), item('a', [NaN])])).toStrictEqual(['a', 'b']);
+	});
+
+	it('does not mutate the input array', () => {
+		const items = [item('a', [1]), item('b', [9])];
+
+		expect(sorted(items)).toStrictEqual(['b', 'a']);
+		expect(items.map((entry) => entry.name)).toStrictEqual(['a', 'b']);
+	});
+
+	it('returns an empty array for no items', () => {
+		expect(sorted([])).toStrictEqual([]);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/utils/sortByMeanDesc.ts

@@ -0,0 +1,45 @@
+type MeanInput = number | null | undefined;
+
+function finiteMean(values: Iterable<MeanInput>): number | null {
+	let sum = 0;
+	let count = 0;
+	for (const value of values) {
+		if (typeof value === 'number' && Number.isFinite(value)) {
+			sum += value;
+			count += 1;
+		}
+	}
+	return count > 0 ? sum / count : null;
+}
+
+export interface SortByMeanDescOptions<T> {
+	/** Numeric values of an item; non-finite entries are ignored. */
+	getValues: (item: T) => Iterable<MeanInput>;
+	/** Stable identity of an item, used to break ties on equal means. */
+	getKey: (item: T) => string;
+}
+
+/**
+ * Orders series by descending mean, on a copy (V1 parity: `utils/getSortedSeriesData`). The wire
+ * order can't stand in for it: the backend returns series in Go map-iteration order.
+ *
+ * Call this before building the uPlot config and aligned data — those two and click attribution
+ * all index the list positionally, and uPlot draws a stacked bar's segments in series-index order.
+ */
+export function sortByMeanDesc<T>(
+	items: T[],
+	{ getValues, getKey }: SortByMeanDescOptions<T>,
+): T[] {
+	return items
+		.map((item) => ({ item, mean: finiteMean(getValues(item)) }))
+		.sort((a, b) => {
+			if (a.mean !== null && b.mean !== null && a.mean !== b.mean) {
+				return b.mean - a.mean;
+			}
+			if ((a.mean === null) !== (b.mean === null)) {
+				return a.mean === null ? 1 : -1;
+			}
+			return getKey(a.item).localeCompare(getKey(b.item));
+		})
+		.map(({ item }) => item);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/__tests__/variableAdapters.test.ts

@@ -0,0 +1,97 @@
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from '../variableFormModel';
+import { dtoToFormModel, formModelToDto } from '../variableAdapters';
+
+function model(overrides: Partial<VariableFormModel>): VariableFormModel {
+	return { ...emptyVariableFormModel(), name: 'v', ...overrides };
+}
+
+/** The list spec a saved variable carries, whatever its plugin. */
+function listSpec(m: VariableFormModel): {
+	allowMultiple?: boolean;
+	allowAllValue?: boolean;
+} {
+	return formModelToDto(m).spec as {
+		allowMultiple?: boolean;
+		allowAllValue?: boolean;
+	};
+}
+
+describe('formModelToDto — the ALL flag needs multi-select', () => {
+	it('keeps ALL for a multi-select dynamic variable', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'DYNAMIC',
+					dynamicAttribute: 'host.name',
+					multiSelect: true,
+				}),
+			),
+		).toMatchObject({ allowMultiple: true, allowAllValue: true });
+	});
+
+	it('drops ALL for a single-select dynamic variable', () => {
+		// The API rejects allowAllValue without allowMultiple, and this used to be forced
+		// true for every dynamic variable — which blocked saving the whole dashboard.
+		expect(
+			listSpec(
+				model({
+					type: 'DYNAMIC',
+					dynamicAttribute: 'host.name',
+					multiSelect: false,
+				}),
+			),
+		).toMatchObject({ allowMultiple: false, allowAllValue: false });
+	});
+
+	it('drops ALL for a single-select query variable that still carries the flag', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'QUERY',
+					queryValue: 'SELECT 1',
+					multiSelect: false,
+					showAllOption: true,
+				}),
+			),
+		).toMatchObject({ allowMultiple: false, allowAllValue: false });
+	});
+
+	it('respects the toggle on a multi-select query variable', () => {
+		expect(
+			listSpec(
+				model({
+					type: 'QUERY',
+					queryValue: 'SELECT 1',
+					multiSelect: true,
+					showAllOption: false,
+				}),
+			),
+		).toMatchObject({ allowMultiple: true, allowAllValue: false });
+	});
+
+	it('round-trips a single-select dynamic variable unchanged', () => {
+		// What the dashboard in the report holds: saving it must not flip the flag.
+		const dto = {
+			kind: 'ListVariable',
+			spec: {
+				name: 'host.name',
+				display: { name: 'host.name', description: '' },
+				allowMultiple: false,
+				allowAllValue: false,
+				sort: 'alphabetical-asc',
+				plugin: {
+					kind: 'signoz/DynamicVariable',
+					spec: { name: 'host.name', signal: 'all' },
+				},
+			},
+		} as never;
+
+		expect(listSpec(dtoToFormModel(dto))).toMatchObject({
+			allowMultiple: false,
+			allowAllValue: false,
+		});
+	});
+});

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

@@ -133,9 +133,14 @@ export function formModelToDto(
 			name: model.name,
 			display,
 			allowMultiple: model.multiSelect,
-			// Dynamic variables always expose the aggregate "ALL" entry (matches V1,
-			// which forced showALLOption true on save); other types respect the toggle.
-			allowAllValue: model.type === 'DYNAMIC' ? true : model.showAllOption,
+			// Dynamic variables always expose the aggregate "ALL" entry (matches V1, which
+			// forced showALLOption true on save); other types respect the toggle. Either
+			// way it needs multi-select — ALL is a set of values, and the API rejects the
+			// flag without it, which used to make a single-select dynamic variable
+			// unsaveable and blocked every other edit to the dashboard with it.
+			allowAllValue:
+				model.multiSelect &&
+				(model.type === 'DYNAMIC' ? true : model.showAllOption),
 			// model.sort is already a Perses sort token (`none` / `alphabetical-*`).
 			sort: model.sort,
 			defaultValue: model.defaultValue,

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/__tests__/panelEditorUrlQuery.promql.test.tsx

@@ -0,0 +1,164 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter, Route, useHistory, useParams } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import {
+	type DashboardtypesPanelDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import { useOpenPanelEditor } from '../../hooks/useOpenPanelEditor';
+import { usePanelEditorQuerySync } from '../hooks/usePanelEditorQuerySync';
+import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory: useRouterHistory } =
+		jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useRouterHistory();
+			return {
+				safeNavigate: (to: string): void => history.push(to),
+			};
+		},
+	};
+});
+
+jest.mock('../../store/useDashboardStore', () => ({
+	useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+		selector({ dashboardId: 'dash-1' }),
+}));
+
+function makePromPanel(name: string, promql: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/PromQLQuery',
+							spec: { name: 'A', query: promql, legend: '', disabled: false },
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePromPanel('Panel A', 'up{job="alpha"}'),
+	B: makePromPanel('Panel B', 'up{job="bravo"}'),
+};
+
+const noop = (): void => {};
+
+/** Stands in for the editor route: the same draft + builder sync `PanelEditorContainer` runs. */
+function EditorRoute(): JSX.Element {
+	const { panelId } = useParams<{ panelId: string }>();
+	const [panel] = useState(PANELS[panelId]);
+
+	usePanelEditorQuerySync({
+		draft: panel,
+		panelType: PANEL_TYPES.TIME_SERIES,
+		setSpec: noop,
+		refetch: noop,
+		signal: TelemetrytypesSignalDTO.metrics,
+		savedQueries: panel.spec.queries,
+	});
+
+	return (
+		<PanelEditorQueryBuilder
+			panelKind="signoz/TimeSeriesPanel"
+			signal={TelemetrytypesSignalDTO.metrics}
+			isLoadingQueries={false}
+			onStageRunQuery={noop}
+			onCancelQuery={noop}
+		/>
+	);
+}
+
+function Harness(): JSX.Element {
+	const openPanelEditor = useOpenPanelEditor();
+	const history = useHistory();
+
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="edit-a"
+				onClick={(): void => openPanelEditor('A', { panel: PANELS.A })}
+			>
+				edit A
+			</button>
+			<button
+				type="button"
+				data-testid="edit-b"
+				onClick={(): void => openPanelEditor('B', { panel: PANELS.B })}
+			>
+				edit B
+			</button>
+			<button
+				type="button"
+				data-testid="back"
+				onClick={(): void => history.push('/dashboard/dash-1')}
+			>
+				back
+			</button>
+			<Route
+				path="/dashboard/:dashboardId/panel/:panelId"
+				component={EditorRoute}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('Panel editor route, PromQL panels', () => {
+	it('opens on the edited panel query, not the previously edited one', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('edit-a'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="alpha"}',
+		);
+
+		await user.click(screen.getByTestId('back'));
+		await user.click(screen.getByTestId('edit-b'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="bravo"}',
+		);
+	});
+});

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

@@ -27,6 +27,7 @@ import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
 import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
 import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
 
 import { buildBarChartConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -70,7 +71,12 @@ function BarPanelRenderer({
 
 	const flatSeries = useMemo(
 		() =>
-			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
 		[data.response, data.legendMap],
 	);
 

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

@@ -27,6 +27,7 @@ import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
 import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
 import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
 
 import { buildTimeSeriesConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -71,7 +72,12 @@ function TimeSeriesPanelRenderer({
 
 	const flatSeries = useMemo(
 		() =>
-			flattenTimeSeries(getTimeSeriesResults(data.response), data.legendMap ?? {}),
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
 		[data.response, data.legendMap],
 	);
 

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

@@ -0,0 +1,95 @@
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+import { sortSeriesByMeanDesc } from '../sortSeriesByMean';
+
+function makeSeries(
+	queryName: string,
+	values: number[],
+	overrides: Partial<PanelSeries> = {},
+): PanelSeries {
+	return {
+		queryName,
+		legend: '',
+		labels: {},
+		kind: 'series',
+		values: values.map((value, index) => ({
+			timestamp: (index + 1) * 1_000,
+			value,
+		})),
+		aggregation: { index: 0, alias: '' },
+		...overrides,
+	};
+}
+
+const names = (series: PanelSeries[]): string[] =>
+	series.map((item) => item.queryName);
+
+describe('sortSeriesByMeanDesc', () => {
+	it('orders series by descending mean', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', [1, 1]),
+			makeSeries('B', [10, 20]),
+			makeSeries('C', [5, 5]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['B', 'C', 'A']);
+	});
+
+	it('sinks series with no finite points to the bottom', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', []),
+			makeSeries('B', [NaN, Infinity]),
+			makeSeries('C', [1]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['C', 'A', 'B']);
+	});
+
+	it('ignores non-finite points when averaging', () => {
+		const sorted = sortSeriesByMeanDesc([
+			makeSeries('A', [2, 2]),
+			// Mean over finite points only is 10, so NaN must not poison it to last place.
+			makeSeries('B', [10, NaN]),
+		]);
+
+		expect(names(sorted)).toStrictEqual(['B', 'A']);
+	});
+
+	it('produces the same order regardless of input order', () => {
+		const a = makeSeries('A', [5]);
+		const b = makeSeries('B', [5]);
+		const c = makeSeries('C', [9]);
+
+		expect(names(sortSeriesByMeanDesc([a, b, c]))).toStrictEqual(
+			names(sortSeriesByMeanDesc([c, b, a])),
+		);
+		expect(names(sortSeriesByMeanDesc([b, a, c]))).toStrictEqual(['C', 'A', 'B']);
+	});
+
+	it('tiebreaks equal means on labels when the query name matches', () => {
+		const forward = sortSeriesByMeanDesc([
+			makeSeries('A', [1], { labels: { host: 'b' } }),
+			makeSeries('A', [1], { labels: { host: 'a' } }),
+		]);
+		const reversed = sortSeriesByMeanDesc([
+			makeSeries('A', [1], { labels: { host: 'a' } }),
+			makeSeries('A', [1], { labels: { host: 'b' } }),
+		]);
+
+		expect(forward.map((item) => item.labels.host)).toStrictEqual(['a', 'b']);
+		expect(reversed.map((item) => item.labels.host)).toStrictEqual(['a', 'b']);
+	});
+
+	it('does not mutate the input array', () => {
+		const input = [makeSeries('A', [1]), makeSeries('B', [9])];
+
+		const sorted = sortSeriesByMeanDesc(input);
+
+		expect(names(input)).toStrictEqual(['A', 'B']);
+		expect(names(sorted)).toStrictEqual(['B', 'A']);
+	});
+
+	it('returns an empty array for no series', () => {
+		expect(sortSeriesByMeanDesc([])).toStrictEqual([]);
+	});
+});

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

@@ -0,0 +1,23 @@
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getPanelDefinition } from '../registry';
+import { PANEL_KIND_TO_PANEL_TYPE } from '../types/panelKind';
+import { fromPerses } from '../../queryV5/persesQueryAdapters';
+
+/**
+ * The panel's saved query as a builder `Query` — what the editor route and the View
+ * modal put in `compositeQuery` when they open. Matches the seed
+ * `usePanelEditorQuerySync` computes from the panel.
+ */
+export function getPanelBuilderQuery(panel: DashboardtypesPanelDTO): Query {
+	const kind = panel.spec.plugin.kind;
+	const [defaultSignal] = getPanelDefinition(kind).supportedSignals;
+	// A query-less panel seeds from the kind's first supported signal — `fromPerses`'s
+	// metrics default isn't authorable in every kind (e.g. List).
+	if (panel.spec.queries.length === 0 && defaultSignal) {
+		return initialQueriesMap[defaultSignal];
+	}
+	return fromPerses(panel.spec.queries, PANEL_KIND_TO_PANEL_TYPE[kind]);
+}

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

@@ -0,0 +1,18 @@
+import { sortByMeanDesc } from 'container/DashboardContainer/visualization/charts/utils/sortByMeanDesc';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+
+function seriesKey(series: PanelSeries): string {
+	const labels = Object.keys(series.labels)
+		.sort()
+		.map((name) => `${name}=${series.labels[name]}`)
+		.join(',');
+	return `${series.queryName}|${series.aggregation.index}|${series.kind}|${labels}`;
+}
+
+/** `sortByMeanDesc` over flattened V5 series; call it before building the config and chart data. */
+export function sortSeriesByMeanDesc(series: PanelSeries[]): PanelSeries[] {
+	return sortByMeanDesc(series, {
+		getValues: (item) => item.values.map((point) => point.value),
+		getKey: seriesKey,
+	});
+}

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

@@ -240,7 +240,10 @@ describe('usePanelActionItems', () => {
 			(i) => 'key' in i && i.key === 'edit-panel',
 		);
 		(edit as { onClick: () => void }).onClick();
-		expect(mockOpenEditor).toHaveBeenCalledWith('panel-1');
+		// The panel rides along so its saved query lands in the editor URL.
+		expect(mockOpenEditor).toHaveBeenCalledWith('panel-1', {
+			panel: mockPanel,
+		});
 	});
 
 	it('"Move to section" offers a single "Dashboard (root)" target', () => {
@@ -394,7 +397,9 @@ describe('usePanelActionItems', () => {
 			(i) => 'key' in i && i.key === 'view-panel',
 		);
 		(view as { onClick: () => void }).onClick();
-		expect(mockOpenView).toHaveBeenCalledWith('panel-1');
+		// The panel goes along so the opener can seed the shared query builder before
+		// the modal mounts (otherwise it renders the previously-viewed panel's query).
+		expect(mockOpenView).toHaveBeenCalledWith('panel-1', baseArgs.panel);
 	});
 
 	it('create-alert seeds an alert from this panel', () => {

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

@@ -130,7 +130,7 @@ export function usePanelActionItems({
 				key: 'view-panel',
 				label: 'View',
 				icon: <Fullscreen size={14} />,
-				onClick: (): void => openView(panelId),
+				onClick: (): void => openView(panelId, panel),
 			});
 		}
 		if (canEdit && canEditWidget && panelCapabilities.edit) {
@@ -139,7 +139,7 @@ export function usePanelActionItems({
 				label: label('Edit panel'),
 				icon: <PenLine size={14} />,
 				disabled: isLocked,
-				onClick: (): void => openPanelEditor(panelId),
+				onClick: (): void => openPanelEditor(panelId, { panel }),
 			});
 		}
 		if (canEdit && canEditWidget && panelCapabilities.clone) {

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

@@ -0,0 +1,253 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// CodeMirror (the where-clause editor) needs real DOM measurement APIs.
+beforeAll(() => {
+	const rect = {
+		width: 100,
+		height: 20,
+		top: 0,
+		left: 0,
+		right: 100,
+		bottom: 20,
+		x: 0,
+		y: 0,
+		toJSON: (): unknown => rect,
+	} as DOMRect;
+	const rects = { length: 1, item: (): DOMRect => rect, 0: rect };
+	document.createRange = (): Range =>
+		({
+			getClientRects: (): unknown => rects,
+			getBoundingClientRect: (): DOMRect => rect,
+			setStart: (): void => {},
+			setEnd: (): void => {},
+			startContainer: document.body,
+			endContainer: document.body,
+			startOffset: 0,
+			endOffset: 0,
+			collapsed: true,
+			commonAncestorContainer: document.body,
+		}) as unknown as Range;
+	Element.prototype.getBoundingClientRect = (): DOMRect => rect;
+});
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest
+		.fn()
+		.mockResolvedValue({ data: { data: { keys: {} } } }),
+}));
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn().mockResolvedValue({
+		data: { data: { values: { stringValues: [], numberValues: [] } } },
+	}),
+}));
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
+	() =>
+		function MockPreviewPane(): ReactElement {
+			return <div data-testid="preview-pane" />;
+		},
+);
+
+jest.mock('../hooks/useDrilldown', () => ({
+	useDrilldown: (): unknown => ({
+		enableDrillDown: false,
+		onPanelClick: jest.fn(),
+		contextMenuProps: {
+			coordinates: null,
+			popoverPosition: null,
+			items: null,
+			onClose: jest.fn(),
+		},
+	}),
+}));
+
+jest.mock('../hooks/usePanelInteractions', () => ({
+	usePanelInteractions: (): unknown => ({
+		onDragSelect: jest.fn(),
+		dashboardPreference: { syncMode: 0 },
+	}),
+}));
+
+jest.mock(
+	'../ViewPanelModal/ViewPanelModalHeader',
+	() =>
+		function MockViewPanelModalHeader(): ReactElement {
+			return <div data-testid="view-panel-header" />;
+		},
+);
+
+function makePanel(
+	name: string,
+	extras: Record<string, unknown>,
+): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								disabled: false,
+								filter: { expression: "service = 'x'" },
+								aggregations: [{ expression: 'count()' }],
+								...extras,
+							},
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	plain: makePanel('Plain panel', {}),
+	grouped: makePanel('Grouped panel', {
+		groupBy: [{ name: 'host.name', fieldDataType: 'string' }],
+		having: { expression: 'count() > 5' },
+	}),
+};
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, closeView } = useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-plain"
+				onClick={(): void => openView('plain', PANELS.plain)}
+			>
+				open plain
+			</button>
+			<button
+				type="button"
+				data-testid="open-grouped"
+				onClick={(): void => openView('grouped', PANELS.grouped)}
+			>
+				open grouped
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<ViewPanelModal
+				open={!!expandedPanelId}
+				panel={expandedPanelId ? PANELS[expandedPanelId] : undefined}
+				panelId={expandedPanelId ?? undefined}
+				onClose={closeView}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+// QueryAddOns picks which rows are visible once on mount and never re-seeds, so unlike
+// the field values these never recover from a context swap that lands after mount.
+describe('View modal, builder add-on rows', () => {
+	it('shows the opened panel add-ons, not the previous panel ones', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-grouped'));
+		expect(screen.getByTestId('group-by-content')).toBeInTheDocument();
+		expect(screen.getByTestId('having-content')).toBeInTheDocument();
+
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-plain'));
+		expect(screen.queryByTestId('group-by-content')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('having-content')).not.toBeInTheDocument();
+	});
+
+	it('shows add-ons the opened panel has after a panel without them', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-plain'));
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-grouped'));
+
+		expect(screen.getByTestId('group-by-content')).toBeInTheDocument();
+		expect(screen.getByTestId('having-content')).toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,187 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider as ReduxProvider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import configureStore from 'redux-mock-store';
+import appStore from 'store';
+
+import ViewPanelModal from '../ViewPanelModal/ViewPanelModal';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/PanelEditor/PreviewPane/PreviewPane',
+	() =>
+		function MockPreviewPane(): ReactElement {
+			return <div data-testid="preview-pane" />;
+		},
+);
+
+jest.mock('../hooks/useDrilldown', () => ({
+	useDrilldown: (): unknown => ({
+		enableDrillDown: false,
+		onPanelClick: jest.fn(),
+		contextMenuProps: {
+			coordinates: null,
+			popoverPosition: null,
+			items: null,
+			onClose: jest.fn(),
+		},
+	}),
+}));
+
+jest.mock('../hooks/usePanelInteractions', () => ({
+	usePanelInteractions: (): unknown => ({
+		onDragSelect: jest.fn(),
+		dashboardPreference: { syncMode: 0 },
+	}),
+}));
+
+jest.mock(
+	'../ViewPanelModal/ViewPanelModalHeader',
+	() =>
+		function MockViewPanelModalHeader(): ReactElement {
+			return <div data-testid="view-panel-header" />;
+		},
+);
+
+function makePromPanel(name: string, promql: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/PromQLQuery',
+							spec: { name: 'A', query: promql, legend: '', disabled: false },
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePromPanel('Panel A', 'up{job="alpha"}'),
+	B: makePromPanel('Panel B', 'up{job="bravo"}'),
+};
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, closeView } = useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-a"
+				onClick={(): void => openView('A', PANELS.A)}
+			>
+				open A
+			</button>
+			<button
+				type="button"
+				data-testid="open-b"
+				onClick={(): void => openView('B', PANELS.B)}
+			>
+				open B
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<ViewPanelModal
+				open={!!expandedPanelId}
+				panel={expandedPanelId ? PANELS[expandedPanelId] : undefined}
+				panelId={expandedPanelId ?? undefined}
+				onClose={closeView}
+			/>
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryClientProvider client={new QueryClient()}>
+					<ReduxProvider store={configureStore([])(appStore.getState())}>
+						<TooltipProvider>
+							<QueryBuilderProvider>
+								<Harness />
+							</QueryBuilderProvider>
+						</TooltipProvider>
+					</ReduxProvider>
+				</QueryClientProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('View modal, PromQL panels', () => {
+	it('shows the opened panel query, not the previously viewed one', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="alpha"}',
+		);
+
+		await user.click(screen.getByTestId('close'));
+		await user.click(screen.getByTestId('open-b'));
+		expect(screen.getByTestId('promql-query-input')).toHaveValue(
+			'up{job="bravo"}',
+		);
+	});
+});

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

@@ -0,0 +1,285 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter, useLocation } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useViewPanelMode } from '../ViewPanelModal/useViewPanelMode';
+import { useViewPanel } from '../hooks/useViewPanel';
+
+// jest.config maps the real hook to a no-op mock; this suite needs real navigation.
+jest.mock('hooks/useSafeNavigate', () => {
+	const { useHistory } = jest.requireActual('react-router-dom');
+	return {
+		useSafeNavigate: (): unknown => {
+			const history = useHistory();
+			return {
+				safeNavigate: (to: string, opts?: { replace?: boolean }): void => {
+					if (opts?.replace) {
+						history.replace(to);
+					} else {
+						history.push(to);
+					}
+				},
+			};
+		},
+	};
+});
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery',
+	() => ({
+		usePanelQuery: (): unknown => ({
+			data: undefined,
+			isFetching: false,
+			isPreviousData: false,
+			error: null,
+			refetch: jest.fn(),
+			cancelQuery: jest.fn(),
+			pagination: undefined,
+		}),
+	}),
+);
+
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (s: unknown) => unknown): unknown =>
+			selector({ dashboardId: 'dash-1' }),
+	}),
+);
+
+function makePanel(name: string, expression: string): DashboardtypesPanelDTO {
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name },
+			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+			queries: [
+				{
+					kind: 'time_series',
+					spec: {
+						plugin: {
+							kind: 'signoz/BuilderQuery',
+							spec: {
+								name: 'A',
+								signal: 'logs',
+								disabled: false,
+								filter: { expression },
+								aggregations: [{ expression: 'count()' }],
+							},
+						},
+					},
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const PANELS: Record<string, DashboardtypesPanelDTO> = {
+	A: makePanel('Panel A', "service = 'alpha'"),
+	B: makePanel('Panel B', "service = 'bravo'"),
+};
+
+const panelOf = (json: string): string => {
+	if (json.includes('alpha')) {
+		return 'A';
+	}
+	if (json.includes('bravo')) {
+		return 'B';
+	}
+	return 'none';
+};
+
+/** Every render of the open modal, so a single stale frame can't hide. */
+const renders: { current: string; draft: string; filterItems: number }[] = [];
+
+const stagedIds: (string | undefined)[] = [];
+
+function ModalBody({ panelId }: { panelId: string }): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const { draft } = useViewPanelMode({
+		panel: PANELS[panelId],
+		panelId,
+		time: { startMs: 0, endMs: 1000 },
+	});
+	renders.push({
+		current: panelOf(JSON.stringify(currentQuery)),
+		draft: panelOf(JSON.stringify(draft.spec.queries)),
+		filterItems: currentQuery.builder.queryData[0]?.filters?.items.length ?? 0,
+	});
+	return <div data-testid="modal-body" />;
+}
+
+function SearchProbe(): JSX.Element {
+	return <div data-testid="search">{useLocation().search}</div>;
+}
+
+function StagedQueryProbe(): null {
+	const { stagedQuery } = useQueryBuilder();
+	if (stagedIds.at(-1) !== stagedQuery?.id) {
+		stagedIds.push(stagedQuery?.id);
+	}
+	return null;
+}
+
+const drilldownQuery = (base: Query): Query => ({
+	...base,
+	builder: {
+		...base.builder,
+		queryData: base.builder.queryData.map((q) => ({
+			...q,
+			filter: { expression: "service = 'bravo' AND host = 'h1'" },
+		})),
+	},
+});
+
+function Harness(): JSX.Element {
+	const { expandedPanelId, openView, openViewWithQuery, closeView } =
+		useViewPanel();
+	return (
+		<>
+			<button
+				type="button"
+				data-testid="open-a"
+				onClick={(): void => openView('A', PANELS.A)}
+			>
+				open A
+			</button>
+			<button
+				type="button"
+				data-testid="open-b"
+				onClick={(): void => openView('B', PANELS.B)}
+			>
+				open B
+			</button>
+			<button
+				type="button"
+				data-testid="drilldown-b"
+				onClick={(): void =>
+					openViewWithQuery(
+						'B',
+						drilldownQuery(
+							fromPerses(PANELS.B.spec.queries, PANEL_TYPES.TIME_SERIES),
+						),
+						PANEL_TYPES.TIME_SERIES,
+					)
+				}
+			>
+				drilldown B
+			</button>
+			<button type="button" data-testid="close" onClick={closeView}>
+				close
+			</button>
+			<StagedQueryProbe />
+			<SearchProbe />
+			{expandedPanelId && <ModalBody panelId={expandedPanelId} />}
+		</>
+	);
+}
+
+const renderHarness = (): void => {
+	render(
+		<MemoryRouter initialEntries={['/dashboard/dash-1']}>
+			<CompatRouter>
+				<QueryBuilderProvider>
+					<Harness />
+				</QueryBuilderProvider>
+			</CompatRouter>
+		</MemoryRouter>,
+	);
+};
+
+describe('useViewPanel', () => {
+	beforeEach(() => {
+		renders.length = 0;
+		stagedIds.length = 0;
+	});
+
+	// The builder context is global and outlives the modal; its fields seed themselves
+	// on mount, so a late swap leaves them on the previously-viewed panel.
+	it('seeds the builder with the opened panel before the modal renders', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('open-b'));
+
+		expect(renders.length).toBeGreaterThan(0);
+		expect(renders.every((r) => r.current === 'B')).toBe(true);
+	});
+
+	it("carries the opened panel's query in the URL", async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-b'));
+
+		const search = new URLSearchParams(
+			screen.getByTestId('search').textContent ?? '',
+		);
+		expect(search.get(QueryParams.expandedWidgetId)).toBe('B');
+		const carried = search.get(QueryParams.compositeQuery);
+		expect(panelOf(decodeURIComponent(carried as string))).toBe('B');
+		expect(search.get(QueryParams.graphType)).toBeNull();
+	});
+
+	// The edit session commits any staged query on mount, so a staged query left over
+	// from the previous panel would make this panel's preview fetch the old query.
+	it('never lets the previous panel query reach the new panel draft', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('open-b'));
+
+		expect(renders.every((r) => r.draft === 'B')).toBe(true);
+	});
+
+	// The drilldown URL carries the query's own id, so a staged query with that id makes
+	// the provider skip hydration — losing the normalisation that fills `filters.items`.
+	it('still lets the provider hydrate a drilldown query from the URL', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		renderHarness();
+
+		await user.click(screen.getByTestId('open-a'));
+		await user.click(screen.getByTestId('close'));
+
+		renders.length = 0;
+		await user.click(screen.getByTestId('drilldown-b'));
+
+		expect(renders.every((r) => r.current === 'B')).toBe(true);
+		expect(renders.at(-1)?.filterItems).toBeGreaterThan(0);
+	});
+
+	// `useSyncTimeOnStagedQueryChange` (dashboard toolbar) re-anchors global time when one
+	// non-null staged id replaces another, refetching every panel behind the modal.
+	it.each([['open-b'], ['drilldown-b']])(
+		'never swaps one staged query for another (%s)',
+		async (trigger) => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			renderHarness();
+
+			await user.click(screen.getByTestId('open-a'));
+			await user.click(screen.getByTestId('close'));
+			await user.click(screen.getByTestId(trigger));
+
+			const swapsWithoutNull = stagedIds.some(
+				(id, i) => i > 0 && id !== undefined && stagedIds[i - 1] !== undefined,
+			);
+			expect(swapsWithoutNull).toBe(false);
+		},
+	);
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useViewPanel.ts

@@ -1,11 +1,14 @@
 import { useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import logEvent from 'api/common/logEvent';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { QueryParams } from 'constants/query';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
+import { getPanelBuilderQuery } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelBuilderQuery';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
@@ -13,8 +16,8 @@ import { clearViewPanelHandoff } from '../ViewPanelModal/viewPanelHandoffStore';
 export interface UseViewPanelApi {
 	/** Panel id currently expanded in the View modal; null when none is open. */
 	expandedPanelId: string | null;
-	/** Open the View modal on the saved panel (clears any leftover in-modal query/kind). */
-	openView: (panelId: string) => void;
+	/** Open the View modal on the saved panel, its query carried in `compositeQuery`. */
+	openView: (panelId: string, panel: DashboardtypesPanelDTO) => void;
 	/**
 	 * Open the View modal pre-seeded with a drilldown query + kind, persisted in the URL so it
 	 * survives refresh (V1 parity); the modal hydrates its draft from these on mount.
@@ -30,30 +33,38 @@ export interface UseViewPanelApi {
 
 /**
  * Drives the panel View modal off the URL (V1 parity): `expandedWidgetId` holds the open
- * panel, and a drilldown additionally seeds `compositeQuery` + `graphType`. URL-backed state
- * is shareable, survives refresh, and the browser back-button closes it.
+ * panel and `compositeQuery` the query it opens on, which a drilldown retargets along with
+ * `graphType`. URL-backed state is shareable, survives refresh, and browser Back closes it.
  */
 export function useViewPanel(): UseViewPanelApi {
 	const { safeNavigate } = useSafeNavigate();
 	const { pathname } = useLocation();
 	const urlQuery = useUrlQuery();
+	const { resetQuery } = useQueryBuilder();
 
 	const expandedPanelId = urlQuery.get(QueryParams.expandedWidgetId);
 
 	const openView = useCallback(
-		(panelId: string): void => {
+		(panelId: string, panel: DashboardtypesPanelDTO): void => {
 			// Copy before mutating: useUrlQuery returns a memoized instance.
 			const next = new URLSearchParams(urlQuery);
 			next.set(QueryParams.expandedWidgetId, panelId);
-			// Drop leftover in-modal query/kind + the editor's handoff so a plain View opens
-			// on the saved panel, not stale state the modal would otherwise hydrate from.
-			next.delete(QueryParams.compositeQuery);
+			// Only a drilldown retargets the panel type.
 			next.delete(QueryParams.graphType);
 			clearViewPanelHandoff();
+			const query = getPanelBuilderQuery(panel);
+			next.set(
+				QueryParams.compositeQuery,
+				encodeURIComponent(JSON.stringify(query)),
+			);
+			// The provider applies the URL in an effect, a tick after the builder's fields have
+			// mounted and read the query they keep. `resetQuery` — not `initQueryBuilderData`:
+			// swapping one staged id for another re-anchors global time and refetches the grid.
+			resetQuery(query);
 			void logEvent(DashboardDetailEvents.PanelViewed, { panelId });
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
-		[pathname, safeNavigate, urlQuery],
+		[pathname, safeNavigate, urlQuery, resetQuery],
 	);
 
 	const openViewWithQuery = useCallback(
@@ -63,6 +74,10 @@ export function useViewPanel(): UseViewPanelApi {
 			next.set(QueryParams.graphType, panelType);
 			// A grid drilldown opens on the saved panel, never a stale editor handoff.
 			clearViewPanelHandoff();
+			// As in `openView`. Clearing the staged query matters twice over here: the URL
+			// below carries this query's own id, and a staged query with a matching id
+			// makes the provider skip the hydration that normalises legacy filter fields.
+			resetQuery(query);
 			// Same encoding the query builder uses (see `useGetCompositeQueryParam`): the URL
 			// value is `encodeURIComponent(JSON.stringify(query))`, decoded once on read.
 			next.set(
@@ -71,7 +86,7 @@ export function useViewPanel(): UseViewPanelApi {
 			);
 			safeNavigate(`${pathname}?${next.toString()}`);
 		},
-		[pathname, safeNavigate, urlQuery],
+		[pathname, safeNavigate, urlQuery, resetQuery],
 	);
 
 	const closeView = useCallback((): void => {

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -13,6 +13,7 @@ import { TOOLTIP_SCROLL_CONTENT_CLASS } from 'components/TooltipScrollArea/Toolt
 
 import HiddenVariablesTooltip from './components/HiddenVariablesTooltip/HiddenVariablesTooltip';
 import { useVariableSelection } from './hooks/useVariableSelection';
+import { resolveDefaultSelection } from './utils/resolveVariableSelection';
 import VariableSelector from './components/VariableSelector/VariableSelector';
 import styles from './VariablesBar.module.scss';
 
@@ -96,12 +97,10 @@ function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
 							variable={variable}
 							variables={variables}
 							selections={selection}
-							selection={
-								selection[variable.name] ?? {
-									value: variable.multiSelect ? [] : '',
-									allSelected: false,
-								}
-							}
+							// Until the seed commits a selection, stand in the same default it will
+							// commit, through the one resolver — an empty stand-in reads as "nothing
+							// selected" to a control that snapshots it on mount.
+							selection={selection[variable.name] ?? resolveDefaultSelection(variable)}
 							onChange={(next): void => setSelection(variable.name, next)}
 							onAutoSelect={(next): void => autoSelect(variable.name, next)}
 						/>

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/TextSelector.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import type { VariableSelection } from '../selectionTypes';
+import TextSelector from '../components/selectors/TextSelector';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+function renderSelector(
+	selection: VariableSelection,
+	onChange = jest.fn(),
+): { rerender: (selection: VariableSelection) => void; onChange: jest.Mock } {
+	const { rerender } = render(
+		<TextSelector
+			selection={selection}
+			defaultValue="flower"
+			onChange={onChange}
+			testId="variable-input-service"
+		/>,
+	);
+	return {
+		onChange,
+		rerender: (next): void =>
+			rerender(
+				<TextSelector
+					selection={next}
+					defaultValue="flower"
+					onChange={onChange}
+					testId="variable-input-service"
+				/>,
+			),
+	};
+}
+
+function input(): HTMLInputElement {
+	return screen.getByTestId('variable-input-service') as HTMLInputElement;
+}
+
+describe('TextSelector', () => {
+	it('shows the value the seed commits after mount', () => {
+		// The bar mounts before the seed resolves the definition's default, so the first
+		// render sees nothing selected. The box must follow the value once it lands.
+		const { rerender } = renderSelector({ value: '', allSelected: false });
+
+		rerender({ value: 'flower', allSelected: false });
+
+		expect(input().value).toBe('flower');
+	});
+
+	it('follows a selection replaced from outside (share link, reset)', () => {
+		const { rerender } = renderSelector({ value: 'flower', allSelected: false });
+
+		rerender({ value: 'rose', allSelected: false });
+
+		expect(input().value).toBe('rose');
+	});
+
+	it('keeps what the user types until they commit it', async () => {
+		const user = userEvent.setup();
+		const { onChange } = renderSelector({ value: 'flower', allSelected: false });
+
+		await user.clear(input());
+		await user.type(input(), 'tulip');
+
+		// Still local — a keystroke must not cascade to dependent panels.
+		expect(input().value).toBe('tulip');
+		expect(onChange).not.toHaveBeenCalled();
+
+		await user.tab();
+		expect(onChange).toHaveBeenCalledWith({
+			value: 'tulip',
+			allSelected: false,
+		});
+	});
+
+	it('restores the default when emptied', async () => {
+		const user = userEvent.setup();
+		const { onChange } = renderSelector({ value: 'tulip', allSelected: false });
+
+		await user.clear(input());
+		await user.tab();
+
+		expect(onChange).toHaveBeenCalledWith({
+			value: 'flower',
+			allSelected: false,
+		});
+		expect(input().value).toBe('flower');
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/ValueSelector.test.tsx

@@ -87,4 +87,99 @@ describe('ValueSelector', () => {
 
 		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
+
+	describe('an ALL selection whose options are still loading', () => {
+		it('reads ALL, not the "Select value" placeholder', () => {
+			// Options arrive after the selection is known (first fetch, or a dynamic ALL,
+			// which carries no values at all) — the control must not read as unselected.
+			renderSelector({ value: null, allSelected: true }, [], true);
+
+			expect(
+				document.querySelector('.ant-select-selection-placeholder'),
+			).toHaveTextContent('ALL');
+		});
+
+		it('still shows concrete values while options load', () => {
+			renderSelector(
+				{ value: ['checkout-service-prod'], allSelected: false },
+				[],
+				true,
+			);
+
+			expect(
+				document.querySelector('.ant-select-selection-placeholder'),
+			).toBeNull();
+		});
+	});
+
+	describe('clearing', () => {
+		function clearIcon(): Element | null {
+			return document.querySelector('.ant-select-clear');
+		}
+
+		async function openDropdown(): Promise<void> {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			const control = screen.getByTestId('variable-select-env');
+			await user.click(control.querySelector('input') as HTMLInputElement);
+		}
+
+		it('offers no clear icon while the list is closed', () => {
+			renderSelector({ value: VALUES, allSelected: false }, OPTIONS);
+
+			expect(clearIcon()).toBeNull();
+		});
+
+		it('offers it once the list is open', async () => {
+			renderSelector({ value: VALUES, allSelected: false }, OPTIONS);
+
+			await openDropdown();
+
+			expect(clearIcon()).not.toBeNull();
+		});
+
+		it('offers no clear icon while every option is selected', async () => {
+			// ALL is every option, so there is nothing to clear — and the shared control
+			// refuses to empty an ALL selection, which would leave the icon inert.
+			renderSelector({ value: OPTIONS, allSelected: true }, OPTIONS);
+
+			await openDropdown();
+
+			expect(clearIcon()).toBeNull();
+		});
+
+		it('empties the list and commits nothing until it closes', async () => {
+			const onChange = jest.fn();
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			render(
+				<TooltipProvider>
+					<ValueSelector
+						options={OPTIONS}
+						variableType="query"
+						multiSelect
+						showAllOption
+						selection={{ value: VALUES, allSelected: false }}
+						onChange={onChange}
+						emptyFallback={{ value: [OPTIONS[0]], allSelected: false }}
+						testId="variable-select-env"
+					/>
+				</TooltipProvider>,
+			);
+
+			await openDropdown();
+			await user.click(clearIcon() as Element);
+
+			expect(document.querySelectorAll('.ant-select-selection-item')).toHaveLength(
+				0,
+			);
+			expect(onChange).not.toHaveBeenCalled();
+
+			// Closing fills in whatever the variable should hold.
+			await user.keyboard('{Escape}');
+
+			expect(onChange).toHaveBeenCalledWith({
+				value: [OPTIONS[0]],
+				allSelected: false,
+			});
+		});
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useAutoSelect.test.tsx

@@ -61,6 +61,47 @@ describe('useAutoSelect', () => {
 		expect(next).toBeUndefined();
 	});
 
+	it('selects ALL for an ALL-enabled multi-select with nothing selected', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
+			['a', 'b'],
+			{ value: [], allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: ['a', 'b'], allSelected: true });
+	});
+
+	it('falls back to ALL, not the first option, when every selected value is gone', () => {
+		const next = run(
+			model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
+			['x', 'y'],
+			{ value: ['a', 'b'], allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: ['x', 'y'], allSelected: true });
+	});
+
+	it('selects the ALL sentinel for an empty ALL-enabled dynamic multi-select', () => {
+		const next = run(
+			model({ type: 'DYNAMIC', multiSelect: true, showAllOption: true }),
+			['a', 'b'],
+			{ value: [], allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: null, allSelected: true });
+	});
+
+	it('still honours a configured default over ALL', () => {
+		const next = run(
+			model({
+				type: 'QUERY',
+				multiSelect: true,
+				showAllOption: true,
+				defaultValue: 'b',
+			}),
+			['a', 'b'],
+			{ value: [], allSelected: false },
+		);
+		expect(next).toStrictEqual({ value: ['b'], allSelected: false });
+	});
+
 	it('keeps the still-valid subset of a multi-select when options re-scope', () => {
 		const next = run(
 			model({ type: 'QUERY', multiSelect: true }),

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useSeedVariableSelection.test.tsx

@@ -97,6 +97,125 @@ describe('useSeedVariableSelection', () => {
 		});
 	});
 
+	it('prefers the configured default over a stored empty text value', () => {
+		// Persisted from a session where the box was never filled — the default the
+		// definition carries must win, or the variable reads as unset forever.
+		useDashboardStore
+			.getState()
+			.setVariableValues('d1', { env: { value: '', allSelected: false } });
+		const dash = dashboard('d1', [
+			model({ name: 'env', type: 'TEXT', textValue: 'prod' }),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: 'prod',
+			allSelected: false,
+		});
+	});
+
+	it('defaults an ALL-enabled multi-select to ALL over a stored empty array', () => {
+		useDashboardStore
+			.getState()
+			.setVariableValues('d1', { env: { value: [], allSelected: false } });
+		const dash = dashboard('d1', [
+			model({
+				name: 'env',
+				type: 'CUSTOM',
+				customValue: 'a,b',
+				multiSelect: true,
+				showAllOption: true,
+			}),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		// Custom options need no request, so ALL is materialized here rather than left as
+		// a flag for the post-fetch reconcile to expand.
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: ['a', 'b'],
+			allSelected: true,
+		});
+	});
+
+	it('materializes ALL for a custom variable so nothing has to reconcile it later', () => {
+		const dash = dashboard('d1', [
+			model({
+				name: 'env',
+				type: 'CUSTOM',
+				customValue: 'a,b,c',
+				multiSelect: true,
+				showAllOption: true,
+			}),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: ['a', 'b', 'c'],
+			allSelected: true,
+		});
+	});
+
+	it('drops values a custom variable no longer offers, at seed time', () => {
+		useDashboardStore.getState().setVariableValues('d1', {
+			env: { value: ['a', 'gone'], allSelected: false },
+		});
+		const dash = dashboard('d1', [
+			model({
+				name: 'env',
+				type: 'CUSTOM',
+				customValue: 'a,b',
+				multiSelect: true,
+			}),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: ['a'],
+			allSelected: false,
+		});
+	});
+
+	it('keeps a stored ALL selection that has not materialized yet', () => {
+		useDashboardStore
+			.getState()
+			.setVariableValues('d1', { env: { value: null, allSelected: true } });
+		const dash = dashboard('d1', [
+			model({
+				name: 'env',
+				type: 'QUERY',
+				multiSelect: true,
+				showAllOption: true,
+				defaultValue: 'b',
+			}),
+		]);
+
+		renderHook(() => useSeedVariableSelection(dash));
+
+		expect(seededValue('d1', 'env')).toStrictEqual({
+			value: null,
+			allSelected: true,
+		});
+	});
+
+	it('does not rewrite the store when the effect re-runs with the same values', () => {
+		// A dashboard refetch or any spec edit hands back an equal-but-new variables array,
+		// re-running the seed. Writing an identical map would re-render every subscriber.
+		const variable = model({ name: 'env', type: 'TEXT', textValue: 'prod' });
+		const { rerender } = renderHook(
+			({ dash }) => useSeedVariableSelection(dash),
+			{ initialProps: { dash: dashboard('d1', [variable]) } },
+		);
+		const afterSeed = useDashboardStore.getState().variableValues;
+
+		rerender({ dash: dashboard('d1', [{ ...variable }]) });
+
+		expect(useDashboardStore.getState().variableValues).toBe(afterSeed);
+	});
+
 	it('initializes the fetch context with idle states for every variable', () => {
 		const dash = dashboard('d1', [
 			model({ name: 'env', type: 'TEXT' }),

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/__tests__/useVariableSelection.test.tsx

@@ -0,0 +1,152 @@
+import { act, renderHook } from '@testing-library/react';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import {
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from '../../DashboardSettings/Variables/variableFormModel';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useVariableSelection } from '../hooks/useVariableSelection';
+
+jest.mock('nuqs', () => ({
+	parseAsJson: (): unknown => ({ withOptions: (): unknown => ({}) }),
+	useQueryState: (): unknown => [null, jest.fn()],
+}));
+
+jest.mock('react-redux', () => ({
+	useSelector: (selector: (state: unknown) => unknown): unknown =>
+		selector({
+			globalTime: { minTime: 1, maxTime: 2, selectedTime: '5m' },
+		}),
+}));
+
+jest.mock('../../DashboardSettings/Variables/variableAdapters', () => ({
+	dtoToFormModel: (dto: unknown): unknown => dto,
+}));
+
+function model(overrides: Partial<VariableFormModel>): VariableFormModel {
+	return { ...emptyVariableFormModel(), ...overrides };
+}
+
+// env → svc, so a cascade off `env` is observable as a cycle bump on `svc`.
+const env = model({
+	name: 'env',
+	type: 'QUERY',
+	multiSelect: true,
+	queryValue: 'SELECT env',
+});
+const svc = model({
+	name: 'svc',
+	type: 'QUERY',
+	queryValue: 'SELECT svc WHERE env = $env',
+});
+
+const dashboard = {
+	id: 'd1',
+	spec: { variables: [env, svc] },
+} as unknown as DashboardtypesGettableDashboardV2DTO;
+
+function svcCycleId(): number {
+	return useDashboardStore.getState().variableCycleIds.svc ?? 0;
+}
+
+describe('useVariableSelection — setSelection', () => {
+	beforeEach(() => {
+		useDashboardStore.setState({
+			variableValues: {},
+			variableFetchStates: {},
+			variableLastUpdated: {},
+			variableCycleIds: {},
+			variableResolvedEmpty: {},
+			variableFetchContext: null,
+			lastFetchAllKey: null,
+		});
+	});
+
+	it('does not re-cascade when the picked value is the one already held', () => {
+		const { result } = renderHook(() => useVariableSelection(dashboard));
+
+		act(() => {
+			result.current.setSelection('env', {
+				value: ['a', 'b'],
+				allSelected: false,
+			});
+		});
+		const afterFirstPick = svcCycleId();
+
+		// Same values, then the same set in a different order: neither is a change, so
+		// the dependent must not be re-fetched.
+		act(() => {
+			result.current.setSelection('env', {
+				value: ['a', 'b'],
+				allSelected: false,
+			});
+		});
+		act(() => {
+			result.current.setSelection('env', {
+				value: ['b', 'a'],
+				allSelected: false,
+			});
+		});
+
+		expect(svcCycleId()).toBe(afterFirstPick);
+	});
+
+	it('ignores an auto-fill that the store already satisfies', async () => {
+		const { result } = renderHook(() => useVariableSelection(dashboard));
+		act(() => {
+			result.current.setSelection('env', { value: ['a'], allSelected: false });
+		});
+		const before = svcCycleId();
+
+		// What a selector's first-render reconcile produces before the seed commits: a
+		// value the store then resolves to on its own.
+		await act(async () => {
+			result.current.autoSelect('env', { value: ['a'], allSelected: false });
+			await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+		});
+
+		expect(svcCycleId()).toBe(before);
+	});
+
+	it('still applies an auto-fill that changes the value', async () => {
+		const { result } = renderHook(() => useVariableSelection(dashboard));
+		act(() => {
+			result.current.setSelection('env', { value: ['a'], allSelected: false });
+		});
+		const before = svcCycleId();
+
+		await act(async () => {
+			result.current.autoSelect('env', { value: ['a', 'b'], allSelected: false });
+			await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+		});
+
+		expect(useDashboardStore.getState().variableValues.d1?.env).toStrictEqual({
+			value: ['a', 'b'],
+			allSelected: false,
+		});
+		expect(svcCycleId()).toBe(before + 1);
+	});
+
+	it('still cascades a genuine change', () => {
+		const { result } = renderHook(() => useVariableSelection(dashboard));
+
+		act(() => {
+			result.current.setSelection('env', { value: ['a'], allSelected: false });
+		});
+		const before = svcCycleId();
+
+		act(() => {
+			result.current.setSelection('env', {
+				value: ['a', 'c'],
+				allSelected: false,
+			});
+		});
+
+		expect(useDashboardStore.getState().variableValues.d1?.env).toStrictEqual({
+			value: ['a', 'c'],
+			allSelected: false,
+		});
+		expect(svcCycleId()).toBe(before + 1);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/components/VariableSelector/VariableSelector.tsx

@@ -9,6 +9,7 @@ import type {
 	VariableSelection,
 	VariableSelectionMap,
 } from '../../selectionTypes';
+import { textDefault } from '../../utils/resolveVariableSelection';
 import { computeVariableDependencies } from '../../utils/variableDependencies';
 import TextSelector from '../selectors/TextSelector';
 import VariableValueControl from '../selectors/VariableValueControl';
@@ -65,7 +66,7 @@ function VariableSelector({
 		variable.type === 'TEXT' ? (
 			<TextSelector
 				selection={selection}
-				defaultValue={variable.textValue}
+				defaultValue={textDefault(variable)}
 				onChange={onChange}
 				testId={`variable-input-${variable.name}`}
 			/>

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/components/selectors/TextSelector.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { InputRef } from 'antd';
 // eslint-disable-next-line signoz/no-antd-components -- match V1 textbox behaviour (commit on blur/Enter, borderless)
 import { Input } from 'antd';
@@ -31,6 +31,17 @@ function TextSelector({
 		typeof selection.value === 'string' ? selection.value : (defaultValue ?? ''),
 	);
 
+	// The committed value can land after this input mounts — the seed resolves the
+	// definition's default one tick later, and a share link or a reset can replace it
+	// at any point. Without following it the box would keep showing its first render
+	// (empty, since nothing is seeded yet) until the user focused and blurred it.
+	// Typing never touches the selection, so an edit in progress cannot be interrupted.
+	useEffect(() => {
+		setValue(
+			typeof selection.value === 'string' ? selection.value : (defaultValue ?? ''),
+		);
+	}, [selection.value, defaultValue]);
+
 	const commit = useCallback(
 		(next: string): void => {
 			void logEvent(

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/components/selectors/ValueSelector.tsx

@@ -54,11 +54,26 @@ function ValueSelector({
 		[selection, options],
 	);
 
+	// That "all" path needs the options, so an ALL selection whose options have not
+	// arrived yet has nothing to render and the control would read "Select value"
+	// while it spins — as if nothing were selected. Say ALL in that slot instead: the
+	// selection is known, only its options are pending. Display only, so it can never
+	// be committed as a value.
+	const isAllPendingOptions = selection.allSelected && options.length === 0;
+
 	// Buffer edits while the dropdown is open; the committed selection is shown
 	// when closed. This defers the dependent cascade to a single commit-on-close.
 	const [isOpen, setIsOpen] = useState(false);
 	const [draft, setDraft] = useState<string[]>(committedValues);
 
+	// ALL is every option, so there is nothing to clear — and the shared control refuses
+	// to empty an ALL selection anyway, which would leave the icon inert. Unchecking ALL
+	// in the list is the way out of it.
+	const draftIsAll =
+		showAllOption &&
+		options.length > 0 &&
+		options.every((option) => draft.includes(option));
+
 	const commit = (values: string[]): void => {
 		// CustomMultiSelect emits the full value set when ALL is picked.
 		const isAll =
@@ -94,8 +109,11 @@ function ValueSelector({
 				errorMessage={errorMessage}
 				onRetry={onRetry}
 				showSearch
-				allowClear
-				placeholder="Select value"
+				// Clearing belongs to the open list: on the closed control the icon would
+				// appear on hover, in a row of variable pills, for an action whose result is
+				// not visible.
+				allowClear={isOpen && !draftIsAll}
+				placeholder={isAllPendingOptions ? 'ALL' : 'Select value'}
 				maxTagCount={1}
 				maxTagTextLength={10}
 				maxTagPlaceholder={(omitted): JSX.Element => (
@@ -129,12 +147,10 @@ function ValueSelector({
 					void logEvent(DashboardDetailEvents.VariableMultiSelectCleared, {
 						variableType,
 					});
+					// Empties the list, committing nothing. Closing resolves an empty draft
+					// to whatever the variable should hold — its configured default, else ALL
+					// where it offers one, else the first option.
 					setDraft([]);
-					// A clear on the closed control falls back to the default immediately;
-					// while open it just empties the draft (committed on close).
-					if (!isOpen) {
-						onChange(emptyFallback);
-					}
 				}}
 			/>
 		);

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/hooks/useSeedVariableSelection.ts

@@ -6,7 +6,13 @@ import { dtoToFormModel } from '../../DashboardSettings/Variables/variableAdapte
 import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
 import { selectVariableValues } from '../../store/slices/variableSelectionSlice';
 import { useDashboardStore } from '../../store/useDashboardStore';
-import { resolveDefaultSelection } from '../utils/resolveVariableSelection';
+import { knownVariableOptions } from '../utils/knownVariableOptions';
+import {
+	areSelectionsEqual,
+	reconcileWithOptions,
+	resolveDefaultSelection,
+} from '../utils/resolveVariableSelection';
+import { hasUsableValue } from '../utils/selectionUtils';
 import type {
 	SelectedVariableValue,
 	VariableSelection,
@@ -18,6 +24,44 @@ import {
 } from '../utils/variableDependencies';
 import { ALL_SELECTED, variablesUrlParser } from '../utils/variablesUrlState';
 
+function isStoredSelectionSet(
+	stored: VariableSelection,
+	model: VariableFormModel,
+): boolean {
+	return !!stored.allSelected || hasUsableValue(stored, model.type);
+}
+
+/** Whether the seeded map matches, entry for entry, what the store already holds. */
+function isSameSelection(
+	seeded: VariableSelectionMap,
+	current: VariableSelectionMap,
+): boolean {
+	const names = Object.keys(seeded);
+	return (
+		names.length === Object.keys(current).length &&
+		names.every(
+			(name) => !!current[name] && areSelectionsEqual(seeded[name], current[name]),
+		)
+	);
+}
+
+/**
+ * A seeded value taken as far as it can go: for a variable whose options need no
+ * request, resolve against them now — ALL becomes the concrete array, values the list
+ * no longer offers are dropped. Left alone otherwise; the post-fetch reconcile does it
+ * once the options arrive.
+ */
+function resolveAgainstKnownOptions(
+	value: VariableSelection,
+	model: VariableFormModel,
+): VariableSelection {
+	const options = knownVariableOptions(model);
+	if (options.length === 0) {
+		return value;
+	}
+	return reconcileWithOptions(model, value, options) ?? value;
+}
+
 // The `__ALL__` sentinel only means "ALL" for variables that support it — a
 // legitimate value of "__ALL__" (e.g. a text var) is taken literally.
 function fromUrlValue(
@@ -70,22 +114,31 @@ export function useSeedVariableSelection(
 		variables.forEach((variable) => {
 			const urlValue = urlValues?.[variable.name];
 			const stored = selection[variable.name];
+			const seed = (value: VariableSelection): void => {
+				seeded[variable.name] = resolveAgainstKnownOptions(value, variable);
+			};
 			if (urlValue !== undefined) {
 				const fromUrl = fromUrlValue(urlValue, variable);
 				// When the URL carries only the ALL sentinel but the store already holds
 				// the materialized full-option array, reuse it — avoids the re-fetch +
 				// re-materialize round-trip (and its dependent-refetch cascade) on load.
-				seeded[variable.name] =
+				seed(
 					fromUrl.allSelected && stored?.allSelected && Array.isArray(stored.value)
 						? stored
-						: fromUrl;
-			} else if (stored) {
-				seeded[variable.name] = stored;
+						: fromUrl,
+				);
+			} else if (stored && isStoredSelectionSet(stored, variable)) {
+				seed(stored);
 			} else {
-				seeded[variable.name] = resolveDefaultSelection(variable);
+				seed(resolveDefaultSelection(variable));
 			}
 		});
-		setVariableValues(dashboardId, seeded);
+		// This runs again whenever the spec's variable array changes identity — a refetch
+		// or any spec edit — and writing an identical map would re-render every selection
+		// subscriber for nothing.
+		if (!isSameSelection(seeded, selection)) {
+			setVariableValues(dashboardId, seeded);
+		}
 
 		// Read-once: a share link's `?variables=` seeds the store, then the param is
 		// dropped so the store is the sole source of truth. Selection changes never

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/hooks/useVariableOptions.ts

@@ -1,14 +1,11 @@
 import { useEffect, useMemo } from 'react';
 import logEvent from 'api/common/logEvent';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
 import { DashboardDetailEvents } from 'pages/DashboardPageV2/constants/events';
 
-import {
-	sortValuesByOrder,
-	VARIABLE_TYPE_EVENT_LABEL,
-} from '../../DashboardSettings/Variables/variableFormModel';
+import { VARIABLE_TYPE_EVENT_LABEL } from '../../DashboardSettings/Variables/variableFormModel';
 import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
 import type { VariableSelectionMap } from '../selectionTypes';
+import { knownVariableOptions } from '../utils/knownVariableOptions';
 import {
 	useFetchedVariableOptions,
 	type VariableOptions,
@@ -30,14 +27,12 @@ export function useVariableOptions(
 ): VariableOptions {
 	const fetched = useFetchedVariableOptions(variable, variables, selections);
 
+	// Keyed on the fields the parse actually reads, not the model identity: a dashboard
+	// refetch hands back an equal-but-new model, and a new options array would re-fire
+	// the post-fetch reconcile for nothing.
 	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValuesByOrder(
-						commaValuesParser(variable.customValue),
-						variable.sort,
-					).map(String)
-				: ([] as string[]),
+		() => knownVariableOptions(variable),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[variable.type, variable.customValue, variable.sort],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/hooks/useVariableSelection.ts

@@ -12,6 +12,7 @@ import type {
 	VariableSelection,
 	VariableSelectionMap,
 } from '../selectionTypes';
+import { areSelectionsEqual } from '../utils/resolveVariableSelection';
 import { useSeedVariableSelection } from './useSeedVariableSelection';
 
 /**
@@ -103,6 +104,10 @@ export function useVariableSelection(
 
 	const setSelection = useCallback(
 		(name: string, next: VariableSelection): void => {
+			const current = selectionRef.current[name];
+			if (current && areSelectionsEqual(next, current)) {
+				return;
+			}
 			setVariableValue(dashboardId, name, next);
 			enqueueDescendants(name);
 		},
@@ -124,8 +129,19 @@ export function useVariableSelection(
 		if (names.length === 0 || !dashboardId) {
 			return;
 		}
-		setVariableValues(dashboardId, { ...selectionRef.current, ...fills });
-		enqueueDescendantsBatch(names);
+		// A fill can arrive already satisfied: a selector reconciles against the options
+		// on its first render, before the seed has committed, and the seed then resolves
+		// to the same value. Refresh only what actually moved, so a settled load ends
+		// without a write or a dependent refetch.
+		const current = selectionRef.current;
+		const changed = names.filter(
+			(name) => !current[name] || !areSelectionsEqual(fills[name], current[name]),
+		);
+		if (changed.length === 0) {
+			return;
+		}
+		setVariableValues(dashboardId, { ...current, ...fills });
+		enqueueDescendantsBatch(changed);
 	}, [dashboardId, setVariableValues, enqueueDescendantsBatch]);
 
 	const autoSelect = useCallback(

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/utils/knownVariableOptions.ts

@@ -0,0 +1,23 @@
+import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
+
+import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
+import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
+
+/**
+ * The options of a variable whose list needs no request — a CUSTOM variable's comma
+ * list. Empty for QUERY and DYNAMIC, whose options only exist once fetched, and for
+ * TEXT, which has none.
+ *
+ * Knowing them up front lets the seed resolve such a variable's value completely
+ * (materializing ALL, dropping values the list no longer offers) instead of leaving
+ * that to the post-fetch reconcile, which would cost a second store write and a
+ * refetch of everything downstream.
+ */
+export function knownVariableOptions(model: VariableFormModel): string[] {
+	if (model.type !== 'CUSTOM') {
+		return [];
+	}
+	return sortValuesByOrder(commaValuesParser(model.customValue), model.sort).map(
+		String,
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/utils/resolveVariableSelection.ts

@@ -37,7 +37,7 @@ function firstConfiguredDefault(model: VariableFormModel): string | undefined {
 }
 
 /** A TEXT variable's default: its configured default, else its textValue (always a string). */
-function textDefault(model: VariableFormModel): string {
+export function textDefault(model: VariableFormModel): string {
 	return firstConfiguredDefault(model) ?? model.textValue;
 }
 
@@ -53,15 +53,31 @@ function isAllDefault(
 	);
 }
 
-/** The configured default (or first option) as a fresh selection. */
+/**
+ * The default selection for a variable with nothing usable selected: its configured
+ * default, else ALL for an ALL-enabled multi-select, else the first option.
+ */
 function fillDefault(
 	model: VariableFormModel,
 	options: string[],
 ): VariableSelection {
 	const fallback = firstConfiguredDefault(model);
-	const initial = fallback && options.includes(fallback) ? fallback : options[0];
+	if (fallback && options.includes(fallback)) {
+		return {
+			value: model.multiSelect ? [fallback] : fallback,
+			allSelected: false,
+		};
+	}
+
+	// No usable configured default: an ALL-enabled multi-select defaults to ALL, not
+	// to an arbitrary first option — the same default the seed applies (keep in sync
+	// with resolveDefaultSelection).
+	if (model.multiSelect && model.showAllOption) {
+		return materializeAll(model, options, null) ?? ALL_SELECTION;
+	}
+
 	return {
-		value: model.multiSelect ? [initial] : initial,
+		value: model.multiSelect ? [options[0]] : options[0],
 		allSelected: false,
 	};
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useOpenPanelEditor.test.tsx

@@ -1,5 +1,7 @@
 import { renderHook } from '@testing-library/react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime';
+import { EQueryType } from 'types/common/dashboard';
 
 import { useOpenPanelEditor } from '../useOpenPanelEditor';
 
@@ -81,6 +83,37 @@ describe('useOpenPanelEditor', () => {
 		);
 	});
 
+	it("carries the panel's saved query into the editor URL", () => {
+		mockGlobalTime = { selectedTime: '6h', minTime: 0, maxTime: 0 };
+		const panel = {
+			kind: 'Panel',
+			spec: {
+				display: { name: 'Panel A' },
+				plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
+				queries: [
+					{
+						kind: 'time_series',
+						spec: {
+							plugin: {
+								kind: 'signoz/PromQLQuery',
+								spec: { name: 'A', query: 'up{job="alpha"}', disabled: false },
+							},
+						},
+					},
+				],
+			},
+		} as unknown as DashboardtypesPanelDTO;
+
+		const { result } = renderHook(() => useOpenPanelEditor());
+		result.current('panel-9', { panel });
+
+		const [url] = mockSafeNavigate.mock.calls[0];
+		const carried = new URLSearchParams(url.split('?')[1]).get('compositeQuery');
+		const parsed = JSON.parse(decodeURIComponent(carried as string));
+		expect(parsed.queryType).toBe(EQueryType.PROM);
+		expect(parsed.promql[0].query).toBe('up{job="alpha"}');
+	});
+
 	it('merges search with the time window (leading ? tolerated)', () => {
 		mockGlobalTime = { selectedTime: '6h', minTime: 0, maxTime: 0 };
 		const { result } = renderHook(() => useOpenPanelEditor());

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useOpenPanelEditor.ts

@@ -1,9 +1,13 @@
 import { useCallback } from 'react';
 import { generatePath } from 'react-router-dom';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 
 import type { PanelEditorHandoffState } from '../PanelEditor/panelEditorHandoff';
+import { getPanelBuilderQuery } from '../Panels/utils/getPanelBuilderQuery';
 import { useDashboardStore } from '../store/useDashboardStore';
 import { useTimeSearchParams } from './useTimeSearchParams';
 import logEvent from '@/api/common/logEvent';
@@ -13,6 +17,8 @@ interface OpenPanelEditorOptions {
 	handoffState?: PanelEditorHandoffState;
 	/** Extra query merged into the editor URL (leading `?` optional). */
 	search?: string;
+	/** The panel being edited — its query rides in the URL as `compositeQuery`. */
+	panel?: DashboardtypesPanelDTO;
 }
 
 /** Opens the V2 panel editor, carrying the active time window in the URL. */
@@ -23,6 +29,7 @@ export function useOpenPanelEditor(): (
 	const { safeNavigate } = useSafeNavigate();
 	const timeSearch = useTimeSearchParams();
 	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const { resetQuery } = useQueryBuilder();
 
 	return useCallback(
 		(panelId: string, options?: OpenPanelEditorOptions): void => {
@@ -39,12 +46,24 @@ export function useOpenPanelEditor(): (
 			new URLSearchParams(timeSearch).forEach((value, key) => {
 				params.set(key, value);
 			});
+			if (options?.panel) {
+				const query = getPanelBuilderQuery(options.panel);
+				// Single-encoded: `useGetCompositeQueryParam` decodes once on top of the decode
+				// `URLSearchParams` already does.
+				params.set(
+					QueryParams.compositeQuery,
+					encodeURIComponent(JSON.stringify(query)),
+				);
+				// The provider applies the URL in an effect, a tick after the builder's fields
+				// have mounted and read the query they keep (PromQL inputs, add-on rows).
+				resetQuery(query);
+			}
 			const search = params.toString();
 			safeNavigate(
 				search ? `${path}?${search}` : path,
 				options?.handoffState ? { state: options.handoffState } : undefined,
 			);
 		},
-		[safeNavigate, dashboardId, timeSearch],
+		[safeNavigate, dashboardId, timeSearch, resetQuery],
 	);
 }

scripts/promqltestcorpus/go.mod

@@ -70,24 +70,24 @@ require (
 	github.com/x448/float16 v0.8.4 // indirect
 	go.opentelemetry.io/auto/sdk v1.2.1 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0 // indirect
-	go.opentelemetry.io/otel v1.42.0 // indirect
-	go.opentelemetry.io/otel/metric v1.42.0 // indirect
-	go.opentelemetry.io/otel/trace v1.42.0 // indirect
+	go.opentelemetry.io/otel v1.43.0 // indirect
+	go.opentelemetry.io/otel/metric v1.43.0 // indirect
+	go.opentelemetry.io/otel/trace v1.43.0 // indirect
 	go.uber.org/atomic v1.11.0 // indirect
 	go.uber.org/goleak v1.3.0 // indirect
 	go.yaml.in/yaml/v2 v2.4.4 // indirect
-	golang.org/x/crypto v0.49.0 // indirect
+	golang.org/x/crypto v0.50.0 // indirect
 	golang.org/x/exp v0.0.0-20260218203240-3dfff04db8fa // indirect
-	golang.org/x/net v0.52.0 // indirect
+	golang.org/x/net v0.53.0 // indirect
 	golang.org/x/oauth2 v0.36.0 // indirect
 	golang.org/x/sync v0.20.0 // indirect
-	golang.org/x/sys v0.42.0 // indirect
-	golang.org/x/term v0.41.0 // indirect
-	golang.org/x/text v0.35.0 // indirect
+	golang.org/x/sys v0.43.0 // indirect
+	golang.org/x/term v0.42.0 // indirect
+	golang.org/x/text v0.36.0 // indirect
 	golang.org/x/time v0.15.0 // indirect
 	google.golang.org/api v0.272.0 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20260311181403-84a4fc48630c // indirect
-	google.golang.org/grpc v1.79.3 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478 // indirect
+	google.golang.org/grpc v1.82.1 // indirect
 	google.golang.org/protobuf v1.36.11 // indirect
 	gopkg.in/inf.v0 v0.9.1 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect

scripts/promqltestcorpus/go.sum

@@ -74,8 +74,8 @@ github.com/beorn7/perks v1.0.1 h1:VlbKKnNfV8bJzeqoa4cOKqO6bYr3WgKZxO8Z16+hsOM=
 github.com/beorn7/perks v1.0.1/go.mod h1:G2ZrVWU2WbWT9wwq4/hrbKbnv/1ERSJQ0ibhJ6rlkpw=
 github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UFvs=
 github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
-github.com/cncf/xds/go v0.0.0-20251210132809-ee656c7534f5 h1:6xNmx7iTtyBRev0+D/Tv1FZd4SCg8axKApyNyRsAt/w=
-github.com/cncf/xds/go v0.0.0-20251210132809-ee656c7534f5/go.mod h1:KdCmV+x/BuvyMxRnYBlmVaq4OLiKW6iRQfvC62cvdkI=
+github.com/cncf/xds/go v0.0.0-20260202195803-dba9d589def2 h1:aBangftG7EVZoUb69Os8IaYg++6uMOdKK83QtkkvJik=
+github.com/cncf/xds/go v0.0.0-20260202195803-dba9d589def2/go.mod h1:qwXFYgsP6T7XnJtbKlf1HP8AjxZZyzxMmc+Lq5GjlU4=
 github.com/containerd/errdefs v1.0.0 h1:tg5yIfIlQIrxYtu9ajqY42W3lpS19XqdxRQeEwYG8PI=
 github.com/containerd/errdefs v1.0.0/go.mod h1:+YBYIdtsnF4Iw6nWZhJcqGSg/dwvV7tyJ/kCkyJ2k+M=
 github.com/containerd/errdefs/pkg v0.3.0 h1:9IKJ06FvyNlexW690DXuQNx2KA2cUJXx151Xdx3ZPPE=
@@ -355,16 +355,16 @@ go.opentelemetry.io/contrib/instrumentation/net/http/httptrace/otelhttptrace v0.
 go.opentelemetry.io/contrib/instrumentation/net/http/httptrace/otelhttptrace v0.67.0/go.mod h1:gO9smoZe9KnZcJCqcB0lMmQ4Z5VEifYmjMTpnwtTSuQ=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0 h1:OyrsyzuttWTSur2qN/Lm0m2a8yqyIjUVBZcxFPuXq2o=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0/go.mod h1:C2NGBr+kAB4bk3xtMXfZ94gqFDtg/GkI7e9zqGh5Beg=
-go.opentelemetry.io/otel v1.42.0 h1:lSQGzTgVR3+sgJDAU/7/ZMjN9Z+vUip7leaqBKy4sho=
-go.opentelemetry.io/otel v1.42.0/go.mod h1:lJNsdRMxCUIWuMlVJWzecSMuNjE7dOYyWlqOXWkdqCc=
-go.opentelemetry.io/otel/metric v1.42.0 h1:2jXG+3oZLNXEPfNmnpxKDeZsFI5o4J+nz6xUlaFdF/4=
-go.opentelemetry.io/otel/metric v1.42.0/go.mod h1:RlUN/7vTU7Ao/diDkEpQpnz3/92J9ko05BIwxYa2SSI=
-go.opentelemetry.io/otel/sdk v1.42.0 h1:LyC8+jqk6UJwdrI/8VydAq/hvkFKNHZVIWuslJXYsDo=
-go.opentelemetry.io/otel/sdk v1.42.0/go.mod h1:rGHCAxd9DAph0joO4W6OPwxjNTYWghRWmkHuGbayMts=
-go.opentelemetry.io/otel/sdk/metric v1.42.0 h1:D/1QR46Clz6ajyZ3G8SgNlTJKBdGp84q9RKCAZ3YGuA=
-go.opentelemetry.io/otel/sdk/metric v1.42.0/go.mod h1:Ua6AAlDKdZ7tdvaQKfSmnFTdHx37+J4ba8MwVCYM5hc=
-go.opentelemetry.io/otel/trace v1.42.0 h1:OUCgIPt+mzOnaUTpOQcBiM/PLQ/Op7oq6g4LenLmOYY=
-go.opentelemetry.io/otel/trace v1.42.0/go.mod h1:f3K9S+IFqnumBkKhRJMeaZeNk9epyhnCmQh/EysQCdc=
+go.opentelemetry.io/otel v1.43.0 h1:mYIM03dnh5zfN7HautFE4ieIig9amkNANT+xcVxAj9I=
+go.opentelemetry.io/otel v1.43.0/go.mod h1:JuG+u74mvjvcm8vj8pI5XiHy1zDeoCS2LB1spIq7Ay0=
+go.opentelemetry.io/otel/metric v1.43.0 h1:d7638QeInOnuwOONPp4JAOGfbCEpYb+K6DVWvdxGzgM=
+go.opentelemetry.io/otel/metric v1.43.0/go.mod h1:RDnPtIxvqlgO8GRW18W6Z/4P462ldprJtfxHxyKd2PY=
+go.opentelemetry.io/otel/sdk v1.43.0 h1:pi5mE86i5rTeLXqoF/hhiBtUNcrAGHLKQdhg4h4V9Dg=
+go.opentelemetry.io/otel/sdk v1.43.0/go.mod h1:P+IkVU3iWukmiit/Yf9AWvpyRDlUeBaRg6Y+C58QHzg=
+go.opentelemetry.io/otel/sdk/metric v1.43.0 h1:S88dyqXjJkuBNLeMcVPRFXpRw2fuwdvfCGLEo89fDkw=
+go.opentelemetry.io/otel/sdk/metric v1.43.0/go.mod h1:C/RJtwSEJ5hzTiUz5pXF1kILHStzb9zFlIEe85bhj6A=
+go.opentelemetry.io/otel/trace v1.43.0 h1:BkNrHpup+4k4w+ZZ86CZoHHEkohws8AY+WTX09nk+3A=
+go.opentelemetry.io/otel/trace v1.43.0/go.mod h1:/QJhyVBUUswCphDVxq+8mld+AvhXZLhe+8WVFxiFff0=
 go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=
 go.uber.org/atomic v1.11.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
 go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
@@ -377,40 +377,40 @@ go.yaml.in/yaml/v2 v2.4.4 h1:tuyd0P+2Ont/d6e2rl3be67goVK4R6deVxCUX5vyPaQ=
 go.yaml.in/yaml/v2 v2.4.4/go.mod h1:gMZqIpDtDqOfM0uNfy0SkpRhvUryYH0Z6wdMYcacYXQ=
 go.yaml.in/yaml/v3 v3.0.4 h1:tfq32ie2Jv2UxXFdLJdh3jXuOzWiL1fo0bu/FbuKpbc=
 go.yaml.in/yaml/v3 v3.0.4/go.mod h1:DhzuOOF2ATzADvBadXxruRBLzYTpT36CKvDb3+aBEFg=
-golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
-golang.org/x/crypto v0.49.0/go.mod h1:ErX4dUh2UM+CFYiXZRTcMpEcN8b/1gxEuv3nODoYtCA=
+golang.org/x/crypto v0.50.0 h1:zO47/JPrL6vsNkINmLoo/PH1gcxpls50DNogFvB5ZGI=
+golang.org/x/crypto v0.50.0/go.mod h1:3muZ7vA7PBCE6xgPX7nkzzjiUq87kRItoJQM1Yo8S+Q=
 golang.org/x/exp v0.0.0-20260218203240-3dfff04db8fa h1:Zt3DZoOFFYkKhDT3v7Lm9FDMEV06GpzjG2jrqW+QTE0=
 golang.org/x/exp v0.0.0-20260218203240-3dfff04db8fa/go.mod h1:K79w1Vqn7PoiZn+TkNpx3BUWUQksGO3JcVX6qIjytmA=
-golang.org/x/mod v0.33.0 h1:tHFzIWbBifEmbwtGz65eaWyGiGZatSrT9prnU8DbVL8=
-golang.org/x/mod v0.33.0/go.mod h1:swjeQEj+6r7fODbD2cqrnje9PnziFuw4bmLbBZFrQ5w=
-golang.org/x/net v0.52.0 h1:He/TN1l0e4mmR3QqHMT2Xab3Aj3L9qjbhRm78/6jrW0=
-golang.org/x/net v0.52.0/go.mod h1:R1MAz7uMZxVMualyPXb+VaqGSa3LIaUqk0eEt3w36Sw=
+golang.org/x/mod v0.34.0 h1:xIHgNUUnW6sYkcM5Jleh05DvLOtwc6RitGHbDk4akRI=
+golang.org/x/mod v0.34.0/go.mod h1:ykgH52iCZe79kzLLMhyCUzhMci+nQj+0XkbXpNYtVjY=
+golang.org/x/net v0.53.0 h1:d+qAbo5L0orcWAr0a9JweQpjXF19LMXJE8Ey7hwOdUA=
+golang.org/x/net v0.53.0/go.mod h1:JvMuJH7rrdiCfbeHoo3fCQU24Lf5JJwT9W3sJFulfgs=
 golang.org/x/oauth2 v0.36.0 h1:peZ/1z27fi9hUOFCAZaHyrpWG5lwe0RJEEEeH0ThlIs=
 golang.org/x/oauth2 v0.36.0/go.mod h1:YDBUJMTkDnJS+A4BP4eZBjCqtokkg1hODuPjwiGPO7Q=
 golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
 golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
-golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/term v0.41.0 h1:QCgPso/Q3RTJx2Th4bDLqML4W6iJiaXFq2/ftQF13YU=
-golang.org/x/term v0.41.0/go.mod h1:3pfBgksrReYfZ5lvYM0kSO0LIkAl4Yl2bXOkKP7Ec2A=
-golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
-golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
+golang.org/x/sys v0.43.0 h1:Rlag2XtaFTxp19wS8MXlJwTvoh8ArU6ezoyFsMyCTNI=
+golang.org/x/sys v0.43.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/term v0.42.0 h1:UiKe+zDFmJobeJ5ggPwOshJIVt6/Ft0rcfrXZDLWAWY=
+golang.org/x/term v0.42.0/go.mod h1:Dq/D+snpsbazcBG5+F9Q1n2rXV8Ma+71xEjTRufARgY=
+golang.org/x/text v0.36.0 h1:JfKh3XmcRPqZPKevfXVpI1wXPTqbkE5f7JA92a55Yxg=
+golang.org/x/text v0.36.0/go.mod h1:NIdBknypM8iqVmPiuco0Dh6P5Jcdk8lJL0CUebqK164=
 golang.org/x/time v0.15.0 h1:bbrp8t3bGUeFOx08pvsMYRTCVSMk89u4tKbNOZbp88U=
 golang.org/x/time v0.15.0/go.mod h1:Y4YMaQmXwGQZoFaVFk4YpCt4FLQMYKZe9oeV/f4MSno=
-golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
-golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
-gonum.org/v1/gonum v0.16.0 h1:5+ul4Swaf3ESvrOnidPp4GZbzf0mxVQpDCYUQE7OJfk=
-gonum.org/v1/gonum v0.16.0/go.mod h1:fef3am4MQ93R2HHpKnLk4/Tbh/s0+wqD5nfa6Pnwy4E=
+golang.org/x/tools v0.43.0 h1:12BdW9CeB3Z+J/I/wj34VMl8X+fEXBxVR90JeMX5E7s=
+golang.org/x/tools v0.43.0/go.mod h1:uHkMso649BX2cZK6+RpuIPXS3ho2hZo4FVwfoy1vIk0=
+gonum.org/v1/gonum v0.17.0 h1:VbpOemQlsSMrYmn7T2OUvQ4dqxQXU+ouZFQsZOx50z4=
+gonum.org/v1/gonum v0.17.0/go.mod h1:El3tOrEuMpv2UdMrbNlKEh9vd86bmQ6vqIcDwxEOc1E=
 google.golang.org/api v0.272.0 h1:eLUQZGnAS3OHn31URRf9sAmRk3w2JjMx37d2k8AjJmA=
 google.golang.org/api v0.272.0/go.mod h1:wKjowi5LNJc5qarNvDCvNQBn3rVK8nSy6jg2SwRwzIA=
 google.golang.org/genproto v0.0.0-20260217215200-42d3e9bedb6d h1:vsOm753cOAMkt76efriTCDKjpCbK18XGHMJHo0JUKhc=
-google.golang.org/genproto/googleapis/api v0.0.0-20260319201613-d00831a3d3e7 h1:41r6JMbpzBMen0R/4TZeeAmGXSJC7DftGINUodzTkPI=
-google.golang.org/genproto/googleapis/api v0.0.0-20260319201613-d00831a3d3e7/go.mod h1:EIQZ5bFCfRQDV4MhRle7+OgjNtZ6P1PiZBgAKuxXu/Y=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20260311181403-84a4fc48630c h1:xgCzyF2LFIO/0X2UAoVRiXKU5Xg6VjToG4i2/ecSswk=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20260311181403-84a4fc48630c/go.mod h1:4Hqkh8ycfw05ld/3BWL7rJOSfebL2Q+DVDeRgYgxUU8=
-google.golang.org/grpc v1.79.3 h1:sybAEdRIEtvcD68Gx7dmnwjZKlyfuc61Dyo9pGXXkKE=
-google.golang.org/grpc v1.79.3/go.mod h1:KmT0Kjez+0dde/v2j9vzwoAScgEPx/Bw1CYChhHLrHQ=
+google.golang.org/genproto/googleapis/api v0.0.0-20260414002931-afd174a4e478 h1:yQugLulqltosq0B/f8l4w9VryjV+N/5gcW0jQ3N8Qec=
+google.golang.org/genproto/googleapis/api v0.0.0-20260414002931-afd174a4e478/go.mod h1:C6ADNqOxbgdUUeRTU+LCHDPB9ttAMCTff6auwCVa4uc=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478 h1:RmoJA1ujG+/lRGNfUnOMfhCy5EipVMyvUE+KNbPbTlw=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478/go.mod h1:4Hqkh8ycfw05ld/3BWL7rJOSfebL2Q+DVDeRgYgxUU8=
+google.golang.org/grpc v1.82.1 h1:NnAxzGRA0677vCa4BUkOAnO5+FfQqVl9iUXeD0IqcGE=
+google.golang.org/grpc v1.82.1/go.mod h1:yzTZ1TB1Z3SG+LIYaI+WiE8D5+PZ3ArnrSp8zF3+/ZA=
 google.golang.org/protobuf v1.36.11 h1:fV6ZwhNocDyBLK0dj+fg8ektcVegBBuEolpbTQyBNVE=
 google.golang.org/protobuf v1.36.11/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=