Merge branch 'trace_operator_implementation' into demo/trace_operators_backend

## 📄 Summary

- add a dedicated comment parsing middleware. This removes duplication and double parsing of referrer.

ee/query-service/app/server.go

@@ -257,6 +257,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewComment().Wrap)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,34 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-/**
- * Get field keys for a given signal type
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Optional search text
- */
-export const getFieldKeys = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	const response = await ApiBaseInstance.get('/fields/keys', { params });
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,63 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-/**
- * Get field values for a given signal type and field name
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Name of the attribute for which values are being fetched
- * @param value Optional search text
- */
-export const getFieldValues = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-	value?: string,
-	startUnixMilli?: number,
-	endUnixMilli?: number,
-): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	if (value) {
-		params.value = value;
-	}
-
-	if (startUnixMilli) {
-		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
-	}
-
-	if (endUnixMilli) {
-		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
-	}
-
-	const response = await ApiBaseInstance.get('/fields/values', { params });
-
-	// Normalize values from different types (stringValues, boolValues, etc.)
-	if (response.data?.data?.values) {
-		const allValues: string[] = [];
-		Object.values(response.data.data.values).forEach((valueArray: any) => {
-			if (Array.isArray(valueArray)) {
-				allValues.push(...valueArray.map(String));
-			}
-		});
-
-		// Add a normalized values array to the response
-		response.data.data.normalizedValues = allValues;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldValues;

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -5,7 +5,10 @@ import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
 import {
 	BaseBuilderQuery,
 	FieldContext,
@@ -276,6 +279,103 @@ export function convertBuilderQueriesToV5(
 	);
 }
 
+function createTraceOperatorBaseSpec(
+	queryData: IBuilderTraceOperator,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+
+	return {
+		stepInterval: queryData?.stepInterval || undefined,
+		groupBy:
+			queryData.groupBy?.length > 0
+				? queryData.groupBy.map(
+						(item: any): GroupByKey => ({
+							name: item.key,
+							fieldDataType: item?.dataType,
+							fieldContext: item?.type,
+							description: item?.description,
+							unit: item?.unit,
+							signal: item?.signal,
+							materialized: item?.materialized,
+						}),
+				  )
+				: undefined,
+		limit:
+			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
+				? queryData.limit || queryData.pageSize || undefined
+				: queryData.limit || undefined,
+		offset:
+			requestType === 'raw' || requestType === 'trace'
+				? queryData.offset
+				: undefined,
+		order:
+			queryData.orderBy?.length > 0
+				? queryData.orderBy.map(
+						(order: any): OrderBy => ({
+							key: {
+								name: order.columnName,
+							},
+							direction: order.order,
+						}),
+				  )
+				: undefined,
+		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
+		having: isEmpty(queryData.having) ? undefined : (queryData?.having as Having),
+		selectFields: isEmpty(nonEmptySelectColumns)
+			? undefined
+			: nonEmptySelectColumns?.map(
+					(column: any): TelemetryFieldKey => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
+			  ),
+	};
+}
+
+export function convertTraceOperatorToV5(
+	traceOperator: Record<string, IBuilderTraceOperator>,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): QueryEnvelope[] {
+	return Object.entries(traceOperator).map(
+		([queryName, traceOperatorData]): QueryEnvelope => {
+			const baseSpec = createTraceOperatorBaseSpec(
+				traceOperatorData,
+				requestType,
+				panelType,
+			);
+			let spec: QueryEnvelope['spec'];
+
+			// Skip aggregation for raw request type
+			const aggregations =
+				requestType === 'raw'
+					? undefined
+					: createAggregation(traceOperatorData, panelType);
+
+			spec = {
+				name: queryName,
+				returnSpansFrom: traceOperatorData.returnSpansFrom || '',
+				...baseSpec,
+				expression: traceOperatorData.expression || '',
+				aggregations: aggregations as TraceAggregation[],
+			};
+
+			return {
+				type: 'builder_trace_operator' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
 /**
  * Converts PromQL queries to V5 format
  */
@@ -357,14 +457,27 @@ export const prepareQueryRangePayloadV5 = ({
 
 	switch (query.queryType) {
 		case EQueryType.QUERY_BUILDER: {
-			const { queryData: data, queryFormulas } = query.builder;
+			const { queryData: data, queryFormulas, queryTraceOperator } = query.builder;
 			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
 			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
 
+			const filteredTraceOperator =
+				queryTraceOperator && queryTraceOperator.length > 0
+					? queryTraceOperator.filter((traceOperator) =>
+							Boolean(traceOperator.expression.trim()),
+					  )
+					: [];
+
+			const currentTraceOperator = mapQueryDataToApi(
+				filteredTraceOperator,
+				'queryName',
+			);
+
 			// Combine legend maps
 			legendMap = {
 				...currentQueryData.newLegendMap,
 				...currentFormulas.newLegendMap,
+				...currentTraceOperator.newLegendMap,
 			};
 
 			// Convert builder queries
@@ -397,8 +510,36 @@ export const prepareQueryRangePayloadV5 = ({
 				}),
 			);
 
+			const traceOperatorQueries = convertTraceOperatorToV5(
+				currentTraceOperator.data,
+				requestType,
+				graphType,
+			);
+
+			// const traceOperatorQueries = Object.entries(currentTraceOperator.data).map(
+			// 	([queryName, traceOperatorData]): QueryEnvelope => ({
+			// 		type: 'builder_trace_operator' as const,
+			// 		spec: {
+			// 			name: queryName,
+			// 			expression: traceOperatorData.expression || '',
+			// 			legend: isEmpty(traceOperatorData.legend)
+			// 				? undefined
+			// 				: traceOperatorData.legend,
+			// 			limit: 10,
+			// 			order: traceOperatorData.orderBy?.map(
+			// 				// eslint-disable-next-line sonarjs/no-identical-functions
+			// 				(order: any): OrderBy => ({
+			// 					key: {
+			// 						name: order.columnName,
+			// 					},
+			// 					direction: order.order,
+			// 				}),
+			// 			),
+			// 		},
+			// 	}),
+			// );
 			// Combine both types
-			queries = [...builderQueries, ...formulaQueries];
+			queries = [...builderQueries, ...formulaQueries, ...traceOperatorQueries];
 			break;
 		}
 		case EQueryType.PROM: {

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -28,7 +28,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -38,7 +37,7 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
 
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
@@ -63,8 +62,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
-	onDropdownVisibleChange,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -81,8 +78,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
-	const justOpenedRef = useRef<boolean>(false);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -129,12 +124,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
-	// Define allOptionShown earlier in the code
-	const allOptionShown = useMemo(
-		() => value === ALL_SELECTED_VALUE || value === 'ALL',
-		[value],
-	);
-
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -143,18 +132,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[], directCaller?: boolean): void => {
+		(newValue: string | string[]): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
-			if (
-				(allOptionShown || isAllSelected) &&
-				!directCaller &&
-				currentNewValue.length === 0
-			) {
-				return;
-			}
-
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -163,7 +144,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__ALL__" is selected (means select all actual values)
+			// Case 2: "__all__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -194,14 +175,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[
-			allOptionShown,
-			isAllSelected,
-			onChange,
-			allAvailableValues,
-			options,
-			enableAllSelection,
-		],
+		[onChange, allAvailableValues, options, enableAllSelection],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -536,19 +510,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			const trimmedValue = value.trim();
-			setSearchText(trimmedValue);
+			setSearchText(value.trim());
 			if (!isOpen) {
 				setIsOpen(true);
-				justOpenedRef.current = true;
 			}
-
-			// Reset active index when search changes if dropdown is open
-			if (isOpen && trimmedValue) {
-				setActiveIndex(0);
-			}
-
-			if (onSearch) onSearch(trimmedValue);
+			if (onSearch) onSearch(value.trim());
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -562,34 +528,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a unique key that doesn't rely on array index
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(
+				new RegExp(
+					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
+					'gi',
+				),
+			);
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a unique key that doesn't rely on array index
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				// If regex fails, return the original text without highlighting
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -600,10 +560,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([], true);
+			handleInternalChange([]);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE], true);
+			handleInternalChange([ALL_SELECTED_VALUE]);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -778,26 +738,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
-			// Simple early return if ALL is selected - block all possible keyboard interactions
-			// that could remove the ALL tag, but still allow dropdown navigation and search
-			if (
-				(allOptionShown || isAllSelected) &&
-				(e.key === 'Backspace' || e.key === 'Delete')
-			) {
-				// Only prevent default if the input is empty or cursor is at start position
-				const activeElement = document.activeElement as HTMLInputElement;
-				const isInputActive = activeElement?.tagName === 'INPUT';
-				const isInputEmpty = isInputActive && !activeElement?.value;
-				const isCursorAtStart =
-					isInputActive && activeElement?.selectionStart === 0;
-
-				if (isInputEmpty || isCursorAtStart) {
-					e.preventDefault();
-					e.stopPropagation();
-					return;
-				}
-			}
-
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -812,7 +752,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: ALL_SELECTED_VALUE, // Special value for the ALL option
+						value: '__all__', // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -844,17 +784,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
-			// If we just opened the dropdown and have options, set first option as active
-			if (justOpenedRef.current && flatOptions.length > 0) {
-				setActiveIndex(0);
-				justOpenedRef.current = false;
-			}
-
-			// If no option is active but we have options and dropdown is open, activate the first one
-			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
-				setActiveIndex(0);
-			}
-
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1200,7 +1129,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1230,10 +1159,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
-						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
-						if (onDropdownVisibleChange) {
-							onDropdownVisibleChange(false);
-						}
 						break;
 
 					case SPACEKEY:
@@ -1243,7 +1168,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1289,7 +1214,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						justOpenedRef.current = true; // Set flag to initialize active option on next render
+						setActiveIndex(0);
 						setActiveChipIndex(-1);
 						break;
 
@@ -1335,14 +1260,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
-			allOptionShown,
-			isAllSelected,
-			isOpen,
-			activeIndex,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
+			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1358,8 +1278,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			onDropdownVisibleChange,
+			activeIndex,
 			handleSelectAll,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1384,14 +1306,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
-
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1468,7 +1382,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1547,18 +1460,15 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<ArrowLeft size={8} className="icons" />
-								<ArrowRight size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<ArrowLeft size={8} className="icons" />
+							<ArrowRight size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1584,19 +1494,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -1613,7 +1513,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1623,31 +1522,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Custom handler for dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			setIsOpen(visible);
-			if (visible) {
-				justOpenedRef.current = true;
-				setActiveIndex(0);
-				setActiveChipIndex(-1);
-			} else {
-				setSearchText('');
-				setActiveIndex(-1);
-				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
-			}
-			// Pass through to the parent component's handler if provided
-			if (onDropdownVisibleChange) {
-				onDropdownVisibleChange(visible);
-			}
-		},
-		[onDropdownVisibleChange],
-	);
-
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1712,9 +1588,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (allOptionShown) {
-				// Don't render a visible tag - will be shown as placeholder
-				return <div style={{ display: 'none' }} />;
+			if (value === ALL_SELECTED_VALUE && isAllSelected) {
+				const handleAllTagClose = (
+					e: React.MouseEvent | React.KeyboardEvent,
+				): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleInternalChange([]); // Clear selection when ALL tag is closed
+				};
+
+				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
+					if (e.key === 'Enter' || e.key === SPACEKEY) {
+						handleAllTagClose(e);
+					}
+					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
+				};
+
+				return (
+					<div
+						className={cx('ant-select-selection-item', {
+							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
+							'ant-select-selection-item-selected': selectedChips.includes(0),
+						})}
+						style={
+							activeChipIndex === 0 || selectedChips.includes(0)
+								? {
+										borderColor: Color.BG_ROBIN_500,
+										backgroundColor: Color.BG_SLATE_400,
+								  }
+								: undefined
+						}
+					>
+						<span className="ant-select-selection-item-content">ALL</span>
+						{closable && (
+							<span
+								className="ant-select-selection-item-remove"
+								onClick={handleAllTagClose}
+								onKeyDown={handleAllTagKeyDown}
+								role="button"
+								tabIndex={0}
+								aria-label="Remove ALL tag (deselect all)"
+							>
+								×
+							</span>
+						)}
+					</div>
+				);
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1794,69 +1713,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
+		[
+			isAllSelected,
+			handleInternalChange,
+			activeChipIndex,
+			selectedChips,
+			selectedValues,
+			maxTagCount,
+		],
 	);
 
-	// Simple onClear handler to prevent clearing ALL
-	const onClearHandler = useCallback((): void => {
-		// Skip clearing if ALL is selected
-		if (allOptionShown || isAllSelected) {
-			return;
-		}
-
-		// Normal clear behavior
-		handleInternalChange([], true);
-		if (onClear) onClear();
-	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
-
 	// ===== Component Rendering =====
 	return (
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
+		<Select
+			ref={selectRef}
+			className={cx('custom-multiselect', className, {
+				'has-selection': selectedChips.length > 0 && !isAllSelected,
+				'is-all-selected': isAllSelected,
 			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
-				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			placeholder={placeholder}
+			mode="multiple"
+			showSearch
+			filterOption={false}
+			onSearch={handleSearch}
+			value={displayValue}
+			onChange={handleInternalChange}
+			onClear={(): void => handleInternalChange([])}
+			onDropdownVisibleChange={setIsOpen}
+			open={isOpen}
+			defaultActiveFirstOption={defaultActiveFirstOption}
+			popupMatchSelectWidth={dropdownMatchSelectWidth}
+			allowClear={allowClear}
+			getPopupContainer={getPopupContainer ?? popupContainer}
+			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+			dropdownRender={customDropdownRender}
+			menuItemSelectedIcon={null}
+			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+			onKeyDown={handleKeyDown}
+			tagRender={tagRender as any}
+			placement={placement}
+			listHeight={300}
+			searchValue={searchText}
+			maxTagTextLength={maxTagTextLength}
+			maxTagCount={isAllSelected ? 1 : maxTagCount}
+			{...rest}
+		/>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,7 +29,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -58,29 +57,17 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
-	// Flag to track if dropdown just opened
-	const justOpenedRef = useRef<boolean>(false);
-
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -143,33 +130,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a deterministic but unique key
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a deterministic but unique key
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -269,14 +246,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
-			// Reset active option index when search changes
-			if (isOpen) {
-				setActiveOptionIndex(0);
-			}
-
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch, isOpen],
+		[onSearch],
 	);
 
 	/**
@@ -300,23 +272,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
-					let processedOptions = isEmpty(value)
-						? filteredOptions
-						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
-
-					if (!isEmpty(searchText)) {
-						processedOptions = filterOptionsBySearch(processedOptions, searchText);
-					}
-
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
+						isEmpty(value)
+							? filteredOptions
+							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
 					);
 
 					// Add custom option if needed
-					if (
-						!isEmpty(searchText) &&
-						!isLabelPresent(processedOptions, searchText)
-					) {
+					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -337,52 +300,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
-				// If we just opened the dropdown and have options, set first option as active
-				if (justOpenedRef.current && options.length > 0) {
-					setActiveOptionIndex(0);
-					justOpenedRef.current = false;
-				}
-
-				// If no option is active but we have options, activate the first one
-				if (activeOptionIndex === -1 && options.length > 0) {
-					setActiveOptionIndex(0);
-				}
-
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev < options.length - 1 ? prev + 1 : 0,
+						);
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev > 0 ? prev - 1 : options.length - 1,
+						);
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev > 0 ? prev - 1 : options.length - 1,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
 						} else {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev < options.length - 1 ? prev + 1 : 0,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
 						}
 						break;
 
@@ -395,7 +339,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -408,7 +351,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -417,7 +359,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
-						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -428,7 +369,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -439,7 +379,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				justOpenedRef.current = true; // Set flag to initialize active option on next render
+				setActiveOptionIndex(0);
 			}
 		},
 		[
@@ -504,7 +444,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -515,6 +454,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
+
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -532,16 +472,13 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -567,19 +504,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -593,7 +520,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -601,22 +527,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
-		setIsOpen(visible);
-		if (visible) {
-			justOpenedRef.current = true;
-			setActiveOptionIndex(0);
-		} else {
-			setSearchText('');
-			setActiveOptionIndex(-1);
-		}
-	}, []);
-
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -670,7 +582,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
+			onDropdownVisibleChange={setIsOpen}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,43 +35,6 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
-	&.is-all-selected {
-		.ant-select-selection-search-input {
-			caret-color: transparent;
-		}
-
-		.ant-select-selection-placeholder {
-			opacity: 1 !important;
-			color: var(--bg-vanilla-400) !important;
-			font-weight: 500;
-			visibility: visible !important;
-			pointer-events: none;
-			z-index: 2;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85) !important;
-			}
-		}
-
-		&.ant-select-focused .ant-select-selection-placeholder {
-			opacity: 0.45 !important;
-		}
-	}
-
-	.all-selected-text {
-		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		color: var(--bg-vanilla-400);
-		z-index: 1;
-		pointer-events: none;
-
-		.lightMode & {
-			color: rgba(0, 0, 0, 0.85);
-		}
-	}
-
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
@@ -195,7 +158,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 300px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -313,10 +276,6 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
-	.navigation-text-incomplete {
-		color: var(--bg-amber-600) !important;
-	}
-
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -363,7 +322,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -697,10 +656,6 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
-			font-size: 12px !important;
-			height: 20px;
-			line-height: 18px;
-
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -881,38 +836,3 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
-
-.custom-multiselect-wrapper {
-	position: relative;
-	width: 100%;
-
-	&.all-selected {
-		.all-text {
-			position: absolute;
-			left: 12px;
-			top: 50%;
-			transform: translateY(-50%);
-			color: var(--bg-vanilla-400);
-			font-weight: 500;
-			z-index: 2;
-			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85);
-			}
-		}
-
-		&:focus-within .all-text {
-			opacity: 0.45;
-		}
-
-		.ant-select-selection-search-input {
-			caret-color: auto;
-		}
-
-		.ant-select-selection-placeholder {
-			display: none;
-		}
-	}
-}

frontend/src/components/NewSelect/types.ts

@@ -24,10 +24,9 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -52,12 +51,10 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	maxTagTextLength?: number;
-	showIncompleteDataMessage?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -133,15 +133,3 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
-
-/**
- * Utility function to handle dropdown scroll and detect when scrolled to bottom
- * Returns true when scrolled to within 20px of the bottom
- */
-export const handleScrollToBottom = (
-	e: React.UIEvent<HTMLDivElement>,
-): boolean => {
-	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
-	return scrollHeight - scrollTop - clientHeight < 20;
-};

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -22,6 +22,10 @@
 		flex: 1;
 
 		position: relative;
+
+		.qb-trace-view-selector-container {
+			padding: 12px 8px 8px 8px;
+		}
 	}
 
 	.qb-content-section {
@@ -179,7 +183,7 @@
 		flex-direction: column;
 		gap: 8px;
 
-		margin-left: 32px;
+		margin-left: 26px;
 		padding-bottom: 16px;
 		padding-left: 8px;
 
@@ -195,8 +199,8 @@
 			}
 
 			.formula-container {
-				margin-left: 82px;
-				padding: 4px 0px;
+				padding: 8px;
+				margin-left: 74px;
 
 				.ant-col {
 					&::before {
@@ -331,6 +335,12 @@
 					);
 					left: 15px;
 				}
+
+				&.has-trace-operator {
+					&::before {
+						height: 0px;
+					}
+				}
 			}
 
 			.formula-name {
@@ -347,7 +357,7 @@
 
 				&::before {
 					content: '';
-					height: 65px;
+					height: 128px;
 					content: '';
 					position: absolute;
 					left: 0;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -5,11 +5,13 @@ import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useEffect, useMemo, useRef } from 'react';
+import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
 import { QueryV2 } from './QueryV2/QueryV2';
+import TraceOperator from './QueryV2/TraceOperator/TraceOperator';
 
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
@@ -18,6 +20,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	queryComponents,
 	isListViewPanel = false,
 	showOnlyWhereClause = false,
+	showTraceOperator = false,
 	version,
 }: QueryBuilderProps): JSX.Element {
 	const {
@@ -25,6 +28,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		addNewBuilderQuery,
 		addNewFormula,
 		handleSetConfig,
+		addTraceOperator,
 		panelType,
 		initialDataSource,
 	} = useQueryBuilder();
@@ -54,6 +58,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		newPanelType,
 	]);
 
+	const isMultiQueryAllowed = useMemo(
+		() =>
+			!showOnlyWhereClause ||
+			!isListViewPanel ||
+			(currentDataSource === DataSource.TRACES && showTraceOperator),
+		[showOnlyWhereClause, currentDataSource, showTraceOperator, isListViewPanel],
+	);
+
 	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
 		const config: QueryBuilderProps['filterConfigs'] = {
 			stepInterval: { isHidden: true, isDisabled: true },
@@ -97,11 +109,45 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		listViewTracesFilterConfigs,
 	]);
 
+	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
+		if (
+			currentQuery.builder.queryTraceOperator &&
+			currentQuery.builder.queryTraceOperator.length > 0
+		) {
+			return currentQuery.builder.queryTraceOperator[0];
+		}
+
+		return undefined;
+	}, [currentQuery.builder.queryTraceOperator]);
+
+	const shouldShowTraceOperator = useMemo(
+		() =>
+			showTraceOperator &&
+			currentDataSource === DataSource.TRACES &&
+			Boolean(traceOperator),
+		[currentDataSource, showTraceOperator, traceOperator],
+	);
+
+	const shouldShowFooter = useMemo(
+		() =>
+			(!showOnlyWhereClause && !isListViewPanel) ||
+			(currentDataSource === DataSource.TRACES && showTraceOperator),
+		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
+	);
+
+	const showFormula = useMemo(() => {
+		if (currentDataSource === DataSource.TRACES) {
+			return !isListViewPanel;
+		}
+
+		return true;
+	}, [isListViewPanel, currentDataSource]);
+
 	return (
 		<QueryBuilderV2Provider>
 			<div className="query-builder-v2">
 				<div className="qb-content-container">
-					{isListViewPanel && (
+					{!isMultiQueryAllowed ? (
 						<QueryV2
 							ref={containerRef}
 							key={currentQuery.builder.queryData[0].queryName}
@@ -109,15 +155,15 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							query={currentQuery.builder.queryData[0]}
 							filterConfigs={queryFilterConfigs}
 							queryComponents={queryComponents}
+							isMultiQueryAllowed={isMultiQueryAllowed}
+							showTraceOperator={shouldShowTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
 						/>
-					)}
-
-					{!isListViewPanel &&
+					) : (
 						currentQuery.builder.queryData.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
@@ -127,13 +173,16 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								filterConfigs={queryFilterConfigs}
 								queryComponents={queryComponents}
 								version={version}
+								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
+								showTraceOperator={shouldShowTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
 								signalSource={config?.signalSource || ''}
 							/>
-						))}
+						))
+					)}
 
 					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
 						<div className="qb-formulas-container">
@@ -158,15 +207,25 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						</div>
 					)}
 
