feat: code refactor around feedbacks

Restructure Validate nil check, rename expectErr to fail with
early-return, trim trailing newlines in test assertions, remove
t.Parallel from subtests, inline short config literals, restore
struct field comments in web.Config.

cmd/community/server.go

@@ -75,7 +75,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			return signoz.NewSQLSchemaProviderFactories(sqlstore)
 		},

cmd/enterprise/server.go

@@ -96,7 +96,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
 			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {

conf/example.yaml

@@ -6,6 +6,8 @@
 ##################### Global #####################
 global:
   # the url under which the signoz apiserver is externally reachable.
+  # the path component (e.g. /signoz in https://example.com/signoz) is used
+  # as the base path for all HTTP routes (both API and web frontend).
   external_url: <unset>
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
@@ -50,8 +52,8 @@ pprof:
 web:
   # Whether to enable the web frontend
   enabled: true
-  # The prefix to serve web on
-  prefix: /
+  # The index file to use as the SPA entrypoint.
+  index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
 

docs/api/openapi.yml

@@ -3871,146 +3871,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:
@@ -4032,6 +3892,8 @@ components:
           type: string
         oldPassword:
           type: string
+        userId:
+          type: string
       type: object
     TypesDeprecatedUser:
       properties:
@@ -4410,6 +4272,63 @@ paths:
       summary: Get resources
       tags:
       - authz
+  /api/v1/changePassword/{id}:
+    post:
+      deprecated: false
+      description: This endpoint changes the password by id
+      operationId: ChangePassword
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TypesChangePasswordRequest'
+      responses:
+        "204":
+          description: No Content
+        "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:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Change password
+      tags:
+      - users
   /api/v1/channels:
     get:
       deprecated: false
@@ -6149,9 +6068,9 @@ paths:
       - fields
   /api/v1/getResetPasswordToken/{id}:
     get:
-      deprecated: true
+      deprecated: false
       description: This endpoint returns the reset password token by id
-      operationId: GetResetPasswordTokenDeprecated
+      operationId: GetResetPasswordToken
       parameters:
       - in: path
         name: id
@@ -10975,129 +10894,6 @@ paths:
       summary: Update user v2
       tags:
       - users
-  /api/v2/users/{id}/reset_password_tokens:
-    get:
-      deprecated: false
-      description: This endpoint returns the existing reset password token for a user.
-      operationId: GetResetPasswordToken
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesResetPasswordToken'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get reset password token for a user
-      tags:
-      - users
-    put:
-      deprecated: false
-      description: This endpoint creates or regenerates a reset password token for
-        a user. If a valid token exists, it is returned. If expired, a new one is
-        created.
-      operationId: CreateResetPasswordToken
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesResetPasswordToken'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create or regenerate reset password token for a user
-      tags:
-      - users
   /api/v2/users/{id}/roles:
     get:
       deprecated: false
@@ -11338,57 +11134,6 @@ paths:
       summary: Update my user v2
       tags:
       - users
-  /api/v2/users/me/factor_password:
-    put:
-      deprecated: false
-      description: This endpoint updates the password of the user I belong to
-      operationId: UpdateMyPassword
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TypesChangePasswordRequest'
-      responses:
-        "204":
-          description: No Content
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Updates my password
-      tags:
-      - users
   /api/v2/zeus/hosts:
     get:
       deprecated: false
@@ -11560,76 +11305,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

ee/query-service/app/server.go

@@ -262,6 +262,20 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		return nil, err
 	}
 
+	routePrefix := s.config.Global.ExternalPath()
+	if routePrefix != "" {
+		prefixed := http.StripPrefix(routePrefix, handler)
+		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			switch req.URL.Path {
+			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
+				r.ServeHTTP(w, req)
+				return
+			}
+
+			prefixed.ServeHTTP(w, req)
+		})
+	}
+
 	return &http.Server{
 		Handler: handler,
 	}, nil

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns; upgrade to error coming PR
+		'rulesdir/no-raw-absolute-path': 'warn',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned

frontend/.gitignore

@@ -28,4 +28,4 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
+e2e/test-plan/user-preferences/

frontend/eslint-rules/no-raw-absolute-path.js

@@ -0,0 +1,103 @@
+'use strict';
+
+/**
+ * ESLint rule: no-raw-absolute-path
+ *
+ * Catches two patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					return;
+				if (args.length < 1) return;
+				if (isExternalUrl(args[0])) return;
+				if (isSafeHelperCall(args[0])) return;
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') return;
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+		};
+	},
+};

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -113,7 +114,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/package.json

@@ -68,7 +68,7 @@
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
-    "@signozhq/ui": "0.0.6",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -140,12 +140,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/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

@@ -47,7 +47,6 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
-	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -141,16 +140,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/ReactI18/index.tsx

@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

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

@@ -4811,248 +4811,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
@@ -5079,6 +4837,10 @@ export interface TypesChangePasswordRequestDTO {
 	 * @type string
 	 */
 	oldPassword?: string;
