feat: waterfall init

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -0,0 +1,297 @@
+// Modal base styles
+.add-span-to-funnel-modal {
+	&__loading-spinner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 400px;
+	}
+	&-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--bg-ink-500);
+			}
+
+			&-header {
+				border-bottom: none;
+
+				.ant-modal-title {
+					color: var(--bg-vanilla-100);
+				}
+			}
+
+			&-body {
+				padding: 14px 16px !important;
+				padding-bottom: 0 !important;
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
+			&-footer {
+				margin-top: 0;
+				background: var(--bg-ink-400);
+				border-top: 1px solid var(--bg-slate-500);
+				padding: 16px !important;
+				.add-span-to-funnel-modal {
+					&__save-button {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 4px;
+						color: var(--bg-vanilla-100);
+						font-size: 12px;
+						font-weight: 500;
+						line-height: 24px;
+						width: 135px;
+
+						.ant-btn-icon {
+							display: flex;
+						}
+						&:disabled {
+							color: var(--bg-vanilla-400);
+							.ant-btn-icon {
+								svg {
+									stroke: var(--bg-vanilla-400);
+								}
+							}
+						}
+					}
+					&__discard-button {
+						background: var(--bg-slate-500);
+					}
+				}
+				.ant-btn {
+					border-radius: 2px;
+					padding: 4px 8px;
+					margin: 0 !important;
+					border: none;
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}
+
+// Main modal styles
+.add-span-to-funnel-modal {
+	// Common button styles
+	%button-base {
+		display: flex;
+		align-items: center;
+		font-family: Inter;
+	}
+
+	// Details view styles
+	&--details {
+		.traces-funnel-details {
+			height: unset;
+
+			&__steps-config {
+				width: unset;
+				border: none;
+			}
+
+			.funnel-step-wrapper {
+				gap: 15px;
+			}
+
+			.steps-content {
+				max-height: 500px;
+			}
+		}
+	}
+
+	// Search section
+	&__search {
+		display: flex;
+		gap: 12px;
+		margin-bottom: 14px;
+		align-items: center;
+
+		&-input {
+			flex: 1;
+			padding: 6px 8px;
+			background: var(--bg-ink-300);
+
+			.ant-input-prefix {
+				height: 18px;
+				margin-inline-end: 6px;
+				svg {
+					opacity: 0.4;
+				}
+			}
+
+			&,
+			input {
+				font-family: Inter;
+				font-size: 14px;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				font-weight: 400;
+				background: var(--bg-ink-300);
+			}
+
+			input::placeholder {
+				color: var(--bg-vanilla-400);
+				opacity: 0.4;
+			}
+		}
+	}
+
+	// Create button
+	&__create-button {
+		@extend %button-base;
+		width: 153px;
+		padding: 4px 8px;
+		justify-content: center;
+		gap: 4px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		background: var(--bg-slate-500);
+		border: none;
+		box-shadow: none;
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+	.funnel-item {
+		padding: 8px 8px 12px 16px;
+		&,
+		&:first-child {
+			border-radius: 6px;
+		}
+
+		&__header {
+			line-height: 20px;
+		}
+		&__details {
+			line-height: 18px;
+		}
+	}
+
+	// List section
+	&__list {
+		max-height: 400px;
+		overflow-y: scroll;
+		.funnels-empty {
+			&__content {
+				padding: 0;
+			}
+		}
+
+		.funnels-list {
+			gap: 8px;
+
+			.funnel-item {
+				padding: 8px 16px 12px;
+
+				&__details {
+					margin-top: 8px;
+				}
+			}
+		}
+	}
+
+	&__spinner {
+		height: 400px;
+	}
+
+	// Back button
+	&__back-button {
+		@extend %button-base;
+		gap: 6px;
+		color: var(--bg-vanilla-400);
+		font-size: 14px;
+		line-height: 20px;
+		margin-bottom: 14px;
+	}
+
+	// Details section
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		.funnel-configuration__steps {
+			padding: 0;
+
+			.funnel-step {
+				&__content .filters__service-and-span .ant-select {
+					width: 170px;
+				}
+
+				&__footer .error {
+					width: 25%;
+				}
+			}
+
+			.inter-step-config {
+				width: calc(100% - 104px);
+			}
+		}
+		.funnel-item__actions-popover {
+			display: none;
+		}
+	}
+}
+
+// Light mode styles
+.lightMode {
+	.add-span-to-funnel-modal-container {
+		.ant-modal {
+			&-content,
+			&-header {
+				background: var(--bg-vanilla-100);
+			}
+
+			&-title {
+				color: var(--bg-ink-500);
+			}
+
+			&-footer {
+				border-top-color: var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				.add-span-to-funnel-modal__discard-button {
+					background: var(--bg-vanilla-200);
+					color: var(--bg-ink-500);
+				}
+			}
+		}
+	}
+
+	.add-span-to-funnel-modal {
+		&__search-input {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--bg-ink-500);
+
+			input {
+				color: var(--bg-ink-500);
+				background: var(--bg-vanilla-100);
+
+				&::placeholder {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
+		&__create-button {
+			background: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+		}
+
+		&__back-button {
+			color: var(--bg-ink-500);
+
+			&:hover {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		&__details h3 {
+			color: var(--bg-ink-500);
+		}
+	}
+}

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

@@ -0,0 +1,294 @@
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Input, Spin } from 'antd';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import SignozModal from 'components/SignozModal/SignozModal';
+import {
+	useFunnelDetails,
+	useFunnelsList,
+} from 'hooks/TracesFunnels/useFunnels';
+import { isEqual } from 'lodash-es';
+import { ArrowLeft, Check, Plus, Search } from 'lucide-react';
+import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
+import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
+import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
+import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
+import {
+	FunnelProvider,
+	useFunnelContext,
+} from 'pages/TracesFunnels/FunnelContext';
+import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
+import { Span } from 'types/api/trace/getTraceV2';
+import { FunnelData } from 'types/api/traceFunnels';
+
+import './AddSpanToFunnelModal.styles.scss';
+
+enum ModalView {
+	LIST = 'list',
+	DETAILS = 'details',
+}
+
+function FunnelDetailsView({
+	funnel,
+	span,
+	triggerAutoSave,
+	showNotifications,
+	onChangesDetected,
+	triggerDiscard,
+}: {
+	funnel: FunnelData;
+	span: Span;
+	triggerAutoSave: boolean;
+	showNotifications: boolean;
+	onChangesDetected: (hasChanges: boolean) => void;
+	triggerDiscard: boolean;
+}): JSX.Element {
+	const { handleRestoreSteps, steps } = useFunnelContext();
+
+	// Track changes between current steps and original steps
+	useEffect(() => {
+		const hasChanges = !isEqual(steps, funnel.steps);
+		if (onChangesDetected) {
+			onChangesDetected(hasChanges);
+		}
+	}, [steps, funnel.steps, onChangesDetected]);
+
+	// Handle discard when triggered from parent
+	useEffect(() => {
+		if (triggerDiscard && funnel.steps) {
+			handleRestoreSteps(funnel.steps);
+		}
+	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
+
+	return (
+		<div className="add-span-to-funnel-modal__details">
+			<FunnelListItem
+				funnel={funnel}
+				shouldRedirectToTracesListOnDeleteSuccess={false}
+				isSpanDetailsPage
+			/>
+			<FunnelConfiguration
+				funnel={funnel}
+				isTraceDetailsPage
+				span={span}
+				triggerAutoSave={triggerAutoSave}
+				showNotifications={showNotifications}
+			/>
+		</div>
+	);
+}
+
+interface AddSpanToFunnelModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	span: Span;
+}
+
+function AddSpanToFunnelModal({
+	isOpen,
+	onClose,
+	span,
+}: AddSpanToFunnelModalProps): JSX.Element {
+	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
+	const [searchQuery, setSearchQuery] = useState<string>('');
+	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
+		undefined,
+	);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
+	const [triggerSave, setTriggerSave] = useState<boolean>(false);
+	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
+	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
+	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
+
+	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
+		setSearchQuery(e.target.value);
+	};
+
+	const { data, isLoading, isError, isFetching } = useFunnelsList();
+
+	const filteredData = useMemo(
+		() =>
+			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
+				(a, b) =>
+					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+			),
+		[data?.payload, searchQuery],
+	);
+
+	const {
+		data: funnelDetails,
+		isLoading: isFunnelDetailsLoading,
+		isFetching: isFunnelDetailsFetching,
+	} = useFunnelDetails({
+		funnelId: selectedFunnelId,
+	});
+
+	const handleFunnelClick = (funnel: FunnelData): void => {
+		setSelectedFunnelId(funnel.funnel_id);
+		setActiveView(ModalView.DETAILS);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleBack = (): void => {
+		setActiveView(ModalView.LIST);
+		setSelectedFunnelId(undefined);
+		setIsUnsavedChanges(false);
+		setTriggerSave(false);
+		setIsCreatedFromSpan(false);
+	};
+
+	const handleCreateNewClick = (): void => {
+		setIsCreateModalOpen(true);
+	};
+
+	const handleSaveFunnel = (): void => {
+		setTriggerSave(true);
+		// Reset trigger after a brief moment to allow the save to be processed
+		setTimeout(() => {
+			setTriggerSave(false);
+			onClose();
+		}, 100);
+	};
+
+	const handleDiscard = (): void => {
+		setTriggerDiscard(true);
+		// Reset trigger after a brief moment
+		setTimeout(() => {
+			setTriggerDiscard(false);
+			onClose();
+		}, 100);
+	};
+
+	const renderListView = (): JSX.Element => (
+		<div className="add-span-to-funnel-modal">
+			{!!filteredData?.length && (
+				<div className="add-span-to-funnel-modal__search">
+					<Input
+						className="add-span-to-funnel-modal__search-input"
+						placeholder="Search by name, description, or tags..."
+						prefix={<Search size={12} />}
+						value={searchQuery}
+						onChange={handleSearch}
+					/>
+				</div>
+			)}
+			<div className="add-span-to-funnel-modal__list">
+				<OverlayScrollbar>
+					<TracesFunnelsContentRenderer
+						isError={isError}
+						isLoading={isLoading || isFetching}
+						data={filteredData || []}
+						onCreateFunnel={handleCreateNewClick}
+						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
+						shouldRedirectToTracesListOnDeleteSuccess={false}
+					/>
+				</OverlayScrollbar>
+			</div>
+			<CreateFunnel
+				isOpen={isCreateModalOpen}
+				onClose={(funnelId): void => {
+					if (funnelId) {
+						setSelectedFunnelId(funnelId);
+						setActiveView(ModalView.DETAILS);
+						setIsCreatedFromSpan(true);
+					}
+					setIsCreateModalOpen(false);
+				}}
+				redirectToDetails={false}
+			/>
+		</div>
+	);
+
+	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
+		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
+			<Button
+				type="text"
+				className="add-span-to-funnel-modal__back-button"
+				onClick={handleBack}
+			>
+				<ArrowLeft size={14} />
+				All funnels
+			</Button>
+			<div className="traces-funnel-details">
+				<div className="traces-funnel-details__steps-config">
+					<Spin
+						className="add-span-to-funnel-modal__loading-spinner"
+						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
+						indicator={<LoadingOutlined spin />}
+					>
+						{selectedFunnelId && funnelDetails?.payload && (
+							<FunnelProvider
+								funnelId={selectedFunnelId}
+								hasSingleStep={isCreatedFromSpan}
+							>
+								<FunnelDetailsView
+									funnel={funnelDetails.payload}
+									span={span}
+									triggerAutoSave={triggerSave}
+									showNotifications
+									onChangesDetected={setIsUnsavedChanges}
+									triggerDiscard={triggerDiscard}
+								/>
+							</FunnelProvider>
+						)}
+					</Spin>
+				</div>
+			</div>
+		</div>
+	);
+
+	return (
+		<SignozModal
+			open={isOpen}
+			onCancel={onClose}
+			width={570}
+			title="Add span to funnel"
+			className={cx('add-span-to-funnel-modal-container', {
+				'add-span-to-funnel-modal-container--details':
+					activeView === ModalView.DETAILS,
+			})}
+			footer={
+				activeView === ModalView.DETAILS
+					? [
+							<Button
+								type="default"
+								key="discard"
+								onClick={handleDiscard}
+								className="add-span-to-funnel-modal__discard-button"
+								disabled={!isUnsavedChanges}
+							>
+								Discard
+							</Button>,
+							<Button
+								key="save"
+								type="primary"
+								className="add-span-to-funnel-modal__save-button"
+								onClick={handleSaveFunnel}
+								disabled={!isUnsavedChanges}
+								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
+							>
+								Save Funnel
+							</Button>,
+					  ]
+					: [
+							<Button
+								key="create"
+								type="default"
+								className="add-span-to-funnel-modal__create-button"
+								onClick={handleCreateNewClick}
+								icon={<Plus size={14} />}
+							>
+								Create new funnel
+							</Button>,
+					  ]
+			}
+		>
+			{activeView === ModalView.LIST
+				? renderListView()
+				: renderDetailsView({ span })}
+		</SignozModal>
+	);
+}
+
+export default AddSpanToFunnelModal;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

@@ -0,0 +1,39 @@
+.span-line-action-buttons {
+	display: flex;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	right: 0;
+	cursor: pointer;
+	border-radius: 2px;
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);
+
+	.ant-btn-default {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+
+		&.active-tab {
+			background-color: var(--bg-slate-400);
+		}
+	}
+
+	.copy-span-btn {
+		border-color: var(--bg-slate-400) !important;
+	}
+}
+
+.lightMode {
+	.span-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.copy-span-btn {
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -0,0 +1,134 @@
+import { fireEvent, screen } from '@testing-library/react';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { render } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import SpanLineActionButtons from '../index';
+
+// Mock the useCopySpanLink hook
+jest.mock('hooks/trace/useCopySpanLink');
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	name: 'test-span',
+	serviceName: 'test-service',
+	durationNano: 1000,
+	timestamp: 1234567890,
+	rootSpanId: 'test-root-span-id',
+	parentSpanId: 'test-parent-span-id',
+	traceId: 'test-trace-id',
+	hasError: false,
+	kind: 0,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'test-root-name',
+	statusMessage: 'test-status-message',
+	statusCodeString: 'test-status-code-string',
+	spanKind: 'test-span-kind',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+describe('SpanLineActionButtons', () => {
+	beforeEach(() => {
+		// Clear mock before each test
+		jest.clearAllMocks();
+	});
+
+	it('renders copy link button with correct icon', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the button is rendered
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toBeInTheDocument();
+
+		// Check if the link icon is rendered
+		const linkIcon = screen.getByRole('img', { hidden: true });
+		expect(linkIcon).toHaveClass('anticon anticon-link');
+	});
+
+	it('calls onSpanCopy when copy button is clicked', () => {
+		const mockOnSpanCopy = jest.fn();
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: mockOnSpanCopy,
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called
+		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
+	});
+
+	it('applies correct styling classes', () => {
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: jest.fn(),
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Check if the main container has the correct class
+		const container = screen
+			.getByRole('button')
+			.closest('.span-line-action-buttons');
+		expect(container).toHaveClass('span-line-action-buttons');
+
+		// Check if the button has the correct class
+		const copyButton = screen.getByRole('button');
+		expect(copyButton).toHaveClass('copy-span-btn');
+	});
+
+	it('copies span link to clipboard when copy button is clicked', () => {
+		const mockSetCopy = jest.fn();
+		const mockUrlQuery = {
+			delete: jest.fn(),
+			set: jest.fn(),
+			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
+		};
+		const mockPathname = '/test-path';
+		const mockLocation = {
+			origin: 'http://localhost:3000',
+		};
+
+		// Mock window.location
+		Object.defineProperty(window, 'location', {
+			value: mockLocation,
+			writable: true,
+		});
+
+		// Mock useCopySpanLink hook
+		(useCopySpanLink as jest.Mock).mockReturnValue({
+			onSpanCopy: (event: React.MouseEvent) => {
+				event.preventDefault();
+				event.stopPropagation();
+				mockUrlQuery.delete('spanId');
+				mockUrlQuery.set('spanId', mockSpan.spanId);
+				const link = `${
+					window.location.origin
+				}${mockPathname}?${mockUrlQuery.toString()}`;
+				mockSetCopy(link);
+			},
+		});
+
+		render(<SpanLineActionButtons span={mockSpan} />);
+
+		// Click the copy button
+		const copyButton = screen.getByRole('button');
+		fireEvent.click(copyButton);
+
+		// Verify the copy function was called with correct link
+		expect(mockSetCopy).toHaveBeenCalledWith(
+			'http://localhost:3000/test-path?spanId=test-span-id',
+		);
+	});
+});

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

@@ -0,0 +1,28 @@
+import { LinkOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import './SpanLineActionButtons.styles.scss';
+
+export interface SpanLineActionButtonsProps {
+	span: Span;
+}
+export default function SpanLineActionButtons({
+	span,
+}: SpanLineActionButtonsProps): JSX.Element {
+	const { onSpanCopy } = useCopySpanLink(span);
+
+	return (
+		<div className="span-line-action-buttons">
+			<Tooltip title="Copy Span Link">
+				<Button
+					size="small"
+					icon={<LinkOutlined size={14} />}
+					onClick={onSpanCopy}
+					className="copy-span-btn"
+				/>
+			</Tooltip>
+		</div>
+	);
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfall.styles.scss

@@ -0,0 +1,9 @@
+.trace-waterfall {
+	height: calc(70vh - 236px);
+
+	.loading-skeleton {
+		justify-content: center;
+		align-items: center;
+		padding: 20px;
+	}
+}

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

@@ -0,0 +1,136 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { Skeleton } from 'antd';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
+
+import { TraceWaterfallStates } from './constants';
+import Error from './TraceWaterfallStates/Error/Error';
+import NoData from './TraceWaterfallStates/NoData/NoData';
+import Success from './TraceWaterfallStates/Success/Success';
+
+import './TraceWaterfall.styles.scss';
+
+export interface IInterestedSpan {
+	spanId: string;
+	isUncollapsed: boolean;
+}
+
+interface ITraceWaterfallProps {
+	traceId: string;
+	uncollapsedNodes: string[];
+	traceData:
+		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
+		| ErrorResponse
+		| undefined;
+	isFetchingTraceData: boolean;
+	errorFetchingTraceData: unknown;
+	interestedSpanId: IInterestedSpan;
+	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
+	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
+	selectedSpan: Span | undefined;
+	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
+}
+
+function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
+	const {
+		traceData,
+		isFetchingTraceData,
+		errorFetchingTraceData,
+		interestedSpanId,
+		traceId,
+		uncollapsedNodes,
+		setInterestedSpanId,
+		setTraceFlamegraphStatsWidth,
+		setSelectedSpan,
+		selectedSpan,
+	} = props;
+	// get the current state of trace waterfall based on the API lifecycle
+	const traceWaterfallState = useMemo(() => {
+		if (isFetchingTraceData) {
+			if (
+				traceData &&
+				traceData.payload &&
+				traceData.payload.spans &&
+				traceData.payload.spans.length > 0
+			) {
+				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
+			}
+			return TraceWaterfallStates.LOADING;
+		}
+		if (errorFetchingTraceData) {
+			return TraceWaterfallStates.ERROR;
+		}
+		if (
+			traceData &&
+			traceData.payload &&
+			traceData.payload.spans &&
+			traceData.payload.spans.length === 0
+		) {
+			return TraceWaterfallStates.NO_DATA;
+		}
+
+		return TraceWaterfallStates.SUCCESS;
+	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
+
+	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
+	const spans = useMemo(() => traceData?.payload?.spans || [], [
+		traceData?.payload?.spans,
+	]);
+
+	// get the content based on the current state of the trace waterfall
+	const getContent = useMemo(() => {
+		switch (traceWaterfallState) {
+			case TraceWaterfallStates.LOADING:
+				return (
+					<div className="loading-skeleton">
+						<Skeleton active paragraph={{ rows: 6 }} />
+					</div>
+				);
+			case TraceWaterfallStates.ERROR:
+				return <Error error={errorFetchingTraceData as AxiosError} />;
+			case TraceWaterfallStates.NO_DATA:
+				return <NoData id={traceId} />;
+			case TraceWaterfallStates.SUCCESS:
+			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
+				return (
+					<Success
+						spans={spans}
+						traceMetadata={{
+							traceId,
+							startTime: traceData?.payload?.startTimestampMillis || 0,
+							endTime: traceData?.payload?.endTimestampMillis || 0,
+							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
+						}}
+						interestedSpanId={interestedSpanId || ''}
+						uncollapsedNodes={uncollapsedNodes}
+						setInterestedSpanId={setInterestedSpanId}
+						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
+						selectedSpan={selectedSpan}
+						setSelectedSpan={setSelectedSpan}
+					/>
+				);
+			default:
+				return <Spinner tip="Fetching the trace!" />;
+		}
+	}, [
+		errorFetchingTraceData,
+		interestedSpanId,
+		selectedSpan,
+		setInterestedSpanId,
+		setSelectedSpan,
+		setTraceFlamegraphStatsWidth,
+		spans,
+		traceData?.payload?.endTimestampMillis,
+		traceData?.payload?.hasMissingSpans,
+		traceData?.payload?.startTimestampMillis,
+		traceId,
+		traceWaterfallState,
+		uncollapsedNodes,
+	]);
+
+	return <div className="trace-waterfall">{getContent}</div>;
+}
+
+export default TraceWaterfall;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -0,0 +1,30 @@
+.error-waterfall {
+	display: flex;
+	padding: 12px;
+	margin: 20px;
+	gap: 12px;
+	align-items: flex-start;
+	border-radius: 4px;
+	background: var(--bg-cherry-500);
+
+	.text {
+		color: var(--bg-vanilla-100);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		flex-shrink: 0;
+	}
+
+	.value {
+		color: var(--bg-vanilla-100);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+}

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

@@ -0,0 +1,25 @@
+import { Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+
+import './Error.styles.scss';
+
+interface IErrorProps {
+	error: AxiosError;
+}
+
+function Error(props: IErrorProps): JSX.Element {
+	const { error } = props;
+
+	return (
+		<div className="error-waterfall">
+			<Typography.Text className="text">Something went wrong!</Typography.Text>
+			<Tooltip title={error?.message}>
+				<Typography.Text className="value" ellipsis>
+					{error?.message}
+				</Typography.Text>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default Error;

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

@@ -0,0 +1,12 @@
+import { Typography } from 'antd';
+
+interface INoDataProps {
+	id: string;
+}
+
+function NoData(props: INoDataProps): JSX.Element {
+	const { id } = props;
+	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
+}
+
+export default NoData;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.styles.scss

@@ -0,0 +1,60 @@
+.filter-row {
+	display: flex;
+	align-items: center;
+	padding: 16px 20px 0px 20px;
+	gap: 12px;
+
+	.query-builder-search-v2 {
+		width: 100%;
+	}
+
+	.pre-next-toggle {
+		display: flex;
+		flex-shrink: 0;
+		gap: 12px;
+
+		.ant-typography {
+			display: flex;
+			align-items: center;
+			color: var(--bg-vanilla-400);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+		}
+
+		.ant-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: none;
+		}
+	}
+
+	.no-results {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		color: var(--bg-vanilla-400);
+		font-family: 'Geist Mono';
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 150% */
+	}
+}
+
+.lightMode {
+	.filter-row {
+		.pre-next-toggle {
+			.ant-typography {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.no-results {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { Button, Spin, Tooltip, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
+import { uniqBy } from 'lodash-es';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { BASE_FILTER_QUERY } from './constants';
+
+import './Filters.styles.scss';
+
+function prepareQuery(filters: TagFilter, traceID: string): Query {
+	return {
+		...initialQueriesMap.traces,
+		builder: {
+			...initialQueriesMap.traces.builder,
+			queryData: [
+				{
+					...initialQueriesMap.traces.builder.queryData[0],
+					aggregateOperator: TracesAggregatorOperator.NOOP,
+					orderBy: [{ columnName: 'timestamp', order: 'asc' }],
+					filters: {
+						...filters,
+						items: [
+							...filters.items,
+							{
+								id: '5ab8e1cf',
+								key: {
+									key: 'trace_id',
+									dataType: DataTypes.String,
+									type: '',
+									id: 'trace_id--string----true',
+								},
+								op: '=',
+								value: traceID,
+							},
+						],
+					},
+				},
+			],
+		},
+	};
+}
+
+function Filters({
+	startTime,
+	endTime,
+	traceID,
+	onFilteredSpansChange = (): void => {},
+}: {
+	startTime: number;
+	endTime: number;
+	traceID: string;
+	onFilteredSpansChange?: (spanIds: string[], isFilterActive: boolean) => void;
+}): JSX.Element {
+	const [filters, setFilters] = useState<TagFilter>(
+		BASE_FILTER_QUERY.filters || { items: [], op: 'AND' },
+	);
+	const [noData, setNoData] = useState<boolean>(false);
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
+
+	const handleFilterChange = useCallback(
+		(value: TagFilter): void => {
+			if (value.items.length === 0) {
+				setFilteredSpanIds([]);
+				onFilteredSpansChange?.([], false);
+				setCurrentSearchedIndex(0);
+				setNoData(false);
+			}
+			setFilters(value);
+		},
+		[onFilteredSpansChange],
+	);
+	const { search } = useLocation();
+	const history = useHistory();
+
+	const handlePrevNext = useCallback(
+		(index: number, spanId?: string): void => {
+			const searchParams = new URLSearchParams(search);
+			if (spanId) {
+				searchParams.set('spanId', spanId);
+			} else {
+				searchParams.set('spanId', filteredSpanIds[index]);
+			}
+
+			history.replace({ search: searchParams.toString() });
+		},
+		[filteredSpanIds, history, search],
+	);
+
+	const { isFetching, error } = useGetQueryRange(
+		{
+			query: prepareQuery(filters, traceID),
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start: startTime,
+			end: endTime,
+			params: {
+				dataSource: 'traces',
+			},
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: 200,
+				},
+				selectColumns: [
+					{
+						key: 'name',
+						dataType: 'string',
+						type: 'tag',
+						id: 'name--string--tag--true',
+						isIndexed: false,
+					},
+				],
+			},
+		},
+		DEFAULT_ENTITY_VERSION,
+		{
+			queryKey: [filters],
+			enabled: filters.items.length > 0,
+			onSuccess: (data) => {
+				const isFilterActive = filters.items.length > 0;
+				if (data?.payload.data.newResult.data.result[0].list) {
+					const uniqueSpans = uniqBy(
+						data?.payload.data.newResult.data.result[0].list,
+						'data.spanID',
+					);
+
+					const spanIds = uniqueSpans.map((val) => val.data.spanID);
+					setFilteredSpanIds(spanIds);
+					onFilteredSpansChange?.(spanIds, isFilterActive);
+					handlePrevNext(0, spanIds[0]);
+					setNoData(false);
+				} else {
+					setNoData(true);
+					setFilteredSpanIds([]);
+					onFilteredSpansChange?.([], isFilterActive);
+					setCurrentSearchedIndex(0);
+				}
+			},
+		},
+	);
+
+	return (
+		<div className="filter-row">
+			<QueryBuilderSearchV2
+				query={{
+					...BASE_FILTER_QUERY,
+					filters,
+				}}
+				onChange={handleFilterChange}
+				hideSpanScopeSelector={false}
+				skipQueryBuilderRedirect
+				selectProps={{ listHeight: 125 }}
+			/>
+			{filteredSpanIds.length > 0 && (
+				<div className="pre-next-toggle">
+					<Typography.Text>
+						{currentSearchedIndex + 1} / {filteredSpanIds.length}
+					</Typography.Text>
+					<Button
+						icon={<ChevronUp size={14} />}
+						disabled={currentSearchedIndex === 0}
+						type="text"
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex - 1);
+							setCurrentSearchedIndex((prev) => prev - 1);
+						}}
+					/>
+					<Button
+						icon={<ChevronDown size={14} />}
+						type="text"
+						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex + 1);
+							setCurrentSearchedIndex((prev) => prev + 1);
+						}}
+					/>
+				</div>
+			)}
+			{isFetching && <Spin indicator={<LoadingOutlined spin />} size="small" />}
+			{error && (
+				<Tooltip title={(error as AxiosError)?.message || 'Something went wrong'}>
+					<InfoCircleOutlined size={14} />
+				</Tooltip>
+			)}
+			{noData && (
+				<Typography.Text className="no-results">No results found</Typography.Text>
+			)}
+		</div>
+	);
+}
+
+Filters.defaultProps = {
+	onFilteredSpansChange: undefined,
+};
+
+export default Filters;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/constants.ts

@@ -0,0 +1,38 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+
+export const BASE_FILTER_QUERY: IBuilderQuery = {
+	queryName: 'A',
+	dataSource: DataSource.TRACES,
+	aggregateOperator: 'noop',
+	aggregateAttribute: {
+		id: '------false',
+		dataType: DataTypes.EMPTY,
+		key: '',
+		type: '',
+	},
+	timeAggregation: 'rate',
+	spaceAggregation: 'sum',
+	functions: [],
+	filters: {
+		items: [],
+		op: 'AND',
+	},
+	expression: 'A',
+	disabled: false,
+	stepInterval: 60,
+	having: [],
+	limit: 200,
+	orderBy: [
+		{
+			columnName: 'timestamp',
+			order: 'desc',
+		},
+	],
+	groupBy: [],
+	legend: '',
+	reduceTo: ReduceOperators.AVG,
+	offset: 0,
+	selectColumns: [],
+};

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.styles.scss

@@ -0,0 +1,461 @@
+.success-content {
+	overflow-y: hidden;
+	overflow-x: hidden;
+	max-width: 100%;
+
+	.missing-spans {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 44px;
+		margin: 16px;
+		padding: 12px;
+		border-radius: 4px;
+		background: rgba(69, 104, 220, 0.1);
+
+		.left-info {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+
+			.text {
+				color: var(--bg-robin-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.right-info {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: row-reverse;
+			gap: 8px;
+			color: var(--bg-robin-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.right-info:hover {
+			background-color: unset;
+			color: var(--bg-robin-200);
+		}
+	}
+
+	.waterfall-table {
+		height: calc(70vh - 236px);
+		overflow: auto;
+		overflow-x: hidden;
+		padding: 0px 20px 20px 20px;
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+
+		// default table overrides css for table v3
+		.div-table {
+			width: 100% !important;
+			border: none !important;
+		}
+
+		.div-thead {
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background-color: var(--bg-ink-500) !important;
+
+			.div-tr {
+				height: 16px;
+			}
+		}
+
+		.div-tr {
+			display: flex;
+			width: 100%;
+			align-items: center;
+			height: 54px;
+		}
+
+		.div-tr:hover {
+			border-radius: 4px;
+			background: rgba(171, 189, 255, 0.06) !important;
+
+			.div-td .span-overview .second-row .add-funnel-button {
+				opacity: 1;
+			}
+
+			.span-overview {
+				background: unset !important;
+
+				.span-overview-content {
+					background: unset !important;
+				}
+			}
+		}
+
+		.div-th,
+		.div-td {
+			box-shadow: none;
+			padding: 0px !important;
+		}
+
+		.div-th {
+			padding: 2px 4px;
+			position: relative;
+			font-weight: bold;
+			text-align: center;
+		}
+
+		.div-td {
+			display: flex;
+			height: 54px;
+			align-items: center;
+			overflow: hidden;
+
+			.span-overview {
+				display: flex;
+				align-items: center;
+				flex-shrink: 0;
+				height: 100%;
+				width: 100%;
+				cursor: pointer;
+
+				.connector-lines {
+					display: flex;
+				}
+
+				.span-overview-content {
+					display: flex;
+					flex-shrink: 0;
+					flex-direction: column;
+					align-items: flex-start;
+					gap: 5px;
+					width: 100%;
+					background-color: #0b0c0e;
+					height: 100%;
+					justify-content: center;
+					&:not(:first-child) {
+						.first-row {
+							width: calc(100% - 28px);
+						}
+					}
+
+					.first-row {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						height: 20px;
+						width: 100%;
+
+						.span-det {
+							display: flex;
+							gap: 6px;
+							flex-shrink: 0;
+							align-items: center;
+
+							.collapse-uncollapse-button {
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								padding: 4px 4px;
+								gap: 4px;
+								border-radius: 2px;
+								border: 1px solid var(--bg-slate-400);
+								background: var(--bg-slate-500);
+								box-shadow: none;
+								height: 20px;
+
+								.children-count {
+									color: var(--bg-vanilla-400);
+									font-family: 'Space Mono';
+									font-size: 14px;
+									font-style: normal;
+									font-weight: 400;
+									line-height: 20px; /* 142.857% */
+									letter-spacing: 0.28px;
+								}
+							}
+
+							.span-name {
+								color: #fff;
+								font-family: 'Inter';
+								font-size: 14px;
+								font-style: normal;
+								font-weight: 400;
+								line-height: 20px; /* 142.857% */
+								letter-spacing: 0.28px;
+							}
+						}
+
+						.status-code-container {
+							display: flex;
+							padding-right: 10px;
+
+							.status-code {
+								display: flex;
+								height: 20px;
+								padding: 3px;
+								align-items: center;
+								border-radius: 3px;
+							}
+
+							.success {
+								border: 1px solid var(--bg-robin-500);
+								background: var(--bg-robin-500);
+							}
+
+							.error {
+								border: 1px solid var(--bg-cherry-500);
+								background: var(--bg-cherry-500);
+							}
+						}
+					}
+
+					.second-row {
+						display: flex;
+						align-items: center;
+						gap: 8px;
+						height: 18px;
+						width: 100%;
+						.service-name {
+							color: var(--bg-vanilla-400);
+							font-family: Inter;
+							font-size: 14px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 18px; /* 128.571% */
+							letter-spacing: -0.07px;
+						}
+						.add-funnel-button {
+							position: relative;
+							z-index: 1;
+							opacity: 0;
+							display: flex;
+							align-items: center;
+							gap: 6px;
+							transition: opacity 0.1s ease-in-out;
+
+							&__separator {
+								color: var(--bg-vanilla-400);
+							}
+							&__button {
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+					}
+				}
+			}
+
+			.span-duration {
+				display: flex;
+				flex-direction: column;
+				height: 54px;
+				position: relative;
+				width: 100%;
+				padding-left: 15px;
+				cursor: pointer;
+
+				.span-line {
+					position: relative;
+					height: 12px;
+					top: 35%;
+					border-radius: 6px;
+				}
+
+				.event-dot {
+					position: absolute;
+					top: 50%;
+					transform: translate(-50%, -50%) rotate(45deg);
+					width: 6px;
+					height: 6px;
+					background-color: var(--bg-robin-500);
+					border: 1px solid var(--bg-robin-600);
+					cursor: pointer;
+					z-index: 1;
+
+					&.error {
+						background-color: var(--bg-cherry-500);
+						border-color: var(--bg-cherry-600);
+					}
+
+					&:hover {
+						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
+					}
+				}
+
+				.span-line-text {
+					position: relative;
+					top: 40%;
+					font-variant-numeric: lining-nums tabular-nums stacked-fractions
+						slashed-zero;
+					font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 128.571% */
+					letter-spacing: -0.07px;
+				}
+			}
+
+			.interested-span,
+			.selected-non-matching-span {
+				border-radius: 4px;
+				background: rgba(171, 189, 255, 0.06) !important;
+
+				.span-overview-content {
+					background: unset;
+				}
+			}
+
+			.dimmed-span {
+				opacity: 0.4;
+			}
+			.highlighted-span {
+				opacity: 1;
+			}
+
+			.selected-non-matching-span {
+				.span-overview-content,
+				.span-line-text {
+					opacity: 0.5;
+				}
+			}
+		}
+
+		.div-td + .div-td {
+			border-left: 1px solid var(--bg-slate-400);
+		}
+
+		.div-th + .div-th {
+			border-left: 1px solid var(--bg-slate-400);
+		}
+
+		.div-tr .div-th:nth-child(2) {
+			width: calc(100% - var(--header-span-name-size) * 1px) !important;
+		}
+		.div-tr .div-td:nth-child(2) {
+			width: calc(100% - var(--header-span-name-size) * 1px) !important;
+		}
+		.resizer {
+			width: 10px !important;
+			position: absolute;
+			top: 0;
+			height: calc(70vh - 236px);
+			right: 0;
+			width: 2px;
+			background: rgba(35, 196, 248, 0.2);
+			cursor: col-resize;
+			user-select: none;
+			touch-action: none;
+		}
+
+		.resizer.isResizing {
+			background: rgba(35, 196, 248, 0.2);
+			opacity: 1;
+		}
+
+		@media (hover: hover) {
+			.resizer {
+				opacity: 0;
+			}
+
+			*:hover > .resizer {
+				opacity: 1;
+			}
+		}
+	}
+
+	.missing-spans-waterfall-table {
+		height: calc(70vh - 312px);
+	}
+}
+
+.span-dets {
+	.related-logs {
+		display: flex;
+		width: 160px;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		border-radius: 2px;
+		border: 1px solid var(--Slate-400, #1d212d);
+		background: var(--Slate-500, #161922);
+		box-shadow: none;
+	}
+}
+
+.lightMode {
+	.success-content {
+		.waterfall-table {
+			.div-td {
+				.span-overview {
+					.span-overview-content {
+						background-color: var(--bg-vanilla-200);
+						.first-row {
+							.collapse-uncollapse-button {
+								border: 1px solid var(--bg-vanilla-400);
+								background: var(--bg-vanilla-400);
+
+								.children-count {
+									color: var(--bg-ink-400);
+								}
+							}
+
+							.span-name {
+								color: var(--bg-ink-400);
+							}
+						}
+
+						.second-row {
+							.service-name {
+								color: var(--bg-ink-400);
+							}
+						}
+					}
+				}
+
+				.interested-span {
+					border-radius: 4px;
+					background: var(--bg-vanilla-300);
+				}
+			}
+
+			.div-td + .div-td {
+				border-left: 1px solid var(--bg-vanilla-300);
+			}
+
+			.div-th + .div-th {
+				border-left: 1px solid var(--bg-vanilla-300);
+			}
+
+			.div-thead {
+				background-color: var(--bg-vanilla-200) !important;
+			}
+		}
+	}
+	.span-dets {
+		.related-logs {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-300);
+		}
+	}
+}

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

@@ -0,0 +1,589 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { Button, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
+import SpanHoverCard from 'components/SpanHoverCard/SpanHoverCard';
+import { TableV3 } from 'components/TableV3/TableV3';
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import {
+	AlertCircle,
+	ArrowUpRight,
+	ChevronDown,
+	ChevronRight,
+	Leaf,
+} from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import { Span } from 'types/api/trace/getTraceV2';
+import { toFixed } from 'utils/toFixed';
+
+import AddSpanToFunnelModal from '../../AddSpanToFunnelModal/AddSpanToFunnelModal';
+import SpanLineActionButtons from '../../SpanLineActionButtons';
+import { IInterestedSpan } from '../../TraceWaterfall';
+import Filters from './Filters/Filters';
+
+import './Success.styles.scss';
+
+// css config
+const CONNECTOR_WIDTH = 28;
+const VERTICAL_CONNECTOR_WIDTH = 1;
+
+interface ITraceMetadata {
+	traceId: string;
+	startTime: number;
+	endTime: number;
+	hasMissingSpans: boolean;
+}
+interface ISuccessProps {
+	spans: Span[];
+	traceMetadata: ITraceMetadata;
+	interestedSpanId: IInterestedSpan;
+	uncollapsedNodes: string[];
+	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
+	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
+	selectedSpan: Span | undefined;
+	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
+}
+
+function SpanOverview({
+	span,
+	isSpanCollapsed,
+	handleCollapseUncollapse,
+	handleSpanClick,
+	handleAddSpanToFunnel,
+	selectedSpan,
+	filteredSpanIds,
+	isFilterActive,
+	traceMetadata,
+}: {
+	span: Span;
+	isSpanCollapsed: boolean;
+	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
+	selectedSpan: Span | undefined;
+	handleSpanClick: (span: Span) => void;
+	handleAddSpanToFunnel: (span: Span) => void;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+	traceMetadata: ITraceMetadata;
+}): JSX.Element {
+	const isRootSpan = span.level === 0;
+	const { hasEditPermission } = useAppContext();
+
+	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+	if (span.hasError) {
+		color = `var(--bg-cherry-500)`;
+	}
+
+	// Smart highlighting logic
+	const isMatching =
+		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
+	const isSelected = selectedSpan?.spanId === span.spanId;
+	const isDimmed = isFilterActive && !isMatching && !isSelected;
+	const isHighlighted = isFilterActive && isMatching && !isSelected;
+	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
+
+	return (
+		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
+			<div
+				className={cx('span-overview', {
+					'interested-span': isSelected && (!isFilterActive || isMatching),
+					'highlighted-span': isHighlighted,
+					'selected-non-matching-span': isSelectedNonMatching,
+					'dimmed-span': isDimmed,
+				})}
+				style={{
+					paddingLeft: `${
+						isRootSpan
+							? span.level * CONNECTOR_WIDTH
+							: (span.level - 1) * (CONNECTOR_WIDTH + VERTICAL_CONNECTOR_WIDTH)
+					}px`,
+					backgroundImage: `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="54"><line x1="0" y1="0" x2="0" y2="54" stroke="rgb(29 33 45)" stroke-width="1" /></svg>')`,
+					backgroundRepeat: 'repeat',
+					backgroundSize: `${CONNECTOR_WIDTH + 1}px 54px`,
+				}}
+				onClick={(): void => handleSpanClick(span)}
+			>
+				{!isRootSpan && (
+					<div className="connector-lines">
+						<div
+							style={{
+								width: `${CONNECTOR_WIDTH}px`,
+								height: '1px',
+								borderTop: '1px solid var(--bg-slate-400)',
+								display: 'flex',
+								flexShrink: 0,
+								position: 'relative',
+								top: '-10px',
+							}}
+						/>
+					</div>
+				)}
+				<div className="span-overview-content">
+					<section className="first-row">
+						<div className="span-det">
+							{span.hasChildren ? (
+								<Button
+									onClick={(event): void => {
+										event.stopPropagation();
+										event.preventDefault();
+										handleCollapseUncollapse(span.spanId, !isSpanCollapsed);
+									}}
+									className="collapse-uncollapse-button"
+								>
+									{isSpanCollapsed ? (
+										<ChevronRight size={14} />
+									) : (
+										<ChevronDown size={14} />
+									)}
+									<Typography.Text className="children-count">
+										{span.subTreeNodeCount}
+									</Typography.Text>
+								</Button>
+							) : (
+								<Button className="collapse-uncollapse-button">
+									<Leaf size={14} />
+								</Button>
+							)}
+							<Typography.Text className="span-name">{span.name}</Typography.Text>
+						</div>
+						<HttpStatusBadge statusCode={span.tagMap?.['http.status_code']} />
+					</section>
+					<section className="second-row">
+						<div style={{ width: '2px', background: color, height: '100%' }} />
+						<Typography.Text className="service-name">
+							{span.serviceName}
+						</Typography.Text>
+						{!!span.serviceName && !!span.name && (
+							<div className="add-funnel-button">
+								<span className="add-funnel-button__separator">·</span>
+								<Tooltip
+									title={
+										!hasEditPermission
+											? 'You need editor or admin access to add spans to funnels'
+											: ''
+									}
+								>
+									<Button
+										type="text"
+										size="small"
+										className="add-funnel-button__button"
+										onClick={(e): void => {
+											e.preventDefault();
+											e.stopPropagation();
+											handleAddSpanToFunnel(span);
+										}}
+										disabled={!hasEditPermission}
+										icon={
+											<img
+												className="add-funnel-button__icon"
+												src="/Icons/funnel-add.svg"
+												alt="funnel-icon"
+											/>
+										}
+									/>
+								</Tooltip>
+							</div>
+						)}
+					</section>
+				</div>
+			</div>
+		</SpanHoverCard>
+	);
+}
+
+export function SpanDuration({
+	span,
+	traceMetadata,
+	handleSpanClick,
+	selectedSpan,
+	filteredSpanIds,
+	isFilterActive,
+}: {
+	span: Span;
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+	handleSpanClick: (span: Span) => void;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+}): JSX.Element {
+	const { time, timeUnitName } = convertTimeToRelevantUnit(
+		span.durationNano / 1e6,
+	);
+
+	const spread = traceMetadata.endTime - traceMetadata.startTime;
+	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
+	const width = (span.durationNano * 1e2) / (spread * 1e6);
+
+	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
+
+	if (span.hasError) {
+		color = `var(--bg-cherry-500)`;
+	}
+
+	const [hasActionButtons, setHasActionButtons] = useState(false);
+
+	const isMatching =
+		isFilterActive && (filteredSpanIds || []).includes(span.spanId);
+	const isSelected = selectedSpan?.spanId === span.spanId;
+	const isDimmed = isFilterActive && !isMatching && !isSelected;
+	const isHighlighted = isFilterActive && isMatching && !isSelected;
+	const isSelectedNonMatching = isSelected && isFilterActive && !isMatching;
+
+	const handleMouseEnter = (): void => {
+		setHasActionButtons(true);
+	};
+
+	const handleMouseLeave = (): void => {
+		setHasActionButtons(false);
+	};
+
+	// Calculate text positioning to handle overflow cases
+	const textStyle = useMemo(() => {
+		const spanRightEdge = leftOffset + width;
+		const textWidthApprox = 8; // Approximate text width in percentage
+
+		// If span would cause text overflow, right-align text to span end
+		if (leftOffset > 100 - textWidthApprox) {
+			return {
+				right: `${100 - spanRightEdge}%`,
+				color,
+				textAlign: 'right' as const,
+			};
+		}
+
+		// Default: left-align text to span start
+		return {
+			left: `${leftOffset}%`,
+			color,
+		};
+	}, [leftOffset, width, color]);
+
+	return (
+		<SpanHoverCard span={span} traceMetadata={traceMetadata}>
+			<div
+				className={cx('span-duration', {
+					'interested-span': isSelected && (!isFilterActive || isMatching),
+					'highlighted-span': isHighlighted,
+					'selected-non-matching-span': isSelectedNonMatching,
+					'dimmed-span': isDimmed,
+				})}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onClick={(): void => handleSpanClick(span)}
+			>
+				<div
+					className="span-line"
+					style={{
+						left: `${leftOffset}%`,
+						width: `${width}%`,
+						backgroundColor: color,
+						position: 'relative',
+					}}
+				>
+					{span.event?.map((event) => {
+						const eventTimeMs = event.timeUnixNano / 1e6;
+						const eventOffsetPercent =
+							((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
+						const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
+						const { isError } = event;
+						const { time, timeUnitName } = convertTimeToRelevantUnit(
+							eventTimeMs - span.timestamp,
+						);
+						return (
+							<Tooltip
+								key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
+								title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
+							>
+								<div
+									className={`event-dot ${isError ? 'error' : ''}`}
+									style={{
+										left: `${clampedOffset}%`,
+									}}
+								/>
+							</Tooltip>
+						);
+					})}
+				</div>
+				{hasActionButtons && <SpanLineActionButtons span={span} />}
+				<Typography.Text
+					className="span-line-text"
+					ellipsis
+					style={textStyle}
+				>{`${toFixed(time, 2)} ${timeUnitName}`}</Typography.Text>
+			</div>
+		</SpanHoverCard>
+	);
+}
+
+// table config
+const columnDefHelper = createColumnHelper<Span>();
+
+function getWaterfallColumns({
+	handleCollapseUncollapse,
+	uncollapsedNodes,
+	traceMetadata,
+	selectedSpan,
+	handleSpanClick,
+	handleAddSpanToFunnel,
+	filteredSpanIds,
+	isFilterActive,
+}: {
+	handleCollapseUncollapse: (id: string, collapse: boolean) => void;
+	uncollapsedNodes: string[];
+	traceMetadata: ITraceMetadata;
+	selectedSpan: Span | undefined;
+	handleSpanClick: (span: Span) => void;
+	handleAddSpanToFunnel: (span: Span) => void;
+	filteredSpanIds: string[];
+	isFilterActive: boolean;
+}): ColumnDef<Span, any>[] {
+	const waterfallColumns: ColumnDef<Span, any>[] = [
+		columnDefHelper.display({
+			id: 'span-name',
+			header: '',
+			cell: (props): JSX.Element => (
+				<SpanOverview
+					span={props.row.original}
+					handleCollapseUncollapse={handleCollapseUncollapse}
+					isSpanCollapsed={!uncollapsedNodes.includes(props.row.original.spanId)}
+					selectedSpan={selectedSpan}
+					handleSpanClick={handleSpanClick}
+					handleAddSpanToFunnel={handleAddSpanToFunnel}
+					traceMetadata={traceMetadata}
+					filteredSpanIds={filteredSpanIds}
+					isFilterActive={isFilterActive}
+				/>
+			),
+			size: 450,
+			/**
+			 * Note: The TanStack table currently does not support percentage-based column sizing.
+			 * Therefore, we specify both `minSize` and `maxSize` for the "span-name" column to ensure
+			 * that its width remains between 240px and 900px. Setting a `maxSize` here is important
+			 * because the "span-duration" column has column resizing disabled, making it difficult
+			 * to enforce a minimum width for that column. By constraining the "span-name" column,
+			 * we indirectly control the minimum width available for the "span-duration" column.
+			 */
+			minSize: 240,
+			maxSize: 900,
+		}),
+		columnDefHelper.display({
+			id: 'span-duration',
+			header: () => <div />,
+			enableResizing: false,
+			cell: (props): JSX.Element => (
+				<SpanDuration
+					span={props.row.original}
+					traceMetadata={traceMetadata}
+					selectedSpan={selectedSpan}
+					handleSpanClick={handleSpanClick}
+					filteredSpanIds={filteredSpanIds}
+					isFilterActive={isFilterActive}
+				/>
+			),
+		}),
+	];
+
+	return waterfallColumns;
+}
+
+function Success(props: ISuccessProps): JSX.Element {
+	const {
+		spans,
+		traceMetadata,
+		interestedSpanId,
+		uncollapsedNodes,
+		setInterestedSpanId,
+		setTraceFlamegraphStatsWidth,
+		setSelectedSpan,
+		selectedSpan,
+	} = props;
+
+	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
+	const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
+	const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element>>();
+
+	const handleFilteredSpansChange = useCallback(
+		(spanIds: string[], isActive: boolean) => {
+			setFilteredSpanIds(spanIds);
+			setIsFilterActive(isActive);
+		},
+		[],
+	);
+
+	const handleCollapseUncollapse = useCallback(
+		(spanId: string, collapse: boolean) => {
+			setInterestedSpanId({ spanId, isUncollapsed: !collapse });
+		},
+		[setInterestedSpanId],
+	);
+
+	const handleVirtualizerInstanceChanged = (
+		instance: Virtualizer<HTMLDivElement, Element>,
+	): void => {
+		const { range } = instance;
+		// when there are less than 500 elements in the API call that means there is nothing to fetch on top and bottom so
+		// do not trigger the API call
+		if (spans.length < 500) {
+			return;
+		}
+
+		if (range?.startIndex === 0 && instance.isScrolling) {
+			// do not trigger for trace root as nothing to fetch above
+			if (spans[0].level !== 0) {
+				setInterestedSpanId({ spanId: spans[0].spanId, isUncollapsed: false });
+			}
+			return;
+		}
+
+		if (range?.endIndex === spans.length - 1 && instance.isScrolling) {
+			setInterestedSpanId({
+				spanId: spans[spans.length - 1].spanId,
+				isUncollapsed: false,
+			});
+		}
+	};
+
+	const [isAddSpanToFunnelModalOpen, setIsAddSpanToFunnelModalOpen] = useState(
+		false,
+	);
+	const [selectedSpanToAddToFunnel, setSelectedSpanToAddToFunnel] = useState<
+		Span | undefined
+	>(undefined);
+	const handleAddSpanToFunnel = useCallback((span: Span): void => {
+		setIsAddSpanToFunnelModalOpen(true);
+		setSelectedSpanToAddToFunnel(span);
+	}, []);
+
+	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
+
+	const handleSpanClick = useCallback(
+		(span: Span): void => {
+			setSelectedSpan(span);
+			if (span?.spanId) {
+				urlQuery.set('spanId', span?.spanId);
+			}
+
+			safeNavigate({ search: urlQuery.toString() });
+		},
+		[setSelectedSpan, urlQuery, safeNavigate],
+	);
+
+	const columns = useMemo(
+		() =>
+			getWaterfallColumns({
+				handleCollapseUncollapse,
+				uncollapsedNodes,
+				traceMetadata,
+				selectedSpan,
+				handleSpanClick,
+				handleAddSpanToFunnel,
+				filteredSpanIds,
+				isFilterActive,
+			}),
+		[
+			handleCollapseUncollapse,
+			uncollapsedNodes,
+			traceMetadata,
+			selectedSpan,
+			handleSpanClick,
+			handleAddSpanToFunnel,
+			filteredSpanIds,
+			isFilterActive,
+		],
+	);
+
+	useEffect(() => {
+		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
+			const idx = spans.findIndex(
+				(span) => span.spanId === interestedSpanId.spanId,
+			);
+			if (idx !== -1) {
+				setTimeout(() => {
+					virtualizerRef.current?.scrollToIndex(idx, {
+						align: 'center',
+						behavior: 'auto',
+					});
+				}, 400);
+
+				setSelectedSpan(spans[idx]);
+			}
+		} else {
+			setSelectedSpan((prev) => {
+				if (!prev) {
+					return spans[0];
+				}
+				return prev;
+			});
+		}
+	}, [interestedSpanId, setSelectedSpan, spans]);
+
+	return (
+		<div className="success-content">
+			{traceMetadata.hasMissingSpans && (
+				<div className="missing-spans">
+					<section className="left-info">
+						<AlertCircle size={14} />
+						<Typography.Text className="text">
+							This trace has missing spans
+						</Typography.Text>
+					</section>
+					<Button
+						icon={<ArrowUpRight size={14} />}
+						className="right-info"
+						type="text"
+						onClick={(): WindowProxy | null =>
+							window.open(
+								'https://signoz.io/docs/userguide/traces/#missing-spans',
+								'_blank',
+							)
+						}
+					>
+						Learn More
+					</Button>
+				</div>
+			)}
+			<Filters
+				startTime={traceMetadata.startTime / 1e3}
+				endTime={traceMetadata.endTime / 1e3}
+				traceID={traceMetadata.traceId}
+				onFilteredSpansChange={handleFilteredSpansChange}
+			/>
+			<TableV3
+				columns={columns}
+				data={spans}
+				config={{
+					handleVirtualizerInstanceChanged,
+				}}
+				customClassName={cx(
+					'waterfall-table',
+					traceMetadata.hasMissingSpans ? 'missing-spans-waterfall-table' : '',
+				)}
+				virtualiserRef={virtualizerRef}
+				setColumnWidths={setTraceFlamegraphStatsWidth}
+			/>
+			{selectedSpanToAddToFunnel && (
+				<AddSpanToFunnelModal
+					span={selectedSpanToAddToFunnel}
+					isOpen={isAddSpanToFunnelModalOpen}
+					onClose={(): void => setIsAddSpanToFunnelModalOpen(false)}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default Success;

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/SpanDuration.test.tsx

@@ -0,0 +1,263 @@
+import useUrlQuery from 'hooks/useUrlQuery';
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import { SpanDuration } from '../Success';
+
+// Constants to avoid string duplication
+const SPAN_DURATION_TEXT = '1.16 ms';
+const SPAN_DURATION_CLASS = '.span-duration';
+const INTERESTED_SPAN_CLASS = 'interested-span';
+const HIGHLIGHTED_SPAN_CLASS = 'highlighted-span';
+const DIMMED_SPAN_CLASS = 'dimmed-span';
+const SELECTED_NON_MATCHING_SPAN_CLASS = 'selected-non-matching-span';
+
+// Mock the hooks
+jest.mock('hooks/useUrlQuery');
+jest.mock('@signozhq/badge', () => ({
+	Badge: jest.fn(),
+}));
+
+const mockSpan: Span = {
+	spanId: 'test-span-id',
+	name: 'test-span',
+	serviceName: 'test-service',
+	durationNano: 1160000, // 1ms in nano
+	timestamp: 1234567890,
+	rootSpanId: 'test-root-span-id',
+	parentSpanId: 'test-parent-span-id',
+	traceId: 'test-trace-id',
+	hasError: false,
+	kind: 0,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'test-root-name',
+	statusMessage: 'test-status-message',
+	statusCodeString: 'test-status-code-string',
+	spanKind: 'test-span-kind',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 0,
+	level: 0,
+};
+
+const mockTraceMetadata = {
+	traceId: 'test-trace-id',
+	startTime: 1234567000,
+	endTime: 1234569000,
+	hasMissingSpans: false,
+};
+
+const mockSafeNavigate = jest.fn();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+describe('SpanDuration', () => {
+	const mockSetSelectedSpan = jest.fn();
+	const mockUrlQuerySet = jest.fn();
+	const mockUrlQueryGet = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Mock URL query hook
+		(useUrlQuery as jest.Mock).mockReturnValue({
+			set: mockUrlQuerySet,
+			get: mockUrlQueryGet,
+			toString: () => 'spanId=test-span-id',
+		});
+	});
+
+	it('calls handleSpanClick when clicked', () => {
+		const mockHandleSpanClick = jest.fn();
+
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockHandleSpanClick}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		// Find and click the span duration element
+		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
+		fireEvent.click(spanElement);
+
+		// Verify handleSpanClick was called with the correct span
+		expect(mockHandleSpanClick).toHaveBeenCalledWith(mockSpan);
+	});
+
+	it('shows action buttons on hover', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen.getByText(SPAN_DURATION_TEXT);
+
+		// Initially, action buttons should not be visible
+		expect(screen.queryByRole('button')).not.toBeInTheDocument();
+
+		// Hover over the span
+		fireEvent.mouseEnter(spanElement);
+
+		// Action buttons should now be visible
+		expect(screen.getByRole('button')).toBeInTheDocument();
+
+		// Mouse leave should hide the buttons
+		fireEvent.mouseLeave(spanElement);
+		expect(screen.queryByRole('button')).not.toBeInTheDocument();
+	});
+
+	it('applies interested-span class when span is selected', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+
+	it('applies highlighted-span class when span matches filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[mockSpan.spanId]}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+
+	it('applies dimmed-span class when span does not match filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={['other-span-id']}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+	});
+
+	it('prioritizes interested-span over highlighted-span when span is selected and matches filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[mockSpan.spanId]}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('applies selected-non-matching-span class when span is selected but does not match filter', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={['different-span-id']}
+				isFilterActive
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('applies interested-span class when span is selected and no filter is active', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={mockSpan}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]}
+				isFilterActive={false}
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(SELECTED_NON_MATCHING_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(DIMMED_SPAN_CLASS);
+	});
+
+	it('dims span when filter is active but no matches found', () => {
+		render(
+			<SpanDuration
+				span={mockSpan}
+				traceMetadata={mockTraceMetadata}
+				selectedSpan={undefined}
+				handleSpanClick={mockSetSelectedSpan}
+				filteredSpanIds={[]} // Empty array but filter is active
+				isFilterActive // This is the key difference
+			/>,
+		);
+
+		const spanElement = screen
+			.getByText(SPAN_DURATION_TEXT)
+			.closest(SPAN_DURATION_CLASS);
+		expect(spanElement).toHaveClass(DIMMED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(HIGHLIGHTED_SPAN_CLASS);
+		expect(spanElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/__tests__/UnifiedSpanClick.test.tsx

@@ -0,0 +1,447 @@
+import React from 'react';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { Span } from 'types/api/trace/getTraceV2';
+
+import Success from '../Success';
+
+// Mock the required hooks with proper typing
+const mockSafeNavigate = jest.fn() as jest.MockedFunction<
+	(params: { search: string }) => void
+>;
+const mockUrlQuery = new URLSearchParams();
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+jest.mock('hooks/useUrlQuery', () => (): URLSearchParams => mockUrlQuery);
+
+// App provider is already handled by test-utils
+
+// React Router is already globally mocked
+
+// Mock complex external dependencies that cause provider issues
+jest.mock('components/SpanHoverCard/SpanHoverCard', () => {
+	function SpanHoverCard({
+		children,
+	}: {
+		children: React.ReactNode;
+	}): JSX.Element {
+		return <div>{children}</div>;
+	}
+	SpanHoverCard.displayName = 'SpanHoverCard';
+	return SpanHoverCard;
+});
+
+// Mock the Filters component that's causing React Query issues
+jest.mock('../Filters/Filters', () => {
+	function Filters(): null {
+		return null;
+	}
+	Filters.displayName = 'Filters';
+	return Filters;
+});
+
+// Mock other potential dependencies
+jest.mock(
+	'pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal',
+	() => {
+		function AddSpanToFunnelModal(): null {
+			return null;
+		}
+		AddSpanToFunnelModal.displayName = 'AddSpanToFunnelModal';
+		return AddSpanToFunnelModal;
+	},
+);
+
+jest.mock('pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons', () => {
+	function SpanLineActionButtons(): null {
+		return null;
+	}
+	SpanLineActionButtons.displayName = 'SpanLineActionButtons';
+	return SpanLineActionButtons;
+});
+
+jest.mock('components/HttpStatusBadge/HttpStatusBadge', () => {
+	function HttpStatusBadge(): null {
+		return null;
+	}
+	HttpStatusBadge.displayName = 'HttpStatusBadge';
+	return HttpStatusBadge;
+});
+
+// Mock other utilities that might cause issues
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: (): string => '#1890ff',
+}));
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (
+		value: number,
+	): { time: number; timeUnitName: string } => ({
+		time: value < 1000 ? value : value / 1000,
+		timeUnitName: value < 1000 ? 'ms' : 's',
+	}),
+}));
+
+jest.mock('utils/toFixed', () => ({
+	toFixed: (value: number, decimals: number): string => value.toFixed(decimals),
+}));
+
+// Create a simplified mock TableV3 that renders the actual column components
+jest.mock('components/TableV3/TableV3', () => ({
+	TableV3: ({
+		columns,
+		data,
+	}: {
+		columns: unknown[];
+		data: Span[];
+	}): JSX.Element => {
+		// Get the current props from the columns (which contain the current state)
+		const spanOverviewColumn = columns[0] as {
+			cell?: (props: any) => JSX.Element;
+		};
+		const spanDurationColumn = columns[1] as {
+			cell?: (props: any) => JSX.Element;
+		};
+
+		return (
+			<div data-testid="trace-table">
+				{data.map((row: Span) => {
+					// Create proper cell props that match what TanStack Table expects
+					const cellProps = {
+						row: {
+							original: row,
+							getValue: (): Span => row,
+							getAllCells: (): any[] => [],
+							getVisibleCells: (): any[] => [],
+							getUniqueValues: (): any[] => [],
+							getIsSelected: (): boolean => false,
+							getIsSomeSelected: (): boolean => false,
+							getIsAllSelected: (): boolean => false,
+							getCanSelect: (): boolean => true,
+							getCanSelectSubRows: (): boolean => true,
+							getCanSelectAll: (): boolean => true,
+							toggleSelected: (): void => {},
+							getToggleSelectedHandler: (): (() => void) => (): void => {},
+						},
+						column: { id: 'span-name' },
+						table: {},
+						cell: {},
+						renderValue: (): Span => row,
+						getValue: (): Span => row,
+					};
+
+					const durationCellProps = {
+						...cellProps,
+						column: { id: 'span-duration' },
+					};
+
+					return (
+						<div key={row.spanId} data-testid={`table-row-${row.spanId}`}>
+							{/* Render span overview column */}
+							<div data-testid={`cell-0-${row.spanId}`}>
+								{spanOverviewColumn?.cell?.(cellProps)}
+							</div>
+							{/* Render span duration column */}
+							<div data-testid={`cell-1-${row.spanId}`}>
+								{spanDurationColumn?.cell?.(durationCellProps)}
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		);
+	},
+}));
+
+const mockTraceMetadata = {
+	traceId: 'test-trace-id',
+	startTime: 1679748225000000,
+	endTime: 1679748226000000,
+	hasMissingSpans: false,
+};
+
+const createMockSpan = (spanId: string, level = 1): Span => ({
+	spanId,
+	traceId: 'test-trace-id',
+	rootSpanId: 'span-1',
+	parentSpanId: level === 0 ? '' : 'span-1',
+	name: `Test Span ${spanId}`,
+	serviceName: 'test-service',
+	timestamp: mockTraceMetadata.startTime + level * 100000,
+	durationNano: 50000000,
+	level,
+	hasError: false,
+	kind: 1,
+	references: [],
+	tagMap: {},
+	event: [],
+	rootName: 'Test Root Span',
+	statusMessage: '',
+	statusCodeString: 'OK',
+	spanKind: 'server',
+	hasChildren: false,
+	hasSibling: false,
+	subTreeNodeCount: 1,
+});
+
+const mockSpans = [
+	createMockSpan('span-1', 0),
+	createMockSpan('span-2', 1),
+	createMockSpan('span-3', 1),
+];
+
+// Shared TestComponent for all tests
+function TestComponent(): JSX.Element {
+	const [selectedSpan, setSelectedSpan] = React.useState<Span | undefined>(
+		undefined,
+	);
+
+	return (
+		<Success
+			spans={mockSpans}
+			traceMetadata={mockTraceMetadata}
+			interestedSpanId={{ spanId: '', isUncollapsed: false }}
+			uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+			setInterestedSpanId={jest.fn()}
+			setTraceFlamegraphStatsWidth={jest.fn()}
+			selectedSpan={selectedSpan}
+			setSelectedSpan={setSelectedSpan}
+		/>
+	);
+}
+
+describe('Span Click User Flows', () => {
+	const FIRST_SPAN_TEST_ID = 'cell-0-span-1';
+	const FIRST_SPAN_DURATION_TEST_ID = 'cell-1-span-1';
+	const SECOND_SPAN_TEST_ID = 'cell-0-span-2';
+	const SPAN_OVERVIEW_CLASS = '.span-overview';
+	const SPAN_DURATION_CLASS = '.span-duration';
+	const INTERESTED_SPAN_CLASS = 'interested-span';
+	const SECOND_SPAN_DURATION_TEST_ID = 'cell-1-span-2';
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Clear all URL parameters
+		Array.from(mockUrlQuery.keys()).forEach((key) => mockUrlQuery.delete(key));
+	});
+
+	it('clicking span updates URL with spanId parameter', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(
+			<Success
+				spans={mockSpans}
+				traceMetadata={mockTraceMetadata}
+				interestedSpanId={{ spanId: '', isUncollapsed: false }}
+				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+				setInterestedSpanId={jest.fn()}
+				setTraceFlamegraphStatsWidth={jest.fn()}
+				selectedSpan={undefined}
+				setSelectedSpan={jest.fn()}
+			/>,
+			undefined,
+			{ initialRoute: '/trace' },
+		);
+
+		// Initially URL should not have spanId
+		expect(mockUrlQuery.get('spanId')).toBeNull();
+
+		// Click on the actual span element (not the wrapper)
+		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+		const spanElement = spanOverview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(spanElement);
+
+		// Verify URL was updated with spanId
+		expect(mockUrlQuery.get('spanId')).toBe('span-1');
+		expect(mockSafeNavigate).toHaveBeenCalledWith({
+			search: expect.stringContaining('spanId=span-1'),
+		});
+	});
+
+	it('clicking span duration visually selects the span', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click on span-2 to test selection change
+		const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+		const span2DurationElement = span2Duration.querySelector(
+			SPAN_DURATION_CLASS,
+		) as HTMLElement;
+		await user.click(span2DurationElement);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2DurationElement = span2Duration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('both click areas produce the same visual result', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanOverviewElement = spanOverview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			// Initially both areas should show the same visual selection (first span is auto-selected)
+			expect(spanOverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(spanDurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click span-2 to test selection change
+		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+		const span2Element = span2Overview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(span2Element);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const spanDuration = screen.getByTestId(FIRST_SPAN_DURATION_TEST_ID);
+			const spanOverviewElement = spanOverview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const spanDurationElement = spanDuration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			// Now span-2 should be selected, span-1 should not
+			expect(spanOverviewElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(spanDurationElement).not.toHaveClass(INTERESTED_SPAN_CLASS);
+
+			// Check that span-2 is selected
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Duration = screen.getByTestId(SECOND_SPAN_DURATION_TEST_ID);
+			const span2OverviewElement = span2Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const span2DurationElement = span2Duration.querySelector(
+				SPAN_DURATION_CLASS,
+			) as HTMLElement;
+
+			expect(span2OverviewElement).toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2DurationElement).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('clicking different spans updates selection correctly', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestComponent />, undefined, {
+			initialRoute: '/trace',
+		});
+
+		// Wait for initial render and selection
+		await waitFor(() => {
+			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const span1Element = span1Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			expect(span1Element).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+
+		// Click second span
+		const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+		const span2Element = span2Overview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(span2Element);
+
+		// Wait for the state update and re-render
+		await waitFor(() => {
+			const span1Overview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+			const span1Element = span1Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+			const span2Overview = screen.getByTestId(SECOND_SPAN_TEST_ID);
+			const span2Element = span2Overview.querySelector(
+				SPAN_OVERVIEW_CLASS,
+			) as HTMLElement;
+
+			// Second span should be selected, first should not
+			expect(span1Element).not.toHaveClass(INTERESTED_SPAN_CLASS);
+			expect(span2Element).toHaveClass(INTERESTED_SPAN_CLASS);
+		});
+	});
+
+	it('preserves existing URL parameters when selecting spans', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		// Pre-populate URL with existing parameters
+		mockUrlQuery.set('existingParam', 'existingValue');
+		mockUrlQuery.set('anotherParam', 'anotherValue');
+
+		render(
+			<Success
+				spans={mockSpans}
+				traceMetadata={mockTraceMetadata}
+				interestedSpanId={{ spanId: '', isUncollapsed: false }}
+				uncollapsedNodes={mockSpans.map((s) => s.spanId)}
+				setInterestedSpanId={jest.fn()}
+				setTraceFlamegraphStatsWidth={jest.fn()}
+				selectedSpan={undefined}
+				setSelectedSpan={jest.fn()}
+			/>,
+			undefined,
+			{ initialRoute: '/trace' },
+		);
+
+		// Click on the actual span element (not the wrapper)
+		const spanOverview = screen.getByTestId(FIRST_SPAN_TEST_ID);
+		const spanElement = spanOverview.querySelector(
+			SPAN_OVERVIEW_CLASS,
+		) as HTMLElement;
+		await user.click(spanElement);
+
+		// Verify existing parameters are preserved and spanId is added
+		expect(mockUrlQuery.get('existingParam')).toBe('existingValue');
+		expect(mockUrlQuery.get('anotherParam')).toBe('anotherValue');
+		expect(mockUrlQuery.get('spanId')).toBe('span-1');
+
+		// Verify navigation was called with all parameters
+		expect(mockSafeNavigate).toHaveBeenCalledWith({
+			search: expect.stringMatching(
+				/existingParam=existingValue.*anotherParam=anotherValue.*spanId=span-1/,
+			),
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceWaterfall/constants.ts

@@ -0,0 +1,7 @@
+export enum TraceWaterfallStates {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -1,13 +1,60 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
+import useGetTraceV2 from 'hooks/trace/useGetTraceV2';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Span, TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
 
 import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
 import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
+import TraceWaterfall, {
+	IInterestedSpan,
+} from './TraceWaterfall/TraceWaterfall';
 
 function TraceDetailsV3(): JSX.Element {
+	const { id: traceId } = useParams<TraceDetailV2URLProps>();
+	const urlQuery = useUrlQuery();
+	const [interestedSpanId, setInterestedSpanId] = useState<IInterestedSpan>(
+		() => ({
+			spanId: urlQuery.get('spanId') || '',
+			isUncollapsed: urlQuery.get('spanId') !== '',
+		}),
+	);
+	const [
+		_traceFlamegraphStatsWidth,
+		setTraceFlamegraphStatsWidth,
+	] = useState<number>(450);
+	const [uncollapsedNodes, setUncollapsedNodes] = useState<string[]>([]);
+	const [selectedSpan, setSelectedSpan] = useState<Span>();
+
+	useEffect(() => {
+		setInterestedSpanId({
+			spanId: urlQuery.get('spanId') || '',
+			isUncollapsed: urlQuery.get('spanId') !== '',
+		});
+	}, [urlQuery]);
+
+	const {
+		data: traceData,
+		isFetching: isFetchingTraceData,
+		error: errorFetchingTraceData,
+	} = useGetTraceV2({
+		traceId,
+		uncollapsedSpans: uncollapsedNodes,
+		selectedSpanId: interestedSpanId.spanId,
+		isSelectedSpanIDUnCollapsed: interestedSpanId.isUncollapsed,
+	});
+
+	useEffect(() => {
+		if (traceData && traceData.payload && traceData.payload.uncollapsedSpans) {
+			setUncollapsedNodes(traceData.payload.uncollapsedSpans);
+		}
+	}, [traceData]);
+
 	return (
 		<div
 			style={{
@@ -27,7 +74,18 @@ function TraceDetailsV3(): JSX.Element {
 				</ResizablePanel>
 				<ResizableHandle withHandle />
 				<ResizablePanel defaultSize={60} minSize={20}>
-					<div />
+					<TraceWaterfall
+						traceData={traceData}
+						isFetchingTraceData={isFetchingTraceData}
+						errorFetchingTraceData={errorFetchingTraceData}
+						traceId={traceId || ''}
+						interestedSpanId={interestedSpanId}
+						setInterestedSpanId={setInterestedSpanId}
+						uncollapsedNodes={uncollapsedNodes}
+						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
+						selectedSpan={selectedSpan}
+						setSelectedSpan={setSelectedSpan}
+					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>
 		</div>