Merge branch 'main' into issue_4967

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -1,176 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import AddedFields from './AddedFields';
-import OtherFields from './OtherFields';
-
-import styles from './FieldsSelector.module.scss';
-
-const DEFAULT_PANEL_WIDTH = 350;
-const DEFAULT_PANEL_HEIGHT_OFFSET = 100;
-const DEFAULT_PANEL_RIGHT_INSET = 100;
-const DEFAULT_PANEL_TOP_INSET = 50;
-
-interface FieldsSelectorProps {
-	isOpen: boolean;
-	title: string;
-	fields: TelemetryFieldKey[];
-	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
-	onClose: () => void;
-	signal: DataSource;
-	maxFields?: number;
-	width?: number;
-	height?: number;
-	defaultPosition?: { x: number; y: number };
-}
-
-function FieldsSelector({
-	isOpen,
-	title,
-	fields,
-	onFieldsChange,
-	onClose,
-	signal,
-	maxFields,
-	width = DEFAULT_PANEL_WIDTH,
-	height,
-	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
-	const resolvedHeight =
-		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
-	const resolvedPosition = defaultPosition ?? {
-		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
-		y: DEFAULT_PANEL_TOP_INSET,
-	};
-	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
-	const [inputValue, setInputValue] = useState('');
-	const [debouncedInputValue, setDebouncedInputValue] = useState('');
-
-	const debouncedUpdate = useDebouncedFn((value) => {
-		setDebouncedInputValue(value as string);
-	}, 400);
-
-	const handleInputChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim().toLowerCase();
-			setInputValue(value);
-			debouncedUpdate(value);
-		},
-		[debouncedUpdate],
-	);
-
-	const handleAdd = useCallback(
-		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
-		},
-		[draftFields, maxFields],
-	);
-
-	const handleSave = useCallback((): void => {
-		onFieldsChange(draftFields);
-		toast.success('Saved successfully', {
-			position: 'top-right',
-		});
-		onClose();
-	}, [draftFields, onFieldsChange, onClose]);
-
-	const handleDiscard = useCallback((): void => {
-		setDraftFields(fields);
-	}, [fields]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
-			),
-		[draftFields, fields],
-	);
-
-	const isAtLimit = maxFields !== undefined && draftFields.length >= maxFields;
-
-	return (
-		<FloatingPanel
-			isOpen
-			width={width}
-			height={resolvedHeight}
-			defaultPosition={resolvedPosition}
-			enableResizing={false}
-		>
-			<div className={styles.root}>
-				<div className={styles.header}>
-					<div className={styles.title}>
-						<TableColumnsSplit size={16} />
-						{title}
-					</div>
-					<X className={styles.closeIcon} size={16} onClick={onClose} />
-				</div>
-
-				<section>
-					<Input
-						className={styles.searchInput}
-						type="text"
-						value={inputValue}
-						placeholder="Search for a field..."
-						onChange={handleInputChange}
-					/>
-				</section>
-
-				<AddedFields
-					inputValue={inputValue}
-					fields={draftFields}
-					onFieldsChange={setDraftFields}
-					maxFields={maxFields}
-				/>
-
-				<OtherFields
-					signal={signal}
-					debouncedInputValue={debouncedInputValue}
-					addedFields={draftFields}
-					onAdd={handleAdd}
-					isAtLimit={isAtLimit}
-				/>
-
-				{hasUnsavedChanges && (
-					<div className={styles.footer}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={handleDiscard}
-							prefix={<X width={14} height={14} />}
-						>
-							Discard
-						</Button>
-						<Button
-							variant="solid"
-							color="primary"
-							onClick={handleSave}
-							prefix={<Check width={14} height={14} />}
-						>
-							Save changes
-						</Button>
-					</div>
-				)}
-			</div>
-		</FloatingPanel>
-	);
-}
-
-export default FieldsSelector;

frontend/src/components/FieldsSelector/index.ts

@@ -1 +0,0 @@
-export { default } from './FieldsSelector';

frontend/src/constants/reactQueryKeys.ts

@@ -108,7 +108,4 @@ export const REACT_QUERY_KEY = {
 
 	// Dashboard Grid Card Query Keys
 	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
-
-	// Fields Selector Query Keys
-	GET_FIELDS_SELECTOR_SUGGESTIONS: 'GET_FIELDS_SELECTOR_SUGGESTIONS',
 } as const;

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -186,40 +186,77 @@
 		display: flex;
 		flex-direction: column;
 
