feat: integrate v4 waterfall

frontend/src/api/trace/getTraceAggregations.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	TraceAggregationRequest,
+	TraceAggregationResponse,
+} from 'types/api/trace/getTraceAggregations';
+
+interface GetTraceAggregationsProps {
+	traceId: string;
+	aggregations: TraceAggregationRequest[];
+}
+
+const getTraceAggregations = async ({
+	traceId,
+	aggregations,
+}: GetTraceAggregationsProps): Promise<
+	SuccessResponseV2<TraceAggregationResponse[]>
+> => {
+	try {
+		const response = await axios.post(`/traces/${traceId}/aggregations`, {
+			aggregations,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data.aggregations,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default getTraceAggregations;

frontend/src/api/trace/getTraceV4.tsx

@@ -1,15 +1,15 @@
-import { ApiV3Instance as axios } from 'api';
+import { ApiV4Instance as axios } from 'api';
 import { omit } from 'lodash-es';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
+	GetTraceV4PayloadProps,
+	GetTraceV4SuccessResponse,
 	SpanV3,
 } from 'types/api/trace/getTraceV3';
 
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+const getTraceV4 = async (
+	props: GetTraceV4PayloadProps,
+): Promise<SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse> => {
 	let uncollapsedSpans = [...props.uncollapsedSpans];
 	if (!props.isSelectedSpanIDUnCollapsed) {
 		uncollapsedSpans = uncollapsedSpans.filter(
@@ -19,21 +19,21 @@ const getTraceV3 = async (
 		props.selectedSpanId &&
 		!uncollapsedSpans.includes(props.selectedSpanId)
 	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
+		// Backend only uses the uncollapsedSpans list (unlike V2 which also interprets
 		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
 		uncollapsedSpans.push(props.selectedSpanId);
 	}
-	const postData: GetTraceV3PayloadProps = {
+	const postData: GetTraceV4PayloadProps = {
 		...props,
 		uncollapsedSpans,
 		limit: 10000,
 	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
+	const response = await axios.post<GetTraceV4SuccessResponse>(
 		`/traces/${props.traceId}/waterfall`,
 		omit(postData, 'traceId'),
 	);
 
-	// V3 API wraps response in { status, data }
+	// API wraps response in { status, data }
 	const rawPayload = (response.data as any).data || response.data;
 
 	// Derive 'service.name' from resource for convenience — only derived field
@@ -43,7 +43,7 @@ const getTraceV3 = async (
 		timestamp: span.time_unix,
 	}));
 
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
+	// API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
 	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
 	// Convert by using the first span's timestamp as the base if there's a mismatch.
 	let { startTimestampMillis, endTimestampMillis } = rawPayload;
@@ -70,4 +70,4 @@ const getTraceV3 = async (
 	};
 };
 
-export default getTraceV3;
+export default getTraceV4;

frontend/src/components/FieldsSelector/AddedFields.tsx

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

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

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

frontend/src/components/FieldsSelector/FieldsSelector.tsx

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

frontend/src/components/FieldsSelector/OtherFields.tsx

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

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

@@ -1,111 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import AddedFields from '../AddedFields';
-
-// AddedFields assumes the caller has populated `key` (the parent
-// FieldsSelector does this via its normalization useMemo). Tests pre-populate
-// it directly.
-const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-	key: `${fieldContext}.${name}`,
-});
-
-describe('AddedFields — requiredFields', () => {
-	it('renders a Remove button for every field when no requiredFields are passed', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
-		);
-
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
-	});
-
-	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
-		const fields = [makeField('a'), makeField('b'), makeField('c')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a', 'log.c']}
-			/>,
-		);
-
-		// Only 'b' is removable.
-		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
-		expect(removeButtons).toHaveLength(1);
-	});
-
-	it('still renders the field name for required fields', () => {
-		const fields = [makeField('a'), makeField('b')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.a']}
-			/>,
-		);
-
-		expect(screen.getByText('a')).toBeInTheDocument();
-		expect(screen.getByText('b')).toBeInTheDocument();
-	});
-
-	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
-		// Two `body` fields with different contexts. requiredFields holds the
-		// canonical composite key only, so the attribute variant is deletable.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// One Remove button: the attribute variant. log variant is locked.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-
-	it('does not lock anything when a bare name is passed (composite key required)', () => {
-		// Bare `body` no longer matches — matching is composite-key only now.
-		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['body']}
-			/>,
-		);
-
-		// Neither variant locked → both removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
-	});
-
-	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
-		const fields = [makeField('body'), makeField('body_extra')];
-
-		render(
-			<AddedFields
-				inputValue=""
-				fields={fields}
-				onFieldsChange={jest.fn()}
-				requiredFields={['log.body']}
-			/>,
-		);
-
-		// 'log.body' locked, 'log.body_extra' removable.
-		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
-	});
-});

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

@@ -1,145 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
-import { IField } from 'types/api/logs/fields';
-
-import { useLogsTableColumns } from '../useLogsTableColumns';
-
-jest.mock('providers/Timezone', () => ({
-	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
-		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
-	}),
-}));
-
-const field = (name: string, type = ''): IField => ({
-	name,
-	type,
-	dataType: 'string',
-});
-
-describe('useLogsTableColumns — selectColumns-order respected', () => {
-	it('prepends stateIndicator and renders user fields in array order', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('c'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'c',
-			'a',
-			'b',
-		]);
-	});
-
-	it('slots body and timestamp at their position in the fields array', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('service.name'),
-					field('body', 'log'),
-					field('request.id'),
-					field('timestamp', 'log'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log.*'); contextless user fields collapse to bare name.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'service.name',
-			'log.body',
-			'request.id',
-			'log.timestamp',
-		]);
-	});
-
-	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('body', 'log'), field('body', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log.body'.
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.body',
-			'attribute.body',
-		]);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
-	});
-
-	it('applies the same distinct-column treatment to timestamp variants', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'log.timestamp',
-			'attribute.timestamp',
-		]);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
-	});
-
-	it('skips the synthetic "id" field name', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [field('id'), field('a'), field('b')],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual([
-			'state-indicator',
-			'a',
-			'b',
-		]);
-	});
-
-	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [
-					field('body', 'log'),
-					field('timestamp', 'log'),
-					field('user_field'),
-				],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log.body')?.canBeHidden).toBe(false);
-		expect(byId.get('log.body')?.enableRemove).toBe(false);
-		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
-		// User-added fields stay removable. User field has type='' so composite
-		// collapses to bare name.
-		expect(byId.get('user_field')?.enableRemove).toBe(true);
-	});
-
-	it('renders only the stateIndicator when fields is empty', () => {
-		const { result } = renderHook(() =>
-			useLogsTableColumns({
-				fields: [],
-				fontSize: FontSize.SMALL,
-			}),
-		);
-
-		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
-	});
-});

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

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

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

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

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

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

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

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

frontend/src/components/TanStackTableView/TanStackTable.tsx

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

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

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

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

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

frontend/src/components/TanStackTableView/types.ts

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

frontend/src/components/TanStackTableView/useColumnHandlers.ts

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

frontend/src/components/TanStackTableView/useColumnState.ts

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

