fix: checkbox issue

* feat: field selector migrated to telemetry field key

* feat: move floating panel to field selector

* feat: sync columns state in logs

* feat: sync columns state in traces

* feat: logs field migration integrate

* feat: traces field migration integrate

* feat: minor refactor

* feat: tests updated

* feat: move to key from name on fields for logs and traces

* feat: update tests

* feat: update tests

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -27,13 +27,15 @@ function SortableField({
 	field,
 	onRemove,
 	allowDrag,
+	isRequired,
 }: {
 	field: TelemetryFieldKey;
 	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
+	isRequired: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.name });
+		useSortable({ id: field.key as string });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -53,15 +55,17 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
-				variant="outlined"
-				color="destructive"
-				size="sm"
-				onClick={(): void => onRemove(field)}
-			>
-				Remove
-			</Button>
+			{!isRequired && (
+				<Button
+					className={cx(styles.removeBtn, 'periscope-btn')}
+					variant="outlined"
+					color="destructive"
+					size="sm"
+					onClick={(): void => onRemove(field)}
+				>
+					Remove
+				</Button>
+			)}
 		</div>
 	);
 }
@@ -71,6 +75,7 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -78,14 +83,18 @@ function AddedFields({
 	fields,
 	onFieldsChange,
 	maxFields,
+	requiredFields = [],
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
+	// Contract: caller (FieldsSelector) normalizes `fields` so every entry has
+	// `.key` populated. AddedFields reads it directly.
+
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -99,7 +108,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -125,16 +134,20 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key as string)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
+										isRequired={
+											requiredFields.includes(field.name) ||
+											requiredFields.includes(field.key as string)
+										}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -76,11 +76,8 @@
 	min-height: 0;
 	overflow: hidden;
 
-	// Ant Skeleton.Input rendered inside the loading state — override its
-	// hard-coded width.
 	:global(.ant-skeleton-input) {
-		width: 300px;
-		margin: 8px 12px;
+		width: 50% !important;
 	}
 }
 
@@ -95,7 +92,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 6px 12px;
+	height: 36px;
+	padding: 0 12px;
 	border-radius: 4px;
 	user-select: none;
 	font-size: 13px;
@@ -132,7 +130,7 @@
 }
 
 .isDragDisabled {
-	padding: 6px 12px;
+	cursor: default;
 }
 
 .otherFieldItem {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,6 +5,7 @@ import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -26,33 +27,36 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-function FieldsSelector({
-	isOpen,
+type FieldsSelectorContentProps = Omit<FieldsSelectorProps, 'isOpen'>;
+
+// Inner component: holds all hooks + UI. Gets mounted/unmounted via the
+// outer gate so opening always seeds a fresh draft from `fields`.
+// Assumes `fields` arrives normalized (key populated) — see outer gate.
+function FieldsSelectorContent({
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
+	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
+}: FieldsSelectorContentProps): JSX.Element {
 	const resolvedHeight =
 		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
 	const resolvedPosition = defaultPosition ?? {
 		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
 		y: DEFAULT_PANEL_TOP_INSET,
 	};
+
 	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
 	const [inputValue, setInputValue] = useState('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState('');
@@ -72,15 +76,17 @@ function FieldsSelector({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
+			setDraftFields((prev) => {
+				if (maxFields !== undefined && prev.length >= maxFields) {
+					return prev;
+				}
+				if (prev.some((f) => f.key === field.key)) {
+					return prev;
+				}
+				return [...prev, field];
+			});
 		},
-		[draftFields, maxFields],
+		[maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -99,7 +105,7 @@ function FieldsSelector({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
+				draftFields.every((f, i) => f.key === fields[i]?.key)
 			),
 		[draftFields, fields],
 	);
@@ -138,6 +144,7 @@ function FieldsSelector({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
+					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -173,4 +180,27 @@ function FieldsSelector({
 	);
 }
 
+// Outer gate: normalizes `fields` once (populates `key` so downstream code
+// can read it directly) and decides whether the inner component renders.
+// When isOpen flips false→true, the inner remounts → draft state seeds fresh.
+function FieldsSelector({
+	isOpen,
+	fields,
+	...rest
+}: FieldsSelectorProps): JSX.Element | null {
+	const normalizedFields = useMemo<TelemetryFieldKey[]>(
+		() =>
+			fields.map((f) => ({
+				...f,
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
+			})),
+		[fields],
+	);
+
+	if (!isOpen) {
+		return null;
+	}
+	return <FieldsSelectorContent {...rest} fields={normalizedFields} />;
+}
+
 export default FieldsSelector;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -4,6 +4,7 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
@@ -47,15 +48,22 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
+		// Normalize: synthesize `key` once so downstream reads can trust it.
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
 				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
-			}));
+			}),
+		);
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
+			(attr) => !addedIds.has(attr.key as string),
+		);
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -64,8 +72,13 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						// eslint-disable-next-line react/no-array-index-key
-						<Skeleton.Input active size="small" key={i} />
+						<div
+							// eslint-disable-next-line react/no-array-index-key
+							key={i}
+							className={cx(styles.fieldItem, styles.otherFieldItem)}
+						>
+							<Skeleton.Input active size="small" block />
+						</div>
 					))}
 				</div>
 			</div>
@@ -83,7 +96,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -0,0 +1,113 @@
+import { render, screen } from 'tests/test-utils';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import AddedFields from '../AddedFields';
+
+// AddedFields assumes the caller has populated `key` (the parent
+// FieldsSelector does this via its normalization useMemo). Tests pre-populate
+// it directly.
+const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
+	fieldDataType: 'string',
+	key: `${fieldContext}.${name}`,
+});
+
+describe('AddedFields — requiredFields', () => {
+	it('renders a Remove button for every field when no requiredFields are passed', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
+		);
+
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
+	});
+
+	it('hides the Remove button for fields whose name is in requiredFields', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['a', 'c']}
+			/>,
+		);
+
+		// Only 'b' is removable.
+		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
+		expect(removeButtons).toHaveLength(1);
+	});
+
+	it('still renders the field name for required fields', () => {
+		const fields = [makeField('a'), makeField('b')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['a']}
+			/>,
+		);
+
+		expect(screen.getByText('a')).toBeInTheDocument();
+		expect(screen.getByText('b')).toBeInTheDocument();
+	});
+
+	it('locks all variants of a required name regardless of fieldContext', () => {
+		// Two `body` fields with different contexts — both should lock when
+		// `body` is in requiredFields.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// Both 'body' variants locked → zero Remove buttons.
+		expect(screen.queryAllByRole('button', { name: /remove/i })).toHaveLength(0);
+	});
+
+	it('treats requiredFields as exact-name match (substring does not lock)', () => {
+		const fields = [makeField('body'), makeField('body_extra')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// 'body' locked, 'body_extra' removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+
+	it('also accepts composite IDs in requiredFields (locks a specific variant)', () => {
+		// Two `body` fields with different contexts.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				// Composite ID — locks ONLY the log variant, attribute variant stays
+				// removable.
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// One Remove button: the attribute variant. log variant is locked.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -0,0 +1,106 @@
+import { renderHook } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+import { IField } from 'types/api/logs/fields';
+
+import { useLogsTableColumns } from '../useLogsTableColumns';
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
+		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
+	}),
+}));
+
+const field = (name: string): IField => ({
+	name,
+	type: '',
+	dataType: 'string',
+});
+
+describe('useLogsTableColumns — selectColumns-order respected', () => {
+	it('prepends stateIndicator and renders user fields in array order', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('c'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'c',
+			'a',
+			'b',
+		]);
+	});
+
+	it('slots body and timestamp at their position in the fields array', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('service.name'),
+					field('body'),
+					field('request.id'),
+					field('timestamp'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		// body/timestamp are NOT pinned to fixed positions — they appear where the
+		// caller placed them in `fields`. body/timestamp use composite IDs
+		// ('log.body', 'log.timestamp') since their fieldContext is fixed; user
+		// fields here have empty `type` so their composite collapses to bare name.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'service.name',
+			'log.body',
+			'request.id',
+			'log.timestamp',
+		]);
+	});
+
+	it('skips the synthetic "id" field name', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('id'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'a',
+			'b',
+		]);
+	});
+
+	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('body'), field('timestamp'), field('user_field')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		// body + timestamp are locked from the table-X removal pathway.
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		// User-added fields stay removable. User field has type='' so composite
+		// collapses to bare name.
+		expect(byId.get('user_field')?.enableRemove).toBe(true);
+	});
+
+	it('renders only the stateIndicator when fields is empty', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
+	});
+});

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -7,6 +7,7 @@ import {
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
@@ -18,13 +19,11 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 type UseLogsTableColumnsProps = {
 	fields: IField[];
 	fontSize: FontSize;
-	appendTo?: 'center' | 'end';
 };
 
 export function useLogsTableColumns({
 	fields,
 	fontSize,
-	appendTo = 'center',
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -47,74 +46,71 @@ export function useLogsTableColumns({
 			),
 		};
 
-		const fieldColumns: TableColumnDef<ILog>[] = fields
-			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
-			.map(
-				(f): TableColumnDef<ILog> => ({
-					id: f.name,
-					header: f.name,
-					accessorFn: (log): unknown => FlatLogData(log)[f.name],
-					enableRemove: true,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => (
-						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-					),
-				}),
-			);
+		const timestampCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('timestamp', 'log'),
+			header: 'Timestamp',
+			accessorFn: (log): unknown => log.timestamp,
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: 170, min: 170 },
+			cell: ({ value }): ReactElement => {
+				const ts = value as string | number;
+				const formatted =
+					typeof ts === 'string'
+						? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+						: formatTimezoneAdjustedTimestamp(
+								ts / 1e6,
+								DATE_TIME_FORMATS.ISO_DATETIME_MS,
+							);
+				return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+			},
+		};
 
-		const timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					canBeHidden: false,
-					enableRemove: false,
-					width: { default: 170, min: 170 },
-					cell: ({ value }): ReactElement => {
-						const ts = value as string | number;
-						const formatted =
-							typeof ts === 'string'
-								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-								: formatTimezoneAdjustedTimestamp(
-										ts / 1e6,
-										DATE_TIME_FORMATS.ISO_DATETIME_MS,
-									);
-						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-					},
+		const bodyCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('body', 'log'),
+			header: 'Body',
+			accessorFn: (log): string => getBodyDisplayString(log.body),
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: '100%', min: 300 },
+			cell: ({ value, isActive }): ReactElement => (
+				<TanStackTable.Text
+					dangerouslySetInnerHTML={{
+						__html: getSanitizedLogBody(value as string, {
+							shouldEscapeHtml: true,
+						}),
+					}}
+					data-active={isActive}
+				/>
+			),
+		};
+
+		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
+			id: buildCompositeKey(f.name, f.type),
+			header: f.name,
+			accessorFn: (log): unknown => FlatLogData(log)[f.name],
+			enableRemove: true,
+			width: { min: 192 },
+			cell: ({ value }): ReactElement => (
+				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+			),
+		});
+
+		const fieldCols = fields
+			.map((f): TableColumnDef<ILog> | null => {
+				if (f.name === 'id') {
+					return null;
 				}
-			: null;
-
-		const bodyCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'body',
-		)
-			? {
-					id: 'body',
-					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
-					canBeHidden: false,
-					enableRemove: false,
-					width: { default: '100%', min: 300 },
-					cell: ({ value, isActive }): ReactElement => (
-						<TanStackTable.Text
-							dangerouslySetInnerHTML={{
-								__html: getSanitizedLogBody(value as string, {
-									shouldEscapeHtml: true,
-								}),
-							}}
-							data-active={isActive}
-						/>
-					),
+				if (f.name === 'timestamp') {
+					return timestampCol;
 				}
-			: null;
+				if (f.name === 'body') {
+					return bodyCol;
+				}
+				return makeUserFieldCol(f);
+			})
+			.filter((c): c is TableColumnDef<ILog> => c !== null);
 
-		return [
-			stateIndicatorCol,
-			...(timestampCol ? [timestampCol] : []),
-			...(appendTo === 'center' ? fieldColumns : []),
-			...(bodyCol ? [bodyCol] : []),
-			...(appendTo === 'end' ? fieldColumns : []),
-		];
-	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+		return [stateIndicatorCol, ...fieldCols];
+	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -256,6 +256,34 @@
 				}
 			}
 