-					{!showOnlyWhereClause && !isListViewPanel && (
+					{shouldShowFooter && (
 						<QueryFooter
+							showAddFormula={showFormula}
 							addNewBuilderQuery={addNewBuilderQuery}
 							addNewFormula={addNewFormula}
+							addTraceOperator={addTraceOperator}
+							showAddTraceOperator={showTraceOperator && !traceOperator}
+						/>
+					)}
+
+					{shouldShowTraceOperator && (
+						<TraceOperator
+							isListViewPanel={isListViewPanel}
+							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
 				</div>
 
-				{!showOnlyWhereClause && !isListViewPanel && (
+				{isMultiQueryAllowed && (
 					<div className="query-names-section">
 						{currentQuery.builder.queryData.map((query) => (
 							<div key={query.queryName} className="query-name">

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -1,7 +1,11 @@
+.query-add-ons {
+	width: 100%;
+}
+
 .add-ons-list {
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+	gap: 16px;
 
 	.add-ons-tabs {
 		display: flex;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -144,6 +144,8 @@ function QueryAddOns({
 	showReduceTo,
 	panelType,
 	index,
+	isForTraceOperator = false,
+	children,
 }: {
 	query: IBuilderQuery;
 	version: string;
@@ -151,6 +153,8 @@ function QueryAddOns({
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
+	isForTraceOperator?: boolean;
+	children?: React.ReactNode;
 }): JSX.Element {
 	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
 
@@ -160,6 +164,7 @@ function QueryAddOns({
 		index,
 		query,
 		entityVersion: '',
+		isForTraceOperator,
 	});
 
 	const { handleSetQueryData } = useQueryBuilder();
@@ -486,6 +491,7 @@ function QueryAddOns({
 						</Tooltip>
 					))}
 				</Radio.Group>
+				{children}
 			</div>
 		</div>
 	);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -4,7 +4,10 @@ import { Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useMemo } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import QueryAggregationSelect from './QueryAggregationSelect';
@@ -20,7 +23,7 @@ function QueryAggregationOptions({
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
-	queryData: IBuilderQuery;
+	queryData: IBuilderQuery | IBuilderTraceOperator;
 }): JSX.Element {
 	const showAggregationInterval = useMemo(() => {
 		// eslint-disable-next-line sonarjs/prefer-single-boolean-return

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -4,9 +4,15 @@ import { Plus, Sigma } from 'lucide-react';
 export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
+	addTraceOperator,
+	showAddFormula = true,
+	showAddTraceOperator = false,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
+	addTraceOperator?: () => void;
+	showAddTraceOperator: boolean;
+	showAddFormula?: boolean;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
@@ -22,32 +28,62 @@ export default function QueryFooter({
 					</Tooltip>
 				</div>
 
-				<div className="qb-add-formula">
-					<Tooltip
-						title={
-							<div style={{ textAlign: 'center' }}>
-								Add New Formula
-								<Typography.Link
-									href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
-									target="_blank"
-									style={{ textDecoration: 'underline' }}
-								>
-									{' '}
-									<br />
-									Learn more
-								</Typography.Link>
-							</div>
-						}
-					>
-						<Button
-							className="add-formula-button periscope-btn secondary"
-							icon={<Sigma size={16} />}
-							onClick={addNewFormula}
+				{showAddFormula && (
+					<div className="qb-add-formula">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add New Formula
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
 						>
-							Add Formula
-						</Button>
-					</Tooltip>
-				</div>
+							<Button
+								className="add-formula-button periscope-btn secondary"
+								icon={<Sigma size={16} />}
+								onClick={addNewFormula}
+							>
+								Add Formula
+							</Button>
+						</Tooltip>
+					</div>
+				)}
+				{showAddTraceOperator && (
+					<div className="qb-add-formula">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add Trace Matching
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
+						>
+							<Button
+								className="add-formula-button periscope-btn secondary"
+								icon={<Sigma size={16} />}
+								onClick={() => addTraceOperator?.()}
+							>
+								Add Trace Matching
+							</Button>
+						</Tooltip>
+					</div>
+				)}
 			</div>
 		</div>
 	);

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -7,6 +7,7 @@
 		'Helvetica Neue', sans-serif;
 
 	.query-where-clause-editor-container {
+		position: relative;
 		display: flex;
 		flex-direction: row;
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -26,9 +26,11 @@ export const QueryV2 = memo(function QueryV2({
 	query,
 	filterConfigs,
 	isListViewPanel = false,
+	showTraceOperator = false,
 	version,
 	showOnlyWhereClause = false,
 	signalSource = '',
+	isMultiQueryAllowed = false,
 }: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
@@ -108,11 +110,15 @@ export const QueryV2 = memo(function QueryV2({
 			ref={ref}
 		>
 			<div className="qb-content-section">
-				{!showOnlyWhereClause && (
+				{isMultiQueryAllowed && (
 					<div className="qb-header-container">
 						<div className="query-actions-container">
 							<div className="query-actions-left-container">
 								<QBEntityOptions
+									hasTraceOperator={
+										showTraceOperator ||
+										(isListViewPanel && dataSource === DataSource.TRACES)
+									}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
 										(version && version === ENTITY_VERSION_V4) ||
@@ -139,7 +145,30 @@ export const QueryV2 = memo(function QueryV2({
 								/>
 							</div>
 
-							{!isListViewPanel && (
+							{!isCollapsed &&
+								(showTraceOperator ||
+									(isListViewPanel && dataSource === DataSource.TRACES)) && (
+									<div className="qb-search-filter-container" style={{ flex: 1 }}>
+										<div className="query-search-container">
+											<QuerySearch
+												key={`query-search-${query.queryName}-${query.dataSource}`}
+												onChange={handleSearchChange}
+												queryData={query}
+												dataSource={dataSource}
+												signalSource={signalSource}
+											/>
+										</div>
+
+										{showSpanScopeSelector && (
+											<div className="traces-search-filter-container">
+												<div className="traces-search-filter-in">in</div>
+												<SpanScopeSelector query={query} />
+											</div>
+										)}
+									</div>
+								)}
+
+							{isMultiQueryAllowed && (
 								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
@@ -181,28 +210,32 @@ export const QueryV2 = memo(function QueryV2({
 								</div>
 							)}
 
-							<div className="qb-search-filter-container">
-								<div className="query-search-container">
-									<QuerySearch
-										key={`query-search-${query.queryName}-${query.dataSource}`}
-										onChange={handleSearchChange}
-										queryData={query}
-										dataSource={dataSource}
-										signalSource={signalSource}
-									/>
-								</div>
+							{!showTraceOperator &&
+								!(isListViewPanel && dataSource === DataSource.TRACES) && (
+									<div className="qb-search-filter-container">
+										<div className="query-search-container">
+											<QuerySearch
+												key={`query-search-${query.queryName}-${query.dataSource}`}
+												onChange={handleSearchChange}
+												queryData={query}
+												dataSource={dataSource}
+												signalSource={signalSource}
+											/>
+										</div>
 
-								{showSpanScopeSelector && (
-									<div className="traces-search-filter-container">
-										<div className="traces-search-filter-in">in</div>
-										<SpanScopeSelector query={query} />
+										{showSpanScopeSelector && (
+											<div className="traces-search-filter-container">
+												<div className="traces-search-filter-in">in</div>
+												<SpanScopeSelector query={query} />
+											</div>
+										)}
 									</div>
 								)}
-							</div>
 						</div>
 
 						{!showOnlyWhereClause &&
 							!isListViewPanel &&
+							!showTraceOperator &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
 									dataSource={dataSource}
@@ -225,7 +258,7 @@ export const QueryV2 = memo(function QueryV2({
 							/>
 						)}
 
-						{!showOnlyWhereClause && (
+						{!showOnlyWhereClause && !isListViewPanel && !showTraceOperator && (
 							<QueryAddOns
 								index={index}
 								query={query}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -0,0 +1,180 @@
+.qb-trace-operator {
+	padding: 8px;
+	display: flex;
+	gap: 8px;
+
+	&.non-list-view {
+		padding-left: 40px;
+		position: relative;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			left: 12px;
+			height: calc(100% - 48px);
+			width: 1px;
+			background: repeating-linear-gradient(
+				to bottom,
+				#1d212d,
+				#1d212d 4px,
+				transparent 4px,
+				transparent 8px
+			);
+		}
+	}
+
+	&-span-source-label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		height: 24px;
+
+		&-query {
+			font-size: 14px;
+			font-weight: 400;
+			color: var(--bg-vanilla-100);
+		}
+		&-query-name {
+			width: 18px;
+			height: 18px;
+			display: grid;
+			place-content: center;
+			padding: 2px;
+
+			border-radius: 2px;
+			border: 1px solid rgba(242, 71, 105, 0.2);
+			background: rgba(242, 71, 105, 0.1);
+			color: var(--Sakura-400, #f56c87);
+			font-size: 12px;
+		}
+	}
+
+	&-arrow {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			left: -26px;
+			height: 1px;
+			width: 20px;
+			background: repeating-linear-gradient(
+				to right,
+				#1d212d,
+				#1d212d 4px,
+				transparent 4px,
+				transparent 8px
+			);
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: -10px;
+			transform: translateY(-50%);
+			height: 4px;
+			width: 4px;
+			border-radius: 50%;
+			background-color: var(--bg-slate-400);
+		}
+	}
+
+	&-input {
+		width: 100%;
+	}
+
+	&-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&-aggregation-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&-add-ons-container {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+	}
+
+	&-add-ons-input {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+
+		border-radius: 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: -16px;
+			top: 50%;
+			height: 1px;
+			width: 16px;
+			background-color: var(--bg-slate-400);
+		}
+
+		.label {
+			color: var(--bg-vanilla-400);
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 0px 8px;
+			border-right: 1px solid var(--bg-slate-400);
+		}
+	}
+}
+
+.lightMode {
+	.qb-trace-operator {
+		&-arrow {
+			&::before {
+				background: repeating-linear-gradient(
+					to right,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+			&::after {
+				background-color: var(--bg-vanilla-300);
+			}
+		}
+		&.non-list-view {
+			&::before {
+				background: repeating-linear-gradient(
+					to bottom,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+		}
+
+		&-add-ons-input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+
+			.label {
+				color: var(--bg-ink-500) !important;
+				border-right: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -0,0 +1,157 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable sonarjs/no-duplicate-string */
+
+import './TraceOperator.styles.scss';
+
+import { Button, Select, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Trash2 } from 'lucide-react';
+import { useCallback, useMemo } from 'react';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAddOns from '../QueryAddOns/QueryAddOns';
+import QueryAggregation from '../QueryAggregation/QueryAggregation';
+
+export default function TraceOperator({
+	traceOperator,
+	isListViewPanel = false,
+}: {
+	traceOperator: IBuilderTraceOperator;
+	isListViewPanel?: boolean;
+}): JSX.Element {
+	const { panelType, currentQuery, removeTraceOperator } = useQueryBuilder();
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: traceOperator,
+		entityVersion: '',
+		isForTraceOperator: true,
+	});
+
+	const handleTraceOperatorChange = useCallback(
+		(traceOperatorExpression: string) => {
+			handleChangeQueryData('expression', traceOperatorExpression);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeQueryData('stepInterval', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregation = useCallback(
+		(value: string) => {
+			handleChangeQueryData('aggregations', [
+				{
+					expression: value,
+				},
+			]);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeSpanSource = useCallback(
+		(value: string) => {
+			handleChangeQueryData('returnSpansFrom', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const defaultSpanSource = useMemo(
+		() =>
+			traceOperator.returnSpansFrom ||
+			currentQuery.builder.queryData[0].queryName ||
+			'',
+		[currentQuery.builder.queryData, traceOperator?.returnSpansFrom],
+	);
+
+	const spanSourceOptions = useMemo(
+		() =>
+			currentQuery.builder.queryData.map((query) => ({
+				value: query.queryName,
+				label: (
+					<div className="qb-trace-operator-span-source-label">
+						<span className="qb-trace-operator-span-source-label-query">Query</span>
+						<p className="qb-trace-operator-span-source-label-query-name">
+							{query.queryName}
+						</p>
+					</div>
+				),
+			})),
+		[currentQuery.builder.queryData],
+	);
+
+	return (
+		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
+			<div className="qb-trace-operator-container">
+				<InputWithLabel
+					className={cx(
+						'qb-trace-operator-input',
+						!isListViewPanel && 'qb-trace-operator-arrow',
+					)}
+					initialValue={traceOperator?.expression || ''}
+					label="TRACES MATCHING"
+					placeholder="Add condition..."
+					type="text"
+					onChange={handleTraceOperatorChange}
+				/>
+				{!isListViewPanel && (
+					<div className="qb-trace-operator-aggregation-container">
+						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
+							<QueryAggregation
+								dataSource={DataSource.TRACES}
+								key={`query-search-${traceOperator.queryName}`}
+								panelType={panelType || undefined}
+								onAggregationIntervalChange={handleChangeAggregateEvery}
+								onChange={handleChangeAggregation}
+								queryData={traceOperator}
+							/>
+						</div>
+						<div
+							className={cx(
+								'qb-trace-operator-add-ons-container',
+								!isListViewPanel && 'qb-trace-operator-arrow',
+							)}
+						>
+							<QueryAddOns
+								index={0}
+								query={traceOperator}
+								version="v3"
+								isForTraceOperator
+								isListViewPanel={false}
+								showReduceTo={false}
+								panelType={panelType}
+							>
+								<div className="qb-trace-operator-add-ons-input">
+									<Typography.Text className="label">Using spans from</Typography.Text>
+									<Select
+										bordered={false}
+										defaultValue={defaultSpanSource}
+										style={{ minWidth: 120 }}
+										onChange={handleChangeSpanSource}
+										options={spanSourceOptions}
+										listItemHeight={24}
+									/>
+								</div>
+							</QueryAddOns>
+						</div>
+					</div>
+				)}
+			</div>
+			<Tooltip title="Remove Trace Operator" placement="topLeft">
+				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
+					<Trash2 size={14} />
+				</Button>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

@@ -17,6 +17,19 @@
 		font-weight: var(--font-weight-normal);
 	}
 
+	.view-title-container {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		justify-content: center;
+
+		.icon-container {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
 	.tab {
 		border: 1px solid var(--bg-slate-400);
 		&:hover {

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -6,6 +6,7 @@ import { RadioChangeEvent } from 'antd/es/radio';
 interface Option {
 	value: string;
 	label: string;
+	icon?: React.ReactNode;
 }
 
 interface SignozRadioGroupProps {
@@ -37,7 +38,10 @@ function SignozRadioGroup({
 					value={option.value}
 					className={value === option.value ? 'selected_view tab' : 'tab'}
 				>
-					{option.label}
+					<div className="view-title-container">
+						{option.icon && <div className="icon-container">{option.icon}</div>}
+						{option.label}
+					</div>
 				</Radio.Button>
 			))}
 		</Radio.Group>

frontend/src/constants/query.ts

@@ -49,5 +49,4 @@ export enum QueryParams {
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
-	variableConfigs = 'variableConfigs',
 }

frontend/src/constants/queryBuilder.ts

@@ -12,6 +12,7 @@ import {
 	HavingForm,
 	IBuilderFormula,
 	IBuilderQuery,
+	IBuilderTraceOperator,
 	IClickHouseQuery,
 	IPromQLQuery,
 	Query,
@@ -50,6 +51,8 @@ import {
 export const MAX_FORMULAS = 20;
 export const MAX_QUERIES = 26;
 
+export const TRACE_OPERATOR_QUERY_NAME = 'T1';
+
 export const idDivider = '--';
 export const selectValueDivider = '__';
 
@@ -265,6 +268,11 @@ export const initialFormulaBuilderFormValues: IBuilderFormula = {
 	legend: '',
 };
 
+export const initialQueryBuilderFormTraceOperatorValues: IBuilderTraceOperator = {
+	...initialQueryBuilderFormTracesValues,
+	queryName: TRACE_OPERATOR_QUERY_NAME,
+};
+
 export const initialQueryPromQLData: IPromQLQuery = {
 	name: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
 	query: '',
@@ -282,6 +290,7 @@ export const initialClickHouseData: IClickHouseQuery = {
 export const initialQueryBuilderData: QueryBuilderData = {
 	queryData: [initialQueryBuilderFormValues],
 	queryFormulas: [],
+	queryTraceOperator: [],
 };
 
 export const initialSingleQueryMap: Record<

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -54,6 +54,7 @@ function QuerySection({
 				queryVariant: 'static',
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
 			}}
+			showTraceOperator={alertType === AlertTypes.TRACES_BASED_ALERT}
 			showFunctions={
 				(alertType === AlertTypes.METRICS_BASED_ALERT &&
 					alertDef.version === ENTITY_VERSION_V4) ||

frontend/src/container/FormAlertRules/index.tsx

@@ -150,6 +150,7 @@ function FormAlertRules({
 
 	const queryOptions = useMemo(() => {
 		const queryConfig: Record<EQueryType, () => SelectProps['options']> = {
+			// TODO: Filter out queries who are used in trace operator
 			[EQueryType.QUERY_BUILDER]: () => [
 				...(getSelectedQueryOptions(currentQuery.builder.queryData) || []),
 				...(getSelectedQueryOptions(currentQuery.builder.queryFormulas) || []),

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -13,6 +13,7 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -61,12 +62,14 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
+		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -117,7 +120,11 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const queryEnabledCondition =
+		isVisible &&
+		!isEmptyWidget &&
+		isQueryEnabled &&
+		isEmpty(variablesToGetUpdated);
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -156,24 +163,22 @@ function GridCardGraph({
 		};
 	});
 
-	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
-	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
-	// useEffect(() => {
-	// 	if (variablesToGetUpdated.length > 0) {
-	// 		queryClient.cancelQueries([
-	// 			maxTime,
-	// 			minTime,
-	// 			globalSelectedInterval,
-	// 			variables,
-	// 			widget?.query,
-	// 			widget?.panelTypes,
-	// 			widget.timePreferance,
-	// 			widget.fillSpans,
-	// 			requestData,
-	// 		]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, [variablesToGetUpdated]);
+	useEffect(() => {
+		if (variablesToGetUpdated.length > 0) {
+			queryClient.cancelQueries([
+				maxTime,
+				minTime,
+				globalSelectedInterval,
+				variables,
+				widget?.query,
+				widget?.panelTypes,
+				widget.timePreferance,
+				widget.fillSpans,
+				requestData,
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -219,15 +224,6 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce(
-							(acc, [id, variable]) => ({
-								...acc,
-								[id]: variable.selectedValue,
-							}),
-							{},
-					  )
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -1,42 +0,0 @@
-.dynamic-variable-container {
-	display: grid;
-	grid-template-columns: 1fr 32px 200px;
-	gap: 32px;
-	align-items: center;
-	width: 100%;
-	margin: 24px 0;
-
-	.ant-select {
-		.ant-select-selector {
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400);
-		}
-	}
-
-	.ant-input {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		max-width: 300px;
-	}
-
-	.dynamic-variable-from-text {
-		font-family: 'Space Mono';
-		font-size: 13px;
-		font-weight: 500;
-		white-space: nowrap;
-	}
-}
-
-.lightMode {
-	.dynamic-variable-container {
-		.ant-select {
-			.ant-select-selector {
-				border: 1px solid var(--bg-vanilla-300);
-			}
-		}
-
-		.ant-input {
-			border: 1px solid var(--bg-vanilla-300);
-		}
-	}
-}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -1,179 +0,0 @@
-import './DynamicVariable.styles.scss';
-
-import { Select, Typography } from 'antd';
-import CustomSelect from 'components/NewSelect/CustomSelect';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-import useDebounce from 'hooks/useDebounce';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
-
-enum AttributeSource {
-	ALL_SOURCES = 'All Sources',
-	LOGS = 'Logs',
-	METRICS = 'Metrics',
-	TRACES = 'Traces',
-}
-
-function DynamicVariable({
-	setDynamicVariablesSelectedValue,
-	dynamicVariablesSelectedValue,
-}: {
-	setDynamicVariablesSelectedValue: Dispatch<
-		SetStateAction<
-			| {
-					name: string;
-					value: string;
-			  }
-			| undefined
-		>
-	>;
-	dynamicVariablesSelectedValue:
-		| {
-				name: string;
-				value: string;
-		  }
-		| undefined;
-}): JSX.Element {
-	const sources = [
-		AttributeSource.ALL_SOURCES,
-		AttributeSource.LOGS,
-		AttributeSource.TRACES,
-		AttributeSource.METRICS,
-	];
-
-	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
-	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
-	const [selectedAttribute, setSelectedAttribute] = useState<string>();
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const [filteredAttributes, setFilteredAttributes] = useState<
-		Record<string, FieldKey[]>
-	>({});
-
-	useEffect(() => {
-		if (dynamicVariablesSelectedValue?.name) {
-			setSelectedAttribute(dynamicVariablesSelectedValue.name);
-		}
-
-		if (dynamicVariablesSelectedValue?.value) {
-			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const { data, error, isLoading, refetch } = useGetFieldKeys({
-		signal:
-			attributeSource === AttributeSource.ALL_SOURCES
-				? undefined
-				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
-		name: debouncedApiSearchText,
-	});
-
-	const isComplete = useMemo(() => data?.payload?.complete === true, [data]);
-
-	useEffect(() => {
-		if (data) {
-			const newAttributes = data.payload?.keys ?? {};
-			setAttributes(newAttributes);
-			setFilteredAttributes(newAttributes);
-		}
-	}, [data]);
-
-	// refetch when attributeSource changes
-	useEffect(() => {
-		if (attributeSource) {
-			refetch();
-		}
-	}, [attributeSource, refetch, debouncedApiSearchText]);
-
-	// Handle search based on whether we have complete data or not
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				// If complete is true, do client-side filtering
-				if (!text) {
-					setFilteredAttributes(attributes);
-					return;
-				}
-
-				const filtered: Record<string, FieldKey[]> = {};
-				Object.keys(attributes).forEach((key) => {
-					if (key.toLowerCase().includes(text.toLowerCase())) {
-						filtered[key] = attributes[key];
-					}
-				});
-				setFilteredAttributes(filtered);
-			} else {
-				// If complete is false, debounce the API call
-				setApiSearchText(text);
-			}
-		},
-		[attributes, isComplete],
-	);
-
-	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
-	useEffect(() => {
-		if (selectedAttribute || attributeSource) {
-			setDynamicVariablesSelectedValue({
-				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
-				value:
-					attributeSource ||
-					dynamicVariablesSelectedValue?.value ||
-					AttributeSource.ALL_SOURCES,
-			});
-		}
-	}, [
-		selectedAttribute,
-		attributeSource,
-		setDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const errorMessage = (error as any)?.message;
-	return (
-		<div className="dynamic-variable-container">
-			<CustomSelect
-				placeholder="Select an Attribute"
-				options={Object.keys(filteredAttributes).map((key) => ({
-					label: key,
-					value: key,
-				}))}
-				loading={isLoading}
-				status={errorMessage ? 'error' : undefined}
-				onChange={(value): void => {
-					setSelectedAttribute(value);
-				}}
-				showSearch
-				errorMessage={errorMessage as any}
-				value={selectedAttribute || dynamicVariablesSelectedValue?.name}
-				onSearch={handleSearch}
-				onRetry={(): void => {
-					refetch();
-				}}
-			/>
-			<Typography className="dynamic-variable-from-text">from</Typography>
-			<Select
-				placeholder="Source"
-				defaultValue={AttributeSource.ALL_SOURCES}
-				options={sources.map((source) => ({ label: source, value: source }))}
-				onChange={(value): void => setAttributeSource(value as AttributeSource)}
-				value={attributeSource || dynamicVariablesSelectedValue?.value}
-			/>
-		</div>
-	);
-}
-
-export default DynamicVariable;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -1,376 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-
-import DynamicVariable from '../DynamicVariable';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Mock dependencies
-jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
-	useGetFieldKeys: jest.fn(),
-}));
-
-jest.mock('hooks/useDebounce', () => ({
-	__esModule: true,
-	default: (value: any): any => value, // Return the same value without debouncing for testing
-}));
-
-describe('DynamicVariable Component', () => {
-	const mockSetDynamicVariablesSelectedValue = jest.fn();
-	const ATTRIBUTE_PLACEHOLDER = 'Select an Attribute';
-	const LOADING_TEXT = 'We are updating the values...';
-	const DEFAULT_PROPS = {
-		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue: undefined,
-	};
-
-	const mockFieldKeysResponse = {
-		payload: {
-			keys: {
-				'service.name': [],
-				'http.status_code': [],
-				duration: [],
-			},
-			complete: true,
-		},
-		statusCode: 200,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Default mock implementation
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-	});
-
-	// Helper function to get the attribute select element
-	const getAttributeSelect = (): HTMLElement =>
-		screen.getAllByRole('combobox')[0];
-
-	// Helper function to get the source select element
-	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
-
-	it('renders with default state', () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Check for main components
-		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
-		expect(screen.getByText('All Sources')).toBeInTheDocument();
-		expect(screen.getByText('from')).toBeInTheDocument();
-	});
-
-	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
-		const selectedValue = {
-			name: 'service.name',
-			value: 'Logs',
-		};
-
-		render(
-			<DynamicVariable
-				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
-				dynamicVariablesSelectedValue={selectedValue}
-			/>,
-		);
-
-		// Verify values are set
-		expect(screen.getByText('service.name')).toBeInTheDocument();
-		expect(screen.getByText('Logs')).toBeInTheDocument();
-	});
-
-	it('shows loading state when fetching data', () => {
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: null,
-			isLoading: true,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show loading state
-		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
-	});
-
-	it('shows error message when API fails', () => {
-		const errorMessage = 'Failed to fetch field keys';
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: errorMessage },
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show error message
-		expect(screen.getByText(errorMessage)).toBeInTheDocument();
-	});
-
-	it('updates filteredAttributes when data is loaded', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear in the dropdown
-		await waitFor(() => {
-			// Looking for option-content elements inside the CustomSelect dropdown
-			const options = document.querySelectorAll('.option-content');
-			expect(options.length).toBeGreaterThan(0);
-
-			// Check if all expected options are present
-			let foundServiceName = false;
-			let foundHttpStatusCode = false;
-			let foundDuration = false;
-
-			options.forEach((option) => {
-				const text = option.textContent?.trim();
-				if (text === 'service.name') foundServiceName = true;
-				if (text === 'http.status_code') foundHttpStatusCode = true;
-				if (text === 'duration') foundDuration = true;
-			});
-
-			expect(foundServiceName).toBe(true);
-			expect(foundHttpStatusCode).toBe(true);
-			expect(foundDuration).toBe(true);
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear, then click on service.name
-		await waitFor(() => {
-			// Need to find the option-item containing service.name
-			const serviceNameOption = screen.getByText('service.name');
-			expect(serviceNameOption).not.toBeNull();
-			expect(serviceNameOption?.textContent).toBe('service.name');
-
-			// Click on the option-item that contains service.name
-			const optionElement = serviceNameOption?.closest('.option-item');
-			if (optionElement) {
-				fireEvent.click(optionElement);
-			}
-		});
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
-			name: 'service.name',
-			value: 'All Sources',
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Get the Select component
-		const select = screen
-			.getByText('All Sources')
-			.closest('div[class*="ant-select"]');
-		expect(select).toBeInTheDocument();
-
-		// Directly call the onChange handler by simulating the Select's onChange
-		// Find the props.onChange of the Select component and call it directly
-		fireEvent.mouseDown(select as HTMLElement);
-
-		// Use a more specific selector to find the "Logs" option
-		const optionsContainer = document.querySelector(
-			'.rc-virtual-list-holder-inner',
-		);
-		expect(optionsContainer).not.toBeNull();
-
-		// Find the option with Logs text content
-		const logsOption = Array.from(
-			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
-		)
-			.find((element) => element.textContent === 'Logs')
-			?.closest('.ant-select-item-option');
-
-		expect(logsOption).not.toBeNull();
-
-		// Click on it
-		if (logsOption) {
-			fireEvent.click(logsOption);
-		}
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
-			expect.objectContaining({
-				value: 'Logs',
-			}),
-		);
-	});
-
-	it('filters attributes locally when complete is true', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Mock the filter function behavior
-		const attributeKeys = Object.keys(mockFieldKeysResponse.payload.keys);
-
-		// Only "http.status_code" should match the filter
-		const expectedFilteredKeys = attributeKeys.filter((key) =>
-			key.includes('http'),
-		);
-
-		// Verify our expected filtering logic
-		expect(expectedFilteredKeys).toContain('http.status_code');
-		expect(expectedFilteredKeys).not.toContain('service.name');
-		expect(expectedFilteredKeys).not.toContain('duration');
-
-		// Now verify the component's filtering ability by inputting the search text
-		const inputElement = screen
-			.getAllByRole('combobox')[0]
-			.querySelector('input');
-		if (inputElement) {
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-		}
-	});
-
-	it('triggers API call when complete is false and search text changes', async () => {
-		const mockRefetch = jest.fn();
-
-		// Set up the mock to indicate that data is not complete
-		// and needs to be fetched from the server
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: {
-				payload: {
-					keys: {
-						'http.status_code': [],
-					},
-					complete: false, // This indicates server-side filtering is needed
-				},
-			},
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		// Render with Logs as the initial source
-		render(
-			<DynamicVariable
-				{...DEFAULT_PROPS}
-				dynamicVariablesSelectedValue={{
-					name: '',
-					value: 'Logs',
-				}}
-			/>,
-		);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Now test the search functionality
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find the input element and simulate typing
-		const inputElement = document.querySelector(
-			'.ant-select-selection-search-input',
-		);
-
-		if (inputElement) {
-			// Simulate typing in the search input
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-
-			// Verify that the input has the correct value
-			expect((inputElement as HTMLInputElement).value).toBe('http');
-
-			// Wait for the effect to run and verify refetch was called
-			await waitFor(
-				() => {
-					expect(mockRefetch).toHaveBeenCalled();
-				},
-				{ timeout: 3000 },
-			); // Increase timeout to give more time for the effect to run
-		}
-	});
-
-	it('triggers refetch when attributeSource changes', async () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Find and click on the source select to open dropdown
-		const sourceSelectElement = getSourceSelect();
-		fireEvent.mouseDown(sourceSelectElement);
-
-		// Find and click on the "Metrics" option
-		const metricsOption = screen.getByText('Metrics');
-		fireEvent.click(metricsOption);
-
-		// Wait for the effect to run
-		await waitFor(() => {
-			// Verify that refetch was called after source selection
-			expect(mockRefetch).toHaveBeenCalled();
-		});
-	});
-
-	it('shows retry button when error occurs', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: 'Failed to fetch field keys' },
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find and click reload icon (retry button)
-		const reloadIcon = screen.getByLabelText('reload');
-		fireEvent.click(reloadIcon);
-
-		// Should trigger refetch
-		expect(mockRefetch).toHaveBeenCalled();
-	});
-});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.styles.scss

@@ -100,6 +100,7 @@
 
 			.variable-type-btn-group {
 				display: flex;
+				width: 342px;
 				height: 32px;
 				flex-shrink: 0;
 				border-radius: 2px;
@@ -198,21 +199,6 @@
 			}
 		}
 
-		.default-value-section {
-			display: grid;
-			grid-template-columns: max-content 1fr;
-
-			.default-value-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-		}
-
 		.variable-textbox-section {
 			justify-content: space-between;
 			margin-bottom: 0;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -6,9 +6,7 @@ import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
-import { CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { map } from 'lodash-es';
@@ -18,20 +16,16 @@ import {
 	ClipboardType,
 	DatabaseZap,
 	LayoutList,
-	Pyramid,
 	X,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
 import {
 	IDashboardVariable,
 	TSortVariableValuesType,
 	TVariableQueryType,
 	VariableSortTypeArr,
 } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
 import {
@@ -40,7 +34,6 @@ import {
 } from '../../../DashboardVariablesSelection/util';
 import { variablePropsToPayloadVariables } from '../../../utils';
 import { TVariableMode } from '../types';
-import DynamicVariable from './DynamicVariable/DynamicVariable';
 import { LabelContainer, VariableItemRow } from './styles';
 
 const { Option } = Select;
@@ -68,7 +61,7 @@ function VariableItem({
 		variableData.description || '',
 	);
 	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'DYNAMIC',
+		variableData.type || 'QUERY',
 	);
 	const [variableQueryValue, setVariableQueryValue] = useState<string>(
 		variableData.queryValue || '',
@@ -92,53 +85,11 @@ function VariableItem({
 		variableData.showALLOption || false,
 	);
 	const [previewValues, setPreviewValues] = useState<string[]>([]);
-	const [variableDefaultValue, setVariableDefaultValue] = useState<string>(
-		(variableData.defaultValue as string) || '',
-	);
 
-	const [
-		dynamicVariablesSelectedValue,
-		setDynamicVariablesSelectedValue,
-	] = useState<{ name: string; value: string }>();
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesAttribute &&
-			variableData.dynamicVariablesSource
-		) {
-			setDynamicVariablesSelectedValue({
-				name: variableData.dynamicVariablesAttribute,
-				value: variableData.dynamicVariablesSource,
-			});
-		}
-	}, [
-		variableData.dynamicVariablesAttribute,
-		variableData.dynamicVariablesSource,
-	]);
 	// Error messages
 	const [errorName, setErrorName] = useState<boolean>(false);
 	const [errorPreview, setErrorPreview] = useState<string | null>(null);
 
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { data: fieldValues } = useGetFieldValues({
-		signal:
-			dynamicVariablesSelectedValue?.value === 'All Sources'
-				? undefined
-				: (dynamicVariablesSelectedValue?.value?.toLowerCase() as
-						| 'traces'
-						| 'logs'
-						| 'metrics'),
-		name: dynamicVariablesSelectedValue?.name || '',
-		enabled:
-			!!dynamicVariablesSelectedValue?.name &&
-			!!dynamicVariablesSelectedValue?.value,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-	});
-
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -159,29 +110,6 @@ function VariableItem({
 		variableSortType,
 	]);
 
-	useEffect(() => {
-		if (
-			queryType === 'DYNAMIC' &&
-			fieldValues &&
-			dynamicVariablesSelectedValue?.name &&
-			dynamicVariablesSelectedValue?.value
-		) {
-			setPreviewValues(
-				sortValues(
-					fieldValues.payload?.normalizedValues || [],
-					variableSortType,
-				) as never,
-			);
-		}
-	}, [
-		fieldValues,
-		variableSortType,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-		dynamicVariablesSelectedValue,
-	]);
-
 	const handleSave = (): void => {
 		// Check for cyclic dependencies
 		const newVariable = {
@@ -198,16 +126,9 @@ function VariableItem({
 				selectedValue: (variableData.selectedValue ||
 					variableTextboxValue) as never,
 			}),
-			...(queryType !== 'TEXTBOX' && {
-				defaultValue: variableDefaultValue as never,
-			}),
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
-			...(queryType === 'DYNAMIC' && {
-				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
-				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
-			}),
 		};
 
 		const allVariables = [...Object.values(existingVariables), newVariable];
@@ -337,18 +258,18 @@ function VariableItem({
 						<div className="variable-type-btn-group">
 							<Button
 								type="text"
-								icon={<Pyramid size={14} />}
+								icon={<DatabaseZap size={14} />}
 								className={cx(
 									// eslint-disable-next-line sonarjs/no-duplicate-string
 									'variable-type-btn',
-									queryType === 'DYNAMIC' ? 'selected' : '',
+									queryType === 'QUERY' ? 'selected' : '',
 								)}
 								onClick={(): void => {
-									setQueryType('DYNAMIC');
+									setQueryType('QUERY');
 									setPreviewValues([]);
 								}}
 							>
-								Dynamic
+								Query
 							</Button>
 							<Button
 								type="text"
@@ -378,31 +299,8 @@ function VariableItem({
 							>
 								Custom
 							</Button>
-							<Button
-								type="text"
-								icon={<DatabaseZap size={14} />}
-								className={cx(
-									// eslint-disable-next-line sonarjs/no-duplicate-string
-									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('QUERY');
-									setPreviewValues([]);
-								}}
-							>
-								Query
-							</Button>
 						</div>
 					</VariableItemRow>
-					{queryType === 'DYNAMIC' && (
-						<div className="variable-dynamic-section">
-							<DynamicVariable
-								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
-								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
-							/>
-						</div>
-					)}
 					{queryType === 'QUERY' && (
 						<div className="query-container">
 							<LabelContainer>
@@ -490,9 +388,7 @@ function VariableItem({
 							/>
 						</VariableItemRow>
 					)}
-					{(queryType === 'QUERY' ||
-						queryType === 'CUSTOM' ||
-						queryType === 'DYNAMIC') && (
+					{(queryType === 'QUERY' || queryType === 'CUSTOM') && (
 						<>
 							<VariableItemRow className="variables-preview-section">
 								<LabelContainer style={{ width: '100%' }}>
@@ -561,25 +457,6 @@ function VariableItem({
 									/>
 								</VariableItemRow>
 							)}
-							<VariableItemRow className="default-value-section">
-								<LabelContainer>
-									<Typography className="typography-variables">Default Value</Typography>
-									<Typography className="default-value-description">
-										{queryType === 'QUERY'
-											? 'Click Test Run Query to see the values or add custom value'
-											: 'Select a value from the preview values or add custom value'}
-									</Typography>
-								</LabelContainer>
-								<CustomSelect
-									placeholder="Select a default value"
-									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value)}
-									options={previewValues.map((value) => ({
-										label: value,
-										value,
-									}))}
-								/>
-							</VariableItemRow>
 						</>
 					)}
 				</div>

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,15 +1,14 @@
-import { Row } from 'antd';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import './DashboardVariableSelection.styles.scss';
+
+import { Alert, Row } from 'antd';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import DynamicVariableSelection from './DynamicVariableSelection';
 import {
 	buildDependencies,
 	buildDependencyGraph,
@@ -28,8 +27,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 		setVariablesToGetUpdated,
 	} = useDashboard();
 
-	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
-
 	const { data } = selectedDashboard || {};
 
 	const { variables } = data || {};
@@ -63,11 +60,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 			tableRowData.sort((a, b) => a.order - b.order);
 
 			setVariablesTableData(tableRowData);
-
-			// Initialize variables with default values if not in URL
-			initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 		}
-	}, [getUrlVariables, updateUrlVariable, variables]);
+	}, [variables]);
 
 	useEffect(() => {
 		if (variablesTableData.length > 0) {
@@ -110,14 +104,12 @@ function DashboardVariableSelection(): JSX.Element | null {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
+		// isMountedCall?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
 			updateLocalStorageDashboardVariables(name, value, allSelected);
 
-			updateUrlVariable(id, value, allSelected);
-
 			if (selectedDashboard) {
 				setSelectedDashboard((prev) => {
 					if (prev) {
@@ -129,7 +121,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[id],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						if (oldVariables?.[name]) {
@@ -137,7 +128,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[name],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						return {
@@ -180,22 +170,22 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	return (
-		<Row style={{ display: 'flex', gap: '12px' }}>
-			{orderBasedSortedVariables &&
-				Array.isArray(orderBasedSortedVariables) &&
-				orderBasedSortedVariables.length > 0 &&
-				orderBasedSortedVariables.map((variable) =>
-					variable.type === 'DYNAMIC' ? (
-						<DynamicVariableSelection
-							key={`${variable.name}${variable.id}}${variable.order}`}
-							existingVariables={variables}
-							variableData={{
-								name: variable.name,
-								...variable,
-							}}
-							onValueUpdate={onValueUpdate}
-						/>
-					) : (
+		<>
+			{dependencyData?.hasCycle && (
+				<Alert
+					message={`Circular dependency detected: ${dependencyData?.cycleNodes?.join(
+						' → ',
+					)}`}
+					type="error"
+					showIcon
+					className="cycle-error-alert"
+				/>
+			)}
+			<Row style={{ display: 'flex', gap: '12px' }}>
+				{orderBasedSortedVariables &&
+					Array.isArray(orderBasedSortedVariables) &&
+					orderBasedSortedVariables.length > 0 &&
+					orderBasedSortedVariables.map((variable) => (
 						<VariableItem
 							key={`${variable.name}${variable.id}}${variable.order}`}
 							existingVariables={variables}
@@ -208,9 +198,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 							setVariablesToGetUpdated={setVariablesToGetUpdated}
 							dependencyData={dependencyData}
 						/>
-					),
-				)}
-		</Row>
+					))}
+			</Row>
+		</>
 	);
 }
 

frontend/src/container/NewDashboard/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -1,385 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-nested-ternary */
-import './DashboardVariableSelection.styles.scss';
-
-import { Tooltip, Typography } from 'antd';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
-import { isEmpty, isUndefined } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-import { areArraysEqual } from './util';
-import { getSelectValue } from './VariableItem';
-
-interface DynamicVariableSelectionProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		arg1: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-}
-
-function DynamicVariableSelection({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableSelectionProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) return 'no_variables';
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-		],
-		{
-			enabled: variableData.type === 'DYNAMIC',
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all sources'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-				),
-			onSuccess: (data) => {
-				setOptionsData(data.payload?.normalizedValues || []);
-				setIsComplete(data.payload?.complete || false);
-				setFilteredOptionsData(data.payload?.normalizedValues || []);
-			},
-			onError: (error: any) => {
-				if (error) {
-					let message = SOMETHING_WENT_WRONG;
-					if (error?.message) {
-						message = error?.message;
-					} else {
-						message =
-							'Please make sure configuration is valid and you have required setup and permissions';
-					}
-					setErrorMessage(message);
-				}
-			},
-		},
-	);
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(
-						variableData.name,
-						variableData.id,
-						value,
-						optionsData.every((v) => value.includes(v.toString())),
-						Array.isArray(value) &&
-							!value.every((v) => optionsData.includes(v.toString())),
-					);
-				}
-			}
-		},
-		[variableData, onValueUpdate, optionsData],
-	);
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesSource &&
-			variableData.dynamicVariablesAttribute
-		) {
-			refetch();
-		}
-	}, [
-		refetch,
-		variableData.dynamicVariablesSource,
-		variableData.dynamicVariablesAttribute,
-		debouncedApiSearchText,
-	]);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					return;
-				}
-
-				const localFilteredOptionsData: (string | number | boolean)[] = [];
-				optionsData.forEach((option) => {
-					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
-						localFilteredOptionsData.push(option);
-					}
-				});
-				setFilteredOptionsData(localFilteredOptionsData);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData],
-	);
-
-	const { selectedValue } = variableData;
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
-			: selectedValueStringified;
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = (inputValue: string | string[]): void => {
-		// Store the selection in temporary state while dropdown is open
-		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-		setTempSelection(value);
-	};
-
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
-				// set all options from the optionsData and the selectedValue, make sure to remove duplicates
-				const allOptions = [
-					...new Set([
-						...optionsData.map((option) => option.toString()),
-						...(variableData.selectedValue
-							? Array.isArray(variableData.selectedValue)
-								? variableData.selectedValue.map((v) => v.toString())
-								: [variableData.selectedValue.toString()]
-							: []),
-					]),
-				];
-				setTempSelection(allOptions);
-			} else {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-			}
-		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Call handleChange with the temporarily stored selection
-			handleChange(tempSelection);
-			setTempSelection(undefined);
-		}
-	};
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
-
-	return (
-		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
-				${variableData.name}
-			</Typography.Text>
-			<div className="variable-value">
-				{variableData.multiSelect ? (
-					<CustomMultiSelect
-						key={
-							selectValue && Array.isArray(selectValue)
-								? selectValue.join(' ')
-								: selectValue || variableData.id
-						}
-						options={filteredOptionsData.map((option) => ({
-							label: option.toString(),
-							value: option.toString(),
-						}))}
-						defaultValue={variableData.defaultValue}
-						onChange={handleTempChange}
-						bordered={false}
-						placeholder="Select value"
-						placement="bottomLeft"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						maxTagCount={2}
-						getPopupContainer={popupContainer}
-						value={
-							(tempSelection || selectValue) === ALL_SELECT_VALUE
-								? 'ALL'
-								: tempSelection || selectValue
-						}
-						onDropdownVisibleChange={handleDropdownVisibleChange}
-						errorMessage={errorMessage}
-						// eslint-disable-next-line react/no-unstable-nested-components
-						maxTagPlaceholder={(omittedValues): JSX.Element => (
-							<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
-								<span>+ {omittedValues.length} </span>
-							</Tooltip>
-						)}
-						onClear={(): void => {
-							handleChange([]);
-						}}
-						enableAllSelection={enableSelectAll}
-						maxTagTextLength={30}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				) : (
-					<CustomSelect
-						key={
-							selectValue && Array.isArray(selectValue)
-								? selectValue.join(' ')
-								: selectValue || variableData.id
-						}
-						onChange={handleChange}
-						bordered={false}
-						placeholder="Select value"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						getPopupContainer={popupContainer}
-						options={filteredOptionsData.map((option) => ({
-							label: option.toString(),
-							value: option.toString(),
-						}))}
-						value={selectValue}
-						defaultValue={variableData.defaultValue}
-						errorMessage={errorMessage}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DynamicVariableSelection;

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -8,14 +8,23 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import { Input, Popover, Tooltip, Typography } from 'antd';
+import {
+	Checkbox,
+	Input,
+	Popover,
+	Select,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { debounce, isArray, isEmpty, isString } from 'lodash-es';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isString } from 'lodash-es';
+import map from 'lodash-es/map';
+import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -24,10 +33,17 @@ import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
+import { variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
 import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';
 
+const ALL_SELECT_VALUE = '__ALL__';
+
+enum ToggleTagValue {
+	Only = 'Only',
+	All = 'All',
+}
+
 interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
@@ -42,7 +58,7 @@ interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
-export const getSelectValue = (
+const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
 ): string | string[] | undefined => {
@@ -67,9 +83,6 @@ function VariableItem({
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
 	);
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -133,10 +146,18 @@ function VariableItem({
 							variableData.name &&
 							(validVariableUpdate() || valueNotInList || variableData.allSelected)
 						) {
-							const value = variableData.selectedValue;
+							let value = variableData.selectedValue;
 							let allSelected = false;
-
-							if (variableData.multiSelect) {
+							// The default value for multi-select is ALL and first value for
+							// single select
+							if (valueNotInList) {
+								if (variableData.multiSelect) {
+									value = newOptionsData;
+									allSelected = true;
+								} else {
+									[value] = newOptionsData;
+								}
+							} else if (variableData.multiSelect) {
 								const { selectedValue } = variableData;
 								allSelected =
 									newOptionsData.length > 0 &&
@@ -221,57 +242,26 @@ function VariableItem({
 		},
 	);
 
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
-		},
-		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			onValueUpdate,
-			optionsData,
-		],
-	);
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = (inputValue: string | string[]): void => {
-		// Store the selection in temporary state while dropdown is open
+	const handleChange = (inputValue: string | string[]): void => {
 		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-		setTempSelection(value);
-	};
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		if (
+			value === variableData.selectedValue ||
+			(Array.isArray(value) &&
+				Array.isArray(variableData.selectedValue) &&
+				areArraysEqual(value, variableData.selectedValue))
+		) {
+			return;
 		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Call handleChange with the temporarily stored selection
-			handleChange(tempSelection);
-			setTempSelection(undefined);
+		if (variableData.name) {
+			if (
+				value === ALL_SELECT_VALUE ||
+				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+			) {
+				onValueUpdate(variableData.name, variableData.id, optionsData, true);
+			} else {
+				onValueUpdate(variableData.name, variableData.id, value, false);
+			}
 		}
 	};
 
@@ -291,58 +281,10 @@ function VariableItem({
 			? 'ALL'
 			: selectedValueStringified;
 
-	// Apply default value on first render if no selection exists
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
+	const mode: 'multiple' | undefined =
+		variableData.multiSelect && !variableData.allSelected
+			? 'multiple'
+			: undefined;
 
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
@@ -352,6 +294,113 @@ function VariableItem({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [variableData.type, variableData.customValue]);
 
+	const checkAll = (e: MouseEvent): void => {
+		e.stopPropagation();
+		e.preventDefault();
+		const isChecked =
+			variableData.allSelected || selectValue?.includes(ALL_SELECT_VALUE);
+
+		if (isChecked) {
+			handleChange([]);
+		} else {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const handleOptionSelect = (
+		e: CheckboxChangeEvent,
+		option: string | number | boolean,
+	): void => {
+		const newSelectedValue = Array.isArray(selectedValue)
+			? ((selectedValue.filter(
+					(val) => val.toString() !== option.toString(),
+			  ) as unknown) as string[])
+			: [];
+
+		if (
+			!e.target.checked &&
+			Array.isArray(selectedValueStringified) &&
+			selectedValueStringified.includes(option.toString())
+		) {
+			if (newSelectedValue.length === 1) {
+				handleChange(newSelectedValue[0].toString());
+				return;
+			}
+			handleChange(newSelectedValue);
+		} else if (!e.target.checked && selectedValue === option.toString()) {
+			handleChange(ALL_SELECT_VALUE);
+		} else if (newSelectedValue.length === optionsData.length - 1) {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const [optionState, setOptionState] = useState({
+		tag: '',
+		visible: false,
+	});
+
+	function currentToggleTagValue({
+		option,
+	}: {
+		option: string;
+	}): ToggleTagValue {
+		if (
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) &&
+				selectValue?.includes(option.toString()) &&
+				selectValue.length === 1)
+		) {
+			return ToggleTagValue.All;
+		}
+		return ToggleTagValue.Only;
+	}
+
+	function handleToggle(e: ChangeEvent, option: string): void {
+		e.stopPropagation();
+		const mode = currentToggleTagValue({ option: option as string });
+		const isChecked =
+			variableData.allSelected ||
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) && selectValue?.includes(option.toString()));
+
+		if (isChecked) {
+			if (mode === ToggleTagValue.Only && variableData.multiSelect) {
+				handleChange([option.toString()]);
+			} else if (!variableData.multiSelect) {
+				handleChange(option.toString());
+			} else {
+				handleChange(ALL_SELECT_VALUE);
+			}
+		} else {
+			handleChange(option.toString());
+		}
+	}
+
+	function retProps(
+		option: string,
+	): {
+		onMouseOver: () => void;
+		onMouseOut: () => void;
+	} {
+		return {
+			onMouseOver: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: true,
+				}),
+			onMouseOut: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: false,
+				}),
+		};
+	}
+
+	const ensureValidOption = (option: string): boolean =>
+		!(
+			currentToggleTagValue({ option }) === ToggleTagValue.All && !enableSelectAll
+		);
+
 	return (
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
@@ -379,73 +428,105 @@ function VariableItem({
 						}}
 					/>
 				) : (
-					optionsData &&
-					(variableData.multiSelect ? (
-						<CustomMultiSelect
+					!errorMessage &&
+					optionsData && (
+						<Select
 							key={
 								selectValue && Array.isArray(selectValue)
 									? selectValue.join(' ')
 									: selectValue || variableData.id
 							}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							defaultValue={variableData.defaultValue || selectValue}
-							onChange={handleTempChange}
+							defaultValue={selectValue}
+							onChange={handleChange}
 							bordered={false}
 							placeholder="Select value"
 							placement="bottomLeft"
+							mode={mode}
 							style={SelectItemStyle}
 							loading={isLoading}
 							showSearch
 							data-testid="variable-select"
 							className="variable-select"
 							popupClassName="dropdown-styles"
-							maxTagCount={2}
+							maxTagCount={4}
 							getPopupContainer={popupContainer}
-							value={tempSelection || selectValue}
-							onDropdownVisibleChange={handleDropdownVisibleChange}
-							errorMessage={errorMessage}
+							// eslint-disable-next-line react/no-unstable-nested-components
+							tagRender={(props): JSX.Element => (
+								<Tag closable onClose={props.onClose}>
+									{props.value}
+								</Tag>
+							)}
 							// eslint-disable-next-line react/no-unstable-nested-components
 							maxTagPlaceholder={(omittedValues): JSX.Element => (
 								<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
 									<span>+ {omittedValues.length} </span>
 								</Tooltip>
 							)}
-							onClear={(): void => {
-								handleChange([]);
-							}}
-							enableAllSelection={enableSelectAll}
-							maxTagTextLength={30}
 							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
-						/>
-					) : (
-						<CustomSelect
-							key={
-								selectValue && Array.isArray(selectValue)
-									? selectValue.join(' ')
-									: selectValue || variableData.id
-							}
-							defaultValue={variableData.defaultValue || selectValue}
-							onChange={handleChange}
-							bordered={false}
-							placeholder="Select value"
-							style={SelectItemStyle}
-							loading={isLoading}
-							showSearch
-							data-testid="variable-select"
-							className="variable-select"
-							popupClassName="dropdown-styles"
-							getPopupContainer={popupContainer}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							value={selectValue}
-							errorMessage={errorMessage}
-						/>
-					))
+						>
+							{enableSelectAll && (
+								<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
+									<div className="all-label" onClick={(e): void => checkAll(e as any)}>
+										<Checkbox checked={variableData.allSelected} />
+										ALL
+									</div>
+								</Select.Option>
+							)}
+							{map(optionsData, (option) => (
+								<Select.Option
+									data-testid={`option-${option}`}
+									key={option.toString()}
+									value={option}
+								>
+									<div
+										className={variableData.multiSelect ? 'dropdown-checkbox-label' : ''}
+									>
+										{variableData.multiSelect && (
+											<Checkbox
+												onChange={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													handleOptionSelect(e, option);
+												}}
+												checked={
+													variableData.allSelected ||
+													option.toString() === selectValue ||
+													(Array.isArray(selectValue) &&
+														selectValue?.includes(option.toString()))
+												}
+											/>
+										)}
+										<div
+											className="dropdown-value"
+											{...retProps(option as string)}
+											onClick={(e): void => handleToggle(e as any, option as string)}
+										>
+											<Typography.Text
+												ellipsis={{
+													tooltip: {
+														placement: variableData.multiSelect ? 'top' : 'right',
+														autoAdjustOverflow: true,
+													},
+												}}
+												className="option-text"
+											>
+												{option.toString()}
+											</Typography.Text>
+
+											{variableData.multiSelect &&
+												optionState.tag === option.toString() &&
+												optionState.visible &&
+												ensureValidOption(option as string) && (
+													<Typography.Text className="toggle-tag-label">
+														{currentToggleTagValue({ option: option as string })}
+													</Typography.Text>
+												)}
+										</div>
+									</div>
+								</Select.Option>
+							))}
+						</Select>
+					)
 				)}
 				{variableData.type !== 'TEXTBOX' && errorMessage && (
 					<span style={{ margin: '0 0.5rem' }}>

frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/DynamicVariableSelection.test.tsx

@@ -1,274 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as ReactQuery from 'react-query';
-import * as ReactRedux from 'react-redux';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import DynamicVariableSelection from '../DynamicVariableSelection';
-
-// Don't mock the components - use real ones
-
-// Mock for useQuery
-const mockQueryResult = {
-	data: undefined,
-	error: null,
-	isError: false,
-	isIdle: false,
-	isLoading: false,
-	isPreviousData: false,
-	isSuccess: true,
-	status: 'success',
-	isFetched: true,
-	isFetchingNextPage: false,
-	isFetchingPreviousPage: false,
-	isPlaceholderData: false,
-	isPaused: false,
-	isRefetchError: false,
-	isRefetching: false,
-	isStale: false,
-	isLoadingError: false,
-	isFetching: false,
-	isFetchedAfterMount: true,
-	dataUpdatedAt: 0,
-	errorUpdatedAt: 0,
-	failureCount: 0,
-	refetch: jest.fn(),
-	remove: jest.fn(),
-	fetchNextPage: jest.fn(),
-	fetchPreviousPage: jest.fn(),
-	hasNextPage: false,
-	hasPreviousPage: false,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-} as any;
-
-// Sample data for testing
-const mockApiResponse = {
-	payload: {
-		normalizedValues: ['frontend', 'backend', 'database'],
-		complete: true,
-	},
-	statusCode: 200,
-};
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-describe('DynamicVariableSelection Component', () => {
-	const mockOnValueUpdate = jest.fn();
-
-	const mockDynamicVariableData: IDashboardVariable = {
-		id: 'var1',
-		name: 'service',
-		type: 'DYNAMIC',
-		dynamicVariablesAttribute: 'service.name',
-		dynamicVariablesSource: 'Traces',
-		selectedValue: 'frontend',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		description: '',
-		sort: 'DISABLED',
-	};
-
-	const mockMultiSelectDynamicVariableData: IDashboardVariable = {
-		...mockDynamicVariableData,
-		id: 'var2',
-		name: 'services',
-		multiSelect: true,
-		selectedValue: ['frontend', 'backend'],
-		showALLOption: true,
-	};
-
-	const mockExistingVariables: Record<string, IDashboardVariable> = {
-		var1: mockDynamicVariableData,
-		var2: mockMultiSelectDynamicVariableData,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockOnValueUpdate.mockClear();
-
-		// Mock useSelector
-		const useSelectorSpy = jest.spyOn(ReactRedux, 'useSelector');
-		useSelectorSpy.mockReturnValue({
-			minTime: '2023-01-01T00:00:00Z',
-			maxTime: '2023-01-02T00:00:00Z',
-		});
-
-		// Mock useQuery with success state
-		const useQuerySpy = jest.spyOn(ReactQuery, 'useQuery');
-		useQuerySpy.mockReturnValue({
-			...mockQueryResult,
-			data: mockApiResponse,
-			isLoading: false,
-			error: null,
-		});
-	});
-
-	it('renders with single select variable correctly', () => {
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify component renders correctly
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// Verify the selected value is displayed
-		const selectedItem = screen.getByRole('combobox');
-		expect(selectedItem).toBeInTheDocument();
-
-		// CustomSelect doesn't use the 'mode' attribute for single select
-		expect(selectedItem).not.toHaveAttribute('mode');
-	});
-
-	it('renders with multi select variable correctly', () => {
-		// First set up allSelected to true to properly test the ALL display
-		const multiSelectWithAllSelected = {
-			...mockMultiSelectDynamicVariableData,
-			allSelected: true,
-		};
-
-		render(
-			<DynamicVariableSelection
-				variableData={multiSelectWithAllSelected}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify variable name is rendered
-		expect(
-			screen.getByText(`$${multiSelectWithAllSelected.name}`),
-		).toBeInTheDocument();
-
-		// In ALL selected mode, there should be an "ALL" text element
-		expect(screen.getByText('ALL')).toBeInTheDocument();
-	});
-
-	it('shows loading state correctly', () => {
-		// Mock loading state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: true,
-			isFetching: true,
-			isSuccess: false,
-			status: 'loading',
-		});
-
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify component renders in loading state
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// Open dropdown to see loading text
-		const selectElement = screen.getByRole('combobox');
-		fireEvent.mouseDown(selectElement);
-
-		// The loading text should appear in the dropdown
-		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
-	});
-
-	it('handles error state correctly', () => {
-		const errorMessage = 'Failed to fetch data';
-
-		// Mock error state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: false,
-			isSuccess: false,
-			isError: true,
-			status: 'error',
-			error: { message: errorMessage },
-		});
-
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the component renders
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// For error states, we should check that error handling is in place
-		// Without opening the dropdown as the error message might be handled differently
-		expect(ReactQuery.useQuery).toHaveBeenCalled();
-		// We don't need to check refetch as it might be called during component initialization
-	});
-
-	it('makes API call to fetch variable values', () => {
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the useQuery hook was called with expected parameters
-		expect(ReactQuery.useQuery).toHaveBeenCalledWith(
-			[
-				'DASHBOARD_BY_ID',
-				mockDynamicVariableData.name,
-				'service:"frontend"|services:["frontend","backend"]', // The actual dynamicVariablesKey
-				'2023-01-01T00:00:00Z', // minTime from useSelector mock
-				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
-			],
-			expect.objectContaining({
-				enabled: true, // Type is 'DYNAMIC'
-				queryFn: expect.any(Function),
-				onSuccess: expect.any(Function),
-				onError: expect.any(Function),
-			}),
-		);
-	});
-
-	it('has the correct selected value', () => {
-		// Use a different variable configuration to test different behavior
-		const customVariable = {
-			...mockDynamicVariableData,
-			id: 'custom1',
-			name: 'customService',
-			selectedValue: 'backend',
-		};
-
-		render(
-			<DynamicVariableSelection
-				variableData={customVariable}
-				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the component correctly displays the selected value
-		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
-
-		// Find the selection item in the component using data-testid
-		const selectElement = screen.getByTestId('variable-select');
-		expect(selectElement).toBeInTheDocument();
-
-		// Check that the selected value is displayed in the select element
-		expect(selectElement).toHaveTextContent('backend');
-	});
-});

frontend/src/container/NewDashboard/utils.ts

@@ -14,5 +14,3 @@ export function variablePropsToPayloadVariables(
 
 	return payloadVariables;
 }
-
-export const ALL_SELECT_VALUE = '__ALL__';

frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts

@@ -30,5 +30,14 @@ export type QueryBuilderProps = {
 	isListViewPanel?: boolean;
 	showFunctions?: boolean;
 	showOnlyWhereClause?: boolean;
+	showOnlyTraceOperator?: boolean;
+	showTraceViewSelector?: boolean;
+	showTraceOperator?: boolean;
 	version: string;
+	onChangeTraceView?: (view: TraceView) => void;
 };
+
+export enum TraceView {
+	SPANS = 'spans',
+	TRACES = 'traces',
+}

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -39,6 +39,7 @@ interface QBEntityOptionsProps {
 	showCloneOption?: boolean;
 	isListViewPanel?: boolean;
 	index?: number;
+	hasTraceOperator?: boolean;
 	queryVariant?: 'dropdown' | 'static';
 	onChangeDataSource?: (value: DataSource) => void;
 }
@@ -61,6 +62,7 @@ export default function QBEntityOptions({
 	onCloneQuery,
 	index,
 	queryVariant,
+	hasTraceOperator = false,
 	onChangeDataSource,
 }: QBEntityOptionsProps): JSX.Element {
 	const handleCloneEntity = (): void => {
@@ -97,7 +99,7 @@ export default function QBEntityOptions({
 									value="query-builder"
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
-									disabled={isListViewPanel}
+									disabled={isListViewPanel && query?.dataSource !== DataSource.TRACES}
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -115,6 +117,7 @@ export default function QBEntityOptions({
 								className={cx(
 									'periscope-btn',
 									entityType === 'query' ? 'query-name' : 'formula-name',
+									hasTraceOperator && 'has-trace-operator',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
 								)}
 							>

frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts

@@ -11,5 +11,7 @@ export type QueryProps = {
 	version: string;
 	showSpanScopeSelector?: boolean;
 	showOnlyWhereClause?: boolean;
+	showTraceOperator?: boolean;
 	signalSource?: string;
+	isMultiQueryAllowed?: boolean;
 } & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

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

@@ -37,11 +37,15 @@ function QuerySection(): JSX.Element {
 		};
 	}, [panelTypes, renderOrderBy]);
 
+	const isListViewPanel = useMemo(
+		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
+		[panelTypes],
+	);
+
 	return (
 		<QueryBuilderV2
-			isListViewPanel={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
+			isListViewPanel={isListViewPanel}
+			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			queryComponents={queryComponents}
 			panelType={panelTypes}

frontend/src/hooks/dashboard/__test__/useVariablesFromUrl.test.tsx

@@ -1,169 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { QueryParams } from 'constants/query';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import useVariablesFromUrl from '../useVariablesFromUrl';
-
-describe('useVariablesFromUrl', () => {
-	it('should initialize with empty variables when no URL params exist', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		expect(result.current.getUrlVariables()).toEqual({});
-	});
-
-	it('should correctly parse variables from URL', () => {
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-			var2: { selectedValue: ['value2', 'value3'], allSelected: true },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		expect(result.current.getUrlVariables()).toEqual(mockVariables);
-	});
-
-	it('should handle malformed URL parameters gracefully', () => {
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=invalid-json`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		// Should return empty object when JSON parsing fails
-		expect(result.current.getUrlVariables()).toEqual({});
-	});
-
-	it('should set variables to URL correctly', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		act(() => {
-			result.current.setUrlVariables(mockVariables);
-		});
-
-		// Check if the URL was updated correctly
-		const searchParams = new URLSearchParams(history.location.search);
-		const urlVariables = searchParams.get(QueryParams.variableConfigs);
-
-		expect(urlVariables).toBeTruthy();
-		expect(JSON.parse(decodeURIComponent(urlVariables || ''))).toEqual(
-			mockVariables,
-		);
-	});
-
-	it('should remove variables param from URL when empty object is provided', () => {
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		act(() => {
-			result.current.setUrlVariables({});
-		});
-
-		// Check if the URL param was removed
-		const searchParams = new URLSearchParams(history.location.search);
-		expect(searchParams.has(QueryParams.variableConfigs)).toBe(false);
-	});
-
-	it('should update a specific variable correctly', () => {
-		const initialVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-			var2: { selectedValue: ['value2'], allSelected: true },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(initialVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const newValue: IDashboardVariable['selectedValue'] = 'updated-value';
-
-		act(() => {
-			result.current.updateUrlVariable('var1', newValue, true);
-		});
-
-		// Check if only the specified variable was updated
-		const updatedVariables = result.current.getUrlVariables();
-		expect(updatedVariables.var1).toEqual({
-			selectedValue: newValue,
-			allSelected: true,
-		});
-		expect(updatedVariables.var2).toEqual(initialVariables.var2);
-	});
-
-	it('should preserve other URL parameters when updating variables', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/?otherParam=value'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		act(() => {
-			result.current.setUrlVariables(mockVariables);
-		});
-
-		// Check if other params are preserved
-		const searchParams = new URLSearchParams(history.location.search);
-		expect(searchParams.get('otherParam')).toBe('value');
-		expect(searchParams.has(QueryParams.variableConfigs)).toBe(true);
-	});
-});

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -1,102 +0,0 @@
-import { QueryParams } from 'constants/query';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-interface LocalStoreDashboardVariables {
-	[id: string]: {
-		selectedValue: IDashboardVariable['selectedValue'];
-		allSelected: boolean;
-	};
-}
-
-interface UseVariablesFromUrlReturn {
-	getUrlVariables: () => LocalStoreDashboardVariables;
-	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
-	updateUrlVariable: (
-		id: string,
-		selectedValue: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void;
-	clearUrlVariables: () => void;
-}
-
-const useVariablesFromUrl = (): UseVariablesFromUrlReturn => {
-	const urlQuery = useUrlQuery();
-	const history = useHistory();
-
-	const getUrlVariables = useCallback((): LocalStoreDashboardVariables => {
-		const variableConfigsParam = urlQuery.get(QueryParams.variableConfigs);
-
-		if (!variableConfigsParam) {
-			return {};
-		}
-
-		try {
-			return JSON.parse(decodeURIComponent(variableConfigsParam));
-		} catch (error) {
-			console.error('Failed to parse variables from URL:', error);
-			return {};
-		}
-	}, [urlQuery]);
-
-	const setUrlVariables = useCallback(
-		(variables: LocalStoreDashboardVariables): void => {
-			const params = new URLSearchParams(urlQuery.toString());
-
-			if (Object.keys(variables).length === 0) {
-				params.delete(QueryParams.variableConfigs);
-			} else {
-				try {
-					const encodedVariables = encodeURIComponent(JSON.stringify(variables));
-					params.set(QueryParams.variableConfigs, encodedVariables);
-				} catch (error) {
-					console.error('Failed to serialize variables for URL:', error);
-				}
-			}
-
-			history.replace({
-				search: params.toString(),
-			});
-		},
-		[history, urlQuery],
-	);
-
-	const clearUrlVariables = useCallback((): void => {
-		const params = new URLSearchParams(urlQuery.toString());
-		params.delete(QueryParams.variableConfigs);
-		params.delete('options');
-
-		history.replace({
-			search: params.toString(),
-		});
-	}, [history, urlQuery]);
-
-	const updateUrlVariable = useCallback(
-		(
-			id: string,
-			selectedValue: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-		): void => {
-			const currentVariables = getUrlVariables();
-
-			const updatedVariables = {
-				...currentVariables,
-				[id]: { selectedValue, allSelected },
-			};
-
-			setUrlVariables(updatedVariables);
-		},
-		[getUrlVariables, setUrlVariables],
-	);
-
-	return {
-		getUrlVariables,
-		setUrlVariables,
-		updateUrlVariable,
-		clearUrlVariables,
-	};
-};
-
-export default useVariablesFromUrl;

frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts

@@ -1,35 +0,0 @@
-import { getFieldKeys } from 'api/dynamicVariables/getFieldKeys';
-import { useQuery, UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-interface UseGetFieldKeysProps {
-	/** Type of signal (traces, logs, metrics) */
-	signal?: 'traces' | 'logs' | 'metrics';
-	/** Optional search text */
-	name?: string;
-	/** Whether the query should be enabled */
-	enabled?: boolean;
-}
-
-/**
- * Hook to fetch field keys for a given signal type
- *
- * If 'complete' in the response is true:
- * - All subsequent searches should be local (client has complete list)
- *
- * If 'complete' is false:
- * - All subsequent searches should use the API (passing the name param)
- */
-export const useGetFieldKeys = ({
-	signal,
-	name,
-	enabled = true,
-}: UseGetFieldKeysProps): UseQueryResult<
-	SuccessResponse<FieldKeyResponse> | ErrorResponse
-> =>
-	useQuery<SuccessResponse<FieldKeyResponse> | ErrorResponse>({
-		queryKey: ['fieldKeys', signal, name],
-		queryFn: () => getFieldKeys(signal, name),
-		enabled,
-	});

frontend/src/hooks/dynamicVariables/useGetFieldValues.ts

@@ -1,45 +0,0 @@
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { useQuery, UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-interface UseGetFieldValuesProps {
-	/** Type of signal (traces, logs, metrics) */
-	signal?: 'traces' | 'logs' | 'metrics';
-	/** Name of the attribute for which values are being fetched */
-	name: string;
-	/** Optional search text */
-	value?: string;
-	/** Whether the query should be enabled */
-	enabled?: boolean;
-	/** Start Unix Milli */
-	startUnixMilli?: number;
-	/** End Unix Milli */
-	endUnixMilli?: number;
-}
-
-/**
- * Hook to fetch field values for a given signal type and field name
- *
- * If 'complete' in the response is true:
- * - All subsequent searches should be local (client has complete list)
- *
- * If 'complete' is false:
- * - All subsequent searches should use the API (passing the value param)
- */
-export const useGetFieldValues = ({
-	signal,
-	name,
-	value,
-	startUnixMilli,
-	endUnixMilli,
-	enabled = true,
-}: UseGetFieldValuesProps): UseQueryResult<
-	SuccessResponse<FieldValueResponse> | ErrorResponse
-> =>
-	useQuery<SuccessResponse<FieldValueResponse> | ErrorResponse>({
-		queryKey: ['fieldValues', signal, name, value, startUnixMilli, endUnixMilli],
-		queryFn: () =>
-			getFieldValues(signal, name, value, startUnixMilli, endUnixMilli),
-		enabled,
-	});

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -54,9 +54,11 @@ export const useQueryOperations: UseQueryOperations = ({
 	formula,
 	isListViewPanel = false,
 	entityVersion,
+	isForTraceOperator = false,
 }) => {
 	const {
 		handleSetQueryData,
+		handleSetTraceOperatorData,
 		handleSetFormulaData,
 		removeQueryBuilderEntityByIndex,
 		panelType,
@@ -400,9 +402,19 @@ export const useQueryOperations: UseQueryOperations = ({
 						: value,
 			};
 
-			handleSetQueryData(index, newQuery);
+			if (isForTraceOperator) {
+				handleSetTraceOperatorData(index, newQuery);
+			} else {
+				handleSetQueryData(index, newQuery);
+			}
 		},
-		[query, index, handleSetQueryData],
+		[
+			query,
+			index,
+			handleSetQueryData,
+			handleSetTraceOperatorData,
+			isForTraceOperator,
+		],
 	);
 
 	const handleChangeFormulaData: HandleChangeFormulaData = useCallback(

frontend/src/lib/dashbaordVariables/getDashboardVariables.ts

@@ -23,12 +23,7 @@ export const getDashboardVariables = (
 
 		Object.entries(variables).forEach(([, value]) => {
 			if (value?.name) {
-				variablesTuple[value.name] =
-					value?.type === 'DYNAMIC' &&
-					value?.allSelected &&
-					!value?.haveCustomValuesSelected
-						? '__all__'
-						: value?.selectedValue;
+				variablesTuple[value.name] = value?.selectedValue;
 			}
 		});
 

frontend/src/pages/TracesExplorer/index.tsx

@@ -53,7 +53,6 @@ function TracesExplorer(): JSX.Element {
 		handleRunQuery,
 		stagedQuery,
 		handleSetConfig,
-		updateQueriesData,
 	} = useQueryBuilder();
 
 	const { options } = useOptionsMenu({
@@ -112,48 +111,14 @@ function TracesExplorer(): JSX.Element {
 				handleSetConfig(PANEL_TYPES.LIST, DataSource.TRACES);
 			}
 
-			if (view === ExplorerViews.LIST) {
-				if (
-					selectedView !== ExplorerViews.LIST &&
-					currentQuery?.builder?.queryData?.[0]
-				) {
-					const filterToRetain = currentQuery.builder.queryData[0].filter;
-
-					const newDefaultQuery = updateAllQueriesOperators(
-						initialQueriesMap.traces,
-						PANEL_TYPES.LIST,
-						DataSource.TRACES,
-					);
-
-					const newListQuery = updateQueriesData(
-						newDefaultQuery,
-						'queryData',
-						(item, index) => {
-							if (index === 0) {
-								return { ...item, filter: filterToRetain };
-							}
-							return item;
-						},
-					);
-					setDefaultQuery(newListQuery);
-				}
-				setShouldReset(true);
-			}
+			// TODO: remove formula when switching to List view
 
 			setSelectedView(view);
 			handleExplorerTabChange(
 				view === ExplorerViews.TIMESERIES ? PANEL_TYPES.TIME_SERIES : view,
 			);
 		},
-		[
-			handleSetConfig,
-			handleExplorerTabChange,
-			selectedView,
-			currentQuery,
-			updateAllQueriesOperators,
-			updateQueriesData,
-			setSelectedView,
-		],
+		[handleSetConfig, handleExplorerTabChange, selectedView, setSelectedView],
 	);
 
 	const listQuery = useMemo(() => {

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -7,7 +7,6 @@ import ROUTES from 'constants/routes';
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
 import dayjs, { Dayjs } from 'dayjs';
 import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useTabVisibility from 'hooks/useTabFocus';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -17,7 +16,6 @@ import isEqual from 'lodash-es/isEqual';
 import isUndefined from 'lodash-es/isUndefined';
 import omitBy from 'lodash-es/omitBy';
 import { useAppContext } from 'providers/App/App';
-import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import {
 	createContext,
@@ -200,12 +198,6 @@ export function DashboardProvider({
 		updateLocalStorageDashboardVariables,
 	} = useDashboardVariablesFromLocalStorage(dashboardId);
 
-	const {
-		getUrlVariables,
-		updateUrlVariable,
-		clearUrlVariables,
-	} = useVariablesFromUrl();
-
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
 
@@ -216,14 +208,6 @@ export function DashboardProvider({
 
 	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
 
-	// Clear variable configs when not on dashboard pages
-	useEffect(() => {
-		const isOnDashboardPage = !!isDashboardPage || !!isDashboardWidgetPage;
-		if (!isOnDashboardPage) {
-			clearUrlVariables();
-		}
-	}, [isDashboardPage, isDashboardWidgetPage, clearUrlVariables]);
-
 	const mergeDBWithLocalStorage = (
 		data: Dashboard,
 		localStorageVariables: any,
@@ -233,23 +217,11 @@ export function DashboardProvider({
 			const updatedVariables = data.data.variables;
 			Object.keys(data.data.variables).forEach((variable) => {
 				const variableData = data.data.variables[variable];
-
-				// values from url
-				const urlVariable = getUrlVariables()[variableData.id];
-
-				let updatedVariable = {
+				const updatedVariable = {
 					...data.data.variables[variable],
 					...localStorageVariables[variableData.name as any],
 				};
 
-				// respect the url variable if it is set, override the others
-				if (urlVariable) {
-					updatedVariable = {
-						...updatedVariable,
-						...urlVariable,
-					};
-				}
-
 				updatedVariables[variable] = updatedVariable;
 			});
 			updatedData.data.variables = updatedVariables;
@@ -308,7 +280,7 @@ export function DashboardProvider({
 					});
 				} catch (error) {
 					showErrorModal(error as APIError);
-					throw error;
+					return;
 				} finally {
 					setIsDashboardFetching(false);
 				}
@@ -317,17 +289,9 @@ export function DashboardProvider({
 			onError: (error) => {
 				showErrorModal(error as APIError);
 			},
-			// eslint-disable-next-line sonarjs/cognitive-complexity
-			onSuccess: (data) => {
-				// if the url variable is not set for any variable, set it to the default value
-				const variables = data?.data.data?.variables;
-				if (variables) {
-					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
-				}
-
-				if (!data?.data) return;
-				const updatedDashboardData = transformDashboardVariables(data.data);
-				const updatedDate = dayjs(updatedDashboardData.updatedAt);
+			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
+				const updatedDashboardData = transformDashboardVariables(data?.data);
+				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
 
 				setIsDashboardLocked(updatedDashboardData?.locked || false);
 

frontend/src/providers/Dashboard/initializeDefaultVariables.ts

@@ -1,46 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import { commaValuesParser } from '../../lib/dashbaordVariables/customCommaValuesParser';
-
-interface UrlVariables {
-	[key: string]: any;
-}
-
-/**
- * Initializes default values for dashboard variables if not already in URL
- * Handles cases where variables might be keyed by either id or name
- *
- * @param variables Dashboard variables object
- * @param getUrlVariables Function to get variables from URL
- * @param updateUrlVariable Function to update URL with variable values
- */
-export const initializeDefaultVariables = (
-	variables: Record<string, IDashboardVariable>,
-	getUrlVariables: () => UrlVariables | undefined,
-	updateUrlVariable: (
-		id: string,
-		selectedValue: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void,
-): void => {
-	if (!variables) return;
-
-	Object.values(variables).forEach((variable) => {
-		const { id, name } = variable;
-		const urlVariables = getUrlVariables();
-
-		// Check if either id or name is available in URL variables
-		const existsInUrl =
-			(id && urlVariables?.[id]) || (name && urlVariables?.[name]);
-
-		if (!existsInUrl) {
-			updateUrlVariable(
-				id,
-				variable.type === 'CUSTOM'
-					? commaValuesParser(variable?.customValue || '')
-					: variable?.selectedValue || variable?.defaultValue,
-				variable.allSelected || false,
-			);
-		}
-	});
-};

frontend/src/providers/QueryBuilder.tsx

@@ -7,6 +7,7 @@ import {
 	initialClickHouseData,
 	initialFormulaBuilderFormValues,
 	initialQueriesMap,
+	initialQueryBuilderFormTraceOperatorValues,
 	initialQueryBuilderFormValuesMap,
 	initialQueryPromQLData,
 	initialQueryState,
@@ -14,6 +15,7 @@ import {
 	MAX_FORMULAS,
 	MAX_QUERIES,
 	PANEL_TYPES,
+	TRACE_OPERATOR_QUERY_NAME,
 } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import {
@@ -47,6 +49,7 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import {
 	IBuilderFormula,
 	IBuilderQuery,
+	IBuilderTraceOperator,
 	IClickHouseQuery,
 	IPromQLQuery,
 	Query,
@@ -75,14 +78,18 @@ export const QueryBuilderContext = createContext<QueryBuilderContextType>({
 	panelType: PANEL_TYPES.TIME_SERIES,
 	isEnabledQuery: false,
 	handleSetQueryData: () => {},
+	handleSetTraceOperatorData: () => {},
 	handleSetFormulaData: () => {},
 	handleSetQueryItemData: () => {},
 	handleSetConfig: () => {},
 	removeQueryBuilderEntityByIndex: () => {},
+	removeAllQueryBuilderEntities: () => {},
 	removeQueryTypeItemByIndex: () => {},
 	addNewBuilderQuery: () => {},
 	cloneQuery: () => {},
 	addNewFormula: () => {},
+	addTraceOperator: () => {},
+	removeTraceOperator: () => {},
 	addNewQueryItem: () => {},
 	redirectWithQueryBuilderData: () => {},
 	handleRunQuery: () => {},
@@ -173,6 +180,10 @@ export function QueryBuilderProvider({
 					...initialFormulaBuilderFormValues,
 					...item,
 				})),
+				queryTraceOperator: query.builder.queryTraceOperator?.map((item) => ({
+					...initialQueryBuilderFormTraceOperatorValues,
+					...item,
+				})),
 			};
 
 			const setupedQueryData = builder.queryData.map((item) => {
@@ -385,8 +396,11 @@ export function QueryBuilderProvider({
 	const removeQueryBuilderEntityByIndex = useCallback(
 		(type: keyof QueryBuilderData, index: number) => {
 			setCurrentQuery((prevState) => {
-				const currentArray: (IBuilderQuery | IBuilderFormula)[] =
-					prevState.builder[type];
+				const currentArray: (
+					| IBuilderQuery
+					| IBuilderFormula
+					| IBuilderTraceOperator
+				)[] = prevState.builder[type];
 
 				const filteredArray = currentArray.filter((_, i) => index !== i);
 
@@ -400,8 +414,11 @@ export function QueryBuilderProvider({
 			});
 			// eslint-disable-next-line sonarjs/no-identical-functions
 			setSupersetQuery((prevState) => {
-				const currentArray: (IBuilderQuery | IBuilderFormula)[] =
-					prevState.builder[type];
+				const currentArray: (
+					| IBuilderQuery
+					| IBuilderFormula
+					| IBuilderTraceOperator
+				)[] = prevState.builder[type];
 
 				const filteredArray = currentArray.filter((_, i) => index !== i);
 
@@ -417,6 +434,20 @@ export function QueryBuilderProvider({
 		[],
 	);
 
+	const removeAllQueryBuilderEntities = useCallback(
+		(type: keyof QueryBuilderData) => {
+			setCurrentQuery((prevState) => ({
+				...prevState,
+				builder: { ...prevState.builder, [type]: [] },
+			}));
+			setSupersetQuery((prevState) => ({
+				...prevState,
+				builder: { ...prevState.builder, [type]: [] },
+			}));
+		},
+		[setCurrentQuery, setSupersetQuery],
+	);
+
 	const removeQueryTypeItemByIndex = useCallback(
 		(type: EQueryType.PROM | EQueryType.CLICKHOUSE, index: number) => {
 			setCurrentQuery((prevState) => {
@@ -639,6 +670,68 @@ export function QueryBuilderProvider({
 		});
 	}, [createNewBuilderFormula]);
 
+	const addTraceOperator = useCallback((expression = '') => {
+		const trimmed = (expression || '').trim();
+
+		setCurrentQuery((prevState) => {
+			const existing = prevState.builder.queryTraceOperator?.[0] || null;
+			const updated: IBuilderTraceOperator = existing
+				? { ...existing, expression: trimmed }
+				: {
+						...initialQueryBuilderFormTraceOperatorValues,
+						queryName: TRACE_OPERATOR_QUERY_NAME,
+						expression: trimmed,
+				  };
+
+			return {
+				...prevState,
+				builder: {
+					...prevState.builder,
+					// enforce single trace operator and replace only expression
+					queryTraceOperator: [updated],
+				},
+			};
+		});
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		setSupersetQuery((prevState) => {
+			const existing = prevState.builder.queryTraceOperator?.[0] || null;
+			const updated: IBuilderTraceOperator = existing
+				? { ...existing, expression: trimmed }
+				: {
+						...initialQueryBuilderFormTraceOperatorValues,
+						queryName: TRACE_OPERATOR_QUERY_NAME,
+						expression: trimmed,
+				  };
+
+			return {
+				...prevState,
+				builder: {
+					...prevState.builder,
+					// enforce single trace operator and replace only expression
+					queryTraceOperator: [updated],
+				},
+			};
+		});
+	}, []);
+
+	const removeTraceOperator = useCallback(() => {
+		setCurrentQuery((prevState) => ({
+			...prevState,
+			builder: {
+				...prevState.builder,
+				queryTraceOperator: [],
+			},
+		}));
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		setSupersetQuery((prevState) => ({
+			...prevState,
+			builder: {
+				...prevState.builder,
+				queryTraceOperator: [],
+			},
+		}));
+	}, []);
+
 	const updateQueryBuilderData: <T>(
 		arr: T[],
 		index: number,
@@ -745,6 +838,44 @@ export function QueryBuilderProvider({
 		},
 		[updateQueryBuilderData, updateSuperSetQueryBuilderData],
 	);
+
+	const handleSetTraceOperatorData = useCallback(
+		(index: number, traceOperatorData: IBuilderTraceOperator): void => {
+			setCurrentQuery((prevState) => {
+				const updatedTraceOperatorBuilderData = updateQueryBuilderData(
+					prevState.builder.queryTraceOperator,
+					index,
+					traceOperatorData,
+				);
+
+				return {
+					...prevState,
+					builder: {
+						...prevState.builder,
+						queryTraceOperator: updatedTraceOperatorBuilderData,
+					},
+				};
+			});
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSupersetQuery((prevState) => {
+				const updatedTraceOperatorBuilderData = updateQueryBuilderData(
+					prevState.builder.queryTraceOperator,
+					index,
+					traceOperatorData,
+				);
+
+				return {
+					...prevState,
+					builder: {
+						...prevState.builder,
+						queryTraceOperator: updatedTraceOperatorBuilderData,
+					},
+				};
+			});
+		},
+		[updateQueryBuilderData],
+	);
+
 	const handleSetFormulaData = useCallback(
 		(index: number, formulaData: IBuilderFormula): void => {
 			setCurrentQuery((prevState) => {
@@ -1045,14 +1176,18 @@ export function QueryBuilderProvider({
 			panelType,
 			isEnabledQuery,
 			handleSetQueryData,
+			handleSetTraceOperatorData,
 			handleSetFormulaData,
 			handleSetQueryItemData,
 			handleSetConfig,
 			removeQueryBuilderEntityByIndex,
 			removeQueryTypeItemByIndex,
+			removeAllQueryBuilderEntities,
 			cloneQuery,
 			addNewBuilderQuery,
 			addNewFormula,
+			addTraceOperator,
+			removeTraceOperator,
 			addNewQueryItem,
 			redirectWithQueryBuilderData,
 			handleRunQuery,
@@ -1073,14 +1208,18 @@ export function QueryBuilderProvider({
 			panelType,
 			isEnabledQuery,
 			handleSetQueryData,
+			handleSetTraceOperatorData,
 			handleSetFormulaData,
 			handleSetQueryItemData,
 			handleSetConfig,
 			removeQueryBuilderEntityByIndex,
 			removeQueryTypeItemByIndex,
+			removeAllQueryBuilderEntities,
 			cloneQuery,
 			addNewBuilderQuery,
 			addNewFormula,
+			addTraceOperator,
+			removeTraceOperator,
 			addNewQueryItem,
 			redirectWithQueryBuilderData,
 			handleRunQuery,

frontend/src/types/api/dashboard/getAll.ts

@@ -9,12 +9,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { IField } from '../logs/fields';
 import { TelemetryFieldKey } from '../v5/queryRange';
 
-export const VariableQueryTypeArr = [
-	'QUERY',
-	'TEXTBOX',
-	'CUSTOM',
-	'DYNAMIC',
-] as const;
+export const VariableQueryTypeArr = ['QUERY', 'TEXTBOX', 'CUSTOM'] as const;
 export type TVariableQueryType = typeof VariableQueryTypeArr[number];
 
 export const VariableSortTypeArr = ['DISABLED', 'ASC', 'DESC'] as const;
@@ -51,10 +46,6 @@ export interface IDashboardVariable {
 	modificationUUID?: string;
 	allSelected?: boolean;
 	change?: boolean;
-	defaultValue?: string;
-	dynamicVariablesAttribute?: string;
-	dynamicVariablesSource?: string;
-	haveCustomValuesSelected?: boolean;
 }
 export interface Dashboard {
 	id: string;

frontend/src/types/api/dynamicVariables/getFieldKeys.ts

@@ -1,23 +0,0 @@
-/**
- * Response from the field keys API
- */
-export interface FieldKeyResponse {
-	/** List of field keys returned */
-	keys?: Record<string, FieldKey[]>;
-	/** Indicates if the returned list is complete */
-	complete?: boolean;
-}
-
-/**
- * Field key data structure
- */
-export interface FieldKey {
-	/** Key name */
-	name?: string;
-	/** Data type of the field */
-	fieldDataType?: string;
-	/** Signal type */
-	signal?: string;
-	/** Field context */
-	fieldContext?: string;
-}

frontend/src/types/api/dynamicVariables/getFieldValues.ts

@@ -1,11 +0,0 @@
-/**
- * Response from the field values API
- */
-export interface FieldValueResponse {
-	/** List of field values returned by type */
-	values: Record<string, (string | boolean | number)[]>;
-	/** Normalized values combined from all types */
-	normalizedValues?: string[];
-	/** Indicates if the returned list is complete */
-	complete: boolean;
-}

frontend/src/types/api/queryBuilder/queryBuilderData.ts

@@ -29,6 +29,10 @@ export interface IBuilderFormula {
 	orderBy?: OrderByPayload[];
 }
 
+export type IBuilderTraceOperator = IBuilderQuery & {
+	returnSpansFrom?: string;
+};
+
 export interface TagFilterItem {
 	id: string;
 	key?: BaseAutocompleteData;
@@ -124,6 +128,7 @@ export type BuilderQueryDataResourse = Record<
 export type MapData =
 	| IBuilderQuery
 	| IBuilderFormula
+	| IBuilderTraceOperator
 	| IClickHouseQuery
 	| IPromQLQuery;
 

frontend/src/types/api/v5/queryRange.ts

@@ -14,6 +14,7 @@ export type RequestType =
 
 export type QueryType =
 	| 'builder_query'
+	| 'builder_trace_operator'
 	| 'builder_formula'
 	| 'builder_sub_query'
 	| 'builder_join'

frontend/src/types/common/operations.types.ts

@@ -4,6 +4,7 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import {
 	IBuilderFormula,
 	IBuilderQuery,
+	IBuilderTraceOperator,
 } from 'types/api/queryBuilder/queryBuilderData';
 import {
 	BaseBuilderQuery,
@@ -18,6 +19,7 @@ import { SelectOption } from './select';
 
 type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
 	Pick<QueryBuilderProps, 'filterConfigs'> & {
+		isForTraceOperator?: boolean;
 		formula?: IBuilderFormula;
 		isListViewPanel?: boolean;
 		entityVersion: string;
@@ -32,6 +34,14 @@ export type HandleChangeQueryData<T = IBuilderQuery> = <
 	value: Value,
 ) => void;
 
+export type HandleChangeTraceOperatorData<T = IBuilderTraceOperator> = <
+	Key extends keyof T,
+	Value extends T[Key]
+>(
+	key: Key,
+	value: Value,
+) => void;
+
 // Legacy version for backward compatibility
 export type HandleChangeQueryDataLegacy = HandleChangeQueryData<IBuilderQuery>;
 

frontend/src/types/common/queryBuilder.ts

@@ -6,6 +6,7 @@ import { Dispatch, SetStateAction } from 'react';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
+	IBuilderTraceOperator,
 	IClickHouseQuery,
 	IPromQLQuery,
 	Query,
@@ -222,6 +223,7 @@ export type ReduceOperators = 'last' | 'sum' | 'avg' | 'max' | 'min';
 export type QueryBuilderData = {
 	queryData: IBuilderQuery[];
 	queryFormulas: IBuilderFormula[];
+	queryTraceOperator: IBuilderTraceOperator[];
 };
 
 export type QueryBuilderContextType = {
@@ -235,6 +237,10 @@ export type QueryBuilderContextType = {
 	panelType: PANEL_TYPES | null;
 	isEnabledQuery: boolean;
 	handleSetQueryData: (index: number, queryData: IBuilderQuery) => void;
+	handleSetTraceOperatorData: (
+		index: number,
+		traceOperatorData: IBuilderTraceOperator,
+	) => void;
 	handleSetFormulaData: (index: number, formulaData: IBuilderFormula) => void;
 	handleSetQueryItemData: (
 		index: number,
@@ -249,12 +255,15 @@ export type QueryBuilderContextType = {
 		type: keyof QueryBuilderData,
 		index: number,
 	) => void;
+	removeAllQueryBuilderEntities: (type: keyof QueryBuilderData) => void;
 	removeQueryTypeItemByIndex: (
 		type: EQueryType.PROM | EQueryType.CLICKHOUSE,
 		index: number,
 	) => void;
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
+	removeTraceOperator: () => void;
+	addTraceOperator: (expression?: string) => void;
 	cloneQuery: (type: string, query: IBuilderQuery) => void;
 	addNewQueryItem: (type: EQueryType.PROM | EQueryType.CLICKHOUSE) => void;
 	redirectWithQueryBuilderData: (

pkg/http/middleware/api_key.go

@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
@@ -97,7 +98,12 @@ func (a *APIKey) Wrap(next http.Handler) http.Handler {
 			return
 		}
 
-		r = r.WithContext(ctx)
+		comment := ctxtypes.CommentFromContext(ctx)
+		comment.Set("auth_type", "api_key")
+		comment.Set("user_id", claims.UserID)
+		comment.Set("org_id", claims.OrgID)
+
+		r = r.WithContext(ctxtypes.NewContextWithComment(ctx, comment))
 
 		next.ServeHTTP(w, r)
 

pkg/http/middleware/auth.go

@@ -7,6 +7,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
@@ -50,7 +51,12 @@ func (a *Auth) Wrap(next http.Handler) http.Handler {
 			return
 		}
 
-		r = r.WithContext(ctx)
+		comment := ctxtypes.CommentFromContext(ctx)
+		comment.Set("auth_type", "jwt")
+		comment.Set("user_id", claims.UserID)
+		comment.Set("org_id", claims.OrgID)
+
+		r = r.WithContext(ctxtypes.NewContextWithComment(ctx, comment))
 
 		next.ServeHTTP(w, r)
 	})

pkg/http/middleware/comment.go

@@ -0,0 +1,24 @@
+package middleware
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+)
+
+type Comment struct{}
+
+func NewComment() *Comment {
+	return &Comment{}
+}
+
+func (middleware *Comment) Wrap(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
+
+		comment := ctxtypes.CommentFromContext(req.Context())
+		comment.Merge(ctxtypes.CommentFromHTTPRequest(req))
+
+		req = req.WithContext(ctxtypes.NewContextWithComment(req.Context(), comment))
+		next.ServeHTTP(rw, req)
+	})
+}

pkg/http/middleware/logging.go

@@ -2,16 +2,11 @@ package middleware
 
 import (
 	"bytes"
-	"context"
 	"log/slog"
 	"net"
 	"net/http"
-	"net/url"
-	"strings"
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/query-service/common"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/gorilla/mux"
 	semconv "go.opentelemetry.io/otel/semconv/v1.26.0"
 )
@@ -55,9 +50,6 @@ func (middleware *Logging) Wrap(next http.Handler) http.Handler {
 			string(semconv.HTTPRouteKey), path,
 		}
 
-		logCommentKVs := middleware.getLogCommentKVs(req)
-		req = req.WithContext(context.WithValue(req.Context(), common.LogCommentKey, logCommentKVs))
-
 		badResponseBuffer := new(bytes.Buffer)
 		writer := newBadResponseLoggingWriter(rw, badResponseBuffer)
 		next.ServeHTTP(writer, req)
@@ -85,67 +77,3 @@ func (middleware *Logging) Wrap(next http.Handler) http.Handler {
 		}
 	})
 }
-
-func (middleware *Logging) getLogCommentKVs(r *http.Request) map[string]string {
-	referrer := r.Header.Get("Referer")
-
-	var path, dashboardID, alertID, page, client, viewName, tab string
-
-	if referrer != "" {
-		referrerURL, _ := url.Parse(referrer)
-		client = "browser"
-		path = referrerURL.Path
-
-		if strings.Contains(path, "/dashboard") {
-			// Split the path into segments
-			pathSegments := strings.Split(referrerURL.Path, "/")
-			// The dashboard ID should be the segment after "/dashboard/"
-			// Loop through pathSegments to find "dashboard" and then take the next segment as the ID
-			for i, segment := range pathSegments {
-				if segment == "dashboard" && i < len(pathSegments)-1 {
-					// Return the next segment, which should be the dashboard ID
-					dashboardID = pathSegments[i+1]
-				}
-			}
-			page = "dashboards"
-		} else if strings.Contains(path, "/alerts") {
-			urlParams := referrerURL.Query()
-			alertID = urlParams.Get("ruleId")
-			page = "alerts"
-		} else if strings.Contains(path, "logs") && strings.Contains(path, "explorer") {
-			page = "logs-explorer"
-			viewName = referrerURL.Query().Get("viewName")
-		} else if strings.Contains(path, "/trace") || strings.Contains(path, "traces-explorer") {
-			page = "traces-explorer"
-			viewName = referrerURL.Query().Get("viewName")
-		} else if strings.Contains(path, "/services") {
-			page = "services"
-			tab = referrerURL.Query().Get("tab")
-			if tab == "" {
-				tab = "OVER_METRICS"
-			}
-		} else if strings.Contains(path, "/metrics") {
-			page = "metrics-explorer"
-		}
-	} else {
-		client = "api"
-	}
-
-	var email string
-	claims, err := authtypes.ClaimsFromContext(r.Context())
-	if err == nil {
-		email = claims.Email
-	}
-
-	kvs := map[string]string{
-		"path":        path,
-		"dashboardID": dashboardID,
-		"alertID":     alertID,
-		"source":      page,
-		"client":      client,
-		"viewName":    viewName,
-		"servicesTab": tab,
-		"email":       email,
-	}
-	return kvs
-}

pkg/querier/api.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"encoding/json"
 	"net/http"
-	"regexp"
 	"runtime/debug"
 
 	"github.com/SigNoz/signoz/pkg/analytics"
@@ -12,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/SigNoz/signoz/pkg/variables"
@@ -166,49 +166,9 @@ func (a *API) logEvent(ctx context.Context, referrer string, event *qbtypes.QBEv
 		return
 	}
 
-	properties["referrer"] = referrer
-
-	logsExplorerMatched, _ := regexp.MatchString(`/logs/logs-explorer(?:\?.*)?$`, referrer)
-	traceExplorerMatched, _ := regexp.MatchString(`/traces-explorer(?:\?.*)?$`, referrer)
-	metricsExplorerMatched, _ := regexp.MatchString(`/metrics-explorer/explorer(?:\?.*)?$`, referrer)
-	dashboardMatched, _ := regexp.MatchString(`/dashboard/[a-zA-Z0-9\-]+/(new|edit)(?:\?.*)?$`, referrer)
-	alertMatched, _ := regexp.MatchString(`/alerts/(new|edit)(?:\?.*)?$`, referrer)
-
-	switch {
-	case dashboardMatched:
-		properties["module_name"] = "dashboard"
-	case alertMatched:
-		properties["module_name"] = "rule"
-	case metricsExplorerMatched:
-		properties["module_name"] = "metrics-explorer"
-	case logsExplorerMatched:
-		properties["module_name"] = "logs-explorer"
-	case traceExplorerMatched:
-		properties["module_name"] = "traces-explorer"
-	default:
-		return
-	}
-
-	if dashboardMatched {
-		if dashboardIDRegex, err := regexp.Compile(`/dashboard/([a-f0-9\-]+)/`); err == nil {
-			if matches := dashboardIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
-				properties["dashboard_id"] = matches[1]
-			}
-		}
-
-		if widgetIDRegex, err := regexp.Compile(`widgetId=([a-f0-9\-]+)`); err == nil {
-			if matches := widgetIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
-				properties["widget_id"] = matches[1]
-			}
-		}
-	}
-
-	if alertMatched {
-		if alertIDRegex, err := regexp.Compile(`ruleId=(\d+)`); err == nil {
-			if matches := alertIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
-				properties["rule_id"] = matches[1]
-			}
-		}
+	comments := ctxtypes.CommentFromContext(ctx).Map()
+	for key, value := range comments {
+		properties[key] = value
 	}
 
 	if !event.HasData {

pkg/querier/consume.go

@@ -42,8 +42,10 @@ func consume(rows driver.Rows, kind qbtypes.RequestType, queryWindow *qbtypes.Ti
 		payload, err = readAsTimeSeries(rows, queryWindow, step, queryName)
 	case qbtypes.RequestTypeScalar:
 		payload, err = readAsScalar(rows, queryName)
-	case qbtypes.RequestTypeRaw, qbtypes.RequestTypeTrace:
+	case qbtypes.RequestTypeRaw:
 		payload, err = readAsRaw(rows, queryName)
+	case qbtypes.RequestTypeTrace:
+		payload, err = readAsTrace(rows, queryName)
 		// TODO: add support for other request types
 	}
 
@@ -332,6 +334,74 @@ func readAsScalar(rows driver.Rows, queryName string) (*qbtypes.ScalarData, erro
 	}, nil
 }
 
+func readAsTrace(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
+	colNames := rows.Columns()
+	colTypes := rows.ColumnTypes()
+	colCnt := len(colNames)
+
+	scanTpl := make([]any, colCnt)
+	for i, ct := range colTypes {
+		scanTpl[i] = reflect.New(ct.ScanType()).Interface()
+	}
+
+	var outRows []*qbtypes.RawRow
+
+	for rows.Next() {
+		scan := make([]any, colCnt)
+		for i := range scanTpl {
+			scan[i] = reflect.New(colTypes[i].ScanType()).Interface()
+		}
+
+		if err := rows.Scan(scan...); err != nil {
+			return nil, err
+		}
+
+		rr := qbtypes.RawRow{
+			Data: make(map[string]any, colCnt),
+		}
+
+		for i, cellPtr := range scan {
+			name := colNames[i]
+
+			val := reflect.ValueOf(cellPtr).Elem().Interface()
+
+			if name == "timestamp" || name == "timestamp_datetime" {
+				switch t := val.(type) {
+				case time.Time:
+					rr.Timestamp = t
+				case uint64: // epoch-ns stored as integer
+					rr.Timestamp = time.Unix(0, int64(t))
+				case int64:
+					rr.Timestamp = time.Unix(0, t)
+				case string: // Handle timestamp strings (ISO format)
+					if parsedTime, err := time.Parse(time.RFC3339, t); err == nil {
+						rr.Timestamp = parsedTime
+					} else if parsedTime, err := time.Parse("2006-01-02T15:04:05.999999999Z", t); err == nil {
+						rr.Timestamp = parsedTime
+					} else {
+						// leave zero time if unrecognised
+					}
+				default:
+					// leave zero time if unrecognised
+				}
+			}
+
+			// store value in map as *any, to match the schema
+			v := any(val)
+			rr.Data[name] = &v
+		}
+		outRows = append(outRows, &rr)
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+
+	return &qbtypes.RawData{
+		QueryName: queryName,
+		Rows:      outRows,
+	}, nil
+}
+
 func derefValue(v any) any {
 	if v == nil {
 		return nil

pkg/querier/postprocess.go

@@ -29,6 +29,8 @@ func getqueryInfo(spec any) queryInfo {
 		return queryInfo{Name: s.Name, Disabled: s.Disabled, Step: s.StepInterval}
 	case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
 		return queryInfo{Name: s.Name, Disabled: s.Disabled, Step: s.StepInterval}
+	case qbtypes.QueryBuilderTraceOperator:
+		return queryInfo{Name: s.Name, Disabled: s.Disabled, Step: s.StepInterval}
 	case qbtypes.QueryBuilderFormula:
 		return queryInfo{Name: s.Name, Disabled: s.Disabled}
 	case qbtypes.PromQuery:
@@ -70,6 +72,10 @@ func (q *querier) postProcessResults(ctx context.Context, results map[string]any
 				result = postProcessMetricQuery(q, result, spec, req)
 				typedResults[spec.Name] = result
 			}
+		case qbtypes.QueryBuilderTraceOperator:
+			if result, ok := typedResults[spec.Name]; ok {
+				typedResults[spec.Name] = result
+			}
 		}
 	}
 

pkg/querier/querier.go

@@ -28,15 +28,16 @@ var (
 )
 
 type querier struct {
-	logger            *slog.Logger
-	telemetryStore    telemetrystore.TelemetryStore
-	metadataStore     telemetrytypes.MetadataStore
-	promEngine        prometheus.Prometheus
-	traceStmtBuilder  qbtypes.StatementBuilder[qbtypes.TraceAggregation]
-	logStmtBuilder    qbtypes.StatementBuilder[qbtypes.LogAggregation]
-	metricStmtBuilder qbtypes.StatementBuilder[qbtypes.MetricAggregation]
-	meterStmtBuilder  qbtypes.StatementBuilder[qbtypes.MetricAggregation]
-	bucketCache       BucketCache
+	logger                   *slog.Logger
+	telemetryStore           telemetrystore.TelemetryStore
+	metadataStore            telemetrytypes.MetadataStore
+	promEngine               prometheus.Prometheus
+	traceStmtBuilder         qbtypes.StatementBuilder[qbtypes.TraceAggregation]
+	logStmtBuilder           qbtypes.StatementBuilder[qbtypes.LogAggregation]
+	metricStmtBuilder        qbtypes.StatementBuilder[qbtypes.MetricAggregation]
+	meterStmtBuilder         qbtypes.StatementBuilder[qbtypes.MetricAggregation]
+	traceOperatorStmtBuilder qbtypes.TraceOperatorStatementBuilder
+	bucketCache              BucketCache
 }
 
 var _ Querier = (*querier)(nil)
@@ -50,19 +51,21 @@ func New(
 	logStmtBuilder qbtypes.StatementBuilder[qbtypes.LogAggregation],
 	metricStmtBuilder qbtypes.StatementBuilder[qbtypes.MetricAggregation],
 	meterStmtBuilder qbtypes.StatementBuilder[qbtypes.MetricAggregation],
+	traceOperatorStmtBuilder qbtypes.TraceOperatorStatementBuilder,
 	bucketCache BucketCache,
 ) *querier {
 	querierSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/querier")
 	return &querier{
-		logger:            querierSettings.Logger(),
-		telemetryStore:    telemetryStore,
-		metadataStore:     metadataStore,
-		promEngine:        promEngine,
-		traceStmtBuilder:  traceStmtBuilder,
-		logStmtBuilder:    logStmtBuilder,
-		metricStmtBuilder: metricStmtBuilder,
-		meterStmtBuilder:  meterStmtBuilder,
-		bucketCache:       bucketCache,
+		logger:                   querierSettings.Logger(),
+		telemetryStore:           telemetryStore,
+		metadataStore:            metadataStore,
+		promEngine:               promEngine,
+		traceStmtBuilder:         traceStmtBuilder,
+		logStmtBuilder:           logStmtBuilder,
+		metricStmtBuilder:        metricStmtBuilder,
+		meterStmtBuilder:         meterStmtBuilder,
+		traceOperatorStmtBuilder: traceOperatorStmtBuilder,
+		bucketCache:              bucketCache,
 	}
 }
 
@@ -124,9 +127,28 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 		NumberOfQueries: len(req.CompositeQuery.Queries),
 		PanelType:       req.RequestType.StringValue(),
 	}
-
 	intervalWarnings := []string{}
 
+	dependencyQueries := make(map[string]bool)
+	traceOperatorQueries := make(map[string]qbtypes.QueryBuilderTraceOperator)
+
+	for _, query := range req.CompositeQuery.Queries {
+		if query.Type == qbtypes.QueryTypeTraceOperator {
+			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
+				// Parse expression to find dependencies
+				if err := spec.ParseExpression(); err != nil {
+					return nil, fmt.Errorf("failed to parse trace operator expression: %w", err)
+				}
+
+				deps := spec.CollectReferencedQueries(spec.ParsedExpression)
+				for _, dep := range deps {
+					dependencyQueries[dep] = true
+				}
+				traceOperatorQueries[spec.Name] = spec
+			}
+		}
+	}
+
 	// First pass: collect all metric names that need temporality
 	metricNames := make([]string, 0)
 	for idx, query := range req.CompositeQuery.Queries {
@@ -220,6 +242,21 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 					event.TracesUsed = strings.Contains(spec.Query, "signoz_traces")
 				}
 			}
+		} else if query.Type == qbtypes.QueryTypeTraceOperator {
+			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
+				if spec.StepInterval.Seconds() == 0 {
+					spec.StepInterval = qbtypes.Step{
+						Duration: time.Second * time.Duration(querybuilder.RecommendedStepInterval(req.Start, req.End)),
+					}
+				}
+
+				if spec.StepInterval.Seconds() < float64(querybuilder.MinAllowedStepInterval(req.Start, req.End)) {
+					spec.StepInterval = qbtypes.Step{
+						Duration: time.Second * time.Duration(querybuilder.MinAllowedStepInterval(req.Start, req.End)),
+					}
+				}
+				req.CompositeQuery.Queries[idx].Spec = spec
+			}
 		}
 	}
 
@@ -240,6 +277,38 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	steps := make(map[string]qbtypes.Step)
 
 	for _, query := range req.CompositeQuery.Queries {
+		var queryName string
+		var isTraceOperator bool
+
+		switch query.Type {
+		case qbtypes.QueryTypeTraceOperator:
+			if spec, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator); ok {
+				queryName = spec.Name
+				isTraceOperator = true
+			}
+		case qbtypes.QueryTypePromQL:
+			if spec, ok := query.Spec.(qbtypes.PromQuery); ok {
+				queryName = spec.Name
+			}
+		case qbtypes.QueryTypeClickHouseSQL:
+			if spec, ok := query.Spec.(qbtypes.ClickHouseQuery); ok {
+				queryName = spec.Name
+			}
+		case qbtypes.QueryTypeBuilder:
+			switch spec := query.Spec.(type) {
+			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
+				queryName = spec.Name
+			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
+				queryName = spec.Name
+			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
+				queryName = spec.Name
+			}
+		}
+
+		if !isTraceOperator && dependencyQueries[queryName] {
+			continue
+		}
+
 		switch query.Type {
 		case qbtypes.QueryTypePromQL:
 			promQuery, ok := query.Spec.(qbtypes.PromQuery)
@@ -256,6 +325,22 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 			}
 			chSQLQuery := newchSQLQuery(q.logger, q.telemetryStore, chQuery, nil, qbtypes.TimeRange{From: req.Start, To: req.End}, req.RequestType, tmplVars)
 			queries[chQuery.Name] = chSQLQuery
+		case qbtypes.QueryTypeTraceOperator:
+			traceOpQuery, ok := query.Spec.(qbtypes.QueryBuilderTraceOperator)
+			if !ok {
+				return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid trace operator query spec %T", query.Spec)
+			}
+			toq := &traceOperatorQuery{
+				telemetryStore: q.telemetryStore,
+				stmtBuilder:    q.traceOperatorStmtBuilder,
+				spec:           traceOpQuery,
+				compositeQuery: &req.CompositeQuery,
+				fromMS:         uint64(req.Start),
+				toMS:           uint64(req.End),
+				kind:           req.RequestType,
+			}
+			queries[traceOpQuery.Name] = toq
+			steps[traceOpQuery.Name] = traceOpQuery.StepInterval
 		case qbtypes.QueryTypeBuilder:
 			switch spec := query.Spec.(type) {
 			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
@@ -578,7 +663,16 @@ func (q *querier) createRangedQuery(originalQuery qbtypes.Query, timeRange qbtyp
 			return newBuilderQuery(q.telemetryStore, q.meterStmtBuilder, specCopy, adjustedTimeRange, qt.kind, qt.variables)
 		}
 		return newBuilderQuery(q.telemetryStore, q.metricStmtBuilder, specCopy, adjustedTimeRange, qt.kind, qt.variables)
-
+	case *traceOperatorQuery:
+		return &traceOperatorQuery{
+			telemetryStore: q.telemetryStore,
+			stmtBuilder:    q.traceOperatorStmtBuilder,
+			spec:           qt.spec,
+			fromMS:         uint64(timeRange.From),
+			toMS:           uint64(timeRange.To),
+			compositeQuery: qt.compositeQuery,
+			kind:           qt.kind,
+		}
 	default:
 		return nil
 	}

pkg/querier/signozquerier/provider.go

@@ -89,6 +89,16 @@ func newProvider(
 		telemetryStore,
 	)
 
+	// ADD: Create trace operator statement builder
+	traceOperatorStmtBuilder := telemetrytraces.NewTraceOperatorStatementBuilder(
+		settings,
+		telemetryMetadataStore,
+		traceFieldMapper,
+		traceConditionBuilder,
+		traceStmtBuilder, // Pass the regular trace statement builder
+		traceAggExprRewriter,
+	)
+
 	// Create log statement builder
 	logFieldMapper := telemetrylogs.NewFieldMapper()
 	logConditionBuilder := telemetrylogs.NewConditionBuilder(logFieldMapper)
@@ -147,7 +157,7 @@ func newProvider(
 		cfg.FluxInterval,
 	)
 
-	// Create and return the querier
+	// Create and return the querier - ADD traceOperatorStmtBuilder parameter
 	return querier.New(
 		settings,
 		telemetryStore,
@@ -157,6 +167,7 @@ func newProvider(
 		logStmtBuilder,
 		metricStmtBuilder,
 		meterStmtBuilder,
+		traceOperatorStmtBuilder,
 		bucketCache,
 	), nil
 }

pkg/querier/trace_operator_query.go

@@ -0,0 +1,145 @@
+package querier
+
+import (
+	"context"
+	"fmt"
+	"strings"
+	"time"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+type traceOperatorQuery struct {
+	telemetryStore telemetrystore.TelemetryStore
+	stmtBuilder    qbtypes.TraceOperatorStatementBuilder
+	spec           qbtypes.QueryBuilderTraceOperator
+	compositeQuery *qbtypes.CompositeQuery
+	fromMS         uint64
+	toMS           uint64
+	kind           qbtypes.RequestType
+}
+
+var _ qbtypes.Query = (*traceOperatorQuery)(nil)
+
+func (q *traceOperatorQuery) Fingerprint() string {
+
+	if q.kind == qbtypes.RequestTypeRaw {
+		return ""
+	}
+
+	parts := []string{"trace_operator"}
+
+	parts = append(parts, fmt.Sprintf("expr=%s", q.spec.Expression))
+
+	// Add returnSpansFrom if specified
+	if q.spec.ReturnSpansFrom != "" {
+		parts = append(parts, fmt.Sprintf("return=%s", q.spec.ReturnSpansFrom))
+	}
+
+	// Add step interval if present
+	parts = append(parts, fmt.Sprintf("step=%s", q.spec.StepInterval.String()))
+
+	// Add filter if present
+	if q.spec.Filter != nil && q.spec.Filter.Expression != "" {
+		parts = append(parts, fmt.Sprintf("filter=%s", q.spec.Filter.Expression))
+	}
+
+	// Add aggregations
+	if len(q.spec.Aggregations) > 0 {
+		aggParts := []string{}
+		for _, agg := range q.spec.Aggregations {
+			aggParts = append(aggParts, agg.Expression)
+		}
+		parts = append(parts, fmt.Sprintf("aggs=[%s]", strings.Join(aggParts, ",")))
+	}
+
+	// Add group by
+	if len(q.spec.GroupBy) > 0 {
+		groupByParts := []string{}
+		for _, gb := range q.spec.GroupBy {
+			groupByParts = append(groupByParts, fingerprintGroupByKey(gb))
+		}
+		parts = append(parts, fmt.Sprintf("groupby=[%s]", strings.Join(groupByParts, ",")))
+	}
+
+	// Add order by
+	if len(q.spec.Order) > 0 {
+		orderParts := []string{}
+		for _, o := range q.spec.Order {
+			orderParts = append(orderParts, fingerprintOrderBy(o))
+		}
+		parts = append(parts, fmt.Sprintf("order=[%s]", strings.Join(orderParts, ",")))
+	}
+
+	// Add limit
+	if q.spec.Limit > 0 {
+		parts = append(parts, fmt.Sprintf("limit=%d", q.spec.Limit))
+	}
+
+	return strings.Join(parts, "&")
+}
+
+func (q *traceOperatorQuery) Window() (uint64, uint64) {
+	return q.fromMS, q.toMS
+}
+
+func (q *traceOperatorQuery) Execute(ctx context.Context) (*qbtypes.Result, error) {
+	stmt, err := q.stmtBuilder.Build(
+		ctx,
+		q.fromMS,
+		q.toMS,
+		q.kind,
+		q.spec,
+		q.compositeQuery,
+	)
+	if err != nil {
+		return nil, err
+	}
+
+	// Execute the query with proper context
+	result, err := q.executeWithContext(ctx, stmt.Query, stmt.Args)
+	if err != nil {
+		return nil, err
+	}
+	result.Warnings = stmt.Warnings
+	return result, nil
+}
+
+func (q *traceOperatorQuery) executeWithContext(ctx context.Context, query string, args []any) (*qbtypes.Result, error) {
+	totalRows := uint64(0)
+	totalBytes := uint64(0)
+	elapsed := time.Duration(0)
+
+	ctx = clickhouse.Context(ctx, clickhouse.WithProgress(func(p *clickhouse.Progress) {
+		totalRows += p.Rows
+		totalBytes += p.Bytes
+		elapsed += p.Elapsed
+	}))
+
+	rows, err := q.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	// Pass query window and step for partial value detection
+	queryWindow := &qbtypes.TimeRange{From: q.fromMS, To: q.toMS}
+
+	// Use the consume function like builderQuery does
+	payload, err := consume(rows, q.kind, queryWindow, q.spec.StepInterval, q.spec.Name)
+	if err != nil {
+		return nil, err
+	}
+
+	return &qbtypes.Result{
+		Type:  q.kind,
+		Value: payload,
+		Stats: qbtypes.ExecStats{
+			RowsScanned:  totalRows,
+			BytesScanned: totalBytes,
+			DurationMS:   uint64(elapsed.Milliseconds()),
+		},
+	}, nil
+}

pkg/query-service/app/clickhouseReader/reader.go

@@ -3640,28 +3640,8 @@ func readRowsForTimeSeriesResult(rows driver.Rows, vars []interface{}, columnNam
 	return seriesList, getPersonalisedError(rows.Err())
 }
 
-func logCommentKVs(ctx context.Context) map[string]string {
-	kv := ctx.Value(common.LogCommentKey)
-	if kv == nil {
-		return nil
-	}
-	logCommentKVs, ok := kv.(map[string]string)
-	if !ok {
-		return nil
-	}
-	return logCommentKVs
-}
-
 // GetTimeSeriesResultV3 runs the query and returns list of time series
 func (r *ClickHouseReader) GetTimeSeriesResultV3(ctx context.Context, query string) ([]*v3.Series, error) {
-
-	ctxArgs := map[string]interface{}{"query": query}
-	for k, v := range logCommentKVs(ctx) {
-		ctxArgs[k] = v
-	}
-
-	defer utils.Elapsed("GetTimeSeriesResultV3", ctxArgs)()
-
 	// Hook up query progress reporting if requested.
 	queryId := ctx.Value("queryId")
 	if queryId != nil {
@@ -3725,20 +3705,12 @@ func (r *ClickHouseReader) GetTimeSeriesResultV3(ctx context.Context, query stri
 
 // GetListResultV3 runs the query and returns list of rows
 func (r *ClickHouseReader) GetListResultV3(ctx context.Context, query string) ([]*v3.Row, error) {
-
-	ctxArgs := map[string]interface{}{"query": query}
-	for k, v := range logCommentKVs(ctx) {
-		ctxArgs[k] = v
-	}
-
-	defer utils.Elapsed("GetListResultV3", ctxArgs)()
-
 	rows, err := r.db.Query(ctx, query)
-
 	if err != nil {
 		zap.L().Error("error while reading time series result", zap.Error(err))
 		return nil, errors.New(err.Error())
 	}
+
 	defer rows.Close()
 
 	var (

pkg/query-service/app/server.go

@@ -220,6 +220,7 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 	).Wrap)
 	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewComment().Wrap)
 
 	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
 

pkg/query-service/common/ctx.go

@@ -1,5 +0,0 @@
-package common
-
-type LogCommentContextKeyType string
-
-const LogCommentKey LogCommentContextKeyType = "logComment"

pkg/query-service/rules/prom_rule_task.go

@@ -7,7 +7,7 @@ import (
 	"sync"
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/query-service/common"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	opentracing "github.com/opentracing/opentracing-go"
@@ -369,12 +369,10 @@ func (g *PromRuleTask) Eval(ctx context.Context, ts time.Time) {
 				rule.SetEvaluationTimestamp(t)
 			}(time.Now())
 
-			kvs := map[string]string{
-				"alertID": rule.ID(),
-				"source":  "alerts",
-				"client":  "query-service",
-			}
-			ctx = context.WithValue(ctx, common.LogCommentKey, kvs)
+			comment := ctxtypes.CommentFromContext(ctx)
+			comment.Set("rule_id", rule.ID())
+			comment.Set("auth_type", "internal")
+			ctx = ctxtypes.NewContextWithComment(ctx, comment)
 
 			_, err := rule.Eval(ctx, ts)
 			if err != nil {

pkg/query-service/rules/rule_task.go

@@ -7,8 +7,8 @@ import (
 	"sync"
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	opentracing "github.com/opentracing/opentracing-go"
@@ -352,12 +352,10 @@ func (g *RuleTask) Eval(ctx context.Context, ts time.Time) {
 				rule.SetEvaluationTimestamp(t)
 			}(time.Now())
 
-			kvs := map[string]string{
-				"alertID": rule.ID(),
-				"source":  "alerts",
-				"client":  "query-service",
-			}
-			ctx = context.WithValue(ctx, common.LogCommentKey, kvs)
+			comment := ctxtypes.CommentFromContext(ctx)
+			comment.Set("rule_id", rule.ID())
+			comment.Set("auth_type", "internal")
+			ctx = ctxtypes.NewContextWithComment(ctx, comment)
 
 			_, err := rule.Eval(ctx, ts)
 			if err != nil {

pkg/telemetrystore/telemetrystorehook/settings.go

@@ -2,13 +2,12 @@ package telemetrystorehook
 
 import (
 	"context"
-	"encoding/json"
 	"strings"
 
 	"github.com/ClickHouse/clickhouse-go/v2"
 	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 )
 
 type provider struct {
@@ -32,11 +31,7 @@ func NewSettings(ctx context.Context, providerSettings factory.ProviderSettings,
 func (h *provider) BeforeQuery(ctx context.Context, _ *telemetrystore.QueryEvent) context.Context {
 	settings := clickhouse.Settings{}
 
-	// Apply default settings
-	logComment := h.getLogComment(ctx)
-	if logComment != "" {
-		settings["log_comment"] = logComment
-	}
+	settings["log_comment"] = ctxtypes.CommentFromContext(ctx).String()
 
 	if ctx.Value("enforce_max_result_rows") != nil {
 		settings["max_result_rows"] = h.settings.MaxResultRows
@@ -91,22 +86,4 @@ func (h *provider) BeforeQuery(ctx context.Context, _ *telemetrystore.QueryEvent
 	return ctx
 }
 
-func (h *provider) AfterQuery(ctx context.Context, event *telemetrystore.QueryEvent) {
-}
-
-func (h *provider) getLogComment(ctx context.Context) string {
-	// Get the key-value pairs from context for log comment
-	kv := ctx.Value(common.LogCommentKey)
-	if kv == nil {
-		return ""
-	}
-
-	logCommentKVs, ok := kv.(map[string]string)
-	if !ok {
-		return ""
-	}
-
-	logComment, _ := json.Marshal(logCommentKVs)
-
-	return string(logComment)
-}
+func (h *provider) AfterQuery(ctx context.Context, event *telemetrystore.QueryEvent) {}

pkg/telemetrytraces/trace_operator_cte_builder.go

@@ -0,0 +1,959 @@
+package telemetrytraces
+
+import (
+	"context"
+	"fmt"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/querybuilder"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/huandu/go-sqlbuilder"
+	"strings"
+)
+
+type cteNode struct {
+	name      string
+	sql       string
+	args      []any
+	dependsOn []string
+}
+
+type traceOperatorCTEBuilder struct {
+	ctx            context.Context
+	start          uint64
+	end            uint64
+	operator       *qbtypes.QueryBuilderTraceOperator
+	stmtBuilder    *traceOperatorStatementBuilder
+	queries        map[string]*qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]
+	ctes           []cteNode
+	cteNameToIndex map[string]int
+	queryToCTEName map[string]string
+	compositeQuery *qbtypes.CompositeQuery
+}
+
+func (b *traceOperatorCTEBuilder) collectQueries() error {
+	referencedQueries := b.operator.CollectReferencedQueries(b.operator.ParsedExpression)
+
+	for _, queryEnv := range b.compositeQuery.Queries {
+		if queryEnv.Type == qbtypes.QueryTypeBuilder {
+			if traceQuery, ok := queryEnv.Spec.(qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]); ok {
+				for _, refName := range referencedQueries {
+					if traceQuery.Name == refName {
+						queryCopy := traceQuery
+						b.queries[refName] = &queryCopy
+						break
+					}
+				}
+			}
+		}
+	}
+
+	for _, refName := range referencedQueries {
+		if _, found := b.queries[refName]; !found {
+			return errors.NewInvalidInputf(errors.CodeInvalidInput, "referenced query '%s' not found", refName)
+		}
+	}
+
+	return nil
+}
+
+func (b *traceOperatorCTEBuilder) build(requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
+	if len(b.queries) == 0 {
+		if err := b.collectQueries(); err != nil {
+			return nil, err
+		}
+	}
+
+	err := b.buildBaseSpansCTE()
+	if err != nil {
+		return nil, err
+	}
+
+	rootCTEName, err := b.buildExpressionCTEs(b.operator.ParsedExpression)
+	if err != nil {
+		return nil, err
+	}
+
+	selectFromCTE := rootCTEName
+	if b.operator.ReturnSpansFrom != "" {
+		selectFromCTE = b.queryToCTEName[b.operator.ReturnSpansFrom]
+		if selectFromCTE == "" {
+			return nil, errors.NewInvalidInputf(errors.CodeInvalidInput,
+				"returnSpansFrom references query '%s' which has no corresponding CTE",
+				b.operator.ReturnSpansFrom)
+		}
+	}
+
+	finalStmt, err := b.buildFinalQuery(selectFromCTE, requestType)
+	if err != nil {
+		return nil, err
+	}
+
+	var cteFragments []string
+	var cteArgs [][]any
+
+	timeConstantsCTE := b.buildTimeConstantsCTE()
+	cteFragments = append(cteFragments, timeConstantsCTE)
+
+	for _, cte := range b.ctes {
+		cteFragments = append(cteFragments, fmt.Sprintf("%s AS (%s)", cte.name, cte.sql))
+		cteArgs = append(cteArgs, cte.args)
+	}
+
+	finalSQL := querybuilder.CombineCTEs(cteFragments) + finalStmt.Query
+	finalArgs := querybuilder.PrependArgs(cteArgs, finalStmt.Args)
+
+	return &qbtypes.Statement{
+		Query:    finalSQL,
+		Args:     finalArgs,
+		Warnings: finalStmt.Warnings,
+	}, nil
+}
+
+func (b *traceOperatorCTEBuilder) buildTimeConstantsCTE() string {
+	startBucket := b.start/querybuilder.NsToSeconds - querybuilder.BucketAdjustment
+	endBucket := b.end / querybuilder.NsToSeconds
+
+	return fmt.Sprintf(`
+		toDateTime64(%d, 9) AS t_from,
+		toDateTime64(%d, 9) AS t_to,
+		%d AS bucket_from,
+		%d AS bucket_to`,
+		b.start, b.end, startBucket, endBucket)
+}
+
+func (b *traceOperatorCTEBuilder) buildBaseSpansCTE() error {
+	sb := sqlbuilder.NewSelectBuilder()
+
+	sb.Select(
+		"trace_id",
+		"span_id",
+		"parent_span_id",
+		"name",
+		"timestamp",
+		"duration_nano",
+		sqlbuilder.Escape("resource_string_service$$name")+" AS `service.name`",
+		sqlbuilder.Escape("resource_string_service$$name"),
+		sqlbuilder.Escape("resource_string_service$$name_exists"),
+		"attributes_string",
+		"attributes_number",
+		"attributes_bool",
+		"resources_string",
+	)
+
+	sb.From(fmt.Sprintf("%s.%s", DBName, SpanIndexV3TableName))
+
+	startBucket := b.start/querybuilder.NsToSeconds - querybuilder.BucketAdjustment
+	endBucket := b.end / querybuilder.NsToSeconds
+
+	sb.Where(
+		sb.GE("timestamp", fmt.Sprintf("%d", b.start)),
+		sb.L("timestamp", fmt.Sprintf("%d", b.end)),
+		sb.GE("ts_bucket_start", startBucket),
+		sb.LE("ts_bucket_start", endBucket),
+	)
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	b.addCTE("base_spans", sql, args, nil)
+	return nil
+}
+
+func (b *traceOperatorCTEBuilder) buildExpressionCTEs(expr *qbtypes.TraceOperand) (string, error) {
+	if expr == nil {
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "expression is nil")
+	}
+
+	if expr.QueryRef != nil {
+		return b.buildQueryCTE(expr.QueryRef.Name)
+	}
+
+	var leftCTE, rightCTE string
+	var err error
+
+	if expr.Left != nil {
+		leftCTE, err = b.buildExpressionCTEs(expr.Left)
+		if err != nil {
+			return "", err
+		}
+	}
+
+	if expr.Right != nil {
+		rightCTE, err = b.buildExpressionCTEs(expr.Right)
+		if err != nil {
+			return "", err
+		}
+	}
+
+	return b.buildOperatorCTE(*expr.Operator, leftCTE, rightCTE)
+}
+
+func (b *traceOperatorCTEBuilder) buildQueryCTE(queryName string) (string, error) {
+	query, exists := b.queries[queryName]
+	if !exists {
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "query %s not found", queryName)
+	}
+
+	cteName := queryName
+	b.queryToCTEName[queryName] = cteName
+
+	if _, exists := b.cteNameToIndex[cteName]; exists {
+		return cteName, nil
+	}
+
+	keySelectors := getKeySelectors(*query)
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(b.ctx, keySelectors)
+	if err != nil {
+		return "", err
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"trace_id",
+		"span_id",
+		"parent_span_id",
+		"name",
+		"timestamp",
+		"duration_nano",
+		"`service.name`",
+		fmt.Sprintf("'%s' AS level", cteName),
+	)
+
+	requiredColumns := b.getRequiredAttributeColumns()
+	for _, col := range requiredColumns {
+		sb.SelectMore(col)
+	}
+
+	sb.From("base_spans AS s")
+
+	if query.Filter != nil && query.Filter.Expression != "" {
+		filterWhereClause, err := querybuilder.PrepareWhereClause(
+			query.Filter.Expression,
+			querybuilder.FilterExprVisitorOpts{
+				Logger:             b.stmtBuilder.logger,
+				FieldMapper:        b.stmtBuilder.fm,
+				ConditionBuilder:   b.stmtBuilder.cb,
+				FieldKeys:          keys,
+				SkipResourceFilter: true,
+			},
+		)
+		if err != nil {
+			return "", err
+		}
+		if filterWhereClause != nil {
+			sb.AddWhereClause(filterWhereClause.WhereClause)
+		}
+	}
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	b.addCTE(cteName, sql, args, []string{"base_spans"})
+
+	return cteName, nil
+}
+
+func sanitizeForSQL(s string) string {
+	replacements := map[string]string{
+		"=>":  "DIRECT_DESC",
+		"->":  "INDIRECT_DESC",
+		"&&":  "AND",
+		"||":  "OR",
+		"NOT": "NOT",
+		" ":   "_",
+	}
+
+	result := s
+	for old, new := range replacements {
+		result = strings.ReplaceAll(result, old, new)
+	}
+	return result
+}
+
+func (b *traceOperatorCTEBuilder) buildOperatorCTE(op qbtypes.TraceOperatorType, leftCTE, rightCTE string) (string, error) {
+	sanitizedOp := sanitizeForSQL(op.StringValue())
+	cteName := fmt.Sprintf("%s_%s_%s", leftCTE, sanitizedOp, rightCTE)
+
+	if _, exists := b.cteNameToIndex[cteName]; exists {
+		return cteName, nil
+	}
+
+	var sql string
+	var args []any
+	var dependsOn []string
+
+	switch op {
+	case qbtypes.TraceOperatorDirectDescendant:
+		sql, args, dependsOn = b.buildDirectDescendantCTE(leftCTE, rightCTE)
+	case qbtypes.TraceOperatorAnd:
+		sql, args, dependsOn = b.buildAndCTE(leftCTE, rightCTE)
+	case qbtypes.TraceOperatorOr:
+		sql, dependsOn = b.buildOrCTE(leftCTE, rightCTE)
+		args = nil
+	case qbtypes.TraceOperatorNot, qbtypes.TraceOperatorExclude:
+		sql, args, dependsOn = b.buildNotCTE(leftCTE, rightCTE)
+	default:
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported operator: %s", op.StringValue())
+	}
+
+	b.addCTE(cteName, sql, args, dependsOn)
+	return cteName, nil
+}
+
+func (b *traceOperatorCTEBuilder) buildDirectDescendantCTE(parentCTE, childCTE string) (string, []any, []string) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"c.trace_id",
+		"c.span_id",
+		"c.parent_span_id",
+		"c.name",
+		"c.timestamp",
+		"c.duration_nano",
+		"c.`service.name`",
+		fmt.Sprintf("'%s' AS level", childCTE),
+	)
+
+	requiredColumns := b.getRequiredAttributeColumns()
+	for _, col := range requiredColumns {
+		sb.SelectMore(fmt.Sprintf("c.%s", col))
+	}
+
+	sb.From(fmt.Sprintf("%s AS c", childCTE))
+	sb.JoinWithOption(
+		sqlbuilder.InnerJoin,
+		fmt.Sprintf("%s AS p", parentCTE),
+		"p.trace_id = c.trace_id AND p.span_id = c.parent_span_id",
+	)
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	return sql, args, []string{parentCTE, childCTE}
+}
+
+func (b *traceOperatorCTEBuilder) buildAndCTE(leftCTE, rightCTE string) (string, []any, []string) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"l.trace_id",
+		"l.span_id",
+		"l.parent_span_id",
+		"l.name",
+		"l.timestamp",
+		"l.duration_nano",
+		"l.`service.name`",
+		"l.level",
+	)
+
+	requiredColumns := b.getRequiredAttributeColumns()
+	for _, col := range requiredColumns {
+		sb.SelectMore(fmt.Sprintf("l.%s", col))
+	}
+	sb.From(fmt.Sprintf("%s AS l", leftCTE))
+	sb.JoinWithOption(
+		sqlbuilder.InnerJoin,
+		fmt.Sprintf("%s AS r", rightCTE),
+		"l.trace_id = r.trace_id",
+	)
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	return sql, args, []string{leftCTE, rightCTE}
+}
+
+func (b *traceOperatorCTEBuilder) buildOrCTE(leftCTE, rightCTE string) (string, []string) {
+	sql := fmt.Sprintf(`
+		SELECT * FROM %s
+		UNION DISTINCT
+		SELECT * FROM %s
+	`, leftCTE, rightCTE)
+
+	return sql, []string{leftCTE, rightCTE}
+}
+
+func (b *traceOperatorCTEBuilder) buildNotCTE(leftCTE, rightCTE string) (string, []any, []string) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(
+		"l.trace_id",
+		"l.span_id",
+		"l.parent_span_id",
+		"l.name",
+		"l.timestamp",
+		"l.duration_nano",
+		"l.`service.name`",
+		"l.level",
+	)
+
+	requiredColumns := b.getRequiredAttributeColumns()
+	for _, col := range requiredColumns {
+		sb.SelectMore(fmt.Sprintf("l.%s", col))
+	}
+	sb.From(fmt.Sprintf("%s AS l", leftCTE))
+	sb.Where(fmt.Sprintf(
+		"NOT EXISTS (SELECT 1 FROM %s AS r WHERE r.trace_id = l.trace_id)",
+		rightCTE,
+	))
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	return sql, args, []string{leftCTE, rightCTE}
+}
+
+func (b *traceOperatorCTEBuilder) buildFinalQuery(selectFromCTE string, requestType qbtypes.RequestType) (*qbtypes.Statement, error) {
+	switch requestType {
+	case qbtypes.RequestTypeRaw:
+		return b.buildListQuery(selectFromCTE)
+	case qbtypes.RequestTypeTimeSeries:
+		return b.buildTimeSeriesQuery(selectFromCTE)
+	case qbtypes.RequestTypeTrace:
+		return b.buildTraceQuery(selectFromCTE)
+	case qbtypes.RequestTypeScalar:
+		return b.buildScalarQuery(selectFromCTE)
+	default:
+		return nil, fmt.Errorf("unsupported request type: %s", requestType)
+	}
+}
+
+func (b *traceOperatorCTEBuilder) buildListQuery(selectFromCTE string) (*qbtypes.Statement, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+
+	sb.Select(
+		"timestamp",
+		"trace_id",
+		"span_id",
+		"name",
+		"service.name",
+		"duration_nano",
+		"parent_span_id",
+	)
+
+	for _, field := range b.operator.SelectFields {
+		colExpr, err := b.stmtBuilder.fm.ColumnExpressionFor(b.ctx, &field, nil)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to map select field '%s' in list query: %v",
+				field.Name,
+				err,
+			)
+		}
+		sb.SelectMore(sqlbuilder.Escape(colExpr))
+	}
+
+	sb.From(selectFromCTE)
+
+	// Add order by support
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(b.ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
+	orderApplied := false
+	for _, orderBy := range b.operator.Order {
+		colExpr, err := b.stmtBuilder.fm.ColumnExpressionFor(b.ctx, &orderBy.Key.TelemetryFieldKey, keys)
+		if err != nil {
+			return nil, err
+		}
+		sb.OrderBy(fmt.Sprintf("%s %s", colExpr, orderBy.Direction.StringValue()))
+		orderApplied = true
+	}
+
+	if !orderApplied {
+		sb.OrderBy("timestamp DESC")
+	}
+
+	if b.operator.Limit > 0 {
+		sb.Limit(b.operator.Limit)
+	} else {
+		sb.Limit(100)
+	}
+
+	if b.operator.Offset > 0 {
+		sb.Offset(b.operator.Offset)
+	}
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	return &qbtypes.Statement{
+		Query: sql,
+		Args:  args,
+	}, nil
+}
+
+func (b *traceOperatorCTEBuilder) getKeySelectors() []*telemetrytypes.FieldKeySelector {
+	var keySelectors []*telemetrytypes.FieldKeySelector
+
+	for _, agg := range b.operator.Aggregations {
+		selectors := querybuilder.QueryStringToKeysSelectors(agg.Expression)
+		keySelectors = append(keySelectors, selectors...)
+	}
+
+	if b.operator.Filter != nil && b.operator.Filter.Expression != "" {
+		selectors := querybuilder.QueryStringToKeysSelectors(b.operator.Filter.Expression)
+		keySelectors = append(keySelectors, selectors...)
+	}
+
+	for _, gb := range b.operator.GroupBy {
+		selectors := querybuilder.QueryStringToKeysSelectors(gb.TelemetryFieldKey.Name)
+		keySelectors = append(keySelectors, selectors...)
+	}
+
+	for _, order := range b.operator.Order {
+		keySelectors = append(keySelectors, &telemetrytypes.FieldKeySelector{
+			Name:          order.Key.Name,
+			Signal:        telemetrytypes.SignalTraces,
+			FieldContext:  order.Key.FieldContext,
+			FieldDataType: order.Key.FieldDataType,
+		})
+	}
+
+	for i := range keySelectors {
+		keySelectors[i].Signal = telemetrytypes.SignalTraces
+	}
+
+	return keySelectors
+}
+
+func (b *traceOperatorCTEBuilder) getRequiredAttributeColumns() []string {
+	requiredColumns := make(map[string]bool)
+
+	allKeySelectors := b.getKeySelectors()
+
+	for _, selector := range allKeySelectors {
+		if b.isIntrinsicField(selector.Name) {
+			continue
+		}
+		if strings.ToLower(selector.Name) == SpanSearchScopeRoot || strings.ToLower(selector.Name) == SpanSearchScopeEntryPoint {
+			continue
+		}
+		switch selector.FieldContext {
+		case telemetrytypes.FieldContextResource:
+			requiredColumns["resources_string"] = true
+		case telemetrytypes.FieldContextAttribute, telemetrytypes.FieldContextSpan, telemetrytypes.FieldContextUnspecified:
+			switch selector.FieldDataType {
+			case telemetrytypes.FieldDataTypeString:
+				requiredColumns["attributes_string"] = true
+			case telemetrytypes.FieldDataTypeNumber:
+				requiredColumns["attributes_number"] = true
+			case telemetrytypes.FieldDataTypeBool:
+				requiredColumns["attributes_bool"] = true
+			default:
+				requiredColumns["attributes_string"] = true
+			}
+		}
+	}
+
+	result := make([]string, 0, len(requiredColumns))
+	for col := range requiredColumns {
+		result = append(result, col)
+	}
+	return result
+}
+
+func (b *traceOperatorCTEBuilder) isIntrinsicField(fieldName string) bool {
+	_, isIntrinsic := IntrinsicFields[fieldName]
+	if isIntrinsic {
+		return true
+	}
+	_, isIntrinsicDeprecated := IntrinsicFieldsDeprecated[fieldName]
+	if isIntrinsicDeprecated {
+		return true
+	}
+	_, isCalculated := CalculatedFields[fieldName]
+	if isCalculated {
+		return true
+	}
+	_, isCalculatedDeprecated := CalculatedFieldsDeprecated[fieldName]
+	if isCalculatedDeprecated {
+		return true
+	}
+	_, isDefault := DefaultFields[fieldName]
+	return isDefault
+}
+
+func (b *traceOperatorCTEBuilder) buildTimeSeriesQuery(selectFromCTE string) (*qbtypes.Statement, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+
+	stepIntervalSeconds := int64(b.operator.StepInterval.Seconds())
+	if stepIntervalSeconds <= 0 {
+		timeRangeSeconds := (b.end - b.start) / querybuilder.NsToSeconds
+		if timeRangeSeconds > 3600 {
+			stepIntervalSeconds = 300
+		} else if timeRangeSeconds > 1800 {
+			stepIntervalSeconds = 120
+		} else {
+			stepIntervalSeconds = 60
+		}
+
+		b.stmtBuilder.logger.WarnContext(b.ctx,
+			"trace operator stepInterval not set, using default",
+			"defaultSeconds", stepIntervalSeconds)
+	}
+
+	sb.Select(fmt.Sprintf(
+		"toStartOfInterval(timestamp, INTERVAL %d SECOND) AS ts",
+		stepIntervalSeconds,
+	))
+
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(b.ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
+	var allGroupByArgs []any
+
+	for _, gb := range b.operator.GroupBy {
+		expr, args, err := querybuilder.CollisionHandledFinalExpr(
+			b.ctx,
+			&gb.TelemetryFieldKey,
+			b.stmtBuilder.fm,
+			b.stmtBuilder.cb,
+			keys,
+			telemetrytypes.FieldDataTypeString,
+			"",
+			nil,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to map group by field '%s': %v",
+				gb.TelemetryFieldKey.Name,
+				err,
+			)
+		}
+		colExpr := fmt.Sprintf("toString(%s) AS `%s`", expr, gb.TelemetryFieldKey.Name)
+		allGroupByArgs = append(allGroupByArgs, args...)
+		sb.SelectMore(colExpr)
+	}
+
+	var allAggChArgs []any
+	for i, agg := range b.operator.Aggregations {
+		rewritten, chArgs, err := b.stmtBuilder.aggExprRewriter.Rewrite(
+			b.ctx,
+			agg.Expression,
+			uint64(stepIntervalSeconds),
+			keys,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to rewrite aggregation expression '%s': %v",
+				agg.Expression,
+				err,
+			)
+		}
+		allAggChArgs = append(allAggChArgs, chArgs...)
+
+		alias := fmt.Sprintf("__result_%d", i)
+
+		sb.SelectMore(fmt.Sprintf("%s AS %s", rewritten, alias))
+	}
+
+	sb.From(selectFromCTE)
+
+	sb.GroupBy("ts")
+	if len(b.operator.GroupBy) > 0 {
+		groupByKeys := make([]string, len(b.operator.GroupBy))
+		for i, gb := range b.operator.GroupBy {
+			groupByKeys[i] = fmt.Sprintf("`%s`", gb.TelemetryFieldKey.Name)
+		}
+		sb.GroupBy(groupByKeys...)
+	}
+
+	// Add order by support
+	for _, orderBy := range b.operator.Order {
+		idx, ok := b.aggOrderBy(orderBy)
+		if ok {
+			sb.OrderBy(fmt.Sprintf("__result_%d %s", idx, orderBy.Direction.StringValue()))
+		} else {
+			sb.OrderBy(fmt.Sprintf("`%s` %s", orderBy.Key.Name, orderBy.Direction.StringValue()))
+		}
+	}
+	sb.OrderBy("ts desc")
+
+	combinedArgs := append(allGroupByArgs, allAggChArgs...)
+
+	// Add HAVING clause if specified
+	if err := b.addHavingClause(sb); err != nil {
+		return nil, err
+	}
+
+	// Add limit support
+	if b.operator.Limit > 0 {
+		sb.Limit(b.operator.Limit)
+	}
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse, combinedArgs...)
+	return &qbtypes.Statement{
+		Query: sql,
+		Args:  args,
+	}, nil
+}
+
+func (b *traceOperatorCTEBuilder) buildTraceQuery(selectFromCTE string) (*qbtypes.Statement, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(b.ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
+	var allGroupByArgs []any
+
+	for _, gb := range b.operator.GroupBy {
+		expr, args, err := querybuilder.CollisionHandledFinalExpr(
+			b.ctx,
+			&gb.TelemetryFieldKey,
+			b.stmtBuilder.fm,
+			b.stmtBuilder.cb,
+			keys,
+			telemetrytypes.FieldDataTypeString,
+			"",
+			nil,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to map group by field '%s': %v",
+				gb.TelemetryFieldKey.Name,
+				err,
+			)
+		}
+		colExpr := fmt.Sprintf("toString(%s) AS `%s`", expr, gb.TelemetryFieldKey.Name)
+		allGroupByArgs = append(allGroupByArgs, args...)
+		sb.SelectMore(colExpr)
+	}
+
+	rateInterval := (b.end - b.start) / querybuilder.NsToSeconds
+
+	var allAggChArgs []any
+	for i, agg := range b.operator.Aggregations {
+		rewritten, chArgs, err := b.stmtBuilder.aggExprRewriter.Rewrite(
+			b.ctx,
+			agg.Expression,
+			rateInterval,
+			keys,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to rewrite aggregation expression '%s': %v",
+				agg.Expression,
+				err,
+			)
+		}
+		allAggChArgs = append(allAggChArgs, chArgs...)
+
+		alias := fmt.Sprintf("__result_%d", i)
+
+		sb.SelectMore(fmt.Sprintf("%s AS %s", rewritten, alias))
+	}
+
+	traceSubquery := fmt.Sprintf("SELECT DISTINCT trace_id FROM %s", selectFromCTE)
+
+	sb.Select(
+		"any(timestamp) as timestamp",
+		"any(`service.name`) as `service.name`",
+		"any(name) as `name`",
+		"count() as span_count",
+		"any(duration_nano) as `duration_nano`",
+		"trace_id as `trace_id`",
+	)
+
+	sb.From("base_spans")
+	sb.Where(
+		fmt.Sprintf("trace_id GLOBAL IN (%s)", traceSubquery),
+		"parent_span_id = ''",
+	)
+
+	sb.GroupBy("trace_id")
+	if len(b.operator.GroupBy) > 0 {
+		groupByKeys := make([]string, len(b.operator.GroupBy))
+		for i, gb := range b.operator.GroupBy {
+			groupByKeys[i] = fmt.Sprintf("`%s`", gb.TelemetryFieldKey.Name)
+		}
+		sb.GroupBy(groupByKeys...)
+	}
+
+	// Add HAVING clause if specified
+	if err := b.addHavingClause(sb); err != nil {
+		return nil, err
+	}
+
+	orderApplied := false
+	for _, orderBy := range b.operator.Order {
+		switch orderBy.Key.Name {
+		case qbtypes.OrderByTraceDuration.StringValue():
+			sb.OrderBy(fmt.Sprintf("`duration_nano` %s", orderBy.Direction.StringValue()))
+			orderApplied = true
+		case qbtypes.OrderBySpanCount.StringValue():
+			sb.OrderBy(fmt.Sprintf("span_count %s", orderBy.Direction.StringValue()))
+			orderApplied = true
+		case "timestamp":
+			sb.OrderBy(fmt.Sprintf("timestamp %s", orderBy.Direction.StringValue()))
+			orderApplied = true
+		default:
+			aggIndex := -1
+			for i, agg := range b.operator.Aggregations {
+				if orderBy.Key.Name == agg.Alias || orderBy.Key.Name == fmt.Sprintf("__result_%d", i) {
+					aggIndex = i
+					break
+				}
+			}
+			if aggIndex >= 0 {
+				alias := fmt.Sprintf("__result_%d", aggIndex)
+				if b.operator.Aggregations[aggIndex].Alias != "" {
+					alias = b.operator.Aggregations[aggIndex].Alias
+				}
+				sb.OrderBy(fmt.Sprintf("%s %s", alias, orderBy.Direction.StringValue()))
+				orderApplied = true
+			} else {
+				b.stmtBuilder.logger.WarnContext(b.ctx,
+					"ignoring order by field that's not available in trace context",
+					"field", orderBy.Key.Name)
+			}
+		}
+	}
+
+	if !orderApplied {
+		sb.OrderBy("`duration_nano` DESC")
+	}
+
+	if b.operator.Limit > 0 {
+		sb.Limit(b.operator.Limit)
+	}
+
+	combinedArgs := append(allGroupByArgs, allAggChArgs...)
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse, combinedArgs...)
+	return &qbtypes.Statement{
+		Query: sql,
+		Args:  args,
+	}, nil
+}
+
+func (b *traceOperatorCTEBuilder) buildScalarQuery(selectFromCTE string) (*qbtypes.Statement, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+
+	keySelectors := b.getKeySelectors()
+	keys, _, err := b.stmtBuilder.metadataStore.GetKeysMulti(b.ctx, keySelectors)
+	if err != nil {
+		return nil, err
+	}
+
+	var allGroupByArgs []any
+
+	for _, gb := range b.operator.GroupBy {
+		expr, args, err := querybuilder.CollisionHandledFinalExpr(
+			b.ctx,
+			&gb.TelemetryFieldKey,
+			b.stmtBuilder.fm,
+			b.stmtBuilder.cb,
+			keys,
+			telemetrytypes.FieldDataTypeString,
+			"",
+			nil,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to map group by field '%s': %v",
+				gb.TelemetryFieldKey.Name,
+				err,
+			)
+		}
+		colExpr := fmt.Sprintf("toString(%s) AS `%s`", expr, gb.TelemetryFieldKey.Name)
+		allGroupByArgs = append(allGroupByArgs, args...)
+		sb.SelectMore(colExpr)
+	}
+
+	var allAggChArgs []any
+	for i, agg := range b.operator.Aggregations {
+		rewritten, chArgs, err := b.stmtBuilder.aggExprRewriter.Rewrite(
+			b.ctx,
+			agg.Expression,
+			uint64((b.end-b.start)/querybuilder.NsToSeconds),
+			keys,
+		)
+		if err != nil {
+			return nil, errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"failed to rewrite aggregation expression '%s': %v",
+				agg.Expression,
+				err,
+			)
+		}
+		allAggChArgs = append(allAggChArgs, chArgs...)
+
+		alias := fmt.Sprintf("__result_%d", i)
+
+		sb.SelectMore(fmt.Sprintf("%s AS %s", rewritten, alias))
+	}
+
+	sb.From(selectFromCTE)
+
+	if len(b.operator.GroupBy) > 0 {
+		groupByKeys := make([]string, len(b.operator.GroupBy))
+		for i, gb := range b.operator.GroupBy {
+			groupByKeys[i] = fmt.Sprintf("`%s`", gb.TelemetryFieldKey.Name)
+		}
+		sb.GroupBy(groupByKeys...)
+	}
+
+	// Add order by support
+	for _, orderBy := range b.operator.Order {
+		idx, ok := b.aggOrderBy(orderBy)
+		if ok {
+			sb.OrderBy(fmt.Sprintf("__result_%d %s", idx, orderBy.Direction.StringValue()))
+		} else {
+			sb.OrderBy(fmt.Sprintf("`%s` %s", orderBy.Key.Name, orderBy.Direction.StringValue()))
+		}
+	}
+
+	// Add default ordering if no orderBy specified
+	if len(b.operator.Order) == 0 {
+		sb.OrderBy("__result_0 DESC")
+	}
+
+	// Add limit support
+	if b.operator.Limit > 0 {
+		sb.Limit(b.operator.Limit)
+	}
+
+	combinedArgs := append(allGroupByArgs, allAggChArgs...)
+
+	// Add HAVING clause if specified
+	if err := b.addHavingClause(sb); err != nil {
+		return nil, err
+	}
+
+	sql, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse, combinedArgs...)
+	return &qbtypes.Statement{
+		Query: sql,
+		Args:  args,
+	}, nil
+}
+
+func (b *traceOperatorCTEBuilder) addHavingClause(sb *sqlbuilder.SelectBuilder) error {
+	if b.operator.Having != nil && b.operator.Having.Expression != "" {
+		rewriter := querybuilder.NewHavingExpressionRewriter()
+		rewrittenExpr := rewriter.RewriteForTraces(b.operator.Having.Expression, b.operator.Aggregations)
+		sb.Having(rewrittenExpr)
+	}
+	return nil
+}
+
+func (b *traceOperatorCTEBuilder) addCTE(name, sql string, args []any, dependsOn []string) {
+	b.ctes = append(b.ctes, cteNode{
+		name:      name,
+		sql:       sql,
+		args:      args,
+		dependsOn: dependsOn,
+	})
+	b.cteNameToIndex[name] = len(b.ctes) - 1
+}
+
+func (b *traceOperatorCTEBuilder) aggOrderBy(k qbtypes.OrderBy) (int, bool) {
+	for i, agg := range b.operator.Aggregations {
+		if k.Key.Name == agg.Alias ||
+			k.Key.Name == agg.Expression ||
+			k.Key.Name == fmt.Sprintf("__result_%d", i) {
+			return i, true
+		}
+	}
+	return 0, false
+}

pkg/telemetrytraces/trace_operator_statement_builder.go

@@ -0,0 +1,89 @@
+package telemetrytraces
+
+import (
+	"context"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/querybuilder"
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"log/slog"
+)
+
+type traceOperatorStatementBuilder struct {
+	logger           *slog.Logger
+	metadataStore    telemetrytypes.MetadataStore
+	fm               qbtypes.FieldMapper
+	cb               qbtypes.ConditionBuilder
+	traceStmtBuilder qbtypes.StatementBuilder[qbtypes.TraceAggregation]
+	aggExprRewriter  qbtypes.AggExprRewriter
+}
+
+var _ qbtypes.TraceOperatorStatementBuilder = (*traceOperatorStatementBuilder)(nil)
+
+func NewTraceOperatorStatementBuilder(
+	settings factory.ProviderSettings,
+	metadataStore telemetrytypes.MetadataStore,
+	fieldMapper qbtypes.FieldMapper,
+	conditionBuilder qbtypes.ConditionBuilder,
+	traceStmtBuilder qbtypes.StatementBuilder[qbtypes.TraceAggregation],
+	aggExprRewriter qbtypes.AggExprRewriter,
+) *traceOperatorStatementBuilder {
+	tracesSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/telemetrytraces")
+	return &traceOperatorStatementBuilder{
+		logger:           tracesSettings.Logger(),
+		metadataStore:    metadataStore,
+		fm:               fieldMapper,
+		cb:               conditionBuilder,
+		traceStmtBuilder: traceStmtBuilder,
+		aggExprRewriter:  aggExprRewriter,
+	}
+}
+
+// Build builds a SQL query based on the given parameters.
+func (b *traceOperatorStatementBuilder) Build(
+	ctx context.Context,
+	start uint64,
+	end uint64,
+	requestType qbtypes.RequestType,
+	query qbtypes.QueryBuilderTraceOperator,
+	compositeQuery *qbtypes.CompositeQuery,
+) (*qbtypes.Statement, error) {
+
+	start = querybuilder.ToNanoSecs(start)
+	end = querybuilder.ToNanoSecs(end)
+
+	// Parse the expression if not already parsed
+	if query.ParsedExpression == nil {
+		if err := query.ParseExpression(); err != nil {
+			return nil, err
+		}
+	}
+
+	// Validate compositeQuery parameter
+	if compositeQuery == nil {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "compositeQuery cannot be nil")
+	}
+
+	// Build the CTE-based query
+	builder := &traceOperatorCTEBuilder{
+		ctx:            ctx,
+		start:          start,
+		end:            end,
+		operator:       &query,
+		stmtBuilder:    b,
+		queries:        make(map[string]*qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]),
+		ctes:           []cteNode{}, // Use slice to maintain order
+		cteNameToIndex: make(map[string]int),
+		queryToCTEName: make(map[string]string),
+		compositeQuery: compositeQuery, // Now passed as explicit parameter
+	}
+
+	// Collect all referenced queries
+	if err := builder.collectQueries(); err != nil {
+		return nil, err
+	}
+
+	// Build the query
+	return builder.build(requestType)
+}

pkg/types/ctxtypes/comment.go

@@ -0,0 +1,163 @@
+package ctxtypes
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"net/url"
+	"regexp"
+	"sync"
+)
+
+var (
+	logsExplorerRegex    = regexp.MustCompile(`/logs/logs-explorer(?:\?.*)?$`)
+	traceExplorerRegex   = regexp.MustCompile(`/traces-explorer(?:\?.*)?$`)
+	metricsExplorerRegex = regexp.MustCompile(`/metrics-explorer/explorer(?:\?.*)?$`)
+	dashboardRegex       = regexp.MustCompile(`/dashboard/[a-zA-Z0-9\-]+/(new|edit)(?:\?.*)?$`)
+	dashboardIDRegex     = regexp.MustCompile(`/dashboard/([a-f0-9\-]+)/`)
+	widgetIDRegex        = regexp.MustCompile(`widgetId=([a-f0-9\-]+)`)
+	ruleRegex            = regexp.MustCompile(`/alerts/(new|edit)(?:\?.*)?$`)
+	ruleIDRegex          = regexp.MustCompile(`ruleId=(\d+)`)
+)
+
+type commentCtxKey struct{}
+
+type Comment struct {
+	vals map[string]string
+	mtx  sync.RWMutex
+}
+
+func NewContextWithComment(ctx context.Context, comment *Comment) context.Context {
+	return context.WithValue(ctx, commentCtxKey{}, comment)
+}
+
+func CommentFromContext(ctx context.Context) *Comment {
+	comment, ok := ctx.Value(commentCtxKey{}).(*Comment)
+	if !ok {
+		return NewComment()
+	}
+
+	// Return a deep copy of the comment to prevent mutations from affecting the original
+	copy := NewComment()
+	copy.Merge(comment.Map())
+	return copy
+}
+
+func CommentFromHTTPRequest(req *http.Request) map[string]string {
+	comments := map[string]string{}
+
+	referrer := req.Header.Get("Referer")
+	if referrer == "" {
+		return comments
+	}
+
+	referrerURL, err := url.Parse(referrer)
+	if err != nil {
+		return comments
+	}
+
+	logsExplorerMatched := logsExplorerRegex.MatchString(referrer)
+	traceExplorerMatched := traceExplorerRegex.MatchString(referrer)
+	metricsExplorerMatched := metricsExplorerRegex.MatchString(referrer)
+	dashboardMatched := dashboardRegex.MatchString(referrer)
+	ruleMatched := ruleRegex.MatchString(referrer)
+
+	switch {
+	case dashboardMatched:
+		comments["module_name"] = "dashboard"
+	case ruleMatched:
+		comments["module_name"] = "rule"
+	case metricsExplorerMatched:
+		comments["module_name"] = "metrics-explorer"
+	case logsExplorerMatched:
+		comments["module_name"] = "logs-explorer"
+	case traceExplorerMatched:
+		comments["module_name"] = "traces-explorer"
+	default:
+		return comments
+	}
+
+	if dashboardMatched {
+		if matches := dashboardIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
+			comments["dashboard_id"] = matches[1]
+		}
+
+		if matches := widgetIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
+			comments["widget_id"] = matches[1]
+		}
+	}
+
+	if ruleMatched {
+		if matches := ruleIDRegex.FindStringSubmatch(referrer); len(matches) > 1 {
+			comments["rule_id"] = matches[1]
+		}
+	}
+
+	comments["http_path"] = referrerURL.Path
+
+	return comments
+}
+
+// NewComment creates a new Comment with an empty map. It is safe to use concurrently.
+func NewComment() *Comment {
+	return &Comment{vals: map[string]string{}}
+}
+
+func (comment *Comment) Set(key, value string) {
+	comment.mtx.Lock()
+	defer comment.mtx.Unlock()
+
+	comment.vals[key] = value
+}
+
+func (comment *Comment) Merge(vals map[string]string) {
+	comment.mtx.Lock()
+	defer comment.mtx.Unlock()
+
+	// If vals is nil, do nothing. Comment should not panic.
+	if vals == nil {
+		return
+	}
+
+	for key, value := range vals {
+		comment.vals[key] = value
+	}
+}
+
+func (comment *Comment) Map() map[string]string {
+	comment.mtx.RLock()
+	defer comment.mtx.RUnlock()
+
+	copyOfVals := make(map[string]string)
+	for key, value := range comment.vals {
+		copyOfVals[key] = value
+	}
+
+	return copyOfVals
+}
+
+func (comment *Comment) String() string {
+	comment.mtx.RLock()
+	defer comment.mtx.RUnlock()
+
+	commentJSON, err := json.Marshal(comment.vals)
+	if err != nil {
+		return "{}"
+	}
+
+	return string(commentJSON)
+}
+
+func (comment *Comment) Equal(other *Comment) bool {
+	if len(comment.vals) != len(other.vals) {
+		return false
+	}
+
+	for key, value := range comment.vals {
+		if val, ok := other.vals[key]; !ok || val != value {
+			return false
+		}
+	}
+
+	return true
+}

pkg/types/ctxtypes/comment_test.go

@@ -0,0 +1,123 @@
+package ctxtypes
+
+import (
+	"context"
+	"fmt"
+	"net/http"
+	"sync"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestCommentFromHTTPRequest(t *testing.T) {
+	testCases := []struct {
+		name     string
+		req      *http.Request
+		expected map[string]string
+	}{
+		{
+			name:     "EmptyReferer",
+			req:      &http.Request{Header: http.Header{"Referer": {""}}},
+			expected: map[string]string{},
+		},
+		{
+			name:     "ControlCharacterInReferer",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/logs/logs-explorer\x00"}}},
+			expected: map[string]string{},
+		},
+		{
+			name:     "LogsExplorer",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/logs/logs-explorer"}}},
+			expected: map[string]string{"http_path": "/logs/logs-explorer", "module_name": "logs-explorer"},
+		},
+		{
+			name:     "TracesExplorer",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/traces-explorer"}}},
+			expected: map[string]string{"http_path": "/traces-explorer", "module_name": "traces-explorer"},
+		},
+		{
+			name:     "MetricsExplorer",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/metrics-explorer/explorer"}}},
+			expected: map[string]string{"http_path": "/metrics-explorer/explorer", "module_name": "metrics-explorer"},
+		},
+		{
+			name:     "DashboardWithID",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/dashboard/123/new"}}},
+			expected: map[string]string{"http_path": "/dashboard/123/new", "module_name": "dashboard", "dashboard_id": "123"},
+		},
+		{
+			name:     "Rule",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/alerts/new"}}},
+			expected: map[string]string{"http_path": "/alerts/new", "module_name": "rule"},
+		},
+		{
+			name:     "RuleWithID",
+			req:      &http.Request{Header: http.Header{"Referer": {"https://signoz.io/alerts/edit?ruleId=123"}}},
+			expected: map[string]string{"http_path": "/alerts/edit", "module_name": "rule", "rule_id": "123"},
+		},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			actual := CommentFromHTTPRequest(tc.req)
+
+			assert.True(t, (&Comment{vals: tc.expected}).Equal(&Comment{vals: actual}))
+		})
+	}
+}
+
+func TestCommentFromContext(t *testing.T) {
+	ctx := context.Background()
+	comment1 := CommentFromContext(ctx)
+	assert.True(t, NewComment().Equal(comment1))
+
+	comment1.Set("k1", "v1")
+	ctx = NewContextWithComment(ctx, comment1)
+	actual1 := CommentFromContext(ctx)
+	assert.True(t, comment1.Equal(actual1))
+
+	// Get the comment from the context, mutate it, but this time do not set it back in the context
+	comment2 := CommentFromContext(ctx)
+	comment2.Set("k2", "v2")
+
+	actual2 := CommentFromContext(ctx)
+	// Since comment2 was not set back in the context, it should not affect the original comment1
+	assert.True(t, comment1.Equal(actual2))
+	assert.False(t, comment2.Equal(actual2))
+	assert.False(t, comment1.Equal(comment2))
+}
+
+func TestCommentFromContextConcurrent(t *testing.T) {
+	comment := NewComment()
+	comment.Set("k1", "v1")
+
+	ctx := context.Background()
+	ctx = NewContextWithComment(ctx, comment)
+
+	var wg sync.WaitGroup
+	ctxs := make([]context.Context, 10)
+	var mtx sync.Mutex
+	wg.Add(10)
+
+	for i := 0; i < 10; i++ {
+		go func(i int) {
+			defer wg.Done()
+			comment := CommentFromContext(ctx)
+			comment.Set("k2", fmt.Sprintf("v%d", i))
+			newCtx := NewContextWithComment(ctx, comment)
+			mtx.Lock()
+			ctxs[i] = newCtx
+			mtx.Unlock()
+		}(i)
+	}
+
+	wg.Wait()
+
+	for i, ctx := range ctxs {
+		comment := CommentFromContext(ctx)
+		assert.Equal(t, len(comment.vals), 2)
+		assert.Equal(t, comment.vals["k1"], "v1")
+		assert.Equal(t, comment.vals["k2"], fmt.Sprintf("v%d", i))
+	}
+}

pkg/types/querybuildertypes/querybuildertypesv5/qb.go

@@ -52,3 +52,8 @@ type StatementBuilder[T any] interface {
 	// Build builds the query.
 	Build(ctx context.Context, start, end uint64, requestType RequestType, query QueryBuilderQuery[T], variables map[string]VariableItem) (*Statement, error)
 }
+
+type TraceOperatorStatementBuilder interface {
+	// Build builds the trace operator query.
+	Build(ctx context.Context, start, end uint64, requestType RequestType, query QueryBuilderTraceOperator, compositeQuery *CompositeQuery) (*Statement, error)
+}

pkg/types/querybuildertypes/querybuildertypesv5/req.go

@@ -88,8 +88,8 @@ func (q *QueryEnvelope) UnmarshalJSON(data []byte) error {
 
 	case QueryTypeTraceOperator:
 		var spec QueryBuilderTraceOperator
-		if err := json.Unmarshal(shadow.Spec, &spec); err != nil {
-			return errors.WrapInvalidInputf(err, errors.CodeInvalidInput, "invalid trace operator spec")
+		if err := UnmarshalJSONWithContext(shadow.Spec, &spec, "trace operator spec"); err != nil {
+			return wrapUnmarshalError(err, "invalid trace operator spec: %v", err)
 		}
 		q.Spec = spec
 
@@ -113,7 +113,7 @@ func (q *QueryEnvelope) UnmarshalJSON(data []byte) error {
 			"unknown query type %q",
 			shadow.Type,
 		).WithAdditional(
-			"Valid query types are: builder_query, builder_sub_query, builder_formula, builder_join, promql, clickhouse_sql",
+			"Valid query types are: builder_query, builder_sub_query, builder_formula, builder_join, builder_trace_operator, promql, clickhouse_sql",
 		)
 	}
 

pkg/types/querybuildertypes/querybuildertypesv5/req_test.go

@@ -131,7 +131,7 @@ func TestQueryRangeRequest_UnmarshalJSON(t *testing.T) {
 								"filter": {
 									"expression": "trace_duration > 200ms AND span_count >= 5"
 								},
-								"orderBy": [{
+								"order": [{
 									"key": {
 										"name": "trace_duration"
 									},
@@ -230,7 +230,7 @@ func TestQueryRangeRequest_UnmarshalJSON(t *testing.T) {
 								"name": "complex_trace_analysis",
 								"expression": "A => (B && NOT C)",
 								"filter": { "expression": "trace_duration BETWEEN 100ms AND 5s AND span_count IN (5, 10, 15)" },
-								"orderBy": [{
+								"order": [{
 									"key": { "name": "span_count" },
 									"direction": "asc"
 								}],
@@ -1028,15 +1028,17 @@ func TestQueryRangeRequest_UnmarshalJSON(t *testing.T) {
 
 func TestParseTraceExpression(t *testing.T) {
 	tests := []struct {
-		name        string
-		expression  string
-		expectError bool
-		checkResult func(t *testing.T, result *TraceOperand)
+		name            string
+		expression      string
+		expectError     bool
+		expectedOpCount int
+		checkResult     func(t *testing.T, result *TraceOperand)
 	}{
 		{
-			name:        "simple query reference",
-			expression:  "A",
-			expectError: false,
+			name:            "simple query reference",
+			expression:      "A",
+			expectError:     false,
+			expectedOpCount: 0,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.QueryRef)
 				assert.Equal(t, "A", result.QueryRef.Name)
@@ -1044,9 +1046,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "simple implication",
-			expression:  "A => B",
-			expectError: false,
+			name:            "simple implication",
+			expression:      "A => B",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorDirectDescendant, *result.Operator)
@@ -1057,9 +1060,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "and operation",
-			expression:  "A && B",
-			expectError: false,
+			name:            "and operation",
+			expression:      "A && B",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorAnd, *result.Operator)
@@ -1068,9 +1072,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "or operation",
-			expression:  "A || B",
-			expectError: false,
+			name:            "or operation",
+			expression:      "A || B",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorOr, *result.Operator)
@@ -1079,9 +1084,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "unary NOT operation",
-			expression:  "NOT A",
-			expectError: false,
+			name:            "unary NOT operation",
+			expression:      "NOT A",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorNot, *result.Operator)
@@ -1091,9 +1097,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "binary NOT operation",
-			expression:  "A NOT B",
-			expectError: false,
+			name:            "binary NOT operation",
+			expression:      "A NOT B",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorExclude, *result.Operator)
@@ -1104,9 +1111,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "complex expression with precedence",
-			expression:  "A => B && C || D",
-			expectError: false,
+			name:            "complex expression with precedence",
+			expression:      "A => B && C || D",
+			expectError:     false,
+			expectedOpCount: 3, // Three operators: =>, &&, ||
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				// Should parse as: A => (B && (C || D)) due to precedence: NOT > || > && > =>
 				// The parsing finds operators from lowest precedence first
@@ -1120,9 +1128,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "simple parentheses",
-			expression:  "(A)",
-			expectError: false,
+			name:            "simple parentheses",
+			expression:      "(A)",
+			expectError:     false,
+			expectedOpCount: 0,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.QueryRef)
 				assert.Equal(t, "A", result.QueryRef.Name)
@@ -1130,9 +1139,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "parentheses expression",
-			expression:  "A => (B || C)",
-			expectError: false,
+			name:            "parentheses expression",
+			expression:      "A => (B || C)",
+			expectError:     false,
+			expectedOpCount: 2, // Two operators: =>, ||
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorDirectDescendant, *result.Operator)
@@ -1146,9 +1156,10 @@ func TestParseTraceExpression(t *testing.T) {
 			},
 		},
 		{
-			name:        "nested NOT with parentheses",
-			expression:  "NOT (A && B)",
-			expectError: false,
+			name:            "nested NOT with parentheses",
+			expression:      "NOT (A && B)",
+			expectError:     false,
+			expectedOpCount: 2, // Two operators: NOT, &&
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorNot, *result.Operator)
@@ -1159,6 +1170,13 @@ func TestParseTraceExpression(t *testing.T) {
 				assert.Equal(t, TraceOperatorAnd, *result.Left.Operator)
 			},
 		},
+		{
+			name:            "complex expression exceeding operator limit",
+			expression:      "A => B => C => D => E => F => G => H => I => J => K => L",
+			expectError:     false, // parseTraceExpression doesn't validate count, ParseExpression does
+			expectedOpCount: 11,    // 11 => operators
+			checkResult:     nil,
+		},
 		{
 			name:        "invalid query reference with numbers",
 			expression:  "123",
@@ -1174,11 +1192,11 @@ func TestParseTraceExpression(t *testing.T) {
 			expression:  "",
 			expectError: true,
 		},
-
 		{
-			name:        "expression with extra whitespace",
-			expression:  "  A   =>   B  ",
-			expectError: false,
+			name:            "expression with extra whitespace",
+			expression:      "  A   =>   B  ",
+			expectError:     false,
+			expectedOpCount: 1,
 			checkResult: func(t *testing.T, result *TraceOperand) {
 				assert.NotNil(t, result.Operator)
 				assert.Equal(t, TraceOperatorDirectDescendant, *result.Operator)
@@ -1190,7 +1208,7 @@ func TestParseTraceExpression(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			result, err := parseTraceExpression(tt.expression)
+			result, opCount, err := parseTraceExpression(tt.expression)
 
 			if tt.expectError {
 				assert.Error(t, err)
@@ -1200,6 +1218,8 @@ func TestParseTraceExpression(t *testing.T) {
 
 			require.NoError(t, err)
 			require.NotNil(t, result)
+			assert.Equal(t, tt.expectedOpCount, opCount, "operator count mismatch")
+
 			if tt.checkResult != nil {
 				tt.checkResult(t, result)
 			}
@@ -1207,6 +1227,63 @@ func TestParseTraceExpression(t *testing.T) {
 	}
 }
 
+func TestQueryBuilderTraceOperator_ParseExpression_OperatorLimit(t *testing.T) {
+	tests := []struct {
+		name          string
+		expression    string
+		expectError   bool
+		errorContains string
+	}{
+		{
+			name:        "within operator limit",
+			expression:  "A => B => C",
+			expectError: false,
+		},
+		{
+			name:          "exceeding operator limit",
+			expression:    "A => B => C => D => E => F => G => H => I => J => K => L",
+			expectError:   true,
+			errorContains: "expression contains 11 operators, which exceeds the maximum allowed 10 operators",
+		},
+		{
+			name:        "exactly at limit",
+			expression:  "A => B => C => D => E => F => G => H => I => J => K",
+			expectError: false, // 10 operators, exactly at limit
+		},
+		{
+			name:        "complex expression at limit",
+			expression:  "(A && B) => (C || D) => (E && F) => (G || H) => (I && J) => K",
+			expectError: false, // 10 operators: 3 &&, 2 ||, 5 => = 10 total
+		},
+		{
+			name:          "complex expression exceeding limit",
+			expression:    "(A && B) => (C || D) => (E && F) => (G || H) => (I && J) => (K || L)",
+			expectError:   true,
+			errorContains: "expression contains 11 operators, which exceeds the maximum allowed 10 operators",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			op := &QueryBuilderTraceOperator{
+				Expression: tt.expression,
+			}
+
+			err := op.ParseExpression()
+
+			if tt.expectError {
+				assert.Error(t, err)
+				if tt.errorContains != "" {
+					assert.Contains(t, err.Error(), tt.errorContains)
+				}
+			} else {
+				assert.NoError(t, err)
+				assert.NotNil(t, op.ParsedExpression)
+			}
+		})
+	}
+}
+
 func TestQueryBuilderTraceOperator_ValidateTraceOperator(t *testing.T) {
 	tests := []struct {
 		name          string

pkg/types/querybuildertypes/querybuildertypesv5/trace_operator.go

@@ -29,6 +29,11 @@ var (
 	OrderByTraceDuration = TraceOrderBy{valuer.NewString("trace_duration")}
 )
 
+const (
+	// MaxTraceOperators defines the maximum number of operators allowed in a trace expression
+	MaxTraceOperators = 10
+)
+
 type QueryBuilderTraceOperator struct {
 	Name     string `json:"name"`
 	Disabled bool   `json:"disabled,omitempty"`
@@ -41,15 +46,21 @@ type QueryBuilderTraceOperator struct {
 	ReturnSpansFrom string `json:"returnSpansFrom,omitempty"`
 
 	// Trace-specific ordering (only span_count and trace_duration allowed)
-	Order []OrderBy `json:"orderBy,omitempty"`
+	Order []OrderBy `json:"order,omitempty"`
 
 	Aggregations []TraceAggregation `json:"aggregations,omitempty"`
 	StepInterval Step               `json:"stepInterval,omitempty"`
 	GroupBy      []GroupByKey       `json:"groupBy,omitempty"`
 
+	// having clause to apply to the aggregated query results
+	Having *Having `json:"having,omitempty"`
+
 	Limit  int    `json:"limit,omitempty"`
+	Offset int    `json:"offset,omitempty"`
 	Cursor string `json:"cursor,omitempty"`
 
+	Legend string `json:"legend,omitempty"`
+
 	// Other post-processing options
 	SelectFields []telemetrytypes.TelemetryFieldKey `json:"selectFields,omitempty"`
 	Functions    []Function                         `json:"functions,omitempty"`
@@ -84,7 +95,7 @@ func (q *QueryBuilderTraceOperator) ParseExpression() error {
 		)
 	}
 
-	parsed, err := parseTraceExpression(q.Expression)
+	parsed, operatorCount, err := parseTraceExpression(q.Expression)
 	if err != nil {
 		return errors.WrapInvalidInputf(
 			err,
@@ -94,13 +105,24 @@ func (q *QueryBuilderTraceOperator) ParseExpression() error {
 		)
 	}
 
+	// Validate operator count immediately during parsing
+	if operatorCount > MaxTraceOperators {
+		return errors.WrapInvalidInputf(
+			nil,
+			errors.CodeInvalidInput,
+			"expression contains %d operators, which exceeds the maximum allowed %d operators",
+			operatorCount,
+			MaxTraceOperators,
+		)
+	}
+
 	q.ParsedExpression = parsed
 	return nil
 }
 
 // ValidateTraceOperator validates that all referenced queries exist and are trace queries
 func (q *QueryBuilderTraceOperator) ValidateTraceOperator(queries []QueryEnvelope) error {
-	// Parse the expression
+	// Parse the expression - this now includes operator count validation
 	if err := q.ParseExpression(); err != nil {
 		return err
 	}
@@ -157,6 +179,15 @@ func (q *QueryBuilderTraceOperator) ValidateTraceOperator(queries []QueryEnvelop
 		}
 	}
 
+	if q.StepInterval.Seconds() < 0 {
+		return errors.WrapInvalidInputf(
+			nil,
+			errors.CodeInvalidInput,
+			"stepInterval cannot be negative, got %f seconds",
+			q.StepInterval.Seconds(),
+		)
+	}
+
 	// Validate ReturnSpansFrom if specified
 	if q.ReturnSpansFrom != "" {
 		if _, exists := availableQueries[q.ReturnSpansFrom]; !exists {
@@ -234,6 +265,15 @@ func (q *QueryBuilderTraceOperator) ValidatePagination() error {
 		)
 	}
 
+	if q.Offset < 0 {
+		return errors.WrapInvalidInputf(
+			nil,
+			errors.CodeInvalidInput,
+			"offset must be non-negative, got %d",
+			q.Offset,
+		)
+	}
+
 	// For production use, you might want to enforce maximum limits
 	if q.Limit > 10000 {
 		return errors.WrapInvalidInputf(
@@ -276,6 +316,11 @@ func (q *QueryBuilderTraceOperator) collectReferencedQueries(operand *TraceOpera
 	return unique
 }
 
+// CollectReferencedQueries is a public wrapper for collectReferencedQueries
+func (q *QueryBuilderTraceOperator) CollectReferencedQueries(operand *TraceOperand) []string {
+	return q.collectReferencedQueries(operand)
+}
+
 // ValidateUniqueTraceOperator ensures only one trace operator exists in queries
 func ValidateUniqueTraceOperator(queries []QueryEnvelope) error {
 	traceOperatorCount := 0
@@ -304,9 +349,8 @@ func ValidateUniqueTraceOperator(queries []QueryEnvelope) error {
 	return nil
 }
 
-// parseTraceExpression parses an expression string into a tree structure
 // Handles precedence: NOT (highest) > || > && > => (lowest)
-func parseTraceExpression(expr string) (*TraceOperand, error) {
+func parseTraceExpression(expr string) (*TraceOperand, int, error) {
 	expr = strings.TrimSpace(expr)
 
 	// Handle parentheses
@@ -319,15 +363,15 @@ func parseTraceExpression(expr string) (*TraceOperand, error) {
 
 	// Handle unary NOT operator (prefix)
 	if strings.HasPrefix(expr, "NOT ") {
-		operand, err := parseTraceExpression(expr[4:])
+		operand, count, err := parseTraceExpression(expr[4:])
 		if err != nil {
-			return nil, err
+			return nil, 0, err
 		}
 		notOp := TraceOperatorNot
 		return &TraceOperand{
 			Operator: &notOp,
 			Left:     operand,
-		}, nil
+		}, count + 1, nil // Add 1 for this NOT operator
 	}
 
 	// Find binary operators with lowest precedence first (=> has lowest precedence)
@@ -339,14 +383,14 @@ func parseTraceExpression(expr string) (*TraceOperand, error) {
 			leftExpr := strings.TrimSpace(expr[:pos])
 			rightExpr := strings.TrimSpace(expr[pos+len(op):])
 
-			left, err := parseTraceExpression(leftExpr)
+			left, leftCount, err := parseTraceExpression(leftExpr)
 			if err != nil {
-				return nil, err
+				return nil, 0, err
 			}
 
-			right, err := parseTraceExpression(rightExpr)
+			right, rightCount, err := parseTraceExpression(rightExpr)
 			if err != nil {
-				return nil, err
+				return nil, 0, err
 			}
 
 			var opType TraceOperatorType
@@ -365,13 +409,13 @@ func parseTraceExpression(expr string) (*TraceOperand, error) {
 				Operator: &opType,
 				Left:     left,
 				Right:    right,
-			}, nil
+			}, leftCount + rightCount + 1, nil // Add counts from both sides + 1 for this operator
 		}
 	}
 
 	// If no operators found, this should be a query reference
 	if matched, _ := regexp.MatchString(`^[A-Za-z][A-Za-z0-9_]*$`, expr); !matched {
-		return nil, errors.WrapInvalidInputf(
+		return nil, 0, errors.WrapInvalidInputf(
 			nil,
 			errors.CodeInvalidInput,
 			"invalid query reference '%s'",
@@ -379,9 +423,10 @@ func parseTraceExpression(expr string) (*TraceOperand, error) {
 		)
 	}
 
+	// Leaf node - no operators
 	return &TraceOperand{
 		QueryRef: &TraceOperatorQueryRef{Name: expr},
-	}, nil
+	}, 0, nil
 }
 
 // isBalancedParentheses checks if parentheses are balanced in the expression

pkg/types/querybuildertypes/querybuildertypesv5/validation.go

@@ -36,6 +36,11 @@ func getQueryIdentifier(envelope QueryEnvelope, index int) string {
 			return fmt.Sprintf("formula '%s'", spec.Name)
 		}
 		return fmt.Sprintf("formula at position %d", index+1)
+	case QueryTypeTraceOperator:
+		if spec, ok := envelope.Spec.(QueryBuilderTraceOperator); ok && spec.Name != "" {
+			return fmt.Sprintf("trace operator '%s'", spec.Name)
+		}
+		return fmt.Sprintf("trace operator at position %d", index+1)
 	case QueryTypeJoin:
 		if spec, ok := envelope.Spec.(QueryBuilderJoin); ok && spec.Name != "" {
 			return fmt.Sprintf("join '%s'", spec.Name)
@@ -564,6 +569,24 @@ func (r *QueryRangeRequest) validateCompositeQuery() error {
 					queryId,
 				)
 			}
+		case QueryTypeTraceOperator:
+			spec, ok := envelope.Spec.(QueryBuilderTraceOperator)
+			if !ok {
+				queryId := getQueryIdentifier(envelope, i)
+				return errors.NewInvalidInputf(
+					errors.CodeInvalidInput,
+					"invalid spec for %s",
+					queryId,
+				)
+			}
+			if spec.Expression == "" {
+				queryId := getQueryIdentifier(envelope, i)
+				return errors.NewInvalidInputf(
+					errors.CodeInvalidInput,
+					"expression is required for %s",
+					queryId,
+				)
+			}
 		case QueryTypePromQL:
 			// PromQL validation is handled separately
 			spec, ok := envelope.Spec.(PromQuery)
@@ -610,7 +633,7 @@ func (r *QueryRangeRequest) validateCompositeQuery() error {
 				envelope.Type,
 				queryId,
 			).WithAdditional(
-				"Valid query types are: builder_query, builder_formula, builder_join, promql, clickhouse_sql",
+				"Valid query types are: builder_query, builder_formula, builder_join, promql, clickhouse_sql, trace_operator",
 			)
 		}
 	}
@@ -678,6 +701,21 @@ func validateQueryEnvelope(envelope QueryEnvelope, requestType RequestType) erro
 			)
 		}
 		return nil
+	case QueryTypeTraceOperator:
+		spec, ok := envelope.Spec.(QueryBuilderTraceOperator)
+		if !ok {
+			return errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"invalid trace operator spec",
+			)
+		}
+		if spec.Expression == "" {
+			return errors.NewInvalidInputf(
+				errors.CodeInvalidInput,
+				"trace operator expression is required",
+			)
+		}
+		return nil
 	case QueryTypePromQL:
 		spec, ok := envelope.Spec.(PromQuery)
 		if !ok {
@@ -714,7 +752,7 @@ func validateQueryEnvelope(envelope QueryEnvelope, requestType RequestType) erro
 			"unknown query type: %s",
 			envelope.Type,
 		).WithAdditional(
-			"Valid query types are: builder_query, builder_sub_query, builder_formula, builder_join, promql, clickhouse_sql",
+			"Valid query types are: builder_query, builder_sub_query, builder_formula, builder_join, promql, clickhouse_sql, trace_operator",
 		)
 	}
 }