frontend/src/constants/reactQueryKeys.ts

@@ -33,7 +33,8 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
+	GET_TRACE_V4_WATERFALL: 'GET_TRACE_V4_WATERFALL',
+	GET_TRACE_AGGREGATIONS: 'GET_TRACE_AGGREGATIONS',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

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

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

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

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

frontend/src/container/LogsExplorerList/index.tsx

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

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

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

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

@@ -67,23 +67,13 @@ describe('ensureLogsRequiredColumns', () => {
 		]);
 	});
 
-	it('collapses composite-key duplicates in the input', () => {
-		// Two identical `body` entries → deduped to one, then timestamp prepended.
+	it('does not duplicate if a required column appears twice in the input', () => {
+		// Tolerant of malformed input — invariant only adds *missing* required
+		// columns; it does not deduplicate existing entries (that's a separate
+		// concern, not its job).
 		const input = [BODY, BODY, ATTR_A];
 		const result = ensureLogsRequiredColumns(input);
-		expect(result).toStrictEqual([TIMESTAMP, BODY, ATTR_A]);
-		expect(result.filter((c) => c.name === 'body')).toHaveLength(1);
-	});
-
-	it('keeps same-name fields with different contexts as distinct columns', () => {
-		// Different composite keys → both legitimate, neither deduped.
-		const ATTR_BODY: TelemetryFieldKey = {
-			name: 'body',
-			signal: 'logs',
-			fieldContext: 'attribute',
-			fieldDataType: 'string',
-		};
-		const input = [TIMESTAMP, BODY, ATTR_BODY];
-		expect(ensureLogsRequiredColumns(input)).toStrictEqual(input);
+		expect(result.filter((c) => c.name === 'timestamp')).toHaveLength(1);
+		expect(result[0]).toStrictEqual(TIMESTAMP);
 	});
 });

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

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

frontend/src/container/OptionsMenu/constants.ts

@@ -2,7 +2,6 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { FontSize, OptionsQuery } from './types';
-import { buildCompositeKey } from './utils';
 
 export const URL_OPTIONS = 'options';
 
@@ -36,48 +35,22 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
-// Names that must always be present in logs selectColumns (writer invariant).
-const LOGS_REQUIRED_COLUMN_NAMES = defaultLogsSelectedColumns.map(
-	(c) => c.name,
-);
+const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
 
-// Composite keys (not bare names) so the picker locks ONLY the canonical
-// `log.body`/`log.timestamp` — a same-name variant like `attribute.body` stays
-// removable.
-export const LOGS_REQUIRED_COLUMNS = defaultLogsSelectedColumns.map((c) =>
-	buildCompositeKey(c.name, c.fieldContext),
-);
-
-// Drop composite-key duplicates (never legitimate — they only come from
-// corrupted state). Returns the same array reference when nothing to dedupe.
-export function dedupeColumnsByCompositeKey(
-	columns: TelemetryFieldKey[],
-): TelemetryFieldKey[] {
-	const seen = new Set<string>();
-	let hasDuplicate = false;
-	const deduped = columns.filter((c) => {
-		const key = buildCompositeKey(c.name, c.fieldContext);
-		if (seen.has(key)) {
-			hasDuplicate = true;
-			return false;
-		}
-		seen.add(key);
-		return true;
-	});
-	return hasDuplicate ? deduped : columns;
-}
-
-// Logs selectColumns invariant: no composite-key duplicates, and body +
-// timestamp always present. Applied at loader + writer boundaries.
+/**
+ * Always-on invariant: every logs selectColumns array must contain `body` and
+ * `timestamp`. Applied at both loader and writer boundaries so the picker, the
+ * table, and persisted state can never diverge into a "missing required
+ * column" state.
+ */
 export function ensureLogsRequiredColumns(
 	columns: TelemetryFieldKey[],
 ): TelemetryFieldKey[] {
-	const deduped = dedupeColumnsByCompositeKey(columns);
-	const missing = LOGS_REQUIRED_COLUMN_NAMES.filter(
-		(name) => !deduped.some((c) => c.name === name),
+	const missing = LOGS_REQUIRED_COLUMNS.filter(
+		(name) => !columns.some((c) => c.name === name),
 	);
 	if (missing.length === 0) {
-		return deduped;
+		return columns;
 	}
 	const defaultsByName = new Map(
 		defaultLogsSelectedColumns.map((c) => [c.name, c]),
@@ -85,7 +58,7 @@ export function ensureLogsRequiredColumns(
 	const prepended = missing
 		.map((name) => defaultsByName.get(name))
 		.filter((c): c is TelemetryFieldKey => c !== undefined);
-	return [...prepended, ...deduped];
+	return [...prepended, ...columns];
 }
 
 export const defaultTraceSelectedColumns: TelemetryFieldKey[] = [

frontend/src/container/OptionsMenu/types.ts

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

frontend/src/container/OptionsMenu/useOptionsMenu.ts

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

frontend/src/container/OptionsMenu/utils.ts

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

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -103,7 +103,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			domainToAdminEmail: domainToAdminEmail ?? {},
+			...(domainToAdminEmail && { domainToAdminEmail }),
 		};
 	}, [form]);
 
@@ -129,7 +129,7 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 
 		return {
 			...rest,
-			groupMappings: groupMappings ?? {},
+			...(groupMappings && { groupMappings }),
 		};
 	}, [form]);
 

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.utils.test.ts

