fix(settings): fire MCP Server page-viewed event reliably on mount

Previously gated the PAGE_VIEWED analytics event on
isGlobalConfigFetched to avoid a double-fire when the async
ingestion_url resolved. Side effect: if /global/config was slow or
errored out, the event never fired. Fire once on mount instead with
hostname-derived region metadata, which is synchronous and reliable.

docs/api/openapi.yml

@@ -4360,146 +4360,6 @@ components:
     TimeDuration:
       format: int64
       type: integer
-    TracedetailtypesEvent:
-      properties:
-        attributeMap:
-          additionalProperties: {}
-          type: object
-        isError:
-          type: boolean
-        name:
-          type: string
-        timeUnixNano:
-          minimum: 0
-          type: integer
-      type: object
-    TracedetailtypesWaterfallRequest:
-      properties:
-        limit:
-          minimum: 0
-          type: integer
-        selectedSpanId:
-          type: string
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallResponse:
-      properties:
-        endTimestampMillis:
-          minimum: 0
-          type: integer
-        hasMissingSpans:
-          type: boolean
-        hasMore:
-          type: boolean
-        rootServiceEntryPoint:
-          type: string
-        rootServiceName:
-          type: string
-        serviceNameToTotalDurationMap:
-          additionalProperties:
-            minimum: 0
-            type: integer
-          nullable: true
-          type: object
-        spans:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesWaterfallSpan'
-          nullable: true
-          type: array
-        startTimestampMillis:
-          minimum: 0
-          type: integer
-        totalErrorSpansCount:
-          minimum: 0
-          type: integer
-        totalSpansCount:
-          minimum: 0
-          type: integer
-        uncollapsedSpans:
-          items:
-            type: string
-          nullable: true
-          type: array
-      type: object
-    TracedetailtypesWaterfallSpan:
-      properties:
-        attributes:
-          additionalProperties: {}
-          nullable: true
-          type: object
-        db_name:
-          type: string
-        db_operation:
-          type: string
-        duration_nano:
-          minimum: 0
-          type: integer
-        events:
-          items:
-            $ref: '#/components/schemas/TracedetailtypesEvent'
-          nullable: true
-          type: array
-        external_http_method:
-          type: string
-        external_http_url:
-          type: string
-        flags:
-          minimum: 0
-          type: integer
-        has_children:
-          type: boolean
-        has_error:
-          type: boolean
-        http_host:
-          type: string
-        http_method:
-          type: string
-        http_url:
-          type: string
-        is_remote:
-          type: string
-        kind:
-          format: int32
-          type: integer
-        kind_string:
-          type: string
-        level:
-          minimum: 0
-          type: integer
-        name:
-          type: string
-        parent_span_id:
-          type: string
-        resource:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        response_status_code:
-          type: string
-        span_id:
-          type: string
-        status_code:
-          type: integer
-        status_code_string:
-          type: string
-        status_message:
-          type: string
-        sub_tree_node_count:
-          minimum: 0
-          type: integer
-        timestamp:
-          minimum: 0
-          type: integer
-        trace_id:
-          type: string
-        trace_state:
-          type: string
-      type: object
     TypesAlertStatus:
       properties:
         inhibitedBy:
@@ -12712,76 +12572,6 @@ paths:
       summary: Put profile in Zeus for a deployment.
       tags:
       - zeus
-  /api/v3/traces/{traceID}/waterfall:
-    post:
-      deprecated: false
-      description: Returns the waterfall view of spans for a given trace ID with tree
-        structure, metadata, and windowed pagination
-      operationId: GetWaterfall
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TracedetailtypesWaterfallRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TracedetailtypesWaterfallResponse'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get waterfall view for a trace
-      tags:
-      - tracedetail
   /api/v5/query_range:
     post:
       deprecated: false

frontend/package.json

@@ -62,11 +62,10 @@
     "@signozhq/popover": "0.1.2",
     "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.6",
     "@signozhq/tabs": "0.0.11",
     "@signozhq/table": "0.3.8",
     "@signozhq/toggle-group": "0.0.3",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -138,12 +137,10 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
-    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
-    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",

frontend/public/locales/en-GB/mcpServer.json

@@ -0,0 +1,52 @@
+{
+	"page_title": "SigNoz MCP Server",
+	"page_subtitle": "Connect AI assistants like Claude, Cursor, VS Code, and Codex to your SigNoz data via the Model Context Protocol. Authenticate from your MCP client with a service-account API key.",
+
+	"fallback_title": "MCP Server is available on SigNoz Cloud",
+	"fallback_body": "This in-product setup guide is for SigNoz Cloud. Self-hosted users can follow the docs to run the MCP server against their instance.",
+	"fallback_docs_link": "View MCP Server docs",
+
+	"region_warning_prefix": "We couldn't detect your Cloud region from this URL. Find it at ",
+	"region_warning_link": "Settings → Ingestion",
+	"region_warning_suffix": " (the label between your workspace name and signoz.cloud in the ingestion URL), then enter it here.",
+	"region_input_label": "SigNoz Cloud region",
+	"region_input_placeholder": "Your SigNoz Cloud region",
+
+	"step1_title": "Configure your client",
+	"step1_description": "Add SigNoz to your MCP client. Use a one-click install where available, or copy the config for manual setup. On first connect, the client will open a SigNoz authorization page — use the instance URL and API key from step 2.",
+	"step1_manual_fallback": "Or copy the config below for manual setup.",
+	"step1_client_docs_suffix": " setup docs",
+	"step1_add_to_client_prefix": "Add to ",
+
+	"client_cursor_install_label": "Add to Cursor",
+	"client_vscode_install_label": "Add to VS Code",
+	"client_claude_desktop_instructions": "Open Claude Desktop, go to Settings → Connectors → Add custom connector, and paste the endpoint URL above. Claude Desktop does not read remote MCP servers from claude_desktop_config.json — the connector UI is the only supported path.",
+	"client_other_instructions": "Most MCP clients that support remote HTTP servers will accept the endpoint URL above. Add it as a new MCP server in your client and paste your SigNoz API key when the client prompts for authentication. See the docs for client-specific instructions.",
+
+	"step2_title": "Authenticate from your client",
+	"step2_description": "On first connect, your client opens a SigNoz authorization page asking for two values:",
+	"step2_instance_url_label": "SigNoz Instance URL",
+	"step2_api_key_label": "API Key",
+	"step2_admin_cta": "Create service account",
+	"step2_admin_helper": "Create a service account, then add a new key inside it — paste that key into the API Key field.",
+	"step2_viewer_helper": "Only admins can create API keys. Ask your workspace admin for a key with read access, then paste it into the API Key field.",
+
+	"use_cases_title": "What you can do with it",
+	"use_cases_item_1": "Ask your AI assistant to investigate a spiking error rate.",
+	"use_cases_item_2": "Debug a slow service by walking through recent traces.",
+	"use_cases_item_3": "Summarize an alert and suggest likely root causes.",
+	"use_cases_item_4": "Generate dashboards or queries from a natural-language description.",
+	"use_cases_docs_link": "See more use cases",
+
+	"copy_tooltip_enabled": "Copy to clipboard",
+	"copy_tooltip_disabled": "Enter your Cloud region first",
+	"copy_aria_endpoint": "Copy MCP endpoint",
+	"copy_aria_instance_url": "Copy SigNoz instance URL",
+	"copy_aria_snippet_prefix": "Copy ",
+	"copy_aria_snippet_suffix": " config",
+
+	"toast_endpoint_copied": "Endpoint copied to clipboard",
+	"toast_snippet_copied": "Snippet copied to clipboard",
+	"toast_instance_url_copied": "Instance URL copied to clipboard",
+	"toast_region_required": "Enter your Cloud region before copying"
+}

frontend/public/locales/en-GB/routes.json

@@ -16,5 +16,6 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"service_accounts": "Service Accounts",
+	"mcp_server": "MCP Server"
 }

frontend/public/locales/en-GB/titles.json

@@ -53,5 +53,6 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
+	"MCP_SERVER": "SigNoz | MCP Server"
 }

frontend/public/locales/en/mcpServer.json

@@ -0,0 +1,52 @@
+{
+	"page_title": "SigNoz MCP Server",
+	"page_subtitle": "Connect AI assistants like Claude, Cursor, VS Code, and Codex to your SigNoz data via the Model Context Protocol. Authenticate from your MCP client with a service-account API key.",
+
+	"fallback_title": "MCP Server is available on SigNoz Cloud",
+	"fallback_body": "This in-product setup guide is for SigNoz Cloud. Self-hosted users can follow the docs to run the MCP server against their instance.",
+	"fallback_docs_link": "View MCP Server docs",
+
+	"region_warning_prefix": "We couldn't detect your Cloud region from this URL. Find it at ",
+	"region_warning_link": "Settings → Ingestion",
+	"region_warning_suffix": " (the label between your workspace name and signoz.cloud in the ingestion URL), then enter it here.",
+	"region_input_label": "SigNoz Cloud region",
+	"region_input_placeholder": "Your SigNoz Cloud region",
+
+	"step1_title": "Configure your client",
+	"step1_description": "Add SigNoz to your MCP client. Use a one-click install where available, or copy the config for manual setup. On first connect, the client will open a SigNoz authorization page — use the instance URL and API key from step 2.",
+	"step1_manual_fallback": "Or copy the config below for manual setup.",
+	"step1_client_docs_suffix": " setup docs",
+	"step1_add_to_client_prefix": "Add to ",
+
+	"client_cursor_install_label": "Add to Cursor",
+	"client_vscode_install_label": "Add to VS Code",
+	"client_claude_desktop_instructions": "Open Claude Desktop, go to Settings → Connectors → Add custom connector, and paste the endpoint URL above. Claude Desktop does not read remote MCP servers from claude_desktop_config.json — the connector UI is the only supported path.",
+	"client_other_instructions": "Most MCP clients that support remote HTTP servers will accept the endpoint URL above. Add it as a new MCP server in your client and paste your SigNoz API key when the client prompts for authentication. See the docs for client-specific instructions.",
+
+	"step2_title": "Authenticate from your client",
+	"step2_description": "On first connect, your client opens a SigNoz authorization page asking for two values:",
+	"step2_instance_url_label": "SigNoz Instance URL",
+	"step2_api_key_label": "API Key",
+	"step2_admin_cta": "Create service account",
+	"step2_admin_helper": "Create a service account, then add a new key inside it — paste that key into the API Key field.",
+	"step2_viewer_helper": "Only admins can create API keys. Ask your workspace admin for a key with read access, then paste it into the API Key field.",
+
+	"use_cases_title": "What you can do with it",
+	"use_cases_item_1": "Ask your AI assistant to investigate a spiking error rate.",
+	"use_cases_item_2": "Debug a slow service by walking through recent traces.",
+	"use_cases_item_3": "Summarize an alert and suggest likely root causes.",
+	"use_cases_item_4": "Generate dashboards or queries from a natural-language description.",
+	"use_cases_docs_link": "See more use cases",
+
+	"copy_tooltip_enabled": "Copy to clipboard",
+	"copy_tooltip_disabled": "Enter your Cloud region first",
+	"copy_aria_endpoint": "Copy MCP endpoint",
+	"copy_aria_instance_url": "Copy SigNoz instance URL",
+	"copy_aria_snippet_prefix": "Copy ",
+	"copy_aria_snippet_suffix": " config",
+
+	"toast_endpoint_copied": "Endpoint copied to clipboard",
+	"toast_snippet_copied": "Snippet copied to clipboard",
+	"toast_instance_url_copied": "Instance URL copied to clipboard",
+	"toast_region_required": "Enter your Cloud region before copying"
+}

frontend/public/locales/en/routes.json

@@ -16,5 +16,6 @@
 	"roles": "Roles",
 	"role_details": "Role Details",
 	"members": "Members",
-	"service_accounts": "Service Accounts"
+	"service_accounts": "Service Accounts",
+	"mcp_server": "MCP Server"
 }

frontend/public/locales/en/titles.json

@@ -76,5 +76,6 @@
 	"METER": "SigNoz | Meter",
 	"ROLES_SETTINGS": "SigNoz | Roles",
 	"MEMBERS_SETTINGS": "SigNoz | Members",
-	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts"
+	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
+	"MCP_SERVER": "SigNoz | MCP Server"
 }

frontend/src/AppRoutes/pageComponents.ts

@@ -65,13 +65,6 @@ export const TraceDetail = Loadable(
 		),
 );
 
-export const TraceDetailV3 = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
-		),
-);
-
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -48,7 +48,6 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
-	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -142,16 +141,9 @@ const routes: AppRoutes[] = [
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
-		component: TraceDetailV3,
-		isPrivate: true,
-		key: 'TRACE_DETAIL',
-	},
-	{
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
 		component: TraceDetail,
 		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
+		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -5332,248 +5332,6 @@ export interface TelemetrytypesTelemetryFieldValuesDTO {
 
 export type TimeDurationDTO = number;
 
-export type TracedetailtypesEventDTOAttributeMap = { [key: string]: unknown };
-
-export interface TracedetailtypesEventDTO {
-	/**
-	 * @type object
-	 */
-	attributeMap?: TracedetailtypesEventDTOAttributeMap;
-	/**
-	 * @type boolean
-	 */
-	isError?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timeUnixNano?: number;
-}
-
-export interface TracedetailtypesWaterfallRequestDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
-	/**
-	 * @type string
-	 */
-	selectedSpanId?: string;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap = {
-	[key: string]: number;
-} | null;
-
-export interface TracedetailtypesWaterfallResponseDTO {
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	endTimestampMillis?: number;
-	/**
-	 * @type boolean
-	 */
-	hasMissingSpans?: boolean;
-	/**
-	 * @type boolean
-	 */
-	hasMore?: boolean;
-	/**
-	 * @type string
-	 */
-	rootServiceEntryPoint?: string;
-	/**
-	 * @type string
-	 */
-	rootServiceName?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	serviceNameToTotalDurationMap?: TracedetailtypesWaterfallResponseDTOServiceNameToTotalDurationMap;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	spans?: TracedetailtypesWaterfallSpanDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	startTimestampMillis?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalErrorSpansCount?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	totalSpansCount?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	uncollapsedSpans?: string[] | null;
-}
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOAttributes = {
-	[key: string]: unknown;
-} | null;
-
-/**
- * @nullable
- */
-export type TracedetailtypesWaterfallSpanDTOResource = {
-	[key: string]: string;
-} | null;
-
-export interface TracedetailtypesWaterfallSpanDTO {
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	attributes?: TracedetailtypesWaterfallSpanDTOAttributes;
-	/**
-	 * @type string
-	 */
-	db_name?: string;
-	/**
-	 * @type string
-	 */
-	db_operation?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	duration_nano?: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	events?: TracedetailtypesEventDTO[] | null;
-	/**
-	 * @type string
-	 */
-	external_http_method?: string;
-	/**
-	 * @type string
-	 */
-	external_http_url?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	flags?: number;
-	/**
-	 * @type boolean
-	 */
-	has_children?: boolean;
-	/**
-	 * @type boolean
-	 */
-	has_error?: boolean;
-	/**
-	 * @type string
-	 */
-	http_host?: string;
-	/**
-	 * @type string
-	 */
-	http_method?: string;
-	/**
-	 * @type string
-	 */
-	http_url?: string;
-	/**
-	 * @type string
-	 */
-	is_remote?: string;
-	/**
-	 * @type integer
-	 * @format int32
-	 */
-	kind?: number;
-	/**
-	 * @type string
-	 */
-	kind_string?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	level?: number;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	parent_span_id?: string;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	resource?: TracedetailtypesWaterfallSpanDTOResource;
-	/**
-	 * @type string
-	 */
-	response_status_code?: string;
-	/**
-	 * @type string
-	 */
-	span_id?: string;
-	/**
-	 * @type integer
-	 */
-	status_code?: number;
-	/**
-	 * @type string
-	 */
-	status_code_string?: string;
-	/**
-	 * @type string
-	 */
-	status_message?: string;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	sub_tree_node_count?: number;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	timestamp?: number;
-	/**
-	 * @type string
-	 */
-	trace_id?: string;
-	/**
-	 * @type string
-	 */
-	trace_state?: string;
-}
-
 export interface TypesAlertStatusDTO {
 	/**
 	 * @type array
@@ -7500,17 +7258,6 @@ export type GetHosts200 = {
 	status: string;
 };
 
-export type GetWaterfallPathParameters = {
-	traceID: string;
-};
-export type GetWaterfall200 = {
-	data: TracedetailtypesWaterfallResponseDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type QueryRangeV5200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

frontend/src/api/generated/services/tracedetail/index.ts

@@ -1,121 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	MutationFunction,
-	UseMutationOptions,
-	UseMutationResult,
-} from 'react-query';
-import { useMutation } from 'react-query';
-
-import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
-import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
-import type {
-	GetWaterfall200,
-	GetWaterfallPathParameters,
-	RenderErrorResponseDTO,
-	TracedetailtypesWaterfallRequestDTO,
-} from '../sigNoz.schemas';
-
-/**
- * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
- * @summary Get waterfall view for a trace
- */
-export const getWaterfall = (
-	{ traceID }: GetWaterfallPathParameters,
-	tracedetailtypesWaterfallRequestDTO: BodyType<TracedetailtypesWaterfallRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetWaterfall200>({
-		url: `/api/v3/traces/${traceID}/waterfall`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: tracedetailtypesWaterfallRequestDTO,
-		signal,
-	});
-};
-
-export const getGetWaterfallMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getWaterfall'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getWaterfall(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetWaterfallMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getWaterfall>>
->;
-export type GetWaterfallMutationBody = BodyType<TracedetailtypesWaterfallRequestDTO>;
-export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get waterfall view for a trace
- */
-export const useGetWaterfall = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data: BodyType<TracedetailtypesWaterfallRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getGetWaterfallMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/trace/getTraceV3.tsx

@@ -1,72 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-	SpanV3,
-} 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,
-		);
-	} else if (
-		props.selectedSpanId &&
-		!uncollapsedSpans.includes(props.selectedSpanId)
-	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
-		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
-		uncollapsedSpans.push(props.selectedSpanId);
-	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-		limit: 10000,
-	};
-	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 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
-		...span,
-		'service.name': span.resource?.['service.name'] || '',
-	}));
-
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
-	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
-	// Convert by using the first span's timestamp as the base if there's a mismatch.
-	let { startTimestampMillis, endTimestampMillis } = rawPayload;
-	if (
-		spans.length > 0 &&
-		spans[0].timestamp > 0 &&
-		startTimestampMillis < spans[0].timestamp / 10
-	) {
-		const durationMillis = endTimestampMillis - startTimestampMillis;
-		startTimestampMillis = spans[0].timestamp;
-		endTimestampMillis = startTimestampMillis + durationMillis;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: {
-			...rawPayload,
-			spans,
-			startTimestampMillis,
-			endTimestampMillis,
-		},
-	};
-};
-
-export default getTraceV3;

frontend/src/auto-import-registry.d.ts

@@ -24,8 +24,7 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
-import '@signozhq/tooltip';
-import '@signozhq/ui';
 import '@signozhq/tabs';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
