refactor(dashboard-v2): memoize prop-passed handlers with useCallback

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -10,7 +10,7 @@ import {
 	useState,
 } from 'react';
 // eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import getFromLocalstorage from 'api/browser/localstorage/get';
 import setToLocalstorage from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -42,6 +42,7 @@ import useUrlQueryData from 'hooks/useUrlQueryData';
 import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -76,6 +77,7 @@ function LogsExplorerViewsContainer({
 	handleChangeSelectedView: ChangeViewFunctionType;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
+	const dispatch = useDispatch();
 
 	const [showFrequencyChart, setShowFrequencyChart] = useState(
 		() => getFromLocalstorage(LOCALSTORAGE.SHOW_FREQUENCY_CHART) === 'true',
@@ -88,9 +90,10 @@ function LogsExplorerViewsContainer({
 		DEFAULT_PER_PAGE_VALUE,
 	);
 
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, selectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const currentMinTimeRef = useRef<number>(minTime);
 
@@ -326,6 +329,16 @@ function LogsExplorerViewsContainer({
 			currentMinTimeRef.current !== minTime ||
 			orderByChanged
 		) {
+			// Recalculate global time when query changes i.e. stage and run query clicked
+			if (
+				!!requestData?.id &&
+				stagedQuery?.id &&
+				requestData?.id !== stagedQuery?.id &&
+				selectedTime !== 'custom'
+			) {
+				dispatch(UpdateTimeInterval(selectedTime));
+			}
+
 			const newRequestData = getRequestData(stagedQuery, {
 				filters: listQuery?.filters || initialFilters,
 				filter: listQuery?.filter || { expression: '' },
@@ -347,6 +360,8 @@ function LogsExplorerViewsContainer({
 		minTime,
 		activeLogId,
 		selectedPanelType,
+		dispatch,
+		selectedTime,
 		maxTime,
 		orderBy,
 	]);

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -108,21 +108,13 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-jest.mock('container/TopNav/DateTimeSelectionV2/index.tsx', () => {
-	const { useQueryBuilder } = jest.requireActual(
-		'hooks/queryBuilder/useQueryBuilder',
-	);
-	const { useSyncTimeOnStagedQueryChange } = jest.requireActual(
-		'hooks/queryBuilder/useSyncTimeOnStagedQueryChange',
-	);
-
-	return function MockDateTimeSelection(): JSX.Element {
-		const { stagedQuery } = useQueryBuilder();
-		useSyncTimeOnStagedQueryChange(stagedQuery?.id);
-		return <div>MockDateTimeSelection</div>;
-	};
-});
-
+jest.mock(
+	'container/TopNav/DateTimeSelectionV2/index.tsx',
+	() =>
+		function MockDateTimeSelection(): JSX.Element {
+			return <div>MockDateTimeSelection</div>;
+		},
+);
 jest.mock(
 	'container/LogsExplorerChart',
 	() =>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -233,10 +233,8 @@
 			background: var(--l1-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			padding: 0px;
-			gap: 0;
-			margin: 4px;
 
-			.qb-tag-text {
+			.ant-typography {
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px !important;
@@ -246,7 +244,7 @@
 				padding: 2px 6px;
 			}
 
-			> button {
+			.close-icon {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -261,26 +259,26 @@
 			&.resource {
 				border: 1px solid color-mix(in srgb, var(--bg-aqua-400) 13%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-aqua-400);
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 				}
 			}
 			&.tag {
 				border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 20%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-sienna-400);
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 				}
 			}
@@ -288,13 +286,13 @@
 			&.scope {
 				border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-robin-400);
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 				}
 			}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -966,7 +966,6 @@ function QueryBuilderSearchV2(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							className="qb-tag-text"
 							$isInNin={isInNin}
 							$isEnabled={!!searchValue}
 							onClick={(): void => {

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -19,7 +19,6 @@ import {
 	useIsGlobalTimeQueryRefreshing,
 } from 'store/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSyncTimeOnStagedQueryChange } from 'hooks/queryBuilder/useSyncTimeOnStagedQueryChange';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
@@ -188,8 +187,6 @@ function DateTimeSelection({
 
 	const { stagedQuery, currentQuery, initQueryBuilderData } = useQueryBuilder();
 
-	useSyncTimeOnStagedQueryChange(stagedQuery?.id);
-
 	const getInputLabel = (
 		startTime?: Dayjs,
 		endTime?: Dayjs,

frontend/src/hooks/queryBuilder/__tests__/useSyncTimeOnStagedQueryChange.test.ts

@@ -1,139 +0,0 @@
-import { renderHook } from '@testing-library/react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
-
-import { useSyncTimeOnStagedQueryChange } from '../useSyncTimeOnStagedQueryChange';
-
-const mockDispatch = jest.fn();
-
-jest.mock('react-redux', () => ({
-	useDispatch: (): jest.Mock => mockDispatch,
-	useSelector: jest.fn(),
-}));
-
-jest.mock('store/actions', () => ({
-	UpdateTimeInterval: jest.fn((time: string) => ({
-		type: 'UPDATE_TIME_INTERVAL_THUNK',
-		payload: time,
-	})),
-}));
-
-const mockedUseSelector = useSelector as jest.Mock;
-const mockedUpdateTimeInterval = UpdateTimeInterval as unknown as jest.Mock;
-
-const setSelectedTime = (value: string): void => {
-	mockedUseSelector.mockImplementation(
-		(selector: (state: { globalTime: { selectedTime: string } }) => unknown) =>
-			selector({ globalTime: { selectedTime: value } }),
-	);
-};
-
-describe('useSyncTimeOnStagedQueryChange', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		setSelectedTime('1h');
-	});
-
-	it('does not dispatch on initial mount when stagedQueryId is undefined', () => {
-		renderHook(() => useSyncTimeOnStagedQueryChange(undefined));
-		expect(mockDispatch).not.toHaveBeenCalled();
-	});
-
-	it('does not dispatch on initial mount when stagedQueryId is already defined', () => {
-		renderHook(() => useSyncTimeOnStagedQueryChange('initial-id'));
-		expect(mockDispatch).not.toHaveBeenCalled();
-	});
-
-	it('does not dispatch when stagedQueryId transitions from undefined to defined (first staged query arriving)', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: undefined as string | undefined } },
-		);
-
-		rerender({ id: 'first-id' });
-
-		expect(mockDispatch).not.toHaveBeenCalled();
-	});
-
-	it('dispatches UpdateTimeInterval with current selectedTime when stagedQueryId changes', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'first-id' as string | undefined } },
-		);
-
-		expect(mockDispatch).not.toHaveBeenCalled();
-
-		rerender({ id: 'second-id' });
-
-		expect(mockedUpdateTimeInterval).toHaveBeenCalledTimes(1);
-		expect(mockedUpdateTimeInterval).toHaveBeenCalledWith('1h');
-		expect(mockDispatch).toHaveBeenCalledTimes(1);
-		expect(mockDispatch).toHaveBeenCalledWith({
-			type: 'UPDATE_TIME_INTERVAL_THUNK',
-			payload: '1h',
-		});
-	});
-
-	it('does not dispatch when selectedTime is "custom" even if stagedQueryId changes', () => {
-		setSelectedTime('custom');
-
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'first-id' as string | undefined } },
-		);
-
-		rerender({ id: 'second-id' });
-
-		expect(mockDispatch).not.toHaveBeenCalled();
-		expect(mockedUpdateTimeInterval).not.toHaveBeenCalled();
-	});
-
-	it('does not dispatch when only selectedTime changes (stagedQueryId stable)', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'stable-id' as string | undefined } },
-		);
-
-		setSelectedTime('5m');
-		rerender({ id: 'stable-id' });
-
-		expect(mockDispatch).not.toHaveBeenCalled();
-	});
-
-	it('dispatches once per distinct stagedQueryId change', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'a' as string | undefined } },
-		);
-
-		rerender({ id: 'b' });
-		rerender({ id: 'c' });
-		rerender({ id: 'c' }); // no change — should not dispatch again
-
-		expect(mockDispatch).toHaveBeenCalledTimes(2);
-	});
-
-	it('does not dispatch when stagedQueryId transitions from defined to undefined', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'first-id' as string | undefined } },
-		);
-
-		rerender({ id: undefined });
-
-		expect(mockDispatch).not.toHaveBeenCalled();
-	});
-
-	it('uses the latest selectedTime at the moment of stagedQueryId change', () => {
-		const { rerender } = renderHook(
-			({ id }: { id: string | undefined }) => useSyncTimeOnStagedQueryChange(id),
-			{ initialProps: { id: 'a' as string | undefined } },
-		);
-
-		setSelectedTime('15m');
-		rerender({ id: 'b' });
-
-		expect(mockedUpdateTimeInterval).toHaveBeenCalledWith('15m');
-	});
-});

frontend/src/hooks/queryBuilder/useSyncTimeOnStagedQueryChange.ts