@@ -1,144 +0,0 @@
-import { AuthtypesAuthNProviderDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	convertDomainMappingsToList,
-	convertDomainMappingsToRecord,
-	convertGroupMappingsToList,
-	convertGroupMappingsToRecord,
-	prepareInitialValues,
-} from './CreateEdit.utils';
-
-describe('convertGroupMappingsToRecord', () => {
-	it('returns undefined for an empty list', () => {
-		expect(convertGroupMappingsToRecord([])).toBeUndefined();
-	});
-
-	it('returns undefined when input is undefined', () => {
-		expect(convertGroupMappingsToRecord(undefined)).toBeUndefined();
-	});
-
-	it('converts entries to a Record', () => {
-		expect(
-			convertGroupMappingsToRecord([
-				{ groupName: 'admins', role: 'ADMIN' },
-				{ groupName: 'viewers', role: 'VIEWER' },
-			]),
-		).toStrictEqual({ admins: 'ADMIN', viewers: 'VIEWER' });
-	});
-
-	it('skips entries with missing groupName or role', () => {
-		expect(
-			convertGroupMappingsToRecord([
-				{ groupName: 'admins', role: 'ADMIN' },
-				{ groupName: '', role: 'VIEWER' },
-				{ role: 'EDITOR' },
-			]),
-		).toStrictEqual({ admins: 'ADMIN' });
-	});
-});
-
-describe('convertDomainMappingsToRecord', () => {
-	it('returns undefined for an empty list', () => {
-		expect(convertDomainMappingsToRecord([])).toBeUndefined();
-	});
-
-	it('returns undefined when input is undefined', () => {
-		expect(convertDomainMappingsToRecord(undefined)).toBeUndefined();
-	});
-
-	it('converts entries to a Record', () => {
-		expect(
-			convertDomainMappingsToRecord([
-				{ domain: 'example.com', adminEmail: 'admin@example.com' },
-				{ domain: 'corp.io', adminEmail: 'it@corp.io' },
-			]),
-		).toStrictEqual({
-			'example.com': 'admin@example.com',
-			'corp.io': 'it@corp.io',
-		});
-	});
-});
-
-describe('round-trip fidelity', () => {
-	it('Record → list → Record preserves group mappings', () => {
-		const original = { admins: 'ADMIN', devs: 'EDITOR', viewers: 'VIEWER' };
-		expect(
-			convertGroupMappingsToRecord(convertGroupMappingsToList(original)),
-		).toStrictEqual(original);
-	});
-
-	it('Record → list → Record preserves domain mappings', () => {
-		const original = {
-			'example.com': 'admin@example.com',
-			'corp.io': 'it@corp.io',
-		};
-		expect(
-			convertDomainMappingsToRecord(convertDomainMappingsToList(original)),
-		).toStrictEqual(original);
-	});
-});
-
-describe('prepareInitialValues', () => {
-	it('returns empty defaults when no record is provided', () => {
-		expect(prepareInitialValues(undefined)).toStrictEqual({
-			name: '',
-			ssoEnabled: false,
-			ssoType: '',
-		});
-	});
-
-	it('hydrates groupMappings Record into groupMappingsList for the form', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.saml,
-				roleMapping: {
-					defaultRole: 'VIEWER',
-					useRoleAttribute: false,
-					groupMappings: { admins: 'ADMIN', viewers: 'VIEWER' },
-				},
-			},
-		});
-
-		expect(result.roleMapping?.groupMappingsList).toStrictEqual([
-			{ groupName: 'admins', role: 'ADMIN' },
-			{ groupName: 'viewers', role: 'VIEWER' },
-		]);
-	});
-
-	it('hydrates domainToAdminEmail Record into domainToAdminEmailList for the form', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.google_auth,
-				googleAuthConfig: {
-					clientId: 'id',
-					clientSecret: 'secret',
-					domainToAdminEmail: { 'example.com': 'admin@example.com' },
-				},
-			},
-		});
-
-		expect(result.googleAuthConfig?.domainToAdminEmailList).toStrictEqual([
-			{ domain: 'example.com', adminEmail: 'admin@example.com' },
-		]);
-	});
-
-	it('sets groupMappingsList to empty array when roleMapping has no groupMappings', () => {
-		const result = prepareInitialValues({
-			id: 'domain-1',
-			name: 'example.com',
-			config: {
-				ssoEnabled: true,
-				ssoType: AuthtypesAuthNProviderDTO.oidc,
-				roleMapping: { defaultRole: 'VIEWER', useRoleAttribute: true },
-			},
-		});
-
-		expect(result.roleMapping?.groupMappingsList).toStrictEqual([]);
-	});
-});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.payload.test.tsx

@@ -1,169 +0,0 @@
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { rest, server } from 'mocks-server/server';
-
-import CreateEdit from '../CreateEdit/CreateEdit';
-import {
-	AUTH_DOMAINS_UPDATE_ENDPOINT,
-	mockDomainWithRoleMapping,
-	mockGoogleAuthWithWorkspaceGroups,
-	mockUpdateSuccessResponse,
-} from './mocks';
-
-// The real @signozhq/ui/button has internal effects that prevent form.validateFields()
-// from resolving inside act(). Mirror the pattern from SSOEnforcementToggle.test.tsx
-// which mocks @signozhq/ui/switch for the same reason.
-jest.mock('@signozhq/ui/button', () => ({
-	...jest.requireActual('@signozhq/ui/button'),
-	Button: ({
-		children,
-		onClick,
-		loading,
-		disabled,
-		'aria-label': ariaLabel,
-		prefix,
-		suffix,
-	}: {
-		children?: React.ReactNode;
-		onClick?: React.MouseEventHandler<HTMLButtonElement>;
-		loading?: boolean;
-		disabled?: boolean;
-		'aria-label'?: string;
-		prefix?: React.ReactNode;
-		suffix?: React.ReactNode;
-	}) => (
-		<button
-			type="button"
-			onClick={onClick}
-			disabled={disabled || loading}
-			aria-label={ariaLabel}
-		>
-			{prefix}
-			{children}
-			{suffix}
-		</button>
-	),
-}));
-
-describe('CreateEdit — save payload correctness', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('sends groupMappings: {} when all group mappings are deleted', async () => {
-		let capturedPayload: unknown = null;
-
-		server.use(
-			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-			}),
-		);
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockDomainWithRoleMapping}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		// Open the Role Mapping collapse (Ant Design Collapse responds to click events)
-		fireEvent.click(screen.getByText(/role mapping \(advanced\)/i));
-
-		// Wait for the 3 group mapping rows to appear
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(3),
-		);
-
-		// Delete each row; re-query after each removal
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(2),
-		);
-
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.getAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(1),
-		);
-
-		fireEvent.click(
-			screen.getAllByRole('button', { name: /remove mapping/i })[0],
-		);
-		await waitFor(() =>
-			expect(
-				screen.queryAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(0),
-		);
-
-		// Submit — MSW intercepts the PUT request
-		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-
-		await waitFor(() => expect(capturedPayload).not.toBeNull());
-
-		expect(capturedPayload).toMatchObject({
-			config: expect.objectContaining({
-				roleMapping: expect.objectContaining({ groupMappings: {} }),
-			}),
-		});
-	});
-
-	it('sends domainToAdminEmail: {} when all domain mappings are deleted', async () => {
-		let capturedPayload: unknown = null;
-
-		server.use(
-			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
-			}),
-		);
-
-		render(
-			<CreateEdit
-				isCreate={false}
-				record={mockGoogleAuthWithWorkspaceGroups}
-				onClose={jest.fn()}
-			/>,
-		);
-
-		// Open the Google Workspace Groups collapse
-		fireEvent.click(screen.getByText(/google workspace groups/i));
-
-		// Wait for the single domain mapping row
-		await waitFor(() =>
-			expect(
-				screen.getByRole('button', { name: /remove mapping/i }),
-			).toBeInTheDocument(),
-		);
-
-		// Delete the row
-		fireEvent.click(screen.getByRole('button', { name: /remove mapping/i }));
-		await waitFor(() =>
-			expect(
-				screen.queryAllByRole('button', { name: /remove mapping/i }),
-			).toHaveLength(0),
-		);
-
-		// Submit
-		fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-
-		await waitFor(() => expect(capturedPayload).not.toBeNull());
-
-		expect(capturedPayload).toMatchObject({
-			config: expect.objectContaining({
-				googleAuthConfig: expect.objectContaining({
-					domainToAdminEmail: {},
-				}),
-			}),
-		});
-	});
-});

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

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

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

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

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

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

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

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

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

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

frontend/src/hooks/trace/__tests__/useGetTraceAggregations.test.tsx

