Merge branch 'main' into nv/dashboard-migration

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

@@ -1,8 +1,11 @@
 import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import { resolveSignal } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
 import type { LegendSeries } from '../hooks/useLegendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
@@ -17,14 +20,10 @@ interface ConfigPaneProps {
 	/** The panel spec — the single editing surface (title/description + section slices). */
 	spec: DashboardtypesPanelSpecDTO;
 	onChangeSpec: (next: DashboardtypesPanelSpecDTO) => void;
-	/** Switch the panel to another visualization kind. */
-	onChangePanelKind: (kind: PanelKind) => void;
 	/** Panel's resolved series, provided to sections that need them (legend colors). */
 	legendSeries: LegendSeries[];
 	/** Table panel's resolved value columns, for the table-only editors. */
 	tableColumns: TableColumnOption[];
-	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
-	stepInterval?: number;
 }
 
 /**
@@ -37,15 +36,15 @@ function ConfigPane({
 	panelKind,
 	spec,
 	onChangeSpec,
-	onChangePanelKind,
 	legendSeries,
 	tableColumns,
-	stepInterval,
 }: ConfigPaneProps): JSX.Element {
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
-	const signal = resolveSignal(spec.queries, definition.supportedSignals[0]);
+	const signal = getBuilderQueries(spec.queries || [])[0]?.signal as
+		| TelemetrytypesSignalDTO
+		| undefined;
 
 	// Title/description are just a slice of the spec — edit them through the same
 	// onChangeSpec path the sections use, so there's a single editing surface.
@@ -96,9 +95,6 @@ function ConfigPane({
 									legendSeries={legendSeries}
 									tableColumns={tableColumns}
 									signal={signal}
-									panelKind={panelKind}
-									onChangePanelKind={onChangePanelKind}
-									stepInterval={stepInterval}
 								/>
 							))}
 						</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/PanelTypeSwitcher.module.scss

@@ -1,6 +0,0 @@
-// Matches ConfigPane's `.field` so the switcher lines up with the title/description fields.
-.field {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}

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

@@ -1,54 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { getPanelDefinition } from '../../../Panels/registry';
-import type { PanelKind } from '../../../Panels/types/panelKind';
-import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
-import ConfigSelect from '../controls/ConfigSelect/ConfigSelect';
-
-import styles from './PanelTypeSwitcher.module.scss';
-
-interface PanelTypeSwitcherProps {
-	/** The current panel kind (selected value). */
-	panelKind: PanelKind;
-	/** Panel's current datasource — drives the disabled rule. */
-	signal?: TelemetrytypesSignalDTO;
-	onChange: (kind: PanelKind) => void;
-}
-
-/**
- * Visualization-type selector (rendered inside the Visualization section). Types whose
- * supported signals exclude the panel's current datasource are disabled (V1 parity —
- * e.g. List needs logs/traces, not metrics). The datasource is unknown for
- * PromQL/ClickHouse queries, in which case no type is disabled.
- */
-function PanelTypeSwitcher({
-	panelKind,
-	signal,
-	onChange,
-}: PanelTypeSwitcherProps): JSX.Element {
-	const items = PANEL_TYPES.map(({ panelKind, label, Icon }) => {
-		const definition = getPanelDefinition(panelKind as PanelKind);
-		return {
-			value: panelKind,
-			label,
-			icon: <Icon size={14} />,
-			disabled:
-				!!signal && !!definition && !definition.supportedSignals.includes(signal),
-		};
-	});
-
-	return (
-		<div className={styles.field}>
-			<Typography.Text>Panel Type</Typography.Text>
-			<ConfigSelect
-				testId="panel-editor-v2-type-switcher"
-				value={panelKind}
-				items={items}
-				onChange={(value): void => onChange(value as PanelKind)}
-			/>
-		</div>
-	);
-}
-
-export default PanelTypeSwitcher;

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

@@ -1,73 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import PanelTypeSwitcher from '../PanelTypeSwitcher';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(),
-}));
-
-const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
-
-function openDropdown(): void {
-	fireEvent.mouseDown(screen.getByRole('combobox'));
-}
-
-describe('PanelTypeSwitcher', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		// List supports only logs/traces; every other kind also supports metrics.
-		mockGetPanelDefinition.mockImplementation((kind: string) => ({
-			supportedSignals:
-				kind === 'signoz/ListPanel'
-					? ['logs', 'traces']
-					: ['metrics', 'logs', 'traces'],
-		}));
-	});
-
-	it('fires onChange with the chosen plugin kind', () => {
-		const onChange = jest.fn();
-		render(
-			<PanelTypeSwitcher panelKind="signoz/TimeSeriesPanel" onChange={onChange} />,
-		);
-
-		openDropdown();
-		fireEvent.click(screen.getByText('List'));
-
-		expect(onChange).toHaveBeenCalledWith('signoz/ListPanel');
-	});
-
-	it('disables types whose supported signals exclude the current datasource', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				signal={TelemetrytypesSignalDTO.metrics}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		openDropdown();
-		const disabled = Array.from(
-			document.querySelectorAll('.ant-select-item-option-disabled'),
-		).map((el) => el.textContent);
-
-		// List can't render a metrics query, so it's disabled; Time Series stays enabled.
-		expect(disabled).toContain('List');
-		expect(disabled).not.toContain('Time Series');
-	});
-
-	it('does not disable any type when the datasource is unknown', () => {
-		render(
-			<PanelTypeSwitcher
-				panelKind="signoz/TimeSeriesPanel"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		openDropdown();
-		expect(
-			document.querySelectorAll('.ant-select-item-option-disabled'),
-		).toHaveLength(0);
-	});
-});

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

