From 4e2c7c6309cae51a24d46a0ff3b9f31c37467f70 Mon Sep 17 00:00:00 2001
From: ahrefabhi <ahrefabhi@gmail.com>
Date: Wed, 20 Aug 2025 11:19:35 +0530
Subject: [PATCH] feat: added traceoperator component and styles

---
 .../TraceOperator/TraceOperator.styles.scss   |  94 ++++++++++++++
 .../QueryV2/TraceOperator/TraceOperator.tsx   | 117 ++++++++++++++++++
 2 files changed, 211 insertions(+)
 create mode 100644 frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
 create mode 100644 frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
new file mode 100644
index 000000000000..9dd711fd7826
--- /dev/null
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
@@ -0,0 +1,94 @@
+.qb-trace-operator {
+	padding: 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
+			);
+		}
+	}
+
+	&-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 {
+		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;
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: -16px;
+			top: 50%;
+			height: 1px;
+			width: 16px;
+			background-color: var(--bg-slate-400);
+		}
+	}
+}
diff --git a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
new file mode 100644
index 000000000000..5132392231d3
--- /dev/null
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
@@ -0,0 +1,117 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable sonarjs/no-duplicate-string */
+
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import cx from 'classnames';
+import './TraceOperator.styles.scss';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useCallback } from 'react';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
+import QueryAddOns from '../QueryAddOns/QueryAddOns';
+import QueryAggregation from '../QueryAggregation/QueryAggregation';
+import { useTraceOperatorOperations } from 'hooks/queryBuilder/userTraceOperatorOperations';
+
+export default function TraceOperator({
+	traceOperator,
+	isListViewPanel = false,
+}: {
+	traceOperator: IBuilderTraceOperator | undefined;
+	isListViewPanel?: boolean;
+}): JSX.Element {
+	const { panelType, currentQuery } = useQueryBuilder();
+	const { handleChangeTraceOperatorData } = useTraceOperatorOperations({
+		index: 0,
+		query: traceOperator,
+	});
+
+	const handleTraceOperatorChange = useCallback(
+		(traceOperatorExpression: string) => {
+			handleChangeTraceOperatorData('expression', traceOperatorExpression);
+		},
+		[handleChangeTraceOperatorData],
+	);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeTraceOperatorData('stepInterval', value);
+		},
+		[handleChangeTraceOperatorData],
+	);
+
+	const handleChangeAggregation = useCallback(
+		(value: string) => {
+			handleChangeTraceOperatorData('aggregations', [
+				{
+					expression: value,
+				},
+			]);
+		},
+		[handleChangeTraceOperatorData],
+	);
+
+	const handleChangeSpanSource = useCallback(
+		(value: string) => {
+			handleChangeTraceOperatorData('returnSpansFrom', value);
+		},
+		[handleChangeTraceOperatorData],
+	);
+
+	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={currentQuery.builder.queryData[0].dataSource}
+								key={`query-search-${currentQuery.builder.queryData[0].queryName}-${currentQuery.builder.queryData[0].dataSource}`}
+								panelType={panelType || undefined}
+								onAggregationIntervalChange={handleChangeAggregateEvery}
+								onChange={handleChangeAggregation}
+								queryData={currentQuery.builder.queryData[0]} //TODO: replace this with the traceoperator
+							/>
+						</div>
+						<div
+							className={cx(
+								'qb-trace-operator-add-ons-container',
+								!isListViewPanel && 'qb-trace-operator-arrow',
+							)}
+						>
+							<QueryAddOns
+								index={0}
+								query={currentQuery.builder.queryData[0]} //TODO: replace this with the traceoperator
+								version="v3"
+								isListViewPanel={false}
+								showReduceTo={false}
+								panelType={panelType}
+							>
+								<InputWithLabel
+									className="qb-trace-operator-add-ons-input"
+									initialValue={traceOperator?.expression || ''}
+									label="Using spans from"
+									placeholder="Add condition..."
+									type="text"
+									onChange={handleChangeSpanSource}
+								/>
+							</QueryAddOns>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}