+	/**
+	 * @type string
+	 */
+	userId?: string;
 }
 
 export interface TypesDeprecatedUserDTO {
@@ -5442,6 +5204,9 @@ export type AuthzResources200 = {
 	status: string;
 };
 
+export type ChangePasswordPathParameters = {
+	id: string;
+};
 export type ListChannels200 = {
 	/**
 	 * @type array
@@ -5839,10 +5604,10 @@ export type GetFieldsValues200 = {
 	status: string;
 };
 
-export type GetResetPasswordTokenDeprecatedPathParameters = {
+export type GetResetPasswordTokenPathParameters = {
 	id: string;
 };
-export type GetResetPasswordTokenDeprecated200 = {
+export type GetResetPasswordToken200 = {
 	data: TypesResetPasswordTokenDTO;
 	/**
 	 * @type string
@@ -6814,28 +6579,6 @@ export type GetUser200 = {
 export type UpdateUserPathParameters = {
 	id: string;
 };
-export type GetResetPasswordTokenPathParameters = {
-	id: string;
-};
-export type GetResetPasswordToken200 = {
-	data: TypesResetPasswordTokenDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type CreateResetPasswordTokenPathParameters = {
-	id: string;
-};
-export type CreateResetPasswordToken201 = {
-	data: TypesResetPasswordTokenDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetRolesByUserIDPathParameters = {
 	id: string;
 };
@@ -6873,17 +6616,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/generated/services/users/index.ts

@@ -20,15 +20,12 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
+	ChangePasswordPathParameters,
 	CreateInvite201,
-	CreateResetPasswordToken201,
-	CreateResetPasswordTokenPathParameters,
 	DeleteUserPathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
-	GetResetPasswordTokenDeprecated200,
-	GetResetPasswordTokenDeprecatedPathParameters,
 	GetResetPasswordTokenPathParameters,
 	GetRolesByUserID200,
 	GetRolesByUserIDPathParameters,
@@ -57,35 +54,133 @@ import type {
 } from '../sigNoz.schemas';
 
 /**
- * This endpoint returns the reset password token by id
- * @deprecated
- * @summary Get reset password token
+ * This endpoint changes the password by id
+ * @summary Change password
  */
-export const getResetPasswordTokenDeprecated = (
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+export const changePassword = (
+	{ id }: ChangePasswordPathParameters,
+	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<GetResetPasswordTokenDeprecated200>({
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/changePassword/${id}`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesChangePasswordRequestDTO,
+		signal,
+	});
+};
+
+export const getChangePasswordMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof changePassword>>,
+		TError,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof changePassword>>,
+	TError,
+	{
+		pathParams: ChangePasswordPathParameters;
+		data: BodyType<TypesChangePasswordRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['changePassword'];
+	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 changePassword>>,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return changePassword(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ChangePasswordMutationResult = NonNullable<
+	Awaited<ReturnType<typeof changePassword>>
+>;
+export type ChangePasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type ChangePasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Change password
+ */
+export const useChangePassword = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof changePassword>>,
+		TError,
+		{
+			pathParams: ChangePasswordPathParameters;
+			data: BodyType<TypesChangePasswordRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof changePassword>>,
+	TError,
+	{
+		pathParams: ChangePasswordPathParameters;
+		data: BodyType<TypesChangePasswordRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getChangePasswordMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns the reset password token by id
+ * @summary Get reset password token
+ */
+export const getResetPasswordToken = (
+	{ id }: GetResetPasswordTokenPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetResetPasswordToken200>({
 		url: `/api/v1/getResetPasswordToken/${id}`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getGetResetPasswordTokenDeprecatedQueryKey = ({
+export const getGetResetPasswordTokenQueryKey = ({
 	id,
-}: GetResetPasswordTokenDeprecatedPathParameters) => {
+}: GetResetPasswordTokenPathParameters) => {
 	return [`/api/v1/getResetPasswordToken/${id}`] as const;
 };
 
-export const getGetResetPasswordTokenDeprecatedQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+export const getGetResetPasswordTokenQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
 			TError,
 			TData
 		>;
@@ -94,11 +189,11 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenDeprecatedQueryKey({ id });
+		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
 
 	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
-	> = ({ signal }) => getResetPasswordTokenDeprecated({ id }, signal);
+		Awaited<ReturnType<typeof getResetPasswordToken>>
+	> = ({ signal }) => getResetPasswordToken({ id }, signal);
 
 	return {
 		queryKey,
@@ -106,39 +201,35 @@ export const getGetResetPasswordTokenDeprecatedQueryOptions = <
 		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+		Awaited<ReturnType<typeof getResetPasswordToken>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+export type GetResetPasswordTokenQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordToken>>
 >;
-export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Get reset password token
  */
 
-export function useGetResetPasswordTokenDeprecated<
-	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+export function useGetResetPasswordToken<
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
 			TError,
 			TData
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenDeprecatedQueryOptions(
-		{ id },
-		options,
-	);
+	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -150,16 +241,15 @@ export function useGetResetPasswordTokenDeprecated<
 }
 
 /**
- * @deprecated
  * @summary Get reset password token
  */
-export const invalidateGetResetPasswordTokenDeprecated = async (
+export const invalidateGetResetPasswordToken = async (
 	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
+	{ id }: GetResetPasswordTokenPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenDeprecatedQueryKey({ id }) },
+		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
 		options,
 	);
 
@@ -1317,189 +1407,6 @@ export const useUpdateUser = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint returns the existing reset password token for a user.
- * @summary Get reset password token for a user
- */
-export const getResetPasswordToken = (
-	{ id }: GetResetPasswordTokenPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetResetPasswordToken200>({
-		url: `/api/v2/users/${id}/reset_password_tokens`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetResetPasswordTokenQueryKey = ({
-	id,
-}: GetResetPasswordTokenPathParameters) => {
-	return [`/api/v2/users/${id}/reset_password_tokens`] as const;
-};
-
-export const getGetResetPasswordTokenQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordToken>>
-	> = ({ signal }) => getResetPasswordToken({ id }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!id,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordToken>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetResetPasswordTokenQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordToken>>
->;
-export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get reset password token for a user
- */
-
-export function useGetResetPasswordToken<
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get reset password token for a user
- */
-export const invalidateGetResetPasswordToken = async (
-	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.
- * @summary Create or regenerate reset password token for a user
- */
-export const createResetPasswordToken = ({
-	id,
-}: CreateResetPasswordTokenPathParameters) => {
-	return GeneratedAPIInstance<CreateResetPasswordToken201>({
-		url: `/api/v2/users/${id}/reset_password_tokens`,
-		method: 'PUT',
-	});
-};
-
-export const getCreateResetPasswordTokenMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createResetPasswordToken>>,
-		TError,
-		{ pathParams: CreateResetPasswordTokenPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createResetPasswordToken>>,
-	TError,
-	{ pathParams: CreateResetPasswordTokenPathParameters },
-	TContext
-> => {
-	const mutationKey = ['createResetPasswordToken'];
-	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 createResetPasswordToken>>,
-		{ pathParams: CreateResetPasswordTokenPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return createResetPasswordToken(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateResetPasswordTokenMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createResetPasswordToken>>
->;
-
-export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create or regenerate reset password token for a user
- */
-export const useCreateResetPasswordToken = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createResetPasswordToken>>,
-		TError,
-		{ pathParams: CreateResetPasswordTokenPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createResetPasswordToken>>,
-	TError,
-	{ pathParams: CreateResetPasswordTokenPathParameters },
-	TContext
-> => {
-	const mutationOptions = getCreateResetPasswordTokenMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoint returns the user roles by user id
  * @summary Get user roles
@@ -1943,84 +1850,3 @@ export const useUpdateMyUserV2 = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint updates the password of the user I belong to
- * @summary Updates my password
- */
-export const updateMyPassword = (
-	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/users/me/factor_password`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesChangePasswordRequestDTO,
-	});
-};
-
-export const getUpdateMyPasswordMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMyPassword>>,
-		TError,
-		{ data: BodyType<TypesChangePasswordRequestDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateMyPassword>>,
-	TError,
-	{ data: BodyType<TypesChangePasswordRequestDTO> },
-	TContext
-> => {
-	const mutationKey = ['updateMyPassword'];
-	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 updateMyPassword>>,
-		{ data: BodyType<TypesChangePasswordRequestDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return updateMyPassword(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateMyPasswordMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateMyPassword>>
->;
-export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
-export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Updates my password
- */
-export const useUpdateMyPassword = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateMyPassword>>,
-		TError,
-		{ data: BodyType<TypesChangePasswordRequestDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateMyPassword>>,
-	TError,
-	{ data: BodyType<TypesChangePasswordRequestDTO> },
-	TContext
-> => {
-	const mutationOptions = getUpdateMyPasswordMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,42 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		if (!value.baseURL.startsWith(basePath)) {
+			value.baseURL = basePath + value.baseURL.slice(1);
+		}
+	} else if (value.baseURL?.startsWith('http')) {
+		// Absolute baseURL (e.g. VITE_FRONTEND_API_ENDPOINT set for dev/testing):
+		// 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		if (!url.pathname.startsWith(basePath)) {
+			url.pathname = basePath + url.pathname.slice(1);
+			value.baseURL = url.toString();
+		}
+	} else if (
+		!value.baseURL &&
+		value.url?.startsWith('/') &&
+		!value.url.startsWith(basePath)
+	) {
+		// Generated instance: baseURL is '' in prod, path is in url
+		value.url = basePath + value.url.slice(1);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +170,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +185,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +197,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +210,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +223,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +236,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +244,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

frontend/src/api/trace/getTraceV3.tsx

@@ -1,115 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { Event, Span } from 'types/api/trace/getTraceV2';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-} from 'types/api/trace/getTraceV3';
-
-// Transform a V3 snake_case span to the V2 camelCase Span shape
-// V3 WaterfallSpan uses snake_case JSON keys (see pkg/types/tracedetailtypes/waterfall.go)
-function transformSpan(raw: any): Span {
-	const resource: Record<string, string> = raw.resource || {};
-	const attributes: Record<string, any> = raw.attributes || {};
-
-	// Build tagMap from attributes (flattened string representation)
-	const tagMap: Record<string, string> = {};
-	Object.entries(attributes).forEach(([k, v]) => {
-		tagMap[k] = String(v);
-	});
-
-	// Transform events (already camelCase from backend)
-	const events: Event[] = (raw.events || []).map((e: any) => ({
-		name: e.name || '',
-		timeUnixNano: e.timeUnixNano || 0,
-		attributeMap: e.attributeMap || {},
-		isError: e.isError || false,
-	}));
-
-	return {
-		timestamp: raw.timestamp || 0,
-		durationNano: raw.duration_nano ?? raw.durationNano ?? 0,
-		spanId: raw.span_id ?? raw.spanId ?? '',
-		rootSpanId: raw.root_span_id ?? raw.rootSpanId ?? '',
-		parentSpanId: raw.parent_span_id ?? raw.parentSpanId ?? '',
-		traceId: raw.trace_id ?? raw.traceId ?? '',
-		hasError: raw.has_error ?? raw.hasError ?? false,
-		kind: raw.kind || 0,
-		serviceName: resource['service.name'] || raw.serviceName || '',
-		name: raw.name || '',
-		references: raw.references || null,
-		tagMap,
-		event: events,
-		rootName: raw.root_name ?? raw.rootName ?? '',
-		statusMessage: raw.status_message ?? raw.statusMessage ?? '',
-		statusCodeString: raw.status_code_string ?? raw.statusCodeString ?? '',
-		spanKind: raw.kind_string ?? raw.spanKind ?? '',
-		hasChildren: raw.has_children ?? raw.hasChildren ?? false,
-		hasSibling: raw.has_sibling ?? raw.hasSibling ?? false,
-		subTreeNodeCount: raw.sub_tree_node_count ?? raw.subTreeNodeCount ?? 0,
-		level: raw.level || 0,
-		// V3 format fields
-		attributes: tagMap,
-		resources: resource,
-		// Snake_case passthrough fields
-		http_method: raw.http_method,
-		http_url: raw.http_url,
-		http_host: raw.http_host,
-		db_name: raw.db_name,
-		db_operation: raw.db_operation,
-		external_http_method: raw.external_http_method,
-		external_http_url: raw.external_http_url,
-		response_status_code: raw.response_status_code,
-		is_remote: raw.is_remote,
-	};
-}
-
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
-	);
-
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
-
-	const spans = (rawPayload.spans || []).map(transformSpan);
-
-	// 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
-	) {
-		// V3 times are relative — derive absolute times from span data
-		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/api/v1/factor_password/changeMyPassword.ts

@@ -0,0 +1,27 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/user/changeMyPassword';
+
+const changeMyPassword = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>(
+			`/changePassword/${props.userId}`,
+			{
+				...props,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default changeMyPassword;

frontend/src/api/v1/factor_password/getResetPasswordToken.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	GetResetPasswordToken,
+	PayloadProps,
+	Props,
+} from 'types/api/user/getResetPasswordToken';
+
+const getResetPasswordToken = async (
+	props: Props,
+): Promise<SuccessResponseV2<GetResetPasswordToken>> => {
+	try {
+		const response = await axios.get<PayloadProps>(
+			`/getResetPasswordToken/${props.userId}`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getResetPasswordToken;

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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/EditMemberDrawer/EditMemberDrawer.tsx

@@ -10,9 +10,8 @@ import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	useCreateResetPasswordToken,
+	getResetPasswordToken,
 	useDeleteUser,
-	useGetResetPasswordToken,
 	useGetUser,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -56,27 +55,6 @@ function getDeleteTooltip(
 	return undefined;
 }
 
-function getInviteButtonLabel(
-	isLoading: boolean,
-	existingToken: { expiresAt?: Date } | undefined,
-	isExpired: boolean,
-	notFound: boolean,
-): string {
-	if (isLoading) {
-		return 'Checking invite...';
-	}
-	if (existingToken && !isExpired) {
-		return 'Copy Invite Link';
-	}
-	if (isExpired) {
-		return 'Regenerate Invite Link';
-	}
-	if (notFound) {
-		return 'Generate Invite Link';
-	}
-	return 'Copy Invite Link';
-}
-
 function toSaveApiError(err: unknown): APIError {
 	return (
 		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
@@ -105,11 +83,9 @@ function EditMemberDrawer({
 	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
+	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
-	const [resetLinkExpiresAt, setResetLinkExpiresAt] = useState<string | null>(
-		null,
-	);
 	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
 	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
@@ -145,27 +121,6 @@ function EditMemberDrawer({
 		applyDiff,
 	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
 
-	// Token status query for invited users
-	const {
-		data: tokenQueryData,
-		isLoading: isLoadingTokenStatus,
-		isError: tokenNotFound,
-	} = useGetResetPasswordToken(
-		{ id: member?.id ?? '' },
-		{ query: { enabled: open && !!member?.id && isInvited } },
-	);
-
-	const existingToken = tokenQueryData?.data;
-	const isTokenExpired =
-		existingToken != null &&
-		new Date(String(existingToken.expiresAt)) < new Date();
-
-	// Create/regenerate token mutation
-	const {
-		mutateAsync: createTokenMutation,
-		isLoading: isGeneratingLink,
-	} = useCreateResetPasswordToken();
-
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
 	const fetchedUserId = fetchedUser?.data?.id;
@@ -383,21 +338,12 @@ function EditMemberDrawer({
 		if (!member) {
 			return;
 		}
+		setIsGeneratingLink(true);
 		try {
-			const response = await createTokenMutation({
-				pathParams: { id: member.id },
-			});
+			const response = await getResetPasswordToken({ id: member.id });
 			if (response?.data?.token) {
 				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
 				setResetLink(link);
-				setResetLinkExpiresAt(
-					response.data.expiresAt
-						? formatTimezoneAdjustedTimestamp(
-								String(response.data.expiresAt),
-								DATE_TIME_FORMATS.DASH_DATETIME,
-						  )
-						: null,
-				);
 				setHasCopiedResetLink(false);
 				setLinkType(isInvited ? 'invite' : 'reset');
 				setShowResetLinkDialog(true);
@@ -413,8 +359,10 @@ function EditMemberDrawer({
 				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
 			);
 			showErrorModal(errMsg as APIError);
+		} finally {
+			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose, showErrorModal, createTokenMutation]);
+	}, [member, isInvited, onClose, showErrorModal]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -620,19 +568,12 @@ function EditMemberDrawer({
 								<Button
 									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
 									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+									disabled={isGeneratingLink || isRootUser}
 								>
 									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
+									{isGeneratingLink && 'Generating...'}
+									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
+									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>
@@ -682,7 +623,6 @@ function EditMemberDrawer({
 				open={showResetLinkDialog}
 				linkType={linkType}
 				resetLink={resetLink}
-				expiresAt={resetLinkExpiresAt}
 				hasCopied={hasCopiedResetLink}
 				onClose={(): void => {
 					setShowResetLinkDialog(false);

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -6,7 +6,6 @@ interface ResetLinkDialogProps {
 	open: boolean;
 	linkType: 'invite' | 'reset' | null;
 	resetLink: string | null;
-	expiresAt: string | null;
 	hasCopied: boolean;
 	onClose: () => void;
 	onCopy: () => void;
@@ -16,7 +15,6 @@ function ResetLinkDialog({
 	open,
 	linkType,
 	resetLink,
-	expiresAt,
 	hasCopied,
 	onClose,
 	onCopy,
@@ -55,11 +53,6 @@ function ResetLinkDialog({
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>
 				</div>
-				{expiresAt && (
-					<p className="reset-link-dialog__description">
-						This link expires on {expiresAt}.
-					</p>
-				)}
 			</div>
 		</DialogWrapper>
 	);

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -2,9 +2,8 @@ import type { ReactNode } from 'react';
 import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	useCreateResetPasswordToken,
+	getResetPasswordToken,
 	useDeleteUser,
-	useGetResetPasswordToken,
 	useGetUser,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
@@ -56,8 +55,7 @@ jest.mock('api/generated/services/users', () => ({
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
+	getResetPasswordToken: jest.fn(),
 }));
 
 jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
@@ -84,7 +82,7 @@ jest.mock('react-use', () => ({
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
 const mockDeleteMutate = jest.fn();
-const mockCreateTokenMutateAsync = jest.fn();
+const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
 const showErrorModal = jest.fn();
 jest.mock('providers/ErrorModalProvider', () => ({
@@ -186,31 +184,6 @@ describe('EditMemberDrawer', () => {
 			mutate: mockDeleteMutate,
 			isLoading: false,
 		});
-		// Token query: valid token for invited members
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					token: 'invite-tok-valid',
-					id: 'token-1',
-					expiresAt: new Date(Date.now() + 86400000).toISOString(),
-				},
-			},
-			isLoading: false,
-			isError: false,
-		});
-		// Create token mutation
-		mockCreateTokenMutateAsync.mockResolvedValue({
-			status: 'success',
-			data: {
-				token: 'reset-tok-abc',
-				id: 'user-1',
-				expiresAt: new Date(Date.now() + 86400000).toISOString(),
-			},
-		});
-		(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
-			mutateAsync: mockCreateTokenMutateAsync,
-			isLoading: false,
-		});
 	});
 
 	afterEach(() => {
@@ -384,40 +357,6 @@ describe('EditMemberDrawer', () => {
 		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
 	});
 
-	it('shows "Regenerate Invite Link" when token is expired', () => {
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					token: 'old-tok',
-					id: 'token-1',
-					expiresAt: new Date(Date.now() - 86400000).toISOString(), // expired yesterday
-				},
-			},
-			isLoading: false,
-			isError: false,
-		});
-
-		renderDrawer({ member: invitedMember });
-
-		expect(
-			screen.getByRole('button', { name: /regenerate invite link/i }),
-		).toBeInTheDocument();
-	});
-
-	it('shows "Generate Invite Link" when no token exists', () => {
-		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isError: true,
-		});
-
-		renderDrawer({ member: invitedMember });
-
-		expect(
-			screen.getByRole('button', { name: /generate invite link/i }),
-		).toBeInTheDocument();
-	});
-
 	it('calls deleteUser after confirming revoke invite for invited members', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
@@ -670,7 +609,7 @@ describe('EditMemberDrawer', () => {
 			).not.toBeInTheDocument();
 		});
 
-		it('does not call createResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderDrawer();
 
@@ -678,16 +617,20 @@ describe('EditMemberDrawer', () => {
 				screen.getByRole('button', { name: /generate password reset link/i }),
 			);
 
-			expect(mockCreateTokenMutateAsync).not.toHaveBeenCalled();
+			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
 		});
 	});
 
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();
+			mockGetResetPasswordToken.mockResolvedValue({
+				status: 'success',
+				data: { token: 'reset-tok-abc', id: 'user-1' },
+			});
 		});
 
-		it('calls POST and opens the reset link dialog with the generated link and expiry', async () => {
+		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			renderDrawer();
@@ -699,12 +642,11 @@ describe('EditMemberDrawer', () => {
 			const dialog = await screen.findByRole('dialog', {
 				name: /password reset link/i,
 			});
-			expect(mockCreateTokenMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1' },
+			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
+				id: 'user-1',
 			});
 			expect(dialog).toBeInTheDocument();
 			expect(dialog).toHaveTextContent('reset-tok-abc');
-			expect(dialog).toHaveTextContent(/this link expires on/i);
 		});
 
 		it('copies the link to clipboard and shows "Copied!" on the button', async () => {

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,4 +0,0 @@
-.timeline-v3-container {
-	// flex: 1;
-	overflow: visible;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,87 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import {
-	getIntervals,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-	const isDarkMode = useIsDarkMode();
-
-	useEffect(() => {
-		const spread = endTimestamp - startTimestamp;
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
-
-		setIntervals(intervals);
-	}, [startTimestamp, endTimestamp, width, 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';
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={timelineHeight * 2.5}
-				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>
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,88 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/** 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,4 @@ 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',

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/GeneralSettings/GeneralSettings.tsx

@@ -38,7 +38,6 @@ import {
 } from 'types/api/settings/getRetention';
 import { USER_ROLES } from 'types/roles';
 
-import LicenseRowDismissibleCallout from './LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout';
 import Retention from './Retention';
 import StatusMessage from './StatusMessage';
 import { ActionItemsContainer, ErrorText, ErrorTextContainer } from './styles';
@@ -684,12 +683,7 @@ function GeneralSettings({
 					{showCustomDomainSettings && activeLicense?.key && (
 						<div className="custom-domain-card-divider" />
 					)}
-					{activeLicense?.key && (
-						<>
-							<LicenseKeyRow />
-							<LicenseRowDismissibleCallout />
-						</>
-					)}
+					{activeLicense?.key && <LicenseKeyRow />}
 				</div>
 			)}
 

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissible.styles.scss

@@ -1,31 +0,0 @@
-.license-key-callout {
-	margin: var(--spacing-4) var(--spacing-6);
-	width: auto;
-
-	.license-key-callout__description {
-		display: flex;
-		align-items: baseline;
-		gap: var(--spacing-2);
-		min-width: 0;
-		flex-wrap: wrap;
-		font-size: 13px;
-	}
-
-	.license-key-callout__link {
-		display: inline-flex;
-		align-items: center;
-		padding: var(--spacing-1) var(--spacing-3);
-		border-radius: 2px;
-		background: var(--callout-primary-background);
-		color: var(--callout-primary-description);
-		font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
-		font-size: var(--paragraph-base-400-font-size);
-		text-decoration: none;
-
-		&:hover {
-			background: var(--callout-primary-border);
-			color: var(--callout-primary-icon);
-			text-decoration: none;
-		}
-	}
-}

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/LicenseRowDismissibleCallout.tsx

@@ -1,83 +0,0 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Callout } from '@signozhq/callout';
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import setLocalStorageApi from 'api/browser/localstorage/set';
-import { FeatureKeys } from 'constants/features';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useAppContext } from 'providers/App/App';
-import { USER_ROLES } from 'types/roles';
-
-import './LicenseRowDismissible.styles.scss';
-
-function LicenseRowDismissibleCallout(): JSX.Element | null {
-	const [isCalloutDismissed, setIsCalloutDismissed] = useState<boolean>(
-		() =>
-			getLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED) === 'true',
-	);
-
-	const { user, featureFlags } = useAppContext();
-	const { isCloudUser } = useGetTenantLicense();
-
-	const isAdmin = user.role === USER_ROLES.ADMIN;
-	const isEditor = user.role === USER_ROLES.EDITOR;
-
-	const isGatewayEnabled =
-		featureFlags?.find((feature) => feature.name === FeatureKeys.GATEWAY)
-			?.active || false;
-
-	const hasServiceAccountsAccess = isAdmin;
-
-	const hasIngestionAccess =
-		(isCloudUser && !isGatewayEnabled) ||
-		(isGatewayEnabled && (isAdmin || isEditor));
-
-	const handleDismissCallout = (): void => {
-		setLocalStorageApi(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
-		setIsCalloutDismissed(true);
-	};
-
-	return !isCalloutDismissed ? (
-		<Callout
-			type="info"
-			size="small"
-			showIcon
-			dismissable
-			onClose={handleDismissCallout}
-			className="license-key-callout"
-			description={
-				<div className="license-key-callout__description">
-					This is <strong>NOT</strong> your ingestion or Service account key.
-					{(hasServiceAccountsAccess || hasIngestionAccess) && (
-						<>
-							{' '}
-							Find your{' '}
-							{hasServiceAccountsAccess && (
-								<Link
-									to={ROUTES.SERVICE_ACCOUNTS_SETTINGS}
-									className="license-key-callout__link"
-								>
-									Service account here
-								</Link>
-							)}
-							{hasServiceAccountsAccess && hasIngestionAccess && ' and '}
-							{hasIngestionAccess && (
-								<Link
-									to={ROUTES.INGESTION_SETTINGS}
-									className="license-key-callout__link"
-								>
-									Ingestion key here
-								</Link>
-							)}
-							.
-						</>
-					)}
-				</div>
-			}
-		/>
-	) : null;
-}
-
-export default LicenseRowDismissibleCallout;

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseRowDismissibleCallout/__tests__/LicenseRowDismissibleCallout.test.tsx

@@ -1,229 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { USER_ROLES } from 'types/roles';
-
-import LicenseRowDismissibleCallout from '../LicenseRowDismissibleCallout';
-
-const getDescription = (): HTMLElement =>
-	screen.getByText(
-		(_, el) =>
-			el?.classList?.contains('license-key-callout__description') ?? false,
-	);
-
-const queryDescription = (): HTMLElement | null =>
-	screen.queryByText(
-		(_, el) =>
-			el?.classList?.contains('license-key-callout__description') ?? false,
-	);
-
-jest.mock('hooks/useGetTenantLicense', () => ({
-	useGetTenantLicense: jest.fn(),
-}));
-
-const mockLicense = (isCloudUser: boolean): void => {
-	(useGetTenantLicense as jest.Mock).mockReturnValue({
-		isCloudUser,
-		isEnterpriseSelfHostedUser: !isCloudUser,
-		isCommunityUser: false,
-		isCommunityEnterpriseUser: false,
-	});
-};
-
-const renderCallout = (
-	role: string,
-	isCloudUser: boolean,
-	gatewayActive: boolean,
-): void => {
-	mockLicense(isCloudUser);
-	render(
-		<LicenseRowDismissibleCallout />,
-		{},
-		{
-			role,
-			appContextOverrides: {
-				featureFlags: [
-					{
-						name: FeatureKeys.GATEWAY,
-						active: gatewayActive,
-						usage: 0,
-						usage_limit: -1,
-						route: '',
-					},
-				],
-			},
-		},
-	);
-};
-
-describe('LicenseRowDismissibleCallout', () => {
-	beforeEach(() => {
-		localStorage.clear();
-		jest.clearAllMocks();
-	});
-
-	describe('callout content per access level', () => {
-		it.each([
-			{
-				scenario: 'viewer, non-cloud, gateway off — base text only, no links',
-				role: USER_ROLES.VIEWER,
-				isCloudUser: false,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: false,
-				expectedText: 'This is NOT your ingestion or Service account key.',
-			},
-			{
-				scenario: 'admin, non-cloud, gateway off — service accounts link only',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: false,
-				gatewayActive: false,
-				serviceAccountLink: true,
-				ingestionLink: false,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here.',
-			},
-			{
-				scenario: 'viewer, cloud, gateway off — ingestion link only',
-				role: USER_ROLES.VIEWER,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-			{
-				scenario: 'admin, cloud, gateway off — both links',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: true,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
-			},
-			{
-				scenario: 'admin, non-cloud, gateway on — both links',
-				role: USER_ROLES.ADMIN,
-				isCloudUser: false,
-				gatewayActive: true,
-				serviceAccountLink: true,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Service account here and Ingestion key here.',
-			},
-			{
-				scenario: 'editor, non-cloud, gateway on — ingestion link only',
-				role: USER_ROLES.EDITOR,
-				isCloudUser: false,
-				gatewayActive: true,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-			{
-				scenario: 'editor, cloud, gateway off — ingestion link only',
-				role: USER_ROLES.EDITOR,
-				isCloudUser: true,
-				gatewayActive: false,
-				serviceAccountLink: false,
-				ingestionLink: true,
-				expectedText:
-					'This is NOT your ingestion or Service account key. Find your Ingestion key here.',
-			},
-		])(
-			'$scenario',
-			({
-				role,
-				isCloudUser,
-				gatewayActive,
-				serviceAccountLink,
-				ingestionLink,
-				expectedText,
-			}) => {
-				renderCallout(role, isCloudUser, gatewayActive);
-
-				const description = getDescription();
-				expect(description).toBeInTheDocument();
-				expect(description).toHaveTextContent(expectedText);
-
-				if (serviceAccountLink) {
-					expect(
-						screen.getByRole('link', { name: /Service account here/ }),
-					).toBeInTheDocument();
-				} else {
-					expect(
-						screen.queryByRole('link', { name: /Service account here/ }),
-					).not.toBeInTheDocument();
-				}
-
-				if (ingestionLink) {
-					expect(
-						screen.getByRole('link', { name: /Ingestion key here/ }),
-					).toBeInTheDocument();
-				} else {
-					expect(
-						screen.queryByRole('link', { name: /Ingestion key here/ }),
-					).not.toBeInTheDocument();
-				}
-			},
-		);
-	});
-
-	describe('Link routing', () => {
-		it('should link to service accounts settings', () => {
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			const link = screen.getByRole('link', {
-				name: /Service account here/,
-			}) as HTMLAnchorElement;
-
-			expect(link.getAttribute('href')).toBe(ROUTES.SERVICE_ACCOUNTS_SETTINGS);
-		});
-
-		it('should link to ingestion settings', () => {
-			renderCallout(USER_ROLES.VIEWER, true, false);
-
-			const link = screen.getByRole('link', {
-				name: /Ingestion key here/,
-			}) as HTMLAnchorElement;
-
-			expect(link.getAttribute('href')).toBe(ROUTES.INGESTION_SETTINGS);
-		});
-	});
-
-	describe('Dismissal functionality', () => {
-		it('should hide callout when dismiss button is clicked', async () => {
-			const user = userEvent.setup();
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			expect(getDescription()).toBeInTheDocument();
-
-			await user.click(screen.getByRole('button'));
-
-			expect(queryDescription()).not.toBeInTheDocument();
-		});
-
-		it('should persist dismissal in localStorage', async () => {
-			const user = userEvent.setup();
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			await user.click(screen.getByRole('button'));
-
-			expect(
-				localStorage.getItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED),
-			).toBe('true');
-		});
-
-		it('should not render when localStorage dismissal is set', () => {
-			localStorage.setItem(LOCALSTORAGE.LICENSE_KEY_CALLOUT_DISMISSED, 'true');
-			renderCallout(USER_ROLES.ADMIN, false, false);
-
-			expect(queryDescription()).not.toBeInTheDocument();
-		});
-	});
-});

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/MySettings/UserInfo/index.tsx

@@ -2,10 +2,8 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import {
-	updateMyPassword,
-	useUpdateMyUserV2,
-} from 'api/generated/services/users';
+import { useUpdateMyUserV2 } from 'api/generated/services/users';
+import changeMyPassword from 'api/v1/factor_password/changeMyPassword';
 import { useNotifications } from 'hooks/useNotifications';
 import { Check, FileTerminal, MailIcon, UserIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
@@ -55,9 +53,10 @@ function UserInfo(): JSX.Element {
 		try {
 			setIsLoading(true);
 
-			await updateMyPassword({
+			await changeMyPassword({
 				newPassword: updatePassword,
 				oldPassword: currentPassword,
+				userId: user.id,
 			});
 			notifications.success({
 				message: t('success', {

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/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -23,6 +23,7 @@
 
 	&-empty-content {
 		height: 100%;
+		border: 1px solid var(--bg-slate-500);
 		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,

frontend/src/hooks/trace/useCopySpanLink.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
-import { toast } from '@signozhq/sonner';
+import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Span } from 'types/api/trace/getTraceV2';
 
@@ -11,6 +11,7 @@ export const useCopySpanLink = (
 	const urlQuery = useUrlQuery();
 	const { pathname } = useLocation();
 	const [, setCopy] = useCopyToClipboard();
+	const { notifications } = useNotifications();
 
 	const onSpanCopy: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
@@ -30,12 +31,11 @@ export const useCopySpanLink = (
 			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/hooks/useSafeNavigate.ts

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
 import { cloneDeep, isEqual } from 'lodash-es';
+import { withBasePath } from 'utils/basePath';
 
 interface NavigateOptions {
 	replace?: boolean;
@@ -130,7 +131,7 @@ export const useSafeNavigate = (
 					typeof to === 'string'
 						? to
 						: `${to.pathname || location.pathname}${to.search || ''}`;
-				window.open(targetPath, '_blank');
+				window.open(withBasePath(targetPath), '_blank');
 				return;
 			}
 

frontend/src/lib/history.ts

@@ -1,3 +1,4 @@
 import { createBrowserHistory } from 'history';
+import { getBasePath } from 'utils/basePath';
 
-export default createBrowserHistory();
+export default createBrowserHistory({ basename: getBasePath() });

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/mocks-server/handlers.ts

@@ -191,6 +191,17 @@ export const handlers = [
 			}),
 		),
 	),
+	rest.post('http://localhost/api/v1/changePassword', (_, res, ctx) =>
+		res(
+			ctx.status(403),
+			ctx.json({
+				status: 'error',
+				errorType: 'forbidden',
+				error: 'invalid credentials',
+			}),
+		),
+	),
+
 	rest.get(
 		'http://localhost/api/v3/autocomplete/aggregate_attributes',
 		(req, res, ctx) =>

frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx

@@ -4,6 +4,7 @@ import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Home, LifeBuoy } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';
+import { withBasePath } from 'utils/basePath';
 
 import cloudUrl from '@/assets/Images/cloud.svg';
 
@@ -11,8 +12,8 @@ import './ErrorBoundaryFallback.styles.scss';
 
 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Go to home page
-		window.location.href = ROUTES.HOME;
+		// Hard reload resets Sentry.ErrorBoundary state; withBasePath preserves any /signoz/ prefix.
+		window.location.href = withBasePath(ROUTES.HOME);
 	};
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();

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 { Badge } from '@signozhq/badge';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-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,150 +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-wrap: wrap;
-		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: 1 1 375px;
-		min-width: 0;
-		max-height: 100%;
-		overflow-y: auto;
-		scrollbar-width: none;
-	}
-
-	&__tabs-section {
-		flex: 1 1 375px;
-		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,549 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import {
-	Bookmark,
-	CalendarClock,
-	ChartBar,
-	ChartColumnBig,
-	Dock,
-	Ellipsis,
-	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 { noop } from 'lodash-es';
-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 { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Span } from 'types/api/trace/getTraceV2';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-
-import AnalyticsPanel from './AnalyticsPanel/AnalyticsPanel';
-import { HIGHLIGHTED_OPTIONS } from './config';
-import { KEY_ATTRIBUTE_KEYS, SpanDetailVariant } from './constants';
-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: Span | undefined;
-	variant?: SpanDetailVariant;
-	onVariantChange?: (variant: SpanDetailVariant) => void;
-	traceStartTime?: number;
-	traceEndTime?: number;
-	serviceExecTime?: Record<string, number>;
-}
-
-function SpanDetailsContent({
-	selectedSpan,
-	traceStartTime,
-	traceEndTime,
-}: {
-	selectedSpan: Span;
-	traceStartTime?: number;
-	traceEndTime?: number;
-}): JSX.Element {
-	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-	const percentile = useSpanPercentile(selectedSpan);
-	const linkedSpans = useLinkedSpans(selectedSpan.references);
-
-	const {
-		logs,
-		isLoading: isLogsLoading,
-		isError: isLogsError,
-		isFetching: isLogsFetching,
-		isLogSpanRelated,
-		hasTraceIdLogs,
-	} = useSpanContextLogs({
-		traceId: selectedSpan.traceId,
-		spanId: selectedSpan.spanId,
-		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.traceId,
-				},
-			],
-		};
-
-		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.traceId, traceStartTime, traceEndTime]);
-
-	const emptyLogsStateConfig = useMemo(
-		() => ({
-			...getEmptyLogsListConfig(() => {}),
-			showClearFiltersButton: false,
-		}),
-		[],
-	);
-
-	const keyAttributes = useMemo(() => {
-		const keys = KEY_ATTRIBUTE_KEYS.traces || [];
-
-		const allAttrs: Record<string, string> = {
-			...(selectedSpan.attributes || selectedSpan.attributes_string),
-			...(selectedSpan.resources || selectedSpan.resources_string),
-			...(selectedSpan.http_method && { http_method: selectedSpan.http_method }),
-			...(selectedSpan.http_url && { http_url: selectedSpan.http_url }),
-			...(selectedSpan.http_host && { http_host: selectedSpan.http_host }),
-			...(selectedSpan.db_name && { db_name: selectedSpan.db_name }),
-			...(selectedSpan.db_operation && {
-				db_operation: selectedSpan.db_operation,
-			}),
-			...(selectedSpan.external_http_method && {
-				external_http_method: selectedSpan.external_http_method,
-			}),
-			...(selectedSpan.external_http_url && {
-				external_http_url: selectedSpan.external_http_url,
-			}),
-			...(selectedSpan.response_status_code && {
-				response_status_code: selectedSpan.response_status_code,
-			}),
-			datetime: dayjs(selectedSpan.timestamp).format('MMM D, YYYY — HH:mm:ss'),
-			duration: getYAxisFormattedValue(
-				`${selectedSpan.durationNano / 1000000}`,
-				'ms',
-			),
-			'span.kind': selectedSpan.spanKind,
-			status_code_string: selectedSpan.statusCodeString,
-		};
-
-		return keys
-			.filter((key) => allAttrs[key])
-			.map((key) => ({ key, value: String(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.durationNano / 1000000}`, 'ms')}
-							{traceStartTime && traceEndTime && traceEndTime > traceStartTime && (
-								<>
-									{' — '}
-									<strong>
-										{(
-											(selectedSpan.durationNano * 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 */}
-				{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 }) => (
-								<KeyValueLabel key={key} badgeKey={key} badgeValue={value} />
-							))}
-						</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.event?.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 }}
-							/>
-						</TabsContent>
-						<TabsContent value="events">
-							<Events
-								span={selectedSpan}
-								startTime={traceStartTime || 0}
-								isSearchVisible
-							/>
-						</TabsContent>
-						<TabsContent value="logs">
-							<SpanLogs
-								traceId={selectedSpan.traceId}
-								spanId={selectedSpan.spanId}
-								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: 'overflow',
-				component: (
-					<Button variant="ghost" size="icon" color="secondary" onClick={noop}>
-						<Ellipsis size={14} />
-					</Button>
-				),
-			},
-			{
-				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,257 +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;
-	}
-
-	&__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/SpanPercentile.tsx

@@ -1,506 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import { Checkbox, Input, Select, Skeleton, Tooltip, Typography } from 'antd';
-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 { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import dayjs from 'dayjs';
-import useClickOutside from 'hooks/useClickOutside';
-import { Check, ChevronDown, ChevronUp, Loader2, PlusIcon } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import './SpanPercentile.styles.scss';
-
-interface IResourceAttribute {
-	key: string;
-	value: string;
-	isSelected: boolean;
-}
-
-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 SpanPercentileProps {
-	selectedSpan: Span;
-}
-
-function SpanPercentile({ selectedSpan }: SpanPercentileProps): JSX.Element {
-	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.spanId,
-		],
-		enabled: selectedSpan.tagMap !== undefined,
-	});
-
-	const {
-		isLoading: isLoadingData,
-		isFetching: isFetchingData,
-		data,
-		refetch: refetchData,
-		isError: isErrorData,
-	} = useQuery({
-		queryFn: () =>
-			getSpanPercentiles({
-				start: startTime || 0,
-				end: endTime || 0,
-				spanDuration: selectedSpan.durationNano || 0,
-				serviceName: selectedSpan.serviceName || '',
-				name: selectedSpan.name || '',
-				resourceAttributes: selectedResourceAttributes,
-			}),
-		queryKey: [
-			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
-			selectedSpan.spanId,
-			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.spanId]);
-
-	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]);
-
-	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] = selectedSpan.tagMap?.[attr] || '';
-			});
-			selectedMap = Object.fromEntries(
-				Object.entries(selectedMap).filter(
-					([key]) => selectedSpan.tagMap?.[key] !== undefined,
-				),
-			);
-
-			const resourceAttrs = Object.entries(selectedSpan.tagMap || {}).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(selectedSpan.tagMap || {}).map(
-				([key, value]) => ({
-					key,
-					value,
-					isSelected:
-						key === DEFAULT_RESOURCE_ATTRIBUTES.serviceName ||
-						key === DEFAULT_RESOURCE_ATTRIBUTES.name,
-				}),
-			);
-			updateSpanResourceAttributes(resourceAttrs);
-			setShouldFetchData(true);
-		}
-	}, [
-		userSelectedResourceAttributes,
-		isErrorUserSelectedResourceAttributes,
-		selectedSpan.tagMap,
-	]);
-
-	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 tooltipText = useMemo(
-		() => (
-			<div className="span-percentile__tooltip-text">
-				<Typography.Text>
-					This span duration is{' '}
-					<span className="span-percentile__tooltip-highlight">
-						p{percentileValue}
-					</span>{' '}
-					out of the distribution for this resource evaluated for {selectedTimeRange}{' '}
-					hour(s) since the span start time.
-				</Typography.Text>
-				<br />
-				<br />
-				<Typography.Text className="span-percentile__tooltip-link">
-					Click to learn more
-				</Typography.Text>
-			</div>
-		),
-		[percentileValue, selectedTimeRange],
-	);
-
-	return (
-		<div className="span-percentile">
-			{/* Badge */}
-			{loading && (
-				<div className="span-percentile__loader">
-					<Loader2 size={16} className="animate-spin" />
-				</div>
-			)}
-
-			{!loading && spanPercentileData && (
-				<Tooltip
-					title={isOpen ? '' : tooltipText}
-					placement="bottomRight"
-					overlayClassName="span-percentile__tooltip"
-					arrow={false}
-				>
-					<div
-						className={`span-percentile__badge ${
-							isOpen ? 'span-percentile__badge--open' : ''
-						}`}
-					>
-						<Typography.Text
-							className="span-percentile__badge-text"
-							onClick={(): void => setIsOpen((prev) => !prev)}
-						>
-							<span>p{percentileValue}</span>
-							{isOpen ? (
-								<ChevronUp size={16} className="span-percentile__badge-icon" />
-							) : (
-								<ChevronDown size={16} className="span-percentile__badge-icon" />
-							)}
-						</Typography.Text>
-					</div>
-				</Tooltip>
-			)}
-
-			{/* Collapsible panel */}
-			<AnimatePresence initial={false}>
-				{isOpen && !isErrorData && (
-					<motion.div
-						initial={{ height: 0, opacity: 0 }}
-						animate={{ height: 'auto', opacity: 1 }}
-						exit={{ height: 0, opacity: 0 }}
-						key="span-percentile-panel"
-					>
-						<div className="span-percentile__panel">
-							<div className="span-percentile__panel-header">
-								<Typography.Text
-									className="span-percentile__panel-header-text"
-									onClick={(): void => setIsOpen((prev) => !prev)}
-								>
-									<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__resource-selector"
-									ref={resourceAttributesSelectorRef}
-								>
-									<div className="span-percentile__resource-selector-header">
-										<Input
-											placeholder="Search resource attributes"
-											className="span-percentile__resource-selector-input"
-											value={resourceAttributesSearchQuery}
-											onChange={(e): void =>
-												setResourceAttributesSearchQuery(e.target.value as string)
-											}
-										/>
-									</div>
-									<div className="span-percentile__resource-selector-items">
-										{spanResourceAttributes
-											.filter((attr) =>
-												attr.key
-													.toLowerCase()
-													.includes(resourceAttributesSearchQuery.toLowerCase()),
-											)
-											.map((attr) => (
-												<div
-													className="span-percentile__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__resource-selector-item-value">
-															{attr.key}
-														</div>
-													</Checkbox>
-												</div>
-											))}
-									</div>
-								</div>
-							)}
-
-							<div className="span-percentile__content">
-								<Typography.Text className="span-percentile__content-title">
-									This span duration is{' '}
-									{!loading && spanPercentileData ? (
-										<span className="span-percentile__content-highlight">
-											p{Math.floor(spanPercentileData.percentile || 0)}
-										</span>
-									) : (
-										<span className="span-percentile__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__timerange">
-									<Select
-										labelInValue
-										placeholder="Select timerange"
-										className="span-percentile__timerange-select"
-										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 => {
-											setShouldFetchData(true);
-											setSelectedTimeRange(Number(value.value));
-										}}
-										options={timerangeOptions}
-									/>
-								</div>
-
-								<div className="span-percentile__table">
-									<div className="span-percentile__table-header">
-										<Typography.Text className="span-percentile__table-header-text">
-											Percentile
-										</Typography.Text>
-										<Typography.Text className="span-percentile__table-header-text">
-											Duration
-										</Typography.Text>
-									</div>
-
-									<div className="span-percentile__table-rows">
-										{isLoadingData || isFetchingData ? (
-											<Skeleton
-												active
-												paragraph={{ rows: 3 }}
-												className="span-percentile__table-skeleton"
-											/>
-										) : (
-											<>
-												{Object.entries(spanPercentileData?.percentiles || {}).map(
-													([percentile, duration]) => (
-														<div className="span-percentile__table-row" key={percentile}>
-															<Typography.Text className="span-percentile__table-row-key">
-																{percentile}
-															</Typography.Text>
-															<div className="span-percentile__table-row-dash" />
-															<Typography.Text className="span-percentile__table-row-value">
-																{getYAxisFormattedValue(`${duration / 1000000}`, 'ms')}
-															</Typography.Text>
-														</div>
-													),
-												)}
-
-												<div className="span-percentile__table-row span-percentile__table-row--current">
-													<Typography.Text className="span-percentile__table-row-key">
-														p{Math.floor(spanPercentileData?.percentile || 0)}
-													</Typography.Text>
-													<div className="span-percentile__table-row-dash" />
-													<Typography.Text className="span-percentile__table-row-value">
-														(this span){' '}
-														{getYAxisFormattedValue(
-															`${selectedSpan.durationNano / 1000000}`,
-															'ms',
-														)}
-													</Typography.Text>
-												</div>
-											</>
-										)}
-									</div>
-								</div>
-							</div>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
-		</div>
-	);
-}
-
-export default SpanPercentile;

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 { Span } from 'types/api/trace/getTraceV2';
-
-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: Span;
-	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.durationNano / 1000000}`,
-											'ms',
-										)}
-									</Typography.Text>
-								</div>
-							</>
-						)}
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default SpanPercentilePanel;

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

@@ -1,318 +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 { Span } from 'types/api/trace/getTraceV2';
-
-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: Span): 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.spanId,
-		],
-		enabled: selectedSpan.tagMap !== undefined,
-	});
-
-	const {
-		isLoading: isLoadingData,
-		isFetching: isFetchingData,
-		data,
-		refetch: refetchData,
-		isError: isErrorData,
-	} = useQuery({
-		queryFn: () =>
-			getSpanPercentiles({
-				start: startTime || 0,
-				end: endTime || 0,
-				spanDuration: selectedSpan.durationNano || 0,
-				serviceName: selectedSpan.serviceName || '',
-				name: selectedSpan.name || '',
-				resourceAttributes: selectedResourceAttributes,
-			}),
-		queryKey: [
-			REACT_QUERY_KEY.GET_SPAN_PERCENTILES,
-			selectedSpan.spanId,
-			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.spanId]);
-
-	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]);
-
-	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] = selectedSpan.tagMap?.[attr] || '';
-			});
-			selectedMap = Object.fromEntries(
-				Object.entries(selectedMap).filter(
-					([key]) => selectedSpan.tagMap?.[key] !== undefined,
-				),
-			);
-
-			const resourceAttrs = Object.entries(selectedSpan.tagMap || {}).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(selectedSpan.tagMap || {}).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,
-		selectedSpan.tagMap,
-	]);
-
-	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.durationNano / 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/badge';
-import { Span } from 'types/api/trace/getTraceV2';
-
-interface HighlightedOption {
-	key: string;
-	label: string;
-	render: (span: Span) => ReactNode | null;
-}
-
-export const HIGHLIGHTED_OPTIONS: HighlightedOption[] = [
-	{
-		key: 'service',
-		label: 'SERVICE',
-		render: (span): ReactNode | null =>
-			span.serviceName ? (
-				<Badge color="vanilla">
-					<span className="span-details-panel__service-dot" />
-					{span.serviceName}
-				</Badge>
-			) : null,
-	},
-	{
-		key: 'statusCodeString',
-		label: 'STATUS CODE STRING',
-		render: (span): ReactNode | null =>
-			span.statusCodeString ? (
-				<Badge color="vanilla">{span.statusCodeString}</Badge>
-			) : null,
-	},
-	{
-		key: 'traceId',
-		label: 'TRACE ID',
-		render: (span): ReactNode | null =>
-			span.traceId ? (
-				<Link
-					to={{
-						pathname: `/trace/${span.traceId}`,
-						search: window.location.search,
-					}}
-					className="span-details-panel__trace-id"
-				>
-					{span.traceId}
-				</Link>
-			) : null,
-	},
-	{
-		key: 'spanKind',
-		label: 'SPAN KIND',
-		render: (span): ReactNode | null =>
-			span.spanKind ? <Badge color="vanilla">{span.spanKind}</Badge> : null,
-	},
-];

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

@@ -1,25 +0,0 @@
-export enum SpanDetailVariant {
-	DRAWER = 'drawer',
-	DIALOG = 'dialog',
-	DOCKED = 'docked',
-}
-
-export const KEY_ATTRIBUTE_KEYS: Record<string, string[]> = {
-	traces: [
-		'service.name',
-		'service.namespace',
-		'deployment.environment',
-		'datetime',
-		'duration',
-		'span.kind',
-		'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/SpanHoverCard/EventTooltipContent.styles.scss

@@ -1,60 +0,0 @@
-.event-tooltip-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-	max-width: 300px;
-
-	&__header {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 3px;
-		padding: 2px 6px;
-		font-size: 10px;
-		font-weight: 600;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgba(255, 255, 255, 0.7);
-		margin-bottom: 6px;
-	}
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 2px;
-		color: rgb(14, 165, 233);
-
-		&.error {
-			color: rgb(239, 68, 68);
-		}
-	}
-
-	&__time {
-		font-size: 11px;
-		opacity: 0.8;
-		margin-bottom: 4px;
-	}
-
-	&__divider {
-		border-top: 1px solid rgba(255, 255, 255, 0.1);
-		margin: 6px 0;
-	}
-
-	&__attributes {
-		font-size: 11px;
-	}
-
-	&__kv {
-		margin-bottom: 2px;
-		line-height: 1.4;
-		word-break: break-all;
-	}
-
-	&__key {
-		opacity: 0.6;
-	}
-
-	&__value {
-		opacity: 0.9;
-	}
-}

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,28 +0,0 @@
-.span-hover-card-popover {
-	.ant-popover-inner {
-		background-color: rgba(30, 30, 30, 0.95);
-		padding: 8px 12px;
-		border-radius: 4px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-		border: none;
-	}
-
-	.ant-popover-inner-content {
-		padding: 0;
-	}
-}
-
-.span-hover-card-content {
-	font-family: Inter, sans-serif;
-	font-size: 12px;
-	color: #fff;
-
-	&__name {
-		font-weight: 600;
-		margin-bottom: 4px;
-	}
-
-	&__row {
-		line-height: 1.5;
-	}
-}

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

@@ -1,94 +0,0 @@
-import { ReactNode } 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 { Span } from 'types/api/trace/getTraceV2';
-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: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const durationMs = span.durationNano / 1e6;
-	const relativeStartMs = span.timestamp - traceMetadata.startTime;
-
-	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
-	if (span.hasError) {
-		color = 'var(--bg-cherry-500)';
-	}
-
-	return (
-		<Popover
-			mouseEnterDelay={0.2}
-			content={
-				<SpanTooltipContent
-					spanName={span.name}
-					color={color}
-					hasError={span.hasError}
-					relativeStartMs={relativeStartMs}
-					durationMs={durationMs}
-				/>
-			}
-			trigger="hover"
-			rootClassName="span-hover-card-popover"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</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 {
-		&.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,88 +0,0 @@
-import { useCallback } from 'react';
-import { useParams } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-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;
-		if (isSpaNavigate) {
-			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,256 +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 { EventTooltipContent } from '../SpanHoverCard/EventTooltipContent';
-import { SpanTooltipContent } from '../SpanHoverCard/SpanHoverCard';
-import { DEFAULT_ROW_HEIGHT } from './constants';
-import { useCanvasSetup } from './hooks/useCanvasSetup';
-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(); //TODO: see if can be removed or use a new hook
-	const canvasRef = 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);
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent): void => {
-			handleDragMouseMove(e);
-			handleHoverMouseMove(e);
-		},
-		[handleDragMouseMove, handleHoverMouseMove],
-	);
-
-	const handleMouseLeave = useCallback((): void => {
-		isOverFlamegraphRef.current = false;
-		handleDragMouseLeave();
-		handleHoverMouseLeave();
-	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
-
-	const tooltipElement = tooltipContent
-		? createPortal(
-				<div
-					className="span-hover-card-popover"
-					style={{
-						position: 'fixed',
-						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
-						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
-						zIndex: 1000,
-						backgroundColor: 'rgba(30, 30, 30, 0.95)',
-						padding: '8px 12px',
-						borderRadius: 4,
-						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
-						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}
-			/>
-			<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}
-				/>
-			</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,539 +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',
-			});
-
-			expect(ctx.createPattern).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 stripe pattern + 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.createPattern).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('createStripePattern (via drawSpanBar)', () => {
-		it('uses pattern when createPattern returns non-null', () => {
-			const ctx = createMockCtx();
-			const mockPattern = {} as CanvasPattern;
-			(ctx.createPattern as jest.Mock).mockReturnValue(mockPattern);
-
-			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.createPattern).toHaveBeenCalled();
-			expect(ctx.fillStyle).toBe(mockPattern);
-			expect(ctx.fill).toHaveBeenCalled();
-		});
-
-		it('skips fill when createPattern returns null', () => {
-			const ctx = createMockCtx();
-			(ctx.createPattern as jest.Mock).mockReturnValue(null);
-
-			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).not.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,55 +0,0 @@
-import { RefObject, useCallback, useEffect } from 'react';
-
-export function useCanvasSetup(
-	canvasRef: RefObject<HTMLCanvasElement>,
-	containerRef: RefObject<HTMLDivElement>,
-	onDraw: () => void,
-): 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;
-			onDraw();
-		}
-	}, [canvasRef, containerRef, onDraw]);
-
-	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/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 };
-}