@@ -0,0 +1,64 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import getTraceAggregations from 'api/trace/getTraceAggregations';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+import useGetTraceAggregations from '../useGetTraceAggregations';
+
+jest.mock('api/trace/getTraceAggregations', () => ({
+	__esModule: true,
+	default: jest.fn().mockResolvedValue({ httpStatusCode: 200, data: [] }),
+}));
+
+const mockApi = getTraceAggregations as jest.Mock;
+
+const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
+	const client = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};
+
+const aggregations = [
+	{ field: { name: 'service.name' }, aggregation: 'execution_time_percentage' },
+] as never;
+
+describe('useGetTraceAggregations', () => {
+	beforeEach(() => mockApi.mockClear());
+
+	it('fetches when enabled with a traceId and aggregations', async () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations, enabled: true }),
+			{ wrapper },
+		);
+		await waitFor(() => expect(mockApi).toHaveBeenCalledTimes(1));
+		expect(mockApi).toHaveBeenCalledWith({ traceId: 't1', aggregations });
+	});
+
+	it('does not fetch when disabled', () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations, enabled: false }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch without a traceId', () => {
+		renderHook(
+			() => useGetTraceAggregations({ traceId: '', aggregations, enabled: true }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+
+	it('does not fetch with no aggregations requested', () => {
+		renderHook(
+			() =>
+				useGetTraceAggregations({ traceId: 't1', aggregations: [], enabled: true }),
+			{ wrapper },
+		);
+		expect(mockApi).not.toHaveBeenCalled();
+	});
+});

frontend/src/hooks/trace/useGetTraceAggregations.tsx

@@ -0,0 +1,37 @@
+import { useQuery, UseQueryResult } from 'react-query';
+import getTraceAggregations from 'api/trace/getTraceAggregations';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { SuccessResponseV2 } from 'types/api';
+import {
+	TraceAggregationRequest,
+	TraceAggregationResponse,
+} from 'types/api/trace/getTraceAggregations';
+
+interface UseGetTraceAggregationsProps {
+	traceId: string;
+	aggregations: TraceAggregationRequest[];
+	enabled: boolean;
+}
+
+type UseGetTraceAggregations = UseQueryResult<
+	SuccessResponseV2<TraceAggregationResponse[]>
+>;
+
+/**
+ * Fetches trace aggregations on demand — gate via `enabled` so the request
+ * fires only when the Analytics panel is open. The query key includes the
+ * requested fields, so changing the color-by field refetches.
+ */
+const useGetTraceAggregations = ({
+	traceId,
+	aggregations,
+	enabled,
+}: UseGetTraceAggregationsProps): UseGetTraceAggregations =>
+	useQuery({
+		queryFn: () => getTraceAggregations({ traceId, aggregations }),
+		queryKey: [REACT_QUERY_KEY.GET_TRACE_AGGREGATIONS, traceId, aggregations],
+		enabled: enabled && !!traceId && aggregations.length > 0,
+		refetchOnWindowFocus: false,
+	});
+
+export default useGetTraceAggregations;

frontend/src/hooks/trace/useGetTraceV4.tsx

@@ -1,30 +1,29 @@
 import { useQuery, UseQueryResult } from 'react-query';
-import getTraceV3 from 'api/trace/getTraceV3';
+import getTraceV4 from 'api/trace/getTraceV4';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
+	GetTraceV4PayloadProps,
+	GetTraceV4SuccessResponse,
 } from 'types/api/trace/getTraceV3';
 
-const useGetTraceV3 = (props: GetTraceV3PayloadProps): UseTraceV3 =>
+const useGetTraceV4 = (props: GetTraceV4PayloadProps): UseTraceV4 =>
 	useQuery({
-		queryFn: () => getTraceV3(props),
+		queryFn: () => getTraceV4(props),
 		queryKey: [
-			REACT_QUERY_KEY.GET_TRACE_V3_WATERFALL,
+			REACT_QUERY_KEY.GET_TRACE_V4_WATERFALL,
 			props.traceId,
 			props.selectedSpanId,
 			props.isSelectedSpanIDUnCollapsed,
-			props.aggregations,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,
 		refetchOnWindowFocus: false,
 	});
 
-type UseTraceV3 = UseQueryResult<
-	SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse,
+type UseTraceV4 = UseQueryResult<
+	SuccessResponse<GetTraceV4SuccessResponse> | ErrorResponse,
 	unknown
 >;
 
-export default useGetTraceV3;
+export default useGetTraceV4;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.module.scss

@@ -33,6 +33,15 @@
 	scrollbar-width: none;
 }
 