+import '@signozhq/ui';

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -1,40 +0,0 @@
-.details-header {
-	// ghost + secondary missing hover bg token in @signozhq/button
-	--button-ghost-hover-background: var(--l3-background);
-
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	border-bottom: 1px solid var(--l1-border);
-	height: 36px;
-	background: var(--l2-background);
-
-	&__icon-btn {
-		flex-shrink: 0;
-	}
-
-	&__title {
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&__actions {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -1,59 +0,0 @@
-import { ReactNode } from 'react';
-import { Button } from '@signozhq/button';
-import { X } from '@signozhq/icons';
-
-import './DetailsHeader.styles.scss';
-
-export interface HeaderAction {
-	key: string;
-	component: ReactNode; // check later if we can use direct btn itself or not.
-}
-
-export interface DetailsHeaderProps {
-	title: string;
-	onClose: () => void;
-	actions?: HeaderAction[];
-	closePosition?: 'left' | 'right';
-	className?: string;
-}
-
-function DetailsHeader({
-	title,
-	onClose,
-	actions,
-	closePosition = 'right',
-	className,
-}: DetailsHeaderProps): JSX.Element {
-	const closeButton = (
-		<Button
-			variant="ghost"
-			size="icon"
-			color="secondary"
-			onClick={onClose}
-			aria-label="Close"
-			className="details-header__icon-btn"
-		>
-			<X size={14} />
-		</Button>
-	);
-
-	return (
-		<div className={`details-header ${className || ''}`}>
-			{closePosition === 'left' && closeButton}
-
-			<span className="details-header__title">{title}</span>
-
-			{actions && (
-				<div className="details-header__actions">
-					{actions.map((action) => (
-						<div key={action.key}>{action.component}</div>
-					))}
-				</div>
-			)}
-
-			{closePosition === 'right' && closeButton}
-		</div>
-	);
-}
-
-export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -1,7 +0,0 @@
-.details-panel-drawer {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,36 +0,0 @@
-import { DrawerWrapper } from '@signozhq/drawer';
-
-import './DetailsPanelDrawer.styles.scss';
-
-interface DetailsPanelDrawerProps {
-	isOpen: boolean;
-	onClose: () => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function DetailsPanelDrawer({
-	isOpen,
-	onClose,
-	children,
-	className,
-}: DetailsPanelDrawerProps): JSX.Element {
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			direction="right"
-			type="panel"
-			showOverlay={false}
-			allowOutsideClick
-			className={`details-panel-drawer ${className || ''}`}
-			content={<div className="details-panel-drawer__body">{children}</div>}
-		/>
-	);
-}
-
-export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -1,8 +0,0 @@
-export type {
-	DetailsHeaderProps,
-	HeaderAction,
-} from './DetailsHeader/DetailsHeader';
-export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
-export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
-export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
-export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -1,10 +0,0 @@
-export interface DetailsPanelState {
-	isOpen: boolean;
-	open: () => void;
-	close: () => void;
-}
-
-export interface UseDetailsPanelOptions {
-	entityId: string | undefined;
-	onClose?: () => void;
-}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DetailsPanelState, UseDetailsPanelOptions } from './types';
-
-function useDetailsPanel({
-	entityId,
-	onClose,
-}: UseDetailsPanelOptions): DetailsPanelState {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const prevEntityIdRef = useRef<string>('');
-
-	useEffect(() => {
-		const currentId = entityId || '';
-		if (currentId && currentId !== prevEntityIdRef.current) {
-			setIsOpen(true);
-		}
-		prevEntityIdRef.current = currentId;
-	}, [entityId]);
-
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		onClose?.();
-	}, [onClose]);
-
-	return { isOpen, open, close };
-}
-
-export default useDetailsPanel;

frontend/src/components/LogDetail/index.tsx

@@ -15,6 +15,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -44,7 +45,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { JsonView } from 'periscope/components/JsonView';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -527,9 +527,7 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,20 +0,0 @@
-.timeline-v3-container {
-	overflow: visible;
-	position: relative;
-}
-
-.timeline-v3-cursor-badge {
-	position: absolute;
-	top: 0;
-	transform: translateX(-50%);
-	background: var(--l3-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	padding: 2px 8px;
-	font-size: 11px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 1;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,119 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { resolveTimeFromInterval } from 'components/TimelineV2/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { toFixed } from 'utils/toFixed';
-
-import {
-	getIntervals,
-	getIntervalUnit,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-	/** Cursor X as a fraction of the timeline width (0–1). null = no cursor. */
-	cursorXPercent?: number | null;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-		cursorXPercent,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	const spread = endTimestamp - startTimestamp;
-
-	useEffect(() => {
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const newIntervals = getIntervals(
-			intervalisedSpread,
-			spread,
-			offsetTimestamp,
-		);
-
-		setIntervals(newIntervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp, spread]);
-
-	// Compute cursor time label using the same unit as timeline ticks
-	const cursorLabel = useMemo(() => {
-		if (cursorXPercent == null || spread <= 0) {
-			return null;
-		}
-
-		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
-		const unit = getIntervalUnit(spread, offsetTimestamp);
-		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
-		return `${formatted}${unit.name}`;
-	}, [cursorXPercent, spread, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <div />;
-	}
-
-	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
-	const svgHeight = timelineHeight * 2.5;
-	const cursorX = cursorXPercent != null ? cursorXPercent * width : null;
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={svgHeight}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-
-			{/* Cursor time badge — DOM element for easy CSS styling */}
-			{cursorX !== null && cursorLabel && (
-				<div className="timeline-v3-cursor-badge" style={{ left: cursorX }}>
-					{cursorLabel}
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,109 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/**
- * Select the interval unit matching the timeline's logic.
- * Exported so crosshair labels use the same unit as timeline ticks.
- */
-export function getIntervalUnit(
-	spread: number,
-	offsetTimestamp: number,
-): IIntervalUnit {
-	const minIntervals = 6;
-	const intervalSpread = spread / minIntervals;
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let unit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		if (valueForUnitSelection * INTERVAL_UNITS[idx].multiplier >= 1) {
-			unit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-	return unit;
-}
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-			  10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	// Only show even-interval ticks — skip the trailing partial tick at the edge.
-	// The last even tick sits before the full width, so it doesn't conflict with
-	// span duration labels that may have sub-millisecond precision.
-	let elapsedIntervals = 0;
-
-	while (
-		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
-		intervals.length < 20
-	) {
-		elapsedIntervals += intervalSpreadNormalized;
-		const labelTime = offsetTimestamp + elapsedIntervals;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (elapsedIntervals / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/constants/localStorage.ts

@@ -37,6 +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',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -32,7 +32,6 @@ 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/constants/routes.ts

@@ -8,7 +8,6 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
-	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',
@@ -88,6 +87,7 @@ const ROUTES = {
 	HOME_PAGE: '/',
 	PUBLIC_DASHBOARD: '/public/dashboard/:dashboardId',
 	SERVICE_ACCOUNTS_SETTINGS: '/settings/service-accounts',
+	MCP_SERVER: '/settings/mcp-server',
 } as const;
 
 export default ROUTES;

frontend/src/constants/theme.ts

@@ -33,102 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		blue1: '#2F80ED',
-		blue2: '#3366E6',
-		blue3: '#4682B4',
-		blue4: '#1F63E0',
-		blue5: '#3A7AED',
-		blue6: '#5A9DF5',
-		blue7: '#2874A6',
-		blue8: '#2E86C1',
-		blue9: '#3498DB',
-		blue10: '#1E90FF',
-		blue11: '#4169E1',
-
-		// Cyans / Teals
-		cyan1: '#00CEC9',
-		cyan2: '#22A6F2',
-		cyan3: '#00B0AA',
-		cyan4: '#33D6C2',
-		cyan5: '#66E9DA',
-		cyan6: '#48DBFB',
-		cyan7: '#00BFFF',
-		cyan8: '#63B8FF',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#76D7C4',
-		teal5: '#20B2AA',
-
-		// Greens
-		green1: '#27AE60',
-		green2: '#3CB371',
-		green3: '#1E8449',
-		green4: '#2ECC71',
-		green5: '#58D68D',
-		green6: '#229954',
-		green7: '#52BE80',
-		green8: '#82E0AA',
-		green9: '#73C6B6',
-
-		// Limes
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#84CC16',
-		lime4: '#65A30D',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		yellow4: '#F4D03F',
-		yellow5: '#D4AC0D',
-
-		// Golds / Ambers
-		gold1: '#F2C94C',
-		gold2: '#FFD93D',
-		gold3: '#FFCA28',
-		gold4: '#B7950B',
-		gold5: '#D4A017',
-
-		// Oranges (non-red)
-		orange1: '#F39C12',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		orange4: '#D35400',
-		orange5: '#EB984E',
-		orange6: '#FAD7A0',
-
-		// Purples / Violets
-		purple1: '#BB6BD9',
-		purple2: '#9B51E0',
-		purple3: '#DA77F2',
-		purple4: '#C77DFF',
-		purple5: '#6C5CE7',
-		purple6: '#8E44AD',
-		purple7: '#9B59B6',
-		purple8: '#BB8FCE',
-		purple9: '#7D3C98',
-		purple10: '#A569BD',
-
-		// Lavenders
-		lavender1: '#AF7AC5',
-		lavender2: '#C39BD3',
-		lavender3: '#D2B4DE',
-
-		// Pinks / Magentas
-		pink1: '#E91E8C',
-		pink2: '#FF6FD8',
-		pink3: '#F06292',
-		pink4: '#CE93D8',
-
-		// Salmons / Corals (distinct from error red)
-		salmon1: '#FF8A65',
-		salmon2: '#FFAB91',
-		salmon3: '#E0876A',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -123,7 +123,6 @@
 				&__row {
 					display: flex;
 					flex-direction: row;
-					flex-wrap: wrap;
 					align-items: flex-end;
 					max-width: 825px;
 					gap: 25px;

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.styles.scss

@@ -11,12 +11,6 @@
 	}
 }
 
-.infra-metrics-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-	gap: 24px;
-}
-
 .infra-metrics-card {
 	margin: 1rem 0;
 	height: 300px;

frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -163,16 +163,16 @@ function NodeMetrics({
 		);
 	};
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={widgetInfo[idx].title}>
+				<Col span={12} key={widgetInfo[idx].title}>
 					<Typography.Text>{widgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { useQueries, UseQueryResult } from 'react-query';
-import { Card, Skeleton, Typography } from 'antd';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import Uplot from 'components/Uplot';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -146,16 +146,16 @@ function PodMetrics({
 	};
 
 	return (
-		<div className="infra-metrics-grid">
+		<Row gutter={24}>
 			{queries.map((query, idx) => (
-				<div key={podWidgetInfo[idx].title}>
+				<Col span={12} key={podWidgetInfo[idx].title}>
 					<Typography.Text>{podWidgetInfo[idx].title}</Typography.Text>
 					<Card bordered className="infra-metrics-card" ref={graphRef}>
 						{renderCardContent(query, idx)}
 					</Card>
-				</div>
+				</Col>
 			))}
-		</div>
+		</Row>
 	);
 }
 

frontend/src/container/MCPServerSettings/MCPServerSettings.styles.scss

@@ -0,0 +1,246 @@
+.mcp-settings {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	padding: 1.5rem;
+	max-width: 55rem;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+
+		&-title {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			font-size: 1.125rem;
+			font-weight: 600;
+			color: var(--l0-foreground);
+		}
+
+		&-subtitle {
+			font-size: 0.8125rem;
+			font-weight: 400;
+			color: var(--l2-foreground);
+			line-height: 1.25rem;
+		}
+	}
+
+	&__card {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		padding: 1.25rem;
+		border: 0.0625rem solid var(--l3-background);
+		border-radius: 0.5rem;
+		background: var(--l1-background);
+	}
+
+	&__card-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--l0-foreground);
+	}
+
+	&__step-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.375rem;
+		height: 1.375rem;
+		border-radius: 50%;
+		background: var(--bg-robin-400);
+		color: var(--l0-background);
+		font-size: 0.75rem;
+		font-weight: 600;
+		flex-shrink: 0;
+	}
+
+	&__card-description {
+		font-size: 0.8125rem;
+		color: var(--l2-foreground);
+		line-height: 1.25rem;
+	}
+
+	&__endpoint-row {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-wrap: wrap;
+	}
+
+	&__endpoint-field {
+		flex: 1;
+		min-width: 20rem;
+	}
+
+	&__endpoint-value {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		border: 0.0625rem solid var(--l3-background);
+		border-radius: 0.375rem;
+		background: var(--l2-background);
+		font-family: var(--font-family-monospace, monospace);
+		font-size: 0.8125rem;
+		color: var(--l0-foreground);
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	&__copy-btn {
+		cursor: pointer;
+		color: var(--l2-foreground);
+
+		&:hover {
+			color: var(--bg-robin-400);
+		}
+	}
+
+	&__region-warning {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		border: 0.0625rem solid var(--bg-amber-500);
+		border-radius: 0.375rem;
+		background: var(--bg-amber-500-a10, rgba(255, 193, 7, 0.08));
+		font-size: 0.75rem;
+		color: var(--l2-foreground);
+		line-height: 1.125rem;
+
+		svg {
+			flex-shrink: 0;
+			color: var(--bg-amber-500);
+			margin-top: 0.125rem;
+		}
+	}
+
+	&__region-card,
+	&__cta-card {
+		padding: 1rem 1.25rem;
+		gap: 0.75rem;
+	}
+
+	&__auth-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	&__auth-field-label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--l2-foreground);
+		letter-spacing: 0.01em;
+	}
+
+	&__info-banner-inline {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.5rem;
+		padding: 0.625rem 0.75rem;
+		border-left: 0.1875rem solid var(--bg-robin-400);
+		background: var(--l2-background);
+		border-radius: 0.25rem;
+
+		svg {
+			flex-shrink: 0;
+			color: var(--bg-robin-400);
+			margin-top: 0.125rem;
+		}
+	}
+
+	&__endpoint-input {
+		margin-top: 0.5rem;
+		font-family: var(--font-family-monospace, monospace);
+	}
+
+	&__cta-row {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-wrap: wrap;
+	}
+
+	&__helper-text {
+		font-size: 0.75rem;
+		color: var(--l2-foreground);
+		line-height: 1.125rem;
+	}
+
+	&__tabs-container {
+		.ant-tabs-nav {
+			margin-bottom: 0.75rem;
+		}
+	}
+
+	&__snippet-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	&__install-row {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-wrap: wrap;
+		margin-bottom: 0.25rem;
+	}
+
+	&__snippet-pre {
+		margin: 0;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+
+	&__use-cases {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+
+		&-list {
+			display: flex;
+			flex-direction: column;
+			gap: 0.375rem;
+
+			li {
+				font-size: 0.8125rem;
+				color: var(--l1-foreground);
+				line-height: 1.25rem;
+			}
+		}
+	}
+
+	&__fallback {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1.5rem;
+		border: 0.0625rem dashed var(--l3-background);
+		border-radius: 0.5rem;
+		background: var(--l1-background);
+		max-width: 40rem;
+
+		&-title {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			font-size: 0.9375rem;
+			font-weight: 600;
+			color: var(--l0-foreground);
+		}
+
+		&-body {
+			font-size: 0.8125rem;
+			color: var(--l2-foreground);
+			line-height: 1.25rem;
+		}
+	}
+}

frontend/src/container/MCPServerSettings/MCPServerSettings.tsx

@@ -0,0 +1,536 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
+import { useCopyToClipboard } from 'react-use';
+import { Button, Input, Tabs, Tooltip, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import LearnMore from 'components/LearnMore/LearnMore';
+import ROUTES from 'constants/routes';
+import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
+import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import {
+	Copy,
+	Download,
+	Info,
+	KeyRound,
+	Sparkles,
+	TriangleAlert,
+} from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import { USER_ROLES } from 'types/roles';
+
+import {
+	docsUrl,
+	MCP_CLIENTS,
+	MCP_DOCS_URL,
+	MCP_USE_CASES_URL,
+	McpClient,
+} from './clients';
+import {
+	buildMcpEndpoint,
+	getCloudRegion,
+	normalizeRegion,
+	parseRegionFromUrl,
+} from './getCloudRegion';
+
+import './MCPServerSettings.styles.scss';
+
+const ANALYTICS = {
+	PAGE_VIEWED: 'MCP Settings: Page viewed',
+	CREATE_SA_CLICKED: 'MCP Settings: Create service account clicked',
+	CLIENT_TAB_SELECTED: 'MCP Settings: Client tab selected',
+	SNIPPET_COPIED: 'MCP Settings: Client snippet copied',
+	ONE_CLICK_INSTALL_CLICKED: 'MCP Settings: One-click install clicked',
+	INSTANCE_URL_COPIED: 'MCP Settings: Instance URL copied',
+	DOCS_LINK_CLICKED: 'MCP Settings: Docs link clicked',
+} as const;
+
+const ENDPOINT_PLACEHOLDER = 'https://mcp.<region>.signoz.cloud/mcp';
+
+function NotCloudFallback(): JSX.Element {
+	const { t } = useTranslation('mcpServer');
+	const onClick = useCallback(() => {
+		logEvent(ANALYTICS.DOCS_LINK_CLICKED, { target: 'fallback' });
+	}, []);
+	return (
+		<div className="mcp-settings">
+			<div className="mcp-settings__fallback">
+				<div className="mcp-settings__fallback-title">
+					<Sparkles size={18} /> {t('fallback_title')}
+				</div>
+				<Typography.Text className="mcp-settings__fallback-body">
+					{t('fallback_body')}
+				</Typography.Text>
+				<LearnMore
+					text={t('fallback_docs_link')}
+					url={MCP_DOCS_URL}
+					onClick={onClick}
+				/>
+			</div>
+		</div>
+	);
+}
+
+interface CopyIconButtonProps {
+	ariaLabel: string;
+	onCopy: () => void;
+	disabled?: boolean;
+}
+
+function CopyIconButton({
+	ariaLabel,
+	onCopy,
+	disabled,
+}: CopyIconButtonProps): JSX.Element {
+	const { t } = useTranslation('mcpServer');
+	const tooltipTitle = disabled
+		? t('copy_tooltip_disabled')
+		: t('copy_tooltip_enabled');
+	const button = (
+		<Button
+			type="text"
+			size="small"
+			aria-label={ariaLabel}
+			disabled={disabled}
+			className="mcp-settings__copy-btn"
+			icon={<Copy size={14} />}
+			onClick={onCopy}
+		/>
+	);
+	// Ant Design Tooltip doesn't reliably surface for a disabled Button —
+	// wrap in a span so hover/focus still reaches the Tooltip.
+	return (
+		<Tooltip title={tooltipTitle}>
+			{disabled ? <span>{button}</span> : button}
+		</Tooltip>
+	);
+}
+
+CopyIconButton.defaultProps = {
+	disabled: false,
+};
+
+interface RegionFallbackCardProps {
+	manualRegion: string;
+	onRegionChange: (value: string) => void;
+	onIngestionLinkClick: () => void;
+	t: TFunction<'mcpServer'>;
+}
+
+function RegionFallbackCard({
+	manualRegion,
+	onRegionChange,
+	onIngestionLinkClick,
+	t,
+}: RegionFallbackCardProps): JSX.Element {
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => onRegionChange(e.target.value),
+		[onRegionChange],
+	);
+	return (
+		<div className="mcp-settings__card mcp-settings__region-card">
+			<div className="mcp-settings__region-warning">
+				<TriangleAlert size={14} />
+				<span>
+					{t('region_warning_prefix')}
+					<Button
+						type="link"
+						size="small"
+						className="mcp-settings__inline-link"
+						onClick={onIngestionLinkClick}
+					>
+						{t('region_warning_link')}
+					</Button>
+					{t('region_warning_suffix')}
+				</span>
+			</div>
+			<label
+				className="mcp-settings__auth-field-label"
+				htmlFor="mcp-settings-manual-region"
+			>
+				{t('region_input_label')}
+			</label>
+			<Input
+				id="mcp-settings-manual-region"
+				className="mcp-settings__endpoint-input"
+				size="small"
+				value={manualRegion}
+				placeholder={t('region_input_placeholder')}
+				aria-label={t('region_input_label')}
+				onChange={handleChange}
+			/>
+		</div>
+	);
+}
+
+interface ClientTabsProps {
+	endpoint: string;
+	activeTab: string;
+	onTabChange: (key: string) => void;
+	onCopySnippet: (clientKey: string, snippet: string) => void;
+	onInstallClick: (clientKey: string) => void;
+	onDocsLinkClick: (target: string) => void;
+	t: TFunction<'mcpServer'>;
+}
+
+interface ClientTabChildrenProps {
+	client: McpClient;
+	endpoint: string;
+	onCopySnippet: (clientKey: string, snippet: string) => void;
+	onInstallClick: (clientKey: string) => void;
+	onDocsLinkClick: (target: string) => void;
+	t: TFunction<'mcpServer'>;
+}
+
+function ClientTabChildren({
+	client,
+	endpoint,
+	onCopySnippet,
+	onInstallClick,
+	onDocsLinkClick,
+	t,
+}: ClientTabChildrenProps): JSX.Element {
+	const snippet = client.snippet
+		? client.snippet(endpoint || ENDPOINT_PLACEHOLDER)
+		: null;
+	const installHref =
+		client.installUrl && endpoint ? client.installUrl(endpoint) : null;
+
+	const handleInstallClick = useCallback(() => onInstallClick(client.key), [
+		onInstallClick,
+		client.key,
+	]);
+	const handleDocsClick = useCallback(
+		() => onDocsLinkClick(`client-${client.key}`),
+		[onDocsLinkClick, client.key],
+	);
+	const handleSnippetCopy = useCallback(() => {
+		if (snippet) {
+			onCopySnippet(client.key, snippet);
+		}
+	}, [onCopySnippet, client.key, snippet]);
+
+	const installLabel = client.installLabelKey
+		? t(client.installLabelKey)
+		: `${t('step1_add_to_client_prefix')}${client.label}`;
+	const instructions = client.instructionsKey ? t(client.instructionsKey) : '';
+
+	return (
+		<div className="mcp-settings__snippet-wrapper">
+			{client.installUrl && (
+				<div className="mcp-settings__install-row">
+					<Button
+						type="primary"
+						disabled={!installHref}
+						icon={<Download size={14} />}
+						href={installHref ?? undefined}
+						onClick={handleInstallClick}
+					>
+						{installLabel}
+					</Button>
+					<Typography.Text className="mcp-settings__helper-text">
+						{t('step1_manual_fallback')}
+					</Typography.Text>
+				</div>
+			)}
+			{snippet !== null ? (
+				<div className="mcp-settings__endpoint-value mcp-settings__snippet">
+					<pre className="mcp-settings__snippet-pre">{snippet}</pre>
+					<CopyIconButton
+						ariaLabel={`${t('copy_aria_snippet_prefix')}${client.label}${t(
+							'copy_aria_snippet_suffix',
+						)}`}
+						disabled={!endpoint}
+						onCopy={handleSnippetCopy}
+					/>
+				</div>
+			) : (
+				<Typography.Text className="mcp-settings__card-description">
+					{instructions}
+				</Typography.Text>
+			)}
+			<LearnMore
+				text={`${client.label}${t('step1_client_docs_suffix')}`}
+				url={docsUrl(client.docsPath)}
+				onClick={handleDocsClick}
+			/>
+		</div>
+	);
+}
+
+function ClientTabs({
+	endpoint,
+	activeTab,
+	onTabChange,
+	onCopySnippet,
+	onInstallClick,
+	onDocsLinkClick,
+	t,
+}: ClientTabsProps): JSX.Element {
+	const items = useMemo(
+		() =>
+			MCP_CLIENTS.map((client: McpClient) => ({
+				key: client.key,
+				label: client.label,
+				children: (
+					<ClientTabChildren
+						client={client}
+						endpoint={endpoint}
+						onCopySnippet={onCopySnippet}
+						onInstallClick={onInstallClick}
+						onDocsLinkClick={onDocsLinkClick}
+						t={t}
+					/>
+				),
+			})),
+		[endpoint, onCopySnippet, onInstallClick, onDocsLinkClick, t],
+	);
+
+	return (
+		<Tabs
+			className="mcp-settings__tabs-container"
+			activeKey={activeTab}
+			onChange={onTabChange}
+			items={items}
+		/>
+	);
+}
+
+interface AuthCardProps {
+	isAdmin: boolean;
+	instanceUrl: string;
+	onCopyInstanceUrl: () => void;
+	onCreateServiceAccount: () => void;
+	t: TFunction<'mcpServer'>;
+}
+
+function AuthCard({
+	isAdmin,
+	instanceUrl,
+	onCopyInstanceUrl,
+	onCreateServiceAccount,
+	t,
+}: AuthCardProps): JSX.Element {
+	return (
+		<section className="mcp-settings__card mcp-settings__cta-card">
+			<h3 className="mcp-settings__card-title">
+				<span className="mcp-settings__step-badge">2</span> {t('step2_title')}
+			</h3>
+			<Typography.Text className="mcp-settings__card-description">
+				{t('step2_description')}
+			</Typography.Text>
+			<div className="mcp-settings__auth-field">
+				<Typography.Text className="mcp-settings__auth-field-label">
+					{t('step2_instance_url_label')}
+				</Typography.Text>
+				<div className="mcp-settings__endpoint-value">
+					<span data-testid="mcp-instance-url">{instanceUrl}</span>
+					<CopyIconButton
+						ariaLabel={t('copy_aria_instance_url')}
+						onCopy={onCopyInstanceUrl}
+					/>
+				</div>
+			</div>
+			<div className="mcp-settings__auth-field">
+				<Typography.Text className="mcp-settings__auth-field-label">
+					{t('step2_api_key_label')}
+				</Typography.Text>
+				{isAdmin ? (
+					<div className="mcp-settings__cta-row">
+						<Button
+							type="primary"
+							icon={<KeyRound size={14} />}
+							onClick={onCreateServiceAccount}
+						>
+							{t('step2_admin_cta')}
+						</Button>
+						<Typography.Text className="mcp-settings__helper-text">
+							{t('step2_admin_helper')}
+						</Typography.Text>
+					</div>
+				) : (
+					<div className="mcp-settings__info-banner-inline">
+						<Info size={14} />
+						<Typography.Text className="mcp-settings__helper-text">
+							{t('step2_viewer_helper')}
+						</Typography.Text>
+					</div>
+				)}
+			</div>
+		</section>
+	);
+}
+
+interface UseCasesCardProps {
+	onDocsLinkClick: (target: string) => void;
+	t: TFunction<'mcpServer'>;
+}
+
+function UseCasesCard({ onDocsLinkClick, t }: UseCasesCardProps): JSX.Element {
+	const handleClick = useCallback(() => onDocsLinkClick('use-cases'), [
+		onDocsLinkClick,
+	]);
+	return (
+		<section className="mcp-settings__card mcp-settings__use-cases">
+			<h3 className="mcp-settings__card-title">{t('use_cases_title')}</h3>
+			<ul className="mcp-settings__use-cases-list">
+				<li>{t('use_cases_item_1')}</li>
+				<li>{t('use_cases_item_2')}</li>
+				<li>{t('use_cases_item_3')}</li>
+				<li>{t('use_cases_item_4')}</li>
+			</ul>
+			<LearnMore
+				text={t('use_cases_docs_link')}
+				url={MCP_USE_CASES_URL}
+				onClick={handleClick}
+			/>
+		</section>
+	);
+}
+
+function MCPServerSettings(): JSX.Element {
+	const { t } = useTranslation('mcpServer');
+	const { user } = useAppContext();
+	const { isCloudUser } = useGetTenantLicense();
+	const { notifications } = useNotifications();
+	const [, copyToClipboard] = useCopyToClipboard();
+
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+	const instanceUrl = window.location.origin;
+
+	const { data: globalConfig } = useGetGlobalConfig();
+	const regionFromHost = useMemo(() => getCloudRegion(), []);
+	const regionFromIngestion = useMemo(
+		() =>
+			globalConfig?.data?.ingestion_url
+				? parseRegionFromUrl(globalConfig.data.ingestion_url)
+				: null,
+		[globalConfig?.data?.ingestion_url],
+	);
+
+	const autoDetectedRegion = regionFromHost.region ?? regionFromIngestion;
+
+	const [manualRegion, setManualRegion] = useState<string>('');
+	const [activeTab, setActiveTab] = useState<string>(MCP_CLIENTS[0]?.key ?? '');
+
+	const resolvedRegion: string | null =
+		autoDetectedRegion ?? normalizeRegion(manualRegion);
+
+	const endpoint = resolvedRegion ? buildMcpEndpoint(resolvedRegion) : '';
+
+	// Fire once on mount so we reliably capture every visit, even if the
+	// globalConfig fetch is slow or fails. Region is best-effort from the
+	// hostname at mount time; if ingestion_url resolves later we skip logging
+	// again to avoid double-fires.
+	useEffect(() => {
+		logEvent(ANALYTICS.PAGE_VIEWED, {
+			isCloudUser,
+			role: user.role,
+			region: regionFromHost.region,
+			isAutoDetected: Boolean(regionFromHost.region),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleCopySnippet = useCallback(
+		(clientKey: string, snippet: string) => {
+			if (!endpoint) {
+				notifications.warning({ message: t('toast_region_required') });
+				return;
+			}
+			copyToClipboard(snippet);
+			notifications.success({ message: t('toast_snippet_copied') });
+			logEvent(ANALYTICS.SNIPPET_COPIED, { client: clientKey });
+		},
+		[endpoint, copyToClipboard, notifications, t],
+	);
+
+	const handleCreateServiceAccount = useCallback(() => {
+		logEvent(ANALYTICS.CREATE_SA_CLICKED, {});
+		history.push(
+			`${ROUTES.SERVICE_ACCOUNTS_SETTINGS}?${SA_QUERY_PARAMS.CREATE_SA}=true`,
+		);
+	}, []);
+
+	const handleCopyInstanceUrl = useCallback(() => {
+		copyToClipboard(instanceUrl);
+		notifications.success({ message: t('toast_instance_url_copied') });
+		logEvent(ANALYTICS.INSTANCE_URL_COPIED, {});
+	}, [copyToClipboard, instanceUrl, notifications, t]);
+
+	const handleDocsLinkClick = useCallback((target: string) => {
+		logEvent(ANALYTICS.DOCS_LINK_CLICKED, { target });
+	}, []);
+
+	const handleIngestionLinkClick = useCallback(() => {
+		logEvent(ANALYTICS.DOCS_LINK_CLICKED, { target: 'ingestion-settings' });
+		history.push(ROUTES.INGESTION_SETTINGS);
+	}, []);
+
+	const handleInstallClick = useCallback((clientKey: string) => {
+		logEvent(ANALYTICS.ONE_CLICK_INSTALL_CLICKED, { client: clientKey });
+	}, []);
+
+	const handleTabChange = useCallback((key: string) => {
+		setActiveTab(key);
+		logEvent(ANALYTICS.CLIENT_TAB_SELECTED, { client: key });
+	}, []);
+
+	if (!isCloudUser) {
+		return <NotCloudFallback />;
+	}
+
+	return (
+		<div className="mcp-settings" data-testid="mcp-settings">
+			<header className="mcp-settings__header">
+				<h2 className="mcp-settings__header-title">
+					<Sparkles size={20} /> {t('page_title')}
+				</h2>
+				<Typography.Text className="mcp-settings__header-subtitle">
+					{t('page_subtitle')}
+				</Typography.Text>
+			</header>
+
+			{!autoDetectedRegion && (
+				<RegionFallbackCard
+					manualRegion={manualRegion}
+					onRegionChange={setManualRegion}
+					onIngestionLinkClick={handleIngestionLinkClick}
+					t={t}
+				/>
+			)}
+
+			<section className="mcp-settings__card">
+				<h3 className="mcp-settings__card-title">
+					<span className="mcp-settings__step-badge">1</span> {t('step1_title')}
+				</h3>
+				<Typography.Text className="mcp-settings__card-description">
+					{t('step1_description')}
+				</Typography.Text>
+				<ClientTabs
+					endpoint={endpoint}
+					activeTab={activeTab}
+					onTabChange={handleTabChange}
+					onCopySnippet={handleCopySnippet}
+					onInstallClick={handleInstallClick}
+					onDocsLinkClick={handleDocsLinkClick}
+					t={t}
+				/>
+			</section>
+
+			<AuthCard
+				isAdmin={isAdmin}
+				instanceUrl={instanceUrl}
+				onCopyInstanceUrl={handleCopyInstanceUrl}
+				onCreateServiceAccount={handleCreateServiceAccount}
+				t={t}
+			/>
+
+			<UseCasesCard onDocsLinkClick={handleDocsLinkClick} t={t} />
+		</div>
+	);
+}
+
+export default MCPServerSettings;

frontend/src/container/MCPServerSettings/clients.ts

@@ -0,0 +1,111 @@
+import { DOCS_BASE_URL } from 'constants/app';
+
+export interface McpClient {
+	key: string;
+	// `label` is the client brand name (Cursor, VS Code, Claude Desktop …).
+	// Brand names are not translated.
+	label: string;
+	docsPath: string;
+	snippet: ((endpoint: string) => string) | null;
+	// i18n key under the `mcpServer` namespace. Resolved at render time via t().
+	instructionsKey?: string;
+	installUrl?: (endpoint: string) => string;
+	// i18n key for the install button label. Falls back to
+	// `step1_add_to_client_prefix` + `label` when not set.
+	installLabelKey?: string;
+}
+
+function b64url(input: string): string {
+	if (typeof btoa === 'function') {
+		return btoa(input);
+	}
+	// fallback for non-browser TS contexts (never hit at runtime)
+	return Buffer.from(input, 'utf8').toString('base64');
+}
+
+export const MCP_CLIENTS: McpClient[] = [
+	{
+		key: 'cursor',
+		label: 'Cursor',
+		docsPath: '/docs/ai/signoz-mcp-server/#cursor',
+		snippet: (endpoint): string =>
+			JSON.stringify(
+				{
+					mcpServers: {
+						signoz: {
+							url: endpoint,
+						},
+					},
+				},
+				null,
+				2,
+			),
+		installUrl: (endpoint): string => {
+			const config = b64url(JSON.stringify({ url: endpoint }));
+			return `cursor://anysphere.cursor-deeplink/mcp/install?name=SigNoz&config=${config}`;
+		},
+		installLabelKey: 'client_cursor_install_label',
+	},
+	{
+		key: 'vscode',
+		label: 'VS Code',
+		docsPath: '/docs/ai/signoz-mcp-server/#vs-code',
+		snippet: (endpoint): string =>
+			JSON.stringify(
+				{
+					servers: {
+						signoz: {
+							type: 'http',
+							url: endpoint,
+						},
+					},
+				},
+				null,
+				2,
+			),
+		installUrl: (endpoint): string => {
+			const payload = encodeURIComponent(
+				JSON.stringify({
+					name: 'signoz',
+					config: { type: 'http', url: endpoint },
+				}),
+			);
+			return `vscode:mcp/install?${payload}`;
+		},
+		installLabelKey: 'client_vscode_install_label',
+	},
+	{
+		key: 'claude-desktop',
+		label: 'Claude Desktop',
+		docsPath: '/docs/ai/signoz-mcp-server/#claude-desktop',
+		snippet: null,
+		instructionsKey: 'client_claude_desktop_instructions',
+	},
+	{
+		key: 'claude-code',
+		label: 'Claude Code',
+		docsPath: '/docs/ai/signoz-mcp-server/#claude-code',
+		snippet: (endpoint): string =>
+			`claude mcp add --scope user --transport http signoz ${endpoint}`,
+	},
+	{
+		key: 'codex',
+		label: 'Codex',
+		docsPath: '/docs/ai/signoz-mcp-server/#codex',
+		snippet: (endpoint): string => `codex mcp add signoz --url ${endpoint}`,
+	},
+	{
+		key: 'other',
+		label: 'Other',
+		docsPath: '/docs/ai/signoz-mcp-server/',
+		snippet: null,
+		instructionsKey: 'client_other_instructions',
+	},
+];
+
+export function docsUrl(path: string): string {
+	return `${DOCS_BASE_URL}${path}`;
+}
+
+export const MCP_DOCS_URL = `${DOCS_BASE_URL}/docs/ai/signoz-mcp-server/`;
+export const MCP_USE_CASES_URL = `${DOCS_BASE_URL}/docs/ai/use-cases/`;

frontend/src/container/MCPServerSettings/getCloudRegion.ts

@@ -0,0 +1,51 @@
+export interface CloudRegionResult {
+	region: string | null;
+	isKnown: boolean;
+}
+
+const VALID_REGION_LABEL = /^[a-z0-9][a-z0-9-]*$/;
+
+export function parseRegionFromSignozCloudHost(host: string): string | null {
+	const parts = host.split('.');
+	const len = parts.length;
+	// SigNoz Cloud tenant hosts follow `<tenant>.<region>.signoz.cloud`
+	// (4 labels). 3-label hosts like `app.signoz.cloud` would wrongly
+	// resolve to region=`app`, so require at least 4 labels.
+	if (len < 4 || parts[len - 1] !== 'cloud' || parts[len - 2] !== 'signoz') {
+		return null;
+	}
+	const region = parts[len - 3]?.toLowerCase() ?? '';
+	if (!VALID_REGION_LABEL.test(region)) {
+		return null;
+	}
+	return region;
+}
+
+export function parseRegionFromUrl(url: string): string | null {
+	try {
+		return parseRegionFromSignozCloudHost(new URL(url).hostname);
+	} catch {
+		return null;
+	}
+}
+
+export function parseCloudRegion(hostname: string): CloudRegionResult {
+	const region = parseRegionFromSignozCloudHost(hostname);
+	return region ? { region, isKnown: true } : { region: null, isKnown: false };
+}
+
+export function normalizeRegion(input: string): string | null {
+	const value = input.trim().toLowerCase();
+	if (!VALID_REGION_LABEL.test(value)) {
+		return null;
+	}
+	return value;
+}
+
+export function buildMcpEndpoint(region: string): string {
+	return `https://mcp.${region}.signoz.cloud/mcp`;
+}
+
+export function getCloudRegion(): CloudRegionResult {
+	return parseCloudRegion(window.location.hostname);
+}

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -192,7 +192,8 @@ const onboardingConfigWithLinks = [
 			'setup',
 		],
 		imgUrl: signozBrandLogoUrl,
-		link: '/docs/ai/signoz-mcp-server/',
+		link: '/settings/mcp-server',
+		internalRedirect: true,
 	},
 	{
 		dataSource: 'migrate-from-datadog',

frontend/src/container/SideNav/config.ts

@@ -46,7 +46,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACES_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE]: [QueryParams.resourceAttributes],
 	[ROUTES.TRACE_DETAIL]: [QueryParams.resourceAttributes],
-	[ROUTES.TRACE_DETAIL_OLD]: [QueryParams.resourceAttributes],
 	[ROUTES.UN_AUTHORIZED]: [QueryParams.resourceAttributes],
 	[ROUTES.USAGE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.VERSION]: [QueryParams.resourceAttributes],

frontend/src/container/SideNav/menuItems.tsx

@@ -32,6 +32,7 @@ import {
 	Settings,
 	Shield,
 	Slack,
+	Sparkles,
 	Unplug,
 	User,
 	UserPlus,
@@ -337,6 +338,13 @@ export const settingsNavSections: SettingsNavSection[] = [
 				isEnabled: false,
 				itemKey: 'integrations',
 			},
+			{
+				key: ROUTES.MCP_SERVER,
+				label: 'MCP Server',
+				icon: <Sparkles size={16} />,
+				isEnabled: false,
+				itemKey: 'mcp-server',
+			},
 		],
 	},
 

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -23,6 +23,7 @@
 
 	&-empty-content {
 		height: 100%;
+		border: 1px solid var(--l1-border);
 		border-top: none;
 		display: flex;
 		flex-direction: column;

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -143,7 +143,6 @@ export const routesToSkip = [
 	ROUTES.SETTINGS,
 	ROUTES.LIST_ALL_ALERT,
 	ROUTES.TRACE_DETAIL,
-	ROUTES.TRACE_DETAIL_OLD,
 	ROUTES.ALL_CHANNELS,
 	ROUTES.USAGE_EXPLORER,
 	ROUTES.GET_STARTED,
@@ -158,6 +157,7 @@ export const routesToSkip = [
 	ROUTES.ORG_SETTINGS,
 	ROUTES.MEMBERS_SETTINGS,
 	ROUTES.SERVICE_ACCOUNTS_SETTINGS,
+	ROUTES.MCP_SERVER,
 	ROUTES.INGESTION_SETTINGS,
 	ROUTES.ERROR_DETAIL,
 	ROUTES.LOGS_PIPELINES,

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -1,22 +1,17 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import { toast } from '@signozhq/ui';
+import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
-
-// Accepts both V2 (spanId) and V3 (span_id) span shapes
-// TODO: Remove V2 (spanId) support when phasing out V2
-interface SpanLike {
-	spanId?: string;
-	span_id?: string;
-}
+import { Span } from 'types/api/trace/getTraceV2';
 
 export const useCopySpanLink = (
-	span?: SpanLike,
+	span?: Span,
 ): { onSpanCopy: MouseEventHandler<HTMLElement> } => {
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
 
 	const onSpanCopy: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
@@ -29,20 +24,18 @@ export const useCopySpanLink = (
 
 			urlQuery.delete('spanId');
 
-			const id = span.span_id || span.spanId;
-			if (id) {
-				urlQuery.set('spanId', id);
+			if (span.spanId) {
+				urlQuery.set('spanId', span?.spanId);
 			}
 
 			const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
 
 			setCopy(link);
-			toast.success('Copied to clipboard', {
-				richColors: true,
-				position: 'top-right',
+			notifications.success({
+				message: 'Copied to clipboard',
 			});
 		},
-		[span, urlQuery, pathname, setCopy],
+		[span, urlQuery, pathname, setCopy, notifications],
 	);
 
 	return {

frontend/src/hooks/trace/useGetTraceFlamegraph.tsx

@@ -16,7 +16,7 @@ const useGetTraceFlamegraph = (
 		queryKey: [
 			REACT_QUERY_KEY.GET_TRACE_V2_FLAMEGRAPH,
 			props.traceId,
-			// props.selectedSpanId,
+			props.selectedSpanId,
 		],
 		enabled: !!props.traceId,
 		keepPreviousData: true,

frontend/src/hooks/trace/useGetTraceV3.tsx

@@ -1,29 +0,0 @@
-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/lib/uPlotLib/utils/generateColor.ts

@@ -7,23 +7,6 @@ export function hashFn(str: string): number {
 	return hash >>> 0;
 }
 
-export function colorToRgb(color: string): string {
-	// Handle hex colors
-	const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-	if (hexMatch) {
-		return `${parseInt(hexMatch[1], 16)}, ${parseInt(
-			hexMatch[2],
-			16,
-		)}, ${parseInt(hexMatch[3], 16)}`;
-	}
-	// Handle rgb() colors
-	const rgbMatch = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.exec(color);
-	if (rgbMatch) {
-		return `${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}`;
-	}
-	return '136, 136, 136';
-}
-
 export function generateColor(
 	key: string,
 	colorMap: Record<string, string>,

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -569,12 +569,8 @@ describe('TooltipPlugin', () => {
 				}),
 			);
 
-			const resizeCall = addSpy.mock.calls.find(
-				([type]) => type === ('resize' as keyof WindowEventMap),
-			);
-			const scrollCall = addSpy.mock.calls.find(
-				([type]) => type === ('scroll' as keyof WindowEventMap),
-			);
+			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
+			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
 
 			expect(resizeCall).toBeDefined();
 			expect(scrollCall).toBeDefined();

frontend/src/pages/Settings/Settings.tsx

@@ -75,6 +75,11 @@ function SettingsPage(): JSX.Element {
 			}
 
 			if (isCloudUser) {
+				updatedItems = updatedItems.map((item) => ({
+					...item,
+					isEnabled: item.key === ROUTES.MCP_SERVER ? true : item.isEnabled,
+				}));
+
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,

frontend/src/pages/Settings/config.tsx

@@ -8,6 +8,7 @@ import GeneralSettings from 'container/GeneralSettings';
 import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
 import MultiIngestionSettings from 'container/IngestionSettings/MultiIngestionSettings';
+import MCPServerSettings from 'container/MCPServerSettings/MCPServerSettings';
 import MySettings from 'container/MySettings';
 import OrganizationSettings from 'container/OrganizationSettings';
 import RolesSettings from 'container/RolesSettings';
@@ -24,6 +25,7 @@ import {
 	Pencil,
 	Plus,
 	Shield,
+	Sparkles,
 	User,
 	Users,
 } from 'lucide-react';
@@ -205,6 +207,19 @@ export const serviceAccountsSettings = (
 	},
 ];
 
+export const mcpServerSettings = (t: TFunction): RouteTabProps['routes'] => [
+	{
+		Component: MCPServerSettings,
+		name: (
+			<div className="periscope-tab">
+				<Sparkles size={16} /> {t('routes:mcp_server').toString()}
+			</div>
+		),
+		route: ROUTES.MCP_SERVER,
+		key: ROUTES.MCP_SERVER,
+	},
+];
+
 export const createAlertChannels = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: (): JSX.Element => (

frontend/src/pages/Settings/utils.ts

@@ -10,6 +10,7 @@ import {
 	generalSettings,
 	ingestionSettings,
 	keyboardShortcuts,
+	mcpServerSettings,
 	membersSettings,
 	multiIngestionSettings,
 	mySettings,
@@ -79,6 +80,10 @@ export const getRoutes = (
 		...createAlertChannels(t),
 		...editAlertChannels(t),
 		...keyboardShortcuts(t),
+		// Route is registered for everyone so direct-URL visitors see the
+		// in-page fallback. Sidebar visibility is still Cloud-only, gated in
+		// Settings.tsx.
+		...mcpServerSettings(t),
 	);
 
 	return settings;

frontend/src/pages/TraceDetailV3Page/index.tsx

@@ -1,5 +0,0 @@
-import TraceDetailsV3 from '../TraceDetailsV3';
-
-export default function TraceDetailV3Page(): JSX.Element {
-	return <TraceDetailsV3 />;
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.styles.scss

@@ -1,96 +0,0 @@
-.analytics-panel {
-	&__body {
-		padding: 12px 6px;
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-		overflow: hidden;
-		background: var(--l1-background);
-
-		// TabsRoot — last direct child div
-		> div:last-child {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-			overflow: hidden;
-		}
-
-		[role='tablist'] {
-			flex-shrink: 0;
-		}
-	}
-
-	&__tabs-scroll {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	&__list {
-		display: grid;
-		grid-template-columns: auto auto 1fr;
-		gap: 4px 8px;
-		padding: 8px 0;
-		align-items: center;
-	}
-
-	&__dot {
-		width: 8px;
-		height: 8px;
-		border-radius: 2px;
-	}
-
-	&__service-name {
-		font-size: 13px;
-		color: var(--l1-foreground);
-		word-break: break-word;
-	}
-
-	&__bar-cell {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	&__bar {
-		flex: 1;
-		height: 6px;
-		background: var(--l3-background);
-		border-radius: 3px;
-		min-width: 40px;
-
-		&--small {
-			max-width: 80px;
-			flex: 0 0 80px;
-		}
-	}
-
-	&__bar-fill {
-		height: 100%;
-		border-radius: 3px;
-	}
-
-	&__value {
-		flex-shrink: 0;
-		text-align: right;
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-
-		&--wide {
-			min-width: 55px;
-		}
-
-		&--narrow {
-			min-width: 25px;
-		}
-	}
-
-	// Tabs root
-	[class*='tabs__list-wrapper'] {
-		padding-left: 0 !important;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/AnalyticsPanel/AnalyticsPanel.tsx

@@ -1,185 +0,0 @@
-import { useMemo } from 'react';
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@signozhq/ui';
-import { DetailsHeader } from 'components/DetailsPanel';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-
-import './AnalyticsPanel.styles.scss';
-
-interface AnalyticsPanelProps {
-	isOpen: boolean;
-	onClose: () => void;
-	serviceExecTime?: Record<string, number>;
-	traceStartTime?: number;
-	traceEndTime?: number;
-	// TODO: Re-enable when backend provides per-service span counts
-	// spans?: Span[];
-}
-
-const PANEL_WIDTH = 350;
-const PANEL_MARGIN_RIGHT = 100;
-const PANEL_MARGIN_TOP = 50;
-const PANEL_MARGIN_BOTTOM = 50;
-
-function AnalyticsPanel({
-	isOpen,
-	onClose,
-	serviceExecTime = {},
-	traceStartTime = 0,
-	traceEndTime = 0,
-}: AnalyticsPanelProps): JSX.Element | null {
-	const spread = traceEndTime - traceStartTime;
-
-	const execTimeRows = useMemo(() => {
-		if (spread <= 0) {
-			return [];
-		}
-		return Object.entries(serviceExecTime)
-			.map(([service, duration]) => ({
-				service,
-				percentage: (duration * 100) / spread,
-				color: generateColor(service, themeColors.traceDetailColorsV3),
-			}))
-			.sort((a, b) => b.percentage - a.percentage);
-	}, [serviceExecTime, spread]);
-
-	// const spanCountRows = useMemo(() => {
-	// 	const counts: Record<string, number> = {};
-	// 	for (const span of spans) {
-	// 		const name = span.serviceName || 'unknown';
-	// 		counts[name] = (counts[name] || 0) + 1;
-	// 	}
-	// 	return Object.entries(counts)
-	// 		.map(([service, count]) => ({
-	// 			service,
-	// 			count,
-	// 			color: generateColor(service, themeColors.traceDetailColorsV3),
-	// 		}))
-	// 		.sort((a, b) => b.count - a.count);
-	// }, [spans]);
-
-	// const maxSpanCount = spanCountRows[0]?.count || 1;
-
-	if (!isOpen) {
-		return null;
-	}
-
-	return (
-		<FloatingPanel
-			isOpen
-			className="analytics-panel"
-			width={PANEL_WIDTH}
-			height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
-			defaultPosition={{
-				x: window.innerWidth - PANEL_WIDTH - PANEL_MARGIN_RIGHT,
-				y: PANEL_MARGIN_TOP,
-			}}
-			enableResizing={{
-				top: true,
-				bottom: true,
-				left: false,
-				right: false,
-				topLeft: false,
-				topRight: false,
-				bottomLeft: false,
-				bottomRight: false,
-			}}
-		>
-			<DetailsHeader
-				title="Analytics"
-				onClose={onClose}
-				className="floating-panel__drag-handle"
-			/>
-
-			<div className="analytics-panel__body">
-				<TabsRoot defaultValue="exec-time">
-					<TabsList variant="secondary">
-						<TabsTrigger value="exec-time" variant="secondary">
-							% exec time
-						</TabsTrigger>
-						{/* TODO: Enable when backend provides per-service span counts
-						<TabsTrigger value="spans" variant="secondary">
-							Spans
-						</TabsTrigger>
-						*/}
-					</TabsList>
-
-					<div className="analytics-panel__tabs-scroll">
-						<TabsContent value="exec-time">
-							<div className="analytics-panel__list">
-								{execTimeRows.map((row) => (
-									<>
-										<div
-											key={`${row.service}-dot`}
-											className="analytics-panel__dot"
-											style={{ backgroundColor: row.color }}
-										/>
-										<span
-											key={`${row.service}-name`}
-											className="analytics-panel__service-name"
-										>
-											{row.service}
-										</span>
-										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
-											<div className="analytics-panel__bar">
-												<div
-													className="analytics-panel__bar-fill"
-													style={{
-														width: `${Math.min(row.percentage, 100)}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className="analytics-panel__value analytics-panel__value--wide">
-												{row.percentage.toFixed(2)}%
-											</span>
-										</div>
-									</>
-								))}
-							</div>
-						</TabsContent>
-
-						{/* TODO: Enable when backend provides per-service span counts
-						<TabsContent value="spans">
-							<div className="analytics-panel__list">
-								{spanCountRows.map((row) => (
-									<>
-										<div
-											key={`${row.service}-dot`}
-											className="analytics-panel__dot"
-											style={{ backgroundColor: row.color }}
-										/>
-										<span
-											key={`${row.service}-name`}
-											className="analytics-panel__service-name"
-										>
-											{row.service}
-										</span>
-										<div key={`${row.service}-bar`} className="analytics-panel__bar-cell">
-											<div className="analytics-panel__bar">
-												<div
-													className="analytics-panel__bar-fill"
-													style={{
-														width: `${(row.count / maxSpanCount) * 100}%`,
-														backgroundColor: row.color,
-													}}
-												/>
-											</div>
-											<span className="analytics-panel__value analytics-panel__value--narrow">
-												{row.count}
-											</span>
-										</div>
-									</>
-								))}
-							</div>
-						</TabsContent>
-						*/}
-					</div>
-				</TabsRoot>
-			</div>
-		</FloatingPanel>
-	);
-}
-
-export default AnalyticsPanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.styles.scss

@@ -1,34 +0,0 @@
-.linked-spans {
-	position: relative;
-
-	&__toggle {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: none;
-		border: none;
-		padding: 0;
-		cursor: pointer;
-		color: inherit;
-		font: inherit;
-	}
-
-	&__label {
-		white-space: nowrap;
-	}
-
-	&__chevron {
-		transition: transform 0.15s ease;
-
-		&--open {
-			transform: rotate(90deg);
-		}
-	}
-
-	&__list {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 12px 0;
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/LinkedSpans/LinkedSpans.tsx

@@ -1,118 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui';
-import ROUTES from 'constants/routes';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-
-import './LinkedSpans.styles.scss';
-
-interface SpanReference {
-	traceId: string;
-	spanId: string;
-	refType: string;
-}
-
-interface LinkedSpansProps {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	references: any;
-}
-
-interface LinkedSpansState {
-	linkedSpans: SpanReference[];
-	count: number;
-	isOpen: boolean;
-	toggleOpen: () => void;
-}
-
-export function useLinkedSpans(references: any): LinkedSpansState {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const linkedSpans: SpanReference[] = useMemo(
-		() =>
-			(references || []).filter(
-				(ref: SpanReference) => ref.refType !== 'CHILD_OF',
-			),
-		[references],
-	);
-
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	return {
-		linkedSpans,
-		count: linkedSpans.length,
-		isOpen,
-		toggleOpen,
-	};
-}
-
-export function LinkedSpansToggle({
-	count,
-	isOpen,
-	toggleOpen,
-}: {
-	count: number;
-	isOpen: boolean;
-	toggleOpen: () => void;
-}): JSX.Element {
-	if (count === 0) {
-		return <span className="linked-spans__label">0 linked spans</span>;
-	}
-
-	return (
-		<button type="button" className="linked-spans__toggle" onClick={toggleOpen}>
-			<span className="linked-spans__label">
-				{count} linked span{count !== 1 ? 's' : ''}
-			</span>
-			{isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-		</button>
-	);
-}
-
-export function LinkedSpansPanel({
-	linkedSpans,
-	isOpen,
-}: {
-	linkedSpans: SpanReference[];
-	isOpen: boolean;
-}): JSX.Element | null {
-	const getLink = useCallback(
-		(item: SpanReference): string =>
-			`${ROUTES.TRACE}/${item.traceId}?spanId=${item.spanId}`,
-		[],
-	);
-
-	if (!isOpen || linkedSpans.length === 0) {
-		return null;
-	}
-
-	return (
-		<div className="linked-spans__list">
-			{linkedSpans.map((item) => (
-				<KeyValueLabel
-					key={item.spanId}
-					badgeKey="Linked Span ID"
-					badgeValue={
-						<Link to={getLink(item)}>
-							<Badge color="vanilla">{item.spanId}</Badge>
-						</Link>
-					}
-					direction="column"
-				/>
-			))}
-		</div>
-	);
-}
-
-function LinkedSpans({ references }: LinkedSpansProps): JSX.Element {
-	const { linkedSpans, count, isOpen, toggleOpen } = useLinkedSpans(references);
-
-	return (
-		<div className="linked-spans">
-			<LinkedSpansToggle count={count} isOpen={isOpen} toggleOpen={toggleOpen} />
-			<LinkedSpansPanel linkedSpans={linkedSpans} isOpen={isOpen} />
-		</div>
-	);
-}
-
-export default LinkedSpans;

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

@@ -1,147 +0,0 @@
-.span-details-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	&__header-nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-
-	&__body {
-		padding: 12px;
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-		background: var(--l1-background);
-		font-size: 14px;
-		gap: 16px;
-
-		.data-viewer {
-			min-height: 500px;
-		}
-	}
-
-	&__details-section {
-		flex-shrink: 0;
-		min-width: 0;
-	}
-
-	&__tabs-section {
-		flex: 1;
-		min-width: 0;
-		max-height: 100%;
-		min-height: 400px;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-
-		// TabsRoot — direct child of tabs-section
-		> div {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-			overflow: hidden;
-		}
-
-		[role='tablist'] {
-			flex-shrink: 0;
-		}
-
-		[class*='tabs__list-wrapper'] {
-			padding-left: 0 !important;
-		}
-	}
-
-	&__tabs-scroll {
-		flex: 1;
-		min-height: 0;
-		overflow-y: auto;
-		scrollbar-width: none;
-
-		[role='tabpanel'] {
-			padding: 0;
-		}
-	}
-
-	&__span-row {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		gap: 8px;
-		justify-content: space-between;
-	}
-
-	&__span-info {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 4px 16px;
-		padding: 8px 0;
-	}
-
-	&__span-info-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		font-size: 13px;
-		color: var(--l2-foreground);
-		white-space: nowrap;
-	}
-
-	&__highlighted-options {
-		padding: 8px 0;
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0;
-
-		.key-value-label {
-			flex: 1 1 50%;
-			min-width: 120px;
-			overflow: hidden;
-		}
-	}
-
-	&__service-dot {
-		display: inline-block;
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--bg-forest-500);
-	}
-
-	&__trace-id {
-		color: var(--accent-primary);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		display: block;
-	}
-
-	&__key-attributes {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px 0;
-
-		&-label {
-			font-size: var(--font-size-xs);
-			font-weight: var(--font-weight-medium);
-			color: var(--l2-foreground);
-			text-transform: uppercase;
-			letter-spacing: 0.48px;
-			line-height: var(--line-height-20);
-		}
-
-		&-chips {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 6px;
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -1,607 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import {
-	Bookmark,
-	CalendarClock,
-	ChartBar,
-	ChartColumnBig,
-	Dock,
-	Link2,
-	Logs,
-	PanelBottom,
-	ScrollText,
-	Timer,
-} from '@signozhq/icons';
-import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@signozhq/ui';
-import { Skeleton, Tooltip } from 'antd';
-import { DetailsHeader, DetailsPanelDrawer } from 'components/DetailsPanel';
-import { HeaderAction } from 'components/DetailsPanel/DetailsHeader/DetailsHeader';
-import { DetailsPanelState } from 'components/DetailsPanel/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
-import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
-import Events from 'container/SpanDetailsDrawer/Events/Events';
-import SpanLogs from 'container/SpanDetailsDrawer/SpanLogs/SpanLogs';
-import { useSpanContextLogs } from 'container/SpanDetailsDrawer/SpanLogs/useSpanContextLogs';
-import dayjs from 'dayjs';
-import { getSpanAttribute, hasInfraMetadata } from 'pages/TraceDetailsV3/utils';
-import { DataViewer } from 'periscope/components/DataViewer';
-import { FloatingPanel } from 'periscope/components/FloatingPanel';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { getLeafKeyFromPath } from 'periscope/components/PrettyView/utils';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-
-import AnalyticsPanel from './AnalyticsPanel/AnalyticsPanel';
-import { HIGHLIGHTED_OPTIONS } from './config';
-import {
-	// KEY_ATTRIBUTE_KEYS, // uncomment when key attributes section is re-enabled
-	SpanDetailVariant,
-	VISIBLE_ACTIONS,
-} from './constants';
-import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
-import {
-	LinkedSpansPanel,
-	LinkedSpansToggle,
-	useLinkedSpans,
-} from './LinkedSpans/LinkedSpans';
-import SpanPercentileBadge from './SpanPercentile/SpanPercentileBadge';
-import SpanPercentilePanel from './SpanPercentile/SpanPercentilePanel';
-import useSpanPercentile from './SpanPercentile/useSpanPercentile';
-
-import './SpanDetailsPanel.styles.scss';
-
-interface SpanDetailsPanelProps {
-	panelState: DetailsPanelState;
-	selectedSpan: SpanV3 | undefined;
-	variant?: SpanDetailVariant;
-	onVariantChange?: (variant: SpanDetailVariant) => void;
-	traceStartTime?: number;
-	traceEndTime?: number;
-	serviceExecTime?: Record<string, number>;
-}
-
-function SpanDetailsContent({
-	selectedSpan,
-	traceStartTime,
-	traceEndTime,
-}: {
-	selectedSpan: SpanV3;
-	traceStartTime?: number;
-	traceEndTime?: number;
-}): JSX.Element {
-	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-	const spanAttributeActions = useSpanAttributeActions();
-	const percentile = useSpanPercentile(selectedSpan);
-	const linkedSpans = useLinkedSpans((selectedSpan as any).references);
-
-	// Map span attribute actions to PrettyView actions format.
-	// Use the last key in fieldKeyPath (the actual attribute key), not the full display path.
-	const prettyViewCustomActions = useMemo(
-		() =>
-			spanAttributeActions.map((action) => ({
-				key: action.value,
-				label: action.label,
-				icon: action.icon,
-				shouldHide: action.shouldHide,
-				onClick: (context: {
-					fieldKey: string;
-					fieldKeyPath: (string | number)[];
-					fieldValue: unknown;
-				}): void => {
-					const leafKey = getLeafKeyFromPath(context.fieldKeyPath, context.fieldKey);
-					action.callback({
-						key: leafKey,
-						value: String(context.fieldValue),
-					});
-				},
-			})),
-		[spanAttributeActions],
-	);
-
-	// const [, setCopy] = useCopyToClipboard();
-
-	// Key attributes section — commented out as pinning in PrettyView covers this use case.
-	// Uncomment when key attributes need to be shown separately.
-	// const buildKeyAttrMenu = useCallback(
-	// 	(key: string, value: string): ActionMenuItem[] => {
-	// 		const items: ActionMenuItem[] = [
-	// 			{
-	// 				key: 'copy-value',
-	// 				label: 'Copy Value',
-	// 				icon: <Copy size={12} />,
-	// 				onClick: (): void => {
-	// 					setCopy(value);
-	// 					toast.success('Copied to clipboard', {
-	// 						richColors: true,
-	// 						position: 'top-right',
-	// 					});
-	// 				},
-	// 			},
-	// 		];
-	// 		spanAttributeActions.forEach((action) => {
-	// 			if (action.shouldHide && action.shouldHide(key)) {
-	// 				return;
-	// 			}
-	// 			items.push({
-	// 				key: action.value,
-	// 				label: action.label,
-	// 				icon: action.icon,
-	// 				onClick: (): void => {
-	// 					action.callback({ key, value });
-	// 				},
-	// 			});
-	// 		});
-	// 		return items;
-	// 	},
-	// 	[spanAttributeActions, setCopy],
-	// );
-
-	const {
-		logs,
-		isLoading: isLogsLoading,
-		isError: isLogsError,
-		isFetching: isLogsFetching,
-		isLogSpanRelated,
-		hasTraceIdLogs,
-	} = useSpanContextLogs({
-		traceId: selectedSpan.trace_id,
-		spanId: selectedSpan.span_id,
-		timeRange: {
-			startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-			endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-		},
-		isDrawerOpen: true,
-	});
-
-	const infraMetadata = useMemo(() => {
-		if (!hasInfraMetadata(selectedSpan)) {
-			return null;
-		}
-		return {
-			clusterName: getSpanAttribute(selectedSpan, 'k8s.cluster.name') || '',
-			podName: getSpanAttribute(selectedSpan, 'k8s.pod.name') || '',
-			nodeName: getSpanAttribute(selectedSpan, 'k8s.node.name') || '',
-			hostName: getSpanAttribute(selectedSpan, 'host.name') || '',
-			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
-		};
-	}, [selectedSpan]);
-
-	const handleExplorerPageRedirect = useCallback((): void => {
-		const startTimeMs = (traceStartTime || 0) - FIVE_MINUTES_IN_MS;
-		const endTimeMs = (traceEndTime || 0) + FIVE_MINUTES_IN_MS;
-
-		const traceIdFilter = {
-			op: 'AND',
-			items: [
-				{
-					id: 'trace-id-filter',
-					key: {
-						key: 'trace_id',
-						id: 'trace-id-key',
-						dataType: 'string' as const,
-						isColumn: true,
-						type: '',
-						isJSON: false,
-					} as BaseAutocompleteData,
-					op: '=',
-					value: selectedSpan.trace_id,
-				},
-			],
-		};
-
-		const compositeQuery = {
-			...initialQueryState,
-			queryType: 'builder',
-			builder: {
-				...initialQueryState.builder,
-				queryData: [
-					{
-						...initialQueryBuilderFormValuesMap.logs,
-						aggregateOperator: LogsAggregatorOperator.NOOP,
-						filters: traceIdFilter,
-					},
-				],
-			},
-		};
-
-		const searchParams = new URLSearchParams();
-		searchParams.set(QueryParams.compositeQuery, JSON.stringify(compositeQuery));
-		searchParams.set(QueryParams.startTime, startTimeMs.toString());
-		searchParams.set(QueryParams.endTime, endTimeMs.toString());
-
-		window.open(
-			`${window.location.origin}${
-				ROUTES.LOGS_EXPLORER
-			}?${searchParams.toString()}`,
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, [selectedSpan.trace_id, traceStartTime, traceEndTime]);
-
-	const emptyLogsStateConfig = useMemo(
-		() => ({
-			...getEmptyLogsListConfig(() => {}),
-			showClearFiltersButton: false,
-		}),
-		[],
-	);
-
-	// const keyAttributes = useMemo(() => {
-	// 	const keys = KEY_ATTRIBUTE_KEYS.traces || [];
-	// 	const allAttrs: Record<string, string> = {};
-	// 	Object.entries(selectedSpan.resource || {}).forEach(([k, v]) => {
-	// 		allAttrs[k] = String(v);
-	// 	});
-	// 	Object.entries(selectedSpan.attributes || {}).forEach(([k, v]) => {
-	// 		allAttrs[k] = String(v);
-	// 	});
-	// 	const span = (selectedSpan as unknown) as Record<string, unknown>;
-	// 	keys.forEach((key) => {
-	// 		if (!(key in allAttrs) && span[key] != null && span[key] !== '') {
-	// 			allAttrs[key] = String(span[key]);
-	// 		}
-	// 	});
-	// 	return keys
-	// 		.filter((key) => allAttrs[key])
-	// 		.map((key) => ({ key, value: allAttrs[key] }));
-	// }, [selectedSpan]);
-
-	return (
-		<div className="span-details-panel__body">
-			<div className="span-details-panel__details-section">
-				<div className="span-details-panel__span-row">
-					<KeyValueLabel
-						badgeKey="Span name"
-						badgeValue={selectedSpan.name}
-						maxCharacters={50}
-					/>
-					<SpanPercentileBadge
-						loading={percentile.loading}
-						percentileValue={percentile.percentileValue}
-						duration={percentile.duration}
-						spanPercentileData={percentile.spanPercentileData}
-						isOpen={percentile.isOpen}
-						toggleOpen={percentile.toggleOpen}
-					/>
-				</div>
-
-				<SpanPercentilePanel selectedSpan={selectedSpan} percentile={percentile} />
-
-				{/* Span info: exec time + start time */}
-				<div className="span-details-panel__span-info">
-					<div className="span-details-panel__span-info-item">
-						<Timer size={14} />
-						<span>
-							{getYAxisFormattedValue(`${selectedSpan.duration_nano / 1000000}`, 'ms')}
-							{traceStartTime && traceEndTime && traceEndTime > traceStartTime && (
-								<>
-									{' — '}
-									<strong>
-										{(
-											(selectedSpan.duration_nano * 100) /
-											((traceEndTime - traceStartTime) * 1e6)
-										).toFixed(2)}
-										%
-									</strong>
-									{' of total exec time'}
-								</>
-							)}
-						</span>
-					</div>
-					<div className="span-details-panel__span-info-item">
-						<CalendarClock size={14} />
-						<span>
-							{dayjs(selectedSpan.timestamp).format('HH:mm:ss — MMM D, YYYY')}
-						</span>
-					</div>
-					<div className="span-details-panel__span-info-item">
-						<Link2 size={14} />
-						<LinkedSpansToggle
-							count={linkedSpans.count}
-							isOpen={linkedSpans.isOpen}
-							toggleOpen={linkedSpans.toggleOpen}
-						/>
-					</div>
-				</div>
-
-				<LinkedSpansPanel
-					linkedSpans={linkedSpans.linkedSpans}
-					isOpen={linkedSpans.isOpen}
-				/>
-
-				{/* Step 6: HighlightedOptions */}
-				<div className="span-details-panel__highlighted-options">
-					{HIGHLIGHTED_OPTIONS.map((option) => {
-						const rendered = option.render(selectedSpan);
-						if (!rendered) {
-							return null;
-						}
-						return (
-							<KeyValueLabel
-								key={option.key}
-								badgeKey={option.label}
-								badgeValue={rendered}
-								direction="column"
-							/>
-						);
-					})}
-				</div>
-
-				{/* Step 7: KeyAttributes — commented out, pinning in PrettyView covers this.
-				{keyAttributes.length > 0 && (
-					<div className="span-details-panel__key-attributes">
-						<div className="span-details-panel__key-attributes-label">
-							KEY ATTRIBUTES
-						</div>
-						<div className="span-details-panel__key-attributes-chips">
-							{keyAttributes.map(({ key, value }) => (
-								<ActionMenu
-									key={key}
-									items={buildKeyAttrMenu(key, value)}
-									trigger={['click']}
-									placement="bottomRight"
-								>
-									<div>
-										<KeyValueLabel badgeKey={key} badgeValue={value} />
-									</div>
-								</ActionMenu>
-							))}
-						</div>
-					</div>
-				)}
-			*/}
-
-				{/* Step 8: MiniTraceContext */}
-			</div>
-
-			<div className="span-details-panel__tabs-section">
-				{/* Step 9: ContentTabs */}
-				<TabsRoot defaultValue="overview">
-					<TabsList variant="secondary">
-						<TabsTrigger value="overview" variant="secondary">
-							<Bookmark size={14} /> Overview
-						</TabsTrigger>
-						<TabsTrigger value="events" variant="secondary">
-							<ScrollText size={14} /> Events ({selectedSpan.events?.length || 0})
-						</TabsTrigger>
-						<TabsTrigger value="logs" variant="secondary">
-							<Logs size={14} /> Logs
-						</TabsTrigger>
-						{infraMetadata && (
-							<TabsTrigger value="metrics" variant="secondary">
-								<ChartColumnBig size={14} /> Metrics
-							</TabsTrigger>
-						)}
-					</TabsList>
-
-					<div className="span-details-panel__tabs-scroll">
-						<TabsContent value="overview">
-							<DataViewer
-								data={selectedSpan}
-								drawerKey="trace-details"
-								prettyViewProps={{
-									showPinned: true,
-									actions: prettyViewCustomActions,
-									visibleActions: VISIBLE_ACTIONS,
-								}}
-							/>
-						</TabsContent>
-						<TabsContent value="events">
-							{/* V2 Events component expects span.event (singular), V3 has span.events (plural) */}
-							<Events
-								span={{ ...selectedSpan, event: selectedSpan.events } as any}
-								startTime={traceStartTime || 0}
-								isSearchVisible
-							/>
-						</TabsContent>
-						<TabsContent value="logs">
-							<SpanLogs
-								traceId={selectedSpan.trace_id}
-								spanId={selectedSpan.span_id}
-								timeRange={{
-									startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-									endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-								}}
-								logs={logs}
-								isLoading={isLogsLoading}
-								isError={isLogsError}
-								isFetching={isLogsFetching}
-								isLogSpanRelated={isLogSpanRelated}
-								handleExplorerPageRedirect={handleExplorerPageRedirect}
-								emptyStateConfig={!hasTraceIdLogs ? emptyLogsStateConfig : undefined}
-							/>
-						</TabsContent>
-						{infraMetadata && (
-							<TabsContent value="metrics">
-								<InfraMetrics
-									clusterName={infraMetadata.clusterName}
-									podName={infraMetadata.podName}
-									nodeName={infraMetadata.nodeName}
-									hostName={infraMetadata.hostName}
-									timestamp={infraMetadata.spanTimestamp}
-									dataSource={DataSource.TRACES}
-								/>
-							</TabsContent>
-						)}
-					</div>
-				</TabsRoot>
-			</div>
-		</div>
-	);
-}
-
-function SpanDetailsPanel({
-	panelState,
-	selectedSpan,
-	variant = SpanDetailVariant.DIALOG,
-	onVariantChange,
-	traceStartTime,
-	traceEndTime,
-	serviceExecTime,
-}: SpanDetailsPanelProps): JSX.Element {
-	const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
-
-	const headerActions = useMemo((): HeaderAction[] => {
-		const actions: HeaderAction[] = [
-			{
-				key: 'analytics',
-				component: (
-					<Button
-						variant="ghost"
-						size="sm"
-						color="secondary"
-						prefixIcon={<ChartBar size={14} />}
-						onClick={(): void => setIsAnalyticsOpen((prev) => !prev)}
-					>
-						Analytics
-					</Button>
-				),
-			},
-			// TODO: Add back when driven through separate config for different pages
-			// {
-			// 	key: 'view-full-trace',
-			// 	component: (
-			// 		<Button variant="ghost" size="sm" color="secondary" prefixIcon={<ExternalLink size={14} />} onClick={noop}>
-			// 			View full trace
-			// 		</Button>
-			// 	),
-			// },
-			// TODO: Add back when used in trace explorer page
-			// {
-			// 	key: 'nav',
-			// 	component: (
-			// 		<div className="span-details-panel__header-nav">
-			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronUp size={14} /></Button>
-			// 			<Button variant="ghost" size="icon" color="secondary" onClick={noop}><ChevronDown size={14} /></Button>
-			// 		</div>
-			// 	),
-			// },
-		];
-
-		if (onVariantChange) {
-			const isDocked = variant === SpanDetailVariant.DOCKED;
-			actions.push({
-				key: 'dock-toggle',
-				component: (
-					<Tooltip title={isDocked ? 'Open as floating panel' : 'Dock on the side'}>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							onClick={(): void =>
-								onVariantChange(
-									isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-								)
-							}
-						>
-							{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-						</Button>
-					</Tooltip>
-				),
-			});
-		}
-
-		return actions;
-	}, [variant, onVariantChange]);
-
-	const PANEL_WIDTH = 500;
-	const PANEL_MARGIN_RIGHT = 20;
-	const PANEL_MARGIN_TOP = 25;
-	const PANEL_MARGIN_BOTTOM = 25;
-
-	const content = (
-		<>
-			<DetailsHeader
-				title="Span details"
-				onClose={panelState.close}
-				actions={headerActions}
-				className={
-					variant === SpanDetailVariant.DIALOG ? 'floating-panel__drag-handle' : ''
-				}
-			/>
-			{selectedSpan ? (
-				<SpanDetailsContent
-					selectedSpan={selectedSpan}
-					traceStartTime={traceStartTime}
-					traceEndTime={traceEndTime}
-				/>
-			) : (
-				<div className="span-details-panel__body">
-					<Skeleton active paragraph={{ rows: 6 }} title={{ width: '60%' }} />
-				</div>
-			)}
-		</>
-	);
-
-	const analyticsPanel = (
-		<AnalyticsPanel
-			isOpen={isAnalyticsOpen}
-			onClose={(): void => setIsAnalyticsOpen(false)}
-			serviceExecTime={serviceExecTime}
-			traceStartTime={traceStartTime}
-			traceEndTime={traceEndTime}
-		/>
-	);
-
-	if (variant === SpanDetailVariant.DOCKED) {
-		return (
-			<>
-				<div className="span-details-panel">{content}</div>
-				{analyticsPanel}
-			</>
-		);
-	}
-
-	if (variant === SpanDetailVariant.DRAWER) {
-		return (
-			<>
-				<DetailsPanelDrawer
-					isOpen={panelState.isOpen}
-					onClose={panelState.close}
-					className="span-details-panel"
-				>
-					{content}
-				</DetailsPanelDrawer>
-				{analyticsPanel}
-			</>
-		);
-	}
-
-	return (
-		<>
-			<FloatingPanel
-				isOpen={panelState.isOpen}
-				className="span-details-panel"
-				width={PANEL_WIDTH}
-				height={window.innerHeight - PANEL_MARGIN_TOP - PANEL_MARGIN_BOTTOM}
-				defaultPosition={{
-					x: window.innerWidth - PANEL_WIDTH - PANEL_MARGIN_RIGHT,
-					y: PANEL_MARGIN_TOP,
-				}}
-				enableResizing={{
-					top: true,
-					right: true,
-					bottom: true,
-					left: true,
-					topRight: false,
-					bottomRight: false,
-					bottomLeft: false,
-					topLeft: false,
-				}}
-			>
-				{content}
-			</FloatingPanel>
-			{analyticsPanel}
-		</>
-	);
-}
-
-export default SpanDetailsPanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentile.styles.scss

@@ -1,258 +0,0 @@
-// Badge — wraps a KeyValueLabel, clickable to toggle panel
-.span-percentile-badge {
-	cursor: pointer;
-
-	// Override key color for the percentile value (p99)
-	.key-value-label__key {
-		color: var(--text-sakura-400, #f56c87);
-	}
-
-	&__loader {
-		display: inline-flex;
-		align-items: center;
-		padding: 2px 4px;
-		color: var(--foreground);
-	}
-
-	&__value {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	&__icon {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-}
-
-// Panel — collapsible, renders below the row
-.span-percentile-panel {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	border: 1px solid var(--l1-border);
-	border-radius: 4px;
-	filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-	backdrop-filter: blur(20px);
-	margin: 8px 16px;
-
-	&__header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 8px 12px;
-		border-bottom: 1px solid var(--l1-border);
-
-		&-text {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			cursor: pointer;
-		}
-
-		&-icon {
-			color: var(--l2-foreground);
-		}
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 8px;
-
-		&-title {
-			font-size: var(--font-size-sm);
-			line-height: var(--line-height-20);
-		}
-
-		&-highlight {
-			color: var(--text-sakura-400, #f56c87);
-		}
-
-		&-loader {
-			display: inline-flex;
-			align-items: flex-end;
-			margin: 0 4px;
-			line-height: 18px;
-		}
-	}
-
-	&__timerange {
-		width: 100%;
-
-		&-select {
-			width: 100%;
-			margin-top: 8px;
-			margin-bottom: 16px;
-
-			.ant-select-selector {
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-				color: var(--l1-foreground);
-				font-size: 12px;
-				height: 32px;
-			}
-		}
-	}
-
-	&__table {
-		&-header {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: 8px;
-
-			&-text {
-				color: var(--l1-foreground);
-				font-size: 11px;
-				font-weight: 500;
-				line-height: 20px;
-				text-transform: uppercase;
-			}
-		}
-
-		&-rows {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-		}
-
-		&-skeleton {
-			.ant-skeleton-title {
-				width: 100% !important;
-				margin-top: 0 !important;
-			}
-
-			.ant-skeleton-paragraph {
-				margin-top: 8px;
-
-				& > li + li {
-					margin-top: 10px;
-					width: 100% !important;
-				}
-			}
-		}
-
-		&-row {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: 12px;
-			padding: 0 4px;
-
-			&-key {
-				flex: 0 0 auto;
-				color: var(--l1-foreground);
-				font-size: 12px;
-				font-weight: 500;
-				line-height: 20px;
-			}
-
-			&-value {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 20px;
-			}
-
-			&-dash {
-				flex: 1;
-				height: 0;
-				margin: 0 8px;
-				border-top: 1px solid transparent;
-				border-image: repeating-linear-gradient(
-						to right,
-						var(--l1-border) 0,
-						var(--l1-border) 10px,
-						transparent 10px,
-						transparent 20px
-					)
-					1 stretch;
-			}
-
-			&--current {
-				border-radius: 2px;
-				background: rgba(78, 116, 248, 0.2);
-
-				.span-percentile-panel__table-row-key {
-					color: var(--text-robin-300);
-				}
-
-				.span-percentile-panel__table-row-dash {
-					border-image: repeating-linear-gradient(
-							to right,
-							#abbdff 0,
-							#abbdff 10px,
-							transparent 10px,
-							transparent 20px
-						)
-						1 stretch;
-				}
-
-				.span-percentile-panel__table-row-value {
-					color: var(--text-robin-400);
-				}
-			}
-		}
-	}
-
-	&__resource-selector {
-		overflow: hidden;
-		width: calc(100% + 16px);
-		position: absolute;
-		top: 32px;
-		left: -8px;
-		z-index: 1000;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-
-		&-header {
-			border-bottom: 1px solid var(--l1-border);
-		}
-
-		&-input {
-			border-radius: 0;
-			border: none !important;
-			box-shadow: none !important;
-			height: 36px;
-		}
-
-		&-items {
-			height: 200px;
-			overflow-y: auto;
-
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-				height: 0.3rem;
-			}
-
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background: var(--l3-background);
-			}
-		}
-
-		&-item {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			padding: 8px 12px;
-
-			&-value {
-				color: var(--l1-foreground);
-				font-size: 13px;
-				line-height: 20px;
-			}
-		}
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentileBadge.tsx

@@ -1,67 +0,0 @@
-import { ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-
-import { UseSpanPercentileReturn } from './useSpanPercentile';
-
-import './SpanPercentile.styles.scss';
-
-type SpanPercentileBadgeProps = Pick<
-	UseSpanPercentileReturn,
-	| 'loading'
-	| 'percentileValue'
-	| 'duration'
-	| 'spanPercentileData'
-	| 'isOpen'
-	| 'toggleOpen'
->;
-
-function SpanPercentileBadge({
-	loading,
-	percentileValue,
-	duration,
-	spanPercentileData,
-	isOpen,
-	toggleOpen,
-}: SpanPercentileBadgeProps): JSX.Element | null {
-	if (loading) {
-		return (
-			<div className="span-percentile-badge__loader">
-				<Loader2 size={14} className="animate-spin" />
-			</div>
-		);
-	}
-
-	if (!spanPercentileData) {
-		return null;
-	}
-
-	return (
-		<div
-			className="span-percentile-badge"
-			onClick={toggleOpen}
-			role="button"
-			tabIndex={0}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					toggleOpen();
-				}
-			}}
-		>
-			<KeyValueLabel
-				badgeKey={`p${percentileValue}`}
-				badgeValue={
-					<span className="span-percentile-badge__value">
-						{duration}
-						{isOpen ? (
-							<ChevronUp size={14} className="span-percentile-badge__icon" />
-						) : (
-							<ChevronDown size={14} className="span-percentile-badge__icon" />
-						)}
-					</span>
-				}
-			/>
-		</div>
-	);
-}
-
-export default SpanPercentileBadge;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,224 +0,0 @@
-import { Checkbox, Input, Select, Skeleton, Typography } from 'antd';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { Check, ChevronDown, Loader2, PlusIcon } from 'lucide-react';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-import { UseSpanPercentileReturn } from './useSpanPercentile';
-
-import './SpanPercentile.styles.scss';
-
-const DEFAULT_RESOURCE_ATTRIBUTES = {
-	serviceName: 'service.name',
-	name: 'name',
-};
-
-const timerangeOptions = [1, 2, 4, 6, 12, 24].map((hours) => ({
-	label: `${hours}h`,
-	value: hours,
-}));
-
-interface SpanPercentilePanelProps {
-	selectedSpan: SpanV3;
-	percentile: UseSpanPercentileReturn;
-}
-
-function SpanPercentilePanel({
-	selectedSpan,
-	percentile,
-}: SpanPercentilePanelProps): JSX.Element | null {
-	const {
-		isOpen,
-		toggleOpen,
-		isError,
-		loading,
-		spanPercentileData,
-		selectedTimeRange,
-		setSelectedTimeRange,
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-		spanResourceAttributes,
-		handleResourceAttributeChange,
-		resourceAttributesSelectorRef,
-		isLoadingData,
-		isFetchingData,
-	} = percentile;
-
-	if (!isOpen || isError) {
-		return null;
-	}
-
-	return (
-		<div className="span-percentile-panel">
-			<div className="span-percentile-panel__header">
-				<Typography.Text
-					className="span-percentile-panel__header-text"
-					onClick={toggleOpen}
-				>
-					<ChevronDown size={16} /> Span Percentile
-				</Typography.Text>
-
-				{showResourceAttributesSelector ? (
-					<Check
-						size={16}
-						className="cursor-pointer span-percentile-panel__header-icon"
-						onClick={(): void => setShowResourceAttributesSelector(false)}
-					/>
-				) : (
-					<PlusIcon
-						size={16}
-						className="cursor-pointer span-percentile-panel__header-icon"
-						onClick={(): void => setShowResourceAttributesSelector(true)}
-					/>
-				)}
-			</div>
-
-			{showResourceAttributesSelector && (
-				<div
-					className="span-percentile-panel__resource-selector"
-					ref={resourceAttributesSelectorRef}
-				>
-					<div className="span-percentile-panel__resource-selector-header">
-						<Input
-							placeholder="Search resource attributes"
-							className="span-percentile-panel__resource-selector-input"
-							value={resourceAttributesSearchQuery}
-							onChange={(e): void =>
-								setResourceAttributesSearchQuery(e.target.value as string)
-							}
-						/>
-					</div>
-					<div className="span-percentile-panel__resource-selector-items">
-						{spanResourceAttributes
-							.filter((attr) =>
-								attr.key
-									.toLowerCase()
-									.includes(resourceAttributesSearchQuery.toLowerCase()),
-							)
-							.map((attr) => (
-								<div
-									className="span-percentile-panel__resource-selector-item"
-									key={attr.key}
-								>
-									<Checkbox
-										checked={attr.isSelected}
-										onChange={(e): void => {
-											handleResourceAttributeChange(
-												attr.key,
-												attr.value,
-												e.target.checked,
-											);
-										}}
-										disabled={
-											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-											attr.key === DEFAULT_RESOURCE_ATTRIBUTES.name
-										}
-									>
-										<div className="span-percentile-panel__resource-selector-item-value">
-											{attr.key}
-										</div>
-									</Checkbox>
-								</div>
-							))}
-					</div>
-				</div>
-			)}
-
-			<div className="span-percentile-panel__content">
-				<Typography.Text className="span-percentile-panel__content-title">
-					This span duration is{' '}
-					{!loading && spanPercentileData ? (
-						<span className="span-percentile-panel__content-highlight">
-							p{Math.floor(spanPercentileData.percentile || 0)}
-						</span>
-					) : (
-						<span className="span-percentile-panel__content-loader">
-							<Loader2 size={12} className="animate-spin" />
-						</span>
-					)}{' '}
-					out of the distribution for this resource evaluated for {selectedTimeRange}{' '}
-					hour(s) since the span start time.
-				</Typography.Text>
-
-				<div className="span-percentile-panel__timerange">
-					<Select
-						labelInValue
-						placeholder="Select timerange"
-						className="span-percentile-panel__timerange-select"
-						getPopupContainer={(trigger): HTMLElement =>
-							trigger.parentElement || document.body
-						}
-						value={{
-							label: `${selectedTimeRange}h : ${dayjs(selectedSpan.timestamp)
-								.subtract(selectedTimeRange, 'hour')
-								.format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)} - ${dayjs(
-								selectedSpan.timestamp,
-							).format(DATE_TIME_FORMATS.TIME_SPAN_PERCENTILE)}`,
-							value: selectedTimeRange,
-						}}
-						onChange={(value): void => {
-							setSelectedTimeRange(Number(value.value));
-						}}
-						options={timerangeOptions}
-					/>
-				</div>
-
-				<div className="span-percentile-panel__table">
-					<div className="span-percentile-panel__table-header">
-						<Typography.Text className="span-percentile-panel__table-header-text">
-							Percentile
-						</Typography.Text>
-						<Typography.Text className="span-percentile-panel__table-header-text">
-							Duration
-						</Typography.Text>
-					</div>
-
-					<div className="span-percentile-panel__table-rows">
-						{isLoadingData || isFetchingData ? (
-							<Skeleton
-								active
-								paragraph={{ rows: 3 }}
-								className="span-percentile-panel__table-skeleton"
-							/>
-						) : (
-							<>
-								{Object.entries(spanPercentileData?.percentiles || {}).map(
-									([pKey, pDuration]) => (
-										<div className="span-percentile-panel__table-row" key={pKey}>
-											<Typography.Text className="span-percentile-panel__table-row-key">
-												{pKey}
-											</Typography.Text>
-											<div className="span-percentile-panel__table-row-dash" />
-											<Typography.Text className="span-percentile-panel__table-row-value">
-												{getYAxisFormattedValue(`${pDuration / 1000000}`, 'ms')}
-											</Typography.Text>
-										</div>
-									),
-								)}
-
-								<div className="span-percentile-panel__table-row span-percentile-panel__table-row--current">
-									<Typography.Text className="span-percentile-panel__table-row-key">
-										p{Math.floor(spanPercentileData?.percentile || 0)}
-									</Typography.Text>
-									<div className="span-percentile-panel__table-row-dash" />
-									<Typography.Text className="span-percentile-panel__table-row-value">
-										(this span){' '}
-										{getYAxisFormattedValue(
-											`${selectedSpan.duration_nano / 1000000}`,
-											'ms',
-										)}
-									</Typography.Text>
-								</div>
-							</>
-						)}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default SpanPercentilePanel;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/useSpanPercentile.ts

@@ -1,331 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import getSpanPercentiles from 'api/trace/getSpanPercentiles';
-import getUserPreference from 'api/v1/user/preferences/name/get';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import dayjs from 'dayjs';
-import useClickOutside from 'hooks/useClickOutside';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-export interface IResourceAttribute {
-	key: string;
-	value: string;
-	isSelected: boolean;
-}
-
-const DEFAULT_RESOURCE_ATTRIBUTES = {
-	serviceName: 'service.name',
-	name: 'name',
-};
-
-export interface UseSpanPercentileReturn {
-	isOpen: boolean;
-	setIsOpen: (open: boolean) => void;
-	toggleOpen: () => void;
-	loading: boolean;
-	percentileValue: number;
-	duration: string;
-	spanPercentileData: {
-		percentile: number;
-		description: string;
-		percentiles: Record<string, number>;
-	} | null;
-	isError: boolean;
-	selectedTimeRange: number;
-	setSelectedTimeRange: (range: number) => void;
-	showResourceAttributesSelector: boolean;
-	setShowResourceAttributesSelector: (show: boolean) => void;
-	resourceAttributesSearchQuery: string;
-	setResourceAttributesSearchQuery: (query: string) => void;
-	spanResourceAttributes: IResourceAttribute[];
-	handleResourceAttributeChange: (
-		key: string,
-		value: string,
-		isSelected: boolean,
-	) => void;
-	resourceAttributesSelectorRef: React.MutableRefObject<HTMLDivElement | null>;
-	isLoadingData: boolean;
-	isFetchingData: boolean;
-}
-
-function useSpanPercentile(selectedSpan: SpanV3): UseSpanPercentileReturn {
-	const [isOpen, setIsOpen] = useState(false);
-	const [selectedTimeRange, setSelectedTimeRange] = useState(1);
-	const [
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-	] = useState('');
-	const [spanPercentileData, setSpanPercentileData] = useState<{
-		percentile: number;
-		description: string;
-		percentiles: Record<string, number>;
-	} | null>(null);
-	const [
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-	] = useState(false);
-	const [selectedResourceAttributes, setSelectedResourceAttributes] = useState<
-		Record<string, string>
-	>({});
-	const [spanResourceAttributes, updateSpanResourceAttributes] = useState<
-		IResourceAttribute[]
-	>([]);
-	const [initialWaitCompleted, setInitialWaitCompleted] = useState(false);
-	const [shouldFetchData, setShouldFetchData] = useState(false);
-	const [shouldUpdateUserPreference, setShouldUpdateUserPreference] = useState(
-		false,
-	);
-
-	const resourceAttributesSelectorRef = useRef<HTMLDivElement | null>(null);
-
-	useClickOutside({
-		ref: resourceAttributesSelectorRef,
-		onClickOutside: () => {
-			if (resourceAttributesSelectorRef.current) {
-				setShowResourceAttributesSelector(false);
-			}
-		},
-		eventType: 'mousedown',
-	});
-
-	const endTime = useMemo(
-		() => Math.floor(Number(selectedSpan.timestamp) / 1000) * 1000,
-		[selectedSpan.timestamp],
-	);
-
-	const startTime = useMemo(
-		() =>
-			dayjs(selectedSpan.timestamp)
-				.subtract(Number(selectedTimeRange), 'hour')
-				.unix() * 1000,
-		[selectedSpan.timestamp, selectedTimeRange],
-	);
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-	);
-
-	const {
-		data: userSelectedResourceAttributes,
-		isError: isErrorUserSelectedResourceAttributes,
-	} = useQuery({
-		queryFn: () =>
-			getUserPreference({
-				name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			}),
-		queryKey: [
-			'getUserPreferenceByPreferenceName',
-			USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-			selectedSpan.span_id,
-		],
-		enabled: selectedSpan.attributes !== undefined,
-	});
-
-	const {
-		isLoading: isLoadingData,
-		isFetching: isFetchingData,
-		data,
-		refetch: refetchData,
-		isError: isErrorData,
-	} = useQuery({
-		queryFn: () =>
-			getSpanPercentiles({
-				start: startTime || 0,
-				end: endTime || 0,
-				spanDuration: selectedSpan.duration_nano || 0,
-				serviceName: selectedSpan['service.name'] || '',
-				name: selectedSpan.name || '',
-				resourceAttributes: selectedResourceAttributes,
-			}),
-		queryKey: [
-			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
-			selectedSpan.span_id,
-			startTime,
-			endTime,
-		],
-		enabled:
-			shouldFetchData && !showResourceAttributesSelector && initialWaitCompleted,
-		onSuccess: (response) => {
-			if (response.httpStatusCode !== 200) {
-				return;
-			}
-			if (shouldUpdateUserPreference) {
-				updateUserPreferenceMutation({
-					name: USER_PREFERENCES.SPAN_PERCENTILE_RESOURCE_ATTRIBUTES,
-					value: [...Object.keys(selectedResourceAttributes)],
-				});
-				setShouldUpdateUserPreference(false);
-			}
-		},
-		keepPreviousData: false,
-		cacheTime: 0,
-	});
-
-	// 2-second delay before initial fetch
-	useEffect(() => {
-		setSpanPercentileData(null);
-		setIsOpen(false);
-		setInitialWaitCompleted(false);
-
-		const timer = setTimeout(() => {
-			setInitialWaitCompleted(true);
-		}, 2000);
-
-		return (): void => {
-			clearTimeout(timer);
-		};
-	}, [selectedSpan.span_id]);
-
-	useEffect(() => {
-		if (data?.httpStatusCode !== 200) {
-			setSpanPercentileData(null);
-			return;
-		}
-		if (data) {
-			setSpanPercentileData({
-				percentile: data.data?.position?.percentile || 0,
-				description: data.data?.position?.description || '',
-				percentiles: data.data?.percentiles || {},
-			});
-		}
-	}, [data]);
-
-	// Merge resource + attributes to get all span attributes (equivalent to V2 tagMap).
-	// Stringify all values since the backend expects map[string]string.
-	const allSpanAttributes = useMemo(() => {
-		const merged: Record<string, string> = {};
-		for (const [k, v] of Object.entries(selectedSpan.resource || {})) {
-			merged[k] = String(v);
-		}
-		for (const [k, v] of Object.entries(selectedSpan.attributes || {})) {
-			merged[k] = String(v);
-		}
-		return merged;
-	}, [selectedSpan.resource, selectedSpan.attributes]);
-
-	useEffect(() => {
-		if (userSelectedResourceAttributes) {
-			const userList = (userSelectedResourceAttributes?.data
-				?.value as string[]).map((attr: string) => attr);
-			let selectedMap: Record<string, string> = {};
-			userList.forEach((attr: string) => {
-				selectedMap[attr] = allSpanAttributes[attr] || '';
-			});
-			selectedMap = Object.fromEntries(
-				Object.entries(selectedMap).filter(
-					([key]) => allSpanAttributes[key] !== undefined,
-				),
-			);
-
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name ||
-						(key in selectedMap &&
-							selectedMap[key] !== '' &&
-							selectedMap[key] !== undefined),
-				}),
-			);
-
-			const selected = resourceAttrs.filter((a) => a.isSelected);
-			const unselected = resourceAttrs.filter((a) => !a.isSelected);
-			updateSpanResourceAttributes([...selected, ...unselected]);
-			setSelectedResourceAttributes(selectedMap);
-			setShouldFetchData(true);
-		}
-
-		if (isErrorUserSelectedResourceAttributes) {
-			const resourceAttrs = Object.entries(allSpanAttributes).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name,
-				}),
-			);
-			updateSpanResourceAttributes(resourceAttrs);
-			setShouldFetchData(true);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		userSelectedResourceAttributes,
-		isErrorUserSelectedResourceAttributes,
-		allSpanAttributes,
-	]);
-
-	const handleResourceAttributeChange = useCallback(
-		(key: string, value: string, isSelected: boolean): void => {
-			updateSpanResourceAttributes((prev) =>
-				prev.map((attr) => (attr.key === key ? { ...attr, isSelected } : attr)),
-			);
-
-			const newSelected = { ...selectedResourceAttributes };
-			if (isSelected) {
-				newSelected[key] = value;
-			} else {
-				delete newSelected[key];
-			}
-			setSelectedResourceAttributes(newSelected);
-			setShouldFetchData(true);
-			setShouldUpdateUserPreference(true);
-		},
-		[selectedResourceAttributes],
-	);
-
-	useEffect(() => {
-		if (
-			shouldFetchData &&
-			!showResourceAttributesSelector &&
-			initialWaitCompleted
-		) {
-			refetchData();
-			setShouldFetchData(false);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [shouldFetchData, showResourceAttributesSelector, initialWaitCompleted]);
-
-	const loading = isLoadingData || isFetchingData;
-	const percentileValue = Math.floor(spanPercentileData?.percentile || 0);
-	const duration = getYAxisFormattedValue(
-		`${selectedSpan.duration_nano / 1000000}`,
-		'ms',
-	);
-
-	const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
-
-	const handleTimeRangeChange = useCallback((range: number): void => {
-		setShouldFetchData(true);
-		setSelectedTimeRange(range);
-	}, []);
-
-	return {
-		isOpen,
-		setIsOpen,
-		toggleOpen,
-		loading,
-		percentileValue,
-		duration,
-		spanPercentileData,
-		isError: isErrorData,
-		selectedTimeRange,
-		setSelectedTimeRange: handleTimeRangeChange,
-		showResourceAttributesSelector,
-		setShowResourceAttributesSelector,
-		resourceAttributesSearchQuery,
-		setResourceAttributesSearchQuery,
-		spanResourceAttributes,
-		handleResourceAttributeChange,
-		resourceAttributesSelectorRef,
-		isLoadingData,
-		isFetchingData,
-	};
-}
-
-export default useSpanPercentile;

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/config.tsx

@@ -1,54 +0,0 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-import { Badge } from '@signozhq/ui';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-
-interface HighlightedOption {
-	key: string;
-	label: string;
-	render: (span: SpanV3) => ReactNode | null;
-}
-
-export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
-	{
-		key: 'service',
-		label: 'SERVICE',
-		render: (span): ReactNode | null =>
-			span['service.name'] ? (
-				<Badge color="vanilla">
-					<span className="span-details-panel__service-dot" />
-					{span['service.name']}
-				</Badge>
-			) : null,
-	},
-	{
-		key: 'statusCodeString',
-		label: 'STATUS CODE STRING',
-		render: (span): ReactNode | null =>
-			span.status_code_string ? (
-				<Badge color="vanilla">{span.status_code_string}</Badge>
-			) : null,
-	},
-	{
-		key: 'traceId',
-		label: 'TRACE ID',
-		render: (span): ReactNode | null =>
-			span.trace_id ? (
-				<Link
-					to={{
-						pathname: `/trace/${span.trace_id}`,
-						search: window.location.search,
-					}}
-					className="span-details-panel__trace-id"
-				>
-					{span.trace_id}
-				</Link>
-			) : null,
-	},
-	{
-		key: 'spanKind',
-		label: 'SPAN KIND',
-		render: (span): ReactNode | null =>
-			span.kind_string ? <Badge color="vanilla">{span.kind_string}</Badge> : null,
-	},
-];

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

@@ -1,45 +0,0 @@
-import { SPAN_ACTION } from './hooks/useSpanAttributeActions';
-
-// Action identifiers for built-in PrettyView actions (copy, pin)
-export const PRETTY_VIEW_ACTION = {
-	COPY: 'copy',
-	PIN: 'pin',
-} as const;
-
-// Which actions are visible per node type — drives the entire menu
-export const VISIBLE_ACTIONS = {
-	leaf: [
-		PRETTY_VIEW_ACTION.COPY,
-		PRETTY_VIEW_ACTION.PIN,
-		SPAN_ACTION.FILTER_IN,
-		SPAN_ACTION.FILTER_OUT,
-		SPAN_ACTION.GROUP_BY,
-	],
-	nested: [PRETTY_VIEW_ACTION.COPY],
-} as const;
-
-export enum SpanDetailVariant {
-	DRAWER = 'drawer',
-	DIALOG = 'dialog',
-	DOCKED = 'docked',
-}
-
-export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {
-	traces: [
-		'service.name',
-		'service.namespace',
-		'deployment.environment',
-		'timestamp',
-		'duration_nano',
-		'kind_string',
-		'status_code_string',
-		'http_method',
-		'http_url',
-		'http_host',
-		'db_name',
-		'db_operation',
-		'external_http_method',
-		'external_http_url',
-		'response_status_code',
-	],
-};

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/hooks/useSpanAttributeActions.ts

@@ -1,219 +0,0 @@
-import React, { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
-import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
-import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { PANEL_TYPES, QueryBuilderKeys } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useNotifications } from 'hooks/useNotifications';
-import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
-import { ArrowDownToDot, ArrowUpFromDot } from 'lucide-react';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
-
-export interface SpanAttributeAction {
-	label: string;
-	value: string;
-	icon?: React.ReactNode;
-	disabled?: boolean;
-	hidden?: boolean;
-	callback: (args: { key: string; value: string; dataType?: string }) => void;
-	/** Returns true if this action should be hidden for the given field key */
-	shouldHide: (key: string) => boolean;
-}
-
-// Keys that should NOT support filter/group-by actions.
-// These are system/internal/computed fields, not actual queryable attributes.
-export const NON_FILTERABLE_KEYS = new Set([
-	'datetime',
-	'duration',
-	'parent_span_id',
-	'has_children',
-	'has_sibling',
-	'sub_tree_node_count',
-	'flags',
-	'trace_state',
-	'timestamp',
-]);
-
-const shouldHideForKey = (key: string): boolean => NON_FILTERABLE_KEYS.has(key);
-
-// Action identifiers
-export const SPAN_ACTION = {
-	FILTER_IN: 'filter-in',
-	FILTER_OUT: 'filter-out',
-	GROUP_BY: 'group-by',
-} as const;
-
-export function useSpanAttributeActions(): SpanAttributeAction[] {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-	const queryClient = useQueryClient();
-	const { notifications } = useNotifications();
-
-	const getAutocompleteKey = useCallback(
-		async (fieldKey: string): Promise<BaseAutocompleteData> => {
-			const response = await queryClient.fetchQuery(
-				[QueryBuilderKeys.GET_AGGREGATE_KEYS, fieldKey],
-				async () =>
-					getAggregateKeys({
-						searchText: fieldKey,
-						aggregateOperator:
-							currentQuery.builder.queryData[0].aggregateOperator || '',
-						dataSource: DataSource.TRACES,
-						aggregateAttribute:
-							currentQuery.builder.queryData[0].aggregateAttribute?.key || '',
-					}),
-			);
-
-			return chooseAutocompleteFromCustomValue(
-				response.payload?.attributeKeys || [],
-				fieldKey,
-				DataTypes.String,
-			);
-		},
-		[queryClient, currentQuery.builder.queryData],
-	);
-
-	const handleFilter = useCallback(
-		async (
-			{ key, value }: { key: string; value: string },
-			operator: string,
-		): Promise<void> => {
-			try {
-				const autocompleteKey = await getAutocompleteKey(key);
-				const resolvedOperator = getOperatorValue(operator);
-
-				const nextQuery: Query = {
-					...currentQuery,
-					builder: {
-						...currentQuery.builder,
-						queryData: currentQuery.builder.queryData.map((item) => {
-							const cleanedFilters = (item.filters?.items || []).filter(
-								(f) => f.key?.key !== autocompleteKey.key,
-							);
-							const newFilters = [
-								...cleanedFilters,
-								{
-									id: uuid(),
-									key: autocompleteKey,
-									op: resolvedOperator,
-									value,
-								},
-							];
-							const converted = convertFiltersToExpressionWithExistingQuery(
-								{ items: newFilters, op: item.filters?.op || 'AND' },
-								item.filter?.expression || '',
-							);
-							return {
-								...item,
-								dataSource: DataSource.TRACES,
-								filters: converted.filters,
-								filter: converted.filter,
-							};
-						}),
-					},
-				};
-
-				redirectWithQueryBuilderData(
-					nextQuery,
-					{ panelTypes: PANEL_TYPES.LIST },
-					ROUTES.TRACES_EXPLORER,
-				);
-			} catch {
-				notifications.error({ message: SOMETHING_WENT_WRONG });
-			}
-		},
-		[
-			currentQuery,
-			getAutocompleteKey,
-			redirectWithQueryBuilderData,
-			notifications,
-		],
-	);
-
-	const handleFilterIn = useCallback(
-		(args: { key: string; value: string }): void => {
-			handleFilter(args, '=');
-		},
-		[handleFilter],
-	);
-
-	const handleFilterOut = useCallback(
-		(args: { key: string; value: string }): void => {
-			handleFilter(args, '!=');
-		},
-		[handleFilter],
-	);
-
-	const handleGroupBy = useCallback(
-		async ({ key }: { key: string }): Promise<void> => {
-			try {
-				const autocompleteKey = await getAutocompleteKey(key);
-
-				const nextQuery: Query = {
-					...currentQuery,
-					builder: {
-						...currentQuery.builder,
-						queryData: currentQuery.builder.queryData.map((item) => ({
-							...item,
-							dataSource: DataSource.TRACES,
-							groupBy: [...item.groupBy, autocompleteKey],
-						})),
-					},
-				};
-
-				redirectWithQueryBuilderData(
-					nextQuery,
-					{ panelTypes: PANEL_TYPES.TIME_SERIES },
-					ROUTES.TRACES_EXPLORER,
-				);
-			} catch {
-				notifications.error({ message: SOMETHING_WENT_WRONG });
-			}
-		},
-		[
-			currentQuery,
-			getAutocompleteKey,
-			redirectWithQueryBuilderData,
-			notifications,
-		],
-	);
-
-	return [
-		{
-			label: 'Filter for value',
-			value: SPAN_ACTION.FILTER_IN,
-			icon: React.createElement(ArrowDownToDot, {
-				size: 14,
-				style: { transform: 'rotate(90deg)' },
-			}),
-			callback: handleFilterIn,
-			shouldHide: shouldHideForKey,
-		},
-		{
-			label: 'Filter out value',
-			value: SPAN_ACTION.FILTER_OUT,
-			icon: React.createElement(ArrowUpFromDot, {
-				size: 14,
-				style: { transform: 'rotate(90deg)' },
-			}),
-			callback: handleFilterOut,
-			shouldHide: shouldHideForKey,
-		},
-		{
-			label: 'Group by attribute',
-			value: SPAN_ACTION.GROUP_BY,
-			icon: React.createElement(GroupByIcon),
-			callback: handleGroupBy,
-			shouldHide: shouldHideForKey,
-		},
-	];
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.styles.scss

@@ -1,60 +0,0 @@
-.event-tooltip-content {
-	font-size: 12px;
-	color: var(--l1-foreground);
-	max-width: 300px;
-
-	&__header {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: var(--l2-background);
-		border: 1px solid var(--l2-border);
-		border-radius: 3px;
-		padding: 2px 6px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: var(--l2-foreground);
-		margin-bottom: 6px;
-	}
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 2px;
-		color: var(--text-robin-400);
-
-		&.error {
-			color: var(--bg-cherry-500);
-		}
-	}
-
-	&__time {
-		font-size: 11px;
-		color: var(--l2-foreground);
-		margin-bottom: 4px;
-	}
-
-	&__divider {
-		border-top: 1px solid var(--l2-border);
-		margin: 6px 0;
-	}
-
-	&__attributes {
-		font-size: 11px;
-	}
-
-	&__kv {
-		margin-bottom: 2px;
-		line-height: 1.4;
-		word-break: break-all;
-	}
-
-	&__key {
-		color: var(--l2-foreground);
-	}
-
-	&__value {
-		color: var(--l1-foreground);
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/EventTooltipContent.tsx

@@ -1,49 +0,0 @@
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { Diamond } from 'lucide-react';
-import { toFixed } from 'utils/toFixed';
-
-import './EventTooltipContent.styles.scss';
-
-export interface EventTooltipContentProps {
-	eventName: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export function EventTooltipContent({
-	eventName,
-	timeOffsetMs,
-	isError,
-	attributeMap,
-}: EventTooltipContentProps): JSX.Element {
-	const { time, timeUnitName } = convertTimeToRelevantUnit(timeOffsetMs);
-
-	return (
-		<div className="event-tooltip-content">
-			<div className="event-tooltip-content__header">
-				<Diamond size={10} />
-				<span>EVENT DETAILS</span>
-			</div>
-			<div className={`event-tooltip-content__name ${isError ? 'error' : ''}`}>
-				{eventName}
-			</div>
-			<div className="event-tooltip-content__time">
-				{toFixed(time, 2)} {timeUnitName} from start
-			</div>
-			{Object.keys(attributeMap).length > 0 && (
-				<>
-					<div className="event-tooltip-content__divider" />
-					<div className="event-tooltip-content__attributes">
-						{Object.entries(attributeMap).map(([key, value]) => (
-							<div key={key} className="event-tooltip-content__kv">
-								<span className="event-tooltip-content__key">{key}:</span>{' '}
-								<span className="event-tooltip-content__value">{value}</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-		</div>
-	);
-}

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

@@ -1,44 +0,0 @@
-.span-hover-card-wrapper {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	min-width: 0;
-}
-
-.span-hover-card-popover {
-	.ant-popover-inner {
-		background-color: var(--l1-background);
-		padding: 8px 12px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-		border: 1px solid var(--l2-border);
-	}
-
-	.ant-popover-inner-content {
-		padding: 0;
-	}
-}
-
-// Flamegraph tooltip — rendered as a portal, uses same semantic tokens
-.flamegraph-tooltip {
-	background-color: var(--l1-background);
-	padding: 8px 12px;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-	border: 1px solid var(--l2-border);
-}
-
-.span-hover-card-content {
-	font-size: 12px;
-	color: var(--l1-foreground);
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 4px;
-	}
-
-	&__row {
-		line-height: 1.5;
-		color: var(--l2-foreground);
-	}
-}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -1,141 +0,0 @@
-import { memo, ReactNode, useCallback, useRef, useState } from 'react';
-import { Popover } from 'antd';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { SpanV3 } from 'types/api/trace/getTraceV3';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface SpanTooltipContentProps {
-	spanName: string;
-	color: string;
-	hasError: boolean;
-	relativeStartMs: number;
-	durationMs: number;
-}
-
-export function SpanTooltipContent({
-	spanName,
-	color,
-	hasError,
-	relativeStartMs,
-	durationMs,
-}: SpanTooltipContentProps): JSX.Element {
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		durationMs,
-	);
-
-	return (
-		<div className="span-hover-card-content">
-			<div className="span-hover-card-content__name" style={{ color }}>
-				{spanName}
-			</div>
-			<div className="span-hover-card-content__row">
-				Status: {hasError ? 'error' : 'ok'}
-			</div>
-			<div className="span-hover-card-content__row">
-				Start: {toFixed(relativeStartMs, 2)} ms
-			</div>
-			<div className="span-hover-card-content__row">
-				Duration: {toFixed(formattedDuration, 2)} {timeUnitName}
-			</div>
-		</div>
-	);
-}
-
-interface SpanHoverCardProps {
-	span: SpanV3;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-/**
- * Lazy hover card — only mounts the expensive antd Popover when the user
- * actually hovers over the element (after a short delay). During fast scrolling,
- * rows mount and unmount without ever creating a Popover instance, avoiding
- * expensive DOM/effect overhead from antd Tooltip/Trigger internals.
- */
-const SpanHoverCard = memo(function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const [showPopover, setShowPopover] = useState(false);
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	const handleMouseEnter = useCallback((): void => {
-		timerRef.current = setTimeout(() => {
-			setShowPopover(true);
-		}, 200);
-	}, []);
-
-	const handleMouseLeave = useCallback((): void => {
-		if (timerRef.current) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-		setShowPopover(false);
-	}, []);
-
-	if (!showPopover) {
-		return (
-			// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-			<span
-				className="span-hover-card-wrapper"
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-			>
-				{children}
-			</span>
-		);
-	}
-
-	const durationMs = span.duration_nano / 1e6;
-	const relativeStartMs = span.timestamp - traceMetadata.startTime;
-
-	let color = generateColor(
-		span['service.name'],
-		themeColors.traceDetailColorsV3,
-	);
-	if (span.has_error) {
-		color = 'var(--bg-cherry-500)';
-	}
-
-	return (
-		<Popover
-			open
-			content={
-				<SpanTooltipContent
-					spanName={span.name}
-					color={color}
-					hasError={span.has_error}
-					relativeStartMs={relativeStartMs}
-					durationMs={durationMs}
-				/>
-			}
-			trigger="hover"
-			rootClassName="span-hover-card-popover"
-			autoAdjustOverflow
-			arrow={false}
-			onOpenChange={(open): void => {
-				if (!open) {
-					setShowPopover(false);
-				}
-			}}
-		>
-			{/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-			<span className="span-hover-card-wrapper" onMouseLeave={handleMouseLeave}>
-				{children}
-			</span>
-		</Popover>
-	);
-});
-
-export default SpanHoverCard;

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsFilter.styles.scss

@@ -1,39 +0,0 @@
-.trace-details-filter {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-
-	&__search {
-		flex: 1;
-		min-width: 0;
-	}
-
-	&__scope {
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		flex-shrink: 0;
-		white-space: nowrap;
-
-		.ant-typography {
-			font-size: 12px;
-			color: var(--l2-foreground);
-		}
-
-		.ant-btn {
-			padding: 2px 4px;
-			height: auto;
-		}
-	}
-
-	&__no-results {
-		font-size: 12px;
-		color: var(--l2-foreground);
-		white-space: nowrap;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsFilter.tsx

@@ -1,262 +0,0 @@
-import { useCallback, useMemo, 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 QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
-import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
-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 {
-	IBuilderQuery,
-	Query,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import {
-	DataSource,
-	TracesAggregatorOperator,
-} from 'types/common/queryBuilder';
-
-import './TraceDetailsFilter.styles.scss';
-
-interface TraceDetailsFilterProps {
-	startTime: number;
-	endTime: number;
-	traceId: string;
-	onFilteredSpansChange: (spanIds: string[], isFilterActive: boolean) => void;
-}
-
-const TRACE_ID_FILTER_ITEM = {
-	id: 'trace-details-trace-id',
-	key: {
-		key: 'trace_id',
-		dataType: DataTypes.String,
-		type: '',
-		id: 'trace_id--string----true',
-	},
-	op: '=',
-	value: '',
-};
-
-function buildInitialQuery(): IBuilderQuery {
-	return {
-		...initialQueriesMap.traces.builder.queryData[0],
-		aggregateOperator: TracesAggregatorOperator.NOOP,
-		orderBy: [{ columnName: 'timestamp', order: 'asc' }],
-		dataSource: DataSource.TRACES,
-		filters: { items: [], op: 'AND' },
-		filter: { expression: '' },
-	};
-}
-
-function prepareApiQuery(builderQuery: IBuilderQuery, traceId: string): Query {
-	return {
-		...initialQueriesMap.traces,
-		builder: {
-			...initialQueriesMap.traces.builder,
-			queryData: [
-				{
-					...builderQuery,
-					// Inject trace_id filter for scoping results to this trace
-					filters: {
-						op: builderQuery.filters?.op || 'AND',
-						items: [
-							...(builderQuery.filters?.items || []),
-							{ ...TRACE_ID_FILTER_ITEM, value: traceId },
-						],
-					},
-				},
-			],
-		},
-	};
-}
-
-function TraceDetailsFilter({
-	startTime,
-	endTime,
-	traceId,
-	onFilteredSpansChange,
-}: TraceDetailsFilterProps): JSX.Element {
-	const [builderQuery, setBuilderQuery] = useState<IBuilderQuery>(
-		buildInitialQuery,
-	);
-	const [noData, setNoData] = useState(false);
-	const [filteredSpanIds, setFilteredSpanIds] = useState<string[]>([]);
-	const [currentSearchedIndex, setCurrentSearchedIndex] = useState(0);
-
-	const { search } = useLocation();
-	const history = useHistory();
-
-	const expression = builderQuery.filter?.expression || '';
-	const hasActiveFilter =
-		(builderQuery.filters?.items || []).length > 0 ||
-		expression.trim().length > 0;
-
-	// Called by QuerySearch when user types in the CodeMirror editor
-	const handleExpressionChange = useCallback(
-		(value: string): void => {
-			setBuilderQuery((prev) => {
-				if (!value.trim() && (prev.filters?.items || []).length === 0) {
-					onFilteredSpansChange([], false);
-					setFilteredSpanIds([]);
-					setCurrentSearchedIndex(0);
-					setNoData(false);
-				}
-				return {
-					...prev,
-					filter: { expression: value },
-				};
-			});
-		},
-		[onFilteredSpansChange],
-	);
-
-	// Called by SpanScopeSelector when scope changes (All Spans / Root Spans etc.)
-	// Merges the scope filter items into filter.expression using the shared util
-	const handleScopeChange = useCallback((value: TagFilter): void => {
-		setBuilderQuery((prev) => {
-			const currentExpression = prev.filter?.expression || '';
-			const {
-				filters: mergedFilters,
-				filter: mergedFilter,
-			} = convertFiltersToExpressionWithExistingQuery(value, currentExpression);
-			return {
-				...prev,
-				filters: mergedFilters,
-				filter: mergedFilter,
-			};
-		});
-	}, []);
-
-	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 query = useMemo(() => prepareApiQuery(builderQuery, traceId), [
-		builderQuery,
-		traceId,
-	]);
-
-	const { isFetching, error } = useGetQueryRange(
-		{
-			query,
-			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: [builderQuery.filter, builderQuery.filters],
-			enabled: hasActiveFilter,
-			onSuccess: (data) => {
-				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, true);
-					handlePrevNext(0, spanIds[0]);
-					setNoData(false);
-				} else {
-					setNoData(true);
-					setFilteredSpanIds([]);
-					onFilteredSpansChange([], true);
-					setCurrentSearchedIndex(0);
-				}
-			},
-		},
-	);
-
-	return (
-		<div className="trace-details-filter">
-			<div className="trace-details-filter__search">
-				<QuerySearch
-					queryData={builderQuery}
-					onChange={handleExpressionChange}
-					dataSource={DataSource.TRACES}
-					placeholder="Search Filter : select options from suggested values, for IN/NOT IN operators - press 'Enter' after selecting options"
-				/>
-			</div>
-			<div className="trace-details-filter__scope">
-				<SpanScopeSelector
-					query={builderQuery}
-					onChange={handleScopeChange}
-					skipQueryBuilderRedirect
-				/>
-			</div>
-			{filteredSpanIds.length > 0 && (
-				<div className="trace-details-filter__nav">
-					<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 />
-				</Tooltip>
-			)}
-			{noData && (
-				<Typography.Text className="trace-details-filter__no-results">
-					No results found
-				</Typography.Text>
-			)}
-		</div>
-	);
-}
-
-export default TraceDetailsFilter;

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

@@ -1,28 +0,0 @@
-.trace-details-header {
-	display: flex;
-	align-items: center;
-	padding: 8px 16px;
-	gap: 8px;
-
-	&__back-btn {
-		flex-shrink: 0;
-	}
-
-	.key-value-label {
-		flex-shrink: 0;
-	}
-
-	&__filter {
-		&.trace-v3-filter-row {
-			padding: 0;
-		}
-		max-width: 850px;
-		flex: 1;
-		min-width: 0;
-	}
-
-	&__old-view-btn {
-		margin-left: auto;
-		flex-shrink: 0;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -1,92 +0,0 @@
-import { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { ArrowLeft } from 'lucide-react';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
-
-import Filters from '../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters';
-
-import './TraceDetailsHeader.styles.scss';
-
-interface FilterMetadata {
-	startTime: number;
-	endTime: number;
-	traceId: string;
-}
-
-interface TraceDetailsHeaderProps {
-	filterMetadata: FilterMetadata;
-	onFilteredSpansChange: (spanIds: string[], isFilterActive: boolean) => void;
-	noData?: boolean;
-}
-
-function TraceDetailsHeader({
-	filterMetadata,
-	onFilteredSpansChange,
-	noData,
-}: TraceDetailsHeaderProps): JSX.Element {
-	const { id: traceID } = useParams<TraceDetailV2URLProps>();
-
-	const handleSwitchToOldView = useCallback((): void => {
-		const oldUrl = `/trace-old/${traceID}${window.location.search}`;
-		history.replace(oldUrl);
-	}, [traceID]);
-
-	const handlePreviousBtnClick = useCallback((): void => {
-		const isSpaNavigate =
-			document.referrer &&
-			new URL(document.referrer).origin === window.location.origin;
-		const hasBackHistory = window.history.length > 1;
-
-		if (isSpaNavigate && hasBackHistory) {
-			history.goBack();
-		} else {
-			history.push(ROUTES.TRACES_EXPLORER);
-		}
-	}, []);
-
-	return (
-		<div className="trace-details-header">
-			<Button
-				variant="solid"
-				color="secondary"
-				size="sm"
-				className="trace-details-header__back-btn"
-				onClick={handlePreviousBtnClick}
-			>
-				<ArrowLeft size={14} />
-			</Button>
-			<KeyValueLabel
-				badgeKey="Trace ID"
-				badgeValue={traceID || ''}
-				maxCharacters={100}
-			/>
-			{!noData && (
-				<>
-					<div className="trace-details-header__filter">
-						<Filters
-							startTime={filterMetadata.startTime}
-							endTime={filterMetadata.endTime}
-							traceID={filterMetadata.traceId}
-							onFilteredSpansChange={onFilteredSpansChange}
-						/>
-					</div>
-					<Button
-						variant="solid"
-						color="secondary"
-						size="sm"
-						className="trace-details-header__old-view-btn"
-						onClick={handleSwitchToOldView}
-					>
-						Old View
-					</Button>
-				</>
-			)}
-		</div>
-	);
-}
-
-export default TraceDetailsHeader;

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

@@ -1,107 +0,0 @@
-.trace-details-v3 {
-	height: calc(100vh);
-	display: flex;
-	flex-direction: column;
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		overflow: hidden;
-	}
-
-	&__flame-collapse,
-	&__waterfall-collapse {
-		border: none;
-		border-radius: 0;
-		background: transparent;
-
-		.ant-collapse-item {
-			border: none;
-		}
-
-		.ant-collapse-header {
-			border: 1px solid var(--l2-border);
-		}
-
-		.ant-collapse-content {
-			background: transparent;
-			border-top: none;
-			// Disable collapse animation — virtualizer and canvas flicker during height transitions
-			transition: none !important;
-		}
-	}
-
-	&__collapse-label {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-	}
-
-	&__collapse-count {
-		display: flex;
-		gap: 6px;
-		align-items: center;
-		font-size: 12px;
-		font-weight: 400;
-		color: var(--l2-foreground);
-	}
-
-	&__flame-collapse {
-		flex-shrink: 0;
-
-		.ant-collapse-content-box {
-			padding: 0 !important;
-		}
-	}
-
-	&__waterfall-collapse {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-
-		.ant-collapse-item {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-		}
-
-		.ant-collapse-content.ant-collapse-content-active {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-		}
-
-		.ant-collapse-content-box {
-			padding: 0 !important;
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			min-height: 0;
-		}
-
-		&--docked {
-			flex: none;
-
-			.ant-collapse-item {
-				flex: none;
-				display: block;
-			}
-
-			.ant-collapse-content-box {
-				flex: none;
-				display: block;
-			}
-		}
-	}
-
-	&__docked-span-details {
-		flex: 1;
-		overflow: auto;
-		min-height: 0;
-	}
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -1,284 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import TimelineV3 from 'components/TimelineV3/TimelineV3';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { useCrosshair } from '../hooks/useCrosshair';
-import { EventTooltipContent } from '../SpanHoverCard/EventTooltipContent';
-import { SpanTooltipContent } from '../SpanHoverCard/SpanHoverCard';
-import { DEFAULT_ROW_HEIGHT } from './constants';
-import { useCanvasSetup } from './hooks/useCanvasSetup';
-import { useFlamegraphCrosshair } from './hooks/useFlamegraphCrosshair';
-import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
-import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
-import { useFlamegraphHover } from './hooks/useFlamegraphHover';
-import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
-import { useScrollToSpan } from './hooks/useScrollToSpan';
-import { EventRect, FlamegraphCanvasProps, SpanRect } from './types';
-
-function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
-	const {
-		layout,
-		traceMetadata,
-		firstSpanAtFetchLevel,
-		onSpanClick,
-		filteredSpanIds,
-		isFilterActive,
-	} = props;
-
-	const isDarkMode = useIsDarkMode();
-	const canvasRef = useRef<HTMLCanvasElement>(null);
-	const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const spanRectsRef = useRef<SpanRect[]>([]);
-	const eventRectsRef = useRef<EventRect[]>([]);
-
-	const [viewStartTs, setViewStartTs] = useState<number>(
-		traceMetadata.startTime,
-	);
-	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
-	const [scrollTop, setScrollTop] = useState<number>(0);
-	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
-
-	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
-	const viewStartRef = useRef(viewStartTs);
-	const viewEndRef = useRef(viewEndTs);
-	const rowHeightRef = useRef(rowHeight);
-	const scrollTopRef = useRef(scrollTop);
-
-	useEffect(() => {
-		viewStartRef.current = viewStartTs;
-	}, [viewStartTs]);
-
-	useEffect(() => {
-		viewEndRef.current = viewEndTs;
-	}, [viewEndTs]);
-
-	useEffect(() => {
-		rowHeightRef.current = rowHeight;
-	}, [rowHeight]);
-
-	useEffect(() => {
-		scrollTopRef.current = scrollTop;
-	}, [scrollTop]);
-
-	useEffect(() => {
-		//TODO: see if this can be removed as once loaded the view start and end ts will not change
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-	}, [traceMetadata.startTime, traceMetadata.endTime]);
-
-	const totalHeight = layout.totalVisualRows * rowHeight;
-
-	const { isOverFlamegraphRef } = useFlamegraphZoom({
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	});
-
-	const {
-		handleMouseDown,
-		handleMouseMove: handleDragMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave,
-		isDraggingRef,
-	} = useFlamegraphDrag({
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	});
-
-	const {
-		hoveredSpanId,
-		hoveredEventKey,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleMouseDownForClick,
-		handleClick,
-		tooltipContent,
-	} = useFlamegraphHover({
-		canvasRef,
-		spanRectsRef,
-		eventRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		onSpanClick,
-		isDarkMode,
-	});
-
-	const { drawFlamegraph } = useFlamegraphDraw({
-		canvasRef,
-		containerRef,
-		spans: layout.visualRows,
-		connectors: layout.connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId: firstSpanAtFetchLevel || undefined,
-		hoveredSpanId: hoveredSpanId ?? '',
-		isDarkMode,
-		spanRectsRef,
-		eventRectsRef,
-		hoveredEventKey,
-		filteredSpanIds,
-		isFilterActive,
-	});
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans: layout.visualRows,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	useCanvasSetup(canvasRef, containerRef, drawFlamegraph, overlayCanvasRef);
-
-	const {
-		cursorXPercent,
-		cursorX,
-		onMouseMove: onCrosshairMove,
-		onMouseLeave: onCrosshairLeave,
-	} = useCrosshair({ containerRef });
-
-	useFlamegraphCrosshair({ overlayCanvasRef, cursorX });
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent): void => {
-			handleDragMouseMove(e);
-			handleHoverMouseMove(e);
-			if (!isDraggingRef.current) {
-				onCrosshairMove(e);
-			}
-		},
-		[handleDragMouseMove, handleHoverMouseMove, onCrosshairMove, isDraggingRef],
-	);
-
-	const handleMouseLeave = useCallback((): void => {
-		isOverFlamegraphRef.current = false;
-		onCrosshairLeave();
-		handleDragMouseLeave();
-		handleHoverMouseLeave();
-	}, [
-		isOverFlamegraphRef,
-		onCrosshairLeave,
-		handleDragMouseLeave,
-		handleHoverMouseLeave,
-	]);
-
-	const tooltipElement = tooltipContent
-		? createPortal(
-				<div
-					className="span-hover-card-popover flamegraph-tooltip"
-					style={{
-						position: 'fixed',
-						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
-						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
-						zIndex: 1000,
-						pointerEvents: 'none',
-					}}
-				>
-					{tooltipContent.event ? (
-						<EventTooltipContent
-							eventName={tooltipContent.event.name}
-							timeOffsetMs={tooltipContent.event.timeOffsetMs}
-							isError={tooltipContent.event.isError}
-							attributeMap={tooltipContent.event.attributeMap}
-						/>
-					) : (
-						<SpanTooltipContent
-							spanName={tooltipContent.spanName}
-							color={tooltipContent.spanColor}
-							hasError={tooltipContent.status === 'error'}
-							relativeStartMs={tooltipContent.startMs}
-							durationMs={tooltipContent.durationMs}
-						/>
-					)}
-				</div>,
-				document.body,
-		  )
-		: null;
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%',
-				padding: '0 15px',
-			}}
-		>
-			{tooltipElement}
-			<TimelineV3
-				startTimestamp={viewStartTs}
-				endTimestamp={viewEndTs}
-				offsetTimestamp={viewStartTs - traceMetadata.startTime}
-				timelineHeight={10}
-				cursorXPercent={cursorXPercent}
-			/>
-			<div
-				ref={containerRef}
-				style={{
-					flex: 1,
-					overflow: 'hidden',
-					position: 'relative',
-				}}
-				onMouseEnter={(): void => {
-					isOverFlamegraphRef.current = true;
-				}}
-				onMouseLeave={handleMouseLeave}
-			>
-				<canvas
-					ref={canvasRef}
-					style={{
-						display: 'block',
-						width: '100%',
-						cursor: 'grab',
-					}}
-					onMouseDown={(e): void => {
-						handleMouseDown(e);
-						handleMouseDownForClick(e);
-					}}
-					onMouseMove={handleMouseMove}
-					onMouseUp={handleMouseUp}
-					onClick={handleClick}
-				/>
-				<canvas
-					ref={overlayCanvasRef}
-					style={{
-						position: 'absolute',
-						top: 0,
-						left: 0,
-						width: '100%',
-						pointerEvents: 'none',
-					}}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default FlamegraphCanvas;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -1,133 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory, useLocation, useParams } from 'react-router-dom';
-import { Skeleton } from 'antd';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
-
-import Error from '../TraceWaterfall/TraceWaterfallStates/Error/Error';
-import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
-import FlamegraphCanvas from './FlamegraphCanvas';
-import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
-
-interface TraceFlamegraphProps {
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}
-
-function TraceFlamegraph({
-	filteredSpanIds,
-	isFilterActive,
-}: TraceFlamegraphProps): JSX.Element {
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
-	const urlQuery = useUrlQuery();
-	const history = useHistory();
-	const { search } = useLocation();
-	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
-		urlQuery.get('spanId') || '',
-	);
-
-	useEffect(() => {
-		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
-	}, [urlQuery]);
-
-	const handleSpanClick = useCallback(
-		(spanId: string): void => {
-			setFirstSpanAtFetchLevel(spanId);
-			const searchParams = new URLSearchParams(search);
-			//tood: use from query params constants
-			if (searchParams.get('spanId') !== spanId) {
-				searchParams.set('spanId', spanId);
-				history.replace({ search: searchParams.toString() });
-			}
-		},
-		[history, search],
-	);
-
-	const { data, isFetching, error: fetchError } = useGetTraceFlamegraph({
-		traceId,
-		// selectedSpanId: firstSpanAtFetchLevel,
-		limit: FLAMEGRAPH_SPAN_LIMIT,
-	});
-
-	const spans = useMemo(() => data?.payload?.spans || [], [
-		data?.payload?.spans,
-	]);
-
-	const { layout, isComputing, error: workerError } = useVisualLayoutWorker(
-		spans,
-	);
-
-	const content = useMemo(() => {
-		// Loading: fetching data or worker computing layout
-		if (isFetching || isComputing) {
-			if (layout.totalVisualRows > 0) {
-				return (
-					<FlamegraphCanvas
-						layout={layout}
-						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-						onSpanClick={handleSpanClick}
-						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
-						}}
-						filteredSpanIds={filteredSpanIds}
-						isFilterActive={isFilterActive}
-					/>
-				);
-			}
-			return (
-				<div style={{ width: '100%', height: '100%', padding: '8px 12px' }}>
-					<Skeleton
-						active
-						paragraph={{
-							rows: 8,
-							width: ['100%', '95%', '85%', '70%', '50%', '35%', '20%', '10%'],
-						}}
-						title={false}
-					/>
-				</div>
-			);
-		}
-		// Error: network or worker failure
-		if (fetchError || workerError) {
-			return <Error error={(fetchError || workerError) as any} />;
-		}
-		if (data?.payload?.spans && data.payload.spans.length === 0) {
-			return <div>No data found for trace {traceId}</div>;
-		}
-		return (
-			<FlamegraphCanvas
-				layout={layout}
-				firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-				setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-				onSpanClick={handleSpanClick}
-				traceMetadata={{
-					startTime: data?.payload?.startTimestampMillis || 0,
-					endTime: data?.payload?.endTimestampMillis || 0,
-				}}
-				filteredSpanIds={filteredSpanIds}
-				isFilterActive={isFilterActive}
-			/>
-		);
-	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		data?.payload?.spans,
-		fetchError,
-		filteredSpanIds,
-		firstSpanAtFetchLevel,
-		handleSpanClick,
-		isComputing,
-		isFilterActive,
-		isFetching,
-		layout,
-		traceId,
-		workerError,
-	]);
-
-	return <>{content}</>;
-}
-
-export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -1,475 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { computeVisualLayout } from '../computeVisualLayout';
-
-function makeSpan(
-	overrides: Partial<FlamegraphSpan> & {
-		spanId: string;
-		timestamp: number;
-		durationNano: number;
-	},
-): FlamegraphSpan {
-	return {
-		parentSpanId: '',
-		traceId: 'trace-1',
-		hasError: false,
-		serviceName: 'svc',
-		name: 'op',
-		level: 0,
-		event: [],
-		...overrides,
-	};
-}
-
-describe('computeVisualLayout', () => {
-	it('should handle empty input', () => {
-		const layout = computeVisualLayout([]);
-		expect(layout.totalVisualRows).toBe(0);
-		expect(layout.visualRows).toEqual([]);
-	});
-
-	it('should handle single root, no children — 1 visual row', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const layout = computeVisualLayout([[root]]);
-		expect(layout.totalVisualRows).toBe(1);
-		expect(layout.visualRows[0]).toEqual([root]);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-	});
-
-	it('should keep non-overlapping siblings on the same row (compact)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 100e6,
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 400,
-			durationNano: 100e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		// root on row 0, all children on row 1
-		expect(layout.totalVisualRows).toBe(2);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['c']).toBe(1);
-	});
-
-	it('should pack non-overlapping siblings into shared lanes (greedy packing)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 300e6,
-		});
-		// A and B overlap; C does not overlap with either
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 100e6, // ends at 100ms
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 100e6, // starts at 50ms < 100ms end of A → overlap → lane 1
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 100e6, // 200 >= 100, fits lane 0 with A
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		// root on row 0, C placed first (latest) → row 1, B doesn't overlap C → row 1, A overlaps B → row 2
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['c']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['a']).toBe(2);
-	});
-
-	it('should handle full overlap — all siblings get own row', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b]]);
-
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(2);
-	});
-
-	it('should stack children correctly below overlapping parents', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 300e6,
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 200e6,
-		});
-		// Child of A
-		const childA = makeSpan({
-			spanId: 'childA',
-			parentSpanId: 'a',
-			timestamp: 10,
-			durationNano: 50e6,
-		});
-		// Child of B
-		const childB = makeSpan({
-			spanId: 'childB',
-			parentSpanId: 'b',
-			timestamp: 60,
-			durationNano: 50e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b], [childA, childB]]);
-
-		// DFS processes b's subtree first (latest):
-		// root → row 0
-		// b → row 1 (parentRow 0 + 1)
-		// childB → row 2 (parentRow 1 + 1)
-		// a → try row 1 (parentRow 0 + 1), overlaps b → try row 2, overlaps childB → row 3
-		// childA → row 4 (parentRow 3 + 1)
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['childB']).toBe(2);
-		expect(layout.spanToVisualRow['a']).toBe(3);
-		expect(layout.spanToVisualRow['childA']).toBe(4);
-		expect(layout.totalVisualRows).toBe(5);
-	});
-
-	it('should handle multiple roots as a sibling group', () => {
-		// Two overlapping roots
-		const r1 = makeSpan({
-			spanId: 'r1',
-			timestamp: 0,
-			durationNano: 100e6,
-		});
-		const r2 = makeSpan({
-			spanId: 'r2',
-			timestamp: 50,
-			durationNano: 100e6,
-		});
-
-		const layout = computeVisualLayout([[r1, r2]]);
-
-		expect(layout.spanToVisualRow['r1']).toBe(0);
-		expect(layout.spanToVisualRow['r2']).toBe(1);
-		expect(layout.totalVisualRows).toBe(2);
-	});
-
-	it('should produce compact layout for deep nesting without overlap', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 1000e6,
-		});
-		const child = makeSpan({
-			spanId: 'child',
-			parentSpanId: 'root',
-			timestamp: 10,
-			durationNano: 500e6,
-		});
-		const grandchild = makeSpan({
-			spanId: 'grandchild',
-			parentSpanId: 'child',
-			timestamp: 20,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [child], [grandchild]]);
-
-		// No overlap at any level → visual rows == tree depth
-		expect(layout.totalVisualRows).toBe(3);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['child']).toBe(1);
-		expect(layout.spanToVisualRow['grandchild']).toBe(2);
-	});
-
-	it('should pack many sequential siblings into 1 row (no diagonal staircase)', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		// 6 sequential children — like checkoutservice/PlaceOrder scenario
-		const spans = [
-			makeSpan({
-				spanId: 's1',
-				parentSpanId: 'root',
-				timestamp: 3,
-				durationNano: 30e6,
-			}),
-			makeSpan({
-				spanId: 's2',
-				parentSpanId: 'root',
-				timestamp: 35,
-				durationNano: 4e6,
-			}),
-			makeSpan({
-				spanId: 's3',
-				parentSpanId: 'root',
-				timestamp: 39,
-				durationNano: 1e6,
-			}),
-			makeSpan({
-				spanId: 's4',
-				parentSpanId: 'root',
-				timestamp: 40,
-				durationNano: 4e6,
-			}),
-			makeSpan({
-				spanId: 's5',
-				parentSpanId: 'root',
-				timestamp: 44,
-				durationNano: 5e6,
-			}),
-			makeSpan({
-				spanId: 's6',
-				parentSpanId: 'root',
-				timestamp: 49,
-				durationNano: 1e6,
-			}),
-		];
-
-		const layout = computeVisualLayout([[root], spans]);
-
-		// All 6 sequential siblings should share 1 row
-		expect(layout.totalVisualRows).toBe(2);
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		for (const span of spans) {
-			expect(layout.spanToVisualRow[span.spanId]).toBe(1);
-		}
-	});
-
-	it('should keep children below parents even with misparented spans', () => {
-		// Simulates the dd_sig2 bug: /route spans have parentSpanId pointing
-		// to the wrong ancestor, but they are at level 2 in the spans[][] input.
-		// Level-based packing must place them below level 1 regardless.
-		const httpGet = makeSpan({
-			spanId: 'http-get',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const route = makeSpan({
-			spanId: 'route',
-			parentSpanId: 'some-wrong-ancestor', // misparented!
-			timestamp: 10,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[httpGet], [route]]);
-
-		// httpGet at level 0 → row 0, route at level 1 → row 1
-		expect(layout.spanToVisualRow['http-get']).toBe(0);
-		expect(layout.spanToVisualRow['route']).toBe(1);
-		expect(layout.totalVisualRows).toBe(2);
-	});
-
-	it('should keep parent-child pairs adjacent when sibling subtrees overlap', () => {
-		// Multiple overlapping parents each with a child — the subtree-unit
-		// guarantee means every parent→child gap should be exactly 1.
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		// Three overlapping HTTP GET children of root, each with its own /route child
-		const get1 = makeSpan({
-			spanId: 'get1',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const route1 = makeSpan({
-			spanId: 'route1',
-			parentSpanId: 'get1',
-			timestamp: 10,
-			durationNano: 180e6,
-		});
-		const get2 = makeSpan({
-			spanId: 'get2',
-			parentSpanId: 'root',
-			timestamp: 50,
-			durationNano: 200e6,
-		});
-		const route2 = makeSpan({
-			spanId: 'route2',
-			parentSpanId: 'get2',
-			timestamp: 60,
-			durationNano: 180e6,
-		});
-		const get3 = makeSpan({
-			spanId: 'get3',
-			parentSpanId: 'root',
-			timestamp: 100,
-			durationNano: 200e6,
-		});
-		const route3 = makeSpan({
-			spanId: 'route3',
-			parentSpanId: 'get3',
-			timestamp: 110,
-			durationNano: 180e6,
-		});
-
-		const layout = computeVisualLayout([
-			[root],
-			[get1, get2, get3],
-			[route1, route2, route3],
-		]);
-
-		// Each parent-child pair should have a gap of exactly 1
-		const get1Row = layout.spanToVisualRow['get1'];
-		const route1Row = layout.spanToVisualRow['route1'];
-		const get2Row = layout.spanToVisualRow['get2'];
-		const route2Row = layout.spanToVisualRow['route2'];
-		const get3Row = layout.spanToVisualRow['get3'];
-		const route3Row = layout.spanToVisualRow['route3'];
-
-		expect(route1Row - get1Row).toBe(1);
-		expect(route2Row - get2Row).toBe(1);
-		expect(route3Row - get3Row).toBe(1);
-	});
-
-	it('should handle mixed levels — overlap at level 2 but not level 1', () => {
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 1000e6,
-		});
-		// Non-overlapping children
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 0,
-			durationNano: 400e6,
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 500,
-			durationNano: 400e6,
-		});
-		// Overlapping grandchildren under A
-		const ga1 = makeSpan({
-			spanId: 'ga1',
-			parentSpanId: 'a',
-			timestamp: 0,
-			durationNano: 200e6,
-		});
-		const ga2 = makeSpan({
-			spanId: 'ga2',
-			parentSpanId: 'a',
-			timestamp: 100,
-			durationNano: 200e6,
-		});
-
-		const layout = computeVisualLayout([[root], [a, b], [ga1, ga2]]);
-
-		// root → row 0
-		// a, b → row 1 (no overlap, share row)
-		// ga1 → row 2, ga2 → row 3 (overlap, expanded)
-		// b has no children, so nothing after ga2
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['a']).toBe(1);
-		expect(layout.spanToVisualRow['b']).toBe(1);
-		expect(layout.spanToVisualRow['ga2']).toBe(2);
-		expect(layout.spanToVisualRow['ga1']).toBe(3);
-		expect(layout.totalVisualRows).toBe(4);
-	});
-
-	it('should not place a span where it covers an existing connector point (Check 2)', () => {
-		// Scenario: root has 3 leaf children. Sorted latest-first: C(200), B(100), A(80).
-		//
-		// C placed at row 1 [200, 400].
-		// B overlaps C → placed at row 2 [100, 300]. Connector from row 0→2 at x=100
-		//   passes through row 1, recording connector point at (row 1, x=100).
-		// A [80, 110] does NOT overlap C's span [200, 400] at row 1 (110 < 200),
-		//   so without connector reservation A would fit at row 1.
-		//   But A's span [80, 110) contains the connector point x=100 at row 1.
-		//   Check 2 prevents this placement, pushing A further down.
-		const root = makeSpan({
-			spanId: 'root',
-			timestamp: 0,
-			durationNano: 500e6,
-		});
-		const c = makeSpan({
-			spanId: 'c',
-			parentSpanId: 'root',
-			timestamp: 200,
-			durationNano: 200e6, // [200, 400]
-		});
-		const b = makeSpan({
-			spanId: 'b',
-			parentSpanId: 'root',
-			timestamp: 100,
-			durationNano: 200e6, // [100, 300]
-		});
-		const a = makeSpan({
-			spanId: 'a',
-			parentSpanId: 'root',
-			timestamp: 80,
-			durationNano: 30e6, // [80, 110]
-		});
-
-		const layout = computeVisualLayout([[root], [a, b, c]]);
-
-		expect(layout.spanToVisualRow['root']).toBe(0);
-		expect(layout.spanToVisualRow['c']).toBe(1); // latest, placed first
-		expect(layout.spanToVisualRow['b']).toBe(2); // overlaps C → row 2
-
-		// A would fit at row 1 by span overlap alone, but connector point at
-		// (row 1, x=100) falls within A's span [80, 110). Check 2 pushes A down.
-		const aRow = layout.spanToVisualRow['a']!;
-		expect(aRow).toBeGreaterThan(1); // must NOT be at row 1
-		expect(aRow).toBe(3); // next free row after B at row 2 (A overlaps B)
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -1,536 +0,0 @@
-import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
-import type { FlamegraphRowMetrics } from '../utils';
-import { getFlamegraphRowMetrics } from '../utils';
-import { drawEventDot, drawSpanBar, getEventDotColor } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
-		time: 50,
-		timeUnitName: 'ms',
-	}),
-}));
-
-/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
-const mockPatternCanvasCtx = {
-	beginPath: jest.fn(),
-	moveTo: jest.fn(),
-	lineTo: jest.fn(),
-	stroke: jest.fn(),
-	globalAlpha: 1,
-};
-
-const originalCreateElement = document.createElement.bind(document);
-document.createElement = function (
-	tagName: string,
-): ReturnType<typeof originalCreateElement> {
-	const el = originalCreateElement(tagName);
-	if (tagName.toLowerCase() === 'canvas') {
-		(el as HTMLCanvasElement).getContext = (() =>
-			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
-	}
-	return el;
-};
-
-function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
-	return ({
-		beginPath: jest.fn(),
-		roundRect: jest.fn(),
-		fill: jest.fn(),
-		stroke: jest.fn(),
-		save: jest.fn(),
-		restore: jest.fn(),
-		translate: jest.fn(),
-		rotate: jest.fn(),
-		fillRect: jest.fn(),
-		strokeRect: jest.fn(),
-		setLineDash: jest.fn(),
-		measureText: jest.fn(
-			(text: string) => ({ width: text.length * 6 } as TextMetrics),
-		),
-		createPattern: jest.fn(() => ({} as CanvasPattern)),
-		clip: jest.fn(),
-		rect: jest.fn(),
-		fillText: jest.fn(),
-		font: '',
-		fillStyle: '',
-		strokeStyle: '',
-		textAlign: '',
-		textBaseline: '',
-		lineWidth: 0,
-		globalAlpha: 1,
-	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
-}
-
-const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
-
-describe('Canvas Draw Utils', () => {
-	describe('drawSpanBar', () => {
-		it('draws rect + fill for normal span (no selected/hovered)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, event: [] },
-				x: 10,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#1890ff',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.beginPath).toHaveBeenCalled();
-			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).not.toHaveBeenCalled();
-			expect(spanRectsArray).toHaveLength(1);
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 10,
-				y: 1,
-				width: 100,
-				height: 22,
-				level: 0,
-			});
-		});
-
-		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
-				x: 20,
-				y: 0,
-				width: 80,
-				levelIndex: 1,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'sel',
-			});
-
-			// Selected spans get solid l2-background fill + dashed border
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
-			expect(ctx.strokeStyle).toBe('#2F80ED');
-			expect(ctx.lineWidth).toBe(2);
-			expect(ctx.stroke).toHaveBeenCalled();
-			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
-		});
-
-		it('uses solid l2-background fill + solid stroke + 1px when hovered (not selected)', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
-				x: 30,
-				y: 0,
-				width: 60,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#2F80ED',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'hov',
-			});
-
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.setLineDash).not.toHaveBeenCalled();
-			expect(ctx.lineWidth).toBe(1);
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-
-		it('pushes spanRectsArray with correct dimensions', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
-				x: 5,
-				y: 24,
-				width: 200,
-				levelIndex: 2,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(spanRectsArray[0]).toMatchObject({
-				x: 5,
-				y: 25,
-				width: 200,
-				height: 22,
-				level: 2,
-			});
-			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
-		});
-	});
-
-	describe('drawSpanLabel (via drawSpanBar)', () => {
-		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
-			const ctx = createMockCtx();
-			const spanRectsArray: {
-				span: typeof MOCK_SPAN;
-				x: number;
-				y: number;
-				width: number;
-				height: number;
-				level: number;
-			}[] = [];
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray,
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).not.toHaveBeenCalled();
-			expect(ctx.fillText).not.toHaveBeenCalled();
-		});
-
-		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'foo', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.clip).toHaveBeenCalled();
-			expect(ctx.fillText).toHaveBeenCalled();
-			expect(ctx.textAlign).toBe('left');
-		});
-
-		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 6 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledTimes(2);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'50ms',
-				expect.any(Number),
-				expect.any(Number),
-			);
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'my-span',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-	});
-
-	describe('truncateText (via drawSpanBar)', () => {
-		it('uses full text when it fits', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) => ({ width: t.length * 4 } as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'short', event: [] },
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.fillText).toHaveBeenCalledWith(
-				'short',
-				expect.any(Number),
-				expect.any(Number),
-			);
-		});
-
-		it('truncates text when it exceeds available width', () => {
-			const ctx = createMockCtx();
-			ctx.measureText = jest.fn(
-				(t: string) =>
-					({
-						width: t.includes('...') ? 24 : t.length * 10,
-					} as TextMetrics),
-			);
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
-				x: 0,
-				y: 0,
-				width: 50,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
-			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
-			expect(nameArg).toBeDefined();
-			expect(nameArg).toMatch(/\.\.\.$/);
-		});
-	});
-
-	describe('drawEventDot', () => {
-		it('uses error styling when isError is true', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', true, false);
-
-			drawEventDot({
-				ctx,
-				x: 50,
-				y: 11,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
-			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
-			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-
-		it('derives color from span color when isError is false', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('rgb(100, 200, 150)', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			// Darkened by 20% for fill
-			expect(ctx.fillStyle).toBe('rgb(80, 160, 120)');
-			// Darkened by 40% for stroke
-			expect(ctx.strokeStyle).toBe('rgb(60, 120, 90)');
-		});
-
-		it('uses dark mode colors for error', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', true, true);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
-			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
-		});
-
-		it('falls back to cyan/blue for unparseable span colors', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('hsl(200, 50%, 50%)', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 0,
-				y: 0,
-				color,
-				eventDotSize: 6,
-			});
-
-			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
-			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
-		});
-
-		it('calls save, translate, rotate, restore', () => {
-			const ctx = createMockCtx();
-			const color = getEventDotColor('#000', false, false);
-
-			drawEventDot({
-				ctx,
-				x: 10,
-				y: 20,
-				color,
-				eventDotSize: 4,
-			});
-
-			expect(ctx.save).toHaveBeenCalled();
-			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
-			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
-			expect(ctx.restore).toHaveBeenCalled();
-		});
-	});
-
-	describe('solid l2-background fill for selected/hovered spans', () => {
-		it('uses solid fill for hovered span', () => {
-			const ctx = createMockCtx();
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				hoveredSpanId: 'p',
-			});
-
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-
-		it('uses solid fill + dashed border for selected span', () => {
-			const ctx = createMockCtx();
-
-			drawSpanBar({
-				ctx,
-				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
-				x: 0,
-				y: 0,
-				width: MIN_WIDTH_FOR_NAME - 1,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-				selectedSpanId: 'p',
-			});
-
-			expect(ctx.fill).toHaveBeenCalled();
-			expect(ctx.stroke).toHaveBeenCalled();
-		});
-	});
-
-	describe('drawSpanBar with events', () => {
-		it('draws event dots for each span event', () => {
-			const ctx = createMockCtx();
-			const spanWithEvents = {
-				...MOCK_SPAN,
-				event: [
-					{
-						name: 'e1',
-						timeUnixNano: 1_010_000_000,
-						attributeMap: {},
-						isError: false,
-					},
-					{
-						name: 'e2',
-						timeUnixNano: 1_025_000_000,
-						attributeMap: {},
-						isError: true,
-					},
-				],
-			};
-
-			drawSpanBar({
-				ctx,
-				span: spanWithEvents,
-				x: 0,
-				y: 0,
-				width: 100,
-				levelIndex: 0,
-				spanRectsArray: [],
-				eventRectsArray: [],
-				color: '#000',
-				isDarkMode: false,
-				metrics: METRICS,
-			});
-
-			expect(ctx.save).toHaveBeenCalledTimes(3);
-			expect(ctx.translate).toHaveBeenCalledTimes(2);
-			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -1,54 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-/** Minimal FlamegraphSpan for unit tests */
-export const MOCK_SPAN: FlamegraphSpan = {
-	timestamp: 1000,
-	durationNano: 50_000_000, // 50ms
-	spanId: 'span-1',
-	parentSpanId: '',
-	traceId: 'trace-1',
-	hasError: false,
-	serviceName: 'test-service',
-	name: 'test-span',
-	level: 0,
-	event: [],
-};
-
-/** Nested spans structure for findSpanById tests */
-export const MOCK_SPANS: FlamegraphSpan[][] = [
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'root',
-			parentSpanId: '',
-			level: 0,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'child-a',
-			parentSpanId: 'root',
-			level: 1,
-		},
-		{
-			...MOCK_SPAN,
-			spanId: 'child-b',
-			parentSpanId: 'root',
-			level: 1,
-		},
-	],
-	[
-		{
-			...MOCK_SPAN,
-			spanId: 'grandchild',
-			parentSpanId: 'child-a',
-			level: 2,
-		},
-	],
-];
-
-export const MOCK_TRACE_METADATA = {
-	startTime: 0,
-	endTime: 1000,
-};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -1,144 +0,0 @@
-import React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-function createMockContainer(): HTMLDivElement {
-	const div = document.createElement('div');
-	Object.defineProperty(div, 'clientHeight', { value: 400 });
-	return div;
-}
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	containerRef: { current: createMockContainer() },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartRef: { current: 0 },
-	viewEndRef: { current: 1000 },
-	setViewStartTs: jest.fn(),
-	setViewEndTs: jest.fn(),
-	scrollTopRef: { current: 0 },
-	setScrollTop: jest.fn(),
-	totalHeight: 1000,
-};
-
-describe('useFlamegraphDrag', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		defaultArgs.viewStartRef.current = 0;
-		defaultArgs.viewEndRef.current = 1000;
-		defaultArgs.scrollTopRef.current = 0;
-	});
-
-	it('starts drag state on mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(true);
-	});
-
-	it('ignores non-left button mousedown', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 1,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('updates pan/scroll on mousemove', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseMove(({
-				clientX: 150,
-				clientY: 100,
-			} as unknown) as React.MouseEvent);
-		});
-
-		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
-		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
-		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
-	});
-
-	it('resets drag state on mouseup', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleMouseUp();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-
-	it('cancels drag on mouseleave', () => {
-		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDown(({
-				button: 0,
-				clientX: 100,
-				clientY: 50,
-				preventDefault: jest.fn(),
-			} as unknown) as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleDragMouseLeave();
-		});
-
-		expect(result.current.isDraggingRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -1,179 +0,0 @@
-import type React from 'react';
-import { act, renderHook } from '@testing-library/react';
-
-import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
-import type { SpanRect } from '../types';
-import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-const spanRect: SpanRect = {
-	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
-	x: 100,
-	y: 50,
-	width: 200,
-	height: 22,
-	level: 0,
-};
-
-const defaultArgs = {
-	canvasRef: { current: createMockCanvas() },
-	spanRectsRef: { current: [spanRect] },
-	eventRectsRef: { current: [] as any[] },
-	traceMetadata: MOCK_TRACE_METADATA,
-	viewStartTs: MOCK_TRACE_METADATA.startTime,
-	viewEndTs: MOCK_TRACE_METADATA.endTime,
-	isDraggingRef: { current: false },
-	onSpanClick: jest.fn(),
-	isDarkMode: false,
-};
-
-describe('useFlamegraphHover', () => {
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-		jest.clearAllMocks();
-		defaultArgs.spanRectsRef.current = [spanRect];
-		defaultArgs.isDraggingRef.current = false;
-	});
-
-	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-		expect(result.current.tooltipContent).not.toBeNull();
-		expect(result.current.tooltipContent?.spanName).toBe('test-span');
-		expect(result.current.tooltipContent?.clientX).toBe(150);
-		expect(result.current.tooltipContent?.clientY).toBe(61);
-	});
-
-	it('clears hover when moving to empty area', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBe('hover-span');
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 10,
-				clientY: 10,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('clears hover on mouse leave', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleHoverMouseLeave();
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-		expect(result.current.tooltipContent).toBeNull();
-	});
-
-	it('suppresses click when drag distance exceeds threshold', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleMouseDownForClick({
-				clientX: 100,
-				clientY: 50,
-			} as React.MouseEvent);
-		});
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 100,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
-	});
-
-	it('calls onSpanClick when clicking on span', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleClick({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
-	});
-
-	it('uses clientX/clientY for tooltip positioning', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 200,
-				clientY: 60,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.tooltipContent?.clientX).toBe(200);
-		expect(result.current.tooltipContent?.clientY).toBe(60);
-	});
-
-	it('does not update hover during drag', () => {
-		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
-		defaultArgs.isDraggingRef.current = true;
-
-		act(() => {
-			result.current.handleHoverMouseMove({
-				clientX: 150,
-				clientY: 61,
-			} as React.MouseEvent);
-		});
-
-		expect(result.current.hoveredSpanId).toBeNull();
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -1,279 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
-import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
-import { MOCK_TRACE_METADATA } from './testUtils';
-
-function createMockCanvas(): HTMLCanvasElement {
-	const canvas = document.createElement('canvas');
-	canvas.width = 800;
-	canvas.height = 400;
-	canvas.getBoundingClientRect = jest.fn(
-		(): DOMRect =>
-			({
-				left: 0,
-				top: 0,
-				width: 800,
-				height: 400,
-				x: 0,
-				y: 0,
-				bottom: 400,
-				right: 800,
-				toJSON: (): Record<string, unknown> => ({}),
-			} as DOMRect),
-	);
-	return canvas;
-}
-
-describe('useFlamegraphZoom', () => {
-	const traceMetadata = { ...MOCK_TRACE_METADATA };
-
-	beforeEach(() => {
-		Object.defineProperty(window, 'devicePixelRatio', {
-			configurable: true,
-			value: 1,
-		});
-	});
-
-	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: 100 };
-		const viewEndRef = { current: 500 };
-		const rowHeightRef = { current: 30 };
-		const canvasRef = { current: createMockCanvas() };
-
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		act(() => {
-			result.current.handleResetZoom();
-		});
-
-		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
-		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
-		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
-		expect(viewStartRef.current).toBe(traceMetadata.startTime);
-		expect(viewEndRef.current).toBe(traceMetadata.endTime);
-		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
-	});
-
-	it('wheel zoom in decreases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeLessThan(initialSpan);
-		}
-	});
-
-	it('wheel zoom out increases visible time range', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
-		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
-		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		const initialSpan = viewEndRef.current - viewStartRef.current;
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 100,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		expect(setViewStartTs).toHaveBeenCalled();
-		expect(setViewEndTs).toHaveBeenCalled();
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
-		}
-	});
-
-	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.startTime + 100 };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: 10000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			const newSpan = newEnd - newStart;
-			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
-		}
-	});
-
-	it('clamps viewStart/viewEnd to trace bounds', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setRowHeight = jest.fn();
-		const viewStartRef = { current: traceMetadata.startTime };
-		const viewEndRef = { current: traceMetadata.endTime };
-		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
-		const canvas = createMockCanvas();
-		const canvasRef = { current: canvas };
-
-		renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef,
-				viewEndRef,
-				rowHeightRef,
-				setViewStartTs,
-				setViewEndTs,
-				setRowHeight,
-			}),
-		);
-
-		await act(async () => {
-			canvas.dispatchEvent(
-				new WheelEvent('wheel', {
-					clientX: 400,
-					deltaY: -5000,
-					bubbles: true,
-				}),
-			);
-		});
-
-		await act(async () => {
-			await new Promise((r) => requestAnimationFrame(r));
-		});
-
-		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
-		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
-		if (newStart != null && newEnd != null) {
-			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
-			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
-		}
-	});
-
-	it('returns isOverFlamegraphRef', () => {
-		const canvasRef = { current: createMockCanvas() };
-		const { result } = renderHook(() =>
-			useFlamegraphZoom({
-				canvasRef,
-				traceMetadata,
-				viewStartRef: { current: 0 },
-				viewEndRef: { current: 1000 },
-				rowHeightRef: { current: 24 },
-				setViewStartTs: jest.fn(),
-				setViewEndTs: jest.fn(),
-				setRowHeight: jest.fn(),
-			}),
-		);
-
-		expect(result.current.isOverFlamegraphRef).toBeDefined();
-		expect(result.current.isOverFlamegraphRef.current).toBe(false);
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -1,212 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react';
-import { useRef } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-
-import { useScrollToSpan } from '../hooks/useScrollToSpan';
-import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
-
-function TestWrapper({
-	firstSpanAtFetchLevel,
-	spans,
-	traceMetadata,
-	setViewStartTs,
-	setViewEndTs,
-	setScrollTop,
-}: {
-	firstSpanAtFetchLevel: string;
-	spans: typeof MOCK_SPANS;
-	traceMetadata: typeof MOCK_TRACE_METADATA;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}): JSX.Element {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const viewStartRef = useRef(traceMetadata.startTime);
-	const viewEndRef = useRef(traceMetadata.endTime);
-	const scrollTopRef = useRef(0);
-
-	useScrollToSpan({
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight: 24,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	});
-
-	return <div ref={containerRef} data-testid="container" />;
-}
-
-describe('useScrollToSpan', () => {
-	beforeEach(() => {
-		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
-			configurable: true,
-			value: 400,
-		});
-	});
-
-	it('does not update when firstSpanAtFetchLevel is empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel=""
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when spans are empty', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="root"
-				spans={[]}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('does not update when target span not found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		render(
-			<TestWrapper
-				firstSpanAtFetchLevel="nonexistent"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(setViewStartTs).not.toHaveBeenCalled();
-			expect(setViewEndTs).not.toHaveBeenCalled();
-			expect(setScrollTop).not.toHaveBeenCalled();
-		});
-	});
-
-	it('calls setters when target span found', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-		const setScrollTop = jest.fn();
-
-		const { getByTestId } = render(
-			<TestWrapper
-				firstSpanAtFetchLevel="grandchild"
-				spans={MOCK_SPANS}
-				traceMetadata={MOCK_TRACE_METADATA}
-				setViewStartTs={setViewStartTs}
-				setViewEndTs={setViewEndTs}
-				setScrollTop={setScrollTop}
-			/>,
-		);
-
-		expect(getByTestId('container')).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-			expect(setScrollTop).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const [scrollTop] = setScrollTop.mock.calls[0];
-
-		expect(viewEnd - viewStart).toBeGreaterThan(0);
-		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
-		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
-		expect(scrollTop).toBeGreaterThanOrEqual(0);
-	});
-
-	it('centers span vertically (scrollTop centers span row)', async () => {
-		const setScrollTop = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="grandchild"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={jest.fn()}
-					setViewEndTs={jest.fn()}
-					setScrollTop={setScrollTop}
-				/>,
-			);
-		});
-
-		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
-
-		const [scrollTop] = setScrollTop.mock.calls[0];
-		const levelIndex = 2;
-		const rowHeight = 24;
-		const viewportHeight = 400;
-		const expectedCenter =
-			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
-		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
-	});
-
-	it('zooms horizontally to span with 2x duration padding', async () => {
-		const setViewStartTs = jest.fn();
-		const setViewEndTs = jest.fn();
-
-		await act(async () => {
-			render(
-				<TestWrapper
-					firstSpanAtFetchLevel="root"
-					spans={MOCK_SPANS}
-					traceMetadata={MOCK_TRACE_METADATA}
-					setViewStartTs={setViewStartTs}
-					setViewEndTs={setViewEndTs}
-					setScrollTop={jest.fn()}
-				/>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(setViewStartTs).toHaveBeenCalled();
-			expect(setViewEndTs).toHaveBeenCalled();
-		});
-
-		const [viewStart] = setViewStartTs.mock.calls[0];
-		const [viewEnd] = setViewEndTs.mock.calls[0];
-		const visibleWindow = viewEnd - viewStart;
-		const rootSpan = MOCK_SPANS[0][0];
-		const spanDurationMs = rootSpan.durationNano / 1e6;
-		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -1,135 +0,0 @@
-import {
-	clamp,
-	findSpanById,
-	formatDuration,
-	getFlamegraphRowMetrics,
-} from '../utils';
-import { MOCK_SPANS } from './testUtils';
-
-jest.mock('container/TraceDetail/utils', () => ({
-	convertTimeToRelevantUnit: (
-		valueMs: number,
-	): { time: number; timeUnitName: string } => {
-		if (valueMs === 0) {
-			return { time: 0, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 1000) {
-			return { time: valueMs, timeUnitName: 'ms' };
-		}
-		if (valueMs < 60_000) {
-			return { time: valueMs / 1000, timeUnitName: 's' };
-		}
-		if (valueMs < 3_600_000) {
-			return { time: valueMs / 60_000, timeUnitName: 'm' };
-		}
-		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
-	},
-}));
-
-describe('Pure Math and Data Utils', () => {
-	describe('clamp', () => {
-		it('returns value when within range', () => {
-			expect(clamp(5, 0, 10)).toBe(5);
-			expect(clamp(-3, -5, 5)).toBe(-3);
-		});
-
-		it('returns min when value is below min', () => {
-			expect(clamp(-1, 0, 10)).toBe(0);
-			expect(clamp(2, 5, 10)).toBe(5);
-		});
-
-		it('returns max when value is above max', () => {
-			expect(clamp(11, 0, 10)).toBe(10);
-			expect(clamp(100, 0, 50)).toBe(50);
-		});
-
-		it('handles min === max', () => {
-			expect(clamp(5, 7, 7)).toBe(7);
-			expect(clamp(7, 7, 7)).toBe(7);
-		});
-	});
-
-	describe('findSpanById', () => {
-		it('finds span in first level', () => {
-			const result = findSpanById(MOCK_SPANS, 'root');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('root');
-			expect(result?.levelIndex).toBe(0);
-		});
-
-		it('finds span in nested level', () => {
-			const result = findSpanById(MOCK_SPANS, 'grandchild');
-			expect(result).not.toBeNull();
-			expect(result?.span.spanId).toBe('grandchild');
-			expect(result?.levelIndex).toBe(2);
-		});
-
-		it('returns null when span not found', () => {
-			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
-		});
-
-		it('handles empty spans', () => {
-			expect(findSpanById([], 'root')).toBeNull();
-			expect(findSpanById([[], []], 'root')).toBeNull();
-		});
-	});
-
-	describe('getFlamegraphRowMetrics', () => {
-		it('computes normal row height metrics (24px)', () => {
-			const m = getFlamegraphRowMetrics(24);
-			expect(m.ROW_HEIGHT).toBe(24);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
-			expect(m.EVENT_DOT_SIZE).toBe(6);
-		});
-
-		it('clamps span bar height to max for large row heights', () => {
-			const m = getFlamegraphRowMetrics(100);
-			expect(m.SPAN_BAR_HEIGHT).toBe(22);
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
-		});
-
-		it('clamps span bar height to min for small row heights', () => {
-			const m = getFlamegraphRowMetrics(6);
-			expect(m.SPAN_BAR_HEIGHT).toBe(8);
-			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
-			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
-		});
-
-		it('clamps event dot size within min/max', () => {
-			const mSmall = getFlamegraphRowMetrics(6);
-			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
-
-			const mLarge = getFlamegraphRowMetrics(24);
-			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
-		});
-	});
-
-	describe('formatDuration', () => {
-		it('formats nanos as ms', () => {
-			// 1e6 nanos = 1ms
-			expect(formatDuration(1_000_000)).toBe('1ms');
-		});
-
-		it('formats larger durations as s/m/hr', () => {
-			// 2e9 nanos = 2000ms = 2s
-			expect(formatDuration(2_000_000_000)).toBe('2s');
-		});
-
-		it('formats zero duration', () => {
-			expect(formatDuration(0)).toBe('0ms');
-		});
-
-		it('formats very small values', () => {
-			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
-			expect(formatDuration(1000)).toBe('0ms');
-		});
-
-		it('formats decimal seconds correctly', () => {
-			expect(formatDuration(1_500_000_000)).toBe('1.5s');
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -1,67 +0,0 @@
-import { getSpanColor } from '../utils';
-import { MOCK_SPAN } from './testUtils';
-
-const mockGenerateColor = jest.fn();
-
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: (key: string, colorMap: Record<string, string>): string =>
-		mockGenerateColor(key, colorMap),
-}));
-
-describe('Presentation / Styling Utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockGenerateColor.mockReturnValue('#2F80ED');
-	});
-
-	describe('getSpanColor', () => {
-		it('uses generated service color for normal span', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: false },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				MOCK_SPAN.serviceName,
-				expect.any(Object),
-			);
-			expect(color).toBe('#1890ff');
-		});
-
-		it('overrides with error color in light mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: false,
-			});
-
-			expect(color).toBe('rgb(220, 38, 38)');
-		});
-
-		it('overrides with error color in dark mode when span has error', () => {
-			mockGenerateColor.mockReturnValue('#1890ff');
-
-			const color = getSpanColor({
-				span: { ...MOCK_SPAN, hasError: true },
-				isDarkMode: true,
-			});
-
-			expect(color).toBe('rgb(239, 68, 68)');
-		});
-
-		it('passes serviceName to generateColor', () => {
-			getSpanColor({
-				span: { ...MOCK_SPAN, serviceName: 'my-service' },
-				isDarkMode: false,
-			});
-
-			expect(mockGenerateColor).toHaveBeenCalledWith(
-				'my-service',
-				expect.any(Object),
-			);
-		});
-	});
-});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/computeVisualLayout.ts

@@ -1,370 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-export interface ConnectorLine {
-	parentRow: number;
-	childRow: number;
-	timestampMs: number;
-	serviceName: string;
-}
-
-export interface VisualLayout {
-	visualRows: FlamegraphSpan[][];
-	spanToVisualRow: Record<string, number>;
-	connectors: ConnectorLine[];
-	totalVisualRows: number;
-}
-
-/**
- * Computes an overlap-safe visual layout for flamegraph spans using DFS ordering.
- *
- * Builds a parent→children tree from parentSpanId, then traverses in DFS pre-order.
- * Each span is placed at parentRow+1 if free, otherwise scans upward row-by-row
- * until finding a non-overlapping row. This keeps children visually close to their
- * parents and avoids the BFS problem where distant siblings push children far down.
- */
-export function computeVisualLayout(spans: FlamegraphSpan[][]): VisualLayout {
-	const spanToVisualRow = new Map<string, number>();
-	const visualRowsMap = new Map<number, FlamegraphSpan[]>();
-	let maxRow = -1;
-
-	// Per-row interval list for overlap detection
-	// Each entry: [startTime, endTime]
-	const rowIntervals = new Map<number, Array<[number, number]>>();
-
-	// function hasOverlap(row: number, startTime: number, endTime: number): boolean {
-	// 	const intervals = rowIntervals.get(row);
-	// 	if (!intervals) {
-	// 		return false;
-	// 	}
-	// 	for (const [s, e] of intervals) {
-	// 		if (startTime < e && endTime > s) {
-	// 			return true;
-	// 		}
-	// 	}
-	// 	return false;
-	// }
-
-	function addToRow(row: number, span: FlamegraphSpan): void {
-		spanToVisualRow.set(span.spanId, row);
-		let arr = visualRowsMap.get(row);
-		if (!arr) {
-			arr = [];
-			visualRowsMap.set(row, arr);
-		}
-		arr.push(span);
-
-		const startTime = span.timestamp;
-		const endTime = span.timestamp + span.durationNano / 1e6;
-		let intervals = rowIntervals.get(row);
-		if (!intervals) {
-			intervals = [];
-			rowIntervals.set(row, intervals);
-		}
-		intervals.push([startTime, endTime]);
-
-		if (row > maxRow) {
-			maxRow = row;
-		}
-	}
-
-	// Flatten all spans and build lookup + children map
-	const spanMap = new Map<string, FlamegraphSpan>();
-	const childrenMap = new Map<string, FlamegraphSpan[]>();
-	const allSpans: FlamegraphSpan[] = [];
-
-	for (const level of spans) {
-		for (const span of level) {
-			allSpans.push(span);
-			spanMap.set(span.spanId, span);
-		}
-	}
-
-	// Extract parentSpanId — the field may be missing at runtime when the API
-	// returns `references` instead.  Fall back to the first CHILD_OF reference.
-	function getParentId(span: FlamegraphSpan): string {
-		if (span.parentSpanId) {
-			return span.parentSpanId;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const refs = (span as any).references as
-			| Array<{ spanId?: string; refType?: string }>
-			| undefined;
-		if (refs) {
-			for (const ref of refs) {
-				if (ref.refType === 'CHILD_OF' && ref.spanId) {
-					return ref.spanId;
-				}
-			}
-		}
-		return '';
-	}
-
-	// Build children map and identify roots
-	const roots: FlamegraphSpan[] = [];
-
-	for (const span of allSpans) {
-		const parentId = getParentId(span);
-		if (!parentId || !spanMap.has(parentId)) {
-			roots.push(span);
-		} else {
-			let children = childrenMap.get(parentId);
-			if (!children) {
-				children = [];
-				childrenMap.set(parentId, children);
-			}
-			children.push(span);
-		}
-	}
-
-	// Sort children by timestamp for deterministic ordering
-	for (const [, children] of childrenMap) {
-		children.sort((a, b) => b.timestamp - a.timestamp);
-	}
-
-	// --- Subtree-unit placement ---
-	// Compute each subtree's layout in isolation, then place as a unit
-	// to guarantee parent-child adjacency within subtrees.
-
-	interface ShapeEntry {
-		span: FlamegraphSpan;
-		relativeRow: number;
-	}
-
-	function hasOverlapIn(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): boolean {
-		const rowIntervals = intervals.get(row);
-		if (!rowIntervals) {
-			return false;
-		}
-		for (const [s, e] of rowIntervals) {
-			if (startTime < e && endTime > s) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function addIntervalTo(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): void {
-		let arr = intervals.get(row);
-		if (!arr) {
-			arr = [];
-			intervals.set(row, arr);
-		}
-		arr.push([startTime, endTime]);
-	}
-
-	function hasConnectorConflict(
-		intervals: Map<number, Array<[number, number]>>,
-		row: number,
-		point: number,
-	): boolean {
-		const rowIntervals = intervals.get(row);
-		if (!rowIntervals) {
-			return false;
-		}
-		for (const [s, e] of rowIntervals) {
-			if (point >= s && point < e) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function hasPointInSpan(
-		connectorPoints: Map<number, number[]>,
-		row: number,
-		startTime: number,
-		endTime: number,
-	): boolean {
-		const points = connectorPoints.get(row);
-		if (!points) {
-			return false;
-		}
-		for (const p of points) {
-			if (p >= startTime && p < endTime) {
-				return true;
-			}
-		}
-		return false;
-	}
-
-	function addConnectorPoint(
-		connectorPoints: Map<number, number[]>,
-		row: number,
-		point: number,
-	): void {
-		let arr = connectorPoints.get(row);
-		if (!arr) {
-			arr = [];
-			connectorPoints.set(row, arr);
-		}
-		arr.push(point);
-	}
-
-	function computeSubtreeShape(rootSpan: FlamegraphSpan): ShapeEntry[] {
-		const localIntervals = new Map<number, Array<[number, number]>>();
-		const localConnectorPoints = new Map<number, number[]>();
-		const shape: ShapeEntry[] = [];
-
-		// Place root span at relative row 0
-		const rootStart = rootSpan.timestamp;
-		const rootEnd = rootSpan.timestamp + rootSpan.durationNano / 1e6;
-		shape.push({ span: rootSpan, relativeRow: 0 });
-		addIntervalTo(localIntervals, 0, rootStart, rootEnd);
-
-		const children = childrenMap.get(rootSpan.spanId);
-		if (children) {
-			for (const child of children) {
-				const childShape = computeSubtreeShape(child);
-				const connectorX = child.timestamp;
-				const offset = findPlacement(
-					childShape,
-					1,
-					localIntervals,
-					localConnectorPoints,
-					connectorX,
-				);
-
-				// Record connector points for intermediate rows (1 to offset-1)
-				for (let r = 1; r < offset; r++) {
-					addConnectorPoint(localConnectorPoints, r, connectorX);
-				}
-
-				// Place child shape into local state at offset
-				for (const entry of childShape) {
-					const actualRow = entry.relativeRow + offset;
-					shape.push({ span: entry.span, relativeRow: actualRow });
-					const s = entry.span.timestamp;
-					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-					addIntervalTo(localIntervals, actualRow, s, e);
-				}
-			}
-		}
-
-		return shape;
-	}
-
-	function findPlacement(
-		shape: ShapeEntry[],
-		minOffset: number,
-		intervals: Map<number, Array<[number, number]>>,
-		connectorPoints?: Map<number, number[]>,
-		connectorX?: number,
-	): number {
-		// Track the first offset that passes Checks 1 & 2 as a fallback.
-		// Check 3 (connector vs span) is monotonically failing: once it fails
-		// at offset K, all offsets > K also fail (more intermediate rows).
-		// If we can't satisfy Check 3, fall back to the best offset without it.
-		let fallbackOffset = -1;
-
-		for (let offset = minOffset; ; offset++) {
-			let passesSpanChecks = true;
-
-			// Check 1: span vs span (existing)
-			for (const entry of shape) {
-				const targetRow = entry.relativeRow + offset;
-				const s = entry.span.timestamp;
-				const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-				if (hasOverlapIn(intervals, targetRow, s, e)) {
-					passesSpanChecks = false;
-					break;
-				}
-			}
-
-			// Check 2: span vs existing connector points
-			if (passesSpanChecks && connectorPoints) {
-				for (const entry of shape) {
-					const targetRow = entry.relativeRow + offset;
-					const s = entry.span.timestamp;
-					const e = entry.span.timestamp + entry.span.durationNano / 1e6;
-					if (hasPointInSpan(connectorPoints, targetRow, s, e)) {
-						passesSpanChecks = false;
-						break;
-					}
-				}
-			}
-
-			if (!passesSpanChecks) {
-				continue;
-			}
-
-			// This offset passes Checks 1 & 2 — record as fallback
-			if (fallbackOffset === -1) {
-				fallbackOffset = offset;
-			}
-
-			// Check 3: new connector vs existing spans
-			if (connectorX !== undefined) {
-				let connectorClear = true;
-				for (let r = 1; r < offset; r++) {
-					if (hasConnectorConflict(intervals, r, connectorX)) {
-						connectorClear = false;
-						break;
-					}
-				}
-				if (!connectorClear) {
-					// Check 3 will fail for all larger offsets too.
-					// Fall back to the first offset that passed Checks 1 & 2.
-					return fallbackOffset;
-				}
-			}
-
-			return offset;
-		}
-	}
-
-	// Process roots sorted by timestamp
-	roots.sort((a, b) => a.timestamp - b.timestamp);
-	for (const root of roots) {
-		const shape = computeSubtreeShape(root);
-		const offset = findPlacement(shape, 0, rowIntervals);
-		for (const entry of shape) {
-			addToRow(entry.relativeRow + offset, entry.span);
-		}
-	}
-
-	// Build the visualRows array
-	const totalVisualRows = maxRow + 1;
-	const visualRows: FlamegraphSpan[][] = [];
-	for (let i = 0; i < totalVisualRows; i++) {
-		visualRows.push(visualRowsMap.get(i) || []);
-	}
-
-	// Build connector lines for parent-child pairs with row gap > 1
-	const connectors: ConnectorLine[] = [];
-	for (const [parentId, children] of childrenMap) {
-		const parentRow = spanToVisualRow.get(parentId);
-		if (parentRow === undefined) {
-			continue;
-		}
-		for (const child of children) {
-			const childRow = spanToVisualRow.get(child.spanId);
-			if (childRow === undefined || childRow - parentRow <= 1) {
-				continue;
-			}
-			connectors.push({
-				parentRow,
-				childRow,
-				timestampMs: child.timestamp,
-				serviceName: child.serviceName,
-			});
-		}
-	}
-
-	return {
-		visualRows,
-		spanToVisualRow: Object.fromEntries(spanToVisualRow),
-		connectors,
-		totalVisualRows,
-	};
-}

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

@@ -1,39 +0,0 @@
-export const ROW_HEIGHT = 24;
-export const SPAN_BAR_HEIGHT = 22;
-export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
-export const EVENT_DOT_SIZE = 6;
-
-// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
-export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
-export const MIN_SPAN_BAR_HEIGHT = 8;
-export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
-
-// Event dot sizing relative to span bar height
-export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
-export const MIN_EVENT_DOT_SIZE = 4;
-export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
-
-export const LABEL_FONT = '11px Inter, sans-serif';
-export const LABEL_PADDING_X = 8;
-export const MIN_WIDTH_FOR_NAME = 30;
-export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
-
-// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
-export const MIN_ROW_HEIGHT = 24;
-export const MAX_ROW_HEIGHT = 24;
-export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
-
-// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
-export const PINCH_ZOOM_INTENSITY_H = 0.01;
-export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
-export const PINCH_ZOOM_INTENSITY_V = 0.008;
-export const SCROLL_ZOOM_INTENSITY_V = 0.001;
-
-// Minimum visible time span in ms (prevents zooming to sub-pixel)
-export const MIN_VISIBLE_SPAN_MS = 5;
-
-// Selected span style (dashed border)
-export const DASHED_BORDER_LINE_DASH = [4, 2];
-
-// Max spans fetched for flamegraph visualization
-export const FLAMEGRAPH_SPAN_LIMIT = 100002;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -1,66 +0,0 @@
-import { RefObject, useCallback, useEffect } from 'react';
-
-export function useCanvasSetup(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	containerRef: RefObject<HTMLDivElement>,
-	onDraw: () => void,
-	overlayCanvasRef?: RefObject<HTMLCanvasElement>,
-): void {
-	const updateCanvasSize = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		const rect = container.getBoundingClientRect();
-		const viewportHeight = container.clientHeight;
-
-		canvas.style.width = `${rect.width}px`;
-		canvas.style.height = `${viewportHeight}px`;
-
-		const newWidth = Math.floor(rect.width * dpr);
-		const newHeight = Math.floor(viewportHeight * dpr);
-
-		if (canvas.width !== newWidth || canvas.height !== newHeight) {
-			canvas.width = newWidth;
-			canvas.height = newHeight;
-
-			// Sync overlay canvas size with main canvas
-			const overlay = overlayCanvasRef?.current;
-			if (overlay) {
-				overlay.width = newWidth;
-				overlay.height = newHeight;
-				overlay.style.width = `${rect.width}px`;
-				overlay.style.height = `${viewportHeight}px`;
-			}
-
-			onDraw();
-		}
-	}, [canvasRef, containerRef, onDraw, overlayCanvasRef]);
-
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) {
-			return (): void => {};
-		}
-
-		const resizeObserver = new ResizeObserver(updateCanvasSize);
-		resizeObserver.observe(container);
-		updateCanvasSize();
-
-		// when dpr changes, update the canvas size
-		const dprQuery = window.matchMedia('(resolution: 1dppx)');
-		dprQuery.addEventListener('change', updateCanvasSize);
-
-		return (): void => {
-			resizeObserver.disconnect();
-			dprQuery.removeEventListener('change', updateCanvasSize);
-		};
-	}, [containerRef, updateCanvasSize]);
-
-	useEffect(() => {
-		onDraw();
-	}, [onDraw]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphCrosshair.ts

@@ -1,55 +0,0 @@
-import { RefObject, useCallback, useEffect } from 'react';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-interface UseFlamegraphCrosshairArgs {
-	overlayCanvasRef: RefObject<HTMLCanvasElement>;
-	cursorX: number | null;
-}
-
-/**
- * Draws the crosshair vertical line on the flamegraph overlay canvas.
- * Separated from useFlamegraphDraw (which handles the main canvas)
- * to keep span rendering and crosshair rendering independent.
- */
-export function useFlamegraphCrosshair({
-	overlayCanvasRef,
-	cursorX,
-}: UseFlamegraphCrosshairArgs): void {
-	const isDarkMode = useIsDarkMode();
-
-	const drawCrosshair = useCallback((): void => {
-		const overlay = overlayCanvasRef.current;
-		if (!overlay) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		const ctx = overlay.getContext('2d');
-		if (!ctx) {
-			return;
-		}
-
-		const cssWidth = overlay.width / dpr;
-		const cssHeight = overlay.height / dpr;
-
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-		ctx.clearRect(0, 0, cssWidth, cssHeight);
-
-		if (cursorX === null) {
-			return;
-		}
-
-		// Vertical solid line — matches --l3-background token used by the time badge
-		ctx.strokeStyle = isDarkMode ? '#2d313a' : '#e8e8ec';
-		ctx.lineWidth = 1;
-		ctx.beginPath();
-		ctx.moveTo(cursorX, 0);
-		ctx.lineTo(cursorX, cssHeight);
-		ctx.stroke();
-	}, [overlayCanvasRef, cursorX, isDarkMode]);
-
-	// Redraw whenever cursorX or dependencies change
-	useEffect(() => {
-		drawCrosshair();
-	}, [drawCrosshair]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -1,170 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useRef,
-} from 'react';
-
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphDragArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	scrollTopRef: MutableRefObject<number>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-	totalHeight: number;
-}
-
-interface UseFlamegraphDragResult {
-	handleMouseDown: (e: ReactMouseEvent) => void;
-	handleMouseMove: (e: ReactMouseEvent) => void;
-	handleMouseUp: () => void;
-	handleDragMouseLeave: () => void;
-	isDraggingRef: MutableRefObject<boolean>;
-}
-
-export function useFlamegraphDrag(
-	args: UseFlamegraphDragArgs,
-): UseFlamegraphDragResult {
-	const {
-		canvasRef,
-		containerRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		setViewStartTs,
-		setViewEndTs,
-		scrollTopRef,
-		setScrollTop,
-		totalHeight,
-	} = args;
-
-	const isDraggingRef = useRef(false);
-	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
-	const dragDistanceRef = useRef(0);
-
-	const clampScrollTop = useCallback(
-		(next: number): number => {
-			const container = containerRef.current;
-			if (!container) {
-				return 0;
-			}
-			const viewportHeight = container.clientHeight;
-			const maxScroll = Math.max(0, totalHeight - viewportHeight);
-			return clamp(next, 0, maxScroll);
-		},
-		[containerRef, totalHeight],
-	);
-
-	const handleMouseDown = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (event.button !== 0) {
-				return;
-			}
-			event.preventDefault();
-
-			isDraggingRef.current = true;
-			dragStartRef.current = { x: event.clientX, y: event.clientY };
-			dragDistanceRef.current = 0;
-
-			const canvas = canvasRef.current;
-			if (canvas) {
-				canvas.style.cursor = 'grabbing';
-			}
-		},
-		[canvasRef],
-	);
-
-	const handleMouseMove = useCallback(
-		(event: ReactMouseEvent): void => {
-			if (!isDraggingRef.current || !dragStartRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const rect = canvas.getBoundingClientRect();
-			const deltaX = event.clientX - dragStartRef.current.x;
-			const deltaY = event.clientY - dragStartRef.current.y;
-
-			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-
-			// --- Horizontal pan ---
-			const timeSpan = viewEndRef.current - viewStartRef.current;
-			const deltaTime = (deltaX / rect.width) * timeSpan;
-
-			const newStart = viewStartRef.current - deltaTime;
-			const clampedStart = clamp(
-				newStart,
-				traceMetadata.startTime,
-				traceMetadata.endTime - timeSpan,
-			);
-			const clampedEnd = clampedStart + timeSpan;
-
-			viewStartRef.current = clampedStart;
-			viewEndRef.current = clampedEnd;
-			setViewStartTs(clampedStart);
-			setViewEndTs(clampedEnd);
-
-			// --- Vertical scroll pan ---
-			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
-			scrollTopRef.current = nextScrollTop;
-			setScrollTop(nextScrollTop);
-
-			dragStartRef.current = { x: event.clientX, y: event.clientY };
-		},
-		[
-			canvasRef,
-			traceMetadata,
-			viewStartRef,
-			viewEndRef,
-			setViewStartTs,
-			setViewEndTs,
-			scrollTopRef,
-			setScrollTop,
-			clampScrollTop,
-		],
-	);
-
-	const handleMouseUp = useCallback((): void => {
-		isDraggingRef.current = false;
-		dragStartRef.current = null;
-		dragDistanceRef.current = 0;
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			canvas.style.cursor = 'grab';
-		}
-	}, [canvasRef]);
-
-	// const handleDragMouseLeave = useCallback((): void => {
-	// 	isDraggingRef.current = false;
-	// 	dragStartRef.current = null;
-	// 	dragDistanceRef.current = 0;
-
-	// 	const canvas = canvasRef.current;
-	// 	if (canvas) {
-	// 		canvas.style.cursor = 'grab';
-	// 	}
-	// }, [canvasRef]);
-
-	return {
-		handleMouseDown,
-		handleMouseMove,
-		handleMouseUp,
-		handleDragMouseLeave: handleMouseUp, // Same logic for mouse up and leaving the canvas
-		isDraggingRef,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -1,343 +0,0 @@
-import React, { RefObject, useCallback, useMemo, useRef } from 'react';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { ConnectorLine } from '../computeVisualLayout';
-import { EventRect, SpanRect } from '../types';
-import {
-	clamp,
-	drawSpanBar,
-	FlamegraphRowMetrics,
-	getFlamegraphRowMetrics,
-	getSpanColor,
-} from '../utils';
-
-interface UseFlamegraphDrawArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	containerRef: RefObject<HTMLDivElement>;
-	spans: FlamegraphSpan[][];
-	connectors: ConnectorLine[];
-	viewStartTs: number;
-	viewEndTs: number;
-	scrollTop: number;
-	rowHeight: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
-	eventRectsRef?: React.MutableRefObject<EventRect[]>;
-	hoveredEventKey?: string | null;
-	filteredSpanIds?: string[];
-	isFilterActive?: boolean;
-}
-
-interface UseFlamegraphDrawResult {
-	drawFlamegraph: () => void;
-	spanRectsRef: RefObject<SpanRect[]>;
-	eventRectsRef: RefObject<EventRect[]>;
-}
-
-const OVERSCAN_ROWS = 4;
-
-interface DrawLevelArgs {
-	ctx: CanvasRenderingContext2D;
-	levelSpans: FlamegraphSpan[];
-	levelIndex: number;
-	y: number;
-	viewStartTs: number;
-	timeSpan: number;
-	cssWidth: number;
-	selectedSpanId: string | undefined;
-	hoveredSpanId: string;
-	isDarkMode: boolean;
-	spanRectsArray: SpanRect[];
-	eventRectsArray: EventRect[];
-	metrics: FlamegraphRowMetrics;
-	hoveredEventKey?: string | null;
-	filteredSpanIdsSet?: Set<string> | null;
-	isFilterActive?: boolean;
-}
-
-function drawLevel(args: DrawLevelArgs): void {
-	const {
-		ctx,
-		levelSpans,
-		levelIndex,
-		y,
-		viewStartTs,
-		timeSpan,
-		cssWidth,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsArray,
-		eventRectsArray,
-		metrics,
-		hoveredEventKey,
-		filteredSpanIdsSet,
-		isFilterActive: isFilterActiveInLevel,
-	} = args;
-
-	const viewEndTs = viewStartTs + timeSpan;
-
-	for (let i = 0; i < levelSpans.length; i++) {
-		const span = levelSpans[i];
-		const spanStartMs = span.timestamp;
-		const spanEndMs = span.timestamp + span.durationNano / 1e6;
-
-		// Time culling -- skip spans entirely outside the visible time window
-		if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
-			continue;
-		}
-
-		const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
-		const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
-		let width = rightEdge - leftOffset;
-
-		// Clamp to visible x-range
-		if (leftOffset < 0) {
-			width += leftOffset;
-			if (width <= 0) {
-				continue;
-			}
-		}
-		if (rightEdge > cssWidth) {
-			width = cssWidth - Math.max(0, leftOffset);
-			if (width <= 0) {
-				continue;
-			}
-		}
-
-		// Minimum 1px width so tiny spans remain visible
-		width = clamp(width, 1, Infinity);
-
-		const color = getSpanColor({ span, isDarkMode });
-
-		const isDimmedByFilter =
-			!!isFilterActiveInLevel &&
-			!!filteredSpanIdsSet &&
-			!filteredSpanIdsSet.has(span.spanId);
-
-		drawSpanBar({
-			ctx,
-			span,
-			x: Math.max(0, leftOffset),
-			y,
-			width,
-			levelIndex,
-			spanRectsArray,
-			eventRectsArray,
-			color,
-			isDarkMode,
-			metrics,
-			selectedSpanId,
-			hoveredSpanId,
-			hoveredEventKey,
-			isDimmedByFilter,
-		});
-	}
-}
-
-interface DrawConnectorLinesArgs {
-	ctx: CanvasRenderingContext2D;
-	connectors: ConnectorLine[];
-	scrollTop: number;
-	viewStartTs: number;
-	timeSpan: number;
-	cssWidth: number;
-	viewportHeight: number;
-	metrics: FlamegraphRowMetrics;
-}
-
-function drawConnectorLines(args: DrawConnectorLinesArgs): void {
-	const {
-		ctx,
-		connectors,
-		scrollTop,
-		viewStartTs,
-		timeSpan,
-		cssWidth,
-		viewportHeight,
-		metrics,
-	} = args;
-
-	ctx.save();
-	ctx.lineWidth = 1;
-	ctx.globalAlpha = 0.6;
-
-	for (const conn of connectors) {
-		const xFrac = (conn.timestampMs - viewStartTs) / timeSpan;
-		if (xFrac < -0.01 || xFrac > 1.01) {
-			continue;
-		}
-
-		const parentY =
-			conn.parentRow * metrics.ROW_HEIGHT -
-			scrollTop +
-			metrics.SPAN_BAR_Y_OFFSET +
-			metrics.SPAN_BAR_HEIGHT;
-		const childY =
-			conn.childRow * metrics.ROW_HEIGHT - scrollTop + metrics.SPAN_BAR_Y_OFFSET;
-
-		// Skip if entirely outside viewport
-		if (parentY > viewportHeight || childY < 0) {
-			continue;
-		}
-
-		const color = generateColor(
-			conn.serviceName,
-			themeColors.traceDetailColorsV3,
-		);
-		ctx.strokeStyle = color;
-
-		const x = clamp(xFrac * cssWidth, 0, cssWidth);
-		ctx.beginPath();
-		ctx.moveTo(x, parentY);
-		ctx.lineTo(x, childY);
-		ctx.stroke();
-	}
-
-	ctx.restore();
-}
-
-export function useFlamegraphDraw(
-	args: UseFlamegraphDrawArgs,
-): UseFlamegraphDrawResult {
-	const {
-		canvasRef,
-		containerRef,
-		spans,
-		connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		isDarkMode,
-		spanRectsRef: spanRectsRefProp,
-		eventRectsRef: eventRectsRefProp,
-		hoveredEventKey,
-		filteredSpanIds,
-		isFilterActive,
-	} = args;
-
-	const spanRectsRefInternal = useRef<SpanRect[]>([]);
-	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
-	const eventRectsRefInternal = useRef<EventRect[]>([]);
-	const eventRectsRef = eventRectsRefProp ?? eventRectsRefInternal;
-
-	const filteredSpanIdsSet = useMemo(
-		() =>
-			isFilterActive && filteredSpanIds && filteredSpanIds.length > 0
-				? new Set(filteredSpanIds)
-				: null,
-		[filteredSpanIds, isFilterActive],
-	);
-
-	const drawFlamegraph = useCallback(() => {
-		const canvas = canvasRef.current;
-		const container = containerRef.current;
-		if (!canvas || !container) {
-			return;
-		}
-
-		const ctx = canvas.getContext('2d');
-		if (!ctx) {
-			return;
-		}
-
-		const dpr = window.devicePixelRatio || 1;
-		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-		const timeSpan = viewEndTs - viewStartTs;
-		if (timeSpan <= 0) {
-			return;
-		}
-
-		const cssWidth = canvas.width / dpr;
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-
-		// ---- Vertical clipping window ----
-		const viewportHeight = container.clientHeight;
-
-		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
-		const firstLevel = Math.max(
-			0,
-			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
-		);
-		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
-		const visibleLevelCount =
-			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
-
-		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
-
-		ctx.clearRect(0, 0, cssWidth, viewportHeight);
-
-		// ---- Draw connector lines (behind span bars) ----
-		drawConnectorLines({
-			ctx,
-			connectors,
-			scrollTop,
-			viewStartTs,
-			timeSpan,
-			cssWidth,
-			viewportHeight,
-			metrics,
-		});
-
-		const spanRectsArray: SpanRect[] = [];
-		const eventRectsArray: EventRect[] = [];
-		const currentHoveredEventKey = hoveredEventKey ?? null;
-
-		// ---- Draw only visible levels ----
-		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
-			const levelSpans = spans[levelIndex];
-			if (!levelSpans) {
-				continue;
-			}
-
-			drawLevel({
-				ctx,
-				levelSpans,
-				levelIndex,
-				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
-				viewStartTs,
-				timeSpan,
-				cssWidth,
-				selectedSpanId,
-				hoveredSpanId,
-				isDarkMode,
-				spanRectsArray,
-				eventRectsArray,
-				metrics,
-				hoveredEventKey: currentHoveredEventKey,
-				filteredSpanIdsSet,
-				isFilterActive,
-			});
-		}
-
-		spanRectsRef.current = spanRectsArray;
-		eventRectsRef.current = eventRectsArray;
-	}, [
-		canvasRef,
-		containerRef,
-		spanRectsRef,
-		eventRectsRef,
-		spans,
-		connectors,
-		viewStartTs,
-		viewEndTs,
-		scrollTop,
-		rowHeight,
-		selectedSpanId,
-		hoveredSpanId,
-		hoveredEventKey,
-		isDarkMode,
-		filteredSpanIdsSet,
-		isFilterActive,
-	]);
-
-	return { drawFlamegraph, spanRectsRef, eventRectsRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -1,295 +0,0 @@
-import {
-	Dispatch,
-	MouseEvent as ReactMouseEvent,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useRef,
-	useState,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { EventRect, SpanRect } from '../types';
-import { ITraceMetadata } from '../types';
-import { getSpanColor } from '../utils';
-
-function getCanvasPointer(
-	canvas: HTMLCanvasElement,
-	clientX: number,
-	clientY: number,
-): { cssX: number; cssY: number } | null {
-	const rect = canvas.getBoundingClientRect();
-	const dpr = window.devicePixelRatio || 1;
-	const cssWidth = canvas.width / dpr;
-	const cssHeight = canvas.height / dpr;
-	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
-	return { cssX, cssY };
-}
-
-function findSpanAtPosition(
-	cssX: number,
-	cssY: number,
-	spanRects: SpanRect[],
-): FlamegraphSpan | null {
-	for (let i = spanRects.length - 1; i >= 0; i--) {
-		const r = spanRects[i];
-		if (
-			cssX >= r.x &&
-			cssX <= r.x + r.width &&
-			cssY >= r.y &&
-			cssY <= r.y + r.height
-		) {
-			return r.span;
-		}
-	}
-	return null;
-}
-
-function findEventAtPosition(
-	cssX: number,
-	cssY: number,
-	eventRects: EventRect[],
-): EventRect | null {
-	for (let i = eventRects.length - 1; i >= 0; i--) {
-		const r = eventRects[i];
-		// Manhattan distance check for diamond shape with padding
-		if (Math.abs(r.cx - cssX) + Math.abs(r.cy - cssY) <= r.halfSize * 1.5) {
-			return r;
-		}
-	}
-	return null;
-}
-
-export interface EventTooltipData {
-	name: string;
-	timeOffsetMs: number;
-	isError: boolean;
-	attributeMap: Record<string, string>;
-}
-
-export interface TooltipContent {
-	serviceName: string;
-	spanName: string;
-	status: 'ok' | 'warning' | 'error';
-	startMs: number;
-	durationMs: number;
-	clientX: number;
-	clientY: number;
-	spanColor: string;
-	event?: EventTooltipData;
-}
-
-interface UseFlamegraphHoverArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	spanRectsRef: MutableRefObject<SpanRect[]>;
-	eventRectsRef: MutableRefObject<EventRect[]>;
-	traceMetadata: ITraceMetadata;
-	viewStartTs: number;
-	viewEndTs: number;
-	isDraggingRef: MutableRefObject<boolean>;
-	onSpanClick: (spanId: string) => void;
-	isDarkMode: boolean;
-}
-
-interface UseFlamegraphHoverResult {
-	hoveredSpanId: string | null;
-	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
-	hoveredEventKey: string | null;
-	handleHoverMouseMove: (e: ReactMouseEvent) => void;
-	handleHoverMouseLeave: () => void;
-	handleMouseDownForClick: (e: ReactMouseEvent) => void;
-	handleClick: (e: ReactMouseEvent) => void;
-	tooltipContent: TooltipContent | null;
-}
-
-export function useFlamegraphHover(
-	args: UseFlamegraphHoverArgs,
-): UseFlamegraphHoverResult {
-	const {
-		canvasRef,
-		spanRectsRef,
-		eventRectsRef,
-		traceMetadata,
-		viewStartTs,
-		viewEndTs,
-		isDraggingRef,
-		onSpanClick,
-		isDarkMode,
-	} = args;
-
-	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
-	const [hoveredEventKey, setHoveredEventKey] = useState<string | null>(null);
-	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
-		null,
-	);
-
-	const isZoomed =
-		viewStartTs !== traceMetadata.startTime ||
-		viewEndTs !== traceMetadata.endTime;
-
-	const updateCursor = useCallback(
-		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
-			if (span) {
-				canvas.style.cursor = 'pointer';
-			} else if (isZoomed) {
-				canvas.style.cursor = 'grab';
-			} else {
-				canvas.style.cursor = 'default';
-			}
-		},
-		[isZoomed],
-	);
-
-	const handleHoverMouseMove = useCallback(
-		(e: ReactMouseEvent): void => {
-			if (isDraggingRef.current) {
-				return;
-			}
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			// Check event dots first — they're drawn on top of spans
-			const eventRect = findEventAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				eventRectsRef.current,
-			);
-
-			if (eventRect) {
-				const { event, span } = eventRect;
-				const eventTimeMs = event.timeUnixNano / 1e6;
-				setHoveredEventKey(`${span.spanId}-${event.name}-${event.timeUnixNano}`);
-				setHoveredSpanId(span.spanId);
-				setTooltipContent({
-					serviceName: span.serviceName || '',
-					spanName: span.name || 'unknown',
-					status: span.hasError ? 'error' : 'ok',
-					startMs: span.timestamp - traceMetadata.startTime,
-					durationMs: span.durationNano / 1e6,
-					clientX: e.clientX,
-					clientY: e.clientY,
-					spanColor: getSpanColor({ span, isDarkMode }),
-					event: {
-						name: event.name,
-						timeOffsetMs: eventTimeMs - span.timestamp,
-						isError: event.isError,
-						attributeMap: event.attributeMap || {},
-					},
-				});
-				updateCursor(canvas, eventRect.span);
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				setHoveredEventKey(null);
-				setHoveredSpanId(span.spanId);
-				setTooltipContent({
-					serviceName: span.serviceName || '',
-					spanName: span.name || 'unknown',
-					status: span.hasError ? 'error' : 'ok',
-					startMs: span.timestamp - traceMetadata.startTime,
-					durationMs: span.durationNano / 1e6,
-					clientX: e.clientX,
-					clientY: e.clientY,
-					spanColor: getSpanColor({ span, isDarkMode }),
-				});
-				updateCursor(canvas, span);
-			} else {
-				setHoveredEventKey(null);
-				setHoveredSpanId(null);
-				setTooltipContent(null);
-				updateCursor(canvas, null);
-			}
-		},
-		[
-			canvasRef,
-			spanRectsRef,
-			eventRectsRef,
-			traceMetadata.startTime,
-			isDraggingRef,
-			updateCursor,
-			isDarkMode,
-		],
-	);
-
-	const handleHoverMouseLeave = useCallback((): void => {
-		setHoveredEventKey(null);
-		setHoveredSpanId(null);
-		setTooltipContent(null);
-
-		const canvas = canvasRef.current;
-		if (canvas) {
-			updateCursor(canvas, null);
-		}
-	}, [canvasRef, updateCursor]);
-
-	const mouseDownPosRef = useRef<{ x: number; y: number } | null>(null);
-	const CLICK_THRESHOLD = 5;
-
-	const handleMouseDownForClick = useCallback((e: ReactMouseEvent): void => {
-		mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
-	}, []);
-
-	const handleClick = useCallback(
-		(e: ReactMouseEvent): void => {
-			// Detect drag: if mouse moved more than threshold, skip click
-			if (mouseDownPosRef.current) {
-				const dx = e.clientX - mouseDownPosRef.current.x;
-				const dy = e.clientY - mouseDownPosRef.current.y;
-				if (Math.sqrt(dx * dx + dy * dy) > CLICK_THRESHOLD) {
-					mouseDownPosRef.current = null;
-					return;
-				}
-			}
-			mouseDownPosRef.current = null;
-
-			const canvas = canvasRef.current;
-			if (!canvas) {
-				return;
-			}
-
-			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
-			if (!pointer) {
-				return;
-			}
-
-			const span = findSpanAtPosition(
-				pointer.cssX,
-				pointer.cssY,
-				spanRectsRef.current,
-			);
-
-			if (span) {
-				onSpanClick(span.spanId);
-			}
-		},
-		[canvasRef, spanRectsRef, onSpanClick],
-	);
-
-	return {
-		hoveredSpanId,
-		setHoveredSpanId,
-		hoveredEventKey,
-		handleHoverMouseMove,
-		handleHoverMouseLeave,
-		handleMouseDownForClick,
-		handleClick,
-		tooltipContent,
-	};
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -1,224 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
-
-import {
-	DEFAULT_ROW_HEIGHT,
-	MAX_ROW_HEIGHT,
-	MIN_ROW_HEIGHT,
-	MIN_VISIBLE_SPAN_MS,
-	PINCH_ZOOM_INTENSITY_H,
-	PINCH_ZOOM_INTENSITY_V,
-	SCROLL_ZOOM_INTENSITY_H,
-	SCROLL_ZOOM_INTENSITY_V,
-} from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp } from '../utils';
-
-interface UseFlamegraphZoomArgs {
-	canvasRef: RefObject<HTMLCanvasElement>;
-	traceMetadata: ITraceMetadata;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	rowHeightRef: MutableRefObject<number>;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setRowHeight: Dispatch<SetStateAction<number>>;
-}
-
-interface UseFlamegraphZoomResult {
-	handleResetZoom: () => void;
-	isOverFlamegraphRef: MutableRefObject<boolean>;
-}
-
-function getCanvasPointer(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	clientX: number,
-): { cssX: number; cssWidth: number } | null {
-	const canvas = canvasRef.current;
-	if (!canvas) {
-		return null;
-	}
-
-	const rect = canvas.getBoundingClientRect();
-	const dpr = window.devicePixelRatio || 1;
-	const cssWidth = canvas.width / dpr;
-	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
-
-	return { cssX, cssWidth };
-}
-
-export function useFlamegraphZoom(
-	args: UseFlamegraphZoomArgs,
-): UseFlamegraphZoomResult {
-	const {
-		canvasRef,
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	} = args;
-
-	const isOverFlamegraphRef = useRef(false);
-	const wheelDeltaRef = useRef(0);
-	const rafRef = useRef<number | null>(null);
-	const lastCursorXRef = useRef(0);
-	const lastCssWidthRef = useRef(1);
-	const lastIsPinchRef = useRef(false);
-	const lastWheelClientXRef = useRef<number | null>(null);
-
-	// Prevent browser zoom when pinching over the flamegraph
-	useEffect(() => {
-		const onWheel = (e: WheelEvent): void => {
-			if (isOverFlamegraphRef.current && e.ctrlKey) {
-				e.preventDefault();
-			}
-		};
-
-		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
-
-		return (): void => {
-			window.removeEventListener('wheel', onWheel, {
-				capture: true,
-			} as EventListenerOptions);
-		};
-	}, []);
-
-	const applyWheelZoom = useCallback(() => {
-		rafRef.current = null;
-
-		const cssWidth = lastCssWidthRef.current || 1;
-		const cursorX = lastCursorXRef.current;
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-
-		const oldStart = viewStartRef.current;
-		const oldEnd = viewEndRef.current;
-		const oldSpan = oldEnd - oldStart;
-
-		const deltaY = wheelDeltaRef.current;
-		wheelDeltaRef.current = 0;
-		if (deltaY === 0) {
-			return;
-		}
-
-		const zoomH = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_H
-			: SCROLL_ZOOM_INTENSITY_H;
-		const zoomV = lastIsPinchRef.current
-			? PINCH_ZOOM_INTENSITY_V
-			: SCROLL_ZOOM_INTENSITY_V;
-
-		const factorH = Math.exp(deltaY * zoomH);
-		const factorV = Math.exp(deltaY * zoomV);
-
-		// --- Horizontal zoom ---
-		const desiredSpan = oldSpan * factorH;
-		const minSpanMs = Math.max(
-			MIN_VISIBLE_SPAN_MS,
-			oldSpan / Math.max(cssWidth, 1),
-		);
-		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
-
-		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
-		const anchorTs = oldStart + cursorRatio * oldSpan;
-
-		let nextStart = anchorTs - cursorRatio * clampedSpan;
-		nextStart = clamp(
-			nextStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedSpan,
-		);
-		const nextEnd = nextStart + clampedSpan;
-
-		// --- Vertical zoom (row height) ---
-		const desiredRow = rowHeightRef.current * (1 / factorV);
-		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
-
-		// Write refs immediately so rapid wheel events read fresh values
-		viewStartRef.current = nextStart;
-		viewEndRef.current = nextEnd;
-		rowHeightRef.current = nextRow;
-
-		setViewStartTs(nextStart);
-		setViewEndTs(nextEnd);
-		setRowHeight(nextRow);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
-	useEffect(() => {
-		const canvas = canvasRef.current;
-		if (!canvas) {
-			return (): void => {};
-		}
-
-		const onWheel = (e: WheelEvent): void => {
-			e.preventDefault();
-
-			const pointer = getCanvasPointer(canvasRef, e.clientX);
-			if (!pointer) {
-				return;
-			}
-
-			// Flush accumulated delta if cursor moved significantly
-			if (lastWheelClientXRef.current !== null) {
-				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
-				if (moved > 6) {
-					wheelDeltaRef.current = 0;
-				}
-			}
-			lastWheelClientXRef.current = e.clientX;
-
-			lastIsPinchRef.current = e.ctrlKey;
-			lastCssWidthRef.current = pointer.cssWidth;
-			lastCursorXRef.current = pointer.cssX;
-			wheelDeltaRef.current += e.deltaY;
-
-			if (rafRef.current == null) {
-				rafRef.current = requestAnimationFrame(applyWheelZoom);
-			}
-		};
-
-		canvas.addEventListener('wheel', onWheel, { passive: false });
-
-		return (): void => {
-			canvas.removeEventListener('wheel', onWheel);
-		};
-	}, [canvasRef, applyWheelZoom]);
-
-	const handleResetZoom = useCallback(() => {
-		viewStartRef.current = traceMetadata.startTime;
-		viewEndRef.current = traceMetadata.endTime;
-		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
-
-		setViewStartTs(traceMetadata.startTime);
-		setViewEndTs(traceMetadata.endTime);
-		setRowHeight(DEFAULT_ROW_HEIGHT);
-	}, [
-		traceMetadata,
-		viewStartRef,
-		viewEndRef,
-		rowHeightRef,
-		setViewStartTs,
-		setViewEndTs,
-		setRowHeight,
-	]);
-
-	return { handleResetZoom, isOverFlamegraphRef };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -1,118 +0,0 @@
-import {
-	Dispatch,
-	MutableRefObject,
-	RefObject,
-	SetStateAction,
-	useEffect,
-} from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { MIN_VISIBLE_SPAN_MS } from '../constants';
-import { ITraceMetadata } from '../types';
-import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
-
-interface UseScrollToSpanArgs {
-	firstSpanAtFetchLevel: string;
-	spans: FlamegraphSpan[][];
-	traceMetadata: ITraceMetadata;
-	containerRef: RefObject<HTMLDivElement>;
-	viewStartRef: MutableRefObject<number>;
-	viewEndRef: MutableRefObject<number>;
-	scrollTopRef: MutableRefObject<number>;
-	rowHeight: number;
-	setViewStartTs: Dispatch<SetStateAction<number>>;
-	setViewEndTs: Dispatch<SetStateAction<number>>;
-	setScrollTop: Dispatch<SetStateAction<number>>;
-}
-
-/**
- * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
- * flamegraph so the selected span is centered in view.
- */
-export function useScrollToSpan(args: UseScrollToSpanArgs): void {
-	const {
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	} = args;
-
-	useEffect(() => {
-		if (!firstSpanAtFetchLevel || spans.length === 0) {
-			return;
-		}
-
-		const result = findSpanById(spans, firstSpanAtFetchLevel);
-		if (!result) {
-			return;
-		}
-
-		const { span, levelIndex } = result;
-		const container = containerRef.current;
-		if (!container) {
-			return;
-		}
-
-		const metrics = getFlamegraphRowMetrics(rowHeight);
-		const viewportHeight = container.clientHeight;
-		const totalHeight = spans.length * metrics.ROW_HEIGHT;
-		const maxScroll = Math.max(0, totalHeight - viewportHeight);
-
-		// Vertical: center the span's row in the viewport
-		const targetScrollTop = clamp(
-			levelIndex * metrics.ROW_HEIGHT -
-				viewportHeight / 2 +
-				metrics.ROW_HEIGHT / 2,
-			0,
-			maxScroll,
-		);
-
-		// Horizontal: zoom to span with padding (2x span duration), center it
-		const spanStartMs = span.timestamp;
-		const spanEndMs = span.timestamp + span.durationNano / 1e6;
-		const spanDurationMs = spanEndMs - spanStartMs;
-		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
-
-		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
-		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
-		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
-
-		let targetViewStart = spanCenterMs - clampedWindow / 2;
-		let targetViewEnd = spanCenterMs + clampedWindow / 2;
-
-		targetViewStart = clamp(
-			targetViewStart,
-			traceMetadata.startTime,
-			traceMetadata.endTime - clampedWindow,
-		);
-		targetViewEnd = targetViewStart + clampedWindow;
-
-		// Apply immediately (instant jump)
-		viewStartRef.current = targetViewStart;
-		viewEndRef.current = targetViewEnd;
-		scrollTopRef.current = targetScrollTop;
-
-		setViewStartTs(targetViewStart);
-		setViewEndTs(targetViewEnd);
-		setScrollTop(targetScrollTop);
-	}, [
-		firstSpanAtFetchLevel,
-		spans,
-		traceMetadata,
-		containerRef,
-		viewStartRef,
-		viewEndRef,
-		scrollTopRef,
-		rowHeight,
-		setViewStartTs,
-		setViewEndTs,
-		setScrollTop,
-	]);
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useVisualLayoutWorker.ts

@@ -1,123 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { computeVisualLayout, VisualLayout } from '../computeVisualLayout';
-import { LayoutWorkerResponse } from '../visualLayoutWorkerTypes';
-
-const EMPTY_LAYOUT: VisualLayout = {
-	visualRows: [],
-	spanToVisualRow: {},
-	connectors: [],
-	totalVisualRows: 0,
-};
-
-function computeLayoutOrEmpty(spans: FlamegraphSpan[][]): VisualLayout {
-	return spans.length ? computeVisualLayout(spans) : EMPTY_LAYOUT;
-}
-
-function createLayoutWorker(): Worker {
-	return new Worker(new URL('../visualLayout.worker.ts', import.meta.url), {
-		type: 'module',
-	});
-}
-
-export function useVisualLayoutWorker(
-	spans: FlamegraphSpan[][],
-): { layout: VisualLayout; isComputing: boolean; error: Error | null } {
-	const [layout, setLayout] = useState<VisualLayout>(EMPTY_LAYOUT);
-	const [isComputing, setIsComputing] = useState(false);
-	const [error, setError] = useState<Error | null>(null);
-	const isComputingRef = useRef(false);
-	const workerRef = useRef<Worker | null>(null);
-	const requestIdRef = useRef(0);
-	const fallbackRef = useRef(typeof Worker === 'undefined');
-
-	// Effect: post message to worker when spans change
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	useEffect(() => {
-		if (fallbackRef.current) {
-			setLayout(computeLayoutOrEmpty(spans));
-			return;
-		}
-
-		if (!workerRef.current) {
-			try {
-				workerRef.current = createLayoutWorker();
-			} catch {
-				fallbackRef.current = true;
-				setLayout(computeLayoutOrEmpty(spans));
-				return;
-			}
-		}
-
-		if (!spans.length) {
-			setLayout(EMPTY_LAYOUT);
-			return;
-		}
-
-		const currentId = ++requestIdRef.current;
-		setIsComputing(true);
-		isComputingRef.current = true;
-
-		const worker = workerRef.current;
-
-		const cleanup = (): void => {
-			worker.removeEventListener('message', onMessage);
-			worker.removeEventListener('error', onError);
-			clearTimeout(timeoutId);
-		};
-
-		const onMessage = (e: MessageEvent<LayoutWorkerResponse>): void => {
-			if (e.data.requestId !== requestIdRef.current) {
-				return;
-			}
-			if (e.data.type === 'result') {
-				setLayout(e.data.layout);
-			} else {
-				setError(
-					new Error(e.data.message || 'Flamegraph layout computation failed'),
-				);
-			}
-			setIsComputing(false);
-			isComputingRef.current = false;
-			cleanup();
-		};
-
-		const onError = (e: ErrorEvent): void => {
-			if (requestIdRef.current === currentId) {
-				setIsComputing(false);
-				isComputingRef.current = false;
-				setError(new Error(e.message || 'Flamegraph layout worker failed'));
-			}
-			cleanup();
-		};
-
-		// Timeout: if worker doesn't respond in 30s, terminate and error
-		const WORKER_TIMEOUT_MS = 15000;
-		const timeoutId = setTimeout(() => {
-			if (requestIdRef.current === currentId && isComputingRef.current) {
-				workerRef.current?.terminate();
-				workerRef.current = null;
-				setIsComputing(false);
-				isComputingRef.current = false;
-				setError(new Error('Flamegraph layout computation timed out'));
-			}
-		}, WORKER_TIMEOUT_MS);
-
-		worker.addEventListener('message', onMessage);
-		worker.addEventListener('error', onError);
-		worker.postMessage({ type: 'compute', requestId: currentId, spans });
-
-		return cleanup;
-	}, [spans]);
-
-	// Cleanup worker on unmount
-	useEffect(
-		() => (): void => {
-			workerRef.current?.terminate();
-		},
-		[],
-	);
-
-	return { layout, isComputing, error };
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -1,36 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Event, FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { VisualLayout } from './computeVisualLayout';
-
-export interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-export interface FlamegraphCanvasProps {
-	layout: VisualLayout;
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	onSpanClick: (spanId: string) => void;
-	traceMetadata: ITraceMetadata;
-	filteredSpanIds: string[];
-	isFilterActive: boolean;
-}
-
-export interface SpanRect {
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	level: number;
-}
-
-export interface EventRect {
-	event: Event;
-	span: FlamegraphSpan;
-	cx: number;
-	cy: number;
-	halfSize: number;
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -1,407 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import {
-	DASHED_BORDER_LINE_DASH,
-	EVENT_DOT_SIZE_RATIO,
-	LABEL_FONT,
-	LABEL_PADDING_X,
-	MAX_EVENT_DOT_SIZE,
-	MAX_SPAN_BAR_HEIGHT,
-	MIN_EVENT_DOT_SIZE,
-	MIN_SPAN_BAR_HEIGHT,
-	MIN_WIDTH_FOR_NAME,
-	MIN_WIDTH_FOR_NAME_AND_DURATION,
-	SPAN_BAR_HEIGHT_RATIO,
-} from './constants';
-import { EventRect, SpanRect } from './types';
-
-export function clamp(v: number, min: number, max: number): number {
-	return Math.max(min, Math.min(max, v));
-}
-
-export function findSpanById(
-	spans: FlamegraphSpan[][],
-	spanId: string,
-): { span: FlamegraphSpan; levelIndex: number } | null {
-	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
-		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
-		if (span) {
-			return { span, levelIndex };
-		}
-	}
-	return null;
-}
-
-export interface FlamegraphRowMetrics {
-	ROW_HEIGHT: number;
-	SPAN_BAR_HEIGHT: number;
-	SPAN_BAR_Y_OFFSET: number;
-	EVENT_DOT_SIZE: number;
-}
-
-export function getFlamegraphRowMetrics(
-	rowHeight: number,
-): FlamegraphRowMetrics {
-	const spanBarHeight = clamp(
-		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
-		MIN_SPAN_BAR_HEIGHT,
-		MAX_SPAN_BAR_HEIGHT,
-	);
-	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
-	const eventDotSize = clamp(
-		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
-		MIN_EVENT_DOT_SIZE,
-		MAX_EVENT_DOT_SIZE,
-	);
-
-	return {
-		ROW_HEIGHT: rowHeight,
-		SPAN_BAR_HEIGHT: spanBarHeight,
-		SPAN_BAR_Y_OFFSET: spanBarYOffset,
-		EVENT_DOT_SIZE: eventDotSize,
-	};
-}
-
-interface GetSpanColorArgs {
-	span: FlamegraphSpan;
-	isDarkMode: boolean;
-}
-
-export function getSpanColor(args: GetSpanColorArgs): string {
-	const { span, isDarkMode } = args;
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-
-	if (span.hasError) {
-		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
-	}
-
-	return color;
-}
-
-export interface EventDotColor {
-	fill: string;
-	stroke: string;
-}
-
-/** Derive event dot colors from parent span color. Error events always use red. */
-export function getEventDotColor(
-	spanColor: string,
-	isError: boolean,
-	isDarkMode: boolean,
-): EventDotColor {
-	if (isError) {
-		return {
-			fill: isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)',
-			stroke: isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)',
-		};
-	}
-
-	// Parse the span color (hex or rgb) to darken it for the event dot
-	let r: number | undefined;
-	let g: number | undefined;
-	let b: number | undefined;
-
-	const rgbMatch = spanColor.match(
-		/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+)?\s*\)/,
-	);
-	const hexMatch = spanColor.match(
-		/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i,
-	);
-
-	if (rgbMatch) {
-		r = parseInt(rgbMatch[1], 10);
-		g = parseInt(rgbMatch[2], 10);
-		b = parseInt(rgbMatch[3], 10);
-	} else if (hexMatch) {
-		r = parseInt(hexMatch[1], 16);
-		g = parseInt(hexMatch[2], 16);
-		b = parseInt(hexMatch[3], 16);
-	}
-
-	if (r !== undefined && g !== undefined && b !== undefined) {
-		// Darken by 20% for fill, 40% for stroke
-		const darken = (v: number, factor: number): number =>
-			Math.round(v * (1 - factor));
-		return {
-			fill: `rgb(${darken(r, 0.2)}, ${darken(g, 0.2)}, ${darken(b, 0.2)})`,
-			stroke: `rgb(${darken(r, 0.4)}, ${darken(g, 0.4)}, ${darken(b, 0.4)})`,
-		};
-	}
-
-	// Fallback to original cyan/blue
-	return {
-		fill: isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)',
-		stroke: isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)',
-	};
-}
-
-interface DrawEventDotArgs {
-	ctx: CanvasRenderingContext2D;
-	x: number;
-	y: number;
-	color: EventDotColor;
-	eventDotSize: number;
-}
-
-export function drawEventDot(args: DrawEventDotArgs): void {
-	const { ctx, x, y, color, eventDotSize } = args;
-
-	ctx.save();
-	ctx.translate(x, y);
-	ctx.rotate(Math.PI / 4);
-
-	ctx.fillStyle = color.fill;
-	ctx.strokeStyle = color.stroke;
-
-	ctx.lineWidth = 1;
-	const half = eventDotSize / 2;
-	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
-	ctx.restore();
-}
-
-interface DrawSpanBarArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	levelIndex: number;
-	spanRectsArray: SpanRect[];
-	eventRectsArray: EventRect[];
-	color: string;
-	isDarkMode: boolean;
-	metrics: FlamegraphRowMetrics;
-	selectedSpanId?: string | null;
-	hoveredSpanId?: string | null;
-	hoveredEventKey?: string | null;
-	isDimmedByFilter?: boolean;
-}
-
-export function drawSpanBar(args: DrawSpanBarArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		levelIndex,
-		spanRectsArray,
-		eventRectsArray,
-		color,
-		isDarkMode,
-		metrics,
-		selectedSpanId,
-		hoveredSpanId,
-		hoveredEventKey,
-		isDimmedByFilter,
-	} = args;
-
-	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
-	const isSelected = selectedSpanId === span.spanId;
-	const isHovered = hoveredSpanId === span.spanId;
-	const isSelectedOrHovered = isSelected || isHovered;
-	const shouldDim = isDimmedByFilter && !isSelectedOrHovered;
-
-	// Dim non-matching spans when filter is active (matches waterfall's .dimmed-span { opacity: 0.4 }).
-	// Alpha is applied to bar + events only; label is drawn after restoring alpha to 1
-	// so text stays readable against the faded bar.
-	if (shouldDim) {
-		ctx.globalAlpha = 0.4;
-	}
-
-	ctx.beginPath();
-	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
-
-	if (isSelectedOrHovered) {
-		// Solid fill matching --l2-background token (dark: #16181d, light: #f9f9fb)
-		ctx.fillStyle = isDarkMode ? '#16181d' : '#f9f9fb';
-		ctx.fill();
-		if (isSelected) {
-			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
-		}
-		ctx.strokeStyle = color;
-		ctx.lineWidth = isSelected ? 2 : 1;
-		ctx.stroke();
-		if (isSelected) {
-			ctx.setLineDash([]);
-		}
-	} else {
-		ctx.fillStyle = color;
-		ctx.fill();
-	}
-
-	spanRectsArray.push({
-		span,
-		x,
-		y: spanY,
-		width,
-		height: metrics.SPAN_BAR_HEIGHT,
-		level: levelIndex,
-	});
-
-	span.event?.forEach((event) => {
-		const spanDurationMs = span.durationNano / 1e6;
-		if (spanDurationMs <= 0) {
-			return;
-		}
-
-		const eventTimeMs = event.timeUnixNano / 1e6;
-		const eventOffsetPercent =
-			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
-		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
-		const eventX = x + (clampedOffset / 100) * width;
-		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
-
-		const dotColor = getEventDotColor(color, event.isError, isDarkMode);
-		const eventKey = `${span.spanId}-${event.name}-${event.timeUnixNano}`;
-		const isEventHovered = hoveredEventKey === eventKey;
-		const dotSize = isEventHovered
-			? Math.round(metrics.EVENT_DOT_SIZE * 1.5)
-			: metrics.EVENT_DOT_SIZE;
-
-		drawEventDot({
-			ctx,
-			x: eventX,
-			y: eventY,
-			color: dotColor,
-			eventDotSize: dotSize,
-		});
-
-		eventRectsArray.push({
-			event,
-			span,
-			cx: eventX,
-			cy: eventY,
-			halfSize: metrics.EVENT_DOT_SIZE / 2,
-		});
-	});
-
-	// Restore alpha before drawing label so text is legible on dimmed bars
-	if (shouldDim) {
-		ctx.globalAlpha = 1;
-	}
-
-	drawSpanLabel({
-		ctx,
-		span,
-		x,
-		y: spanY,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
-	});
-}
-
-export function formatDuration(durationNano: number): string {
-	const durationMs = durationNano / 1e6;
-	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
-	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
-}
-
-interface DrawSpanLabelArgs {
-	ctx: CanvasRenderingContext2D;
-	span: FlamegraphSpan;
-	x: number;
-	y: number;
-	width: number;
-	color: string;
-	isSelectedOrHovered: boolean;
-	isDarkMode: boolean;
-	spanBarHeight: number;
-}
-
-function drawSpanLabel(args: DrawSpanLabelArgs): void {
-	const {
-		ctx,
-		span,
-		x,
-		y,
-		width,
-		color,
-		isSelectedOrHovered,
-		isDarkMode,
-		spanBarHeight,
-	} = args;
-
-	if (width < MIN_WIDTH_FOR_NAME) {
-		return;
-	}
-
-	const name = span.name;
-
-	ctx.save();
-
-	// Clip text to span bar bounds
-	ctx.beginPath();
-	ctx.rect(x, y, width, spanBarHeight);
-	ctx.clip();
-
-	ctx.font = LABEL_FONT;
-	ctx.fillStyle = isSelectedOrHovered
-		? color
-		: isDarkMode
-		? 'rgba(0, 0, 0, 0.9)'
-		: 'rgba(255, 255, 255, 0.9)';
-	ctx.textBaseline = 'middle';
-
-	const textY = y + spanBarHeight / 2;
-	const leftX = x + LABEL_PADDING_X;
-	const rightX = x + width - LABEL_PADDING_X;
-	const availableWidth = width - LABEL_PADDING_X * 2;
-
-	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
-		const duration = formatDuration(span.durationNano);
-		const durationWidth = ctx.measureText(duration).width;
-		const minGap = 6;
-		const nameSpace = availableWidth - durationWidth - minGap;
-
-		// Duration right-aligned
-		ctx.textAlign = 'right';
-		ctx.fillText(duration, rightX, textY);
-
-		// Name left-aligned, truncated to fit remaining space
-		if (nameSpace > 20) {
-			ctx.textAlign = 'left';
-			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
-		}
-	} else {
-		// Name only, truncated to fit
-		ctx.textAlign = 'left';
-		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
-	}
-
-	ctx.restore();
-}
-
-function truncateText(
-	ctx: CanvasRenderingContext2D,
-	text: string,
-	maxWidth: number,
-): string {
-	const ellipsis = '...';
-	const ellipsisWidth = ctx.measureText(ellipsis).width;
-
-	if (ctx.measureText(text).width <= maxWidth) {
-		return text;
-	}
-
-	let lo = 0;
-	let hi = text.length;
-	while (lo < hi) {
-		const mid = Math.ceil((lo + hi) / 2);
-		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
-			lo = mid;
-		} else {
-			hi = mid - 1;
-		}
-	}
-
-	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
-}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayout.worker.ts

@@ -1,26 +0,0 @@
-/// <reference lib="webworker" />
-import { computeVisualLayout } from './computeVisualLayout';
-import {
-	LayoutWorkerRequest,
-	LayoutWorkerResponse,
-} from './visualLayoutWorkerTypes';
-
-self.onmessage = (event: MessageEvent<LayoutWorkerRequest>): void => {
-	const { requestId, spans } = event.data;
-	try {
-		const layout = computeVisualLayout(spans);
-		const response: LayoutWorkerResponse = {
-			type: 'result',
-			requestId,
-			layout,
-		};
-		self.postMessage(response);
-	} catch (err) {
-		const response: LayoutWorkerResponse = {
-			type: 'error',
-			requestId,
-			message: String(err),
-		};
-		self.postMessage(response);
-	}
-};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/visualLayoutWorkerTypes.ts

@@ -1,13 +0,0 @@
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-
-import { VisualLayout } from './computeVisualLayout';
-
-export interface LayoutWorkerRequest {
-	type: 'compute';
-	requestId: number;
-	spans: FlamegraphSpan[][];
-}
-
-export type LayoutWorkerResponse =
-	| { type: 'result'; requestId: number; layout: VisualLayout }
-	| { type: 'error'; requestId: number; message: string };

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

@@ -1,236 +0,0 @@
-// 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(--l1-background);
-			}
-
-			&-header {
-				border-bottom: none;
-
-				.ant-modal-title {
-					color: var(--l1-foreground);
-				}
-			}
-
-			&-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(--l2-background);
-				border-top: 1px solid var(--l2-border);
-				padding: 16px !important;
-				.add-span-to-funnel-modal {
-					&__save-button {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 4px;
-						color: var(--l1-foreground);
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 24px;
-						width: 135px;
-
-						.ant-btn-icon {
-							display: flex;
-						}
-						&:disabled {
-							color: var(--l2-foreground);
-							.ant-btn-icon {
-								svg {
-									stroke: var(--l2-foreground);
-								}
-							}
-						}
-					}
-					&__discard-button {
-						background: var(--l3-background);
-					}
-				}
-				.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;
-	}
-
-	// 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(--l3-background);
-
-			.ant-input-prefix {
-				height: 18px;
-				margin-inline-end: 6px;
-				svg {
-					opacity: 0.4;
-				}
-			}
-
-			&,
-			input {
-				font-size: 14px;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-				font-weight: 400;
-				background: var(--l3-background);
-			}
-
-			input::placeholder {
-				color: var(--l2-foreground);
-				opacity: 0.6;
-			}
-		}
-	}
-
-	// 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(--l3-background);
-		border: none;
-		box-shadow: none;
-		color: var(--l2-foreground);
-		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(--l2-foreground);
-		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;
-		}
-	}
-}

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

@@ -1,294 +0,0 @@
-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 { SpanV3 } from 'types/api/trace/getTraceV3';
-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: SpanV3;
-	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 as any}
-				triggerAutoSave={triggerAutoSave}
-				showNotifications={showNotifications}
-			/>
-		</div>
-	);
-}
-
-interface AddSpanToFunnelModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	span: SpanV3;
-}
-
-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: SpanV3 }): 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;