chore: fixed minor styles + minor ux fix

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

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

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -2,20 +2,15 @@ import './QueryBuilderV2.styles.scss';
 
 import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
-import {
-	QueryBuilderProps,
-	TraceView,
-} from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 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';
-import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
-import { ChartNoAxesGantt, DraftingCompass } from 'lucide-react';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
@@ -25,38 +20,20 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	queryComponents,
 	isListViewPanel = false,
 	showOnlyWhereClause = false,
-	showTraceViewSelector = false,
+	showTraceOperator = false,
 	version,
-	onChangeTraceView,
 }: QueryBuilderProps): JSX.Element {
 	const {
 		currentQuery,
 		addNewBuilderQuery,
 		addNewFormula,
 		handleSetConfig,
+		addTraceOperator,
 		panelType,
 		initialDataSource,
 	} = useQueryBuilder();
 
 	const containerRef = useRef(null);
-	const [selectedTraceView, setSelectedTraceView] = useState<TraceView>(
-		TraceView.SPANS,
-	);
-
-	const traceViewOptions: { label: string; value: TraceView }[] = useMemo(() => {
-		return [
-			{
-				label: 'Spans',
-				value: TraceView.SPANS,
-				icon: <ChartNoAxesGantt size={14} />,
-			},
-			{
-				label: 'Traces',
-				value: TraceView.TRACES,
-				icon: <DraftingCompass size={14} />,
-			},
-		];
-	}, []);
 
 	const currentDataSource = useMemo(
 		() =>
@@ -124,62 +101,49 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		listViewTracesFilterConfigs,
 	]);
 
-	const handleChangeTraceView = useCallback(
-		(value: TraceView) => {
-			setSelectedTraceView(value);
-			if (
-				currentDataSource === DataSource.TRACES &&
-				typeof onChangeTraceView === 'function'
-			) {
-				onChangeTraceView(value);
-			}
-		},
-		[onChangeTraceView, currentDataSource],
-	);
-
-	const shouldShowTraceOperator = useMemo(() => {
-		return (
-			currentDataSource === DataSource.TRACES &&
-			(!isListViewPanel ? selectedTraceView === TraceView.TRACES : true)
-		);
-	}, [currentDataSource, isListViewPanel, selectedTraceView]);
-
-	const shouldShowTraceViewSelector = useMemo(() => {
-		return currentDataSource === DataSource.TRACES && showTraceViewSelector;
-	}, [currentDataSource, showTraceViewSelector]);
-
-	const showFormula = useMemo(() => {
-		if (currentDataSource === DataSource.TRACES) {
-			return !isListViewPanel && selectedTraceView === TraceView.SPANS;
-		}
-
-		return true;
-	}, [isListViewPanel, selectedTraceView, currentDataSource]);
-
 	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
-		if (currentQuery.builder.queryTraceOperator.length > 0) {
-			return currentQuery.builder.queryTraceOperator[0] || {};
+		if (
+			currentQuery.builder.queryTraceOperator &&
+			currentQuery.builder.queryTraceOperator.length > 0
+		) {
+			return currentQuery.builder.queryTraceOperator[0];
 		}
 
 		return undefined;
 	}, [currentQuery.builder.queryTraceOperator]);
 