-		section {
+		.section-1 {
 			display: flex;
 			flex-direction: column;
 			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
 
 			.ant-btn {
 				display: flex;
 				width: 100%;
-				height: unset;
-				padding: 8px;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
 				align-items: center;
-				gap: 12px;
+				gap: 6px;
 				color: var(--l2-foreground);
 				font-family: Inter;
-				font-size: 13px;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+		}
+		.section-2 {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+			border-bottom: 1px solid var(--l1-border);
+
+			.ant-btn {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: normal;
 				letter-spacing: 0.14px;
-				border-top: none;
 
 				.ant-btn-icon {
 					margin-inline-end: 0px;
 				}
 			}
 		}
+		.delete-dashboard {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
 
-		.section-1,
-		.section-2 {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		.delete-dashboard .ant-btn {
-			color: var(--bg-cherry-400) !important;
+			.ant-typography {
+				display: flex;
+				width: 100%;
+				height: 20px;
+				padding: 16px 18px 18px 14px;
+				align-items: center;
+				gap: 6px;
+				color: var(--bg-cherry-400) !important;
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+			}
 		}
 	}
 }

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -211,12 +211,7 @@
 			display: grid;
 			grid-template-columns: max-content 1fr;
 
-			.typography-variables {
-				display: block;
-			}
-
 			.default-value-description {
-				display: block;
 				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;

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

@@ -11,7 +11,7 @@ import {
 	SyncTooltipFilterMode,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
+import { Check, ExternalLink, Info, X } from '@signozhq/icons';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 
 import styles from './GeneralSettings.module.scss';
@@ -201,7 +201,7 @@ function GeneralDashboardSettings(): JSX.Element {
 						placement="top"
 						mouseEnterDelay={0.5}
 					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
 					</Tooltip>
 				</div>
 				<div className={styles.crossPanelSyncRow}>

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -26,13 +26,10 @@
 	gap: 8px;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	flex: 1;
-	min-width: 0;
 }
 
 .widget-header-title {
 	max-width: 80%;
-	min-width: 0;
 }
 
 .widget-header-actions {

frontend/src/container/NewWidget/WidgetModals/DiscardChangesModal.tsx

@@ -1,53 +0,0 @@
-import { SolidAlertTriangle } from '@signozhq/icons';
-import { ConfirmDialog } from '@signozhq/ui/dialog';
-import { Typography } from '@signozhq/ui/typography';
-
-export interface DiscardChangesModalProps {
-	open: boolean;
-	isNewPanel: boolean;
-	panelTitle?: string;
-	dashboardTitle?: string;
-	onDiscard: () => void;
-	onClose: () => void;
-}
-
-export default function DiscardChangesModal({
-	open,
-	isNewPanel,
-	panelTitle,
-	dashboardTitle,
-	onDiscard,
-	onClose,
-}: DiscardChangesModalProps): JSX.Element {
-	const dashboardName = dashboardTitle ? (
-		<>
-			{' '}
-			to <strong>{dashboardTitle}</strong>
-		</>
-	) : null;
-	const panelLabel = panelTitle ? <strong>{panelTitle}</strong> : 'this panel';
-
-	return (
-		<ConfirmDialog
-			open={open}
-			onOpenChange={(next): void => {
-				if (!next) {
-					onClose();
-				}
-			}}
-			title="Discard changes?"
-			titleIcon={<SolidAlertTriangle size={14} color="#fdd600" />}
-			confirmText="Discard"
-			confirmColor="destructive"
-			cancelText="Keep editing"
-			onConfirm={onDiscard}
-			onCancel={onClose}
-		>
-			{isNewPanel ? (
-				<Typography>This new panel won&apos;t be added{dashboardName}.</Typography>
-			) : (
-				<Typography>Your unsaved edits to {panelLabel} will be lost.</Typography>
-			)}
-		</ConfirmDialog>
-	);
-}

frontend/src/container/NewWidget/__test__/utils.test.ts

@@ -1,17 +1,13 @@
 import {
-	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
-import { cloneDeep } from 'lodash-es';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { MetricAggregation } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 
 import type { PartialPanelTypes } from '../utils';
-import { getIsQueryModified, handleQueryChange } from '../utils';
+import { handleQueryChange } from '../utils';
 
 const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	queryType: EQueryType.QUERY_BUILDER,
@@ -41,128 +37,6 @@ const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	},
 });
 
-const buildMetricsQuery = (
-	overrides?: Partial<{
-		metricName: string;
-		aggregateAttributeKey: string;
-		legend: string;
-		groupByKey: string;
-	}>,
-): Query => ({
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	clickhouse_sql: [],
-	id: 'query-id',
-	unit: '',
-	builder: {
-		queryFormulas: [],
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap[DataSource.METRICS],
-				queryName: 'A',
-				aggregateAttribute: overrides?.aggregateAttributeKey
-					? {
-							...initialAutocompleteData,
-							key: overrides.aggregateAttributeKey,
-							type: 'tag',
-							dataType: DataTypes.Float64,
-						}
-					: cloneDeep(initialAutocompleteData),
-				aggregations: [
-					{
-						metricName: overrides?.metricName ?? 'system.cpu.load',
-						temporality: '',
-						timeAggregation: 'rate',
-						spaceAggregation: 'sum',
-						reduceTo: 'avg',
-					} as MetricAggregation,
-				],
-				legend: overrides?.legend ?? '',
-				groupBy: overrides?.groupByKey
-					? [
-							{
-								...initialAutocompleteData,
-								key: overrides.groupByKey,
-								type: 'tag',
-								dataType: DataTypes.String,
-							},
-						]
-					: [],
-			},
-		],
-		queryTraceOperator: [],
-	},
-});
-
-describe('getIsQueryModified', () => {
-	it('returns false when baseline is null (new unsaved panel with no edits anchor)', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, null)).toBe(false);
-	});
-
-	it('returns false when baseline is undefined', () => {
-		const current = buildMetricsQuery();
-		expect(getIsQueryModified(current, undefined)).toBe(false);
-	});
-
-	it('returns false when current only differs by auto-backfilled aggregateAttribute', () => {
-		// saved widget query: aggregateAttribute is the v5-style empty initial value
-		// (stripped from persisted spec; spread back in as initialAutocompleteData on load)
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		// after MetricNameSelector edit-mode backfill, currentQuery has the populated
-		// aggregateAttribute while the rest of the query is identical
-		const currentQuery = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			aggregateAttributeKey: 'system.cpu.load',
-		});
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(false);
-	});
-
-	it('returns true when the user edits the legend', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			legend: 'cpu-load',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user picks a different metric (aggregations diverges)', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true when the user adds a groupBy', () => {
-		const baseline = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const edited = buildMetricsQuery({
-			metricName: 'system.cpu.load',
-			groupByKey: 'host.name',
-		});
-		expect(getIsQueryModified(edited, baseline)).toBe(true);
-	});
-
-	it('returns true on existing widget when current diverges from saved (Stage-and-Run silent-loss flow)', () => {
-		// After Edit → Stage and Run, stagedQuery is reset to match currentQuery.
-		// The dirty check must compare against the SAVED widget query, not stagedQuery.
-		const savedQuery = buildMetricsQuery({ metricName: 'system.cpu.load' });
-		const currentQuery = buildMetricsQuery({ metricName: 'system.memory.usage' });
-		expect(getIsQueryModified(currentQuery, savedQuery)).toBe(true);
-	});
-
-	it('returns false for a new panel where currentQuery still matches stagedQuery baseline', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery();
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(false);
-	});
-
-	it('returns true for a new panel where currentQuery has been edited away from stagedQuery', () => {
-		const stagedQuery = buildMetricsQuery();
-		const currentQuery = buildMetricsQuery({ legend: 'custom' });
-		expect(getIsQueryModified(currentQuery, stagedQuery)).toBe(true);
-	});
-});
-
 describe('handleQueryChange', () => {
 	it('sets list-specific fields when switching to LIST', () => {
 		const superset = buildSupersetQuery();

frontend/src/container/NewWidget/index.tsx

@@ -1,17 +1,18 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
-import { Check, X } from '@signozhq/icons';
+import { Check, SolidAlertTriangle, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/ui/resizable';
-import { Flex } from 'antd';
+import { Flex, Modal, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -68,6 +69,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType, getGraphTypeForFormat } from 'utils/getGraphType';
 
 import LeftContainer from './LeftContainer';
+import QueryTypeTag from './LeftContainer/QueryTypeTag';
 import RightContainer from './RightContainer';
 import { ThresholdProps } from './RightContainer/Threshold/types';
 import TimeItems, { timePreferance } from './RightContainer/timeItems';
@@ -80,7 +82,6 @@ import {
 	placeWidgetAtBottom,
 	placeWidgetBetweenRows,
 } from './utils';
-import DiscardChangesModal from './WidgetModals/DiscardChangesModal';
 
 import './NewWidget.styles.scss';
 
@@ -97,6 +98,8 @@ function NewWidget({
 
 	const { dashboardVariables } = useDashboardVariables();
 
+	const { t } = useTranslation(['dashboard']);
+
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
 	const {
@@ -107,6 +110,11 @@ function NewWidget({
 		setSupersetQuery,
 	} = useQueryBuilder();
 
+	const isQueryModified = useMemo(
+		() => getIsQueryModified(currentQuery, stagedQuery),
+		[currentQuery, stagedQuery],
+	);
+
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -131,23 +139,6 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
-	// For existing widgets, compare currentQuery against the saved widget query
-	// (stable across Stage-and-Run cycles). For new panels with no saved baseline,
-	// fall back to stagedQuery so initial edits still trigger the warning.
-	const savedWidgetQuery = useMemo(() => {
-		const widgetId = query.get('widgetId');
-		const match = widgets?.find((w) => w.id === widgetId);
-		if (!match || match.panelTypes === PANEL_GROUP_TYPES.ROW) {
-			return null;
-		}
-		return (match as Widgets).query ?? null;
-	}, [widgets, query]);
-
-	const isQueryModified = useMemo(
-		() => getIsQueryModified(currentQuery, savedWidgetQuery ?? stagedQuery),
-		[currentQuery, savedWidgetQuery, stagedQuery],
-	);
-
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -237,6 +228,7 @@ function NewWidget({
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
 
+	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);
 
 	const [bucketWidth, setBucketWidth] = useState<number>(
@@ -348,6 +340,7 @@ function NewWidget({
 	]);
 
 	const closeModal = (): void => {
+		setSaveModal(false);
 		setDiscardModal(false);
 	};
 
@@ -600,7 +593,7 @@ function NewWidget({
 			},
 		};
 
-		return updateDashboardMutation.mutateAsync(dashboard, {
+		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				navigateToDashboardPage();
@@ -695,9 +688,9 @@ function NewWidget({
 				})),
 			}),
 		});
-		onClickSaveHandler();
+		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [onClickSaveHandler]);
+	}, [isNewPanel]);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -958,14 +951,57 @@ function NewWidget({
 					</ResizablePanel>
 				</ResizablePanelGroup>
 			</PanelContainer>
-			<DiscardChangesModal
+			<Modal
+				title={
+					isQueryModified ? (
+						<Space>
+							<SolidAlertTriangle size={16} color="#fdd600" />
+							Unsaved Changes
+						</Space>
+					) : (
+						'Save Widget'
+					)
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={onClickSaveHandler}
+				confirmLoading={updateDashboardMutation.isLoading}
+				centered
+				open={saveModal}
+				width={600}
+			>
+				{!isQueryModified ? (
+					<Typography>
+						{t('your_graph_build_with')}{' '}
+						<QueryTypeTag queryType={currentQuery.queryType} />{' '}
+						{t('dashboard_ok_confirm')}
+					</Typography>
+				) : (
+					<Typography>{t('dashboard_unsave_changes')} </Typography>
+				)}
+			</Modal>
+			<Modal
+				title={
+					<Space>
+						<SolidAlertTriangle size={16} color="#fdd600" />
+						Unsaved Changes
+					</Space>
+				}
+				focusTriggerAfterClose
+				forceRender
+				destroyOnClose
+				closable
+				onCancel={closeModal}
+				onOk={discardChanges}
+				centered
 				open={discardModal}
-				isNewPanel={isNewPanel}
-				panelTitle={title}
-				dashboardTitle={dashboardData?.data?.title}
-				onDiscard={discardChanges}
-				onClose={closeModal}
-			/>
+				width={600}
+			>
+				<Typography>{t('dashboard_unsave_changes')}</Typography>
+			</Modal>
 		</Container>
 	);
 }

frontend/src/container/NewWidget/utils.ts

@@ -1,4 +1,5 @@
 import { Layout } from 'react-grid-layout';
+import { omitIdFromQuery } from 'components/ExplorerCard/utils';
 import { PrecisionOptionsEnum } from 'components/Graph/types';
 import { YAxisCategoryNames } from 'components/YAxisUnitSelector/constants';
 import {
@@ -25,84 +26,16 @@ import { DataSource } from 'types/common/queryBuilder';
 
 import { getCategoryName } from './RightContainer/dataFormatCategories';
 
-// Asks "would saving the current panel change the persisted widget spec?".
-//
-// `adjustQueryForV5` is deliberately not reused here: in addition to stripping
-// the legacy v4 fields, it also resurrects them onto each metric
-// `aggregations[i]`. That migration step is correct on save but bleeds
-// asymmetrically across a comparator — the live query still carries the
-// legacy defaults from `initialQueryBuilderFormValuesMap` while a previously
-// saved widget had them stripped.
-const stripQueryDataForCompare = (
-	queryData: IBuilderQuery,
-): Record<string, unknown> => {
-	const {
-		aggregateAttribute: _aggregateAttribute,
-		aggregateOperator: _aggregateOperator,
-		timeAggregation: _timeAggregation,
-		spaceAggregation: _spaceAggregation,
-		reduceTo: _reduceTo,
-		filters: _filters,
-		...retained
-	} = queryData ?? ({} as IBuilderQuery);
-
-	const groupBy = (retained.groupBy ?? []).map((entry) => {
-		const { id: _id, ...rest } = entry;
-		return rest;
-	});
-
-	return {
-		...retained,
-		groupBy,
-		source: retained.source || '',
-	};
-};
-
-const normalizeForDirtyCheck = (query: Query): Record<string, unknown> => {
-	const { id: _id, unit, builder, ...rest } = query;
-	return {
-		...rest,
-		// `id` is regenerated on every Stage and Run; `unit` flips between ''
-		// and undefined depending on whether the user has touched the selector.
-		unit: unit || '',
-		builder: {
-			...builder,
-			queryData: (builder?.queryData ?? []).map(stripQueryDataForCompare),
-		},
-	};
-};
-
-// `lodash.isEqual` distinguishes `{a: undefined}` from `{}`; for the dirty
-// check those are the same. Initial-values spreads on the live query
-// frequently leave such explicit-undefined keys.
-const stripUndefined = (value: unknown): unknown => {
-	if (Array.isArray(value)) {
-		return value.map(stripUndefined);
-	}
-	if (value && typeof value === 'object') {
-		const out: Record<string, unknown> = {};
-		Object.entries(value as Record<string, unknown>).forEach(([k, v]) => {
-			if (v === undefined) {
-				return;
-			}
-			out[k] = stripUndefined(v);
-		});
-		return out;
-	}
-	return value;
-};
-
 export const getIsQueryModified = (
 	currentQuery: Query,
-	baselineQuery: Query | null | undefined,
+	stagedQuery: Query | null,
 ): boolean => {
-	if (!baselineQuery) {
+	if (!stagedQuery) {
 		return false;
 	}
-	return !isEqual(
-		stripUndefined(normalizeForDirtyCheck(baselineQuery)),
-		stripUndefined(normalizeForDirtyCheck(currentQuery)),
-	);
+	const omitIdFromStageQuery = omitIdFromQuery(stagedQuery);
+	const omitIdFromCurrentQuery = omitIdFromQuery(currentQuery);
+	return !isEqual(omitIdFromStageQuery, omitIdFromCurrentQuery);
 };
 
 export type PartialPanelTypes = {

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -112,11 +112,11 @@ export function SpanHoverCard({
 		}
 		const span = spans[idx];
 		const previewRows: SpanPreviewRow[] = previewFields
-			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.name))
+			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.key))
 			.map((f) => {
-				const value = getSpanAttribute(span, f.name);
+				const value = getSpanAttribute(span, f.key);
 				return value !== undefined && value !== ''
-					? { key: f.name, value: String(value) }
+					? { key: f.key, value: String(value) }
 					: null;
 			})
 			.filter((r): r is SpanPreviewRow => r !== null);

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -10,7 +10,6 @@ import {
 import { Skeleton } from 'antd';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import cx from 'classnames';
-import FieldsSelector from 'components/FieldsSelector';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -24,10 +23,12 @@ import {
 	Server,
 	Timer,
 } from '@signozhq/icons';
+import { FloatingPanel } from 'periscope/components/FloatingPanel';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 import { DataSource } from 'types/common/queryBuilder';
 
+import FieldsSettings from '../components/FieldsSettings/FieldsSettings';
 import { useTraceStore } from '../stores/traceStore';
 import AnalyticsPanel from '../SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel';
 import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
@@ -225,15 +226,26 @@ function TraceDetailsHeader({
 				</div>
 			)}
 
-			<FieldsSelector
-				isOpen={isPreviewFieldsOpen}
-				title="Preview fields"
-				fields={previewFields}
-				onFieldsChange={setPreviewFields}
-				onClose={(): void => setIsPreviewFieldsOpen(false)}
-				signal={DataSource.TRACES}
-				maxFields={10}
-			/>
+			{isPreviewFieldsOpen && (
+				<FloatingPanel
+					isOpen
+					width={350}
+					height={window.innerHeight - 100}
+					defaultPosition={{
+						x: window.innerWidth - 350 - 100,
+						y: 50,
+					}}
+					enableResizing={false}
+				>
+					<FieldsSettings
+						title="Preview fields"
+						fields={previewFields}
+						onFieldsChange={setPreviewFields}
+						onClose={(): void => setIsPreviewFieldsOpen(false)}
+						dataSource={DataSource.TRACES}
+					/>
+				</FloatingPanel>
+			)}
 
 			<AnalyticsPanel
 				isOpen={isAnalyticsOpen}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -9,7 +9,10 @@ import { SpanV3 } from 'types/api/trace/getTraceV3';
 import { COLOR_BY_FIELDS } from '../constants';
 import { useTraceStore } from '../stores/traceStore';
 import Error from '../TraceWaterfall/TraceWaterfallStates/Error/Error';
-import { mergeTelemetryFieldKeys } from '../utils/previewFields';
+import {
+	mergeTelemetryFieldKeys,
+	toTelemetryFieldKey,
+} from '../utils/previewFields';
 import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
 import FlamegraphCanvas from './FlamegraphCanvas';
 import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
@@ -57,7 +60,11 @@ function TraceFlamegraph({
 	// Color-by fields baseline + user-picked preview fields. De-duped by `name`,
 	// color-by entries first so their canonical metadata wins on collision.
 	const flamegraphSelectFields = useMemo(
-		() => mergeTelemetryFieldKeys(COLOR_BY_FIELDS, previewFields),
+		() =>
+			mergeTelemetryFieldKeys(
+				COLOR_BY_FIELDS,
+				previewFields.map(toTelemetryFieldKey),
+			),
 		[previewFields],
 	);
 

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -144,14 +144,14 @@ export function useFlamegraphHover(
 	const buildPreviewRows = useCallback(
 		(span: FlamegraphSpan): SpanPreviewRowData[] =>
 			previewFields
-				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.name))
+				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.key))
 				.map((field) => {
 					const value = getSpanAttribute(
 						{ resource: span.resource, attributes: span.attributes },
-						field.name,
+						field.key,
 					);
 					return value !== undefined && value !== ''
-						? { key: field.name, value: String(value) }
+						? { key: field.key, value: String(value) }
 						: null;
 				})
 				.filter((r): r is SpanPreviewRowData => r !== null),

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/AddedFields.tsx

@@ -18,22 +18,21 @@ import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { Typography } from '@signozhq/ui/typography';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import styles from './FieldsSelector.module.scss';
+import styles from './FieldsSettings.module.scss';
 
 function SortableField({
 	field,
 	onRemove,
 	allowDrag,
 }: {
-	field: TelemetryFieldKey;
-	onRemove: (field: TelemetryFieldKey) => void;
+	field: BaseAutocompleteData;
+	onRemove: (field: BaseAutocompleteData) => void;
 	allowDrag: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.name });
+		useSortable({ id: field.key });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -51,7 +50,7 @@ function SortableField({
 		>
 			<div {...attributes} {...listeners} className={styles.dragHandle}>
 				{allowDrag && <GripVertical size={14} />}
-				<span className={styles.fieldKey}>{field.name}</span>
+				<span className={styles.fieldKey}>{field.key}</span>
 			</div>
 			<Button
 				className={cx(styles.removeBtn, 'periscope-btn')}
@@ -68,52 +67,41 @@ function SortableField({
 
 interface AddedFieldsProps {
 	inputValue: string;
-	fields: TelemetryFieldKey[];
-	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
-	maxFields?: number;
+	fields: BaseAutocompleteData[];
+	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
 }
 
 function AddedFields({
 	inputValue,
 	fields,
 	onFieldsChange,
-	maxFields,
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
 
 	const filteredFields = useMemo(
 		() =>
-			fields.filter((f) =>
-				f.name.toLowerCase().includes(inputValue.toLowerCase()),
-			),
+			fields.filter((f) => f.key.toLowerCase().includes(inputValue.toLowerCase())),
 		[fields, inputValue],
 	);
 
-	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+	const handleRemove = (field: BaseAutocompleteData): void => {
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
 
 	return (
 		<div className={cx(styles.section, styles.sectionAdded)}>
-			<div className={styles.sectionHeader}>
-				<span>ADDED FIELDS</span>
-				{maxFields !== undefined && (
-					<Typography.Text size="sm" weight="medium" color="muted">
-						Max Allowed: {maxFields}
-					</Typography.Text>
-				)}
-			</div>
+			<div className={styles.sectionHeader}>ADDED FIELDS</div>
 			<div className={styles.addedList}>
 				<OverlayScrollbar>
 					<DndContext
@@ -125,13 +113,13 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.module.scss

@@ -56,14 +56,12 @@
 }
 
 .sectionHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
 	color: var(--muted-foreground);
 	font-size: 11px;
 	font-weight: 500;
 	line-height: 18px;
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
 	padding: 8px 12px;
 }
 
@@ -91,6 +89,13 @@
 	font-size: 12px;
 }
 
+.limitHint {
+	padding: 8px 12px;
+	text-align: center;
+	color: var(--muted-foreground);
+	font-size: 11px;
+}
+
 .fieldItem {
 	display: flex;
 	align-items: center;

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/FieldsSettings.tsx

@@ -0,0 +1,149 @@
+import { useCallback, useMemo, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Check, TableColumnsSplit, X } from '@signozhq/icons';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+import AddedFields from './AddedFields';
+import OtherFields from './OtherFields';
+
+import styles from './FieldsSettings.module.scss';
+
+const MAX_FIELDS_DEFAULT = 10;
+
+interface FieldsSettingsProps {
+	title: string;
+	// Picker's native shape (`BaseAutocompleteData`) is preserved end-to-end so
+	// downstream consumers (flamegraph `selectFields`, hover popovers) get full
+	// field metadata without a lossy conversion at add-time.
+	fields: BaseAutocompleteData[];
+	onFieldsChange: (fields: BaseAutocompleteData[]) => void;
+	onClose: () => void;
+	dataSource: DataSource;
+	maxFields?: number;
+}
+
+function FieldsSettings({
+	title,
+	fields,
+	onFieldsChange,
+	onClose,
+	dataSource,
+	maxFields = MAX_FIELDS_DEFAULT,
+}: FieldsSettingsProps): JSX.Element {
+	// Local draft state — changes here don't persist until Save
+	const [draftFields, setDraftFields] = useState<BaseAutocompleteData[]>(fields);
+	const [inputValue, setInputValue] = useState('');
+	const [debouncedInputValue, setDebouncedInputValue] = useState('');
+
+	const debouncedUpdate = useDebouncedFn((value) => {
+		setDebouncedInputValue(value as string);
+	}, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setInputValue(value);
+			debouncedUpdate(value);
+		},
+		[debouncedUpdate],
+	);
+
+	const handleAdd = useCallback(
+		(field: BaseAutocompleteData): void => {
+			if (draftFields.length >= maxFields) {
+				return;
+			}
+			if (draftFields.some((f) => f.key === field.key)) {
+				return;
+			}
+			setDraftFields((prev) => [...prev, field]);
+		},
+		[draftFields, maxFields],
+	);
+
+	const handleSave = useCallback((): void => {
+		onFieldsChange(draftFields);
+		toast.success('Saved successfully', {
+			position: 'top-right',
+		});
+		onClose();
+	}, [draftFields, onFieldsChange, onClose]);
+
+	const handleDiscard = useCallback((): void => {
+		setDraftFields(fields);
+	}, [fields]);
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			!(
+				draftFields.length === fields.length &&
+				draftFields.every((f, i) => f.key === fields[i]?.key)
+			),
+		[draftFields, fields],
+	);
+
+	const isAtLimit = draftFields.length >= maxFields;
+
+	return (
+		<div className={styles.root}>
+			<div className={styles.header}>
+				<div className={styles.title}>
+					<TableColumnsSplit size={16} />
+					{title}
+				</div>
+				<X className={styles.closeIcon} size={16} onClick={onClose} />
+			</div>
+
+			<section>
+				<Input
+					className={styles.searchInput}
+					type="text"
+					value={inputValue}
+					placeholder="Search for a field..."
+					onChange={handleInputChange}
+				/>
+			</section>
+
+			<AddedFields
+				inputValue={inputValue}
+				fields={draftFields}
+				onFieldsChange={setDraftFields}
+			/>
+
+			<OtherFields
+				dataSource={dataSource}
+				debouncedInputValue={debouncedInputValue}
+				addedFields={draftFields}
+				onAdd={handleAdd}
+				isAtLimit={isAtLimit}
+			/>
+
+			{hasUnsavedChanges && (
+				<div className={styles.footer}>
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={handleDiscard}
+						prefix={<X width={14} height={14} />}
+					>
+						Discard
+					</Button>
+					<Button
+						variant="solid"
+						color="primary"
+						onClick={handleSave}
+						prefix={<Check width={14} height={14} />}
+					>
+						Save changes
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default FieldsSettings;

frontend/src/pages/TraceDetailsV3/components/FieldsSettings/OtherFields.tsx

@@ -4,58 +4,51 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import {
-	FieldContext,
-	FieldDataType,
-	SignalType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './FieldsSelector.module.scss';
+import styles from './FieldsSettings.module.scss';
 
 interface OtherFieldsProps {
-	signal: DataSource;
+	dataSource: DataSource;
 	debouncedInputValue: string;
-	addedFields: TelemetryFieldKey[];
-	onAdd: (field: TelemetryFieldKey) => void;
+	addedFields: BaseAutocompleteData[];
+	onAdd: (field: BaseAutocompleteData) => void;
 	isAtLimit: boolean;
 }
 
 function OtherFields({
-	signal,
+	dataSource,
 	debouncedInputValue,
 	addedFields,
 	onAdd,
 	isAtLimit,
 }: OtherFieldsProps): JSX.Element {
-	const { data, isFetching } = useGetQueryKeySuggestions(
+	// API call to get available attribute keys
+	const { data, isFetching } = useGetAggregateKeys(
 		{
-			signal,
 			searchText: debouncedInputValue,
+			dataSource,
+			aggregateOperator: 'noop',
+			aggregateAttribute: '',
+			tagType: '',
 		},
 		{
 			queryKey: [
-				REACT_QUERY_KEY.GET_FIELDS_SELECTOR_SUGGESTIONS,
-				signal,
+				REACT_QUERY_KEY.GET_OTHER_FILTERS,
+				'preview-fields',
 				debouncedInputValue,
 			],
 			enabled: true,
 		},
 	);
 
-	const otherFields: TelemetryFieldKey[] = useMemo(() => {
-		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
-				...attr,
-				signal: attr.signal as SignalType,
-				fieldContext: attr.fieldContext as FieldContext,
-				fieldDataType: attr.fieldDataType as FieldDataType,
-			}));
+	// Filter out already-added fields, match on .key from API response objects
+	const otherFields = useMemo(() => {
+		const attributes = data?.payload?.attributeKeys || [];
+		const addedKeys = new Set(addedFields.map((f) => f.key));
+		return attributes.filter((attr) => !addedKeys.has(attr.key));
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -83,10 +76,10 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
-									<span className={styles.fieldKey}>{attr.name}</span>
+									<span className={styles.fieldKey}>{attr.key}</span>
 									{!isAtLimit && (
 										<Button
 											className={cx(styles.addBtn, 'periscope-btn')}
@@ -101,6 +94,7 @@ function OtherFields({
 								</div>
 							))
 						)}
+						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>

frontend/src/pages/TraceDetailsV3/stores/traceStore.ts

@@ -15,7 +15,6 @@ import {
 	AGGREGATIONS,
 	getAggregationMap as findAggregationMap,
 } from '../utils/aggregations';
-import { toTelemetryFieldKey } from '../utils/previewFields';
 
 interface MutateOptions {
 	onSuccess?: () => void;
@@ -38,7 +37,7 @@ interface TraceStoreState {
 	// --- Derived state (cached for reference stability) ---
 	colorByField: TelemetryFieldKey;
 	availableColorByOptions: ColorByOption[];
-	previewFields: TelemetryFieldKey[];
+	previewFields: BaseAutocompleteData[];
 
 	// --- Setters used only by TraceStoreSync ---
 	setAggregations: (
@@ -52,7 +51,7 @@ interface TraceStoreState {
 
 	// --- Public actions (called from components) ---
 	setColorByField: (field: TelemetryFieldKey) => void;
-	setPreviewFields: (next: TelemetryFieldKey[]) => void;
+	setPreviewFields: (next: BaseAutocompleteData[]) => void;
 }
 
 /**
@@ -106,31 +105,21 @@ function deriveColorState(
 }
 
 /**
- * Reads preview fields from user preferences and normalizes them to
- * `TelemetryFieldKey`. Legacy entries persisted as `BaseAutocompleteData` (with
- * a `.key` instead of `.name`) are upgraded in-place so existing users don't
- * lose their saved preview-field selection.
+ * Reads preview fields from user preferences and filters out malformed entries.
  */
 function derivePreviewFields(
 	userPreferences: UserPreference[] | null,
-): TelemetryFieldKey[] {
+): BaseAutocompleteData[] {
 	const pref = userPreferences?.find(
 		(p) => p.name === USER_PREFERENCES.SPAN_DETAILS_PREVIEW_ATTRIBUTES,
 	);
-	const raw = (pref?.value as unknown[] | undefined) ?? [];
-	const result: TelemetryFieldKey[] = [];
-	for (const entry of raw) {
-		if (typeof entry !== 'object' || entry === null) {
-			continue;
-		}
-		const candidate = entry as { name?: unknown; key?: unknown };
-		if (typeof candidate.name === 'string') {
-			result.push(entry as TelemetryFieldKey);
-		} else if (typeof candidate.key === 'string') {
-			result.push(toTelemetryFieldKey(entry as BaseAutocompleteData));
-		}
-	}
-	return result;
+	const raw = (pref?.value as BaseAutocompleteData[] | undefined) ?? [];
+	return raw.filter(
+		(f): f is BaseAutocompleteData =>
+			typeof f === 'object' &&
+			f !== null &&
+			typeof (f as { key?: unknown }).key === 'string',
+	);
 }
 
 export const useTraceStore = create<TraceStoreState>()((set, get) => ({

frontend/src/pages/TraceDetailsV3/utils/previewFields.ts

@@ -41,9 +41,8 @@ function mapFieldDataType(
 }
 
 /**
- * Upgrades a legacy `BaseAutocompleteData`-shaped preview field (persisted by
- * pre-migration clients) to the current `TelemetryFieldKey` shape. Kept around
- * for the read-side compatibility shim in `traceStore.derivePreviewFields`.
+ * Convert a picker-shaped field to the API's `TelemetryFieldKey` shape used
+ * for `selectFields` on the flamegraph request.
  */
 export function toTelemetryFieldKey(
 	field: BaseAutocompleteData,
@@ -52,7 +51,6 @@ export function toTelemetryFieldKey(
 		name: field.key,
 		fieldContext: mapFieldContext(field.type),
 		fieldDataType: mapFieldDataType(field.dataType),
-		isIndexed: field.isIndexed,
 	};
 }
 

pkg/telemetrytraces/statement_builder.go

@@ -124,7 +124,7 @@ func (b *traceQueryStatementBuilder) Build(
 		-------------------------------- End of tech debt ----------------------------
 	*/
 
-	query = b.adjustKeys(ctx, keys, query, requestType)
+	adjustTraceKeys(ctx, b.logger, keys, &query, requestType)
 
 	// Create SQL builder
 	q := sqlbuilder.NewSelectBuilder()
@@ -193,24 +193,30 @@ func getKeySelectors(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation])
 	return keySelectors
 }
 
-func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
-
-	// add deprecated fields only during statement building
-	// why?
-	// 1. to not fail filter expression that use deprecated cols
-	// 2. this could have been moved to metadata fetching itself, however, that
-	// would mean, they also show up in suggestions we we don't want to do
-	// 3. reason for not doing a simple append is to keep intrinsic/calculated field first so that it gets
-	// priority in multi_if sql expression
+// mergeDeprecatedTraceKeys prepends deprecated intrinsic/calculated trace field
+// definitions to the keys map. We do this during statement building, not at
+// metadata fetch time, because:
+//  1. Filter expressions that reference deprecated columns must continue to
+//     resolve — otherwise they fail with "key not found".
+//  2. Doing it at metadata fetch time would also surface deprecated keys in
+//     autocomplete suggestions, which we don't want.
+//  3. We prepend (not append) so the intrinsic/calculated entry wins ordering
+//     in the multi_if SQL expression.
+func mergeDeprecatedTraceKeys(keys map[string][]*telemetrytypes.TelemetryFieldKey) {
 	for fieldKeyName, fieldKey := range IntrinsicFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
 	for fieldKeyName, fieldKey := range CalculatedFieldsDeprecated {
 		keys[fieldKeyName] = append([]*telemetrytypes.TelemetryFieldKey{&fieldKey}, keys[fieldKeyName]...)
 	}
+}
+
+func adjustTraceKeys(ctx context.Context, logger *slog.Logger, keys map[string][]*telemetrytypes.TelemetryFieldKey, query *qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation], requestType qbtypes.RequestType) {
+
+	mergeDeprecatedTraceKeys(keys)
 
 	// Adjust keys for alias expressions in aggregations
-	actions := querybuilder.AdjustKeysForAliasExpressions(&query, requestType)
+	actions := querybuilder.AdjustKeysForAliasExpressions(query, requestType)
 
 	/*
 		Check if user is using multiple contexts or data types for same field name
@@ -228,7 +234,7 @@ func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[st
 		and make it just http.status_code and remove the duplicate entry.
 	*/
 
-	actions = append(actions, querybuilder.AdjustDuplicateKeys(&query)...)
+	actions = append(actions, querybuilder.AdjustDuplicateKeys(query)...)
 
 	/*
 		Now adjust each key to have correct context and data type
@@ -236,24 +242,23 @@ func (b *traceQueryStatementBuilder) adjustKeys(ctx context.Context, keys map[st
 		Reason for doing this is to not create an unexpected behavior for users
 	*/
 	for idx := range query.SelectFields {
-		actions = append(actions, b.adjustKey(&query.SelectFields[idx], keys)...)
+		actions = append(actions, adjustTraceKey(&query.SelectFields[idx], keys)...)
 	}
 	for idx := range query.GroupBy {
-		actions = append(actions, b.adjustKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
+		actions = append(actions, adjustTraceKey(&query.GroupBy[idx].TelemetryFieldKey, keys)...)
 	}
 	for idx := range query.Order {
-		actions = append(actions, b.adjustKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
+		actions = append(actions, adjustTraceKey(&query.Order[idx].Key.TelemetryFieldKey, keys)...)
 	}
 
 	for _, action := range actions {
 		// TODO: change to debug level once we are confident about the behavior
-		b.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+		logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
 	}
-
-	return query
 }
 
-func (b *traceQueryStatementBuilder) adjustKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
+// adjustTraceKey resolves a single TelemetryFieldKey against the keys map.
+func adjustTraceKey(key *telemetrytypes.TelemetryFieldKey, keys map[string][]*telemetrytypes.TelemetryFieldKey) []string {
 
 	// for recording actions taken
 	actions := []string{}

pkg/telemetrytraces/stmt_builder_test.go

@@ -1125,28 +1125,13 @@ func TestAdjustKey(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-	statementBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
 			// Create a copy of the input key to avoid modifying the original
 			key := c.inputKey
 
 			// Call adjustKey
-			statementBuilder.adjustKey(&key, c.keysMap)
+			adjustTraceKey(&key, c.keysMap)
 
 			// Verify the key was adjusted as expected
 			require.Equal(t, c.expectedKey.Name, key.Name, "key name should match")
@@ -1424,7 +1409,7 @@ func TestAdjustKeys(t *testing.T) {
 			}
 
 			// Call adjustKeys
-			c.query = statementBuilder.adjustKeys(context.Background(), keysMapCopy, c.query, qbtypes.RequestTypeScalar)
+			adjustTraceKeys(context.Background(), statementBuilder.logger, keysMapCopy, &c.query, qbtypes.RequestTypeScalar)
 
 			// Verify select fields were adjusted
 			if c.expectedSelectFields != nil {

pkg/telemetrytraces/trace_operator_cte_builder.go

@@ -197,6 +197,10 @@ func (b *traceOperatorCTEBuilder) buildQueryCTE(ctx context.Context, queryName s
 	}
 	b.stmtBuilder.logger.DebugContext(ctx, "Retrieved keys for query", slog.String("query_name", queryName), slog.Int("keys_count", len(keys)))
 
+	// The CTE only selects spans matching the filter. Aggregations, group by
+	// and order by run later in buildFinalQuery, so RequestTypeRaw is fine here.
+	adjustTraceKeys(ctx, b.stmtBuilder.logger, keys, query, qbtypes.RequestTypeRaw)
+
 	// Build resource filter CTE for this specific query
 	resourceFilterCTEName := fmt.Sprintf("__resource_filter_%s", cteName)
 	resourceStmt, err := b.buildResourceFilterCTE(ctx, *query)
@@ -398,21 +402,28 @@ func (b *traceOperatorCTEBuilder) buildNotCTE(leftCTE, rightCTE string) (string,
 }
 
 func (b *traceOperatorCTEBuilder) buildFinalQuery(ctx context.Context, selectFromCTE string, requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+	b.adjustOperatorKeys(ctx, keys, requestType)
+
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, selectFromCTE)
+		return b.buildListQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTimeSeries:
-		return b.buildTimeSeriesQuery(ctx, selectFromCTE)
+		return b.buildTimeSeriesQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeTrace:
-		return b.buildTraceQuery(ctx, selectFromCTE)
+		return b.buildTraceQuery(ctx, selectFromCTE, keys)
 	case qbtypes.RequestTypeScalar:
-		return b.buildScalarQuery(ctx, selectFromCTE)
+		return b.buildScalarQuery(ctx, selectFromCTE, keys)
 	default:
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported request type: %s", requestType)
 	}
 }
 
-func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFromCTE string) (*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
@@ -434,22 +445,6 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 		"parent_span_id": true,
 	}
 
-	// Get keys for selectFields
-	keySelectors := b.getKeySelectors()
-	for _, field := range b.operator.SelectFields {
-		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
-			Name:          field.Name,
-			Signal:        telemetrytypes.SignalTraces,
-			FieldContext:  field.FieldContext,
-			FieldDataType: field.FieldDataType,
-		})
-	}
-
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	// Add selectFields using ColumnExpressionFor since we now have all base table columns
 	for _, field := range b.operator.SelectFields {
 		if selectedFields[field.Name] {
@@ -499,6 +494,45 @@ func (b *traceOperatorCTEBuilder) buildListQuery(ctx context.Context, selectFrom
 	}, nil
 }
 
+// adjustOperatorKeys runs the same key adjustments as adjustTraceKeys, but on
+// the operator's own fields. The operator has a different struct shape than
+// QueryBuilderQuery, so we copy the relevant fields into a temp query, run
+// the shared helpers, and copy the results back.
+func (b *traceOperatorCTEBuilder) adjustOperatorKeys(ctx context.Context, keys map[string][]*telemetrytypes.TelemetryFieldKey, requestType qbtypes.RequestType) {
+	mergeDeprecatedTraceKeys(keys)
+
+	tmp := qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+		Aggregations: b.operator.Aggregations,
+		SelectFields: b.operator.SelectFields,
+		GroupBy:      b.operator.GroupBy,
+		Order:        b.operator.Order,
+	}
+
+	actions := querybuilder.AdjustKeysForAliasExpressions(&tmp, requestType)
+	actions = append(actions, querybuilder.AdjustDuplicateKeys(&tmp)...)
+
+	for idx := range tmp.SelectFields {
+		actions = append(actions, adjustTraceKey(&tmp.SelectFields[idx], keys)...)
+	}
+	for idx := range tmp.GroupBy {
+		actions = append(actions, adjustTraceKey(&tmp.GroupBy[idx].TelemetryFieldKey, keys)...)
+	}
+	for idx := range tmp.Order {
+		actions = append(actions, adjustTraceKey(&tmp.Order[idx].Key.TelemetryFieldKey, keys)...)
+	}
+
+	// Copy back the three slices that the helpers above can rewrite
+	// (AdjustDuplicateKeys reconstructs them, adjustTraceKey mutates in place).
+	// Aggregations is only read by the helpers, never reassigned, so no copy-back.
+	b.operator.SelectFields = tmp.SelectFields
+	b.operator.GroupBy = tmp.GroupBy
+	b.operator.Order = tmp.Order
+
+	for _, action := range actions {
+		b.stmtBuilder.logger.InfoContext(ctx, "key adjustment action", slog.String("action", action))
+	}
+}
+
 func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySelector {
 	var keySelectors []*telemetrytypes.FieldKeySelector
 
@@ -526,6 +560,15 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 		})
 	}
 
+	for _, sf := range b.operator.SelectFields {
+		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
+			Name:          sf.Name,
+			Signal:        telemetrytypes.SignalTraces,
+			FieldContext:  sf.FieldContext,
+			FieldDataType: sf.FieldDataType,
+		})
+	}
+
 	for i := range keySelectors {
 		keySelectors[i].Signal = telemetrytypes.SignalTraces
 	}
@@ -533,7 +576,7 @@ func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySe
 	return keySelectors
 }
 
-func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
 	sb.Select(fmt.Sprintf(
@@ -541,12 +584,6 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 		int64(b.operator.StepInterval.Seconds()),
 	))
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -625,8 +662,7 @@ func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(ctx context.Context, sele
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 
@@ -653,17 +689,11 @@ func (b *traceOperatorCTEBuilder) buildTraceSummaryCTE(selectFromCTE string) {
 	b.addCTE("trace_summary", sql, args, []string{"all_spans", selectFromCTE})
 }
 
-func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	b.buildTraceSummaryCTE(selectFromCTE)
 
 	sb := sqlbuilder.NewSelectBuilder()
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -745,8 +775,7 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 		sb.GroupBy(groupByKeys...)
 	}
 
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 
@@ -802,15 +831,9 @@ func (b *traceOperatorCTEBuilder) buildTraceQuery(ctx context.Context, selectFro
 	}, nil
 }
 
-func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string) (*qbtypes.Statement, error) {
+func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFromCTE string, keys map[string][]*telemetrytypes.TelemetryFieldKey) (*qbtypes.Statement, error) {
 	sb := sqlbuilder.NewSelectBuilder()
 
-	keySelectors := b.getKeySelectors()
-	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(ctx, keySelectors)
-	if err != nil {
-		return nil, err
-	}
-
 	var allGroupByArgs []any
 
 	for _, gb := range b.operator.GroupBy {
@@ -892,8 +915,7 @@ func (b *traceOperatorCTEBuilder) buildScalarQuery(ctx context.Context, selectFr
 	combinedArgs := append(allGroupByArgs, allAggChArgs...)
 
 	// Add HAVING clause if specified
-	err = b.addHavingClause(sb)
-	if err != nil {
+	if err := b.addHavingClause(sb); err != nil {
 		return nil, err
 	}
 

pkg/telemetrytraces/trace_operator_cte_builder_test.go

@@ -2,6 +2,7 @@ package telemetrytraces
 
 import (
 	"context"
+	"strings"
 	"testing"
 	"time"
 
@@ -14,6 +15,24 @@ import (
 	"github.com/stretchr/testify/require"
 )
 
+func newTestTraceOperatorStatementBuilder(t *testing.T) *traceOperatorStatementBuilder {
+	t.Helper()
+	fm := NewFieldMapper()
+	cb := NewConditionBuilder(fm)
+	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
+	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
+	fl := flaggertest.New(t)
+	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
+	traceStmtBuilder := NewTraceQueryStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore, fm, cb, aggExprRewriter, nil, fl,
+	)
+	return NewTraceOperatorStatementBuilder(
+		instrumentationtest.New().ToProviderSettings(),
+		mockMetadataStore, fm, cb, traceStmtBuilder, aggExprRewriter, fl,
+	)
+}
+
 func TestTraceOperatorStatementBuilder(t *testing.T) {
 	cases := []struct {
 		name           string
@@ -387,32 +406,7 @@ func TestTraceOperatorStatementBuilder(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-
-	traceStmtBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
-	statementBuilder := NewTraceOperatorStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		traceStmtBuilder,
-		aggExprRewriter,
-		fl,
-	)
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -503,32 +497,7 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		},
 	}
 
-	fm := NewFieldMapper()
-	cb := NewConditionBuilder(fm)
-	mockMetadataStore := telemetrytypestest.NewMockMetadataStore()
-	mockMetadataStore.KeysMap = buildCompleteFieldKeyMap()
-	fl := flaggertest.New(t)
-	aggExprRewriter := querybuilder.NewAggExprRewriter(instrumentationtest.New().ToProviderSettings(), nil, fm, cb, nil, fl)
-
-	traceStmtBuilder := NewTraceQueryStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		aggExprRewriter,
-		nil,
-		fl,
-	)
-
-	statementBuilder := NewTraceOperatorStatementBuilder(
-		instrumentationtest.New().ToProviderSettings(),
-		mockMetadataStore,
-		fm,
-		cb,
-		traceStmtBuilder,
-		aggExprRewriter,
-		fl,
-	)
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
 
 	for _, c := range cases {
 		t.Run(c.name, func(t *testing.T) {
@@ -550,3 +519,143 @@ func TestTraceOperatorStatementBuilderErrors(t *testing.T) {
 		})
 	}
 }
+
+func TestTraceOperatorStatementBuilderAdjustsKeys(t *testing.T) {
+	cases := []struct {
+		name          string
+		requestType   qbtypes.RequestType
+		operator      qbtypes.QueryBuilderTraceOperator
+		builderFilter string
+		wantSQL       string
+		wantArgs      []any
+	}{
+		{
+			name:        "deprecated duration filter in referenced builder query",
+			requestType: qbtypes.RequestTypeRaw,
+			operator: qbtypes.QueryBuilderTraceOperator{
+				Expression: "A",
+				Limit:      10,
+			},
+			builderFilter: "durationNano = '3s'",
+			wantSQL:       "duration_nano = ?",
+			wantArgs:      []any{int64(3000000000)},
+		},
+		{
+			name:        "context-prefixed aggregation alias in order by",
+			requestType: qbtypes.RequestTypeScalar,
+			operator: qbtypes.QueryBuilderTraceOperator{
+				Expression: "A",
+				Aggregations: []qbtypes.TraceAggregation{
+					{
+						Expression: "count()",
+						Alias:      "span.count_",
+					},
+				},
+				Order: []qbtypes.OrderBy{
+					{
+						Key: qbtypes.OrderByKey{
+							TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+								Name:         "count_",
+								FieldContext: telemetrytypes.FieldContextSpan,
+							},
+						},
+						Direction: qbtypes.OrderDirectionDesc,
+					},
+				},
+			},
+			wantSQL: "ORDER BY __result_0 desc",
+		},
+	}
+
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			err := c.operator.ParseExpression()
+			require.NoError(t, err)
+
+			filter := c.builderFilter
+			if filter == "" {
+				filter = "service.name = 'frontend'"
+			}
+
+			q, err := statementBuilder.Build(
+				context.Background(),
+				1747947419000,
+				1747983448000,
+				c.requestType,
+				c.operator,
+				&qbtypes.CompositeQuery{
+					Queries: []qbtypes.QueryEnvelope{
+						{
+							Type: qbtypes.QueryTypeBuilder,
+							Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+								Name:   "A",
+								Signal: telemetrytypes.SignalTraces,
+								Filter: &qbtypes.Filter{Expression: filter},
+							},
+						},
+					},
+				},
+			)
+
+			require.NoError(t, err)
+			require.Contains(t, q.Query, c.wantSQL)
+			for _, arg := range c.wantArgs {
+				require.Contains(t, q.Args, arg)
+			}
+		})
+	}
+}
+
+// TestTraceOperatorStatementBuilderDeduplicatesKeys checks that a trace
+// operator with the same field name listed twice in GroupBy (once with a
+// context, once without) ends up with a single column in the outer SELECT
+// and a single entry in GROUP BY.
+func TestTraceOperatorStatementBuilderDeduplicatesKeys(t *testing.T) {
+	statementBuilder := newTestTraceOperatorStatementBuilder(t)
+
+	operator := qbtypes.QueryBuilderTraceOperator{
+		Expression: "A",
+		Aggregations: []qbtypes.TraceAggregation{
+			{Expression: "count()"},
+		},
+		GroupBy: []qbtypes.GroupByKey{
+			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name:         "http.method",
+				FieldContext: telemetrytypes.FieldContextAttribute,
+			}},
+			// Same name, no context — should be merged with the entry above.
+			{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+				Name: "http.method",
+			}},
+		},
+	}
+	require.NoError(t, operator.ParseExpression())
+
+	q, err := statementBuilder.Build(
+		context.Background(),
+		1747947419000,
+		1747983448000,
+		qbtypes.RequestTypeScalar,
+		operator,
+		&qbtypes.CompositeQuery{
+			Queries: []qbtypes.QueryEnvelope{
+				{
+					Type: qbtypes.QueryTypeBuilder,
+					Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+						Name:   "A",
+						Signal: telemetrytypes.SignalTraces,
+						Filter: &qbtypes.Filter{Expression: "service.name = 'frontend'"},
+					},
+				},
+			},
+		},
+	)
+
+	require.NoError(t, err)
+	require.Equal(t, 1, strings.Count(q.Query, "AS `http.method`"),
+		"http.method should appear once in SELECT after dedup, got: %s", q.Query)
+	require.NotContains(t, q.Query, "`http.method`, `http.method`",
+		"GROUP BY should list http.method once after dedup, got: %s", q.Query)
+}

tests/fixtures/querier.py

@@ -413,6 +413,57 @@ def find_named_result(
     )
 
 
+def assert_scalar_value(
+    response: requests.Response,
+    name: str,
+    expected: Any,
+    *,
+    row: int = 0,
+    col: int = 0,
+) -> None:
+    """Assert that the named scalar result has `expected` at data[row][col]."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    assert result["data"][row][col] == expected, f"expected {expected} at [{row}][{col}], got {result['data'][row][col]}"
+
+
+def assert_grouped_scalar(
+    response: requests.Response,
+    name: str,
+    *,
+    expected_groups: int,
+    expected_columns: int,
+    last_col_value: Any | None = None,
+) -> None:
+    """Assert grouped scalar result has the expected column count and group count.
+    If `last_col_value` is set and there is exactly one group, also assert the
+    last column of that single row equals it (a common aggregation-value check)."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    columns = result["columns"]
+    rows = result["data"]
+    assert len(columns) == expected_columns, f"expected {expected_columns} columns, got {len(columns)}: {columns}"
+    assert len(rows) == expected_groups, f"expected {expected_groups} groups, got {len(rows)}: {rows}"
+    if last_col_value is not None and expected_groups == 1:
+        assert rows[0][-1] == last_col_value, f"expected last col {last_col_value}, got row {rows[0]}"
+
+
+def assert_raw_row_subset(
+    response: requests.Response,
+    name: str,
+    expected: dict[str, Any],
+    *,
+    row: int = 0,
+) -> None:
+    """Assert that the named raw result's rows[row]['data'] is a superset of `expected`."""
+    result = find_named_result(response.json()["data"]["data"]["results"], name)
+    assert result is not None, f"no result for query {name}"
+    rows = result["rows"]
+    assert rows is not None, f"no rows for query {name}"
+    data = rows[row]["data"]
+    assert expected.items() <= data.items(), f"expected subset {expected}, got data {data}"
+
+
 def build_scalar_query(
     name: str,
     signal: str,

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

@@ -9,8 +9,11 @@ import requests
 from fixtures import types
 from fixtures.auth import USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD
 from fixtures.querier import (
+    assert_grouped_scalar,
     assert_identical_query_response,
     assert_minutely_bucket_values,
+    assert_raw_row_subset,
+    assert_scalar_value,
     find_named_result,
     format_timestamp,
     generate_traces_with_corrupt_metadata,
@@ -693,6 +696,176 @@ def test_traces_list_with_corrupt_data(
                 assert data[key] == value
 
 
+def _expected_trace_subset(trace: Traces) -> dict[str, Any]:
+    return {
+        "duration_nano": trace.duration_nano,
+        "name": trace.name,
+        "parent_span_id": trace.parent_span_id,
+        "span_id": trace.span_id,
+        "timestamp": format_timestamp(trace.timestamp),
+        "trace_id": trace.trace_id,
+    }
+
+
+@pytest.mark.parametrize(
+    "payload_factory,request_type,assert_result",
+    [
+        # Case 1: CTE filter uses the deprecated intrinsic field `durationNano`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "3s"'},
+                    },
+                },
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "B",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "5s"'},
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A => B",
+                        "limit": 1,
+                    },
+                },
+            ],
+            "raw",
+            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
+            id="deprecated-intrinsic-filter",
+        ),
+        # Case 2: CTE filter uses the deprecated calculated field `responseStatusCode`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "filter": {"expression": 'responseStatusCode = "200"'},
+                    },
+                },
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "B",
+                        "signal": "traces",
+                        "filter": {"expression": 'durationNano = "5s"'},
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A => B",
+                        "limit": 1,
+                    },
+                },
+            ],
+            "raw",
+            lambda response, traces: assert_raw_row_subset(response, "C", _expected_trace_subset(traces[0])),
+            id="deprecated-calculated-filter",
+        ),
+        # Case 3: order by uses `count_` with fieldContext `span`, which has
+        # to be rewritten to the aggregation alias `span.count_`.
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "aggregations": [{"expression": "count()"}],
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A",
+                        "aggregations": [{"expression": "count()", "alias": "span.count_"}],
+                        "order": [{"key": {"name": "count_", "fieldContext": "span"}, "direction": "desc"}],
+                    },
+                },
+            ],
+            "scalar",
+            lambda response, traces: assert_scalar_value(response, "C", len(traces)),
+            id="context-prefixed-aggregation-alias-order",
+        ),
+        # Case 4: group by lists `cloud.provider` twice (once with a resource
+        # context, once without).
+        pytest.param(
+            lambda traces: [
+                {
+                    "type": "builder_query",
+                    "spec": {
+                        "name": "A",
+                        "signal": "traces",
+                        "disabled": True,
+                        "aggregations": [{"expression": "count()"}],
+                    },
+                },
+                {
+                    "type": "builder_trace_operator",
+                    "spec": {
+                        "name": "C",
+                        "expression": "A",
+                        "aggregations": [{"expression": "count()"}],
+                        "groupBy": [
+                            {"name": "cloud.provider", "fieldContext": "resource"},
+                            {"name": "cloud.provider"},
+                        ],
+                    },
+                },
+            ],
+            "scalar",
+            lambda response, traces: assert_grouped_scalar(response, "C", expected_groups=1, expected_columns=2, last_col_value=len(traces)),
+            id="duplicate-group-by-deduplicated",
+        ),
+    ],
+)
+def test_trace_operator_with_adjusted_keys(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_traces: Callable[[list[Traces]], None],
+    payload_factory: Callable[[list[Traces]], list[dict[str, Any]]],
+    request_type: str,
+    assert_result: Callable[[requests.Response, list[Traces]], None],
+) -> None:
+    """
+    Trace operators build a CTE per referenced builder query and an outer
+    query on top. Both layers need the same key adjustment as regular trace
+    queries, otherwise deprecated keys and context-prefixed aliases don't
+    resolve.
+    """
+    traces = generate_traces_with_corrupt_metadata()
+    insert_traces(traces)
+    payload = payload_factory(traces)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    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=request_type,
+        queries=payload,
+    )
+
+    assert response.status_code == HTTPStatus.OK, response.text
+    assert_result(response, traces)
+
+
 @pytest.mark.parametrize(
     "order_by,aggregation_alias,expected_status",
     [