@@ -8,7 +8,6 @@ import {
 	type SectionConfig,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
-import type { PanelKind } from '../../../Panels/types/panelKind';
 import type { LegendSeries } from '../../hooks/useLegendSeries';
 import type { TableColumnOption } from '../../hooks/useTableColumns';
 import { resolveSectionEditor } from '../sectionRegistry';
@@ -24,11 +23,6 @@ interface SectionSlotProps {
 	tableColumns: TableColumnOption[];
 	/** Panel's telemetry signal, for editors that fetch field suggestions (List columns). */
 	signal?: TelemetrytypesSignalDTO;
-	/** Current panel kind + switch handler, for the visualization section's type switcher. */
-	panelKind: PanelKind;
-	onChangePanelKind: (kind: PanelKind) => void;
-	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
-	stepInterval?: number;
 }
 
 /**
@@ -44,9 +38,6 @@ function SectionSlot({
 	legendSeries,
 	tableColumns,
 	signal,
-	panelKind,
-	onChangePanelKind,
-	stepInterval,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -69,12 +60,7 @@ function SectionSlot({
 		.formatting?.unit;
 
 	return (
-		<SettingsSection
-			title={title}
-			icon={<Icon size={15} />}
-			// Open Visualization by default so the type switcher is visible.
-			defaultOpen={config.kind === 'visualization'}
-		>
+		<SettingsSection title={title} icon={<Icon size={15} />}>
 			<Component
 				value={get(spec)}
 				controls={controls}
@@ -83,9 +69,6 @@ function SectionSlot({
 				yAxisUnit={yAxisUnit}
 				tableColumns={tableColumns}
 				signal={signal}
-				panelKind={panelKind}
-				onChangePanelKind={onChangePanelKind}
-				stepInterval={stepInterval}
 			/>
 		</SettingsSection>
 	);

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

@@ -26,15 +26,13 @@ function SettingsSection({
 }: SettingsSectionProps): JSX.Element {
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 
-	const serializedTitle = title.toLowerCase().replace(/\s+/g, '-');
-
 	return (
 		<section className={styles.section}>
 			<button
 				type="button"
 				className={styles.header}
 				aria-expanded={isOpen}
-				data-testid={`config-section-${serializedTitle}`}
+				data-testid={`config-section-${title}`}
 				onClick={(): void => setIsOpen((prev) => !prev)}
 			>
 				{icon && (

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

@@ -21,7 +21,6 @@ function renderConfigPane(
 		panelKind: 'signoz/TimeSeriesPanel',
 		spec: spec(),
 		onChangeSpec: jest.fn(),
-		onChangePanelKind: jest.fn(),
 		legendSeries: [],
 		tableColumns: [],
 		...overrides,
@@ -57,8 +56,6 @@ describe('ConfigPane', () => {
 	it('renders the Formatting section for a kind that declares it', () => {
 		renderConfigPane();
 		// The TimeSeries kind declares a Formatting section; its collapsible header shows.
-		expect(
-			screen.getByTestId('config-section-formatting-&-units'),
-		).toBeInTheDocument();
+		expect(screen.getByTestId('config-section-Formatting')).toBeInTheDocument();
 	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSegmented/ConfigSegmented.module.scss

@@ -1,5 +1,5 @@
 .group {
-	width: 100%;
+	width: min(350px, 100%);
 }
 
 .segment {

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

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { Select } from 'antd';
 
 import { SegmentIcon, type SegmentIconName } from '../segmentIcons';
@@ -8,9 +7,7 @@ import styles from './ConfigSelect.module.scss';
 export interface ConfigSelectItem {
 	value: string;
 	label: string;
-	/** A `SegmentIconName` string (resolved to a glyph), or an arbitrary icon node. */
-	icon?: ReactNode;
-	disabled?: boolean;
+	icon?: SegmentIconName;
 }
 
 interface ConfigSelectProps {
@@ -43,14 +40,9 @@ function ConfigSelect({
 			virtual={false}
 			options={items.map((item) => ({
 				value: item.value,
-				disabled: item.disabled,
 				label: item.icon ? (
 					<span className={styles.item}>
-						{typeof item.icon === 'string' ? (
-							<SegmentIcon name={item.icon as SegmentIconName} />
-						) : (
-							item.icon
-						)}
+						<SegmentIcon name={item.icon} />
 						{item.label}
 					</span>
 				) : (

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

@@ -157,13 +157,6 @@ export interface ErasedSectionDescriptor {
 		// The panel's telemetry signal; read by editors that fetch field-key
 		// suggestions scoped to it (List column picker).
 		signal?: unknown;
-		// Current panel kind + switch handler; read by the visualization section's
-		// type switcher.
-		panelKind?: unknown;
-		onChangePanelKind?: unknown;
-		// Query step interval (seconds); read by chart appearance to floor the
-		// span-gaps threshold.
-		stepInterval?: unknown;
 	}>;
 	get: (spec: PanelSpec) => unknown;
 	update: (spec: PanelSpec, value: unknown) => PanelSpec;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.module.scss

@@ -3,14 +3,3 @@
 	flex-direction: column;
 	gap: 8px;
 }
-
-.thresholdField {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.thresholdPrefix {
-	padding-right: 4px;
-	opacity: 0.6;
-}

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

@@ -1,4 +1,6 @@
+import type { ChangeEvent } from 'react';
 import { Typography } from '@signozhq/ui/typography';
+import { Input } from 'antd';
 import {
 	DashboardtypesFillModeDTO,
 	DashboardtypesLineInterpolationDTO,
@@ -9,7 +11,6 @@ import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContaine
 import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-import DisconnectValuesField from './DisconnectValuesField';
 
 import styles from './ChartAppearanceSection.module.scss';
 
@@ -76,11 +77,16 @@ function ChartAppearanceSection({
 	value,
 	controls,
 	onChange,
-	stepInterval,
-}: SectionEditorProps<'chartAppearance'> & {
-	/** Query step interval (seconds) for the span-gaps threshold floor. */
-	stepInterval?: number;
-}): JSX.Element {
+}: SectionEditorProps<'chartAppearance'>): JSX.Element {
+	// `spanGaps.fillLessThan` is a stringified seconds threshold: empty means "connect
+	// every gap" (the chart default), a number means "only bridge gaps shorter than this".
+	const handleSpanGaps = (e: ChangeEvent<HTMLInputElement>): void => {
+		const raw = e.target.value;
+		onChange({
+			...value,
+			spanGaps: raw === '' ? undefined : { ...value?.spanGaps, fillLessThan: raw },
+		});
+	};
 	return (
 		<>
 			{controls.lineStyle && (
@@ -140,12 +146,16 @@ function ChartAppearanceSection({
 			)}
 
 			{controls.spanGaps && (
-				<DisconnectValuesField
-					testId="panel-editor-v2-span-gaps"
-					value={value?.spanGaps}
-					stepInterval={stepInterval}
-					onChange={(spanGaps): void => onChange({ ...value, spanGaps })}
-				/>
+				<div className={styles.field}>
+					<Typography.Text>Connect gaps shorter than (s)</Typography.Text>
+					<Input
+						data-testid="panel-editor-v2-span-gaps"
+						type="number"
+						placeholder="All gaps"
+						value={value?.spanGaps?.fillLessThan ?? ''}
+						onChange={handleSpanGaps}
+					/>
+				</div>
 			)}
 		</>
 	);

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

@@ -1,93 +0,0 @@
-import { useEffect, useState } from 'react';
-import { rangeUtil } from '@grafana/data';
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesSpanGapsDTO } from 'api/generated/services/sigNoz.schemas';
-
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
-
-import styles from './ChartAppearanceSection.module.scss';
-
-const DEFAULT_THRESHOLD = '1m';
-const MODE_NEVER = 'never';
-const MODE_THRESHOLD = 'threshold';
-const MODE_OPTIONS = [
-	{ value: MODE_NEVER, label: 'Never' },
-	{ value: MODE_THRESHOLD, label: 'Threshold' },
-];
-
-interface DisconnectValuesFieldProps {
-	testId: string;
-	value: DashboardtypesSpanGapsDTO | undefined;
-	/** Query step interval (seconds): seeds the default threshold and floors it. */
-	stepInterval?: number;
-	onChange: (next: DashboardtypesSpanGapsDTO | undefined) => void;
-}
-
-/** Default threshold duration: the step interval (smallest meaningful), else 1m. */
-function defaultDuration(stepInterval?: number): string {
-	return stepInterval && stepInterval > 0
-		? rangeUtil.secondsToHms(stepInterval)
-		: DEFAULT_THRESHOLD;
-}
-
-/**
- * "Disconnect values": Never (span every gap — the chart default) vs Threshold
- * (only bridge gaps shorter than a duration). The threshold persists as a
- * duration string in `spanGaps.fillLessThan` ("10m", "5s") — the wire format the
- * backend expects.
- */
-function DisconnectValuesField({
-	testId,
-	value,
-	stepInterval,
-	onChange,
-}: DisconnectValuesFieldProps): JSX.Element {
-	const duration = value?.fillLessThan || undefined;
-	const isThreshold = !!duration;
-	// Remember the last threshold so toggling Never → Threshold restores it.
-	const [lastDuration, setLastDuration] = useState(
-		duration ?? defaultDuration(stepInterval),
-	);
-
-	useEffect(() => {
-		if (duration) {
-			setLastDuration(duration);
-		}
-	}, [duration]);
-
-	const handleMode = (mode: string): void => {
-		onChange(
-			mode === MODE_THRESHOLD
-				? { ...value, fillLessThan: lastDuration }
-				: undefined,
-		);
-	};
-
-	return (
-		<>
-			<div className={styles.field}>
-				<Typography.Text>Disconnect values</Typography.Text>
-				<ConfigSegmented
-					testId={testId}
-					value={isThreshold ? MODE_THRESHOLD : MODE_NEVER}
-					items={MODE_OPTIONS}
-					onChange={handleMode}
-				/>
-			</div>
-			{isThreshold && (
-				<div className={styles.field}>
-					<Typography.Text>Threshold value</Typography.Text>
-					<DisconnectValuesThresholdInput
-						testId={`${testId}-value`}
-						value={lastDuration}
-						minValue={stepInterval}
-						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
-					/>
-				</div>
-			)}
-		</>
-	);
-}
-
-export default DisconnectValuesField;

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

@@ -1,94 +0,0 @@
-import { type ChangeEvent, useEffect, useState } from 'react';
-import { rangeUtil } from '@grafana/data';
-import { Callout } from '@signozhq/ui/callout';
-import { Input } from 'antd';
-
-import styles from './ChartAppearanceSection.module.scss';
-
-interface DisconnectValuesThresholdInputProps {
-	testId: string;
-	/** Current threshold as a duration string (e.g. "1m") — the stored wire value. */
-	value: string;
-	/** Smallest allowed threshold (the query step interval), in seconds. */
-	minValue?: number;
-	onChange: (duration: string) => void;
-}
-
-/**
- * Duration input for the span-gaps threshold: shows/accepts and reports a human
- * duration ("30s", "1m", "1h"), which is the value stored verbatim in
- * `fillLessThan` (a bare number is read as seconds). It is only parsed to seconds
- * to validate against the query step interval. Invalid entries, or values below
- * that floor, surface an inline error and are not committed (V1 parity).
- */
-function DisconnectValuesThresholdInput({
-	testId,
-	value,
-	minValue,
-	onChange,
-}: DisconnectValuesThresholdInputProps): JSX.Element {
-	const [text, setText] = useState(value);
-	const [error, setError] = useState<string | null>(null);
-
-	// Resync the displayed duration when the committed value changes upstream.
-	useEffect(() => {
-		setText(value);
-		setError(null);
-	}, [value]);
-
-	const commit = (raw: string): void => {
-		if (!raw) {
-			return;
-		}
-		let seconds: number;
-		try {
-			seconds = rangeUtil.isValidTimeSpan(raw)
-				? rangeUtil.intervalToSeconds(raw)
-				: NaN;
-		} catch {
-			seconds = NaN;
-		}
-		if (!Number.isFinite(seconds) || seconds <= 0) {
-			setError('Enter a valid duration (e.g. 30s, 1m, 1h)');
-			return;
-		}
-		if (minValue !== undefined && seconds < minValue) {
-			setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
-			return;
-		}
-		setError(null);
-		// Store the user's duration string as-is — the wire format the backend wants.
-		onChange(raw);
-	};
-
-	return (
-		<div className={styles.thresholdField}>
-			<Input
-				data-testid={testId}
-				type="text"
-				status={error ? 'error' : undefined}
-				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
-				value={text}
-				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
-					setText(e.target.value);
-					if (error) {
-						setError(null);
-					}
-				}}
-				onBlur={(e): void => commit(e.currentTarget.value)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter') {
-						commit(e.currentTarget.value);
-					}
-				}}
-			/>
-			{error && (
-				<Callout type="error" size="small" showIcon>
-					{error}
-				</Callout>
-			)}
-		</div>
-	);
-}
-
-export default DisconnectValuesThresholdInput;

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

@@ -108,24 +108,9 @@ describe('ChartAppearanceSection', () => {
 		expect(onChange).toHaveBeenCalledWith({ showPoints: true });
 	});
 
-	it('defaults to "Never" (no threshold) and hides the threshold input', () => {
-		render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByText('Never')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('switching to "Threshold" seeds the default 1m threshold', () => {
+	it('writes a span-gaps threshold and clears it when emptied', () => {
 		const onChange = jest.fn();
-		render(
+		const { rerender } = render(
 			<ChartAppearanceSection
 				value={undefined}
 				controls={{ spanGaps: true }}
@@ -133,103 +118,23 @@ describe('ChartAppearanceSection', () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByText('Threshold'));
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '1m' },
+		fireEvent.change(screen.getByTestId('panel-editor-v2-span-gaps'), {
+			target: { value: '60' },
+		});
+		expect(onChange).toHaveBeenLastCalledWith({
+			spanGaps: { fillLessThan: '60' },
 		});
-	});
 
-	it('stores the threshold as a duration string (not seconds)', () => {
-		const onChange = jest.fn();
-		render(
+		rerender(
 			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
+				value={{ spanGaps: { fillLessThan: '60' } }}
 				controls={{ spanGaps: true }}
 				onChange={onChange}
 			/>,
 		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		expect(input).toHaveValue('1m');
-
-		fireEvent.change(input, { target: { value: '5m' } });
-		fireEvent.blur(input);
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '5m' },
+		fireEvent.change(screen.getByTestId('panel-editor-v2-span-gaps'), {
+			target: { value: '' },
 		});
-	});
-
-	it('stores the entry verbatim (bare number kept as typed, not converted)', () => {
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		fireEvent.change(input, { target: { value: '300' } });
-		fireEvent.blur(input);
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillLessThan: '300' },
-		});
-	});
-
-	it('switching back to "Never" clears the threshold', () => {
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		fireEvent.click(screen.getByText('Never'));
-
 		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
 	});
-
-	it('shows an error and does not commit an invalid duration', () => {
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		fireEvent.change(input, { target: { value: 'abc' } });
-		fireEvent.blur(input);
-
-		expect(screen.getByText(/valid duration/i)).toBeInTheDocument();
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it('rejects a threshold below the query step interval', () => {
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '2m' } }}
-				controls={{ spanGaps: true }}
-				stepInterval={120}
-				onChange={onChange}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		// 1m (60s) is below the 2m (120s) step interval.
-		fireEvent.change(input, { target: { value: '1m' } });
-		fireEvent.blur(input);
-
-		expect(screen.getByText(/Threshold should be >/)).toBeInTheDocument();
-		expect(onChange).not.toHaveBeenCalled();
-	});
 });

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

@@ -123,25 +123,6 @@ describe('ComparisonThresholdsSection', () => {
 		]);
 	});
 
-	it('lets the value input be cleared instead of snapping back to 0', async () => {
-		const user = userEvent.setup();
-		render(
-			<ComparisonThresholdsSection value={THRESHOLDS} onChange={jest.fn()} />,
-		);
-
-		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
-		const valueInput = screen.getByTestId('comparison-threshold-value-0');
-
-		// Regression: clearing used to coerce "" → 0 and refill the field, so the
-		// seeded value could never be removed.
-		await user.clear(valueInput);
-		expect(valueInput).toHaveValue(null);
-
-		// And a fresh value can be typed into the now-empty field.
-		await user.type(valueInput, '5');
-		expect(valueInput).toHaveValue(5);
-	});
-
 	it('does not commit edits when Discard is clicked', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();

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

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
 
@@ -17,12 +16,6 @@ function ThresholdValueField({
 	value,
 	onChange,
 }: ThresholdValueFieldProps): JSX.Element {
-	const [raw, setRaw] = useState(String(value));
-
-	useEffect(() => {
-		setRaw((prev) => (Number(prev) === value ? prev : String(value)));
-	}, [value]);
-
 	return (
 		<div className={styles.field}>
 			<Typography.Text className={styles.fieldLabel}>Value</Typography.Text>
@@ -30,11 +23,8 @@ function ThresholdValueField({
 				data-testid={testId}
 				type="number"
 				placeholder="Value"
-				value={raw}
-				onChange={(e): void => {
-					setRaw(e.target.value);
-					onChange(e.target.value);
-				}}
+				value={value}
+				onChange={(e): void => onChange(e.target.value)}
 			/>
 		</div>
 	);

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

@@ -1,50 +1,26 @@
 import { Typography } from '@signozhq/ui/typography';
-import {
-	DashboardtypesTimePreferenceDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
 import type { SectionEditorProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 
-import type { PanelKind } from '../../../../Panels/types/panelKind';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
-import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';
 
 import styles from './VisualizationSection.module.scss';
 
-type VisualizationSectionProps = SectionEditorProps<'visualization'> & {
-	/** Current panel kind + switch handler, forwarded by SectionSlot for the type switcher. */
-	panelKind?: PanelKind;
-	onChangePanelKind?: (kind: PanelKind) => void;
-	/** Panel's datasource, forwarded by SectionSlot — scopes the switcher's disabled types. */
-	signal?: TelemetrytypesSignalDTO;
-};
-
 /**
- * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
- * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
- * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
- * flag, so a kind only renders — and only writes — the fields its spec supports.
+ * Edits the `visualization` slice: the per-panel time preference (all kinds), bar
+ * stacking (`stackedBarChart`, Bar only), and gap filling (`fillSpans`, TimeSeries
+ * only). Each control is gated by its `controls` flag, so a kind only renders — and only
+ * writes — the visualization fields its spec actually supports.
  */
 function VisualizationSection({
 	value,
 	controls,
 	onChange,
-	panelKind,
-	onChangePanelKind,
-	signal,
-}: VisualizationSectionProps): JSX.Element {
+}: SectionEditorProps<'visualization'>): JSX.Element {
 	return (
 		<>
-			{controls.switchPanelKind && panelKind && onChangePanelKind && (
-				<PanelTypeSwitcher
-					panelKind={panelKind}
-					signal={signal}
-					onChange={onChangePanelKind}
-				/>
-			)}
-
 			{controls.timePreference && (
 				<div className={styles.field}>
 					<Typography.Text>Panel time preference</Typography.Text>

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

@@ -4,14 +4,6 @@ import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.s
 
 import VisualizationSection from '../VisualizationSection';
 
-// The type switcher resolves each kind's supported signals; stub it so the test
-// doesn't pull the whole panel registry (renderers, chart libs).
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(() => ({
-		supportedSignals: ['metrics', 'logs', 'traces'],
-	})),
-}));
-
 // Open the antd Select by clicking its selector, then pick the option by label.
 async function pickOption(triggerTestId: string, label: string): Promise<void> {
 	const user = userEvent.setup();
@@ -25,12 +17,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-					stacking: true,
-					fillSpans: true,
-				}}
+				controls={{ timePreference: true, stacking: true, fillSpans: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -48,10 +35,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-				}}
+				controls={{ timePreference: true }}
 				onChange={jest.fn()}
 			/>,
 		);
@@ -72,10 +56,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={undefined}
-				controls={{
-					switchPanelKind: true,
-					timePreference: true,
-				}}
+				controls={{ timePreference: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -93,10 +74,7 @@ describe('VisualizationSection', () => {
 					timePreference: DashboardtypesTimePreferenceDTO.global_time,
 					stackedBarChart: false,
 				}}
-				controls={{
-					switchPanelKind: true,
-					stacking: true,
-				}}
+				controls={{ stacking: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -114,10 +92,7 @@ describe('VisualizationSection', () => {
 		render(
 			<VisualizationSection
 				value={{ fillSpans: false }}
-				controls={{
-					switchPanelKind: true,
-					fillSpans: true,
-				}}
+				controls={{ fillSpans: true }}
 				onChange={onChange}
 			/>,
 		);
@@ -126,43 +101,4 @@ describe('VisualizationSection', () => {
 
 		expect(onChange).toHaveBeenCalledWith({ fillSpans: true });
 	});
-
-	it('renders the type switcher and switches kind when switchPanelKind is set', async () => {
-		const onChangePanelKind = jest.fn();
-		render(
-			<VisualizationSection
-				value={undefined}
-				controls={{ switchPanelKind: true }}
-				onChange={jest.fn()}
-				panelKind="signoz/TimeSeriesPanel"
-				onChangePanelKind={onChangePanelKind}
-			/>,
-		);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-type-switcher'),
-		).toBeInTheDocument();
-
-		await pickOption('panel-editor-v2-type-switcher', 'Table');
-		expect(onChangePanelKind).toHaveBeenCalledWith('signoz/TablePanel');
-	});
-
-	it('hides the type switcher when switchPanelKind is not set', () => {
-		render(
-			<VisualizationSection
-				value={undefined}
-				controls={{
-					switchPanelKind: false,
-					timePreference: true,
-				}}
-				onChange={jest.fn()}
-				panelKind="signoz/TimeSeriesPanel"
-				onChangePanelKind={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-type-switcher'),
-		).not.toBeInTheDocument();
-	});
 });

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

@@ -1,98 +0,0 @@
-import {
-	TelemetrytypesSignalDTO,
-	type DashboardtypesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import { defaultColumnsForSignal } from '../ListColumnsEditor/selectFields';
-import { getSwitchedPluginSpec } from '../getSwitchedPluginSpec';
-
-jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
-	getPanelDefinition: jest.fn(),
-}));
-jest.mock('../ListColumnsEditor/selectFields', () => ({
-	defaultColumnsForSignal: jest.fn(),
-}));
-
-const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
-const mockDefaultColumnsForSignal =
-	defaultColumnsForSignal as unknown as jest.Mock;
-
-function specWith(pluginSpec: unknown): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Panel' },
-		plugin: { kind: 'signoz/TablePanel', spec: pluginSpec },
-		queries: [],
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-describe('getSwitchedPluginSpec', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockDefaultColumnsForSignal.mockReturnValue([]);
-	});
-
-	it('carries only unit + decimalPrecision when the new kind has a formatting section', () => {
-		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'formatting', controls: { unit: true, decimals: true } }],
-		});
-		const old = specWith({
-			formatting: { unit: 'ms', decimalPrecision: 2, columnUnits: { A: 'bytes' } },
-			axes: { logScale: true },
-		});
-
-		const result = getSwitchedPluginSpec(
-			old,
-			'signoz/TimeSeriesPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.formatting).toStrictEqual({ unit: 'ms', decimalPrecision: 2 });
-		// Type-specific config from the old kind is dropped.
-		expect((result as { axes?: unknown }).axes).toBeUndefined();
-	});
-
-	it('does not carry formatting when the new kind has no formatting section', () => {
-		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-		const old = specWith({ formatting: { unit: 'ms' } });
-
-		const result = getSwitchedPluginSpec(
-			old,
-			'signoz/ListPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.formatting).toBeUndefined();
-	});
-
-	it('seeds List columns from the signal when switching into a List', () => {
-		const columns = [{ name: 'body' }];
-		mockDefaultColumnsForSignal.mockReturnValue(columns);
-		mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-
-		const result = getSwitchedPluginSpec(
-			specWith({}),
-			'signoz/ListPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(mockDefaultColumnsForSignal).toHaveBeenCalledWith(
-			TelemetrytypesSignalDTO.logs,
-		);
-		expect(result.selectFields).toBe(columns);
-	});
-
-	it('includes the kind section defaults (e.g. legend position)', () => {
-		mockGetPanelDefinition.mockReturnValue({
-			sections: [{ kind: 'legend', controls: { position: true } }],
-		});
-
-		const result = getSwitchedPluginSpec(
-			specWith({}),
-			'signoz/PieChartPanel',
-			TelemetrytypesSignalDTO.logs,
-		);
-
-		expect(result.legend?.position).toBe('bottom');
-	});
-});

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

@@ -1,67 +0,0 @@
-import type {
-	DashboardtypesPanelSpecDTO,
-	TelemetrytypesSignalDTO,
-	TelemetrytypesTelemetryFieldKeyDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import type { PanelFormattingSlice } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
-import {
-	buildDefaultPluginSpec,
-	type DefaultPluginSpec,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/buildDefaultPluginSpec';
-
-import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
-
-/**
- * Plugin spec produced on a first-time switch to a new kind. A partial cross-section
- * of the per-kind spec union; the caller assigns it to `plugin.spec` (typed `unknown`)
- * at the boundary.
- */
-export interface SwitchedPluginSpec extends DefaultPluginSpec {
-	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
-}
-
-/**
- * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
- * section defaults (so the config pane opens populated, matching new-panel seeding) plus
- * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
- * List seeds the current signal's default columns so the columns control isn't empty.
- *
- * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
- */
-export function getSwitchedPluginSpec(
-	oldSpec: DashboardtypesPanelSpecDTO,
-	newKind: PanelKind,
-	signal: TelemetrytypesSignalDTO,
-): SwitchedPluginSpec {
-	const sections = getPanelDefinition(newKind)?.sections ?? [];
-	const result: SwitchedPluginSpec = buildDefaultPluginSpec(sections);
-
-	if (sections.some((section) => section.kind === 'formatting')) {
-		const oldFormatting = (
-			oldSpec.plugin.spec as {
-				formatting?: PanelFormattingSlice;
-			}
-		).formatting;
-		const carried: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'> = {
-			...(oldFormatting?.unit !== undefined && { unit: oldFormatting.unit }),
-			...(oldFormatting?.decimalPrecision !== undefined && {
-				decimalPrecision: oldFormatting.decimalPrecision,
-			}),
-		};
-		if (Object.keys(carried).length > 0) {
-			result.formatting = carried;
-		}
-	}
-
-	if (sections.some((section) => section.kind === 'columns')) {
-		const columns = defaultColumnsForSignal(signal);
-		if (columns.length > 0) {
-			result.selectFields = columns;
-		}
-	}
-
-	return result;
-}

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

@@ -1,190 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { handleQueryChange } from 'container/NewWidget/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getBuilderQueries } from '../../../Panels/utils/getBuilderQueries';
-import { toPerses } from '../../../queryV5/persesQueryAdapters';
-import { getSwitchedPluginSpec } from '../../getSwitchedPluginSpec';
-import { usePanelTypeSwitch } from '../usePanelTypeSwitch';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-jest.mock('container/NewWidget/utils', () => ({
-	handleQueryChange: jest.fn(),
-	PANEL_TYPE_TO_QUERY_TYPES: {
-		graph: ['builder', 'clickhouse', 'promql'],
-		table: ['builder', 'clickhouse'],
-		list: ['builder'],
-		value: ['builder', 'clickhouse', 'promql'],
-		bar: ['builder', 'clickhouse', 'promql'],
-		pie: ['builder', 'clickhouse'],
-		histogram: ['builder', 'clickhouse', 'promql'],
-	},
-}));
-jest.mock('../../../queryV5/persesQueryAdapters', () => ({
-	toPerses: jest.fn(),
-}));
-jest.mock('../../getSwitchedPluginSpec', () => ({
-	getSwitchedPluginSpec: jest.fn(),
-}));
-jest.mock('../../../Panels/utils/getBuilderQueries', () => ({
-	getBuilderQueries: jest.fn(),
-}));
-
-const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
-const mockHandleQueryChange = handleQueryChange as unknown as jest.Mock;
-const mockToPerses = toPerses as unknown as jest.Mock;
-const mockGetSwitchedPluginSpec = getSwitchedPluginSpec as unknown as jest.Mock;
-const mockGetBuilderQueries = getBuilderQueries as unknown as jest.Mock;
-
-// Opaque sentinels — the leaf utilities are mocked, so only identity matters.
-const TABLE_PLUGIN_SPEC = { table: true } as unknown;
-const TABLE_QUERIES = [{ id: 'table-q' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const LIST_PLUGIN_SPEC = { list: true } as unknown;
-const LIST_QUERIES = [{ id: 'list-q' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const TRANSFORMED = {
-	id: 'transformed',
-	queryType: 'builder',
-} as unknown as Query;
-const CONVERTED = [{ id: 'converted' }] as unknown as NonNullable<
-	DashboardtypesPanelSpecDTO['queries']
->;
-const SWITCHED_SPEC = { switched: true } as unknown;
-
-function makeSpec(
-	kind: string,
-	pluginSpec: unknown,
-	queries: NonNullable<DashboardtypesPanelSpecDTO['queries']>,
-): DashboardtypesPanelSpecDTO {
-	return {
-		display: { name: 'Panel' },
-		plugin: { kind, spec: pluginSpec },
-		queries,
-	} as unknown as DashboardtypesPanelSpecDTO;
-}
-
-const tableSpec = makeSpec(
-	'signoz/TablePanel',
-	TABLE_PLUGIN_SPEC,
-	TABLE_QUERIES,
-);
-const listSpec = makeSpec('signoz/ListPanel', LIST_PLUGIN_SPEC, LIST_QUERIES);
-
-function builderState(currentQuery: Query): {
-	currentQuery: Query;
-	redirectWithQueryBuilderData: jest.Mock;
-} {
-	return { currentQuery, redirectWithQueryBuilderData: jest.fn() };
-}
-
-describe('usePanelTypeSwitch', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockHandleQueryChange.mockReturnValue(TRANSFORMED);
-		mockToPerses.mockReturnValue(CONVERTED);
-		mockGetSwitchedPluginSpec.mockReturnValue(SWITCHED_SPEC);
-		mockGetBuilderQueries.mockReturnValue([{ signal: 'logs' }]);
-	});
-
-	it('does nothing when switching to the current kind', () => {
-		const setSpec = jest.fn();
-		const state = builderState({ id: 'q', queryType: 'builder' } as Query);
-		mockUseQueryBuilder.mockReturnValue(state);
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: tableSpec,
-				panelType: PANEL_TYPES.TABLE,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
-
-		expect(setSpec).not.toHaveBeenCalled();
-		expect(state.redirectWithQueryBuilderData).not.toHaveBeenCalled();
-	});
-
-	it('on first visit: transforms the query and resets the spec to the new kind', () => {
-		const setSpec = jest.fn();
-		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
-		const state = builderState(tableQuery);
-		mockUseQueryBuilder.mockReturnValue(state);
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: tableSpec,
-				panelType: PANEL_TYPES.TABLE,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		expect(setSpec).toHaveBeenCalledTimes(1);
-		const next = setSpec.mock.calls[0][0] as DashboardtypesPanelSpecDTO;
-		expect(next.plugin.kind).toBe('signoz/ListPanel');
-		expect(next.plugin.spec).toBe(SWITCHED_SPEC);
-		expect(next.queries).toBe(CONVERTED);
-		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(TRANSFORMED);
-	});
-
-	it('coerces the query type when the new kind disallows it (promql → List)', () => {
-		const setSpec = jest.fn();
-		const promQuery = { id: 'prom', queryType: 'promql' } as Query;
-		mockUseQueryBuilder.mockReturnValue(builderState(promQuery));
-
-		const { result } = renderHook(() =>
-			usePanelTypeSwitch({
-				spec: makeSpec('signoz/TimeSeriesPanel', {}, TABLE_QUERIES),
-				panelType: PANEL_TYPES.TIME_SERIES,
-				setSpec,
-			}),
-		);
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		// List allows only Query Builder, so the promql query is coerced to 'builder'.
-		const [, queryArg] = mockHandleQueryChange.mock.calls[0];
-		expect((queryArg as Query).queryType).toBe('builder');
-	});
-
-	it('restores the original kind verbatim on switch-back (reversibility)', () => {
-		const setSpec = jest.fn();
-		const tableQuery = { id: 'table-current', queryType: 'builder' } as Query;
-		const listQuery = { id: 'list-current', queryType: 'builder' } as Query;
-		let state = builderState(tableQuery);
-		mockUseQueryBuilder.mockImplementation(() => state);
-
-		const { result, rerender } = renderHook(
-			(props: { spec: DashboardtypesPanelSpecDTO; panelType: PANEL_TYPES }) =>
-				usePanelTypeSwitch({ ...props, setSpec }),
-			{ initialProps: { spec: tableSpec, panelType: PANEL_TYPES.TABLE } },
-		);
-
-		// Leave Table for List (stashes Table in its pristine state).
-		act(() => result.current.onChangePanelKind('signoz/ListPanel'));
-
-		// Parent re-renders as a List panel; the builder now holds the List query.
-		state = builderState(listQuery);
-		rerender({ spec: listSpec, panelType: PANEL_TYPES.LIST });
-
-		// Switch back to Table → restored from the stash, not re-transformed.
-		act(() => result.current.onChangePanelKind('signoz/TablePanel'));
-
-		const restored = setSpec.mock.calls[
-			setSpec.mock.calls.length - 1
-		][0] as DashboardtypesPanelSpecDTO;
-		expect(restored.plugin.kind).toBe('signoz/TablePanel');
-		expect(restored.plugin.spec).toBe(TABLE_PLUGIN_SPEC);
-		expect(restored.queries).toBe(TABLE_QUERIES);
-		expect(state.redirectWithQueryBuilderData).toHaveBeenCalledWith(tableQuery);
-		// The restore path must not run the query transform again.
-		expect(mockHandleQueryChange).toHaveBeenCalledTimes(1);
-	});
-});

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

@@ -40,7 +40,7 @@ export function useLegendSeries(
 			getTimeSeriesResults(data?.response),
 			data.legendMap,
 		);
-		const builderQueries = getBuilderQueries(panel.spec.queries || []);
+		const builderQueries = getBuilderQueries(panel?.spec?.queries || []);
 
 		const byLabel = new Map<string, string>();
 		series.forEach((s) => {

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

@@ -1,137 +0,0 @@
-import { useCallback, useRef } from 'react';
-import type {
-	DashboardtypesPanelPluginDTO,
-	DashboardtypesPanelSpecDTO,
-	DashboardtypesQueryDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	handleQueryChange,
-	PANEL_TYPE_TO_QUERY_TYPES,
-	type PartialPanelTypes,
-} from 'container/NewWidget/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	PANEL_KIND_TO_PANEL_TYPE,
-	type PanelKind,
-} from '../../Panels/types/panelKind';
-import { getBuilderQueries } from '../../Panels/utils/getBuilderQueries';
-import { toPerses } from '../../queryV5/persesQueryAdapters';
-import {
-	getSwitchedPluginSpec,
-	type SwitchedPluginSpec,
-} from '../getSwitchedPluginSpec';
-
-/** What a kind looks like when you leave it; restored verbatim if you return. */
-interface KindState {
-	pluginSpec: DashboardtypesPanelPluginDTO['spec'];
-	queries: DashboardtypesQueryDTO[] | null;
-	builderQuery: Query;
-}
-
-interface UsePanelTypeSwitchArgs {
-	spec: DashboardtypesPanelSpecDTO;
-	panelType: PANEL_TYPES;
-	setSpec: (next: DashboardtypesPanelSpecDTO) => void;
-}
-
-interface UsePanelTypeSwitchApi {
-	/** Switch the panel to `newKind`, transforming/restoring its query + spec. */
-	onChangePanelKind: (newKind: PanelKind) => void;
-}
-
-/**
- * Switches the edited panel's visualization kind. Mutating `plugin.kind` re-derives the
- * renderer, config sections, query-builder tabs and request type for free; this hook adds
- * the two things that don't: a per-kind session cache that makes switching reversible
- * (`Table → List → Table` restores the original query + spec), and, on first visit to a
- * kind, a query rebuild (`handleQueryChange`) + spec reset (`getSwitchedPluginSpec`).
- */
-export function usePanelTypeSwitch({
-	spec,
-	panelType,
-	setSpec,
-}: UsePanelTypeSwitchArgs): UsePanelTypeSwitchApi {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-
-	const cacheRef = useRef<Map<PanelKind, KindState>>(new Map());
-
-	// Latest spec/query/type, read inside the stable callback without re-subscribing.
-	const specRef = useRef(spec);
-	specRef.current = spec;
-	const queryRef = useRef(currentQuery);
-	queryRef.current = currentQuery;
-	const panelTypeRef = useRef(panelType);
-	panelTypeRef.current = panelType;
-
-	const onChangePanelKind = useCallback(
-		(newKind: PanelKind): void => {
-			const currentSpec = specRef.current;
-			const oldKind = currentSpec.plugin.kind as PanelKind;
-			if (newKind === oldKind) {
-				return;
-			}
-			const query = queryRef.current;
-
-			cacheRef.current.set(oldKind, {
-				pluginSpec: currentSpec.plugin.spec,
-				queries: currentSpec.queries ?? null,
-				builderQuery: query,
-			});
-
-			const newPanelType = PANEL_KIND_TO_PANEL_TYPE[newKind];
-
-			// Only `plugin` needs a cast: it's a discriminated union over `kind`, and a
-			// dynamically-chosen kind can't be correlated with its spec statically (as in
-			// `createDefaultPanel`). The surrounding spec stays fully typed.
-			const buildSpec = (
-				pluginSpec: DashboardtypesPanelPluginDTO['spec'] | SwitchedPluginSpec,
-				queries: DashboardtypesQueryDTO[] | null,
-			): DashboardtypesPanelSpecDTO => ({
-				...currentSpec,
-				plugin: {
-					...currentSpec.plugin,
-					kind: newKind,
-					spec: pluginSpec,
-				} as DashboardtypesPanelPluginDTO,
-				queries,
-			});
-
-			// Revisit → restore the stash verbatim (the reversibility path).
-			const cached = cacheRef.current.get(newKind);
-			if (cached) {
-				setSpec(buildSpec(cached.pluginSpec, cached.queries));
-				redirectWithQueryBuilderData(cached.builderQuery);
-				return;
-			}
-
-			// First visit → coerce the query type if the new panel disallows it, then
-			// rebuild the builder query for the new type.
-			const supported = PANEL_TYPE_TO_QUERY_TYPES[newPanelType] ?? [];
-			const queryType = supported.includes(query.queryType)
-				? query.queryType
-				: supported[0];
-			const transformed = handleQueryChange(
-				newPanelType as keyof PartialPanelTypes,
-				{ ...query, queryType },
-				panelTypeRef.current,
-			);
-			const signal = getBuilderQueries(currentSpec.queries || [])[0]
-				?.signal as TelemetrytypesSignalDTO;
-
-			setSpec(
-				buildSpec(
-					getSwitchedPluginSpec(currentSpec, newKind, signal),
-					toPerses(transformed, newPanelType),
-				),
-			);
-			redirectWithQueryBuilderData(transformed);
-		},
-		[setSpec, redirectWithQueryBuilderData],
-	);
-
-	return { onChangePanelKind };
-}

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import {
 	ResizableHandle,
 	ResizablePanel,
@@ -18,7 +18,6 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
 
-import { getExecStats } from '../queryV5/v5ResponseData';
 import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
 import ConfigPane from './ConfigPane/ConfigPane';
 import Header from './Header/Header';
@@ -30,7 +29,6 @@ import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
 import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
 import { useTableColumns } from './hooks/useTableColumns';
@@ -115,9 +113,6 @@ function PanelEditorContainer({
 		signal: defaultSignal,
 	});
 
-	// Switch the panel's visualization kind in place (reversible per session).
-	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });
-
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
@@ -151,14 +146,6 @@ function PanelEditorContainer({
 	const legendSeries = useLegendSeries(draft, data);
 	const tableColumns = useTableColumns(draft, data);
 
-	// Smallest query step interval (seconds) — the floor for the span-gaps
-	// threshold. Undefined until results carry step metadata.
-	const stepInterval = useMemo((): number | undefined => {
-		const intervals = getExecStats(data.response)?.stepIntervals;
-		const values = intervals ? Object.values(intervals) : [];
-		return values.length ? Math.min(...values) : undefined;
-	}, [data.response]);
-
 	const onSave = useCallback(async (): Promise<void> => {
 		try {
 			// Bake the live query into the spec so unstaged edits are saved too.
@@ -239,10 +226,8 @@ function PanelEditorContainer({
 						panelKind={draft.spec.plugin.kind}
 						spec={spec}
 						onChangeSpec={setSpec}
-						onChangePanelKind={onChangePanelKind}
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
-						stepInterval={stepInterval}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>

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

@@ -3,10 +3,7 @@ import type { SectionConfig } from '../../types/sections';
 // Bar stacking lives in `visualization.stackedBarChart`, so it's a `visualization`
 // control, not `chartAppearance`. fillSpans is TimeSeries-only, so Bar omits it (V1 parity).
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true, stacking: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true, stacking: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true } },

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

@@ -3,10 +3,6 @@ import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true },
-	},
 	{
 		kind: 'legend',
 		controls: { position: true },

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

@@ -1,8 +1,3 @@
 import type { SectionConfig } from '../../types/sections';
 
-export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true },
-	},
-];
+export const sections: SectionConfig[] = [];

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

@@ -1,10 +1,7 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'thresholds', controls: { variant: 'comparison' } },
 	{ kind: 'contextLinks' },

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

@@ -3,10 +3,7 @@ import type { SectionConfig } from '../../types/sections';
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend.
 // Legend `colors` is omitted: the pie legend is always interactive swatches.
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'legend', controls: { position: true } },
 	{ kind: 'contextLinks' },

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

@@ -4,10 +4,7 @@ import type { SectionConfig } from '../../types/sections';
 // single column set). It exposes the per-panel time scope, formatting (decimals +
 // per-column units), per-column thresholds, and context links.
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true } },
 	{ kind: 'formatting', controls: { decimals: true, columnUnits: true } },
 	{ kind: 'thresholds', controls: { variant: 'table' } },
 	{ kind: 'contextLinks' },

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

@@ -1,10 +1,7 @@
 import type { SectionConfig } from '../../types/sections';
 
 export const sections: SectionConfig[] = [
-	{
-		kind: 'visualization',
-		controls: { switchPanelKind: true, timePreference: true, fillSpans: true },
-	},
+	{ kind: 'visualization', controls: { timePreference: true, fillSpans: true } },
 	{ kind: 'formatting', controls: { unit: true, decimals: true } },
 	{ kind: 'axes', controls: { minMax: true, logScale: true } },
 	{ kind: 'legend', controls: { position: true, colors: true } },

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

@@ -89,11 +89,8 @@ export interface SectionControls {
 		spanGaps?: boolean;
 	};
 	buckets: { count?: boolean; width?: boolean; mergeQueries?: boolean };
-	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
-	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
-	// 0 (TimeSeries).
+	// stacking → stackedBarChart (Bar); fillSpans → fill gaps with 0 (TimeSeries).
 	visualization: {
-		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
 		fillSpans?: boolean;
@@ -131,7 +128,7 @@ export type SectionConfig =
 // Per-section title + sidebar icon. Pure data; the editor component + spec lens
 // live in the ConfigPane section registry.
 export const SECTION_METADATA = {
-	formatting: { title: 'Formatting & Units', icon: Hash },
+	formatting: { title: 'Formatting', icon: Hash },
 	axes: { title: 'Axes', icon: Ruler },
 	legend: { title: 'Legend', icon: Layers },
 	chartAppearance: { title: 'Chart appearance', icon: Palette },

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

@@ -1,39 +0,0 @@
-import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { resolveSignal } from '../getBuilderQueries';
-
-function builderQuery(signal: string): DashboardtypesQueryDTO {
-	return {
-		spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { signal } } },
-	} as unknown as DashboardtypesQueryDTO;
-}
-
-const promqlQuery = {
-	spec: { plugin: { kind: 'signoz/PromQuery', spec: { query: 'up' } } },
-} as unknown as DashboardtypesQueryDTO;
-
-describe('resolveSignal', () => {
-	const DEFAULT = TelemetrytypesSignalDTO.metrics;
-
-	it("uses the first builder query's signal when present", () => {
-		expect(
-			resolveSignal([builderQuery('logs')], DEFAULT),
-		).toBe('logs');
-	});
-
-	it("prefers the builder signal over the default", () => {
-		expect(resolveSignal([builderQuery('traces')], DEFAULT)).toBe(
-			'traces',
-		);
-	});
-
-	it('falls back to the default signal when there are no queries (new panel)', () => {
-		expect(resolveSignal([], DEFAULT)).toBe('metrics');
-		expect(resolveSignal(null, DEFAULT)).toBe('metrics');
-	});
-
-	it('stays undefined when queries exist but none are builder queries (PromQL/ClickHouse)', () => {
-		expect(resolveSignal([promqlQuery], DEFAULT)).toBeUndefined();
-	});
-});

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

@@ -1,22 +0,0 @@
-import { resolveSpanGaps } from '../resolvers';
-
-describe('resolveSpanGaps', () => {
-	it('spans all gaps (true) when unset', () => {
-		expect(resolveSpanGaps(undefined)).toBe(true);
-		expect(resolveSpanGaps('')).toBe(true);
-	});
-
-	it('parses a duration string into seconds', () => {
-		expect(resolveSpanGaps('5s')).toBe(5);
-		expect(resolveSpanGaps('10m')).toBe(600);
-		expect(resolveSpanGaps('1h')).toBe(3600);
-	});
-
-	it('tolerates a bare seconds number (back-compat)', () => {
-		expect(resolveSpanGaps('600')).toBe(600);
-	});
-
-	it('falls back to true for unparseable input', () => {
-		expect(resolveSpanGaps('abc')).toBe(true);
-	});
-});

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

@@ -1,4 +1,3 @@
-import { rangeUtil } from '@grafana/data';
 import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
@@ -39,10 +38,9 @@ export function resolveDecimalPrecision(
 }
 
 /**
- * `spec.chartAppearance.spanGaps.fillLessThan` is a duration string on the wire
- * ("10m", "5s"). Empty/missing → span all gaps (default); otherwise forward the
- * threshold in seconds so uPlot only bridges short runs of nulls. Tolerates a
- * bare seconds number for back-compat.
+ * `spec.chartAppearance.spanGaps.fillLessThan` is a stringified number on the
+ * wire. Empty/missing → span all gaps (default); numeric → forward the threshold
+ * so uPlot only bridges short runs of nulls.
  */
 export function resolveSpanGaps(
 	fillLessThan: string | undefined,
@@ -50,10 +48,8 @@ export function resolveSpanGaps(
 	if (!fillLessThan) {
 		return true;
 	}
-	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)
-		? rangeUtil.intervalToSeconds(fillLessThan)
-		: Number(fillLessThan);
-	return Number.isFinite(seconds) && seconds > 0 ? seconds : true;
+	const parsed = Number(fillLessThan);
+	return Number.isFinite(parsed) ? parsed : true;
 }
 
 /** Legend position; missing/unknown falls back to `BOTTOM` (chart default, V1 parity). */

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

@@ -1,7 +1,4 @@
-import type {
-	DashboardtypesQueryDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
 import type { BuilderQuery } from 'types/api/v5/queryRange';
 
 /**
@@ -36,21 +33,3 @@ export function getBuilderQueries(
 	});
 	return flattened;
 }
-
-/**
- * Datasource signal scoping panel-type compatibility (List needs logs/traces, not
- * metrics): the builder query's signal if present; else `defaultSignal` for a new
- * panel (queries empty until edited); else undefined for PromQL/ClickHouse.
- */
-export function resolveSignal(
-	queries: DashboardtypesQueryDTO[] | null,
-	defaultSignal: TelemetrytypesSignalDTO,
-): TelemetrytypesSignalDTO | undefined {
-	const builderSignal = getBuilderQueries(queries ?? [])[0]?.signal as
-		| TelemetrytypesSignalDTO
-		| undefined;
-	if (builderSignal) {
-		return builderSignal;
-	}
-	return queries?.length ? undefined : defaultSignal;
-}

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

@@ -52,8 +52,6 @@ function section(
 }
 
 const TWO_TITLED_SECTIONS = [section(0, 'Overview'), section(1, 'Latency')];
-// Index 0 is the untitled root (free-flow) section; index 1 is a titled section.
-const TITLED_WITH_ROOT = [section(0, undefined), section(1, 'Latency')];
 
 const baseArgs = {
 	panelId: 'panel-1',
@@ -179,49 +177,6 @@ describe('usePanelActionItems', () => {
 		});
 	});
 
-	it('offers "Move out of section" for a panel in a titled section when an untitled root exists', () => {
-		const { result } = renderHook(() =>
-			usePanelActionItems({
-				...baseArgs,
-				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
-			}),
-		);
-		expect(itemKeys(result.current)).toContain('move-to-root');
-	});
-
-	it('"Move out of section" moves the panel to the untitled root section', () => {
-		const { result } = renderHook(() =>
-			usePanelActionItems({
-				...baseArgs,
-				panelActions: { currentLayoutIndex: 1, sections: TITLED_WITH_ROOT },
-			}),
-		);
-		const moveOut = result.current.items.find(
-			(i) => 'key' in i && i.key === 'move-to-root',
-		);
-		(moveOut as { onClick: () => void }).onClick();
-		expect(mockMovePanel).toHaveBeenCalledWith({
-			panelId: 'panel-1',
-			fromLayoutIndex: 1,
-			toLayoutIndex: 0,
-		});
-	});
-
-	it('hides "Move out of section" when the panel already sits in the root section', () => {
-		const { result } = renderHook(() =>
-			usePanelActionItems({
-				...baseArgs,
-				panelActions: { currentLayoutIndex: 0, sections: TITLED_WITH_ROOT },
-			}),
-		);
-		expect(itemKeys(result.current)).not.toContain('move-to-root');
-	});
-
-	it('hides "Move out of section" when every section is titled (no root)', () => {
-		const { result } = renderHook(() => usePanelActionItems(baseArgs));
-		expect(itemKeys(result.current)).not.toContain('move-to-root');
-	});
-
 	it('delete defers to a confirmation: the item opens the dialog, confirm runs the mutation', async () => {
 		const { result } = renderHook(() => usePanelActionItems(baseArgs));
 		const del = result.current.items.find(

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

@@ -4,7 +4,6 @@ import {
 	CloudDownload,
 	Copy,
 	FolderInput,
-	FolderOutput,
 	Fullscreen,
 	PenLine,
 	Trash2,
@@ -24,10 +23,7 @@ import type { DashboardSection } from '../../../utils';
 import type { PanelActionsConfig } from '../Panel';
 import { useClonePanel } from '../hooks/useClonePanel';
 import { useDeletePanel } from '../hooks/useDeletePanel';
-import {
-	type MovePanelArgs,
-	useMovePanelToSection,
-} from '../hooks/useMovePanelToSection';
+import { useMovePanelToSection } from '../hooks/useMovePanelToSection';
 import { PANEL_ACTION_META } from './panelActionMeta';
 import { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 
@@ -41,66 +37,6 @@ function notImplementedYet(feature: string): void {
 	alert(`${feature} option clicked`);
 }
 
-interface MoveItemsArgs {
-	sections: DashboardSection[];
-	currentLayoutIndex: number;
-	panelId: string;
-	movePanel: (args: MovePanelArgs) => Promise<void>;
-}
-
-/**
- * The "Move to section" submenu (other titled sections) plus a direct "Move out
- * of section" to the untitled root, shown only when the panel sits in a titled
- * section and a root section exists to receive it.
- */
-function buildMoveItems({
-	sections,
-	currentLayoutIndex,
-	panelId,
-	movePanel,
-}: MoveItemsArgs): MenuItem[] {
-	const targets = sections.filter(
-		(s) => s.title && s.layoutIndex !== currentLayoutIndex,
-	);
-	const items: MenuItem[] = [
-		{
-			key: 'move',
-			label: 'Move to section',
-			icon: <FolderInput size={14} />,
-			...(targets.length === 0
-				? { disabled: true }
-				: {
-						children: targets.map((s) => ({
-							key: `move-${s.layoutIndex}`,
-							label: s.title,
-							onClick: (): void =>
-								void movePanel({
-									panelId,
-									fromLayoutIndex: currentLayoutIndex,
-									toLayoutIndex: s.layoutIndex,
-								}),
-						})),
-					}),
-		},
-	];
-
-	const rootSection = sections.find((s) => !s.title);
-	if (rootSection && rootSection.layoutIndex !== currentLayoutIndex) {
-		items.push({
-			key: 'move-to-root',
-			label: 'Move out of section',
-			icon: <FolderOutput size={14} />,
-			onClick: (): void =>
-				void movePanel({
-					panelId,
-					fromLayoutIndex: currentLayoutIndex,
-					toLayoutIndex: rootSection.layoutIndex,
-				}),
-		});
-	}
-	return items;
-}
-
 interface UsePanelActionItemsArgs {
 	panelId: string;
 	/** Full plugin kind (e.g. `signoz/TimeSeriesPanel`); */
@@ -219,15 +155,31 @@ export function usePanelActionItems({
 			});
 		}
 
-		const moveGroup: MenuItem[] =
-			canMove && panelActions
-				? buildMoveItems({
-						sections,
-						currentLayoutIndex: panelActions.currentLayoutIndex,
-						panelId,
-						movePanel,
-					})
-				: [];
+		const moveGroup: MenuItem[] = [];
+		if (canMove && panelActions) {
+			const targets = sections.filter(
+				(s) => s.title && s.layoutIndex !== panelActions.currentLayoutIndex,
+			);
+			moveGroup.push({
+				key: 'move',
+				label: 'Move to section',
+				icon: <FolderInput size={14} />,
+				...(targets.length === 0
+					? { disabled: true }
+					: {
+							children: targets.map((s) => ({
+								key: `move-${s.layoutIndex}`,
+								label: s.title,
+								onClick: (): void =>
+									void movePanel({
+										panelId,
+										fromLayoutIndex: panelActions.currentLayoutIndex,
+										toLayoutIndex: s.layoutIndex,
+									}),
+							})),
+						}),
+			});
+		}
 
 		const deleteGroup: MenuItem[] =
 			canDelete && panelActions

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

@@ -8,7 +8,7 @@ import styles from './PanelTypeSelectionModal.module.scss';
 interface PanelTypeSelectionModalProps {
 	open: boolean;
 	onClose: () => void;
-	onSelect: (panelKind: PanelKind) => void;
+	onSelect: (pluginKind: PanelKind) => void;
 }
 
 function PanelTypeSelectionModal({
@@ -25,17 +25,17 @@ function PanelTypeSelectionModal({
 			destroyOnClose
 		>
 			<div className={styles.grid}>
-				{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
+				{PANEL_TYPES.map((type) => (
 					<Button
-						key={panelKind}
+						key={type.pluginKind}
 						type="button"
 						variant="ghost"
 						className={styles.typeButton}
-						data-testid={`panel-type-${panelKind}`}
-						onClick={(): void => onSelect(panelKind)}
+						data-testid={`panel-type-${type.pluginKind}`}
+						onClick={(): void => onSelect(type.pluginKind)}
 					>
-						<Icon size={14} />
-						{label}
+						{type.icon}
+						{type.label}
 					</Button>
 				))}
 			</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.ts

@@ -1,24 +0,0 @@
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import type { PanelType } from './types';
-
-export const PANEL_TYPES: PanelType[] = [
-	{
-		panelKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		Icon: ChartLine,
-	},
-	{ panelKind: 'signoz/NumberPanel', label: 'Number', Icon: Hash },
-	{ panelKind: 'signoz/TablePanel', label: 'Table', Icon: Table },
-	{ panelKind: 'signoz/BarChartPanel', label: 'Bar Chart', Icon: BarChart },
-	{ panelKind: 'signoz/PieChartPanel', label: 'Pie Chart', Icon: ChartPie },
-	{ panelKind: 'signoz/HistogramPanel', label: 'Histogram', Icon: BarChart },
-	{ panelKind: 'signoz/ListPanel', label: 'List', Icon: List },
-];

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

@@ -0,0 +1,36 @@
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import type { PanelType } from './types';
+
+export const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/types.ts

@@ -1,16 +1,7 @@
-import type { IconSize } from '@signozhq/icons';
-import type { ComponentType, SVGProps } from 'react';
-
 import type { PanelKind } from '../../../Panels/types/panelKind';
 
-type IconProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
-	size?: number | IconSize;
-	strokeWidth?: number;
-};
-
 export interface PanelType {
-	panelKind: PanelKind;
+	pluginKind: PanelKind;
 	label: string;
-	/** Icon component — the consumer renders it and controls size/color/etc. */
-	Icon: ComponentType<IconProps>;
+	icon: JSX.Element;
 }

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

@@ -63,10 +63,9 @@ describe('useClonePanel', () => {
 				op: 'add',
 				path: '/spec/layouts/0/spec/items/-',
 				value: {
-					// Same dimensions as the source panel (p1: 8x5). The last row is
-					// full (8 + 4 = 12 cols), so the 8-wide clone wraps to a fresh row
-					// at the section bottom: max(y + height) = 5.
+					// Same dimensions as the source panel (p1: 8x5).
 					x: 0,
+					// Bottom of the section: max(y + height) over existing items = 5.
 					y: 5,
 					width: 8,
 					height: 5,
@@ -76,27 +75,6 @@ describe('useClonePanel', () => {
 		]);
 	});
 
-	it('places the clone beside the last row when it fits', async () => {
-		const oneNarrowItem: DashboardSection[] = [
-			{
-				id: 'section-0',
-				layoutIndex: 0,
-				title: 'Overview',
-				repeatVariable: undefined,
-				items: [{ id: 'p1', x: 0, y: 0, width: 4, height: 5, panel: sourcePanel }],
-			},
-		];
-		const { result } = renderHook(() =>
-			useClonePanel({ sections: oneNarrowItem }),
-		);
-
-		await result.current({ panelId: 'p1', layoutIndex: 0 });
-
-		const ops = mockPatch.mock.calls[0][1];
-		// Room in the last row (4 + 4 = 8 ≤ 12 cols) → sits to the right at y:0.
-		expect(ops[1].value).toMatchObject({ x: 4, y: 0, width: 4, height: 5 });
-	});
-
 	it('deep-copies the spec — the cloned value is not the same object reference', async () => {
 		const { result } = renderHook(() => useClonePanel({ sections: sections() }));
 

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

@@ -5,11 +5,7 @@ import { v4 as uuid } from 'uuid';
 
 import { patchDashboardV2 } from 'api/generated/services/dashboard';
 
-import {
-	addPanelToSectionOps,
-	findFreeSlot,
-	panelRef,
-} from '../../../patchOps';
+import { addPanelToSectionOps, panelRef } from '../../../patchOps';
 import { useDashboardStore } from '../../../store/useDashboardStore';
 import type { DashboardSection } from '../../../utils';
 
@@ -24,9 +20,8 @@ export interface ClonePanelArgs {
 
 /**
  * Duplicates a panel: deep-copies the source spec under a fresh id and drops a
- * same-size grid item into the section via `findFreeSlot` (beside the last row
- * if it fits, else a fresh row), as one atomic patch. Mirrors V1's clone
- * (verbatim spec copy, no rename).
+ * same-size grid item at the bottom of the section, as one atomic patch. Mirrors
+ * V1's clone (verbatim spec copy, no rename).
  */
 export function useClonePanel({
 	sections,
@@ -43,7 +38,10 @@ export function useClonePanel({
 			}
 
 			const newPanelId = uuid();
-			const { x, y } = findFreeSlot(section.items, source.width);
+			const nextY = section.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
 
 			const clone = patchDashboardV2(
 				{ id: dashboardId },
@@ -52,8 +50,8 @@ export function useClonePanel({
 					panel: cloneDeep(source.panel),
 					layoutIndex,
 					item: {
-						x,
-						y,
+						x: 0,
+						y: nextY,
 						width: source.width,
 						height: source.height,
 						content: { $ref: panelRef(newPanelId) },

frontend/src/pages/DashboardPageV2/DashboardContainer/__tests__/patchOps.test.ts

@@ -107,7 +107,7 @@ describe('createPanelOps', () => {
 		expect(value.y).toBe(6);
 	});
 
-	it('falls back to the root (first) section when no index is requested', () => {
+	it('falls back to the last section when no index is requested', () => {
 		const layouts = [section([]), section([item(0, 6)])];
 		const ops = createPanelOps({
 			layouts,
@@ -116,11 +116,11 @@ describe('createPanelOps', () => {
 			panel,
 		});
 
-		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
+		expect(ops[1].path).toBe('/spec/layouts/1/spec/items/-');
 	});
 
-	it('falls back to the root (first) section when the requested index is out of range', () => {
-		const layouts = [section([item(0, 6)]), section([])];
+	it('falls back to the last section when the requested index is out of range', () => {
+		const layouts = [section([])];
 		const ops = createPanelOps({ layouts, layoutIndex: 5, panelId: 'p1', panel });
 		expect(ops[1].path).toBe('/spec/layouts/0/spec/items/-');
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -121,7 +121,7 @@ export function addPanelToSectionOps({
 interface CreatePanelOpsArgs {
 	/** Current sections, used to resolve the target and the next free row. */
 	layouts: DashboardtypesLayoutDTO[];
-	/** Preferred section (from a section's "Add panel" trigger); falls back to the root (first) section. */
+	/** Preferred section (from the "Add panel" trigger); falls back to the last. */
 	layoutIndex: number | undefined;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
@@ -132,16 +132,13 @@ const NEW_PANEL_SIZE = { width: 6, height: 6 };
 /** Columns in the section grid — mirrors `cols` on SectionGrid's GridLayout. */
 const GRID_COLS = 12;
 
-/** Minimal placement fields shared by grid-item DTOs and flattened `GridItem`s. */
-type PlacedItem = Pick<DashboardGridItemDTO, 'x' | 'y' | 'width' | 'height'>;
-
 /**
  * Placement for a new grid item: drop it right of the last row if there's room,
  * else wrap to a fresh row at the bottom. Only the last row is considered (items
  * sharing the greatest top-y); gaps in earlier rows are left alone.
  */
-export function findFreeSlot(
-	items: PlacedItem[],
+function findFreeSlot(
+	items: DashboardGridItemDTO[],
 	width: number,
 ): { x: number; y: number } {
 	const w = Math.min(width, GRID_COLS);
@@ -166,8 +163,8 @@ export function findFreeSlot(
 
 /**
  * Ops to persist a brand-new panel (editor save path): resolve the target
- * section (requested index if valid, else the root/first section, else a
- * freshly-created one) and place the panel via `findFreeSlot`.
+ * section (requested index if valid, else last, else a freshly-created one) and
+ * place the panel via `findFreeSlot`.
  */
 export function createPanelOps({
 	layouts,
@@ -177,17 +174,14 @@ export function createPanelOps({
 }: CreatePanelOpsArgs): DashboardtypesJSONPatchOperationDTO[] {
 	const ops: DashboardtypesJSONPatchOperationDTO[] = [];
 
-	let targetIndex: number;
-	let items: DashboardGridItemDTO[];
-	if (layoutIndex !== undefined && layouts[layoutIndex] !== undefined) {
-		// Explicit section — a section's own "New Panel" trigger.
-		targetIndex = layoutIndex;
-		items = layouts[layoutIndex]?.spec.items ?? [];
-	} else if (layouts.length > 0) {
-		// No section specified (toolbar "New Panel") → the root (first) section.
-		targetIndex = 0;
-		items = layouts[0]?.spec.items ?? [];
-	} else {
+	const requested =
+		layoutIndex !== undefined && layouts[layoutIndex] !== undefined
+			? layoutIndex
+			: layouts.length - 1;
+
+	let targetIndex = requested;
+	let items: DashboardGridItemDTO[] = layouts[requested]?.spec.items ?? [];
+	if (targetIndex < 0) {
 		// No sections yet — create an untitled one and target it.
 		ops.push(addSectionOp(''));
 		targetIndex = 0;

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

@@ -137,3 +137,13 @@ export function layoutsToSections(
 		})
 		.filter((s): s is DashboardSection => s !== null);
 }
+
+export function getPanelKindLabel(
+	panel: DashboardtypesPanelDTO | undefined,
+): string {
+	const kind = panel?.spec?.plugin?.kind;
+	if (!kind) {
+		return 'unknown';
+	}
+	return kind.replace(/^signoz\//, '');
+}

pkg/transition/migrate_common.go

@@ -10,6 +10,7 @@ import (
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/telemetrytraces"
+	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 type migrateCommon struct {
@@ -23,119 +24,10 @@ func NewMigrateCommon(logger *slog.Logger) *migrateCommon {
 	}
 }
 
+// WrapInV5Envelope delegates to querybuildertypesv5.WrapInV5Envelope; the
+// transform is stateless and shared with the v1→v2 dashboard conversion.
 func (migration *migrateCommon) WrapInV5Envelope(name string, queryMap map[string]any, queryType string) map[string]any {
-	// Create a properly structured v5 query
-	v5Query := map[string]any{
-		"name":     name,
-		"disabled": queryMap["disabled"],
-		"legend":   queryMap["legend"],
-	}
-
-	if name != queryMap["expression"] {
-		// formula
-		queryType = "builder_formula"
-		v5Query["expression"] = queryMap["expression"]
-		if functions, ok := queryMap["functions"]; ok {
-			v5Query["functions"] = functions
-		}
-		return map[string]any{
-			"type": queryType,
-			"spec": v5Query,
-		}
-	}
-
-	// Add signal based on data source
-	if dataSource, ok := queryMap["dataSource"].(string); ok {
-		switch dataSource {
-		case "traces":
-			v5Query["signal"] = "traces"
-		case "logs":
-			v5Query["signal"] = "logs"
-		case "metrics":
-			v5Query["signal"] = "metrics"
-		}
-	}
-
-	if stepInterval, ok := queryMap["stepInterval"]; ok {
-		v5Query["stepInterval"] = stepInterval
-	}
-
-	if aggregations, ok := queryMap["aggregations"]; ok {
-		v5Query["aggregations"] = aggregations
-	}
-
-	if filter, ok := queryMap["filter"]; ok {
-		v5Query["filter"] = filter
-	}
-
-	// Copy groupBy with proper structure
-	if groupBy, ok := queryMap["groupBy"].([]any); ok {
-		v5GroupBy := make([]any, len(groupBy))
-		for i, gb := range groupBy {
-			if gbMap, ok := gb.(map[string]any); ok {
-				v5GroupBy[i] = map[string]any{
-					"name":          gbMap["key"],
-					"fieldDataType": gbMap["dataType"],
-					"fieldContext":  gbMap["type"],
-				}
-			}
-		}
-		v5Query["groupBy"] = v5GroupBy
-	}
-
-	// Copy orderBy with proper structure
-	if orderBy, ok := queryMap["orderBy"].([]any); ok {
-		v5OrderBy := make([]any, len(orderBy))
-		for i, ob := range orderBy {
-			if obMap, ok := ob.(map[string]any); ok {
-				v5OrderBy[i] = map[string]any{
-					"key": map[string]any{
-						"name":          obMap["columnName"],
-						"fieldDataType": obMap["dataType"],
-						"fieldContext":  obMap["type"],
-					},
-					"direction": obMap["order"],
-				}
-			}
-		}
-		v5Query["order"] = v5OrderBy
-	}
-
-	// Copy selectColumns as selectFields
-	if selectColumns, ok := queryMap["selectColumns"].([]any); ok {
-		v5SelectFields := make([]any, len(selectColumns))
-		for i, col := range selectColumns {
-			if colMap, ok := col.(map[string]any); ok {
-				v5SelectFields[i] = map[string]any{
-					"name":          colMap["key"],
-					"fieldDataType": colMap["dataType"],
-					"fieldContext":  colMap["type"],
-				}
-			}
-		}
-		v5Query["selectFields"] = v5SelectFields
-	}
-
-	// Copy limit and offset
-	if limit, ok := queryMap["limit"]; ok {
-		v5Query["limit"] = limit
-	}
-	if offset, ok := queryMap["offset"]; ok {
-		v5Query["offset"] = offset
-	}
-
-	if having, ok := queryMap["having"]; ok {
-		v5Query["having"] = having
-	}
-
-	if functions, ok := queryMap["functions"]; ok {
-		v5Query["functions"] = functions
-	}
-
-	return map[string]any{
-		"type": queryType,
-		"spec": v5Query,
-	}
+	return querybuildertypesv5.WrapInV5Envelope(name, queryMap, queryType)
 }
 
 func (mc *migrateCommon) updateQueryData(ctx context.Context, queryData map[string]any, version, widgetType string) bool {

pkg/types/dashboardtypes/dashboard.go

@@ -7,7 +7,6 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/transition"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
@@ -22,6 +21,7 @@ var (
 	ErrCodeDashboardInvalidSource      = errors.MustNewCode("dashboard_invalid_source")
 	ErrCodeDashboardImmutable          = errors.MustNewCode("dashboard_immutable")
 	ErrCodeDashboardInvalidPatch       = errors.MustNewCode("dashboard_invalid_patch")
+	ErrCodeDashboardMigrationFailed    = errors.MustNewCode("dashboard_migration_failed")
 )
 
 type StorableDashboard struct {
@@ -406,27 +406,26 @@ func (dashboard *Dashboard) GetWidgetQuery(startTime, endTime, widgetIndex uint6
 	widgetData := data.Widgets[widgetIndex]
 	switch widgetData.Query.QueryType {
 	case "builder":
-		migrate := transition.NewMigrateCommon(logger)
 		for _, query := range widgetData.Query.Builder.QueryData {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_query"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_query"))
 		}
 		for _, query := range widgetData.Query.Builder.QueryFormulas {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_formula"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_formula"))
 		}
 		for _, query := range widgetData.Query.Builder.QueryTraceOperator {
 			queryName, ok := query["queryName"].(string)
 			if !ok {
 				return nil, errors.New(errors.TypeInvalidInput, ErrCodeDashboardInvalidWidgetQuery, "cannot type cast query name as string")
 			}
-			compositeQueries = append(compositeQueries, migrate.WrapInV5Envelope(queryName, query, "builder_trace_operator"))
+			compositeQueries = append(compositeQueries, querybuildertypesv5.WrapInV5Envelope(queryName, query, "builder_trace_operator"))
 		}
 	case "clickhouse_sql":
 		for _, query := range widgetData.Query.ClickhouseSQL {

pkg/types/dashboardtypes/perses_v1_to_v2.go

@@ -0,0 +1,82 @@
+package dashboardtypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+// V1 → V2 migration. The v1 storable shape is the frontend's `DashboardData`
+// (see frontend/src/types/api/dashboard/getAll.ts); v2 is DashboardV2 /
+// DashboardSpec.
+//
+// Assumes the v1 widget query data has already been migrated to v5 shape
+// (transition.dashboardMigrateV5). Pre-v5 builder queries will produce
+// invalid v2 envelopes — run the v4→v5 migration first.
+//
+// The conversion is split across sibling files by concern:
+//   - perses_v1_to_v2_tags.go      tags
+//   - perses_v1_to_v2_panels.go    widgets → panels (+ panel field mappers)
+//   - perses_v1_to_v2_queries.go   widget queries
+//   - perses_v1_to_v2_layouts.go   grid layouts and sections
+//   - perses_v1_to_v2_variables.go variables
+//   - perses_v1_to_v2_decoder.go   v1Decoder: typed field reads + malformed-field detection
+
+// ══════════════════════════════════════════════
+// Entry point
+// ══════════════════════════════════════════════
+
+func (storable StorableDashboard) IsV2() bool {
+	metadata, _ := storable.Data["metadata"].(map[string]any)
+	if metadata == nil {
+		return false
+	}
+	version, _ := metadata["schemaVersion"].(string)
+	return version == SchemaVersion
+}
+
+func (storable StorableDashboard) ConvertV1ToV2() (result *DashboardV2, err error) {
+	// Legacy v1 data can be arbitrarily malformed. The accessors degrade
+	// gracefully, but recover from any unforeseen panic so one bad dashboard
+	// surfaces as an error (to be logged and skipped) rather than crashing the run.
+	defer func() {
+		if r := recover(); r != nil {
+			result, err = nil, errors.Newf(errors.TypeInternal, ErrCodeDashboardMigrationFailed, "panic converting dashboard %s: %v", storable.ID, r)
+		}
+	}()
+
+	if storable.IsV2() {
+		return nil, errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardMigrationFailed, "dashboard %s is already in %s schema", storable.ID, SchemaVersion)
+	}
+
+	d := &v1Decoder{}
+	title := d.readString(storable.Data, "title")
+	description := d.readString(storable.Data, "description")
+	image := d.readString(storable.Data, "image")
+
+	spec := DashboardSpec{
+		Display:   Display{Name: title, Description: description},
+		Variables: d.convertV1Variables(storable.Data["variables"]),
+		Panels:    d.convertV1Panels(storable.Data["widgets"]),
+		Layouts:   d.convertV1Layouts(storable.Data),
+	}
+	tags := d.convertV1TagsForOrg(storable.OrgID, storable.Data["tags"])
+
+	if err := d.errIfHasMalformedFields(); err != nil {
+		return nil, err
+	}
+
+	return &DashboardV2{
+		Identifiable:  storable.Identifiable,
+		TimeAuditable: storable.TimeAuditable,
+		UserAuditable: storable.UserAuditable,
+		OrgID:         storable.OrgID,
+		Locked:        storable.Locked,
+		Source:        storable.Source,
+		DashboardV2MetadataBase: DashboardV2MetadataBase{
+			SchemaVersion: SchemaVersion,
+			Image:         image,
+		},
+		Name: generateDashboardName(title),
+		Tags: tags,
+		Spec: spec,
+	}, nil
+}

pkg/types/dashboardtypes/perses_v1_to_v2_decoder.go

@@ -0,0 +1,146 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"fmt"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+// ══════════════════════════════════════════════
+// v1 decoder
+// ══════════════════════════════════════════════
+
+// v1Decoder reads fields out of the untyped v1 dashboard blob. Every read*
+// method follows the same contract: a field that is absent or null yields the
+// zero value; a field present with the wrong type yields zero AND records a
+// malformed-field error. Conversion proceeds (so one bad field doesn't abort
+// the rest) and ConvertV1ToV2 returns d.malformedFieldsErr() at the end so the
+// dashboard is logged and skipped.
+//
+// Polymorphic v1 fields (spanGaps bool|number, selectedValue string|array, …)
+// are read with a type switch on the already-extracted value, never through
+// these accessors, so they stay lenient by construction.
+type v1Decoder struct {
+	bad  []string
+	seen map[string]struct{}
+}
+
+// note records a decoding problem (malformed field, unknown value, swallowed
+// sub-parse error), deduping identical messages. ConvertV1ToV2 surfaces these
+// via errIfHasMalformedFields.
+func (d *v1Decoder) note(format string, args ...any) {
+	msg := fmt.Sprintf(format, args...)
+	if _, dup := d.seen[msg]; dup {
+		return
+	}
+	if d.seen == nil {
+		d.seen = make(map[string]struct{})
+	}
+	d.seen[msg] = struct{}{}
+	d.bad = append(d.bad, msg)
+}
+
+// noteMalformedField records a v1 field present with the wrong Go type.
+func (d *v1Decoder) noteMalformedField(field string, raw any) {
+	d.note("%q has unexpected type %T", field, raw)
+}
+
+func (d *v1Decoder) errIfHasMalformedFields() error {
+	if len(d.bad) == 0 {
+		return nil
+	}
+	return errors.Newf(errors.TypeInvalidInput, ErrCodeDashboardInvalidData, "malformed v1 dashboard fields: %s", strings.Join(d.bad, "; "))
+}
+
+func readField[T any](d *v1Decoder, m map[string]any, key string) T {
+	var zero T
+	v, present := m[key]
+	if !present || v == nil {
+		return zero
+	}
+	t, ok := v.(T)
+	if !ok {
+		d.noteMalformedField(key, v)
+		return zero
+	}
+	return t
+}
+
+func (d *v1Decoder) readString(m map[string]any, key string) string {
+	return readField[string](d, m, key)
+}
+func (d *v1Decoder) readFloat(m map[string]any, key string) float64 {
+	return readField[float64](d, m, key)
+}
+func (d *v1Decoder) readBool(m map[string]any, key string) bool   { return readField[bool](d, m, key) }
+func (d *v1Decoder) readArray(m map[string]any, key string) []any { return readField[[]any](d, m, key) }
+func (d *v1Decoder) readObject(m map[string]any, key string) map[string]any {
+	return readField[map[string]any](d, m, key)
+}
+
+// readInt narrows a numeric field to int (JSON numbers decode as float64).
+func (d *v1Decoder) readInt(m map[string]any, key string) int { return int(d.readFloat(m, key)) }
+
+func (d *v1Decoder) readFloatPtr(m map[string]any, key string) *float64 {
+	v, present := m[key]
+	if !present || v == nil {
+		return nil
+	}
+	f, ok := v.(float64)
+	if !ok {
+		d.noteMalformedField(key, v)
+		return nil
+	}
+	return &f
+}
+
+func (d *v1Decoder) readStringMap(m map[string]any, key string) map[string]string {
+	raw := d.readObject(m, key)
+	if len(raw) == 0 {
+		return nil
+	}
+	out := make(map[string]string, len(raw))
+	for k, v := range raw {
+		s, ok := v.(string)
+		if !ok {
+			d.noteMalformedField(key+"."+k, v)
+			continue
+		}
+		out[k] = s
+	}
+	return out
+}
+
+func (d *v1Decoder) readObjects(m map[string]any, key string) []map[string]any {
+	raw := d.readArray(m, key)
+	if len(raw) == 0 {
+		return nil
+	}
+	out := make([]map[string]any, 0, len(raw))
+	for i, item := range raw {
+		obj, ok := item.(map[string]any)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("%s[%d]", key, i), item)
+			continue
+		}
+		out = append(out, obj)
+	}
+	return out
+}
+
+// decodeMapInto converts an untyped map[string]any into a typed T by
+// round-tripping through JSON, letting encoding/json (struct tags, custom
+// UnmarshalJSON) do the field mapping instead of hand-copying out of the map.
+func decodeMapInto[T any](src map[string]any) (T, error) {
+	var dst T
+	bytes, err := json.Marshal(src)
+	if err != nil {
+		return dst, err
+	}
+	if err := json.Unmarshal(bytes, &dst); err != nil {
+		return dst, err
+	}
+	return dst, nil
+}

pkg/types/dashboardtypes/perses_v1_to_v2_layouts.go

@@ -0,0 +1,139 @@
+package dashboardtypes
+
+import (
+	"fmt"
+	"sort"
+
+	"github.com/perses/spec/go/common"
+	"github.com/perses/spec/go/dashboard"
+)
+
+// ══════════════════════════════════════════════
+// Layouts (data.layout + data.panelMap)
+// ══════════════════════════════════════════════
+
+// convertV1Layouts groups v1 react-grid-layout entries into v2 grid layouts.
+// Membership is positional (as the frontend renders): each row widget owns the
+// panels below it until the next row; panels above the first row form an unnamed
+// grid with no section header. Collapsed rows are the exception — their children
+// live in panelMap[rowID].widgets, not `layout`.
+func (d *v1Decoder) convertV1Layouts(data StorableDashboardData) []Layout {
+	layout := d.readObjects(data, "layout")
+	if len(layout) == 0 {
+		return nil
+	}
+
+	rows := d.extractRowsAndCollapsedWidgets(data)
+
+	// Skip collapsed-row children a malformed dashboard lists in `layout` too.
+	isWidgetCollapsed := make(map[string]bool)
+	for _, row := range rows {
+		for _, child := range row.collapsedWidgets {
+			if id := d.readString(child, "i"); id != "" {
+				isWidgetCollapsed[id] = true
+			}
+		}
+	}
+
+	d.sortByPosition(layout)
+
+	type section struct {
+		row   *rowInfo // nil for the unnamed grid of ungrouped panels
+		items []map[string]any
+	}
+	topSectionWithoutHeader := &section{}
+	sectionsWithHeader := make([]*section, 0, len(rows))
+	currentRowHeader := topSectionWithoutHeader
+	for _, item := range layout {
+		id := d.readString(item, "i")
+		if id == "" || isWidgetCollapsed[id] {
+			continue
+		}
+		if row, ok := rows[id]; ok {
+			newRowHeader := &section{row: row, items: row.collapsedWidgets}
+			sectionsWithHeader = append(sectionsWithHeader, newRowHeader)
+			// A collapsed row owns only its stashed children; later panels → ungrouped.
+			if row.collapsed {
+				currentRowHeader = topSectionWithoutHeader
+			} else {
+				currentRowHeader = newRowHeader
+			}
+			continue
+		}
+		currentRowHeader.items = append(currentRowHeader.items, item)
+	}
+
+	out := make([]Layout, 0, len(sectionsWithHeader)+1)
+	if len(topSectionWithoutHeader.items) > 0 {
+		out = append(out, d.buildV2GridLayout(nil, topSectionWithoutHeader.items))
+	}
+	for _, sec := range sectionsWithHeader {
+		out = append(out, d.buildV2GridLayout(sec.row, sec.items))
+	}
+	return out
+}
+
+type rowInfo struct {
+	title            string
+	collapsed        bool
+	collapsedWidgets []map[string]any
+}
+
+// extractRowsAndCollapsedWidgets returns the row widgets keyed by id; collapsed
+// rows also carry their children stashed under panelMap[id].widgets.
+func (d *v1Decoder) extractRowsAndCollapsedWidgets(data StorableDashboardData) map[string]*rowInfo {
+	panelMap := d.readObject(data, "panelMap")
+	rows := make(map[string]*rowInfo)
+	for _, w := range d.readObjects(data, "widgets") {
+		id := d.readString(w, "id")
+		if d.readString(w, "panelTypes") != "row" || id == "" {
+			continue
+		}
+		row := &rowInfo{title: d.readString(w, "title")}
+		if pm := d.readObject(panelMap, id); pm != nil && d.readBool(pm, "collapsed") {
+			row.collapsed = true
+			row.collapsedWidgets = d.readObjects(pm, "widgets")
+		}
+		rows[id] = row
+	}
+	return rows
+}
+
+// buildV2GridLayout builds one v2 grid. row is nil for the unnamed grid (no
+// display); otherwise the grid takes the row's title and collapse state. Items
+// are sorted by (y, x) and their y's normalized so the topmost sits at 0.
+func (d *v1Decoder) buildV2GridLayout(row *rowInfo, items []map[string]any) Layout {
+	d.sortByPosition(items)
+
+	spec := dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, 0, len(items))}
+	if row != nil {
+		spec.Display = &dashboard.GridLayoutDisplay{
+			Title:    row.title,
+			Collapse: &dashboard.GridLayoutCollapse{Open: !row.collapsed},
+		}
+	}
+
+	minY := 0
+	if len(items) > 0 {
+		minY = d.readInt(items[0], "y") // sorted by y, so the first item is topmost
+	}
+	for _, item := range items {
+		spec.Items = append(spec.Items, dashboard.GridItem{
+			X:       d.readInt(item, "x"),
+			Y:       d.readInt(item, "y") - minY,
+			Width:   d.readInt(item, "w"),
+			Height:  d.readInt(item, "h"),
+			Content: &common.JSONRef{Ref: fmt.Sprintf("#/spec/panels/%s", d.readString(item, "i"))},
+		})
+	}
+	return Layout{Kind: dashboard.KindGridLayout, Spec: &spec}
+}
+
+func (d *v1Decoder) sortByPosition(items []map[string]any) {
+	sort.SliceStable(items, func(i, j int) bool {
+		if yi, yj := d.readInt(items[i], "y"), d.readInt(items[j], "y"); yi != yj {
+			return yi < yj
+		}
+		return d.readInt(items[i], "x") < d.readInt(items[j], "x")
+	})
+}

pkg/types/dashboardtypes/perses_v1_to_v2_panels.go

@@ -0,0 +1,452 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"fmt"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// ══════════════════════════════════════════════
+// Widgets → Panels
+// ══════════════════════════════════════════════
+
+// convertV1Panels walks the v1 `widgets` array and produces v2 panels keyed by
+// the v1 widget id. WidgetRow entries (panelTypes == "row") are dropped here
+// and consumed by convertV1Layouts as section headers.
+func (d *v1Decoder) convertV1Panels(raw any) map[string]*Panel {
+	if raw == nil {
+		return nil
+	}
+	widgetsRaw, ok := raw.([]any)
+	if !ok {
+		d.noteMalformedField("widgets", raw)
+		return nil
+	}
+	panels := make(map[string]*Panel, len(widgetsRaw))
+	for i, widgetRaw := range widgetsRaw {
+		widget, ok := widgetRaw.(map[string]any)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("widgets[%d]", i), widgetRaw)
+			continue
+		}
+		id := d.readString(widget, "id")
+		if id == "" {
+			continue
+		}
+		var panel *Panel
+		panelType := d.readString(widget, "panelTypes")
+		switch panelType {
+		case "graph":
+			panel = d.convertGraphWidget(widget)
+		case "bar":
+			panel = d.convertBarWidget(widget)
+		case "value":
+			panel = d.convertValueWidget(widget)
+		case "pie":
+			panel = d.convertPieWidget(widget)
+		case "table":
+			panel = d.convertTableWidget(widget)
+		case "histogram":
+			panel = d.convertHistogramWidget(widget)
+		case "list":
+			panel = d.convertListWidget(widget)
+		case "row":
+			// "row" (section header) is handled by the layout pass;
+			continue
+		default:
+			d.note("widgets[%d] has unknown panel type %q", i, panelType)
+		}
+		if panel == nil {
+			continue
+		}
+		panels[id] = panel
+	}
+	return panels
+}
+
+func (d *v1Decoder) convertGraphWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindTimeSeries,
+				Spec: &TimeSeriesPanelSpec{
+					Visualization: TimeSeriesVisualization{
+						BasicVisualization: d.basicVisualization(w),
+						FillSpans:          d.readBool(w, "fillSpans"),
+					},
+					Formatting: d.panelFormatting(w),
+					ChartAppearance: TimeSeriesChartAppearance{
+						LineInterpolation: mapV1Enum(d.readString(w, "lineInterpolation"), LineInterpolationSpline,
+							LineInterpolationLinear, LineInterpolationSpline, LineInterpolationStepAfter, LineInterpolationStepBefore),
+						ShowPoints: d.readBool(w, "showPoints"),
+						LineStyle:  mapV1Enum(d.readString(w, "lineStyle"), LineStyleSolid, LineStyleSolid, LineStyleDashed),
+						FillMode:   mapV1Enum(d.readString(w, "fillMode"), FillModeSolid, FillModeSolid, FillModeGradient, FillModeNone),
+						SpanGaps:   mapV1SpanGaps(w["spanGaps"]),
+					},
+					Axes:       d.axesFromWidget(w),
+					Legend:     d.legendFromWidget(w),
+					Thresholds: d.mapV1ThresholdsWithLabel(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindTimeSeries),
+		},
+	}
+}
+
+func (d *v1Decoder) convertBarWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindBarChart,
+				Spec: &BarChartPanelSpec{
+					Visualization: BarChartVisualization{
+						BasicVisualization: d.basicVisualization(w),
+						FillSpans:          d.readBool(w, "fillSpans"),
+						StackedBarChart:    d.readBool(w, "stackedBarChart"),
+					},
+					Formatting: d.panelFormatting(w),
+					Axes:       d.axesFromWidget(w),
+					Legend:     d.legendFromWidget(w),
+					Thresholds: d.mapV1ThresholdsWithLabel(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindBarChart),
+		},
+	}
+}
+
+func (d *v1Decoder) convertValueWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindNumber,
+				Spec: &NumberPanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting:    d.panelFormatting(w),
+					Thresholds:    d.mapV1ComparisonThresholds(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindNumber),
+		},
+	}
+}
+
+func (d *v1Decoder) convertPieWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindPieChart,
+				Spec: &PieChartPanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting:    d.panelFormatting(w),
+					Legend:        d.legendFromWidget(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindPieChart),
+		},
+	}
+}
+
+func (d *v1Decoder) convertTableWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindTable,
+				Spec: &TablePanelSpec{
+					Visualization: d.basicVisualization(w),
+					Formatting: TableFormatting{
+						ColumnUnits:      d.readStringMap(w, "columnUnits"),
+						DecimalPrecision: mapV1Precision(w["decimalPrecision"]),
+					},
+					Thresholds: d.mapV1TableThresholds(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindTable),
+		},
+	}
+}
+
+func (d *v1Decoder) convertHistogramWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindHistogram,
+				Spec: &HistogramPanelSpec{
+					HistogramBuckets: HistogramBuckets{
+						BucketCount:           d.readFloatPtr(w, "bucketCount"),
+						BucketWidth:           d.readFloatPtr(w, "bucketWidth"),
+						MergeAllActiveQueries: d.readBool(w, "mergeAllActiveQueries"),
+					},
+					Legend: d.legendFromWidget(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindHistogram),
+		},
+	}
+}
+
+func (d *v1Decoder) convertListWidget(w map[string]any) *Panel {
+	return &Panel{
+		Kind: "Panel",
+		Spec: PanelSpec{
+			Display: d.widgetDisplay(w),
+			Plugin: PanelPlugin{
+				Kind: PanelKindList,
+				Spec: &ListPanelSpec{
+					SelectFields: d.mapV1SelectFields(w),
+				},
+			},
+			Queries: d.convertV1WidgetQuery(w, PanelKindList),
+		},
+	}
+}
+
+// ══════════════════════════════════════════════
+// Panel-spec shared helpers
+// ══════════════════════════════════════════════
+
+func (d *v1Decoder) widgetDisplay(w map[string]any) Display {
+	return Display{Name: d.readString(w, "title"), Description: d.readString(w, "description")}
+}
+
+func (d *v1Decoder) basicVisualization(w map[string]any) BasicVisualization {
+	return BasicVisualization{TimePreference: mapV1TimePreference(d.readString(w, "timePreferance"))}
+}
+
+func (d *v1Decoder) panelFormatting(w map[string]any) PanelFormatting {
+	return PanelFormatting{Unit: d.readString(w, "yAxisUnit"), DecimalPrecision: mapV1Precision(w["decimalPrecision"])}
+}
+
+func (d *v1Decoder) axesFromWidget(w map[string]any) Axes {
+	return Axes{
+		SoftMin:    d.readFloatPtr(w, "softMin"),
+		SoftMax:    d.readFloatPtr(w, "softMax"),
+		IsLogScale: d.readBool(w, "isLogScale"),
+	}
+}
+
+func (d *v1Decoder) legendFromWidget(w map[string]any) Legend {
+	return Legend{
+		Position:     mapV1Enum(d.readString(w, "legendPosition"), LegendPositionBottom, LegendPositionBottom, LegendPositionRight),
+		CustomColors: d.readStringMap(w, "customLegendColors"),
+	}
+}
+
+func (d *v1Decoder) mapV1SelectFields(w map[string]any) []telemetrytypes.TelemetryFieldKey {
+	if raw := d.readArray(w, "selectedLogFields"); len(raw) > 0 {
+		return decodeTelemetryFields(raw)
+	}
+	if raw := d.readArray(w, "selectedTracesFields"); len(raw) > 0 {
+		return decodeTelemetryFields(raw)
+	}
+	return nil
+}
+
+func decodeTelemetryFields(raw []any) []telemetrytypes.TelemetryFieldKey {
+	bytes, err := json.Marshal(raw)
+	if err != nil {
+		return nil
+	}
+	var fields []telemetrytypes.TelemetryFieldKey
+	if err := json.Unmarshal(bytes, &fields); err != nil {
+		return nil
+	}
+	return fields
+}
+
+// ══════════════════════════════════════════════
+// Panel field mappers
+// ══════════════════════════════════════════════
+
+// v1 stores timePreferance as `GLOBAL_TIME`, `LAST_5_MIN`, … (see
+// frontend/src/container/NewWidget/RightContainer/timeItems.ts). v2 uses the
+// lowercase form, so the translation is just downcase.
+func mapV1TimePreference(s string) TimePreference {
+	if s == "" {
+		return TimePreferenceGlobalTime
+	}
+	candidate := TimePreference{valuer.NewString(strings.ToLower(s))}
+	for _, allowed := range candidate.Enum() {
+		if allowed == candidate {
+			return candidate
+		}
+	}
+	return TimePreferenceGlobalTime
+}
+
+// mapV1Precision is polymorphic (string|number), so it type-switches the raw
+// value rather than reading through a typed accessor.
+func mapV1Precision(raw any) PrecisionOption {
+	switch v := raw.(type) {
+	case string:
+		candidate := PrecisionOption{valuer.NewString(v)}
+		for _, allowed := range candidate.Enum() {
+			if allowed == candidate {
+				return candidate
+			}
+		}
+	case float64:
+		n := int(v)
+		if n >= 0 && n <= 4 {
+			return PrecisionOption{valuer.NewString(strconv.Itoa(n))}
+		}
+	}
+	return PrecisionOption2
+}
+
+// mapV1Enum picks the v1 string value if it matches one of the allowed v2
+// values, otherwise returns the fallback. v1 frontend enums (lineInterpolation,
+// lineStyle, fillMode, legendPosition) already use the v2 lowercase form.
+func mapV1Enum[T interface{ StringValue() string }](s string, fallback T, allowed ...T) T {
+	if s == "" {
+		return fallback
+	}
+	for _, a := range allowed {
+		if a.StringValue() == s {
+			return a
+		}
+	}
+	return fallback
+}
+
+// v1 spanGaps is `boolean | number`. true → span every gap; false → never span;
+// a number is interpreted (per frontend SeriesProps.spanGaps docs) as an
+// X-axis threshold in seconds. Polymorphic, so it type-switches the raw value.
+func mapV1SpanGaps(raw any) SpanGaps {
+	switch v := raw.(type) {
+	case bool:
+		if v {
+			return SpanGaps{FillOnlyBelow: false}
+		}
+		return SpanGaps{FillOnlyBelow: true}
+	case float64:
+		dur, err := valuer.ParseTextDuration(time.Duration(v * float64(time.Second)).String())
+		if err != nil {
+			return SpanGaps{FillOnlyBelow: false}
+		}
+		return SpanGaps{FillOnlyBelow: true, FillLessThan: dur}
+	}
+	return SpanGaps{FillOnlyBelow: false}
+}
+
+func (d *v1Decoder) mapV1ThresholdsWithLabel(w map[string]any) []ThresholdWithLabel {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]ThresholdWithLabel, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		label := d.readString(t, "thresholdLabel")
+		if color == "" || label == "" {
+			// v2 ThresholdWithLabel requires both; drop entries that wouldn't validate.
+			continue
+		}
+		out = append(out, ThresholdWithLabel{Value: d.readFloat(t, "thresholdValue"), Unit: d.readString(t, "thresholdUnit"), Color: color, Label: label})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1ComparisonThresholds(w map[string]any) []ComparisonThreshold {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]ComparisonThreshold, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		if color == "" {
+			continue
+		}
+		out = append(out, ComparisonThreshold{
+			Value:    d.readFloat(t, "thresholdValue"),
+			Operator: d.mapV1ComparisonOperator(d.readString(t, "thresholdOperator")),
+			Unit:     d.readString(t, "thresholdUnit"),
+			Color:    color,
+			Format:   mapV1ThresholdFormat(d.readString(t, "thresholdFormat")),
+		})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1TableThresholds(w map[string]any) []TableThreshold {
+	rawSlice := d.readObjects(w, "thresholds")
+	if len(rawSlice) == 0 {
+		return nil
+	}
+	out := make([]TableThreshold, 0, len(rawSlice))
+	for _, t := range rawSlice {
+		color := d.readString(t, "thresholdColor")
+		columnName := d.readString(t, "thresholdTableOptions")
+		if color == "" || columnName == "" {
+			continue
+		}
+		out = append(out, TableThreshold{
+			ComparisonThreshold: ComparisonThreshold{
+				Value:    d.readFloat(t, "thresholdValue"),
+				Operator: d.mapV1ComparisonOperator(d.readString(t, "thresholdOperator")),
+				Unit:     d.readString(t, "thresholdUnit"),
+				Color:    color,
+				Format:   mapV1ThresholdFormat(d.readString(t, "thresholdFormat")),
+			},
+			ColumnName: columnName,
+		})
+	}
+	if len(out) == 0 {
+		return nil
+	}
+	return out
+}
+
+func (d *v1Decoder) mapV1ComparisonOperator(s string) ComparisonOperator {
+	switch s {
+	case ">":
+		return ComparisonOperatorAbove
+	case ">=":
+		return ComparisonOperatorAboveOrEqual
+	case "<":
+		return ComparisonOperatorBelow
+	case "<=":
+		return ComparisonOperatorBelowOrEqual
+	case "=":
+		return ComparisonOperatorEqual
+	case "!=":
+		return ComparisonOperatorNotEqual
+	default:
+		d.note("threshold has unknown comparison operator %q", s)
+		return ComparisonOperatorAbove
+	}
+}
+
+func mapV1ThresholdFormat(s string) ThresholdFormat {
+	switch strings.ToLower(s) {
+	case "background":
+		return ThresholdFormatBackground
+	case "text":
+		return ThresholdFormatText
+	}
+	return ThresholdFormatText
+}

pkg/types/dashboardtypes/perses_v1_to_v2_queries.go

@@ -0,0 +1,245 @@
+package dashboardtypes
+
+import (
+	"encoding/json"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+// ══════════════════════════════════════════════
+// Queries
+// ══════════════════════════════════════════════
+
+// convertV1WidgetQuery returns exactly one Query (per Spec.Validate). The kind
+// chosen depends on the v1 widget query shape:
+//   - a single query (promql / clickhouse_sql / builder) → its native kind
+//   - multiple queries                                   → signoz/CompositeQuery
+//
+// A single query is never wrapped in a CompositeQuery; in particular List
+// panels accept only a bare signoz/BuilderQuery. Builder queries are routed
+// through qb.WrapInV5Envelope (in collectV1QueryEnvelopes), which translates v4
+// builder-field names (orderBy/selectColumns/dataSource) into their v5
+// equivalents and adds the `signal` field required by BuilderQuerySpec's
+// per-signal dispatch.
+func (d *v1Decoder) convertV1WidgetQuery(widget map[string]any, panelKind PanelPluginKind) []Query {
+	envelopes, signal := d.collectV1QueryEnvelopes(widget)
+	if len(envelopes) == 0 {
+		return nil
+	}
+	requestType := requestTypeForPanel(panelKind)
+
+	// A single query keeps its native kind — never wrapped in a CompositeQuery.
+	if len(envelopes) == 1 {
+		if q := singleQueryFromEnvelope(envelopes[0], requestType, signal); q != nil {
+			return []Query{*q}
+		}
+	}
+
+	// Default: wrap in CompositeQuery.
+	composite, err := parseCompositeFromEnvelopes(envelopes)
+	if err != nil || composite == nil {
+		return nil
+	}
+	return []Query{{
+		Kind: requestType,
+		Spec: QuerySpec{
+			Plugin: QueryPlugin{Kind: QueryKindComposite, Spec: composite},
+		},
+	}}
+}
+
+// requestTypeForPanel maps a v2 panel plugin kind to the request type (result
+// shape) its queries produce. Mirrors the frontend's panelTypeToRequestType
+// (buildQueryRangeRequest.ts): time series for line/bar/histogram (histogram
+// bins client-side from raw time series, V1 parity), scalar for
+// number/pie/table, raw rows for list.
+func requestTypeForPanel(panelKind PanelPluginKind) qb.RequestType {
+	switch panelKind {
+	case PanelKindTimeSeries, PanelKindBarChart, PanelKindHistogram:
+		return qb.RequestTypeTimeSeries
+	case PanelKindNumber, PanelKindPieChart, PanelKindTable:
+		return qb.RequestTypeScalar
+	case PanelKindList:
+		return qb.RequestTypeRaw
+	}
+	return qb.RequestTypeTimeSeries
+}
+
+// collectV1QueryEnvelopes inspects widget.query.queryType and produces a
+// flattened list of v5-shaped envelopes. The returned signal is the dominant
+// builder signal (if any), used for typed builder-query dispatch.
+func (d *v1Decoder) collectV1QueryEnvelopes(widget map[string]any) ([]map[string]any, telemetrytypes.Signal) {
+	queryMap := d.readObject(widget, "query")
+	if queryMap == nil {
+		return nil, telemetrytypes.Signal{}
+	}
+
+	queryType := d.readString(queryMap, "queryType")
+	switch queryType {
+	case "promql":
+		var out []map[string]any
+		for _, q := range d.readObjects(queryMap, "promql") {
+			out = append(out, promQLEnvelope(q))
+		}
+		return out, telemetrytypes.Signal{}
+
+	case "clickhouse_sql":
+		var out []map[string]any
+		for _, q := range d.readObjects(queryMap, "clickhouse_sql") {
+			out = append(out, clickhouseEnvelope(q))
+		}
+		return out, telemetrytypes.Signal{}
+
+	case "builder":
+		builder := d.readObject(queryMap, "builder")
+		if builder == nil {
+			return nil, telemetrytypes.Signal{}
+		}
+		var out []map[string]any
+		var signal telemetrytypes.Signal
+		for _, q := range d.readObjects(builder, "queryData") {
+			name := d.readString(q, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, q, string(qb.QueryTypeBuilder.StringValue())))
+			if signal.IsZero() {
+				signal = signalFromDataSource(q["dataSource"])
+			}
+		}
+		for _, f := range d.readObjects(builder, "queryFormulas") {
+			name := d.readString(f, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, f, string(qb.QueryTypeFormula.StringValue())))
+		}
+		for _, op := range d.readObjects(builder, "queryTraceOperator") {
+			name := d.readString(op, "queryName")
+			out = append(out, qb.WrapInV5Envelope(name, op, string(qb.QueryTypeTraceOperator.StringValue())))
+		}
+		return out, signal
+	default:
+		d.note("widget %q has unknown queryType %q", d.readString(widget, "id"), queryType)
+	}
+	return nil, telemetrytypes.Signal{}
+}
+
+func promQLEnvelope(q map[string]any) map[string]any {
+	return map[string]any{
+		"type": qb.QueryTypePromQL.StringValue(),
+		"spec": map[string]any{
+			"name":     q["name"],
+			"query":    q["query"],
+			"disabled": q["disabled"],
+			"legend":   q["legend"],
+		},
+	}
+}
+
+func clickhouseEnvelope(q map[string]any) map[string]any {
+	return map[string]any{
+		"type": qb.QueryTypeClickHouseSQL.StringValue(),
+		"spec": map[string]any{
+			"name":     q["name"],
+			"query":    q["query"],
+			"disabled": q["disabled"],
+			"legend":   q["legend"],
+		},
+	}
+}
+
+// singleQueryFromEnvelope returns a typed Query for one envelope, using its
+// native query kind (promql/clickhouse_sql/builder) rather than wrapping it in
+// a CompositeQuery. A bare signoz/BuilderQuery is valid for every panel kind
+// and is the only kind List panels accept.
+func singleQueryFromEnvelope(envelope map[string]any, requestType qb.RequestType, signal telemetrytypes.Signal) *Query {
+	t, _ := envelope["type"].(string)
+	spec, _ := envelope["spec"].(map[string]any)
+	switch t {
+	case qb.QueryTypePromQL.StringValue():
+		prom, err := decodeMapInto[qb.PromQuery](spec)
+		if err != nil {
+			return nil
+		}
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   prom.Name,
+				Plugin: QueryPlugin{Kind: QueryKindPromQL, Spec: &prom},
+			},
+		}
+	case qb.QueryTypeClickHouseSQL.StringValue():
+		ch, err := decodeMapInto[qb.ClickHouseQuery](spec)
+		if err != nil {
+			return nil
+		}
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   ch.Name,
+				Plugin: QueryPlugin{Kind: QueryKindClickHouseSQL, Spec: &ch},
+			},
+		}
+	case qb.QueryTypeBuilder.StringValue():
+		builderSpec := parseBuilderQuerySpec(spec, signal)
+		if builderSpec == nil {
+			return nil
+		}
+		name, _ := spec["name"].(string)
+		return &Query{
+			Kind: requestType,
+			Spec: QuerySpec{
+				Name:   name,
+				Plugin: QueryPlugin{Kind: QueryKindBuilder, Spec: &BuilderQuerySpec{Spec: builderSpec}},
+			},
+		}
+	}
+	return nil
+}
+
+func parseCompositeFromEnvelopes(envelopes []map[string]any) (*CompositeQuerySpec, error) {
+	bytes, err := json.Marshal(envelopes)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "marshal v1 query envelopes")
+	}
+	var parsed []qb.QueryEnvelope
+	if err := json.Unmarshal(bytes, &parsed); err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidWidgetQuery, "decode v5 query envelopes")
+	}
+	return &CompositeQuerySpec{Queries: parsed}, nil
+}
+
+func parseBuilderQuerySpec(rawSpec any, signal telemetrytypes.Signal) any {
+	spec, ok := rawSpec.(map[string]any)
+	if !ok {
+		return nil
+	}
+	if !signal.IsZero() {
+		spec["signal"] = signal.StringValue()
+	}
+	bytes, err := json.Marshal(spec)
+	if err != nil {
+		return nil
+	}
+	parsed, err := qb.UnmarshalBuilderQueryBySignal(bytes)
+	if err != nil {
+		return nil
+	}
+	return parsed
+}
+
+// signalFromDataSource maps a v1 data-source string to a v5 signal. Casing
+// varies by source: builder queries store lowercase ("traces"), while variable
+// `dynamicVariablesSource` stores capitalized ("Traces"), so match
+// case-insensitively. Unknown values (e.g. "All telemetry") map to the zero
+// Signal.
+func signalFromDataSource(raw any) telemetrytypes.Signal {
+	s, _ := raw.(string)
+	switch strings.ToLower(s) {
+	case "traces":
+		return telemetrytypes.SignalTraces
+	case "logs":
+		return telemetrytypes.SignalLogs
+	case "metrics":
+		return telemetrytypes.SignalMetrics
+	}
+	return telemetrytypes.Signal{}
+}

pkg/types/dashboardtypes/perses_v1_to_v2_tags.go

@@ -0,0 +1,122 @@
+package dashboardtypes
+
+import (
+	"fmt"
+	"regexp"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/types/coretypes"
+	"github.com/SigNoz/signoz/pkg/types/tagtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// ══════════════════════════════════════════════
+// Tags
+// ══════════════════════════════════════════════
+
+// v1 carries tags as a flat []string; v2 tags are (key, value) pairs. Each v1
+// string is normalized into a pair (separator split, empty-side fallback,
+// reserved-key prefix, `/` scrub). Tags that normalize to the same
+// (lower(key), lower(value)) within a dashboard are collapsed, first occurrence
+// winning the display casing.
+//
+// Characters still illegal after normalization (spaces, punctuation) are molded
+// to fit the tag validators: disallowed runs collapse to "_" (see moldTagField).
+
+// defaultV1TagKey is the key assigned when a v1 tag string has no usable
+// separator (or one side of the split is empty).
+const defaultV1TagKey = "tag"
+
+func (d *v1Decoder) convertV1TagsForOrg(orgID valuer.UUID, raw any) []*tagtypes.Tag {
+	if raw == nil {
+		return nil
+	}
+	rawTagsList, ok := raw.([]any)
+	if !ok {
+		d.noteMalformedField("tags", raw)
+		return nil
+	}
+	seen := make(map[string]struct{}, len(rawTagsList))
+	tagsV2 := make([]*tagtypes.Tag, 0, len(rawTagsList))
+	for i, rawTag := range rawTagsList {
+		s, ok := rawTag.(string)
+		if !ok {
+			d.noteMalformedField(fmt.Sprintf("tags[%d]", i), rawTag)
+			continue
+		}
+		key, value, ok := normalizeV1Tag(s)
+		if !ok {
+			continue
+		}
+		dedupKey := strings.ToLower(key) + "\x00" + strings.ToLower(value)
+		if _, dup := seen[dedupKey]; dup {
+			continue
+		}
+		seen[dedupKey] = struct{}{}
+		tagsV2 = append(tagsV2, tagtypes.NewTag(orgID, coretypes.KindDashboard, key, value))
+	}
+	return tagsV2
+}
+
+// normalizeV1Tag derives a (key, value) pair from one v1 tag string. After
+// splitting and molding both sides, a lone survivor becomes a value under the
+// default key; ok is false if neither survives.
+func normalizeV1Tag(s string) (string, string, bool) {
+	s = strings.TrimSpace(s)
+	if s == "" {
+		return "", "", false
+	}
+
+	var rawKey, rawValue string
+	switch {
+	case strings.Contains(s, ":"):
+		rawKey, rawValue, _ = strings.Cut(s, ":")
+		// Only the first ":" separates key from value; collapse the rest.
+		rawValue = strings.ReplaceAll(rawValue, ":", "_")
+	case strings.Contains(s, "/"):
+		rawKey, rawValue, _ = strings.Cut(s, "/")
+	default:
+		rawValue = s
+	}
+	rawKey = strings.TrimSpace(rawKey)
+	rawValue = strings.TrimSpace(rawValue)
+
+	// Reserved-key collision: prefix "_" so the list-query DSL stays unambiguous.
+	if _, reserved := reservedDSLKeys[DSLKey(strings.ToLower(rawKey))]; rawKey != "" && reserved {
+		rawKey = "_" + rawKey
+	}
+
+	key := moldTagField(rawKey, tagKeyDisallowed, tagKeyNotLead, tagtypes.MAX_LEN_TAG_KEY)
+	value := moldTagField(rawValue, tagValueDisallowed, nil, tagtypes.MAX_LEN_TAG_VALUE)
+	switch {
+	case key == "" && value == "":
+		return "", "", false
+	case key == "":
+		return defaultV1TagKey, value, true
+	case value == "":
+		return defaultV1TagKey, key, true
+	default:
+		return key, value, true
+	}
+}
+
+// Inverse of tagKeyRegex/tagValueRegex ("/" always rejected); tagKeyNotLead
+// matches a bad first char for a key. TestMoldedV1TagsPassValidation guards drift.
+var (
+	tagKeyDisallowed   = regexp.MustCompile(`[^a-zA-Z0-9$_@#{}:-]+`)
+	tagValueDisallowed = regexp.MustCompile(`[^a-zA-Z0-9$_@#{}:.+=-]+`)
+	tagKeyNotLead      = regexp.MustCompile(`^[^a-zA-Z$_@{#]`)
+)
+
+// moldTagField collapses disallowed runs to "_", prefixes "_" if notLead hits
+// the first char, and caps at max. Keeps a leading "_", trims a trailing one.
+func moldTagField(s string, disallowed, notLead *regexp.Regexp, max int) string {
+	s = strings.TrimRight(disallowed.ReplaceAllString(s, "_"), "_")
+	if s != "" && notLead != nil && notLead.MatchString(s) {
+		s = "_" + s
+	}
+	if len(s) > max {
+		s = strings.TrimRight(s[:max], "_")
+	}
+	return s
+}

pkg/types/dashboardtypes/perses_v1_to_v2_variables.go

@@ -0,0 +1,177 @@
+package dashboardtypes
+
+import (
+	"sort"
+
+	"github.com/perses/spec/go/dashboard"
+	"github.com/perses/spec/go/dashboard/variable"
+)
+
+// ══════════════════════════════════════════════
+// Variables
+// ══════════════════════════════════════════════
+
+// convertV1Variables walks the v1 `variables` map (UUID-keyed) and produces an
+// ordered []Variable. Variables sort by `order` first, then by id for stable
+// output. v1 variable types map as follows:
+//
+//	QUERY    → ListVariable + signoz/QueryVariable
+//	CUSTOM   → ListVariable + signoz/CustomVariable
+//	DYNAMIC  → ListVariable + signoz/DynamicVariable
+//	TEXTBOX  → TextVariable
+func (d *v1Decoder) convertV1Variables(raw any) []Variable {
+	if raw == nil {
+		return nil
+	}
+	rawVariablesMap, ok := raw.(map[string]any)
+	if !ok {
+		d.noteMalformedField("variables", raw)
+		return nil
+	}
+	type ordered struct {
+		variableID      string
+		variableContent map[string]any
+		order           float64
+	}
+	entries := make([]ordered, 0, len(rawVariablesMap))
+	for variableID, variableContentRaw := range rawVariablesMap {
+		variableContent, ok := variableContentRaw.(map[string]any)
+		if !ok {
+			d.noteMalformedField("variables."+variableID, variableContentRaw)
+			continue
+		}
+		entries = append(entries, ordered{variableID: variableID, variableContent: variableContent, order: d.readFloat(variableContent, "order")})
+	}
+	sort.SliceStable(entries, func(i, j int) bool {
+		if entries[i].order != entries[j].order {
+			return entries[i].order < entries[j].order
+		}
+		return entries[i].variableID < entries[j].variableID
+	})
+
+	variablesV2 := make([]Variable, 0, len(entries))
+	for _, e := range entries {
+		v, ok := d.convertV1Variable(e.variableContent)
+		if !ok {
+			continue
+		}
+		variablesV2 = append(variablesV2, v)
+	}
+	return variablesV2
+}
+
+func (d *v1Decoder) convertV1Variable(v map[string]any) (Variable, bool) {
+	name := d.readString(v, "name")
+	if name == "" {
+		return Variable{}, false
+	}
+	description := d.readString(v, "description")
+	kind := d.readString(v, "type")
+
+	switch kind {
+	case "TEXTBOX":
+		spec := &dashboard.TextVariableSpec{
+			TextSpec: variable.TextSpec{
+				Display: &variable.Display{Name: name, Description: description},
+				Value:   d.readString(v, "textboxValue"),
+			},
+			Name: name,
+		}
+		return Variable{Kind: variable.KindText, Spec: spec}, true
+
+	case "QUERY", "CUSTOM", "DYNAMIC":
+		listSpec := &ListVariableSpec{
+			Display:         Display{Name: name, Description: description},
+			AllowAllValue:   d.readBool(v, "showALLOption"),
+			AllowMultiple:   d.readBool(v, "multiSelect"),
+			CustomAllValue:  d.readString(v, "customAllValue"),
+			CapturingRegexp: d.readString(v, "capturingRegexp"),
+			Sort:            mapV1Sort(d.readString(v, "sort")),
+			Plugin:          d.variablePluginFor(kind, v),
+			Name:            name,
+		}
+		if dv := mapV1VariableDefault(v); dv != nil {
+			listSpec.DefaultValue = dv
+		}
+		return Variable{Kind: variable.KindList, Spec: listSpec}, true
+
+	default:
+		d.note("variable %q has unknown type %q", name, kind)
+		return Variable{}, false
+	}
+}
+
+func (d *v1Decoder) variablePluginFor(kind string, v map[string]any) VariablePlugin {
+	switch kind {
+	case "QUERY":
+		return VariablePlugin{
+			Kind: VariableKindQuery,
+			Spec: &QueryVariableSpec{QueryValue: d.readString(v, "queryValue")},
+		}
+	case "CUSTOM":
+		return VariablePlugin{
+			Kind: VariableKindCustom,
+			Spec: &CustomVariableSpec{CustomValue: d.readString(v, "customValue")},
+		}
+	case "DYNAMIC":
+		spec := &DynamicVariableSpec{Name: d.readString(v, "dynamicVariablesAttribute")}
+		if signal := signalFromDataSource(v["dynamicVariablesSource"]); !signal.IsZero() {
+			spec.Signal = signal
+		}
+		return VariablePlugin{Kind: VariableKindDynamic, Spec: spec}
+	}
+	return VariablePlugin{}
+}
+
+// mapV1VariableDefault reads selectedValue/defaultValue, both polymorphic
+// (string|array), so it indexes the raw value and lets defaultValueFromAny
+// type-switch — no typed accessor, intentionally lenient.
+func mapV1VariableDefault(v map[string]any) *variable.DefaultValue {
+	if raw, ok := v["selectedValue"]; ok {
+		return defaultValueFromAny(raw)
+	}
+	if raw, ok := v["defaultValue"]; ok {
+		return defaultValueFromAny(raw)
+	}
+	return nil
+}
+
+func defaultValueFromAny(raw any) *variable.DefaultValue {
+	switch v := raw.(type) {
+	case string:
+		if v == "" {
+			return nil
+		}
+		return &variable.DefaultValue{SingleValue: v}
+	case []any:
+		if len(v) == 0 {
+			return nil
+		}
+		values := make([]string, 0, len(v))
+		for _, item := range v {
+			if s, ok := item.(string); ok && s != "" {
+				values = append(values, s)
+			}
+		}
+		if len(values) == 0 {
+			return nil
+		}
+		return &variable.DefaultValue{SliceValues: values}
+	}
+	return nil
+}
+
+func mapV1Sort(s string) *variable.Sort {
+	var sort variable.Sort
+	switch s {
+	case "ASC":
+		sort = variable.SortAlphabeticalAsc
+	case "DESC":
+		sort = variable.SortAlphabeticalDesc
+	case "DISABLED", "":
+		return nil // SortNone is the implicit default
+	default:
+		return nil
+	}
+	return &sort
+}

pkg/types/querybuildertypes/querybuildertypesv5/migrate_envelope.go

@@ -0,0 +1,127 @@
+package querybuildertypesv5
+
+// WrapInV5Envelope translates a single v4 builder query/formula map into a
+// v5 query envelope ({"type": ..., "spec": ...}). It is a pure shape transform
+// over untyped maps: v4 builder field names (groupBy/orderBy/selectColumns/
+// dataSource) are rewritten to their v5 equivalents and a `signal` is derived
+// from the data source. queryType selects the envelope type, except a formula
+// (detected when name != queryMap["expression"]) is always emitted as
+// "builder_formula".
+//
+// Migration code (pkg/transition) and the v1→v2 dashboard conversion both
+// produce v5 envelopes, so this lives here with the v5 query types rather than
+// in an infra-level package.
+func WrapInV5Envelope(name string, queryMap map[string]any, queryType string) map[string]any {
+	// Create a properly structured v5 query
+	v5Query := map[string]any{
+		"name":     name,
+		"disabled": queryMap["disabled"],
+		"legend":   queryMap["legend"],
+	}
+
+	if name != queryMap["expression"] {
+		// formula
+		queryType = "builder_formula"
+		v5Query["expression"] = queryMap["expression"]
+		if functions, ok := queryMap["functions"]; ok {
+			v5Query["functions"] = functions
+		}
+		return map[string]any{
+			"type": queryType,
+			"spec": v5Query,
+		}
+	}
+
+	// Add signal based on data source
+	if dataSource, ok := queryMap["dataSource"].(string); ok {
+		switch dataSource {
+		case "traces":
+			v5Query["signal"] = "traces"
+		case "logs":
+			v5Query["signal"] = "logs"
+		case "metrics":
+			v5Query["signal"] = "metrics"
+		}
+	}
+
+	if stepInterval, ok := queryMap["stepInterval"]; ok {
+		v5Query["stepInterval"] = stepInterval
+	}
+
+	if aggregations, ok := queryMap["aggregations"]; ok {
+		v5Query["aggregations"] = aggregations
+	}
+
+	if filter, ok := queryMap["filter"]; ok {
+		v5Query["filter"] = filter
+	}
+
+	// Copy groupBy with proper structure
+	if groupBy, ok := queryMap["groupBy"].([]any); ok {
+		v5GroupBy := make([]any, len(groupBy))
+		for i, gb := range groupBy {
+			if gbMap, ok := gb.(map[string]any); ok {
+				v5GroupBy[i] = map[string]any{
+					"name":          gbMap["key"],
+					"fieldDataType": gbMap["dataType"],
+					"fieldContext":  gbMap["type"],
+				}
+			}
+		}
+		v5Query["groupBy"] = v5GroupBy
+	}
+
+	// Copy orderBy with proper structure
+	if orderBy, ok := queryMap["orderBy"].([]any); ok {
+		v5OrderBy := make([]any, len(orderBy))
+		for i, ob := range orderBy {
+			if obMap, ok := ob.(map[string]any); ok {
+				v5OrderBy[i] = map[string]any{
+					"key": map[string]any{
+						"name":          obMap["columnName"],
+						"fieldDataType": obMap["dataType"],
+						"fieldContext":  obMap["type"],
+					},
+					"direction": obMap["order"],
+				}
+			}
+		}
+		v5Query["order"] = v5OrderBy
+	}
+
+	// Copy selectColumns as selectFields
+	if selectColumns, ok := queryMap["selectColumns"].([]any); ok {
+		v5SelectFields := make([]any, len(selectColumns))
+		for i, col := range selectColumns {
+			if colMap, ok := col.(map[string]any); ok {
+				v5SelectFields[i] = map[string]any{
+					"name":          colMap["key"],
+					"fieldDataType": colMap["dataType"],
+					"fieldContext":  colMap["type"],
+				}
+			}
+		}
+		v5Query["selectFields"] = v5SelectFields
+	}
+
+	// Copy limit and offset
+	if limit, ok := queryMap["limit"]; ok {
+		v5Query["limit"] = limit
+	}
+	if offset, ok := queryMap["offset"]; ok {
+		v5Query["offset"] = offset
+	}
+
+	if having, ok := queryMap["having"]; ok {
+		v5Query["having"] = having
+	}
+
+	if functions, ok := queryMap["functions"]; ok {
+		v5Query["functions"] = functions
+	}
+
+	return map[string]any{
+		"type": queryType,
+		"spec": v5Query,
+	}
+}