@@ -1,36 +0,0 @@
-import { useEffect, useRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useDispatch, useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-// Push fresh min/max back into Redux whenever the staged query changes for a
-// relative time interval. The data hooks that read minTime/maxTime from Redux
-// otherwise keep refetching with the originally frozen window and the time
-// picker displays a stale absolute range.
-// ref - SigNoz/signoz#8277
-export function useSyncTimeOnStagedQueryChange(
-	stagedQueryId: string | undefined,
-): void {
-	const dispatch = useDispatch();
-	const selectedTime = useSelector<AppState, GlobalReducer['selectedTime']>(
-		(state) => state.globalTime.selectedTime,
-	);
-	const prevStagedQueryIdRef = useRef<string | undefined>();
-
-	useEffect(() => {
-		const prevId = prevStagedQueryIdRef.current;
-		const currentId = stagedQueryId;
-		prevStagedQueryIdRef.current = currentId;
-
-		if (
-			prevId !== undefined &&
-			currentId !== undefined &&
-			prevId !== currentId &&
-			selectedTime !== 'custom'
-		) {
-			dispatch(UpdateTimeInterval(selectedTime));
-		}
-	}, [stagedQueryId, selectedTime, dispatch]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -16,14 +16,17 @@ import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } 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 { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
+import DashboardSettings from '../../DashboardSettings';
+import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardActionsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -45,7 +48,7 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: Props): JSX.Element {
+}: DashboardActionsProps): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
@@ -55,6 +58,9 @@ function DashboardActions({
 	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
 		useState<boolean>(false);
 
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+		useState<boolean>(false);
+
 	const [state, setCopy] = useCopyToClipboard();
 
 	useEffect(() => {
@@ -179,6 +185,26 @@ function DashboardActions({
 					testId="options"
 				/>
 			</Popover>
+			{!isDashboardLocked && editDashboard && (
+				<>
+					<Button
+						variant="ghost"
+						className={styles.configureButton}
+						prefix={<ConfigureIcon />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
+					>
+						Configure
+					</Button>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -42,6 +42,14 @@
 				overflow: hidden;
 			}
 
+			.clickableTitle {
+				cursor: pointer;
+			}
+
+			.titleInput {
+				max-width: 80%;
+			}
+
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -208,96 +216,3 @@
 		}
 	}
 }
-
-.renameDashboard {
-	:global(.ant-modal-content) {
-		width: 384px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-
-		:global(.ant-modal-header) {
-			height: 52px;
-			padding: 16px;
-			background: var(--l2-background);
-			border-bottom: 1px solid var(--l1-border);
-			margin-bottom: 0px;
-
-			:global(.ant-modal-title) {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				width: 349px;
-				height: 20px;
-			}
-		}
-
-		:global(.ant-modal-body) {
-			padding: 16px;
-
-			.dashboardContent {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
-				.nameText {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-				}
-
-				.dashboardNameInput {
-					display: flex;
-					padding: 6px 6px 6px 8px;
-					align-items: center;
-					gap: 4px;
-					align-self: stretch;
-					border-radius: 0px 2px 2px 0px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		:global(.ant-modal-footer) {
-			padding: 16px;
-			margin-top: 0px;
-
-			.dashboardRename {
-				display: flex;
-				flex-direction: row-reverse;
-				gap: 12px;
-
-				.cancelBtn {
-					display: flex;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--l1-border);
-				}
-
-				.renameBtn {
-					display: flex;
-					align-items: center;
-					width: 169px;
-					padding: 4px 8px;
-					justify-content: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--primary-background);
-				}
-			}
-		}
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardMetaProps {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: Props): JSX.Element {
+function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,14 +1,24 @@
+import { KeyboardEvent } from 'react';
 import { Globe, LockKeyhole } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardTitleProps {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
+	isEditable: boolean;
+	isEditing: boolean;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onStartEdit: () => void;
+	onCommit: () => void;
+	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -16,18 +26,52 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-}: Props): JSX.Element {
+	isEditable,
+	isEditing,
+	draft,
+	onDraftChange,
+	onStartEdit,
+	onCommit,
+	onCancel,
+}: DashboardTitleProps): JSX.Element {
+	const canEdit = isEditable && !isDashboardLocked;
+
+	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onCommit();
+		} else if (event.key === 'Escape') {
+			onCancel();
+		}
+	};
+
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			<TooltipSimple title={title.length > 30 ? title : ''}>
-				<Typography.Text
-					className={styles.dashboardTitle}
-					data-testid="dashboard-title"
-				>
-					{title}
-				</Typography.Text>
-			</TooltipSimple>
+			{isEditing ? (
+				<Input
+					autoFocus
+					value={draft}
+					testId="dashboard-title-input"
+					maxLength={120}
+					className={styles.titleInput}
+					onChange={(e): void => onDraftChange(e.target.value)}
+					onBlur={onCommit}
+					onKeyDown={onKeyDown}
+				/>
+			) : (
+				<TooltipSimple title={title.length > 30 ? title : ''}>
+					<Typography.Text
+						className={cx(styles.dashboardTitle, {
+							[styles.clickableTitle]: canEdit,
+						})}
+						data-testid="dashboard-title"
+						onClick={canEdit ? onStartEdit : undefined}
+					>
+						{title}
+					</Typography.Text>
+				</TooltipSimple>
+			)}
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseEditableTitleArgs {
+	value: string;
+	onSave: (next: string) => void;
+}
+
+interface UseEditableTitleResult {
+	isEditing: boolean;
+	draft: string;
+	setDraft: (next: string) => void;
+	startEdit: () => void;
+	cancel: () => void;
+	commit: () => void;
+}
+
+/**
+ * Drives an inline-editable title. The parent owns the canonical `value`; this
+ * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
+ * only when the trimmed draft is non-empty and actually changed. A `cancelled`
+ * ref guards against a blur firing right after Escape from also committing.
+ */
+export function useEditableTitle({
+	value,
+	onSave,
+}: UseEditableTitleArgs): UseEditableTitleResult {
+	const [isEditing, setIsEditing] = useState<boolean>(false);
+	const [draft, setDraft] = useState<string>(value);
+	const cancelled = useRef<boolean>(false);
+
+	// Keep the draft in sync with the canonical value while not editing (e.g.
+	// after a refetch updates the title).
+	useEffect(() => {
+		if (!isEditing) {
+			setDraft(value);
+		}
+	}, [value, isEditing]);
+
+	const startEdit = (): void => {
+		cancelled.current = false;
+		setDraft(value);
+		setIsEditing(true);
+	};
+
+	const cancel = (): void => {
+		cancelled.current = true;
+		setIsEditing(false);
+	};
+
+	const commit = (): void => {
+		if (cancelled.current) {
+			cancelled.current = false;
+			return;
+		}
+		const trimmed = draft.trim();
+		if (trimmed && trimmed !== value) {
+			onSave(trimmed);
+		}
+		setIsEditing(false);
+	};
+
+	return { isEditing, draft, setDraft, startEdit, cancel, commit };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -1,70 +0,0 @@
-import { Input, Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../DashboardDescription.module.scss';
-
-interface Props {
-	open: boolean;
-	value: string;
-	isLoading: boolean;
-	onChange: (value: string) => void;
-	onRename: () => void;
-	onClose: () => void;
-}
-
-function RenameDashboardModal({
-	open,
-	value,
-	isLoading,
-	onChange,
-	onRename,
-	onClose,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Rename Dashboard"
-			onOk={onRename}
-			onCancel={onClose}
-			rootClassName={styles.renameDashboard}
-			footer={
-				<div className={styles.dashboardRename}>
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Check size={14} />}
-						className={styles.renameBtn}
-						onClick={onRename}
-						disabled={isLoading}
-					>
-						Rename Dashboard
-					</Button>
-					<Button
-						variant="ghost"
-						prefix={<X size={14} />}
-						className={styles.cancelBtn}
-						onClick={onClose}
-					>
-						Cancel
-					</Button>
-				</div>
-			}
-		>
-			<div className={styles.dashboardContent}>
-				<Typography.Text className={styles.nameText}>
-					Enter a new name
-				</Typography.Text>
-				<Input
-					data-testid="dashboard-name"
-					className={styles.dashboardNameInput}
-					value={value}
-					onChange={(e): void => onChange(e.target.value)}
-				/>
-			</div>
-		</Modal>
-	);
-}
-
-export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -0,0 +1,43 @@
+.settingsContainerRoot {
+	:global(.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);
+
+		:global(.ant-drawer-header) {
+			height: 48px;
+			border-bottom: 1px solid var(--l1-border);
+			padding: 14px 14px 14px 11px;
+
+			:global(.ant-drawer-header-title) {
+				gap: 16px;
+
+				:global(.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);
+				}
+
+				:global(.ant-drawer-close) {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		:global(.ant-drawer-body) {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -0,0 +1,34 @@
+import { memo, PropsWithChildren, ReactElement } from 'react';
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import styles from './SettingsDrawer.module.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={styles.settingsContainerRoot}
+		>
+			{/* 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/pages/DashboardPageV2/DashboardContainer/DashboardDescription/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -22,7 +22,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
+import { useEditableTitle } from './DashboardTitle/useEditableTitle';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -59,16 +59,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		setUpdatedTitle(title);
-	}, [title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
+	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -84,41 +75,43 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	};
+	}, [id, isDashboardLocked, refetch, showErrorModal]);
 
-	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);
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
+	const onNameSave = useCallback(
+		async (next: string): Promise<void> => {
+			if (!id) {
+				return;
+			}
+			try {
+				const patch: DashboardtypesJSONPatchOperationDTO[] = [
+					{
+						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+						path: '/spec/display/name',
+						value: next,
+					},
+				];
+				await patchDashboardV2({ id }, patch);
+				toast.success('Dashboard renamed successfully');
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[id, refetch, showErrorModal],
+	);
 
-	const onEmptyWidgetHandler = (): void => {
+	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
+		useEditableTitle({
+			value: title,
+			onSave: onNameSave,
+		});
+
+	const onEmptyWidgetHandler = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
 		toast.info('V2 panel editor coming next');
-	};
+	}, [id]);
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -129,6 +122,13 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
+					isEditable={editDashboard}
+					isEditing={isEditing}
+					draft={draft}
+					onDraftChange={setDraft}
+					onStartEdit={startEdit}
+					onCommit={commit}
+					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -139,19 +139,10 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
+					onOpenRename={startEdit}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
-
-			<RenameDashboardModal
-				open={isRenameDashboardOpen}
-				value={updatedTitle}
-				isLoading={isRenameLoading}
-				onChange={setUpdatedTitle}
-				onRename={onNameChangeHandler}
-				onClose={(): void => setIsRenameDashboardOpen(false)}
-			/>
 		</Card>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/DashboardSettings.module.scss

@@ -0,0 +1,3 @@
+.placeholder {
+	padding: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -0,0 +1,114 @@
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
+import { Col, Radio, Tooltip } from 'antd';
+import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { getAbsoluteUrl } from 'utils/basePath';
+import cx from 'classnames';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface CrossPanelSyncProps {
+	dashboardId: string;
+}
+
+function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
+	const [cursorSyncMode, setCursorSyncMode] =
+		useDashboardCursorSyncMode(dashboardId);
+	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
+		useSyncTooltipFilterMode(dashboardId);
+
+	return (
+		<Col className={cx(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 => {
+							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>
+	);
+}
+
+export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -0,0 +1,85 @@
+import { Dispatch, SetStateAction } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
+import { Col, Input, Select, Space } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+
+import { Base64Icons } from '../utils';
+import styles from '../GeneralSettings.module.scss';
+
+const { Option } = Select;
+
+interface GeneralFormProps {
+	title: string;
+	description: string;
+	image: string;
+	tags: string[];
+	onTitleChange: (value: string) => void;
+	onDescriptionChange: (value: string) => void;
+	onImageChange: (value: string) => void;
+	onTagsChange: Dispatch<SetStateAction<string[]>>;
+}
+
+function GeneralForm({
+	title,
+	description,
+	image,
+	tags,
+	onTitleChange,
+	onDescriptionChange,
+	onImageChange,
+	onTagsChange,
+}: GeneralFormProps): JSX.Element {
+	return (
+		<Col className={styles.overviewSettings}>
+			<Space direction="vertical" className={styles.formSpace}>
+				<div>
+					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
+					<section className={styles.nameIconInput}>
+						<Select
+							defaultActiveFirstOption
+							data-testid="dashboard-image"
+							suffixIcon={null}
+							rootClassName={styles.dashboardImageInput}
+							value={image}
+							onChange={onImageChange}
+						>
+							{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={title}
+							onChange={(e): void => onTitleChange(e.target.value)}
+						/>
+					</section>
+				</div>
+
+				<div>
+					<Typography className={styles.dashboardName}>Description</Typography>
+					<Input.TextArea
+						data-testid="dashboard-desc"
+						rows={6}
+						value={description}
+						className={styles.descriptionTextArea}
+						onChange={(e): void => onDescriptionChange(e.target.value)}
+					/>
+				</div>
+				<div>
+					<Typography className={styles.dashboardName}>Tags</Typography>
+					<AddTags tags={tags} setTags={onTagsChange} />
+				</div>
+			</Space>
+		</Col>
+	);
+}
+
+export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,237 @@
+.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;
+}
+
+.formSpace {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 21px;
+}
+
+.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 {
+	display: flex;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	display: flex;
+	align-items: center;
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface UnsavedChangesFooterProps {
+	count: number;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function UnsavedChangesFooter({
+	count,
+	isSaving,
+	onDiscard,
+	onSave,
+}: UnsavedChangesFooterProps): JSX.Element {
+	const { t } = useTranslation('common');
+
+	return (
+		<div className={styles.overviewSettingsFooter}>
+			<div className={styles.unsaved}>
+				<div className={styles.unsavedDot} />
+				<Typography.Text className={styles.unsavedChanges}>
+					{count} unsaved change
+					{count > 1 && 's'}
+				</Typography.Text>
+			</div>
+			<div className={styles.footerActionBtns}>
+				<Button
+					variant="ghost"
+					disabled={isSaving}
+					prefix={<X size={14} />}
+					onClick={onDiscard}
+					className={styles.discardBtn}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					disabled={isSaving}
+					loading={isSaving}
+					prefix={<Check size={14} />}
+					testId="save-dashboard-config"
+					onClick={onSave}
+					className={styles.saveBtn}
+				>
+					{t('save')}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default UnsavedChangesFooter;

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

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { toast } from '@signozhq/ui/sonner';
+import { isEqual } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
+import GeneralForm from './GeneralForm/GeneralForm';
+import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
+import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
+import styles from './GeneralSettings.module.scss';
+
+interface GeneralSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
+	const id = dashboard.id;
+
+	const refetch = useDashboardStore((s) => s.refetch);
+
+	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 { 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 = useCallback((): 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;
+	}, [
+		updatedTitle,
+		title,
+		updatedDescription,
+		description,
+		updatedImage,
+		image,
+		updatedTags,
+		tagsAsStrings,
+	]);
+
+	const onSaveHandler = useCallback(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');
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [id, buildPatch, refetch, showErrorModal]);
+
+	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 = useCallback((): void => {
+		setUpdatedTitle(title);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		setUpdatedDescription(description);
+	}, [title, image, tagsAsStrings, description]);
+
+	return (
+		<div className={styles.overviewContent}>
+			<GeneralForm
+				title={updatedTitle}
+				description={updatedDescription}
+				image={updatedImage}
+				tags={updatedTags}
+				onTitleChange={setUpdatedTitle}
+				onDescriptionChange={setUpdatedDescription}
+				onImageChange={setUpdatedImage}
+				onTagsChange={setUpdatedTags}
+			/>
+			<CrossPanelSync dashboardId={id} />
+			{numberOfUnsavedChanges > 0 && (
+				<UnsavedChangesFooter
+					count={numberOfUnsavedChanges}
+					isSaving={isSaving}
+					onDiscard={discardHandler}
+					onSave={onSaveHandler}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default GeneralSettings;

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

@@ -0,0 +1,24 @@
+import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
+
+export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+
+// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
+// collapsed back to just `x` for display.
+export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
+	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
+}
+
+export 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);
+}

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

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { Braces, Globe, Table } from '@signozhq/icons';
+import { Tabs } from '@signozhq/ui/tabs';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import GeneralSettings from './General';
+import { SettingsTabPlaceholder } from './utils';
+
+interface DashboardSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
+	const items = useMemo(
+		() => [
+			{
+				key: 'general',
+				label: 'General',
+				prefixIcon: <Table size={14} />,
+				children: <GeneralSettings dashboard={dashboard} />,
+			},
+			{
+				key: 'variables',
+				label: 'Variables',
+				prefixIcon: <Braces size={14} />,
+				children: (
+					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
+				),
+			},
+			{
+				key: 'public-dashboard',
+				label: 'Publish',
+				prefixIcon: <Globe size={14} />,
+				children: (
+					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
+				),
+			},
+		],
+		[dashboard],
+	);
+
+	return <Tabs defaultValue="general" items={items} />;
+}
+
+export default DashboardSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/utils.tsx

@@ -0,0 +1,23 @@
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './DashboardSettings.module.scss';
+
+/**
+ * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
+ * Will be cleaned up later once those tabs ship their real content.
+ */
+export function SettingsTabPlaceholder({
+	message,
+}: {
+	message: string;
+}): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<Empty
+				image={Empty.PRESENTED_IMAGE_SIMPLE}
+				description={<Typography.Text>{message}</Typography.Text>}
+			/>
+		</div>
+	);
+}

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

@@ -6,9 +6,13 @@ import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
+import type { DashboardSection } from '../../utils';
+import type { DeletePanelArgs } from './hooks/useDeletePanel';
+import type { MovePanelArgs } from './hooks/useMovePanelToSection';
+import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-interface Props {
+interface PanelProps {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -17,9 +21,22 @@ interface Props {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
+function Panel({
+	panel,
+	panelId,
+	isVisible,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: PanelProps): 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';
@@ -48,7 +65,17 @@ function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				<EllipsisVertical size={14} />
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
+					<PanelActionsMenu
+						panelId={panelId}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
+					/>
+				) : (
+					<EllipsisVertical size={14} />
+				)}
 			</div>
 
 			<div className={styles.body}>

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

@@ -0,0 +1,16 @@
+.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import styles from './PanelActionsMenu.module.scss';
+
+interface PanelActionsMenuProps {
+	panelId: string;
+	currentLayoutIndex: number;
+	sections: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelActionsMenu({
+	panelId,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: PanelActionsMenuProps): 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"
+				variant="ghost"
+				size="icon"
+				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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -0,0 +1,22 @@
+.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -0,0 +1,84 @@
+import { Modal } from 'antd';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+import styles from './PanelTypeSelectionModal.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 PanelTypeSelectionModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSelect: (pluginKind: string) => void;
+}
+
+function PanelTypeSelectionModal({
+	open,
+	onClose,
+	onSelect,
+}: PanelTypeSelectionModalProps): 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"
+						variant="ghost"
+						className={styles.typeButton}
+						data-testid={`panel-type-${type.pluginKind}`}
+						onClick={(): void => onSelect(type.pluginKind)}
+					>
+						{type.icon}
+						{type.label}
+					</Button>
+				))}
+			</div>
+		</Modal>
+	);
+}
+
+export default PanelTypeSelectionModal;

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

@@ -0,0 +1,76 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+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,
+}: Params): (args: AddPanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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) },
+						},
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

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

@@ -0,0 +1,54 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+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,
+}: Params): (args: DeletePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

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

@@ -0,0 +1,79 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+export interface MovePanelArgs {
+	panelId: string;
+	fromLayoutIndex: number;
+	toLayoutIndex: number;
+}
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+/**
+ * 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,
+}: Params): (args: MovePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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,
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -0,0 +1,17 @@
+.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } 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 AddSectionControlProps {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	isSectioned: boolean;
+}
+
+function AddSectionControl({
+	sections,
+	layouts,
+	isSectioned,
+}: AddSectionControlProps): JSX.Element {
+	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
+	const { addSection } = useAddSection({ layouts });
+	const { migrate, isSaving } = useFirstSectionMigration({ sections });
+
+	// 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 = useCallback((): void => {
+		if (needsMigration) {
+			setIsMigrationOpen(true);
+			return;
+		}
+		void addSection(DEFAULT_SECTION_TITLE);
+	}, [needsMigration, addSection]);
+
+	const handleConfirmMigration = useCallback(async (): Promise<void> => {
+		await migrate(DEFAULT_SECTION_TITLE);
+		setIsMigrationOpen(false);
+	}, [migrate]);
+
+	return (
+		<>
+			<Button
+				type="button"
+				variant="ghost"
+				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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -0,0 +1,41 @@
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+interface FirstSectionMigrationModalProps {
+	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,
+}: FirstSectionMigrationModalProps): 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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+
+interface RenameSectionModalProps {
+	open: boolean;
+	initialValue: string;
+	isSaving: boolean;
+	onClose: () => void;
+	onSubmit: (title: string) => void;
+}
+
+function RenameSectionModal({
+	open,
+	initialValue,
+	isSaving,
+	onClose,
+	onSubmit,
+}: RenameSectionModalProps): 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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,17 +1,45 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 
 import type { DashboardSection } from '../../../utils';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useDeleteSection } from '../hooks/useDeleteSection';
+import { useRenameSection } from '../hooks/useRenameSection';
+import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
+import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader from '../SectionHeader/SectionHeader';
+import SectionHeader, {
+	type SectionDragHandle,
+} from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface Props {
+interface SectionProps {
 	section: DashboardSection;
+	/** Adds a panel to this section; present only in editable sectioned mode. */
+	onAddPanel?: (args: AddPanelArgs) => void;
+	/** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
 }
 
-function Section({ section }: Props): JSX.Element {
+function Section({
+	section,
+	onAddPanel,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+	dragHandle,
+}: SectionProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	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.
@@ -19,10 +47,54 @@ function Section({ section }: Props): JSX.Element {
 		rootMargin: '200px',
 	});
 
-	const [open, setOpen] = useState<boolean>(section.open);
-	const toggle = (): void => setOpen((prev) => !prev);
+	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
 
-	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
+	const [isRenaming, setIsRenaming] = useState(false);
+	const { rename, isSaving } = useRenameSection({
+		layoutIndex: section.layoutIndex,
+	});
+
+	const handleRenameSubmit = useCallback(
+		async (title: string): Promise<void> => {
+			const ok = await rename(title);
+			if (ok) {
+				setIsRenaming(false);
+			}
+		},
+		[rename],
+	);
+
+	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const handleSelectPanelType = useCallback(
+		(pluginKind: string): void => {
+			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+			setIsAddingPanel(false);
+		},
+		[onAddPanel, section.layoutIndex],
+	);
+
+	const { deleteSection } = useDeleteSection({ section });
+	const confirmDeleteSection = useCallback((): 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(),
+		});
+	}, [section.title, deleteSection]);
+
+	const grid = (
+		<SectionGrid
+			items={section.items}
+			layoutIndex={section.layoutIndex}
+			isVisible={isVisible}
+			sections={sections}
+			onMovePanel={onMovePanel}
+			onDeletePanel={onDeletePanel}
+		/>
+	);
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -51,8 +123,26 @@ function Section({ section }: Props): JSX.Element {
 				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}
+			/>
+			<PanelTypeSelectionModal
+				open={isAddingPanel}
+				onClose={(): void => setIsAddingPanel(false)}
+				onSelect={handleSelectPanelType}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import styles from './SectionActionsMenu.module.scss';
+
+interface SectionActionsMenuProps {
+	sectionId: string;
+	onAddPanel?: () => void;
+	onRename?: () => void;
+	onDeleteSection?: () => void;
+}
+
+function SectionActionsMenu({
+	sectionId,
+	onAddPanel,
+	onRename,
+	onDeleteSection,
+}: SectionActionsMenuProps): 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"
+				variant="ghost"
+				size="icon"
+				className={styles.trigger}
+				aria-label="Section actions"
+				data-testid={`dashboard-section-actions-${sectionId}`}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SectionActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -0,0 +1,7 @@
+.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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -0,0 +1,32 @@
+import type { DashboardSection } from '../../../utils';
+import SectionHeader from '../SectionHeader/SectionHeader';
+import styles from './SectionDragPreview.module.scss';
+
+interface SectionDragPreviewProps {
+	section: DashboardSection;
+}
+
+/**
+ * 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 }: SectionDragPreviewProps): 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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,18 +2,35 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
 import Panel from '../../Panel/Panel';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { usePersistLayout } from '../hooks/usePersistLayout';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
-interface Props {
+interface SectionGridProps {
 	items: DashboardSection['items'];
+	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
 	isVisible?: boolean;
+	/** All sections + handlers — present only in editable sectioned mode (panel "Move to section" / delete). */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function SectionGrid({ items, isVisible }: Props): JSX.Element {
+function SectionGrid({
+	items,
+	layoutIndex,
+	isVisible,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: SectionGridProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -26,6 +43,8 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 		[items],
 	);
 
+	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
+
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -34,13 +53,24 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			isDraggable={false}
-			isResizable={false}
+			draggableHandle=".panel-drag-handle"
+			isDraggable={isEditable}
+			isResizable={isEditable}
+			onDragStop={handleLayoutChange}
+			onResizeStop={handleLayoutChange}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
+					<Panel
+						panel={item.panel}
+						panelId={item.id}
+						isVisible={isVisible}
+						currentLayoutIndex={layoutIndex}
+						sections={isEditable ? sections : undefined}
+						onMovePanel={isEditable ? onMovePanel : undefined}
+						onDeletePanel={isEditable ? onDeletePanel : undefined}
+					/>
 				</div>
 			))}
 		</ResponsiveGridLayout>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,15 +1,30 @@
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
+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 { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
+import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
 import styles from './SectionHeader.module.scss';
 
-interface Props {
+export interface SectionDragHandle {
+	attributes: DraggableAttributes;
+	listeners: SyntheticListenerMap | undefined;
+	setActivatorNodeRef: (element: HTMLElement | null) => void;
+}
+
+interface SectionHeaderProps {
 	sectionId: string;
 	title: string;
 	open: boolean;
 	onToggle: () => void;
 	repeatVariable?: string;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -18,11 +33,32 @@ function SectionHeader({
 	open,
 	onToggle,
 	repeatVariable,
-}: Props): JSX.Element {
+	dragHandle,
+	onRename,
+	onAddPanel,
+	onDeleteSection,
+}: SectionHeaderProps): JSX.Element {
+	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
-			<button
+			{dragHandle ? (
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					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"
+				variant="ghost"
 				className={styles.toggle}
 				onClick={onToggle}
 				data-testid={`dashboard-section-toggle-${sectionId}`}
@@ -34,7 +70,15 @@ function SectionHeader({
 						(repeats per ${repeatVariable})
 					</Typography.Text>
 				) : null}
-			</button>
+			</Button>
+			{hasActions ? (
+				<SectionActionsMenu
+					sectionId={sectionId}
+					onAddPanel={onAddPanel}
+					onRename={onRename}
+					onDeleteSection={onDeleteSection}
+				/>
+			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -0,0 +1,102 @@
+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 { DashboardSection } from '../../utils';
+import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
+import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
+import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSectionDragReorder } from './hooks/useSectionDragReorder';
+import Section from './Section/Section';
+import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
+import SortableSection from './SortableSection';
+
+interface SectionListProps {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
+	const {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	} = useSectionDragReorder({ sections, layouts });
+
+	const onAddPanel = useAddPanelToSection({ sections });
+	const onMovePanel = useMovePanelToSection({ sections });
+	const onDeletePanel = useDeletePanel({ sections });
+
+	// 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} />
+				))}
+			</>
+		);
+	}
+
+	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}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					) : (
+						<Section
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							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/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -0,0 +1,59 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import type { DashboardSection } from '../../utils';
+import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
+import Section from './Section/Section';
+
+interface SortableSectionProps {
+	section: DashboardSection;
+	sections: DashboardSection[];
+	onAddPanel: (args: AddPanelArgs) => void;
+	onMovePanel: (args: MovePanelArgs) => void;
+	onDeletePanel: (args: DeletePanelArgs) => void;
+}
+
+function SortableSection({
+	section,
+	sections,
+	onAddPanel,
+	onMovePanel,
+	onDeletePanel,
+}: SortableSectionProps): 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}
+				sections={sections}
+				onAddPanel={onAddPanel}
+				onMovePanel={onMovePanel}
+				onDeletePanel={onDeletePanel}
+				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
+			/>
+		</div>
+	);
+}
+
+export default SortableSection;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -0,0 +1,59 @@
+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';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	return { addSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useDeleteSection.ts

@@ -0,0 +1,51 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	section: DashboardSection;
+}
+
+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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [section, dashboardId, refetch, showErrorModal]);
+
+	return { deleteSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useFirstSectionMigration.ts

@@ -0,0 +1,64 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+
+	return { migrate, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/usePersistLayout.ts

@@ -0,0 +1,97 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { GridItem } from '../../../utils';
+
+interface Params {
+	layoutIndex: number;
+	items: GridItem[];
+}
+
+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: GridItem[]): GridItem[] {
+	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 GridItem => item !== null);
+}
+
+function hasGeometryChanged(next: GridItem[], prev: GridItem[]): 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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, items, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { handleLayoutChange, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useRenameSection.ts

@@ -0,0 +1,50 @@
+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';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layoutIndex: number;
+}
+
+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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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),
+				]);
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { rename, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionDragReorder.ts

@@ -0,0 +1,125 @@
+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 { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+interface Result {
+	sensors: ReturnType<typeof useSensors>;
+	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
+	orderedSections: DashboardSection[];
+	/** The section currently being dragged (for the DragOverlay preview), or null. */
+	activeSection: DashboardSection | 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 }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	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<DashboardSection[]>(() => {
+		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 DashboardSection => 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)]);
+				refetch();
+			} catch (error) {
+				setLocalOrderIds(null); // revert optimistic order on failure
+				showErrorModal(error as APIError);
+			}
+		},
+		[orderedSections, layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	const activeSection = useMemo(
+		() => orderedSections.find((s) => s.id === activeId) ?? null,
+		[orderedSections, activeId],
+	);
+
+	return {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useToggleSectionCollapse.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import {
+	selectIsSectionOpen,
+	useDashboardStore,
+} from '../../../store/useDashboardStore';
+
+interface Params {
+	sectionId: string;
+}
+
+interface Result {
+	open: boolean;
+	toggle: () => void;
+}
+
+/**
+ * Owns a section's expand/collapse state. Collapse is a frontend-only, per-user
+ * preference (not in the dashboard spec): it lives in the persisted zustand
+ * store, keyed by dashboardId + section id, and survives reloads. Default open.
+ */
+export function useToggleSectionCollapse({ sectionId }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const open = useDashboardStore(selectIsSectionOpen(dashboardId, sectionId));
+	const toggleSectionCollapse = useDashboardStore(
+		(s) => s.toggleSectionCollapse,
+	);
+
+	const toggle = useCallback((): void => {
+		if (dashboardId) {
+			toggleSectionCollapse(dashboardId, sectionId);
+		}
+	}, [dashboardId, sectionId, toggleSectionCollapse]);
+
+	return { open, toggle };
+}

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

@@ -7,19 +7,27 @@ import type {
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
+import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
+import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
+import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-interface Props {
+interface PanelsAndSectionsLayoutProps {
 	layouts: DashboardtypesLayoutDTO[];
 	panels: Record<string, DashboardtypesPanelDTO | undefined>;
 }
 
-function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
+function PanelsAndSectionsLayout({
+	layouts,
+	panels,
+}: PanelsAndSectionsLayoutProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -28,6 +36,11 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const isEmpty =
 		sections.length === 0 || sections.every((s) => s.items.length === 0);
 
+	// Sectioned mode = at least one titled layout. Sections then become a
+	// 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 = (): ReactNode => {
 		if (isEmpty) {
 			return (
@@ -42,12 +55,27 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 			);
 		}
 
+		if (isSectioned) {
+			return <SectionList sections={sections} layouts={layouts} />;
+		}
+
 		return sections.map((section) => (
 			<Section key={section.id} section={section} />
 		));
 	};
 
-	return <div className={styles.body}>{renderContent()}</div>;
+	return (
+		<div className={styles.body}>
+			{renderContent()}
+			{isEditable ? (
+				<AddSectionControl
+					sections={sections}
+					layouts={layouts}
+					isSectioned={isSectioned}
+				/>
+			) : null}
+		</div>
+	);
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -8,12 +8,15 @@ import { LayoutGrid } from '@signozhq/icons';
 
 import styles from './DashboardBreadcrumbs.module.scss';
 
-interface Props {
+interface DashboardBreadcrumbsProps {
 	title: string;
 	image: string;
 }
 
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
+function DashboardBreadcrumbs({
+	title,
+	image,
+}: DashboardBreadcrumbsProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
 	const goToListPage = useCallback(() => {

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -5,12 +5,12 @@ import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 
 import styles from './DashboardHeader.module.scss';
 
-interface Props {
+interface DashboardHeaderProps {
 	title: string;
 	image: string;
 }
 
-function DashboardHeader({ title, image }: Props): JSX.Element {
+function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
 	return (
 		<div className={styles.dashboardHeader}>
 			<DashboardBreadcrumbs title={title} image={image} />

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

@@ -1,20 +1,37 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
 
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
+import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
-interface Props {
+interface DashboardContainerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	refetch: () => void;
 }
 
-function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
+function DashboardContainer({
+	dashboard,
+	refetch,
+}: DashboardContainerProps): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const isEditable = !dashboard.locked && editDashboard;
+
+	// Publish edit context to the store so hooks/components read it from there
+	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
+	const setEditContext = useDashboardStore((s) => s.setEditContext);
+	useEffect(() => {
+		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
+	}, [dashboard.id, isEditable, refetch, setEditContext]);
+
 	const { spec } = dashboard;
 	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
 	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);

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

@@ -0,0 +1,177 @@
+import type {
+	DashboardGridItemDTO,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+
+import type { GridItem } 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 DashboardDescription).
+ */
+
+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: GridItem): 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: GridItem[],
+): 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 }, 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: GridItem[];
+	targetIndex: number;
+	targetItems: GridItem[];
+}
+
+/** 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,
+	};
+}
+
+/**
+ * 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 },
+	};
+}
+
+/** 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/pages/DashboardPageV2/DashboardContainer/store/slices/collapseSlice.ts

@@ -0,0 +1,35 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Section collapse state — frontend-only and persisted to localStorage. Keyed by
+ * dashboardId → section stable id → open. An absent entry means "open" (the
+ * default). This is intentionally NOT server state: collapse is a per-user UI
+ * preference, so it lives here instead of in the dashboard spec.
+ */
+export interface CollapseSlice {
+	collapsed: Record<string, Record<string, boolean>>;
+	toggleSectionCollapse: (dashboardId: string, sectionId: string) => void;
+}
+
+export const createCollapseSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	CollapseSlice
+> = (set, get) => ({
+	collapsed: {},
+	toggleSectionCollapse: (dashboardId, sectionId): void => {
+		const { collapsed } = get();
+		const current = collapsed[dashboardId]?.[sectionId];
+		// Absent → open by default, so the first toggle closes it.
+		const next = current === undefined ? false : !current;
+		set({
+			collapsed: {
+				...collapsed,
+				[dashboardId]: { ...collapsed[dashboardId], [sectionId]: next },
+			},
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/editContextSlice.ts

@@ -0,0 +1,38 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Edit context shared across the V2 dashboard tree — the dashboard id, whether
+ * the user can edit, and the react-query refetch. Set once by DashboardContainer
+ * so hooks/components read it from the store instead of receiving it as props
+ * through every layer. Not persisted.
+ */
+export interface EditContextSlice {
+	dashboardId: string;
+	isEditable: boolean;
+	refetch: () => void;
+	setEditContext: (ctx: {
+		dashboardId: string;
+		isEditable: boolean;
+		refetch: () => void;
+	}) => void;
+}
+
+export const createEditContextSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	EditContextSlice
+> = (set) => ({
+	dashboardId: '',
+	isEditable: false,
+	refetch: (): void => undefined,
+	setEditContext: (ctx): void => {
+		set({
+			dashboardId: ctx.dashboardId,
+			isEditable: ctx.isEditable,
+			refetch: ctx.refetch,
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import {
+	createEditContextSlice,
+	type EditContextSlice,
+} from './slices/editContextSlice';
+import {
+	createCollapseSlice,
+	type CollapseSlice,
+} from './slices/collapseSlice';
+
+export type DashboardStore = EditContextSlice & CollapseSlice;
+
+/**
+ * V2 dashboard session store. Holds cross-cutting client state only — never the
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
+ * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
+ * - collapse: per-section open state (frontend-only, persisted to localStorage).
+ */
+export const useDashboardStore = create<DashboardStore>()(
+	persist(
+		(...a) => ({
+			...createEditContextSlice(...a),
+			...createCollapseSlice(...a),
+		}),
+		{
+			name: '@signoz/dashboard-v2',
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
+		},
+	),
+);
+
+/** Selector: is a section open? Absent entry (or no dashboard) → open by default. */
+export const selectIsSectionOpen =
+	(dashboardId: string, sectionId: string) =>
+	(state: DashboardStore): boolean => {
+		if (!dashboardId) {
+			return true;
+		}
+		const value = state.collapsed[dashboardId]?.[sectionId];
+		return value === undefined ? true : value;
+	};

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

@@ -72,7 +72,6 @@ export interface DashboardSection {
 	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
 	layoutIndex: number;
 	title: string | undefined;
-	open: boolean;
 	items: GridItem[];
 	repeatVariable: string | undefined;
 }
@@ -127,15 +126,11 @@ export function layoutsToSections(
 				.filter((it): it is GridItem => 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,
 			};

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.module.scss

@@ -119,7 +119,6 @@
 	gap: 12px;
 	margin-bottom: 14px;
 	align-items: center;
-	background: var(--l3-background);
 }
 
 .searchInput {
@@ -127,13 +126,16 @@
 	padding: 6px 8px;
 	background: var(--l3-background);
 
-	height: 18px;
-	margin-inline-end: 6px;
+	:global(.ant-input-prefix) {
+		height: 18px;
+		margin-inline-end: 6px;
 
-	svg {
-		opacity: 0.4;
+		svg {
+			opacity: 0.4;
+		}
 	}
 
+	&,
 	input {
 		font-size: 14px;
 		line-height: 18px;

pkg/querier/builder_query.go

@@ -363,15 +363,6 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 		return nil, err
 	}
 
-	// TODO: This should move to readAsRaw function in consume.go but for now we are keeping it here since it's only relevant for traces
-	if q.spec.Signal == telemetrytypes.SignalTraces {
-		if raw, ok := payload.(*qbtypes.RawData); ok {
-			for _, rr := range raw.Rows {
-				mergeSpanAttributeColumns(rr.Data)
-			}
-		}
-	}
-
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/querier/consume.go

@@ -14,7 +14,6 @@ import (
 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
 	"github.com/SigNoz/signoz/pkg/errors"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/bytedance/sonic"
 )
@@ -441,53 +440,6 @@ func readAsRaw(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
 	}, nil
 }
 
-// mergeSpanAttributeColumns merges (attributes_string, attributes_number, attributes_bool, resources_string) into
-// unified "attributes" and "resource" keys, and parses the stringified `events`
-// and `links` columns into structured slices. Raw DB columns are removed.
-func mergeSpanAttributeColumns(data map[string]any) {
-	attrStr, hasStr := data["attributes_string"]
-	attrNum, hasNum := data["attributes_number"]
-	attrBool, hasBool := data["attributes_bool"]
-	// todo(nitya): move to resource json
-	resStr, hasRes := data["resources_string"]
-	if hasStr || hasNum || hasBool || hasRes {
-		attributes := make(map[string]any)
-		if m, ok := attrStr.(map[string]string); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		if m, ok := attrNum.(map[string]float64); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		if m, ok := attrBool.(map[string]bool); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		delete(data, "attributes_string")
-		delete(data, "attributes_number")
-		delete(data, "attributes_bool")
-		data["attributes"] = attributes
-
-		resource := map[string]string{}
-		if m, ok := resStr.(map[string]string); ok {
-			resource = m
-		}
-		data["resource"] = resource
-		delete(data, "resources_string")
-	}
-
-	if raw, ok := data["events"]; ok {
-		data["events"] = spantypes.ParseEvents(raw)
-	}
-	if raw, ok := data["links"]; ok {
-		data["links"] = spantypes.ParseLinks(raw)
-	}
-}
-
 // numericAsFloat converts numeric types to float64 efficiently.
 func numericAsFloat(v any) float64 {
 	switch x := v.(type) {

pkg/querier/consume_test.go

@@ -1,92 +0,0 @@
-package querier
-
-import (
-	"reflect"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/spantypes"
-)
-
-func TestMergeSpanAttributeColumns_ParsesEventsAndLinks(t *testing.T) {
-	data := map[string]any{
-		"attributes_string": map[string]string{"http.method": "GET"},
-		"attributes_number": map[string]float64{"http.status_code": 200},
-		"attributes_bool":   map[string]bool{"is_root": true},
-		"resources_string":  map[string]string{"service.name": "api"},
-		"events": []string{
-			`{"name":"request_received","timeUnixNano":1778489782759245000,"attributeMap":{"http.method":"GET","http.route":"/api/chat"}}`,
-			`{"name":"cache_lookup","timeUnixNano":1778489782811697000,"attributeMap":{"cache.hit":"true","cache.key":"user:123:prompt"}}`,
-		},
-		"links": `[{"traceId":"abc","spanId":"123","refType":"CHILD_OF"},{"traceId":"def","spanId":"456","refType":"FOLLOWS_FROM"}]`,
-	}
-
-	mergeSpanAttributeColumns(data)
-
-	attrs, ok := data["attributes"].(map[string]any)
-	if !ok {
-		t.Fatalf("expected attributes to be map[string]any, got %T", data["attributes"])
-	}
-	if attrs["http.method"] != "GET" || attrs["http.status_code"] != float64(200) || attrs["is_root"] != true {
-		t.Fatalf("attributes not merged correctly: %#v", attrs)
-	}
-
-	res, ok := data["resource"].(map[string]string)
-	if !ok || res["service.name"] != "api" {
-		t.Fatalf("resource not set correctly: %#v", data["resource"])
-	}
-
-	for _, removed := range []string{"attributes_string", "attributes_number", "attributes_bool", "resources_string"} {
-		if _, present := data[removed]; present {
-			t.Fatalf("expected %s to be removed", removed)
-		}
-	}
-
-	events, ok := data["events"].([]spantypes.EventV2)
-	if !ok {
-		t.Fatalf("expected events to be []spantypes.EventV2, got %T", data["events"])
-	}
-	wantEvents := []spantypes.EventV2{
-		{
-			Name:         "request_received",
-			TimeUnixNano: 1778489782759245000,
-			Attributes:   map[string]any{"http.method": "GET", "http.route": "/api/chat"},
-			IsError:      false,
-		},
-		{
-			Name:         "cache_lookup",
-			TimeUnixNano: 1778489782811697000,
-			Attributes:   map[string]any{"cache.hit": "true", "cache.key": "user:123:prompt"},
-		},
-	}
-	if !reflect.DeepEqual(events, wantEvents) {
-		t.Fatalf("events parsed incorrectly:\n got:  %#v\nwant: %#v", events, wantEvents)
-	}
-
-	links, ok := data["links"].([]spantypes.Link)
-	if !ok {
-		t.Fatalf("expected links to be []spantypes.Link, got %T", data["links"])
-	}
-	wantLinks := []spantypes.Link{
-		{TraceID: "abc", SpanID: "123"},
-		{TraceID: "def", SpanID: "456"},
-	}
-	if !reflect.DeepEqual(links, wantLinks) {
-		t.Fatalf("links parsed incorrectly:\n got:  %#v\nwant: %#v", links, wantLinks)
-	}
-}
-
-func TestMergeSpanAttributeColumns_EmptyEventsAndLinks(t *testing.T) {
-	data := map[string]any{
-		"events": []string{},
-		"links":  "[]",
-	}
-
-	mergeSpanAttributeColumns(data)
-
-	if events, ok := data["events"].([]spantypes.EventV2); !ok || len(events) != 0 {
-		t.Fatalf("expected empty []spantypes.EventV2, got %#v", data["events"])
-	}
-	if links, ok := data["links"].([]spantypes.Link); !ok || len(links) != 0 {
-		t.Fatalf("expected empty []spantypes.Link, got %#v", data["links"])
-	}
-}

pkg/querier/trace_operator_query.go

@@ -85,13 +85,6 @@ func (q *traceOperatorQuery) executeWithContext(ctx context.Context, query strin
 		return nil, err
 	}
 
-	// TODO: This should move to readAsRaw function in consume.go but for now we can keep it here since it's only relevant for traces
-	if raw, ok := payload.(*qbtypes.RawData); ok {
-		for _, rr := range raw.Rows {
-			mergeSpanAttributeColumns(rr.Data)
-		}
-	}
-
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/telemetrytraces/const.go

@@ -4,48 +4,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
-const (
-
-	// Internal Columns.
-	SpanTimestampBucketStartColumn = "ts_bucket_start"
-	SpanResourceFingerPrintColumn  = "resource_fingerprint"
-
-	// Intrinsic Columns.
-	SpanTimestampColumn        = "timestamp"
-	SpanTraceIDColumn          = "trace_id"
-	SpanSpanIDColumn           = "span_id"
-	SpanTraceStateColumn       = "trace_state"
-	SpanParentSpanIDColumn     = "parent_span_id"
-	SpanFlagsColumn            = "flags"
-	SpanNameColumn             = "name"
-	SpanKindColumn             = "kind"
-	SpanKindStringColumn       = "kind_string"
-	SpanDurationNanoColumn     = "duration_nano"
-	SpanStatusCodeColumn       = "status_code"
-	SpanStatusMessageColumn    = "status_message"
-	SpanStatusCodeStringColumn = "status_code_string"
-	SpanEventsColumn           = "events"
-	SpanLinksColumn            = "links"
-
-	// Calculated Columns.
-	SpanResponseStatusCodeColumn = "response_status_code"
-	SpanExternalHTTPURLColumn    = "external_http_url"
-	SpanHTTPURLColumn            = "http_url"
-	SpanExternalHTTPMethodColumn = "external_http_method"
-	SpanHTTPMethodColumn         = "http_method"
-	SpanHTTPHostColumn           = "http_host"
-	SpanDBNameColumn             = "db_name"
-	SpanDBOperationColumn        = "db_operation"
-	SpanHasErrorColumn           = "has_error"
-	SpanIsRemoteColumn           = "is_remote"
-
-	// Contextual Columns.
-	SpanAttributesStringColumn = "attributes_string"
-	SpanAttributesNumberColumn = "attributes_number"
-	SpanAttributesBoolColumn   = "attributes_bool"
-	SpanResourcesStringColumn  = "resources_string"
-)
-
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{
 		"trace_id": {
@@ -378,51 +336,6 @@ var (
 	SpanSearchScopeRoot       = "isroot"
 	SpanSearchScopeEntryPoint = "isentrypoint"
 
-	// IntrinsicSpanFields lists the intrinsic span columns, in the order they
-	// should appear when a raw query expands its SelectFields.
-	IntrinsicSpanFields = []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceStateColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanParentSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanFlagsColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanKindColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanKindStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDurationNanoColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusMessageColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusCodeStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanEventsColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanLinksColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-
-	// CalculatedSpanFields lists the calculated/derived span columns, in the
-	// order they should appear when a raw query expands its SelectFields.
-	CalculatedSpanFields = []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanResponseStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanExternalHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanExternalHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPHostColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDBNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDBOperationColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHasErrorColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanIsRemoteColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-
-	// ContextualSpanColumns lists the typed attribute and resource columns
-	// selected raw (rather than via ColumnExpressionFor) so that consume.go
-	// can merge them into unified "attributes" and "resource" maps.
-	ContextualSpanColumns = []string{
-		SpanAttributesStringColumn,
-		SpanAttributesNumberColumn,
-		SpanAttributesBoolColumn,
-		SpanResourcesStringColumn,
-	}
-
 	DefaultFields = map[string]telemetrytypes.TelemetryFieldKey{
 		"timestamp": {
 			Name:          "timestamp",

pkg/telemetrytraces/field_mapper_test.go

@@ -82,17 +82,6 @@ func TestGetFieldKeyName(t *testing.T) {
 			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,
 		},
-		{
-			// Query like `attribute.attribute_string:string` should resolve to `attributes_string['attribute_string']`.
-			name: "Attribute key whose name collides with contextual map column resolves as a map lookup",
-			key: telemetrytypes.TelemetryFieldKey{
-				Name:          SpanAttributesStringColumn,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-			},
-			expectedResult: "attributes_string['attributes_string']",
-			expectedError:  nil,
-		},
 		{
 			name: "Non-existent column",
 			key: telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
+	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -15,6 +16,7 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
+	"golang.org/x/exp/maps"
 )
 
 var (
@@ -84,13 +86,40 @@ func (b *traceQueryStatementBuilder) Build(
 	start = querybuilder.ToNanoSecs(start)
 	end = querybuilder.ToNanoSecs(end)
 
-	isSelectFieldsEmpty := false
+	/*
+		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
+	*/
+	/*
+		-------------------------------- Start of tech debt ----------------------------
+	*/
 	if requestType == qbtypes.RequestTypeRaw {
-		isSelectFieldsEmpty = len(query.SelectFields) == 0
-		// we are expanding here to ensure that all the conflicts are taken care in adjustKeys
-		// i.e if there is a conflict we strip away context of the key in adjustKeys
-		query = b.expandRawSelectFields(query)
+
+		selectedFields := query.SelectFields
+
+		if len(selectedFields) == 0 {
+			sortedKeys := maps.Keys(DefaultFields)
+			slices.Sort(sortedKeys)
+			for _, key := range sortedKeys {
+				selectedFields = append(selectedFields, DefaultFields[key])
+			}
+			query.SelectFields = selectedFields
+		}
+
+		selectFieldKeys := []string{}
+		for _, field := range selectedFields {
+			selectFieldKeys = append(selectFieldKeys, field.Name)
+		}
+
+		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
+			if !slices.Contains(selectFieldKeys, x) {
+				query.SelectFields = append(query.SelectFields, DefaultFields[x])
+			}
+		}
 	}
+	/*
+		-------------------------------- 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.
@@ -110,7 +139,7 @@ func (b *traceQueryStatementBuilder) Build(
 
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, q, query, start, end, keys, variables, isSelectFieldsEmpty)
+		return b.buildListQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeTimeSeries:
 		return b.buildTimeSeriesQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeScalar:
@@ -276,7 +305,6 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 	start, end uint64,
 	keys map[string][]*telemetrytypes.TelemetryFieldKey,
 	variables map[string]qbtypes.VariableItem,
-	isSelectFieldsEmpty bool,
 ) (*qbtypes.Statement, error) {
 
 	var (
@@ -293,6 +321,7 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
+	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
 	for _, field := range query.SelectFields {
 		colExpr, err := b.fm.ColumnExpressionFor(ctx, start, end, &field, keys)
 		if err != nil {
@@ -301,12 +330,6 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		sb.SelectMore(colExpr)
 	}
 
-	if isSelectFieldsEmpty {
-		for _, col := range ContextualSpanColumns {
-			sb.SelectMore(col)
-		}
-	}
-
 	// From table
 	sb.From(fmt.Sprintf("%s.%s", DBName, SpanIndexV3TableName))
 
@@ -828,30 +851,3 @@ func (b *traceQueryStatementBuilder) maybeAttachResourceFilter(
 	sb.Where("resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter)")
 	return fmt.Sprintf("__resource_filter AS (%s)", stmt.Query), stmt.Args, true, nil
 }
-
-// expandRawSelectFields populates SelectFields for raw (list view) queries.
-// It must be called before adjustKeys so that normalization runs over the full set.
-func (b *traceQueryStatementBuilder) expandRawSelectFields(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
-	if len(query.SelectFields) == 0 {
-		selectFields := make([]telemetrytypes.TelemetryFieldKey, 0, len(IntrinsicSpanFields)+len(CalculatedSpanFields))
-		selectFields = append(selectFields, IntrinsicSpanFields...)
-		selectFields = append(selectFields, CalculatedSpanFields...)
-		query.SelectFields = selectFields
-		return query
-	}
-
-	selectFields := []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-	for _, field := range query.SelectFields {
-		// TODO(tvats): If a user specifies attribute.timestamp in the select fields, this loop will basically ignore it, as we already added a field by default. This can be fixed once we close https://github.com/SigNoz/engineering-pod/issues/3693
-		if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
-			continue
-		}
-		selectFields = append(selectFields, field)
-	}
-	query.SelectFields = selectFields
-	return query
-}

pkg/telemetrytraces/stmt_builder_test.go

@@ -462,7 +462,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -491,7 +491,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -535,7 +535,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -579,7 +579,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -624,7 +624,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -746,7 +746,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				Limit:        10,
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -788,7 +788,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				}},
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
+				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,

pkg/telemetrytraces/trace_operator_cte_builder.go

@@ -424,20 +424,6 @@ func (b *traceOperatorCTEBuilder) buildNotCTE(leftCTE, rightCTE string) (string,
 }
 
 func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFromCTE string, requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
-	// Mirror statement_builder.go::Build: for raw queries, empty selectFields
-	// expands to the full intrinsic + calculated set, and the list query also
-	// pulls in the contextual columns so the consume layer can merge them
-	// into unified attributes/resource (and parse events/links).
-	isSelectFieldsEmpty := false
-	if requestType == qbtypes.RequestTypeRaw {
-		isSelectFieldsEmpty = len(b.operator.SelectFields) == 0
-		if isSelectFieldsEmpty {
-			b.operator.SelectFields = make([]telemetrytypes.TelemetryFieldKey, 0, len(IntrinsicSpanFields)+len(CalculatedSpanFields))
-			b.operator.SelectFields = append(b.operator.SelectFields, IntrinsicSpanFields...)
-			b.operator.SelectFields = append(b.operator.SelectFields, CalculatedSpanFields...)
-		}
-	}
-
 	keySelectors := b.getKeySelectors()
 	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
 	if err != nil {
@@ -447,7 +433,7 @@ func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFro
 
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, selectFromCTE, keys, isSelectFieldsEmpty)
+		return b.buildListQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTimeSeries:
 		return b.buildTimeSeriesQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTrace:
@@ -459,11 +445,10 @@ func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFro
 	}
 }
 
-func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey, isSelectFieldsEmpty bool) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
-	// Select core fields. These are always present so the trace operator
-	// response shape is stable regardless of user-supplied selectFields.
+	// Select core fields
 	sb.Select(
 		"timestamp",
 		"trace_id",
@@ -497,12 +482,6 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 		selectedFields[field.Name] = true
 	}
 
-	if isSelectFieldsEmpty {
-		for _, col := range ContextualSpanColumns {
-			sb.SelectMore(col)
-		}
-	}
-
 	sb.From(selectFromCTE)
 
 	// Add order by support using ColumnExpressionFor

pkg/telemetrytraces/trace_operator_cte_builder_test.go

@@ -123,7 +123,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM A_INDIR_DESC_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM A_INDIR_DESC_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "gateway", "%service.name%", "%service.name\":\"gateway%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "database", "%service.name%", "%service.name\":\"database%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 5},
 			},
 			expectedErr: nil,
@@ -160,7 +160,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_AND_B AS (SELECT l.* FROM A AS l INNER JOIN B AS r ON l.trace_id = r.trace_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM A_AND_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_AND_B AS (SELECT l.* FROM A AS l INNER JOIN B AS r ON l.trace_id = r.trace_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM A_AND_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "frontend", "%service.name%", "%service.name\":\"frontend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "backend", "%service.name%", "%service.name\":\"backend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 15},
 			},
 			expectedErr: nil,
@@ -197,7 +197,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_OR_B AS (SELECT * FROM A UNION DISTINCT SELECT * FROM B) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM A_OR_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_OR_B AS (SELECT * FROM A UNION DISTINCT SELECT * FROM B) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM A_OR_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "frontend", "%service.name%", "%service.name\":\"frontend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "backend", "%service.name%", "%service.name\":\"backend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 20},
 			},
 			expectedErr: nil,
@@ -234,7 +234,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_not_B AS (SELECT l.* FROM A AS l WHERE l.trace_id GLOBAL NOT IN (SELECT DISTINCT trace_id FROM B)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM A_not_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_not_B AS (SELECT l.* FROM A AS l WHERE l.trace_id GLOBAL NOT IN (SELECT DISTINCT trace_id FROM B)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM A_not_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "frontend", "%service.name%", "%service.name\":\"frontend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "backend", "%service.name%", "%service.name\":\"backend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -399,7 +399,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_DIR_DESC_B AS (SELECT p.* FROM A AS p INNER JOIN B AS c ON p.trace_id = c.trace_id AND p.span_id = c.parent_span_id), __resource_filter_C AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), C AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_C) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_D AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), D AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_D) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), C_DIR_DESC_D AS (SELECT p.* FROM C AS p INNER JOIN D AS c ON p.trace_id = c.trace_id AND p.span_id = c.parent_span_id), A_DIR_DESC_B_AND_C_DIR_DESC_D AS (SELECT l.* FROM A_DIR_DESC_B AS l INNER JOIN C_DIR_DESC_D AS r ON l.trace_id = r.trace_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM A_DIR_DESC_B_AND_C_DIR_DESC_D ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_DIR_DESC_B AS (SELECT p.* FROM A AS p INNER JOIN B AS c ON p.trace_id = c.trace_id AND p.span_id = c.parent_span_id), __resource_filter_C AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), C AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_C) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_D AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), D AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_D) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), C_DIR_DESC_D AS (SELECT p.* FROM C AS p INNER JOIN D AS c ON p.trace_id = c.trace_id AND p.span_id = c.parent_span_id), A_DIR_DESC_B_AND_C_DIR_DESC_D AS (SELECT l.* FROM A_DIR_DESC_B AS l INNER JOIN C_DIR_DESC_D AS r ON l.trace_id = r.trace_id) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM A_DIR_DESC_B_AND_C_DIR_DESC_D ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "frontend", "%service.name%", "%service.name\":\"frontend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "backend", "%service.name%", "%service.name\":\"backend%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "auth", "%service.name%", "%service.name\":\"auth%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "database", "%service.name%", "%service.name\":\"database%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 5},
 			},
 			expectedErr: nil,
@@ -433,7 +433,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id), __return_from_B AS (SELECT * FROM B WHERE trace_id IN (SELECT DISTINCT trace_id FROM A_INDIR_DESC_B)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM __return_from_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id), __return_from_B AS (SELECT * FROM B WHERE trace_id IN (SELECT DISTINCT trace_id FROM A_INDIR_DESC_B)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM __return_from_B ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "gateway", "%service.name%", "%service.name\":\"gateway%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "database", "%service.name%", "%service.name\":\"database%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -475,7 +475,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id), __resource_filter_C AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), C AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_C) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B_AND_C AS (SELECT l.* FROM A_INDIR_DESC_B AS l INNER JOIN C AS r ON l.trace_id = r.trace_id), __return_from_C AS (SELECT * FROM C WHERE trace_id IN (SELECT DISTINCT trace_id FROM A_INDIR_DESC_B_AND_C)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id, trace_state AS `trace_state`, flags AS `flags`, kind AS `kind`, kind_string AS `kind_string`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM __return_from_C ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
+				Query: "WITH toDateTime64(1747947419000000000, 9) AS t_from, toDateTime64(1747983448000000000, 9) AS t_to, 1747945619 AS bucket_from, 1747983448 AS bucket_to, all_spans AS (SELECT *, resource_string_service$$name AS `service.name` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_A AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), A AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_A) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), __resource_filter_B AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), B AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_B) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B AS (WITH RECURSIVE up AS (SELECT d.trace_id, d.span_id, d.parent_span_id, 0 AS depth FROM B AS d UNION ALL SELECT p.trace_id, p.span_id, p.parent_span_id, up.depth + 1 FROM all_spans AS p JOIN up ON p.trace_id = up.trace_id AND p.span_id = up.parent_span_id WHERE up.depth < 100) SELECT DISTINCT a.* FROM A AS a GLOBAL INNER JOIN (SELECT DISTINCT trace_id, span_id FROM up WHERE depth > 0 ) AS ancestors ON ancestors.trace_id = a.trace_id AND ancestors.span_id = a.span_id), __resource_filter_C AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ? GROUP BY fingerprint), C AS (SELECT * FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter_C) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ?), A_INDIR_DESC_B_AND_C AS (SELECT l.* FROM A_INDIR_DESC_B AS l INNER JOIN C AS r ON l.trace_id = r.trace_id), __return_from_C AS (SELECT * FROM C WHERE trace_id IN (SELECT DISTINCT trace_id FROM A_INDIR_DESC_B_AND_C)) SELECT timestamp, trace_id, span_id, name, duration_nano, parent_span_id FROM __return_from_C ORDER BY timestamp DESC LIMIT ? SETTINGS distributed_product_mode='allow', max_memory_usage=10000000000",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "gateway", "%service.name%", "%service.name\":\"gateway%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "database", "%service.name%", "%service.name\":\"database%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), "auth", "%service.name%", "%service.name\":\"auth%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,

pkg/types/querybuildertypes/querybuildertypesv5/resp.go

@@ -236,7 +236,6 @@ type RawStream struct {
 	Error chan error
 }
 
-
 func roundToNonZeroDecimals(val float64, n int) float64 {
 	if val == 0 || math.IsNaN(val) || math.IsInf(val, 0) {
 		return val

pkg/types/spantypes/event.go

@@ -1,54 +0,0 @@
-package spantypes
-
-import "encoding/json"
-
-// The Event struct has the data exactly store in the db, while EventV2 is more of what we want to send to client.
-type EventV2 struct {
-	Name         string         `json:"name"`
-	TimeUnixNano uint64         `json:"timeUnixNano"`
-	Attributes   map[string]any `json:"attributes,omitempty"`
-	IsError      bool           `json:"isError,omitempty"`
-}
-
-// Link is the response shape for a span link.
-// The refType field is intentionally not decoded; it's a Jaeger-era
-// concept that OTel doesn't model, so we drop it on the way out.
-type Link struct {
-	TraceID string `json:"traceId,omitempty"`
-	SpanID  string `json:"spanId,omitempty"`
-}
-
-// ParseEvents column (Array(String) of JSON-encoded events) into a slice of Event values.
-// Malformed entries are skipped.
-func ParseEvents(raw any) []EventV2 {
-	strs, ok := raw.([]string)
-	if !ok {
-		return []EventV2{}
-	}
-	events := make([]EventV2, 0, len(strs))
-	for _, s := range strs {
-		var e Event
-		if err := json.Unmarshal([]byte(s), &e); err != nil {
-			continue
-		}
-		events = append(events, EventV2{
-			Name:         e.Name,
-			TimeUnixNano: e.TimeUnixNano,
-			Attributes:   e.AttributeMap,
-			IsError:      false,
-		})
-	}
-	return events
-}
-
-func ParseLinks(raw any) []Link {
-	s, ok := raw.(string)
-	if !ok || s == "" {
-		return []Link{}
-	}
-	var links []Link
-	if err := json.Unmarshal([]byte(s), &links); err != nil {
-		return []Link{}
-	}
-	return links
-}

pkg/types/spantypes/waterfall_span.go

@@ -47,7 +47,6 @@ func (p *PostableWaterfall) Validate() error {
 }
 
 // Event represents a span event.
-// todo():depricate this and use EventV2 everywhere instead while sending to client.
 type Event struct {
 	Name         string         `json:"name,omitempty"`
 	TimeUnixNano uint64         `json:"timeUnixNano,omitempty"`

tests/fixtures/traces.py

@@ -16,42 +16,6 @@ from fixtures import types
 from fixtures.fingerprint import LogsOrTracesFingerprint
 from fixtures.time import parse_duration, parse_timestamp
 
-# All keys returned by the trace list endpoint when selectFields is empty:
-# every intrinsic and calculated column, plus the merged `attributes` and
-# `resource` maps that wrap the contextual columns in the response layer.
-ALL_SELECT_FIELDS = [
-    # all intrinsic columns
-    "timestamp",
-    "trace_id",
-    "span_id",
-    "trace_state",
-    "parent_span_id",
-    "flags",
-    "name",
-    "kind",
-    "kind_string",
-    "duration_nano",
-    "status_code",
-    "status_message",
-    "status_code_string",
-    "events",
-    "links",
-    # all calculated columns
-    "response_status_code",
-    "external_http_url",
-    "http_url",
-    "external_http_method",
-    "http_method",
-    "http_host",
-    "db_name",
-    "db_operation",
-    "has_error",
-    "is_remote",
-    # all contextual columns (merged in response layer)
-    "attributes",
-    "resource",
-]
-
 
 class TracesKind(Enum):
     SPAN_KIND_UNSPECIFIED = 0
@@ -272,10 +236,9 @@ class Traces(ABC):
     attributes_number: dict[str, np.float64]
     attributes_bool: dict[str, bool]
     resources_string: dict[str, str]
-    # Accepting parsed events and links, but will be stored as list[str], str in db
-    events: list[dict[str, Any]]
-    links: list[dict[str, Any]]
     resource_json: dict[str, str]
+    events: list[str]
+    links: str
     response_status_code: str
     external_http_url: str
     http_url: str
@@ -465,17 +428,10 @@ class Traces(ABC):
                     )
                 )
 
-        # Process events and derive error events. self.events holds the parsed
-        # response shape; np_arr() encodes back to the DB format on insert.
+        # Process events and derive error events
         self.events = []
         for event in events:
-            self.events.append(
-                {
-                    "name": event.name,
-                    "timeUnixNano": int(event.time_unix_nano),
-                    "attributes": dict(event.attribute_map),
-                }
-            )
+            self.events.append(json.dumps([event.name, event.time_unix_nano, event.attribute_map]))
 
             # Create error events for exception events (following Go exporter logic)
             if event.name == "exception":
@@ -497,26 +453,7 @@ class Traces(ABC):
                 ),
             )
 
-        # self.links holds the parsed response shape (trace_id/span_id only;
-        # ref_type is dropped to match the API). np_arr() re-encodes for DB insert.
-        self.links = [{"traceId": link.trace_id, "spanId": link.span_id} for link in links_copy]
-        self._links_db = json.dumps(
-            [link.__dict__() for link in links_copy],
-            separators=(",", ":"),
-        )
-        # DB shape per event: {"name", "timeUnixNano", "attributeMap"}. Must match
-        # what the consume-layer parser in pkg/types/spantypes expects.
-        self._events_db = [
-            json.dumps(
-                {
-                    "name": event.name,
-                    "timeUnixNano": int(event.time_unix_nano),
-                    "attributeMap": dict(event.attribute_map),
-                },
-                separators=(",", ":"),
-            )
-            for event in events
-        ]
+        self.links = json.dumps([link.__dict__() for link in links_copy], separators=(",", ":"))
 
         # Initialize resource
         self.resource = []
@@ -631,8 +568,8 @@ class Traces(ABC):
                 self.attributes_number,
                 self.attributes_bool,
                 self.resources_string,
-                self._events_db,
-                self._links_db,
+                self.events,
+                self.links,
                 self.response_status_code,
                 self.external_http_url,
                 self.http_url,

tests/integration/tests/querier/04_traces.py

@@ -17,16 +17,7 @@ from fixtures.querier import (
     index_series_by_label,
     make_query_request,
 )
-from fixtures.traces import (
-    ALL_SELECT_FIELDS,
-    TraceIdGenerator,
-    Traces,
-    TracesEvent,
-    TracesKind,
-    TracesLink,
-    TracesRefType,
-    TracesStatusCode,
-)
+from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
 
 
 def test_traces_list(
@@ -482,9 +473,7 @@ def test_traces_list(
 @pytest.mark.parametrize(
     "payload,status_code,results",
     [
-        # Case 1: order by timestamp; empty selectFields returns the full
-        # response shape (all intrinsic + calculated columns plus the merged
-        # `attributes` and `resource` maps). x[3] (topic-service) is latest.
+        # Case 1: order by timestamp field which there in attributes as well
         pytest.param(
             {
                 "type": "builder_query",
@@ -498,42 +487,19 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                {
-                    **x[3].attribute_string,
-                    **x[3].attributes_number,
-                    **x[3].attributes_bool,
-                },  # attributes
-                x[3].db_name,
-                x[3].db_operation,
-                int(x[3].duration_nano),
-                x[3].events,
-                x[3].external_http_method,
-                x[3].external_http_url,
-                int(x[3].flags),
-                x[3].has_error,
-                x[3].http_host,
-                x[3].http_method,
-                x[3].http_url,
-                x[3].is_remote,
-                int(x[3].kind),
-                x[3].kind_string,
-                x[3].links,
+                x[3].duration_nano,
                 x[3].name,
-                x[3].parent_span_id,
-                x[3].resources_string,
                 x[3].response_status_code,
+                x[3].service_name,
                 x[3].span_id,
-                int(x[3].status_code),
-                x[3].status_code_string,
-                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
-                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
-        # Case 2: order by attribute.timestamp. The key resolves to the
-        # intrinsic span.timestamp column, so the latest span (x[3]) is
-        # returned with the same full response shape as Case 1.
+        # Case 2: order by attribute timestamp field which is there in attributes as well
+        # This should break but it doesn't because attribute.timestamp gets adjusted to timestamp
+        # because of default trace.timestamp gets added by default and bug in field mapper picks
+        # instrinsic field
         pytest.param(
             {
                 "type": "builder_query",
@@ -547,37 +513,13 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                {
-                    **x[3].attribute_string,
-                    **x[3].attributes_number,
-                    **x[3].attributes_bool,
-                },  # attributes
-                x[3].db_name,
-                x[3].db_operation,
-                int(x[3].duration_nano),
-                x[3].events,
-                x[3].external_http_method,
-                x[3].external_http_url,
-                int(x[3].flags),
-                x[3].has_error,
-                x[3].http_host,
-                x[3].http_method,
-                x[3].http_url,
-                x[3].is_remote,
-                int(x[3].kind),
-                x[3].kind_string,
-                x[3].links,
+                x[3].duration_nano,
                 x[3].name,
-                x[3].parent_span_id,
-                x[3].resources_string,
                 x[3].response_status_code,
+                x[3].service_name,
                 x[3].span_id,
-                int(x[3].status_code),
-                x[3].status_code_string,
-                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
-                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 3: select timestamp with empty order by
@@ -600,7 +542,7 @@ def test_traces_list(
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 4: select attribute.timestamp with empty order by
-        # This returns the one span which has attribute.timestamp
+        # This doesn't return any data because of where_clause using aliased timestamp
         pytest.param(
             {
                 "type": "builder_query",
@@ -614,11 +556,7 @@ def test_traces_list(
                 },
             },
             HTTPStatus.OK,
-            lambda x: [
-                x[0].span_id,
-                format_timestamp(x[0].timestamp),
-                x[0].trace_id,
-            ],  # type: Callable[[List[Traces]], List[Any]]
+            lambda x: [],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 5: select timestamp with timestamp order by
         pytest.param(
@@ -755,159 +693,6 @@ def test_traces_list_with_corrupt_data(
                 assert data[key] == value
 
 
-def _verify_events_links_full(rows: list[dict], traces: list[Traces]) -> None:
-    """Empty-selectFields case: events/links arrive parsed into structured objects.
-    Every row's events/links should match the fixture's stored parsed shape
-    (the fixture's `.events`/`.links` mirror the API response shape directly).
-    """
-    for row, trace in zip(rows, traces, strict=True):
-        assert row["data"]["events"] == trace.events
-        assert row["data"]["links"] == trace.links
-        # Jaeger-era `refType` is dropped at the consume layer.
-        for link in row["data"]["links"]:
-            assert "refType" not in link
-
-
-def _verify_events_links_skip(rows: list[dict], traces: list[Traces]) -> None:
-    """Projected-selectFields case: nothing to verify beyond the key set."""
-
-
-@pytest.mark.parametrize(
-    "select_fields,status_code,expected_keys,verify_values",
-    [
-        pytest.param(
-            [],
-            HTTPStatus.OK,
-            ALL_SELECT_FIELDS,
-            _verify_events_links_full,
-        ),
-        pytest.param(
-            [
-                {"name": "service.name"},
-            ],
-            HTTPStatus.OK,
-            ["timestamp", "trace_id", "span_id", "service.name"],
-            _verify_events_links_skip,
-        ),
-    ],
-)
-def test_traces_list_with_select_fields(
-    signoz: types.SigNoz,
-    create_user_admin: None,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    insert_traces: Callable[[list[Traces]], None],
-    select_fields: list[dict],
-    status_code: HTTPStatus,
-    expected_keys: list[str],
-    verify_values: Callable[[list[dict], list[Traces]], None],
-) -> None:
-    """
-    Setup:
-    Insert a root span with no events/links and a child span carrying two
-    events and one user-supplied link.
-
-    Tests:
-    1. Empty select fields should return all the fields, and the `events` /
-       `links` columns should arrive parsed into structured objects (events
-       carry `attributes`, links carry only `traceId`/`spanId` — refType is
-       dropped at the consume layer).
-    2. Non-empty select field should return the select field along with
-       timestamp, trace_id and span_id.
-    """
-    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
-
-    parent_trace_id = TraceIdGenerator.trace_id()
-    parent_span_id = TraceIdGenerator.span_id()
-    child_span_id = TraceIdGenerator.span_id()
-    linked_trace_id = TraceIdGenerator.trace_id()
-    linked_span_id = TraceIdGenerator.span_id()
-
-    event_one = TracesEvent(
-        name="request_received",
-        timestamp=now - timedelta(seconds=3, microseconds=500_000),
-        attribute_map={"http.method": "GET", "http.route": "/api/chat"},
-    )
-    event_two = TracesEvent(
-        name="cache_lookup",
-        timestamp=now - timedelta(seconds=3, microseconds=400_000),
-        attribute_map={"cache.hit": "true", "cache.key": "user:123:prompt"},
-    )
-    user_link = TracesLink(
-        trace_id=linked_trace_id,
-        span_id=linked_span_id,
-        ref_type=TracesRefType.REF_TYPE_FOLLOWS_FROM,
-    )
-
-    traces = [
-        # Root span: no events, no links. Verifies the empty-case parsed shape.
-        Traces(
-            timestamp=now - timedelta(seconds=4),
-            duration=timedelta(seconds=3),
-            trace_id=parent_trace_id,
-            span_id=parent_span_id,
-            parent_span_id="",
-            name="root span",
-            kind=TracesKind.SPAN_KIND_SERVER,
-            status_code=TracesStatusCode.STATUS_CODE_OK,
-            resources={"service.name": "events-links-service"},
-            attributes={"http.request.method": "GET"},
-        ),
-        # Child span: two events + one user-supplied link. The fixture
-        # auto-inserts a CHILD_OF link for the parent, so the parsed response
-        # contains two links total — the auto-inserted one first.
-        Traces(
-            timestamp=now - timedelta(seconds=3),
-            duration=timedelta(seconds=1),
-            trace_id=parent_trace_id,
-            span_id=child_span_id,
-            parent_span_id=parent_span_id,
-            name="child span",
-            kind=TracesKind.SPAN_KIND_INTERNAL,
-            status_code=TracesStatusCode.STATUS_CODE_OK,
-            resources={"service.name": "events-links-service"},
-            attributes={"http.request.method": "GET"},
-            events=[event_one, event_two],
-            links=[user_link],
-        ),
-    ]
-
-    insert_traces(traces)
-
-    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    payload = {
-        "type": "builder_query",
-        "spec": {
-            "name": "A",
-            "signal": "traces",
-            "filter": {"expression": "resource.service.name = 'events-links-service'"},
-            "selectFields": select_fields,
-            "order": [{"key": {"name": "timestamp"}, "direction": "asc"}],
-            "limit": 10,
-        },
-    }
-
-    response = make_query_request(
-        signoz,
-        token,
-        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
-        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
-        request_type="raw",
-        queries=[payload],
-    )
-    assert response.status_code == status_code
-
-    if response.status_code != HTTPStatus.OK:
-        return
-
-    rows = response.json()["data"]["data"]["results"][0]["rows"]
-    assert len(rows) == 2
-    for row in rows:
-        assert set(row["data"].keys()) == set(expected_keys)
-
-    verify_values(rows, traces)
-
-
 @pytest.mark.parametrize(
     "order_by,aggregation_alias,expected_status",
     [

tests/integration/tests/querier/15_trace_operator.py

@@ -36,22 +36,12 @@ from fixtures.querier import (
     assert_grouped_scalar,
     assert_raw_row_subset,
     assert_scalar_value,
-    find_named_result,
     format_timestamp,
     generate_traces_with_corrupt_metadata,
     get_rows,
     make_query_request,
 )
-from fixtures.traces import (
-    ALL_SELECT_FIELDS,
-    TraceIdGenerator,
-    Traces,
-    TracesEvent,
-    TracesKind,
-    TracesLink,
-    TracesRefType,
-    TracesStatusCode,
-)
+from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
 
 
 def _names(response: requests.Response) -> set:
@@ -623,178 +613,3 @@ def test_trace_operator_with_adjusted_keys(
 
     assert response.status_code == HTTPStatus.OK, response.text
     assert_result(response, traces)
-
-
-# Hardcoded core columns the trace_operator buildListQuery always projects,
-# in addition to any user-supplied selectFields.
-TRACE_OPERATOR_CORE_FIELDS = [
-    "timestamp",
-    "trace_id",
-    "span_id",
-    "name",
-    "duration_nano",
-    "parent_span_id",
-]
-
-
-def _verify_full_expansion(rows: list[dict], parent_trace: Traces) -> None:
-    """Empty-selectFields case: every column from the builder_query parity set
-    arrives, and events/links are parsed into structured form (refType is
-    dropped at the consume layer).
-    """
-    assert len(rows) == 1
-    parent_row = rows[0]["data"]
-    assert set(parent_row.keys()) == set(ALL_SELECT_FIELDS)
-    assert parent_row["events"] == parent_trace.events
-    assert parent_row["links"] == parent_trace.links
-    for link in parent_row["links"]:
-        assert "refType" not in link
-
-
-def _verify_explicit_projection(rows: list[dict], parent_trace: Traces) -> None:  # pylint: disable=unused-argument
-    """Explicit-selectFields case: only the 6 hardcoded core fields plus the
-    user-supplied resource.service.name come back. Contextual columns
-    (events/links/attributes/resource) and the rest of the intrinsics never
-    appear because the consume-layer merge isn't triggered.
-    """
-    assert len(rows) == 1
-    parent_row = rows[0]["data"]
-    assert set(parent_row.keys()) == set(TRACE_OPERATOR_CORE_FIELDS + ["service.name"])
-
-
-@pytest.mark.parametrize(
-    "select_fields,verify_values",
-    [
-        pytest.param([], _verify_full_expansion, id="empty-select-fields"),
-        pytest.param(
-            [{"name": "service.name", "fieldContext": "resource"}],
-            _verify_explicit_projection,
-            id="explicit-service-name",
-        ),
-    ],
-)
-def test_trace_operator_select_fields(
-    signoz: types.SigNoz,
-    create_user_admin: None,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    insert_traces: Callable[[list[Traces]], None],
-    select_fields: list[dict[str, Any]],
-    verify_values: Callable[[list[dict], Traces], None],
-) -> None:
-    """
-    Setup:
-    Insert a parent (operation.type = 'parent') with one event and one
-    user-supplied link, plus a child span (operation.type = 'child').
-
-    Tests:
-    1. With selectFields=[], the `A => B` trace_operator returns every column
-       in ALL_SELECT_FIELDS, mirroring the builder_query path. Events arrive
-       as {name, timeUnixNano, attributes} and links as {traceId, spanId}
-       with refType dropped at the consume layer.
-    2. With an explicit selectFields=[{"name": "service.name"}], only the 6
-       hardcoded core columns plus service.name come back — no auto-expansion
-       to the full set.
-
-    See:
-    - pkg/telemetrytraces/trace_operator_cte_builder.go::buildFinalQuery for
-      the expansion gate.
-    - pkg/telemetrytraces/trace_operator_cte_builder.go::buildListQuery for
-      the per-row SELECT.
-    """
-    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
-
-    trace_id = TraceIdGenerator.trace_id()
-    parent_span_id = TraceIdGenerator.span_id()
-    child_span_id = TraceIdGenerator.span_id()
-
-    parent_event = TracesEvent(
-        name="request_received",
-        timestamp=now - timedelta(seconds=4, microseconds=500_000),
-        attribute_map={"http.method": "GET"},
-    )
-    linked_trace_id = TraceIdGenerator.trace_id()
-    linked_span_id = TraceIdGenerator.span_id()
-    user_link = TracesLink(
-        trace_id=linked_trace_id,
-        span_id=linked_span_id,
-        ref_type=TracesRefType.REF_TYPE_FOLLOWS_FROM,
-    )
-
-    parent_trace = Traces(
-        timestamp=now - timedelta(seconds=5),
-        duration=timedelta(seconds=4),
-        trace_id=trace_id,
-        span_id=parent_span_id,
-        parent_span_id="",
-        name="parent-operation",
-        kind=TracesKind.SPAN_KIND_SERVER,
-        status_code=TracesStatusCode.STATUS_CODE_OK,
-        resources={"service.name": "trace-operator-query"},
-        attributes={"operation.type": "parent"},
-        events=[parent_event],
-        links=[user_link],
-    )
-    child_trace = Traces(
-        timestamp=now - timedelta(seconds=4),
-        duration=timedelta(seconds=1),
-        trace_id=trace_id,
-        span_id=child_span_id,
-        parent_span_id=parent_span_id,
-        name="child-operation",
-        kind=TracesKind.SPAN_KIND_INTERNAL,
-        status_code=TracesStatusCode.STATUS_CODE_OK,
-        resources={"service.name": "trace-operator-query"},
-        attributes={"operation.type": "child"},
-    )
-    insert_traces([parent_trace, child_trace])
-
-    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    operator_spec: dict[str, Any] = {
-        "name": "C",
-        "expression": "A => B",
-        "limit": 10,
-        "order": [{"key": {"name": "timestamp"}, "direction": "asc"}],
-    }
-    if select_fields:
-        operator_spec["selectFields"] = select_fields
-
-    queries = [
-        {
-            "type": "builder_query",
-            "spec": {
-                "name": "A",
-                "signal": "traces",
-                "filter": {"expression": "operation.type = 'parent'"},
-                "limit": 100,
-                "disabled": True,
-            },
-        },
-        {
-            "type": "builder_query",
-            "spec": {
-                "name": "B",
-                "signal": "traces",
-                "filter": {"expression": "operation.type = 'child'"},
-                "limit": 100,
-                "disabled": True,
-            },
-        },
-        {"type": "builder_trace_operator", "spec": operator_spec},
-    ]
-
-    response = make_query_request(
-        signoz,
-        token,
-        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
-        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
-        request_type="raw",
-        queries=queries,
-    )
-
-    assert response.status_code == HTTPStatus.OK
-
-    results = response.json()["data"]["data"]["results"]
-    trace_operator_result = find_named_result(results, "C")
-    rows = trace_operator_result["rows"]
-    verify_values(rows, parent_trace)