+.state {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	min-height: 120px;
+	padding: 24px 12px;
+}
+
 .list {
 	display: grid;
 	grid-template-columns: auto auto 1fr;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -1,15 +1,21 @@
 import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import {
 	TabsContent,
 	TabsList,
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
+import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { DetailsHeader } from 'components/DetailsPanel';
+import Spinner from 'components/Spinner';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useGetTraceAggregations from 'hooks/trace/useGetTraceAggregations';
 import { generateColorPair } from 'pages/TraceDetailsV3/utils/generateColorPair';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import { TraceAggregationRequest } from 'types/api/trace/getTraceAggregations';
+import { TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
 
 import { useTraceStore } from '../../stores/traceStore';
 import {
@@ -35,10 +41,29 @@ function AnalyticsPanel({
 	onClose,
 	onTabChange,
 }: AnalyticsPanelProps): JSX.Element | null {
-	const aggregations = useTraceStore((s) => s.aggregations);
-	const colorByFieldName = useTraceStore((s) => s.colorByField.name);
+	const { id: traceId } = useParams<TraceDetailV3URLProps>();
+	const colorByField = useTraceStore((s) => s.colorByField);
+	const colorByFieldName = colorByField.name;
 	const isDarkMode = useIsDarkMode();
 
+	// Fetch exec-time % + span count for the current color-by field only, and
+	// only while the panel is open. Changing the field refetches via the key.
+	const aggregationsRequest = useMemo<TraceAggregationRequest[]>(
+		() => [
+			{ field: colorByField, aggregation: AGGREGATIONS.EXEC_TIME_PCT },
+			{ field: colorByField, aggregation: AGGREGATIONS.SPAN_COUNT },
+		],
+		[colorByField],
+	);
+
+	const { data, isLoading, isError } = useGetTraceAggregations({
+		traceId: traceId || '',
+		aggregations: aggregationsRequest,
+		enabled: isOpen,
+	});
+
+	const aggregations = data?.data;
+
 	const execTimePct = useMemo(
 		() =>
 			findAggregationMap(
@@ -93,6 +118,33 @@ function AnalyticsPanel({
 		return null;
 	}
 
+	// Loading / error / empty render inside the tab content so the tabs stay
+	// visible. Returns null when there are rows to show.
+	const renderState = (rowCount: number): JSX.Element | null => {
+		if (isLoading) {
+			return (
+				<div className={styles.state}>
+					<Spinner height="auto" />
+				</div>
+			);
+		}
+		if (isError) {
+			return (
+				<div className={styles.state}>
+					<Typography.Text>Couldn&apos;t load analytics</Typography.Text>
+				</div>
+			);
+		}
+		if (rowCount === 0) {
+			return (
+				<div className={styles.state}>
+					<Typography.Text>No data for {colorByFieldName}</Typography.Text>
+				</div>
+			);
+		}
+		return null;
+	};
+
 	return (
 		<FloatingPanel
 			isOpen
@@ -132,65 +184,69 @@ function AnalyticsPanel({
 
 					<div className={styles.tabsScroll}>
 						<TabsContent value="exec-time">
-							<div className={styles.list}>
-								{execTimeRows.map((row) => (
-									<>
-										<div
-											key={`${row.group}-dot`}
-											className={styles.dot}
-											style={{ backgroundColor: row.color }}
-										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
-											{row.group}
-										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
-												<div
-													className={styles.barFill}
-													style={{
-														width: `${Math.min(row.percentage, 100)}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className={cx(styles.value, styles.valueWide)}>
-												{row.percentage.toFixed(2)}%
+							{renderState(execTimeRows.length) ?? (
+								<div className={styles.list}>
+									{execTimeRows.map((row) => (
+										<>
+											<div
+												key={`${row.group}-dot`}
+												className={styles.dot}
+												style={{ backgroundColor: row.color }}
+											/>
+											<span key={`${row.group}-name`} className={styles.serviceName}>
+												{row.group}
 											</span>
-										</div>
-									</>
-								))}
-							</div>
+											<div key={`${row.group}-bar`} className={styles.barCell}>
+												<div className={styles.bar}>
+													<div
+														className={styles.barFill}
+														style={{
+															width: `${Math.min(row.percentage, 100)}%`,
+															backgroundColor: row.color,
+														}}
+													/>
+												</div>
+												<span className={cx(styles.value, styles.valueWide)}>
+													{row.percentage.toFixed(2)}%
+												</span>
+											</div>
+										</>
+									))}
+								</div>
+							)}
 						</TabsContent>
 
 						<TabsContent value="spans">
-							<div className={styles.list}>
-								{spanCountRows.map((row) => (
-									<>
-										<div
-											key={`${row.group}-dot`}
-											className={styles.dot}
-											style={{ backgroundColor: row.color }}
-										/>
-										<span key={`${row.group}-name`} className={styles.serviceName}>
-											{row.group}
-										</span>
-										<div key={`${row.group}-bar`} className={styles.barCell}>
-											<div className={styles.bar}>
-												<div
-													className={styles.barFill}
-													style={{
-														width: `${(row.count / row.max) * 100}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className={cx(styles.value, styles.valueNarrow)}>
-												{row.count}
+							{renderState(spanCountRows.length) ?? (
+								<div className={styles.list}>
+									{spanCountRows.map((row) => (
+										<>
+											<div
+												key={`${row.group}-dot`}
+												className={styles.dot}
+												style={{ backgroundColor: row.color }}
+											/>
+											<span key={`${row.group}-name`} className={styles.serviceName}>
+												{row.group}
 											</span>
-										</div>
-									</>
-								))}
-							</div>
+											<div key={`${row.group}-bar`} className={styles.barCell}>
+												<div className={styles.bar}>
+													<div
+														className={styles.barFill}
+														style={{
+															width: `${(row.count / row.max) * 100}%`,
+															backgroundColor: row.color,
+														}}
+													/>
+												</div>
+												<span className={cx(styles.value, styles.valueNarrow)}>
+													{row.count}
+												</span>
+											</div>
+										</>
+									))}
+								</div>
+							)}
 						</TabsContent>
 					</div>
 				</TabsRoot>

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/__tests__/AnalyticsPanel.test.tsx

@@ -0,0 +1,142 @@
+import { screen } from '@testing-library/react';
+import useGetTraceAggregations from 'hooks/trace/useGetTraceAggregations';
+import { render } from 'tests/test-utils';
+
+import { DEFAULT_COLOR_BY_FIELD } from '../../../constants';
+import { useTraceStore } from '../../../stores/traceStore';
+import AnalyticsPanel from '../AnalyticsPanel';
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): { id: string } => ({ id: 'trace-123' }),
+}));
+
+jest.mock('hooks/trace/useGetTraceAggregations', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+// Isolate the panel's own logic from the floating-panel chrome.
+jest.mock('periscope/components/FloatingPanel', () => ({
+	__esModule: true,
+	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+jest.mock('components/DetailsPanel', () => ({
+	__esModule: true,
+	DetailsHeader: (): JSX.Element => <div data-testid="details-header" />,
+}));
+jest.mock('components/Spinner', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="spinner" />,
+}));
+
+const mockHook = useGetTraceAggregations as jest.Mock;
+
+const noop = (): void => undefined;
+
+const renderPanel = (isOpen = true): ReturnType<typeof render> =>
+	render(<AnalyticsPanel isOpen={isOpen} onClose={noop} onTabChange={noop} />);
+
+const aggregationsResponse = {
+	httpStatusCode: 200,
+	data: [
+		{
+			field: { name: 'service.name' },
+			aggregation: 'execution_time_percentage',
+			value: { api: 80, db: 20 },
+		},
+		{
+			field: { name: 'service.name' },
+			aggregation: 'span_count',
+			value: { api: 5, db: 2 },
+		},
+	],
+};
+
+describe('AnalyticsPanel', () => {
+	beforeEach(() => {
+		mockHook.mockReset();
+		useTraceStore.setState({ colorByField: DEFAULT_COLOR_BY_FIELD });
+	});
+
+	it('renders nothing when closed and does not enable the fetch', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: false,
+		});
+		const { container } = renderPanel(false);
+		expect(container).toBeEmptyDOMElement();
+		expect(mockHook).toHaveBeenCalledWith(
+			expect.objectContaining({ enabled: false }),
+		);
+	});
+
+	it('requests both aggregations for the current color-by field when open', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+		});
+		renderPanel();
+		expect(mockHook).toHaveBeenCalledWith(
+			expect.objectContaining({
+				traceId: 'trace-123',
+				enabled: true,
+				aggregations: [
+					{
+						field: DEFAULT_COLOR_BY_FIELD,
+						aggregation: 'execution_time_percentage',
+					},
+					{ field: DEFAULT_COLOR_BY_FIELD, aggregation: 'span_count' },
+				],
+			}),
+		);
+	});
+
+	it('shows the loading state with the tabs still visible', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: true,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+		// tabs stay visible while loading
+		expect(screen.getByText('% exec time')).toBeInTheDocument();
+		expect(screen.getByText('Spans')).toBeInTheDocument();
+	});
+
+	it('shows an error state when the request fails', () => {
+		mockHook.mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: true,
+		});
+		renderPanel();
+		expect(screen.getByText(/couldn't load analytics/i)).toBeInTheDocument();
+	});
+
+	it('renders rows for the current field on success', () => {
+		mockHook.mockReturnValue({
+			data: aggregationsResponse,
+			isLoading: false,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByText('api')).toBeInTheDocument();
+		expect(screen.getByText('80.00%')).toBeInTheDocument();
+	});
+
+	it('shows an empty state when the field has no data', () => {
+		mockHook.mockReturnValue({
+			data: { httpStatusCode: 200, data: [] },
+			isLoading: false,
+			isError: false,
+		});
+		renderPanel();
+		expect(screen.getByText(/no data for service.name/i)).toBeInTheDocument();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from 'antd';
 import { AxiosError } from 'axios';
 import Spinner from 'components/Spinner';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetTraceV3SuccessResponse, SpanV3 } from 'types/api/trace/getTraceV3';
+import { GetTraceV4SuccessResponse, SpanV3 } from 'types/api/trace/getTraceV3';
 
 import { TraceWaterfallStates } from './constants';
 import Error from './TraceWaterfallStates/Error/Error';
@@ -22,7 +22,7 @@ interface ITraceWaterfallProps {
 	localUncollapsedNodes: Set<string>;
 	setLocalUncollapsedNodes: Dispatch<SetStateAction<Set<string>>>;
 	traceData:
-		| SuccessResponse<GetTraceV3SuccessResponse, unknown>
+		| SuccessResponse<GetTraceV4SuccessResponse, unknown>
 		| ErrorResponse
 		| undefined;
 	isFetchingTraceData: boolean;

frontend/src/pages/TraceDetailsV3/__tests__/getAvailableColorByFieldNames.test.ts

@@ -0,0 +1,34 @@
+import { SpanV3 } from 'types/api/trace/getTraceV3';
+
+import { getAvailableColorByFieldNames } from '../utils';
+
+const span = (partial: Partial<SpanV3>): SpanV3 =>
+	({ level: 1, resource: {}, attributes: {}, ...partial }) as SpanV3;
+
+describe('getAvailableColorByFieldNames', () => {
+	it('returns [] for an empty span set', () => {
+		expect(getAvailableColorByFieldNames([])).toStrictEqual([]);
+	});
+
+	it('offers a field if any span carries it, in option order', () => {
+		const spans = [
+			span({ resource: { 'service.name': 'api' } }),
+			// k8s.node.name lives on a non-root span — still offered
+			span({ resource: { 'k8s.node.name': 'node-1' } }),
+		];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual([
+			'service.name',
+			'k8s.node.name',
+		]);
+	});
+
+	it('reads from attributes when the key is not on resource', () => {
+		const spans = [span({ attributes: { 'host.name': 'box-1' } })];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual(['host.name']);
+	});
+
+	it('does not offer fields no span carries', () => {
+		const spans = [span({ resource: { 'service.name': 'api' } })];
+		expect(getAvailableColorByFieldNames(spans)).toStrictEqual(['service.name']);
+	});
+});

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -8,23 +8,17 @@ import { Collapse } from 'antd';
 import { useDetailsPanel } from 'components/DetailsPanel';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import useGetTraceV3 from 'hooks/trace/useGetTraceV3';
+import useGetTraceV4 from 'hooks/trace/useGetTraceV4';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import NoData from 'pages/TraceDetailV2/NoData/NoData';
 import { ResizableBox } from 'periscope/components/ResizableBox';
-import {
-	SpanV3,
-	TraceDetailV3URLProps,
-	WaterfallAggregationRequest,
-} from 'types/api/trace/getTraceV3';
+import { SpanV3, TraceDetailV3URLProps } from 'types/api/trace/getTraceV3';
 
-import { COLOR_BY_FIELDS } from './constants';
 import { TraceDetailEventKeys, TraceDetailEvents } from './events';
 import { useTraceDetailLogEvent } from './hooks/useTraceDetailLogEvent';
 import TraceStoreSync from './stores/TraceStoreSync';
 import { useTraceStore } from './stores/traceStore';
-import { AGGREGATIONS } from './utils/aggregations';
 import { SpanDetailVariant } from './SpanDetailsPanel/constants';
 import SpanDetailsPanel from './SpanDetailsPanel/SpanDetailsPanel';
 import type { TraceMetadataForHeader } from './TraceDetailsHeader/TraceDetailsHeader';
@@ -34,6 +28,7 @@ import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
 import TraceWaterfall from './TraceWaterfall/TraceWaterfall';
 import { IInterestedSpan } from './TraceWaterfall/types';
 import { getAncestorSpanIds } from './TraceWaterfall/utils';
+import { getAvailableColorByFieldNames } from './utils';
 
 import cx from 'classnames';
 
@@ -103,17 +98,6 @@ function TraceDetailsV3(): JSX.Element {
 		setInterestedSpanId({ spanId, isUncollapsed: true });
 	}, [urlQuery]);
 
-	// Hardcoded for now — fetch aggregations for all 3 candidate color-by fields
-	// upfront so a future color-by-field switch doesn't need to refetch.
-	const waterfallAggregationsRequest = useMemo<WaterfallAggregationRequest[]>(
-		() =>
-			COLOR_BY_FIELDS.flatMap((field) => [
-				{ field, aggregation: AGGREGATIONS.EXEC_TIME_PCT },
-				{ field, aggregation: AGGREGATIONS.SPAN_COUNT },
-			]),
-		[],
-	);
-
 	// Once all spans are loaded (frontend mode), freeze query params so
 	// subsequent interestedSpanId changes don't trigger unnecessary refetches.
 	const fullDataLoadedRef = useRef(false);
@@ -121,7 +105,6 @@ function TraceDetailsV3(): JSX.Element {
 		selectedSpanId: interestedSpanId.spanId,
 		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 		uncollapsedSpans: uncollapsedNodes,
-		aggregations: waterfallAggregationsRequest,
 	});
 
 	const queryParams = fullDataLoadedRef.current
@@ -130,19 +113,17 @@ function TraceDetailsV3(): JSX.Element {
 				selectedSpanId: interestedSpanId.spanId,
 				isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 				uncollapsedSpans: uncollapsedNodes,
-				aggregations: waterfallAggregationsRequest,
 			};
 
 	const {
 		data: traceData,
 		isFetching: isFetchingTraceData,
 		error: errorFetchingTraceData,
-	} = useGetTraceV3({
+	} = useGetTraceV4({
 		traceId,
 		uncollapsedSpans: queryParams.uncollapsedSpans,
 		selectedSpanId: queryParams.selectedSpanId,
 		isSelectedSpanIDUnCollapsed: queryParams.isSelectedSpanIDUnCollapsed,
-		aggregations: queryParams.aggregations,
 	});
 
 	const allSpans = traceData?.payload?.spans || [];
@@ -150,6 +131,13 @@ function TraceDetailsV3(): JSX.Element {
 	const isFullDataLoaded =
 		totalSpansCount > 0 && totalSpansCount <= allSpans.length;
 
+	// Color-by options, gated on fields in loaded spans. Resource attrs are
+	// trace-wide, so any window has the full set — no need to accumulate.
+	const availableColorByFields = useMemo(() => {
+		const spans = traceData?.payload?.spans;
+		return spans?.length ? getAvailableColorByFieldNames(spans) : undefined;
+	}, [traceData?.payload?.spans]);
+
 	// Lock the ref once we confirm all data is loaded
 	if (isFullDataLoaded && !fullDataLoadedRef.current) {
 		fullDataLoadedRef.current = true;
@@ -157,7 +145,6 @@ function TraceDetailsV3(): JSX.Element {
 			selectedSpanId: interestedSpanId.spanId,
 			isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
 			uncollapsedSpans: uncollapsedNodes,
-			aggregations: waterfallAggregationsRequest,
 		};
 	}
 
@@ -382,7 +369,7 @@ function TraceDetailsV3(): JSX.Element {
 	);
 
 	return (
-		<TraceStoreSync aggregations={traceData?.payload?.aggregations}>
+		<TraceStoreSync availableColorByFields={availableColorByFields}>
 			<div className={styles.root}>
 				<TraceDetailsHeader
 					filterMetadata={filterMetadata}

frontend/src/pages/TraceDetailsV3/stores/TraceStoreSync.tsx

@@ -2,21 +2,20 @@ import { ReactNode, useEffect } from 'react';
 import { useMutation } from 'react-query';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import { useAppContext } from 'providers/App/App';
-import { WaterfallAggregationResponse } from 'types/api/trace/getTraceV3';
 
 import {
-	setTraceStoreAggregations,
+	setTraceStoreAvailableColorByFields,
 	setTraceStoreCallbacks,
 	setTraceStoreUserPreferences,
 } from './traceStore';
 
 interface TraceStoreSyncProps {
-	aggregations: WaterfallAggregationResponse[] | undefined;
+	availableColorByFields: string[] | undefined;
 	children: ReactNode;
 }
 
 /**
- * Bridges React-managed inputs (the `aggregations` prop, `userPreferences`
+ * Bridges React-managed inputs (`availableColorByFields`, `userPreferences`
  * from AppContext, and the user-pref mutation hook) into the Zustand store.
  *
  * Renders nothing until `userPreferences` resolves so the flamegraph never
@@ -25,15 +24,15 @@ interface TraceStoreSyncProps {
  * is logged in, so this gate is usually already settled by mount time.
  */
 function TraceStoreSync({
-	aggregations,
+	availableColorByFields,
 	children,
 }: TraceStoreSyncProps): JSX.Element | null {
 	const { userPreferences, updateUserPreferenceInContext } = useAppContext();
 	const { mutate: mutateUserPreference } = useMutation(updateUserPreferenceAPI);
 
 	useEffect(() => {
-		setTraceStoreAggregations(aggregations);
-	}, [aggregations]);
+		setTraceStoreAvailableColorByFields(availableColorByFields);
+	}, [availableColorByFields]);
 
 	useEffect(() => {
 		setTraceStoreUserPreferences(userPreferences ?? null);

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

@@ -0,0 +1,71 @@
+import { USER_PREFERENCES } from 'constants/userPreferences';
+import { UserPreference } from 'types/api/preferences/preference';
+
+import { COLOR_BY_OPTIONS, DEFAULT_COLOR_BY_FIELD } from '../../constants';
+import {
+	setTraceStoreAvailableColorByFields,
+	setTraceStoreUserPreferences,
+	useTraceStore,
+} from '../traceStore';
+
+const colorByPref = (fieldName: string): UserPreference[] => [
+	{
+		name: USER_PREFERENCES.SPAN_DETAILS_COLOR_BY_ATTRIBUTE,
+		value: fieldName,
+	} as UserPreference,
+];
+
+const optionNames = (): string[] =>
+	useTraceStore.getState().availableColorByOptions.map((o) => o.field.name);
+
+describe('traceStore color-by gating', () => {
+	beforeEach(() => {
+		useTraceStore.setState({
+			availableColorByFieldNames: undefined,
+			userPreferences: null,
+			colorByField: DEFAULT_COLOR_BY_FIELD,
+			availableColorByOptions: COLOR_BY_OPTIONS.filter(
+				(o) => o.field.name === DEFAULT_COLOR_BY_FIELD.name,
+			),
+		});
+	});
+
+	it('offers only the default field before spans load', () => {
+		expect(optionNames()).toStrictEqual([DEFAULT_COLOR_BY_FIELD.name]);
+		expect(useTraceStore.getState().colorByField).toStrictEqual(
+			DEFAULT_COLOR_BY_FIELD,
+		);
+	});
+
+	it('offers the default plus any field present on loaded spans', () => {
+		setTraceStoreAvailableColorByFields(['host.name']);
+		expect(optionNames()).toStrictEqual([
+			DEFAULT_COLOR_BY_FIELD.name,
+			'host.name',
+		]);
+	});
+
+	it('honors the persisted color-by field when it is available', () => {
+		setTraceStoreAvailableColorByFields(['host.name']);
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		expect(useTraceStore.getState().colorByField.name).toBe('host.name');
+	});
+
+	it('falls back to the default when the persisted field is not available', () => {
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		setTraceStoreAvailableColorByFields(['k8s.node.name']);
+		expect(useTraceStore.getState().colorByField.name).toBe(
+			DEFAULT_COLOR_BY_FIELD.name,
+		);
+		expect(optionNames()).toStrictEqual([
+			DEFAULT_COLOR_BY_FIELD.name,
+			'k8s.node.name',
+		]);
+	});
+
+	it('trusts the persisted field while spans are still loading', () => {
+		// availableColorByFieldNames stays undefined (loading) — do not flip to default
+		setTraceStoreUserPreferences(colorByPref('host.name'));
+		expect(useTraceStore.getState().colorByField.name).toBe('host.name');
+	});
+});

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

@@ -1,7 +1,6 @@
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import { UserPreference } from 'types/api/preferences/preference';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { WaterfallAggregationResponse } from 'types/api/trace/getTraceV3';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { create } from 'zustand';
 
@@ -11,10 +10,6 @@ import {
 	ColorByOption,
 	DEFAULT_COLOR_BY_FIELD,
 } from '../constants';
-import {
-	AGGREGATIONS,
-	getAggregationMap as findAggregationMap,
-} from '../utils/aggregations';
 import { toTelemetryFieldKey } from '../utils/previewFields';
 
 interface MutateOptions {
@@ -30,7 +25,9 @@ type MutateUserPreference = (
 
 interface TraceStoreState {
 	// --- Inputs synced from React layer via TraceStoreSync ---
-	aggregations: WaterfallAggregationResponse[] | undefined;
+	// Fields present on loaded spans; gates color-by options. `undefined` while
+	// loading so we keep trusting the persisted field.
+	availableColorByFieldNames: string[] | undefined;
 	userPreferences: UserPreference[] | null;
 	updateUserPreferenceInContext: UpdateUserPreferenceInContext | null;
 	mutateUserPreference: MutateUserPreference | null;
@@ -41,9 +38,7 @@ interface TraceStoreState {
 	previewFields: TelemetryFieldKey[];
 
 	// --- Setters used only by TraceStoreSync ---
-	setAggregations: (
-		aggregations: WaterfallAggregationResponse[] | undefined,
-	) => void;
+	setAvailableColorByFields: (fieldNames: string[] | undefined) => void;
 	setUserPreferences: (userPreferences: UserPreference[] | null) => void;
 	setCallbacks: (callbacks: {
 		updateUserPreferenceInContext: UpdateUserPreferenceInContext;
@@ -71,23 +66,18 @@ function getPersistedColorByField(
 
 /**
  * Re-derives `colorByField` + `availableColorByOptions` from the two inputs.
- * Preserves the "trust persisted while aggregations load" rule so the
- * flamegraph doesn't repaint when the aggregations response arrives.
+ * Preserves the "trust persisted while spans load" rule so the flamegraph
+ * doesn't repaint when the waterfall response arrives.
  */
 function deriveColorState(
-	aggregations: WaterfallAggregationResponse[] | undefined,
+	availableColorByFieldNames: string[] | undefined,
 	userPreferences: UserPreference[] | null,
 ): Pick<TraceStoreState, 'colorByField' | 'availableColorByOptions'> {
 	const isFieldAvailable = (fieldName: string): boolean => {
 		if (fieldName === DEFAULT_COLOR_BY_FIELD.name) {
 			return true;
 		}
-		const map = findAggregationMap(
-			aggregations,
-			AGGREGATIONS.EXEC_TIME_PCT,
-			fieldName,
-		);
-		return !!map && Object.keys(map).length > 0;
+		return !!availableColorByFieldNames?.includes(fieldName);
 	};
 
 	const availableColorByOptions = COLOR_BY_OPTIONS.filter((opt) =>
@@ -95,10 +85,10 @@ function deriveColorState(
 	);
 
 	const persistedColorByField = getPersistedColorByField(userPreferences);
-	// While aggregations are loading, trust persisted — don't flip to default
-	// just because we haven't confirmed availability yet.
+	// While loading, trust persisted — don't flip to default prematurely.
 	const colorByField =
-		aggregations === undefined || isFieldAvailable(persistedColorByField.name)
+		availableColorByFieldNames === undefined ||
+		isFieldAvailable(persistedColorByField.name)
 			? persistedColorByField
 			: DEFAULT_COLOR_BY_FIELD;
 
@@ -134,7 +124,7 @@ function derivePreviewFields(
 }
 
 export const useTraceStore = create<TraceStoreState>()((set, get) => ({
-	aggregations: undefined,
+	availableColorByFieldNames: undefined,
 	userPreferences: null,
 	updateUserPreferenceInContext: null,
 	mutateUserPreference: null,
@@ -145,19 +135,19 @@ export const useTraceStore = create<TraceStoreState>()((set, get) => ({
 	),
 	previewFields: [],
 
-	setAggregations: (aggregations): void => {
+	setAvailableColorByFields: (availableColorByFieldNames): void => {
 		const { userPreferences } = get();
 		set({
-			aggregations,
-			...deriveColorState(aggregations, userPreferences),
+			availableColorByFieldNames,
+			...deriveColorState(availableColorByFieldNames, userPreferences),
 		});
 	},
 
 	setUserPreferences: (userPreferences): void => {
-		const { aggregations } = get();
+		const { availableColorByFieldNames } = get();
 		set({
 			userPreferences,
-			...deriveColorState(aggregations, userPreferences),
+			...deriveColorState(availableColorByFieldNames, userPreferences),
 			previewFields: derivePreviewFields(userPreferences),
 		});
 	},
@@ -235,9 +225,9 @@ export const useTraceStore = create<TraceStoreState>()((set, get) => ({
 	},
 }));
 
-export const setTraceStoreAggregations = (
-	aggregations: WaterfallAggregationResponse[] | undefined,
-): void => useTraceStore.getState().setAggregations(aggregations);
+export const setTraceStoreAvailableColorByFields = (
+	fieldNames: string[] | undefined,
+): void => useTraceStore.getState().setAvailableColorByFields(fieldNames);
 
 export const setTraceStoreUserPreferences = (
 	userPreferences: UserPreference[] | null,

frontend/src/pages/TraceDetailsV3/utils.ts

@@ -1,5 +1,6 @@
 import { SpanV3 } from 'types/api/trace/getTraceV3';
 
+import { COLOR_BY_OPTIONS } from './constants';
 import {
 	ColorPair,
 	generateColorPair,
@@ -109,3 +110,14 @@ export function resolveSpanColor(
 	}
 	return generateColorPair(getSpanGroupValue(span, colorByFieldName));
 }
+
+/**
+ * Color-by fields present on any of the given spans — replaces the old
+ * server-side aggregation gating. `service.name` is always offered by the store
+ * regardless of this list.
+ */
+export function getAvailableColorByFieldNames(spans: SpanV3[]): string[] {
+	return COLOR_BY_OPTIONS.filter((opt) =>
+		spans.some((s) => getSpanAttribute(s, opt.field.name)),
+	).map((opt) => opt.field.name);
+}

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

@@ -1,17 +1,17 @@
 import {
-	WaterfallAggregationResponse,
-	WaterfallAggregationType,
-} from 'types/api/trace/getTraceV3';
+	TraceAggregationResponse,
+	TraceAggregationType,
+} from 'types/api/trace/getTraceAggregations';
 
 export const AGGREGATIONS = {
 	EXEC_TIME_PCT: 'execution_time_percentage',
 	SPAN_COUNT: 'span_count',
 	DURATION: 'duration',
-} as const satisfies Record<string, WaterfallAggregationType>;
+} as const satisfies Record<string, TraceAggregationType>;
 
 export function getAggregationMap(
-	aggregations: WaterfallAggregationResponse[] | undefined,
-	type: WaterfallAggregationType,
+	aggregations: TraceAggregationResponse[] | undefined,
+	type: TraceAggregationType,
 	fieldName: string,
 ): Record<string, number> | undefined {
 	return aggregations?.find(

frontend/src/types/api/trace/getTraceAggregations.ts

@@ -0,0 +1,15 @@
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+export type TraceAggregationType =
+	| 'span_count'
+	| 'execution_time_percentage'
+	| 'duration';
+
+export interface TraceAggregationRequest {
+	field: TelemetryFieldKey;
+	aggregation: TraceAggregationType;
+}
+
+export interface TraceAggregationResponse extends TraceAggregationRequest {
+	value: Record<string, number>;
+}

frontend/src/types/api/trace/getTraceV3.ts

@@ -1,26 +1,9 @@
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-export type WaterfallAggregationType =
-	| 'span_count'
-	| 'execution_time_percentage'
-	| 'duration';
-
-export interface WaterfallAggregationRequest {
-	field: TelemetryFieldKey;
-	aggregation: WaterfallAggregationType;
-}
-
-export interface WaterfallAggregationResponse extends WaterfallAggregationRequest {
-	value: Record<string, number>;
-}
-
-export interface GetTraceV3PayloadProps {
+export interface GetTraceV4PayloadProps {
 	traceId: string;
 	selectedSpanId: string;
 	uncollapsedSpans: string[];
 	isSelectedSpanIDUnCollapsed: boolean;
 	limit?: number; // Optional limit for number of spans to fetch, default can be set in API
-	aggregations?: WaterfallAggregationRequest[];
 }
 
 export interface TraceDetailV3URLProps {
@@ -88,7 +71,7 @@ export interface SpanV3 {
 	trace_state: string;
 }
 
-export interface GetTraceV3SuccessResponse {
+export interface GetTraceV4SuccessResponse {
 	spans: SpanV3[];
 	hasMissingSpans: boolean;
 	uncollapsedSpans: string[];
@@ -98,5 +81,4 @@ export interface GetTraceV3SuccessResponse {
 	totalErrorSpansCount: number;
 	rootServiceName: string;
 	rootServiceEntryPoint: string;
-	aggregations?: WaterfallAggregationResponse[];
 }

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

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

frontend/src/utils/queryContextUtils.ts

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