+			.edit-columns-container {
+				padding: 12px;
+
+				.edit-columns-btn {
+					display: flex;
+					width: 100%;
+					height: 20px;
+					padding: 4px 0px;
+					justify-content: space-between;
+					align-items: center;
+					border: none !important;
+
+					.edit-columns-text {
+						color: var(--l2-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						letter-spacing: 0.14px;
+					}
+				}
+
+				.edit-columns-btn:hover {
+					background-color: unset !important;
+				}
+			}
+
 			.add-new-column-container {
 				display: flex;
 				flex-direction: column;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { useCallback, useEffect, useState } from 'react';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
 	ChevronLeft,
@@ -14,7 +11,6 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
-	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -23,14 +19,21 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
+	onOpenColumns?: () => void;
+}
+
+interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
+	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-}: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn, fontSize } = config;
+	onOpenColumns,
+	closePopover,
+}: OptionsMenuContentProps): JSX.Element {
+	const { maxLines, format, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -40,13 +43,6 @@ function OptionsMenu({
 	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
 		useState<boolean>(false);
 
-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
-		useState(false);
-
-	const [selectedValue, setSelectedValue] = useState<string | null>(null);
-	const listRef = useRef<HTMLDivElement>(null);
-	const initialMouseEnterRef = useRef<boolean>(false);
-
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) {
@@ -61,7 +57,6 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
-		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -76,20 +71,6 @@ function OptionsMenu({
 		}
 	};
 
-	const handleSearchValueChange = useDebouncedFn((event): void => {
-		// @ts-expect-error
-		const value = event?.target?.value || '';
-
-		if (addColumn && addColumn?.onSearch) {
-			addColumn?.onSearch(value);
-		}
-	}, 300);
-
-	const handleToggleAddNewColumn = (): void => {
-		addColumn?.onSearch?.('');
-		setShowAddNewColumnContainer(!showAddNewColumnContainer);
-	};
-
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -100,6 +81,11 @@ function OptionsMenu({
 		}
 	};
 
+	const handleEditColumns = (): void => {
+		onOpenColumns?.();
+		closePopover();
+	};
+
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -112,110 +98,10 @@ function OptionsMenu({
 		}
 	}, [fontSizeValue]);
 
-	function handleColumnSelection(
-		currentIndex: number,
-		optionsData: DefaultOptionType[],
-	): void {
-		const currentItem = optionsData[currentIndex];
-		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect) {
-			addColumn?.onSelect(selectedValue, {
-				label: currentItem.label,
-				disabled: false,
-			});
-
-			// if the last element is selected then select the previous one
-			if (currentIndex === itemLength - 1) {
-				// there should be more than 1 element in the list
-				if (currentIndex - 1 >= 0) {
-					const prevValue = optionsData[currentIndex - 1]?.value || null;
-					setSelectedValue(prevValue as string | null);
-				} else {
-					// if there is only one element then just select and do nothing
-					setSelectedValue(null);
-				}
-			} else {
-				// selecting any random element from the list except the last one
-				const nextIndex = currentIndex + 1;
-
-				const nextValue = optionsData[nextIndex]?.value || null;
-
-				setSelectedValue(nextValue as string | null);
-			}
-		}
-	}
-
-	const handleKeyDown = (e: KeyboardEvent): void => {
-		if (!selectedValue) {
-			return;
-		}
-
-		const optionsData = addColumn?.options || [];
-
-		const currentIndex = optionsData.findIndex(
-			(item) => item?.value === selectedValue,
-		);
-
-		const itemLength = optionsData.length;
-
-		switch (e.key) {
-			case 'ArrowUp': {
-				const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'ArrowDown': {
-				const newValue =
-					optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'Enter':
-				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData);
-				break;
-			default:
-				break;
-		}
-	};
-
-	useEffect(() => {
-		// Scroll the selected item into view
-		const listNode = listRef.current;
-		if (listNode && selectedValue) {
-			const optionsData = addColumn?.options || [];
-			const currentIndex = optionsData.findIndex(
-				(item) => item?.value === selectedValue,
-			);
-			const itemNode = listNode.children[currentIndex] as HTMLElement;
-			if (itemNode) {
-				itemNode.scrollIntoView({
-					behavior: 'smooth',
-					block: 'nearest',
-				});
-			}
-		}
-	}, [selectedValue]);
-
-	useEffect(() => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [selectedValue]);
-
 	return (
 		<div
-			className={cx(
-				'nested-menu-container',
-				showAddNewColumnContainer ? 'active' : '',
-			)}
+			className="nested-menu-container"
 			onClick={(event): void => {
-				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -269,71 +155,7 @@ function OptionsMenu({
 						</Button>
 					</div>
 				</div>
-			) : null}
-
-			{showAddNewColumnContainer && (
-				<div className="add-new-column-container">
-					<div className="add-new-column-header">
-						<div className="title">
-							<div className="periscope-btn ghost" onClick={handleToggleAddNewColumn}>
-								<ChevronLeft
-									size={14}
-									className="back-icon"
-									onClick={handleToggleAddNewColumn}
-								/>
-							</div>
-							Add New Column
-						</div>
-
-						<Input
-							tabIndex={0}
-							type="text"
-							autoFocus
-							onFocus={addColumn?.onFocus}
-							onChange={handleSearchValueChange}
-							placeholder="Search..."
-						/>
-					</div>
-
-					<div className="add-new-column-content">
-						{addColumn?.isFetching && (
-							<div className="loading-container"> Loading ... </div>
-						)}
-
-						<div className="column-format-new-options" ref={listRef}>
-							{addColumn?.options?.map(({ label, value }, index) => (
-								<div
-									className={cx('column-name', value === selectedValue && 'selected')}
-									key={value}
-									onMouseEnter={(): void => {
-										if (!initialMouseEnterRef.current) {
-											setSelectedValue(value as string | null);
-										}
-
-										initialMouseEnterRef.current = true;
-									}}
-									onMouseMove={(): void => {
-										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
-										setSelectedValue(value as string | null);
-									}}
-									onClick={(eve): void => {
-										eve.stopPropagation();
-										handleColumnSelection(index, addColumn?.options || []);
-									}}
-								>
-									<div className="name">
-										<Tooltip placement="left" title={label}>
-											{label}
-										</Tooltip>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-			)}
-
-			{!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
+			) : (
 				<div>
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
@@ -373,72 +195,52 @@ function OptionsMenu({
 
 					{selectedItem && (
 						<>
-							<>
-								<div className="horizontal-line" />
-								<div className="max-lines-per-row">
-									<div className="title"> max lines per row </div>
-									<div className="raw-format max-lines-per-row-input">
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={decrementMaxLinesPerRow}
-										>
-											{' '}
-											<Minus size={12} />{' '}
-										</button>
-										<InputNumber
-											min={1}
-											max={10}
-											value={maxLinesPerRow}
-											onChange={handleLinesPerRowChange}
-										/>
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={incrementMaxLinesPerRow}
-										>
-											{' '}
-											<Plus size={12} />{' '}
-										</button>
-									</div>
+							<div className="horizontal-line" />
+							<div className="max-lines-per-row">
+								<div className="title"> max lines per row </div>
+								<div className="raw-format max-lines-per-row-input">
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={decrementMaxLinesPerRow}
+									>
+										{' '}
+										<Minus size={12} />{' '}
+									</button>
+									<InputNumber
+										min={1}
+										max={10}
+										value={maxLinesPerRow}
+										onChange={handleLinesPerRowChange}
+									/>
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={incrementMaxLinesPerRow}
+									>
+										{' '}
+										<Plus size={12} />{' '}
+									</button>
 								</div>
-							</>
+							</div>
+						</>
+					)}
 
-							<div className="selected-item-content-container active">
-								{!showAddNewColumnContainer && <div className="horizontal-line" />}
-
-								<div className="item-content">
-									{!showAddNewColumnContainer && (
-										<div className="title">
-											columns
-											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-										</div>
-									)}
-
-									<div className="column-format">
-										{addColumn?.value?.map(({ name }) => (
-											<div className="column-name" key={name}>
-												<div className="name">
-													<Tooltip placement="left" title={name}>
-														{name}
-													</Tooltip>
-												</div>
-												{addColumn?.value?.length > 1 && (
-													<X
-														className="delete-btn"
-														size={14}
-														onClick={(): void => addColumn.onRemove(name)}
-													/>
-												)}
-											</div>
-										))}
-										{addColumn && addColumn?.value?.length === 0 && (
-											<div className="column-name no-columns-selected">
-												No columns selected
-											</div>
-										)}
-									</div>
-								</div>
+					{selectedItem === 'table' && onOpenColumns && (
+						<>
+							<div className="horizontal-line" />
+							<div className="edit-columns-container">
+								<Button
+									className="edit-columns-btn"
+									type="text"
+									onClick={handleEditColumns}
+									data-testid="periscope-btn-edit-columns"
+								>
+									<Typography.Text className="edit-columns-text">
+										Edit columns
+									</Typography.Text>
+									<ChevronRight size={14} className="icon" />
+								</Button>
 							</div>
 						</>
 					)}
@@ -452,6 +254,7 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
+	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -461,6 +264,8 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
+					onOpenColumns={onOpenColumns}
+					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

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

@@ -155,4 +155,66 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
 		});
 	});
+
+	function renderWithOnOpen(
+		onOpenColumns?: jest.Mock,
+		selectedOptionFormat: 'table' | 'raw' | 'list' = 'table',
+	): { getByTestId: ReturnType<typeof render>['getByTestId'] } {
+		const items = [
+			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
+			{ key: 'list', label: 'Default' },
+			{ key: 'table', label: 'Column', data: { title: 'columns' } },
+		];
+
+		const { getByTestId } = render(
+			<LogsFormatOptionsMenu
+				items={items}
+				selectedOptionFormat={selectedOptionFormat}
+				config={{
+					format: { value: selectedOptionFormat, onChange: jest.fn() },
+					maxLines: { value: 1, onChange: jest.fn() },
+					fontSize: { value: FontSize.SMALL, onChange: jest.fn() },
+				}}
+				onOpenColumns={onOpenColumns}
+			/>,
+		);
+		fireEvent.click(getByTestId('periscope-btn-format-options'));
+		return { getByTestId };
+	}
+
+	it('renders "Edit columns" row when format=table and onOpenColumns provided', () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		expect(getByTestId('periscope-btn-edit-columns')).toBeInTheDocument();
+	});
+
+	it('does not render "Edit columns" row when onOpenColumns is not provided', () => {
+		renderWithOnOpen(undefined, 'table');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('does not render "Edit columns" row when format is not table', () => {
+		renderWithOnOpen(jest.fn(), 'raw');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('fires onOpenColumns and closes the popover when "Edit columns" is clicked', async () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		fireEvent.click(getByTestId('periscope-btn-edit-columns'));
+
+		expect(onOpenColumns).toHaveBeenCalledTimes(1);
+		await waitFor(() => {
+			// Popover content unmounts on close.
+			expect(document.querySelector('.menu-container')).toBeNull();
+		});
+	});
 });

frontend/src/components/NewSelect/styles.scss

@@ -483,8 +483,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			> span:not(.ant-checkbox) {
-				width: 100%;
+			> label {
+				flex: 1;
+				min-width: 0;
 			}
 
 			.all-option-text {

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -72,6 +72,7 @@ function TanStackTableInner<TData>(
 		data,
 		columns,
 		columnStorageKey,
+		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -175,6 +176,7 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
+		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -206,6 +208,7 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
+		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,

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

@@ -24,6 +24,8 @@ jest.mock('../TanStackTable.module.scss', () => ({
 }));
 
 beforeAll(() => {
+	// jsdom doesn't include ResizeObserver — must direct-assign rather than
+	// spyOn (spyOn requires the property to already exist).
 	window.ResizeObserver = jest.fn().mockImplementation(() => ({
 		disconnect: jest.fn(),
 		observe: jest.fn(),
@@ -867,4 +869,110 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 		});
 	});
+
+	describe('hasSingleColumn — gates the Remove popover per-column', () => {
+		const hasSingleColumnFlagPresent = (): boolean =>
+			Boolean(document.querySelector('th[data-single-column="true"]'));
+
+		it('is true when only one non-pinned column exists', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+
+		it('is false when multiple non-pinned columns exist (all removable)', async () => {
+			renderTanStackTable({});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 3 default columns (id/name/value), none pinned, none non-removable
+			// → table is not single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('is false when removable + non-removable mix exists (the body/timestamp case)', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Timestamp',
+							accessorKey: 'name',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'value',
+							header: 'Body',
+							accessorKey: 'value',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'id',
+							header: 'User',
+							accessorKey: 'id',
+							enableRemove: true,
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('does not count pinned columns toward the total', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'stateIndicator',
+							header: '',
+							pin: 'left',
+							accessorKey: 'id',
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 1 pinned + 1 non-pinned → only the non-pinned counts → single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+	});
 });

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -168,6 +168,53 @@ describe('useColumnState', () => {
 				'a',
 			]);
 		});
+
+		it('ignores stored columnOrder when respectColumnOrder=false', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: false,
+				}),
+			);
+
+			// Falls through to natural columns-array order; stored order is ignored.
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'a',
+				'b',
+				'c',
+			]);
+		});
+
+		it('honors stored columnOrder when respectColumnOrder=true (default)', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: true,
+				}),
+			);
+
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'c',
+				'a',
+				'b',
+			]);
+		});
 	});
 
 	describe('actions', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -152,6 +152,8 @@ export type TanStackTableProps<TData> = {
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
 	columnStorageKey?: string;
+	/** When false, the table renders columns in their natural array order and the persisted columnOrder slot is ignored on read and skipped on write. Use when an external source (e.g. preferences.selectColumns) is the canonical order. Default true. */
+	respectColumnOrder?: boolean;
 	columnSizing?: ColumnSizingState;
 	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
 	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;

frontend/src/components/TanStackTableView/useColumnHandlers.ts

@@ -7,6 +7,8 @@ import { TableColumnDef } from './types';
 export interface UseColumnHandlersOptions<TData> {
 	/** Storage key for persisting column state (enables store mode) */
 	columnStorageKey?: string;
+	/** When false, drag-reorder skips the persisted columnOrder write — order flows back via onColumnOrderChange only. */
+	respectColumnOrder?: boolean;
 	effectiveSizing: ColumnSizingState;
 	storeSetSizing: (sizing: ColumnSizingState) => void;
 	storeSetOrder: (columns: TableColumnDef<TData>[]) => void;
@@ -28,6 +30,7 @@ export interface UseColumnHandlersResult<TData> {
  */
 export function useColumnHandlers<TData>({
 	columnStorageKey,
+	respectColumnOrder = true,
 	effectiveSizing,
 	storeSetSizing,
 	storeSetOrder,
@@ -50,12 +53,12 @@ export function useColumnHandlers<TData>({
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey) {
+			if (columnStorageKey && respectColumnOrder) {
 				storeSetOrder(cols);
 			}
 			onColumnOrderChange?.(cols);
 		},
-		[columnStorageKey, storeSetOrder, onColumnOrderChange],
+		[columnStorageKey, respectColumnOrder, storeSetOrder, onColumnOrderChange],
 	);
 
 	const handleRemoveColumn = useCallback(

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -20,6 +20,7 @@ type UseColumnStateOptions<TData> = {
 	storageKey?: string;
 	columns: TableColumnDef<TData>[];
 	isGrouped?: boolean;
+	respectColumnOrder?: boolean;
 };
 
 type UseColumnStateResult<TData> = {
@@ -40,6 +41,7 @@ export function useColumnState<TData>({
 	storageKey,
 	columns,
 	isGrouped = false,
+	respectColumnOrder = true,
 }: UseColumnStateOptions<TData>): UseColumnStateResult<TData> {
 	useEffect(() => {
 		if (storageKey) {
@@ -130,7 +132,7 @@ export function useColumnState<TData>({
 	}, [hiddenColumnIds, columns, isGrouped]);
 
 	const sortedColumns = useMemo((): TableColumnDef<TData>[] => {
-		if (columnOrder.length === 0) {
+		if (!respectColumnOrder || columnOrder.length === 0) {
 			return columns;
 		}
 
@@ -144,7 +146,7 @@ export function useColumnState<TData>({
 		});
 
 		return [...pinned, ...sortedRest];
-	}, [columns, columnOrder]);
+	}, [columns, columnOrder, respectColumnOrder]);
 
 	const hideColumn = useCallback(
 		(columnId: string) => {

frontend/src/container/DashboardContainerV2/DashboardContainerV2.module.scss

@@ -1,11 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.body {
-	flex: 1;
-	padding: 12px 24px;
-	overflow: auto;
-}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss

@@ -1,43 +0,0 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx

@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import './SettingsDrawer.styles.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName="settings-container-root"
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx

@@ -1,395 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { FullScreenHandle } from 'react-full-screen';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import {
-	Check,
-	ClipboardCopy,
-	Ellipsis,
-	FileJson,
-	Fullscreen,
-	Globe,
-	LockKeyhole,
-	PenLine,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import {
-	lockDashboardV2,
-	patchDashboardV2,
-	unlockDashboardV2,
-} from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-
-import { Base64Icons } from '../../DashboardContainer/DashboardSettings/General/utils';
-import DashboardSettingsV2 from '../DashboardSettings';
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
-import SettingsDrawer from './SettingsDrawer';
-
-import '../../DashboardContainer/DashboardDescription/Description.styles.scss';
-
-import type { V2Dashboard } from '../utils';
-
-interface DashboardDescriptionV2Props {
-	dashboard: V2Dashboard | undefined;
-	handle: FullScreenHandle;
-	onRefetch: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DashboardDescriptionV2(props: DashboardDescriptionV2Props): JSX.Element {
-	const { dashboard, handle, onRefetch } = props;
-
-	const id = dashboard?.id ?? '';
-	const isDashboardLocked = !!dashboard?.locked;
-
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tags = useMemo(
-		() =>
-			(dashboard?.tags ?? []).map((t) =>
-				t.key === t.value ? t.key : `${t.key}:${t.value}`,
-			),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
-		useState<boolean>(false);
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-
-	const isAuthor =
-		!!user?.email && !!dashboard?.createdBy && dashboard.createdBy === user.email;
-	const addPanelPermission = !isDashboardLocked;
-	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
-	const isPublicDashboard = false;
-
-	const { showErrorModal } = useErrorModal();
-	const { t } = useTranslation(['dashboard', 'common']);
-
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (dashboard) {setUpdatedTitle(title);}
-	}, [dashboard, title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
-		if (!id) {return;}
-		setIsDashbordSettingsOpen(false);
-		try {
-			if (isDashboardLocked) {
-				await unlockDashboardV2({ id });
-				toast.success('Dashboard unlocked');
-			} else {
-				await lockDashboardV2({ id });
-				toast.success('Dashboard locked');
-			}
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-	};
-
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
-
-	const onEmptyWidgetHandler = (): void => {
-		logEvent('Dashboard Detail V2: Add new panel clicked', {
-			dashboardId: id,
-		});
-		toast.info('V2 panel editor coming next');
-	};
-
-	const [state, setCopy] = useCopyToClipboard();
-
-	useEffect(() => {
-		if (state.error) {
-			toast.error(t('something_went_wrong', { ns: 'common' }));
-		}
-		if (state.value) {
-			toast.success(t('success', { ns: 'common' }));
-		}
-	}, [state.error, state.value, t]);
-
-	const dashboardDataJSON = (): string =>
-		JSON.stringify(dashboard ?? {}, null, 2);
-
-	const exportJSON = (): void => {
-		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${title || 'dashboard'}.json`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-
-	const onConfigureClick = (): void => {
-		setIsSettingsDrawerOpen(true);
-	};
-
-	const onSettingsDrawerClose = (): void => {
-		setIsSettingsDrawerOpen(false);
-	};
-
-	return (
-		<Card className="dashboard-description-container">
-			<DashboardHeader title={title} image={image} />
-			<section className="dashboard-details">
-				<div className="left-section">
-					<img src={image} alt="dashboard-img" className="dashboard-img" />
-					<Tooltip title={title.length > 30 ? title : ''}>
-						<Typography.Text
-							className="dashboard-title"
-							data-testid="dashboard-title"
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-
-					{isPublicDashboard && (
-						<Tooltip title="This dashboard is publicly accessible">
-							<Globe size={14} className="public-dashboard-icon" />
-						</Tooltip>
-					)}
-
-					{isDashboardLocked && (
-						<Tooltip title="This dashboard is locked">
-							<LockKeyhole size={14} className="lock-dashboard-icon" />
-						</Tooltip>
-					)}
-				</div>
-				<div className="right-section">
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					<Popover
-						open={isDashboardSettingsOpen}
-						arrow={false}
-						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
-						rootClassName="dashboard-settings"
-						content={
-							<div className="menu-content">
-								<section className="section-1">
-									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-										<Tooltip
-											title={
-												dashboard?.createdBy === 'integration' &&
-												'Dashboards created by integrations cannot be unlocked'
-											}
-										>
-											<Button
-												type="text"
-												icon={<LockKeyhole size={14} />}
-												disabled={dashboard?.createdBy === 'integration'}
-												onClick={handleLockDashboardToggle}
-												data-testid="lock-unlock-dashboard"
-											>
-												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-											</Button>
-										</Tooltip>
-									)}
-
-									{!isDashboardLocked && editDashboard && (
-										<Button
-											type="text"
-											icon={<PenLine size={14} />}
-											onClick={(): void => {
-												setIsRenameDashboardOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											Rename
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<Fullscreen size={14} />}
-										onClick={handle.enter}
-									>
-										Full screen
-									</Button>
-								</section>
-								<section className="section-2">
-									<Button
-										type="text"
-										icon={<FileJson size={14} />}
-										onClick={(): void => {
-											exportJSON();
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Export JSON
-									</Button>
-									<Button
-										type="text"
-										icon={<ClipboardCopy size={14} />}
-										onClick={(): void => {
-											setCopy(dashboardDataJSON());
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Copy as JSON
-									</Button>
-								</section>
-								<section className="delete-dashboard">
-									<DeleteButton
-										createdBy={dashboard?.createdBy || ''}
-										name={title}
-										id={id}
-										isLocked={isDashboardLocked}
-										routeToListPage
-									/>
-								</section>
-							</div>
-						}
-						trigger="click"
-						placement="bottomRight"
-					>
-						<Button
-							icon={<Ellipsis size={14} />}
-							type="text"
-							className="icons"
-							data-testid="options"
-						/>
-					</Popover>
-					{!isDashboardLocked && editDashboard && (
-						<>
-							<Button
-								type="text"
-								className="configure-button"
-								icon={<ConfigureIcon />}
-								data-testid="show-drawer"
-								onClick={onConfigureClick}
-							>
-								Configure
-							</Button>
-							<SettingsDrawer
-								drawerTitle="Dashboard Configuration"
-								isOpen={isSettingsDrawerOpen}
-								onClose={onSettingsDrawerClose}
-							>
-								<DashboardSettingsV2
-									dashboard={dashboard}
-									onRefetch={onRefetch}
-								/>
-							</SettingsDrawer>
-						</>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="add-panel-btn"
-							onClick={onEmptyWidgetHandler}
-							icon={<Plus size="md" />}
-							type="primary"
-							data-testid="add-panel-header"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</section>
-			{tags.length > 0 && (
-				<div className="dashboard-tags">
-					{tags.map((tag) => (
-						<Tag key={tag} className="tag">
-							{tag}
-						</Tag>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className="dashboard-description-section">{description}</section>
-			)}
-
-			<Modal
-				open={isRenameDashboardOpen}
-				title="Rename Dashboard"
-				onOk={onNameChangeHandler}
-				onCancel={(): void => {
-					setIsRenameDashboardOpen(false);
-				}}
-				rootClassName="rename-dashboard"
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={onNameChangeHandler}
-							disabled={isRenameLoading}
-						>
-							Rename Dashboard
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => setIsRenameDashboardOpen(false)}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="dashboard-content">
-					<Typography.Text className="name-text">Enter a new name</Typography.Text>
-					<Input
-						data-testid="dashboard-name"
-						className="dashboard-name-input"
-						value={updatedTitle}
-						onChange={(e): void => setUpdatedTitle(e.target.value)}
-					/>
-				</div>
-			</Modal>
-		</Card>
-	);
-}
-
-export default DashboardDescriptionV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss

@@ -1,227 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.overviewSettings {
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-	padding: 16px !important;
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	margin: '16px 0';
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}

frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx

@@ -1,363 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesJSONPatchOperationDTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import styles from './GeneralSettings.module.scss';
-import { Button } from './styles';
-import { Base64Icons } from './utils';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { V2Dashboard } from '../../utils';
-
-const { Option } = Select;
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-// Convert V2 tags ({key, value}[]) into "key:value" strings for the V1
-// AddTags component (which expects string[]), and back on save.
-//
-// V2 tags require both `key` and `value` to be non-empty server-side
-// (returns `tag_invalid_value` otherwise). To preserve the V1 single-word
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {
-				return { key: trimmed, value: trimmed };
-			}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}
-
-function GeneralDashboardSettingsV2({
-	dashboard,
-	onRefetch,
-}: Props): JSX.Element {
-	const id = dashboard?.id ?? '';
-
-	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(id);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(id);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard?.tags ?? []),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] =
-		useState<string>(description);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
-		useState<number>(0);
-
-	const { t } = useTranslation('common');
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard?.updatedAt]);
-
-	const buildPatch = (): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	};
-
-	const onSaveHandler = async (): Promise<void> => {
-		if (!id) {
-			return;
-		}
-		const ops = buildPatch();
-		if (ops.length === 0) {
-			return;
-		}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	};
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {
-				n += 1;
-			}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = (): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	};
-
-	return (
-		<div className={styles.overviewContent}>
-			<Col className={styles.overviewSettings}>
-				<Space
-					direction="vertical"
-					style={{
-						width: '100%',
-						display: 'flex',
-						flexDirection: 'column',
-						gap: '21px',
-					}}
-				>
-					<div>
-						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-						<section className={styles.nameIconInput}>
-							<Select
-								defaultActiveFirstOption
-								data-testid="dashboard-image"
-								suffixIcon={null}
-								rootClassName={styles.dashboardImageInput}
-								value={updatedImage}
-								onChange={(value: string): void => setUpdatedImage(value)}
-							>
-								{Base64Icons.map((icon) => (
-									<Option value={icon} key={icon}>
-										<img
-											src={icon}
-											alt="dashboard-icon"
-											className={styles.listItemImage}
-										/>
-									</Option>
-								))}
-							</Select>
-							<Input
-								data-testid="dashboard-name"
-								className={styles.dashboardNameInput}
-								value={updatedTitle}
-								onChange={(e): void => setUpdatedTitle(e.target.value)}
-							/>
-						</section>
-					</div>
-
-					<div>
-						<Typography className={styles.dashboardName}>Description</Typography>
-						<Input.TextArea
-							data-testid="dashboard-desc"
-							rows={6}
-							value={updatedDescription}
-							className={styles.descriptionTextArea}
-							onChange={(e): void => setUpdatedDescription(e.target.value)}
-						/>
-					</div>
-					<div>
-						<Typography className={styles.dashboardName}>Tags</Typography>
-						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
-					</div>
-				</Space>
-			</Col>
-			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
-				<div className={styles.crossPanelSyncSectionHeader}>
-					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-						Cross-Panel Sync
-					</Typography.Text>
-					<Tooltip
-						title={
-							<div className={styles.crossPanelSyncTooltipContent}>
-								<strong className={styles.crossPanelSyncTooltipTitle}>
-									Cross-Panel Sync
-								</strong>
-								<span className={styles.crossPanelSyncTooltipDescription}>
-									Sync crosshair and tooltip across all the dashboard panels
-								</span>
-								<a
-									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-									target="_blank"
-									rel="noopener noreferrer"
-									className={styles.crossPanelSyncTooltipDocLink}
-								>
-									Learn more
-									<ExternalLink size={12} />
-								</a>
-							</div>
-						}
-						placement="top"
-						mouseEnterDelay={0.5}
-					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-					</Tooltip>
-				</div>
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Sync Mode
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Sync crosshair and tooltip across all the dashboard panels
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={cursorSyncMode}
-						onChange={(e): void => {
-							setCursorSyncMode(e.target.value as DashboardCursorSync);
-						}}
-					>
-						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Crosshair}>
-							Crosshair
-						</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-					</Radio.Group>
-				</div>
-				{cursorSyncMode === DashboardCursorSync.Tooltip && (
-					<div className={styles.crossPanelSyncRow}>
-						<div className={styles.crossPanelSyncInfo}>
-							<Typography.Text className={styles.crossPanelSyncTitle}>
-								Synced Tooltip Series
-							</Typography.Text>
-							<Typography.Text className={styles.crossPanelSyncDescription}>
-								Show only series that intersect on group-by, or every series with the
-								matching ones highlighted
-							</Typography.Text>
-						</div>
-						<Radio.Group
-							value={syncTooltipFilterMode}
-							onChange={(e): void => {
-								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-									path: getAbsoluteUrl(window.location.pathname),
-									mode: e.target.value,
-								});
-								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-							}}
-						>
-							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-								Filtered
-							</Radio.Button>
-						</Radio.Group>
-					</div>
-				)}
-			</Col>
-			{numberOfUnsavedChanges > 0 && (
-				<div className={styles.overviewSettingsFooter}>
-					<div className={styles.unsaved}>
-						<div className={styles.unsavedDot} />
-						<Typography.Text className={styles.unsavedChanges}>
-							{numberOfUnsavedChanges} unsaved change
-							{numberOfUnsavedChanges > 1 && 's'}
-						</Typography.Text>
-					</div>
-					<div className={styles.footerActionBtns}>
-						<Button
-							disabled={isSaving}
-							icon={<X size={14} />}
-							onClick={discardHandler}
-							type="text"
-							className={styles.discardBtn}
-						>
-							Discard
-						</Button>
-						<Button
-							style={{ margin: '16px 0' }}
-							disabled={isSaving}
-							loading={isSaving}
-							icon={<Check size={14} />}
-							data-testid="save-dashboard-config"
-							onClick={onSaveHandler}
-							type="primary"
-							className={styles.saveBtn}
-						>
-							{t('save')}
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default GeneralDashboardSettingsV2;

frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts

@@ -1,20 +0,0 @@
-import { Button as ButtonComponent, Drawer } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 0.5rem;
-`;
-
-export const Button = styled(ButtonComponent)`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;
-
-export const DrawerContainer = styled(Drawer)`
-	.ant-drawer-header {
-		padding: 0;
-		border: none;
-	}
-`;

frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx

@@ -1,67 +0,0 @@
-import { Button, Empty, Tabs } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Braces, Globe, Table } from '@signozhq/icons';
-
-import '../../DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss';
-
-import GeneralDashboardSettingsV2 from './General';
-import type { V2Dashboard } from '../utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function Placeholder({ message }: { message: string }): JSX.Element {
-	return (
-		<div style={{ padding: 24 }}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}
-
-function DashboardSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const items = [
-		{
-			label: (
-				<Button type="text" icon={<Table size={14} />}>
-					General
-				</Button>
-			),
-			key: 'general',
-			children: (
-				<GeneralDashboardSettingsV2
-					dashboard={dashboard}
-					onRefetch={onRefetch}
-				/>
-			),
-		},
-		{
-			label: (
-				<Button type="text" icon={<Braces size={14} />}>
-					Variables
-				</Button>
-			),
-			key: 'variables',
-			children: <Placeholder message="V2 dashboard variables coming next." />,
-		},
-		{
-			label: (
-				<Button type="text" icon={<Globe size={14} />}>
-					Publish
-				</Button>
-			),
-			key: 'public-dashboard',
-			children: (
-				<Placeholder message="V2 public dashboard publishing coming next." />
-			),
-		},
-	];
-
-	return <Tabs items={items} />;
-}
-
-export default DashboardSettingsV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/GridCardLayoutV2.module.scss

@@ -1,4 +0,0 @@
-.emptyState {
-	padding: 48px;
-	text-align: center;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DashboardSectionV2 } from '../../../utils';
-import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from '../hooks/useDeletePanel';
-import styles from './PanelActionsMenu.module.scss';
-
-interface Props {
-	panelId: string;
-	currentLayoutIndex: number;
-	sections: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelActionsMenu({
-	panelId,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-
-		if (onMovePanel) {
-			const targets = sections.filter(
-				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
-			);
-			if (targets.length === 0) {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					disabled: true,
-				});
-			} else {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					children: targets.map((s) => ({
-						key: `move-${s.layoutIndex}`,
-						label: s.title,
-						onClick: (): void =>
-							onMovePanel({
-								panelId,
-								fromLayoutIndex: currentLayoutIndex,
-								toLayoutIndex: s.layoutIndex,
-							}),
-					})),
-				});
-			}
-		}
-
-		if (onDeletePanel) {
-			if (result.length > 0) {
-				result.push({ type: 'divider' });
-			}
-			result.push({
-				key: 'delete-panel',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				label: 'Delete panel',
-				onClick: (): void =>
-					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
-			});
-		}
-
-		return result;
-	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Panel actions"
-				data-testid={`panel-actions-${panelId}`}
-				// Stop pointer/mouse down from reaching the RGL drag handle this
-				// button lives inside, so opening the menu never starts a panel drag.
-				onPointerDown={(e): void => e.stopPropagation()}
-				onMouseDown={(e): void => e.stopPropagation()}
-				onClick={(e): void => e.stopPropagation()}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default PanelActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2.module.scss

@@ -1,22 +0,0 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 8px;
-}
-
-.typeButton {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-100, #fff);
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2.tsx

@@ -1,82 +0,0 @@
-import { Modal } from 'antd';
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import styles from './PanelTypeSelectionModalV2.module.scss';
-
-interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-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} /> },
-];
-
-interface Props {
-	open: boolean;
-	onClose: () => void;
-	onSelect: (pluginKind: string) => void;
-}
-
-function PanelTypeSelectionModalV2({
-	open,
-	onClose,
-	onSelect,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
-		>
-			<div className={styles.grid}>
-				{PANEL_TYPES.map((type) => (
-					<button
-						key={type.pluginKind}
-						type="button"
-						className={styles.typeButton}
-						data-testid={`panel-type-${type.pluginKind}`}
-						onClick={(): void => onSelect(type.pluginKind)}
-					>
-						{type.icon}
-						{type.label}
-					</button>
-				))}
-			</div>
-		</Modal>
-	);
-}
-
-export default PanelTypeSelectionModalV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelV2/PanelV2.module.scss

@@ -1,52 +0,0 @@
-.panel {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--bg-slate-400, #1d212d);
-	cursor: grab;
-}
-
-.headerLeft {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-}
-
-.headerTitle {
-	margin: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.badge {
-	margin-inline-end: 0;
-}
-
-.body {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12px;
-	color: var(--bg-vanilla-400, #8993ae);
-	font-size: 12px;
-	text-align: center;
-}
-
-.bodyKind {
-	margin-bottom: 6px;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/PanelV2/PanelV2.tsx

@@ -1,93 +0,0 @@
-import { useMemo } from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { EllipsisVertical } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../../../utils';
-import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from '../hooks/useDeletePanel';
-import PanelActionsMenu from '../PanelActionsMenu/PanelActionsMenu';
-import styles from './PanelV2.module.scss';
-
-interface Props {
-	panel: DashboardtypesPanelDTO | undefined;
-	panelId: string;
-	/**
-	 * Placeholder: true once this panel's section enters the viewport. The panel
-	 * query-loading implementation (later PR) will consume this to lazily fetch
-	 * data. Currently unused on purpose.
-	 */
-	isVisible?: boolean;
-	/** Section actions — present only in editable sectioned mode. */
-	currentLayoutIndex?: number;
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelV2({
-	panel,
-	panelId,
-	isVisible,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
-	const description = panel?.spec?.display?.description;
-	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
-	const queryCount = panel?.spec?.queries?.length ?? 0;
-
-	const headerTitle = useMemo(() => {
-		if (!description) {
-			return name;
-		}
-		return (
-			<Tooltip title={description}>
-				<span>{name}</span>
-			</Tooltip>
-		);
-	}, [name, description]);
-
-	return (
-		<div
-			className={styles.panel}
-			data-panel-visible={isVisible ? 'true' : 'false'}
-		>
-			<div className={`${styles.header} panel-drag-handle`}>
-				<div className={styles.headerLeft}>
-					<Typography.Text className={styles.headerTitle}>
-						{headerTitle}
-					</Typography.Text>
-					<Badge className={styles.badge}>{kind}</Badge>
-				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
-					/>
-				) : (
-					<EllipsisVertical size={14} />
-				)}
-			</div>
-
-			<div className={styles.body}>
-				<div>
-					<div className={styles.bodyKind}>{kind} panel</div>
-					<div>
-						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering
-						coming next
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default PanelV2;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useAddPanelToSection.ts

@@ -1,77 +0,0 @@
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addPanelToSectionOps,
-	createDefaultPanel,
-	panelRef,
-} from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-export interface AddPanelArgs {
-	layoutIndex: number;
-	pluginKind: string;
-}
-
-/**
- * Creates a new panel and places its item ref at the bottom of the target
- * section, as one atomic patch. Structure-only: the panel is a valid minimal
- * placeholder (its query is filled in once the panel editor lands).
- */
-export function useAddPanelToSection({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: AddPanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const target = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!target) {
-				return;
-			}
-
-			const panelId = uuid();
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					addPanelToSectionOps({
-						panelId,
-						panel: createDefaultPanel(pluginKind),
-						layoutIndex,
-						item: {
-							x: 0,
-							y: nextY,
-							width: 6,
-							height: 6,
-							content: { $ref: panelRef(panelId) },
-						},
-					}),
-				);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useDeletePanel.ts

@@ -1,55 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-export interface DeletePanelArgs {
-	panelId: string;
-	layoutIndex: number;
-}
-
-/**
- * Removes a panel: drops its item ref from the section's items and deletes the
- * panel from `spec.panels`, as one atomic patch.
- */
-export function useDeletePanel({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: DeletePanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const section = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!section) {
-				return;
-			}
-
-			const nextItems = section.items.filter((i) => i.id !== panelId);
-			try {
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-					removePanelOp(panelId),
-				]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Panel/hooks/useMovePanelToSection.ts

@@ -1,80 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { movePanelBetweenSectionsOps } from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-export interface MovePanelArgs {
-	panelId: string;
-	fromLayoutIndex: number;
-	toLayoutIndex: number;
-}
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-/**
- * Relocates a panel's item ref from one section to another. The panel itself
- * stays in `spec.panels`; only the grid item moves, dropped into a free row at
- * the bottom of the target section. Persisted as one atomic patch.
- */
-export function useMovePanelToSection({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): (args: MovePanelArgs) => Promise<void> {
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({
-			panelId,
-			fromLayoutIndex,
-			toLayoutIndex,
-		}: MovePanelArgs): Promise<void> => {
-			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
-				return;
-			}
-
-			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
-			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
-			if (!source || !target) {
-				return;
-			}
-
-			const moved = source.items.find((i) => i.id === panelId);
-			if (!moved) {
-				return;
-			}
-
-			const sourceItems = source.items.filter((i) => i.id !== panelId);
-			// Place at a fresh row at the bottom of the target section.
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					movePanelBetweenSectionsOps({
-						sourceIndex: fromLayoutIndex,
-						sourceItems,
-						targetIndex: toLayoutIndex,
-						targetItems,
-					}),
-				);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/AddSectionControl/AddSectionControl.module.scss

@@ -1,17 +0,0 @@
-.addButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	margin-top: 8px;
-	padding: 8px 12px;
-	background: transparent;
-	border: 1px dashed var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-		color: var(--bg-vanilla-100, #fff);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/AddSectionControl/AddSectionControl.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../../../utils';
-import { useAddSection } from '../hooks/useAddSection';
-import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
-import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
-import styles from './AddSectionControl.module.scss';
-
-const DEFAULT_SECTION_TITLE = 'New section';
-
-interface Props {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	isSectioned: boolean;
-	onRefetch: () => void;
-}
-
-function AddSectionControl({
-	sections,
-	layouts,
-	dashboardId,
-	isSectioned,
-	onRefetch,
-}: Props): JSX.Element {
-	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
-	const { addSection } = useAddSection({ layouts, dashboardId, onRefetch });
-	const { migrate, isSaving } = useFirstSectionMigration({
-		sections,
-		dashboardId,
-		onRefetch,
-	});
-
-	// Free-flowing dashboard with existing panels → must migrate before sections
-	// can coexist (every panel must belong to a section once any exists).
-	const needsMigration =
-		!isSectioned && sections.some((s) => s.items.length > 0);
-
-	const handleClick = (): void => {
-		if (needsMigration) {
-			setIsMigrationOpen(true);
-			return;
-		}
-		void addSection(DEFAULT_SECTION_TITLE);
-	};
-
-	const handleConfirmMigration = async (): Promise<void> => {
-		await migrate(DEFAULT_SECTION_TITLE);
-		setIsMigrationOpen(false);
-	};
-
-	return (
-		<>
-			<button
-				type="button"
-				className={styles.addButton}
-				onClick={handleClick}
-				data-testid="add-section"
-			>
-				<Plus size={14} />
-				Add section
-			</button>
-			<FirstSectionMigrationModal
-				open={isMigrationOpen}
-				isSaving={isSaving}
-				onClose={(): void => setIsMigrationOpen(false)}
-				onConfirm={handleConfirmMigration}
-			/>
-		</>
-	);
-}
-
-export default AddSectionControl;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/FirstSectionMigrationModal.tsx

@@ -1,41 +0,0 @@
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-interface Props {
-	open: boolean;
-	isSaving: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-}
-
-/**
- * Shown when the user adds the first section to a free-flowing dashboard that
- * already has panels. Confirms grouping the existing panels into a section
- * before proceeding.
- */
-function FirstSectionMigrationModal({
-	open,
-	isSaving,
-	onClose,
-	onConfirm,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Group panels into sections?"
-			onCancel={onClose}
-			onOk={onConfirm}
-			okText="Continue"
-			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
-			destroyOnClose
-		>
-			<Typography.Text>
-				This dashboard&apos;s panels are currently free-flowing. Adding a section
-				will move the existing panels into their own section, and a new empty
-				section will be added below. You can rename sections afterwards.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-export default FirstSectionMigrationModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/RenameSectionModal.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Modal } from 'antd';
-import { Input } from '@signozhq/ui/input';
-
-interface Props {
-	open: boolean;
-	initialValue: string;
-	isSaving: boolean;
-	onClose: () => void;
-	onSubmit: (title: string) => void;
-}
-
-function RenameSectionModal({
-	open,
-	initialValue,
-	isSaving,
-	onClose,
-	onSubmit,
-}: Props): JSX.Element {
-	const [value, setValue] = useState<string>(initialValue);
-
-	// Reseed the field each time the modal opens.
-	useEffect(() => {
-		if (open) {
-			setValue(initialValue);
-		}
-	}, [open, initialValue]);
-
-	const submit = (): void => {
-		const trimmed = value.trim();
-		if (trimmed) {
-			onSubmit(trimmed);
-		}
-	};
-
-	return (
-		<Modal
-			open={open}
-			title="Rename section"
-			onCancel={onClose}
-			onOk={submit}
-			okText="Rename"
-			okButtonProps={{ disabled: isSaving || !value.trim() }}
-			destroyOnClose
-		>
-			<Input
-				testId="rename-section-input"
-				autoFocus
-				value={value}
-				maxLength={120}
-				placeholder="Section name"
-				onChange={(e): void => setValue(e.target.value)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						submit();
-					}
-				}}
-			/>
-		</Modal>
-	);
-}
-
-export default RenameSectionModal;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/Section/Section.module.scss

@@ -1,9 +0,0 @@
-.section {
-	margin-bottom: 12px;
-	border: 1px solid var(--bg-slate-500);
-	border-radius: 4px;
-}
-
-.dragging {
-	opacity: 0.8;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/Section/Section.tsx

@@ -1,160 +0,0 @@
-import { useRef, useState } from 'react';
-import { Modal } from 'antd';
-
-import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-
-import type { DashboardSectionV2 } from '../../../utils';
-import { useRenameSection } from '../hooks/useRenameSection';
-import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
-import { useDeleteSection } from '../hooks/useDeleteSection';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
-import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import PanelTypeSelectionModalV2 from '../../Panel/PanelTypeSelectionModalV2/PanelTypeSelectionModalV2';
-import RenameSectionModal from '../RenameSectionModal';
-import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader, { type SectionDragHandle } from '../SectionHeader/SectionHeader';
-import styles from './Section.module.scss';
-
-interface Props {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	/** All sections + move handler, for the per-panel "Move to section" action. */
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	/** Adds a panel to this section; present only in editable sectioned mode. */
-	onAddPanel?: (args: AddPanelArgs) => void;
-	/** Deletes a panel from this section. */
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow sections. */
-	dragHandle?: SectionDragHandle;
-}
-
-function Section({
-	section,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	sections,
-	onMovePanel,
-	onAddPanel,
-	onDeletePanel,
-	dragHandle,
-}: Props): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
-	// true once the section scrolls into (or near) the viewport.
-	const isVisible = useIntersectionObserver(containerRef, {
-		rootMargin: '200px',
-	});
-
-	const { open, toggle } = useToggleSectionCollapse({
-		layoutIndex: section.layoutIndex,
-		initialOpen: section.open,
-		dashboardId,
-	});
-
-	const [isRenaming, setIsRenaming] = useState(false);
-	const { rename, isSaving } = useRenameSection({
-		layoutIndex: section.layoutIndex,
-		dashboardId,
-		onRefetch,
-	});
-
-	const handleRenameSubmit = async (title: string): Promise<void> => {
-		const ok = await rename(title);
-		if (ok) {
-			setIsRenaming(false);
-		}
-	};
-
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = (pluginKind: string): void => {
-		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-		setIsAddingPanel(false);
-	};
-
-	const { deleteSection } = useDeleteSection({
-		section,
-		dashboardId,
-		onRefetch,
-	});
-	const confirmDeleteSection = (): void => {
-		Modal.confirm({
-			title: `Delete section "${section.title ?? ''}"?`,
-			content: 'Panels in this section will be removed.',
-			okText: 'Delete',
-			okButtonProps: { danger: true },
-			centered: true,
-			onOk: () => deleteSection(),
-		});
-	};
-
-	const grid = (
-		<SectionGrid
-			items={section.items}
-			layoutIndex={section.layoutIndex}
-			dashboardId={dashboardId}
-			isEditable={isEditable}
-			onRefetch={onRefetch}
-			isVisible={isVisible}
-			sections={sections}
-			onMovePanel={onMovePanel}
-			onDeletePanel={onDeletePanel}
-		/>
-	);
-
-	if (!section.title) {
-		// Untitled section — just the grid (no header chrome), but still observed
-		// for the viewport signal.
-		return (
-			<div
-				ref={containerRef}
-				data-testid={`dashboard-section-${section.id}`}
-				data-section-layout-index={section.layoutIndex}
-			>
-				{grid}
-			</div>
-		);
-	}
-
-	return (
-		<div
-			ref={containerRef}
-			className={styles.section}
-			data-testid={`dashboard-section-${section.id}`}
-			data-section-layout-index={section.layoutIndex}
-		>
-			<SectionHeader
-				sectionId={section.id}
-				title={section.title}
-				open={open}
-				onToggle={toggle}
-				repeatVariable={section.repeatVariable}
-				dragHandle={dragHandle}
-				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
-				onAddPanel={
-					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
-				}
-				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
-			/>
-			{open ? grid : null}
-			<RenameSectionModal
-				open={isRenaming}
-				initialValue={section.title}
-				isSaving={isSaving}
-				onClose={(): void => setIsRenaming(false)}
-				onSubmit={handleRenameSubmit}
-			/>
-			<PanelTypeSelectionModalV2
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={handleSelectPanelType}
-			/>
-		</div>
-	);
-}
-
-export default Section;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,68 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import styles from './SectionActionsMenu.module.scss';
-
-interface Props {
-	sectionId: string;
-	onAddPanel?: () => void;
-	onRename?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionActionsMenu({
-	sectionId,
-	onAddPanel,
-	onRename,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-		if (onAddPanel) {
-			result.push({
-				key: 'add-panel',
-				icon: <Plus size={14} />,
-				label: 'Add panel',
-				onClick: onAddPanel,
-			});
-		}
-		if (onRename) {
-			result.push({
-				key: 'rename',
-				icon: <PenLine size={14} />,
-				label: 'Rename section',
-				onClick: onRename,
-			});
-		}
-		if (onDeleteSection) {
-			result.push(
-				{ type: 'divider' },
-				{
-					key: 'delete-section',
-					danger: true,
-					icon: <Trash2 size={14} />,
-					label: 'Delete section',
-					onClick: onDeleteSection,
-				},
-			);
-		}
-		return result;
-	}, [onAddPanel, onRename, onDeleteSection]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Section actions"
-				data-testid={`dashboard-section-actions-${sectionId}`}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SectionActionsMenu;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -1,7 +0,0 @@
-.preview {
-	border: 1px solid var(--bg-robin-500);
-	border-radius: 4px;
-	background: var(--bg-ink-400, #0b0c0e);
-	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
-	cursor: grabbing;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -1,32 +0,0 @@
-import type { DashboardSectionV2 } from '../../../utils';
-import SectionHeader from '../SectionHeader/SectionHeader';
-import styles from './SectionDragPreview.module.scss';
-
-interface Props {
-	section: DashboardSectionV2;
-}
-
-/**
- * Lightweight preview rendered inside the DragOverlay while a section is being
- * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
- * cheap and never triggers RGL width re-measurement.
- */
-function SectionDragPreview({ section }: Props): JSX.Element {
-	const panelCount = section.items.length;
-	const title = `${section.title ?? ''} · ${panelCount} ${
-		panelCount === 1 ? 'panel' : 'panels'
-	}`;
-
-	return (
-		<div className={styles.preview}>
-			<SectionHeader
-				sectionId={`${section.id}-preview`}
-				title={title}
-				open={false}
-				onToggle={(): void => undefined}
-			/>
-		</div>
-	);
-}
-
-export default SectionDragPreview;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionGrid/SectionGrid.module.scss

@@ -1,12 +0,0 @@
-.grid {
-	// Override react-grid-layout's default red drag/resize placeholder with the
-	// SigNoz brand blue.
-	:global(.react-grid-item.react-grid-placeholder) {
-		background: var(--bg-robin-500);
-		opacity: 0.2;
-		border-radius: 4px;
-		transition-duration: 100ms;
-		z-index: 2;
-		user-select: none;
-	}
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionGrid/SectionGrid.tsx

@@ -1,129 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import GridLayout, {
-	type ItemCallback,
-	WidthProvider,
-	type Layout,
-} from 'react-grid-layout';
-
-import type { DashboardSectionV2 } from '../../../utils';
-import { usePersistLayout } from '../hooks/usePersistLayout';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import PanelV2 from '../../Panel/PanelV2/PanelV2';
-import styles from './SectionGrid.module.scss';
-
-const ResponsiveGridLayout = WidthProvider(GridLayout);
-
-interface Props {
-	items: DashboardSectionV2['items'];
-	layoutIndex: number;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	/** Forwarded to panels — true when the parent section is in the viewport. */
-	isVisible?: boolean;
-	/** All sections + move handler — present only in editable sectioned mode (panel "Move to section"). */
-	sections?: DashboardSectionV2[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function SectionGrid({
-	items,
-	layoutIndex,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	isVisible,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const rglLayout = useMemo<Layout[]>(
-		() =>
-			items.map((item) => ({
-				i: item.id,
-				x: item.x,
-				y: item.y,
-				w: item.width,
-				h: item.height,
-			})),
-		[items],
-	);
-
-	const { handleLayoutChange } = usePersistLayout({
-		layoutIndex,
-		items,
-		dashboardId,
-		onRefetch,
-	});
-
-	// On drop, if the pointer is released over a different section, move the
-	// panel there instead of repositioning it within this section. RGL clamps
-	// the dragged item visually to this grid, but the pointer is free, so we
-	// hit-test the release point against section containers.
-	const handleDragStop = useCallback<ItemCallback>(
-		// eslint-disable-next-line max-params -- signature fixed by react-grid-layout's ItemCallback
-		(layout, oldItem, _newItem, _placeholder, event) => {
-			// Deterministically hit-test the release point against section
-			// containers (rect-based, so the dragged item on top doesn't interfere).
-			const targetEl = Array.from(
-				document.querySelectorAll<HTMLElement>('[data-section-layout-index]'),
-			).find((el) => {
-				const r = el.getBoundingClientRect();
-				return (
-					event.clientX >= r.left &&
-					event.clientX <= r.right &&
-					event.clientY >= r.top &&
-					event.clientY <= r.bottom
-				);
-			});
-			const attr = targetEl?.getAttribute('data-section-layout-index');
-			const targetIndex = attr != null ? Number(attr) : null;
-
-			if (onMovePanel && targetIndex != null && targetIndex !== layoutIndex) {
-				onMovePanel({
-					panelId: oldItem.i,
-					fromLayoutIndex: layoutIndex,
-					toLayoutIndex: targetIndex,
-				});
-				return;
-			}
-			handleLayoutChange(layout);
-		},
-		[onMovePanel, layoutIndex, handleLayoutChange],
-	);
-
-	return (
-		<ResponsiveGridLayout
-			className={styles.grid}
-			cols={12}
-			rowHeight={45}
-			autoSize
-			useCSSTransforms
-			layout={rglLayout}
-			draggableHandle=".panel-drag-handle"
-			isDraggable={isEditable}
-			isResizable={isEditable}
-			onDragStop={handleDragStop}
-			onResizeStop={handleLayoutChange}
-			margin={[8, 8]}
-		>
-			{items.map((item) => (
-				<div key={item.id}>
-					<PanelV2
-						panel={item.panel}
-						panelId={item.id}
-						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
-					/>
-				</div>
-			))}
-		</ResponsiveGridLayout>
-	);
-}
-
-export default SectionGrid;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionHeader/SectionHeader.module.scss

@@ -1,52 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	padding: 8px 12px;
-
-	&.headerOpen {
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-}
-
-.dragHandle {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0;
-	background: transparent;
-	border: none;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: grab;
-
-	&:active {
-		cursor: grabbing;
-	}
-}
-
-.toggle {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 4px;
-	padding: 0;
-	background: transparent;
-	border: none;
-	color: inherit;
-	text-align: left;
-	cursor: pointer;
-	min-width: 0;
-}
-
-.title {
-	margin-left: 4px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.repeatBadge {
-	margin-left: 8px;
-	opacity: 0.6;
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionHeader/SectionHeader.tsx

@@ -1,80 +0,0 @@
-import type { DraggableAttributes } from '@dnd-kit/core';
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
-import styles from './SectionHeader.module.scss';
-
-export interface SectionDragHandle {
-	attributes: DraggableAttributes;
-	listeners: SyntheticListenerMap | undefined;
-	setActivatorNodeRef: (element: HTMLElement | null) => void;
-}
-
-interface Props {
-	sectionId: string;
-	title: string;
-	open: boolean;
-	onToggle: () => void;
-	repeatVariable?: string;
-	dragHandle?: SectionDragHandle;
-	onRename?: () => void;
-	onAddPanel?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionHeader({
-	sectionId,
-	title,
-	open,
-	onToggle,
-	repeatVariable,
-	dragHandle,
-	onRename,
-	onAddPanel,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
-	return (
-		<div className={`${styles.header} ${open ? styles.headerOpen : ''}`}>
-			{dragHandle ? (
-				<button
-					type="button"
-					className={styles.dragHandle}
-					ref={dragHandle.setActivatorNodeRef}
-					aria-label="Drag to reorder section"
-					data-testid={`dashboard-section-drag-${sectionId}`}
-					{...dragHandle.attributes}
-					{...dragHandle.listeners}
-				>
-					<GripVertical size={14} />
-				</button>
-			) : null}
-			<button
-				type="button"
-				className={styles.toggle}
-				onClick={onToggle}
-				data-testid={`dashboard-section-toggle-${sectionId}`}
-			>
-				{open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-				<Typography.Text className={styles.title}>{title}</Typography.Text>
-				{repeatVariable ? (
-					<Typography.Text className={styles.repeatBadge}>
-						(repeats per ${repeatVariable})
-					</Typography.Text>
-				) : null}
-			</button>
-			{hasActions ? (
-				<SectionActionsMenu
-					sectionId={sectionId}
-					onAddPanel={onAddPanel}
-					onRename={onRename}
-					onDeleteSection={onDeleteSection}
-				/>
-			) : null}
-		</div>
-	);
-}
-
-export default SectionHeader;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SectionList.tsx

@@ -1,124 +0,0 @@
-import { useMemo } from 'react';
-import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-	restrictToParentElement,
-	restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
-import {
-	SortableContext,
-	verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSectionV2 } from '../../utils';
-import { useSectionDragReorder } from './hooks/useSectionDragReorder';
-import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
-import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
-import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
-import Section from './Section/Section';
-import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
-import SortableSection from './SortableSection';
-
-interface Props {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-}
-
-function SectionList({
-	sections,
-	layouts,
-	dashboardId,
-	isEditable,
-	onRefetch,
-}: Props): JSX.Element {
-	const {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	} = useSectionDragReorder({ sections, layouts, dashboardId, onRefetch });
-
-	const onMovePanel = useMovePanelToSection({
-		sections,
-		dashboardId,
-		onRefetch,
-	});
-	const onAddPanel = useAddPanelToSection({ sections, dashboardId, onRefetch });
-	const onDeletePanel = useDeletePanel({ sections, dashboardId, onRefetch });
-
-	// Only titled sections participate in reordering; untitled (free-flow)
-	// blocks render in place without a drag handle.
-	const sortableIds = useMemo(
-		() => orderedSections.filter((s) => s.title).map((s) => s.id),
-		[orderedSections],
-	);
-
-	if (!isEditable) {
-		return (
-			<>
-				{sections.map((section) => (
-					<Section
-						key={section.id}
-						section={section}
-						dashboardId={dashboardId}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				))}
-			</>
-		);
-	}
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-			onDragStart={onDragStart}
-			onDragEnd={onDragEnd}
-			onDragCancel={onDragCancel}
-		>
-			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-				{orderedSections.map((section) =>
-					section.title ? (
-						<SortableSection
-							key={section.id}
-							section={section}
-							dashboardId={dashboardId}
-							isEditable={isEditable}
-							onRefetch={onRefetch}
-							sections={sections}
-							onMovePanel={onMovePanel}
-							onAddPanel={onAddPanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					) : (
-						<Section
-							key={section.id}
-							section={section}
-							dashboardId={dashboardId}
-							isEditable={isEditable}
-							onRefetch={onRefetch}
-							sections={sections}
-							onMovePanel={onMovePanel}
-							onAddPanel={onAddPanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					),
-				)}
-			</SortableContext>
-			{/* dropAnimation disabled: optimistic reorder already places the section,
-			    so animating the overlay back would cause a visible snap/shake. */}
-			<DragOverlay dropAnimation={null}>
-				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
-			</DragOverlay>
-		</DndContext>
-	);
-}
-
-export default SectionList;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/SortableSection.tsx

@@ -1,68 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-
-import type { DashboardSectionV2 } from '../../utils';
-import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
-import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
-import Section from './Section/Section';
-
-interface Props {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-	sections: DashboardSectionV2[];
-	onMovePanel: (args: MovePanelArgs) => void;
-	onAddPanel: (args: AddPanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-function SortableSection({
-	section,
-	dashboardId,
-	isEditable,
-	onRefetch,
-	sections,
-	onMovePanel,
-	onAddPanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: section.id });
-
-	// dnd-kit drives the drag transform per-frame, so this must be an inline
-	// style — there is no static-stylesheet equivalent for a live transform.
-	// While dragging, the original is hidden (the DragOverlay renders the moving
-	// preview); keeping it in place preserves the gap and lets siblings animate.
-	const style: React.CSSProperties = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0 : undefined,
-	};
-
-	return (
-		<div ref={setNodeRef} style={style}>
-			<Section
-				section={section}
-				dashboardId={dashboardId}
-				isEditable={isEditable}
-				onRefetch={onRefetch}
-				sections={sections}
-				onMovePanel={onMovePanel}
-				onAddPanel={onAddPanel}
-				onDeletePanel={onDeletePanel}
-				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
-			/>
-		</div>
-	);
-}
-
-export default SortableSection;

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useAddSection.ts

@@ -1,58 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, newGridLayout, reorderLayoutsOp } from '../../../patchOps';
-
-interface Params {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	addSection: (title: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Appends an empty titled section. When the dashboard has no layouts yet, the
- * layouts array is created via a `replace` (an `add` to a missing/empty array
- * pointer is unreliable); otherwise a new Grid is appended.
- */
-export function useAddSection({
-	layouts,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const addSection = useCallback(
-		async (title: string): Promise<void> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-			const op =
-				!layouts || layouts.length === 0
-					? reorderLayoutsOp([newGridLayout(trimmed)])
-					: addSectionOp(trimmed);
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [op]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[layouts, dashboardId, onRefetch, showErrorModal],
-	);
-
-	return { addSection, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useDeleteSection.ts

@@ -1,54 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, removeSectionOp } from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-interface Params {
-	section: DashboardSectionV2;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	deleteSection: () => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Deletes a section: removes its Grid layout and deletes every panel it
- * contained from `spec.panels` (orphan cleanup), as one atomic patch.
- */
-export function useDeleteSection({
-	section,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const deleteSection = useCallback(async (): Promise<void> => {
-		if (!dashboardId) {
-			return;
-		}
-		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
-			removePanelOp(i.id),
-		);
-		ops.push(removeSectionOp(section.layoutIndex));
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id: dashboardId }, ops);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [section, dashboardId, onRefetch, showErrorModal]);
-
-	return { deleteSection, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useFirstSectionMigration.ts

@@ -1,67 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	migrate: (newSectionTitle: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Converts a free-flowing dashboard into a sectioned one: every existing
- * untitled layout that holds panels is titled in place ("Section 1", "Section
- * 2", …), then the brand-new section the user asked for is appended — all in one
- * atomic patch. Used once the user confirms the migration prompt.
- */
-export function useFirstSectionMigration({
-	sections,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const migrate = useCallback(
-		async (newSectionTitle: string): Promise<void> => {
-			const trimmed = newSectionTitle.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-			let counter = 1;
-			sections.forEach((s) => {
-				if (!s.title && s.items.length > 0) {
-					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
-					counter += 1;
-				}
-			});
-			ops.push(addSectionOp(trimmed));
-
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, ops);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[sections, dashboardId, onRefetch, showErrorModal],
-	);
-
-	return { migrate, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/usePersistLayout.ts

@@ -1,104 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { Layout } from 'react-grid-layout';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { replaceSectionItemsOp } from '../../../patchOps';
-import type { GridItemV2 } from '../../../utils';
-
-interface Params {
-	layoutIndex: number;
-	items: GridItemV2[];
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	handleLayoutChange: (rglLayout: Layout[]) => void;
-	isSaving: boolean;
-}
-
-/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
-function mergeRglLayout(
-	rglLayout: Layout[],
-	items: GridItemV2[],
-): GridItemV2[] {
-	const byId = new Map(items.map((item) => [item.id, item]));
-	return rglLayout
-		.map((entry) => {
-			const existing = byId.get(entry.i);
-			if (!existing) {
-				return null;
-			}
-			return {
-				...existing,
-				x: entry.x,
-				y: entry.y,
-				width: entry.w,
-				height: entry.h,
-			};
-		})
-		.filter((item): item is GridItemV2 => item !== null);
-}
-
-function hasGeometryChanged(next: GridItemV2[], prev: GridItemV2[]): boolean {
-	if (next.length !== prev.length) {
-		return true;
-	}
-	const prevById = new Map(prev.map((item) => [item.id, item]));
-	return next.some((item) => {
-		const before = prevById.get(item.id);
-		if (!before) {
-			return true;
-		}
-		return (
-			before.x !== item.x ||
-			before.y !== item.y ||
-			before.width !== item.width ||
-			before.height !== item.height
-		);
-	});
-}
-
-/**
- * Persists panel geometry within a single section. Call the returned handler
- * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
- * `onLayoutChange`) to limit network churn.
- */
-export function usePersistLayout({
-	layoutIndex,
-	items,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const handleLayoutChange = useCallback(
-		async (rglLayout: Layout[]): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const nextItems = mergeRglLayout(rglLayout, items);
-			if (!hasGeometryChanged(nextItems, items)) {
-				return;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-				]);
-				onRefetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, items, layoutIndex, onRefetch, showErrorModal],
-	);
-
-	return { handleLayoutChange, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useRenameSection.ts

@@ -1,53 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { renameSectionOp } from '../../../patchOps';
-
-interface Params {
-	layoutIndex: number;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	rename: (title: string) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
-export function useRenameSection({
-	layoutIndex,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const rename = useCallback(
-		async (title: string): Promise<boolean> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return false;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					renameSectionOp(layoutIndex, trimmed),
-				]);
-				onRefetch();
-				return true;
-			} catch (error) {
-				showErrorModal(error as APIError);
-				return false;
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, layoutIndex, onRefetch, showErrorModal],
-	);
-
-	return { rename, isSaving };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useSectionDragReorder.ts

@@ -1,129 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-	type DragEndEvent,
-	type DragStartEvent,
-	KeyboardSensor,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { reorderLayoutsOp } from '../../../patchOps';
-import type { DashboardSectionV2 } from '../../../utils';
-
-interface Params {
-	sections: DashboardSectionV2[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	dashboardId: string | undefined;
-	onRefetch: () => void;
-}
-
-interface Result {
-	sensors: ReturnType<typeof useSensors>;
-	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
-	orderedSections: DashboardSectionV2[];
-	/** The section currently being dragged (for the DragOverlay preview), or null. */
-	activeSection: DashboardSectionV2 | null;
-	onDragStart: (event: DragStartEvent) => void;
-	onDragEnd: (event: DragEndEvent) => void;
-	onDragCancel: () => void;
-}
-
-/**
- * Owns section-reorder drag state. Reorders happen optimistically in local
- * state (keyed by stable section id) and persist via a single
- * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
- * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
- * so the new layouts array is rebuilt by mapping the reordered sections back.
- */
-export function useSectionDragReorder({
-	sections,
-	layouts,
-	dashboardId,
-	onRefetch,
-}: Params): Result {
-	const [activeId, setActiveId] = useState<string | null>(null);
-	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
-	const { showErrorModal } = useErrorModal();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-	);
-
-	// Server data is the source of truth — drop optimistic order whenever it changes.
-	useEffect(() => {
-		setLocalOrderIds(null);
-	}, [sections]);
-
-	const orderedSections = useMemo<DashboardSectionV2[]>(() => {
-		if (!localOrderIds) {
-			return sections;
-		}
-		const byId = new Map(sections.map((s) => [s.id, s]));
-		const ordered = localOrderIds
-			.map((id) => byId.get(id))
-			.filter((s): s is DashboardSectionV2 => s !== undefined);
-		return ordered.length === sections.length ? ordered : sections;
-	}, [sections, localOrderIds]);
-
-	const onDragStart = useCallback((event: DragStartEvent): void => {
-		setActiveId(String(event.active.id));
-	}, []);
-
-	const onDragCancel = useCallback((): void => {
-		setActiveId(null);
-	}, []);
-
-	const onDragEnd = useCallback(
-		async (event: DragEndEvent): Promise<void> => {
-			setActiveId(null);
-			const { active, over } = event;
-			if (!over || active.id === over.id || !dashboardId || !layouts) {
-				return;
-			}
-
-			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
-			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
-			if (oldIndex < 0 || newIndex < 0) {
-				return;
-			}
-
-			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
-			setLocalOrderIds(newOrdered.map((s) => s.id));
-
-			const newLayouts = newOrdered
-				.map((s) => layouts[s.layoutIndex])
-				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
-
-			try {
-				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
-				onRefetch();
-			} catch (error) {
-				setLocalOrderIds(null); // revert optimistic order on failure
-				showErrorModal(error as APIError);
-			}
-		},
-		[orderedSections, layouts, dashboardId, onRefetch, showErrorModal],
-	);
-
-	const activeSection = useMemo(
-		() => orderedSections.find((s) => s.id === activeId) ?? null,
-		[orderedSections, activeId],
-	);
-
-	return {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	};
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section/hooks/useToggleSectionCollapse.ts

@@ -1,55 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { setSectionCollapseOp } from '../../../patchOps';
-
-interface Params {
-	layoutIndex: number;
-	initialOpen: boolean;
-	dashboardId: string | undefined;
-}
-
-interface Result {
-	open: boolean;
-	toggle: () => void;
-}
-
-/**
- * Owns a section's expand/collapse state. The toggle is optimistic (snappy UI)
- * and persists to `spec.layouts[i].spec.display.collapse.open` in the
- * background — no refetch, since collapse is a lightweight UI preference and a
- * full dashboard refetch would flicker. Reverts on patch failure.
- */
-export function useToggleSectionCollapse({
-	layoutIndex,
-	initialOpen,
-	dashboardId,
-}: Params): Result {
-	const [open, setOpen] = useState<boolean>(initialOpen);
-	const { showErrorModal } = useErrorModal();
-
-	// Reconcile with server state when it changes (e.g. after a refetch).
-	useEffect(() => {
-		setOpen(initialOpen);
-	}, [initialOpen]);
-
-	const toggle = useCallback((): void => {
-		setOpen((prev) => {
-			const next = !prev;
-			if (dashboardId) {
-				patchDashboardV2({ id: dashboardId }, [
-					setSectionCollapseOp(layoutIndex, next),
-				]).catch((error) => {
-					setOpen(prev); // revert on failure
-					showErrorModal(error as APIError);
-				});
-			}
-			return next;
-		});
-	}, [dashboardId, layoutIndex, showErrorModal]);
-
-	return { open, toggle };
-}

frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx

@@ -1,104 +0,0 @@
-import { useMemo } from 'react';
-
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { layoutsToSections } from '../utils';
-import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
-import Section from './Section/Section/Section';
-import SectionList from './Section/SectionList';
-import styles from './GridCardLayoutV2.module.scss';
-
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-interface Props {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined;
-	dashboardId: string | undefined;
-	isEditable: boolean;
-	onRefetch: () => void;
-}
-
-function GridCardLayoutV2({
-	layouts,
-	panels,
-	dashboardId,
-	isEditable,
-	onRefetch,
-}: Props): JSX.Element {
-	const sections = useMemo(
-		() => layoutsToSections(layouts, panels),
-		[layouts, panels],
-	);
-
-	const isEmpty =
-		sections.length === 0 || sections.every((s) => s.items.length === 0);
-
-	// Sectioned mode = at least one titled layout. Sections then become a
-	// draggable, reorderable list; otherwise the dashboard is a single
-	// free-flowing grid with no section chrome or reordering.
-	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
-
-	const renderContent = (): JSX.Element => {
-		if (isEmpty) {
-			return (
-				<div className={styles.emptyState}>
-					<Empty
-						image={Empty.PRESENTED_IMAGE_SIMPLE}
-						description={
-							<Typography.Text>No panels in this dashboard yet</Typography.Text>
-						}
-					/>
-				</div>
-			);
-		}
-
-		if (isSectioned) {
-			return (
-				<SectionList
-					sections={sections}
-					layouts={layouts}
-					dashboardId={dashboardId}
-					isEditable={isEditable}
-					onRefetch={onRefetch}
-				/>
-			);
-		}
-
-		return (
-			<>
-				{sections.map((section) => (
-					<Section
-						key={section.id}
-						section={section}
-						dashboardId={dashboardId}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				))}
-			</>
-		);
-	};
-
-	return (
-		<>
-			{renderContent()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					dashboardId={dashboardId}
-					isSectioned={isSectioned}
-					onRefetch={onRefetch}
-				/>
-			) : null}
-		</>
-	);
-}
-
-export default GridCardLayoutV2;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -1,63 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-import getSessionStorageApi from 'api/browser/sessionstorage/get';
-import ROUTES from 'constants/routes';
-import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from '@signozhq/icons';
-
-import { Base64Icons } from '../../../DashboardContainer/DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = getSessionStorageApi(
-			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
-		);
-
-		if (dashboardsListQueryParamsString) {
-			safeNavigate({
-				pathname: ROUTES.ALL_DASHBOARD,
-				search: `?${dashboardsListQueryParamsString}`,
-			});
-		} else {
-			safeNavigate(ROUTES.ALL_DASHBOARD);
-		}
-	}, [safeNavigate]);
-
-	return (
-		<div className="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img
-					src={image || Base64Icons[0]}
-					alt="dashboard-icon"
-					className="dashboard-icon-image"
-				/>
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss

@@ -1,9 +0,0 @@
-.dashboard-header {
-	border-bottom: 1px solid var(--l1-border);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}

frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx

@@ -1,22 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import './DashboardHeader.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardHeader({ title, image }: Props): JSX.Element {
-	return (
-		<div className="dashboard-header">
-			<DashboardBreadcrumbs title={title} image={image} />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);

frontend/src/container/DashboardContainerV2/index.tsx

@@ -1,46 +0,0 @@
-import { FullScreen, useFullScreenHandle } from 'react-full-screen';
-
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useAppContext } from 'providers/App/App';
-
-import DashboardDescriptionV2 from './DashboardDescriptionV2';
-import GridCardLayoutV2 from './GridCardLayoutV2';
-import type { V2Dashboard } from './utils';
-import styles from './DashboardContainerV2.module.scss';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function DashboardContainerV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const fullScreenHandle = useFullScreenHandle();
-	const spec = dashboard?.spec;
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const isEditable = !dashboard?.locked && editDashboard;
-
-	return (
-		<FullScreen handle={fullScreenHandle}>
-			<div className={styles.container}>
-				<DashboardDescriptionV2
-					dashboard={dashboard}
-					handle={fullScreenHandle}
-					onRefetch={onRefetch}
-				/>
-				<div className={styles.body}>
-					<GridCardLayoutV2
-						layouts={spec?.layouts}
-						panels={spec?.panels ?? undefined}
-						dashboardId={dashboard?.id}
-						isEditable={isEditable}
-						onRefetch={onRefetch}
-					/>
-				</div>
-			</div>
-		</FullScreen>
-	);
-}
-
-export default DashboardContainerV2;

frontend/src/container/DashboardContainerV2/patchOps.ts

@@ -1,189 +0,0 @@
-import type {
-	DashboardGridItemDTO,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
-
-import type { GridItemV2 } from './utils';
-
-/**
- * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
- * intentionally side-effect-free (no React, no network) so they can be unit
- * tested and reused by the layout hooks. JSON pointers target the postable
- * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
- * patches in DashboardSettings/General and DashboardDescriptionV2).
- */
-
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function panelRef(panelId: string): string {
-	return `${PANEL_REF_PREFIX}${panelId}`;
-}
-
-/**
- * Builds a minimal, backend-valid panel for a given plugin kind. The spec
- * requires exactly one query whose plugin kind is allowed for the panel;
- * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
- * validated, so an empty builder query is the safe default. The real query is
- * filled in once the panel editor lands.
- */
-export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
-	// The DTO types plugin/query kinds as large generated enum unions; the kind
-	// here is chosen dynamically by the user, so we build the structurally-valid
-	// shape and assert the type.
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'New panel' },
-			plugin: { kind: pluginKind, spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-/** Converts a UI grid item back into the spec's grid-item DTO shape. */
-export function gridItemToDTO(item: GridItemV2): DashboardGridItemDTO {
-	return {
-		x: item.x,
-		y: item.y,
-		width: item.width,
-		height: item.height,
-		content: { $ref: panelRef(item.id) },
-	};
-}
-
-/** Replace the entire items array of one section (used on panel move/resize). */
-export function replaceSectionItemsOp(
-	layoutIndex: number,
-	items: GridItemV2[],
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/items`,
-		value: items.map(gridItemToDTO),
-	};
-}
-
-/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
-export function reorderLayoutsOp(
-	layouts: DashboardtypesLayoutDTO[],
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: replace, path: '/spec/layouts', value: layouts };
-}
-
-/** An empty titled Grid layout (one section). */
-export function newGridLayout(title: string): DashboardtypesLayoutDTO {
-	return {
-		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
-		spec: { display: { title, collapse: { open: true } }, items: [] },
-	};
-}
-
-/** Append a new, empty titled Grid section. */
-export function addSectionOp(
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
-}
-
-interface AddPanelToSectionArgs {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	layoutIndex: number;
-	item: DashboardGridItemDTO;
-}
-
-/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
-export function addPanelToSectionOps({
-	panelId,
-	panel,
-	layoutIndex,
-	item,
-}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
-		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
-	];
-}
-
-interface MovePanelArgs {
-	sourceIndex: number;
-	sourceItems: GridItemV2[];
-	targetIndex: number;
-	targetItems: GridItemV2[];
-}
-
-/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
-export function movePanelBetweenSectionsOps({
-	sourceIndex,
-	sourceItems,
-	targetIndex,
-	targetItems,
-}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		replaceSectionItemsOp(sourceIndex, sourceItems),
-		replaceSectionItemsOp(targetIndex, targetItems),
-	];
-}
-
-/** Rename an existing section's title. */
-export function renameSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
-		value: title,
-	};
-}
-
-/** Persist a section's collapse state. `add` safely replaces the collapse object if present. */
-export function setSectionCollapseOp(
-	layoutIndex: number,
-	open: boolean,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display/collapse`,
-		value: { open },
-	};
-}
-
-/**
- * First-section migration: give an existing untitled (free-flowing) layout a
- * title, turning it into a section in place while preserving its panels.
- */
-export function titleUntitledSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display`,
-		value: { title, collapse: { open: true } },
-	};
-}
-
-/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
-export function removeSectionOp(
-	layoutIndex: number,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
-}
-
-/** Remove a panel definition from `spec.panels`. */
-export function removePanelOp(
-	panelId: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/panels/${panelId}` };
-}

frontend/src/container/DashboardContainerV2/utils.ts

@@ -1,157 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type V2Dashboard = DashboardtypesGettableDashboardV2DTO;
-
-export interface GridItemV2 {
-	id: string;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	panel: DashboardtypesPanelDTO | undefined;
-}
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function extractPanelIdFromRef(ref: string | undefined): string | null {
-	if (!ref) {
-		return null;
-	}
-	if (!ref.startsWith(PANEL_REF_PREFIX)) {
-		return null;
-	}
-	return ref.slice(PANEL_REF_PREFIX.length);
-}
-
-export function flattenGridLayout(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): GridItemV2[] {
-	if (!layouts?.length) {
-		return [];
-	}
-
-	const items: GridItemV2[] = [];
-	layouts.forEach((layoutEnvelope) => {
-		if (layoutEnvelope?.kind !== 'Grid') {
-			return;
-		}
-		const gridItems = layoutEnvelope.spec?.items ?? [];
-		gridItems.forEach((item) => {
-			const id = extractPanelIdFromRef(item.content?.$ref);
-			if (!id) {
-				return;
-			}
-			items.push({
-				id,
-				x: item.x ?? 0,
-				y: item.y ?? 0,
-				width: item.width ?? 6,
-				height: item.height ?? 6,
-				panel: panels?.[id],
-			});
-		});
-	});
-
-	return items;
-}
-
-/**
- * A section corresponds to one entry in `spec.layouts`. If the Grid has a
- * `display.title`, it renders with a collapsible header; otherwise it is a
- * "default" untitled section (visually just the grid).
- */
-export interface DashboardSectionV2 {
-	/**
-	 * Stable identity used for React keys and dnd-kit sortable item ids. Derived
-	 * from the section's content (its first panel ref) so it survives reordering
-	 * — unlike the positional `layoutIndex`. See `getSectionStableId`.
-	 */
-	id: string;
-	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
-	layoutIndex: number;
-	title: string | undefined;
-	open: boolean;
-	items: GridItemV2[];
-	repeatVariable: string | undefined;
-}
-
-/**
- * Derives a stable id for a section from its content. Reordering sections changes
- * their `layoutIndex` but not their content, so keying off the first panel ref
- * keeps React component instances (and any local state) bound to the right
- * section across a reorder. Empty sections fall back to a positional id — they
- * are rarely reordered, and a future backend `id` on the layout spec is the
- * proper long-term fix.
- */
-export function getSectionStableId(
-	items: GridItemV2[],
-	layoutIndex: number,
-): string {
-	if (items.length > 0) {
-		return `sec-${items[0].id}`;
-	}
-	return `sec-empty-${layoutIndex}`;
-}
-
-export function layoutsToSections(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): DashboardSectionV2[] {
-	if (!layouts?.length) {
-		return [];
-	}
-
-	return layouts
-		.map((layoutEnvelope, idx) => {
-			if (layoutEnvelope?.kind !== 'Grid') {
-				return null;
-			}
-			const spec = layoutEnvelope.spec;
-			const items: GridItemV2[] = (spec?.items ?? [])
-				.map((item) => {
-					const id = extractPanelIdFromRef(item.content?.$ref);
-					if (!id) {
-						return null;
-					}
-					return {
-						id,
-						x: item.x ?? 0,
-						y: item.y ?? 0,
-						width: item.width ?? 6,
-						height: item.height ?? 6,
-						panel: panels?.[id],
-					};
-				})
-				.filter((it): it is GridItemV2 => it !== null);
-
-			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
-
-			return {
-				id: getSectionStableId(items, idx),
-				layoutIndex: idx,
-				title,
-				open,
-				items,
-				repeatVariable: spec?.repeatVariable,
-			};
-		})
-		.filter((s): s is DashboardSectionV2 => s !== null);
-}
-
-export function getPanelKindLabel(
-	panel: DashboardtypesPanelDTO | undefined,
-): string {
-	const kind = panel?.spec?.plugin?.kind;
-	if (!kind) {
-		return 'unknown';
-	}
-	return kind.replace(/^signoz\//, '');
-}

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -2,12 +2,14 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
+import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -56,6 +58,8 @@ function LiveLogsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -238,6 +242,7 @@ function LiveLogsContainer({
 						items={formatItems}
 						selectedOptionFormat={options.format}
 						config={config}
+						onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 					/>
 				</div>
 
@@ -261,6 +266,17 @@ function LiveLogsContainer({
 			</div>
 
 			<GoToTop />
+			{config.fieldsSelector && (
+				<FieldsSelector
+					isOpen={isFieldsSelectorOpen}
+					title="Edit columns"
+					fields={config.fieldsSelector.value}
+					onFieldsChange={config.fieldsSelector.onFieldsChange}
+					onClose={(): void => setIsFieldsSelectorOpen(false)}
+					signal={DataSource.LOGS}
+					requiredFields={LOGS_REQUIRED_COLUMNS}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -82,7 +82,6 @@ function LiveLogsList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -198,6 +197,7 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
+							respectColumnOrder={false}
 							onColumnRemove={config?.addColumn?.onRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}

frontend/src/container/LogsExplorerList/index.tsx

@@ -105,7 +105,6 @@ function LogsExplorerList({
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
 		fontSize: options.fontSize,
-		appendTo: 'end',
 	});
 
 	const makeOnLogCopy = useCallback(
@@ -204,6 +203,7 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
+					respectColumnOrder={false}
 					onColumnRemove={config?.addColumn?.onRemove}
 					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -1,11 +1,14 @@
+import { useState } from 'react';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import FieldsSelector from 'components/FieldsSelector';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { LOGS_REQUIRED_COLUMNS } from 'container/OptionsMenu/constants';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
@@ -30,6 +33,8 @@ function LogsActionsContainer({
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const formatItems = [
 		{
 			key: 'raw',
@@ -92,12 +97,24 @@ function LogsActionsContainer({
 									items={formatItems}
 									selectedOptionFormat={options.format}
 									config={config}
+									onOpenColumns={(): void => setIsFieldsSelectorOpen(true)}
 								/>
 							</div>
 						</>
 					)}
 				</div>
 			</div>
+			{config.fieldsSelector && (
+				<FieldsSelector
+					isOpen={isFieldsSelectorOpen}
+					title="Edit columns"
+					fields={config.fieldsSelector.value}
+					onFieldsChange={config.fieldsSelector.onFieldsChange}
+					onClose={(): void => setIsFieldsSelectorOpen(false)}
+					signal={DataSource.LOGS}
+					requiredFields={LOGS_REQUIRED_COLUMNS}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -232,4 +232,159 @@ describe('useOptionsMenu', () => {
 		expect(optionNames).toContain('level');
 		expect(optionNames).toContain('timestamp');
 	});
+
+	describe('reorderSelectColumns / handleRemoveSelectedColumn — composite ID lookup', () => {
+		const baseFormatting = {
+			format: 'table',
+			maxLines: 1,
+			fontSize: 'small',
+		};
+
+		// Two entries share the same `name` but differ in `fieldContext` — the
+		// exact case composite IDs are meant to disambiguate.
+		const seedColumns = [
+			{
+				name: 'body',
+				fieldContext: 'log',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'service.name',
+				fieldContext: 'resource',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'service.name',
+				fieldContext: 'attribute',
+				fieldDataType: 'string',
+				signal: 'logs',
+			},
+			{
+				name: 'timestamp',
+				fieldContext: 'log',
+				fieldDataType: '',
+				signal: 'logs',
+			},
+		];
+
+		beforeEach(() => {
+			(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
+				data: { data: { data: { keys: {} } } },
+				isFetching: false,
+			});
+			(usePreferenceContext as jest.Mock).mockReturnValue({
+				traces: {
+					preferences: { columns: [], formatting: baseFormatting },
+					updateColumns: mockUpdateColumns,
+					updateFormatting: mockUpdateFormatting,
+				},
+				logs: {
+					preferences: { columns: seedColumns, formatting: baseFormatting },
+					updateColumns: mockUpdateColumns,
+					updateFormatting: mockUpdateFormatting,
+				},
+			});
+		});
+
+		it('reorders by composite IDs — preserves both same-name variants distinctly', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
+			result.current.config.addColumn?.onReorder([
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
+			]);
+
+			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
+			const reordered = mockUpdateColumns.mock.calls[0][0];
+			expect(
+				reordered.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual([
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
+			]);
+		});
+
+		it('reorder ignores ids that are not columns (e.g. state-indicator) and skips unknown ids', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			result.current.config.addColumn?.onReorder([
+				'state-indicator',
+				'log.timestamp',
+				'unknown.composite',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
+			]);
+
+			const reordered = mockUpdateColumns.mock.calls[0][0];
+			// state-indicator + unknown.composite filtered; rest preserved in given order.
+			expect(
+				reordered.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual([
+				'log.timestamp',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
+			]);
+		});
+
+		it('removes only the variant whose composite ID matches', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			// Removing 'resource.service.name' should drop ONLY the resource variant.
+			result.current.config.addColumn?.onRemove('resource.service.name');
+
+			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
+			const remaining = mockUpdateColumns.mock.calls[0][0];
+			expect(
+				remaining.map(
+					(c: { name: string; fieldContext: string }) =>
+						`${c.fieldContext}.${c.name}`,
+				),
+			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
+		});
+
+		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {
+			const { result } = renderHook(() =>
+				useOptionsMenu({
+					dataSource: DataSource.LOGS,
+					aggregateOperator: 'count',
+				}),
+			);
+
+			result.current.config.addColumn?.onRemove('unknown.composite');
+
+			const remaining = mockUpdateColumns.mock.calls[0][0];
+			// No entries match → full list preserved.
+			expect(remaining).toHaveLength(seedColumns.length);
+		});
+	});
 });

frontend/src/container/OptionsMenu/constants.ts

@@ -35,7 +35,7 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
-const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
+export const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
 
 /**
  * Always-on invariant: every logs selectColumns array must contain `body` and

frontend/src/container/OptionsMenu/types.ts

@@ -42,4 +42,8 @@ export type OptionsMenuConfig = {
 		onRemove: (key: string) => void;
 		onReorder: (orderedIds: string[]) => void;
 	};
+	fieldsSelector?: {
+		value: TelemetryFieldKey[];
+		onFieldsChange: (next: TelemetryFieldKey[]) => void;
+	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -36,7 +36,7 @@ import {
 	OptionsMenuConfig,
 	OptionsQuery,
 } from './types';
-import { getOptionsFromKeys } from './utils';
+import { buildCompositeKey, getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	storageKey?: string;
@@ -281,7 +281,7 @@ const useOptionsMenu = ({
 	const handleRemoveSelectedColumn = useCallback(
 		(columnKey: string) => {
 			const newSelectedColumns = preferences?.columns?.filter(
-				({ name }) => name !== columnKey,
+				(f) => buildCompositeKey(f.name, f.fieldContext) !== columnKey,
 			);
 
 			if (!newSelectedColumns?.length && dataSource !== DataSource.LOGS) {
@@ -363,9 +363,11 @@ const useOptionsMenu = ({
 	const reorderSelectColumns = useCallback(
 		(orderedIds: string[]): void => {
 			const current = preferences?.columns ?? [];
-			const byName = new Map(current.map((f) => [f.name, f]));
+			const byCompositeKey = new Map(
+				current.map((f) => [buildCompositeKey(f.name, f.fieldContext), f]),
+			);
 			const reordered = orderedIds
-				.map((id) => byName.get(id))
+				.map((id) => byCompositeKey.get(id))
 				.filter((f): f is TelemetryFieldKey => f !== undefined);
 			updateColumns(reordered);
 		},
@@ -396,6 +398,10 @@ const useOptionsMenu = ({
 				onSearch: handleSearchAttribute,
 				onReorder: reorderSelectColumns,
 			},
+			fieldsSelector: {
+				value: preferences?.columns ?? [],
+				onFieldsChange: updateColumns,
+			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
 				onChange: handleFormatChange,
@@ -417,6 +423,7 @@ const useOptionsMenu = ({
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
 			reorderSelectColumns,
+			updateColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

frontend/src/container/OptionsMenu/utils.ts

@@ -14,3 +14,9 @@ export const getOptionsFromKeys = (
 		({ value }) => !selectedKeys.find((key) => key === value),
 	);
 };
+
+// Composite identity for a column. Disambiguates same-name fields across
+// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
+// Falls back to bare name when context is missing.
+export const buildCompositeKey = (name: string, context?: string): string =>
+	context ? `${context}.${name}` : name;

frontend/src/container/TracesExplorer/Controls/Controls.module.scss

@@ -0,0 +1,14 @@
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.3rem;
+	margin: 8px 0;
+}
+
+.optionsTrigger {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	cursor: pointer;
+}

frontend/src/container/TracesExplorer/Controls/index.tsx

@@ -1,11 +1,13 @@
-import { memo } from 'react';
-import { OptionFormatTypes } from 'constants/optionsFormatTypes';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings } from '@signozhq/icons';
+import FieldsSelector from 'components/FieldsSelector';
 import Controls, { ControlsProps } from 'container/Controls';
-import OptionsMenu from 'container/OptionsMenu';
 import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
+import { DataSource } from 'types/common/queryBuilder';
 
-import { Container } from './styles';
+import styles from './Controls.module.scss';
 
 function TraceExplorerControls({
 	isLoading,
@@ -14,6 +16,9 @@ function TraceExplorerControls({
 	config,
 	showSizeChanger = true,
 }: TraceExplorerControlsProps): JSX.Element | null {
+	const { t } = useTranslation(['trace']);
+	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
+
 	const {
 		pagination,
 		handleCountItemsPerPageChange,
@@ -22,12 +27,25 @@ function TraceExplorerControls({
 	} = useQueryPagination(totalCount, perPageOptions);
 
 	return (
-		<Container>
-			{config && (
-				<OptionsMenu
-					selectedOptionFormat={OptionFormatTypes.LIST} // Defaulting it to List view as options are shown only in the List view tab
-					config={{ addColumn: config?.addColumn }}
-				/>
+		<div className={styles.container}>
+			{config?.fieldsSelector && (
+				<>
+					<div
+						className={styles.optionsTrigger}
+						onClick={(): void => setIsFieldsSelectorOpen(true)}
+					>
+						{t('options_menu.options')}
+						<Settings size="md" />
+					</div>
+					<FieldsSelector
+						isOpen={isFieldsSelectorOpen}
+						title="Edit columns"
+						fields={config.fieldsSelector.value}
+						onFieldsChange={config.fieldsSelector.onFieldsChange}
+						onClose={(): void => setIsFieldsSelectorOpen(false)}
+						signal={DataSource.TRACES}
+					/>
+				</>
 			)}
 
 			<Controls
@@ -41,7 +59,7 @@ function TraceExplorerControls({
 				handleNavigatePrevious={handleNavigatePrevious}
 				showSizeChanger={showSizeChanger}
 			/>
-		</Container>
+		</div>
 	);
 }
 

frontend/src/container/TracesExplorer/Controls/styles.ts

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-`;

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -207,8 +207,9 @@ function ListView({
 			const reordered = [...columns];
 			const [moved] = reordered.splice(fromIndex, 1);
 			reordered.splice(toIndex, 0, moved);
+			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
 			const orderedIds = reordered
-				.map((c) => String(('dataIndex' in c && c.dataIndex) || c.key || ''))
+				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
 				.filter(Boolean);
 			config?.addColumn?.onReorder(orderedIds);
 		},

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -5,6 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
@@ -83,12 +84,11 @@ export const getListColumns = (
 	const columns: ColumnsType<RowData> =
 		selectedColumns.map((props) => {
 			const name = props?.name || (props as any)?.key;
-			const fieldDataType = props?.fieldDataType || (props as any)?.dataType;
 			const fieldContext = props?.fieldContext || (props as any)?.type;
 			return {
 				title: name,
 				dataIndex: name,
-				key: `${name}-${fieldDataType}-${fieldContext}`,
+				key: buildCompositeKey(name, fieldContext),
 				width: 145,
 				render: (value, item): JSX.Element => {
 					if (value === '') {

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,47 +1,5 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Typography } from '@signozhq/ui/typography';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
-import Spinner from 'components/Spinner';
-import DashboardContainerV2 from 'container/DashboardContainerV2';
-
 function DashboardPageV2(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
-		id: dashboardId,
-	});
-
-	const dashboard = data?.data;
-	const name = dashboard?.spec?.display?.name;
-
-	useEffect(() => {
-		if (name) {
-			document.title = name;
-		}
-	}, [name]);
-
-	if (isLoading) {
-		return <Spinner tip="Loading dashboard..." />;
-	}
-
-	if (isError) {
-		return (
-			<div style={{ padding: 24 }}>
-				<Typography.Title>Failed to load dashboard</Typography.Title>
-				<Typography.Text>{(error as Error)?.message}</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<DashboardContainerV2
-			dashboard={dashboard}
-			onRefetch={(): void => {
-				refetch();
-			}}
-		/>
-	);
+	return <>DashboardPageV2</>;
 }
 
 export default DashboardPageV2;

frontend/src/utils/__tests__/queryContextUtils.test.ts

@@ -3,6 +3,7 @@ import {
 	extractQueryPairs,
 	getCurrentQueryPair,
 	getCurrentValueIndexAtCursor,
+	getQueryContextAtCursor,
 } from '../queryContextUtils';
 
 describe('extractQueryPairs', () => {
@@ -608,3 +609,42 @@ describe('getCurrentQueryPair', () => {
 		expect(result).toStrictEqual(queryPairs[0]);
 	});
 });
+
+describe('getQueryContextAtCursor - trailing dot in key/value', () => {
+	// A token ending with "." (e.g. "service.") is lexed as FREETEXT rather than
+	// KEY, which previously collapsed the context to "nothing" and made the
+	// suggestion dropdown render empty (appearing closed). These cases lock in
+	// that a partial key/value still resolves to the correct context.
+	it('keeps key context while typing a key that ends with a dot', () => {
+		['service.', 'k8s.', 'attribute.', 'k8s.pod.'].forEach((q) => {
+			const ctx = getQueryContextAtCursor(q, q.length);
+			expect(ctx.isInKey).toBe(true);
+			expect(ctx.isInValue).toBe(false);
+			expect(ctx.isInOperator).toBe(false);
+			expect(ctx.keyToken).toBe(q);
+		});
+	});
+
+	it('treats a new key after a conjunction as key context', () => {
+		const q = 'a = b AND k8s.';
+		const ctx = getQueryContextAtCursor(q, q.length);
+		expect(ctx.isInKey).toBe(true);
+		expect(ctx.isInValue).toBe(false);
+	});
+
+	it('keeps value context while typing a value that ends with a dot', () => {
+		const q = 'service.name = foo.';
+		const ctx = getQueryContextAtCursor(q, q.length);
+		expect(ctx.isInValue).toBe(true);
+		expect(ctx.isInKey).toBe(false);
+		expect(ctx.keyToken).toBe('service.name');
+		expect(ctx.operatorToken).toBe('=');
+	});
+
+	it('still resolves a complete dotted key to key context', () => {
+		const q = 'k8s.namespace';
+		const ctx = getQueryContextAtCursor(q, q.length);
+		expect(ctx.isInKey).toBe(true);
+		expect(ctx.keyToken).toBe('k8s.namespace');
+	});
+});

frontend/src/utils/queryContextUtils.ts

@@ -766,6 +766,58 @@ export function getQueryContextAtCursor(
 			}
 		}
 
+		// A token that ends with a '.' (e.g. "service." or "k8s.pod.") is lexed as
+		// FREETEXT, not KEY, because the KEY rule requires a character after the dot.
+		// While the user is mid-typing such a key/value the token stays FREETEXT, which
+		// is otherwise unclassified and would collapse the context to "nothing" — making
+		// the suggestion dropdown render empty (and appear closed). Classify the partial
+		// token by the slot it occupies so suggestions keep flowing until the next
+		// character turns it back into a valid KEY token.
+		const partialToken = exactToken ?? lastTokenBeforeCursor;
+		if (
+			partialToken &&
+			partialToken.channel === 0 &&
+			partialToken.type === FilterQueryLexer.FREETEXT
+		) {
+			// Closest meaningful token before the partial one determines the slot:
+			// right after an operator we are typing a value, otherwise a key.
+			const prevMeaningful =
+				allTokens
+					.filter(
+						(t) =>
+							t.channel === 0 &&
+							t.type !== FilterQueryLexer.EOF &&
+							t.stop < partialToken.start,
+					)
+					.pop() || null;
+
+			const prevContext = prevMeaningful
+				? determineTokenContext(prevMeaningful, input)
+				: null;
+			const isValuePosition = !!prevContext?.isInOperator;
+
+			return {
+				tokenType: partialToken.type,
+				text: partialToken.text,
+				start: partialToken.start,
+				stop: partialToken.stop,
+				currentToken: partialToken.text,
+				isInKey: !isValuePosition,
+				isInNegation: false,
+				isInOperator: false,
+				isInValue: isValuePosition,
+				isInFunction: false,
+				isInConjunction: false,
+				isInParenthesis: false,
+				isInBracketList: false,
+				keyToken: isValuePosition ? currentPair?.key || '' : partialToken.text,
+				operatorToken: isValuePosition ? currentPair?.operator || '' : undefined,
+				valueToken: isValuePosition ? partialToken.text : undefined,
+				queryPairs,
+				currentPair,
+			};
+		}
+
 		// If we don't have tokens yet, return default context
 		if (!previousToken && !nextToken && !exactToken && !lastTokenBeforeCursor) {
 			return {

pkg/telemetrylogs/condition_builder.go

@@ -186,7 +186,7 @@ func (c *conditionBuilder) conditionFor(
 		column := columns[0]
 		if len(key.Evolutions) > 0 {
 			// we will use the corresponding column and its evolution entry for the query
-			newColumns, _, err := selectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
+			newColumns, _, err := qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
 			if err != nil {
 				return "", err
 			}

pkg/telemetrylogs/field_mapper.go

@@ -3,11 +3,7 @@ package telemetrylogs
 import (
 	"context"
 	"fmt"
-	"slices"
-	"sort"
-	"strconv"
 	"strings"
-	"time"
 
 	schema "github.com/SigNoz/signoz-otel-collector/cmd/signozschemamigrator/schema_migrator"
 	"github.com/SigNoz/signoz-otel-collector/utils"
@@ -137,113 +133,6 @@ func (m *fieldMapper) getColumn(ctx context.Context, key *telemetrytypes.Telemet
 	return nil, qbtypes.ErrColumnNotFound
 }
 
-// selectEvolutionsForColumns selects the appropriate evolution entries for each column based on the time range.
-// Logic:
-//   - Finds the latest base evolution (<= tsStartTime) across ALL columns
-//   - Rejects all evolutions before this latest base evolution
-//   - For duplicate evolutions it considers the oldest one (first in ReleaseTime)
-//   - For each column, includes its evolution if it's >= latest base evolution and <= tsEndTime
-//   - Results are sorted by ReleaseTime descending (newest first)
-func selectEvolutionsForColumns(columns []*schema.Column, evolutions []*telemetrytypes.EvolutionEntry, tsStart, tsEnd uint64) ([]*schema.Column, []*telemetrytypes.EvolutionEntry, error) {
-
-	sortedEvolutions := make([]*telemetrytypes.EvolutionEntry, len(evolutions))
-	copy(sortedEvolutions, evolutions)
-
-	// sort the evolutions by ReleaseTime ascending
-	sort.Slice(sortedEvolutions, func(i, j int) bool {
-		return sortedEvolutions[i].ReleaseTime.Before(sortedEvolutions[j].ReleaseTime)
-	})
-
-	tsStartTime := time.Unix(0, int64(tsStart))
-	tsEndTime := time.Unix(0, int64(tsEnd))
-
-	// Build evolution map: column name -> evolution
-	evolutionMap := make(map[string]*telemetrytypes.EvolutionEntry)
-	for _, evolution := range sortedEvolutions {
-		if _, exists := evolutionMap[evolution.ColumnName+":"+evolution.FieldName+":"+strconv.Itoa(int(evolution.Version))]; exists {
-			// since if there is duplicate we would just use the oldest one.
-			continue
-		}
-		evolutionMap[evolution.ColumnName+":"+evolution.FieldName+":"+strconv.Itoa(int(evolution.Version))] = evolution
-	}
-
-	// Find the latest base evolution (<= tsStartTime) across ALL columns
-	// Evolutions are sorted, so we can break early
-	var latestBaseEvolutionAcrossAll *telemetrytypes.EvolutionEntry
-	for _, evolution := range sortedEvolutions {
-		if evolution.ReleaseTime.After(tsStartTime) {
-			break
-		}
-		latestBaseEvolutionAcrossAll = evolution
-	}
-
-	// We shouldn't reach this, it basically means there is something wrong with the evolutions data
-	if latestBaseEvolutionAcrossAll == nil {
-		return nil, nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "no base evolution found for columns %v", columns)
-	}
-
-	columnLookUpMap := make(map[string]*schema.Column)
-	for _, column := range columns {
-		columnLookUpMap[column.Name] = column
-	}
-
-	// Collect column-evolution pairs
-	type colEvoPair struct {
-		column    *schema.Column
-		evolution *telemetrytypes.EvolutionEntry
-	}
-	pairs := []colEvoPair{}
-
-	for _, evolution := range evolutionMap {
-		// Reject evolutions before the latest base evolution
-		if evolution.ReleaseTime.Before(latestBaseEvolutionAcrossAll.ReleaseTime) {
-			continue
-		}
-		// skip evolutions after tsEndTime
-		if evolution.ReleaseTime.After(tsEndTime) || evolution.ReleaseTime.Equal(tsEndTime) {
-			continue
-		}
-
-		if _, exists := columnLookUpMap[evolution.ColumnName]; !exists {
-			return nil, nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "evolution column %s not found in columns %v", evolution.ColumnName, columns)
-		}
-
-		pairs = append(pairs, colEvoPair{columnLookUpMap[evolution.ColumnName], evolution})
-	}
-
-	// If no pairs found, fall back to latestBaseEvolutionAcrossAll for matching columns
-	if len(pairs) == 0 {
-		for _, column := range columns {
-			// Use latestBaseEvolutionAcrossAll if this column name matches its column name
-			if column.Name == latestBaseEvolutionAcrossAll.ColumnName {
-				pairs = append(pairs, colEvoPair{column, latestBaseEvolutionAcrossAll})
-			}
-		}
-	}
-
-	// Sort by ReleaseTime descending (newest first)
-	slices.SortFunc(pairs, func(a, b colEvoPair) int {
-		// Sort by ReleaseTime descending (newest first)
-		if a.evolution.ReleaseTime.After(b.evolution.ReleaseTime) {
-			return -1
-		}
-		if a.evolution.ReleaseTime.Before(b.evolution.ReleaseTime) {
-			return 1
-		}
-		return 0
-	})
-
-	// Extract results
-	newColumns := make([]*schema.Column, len(pairs))
-	evolutionsEntries := make([]*telemetrytypes.EvolutionEntry, len(pairs))
-	for i, pair := range pairs {
-		newColumns[i] = pair.column
-		evolutionsEntries[i] = pair.evolution
-	}
-
-	return newColumns, evolutionsEntries, nil
-}
-
 func (m *fieldMapper) FieldFor(ctx context.Context, tsStart, tsEnd uint64, key *telemetrytypes.TelemetryFieldKey) (string, error) {
 	columns, err := m.getColumn(ctx, key)
 	if err != nil {
@@ -254,7 +143,7 @@ func (m *fieldMapper) FieldFor(ctx context.Context, tsStart, tsEnd uint64, key *
 	var evolutionsEntries []*telemetrytypes.EvolutionEntry
 	if len(key.Evolutions) > 0 {
 		// we will use the corresponding column and its evolution entry for the query
-		newColumns, evolutionsEntries, err = selectEvolutionsForColumns(columns, key.Evolutions, tsStart, tsEnd)
+		newColumns, evolutionsEntries, err = qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, tsStart, tsEnd)
 		if err != nil {
 			return "", err
 		}

pkg/telemetrylogs/field_mapper_test.go

@@ -536,390 +536,6 @@ func TestFieldForWithEvolutions(t *testing.T) {
 	}
 }
 
-func TestSelectEvolutionsForColumns(t *testing.T) {
-	testCases := []struct {
-		name            string
-		columns         []*schema.Column
-		evolutions      []*telemetrytypes.EvolutionEntry
-		tsStart         uint64
-		tsEnd           uint64
-		expectedColumns []string // column names
-		expectedEvols   []string // evolution column names
-		expectedError   bool
-		errorStr        string
-	}{
-		{
-			name: "New evolutions at tsStartTime - should include latest evolution",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resource"},
-			expectedEvols:   []string{"resource"},
-		},
-		{
-			name: "New evolutions after tsStartTime but less than tsEndTime - should include both",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 2, 3, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resource", "resources_string"}, // sorted by ReleaseTime desc
-			expectedEvols:   []string{"resource", "resources_string"},
-		},
-		{
-			name: "Columns without matching evolutions - should exclude them",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],          // no evolution for this
-				logsV2Columns["attributes_string"], // no evolution for this
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resources_string"},
-			expectedEvols:   []string{"resources_string"},
-		},
-		{
-			name: "New evolutions at tsEndTime - should not include new evolution",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 30, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resources_string"},
-			expectedEvols:   []string{"resources_string"},
-		},
-		{
-			name: "New evolutions after tsEndTime - should exclude new",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 2, 25, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resources_string"},
-			expectedEvols:   []string{"resources_string"},
-		},
-		{
-			name:    "Empty columns array",
-			columns: []*schema.Column{},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{},
-			expectedEvols:   []string{},
-			expectedError:   true,
-			errorStr:        "column resources_string not found",
-		},
-		{
-			name: "Duplicate evolutions - should use first encountered (oldest if sorted)",
-			columns: []*schema.Column{
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 1, 20, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resource"},
-			expectedEvols:   []string{"resource"}, // should use first one (older)
-		},
-		{
-			name: "Genuine Duplicate evolutions with new version- should consider both",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      0,
-					ReleaseTime:  time.Date(0, 0, 0, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      1,
-					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					Version:      2,
-					ReleaseTime:  time.Date(2024, 1, 20, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 1, 16, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resources_string", "resource"},
-			expectedEvols:   []string{"resources_string", "resource"}, // should use first one (older)
-		},
-		{
-			name: "Evolution exactly at tsEndTime",
-			columns: []*schema.Column{
-				logsV2Columns["resources_string"],
-				logsV2Columns["resource"],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resources_string",
-					ColumnType:   "Map(LowCardinality(String), String)",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					ReleaseTime:  time.Date(2024, 1, 15, 0, 0, 0, 0, time.UTC),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   "resource",
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextResource,
-					FieldName:    "__all__",
-					ReleaseTime:  time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC), // exactly at tsEnd
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{"resources_string"}, // resource excluded because After(tsEnd) is true
-			expectedEvols:   []string{"resources_string"},
-		},
-		{
-			name: "Single evolution after tsStartTime - JSON body",
-			columns: []*schema.Column{
-				logsV2Columns[LogsV2BodyV2Column],
-				logsV2Columns[LogsV2BodyPromotedColumn],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   LogsV2BodyV2Column,
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextBody,
-					FieldName:    "__all__",
-					ReleaseTime:  time.Unix(0, 0),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   LogsV2BodyPromotedColumn,
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextBody,
-					FieldName:    "user.name",
-					ReleaseTime:  time.Date(2024, 2, 2, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{LogsV2BodyPromotedColumn, LogsV2BodyV2Column}, // sorted by ReleaseTime desc (newest first)
-			expectedEvols:   []string{LogsV2BodyPromotedColumn, LogsV2BodyV2Column},
-		},
-		{
-			name: "No evolution after tsStartTime - JSON body",
-			columns: []*schema.Column{
-				logsV2Columns[LogsV2BodyV2Column],
-				logsV2Columns[LogsV2BodyPromotedColumn],
-			},
-			evolutions: []*telemetrytypes.EvolutionEntry{
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   LogsV2BodyV2Column,
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextBody,
-					FieldName:    "__all__",
-					ReleaseTime:  time.Unix(0, 0),
-				},
-				{
-					Signal:       telemetrytypes.SignalLogs,
-					ColumnName:   LogsV2BodyPromotedColumn,
-					ColumnType:   "JSON()",
-					FieldContext: telemetrytypes.FieldContextBody,
-					FieldName:    "user.name",
-					ReleaseTime:  time.Date(2024, 2, 2, 0, 0, 0, 0, time.UTC),
-				},
-			},
-			tsStart:         uint64(time.Date(2024, 2, 3, 0, 0, 0, 0, time.UTC).UnixNano()),
-			tsEnd:           uint64(time.Date(2024, 2, 15, 0, 0, 0, 0, time.UTC).UnixNano()),
-			expectedColumns: []string{LogsV2BodyPromotedColumn},
-			expectedEvols:   []string{LogsV2BodyPromotedColumn},
-		},
-	}
-
-	for _, tc := range testCases {
-		t.Run(tc.name, func(t *testing.T) {
-			resultColumns, resultEvols, err := selectEvolutionsForColumns(tc.columns, tc.evolutions, tc.tsStart, tc.tsEnd)
-
-			if tc.expectedError {
-				assert.Contains(t, err.Error(), tc.errorStr)
-			} else {
-				require.NoError(t, err)
-				assert.Equal(t, len(tc.expectedColumns), len(resultColumns), "column count mismatch")
-				assert.Equal(t, len(tc.expectedEvols), len(resultEvols), "evolution count mismatch")
-
-				resultColumnNames := make([]string, len(resultColumns))
-				for i, col := range resultColumns {
-					resultColumnNames[i] = col.Name
-				}
-				resultEvolNames := make([]string, len(resultEvols))
-				for i, evol := range resultEvols {
-					resultEvolNames[i] = evol.ColumnName
-				}
-
-				for i := range tc.expectedColumns {
-					assert.Equal(t, resultColumnNames[i], tc.expectedColumns[i], "expected column missing: "+tc.expectedColumns[i])
-				}
-				for i := range tc.expectedEvols {
-					assert.Equal(t, resultEvolNames[i], tc.expectedEvols[i], "expected evolution missing: "+tc.expectedEvols[i])
-				}
-				// Verify sorting: should be descending by ReleaseTime
-				for i := 0; i < len(resultEvols)-1; i++ {
-					assert.True(t, !resultEvols[i].ReleaseTime.Before(resultEvols[i+1].ReleaseTime),
-						"evolutions should be sorted descending by ReleaseTime")
-				}
-			}
-		})
-	}
-}
-
 func TestFieldForWithMaterialized(t *testing.T) {
 	ctx := context.Background()
 

pkg/telemetrymetadata/metadata.go

@@ -344,6 +344,11 @@ func (t *telemetryMetaStore) getTracesKeys(ctx context.Context, fieldKeySelector
 			})
 		}
 	}
+
+	if err = t.updateColumnEvolutionMetadataForKeys(ctx, keys); err != nil {
+		return nil, false, err
+	}
+
 	return keys, complete, nil
 }
 
@@ -689,7 +694,7 @@ func (t *telemetryMetaStore) getLogsKeys(ctx context.Context, fieldKeySelectors
 		}
 	}
 
-	if _, err := t.updateColumnEvolutionMetadataForKeys(ctx, keys); err != nil {
+	if err := t.updateColumnEvolutionMetadataForKeys(ctx, keys); err != nil {
 		return nil, false, err
 	}
 
@@ -2370,8 +2375,8 @@ func (k *telemetryMetaStore) fetchEvolutionEntryFromClickHouse(ctx context.Conte
 	return entries, nil
 }
 
-// Get retrieves all evolutions for the given selectors from DB.
-func (k *telemetryMetaStore) updateColumnEvolutionMetadataForKeys(ctx context.Context, keysToUpdate []*telemetrytypes.TelemetryFieldKey) (map[string][]*telemetrytypes.EvolutionEntry, error) {
+// updateColumnEvolutionMetadataForKeys updates the evolution field for keys.
+func (k *telemetryMetaStore) updateColumnEvolutionMetadataForKeys(ctx context.Context, keysToUpdate []*telemetrytypes.TelemetryFieldKey) error {
 
 	var metadataKeySelectors []*telemetrytypes.EvolutionSelector
 	for _, keySelector := range keysToUpdate {
@@ -2385,7 +2390,7 @@ func (k *telemetryMetaStore) updateColumnEvolutionMetadataForKeys(ctx context.Co
 
 	evolutions, err := k.fetchEvolutionEntryFromClickHouse(ctx, metadataKeySelectors)
 	if err != nil {
-		return nil, errors.Newf(errors.TypeInternal, errors.CodeInternal, "failed to fetch evolution from clickhouse %s", err.Error())
+		return errors.Newf(errors.TypeInternal, errors.CodeInternal, "failed to fetch evolution from clickhouse %s", err.Error())
 	}
 
 	evolutionsByUniqueKey := make(map[string][]*telemetrytypes.EvolutionEntry)
@@ -2416,7 +2421,7 @@ func (k *telemetryMetaStore) updateColumnEvolutionMetadataForKeys(ctx context.Co
 			}
 		}
 	}
-	return evolutionsByUniqueKey, nil
+	return nil
 }
 
 // chunkSizeFirstSeenMetricMetadata limits the number of tuples per SQL query to avoid hitting the max_query_size limit.

pkg/telemetrymetadata/metadata_query_test.go

@@ -2,8 +2,12 @@ package telemetrymetadata
 
 import (
 	"context"
+	"regexp"
 	"testing"
 
+	cmock "github.com/SigNoz/clickhouse-go-mock"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/flagger/flaggertest"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/telemetryaudit"
 	"github.com/SigNoz/signoz/pkg/telemetrylogs"
@@ -13,12 +17,24 @@ import (
 	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
 	"github.com/SigNoz/signoz/pkg/telemetrytraces"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	cmock "github.com/SigNoz/clickhouse-go-mock"
 	"github.com/stretchr/testify/assert"
-	"github.com/SigNoz/signoz/pkg/flagger/flaggertest"
 	"github.com/stretchr/testify/require"
 )
 
+type regexMatcher struct {
+}
+
+func (m *regexMatcher) Match(expectedSQL, actualSQL string) error {
+	re, err := regexp.Compile(expectedSQL)
+	if err != nil {
+		return err
+	}
+	if !re.MatchString(actualSQL) {
+		return errors.NewInvalidInputf(errors.CodeInvalidInput, "expected query to contain %s, got %s", expectedSQL, actualSQL)
+	}
+	return nil
+}
+
 func TestGetFirstSeenFromMetricMetadata(t *testing.T) {
 	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
 	mock := mockTelemetryStore.Mock()

pkg/telemetrymetadata/metadata_test.go

@@ -1,582 +0,0 @@
-package telemetrymetadata
-
-import (
-	"context"
-	"regexp"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
-	"github.com/SigNoz/signoz/pkg/telemetryaudit"
-	"github.com/SigNoz/signoz/pkg/telemetrylogs"
-	"github.com/SigNoz/signoz/pkg/telemetrymeter"
-	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
-	"github.com/SigNoz/signoz/pkg/telemetrytraces"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	cmock "github.com/SigNoz/clickhouse-go-mock"
-	"github.com/stretchr/testify/assert"
-	"github.com/SigNoz/signoz/pkg/flagger/flaggertest"
-	"github.com/stretchr/testify/require"
-)
-
-func newTestTelemetryMetaStoreTestHelper(t *testing.T, store telemetrystore.TelemetryStore) telemetrytypes.MetadataStore {
-	t.Helper()
-	return NewTelemetryMetaStore(
-		instrumentationtest.New().ToProviderSettings(),
-		store,
-		telemetrytraces.DBName,
-		telemetrytraces.TagAttributesV2TableName,
-		telemetrytraces.SpanAttributesKeysTblName,
-		telemetrytraces.SpanIndexV3TableName,
-		telemetrymetrics.DBName,
-		telemetrymetrics.AttributesMetadataTableName,
-		telemetrymeter.DBName,
-		telemetrymeter.SamplesAgg1dTableName,
-		telemetrylogs.DBName,
-		telemetrylogs.LogsV2TableName,
-		telemetrylogs.TagAttributesV2TableName,
-		telemetrylogs.LogAttributeKeysTblName,
-		telemetrylogs.LogResourceKeysTblName,
-		telemetryaudit.DBName,
-		telemetryaudit.AuditLogsTableName,
-		telemetryaudit.TagAttributesTableName,
-		telemetryaudit.LogAttributeKeysTblName,
-		telemetryaudit.LogResourceKeysTblName,
-		DBName,
-		AttributesMetadataLocalTableName,
-		ColumnEvolutionMetadataTableName,
-		flaggertest.New(t),
-	)
-}
-
-type regexMatcher struct {
-}
-
-func (m *regexMatcher) Match(expectedSQL, actualSQL string) error {
-	re, err := regexp.Compile(expectedSQL)
-	if err != nil {
-		return err
-	}
-	if !re.MatchString(actualSQL) {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "expected query to contain %s, got %s", expectedSQL, actualSQL)
-	}
-	return nil
-}
-
-func TestGetKeys(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	rows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "statement", Type: "String"},
-	}, [][]any{{"CREATE TABLE signoz_traces.signoz_index_v3"}})
-
-	mock.
-		ExpectSelect("SHOW CREATE TABLE signoz_traces.distributed_signoz_index_v3").
-		WillReturnRows(rows)
-
-	query := `SELECT.*`
-
-	mock.ExpectQuery(query).
-		WithArgs("%http.method%", telemetrytypes.FieldDataTypeString.TagDataType(), 11).
-		WillReturnRows(cmock.NewRows([]cmock.ColumnType{
-			{Name: "tag_key", Type: "String"},
-			{Name: "tag_type", Type: "String"},
-			{Name: "tag_data_type", Type: "String"},
-			{Name: "priority", Type: "UInt8"},
-		}, [][]any{{"http.method", "tag", "String", 1}, {"http.method", "tag", "String", 1}}))
-	keys, _, err := metadata.GetKeys(context.Background(), &telemetrytypes.FieldKeySelector{
-		Signal:        telemetrytypes.SignalTraces,
-		FieldContext:  telemetrytypes.FieldContextSpan,
-		FieldDataType: telemetrytypes.FieldDataTypeString,
-		Name:          "http.method",
-		Limit:         10,
-	})
-
-	if err != nil {
-		t.Fatalf("Failed to get keys: %v", err)
-	}
-
-	t.Logf("Keys: %v", keys)
-}
-
-func TestApplyBackwardCompatibleKeys(t *testing.T) {
-	tests := []struct {
-		name           string
-		inputKeys      []*telemetrytypes.TelemetryFieldKey
-		expectedKeys   []string
-		notExpectedKey string
-	}{
-		{
-			name: "bidirectional mapping: net.peer.name -> server.address",
-			inputKeys: []*telemetrytypes.TelemetryFieldKey{
-				{
-					Name:          "net.peer.name",
-					Signal:        telemetrytypes.SignalTraces,
-					FieldContext:  telemetrytypes.FieldContextAttribute,
-					FieldDataType: telemetrytypes.FieldDataTypeString,
-				},
-			},
-			expectedKeys: []string{"net.peer.name", "server.address"},
-		},
-		{
-			name: "bidirectional mapping: server.address -> net.peer.name",
-			inputKeys: []*telemetrytypes.TelemetryFieldKey{
-				{
-					Name:          "server.address",
-					Signal:        telemetrytypes.SignalTraces,
-					FieldContext:  telemetrytypes.FieldContextResource,
-					FieldDataType: telemetrytypes.FieldDataTypeString,
-				},
-			},
-			expectedKeys: []string{"server.address", "net.peer.name"},
-		},
-		{
-			name: "bidirectional mapping: http.url -> url.full",
-			inputKeys: []*telemetrytypes.TelemetryFieldKey{
-				{
-					Name:          "http.url",
-					Signal:        telemetrytypes.SignalTraces,
-					FieldContext:  telemetrytypes.FieldContextAttribute,
-					FieldDataType: telemetrytypes.FieldDataTypeString,
-				},
-			},
-			expectedKeys: []string{"http.url", "url.full"},
-		},
-		{
-			name: "bidirectional mapping: url.full -> http.url",
-			inputKeys: []*telemetrytypes.TelemetryFieldKey{
-				{
-					Name:          "url.full",
-					Signal:        telemetrytypes.SignalTraces,
-					FieldContext:  telemetrytypes.FieldContextAttribute,
-					FieldDataType: telemetrytypes.FieldDataTypeString,
-				},
-			},
-			expectedKeys: []string{"url.full", "http.url"},
-		},
-		{
-			name: "key without alias",
-			inputKeys: []*telemetrytypes.TelemetryFieldKey{
-				{
-					Name:          "custom.attribute",
-					Signal:        telemetrytypes.SignalTraces,
-					FieldContext:  telemetrytypes.FieldContextAttribute,
-					FieldDataType: telemetrytypes.FieldDataTypeString,
-				},
-			},
-			expectedKeys:   []string{"custom.attribute"},
-			notExpectedKey: "server.address",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-			mock := mockTelemetryStore.Mock()
-
-			metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-			hasTraces := false
-			hasLogs := false
-			for _, key := range tt.inputKeys {
-				switch key.Signal {
-				case telemetrytypes.SignalTraces:
-					hasTraces = true
-				case telemetrytypes.SignalLogs:
-					hasLogs = true
-				}
-			}
-
-			if hasTraces {
-				mock.ExpectSelect("SHOW CREATE TABLE signoz_traces.distributed_signoz_index_v3").
-					WillReturnRows(cmock.NewRows([]cmock.ColumnType{
-						{Name: "statement", Type: "String"},
-					}, [][]any{{"CREATE TABLE signoz_traces.signoz_index_v3"}}))
-
-				var args []interface{}
-				var rows [][]any
-				for _, key := range tt.inputKeys {
-					if key.Signal == telemetrytypes.SignalTraces {
-						tagType := "tag"
-						if key.FieldContext == telemetrytypes.FieldContextResource {
-							tagType = "resource"
-						}
-						args = append(args, "%"+key.Name+"%", tagType, key.FieldDataType.TagDataType())
-						rows = append(rows, []any{key.Name, tagType, key.FieldDataType.TagDataType(), 1})
-					}
-				}
-				args = append(args, 11)
-
-				mock.ExpectQuery(`SELECT.*`).
-					WithArgs(args...).
-					WillReturnRows(cmock.NewRows([]cmock.ColumnType{
-						{Name: "tag_key", Type: "String"},
-						{Name: "tag_type", Type: "String"},
-						{Name: "tag_data_type", Type: "String"},
-						{Name: "priority", Type: "UInt8"},
-					}, rows))
-			}
-
-			if hasLogs {
-				var args []interface{}
-				var rows [][]any
-				for _, key := range tt.inputKeys {
-					if key.Signal == telemetrytypes.SignalLogs {
-						tagType := "tag"
-						if key.FieldContext == telemetrytypes.FieldContextResource {
-							tagType = "resource"
-						}
-						args = append(args, "%"+key.Name+"%", tagType, key.FieldDataType.TagDataType())
-						rows = append(rows, []any{key.Name, tagType, key.FieldDataType.TagDataType(), 1})
-					}
-				}
-				args = append(args, 11)
-
-				mock.ExpectQuery(`SELECT.*`).
-					WithArgs(args...).
-					WillReturnRows(cmock.NewRows([]cmock.ColumnType{
-						{Name: "tag_key", Type: "String"},
-						{Name: "tag_type", Type: "String"},
-						{Name: "tag_data_type", Type: "String"},
-						{Name: "priority", Type: "UInt8"},
-					}, rows))
-			}
-
-			selectors := []*telemetrytypes.FieldKeySelector{}
-			for _, key := range tt.inputKeys {
-				selectors = append(selectors, &telemetrytypes.FieldKeySelector{
-					Signal:        key.Signal,
-					FieldContext:  key.FieldContext,
-					FieldDataType: key.FieldDataType,
-					Name:          key.Name,
-					Limit:         10,
-				})
-			}
-
-			resultMap, _, err := metadata.GetKeysMulti(context.Background(), selectors)
-			require.NoError(t, err, "GetKeysMulti should not return an error")
-
-			for _, expectedKey := range tt.expectedKeys {
-				assert.Contains(t, resultMap, expectedKey, "Expected key %q to exist in result map", expectedKey)
-			}
-
-			if tt.notExpectedKey != "" {
-				assert.NotContains(t, resultMap, tt.notExpectedKey, "Did not expect key %q to exist in result map", tt.notExpectedKey)
-			}
-
-			for _, srcKey := range tt.inputKeys {
-				backwardCompatKeys := GetBackwardCompatKeysForSignal(srcKey.Signal)
-				if aliasKey, ok := backwardCompatKeys[srcKey.Name]; ok {
-					aliasExistedInInput := false
-					for _, inputKey := range tt.inputKeys {
-						if inputKey.Name == aliasKey {
-							aliasExistedInInput = true
-							break
-						}
-					}
-
-					if !aliasExistedInInput {
-						if aliasEntries, exists := resultMap[aliasKey]; exists && len(aliasEntries) > 0 {
-							aliasEntry := aliasEntries[0]
-							assert.Equal(t, srcKey.Signal, aliasEntry.Signal, "Alias %q should have same signal", aliasKey)
-							assert.Equal(t, srcKey.FieldContext, aliasEntry.FieldContext, "Alias %q should have same field context", aliasKey)
-							assert.Equal(t, srcKey.FieldDataType, aliasEntry.FieldDataType, "Alias %q should have same field data type", aliasKey)
-						}
-					}
-				}
-			}
-
-			require.NoError(t, mock.ExpectationsWereMet(), "All SQL expectations should be met")
-		})
-	}
-}
-
-func TestEnrichWithIntrinsicMetricKeys(t *testing.T) {
-	result := enrichWithIntrinsicMetricKeys(
-		map[string][]*telemetrytypes.TelemetryFieldKey{},
-		[]*telemetrytypes.FieldKeySelector{
-			{
-				Signal:            telemetrytypes.SignalMetrics,
-				Name:              "metric",
-				SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			},
-		},
-	)
-
-	require.Contains(t, result, "metric_name")
-	assert.Equal(t, telemetrytypes.FieldContextMetric, result["metric_name"][0].FieldContext)
-
-	result = enrichWithIntrinsicMetricKeys(
-		map[string][]*telemetrytypes.TelemetryFieldKey{},
-		[]*telemetrytypes.FieldKeySelector{
-			{
-				Signal:            telemetrytypes.SignalMetrics,
-				Name:              "metric",
-				FieldContext:      telemetrytypes.FieldContextAttribute,
-				SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			},
-		},
-	)
-	assert.NotContains(t, result, "metric_name")
-
-	result = enrichWithIntrinsicMetricKeys(
-		map[string][]*telemetrytypes.TelemetryFieldKey{},
-		[]*telemetrytypes.FieldKeySelector{
-			{
-				Signal: telemetrytypes.SignalMetrics,
-				MetricContext: &telemetrytypes.MetricContext{
-					MetricNamespace: "system.cpu",
-				},
-				SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			},
-		},
-	)
-	assert.NotContains(t, result, "metric_name")
-}
-
-func TestGetMetricFieldValuesIntrinsicMetricName(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	valueRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "metric_name", Type: "String"},
-	}, [][]any{{"metric.a"}, {"metric.b"}})
-
-	query := `SELECT .*metric_name.*` + telemetrymetrics.TimeseriesV41weekTableName + `.*GROUP BY.*metric_name`
-
-	mock.ExpectQuery(query).
-		WithArgs(51).
-		WillReturnRows(valueRows)
-
-	metadataRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr_string_value", Type: "String"},
-	}, [][]any{})
-
-	mock.ExpectQuery(regexp.QuoteMeta("SELECT DISTINCT attr_string_value FROM signoz_metrics.distributed_metadata WHERE attr_name = ? LIMIT ?")).
-		WithArgs("metric_name", 49).
-		WillReturnRows(metadataRows)
-
-	values, complete, err := metadata.(*telemetryMetaStore).getMetricFieldValues(context.Background(), &telemetrytypes.FieldValueSelector{
-		FieldKeySelector: &telemetrytypes.FieldKeySelector{
-			Signal:            telemetrytypes.SignalMetrics,
-			Name:              "metric_name",
-			Limit:             50,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-		},
-		Limit: 50,
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.ElementsMatch(t, []string{"metric.a", "metric.b"}, values.StringValues)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMetricFieldValuesIntrinsicBoolReturnsEmpty(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	metadataRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr_string_value", Type: "String"},
-	}, [][]any{})
-
-	mock.ExpectQuery(regexp.QuoteMeta("SELECT DISTINCT attr_string_value FROM signoz_metrics.distributed_metadata WHERE attr_name = ? AND attr_datatype = ? AND attr_string_value = ? LIMIT ?")).
-		WithArgs("is_monotonic", telemetrytypes.FieldDataTypeBool.TagDataType(), "true", 11).
-		WillReturnRows(metadataRows)
-
-	values, complete, err := metadata.(*telemetryMetaStore).getMetricFieldValues(context.Background(), &telemetrytypes.FieldValueSelector{
-		FieldKeySelector: &telemetrytypes.FieldKeySelector{
-			Signal:            telemetrytypes.SignalMetrics,
-			Name:              "is_monotonic",
-			FieldDataType:     telemetrytypes.FieldDataTypeBool,
-			Limit:             10,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeExact,
-		},
-		Value: "true",
-		Limit: 10,
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.Empty(t, values.StringValues)
-	assert.Empty(t, values.BoolValues)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMetricFieldValuesAppliesMetricNamespace(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	valueRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr_string_value", Type: "String"},
-	}, [][]any{{"value.a"}})
-
-	mock.ExpectQuery(regexp.QuoteMeta("SELECT DISTINCT attr_string_value FROM signoz_metrics.distributed_metadata WHERE attr_name = ? AND metric_name LIKE ? LIMIT ?")).
-		WithArgs("custom_key", "system.cpu%", 11).
-		WillReturnRows(valueRows)
-
-	values, complete, err := metadata.(*telemetryMetaStore).getMetricFieldValues(context.Background(), &telemetrytypes.FieldValueSelector{
-		FieldKeySelector: &telemetrytypes.FieldKeySelector{
-			Signal:            telemetrytypes.SignalMetrics,
-			Name:              "custom_key",
-			Limit:             10,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			MetricContext: &telemetrytypes.MetricContext{
-				MetricNamespace: "system.cpu",
-			},
-		},
-		Limit: 10,
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.ElementsMatch(t, []string{"value.a"}, values.StringValues)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMetricFieldValuesIntrinsicMetricNameAppliesMetricNamespace(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	valueRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "metric_name", Type: "String"},
-	}, [][]any{{"system.cpu.utilization"}})
-
-	mock.ExpectQuery(regexp.QuoteMeta("SELECT metric_name FROM signoz_metrics.distributed_time_series_v4_1week WHERE metric_name LIKE ? GROUP BY metric_name LIMIT ?")).
-		WithArgs("system.cpu%", 51).
-		WillReturnRows(valueRows)
-
-	metadataRows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr_string_value", Type: "String"},
-	}, [][]any{})
-
-	mock.ExpectQuery(regexp.QuoteMeta("SELECT DISTINCT attr_string_value FROM signoz_metrics.distributed_metadata WHERE attr_name = ? AND metric_name LIKE ? LIMIT ?")).
-		WithArgs("metric_name", "system.cpu%", 50).
-		WillReturnRows(metadataRows)
-
-	values, complete, err := metadata.(*telemetryMetaStore).getMetricFieldValues(context.Background(), &telemetrytypes.FieldValueSelector{
-		FieldKeySelector: &telemetrytypes.FieldKeySelector{
-			Signal:            telemetrytypes.SignalMetrics,
-			Name:              "metric_name",
-			Limit:             50,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			MetricContext: &telemetrytypes.MetricContext{
-				MetricNamespace: "system.cpu",
-			},
-		},
-		Limit: 50,
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.ElementsMatch(t, []string{"system.cpu.utilization"}, values.StringValues)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMeterSourceMetricFieldValuesAppliesMetricNamespace(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	rows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr", Type: "Array(String)"},
-	}, [][]any{{[]string{"service.name", "frontend"}}})
-
-	mock.ExpectQuery(`SELECT .*distributed_samples_agg_1d.*metric_name LIKE .*`).
-		WithArgs("service.name", "\\_\\_%", "system.cpu%", "", 11).
-		WillReturnRows(rows)
-
-	values, complete, err := metadata.(*telemetryMetaStore).getMeterSourceMetricFieldValues(context.Background(), &telemetrytypes.FieldValueSelector{
-		FieldKeySelector: &telemetrytypes.FieldKeySelector{
-			Signal: telemetrytypes.SignalMetrics,
-			Source: telemetrytypes.SourceMeter,
-			Name:   "service.name",
-			MetricContext: &telemetrytypes.MetricContext{
-				MetricNamespace: "system.cpu",
-			},
-		},
-		Limit: 10,
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.ElementsMatch(t, []string{"frontend"}, values.StringValues)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMetricsKeysAppliesMetricNamespace(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	rows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "name", Type: "String"},
-		{Name: "field_context", Type: "String"},
-		{Name: "field_data_type", Type: "String"},
-		{Name: "priority", Type: "UInt8"},
-	}, [][]any{{"service.name", "resource", "String", 1}})
-
-	mock.ExpectQuery(`(?s)SELECT.*distributed_metadata.*metric_name LIKE.*`).
-		WithArgs("%service%", "\\_\\_%", "system.cpu%", 11).
-		WillReturnRows(rows)
-
-	keys, complete, err := metadata.(*telemetryMetaStore).getMetricsKeys(context.Background(), []*telemetrytypes.FieldKeySelector{
-		{
-			Signal:            telemetrytypes.SignalMetrics,
-			Name:              "service",
-			Limit:             10,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			MetricContext: &telemetrytypes.MetricContext{
-				MetricNamespace: "system.cpu",
-			},
-		},
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.Len(t, keys, 1)
-	assert.Equal(t, "service.name", keys[0].Name)
-	require.NoError(t, mock.ExpectationsWereMet())
-}
-
-func TestGetMeterSourceMetricKeysAppliesMetricNamespace(t *testing.T) {
-	mockTelemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &regexMatcher{})
-	mock := mockTelemetryStore.Mock()
-
-	metadata := newTestTelemetryMetaStoreTestHelper(t, mockTelemetryStore)
-
-	rows := cmock.NewRows([]cmock.ColumnType{
-		{Name: "attr_name", Type: "String"},
-	}, [][]any{{"service.name"}})
-
-	mock.ExpectQuery(`SELECT.*distributed_samples_agg_1d.*metric_name LIKE.*`).
-		WithArgs("%service%", "\\_\\_%", "system.cpu%", 10).
-		WillReturnRows(rows)
-
-	keys, complete, err := metadata.(*telemetryMetaStore).getMeterSourceMetricKeys(context.Background(), []*telemetrytypes.FieldKeySelector{
-		{
-			Signal:            telemetrytypes.SignalMetrics,
-			Source:            telemetrytypes.SourceMeter,
-			Name:              "service",
-			Limit:             10,
-			SelectorMatchType: telemetrytypes.FieldSelectorMatchTypeFuzzy,
-			MetricContext: &telemetrytypes.MetricContext{
-				MetricNamespace: "system.cpu",
-			},
-		},
-	})
-	require.NoError(t, err)
-	assert.True(t, complete)
-	assert.Len(t, keys, 1)
-	assert.Equal(t, "service.name", keys[0].Name)
-	require.NoError(t, mock.ExpectationsWereMet())
-}

pkg/telemetrytraces/condition_builder.go

@@ -161,7 +161,33 @@ func (c *conditionBuilder) conditionFor(
 	case qbtypes.FilterOperatorExists, qbtypes.FilterOperatorNotExists:
 
 		var value any
-		switch columns[0].Type.GetType() {
+		column := columns[0]
+		if len(key.Evolutions) > 0 {
+			// we will use the corresponding column and its evolution entry for the query
+			newColumns, _, err := qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
+			if err != nil {
+				return "", err
+			}
+
+			if len(newColumns) == 0 {
+				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "no valid evolution found for field %s in the given time range", key.Name)
+			}
+
+			// Multiple columns means fieldExpression is a multiIf returning NULL when none match,
+			// so a simple null check is sufficient.
+			if len(newColumns) > 1 {
+				if operator == qbtypes.FilterOperatorExists {
+					return sb.IsNotNull(fieldExpression), nil
+				} else {
+					return sb.IsNull(fieldExpression), nil
+				}
+			}
+
+			// otherwise we have to find the correct exist operator based on the column type
+			column = newColumns[0]
+		}
+
+		switch column.Type.GetType() {
 		case schema.ColumnTypeEnumJSON:
 			if operator == qbtypes.FilterOperatorExists {
 				return sb.IsNotNull(fieldExpression), nil
@@ -178,7 +204,7 @@ func (c *conditionBuilder) conditionFor(
 				return sb.E(fieldExpression, value), nil
 			}
 		case schema.ColumnTypeEnumLowCardinality:
-			switch elementType := columns[0].Type.(schema.LowCardinalityColumnType).ElementType; elementType.GetType() {
+			switch elementType := column.Type.(schema.LowCardinalityColumnType).ElementType; elementType.GetType() {
 			case schema.ColumnTypeEnumString:
 				value = ""
 				if operator == qbtypes.FilterOperatorExists {
@@ -202,14 +228,14 @@ func (c *conditionBuilder) conditionFor(
 				return sb.E(fieldExpression, value), nil
 			}
 		case schema.ColumnTypeEnumMap:
-			keyType := columns[0].Type.(schema.MapColumnType).KeyType
+			keyType := column.Type.(schema.MapColumnType).KeyType
 			if _, ok := keyType.(schema.LowCardinalityColumnType); !ok {
-				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "key type %s is not supported for map column type %s", keyType, columns[0].Type)
+				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "key type %s is not supported for map column type %s", keyType, column.Type)
 			}
 
-			switch valueType := columns[0].Type.(schema.MapColumnType).ValueType; valueType.GetType() {
+			switch valueType := column.Type.(schema.MapColumnType).ValueType; valueType.GetType() {
 			case schema.ColumnTypeEnumString, schema.ColumnTypeEnumBool, schema.ColumnTypeEnumFloat64:
-				leftOperand := fmt.Sprintf("mapContains(%s, '%s')", columns[0].Name, key.Name)
+				leftOperand := fmt.Sprintf("mapContains(%s, '%s')", column.Name, key.Name)
 				if key.Materialized {
 					leftOperand = telemetrytypes.FieldKeyToMaterializedColumnNameForExists(key)
 				}
@@ -222,7 +248,7 @@ func (c *conditionBuilder) conditionFor(
 				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "exists operator is not supported for map column type %s", valueType)
 			}
 		default:
-			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "exists operator is not supported for column type %s", columns[0].Type)
+			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "exists operator is not supported for column type %s", column.Type)
 		}
 	}
 	return "", nil

pkg/telemetrytraces/condition_builder_test.go

@@ -3,6 +3,7 @@ package telemetrytraces
 import (
 	"context"
 	"testing"
+	"time"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -14,6 +15,7 @@ import (
 func TestConditionFor(t *testing.T) {
 	ctx := context.Background()
 
+	mockEvolution := mockEvolutionData(time.Date(2025, 10, 26, 0, 10, 0, 0, time.UTC))
 	testCases := []struct {
 		name          string
 		key           telemetrytypes.TelemetryFieldKey
@@ -213,6 +215,7 @@ func TestConditionFor(t *testing.T) {
 				Name:          "service.name",
 				FieldContext:  telemetrytypes.FieldContextResource,
 				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    mockEvolution,
 			},
 			operator:      qbtypes.FilterOperatorExists,
 			value:         nil,
@@ -225,6 +228,7 @@ func TestConditionFor(t *testing.T) {
 				Name:          "service.name",
 				FieldContext:  telemetrytypes.FieldContextResource,
 				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    mockEvolution,
 			},
 			operator:      qbtypes.FilterOperatorNotExists,
 			value:         nil,
@@ -302,3 +306,85 @@ func TestConditionFor(t *testing.T) {
 		})
 	}
 }
+
+func TestConditionForResourceWithEvolution(t *testing.T) {
+	ctx := context.Background()
+	releaseTime := time.Date(2025, 1, 1, 0, 0, 0, 0, time.UTC)
+	evolutions := mockEvolutionData(releaseTime)
+
+	testCases := []struct {
+		name        string
+		key         telemetrytypes.TelemetryFieldKey
+		operator    qbtypes.FilterOperator
+		tsStart     uint64
+		tsEnd       uint64
+		expectedSQL string
+	}{
+		{
+			name: "Exists - window after release - JSON only",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "service.name",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    evolutions,
+			},
+			operator:    qbtypes.FilterOperatorExists,
+			tsStart:     uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:       uint64(time.Date(2025, 7, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedSQL: "WHERE resource.`service.name`::String IS NOT NULL",
+		},
+		{
+			name: "NotExists - window after release - JSON only",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "service.name",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    evolutions,
+			},
+			operator:    qbtypes.FilterOperatorNotExists,
+			tsStart:     uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:       uint64(time.Date(2025, 7, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedSQL: "WHERE resource.`service.name`::String IS NULL",
+		},
+		{
+			name: "Exists - window before release - map only",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "service.name",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    evolutions,
+			},
+			operator:    qbtypes.FilterOperatorExists,
+			tsStart:     uint64(time.Date(2024, 1, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:       uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedSQL: "WHERE mapContains(resources_string, 'service.name') = ?",
+		},
+		{
+			name: "Exists - window straddles release - multiIf null check",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "service.name",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Evolutions:    evolutions,
+			},
+			operator:    qbtypes.FilterOperatorExists,
+			tsStart:     uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:       uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedSQL: "WHERE multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) IS NOT NULL",
+		},
+	}
+
+	fm := NewFieldMapper()
+	conditionBuilder := NewConditionBuilder(fm)
+
+	for _, tc := range testCases {
+		sb := sqlbuilder.NewSelectBuilder()
+		t.Run(tc.name, func(t *testing.T) {
+			cond, err := conditionBuilder.ConditionFor(ctx, tc.tsStart, tc.tsEnd, &tc.key, tc.operator, nil, sb)
+			require.NoError(t, err)
+			sb.Where(cond)
+			sql, _ := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+			assert.Contains(t, sql, tc.expectedSQL)
+		})
+	}
+}

pkg/telemetrytraces/const.go

@@ -1,6 +1,8 @@
 package telemetrytraces
 
-import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+import (
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/field_mapper.go

@@ -174,7 +174,7 @@ func (m *defaultFieldMapper) getColumn(
 ) ([]*schema.Column, error) {
 	switch key.FieldContext {
 	case telemetrytypes.FieldContextResource:
-		return []*schema.Column{indexV3Columns["resource"]}, nil
+		return []*schema.Column{indexV3Columns["resources_string"], indexV3Columns["resource"]}, nil
 	case telemetrytypes.FieldContextScope:
 		return []*schema.Column{}, qbtypes.ErrColumnNotFound
 	case telemetrytypes.FieldContextAttribute:
@@ -254,63 +254,92 @@ func (m *defaultFieldMapper) FieldFor(
 	if err != nil {
 		return "", err
 	}
-	if len(columns) != 1 {
-		return "", errors.Newf(errors.TypeInternal, errors.CodeInternal, "expected exactly 1 column, got %d", len(columns))
+
+	var newColumns []*schema.Column
+	var evolutionsEntries []*telemetrytypes.EvolutionEntry
+	if len(key.Evolutions) > 0 {
+		// we will use the corresponding column and its evolution entry for the query
+		newColumns, evolutionsEntries, err = qbtypes.SelectEvolutionsForColumns(columns, key.Evolutions, startNs, endNs)
+		if err != nil {
+			return "", err
+		}
+	} else {
+		newColumns = columns
 	}
-	column := columns[0]
 
-	switch column.Type.GetType() {
-	case schema.ColumnTypeEnumJSON:
-		// json is only supported for resource context as of now
-		if key.FieldContext != telemetrytypes.FieldContextResource {
-			return "", errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "only resource context fields are supported for json columns, got %s", key.FieldContext.String)
-		}
-		oldColumn := indexV3Columns["resources_string"]
-		oldKeyName := fmt.Sprintf("%s['%s']", oldColumn.Name, key.Name)
-		// have to add ::string as clickHouse throws an error :- data types Variant/Dynamic are not allowed in GROUP BY
-		// once clickHouse dependency is updated, we need to check if we can remove it.
-		if key.Materialized {
-			oldKeyName = telemetrytypes.FieldKeyToMaterializedColumnName(key)
-			oldKeyNameExists := telemetrytypes.FieldKeyToMaterializedColumnNameForExists(key)
-			return fmt.Sprintf("multiIf(%s.`%s` IS NOT NULL, %s.`%s`::String, %s==true, %s, NULL)", column.Name, key.Name, column.Name, key.Name, oldKeyNameExists, oldKeyName), nil
-		} else {
-			return fmt.Sprintf("multiIf(%s.`%s` IS NOT NULL, %s.`%s`::String, mapContains(%s, '%s'), %s, NULL)", column.Name, key.Name, column.Name, key.Name, oldColumn.Name, key.Name, oldKeyName), nil
-		}
-	case schema.ColumnTypeEnumString,
-		schema.ColumnTypeEnumUInt64,
-		schema.ColumnTypeEnumUInt32,
-		schema.ColumnTypeEnumInt8,
-		schema.ColumnTypeEnumInt16,
-		schema.ColumnTypeEnumBool,
-		schema.ColumnTypeEnumDateTime64,
-		schema.ColumnTypeEnumFixedString:
-		return column.Name, nil
-	case schema.ColumnTypeEnumLowCardinality:
-		switch elementType := column.Type.(schema.LowCardinalityColumnType).ElementType; elementType.GetType() {
-		case schema.ColumnTypeEnumString:
-			return column.Name, nil
-		default:
-			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "value type %s is not supported for low cardinality column type %s", elementType, column.Type)
-		}
-	case schema.ColumnTypeEnumMap:
-		keyType := column.Type.(schema.MapColumnType).KeyType
-		if _, ok := keyType.(schema.LowCardinalityColumnType); !ok {
-			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "key type %s is not supported for map column type %s", keyType, column.Type)
+	exprs := []string{}
+	existExpr := []string{}
+	for i, column := range newColumns {
+		// Use evolution column name if available, otherwise use the column name
+		columnName := column.Name
+		if evolutionsEntries != nil && evolutionsEntries[i] != nil {
+			columnName = evolutionsEntries[i].ColumnName
 		}
 
-		switch valueType := column.Type.(schema.MapColumnType).ValueType; valueType.GetType() {
-		case schema.ColumnTypeEnumString, schema.ColumnTypeEnumFloat64, schema.ColumnTypeEnumBool:
-			// a key could have been materialized, if so return the materialized column name
-			if key.Materialized {
-				return telemetrytypes.FieldKeyToMaterializedColumnName(key), nil
+		switch column.Type.GetType() {
+		case schema.ColumnTypeEnumJSON:
+			// json is only supported for resource context as of now
+			if key.FieldContext != telemetrytypes.FieldContextResource {
+				return "", errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "only resource context fields are supported for json columns, got %s", key.FieldContext.String)
+			}
+			// have to add ::string as clickHouse throws an error :- data types Variant/Dynamic are not allowed in GROUP BY
+			// once clickHouse dependency is updated, we need to check if we can remove it.
+			exprs = append(exprs, fmt.Sprintf("%s.`%s`::String", columnName, key.Name))
+			existExpr = append(existExpr, fmt.Sprintf("%s.`%s` IS NOT NULL", columnName, key.Name))
+		case schema.ColumnTypeEnumString,
+			schema.ColumnTypeEnumUInt64,
+			schema.ColumnTypeEnumUInt32,
+			schema.ColumnTypeEnumInt8,
+			schema.ColumnTypeEnumInt16,
+			schema.ColumnTypeEnumBool,
+			schema.ColumnTypeEnumDateTime64,
+			schema.ColumnTypeEnumFixedString:
+			exprs = append(exprs, column.Name)
+		case schema.ColumnTypeEnumLowCardinality:
+			switch elementType := column.Type.(schema.LowCardinalityColumnType).ElementType; elementType.GetType() {
+			case schema.ColumnTypeEnumString:
+				exprs = append(exprs, column.Name)
+			default:
+				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "value type %s is not supported for low cardinality column type %s", elementType, column.Type)
+			}
+		case schema.ColumnTypeEnumMap:
+			keyType := column.Type.(schema.MapColumnType).KeyType
+			if _, ok := keyType.(schema.LowCardinalityColumnType); !ok {
+				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "key type %s is not supported for map column type %s", keyType, column.Type)
+			}
+
+			switch valueType := column.Type.(schema.MapColumnType).ValueType; valueType.GetType() {
+			case schema.ColumnTypeEnumString, schema.ColumnTypeEnumFloat64, schema.ColumnTypeEnumBool:
+				// a key could have been materialized, if so return the materialized column name
+				if key.Materialized {
+					exprs = append(exprs, telemetrytypes.FieldKeyToMaterializedColumnName(key))
+					existExpr = append(existExpr, fmt.Sprintf("%s==true", telemetrytypes.FieldKeyToMaterializedColumnNameForExists(key)))
+				} else {
+					exprs = append(exprs, fmt.Sprintf("%s['%s']", columnName, key.Name))
+					existExpr = append(existExpr, fmt.Sprintf("mapContains(%s, '%s')", columnName, key.Name))
+				}
+			default:
+				return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "value type %s is not supported for map column type %s", valueType, column.Type)
 			}
-			return fmt.Sprintf("%s['%s']", column.Name, key.Name), nil
-		default:
-			return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "value type %s is not supported for map column type %s", valueType, column.Type)
 		}
 	}
+
+	if len(exprs) == 1 {
+		return exprs[0], nil
+	} else if len(exprs) > 1 {
+		// Ensure existExpr has the same length as exprs
+		if len(existExpr) != len(exprs) {
+			return "", errors.New(errors.TypeInternal, errors.CodeInternal, "length of exist exprs doesn't match to that of exprs")
+		}
+		finalExprs := []string{}
+		for i, expr := range exprs {
+			finalExprs = append(finalExprs, fmt.Sprintf("%s, %s", existExpr[i], expr))
+		}
+		return "multiIf(" + strings.Join(finalExprs, ", ") + ", NULL)", nil
+	}
+
 	// should not reach here
-	return column.Name, nil
+	return columns[0].Name, nil
 }
 
 // ColumnExpressionFor returns the column expression for the given field

pkg/telemetrytraces/field_mapper_test.go

@@ -3,6 +3,7 @@ package telemetrytraces
 import (
 	"context"
 	"testing"
+	"time"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
@@ -13,6 +14,7 @@ import (
 func TestGetFieldKeyName(t *testing.T) {
 	ctx := context.Background()
 
+	mockEvolution := mockEvolutionData(time.Date(2024, 6, 2, 0, 0, 0, 0, time.UTC))
 	testCases := []struct {
 		name           string
 		key            telemetrytypes.TelemetryFieldKey
@@ -63,6 +65,7 @@ func TestGetFieldKeyName(t *testing.T) {
 			key: telemetrytypes.TelemetryFieldKey{
 				Name:         "service.name",
 				FieldContext: telemetrytypes.FieldContextResource,
+				Evolutions:   mockEvolution,
 			},
 			expectedResult: "multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL)",
 			expectedError:  nil,
@@ -74,6 +77,7 @@ func TestGetFieldKeyName(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextResource,
 				FieldDataType: telemetrytypes.FieldDataTypeString,
 				Materialized:  true,
+				Evolutions:    mockEvolution,
 			},
 			expectedResult: "multiIf(resource.`deployment.environment` IS NOT NULL, resource.`deployment.environment`::String, `resource_string_deployment$$environment_exists`==true, `resource_string_deployment$$environment`, NULL)",
 			expectedError:  nil,
@@ -92,7 +96,7 @@ func TestGetFieldKeyName(t *testing.T) {
 	for _, tc := range testCases {
 		t.Run(tc.name, func(t *testing.T) {
 			fm := NewFieldMapper()
-			result, err := fm.FieldFor(ctx, 0, 0, &tc.key)
+			result, err := fm.FieldFor(ctx, uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()), uint64(time.Date(2024, 6, 5, 0, 0, 0, 0, time.UTC).UnixNano()), &tc.key)
 
 			if tc.expectedError != nil {
 				assert.Equal(t, tc.expectedError, err)
@@ -103,3 +107,86 @@ func TestGetFieldKeyName(t *testing.T) {
 		})
 	}
 }
+
+func TestFieldForResourceWithEvolution(t *testing.T) {
+	ctx := context.Background()
+	releaseTime := time.Date(2025, 1, 1, 0, 0, 0, 0, time.UTC)
+	evolutions := mockEvolutionData(releaseTime)
+
+	testCases := []struct {
+		name           string
+		key            telemetrytypes.TelemetryFieldKey
+		tsStart        uint64
+		tsEnd          uint64
+		expectedResult string
+	}{
+		{
+			name: "Window straddles release - both columns",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:         "service.name",
+				FieldContext: telemetrytypes.FieldContextResource,
+				Evolutions:   evolutions,
+			},
+			tsStart:        uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:          uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedResult: "multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL)",
+		},
+		{
+			name: "Window fully after release - JSON column only",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:         "service.name",
+				FieldContext: telemetrytypes.FieldContextResource,
+				Evolutions:   evolutions,
+			},
+			tsStart:        uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:          uint64(time.Date(2025, 7, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedResult: "resource.`service.name`::String",
+		},
+		{
+			name: "Window fully before release - map column only",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:         "service.name",
+				FieldContext: telemetrytypes.FieldContextResource,
+				Evolutions:   evolutions,
+			},
+			tsStart:        uint64(time.Date(2024, 1, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:          uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedResult: "resources_string['service.name']",
+		},
+		{
+			name: "Window fully after release - materialized resource",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "deployment.environment",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Materialized:  true,
+				Evolutions:    evolutions,
+			},
+			tsStart:        uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:          uint64(time.Date(2025, 7, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedResult: "resource.`deployment.environment`::String",
+		},
+		{
+			name: "Window straddles release - materialized resource",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          "deployment.environment",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Materialized:  true,
+				Evolutions:    evolutions,
+			},
+			tsStart:        uint64(time.Date(2024, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			tsEnd:          uint64(time.Date(2025, 6, 1, 0, 0, 0, 0, time.UTC).UnixNano()),
+			expectedResult: "multiIf(resource.`deployment.environment` IS NOT NULL, resource.`deployment.environment`::String, `resource_string_deployment$$environment_exists`==true, `resource_string_deployment$$environment`, NULL)",
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			fm := NewFieldMapper()
+			result, err := fm.FieldFor(ctx, tc.tsStart, tc.tsEnd, &tc.key)
+			require.NoError(t, err)
+			assert.Equal(t, tc.expectedResult, result)
+		})
+	}
+}

pkg/telemetrytraces/statement_builder.go

@@ -82,13 +82,6 @@ func (b *traceQueryStatementBuilder) Build(
 	start = querybuilder.ToNanoSecs(start)
 	end = querybuilder.ToNanoSecs(end)
 
-	keySelectors := getKeySelectors(query)
-
-	keys, _, err := b.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	/*
 		Adding a tech debt note here:
 		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
@@ -124,6 +117,15 @@ func (b *traceQueryStatementBuilder) Build(
 		-------------------------------- End of tech debt ----------------------------
 	*/
 
+	// We modify SelectFields above (injecting default fields), and those default
+	// fields can carry keys that need evolutions, so fetch keys after that.
+	keySelectors := getKeySelectors(query)
+
+	keys, _, err := b.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
 	for _, action := range adjustTraceKeys(keys, &query, requestType) {
 		// TODO: change to debug level once we are confident about the behavior
 		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))

pkg/telemetrytraces/stmt_builder_test.go

@@ -16,6 +16,9 @@ import (
 )
 
 func TestStatementBuilder(t *testing.T) {
+	// releaseTime is chosen so it lands inside the standard [1747947419000, 1747983448000]ms
+	// test window, keeping the multiIf SQL form for resource fields.
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name        string
 		requestType qbtypes.RequestType
@@ -355,7 +358,7 @@ func TestStatementBuilder(t *testing.T) {
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 	fl := flaggertest.New(t)
 	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
 
@@ -394,6 +397,7 @@ func TestStatementBuilder(t *testing.T) {
 }
 
 func TestStatementBuilderListQuery(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name        string
 		requestType qbtypes.RequestType
@@ -650,7 +654,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 	fl := flaggertest.New(t)
 	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
 
@@ -683,6 +687,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 }
 
 func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name        string
 		requestType qbtypes.RequestType
@@ -703,6 +708,15 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 						FieldDataType: telemetrytypes.FieldDataTypeString,
 					},
 				},
+				"service.name": {
+					{
+						Name:          "service.name",
+						Signal:        telemetrytypes.SignalTraces,
+						FieldContext:  telemetrytypes.FieldContextResource,
+						FieldDataType: telemetrytypes.FieldDataTypeString,
+						Evolutions:    mockEvolutionData(time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)),
+					},
+				},
 			},
 			query: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
 				Signal:       telemetrytypes.SignalTraces,
@@ -728,6 +742,15 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 						FieldDataType: telemetrytypes.FieldDataTypeString,
 					},
 				},
+				"service.name": {
+					{
+						Name:          "service.name",
+						Signal:        telemetrytypes.SignalTraces,
+						FieldContext:  telemetrytypes.FieldContextResource,
+						FieldDataType: telemetrytypes.FieldDataTypeString,
+						Evolutions:    mockEvolutionData(time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)),
+					},
+				},
 			},
 			query: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
 				Signal:       telemetrytypes.SignalTraces,
@@ -758,7 +781,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 			mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
 			mockMetadataStore.KeysMap = c.keysMap
 			if mockMetadataStore.KeysMap == nil {
-				mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+				mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 			}
 			fl := flaggertest.New(t)
 			aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
@@ -788,7 +811,90 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 	}
 }
 
+func TestStatementBuilderGroupByResourceEvolution(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
+
+	cases := []struct {
+		name     string
+		startMs  uint64
+		endMs    uint64
+		expected qbtypes.Statement
+	}{
+		{
+			name:    "window straddles release - both JSON and map branches",
+			startMs: 1747947419000, // 2025-05-22 21:56:59 UTC, ~3m before release
+			endMs:   1747983448000, // 2025-05-23 07:57:28 UTC, ~10h after release
+			expected: qbtypes.Statement{
+				Query: "WITH __limit_cte AS (SELECT toString(multiIf(multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) IS NOT NULL, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL), NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY `service.name` ORDER BY __result_0 DESC LIMIT ?) SELECT toStartOfInterval(timestamp, INTERVAL 30 SECOND) AS ts, toString(multiIf(multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) IS NOT NULL, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL), NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND (`service.name`) GLOBAL IN (SELECT `service.name` FROM __limit_cte) GROUP BY ts, `service.name`",
+				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10, "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448)},
+			},
+		},
+		{
+			name:    "window after release - JSON column only",
+			startMs: 1747960000000, // 2025-05-23 00:26:40 UTC, ~2.5h after release
+			endMs:   1747983448000, // 2025-05-23 07:57:28 UTC
+			expected: qbtypes.Statement{
+				Query: "WITH __limit_cte AS (SELECT toString(multiIf(resource.`service.name`::String IS NOT NULL, resource.`service.name`::String, NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY `service.name` ORDER BY __result_0 DESC LIMIT ?) SELECT toStartOfInterval(timestamp, INTERVAL 30 SECOND) AS ts, toString(multiIf(resource.`service.name`::String IS NOT NULL, resource.`service.name`::String, NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND (`service.name`) GLOBAL IN (SELECT `service.name` FROM __limit_cte) GROUP BY ts, `service.name`",
+				Args:  []any{"1747960000000000000", "1747983448000000000", uint64(1747958200), uint64(1747983448), 10, "1747960000000000000", "1747983448000000000", uint64(1747958200), uint64(1747983448)},
+			},
+		},
+		{
+			name:    "window before release - map column only",
+			startMs: 1747900000000, // 2025-05-22 08:26:40 UTC, ~13.5h before release
+			endMs:   1747947000000, // 2025-05-22 21:50:00 UTC, ~10m before release
+			expected: qbtypes.Statement{
+				Query: "WITH __limit_cte AS (SELECT toString(multiIf(mapContains(resources_string, 'service.name') = ?, resources_string['service.name'], NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? GROUP BY `service.name` ORDER BY __result_0 DESC LIMIT ?) SELECT toStartOfInterval(timestamp, INTERVAL 30 SECOND) AS ts, toString(multiIf(mapContains(resources_string, 'service.name') = ?, resources_string['service.name'], NULL)) AS `service.name`, count() AS __result_0 FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? AND (`service.name`) GLOBAL IN (SELECT `service.name` FROM __limit_cte) GROUP BY ts, `service.name`",
+				Args:  []any{true, "1747900000000000000", "1747947000000000000", uint64(1747898200), uint64(1747947000), 10, true, "1747900000000000000", "1747947000000000000", uint64(1747898200), uint64(1747947000)},
+			},
+		},
+	}
+
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+
+	statementBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore,
+		fm,
+		cb,
+		aggExprRewriter,
+		nil,
+		fl,
+	)
+
+	query := qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+		Signal:       telemetrytypes.SignalTraces,
+		StepInterval: qbtypes.Step{Duration: 30 * time.Second},
+		Aggregations: []qbtypes.TraceAggregation{
+			{Expression: "count()"},
+		},
+		Filter: &qbtypes.Filter{},
+		Limit:  10,
+		GroupBy: []qbtypes.GroupByKey{
+			{
+				TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+					Name: "service.name",
+				},
+			},
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			q, err := statementBuilder.Build(context.Background(), c.startMs, c.endMs, qbtypes.RequestTypeTimeSeries, query, nil)
+			require.NoError(t, err)
+			require.Equal(t, c.expected.Query, q.Query)
+			require.Equal(t, c.expected.Args, q.Args)
+		})
+	}
+}
+
 func TestStatementBuilderTraceQuery(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name        string
 		requestType qbtypes.RequestType
@@ -911,7 +1017,7 @@ func TestStatementBuilderTraceQuery(t *testing.T) {
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 	fl := flaggertest.New(t)
 	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
 
@@ -944,6 +1050,7 @@ func TestStatementBuilderTraceQuery(t *testing.T) {
 }
 
 func TestAdjustKey(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name        string
 		inputKey    telemetrytypes.TelemetryFieldKey
@@ -957,7 +1064,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap:     buildCompleteFieldKeyMap(),
+			keysMap:     buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: IntrinsicFields["trace_id"],
 		},
 		{
@@ -967,7 +1074,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextBody, // incorrect context
 				FieldDataType: telemetrytypes.FieldDataTypeInt64,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "duration_nano",
 				FieldContext:  telemetrytypes.FieldContextSpan,    // should be corrected
@@ -981,7 +1088,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextSpan, // correct context
 				FieldDataType: telemetrytypes.FieldDataTypeInt64,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "duration_nano",
 				FieldContext:  telemetrytypes.FieldContextSpan,   // should be corrected
@@ -995,8 +1102,8 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap:     buildCompleteFieldKeyMap(),
-			expectedKey: *buildCompleteFieldKeyMap()["service.name"][0],
+			keysMap:     buildCompleteFieldKeyMap(releaseTime),
+			expectedKey: *buildCompleteFieldKeyMap(releaseTime)["service.name"][0],
 		},
 		{
 			name: "single matching key with context specified - override",
@@ -1005,8 +1112,8 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextAttribute,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap:     buildCompleteFieldKeyMap(),
-			expectedKey: *buildCompleteFieldKeyMap()["cart.items_count"][0],
+			keysMap:     buildCompleteFieldKeyMap(releaseTime),
+			expectedKey: *buildCompleteFieldKeyMap(releaseTime)["cart.items_count"][0],
 		},
 		{
 			name: "multiple matching keys - all materialized",
@@ -1043,7 +1150,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "mixed.materialization.key",
 				FieldDataType: telemetrytypes.FieldDataTypeString,
@@ -1057,7 +1164,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextAttribute,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "mixed.materialization.key",
 				FieldContext:  telemetrytypes.FieldContextAttribute,
@@ -1072,7 +1179,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:         "unknown.field",
 				Materialized: false,
@@ -1085,7 +1192,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextAttribute,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "service.name",
 				FieldContext:  telemetrytypes.FieldContextAttribute,
@@ -1100,7 +1207,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "cart.items_count",
 				FieldContext:  telemetrytypes.FieldContextAttribute,
@@ -1115,7 +1222,7 @@ func TestAdjustKey(t *testing.T) {
 				FieldContext:  telemetrytypes.FieldContextUnspecified,
 				FieldDataType: telemetrytypes.FieldDataTypeUnspecified,
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedKey: telemetrytypes.TelemetryFieldKey{
 				Name:          "user.id",
 				FieldContext:  telemetrytypes.FieldContextAttribute,
@@ -1143,6 +1250,7 @@ func TestAdjustKey(t *testing.T) {
 }
 
 func TestAdjustKeys(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	cases := []struct {
 		name                      string
 		query                     qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]
@@ -1168,7 +1276,7 @@ func TestAdjustKeys(t *testing.T) {
 					},
 				},
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedSelectFields: []telemetrytypes.TelemetryFieldKey{
 				{
 					Name:          "service.name",
@@ -1205,7 +1313,7 @@ func TestAdjustKeys(t *testing.T) {
 					},
 				},
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedGroupBy: []qbtypes.GroupByKey{
 				{
 					TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
@@ -1252,7 +1360,7 @@ func TestAdjustKeys(t *testing.T) {
 					},
 				},
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedOrder: []qbtypes.OrderBy{
 				{
 					Key: qbtypes.OrderByKey{
@@ -1311,7 +1419,7 @@ func TestAdjustKeys(t *testing.T) {
 					},
 				},
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			expectedSelectFields: []telemetrytypes.TelemetryFieldKey{
 				{
 					Name:          "trace_id",
@@ -1366,7 +1474,7 @@ func TestAdjustKeys(t *testing.T) {
 					},
 				},
 			},
-			keysMap: buildCompleteFieldKeyMap(),
+			keysMap: buildCompleteFieldKeyMap(releaseTime),
 			// After alias adjustment, name becomes "span.duration" with FieldContextUnspecified
 			// "span.duration" is not in keysMap, so context stays unspecified
 			expectedOrder: []qbtypes.OrderBy{

pkg/telemetrytraces/test_data.go

@@ -1,10 +1,12 @@
 package telemetrytraces
 
 import (
+	"time"
+
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-func buildCompleteFieldKeyMap() map[string][]*telemetrytypes.TelemetryFieldKey {
+func buildCompleteFieldKeyMap(releaseTime time.Time) map[string][]*telemetrytypes.TelemetryFieldKey {
 	keysMap := map[string][]*telemetrytypes.TelemetryFieldKey{
 		"service.name": {
 			{
@@ -115,7 +117,33 @@ func buildCompleteFieldKeyMap() map[string][]*telemetrytypes.TelemetryFieldKey {
 	for _, keys := range keysMap {
 		for _, key := range keys {
 			key.Signal = telemetrytypes.SignalTraces
+			if key.FieldContext == telemetrytypes.FieldContextResource {
+				key.Evolutions = mockEvolutionData(releaseTime)
+			}
 		}
 	}
 	return keysMap
 }
+
+// mockEvolutionData returns the canonical resource-column evolution timeline used in tests:
+// the legacy resources_string map at epoch 0 and the JSON resource column released at releaseTime.
+func mockEvolutionData(releaseTime time.Time) []*telemetrytypes.EvolutionEntry {
+	return []*telemetrytypes.EvolutionEntry{
+		{
+			Signal:       telemetrytypes.SignalTraces,
+			ColumnName:   "resources_string",
+			FieldContext: telemetrytypes.FieldContextResource,
+			ColumnType:   "Map(LowCardinality(String), String)",
+			FieldName:    "__all__",
+			ReleaseTime:  time.Unix(0, 0),
+		},
+		{
+			Signal:       telemetrytypes.SignalTraces,
+			ColumnName:   "resource",
+			ColumnType:   "JSON()",
+			FieldContext: telemetrytypes.FieldContextResource,
+			FieldName:    "__all__",
+			ReleaseTime:  releaseTime,
+		},
+	}
+}

pkg/telemetrytraces/trace_operator_cte_builder_test.go

@@ -16,10 +16,11 @@ import (
 
 func newTestTraceOperatorStatementBuilder(t *testing.T) *traceOperatorStatementBuilder {
 	t.Helper()
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 	fl := flaggertest.New(t)
 	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
 	traceStmtBuilder := NewTraceQueryStatementBuilder(

pkg/telemetrytraces/trace_time_range_test.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"strings"
 	"testing"
+	"time"
 
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
@@ -16,12 +17,13 @@ import (
 )
 
 func TestTraceTimeRangeOptimization(t *testing.T) {
+	releaseTime := time.Date(2025, 5, 22, 22, 0, 0, 0, time.UTC)
 
 	fm := NewFieldMapper()
 	cb := NewConditionBuilder(fm)
 	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
 
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap(releaseTime)
 	mockMetadataStore.KeysMap["trace_id"] = []*telemetrytypes.TelemetryFieldKey{{
 		Name:          "trace_id",
 		FieldContext:  telemetrytypes.FieldContextSpan,