feat: add V3 trace API layer and types

- V3 waterfall API (POST /api/v3/traces/:traceId/waterfall)
- V3 types with attributes/resources fields on Span
- useGetTraceV3 hook with react-query
- Flamegraph limit parameter support
- useCopySpanLink switched to @signozhq/sonner toast
- localStorage key for span details panel position

frontend/jest.config.ts

@@ -11,7 +11,6 @@ const config: Config.InitialOptions = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
-		'^@/(.*)$': '<rootDir>/src/$1',
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',

frontend/src/api/trace/getTraceV3.tsx

@@ -0,0 +1,44 @@
+import { ApiV3Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV3PayloadProps,
+	GetTraceV3SuccessResponse,
+} from 'types/api/trace/getTraceV3';
+
+const getTraceV3 = async (
+	props: GetTraceV3PayloadProps,
+): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	}
+	const postData: GetTraceV3PayloadProps = {
+		...props,
+		uncollapsedSpans,
+	};
+	const response = await axios.post<GetTraceV3SuccessResponse>(
+		`/traces/${props.traceId}/waterfall`,
+		omit(postData, 'traceId'),
+	);
+
+	// V3 API wraps response in { status, data }
+	const rawPayload = (response.data as any).data || response.data;
+
+	// Derive serviceName from resources for backward compatibility
+	const spans = (rawPayload.spans || []).map((span: any) => ({
+		...span,
+		serviceName: span.serviceName || span.resources?.['service.name'] || '',
+	}));
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: { ...rawPayload, spans },
+	};
+};
+
+export default getTraceV3;

frontend/src/constants/localStorage.ts

@@ -37,4 +37,5 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
+	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -32,6 +32,7 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
+	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/sonner';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Span } from 'types/api/trace/getTraceV2';
 
@@ -11,7 +11,6 @@ export const useCopySpanLink = (
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
 
 	const onSpanCopy: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
@@ -31,11 +30,12 @@ export const useCopySpanLink = (
 			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
 
 			setCopy(link);
-			notifications.success({
-				message: 'Copied to clipboard',
+			toast.success('Copied to clipboard', {
+				richColors: true,
+				position: 'top-right',
 			});
 		},
-		[span, urlQuery, pathname, setCopy, notifications],
+		[span, urlQuery, pathname, setCopy],
 	);
 
 	return {

frontend/src/hooks/trace/useGetTraceV3.tsx

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

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

@@ -4,7 +4,8 @@ export interface TraceDetailFlamegraphURLProps {
 
 export interface GetTraceFlamegraphPayloadProps {
 	traceId: string;
-	selectedSpanId: string;
+	selectedSpanId?: string;
+	limit?: number;
 }
 
 export interface Event {

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

@@ -37,6 +37,23 @@ export interface Span {
 	hasSibling: boolean;
 	subTreeNodeCount: number;
 	level: number;
+	// V2 API format fields
+	attributes_string?: Record<string, string>;
+	attributes_number?: Record<string, number>;
+	attributes_bool?: Record<string, boolean>;
+	resources_string?: Record<string, string>;
+	// V3 API format fields
+	attributes?: Record<string, string>;
+	resources?: Record<string, string>;
+	http_method?: string;
+	http_url?: string;
+	http_host?: string;
+	db_name?: string;
+	db_operation?: string;
+	external_http_method?: string;
+	external_http_url?: string;
+	response_status_code?: string;
+	is_remote?: string;
 }
 
 export interface GetTraceV2SuccessResponse {

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

@@ -0,0 +1,14 @@
+export interface GetTraceV3PayloadProps {
+	traceId: string;
+	selectedSpanId: string;
+	uncollapsedSpans: string[];
+	isSelectedSpanIDUnCollapsed: boolean;
+}
+
+// Re-export shared types from V2 until V3 response diverges
+export type {
+	Event,
+	GetTraceV2SuccessResponse as GetTraceV3SuccessResponse,
+	Span,
+	TraceDetailV2URLProps as TraceDetailV3URLProps,
+} from './getTraceV2';

frontend/tsconfig.json

@@ -12,11 +12,7 @@
 		"esModuleInterop": true,
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
-		"lib": [
-			"dom",
-			"dom.iterable",
-			"esnext"
-		],
+		"lib": ["dom", "dom.iterable", "esnext"],
 		"allowSyntheticDefaultImports": true,
 		"noFallthroughCasesInSwitch": true,
 		"moduleResolution": "bundler",
@@ -25,15 +21,8 @@
 		"noEmit": true,
 		"baseUrl": "./src",
 		"paths": {
-			"*": [
-				"./*"
-			],
-			"@constants/*": [
-				"./container/OnboardingContainer/constants/*"
-			],
-			"@/*": [
-				"./*"
-			]
+			"*": ["./*"],
+			"@constants/*": ["./container/OnboardingContainer/constants/*"]
 		},
 		"downlevelIteration": true,
 		"plugins": [
@@ -41,18 +30,9 @@
 				"name": "typescript-plugin-css-modules"
 			}
 		],
-		"types": [
-			"vite/client",
-			"node",
-			"jest"
-		]
+		"types": ["vite/client", "node", "jest"]
 	},
-	"exclude": [
-		"node_modules",
-		"src/parser/*.ts",
-		"src/parser/TraceOperatorParser/*.ts",
-		"orval.config.ts"
-	],
+	"exclude": ["node_modules", "src/parser/*.ts", "src/parser/TraceOperatorParser/*.ts", "orval.config.ts"],
 	"include": [
 		"./src",
 		"./src/**/*.ts",

frontend/vite.config.ts

@@ -83,7 +83,6 @@ export default defineConfig(
 			plugins,
 			resolve: {
 				alias: {
-					'@': resolve(__dirname, './src'),
 					utils: resolve(__dirname, './src/utils'),
 					types: resolve(__dirname, './src/types'),
 					constants: resolve(__dirname, './src/constants'),