+	const shouldShowTraceOperator = useMemo(() => {
+		return (
+			showTraceOperator &&
+			currentDataSource === DataSource.TRACES &&
+			Boolean(traceOperator)
+		);
+	}, [currentDataSource, isListViewPanel, showTraceOperator, traceOperator]);
+
+	const shouldShowFooter = useMemo(() => {
+		return (
+			(!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">
-					{shouldShowTraceViewSelector && (
-						<div className="qb-trace-view-selector-container">
-							<SignozRadioGroup
-								value={selectedTraceView}
-								options={traceViewOptions}
-								onChange={(e): void => {
-									handleChangeTraceView(e.target.value);
-								}}
-							/>
-						</div>
-					)}
-
 					{isListViewPanel && currentDataSource !== DataSource.TRACES && (
 						<QueryV2
 							ref={containerRef}
@@ -239,12 +203,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						</div>
 					)}
 
-					{((!showOnlyWhereClause && !isListViewPanel) ||
-						shouldShowTraceOperator) && (
+					{shouldShowFooter && (
 						<QueryFooter
-							showFormula={showFormula}
+							showAddFormula={showFormula}
 							addNewBuilderQuery={addNewBuilderQuery}
 							addNewFormula={addNewFormula}
+							addTraceOperator={addTraceOperator}
+							showAddTraceOperator={!shouldShowTraceOperator}
 						/>
 					)}
 

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

@@ -4,11 +4,15 @@ import { Plus, Sigma } from 'lucide-react';
 export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
-	showFormula = true,
+	addTraceOperator,
+	showAddFormula = true,
+	showAddTraceOperator = false,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
-	showFormula?: boolean;
+	addTraceOperator?: () => void;
+	showAddTraceOperator: boolean;
+	showAddFormula?: boolean;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
@@ -24,7 +28,7 @@ export default function QueryFooter({
 					</Tooltip>
 				</div>
 
-				{showFormula && (
+				{showAddFormula && (
 					<div className="qb-add-formula">
 						<Tooltip
 							title={
@@ -52,6 +56,34 @@ export default function QueryFooter({
 						</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/QueryV2.tsx

@@ -114,6 +114,7 @@ export const QueryV2 = memo(function QueryV2({
 						<div className="query-actions-container">
 							<div className="query-actions-left-container">
 								<QBEntityOptions
+									hasTraceOperator={showTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
 										(version && version === ENTITY_VERSION_V4) ||

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

@@ -1,5 +1,7 @@
 .qb-trace-operator {
 	padding: 8px;
+	display: flex;
+	gap: 8px;
 
 	&.non-list-view {
 		padding-left: 40px;
@@ -60,6 +62,7 @@
 	}
 
 	&-container {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
 		gap: 8px;

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

@@ -13,6 +13,8 @@ import {
 import QueryAddOns from '../QueryAddOns/QueryAddOns';
 import QueryAggregation from '../QueryAggregation/QueryAggregation';
 import { useTraceOperatorOperations } from 'hooks/queryBuilder/userTraceOperatorOperations';
+import { Button, Tooltip } from 'antd';
+import { Trash2 } from 'lucide-react';
 
 export default function TraceOperator({
 	traceOperator,
@@ -21,7 +23,7 @@ export default function TraceOperator({
 	traceOperator: IBuilderTraceOperator | undefined;
 	isListViewPanel?: boolean;
 }): JSX.Element {
-	const { panelType, currentQuery } = useQueryBuilder();
+	const { panelType, currentQuery, removeTraceOperator } = useQueryBuilder();
 	const { handleChangeTraceOperatorData } = useTraceOperatorOperations({
 		index: 0,
 		query: traceOperator,
@@ -112,6 +114,13 @@ export default function TraceOperator({
 					</div>
 				)}
 			</div>
+			{true && (
+				<Tooltip title="Remove Trace Operator" placement="topLeft">
+					<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
+						<Trash2 size={14} />
+					</Button>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

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 => {
@@ -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/TracesExplorer/QuerySection/index.tsx

@@ -2,21 +2,12 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ExplorerOrderBy from 'container/ExplorerOrderBy';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
-import {
-	QueryBuilderProps,
-	TraceView,
-} from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useCallback, useMemo } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
 
-function QuerySection({
-	onChangeTraceView = (): void => {},
-}: {
-	onChangeTraceView?: (view: TraceView) => void;
-}): JSX.Element {
-	const { removeAllQueryBuilderEntities } = useQueryBuilder();
+function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -51,29 +42,10 @@ function QuerySection({
 		[panelTypes],
 	);
 
-	const handleChangeTraceView = useCallback(
-		(view: TraceView) => {
-			if (isListViewPanel) {
-				removeAllQueryBuilderEntities('queryFormulas');
-			} else {
-				if (view === TraceView.SPANS) {
-					removeAllQueryBuilderEntities('queryTraceOperator');
-				} else {
-					removeAllQueryBuilderEntities('queryFormulas');
-				}
-			}
-			onChangeTraceView(view);
-		},
-		[onChangeTraceView, isListViewPanel, removeAllQueryBuilderEntities],
-	);
-
 	return (
 		<QueryBuilderV2
-			isListViewPanel={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
-			showTraceViewSelector
-			onChangeTraceView={handleChangeTraceView}
+			isListViewPanel={isListViewPanel}
+			showTraceOperator={true}
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			queryComponents={queryComponents}
 			panelType={panelTypes}