feat: waterfall init

* fix: resource added in checkbox

* fix: resource name handling

* fix: added testcases

* fix: updated for other types as well

* fix: updated testcases

* fix: pr comments

.github/workflows/jsci.yaml

@@ -13,23 +13,6 @@ on:
 
 jobs:
   tsc:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: setup node
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
-      - name: install
-        run: cd frontend && yarn install
-      - name: tsc
-        run: cd frontend && yarn tsc
-  tsc2:
     if: |
       github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||

cmd/enterprise/Dockerfile.integration

@@ -1,4 +1,4 @@
-FROM golang:1.24-bullseye
+FROM golang:1.25-bookworm
 
 ARG OS="linux"
 ARG TARGETARCH

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,4 +1,4 @@
-FROM node:18-bullseye AS build
+FROM node:22-bookworm AS build
 
 WORKDIR /opt/
 COPY ./frontend/ ./
@@ -6,7 +6,7 @@ ENV NODE_OPTIONS=--max-old-space-size=8192
 RUN CI=1 yarn install
 RUN CI=1 yarn build
 
-FROM golang:1.24-bullseye
+FROM golang:1.25-bookworm
 
 ARG OS="linux"
 ARG TARGETARCH

docs/api/openapi.yml

@@ -2108,6 +2108,15 @@ components:
         token:
           type: string
       type: object
+    TypesPostableBulkInviteRequest:
+      properties:
+        invites:
+          items:
+            $ref: '#/components/schemas/TypesPostableInvite'
+          type: array
+      required:
+      - invites
+      type: object
     TypesPostableForgotPassword:
       properties:
         email:
@@ -2196,6 +2205,8 @@ components:
           type: string
         role:
           type: string
+        status:
+          type: string
         updatedAt:
           format: date-time
           type: string
@@ -3538,9 +3549,7 @@ paths:
         content:
           application/json:
             schema:
-              items:
-                $ref: '#/components/schemas/TypesPostableInvite'
-              type: array
+              $ref: '#/components/schemas/TypesPostableBulkInviteRequest'
       responses:
         "201":
           description: Created

docs/contributing/development.md

@@ -100,7 +100,7 @@ This command:
 
 3. Create a `.env` file in this directory:
    ```env
-   FRONTEND_API_ENDPOINT=http://localhost:8080
+   VITE_FRONTEND_API_ENDPOINT=http://localhost:8080
    ```
 
 4. Start the development server:

docs/contributing/onboarding.md

@@ -273,6 +273,7 @@ Options can be simple (direct link) or nested (with another question):
 - Place logo files in `public/Logos/`
 - Use SVG format
 - Reference as `"/Logos/your-logo.svg"`
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 

docs/contributing/query-range.md

@@ -0,0 +1,216 @@
+# Query Range v5 — Design Principles & Architectural Contracts
+
+## Purpose of This Document
+
+This document defines the design principles, invariants, and architectural contracts of the Query Range v5 system. It is intended for the authors working on the querier and querier related parts codebase. Any change to the system must align with the principles described here. If a change would violate a principle, it must be flagged and discussed.
+
+---
+
+## Core Architectural Principle
+
+**The user speaks OpenTelemetry. The storage speaks ClickHouse. The system translates between them. These two worlds must never leak into each other.**
+
+Every design choice in Query Range flows from this separation. The user-facing API surface deals exclusively in `TelemetryFieldKey`: a representation of fields as they exist in the OpenTelemetry data model. The storage layer deals in ClickHouse column expressions, table names, and SQL fragments. The translation between them is mediated by a small set of composable abstractions with strict boundaries.
+
+---
+
+## The Central Type: `TelemetryFieldKey`
+
+`TelemetryFieldKey` is the atomic unit of the entire query system. Every filter, aggregation, group-by, order-by, and select operation is expressed in terms of field keys. Understanding its design contracts is non-negotiable.
+
+### Identity
+
+A field key is identified by three dimensions:
+
+- **Name** — the field name as the user knows it (`service.name`, `http.method`, `trace_id`)
+- **FieldContext** — where the field lives in the OTel model (`resource`, `attribute`, `span`, `log`, `body`, `scope`, `event`, `metric`)
+- **FieldDataType** — the data type (`string`, `bool`, `number`/`float64`/`int64`, array variants)
+
+### Invariant: Same name does not mean same field
+
+`status` as an attribute, `status` as a body JSON key, and `status` as a span-level field are **three different fields**. The context disambiguates. Code that resolves or compares field keys must always consider all three dimensions, never just the name.
+
+### Invariant: Normalization happens once, at the boundary
+
+`TelemetryFieldKey.Normalize()` is called during JSON unmarshaling. After normalization, the text representation `resource.service.name:string` and the programmatic construction `{Name: "service.name", FieldContext: Resource, FieldDataType: String}` are identical.
+
+**Consequence:** Downstream code must never re-parse or re-normalize field keys. If you find yourself splitting on `.` or `:` deep in the pipeline, something is wrong — the normalization should have already happened.
+
+### Invariant: The text format is `context.name:datatype`
+
+Parsing rules (implemented in `GetFieldKeyFromKeyText` and `Normalize`):
+
+1. Data type is extracted from the right, after the last `:`.
+2. Field context is extracted from the left, before the first `.`, if it matches a known context prefix.
+3. Everything remaining is the name.
+
+Special case: `log.body.X` normalizes to `{FieldContext: body, Name: X}` — the `log.body.` prefix collapses because body fields under log are a nested context.
+
+### Invariant: Historical aliases must be preserved
+
+The `fieldContexts` map includes aliases (`tag` -> `attribute`, `spanfield` -> `span`, `logfield` -> `log`). These exist because older database entries use these names. Removing or changing these aliases will break existing saved queries and dashboard configurations.
+
+---
+
+## The Abstraction Stack
+
+The query pipeline is built from four interfaces that compose vertically. Each layer has a single responsibility. Each layer depends only on the layers below it. This layering is intentional and must be preserved.
+
+```
+StatementBuilder          <- Orchestrates everything into executable SQL
+  ├── AggExprRewriter     <- Rewrites aggregation expressions (maps field refs to columns)
+  ├── ConditionBuilder    <- Builds WHERE predicates (field + operator + value -> SQL)
+  └── FieldMapper         <- Maps TelemetryFieldKey -> ClickHouse column expression
+```
+
+### FieldMapper
+
+**Contract:** Given a `TelemetryFieldKey`, return a ClickHouse column expression that yields the value for that field when used in a SELECT.
+
+**Principle:** This is the *only* place where field-to-column translation happens. No other layer should contain knowledge of how fields map to storage. If you need a column expression, go through the FieldMapper.
+
+**Why:** The user says `http.request.method`. ClickHouse might store it as `attributes_string['http.request.method']`, or as a materialized column `` `attribute_string_http$$request$$method` ``, or via a JSON access path in a body column. This variation is entirely contained within the FieldMapper. Everything above it is storage-agnostic.
+
+### ConditionBuilder
+
+**Contract:** Given a field key, an operator, and a value, produce a valid SQL predicate for a WHERE clause.
+
+**Dependency:** Uses FieldMapper for the left-hand side of the condition.
+
+**Principle:** The ConditionBuilder owns all the complexity of operator semantics, i.e type casting, array operators (`hasAny`/`hasAll` vs `=`), existence checks, and negative operator behavior. This complexity must not leak upward into the StatementBuilder.
+
+### AggExprRewriter
+
+**Contract:** Given a user-facing aggregation expression like `sum(duration_nano)`, resolve field references within it and produce valid ClickHouse SQL.
+
+**Dependency:** Uses FieldMapper to resolve field names within expressions.
+
+**Principle:** Aggregation expressions are user-authored strings that contain field references. The rewriter parses them, identifies field references, resolves each through the FieldMapper, and reassembles the expression.
+
+### StatementBuilder
+
+**Contract:** Given a complete `QueryBuilderQuery`, a time range, and a request type, produces an executable SQL statement.
+
+**Dependency:** Uses all three abstractions above.
+
+**Principle:** This is the composition layer. It does not contain field mapping logic, condition building logic, or expression rewriting logic. It orchestrates the other abstractions. If you find storage-specific logic creeping into the StatementBuilder, push it down into the appropriate abstraction.
+
+### Invariant: No layer skipping
+
+The StatementBuilder must not call FieldMapper directly to build conditions, it goes through the ConditionBuilder. The AggExprRewriter must not hardcode column names, it goes through the FieldMapper. Skipping layers creates hidden coupling and makes the system fragile to storage changes.
+
+---
+
+## Design Decisions as Constraints
+
+### Constraint: Formula evaluation happens in Go, not in ClickHouse
+
+Formulas (`A + B`, `A / B`, `sqrt(A*A + B*B)`) are evaluated application-side by `FormulaEvaluator`, not via ClickHouse JOINs.
+
+**Why this is a constraint, not just an implementation choice:** The original JOIN-based approach was abandoned because ClickHouse evaluates joins right-to-left, serializing execution unnecessarily. Running queries independently allows parallelism and caching of intermediate results. Any future optimization must not reintroduce the JOIN pattern without solving the serialization problem.
+
+**Consequence:** Individual query results must be independently cacheable. Formula evaluation must handle label matching, timestamp alignment, and missing values without requiring the queries to coordinate at the SQL level.
+
+### Constraint: Zero-defaulting is aggregation-dependent
+
+Only additive/counting aggregations (`count`, `count_distinct`, `sum`, `rate`) default missing values to zero. Statistical aggregations (`avg`, `min`, `max`, percentiles) must show gaps.
+
+**Why:** Absence of data has different meanings. No error requests in a time bucket means error count = 0. No requests at all means average latency is *unknown*, not 0. Conflating these is a correctness bug, not a display preference.
+
+**Enforcement:** `GetQueriesSupportingZeroDefault` determines which queries can default to zero. The `FormulaEvaluator` consumes this via `canDefaultZero`. Changes to aggregation handling must preserve this distinction.
+
+### Constraint: Existence semantics differ for positive vs negative operators
+
+- **Positive operators** (`=`, `>`, `LIKE`, `IN`, etc.) implicitly assert field existence. `http.method = GET` means "the field exists AND equals GET".
+- **Negative operators** (`!=`, `NOT IN`, `NOT LIKE`, etc.) do **not** add an existence check. `http.method != GET` includes records where the field doesn't exist at all.
+
+**Why:** The user's intent with negative operators is ambiguous. Rather than guess, we take the broader interpretation. Users can add an explicit `EXISTS` filter if they want the narrower one. This is documented in `AddDefaultExistsFilter`.
+
+**Consequence:** Any new operator must declare its existence behavior in `AddDefaultExistsFilter`. Do not add operators without considering this.
+
+### Constraint: Post-processing functions operate on result sets, not in SQL
+
+Functions like `cutOffMin`, `ewma`, `median`, `timeShift`, `fillZero`, `runningDiff`, and `cumulativeSum` are applied in Go on the returned time series, not pushed into ClickHouse SQL.
+
+**Why:** These are sequential time-series transformations that require complete, ordered result sets. Pushing them into SQL would complicate query generation, prevent caching of raw results, and make the functions harder to test. They are applied via `ApplyFunctions` after query execution.
+
+**Consequence:** New time-series transformation functions should follow this pattern i.e implement them as Go functions on `*TimeSeries`, not as SQL modifications.
+
+### Constraint: The API surface rejects unknown fields with suggestions
+
+All request types use custom `UnmarshalJSON` that calls `DisallowUnknownFields`. Unknown fields trigger error messages with Levenshtein-based suggestions ("did you mean: 'groupBy'?").
+
+**Why:** Silent acceptance of unknown fields causes subtle bugs. A misspelled `groupBy` results in ungrouped data with no indication of what went wrong. Failing fast with suggestions turns errors into actionable feedback.
+
+**Consequence:** Any new request type or query spec struct must implement custom unmarshaling with `UnmarshalJSONWithContext`. Do not use default `json.Unmarshal` for user-facing types.
+
+### Constraint: Validation is context-sensitive to request type
+
+What's valid depends on the `RequestType`. For aggregation requests (`time_series`, `scalar`, `distribution`), fields like `groupBy`, `aggregations`, `having`, and aggregation-referenced `orderBy` are validated. For non-aggregation requests (`raw`, `raw_stream`, `trace`), these fields are ignored.
+
+**Why:** A raw log query doesn't have aggregations, so requiring `aggregations` would be wrong. But a time-series query without aggregations is meaningless. The validation rules are request-type-aware to avoid both false positives and false negatives.
+
+**Consequence:** When adding new fields to query specs, consider which request types they apply to and gate validation accordingly.
+
+---
+
+## The Composite Query Model
+
+### Structure
+
+A `QueryRangeRequest` contains a `CompositeQuery` which holds `[]QueryEnvelope`. Each envelope is a discriminated union: a `Type` field determines how `Spec` is decoded.
+
+### Invariant: Query names are unique within a composite query
+
+Builder queries must have unique names. Formulas reference queries by name (`A`, `B`, `A.0`, `A.my_alias`). Duplicate names would make formula evaluation ambiguous.
+
+### Invariant: Multi-aggregation uses indexed or aliased references
+
+A single builder query can have multiple aggregations. They are accessed in formulas via:
+- Index: `A.0`, `A.1` (zero-based)
+- Alias: `A.total`, `A.error_count`
+
+The default (just `A`) resolves to index 0. This is the formula evaluation contract and must be preserved.
+
+### Invariant: Type-specific decoding through signal detection
+
+Builder queries are decoded by first peeking at the `signal` field in the raw JSON, then unmarshaling into the appropriate generic type (`QueryBuilderQuery[TraceAggregation]`, `QueryBuilderQuery[LogAggregation]`, `QueryBuilderQuery[MetricAggregation]`). This two-pass decoding is intentional — it allows each signal to have its own aggregation schema while sharing the query structure.
+
+---
+
+## The Metadata Layer
+
+### MetadataStore
+
+The `MetadataStore` interface provides runtime field discovery and type resolution. It answers questions like "what fields exist for this signal?" and "what are the data types of field X?".
+
+### Principle: Fields can be ambiguous until resolved
+
+The same name can map to multiple `TelemetryFieldKey` variants (different contexts, different types). The metadata store returns *all* variants. Resolution to a single field happens during query building, using the query's signal and any explicit context/type hints from the user.
+
+**Consequence:** Code that calls `GetKey` or `GetKeys` must handle multiple results. Do not assume a name maps to a single field.
+
+### Principle: Materialized fields are a performance optimization, not a semantic distinction
+
+A materialized field and its non-materialized equivalent represent the same logical field. The `Materialized` flag tells the FieldMapper to generate a simpler column expression. The user should never need to know whether a field is materialized.
+
+### Principle: JSON body fields require access plans
+
+Fields inside JSON body columns (`body.response.errors[].code`) need pre-computed `JSONAccessPlan` trees that encode the traversal path, including branching at array boundaries between `Array(JSON)` and `Array(Dynamic)` representations. These plans are computed during metadata resolution, not during query execution.
+
+---
+
+## Summary of Inviolable Rules
+
+1. **User-facing types never contain ClickHouse column names or SQL fragments.**
+2. **Field-to-column translation only happens in FieldMapper.**
+3. **Normalization happens once at the API boundary, never deeper.**
+4. **Historical aliases in fieldContexts and fieldDataTypes must not be removed.**
+5. **Formula evaluation stays in Go — do not push it into ClickHouse JOINs.**
+6. **Zero-defaulting is aggregation-type-dependent — do not universally default to zero.**
+7. **Positive operators imply existence, negative operators do not.**
+8. **Post-processing functions operate on Go result sets, not in SQL.**
+9. **All user-facing types reject unknown JSON fields with suggestions.**
+10. **Validation rules are gated by request type.**
+11. **Query names must be unique within a composite query.**
+12. **The four-layer abstraction stack (FieldMapper -> ConditionBuilder -> AggExprRewriter -> StatementBuilder) must not be bypassed or flattened.**

ee/authz/openfgaauthz/provider.go

@@ -176,6 +176,7 @@ func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource
 		typeables = append(typeables, register.MustGetTypeables()...)
 	}
 
+	typeables = append(typeables, provider.MustGetTypeables()...)
 	resources := make([]*authtypes.Resource, 0)
 	for _, typeable := range typeables {
 		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})

ee/query-service/app/api/cloudIntegrations.go

@@ -170,7 +170,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
-	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId))
+	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId), types.UserStatusActive)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}

frontend/example.env

@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
 VITE_PYLON_APP_ID="pylon-app-id"
 VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"

frontend/jest.config.ts

@@ -39,7 +39,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/public/Logos/deno.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>

frontend/public/Logos/haystack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>

frontend/public/Logos/huggingface.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" fill="none"><path fill="#ffd21e" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5"/><path fill="#ff9d0b" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0m-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0"/><path fill="#3a3b45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32Zm-23.55 0c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/><path fill="#ff323d" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/><path fill="#3a3b45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.6 8.6 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97" clip-rule="evenodd"/><path fill="#ff9d0b" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-46.5 0a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5m-6.69 11c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7 7 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.3 44.3 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48m0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85"/><path fill="#ffd21e" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9-3.24 5.08.68 8.01c3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12"/><path fill="#ff9d0b" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7 7 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.3 44.3 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48m0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.5 1.5 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85"/><path fill="#ffd21e" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44-1.58 4.17-6.8 7.33c-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12"/></svg>

frontend/public/Logos/nvidia-dcgm.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#76b900" viewBox="0 0 24 24"><title>NVIDIA</title><path d="M8.948 8.798v-1.43a7 7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851a3.7 3.7 0 0 1-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6 6 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964a6.5 6.5 0 0 1-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936"/></svg>

frontend/public/Logos/ollama.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>

frontend/public/Logos/openrouter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>

frontend/public/Logos/prometheus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3.94 -1.44 438.62 432.87"><path fill="#e75225" d="M215.926 7.068c115.684.024 210.638 93.784 210.493 207.844-.148 115.793-94.713 208.252-212.912 208.169C97.95 423 4.52 329.143 4.601 213.221 4.68 99.867 99.833 7.044 215.926 7.068m-63.947 73.001c2.652 12.978.076 25.082-3.846 36.988-2.716 8.244-6.47 16.183-8.711 24.539-3.694 13.769-7.885 27.619-9.422 41.701-2.21 20.25 5.795 38.086 19.493 55.822L86.527 225.94c.11 1.978-.007 2.727.21 3.361 5.968 17.43 16.471 32.115 28.243 45.957 1.246 1.465 4.082 2.217 6.182 2.221 62.782.115 125.565.109 188.347.028 1.948-.003 4.546-.369 5.741-1.618 13.456-14.063 23.746-30.079 30.179-50.257l-66.658 12.976c4.397-8.567 9.417-16.1 12.302-24.377 9.869-28.315 5.779-55.69-8.387-81.509-11.368-20.72-21.854-41.349-16.183-66.32-12.005 11.786-16.615 26.79-19.541 42.253-2.882 15.23-4.58 30.684-6.811 46.136-.317-.467-.728-.811-.792-1.212-.258-1.621-.499-3.255-.587-4.893-1.355-25.31-6.328-49.696-16.823-72.987-6.178-13.71-12.99-27.727-6.622-44.081-4.31 2.259-8.205 4.505-10.997 7.711-8.333 9.569-11.779 21.062-12.666 33.645-.757 10.75-1.796 21.552-3.801 32.123-2.107 11.109-5.448 21.998-12.956 32.209-3.033-21.81-3.37-43.38-22.928-57.237m161.877 216.523H116.942v34.007h196.914zm-157.871 51.575c-.163 28.317 28.851 49.414 64.709 47.883 29.716-1.269 56.016-24.51 53.755-47.883z"/></svg>

frontend/public/Logos/statsd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 122.88 103.53"><path d="M5.47 0H117.4c3.01 0 5.47 2.46 5.47 5.47v92.58c0 3.01-2.46 5.47-5.47 5.47H5.47c-3.01 0-5.47-2.46-5.47-5.47V5.47C0 2.46 2.46 0 5.47 0m26.37 38.55 17.79 18.42 2.14 2.13-2.12 2.16-17.97 19.05-5.07-5 15.85-16.15L26.81 43.6zM94.1 79.41H54.69v-6.84H94.1zM38.19 9.83c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78S35 9.83 38.19 9.83m-19.24 0c3.19 0 5.78 2.59 5.78 5.78s-2.59 5.78-5.78 5.78-5.78-2.59-5.78-5.78 2.58-5.78 5.78-5.78M7.49 5.41H115.4c1.15 0 2.09.94 2.09 2.09v18.32H5.4V7.5c0-1.15.94-2.09 2.09-2.09" style="fill-rule:evenodd;clip-rule:evenodd;fill:#1668dc"/></svg>

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

@@ -2525,6 +2525,13 @@ export interface TypesPostableAcceptInviteDTO {
 	token?: string;
 }
 
+export interface TypesPostableBulkInviteRequestDTO {
+	/**
+	 * @type array
+	 */
+	invites: TypesPostableInviteDTO[];
+}
+
 export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
@@ -2665,6 +2672,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	role?: string;
+	/**
+	 * @type string
+	 */
+	status?: string;
 	/**
 	 * @type string
 	 * @format date-time

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

@@ -41,6 +41,7 @@ import type {
 	TypesChangePasswordRequestDTO,
 	TypesPostableAcceptInviteDTO,
 	TypesPostableAPIKeyDTO,
+	TypesPostableBulkInviteRequestDTO,
 	TypesPostableForgotPasswordDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
@@ -671,14 +672,14 @@ export const useAcceptInvite = <
  * @summary Create bulk invite
  */
 export const createBulkInvite = (
-	typesPostableInviteDTO: BodyType<TypesPostableInviteDTO[]>,
+	typesPostableBulkInviteRequestDTO: BodyType<TypesPostableBulkInviteRequestDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/invite/bulk`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: typesPostableInviteDTO,
+		data: typesPostableBulkInviteRequestDTO,
 		signal,
 	});
 };
@@ -690,13 +691,13 @@ export const getCreateBulkInviteMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
 		TError,
-		{ data: BodyType<TypesPostableInviteDTO[]> },
+		{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createBulkInvite>>,
 	TError,
-	{ data: BodyType<TypesPostableInviteDTO[]> },
+	{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
 	TContext
 > => {
 	const mutationKey = ['createBulkInvite'];
@@ -710,7 +711,7 @@ export const getCreateBulkInviteMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createBulkInvite>>,
-		{ data: BodyType<TypesPostableInviteDTO[]> }
+		{ data: BodyType<TypesPostableBulkInviteRequestDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -723,7 +724,7 @@ export const getCreateBulkInviteMutationOptions = <
 export type CreateBulkInviteMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createBulkInvite>>
 >;
-export type CreateBulkInviteMutationBody = BodyType<TypesPostableInviteDTO[]>;
+export type CreateBulkInviteMutationBody = BodyType<TypesPostableBulkInviteRequestDTO>;
 export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -736,13 +737,13 @@ export const useCreateBulkInvite = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createBulkInvite>>,
 		TError,
-		{ data: BodyType<TypesPostableInviteDTO[]> },
+		{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createBulkInvite>>,
 	TError,
-	{ data: BodyType<TypesPostableInviteDTO[]> },
+	{ data: BodyType<TypesPostableBulkInviteRequestDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateBulkInviteMutationOptions(options);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx

@@ -361,6 +361,58 @@ describe('CheckboxFilter - User Flows', () => {
 		expect(filtersForServiceName).toHaveLength(0);
 	});
 
+	it('should match filter when query uses resource. prefix (resource.service.name matches service.name)', async () => {
+		// Filter config uses unprefixed key (service.name)
+		// Query has filter with resource. prefix (resource.service.name)
+		// Checkbox should recognize the match and show checked state
+		mockUseQueryBuilder.mockReturnValue({
+			lastUsedQuery: 0,
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							filters: {
+								items: [
+									{
+										key: {
+											key: 'resource.service.name',
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: [OTEL_DEMO],
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+			redirectWithQueryBuilderData: jest.fn(),
+		} as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: false });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Filter should auto-open because it has active filters (key match via prefix stripping)
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+
+		// otel-demo should be checked (filter uses resource.service.name IN [otel-demo])
+		// Checked items are sorted to the top, so otel-demo is first
+		const checkboxes = screen.getAllByRole('checkbox');
+		expect(checkboxes[0]).toBeChecked();
+		expect(screen.getByText(OTEL_DEMO)).toBeInTheDocument();
+	});
+
 	it('should extend an existing IN filter when checking an additional value', async () => {
 		const redirectWithQueryBuilderData = jest.fn();
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -18,7 +18,7 @@ import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues'
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
@@ -26,6 +26,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
+import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
@@ -84,7 +85,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			currentQuery.builder.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.some((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			),
 		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
 	);
@@ -189,7 +190,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		const filterSync = currentQuery?.builder.queryData?.[
 			activeQueryIndex
 		]?.filters?.items.find((item) =>
-			isEqual(item.key?.key, filter.attributeKey.key),
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
 		);
 
 		if (filterSync) {
@@ -236,7 +237,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			(currentQuery?.builder?.queryData?.[
 				activeQueryIndex
 			]?.filters?.items?.filter((item) =>
-				isEqual(item.key?.key, filter.attributeKey.key),
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
 			)?.length || 0) > 1,
 
 		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
@@ -280,7 +281,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 						items:
 							idx === activeQueryIndex
 								? item.filters?.items?.filter(
-										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
+										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
 								  ) || []
 								: [...(item.filters?.items || [])],
 						op: item.filters?.op || 'AND',
@@ -313,7 +314,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					: 'Only'
 				: 'Only';
 			query.filters.items = query.filters.items.filter(
-				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
+				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
 			);
 
 			if (query.filter?.expression) {
@@ -335,13 +336,13 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		} else if (query?.filters?.items) {
 			if (
 				query.filters?.items?.some((item) =>
-					isEqual(item.key?.key, filter.attributeKey.key),
+					isKeyMatch(item.key?.key, filter.attributeKey.key),
 				)
 			) {
 				// if there is already a running filter for the current attribute key then
 				// we split the cases by which particular operator is present right now!
 				const currentFilter = query.filters?.items?.find((q) =>
-					isEqual(q.key?.key, filter.attributeKey.key),
+					isKeyMatch(q.key?.key, filter.attributeKey.key),
 				);
 				if (currentFilter) {
 					const runningOperator = currentFilter?.op;
@@ -356,7 +357,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -368,7 +369,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -385,11 +386,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -398,7 +399,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 								} else {
 									// if not an array remove the whole thing altogether!
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -414,7 +415,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [...currentFilter.value, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -426,7 +427,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value: [currentFilter.value as string, value],
 									};
 									query.filters.items = query.filters.items.map((item) => {
-										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
 										}
 										return item;
@@ -441,7 +442,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									};
 									if (newFilter.value.length === 0) {
 										query.filters.items = query.filters.items.filter(
-											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 										);
 										if (query.filter?.expression) {
 											query.filter.expression = removeKeysFromExpression(
@@ -451,7 +452,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										}
 									} else {
 										query.filters.items = query.filters.items.map((item) => {
-											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 												return newFilter;
 											}
 											return item;
@@ -469,7 +470,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										);
 									}
 									query.filters.items = query.filters.items.filter(
-										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
 								}
 							}
@@ -482,14 +483,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (!checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;
@@ -501,14 +502,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									value: [currentFilter.value as string, value],
 								};
 								query.filters.items = query.filters.items.map((item) => {
-									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 										return newFilter;
 									}
 									return item;
 								});
 							} else if (checked) {
 								query.filters.items = query.filters.items.filter(
-									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 								);
 							}
 							break;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * These prefixes are added to attribute keys based on their context.
+ */
+export const FIELD_CONTEXT_PREFIXES = [
+	'metric',
+	'log',
+	'span',
+	'trace',
+	'resource',
+	'scope',
+	'attribute',
+	'event',
+	'body',
+];
+
+/**
+ * Removes the field context prefix from a key to get the base key name.
+ * Example: 'resource.service.name' -> 'service.name'
+ * Example: 'attribute.http.method' -> 'http.method'
+ */
+export function getKeyWithoutPrefix(key: string | undefined): string {
+	if (!key) {
+		return '';
+	}
+	const prefixPattern = new RegExp(
+		`^(${FIELD_CONTEXT_PREFIXES.join('|')})\\.`,
+		'i',
+	);
+	return key.replace(prefixPattern, '').trim();
+}
+
+/**
+ * Compares two keys by their base name (without prefix).
+ * This ensures that 'service.name' matches 'resource.service.name'
+ */
+export function isKeyMatch(
+	itemKey: string | undefined,
+	filterKey: string | undefined,
+): boolean {
+	return getKeyWithoutPrefix(itemKey) === getKeyWithoutPrefix(filterKey);
+}

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

@@ -0,0 +1,4 @@
+.timeline-v3-container {
+	// flex: 1;
+	overflow: visible;
+}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,93 @@
+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,
+		},
+	];
+
+	let tempBaseSpread = baseSpread;
+	let elapsedIntervals = 0;
+
+	while (tempBaseSpread && intervals.length < 20) {
+		let intervalTime: number;
+
+		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
+			intervalTime = elapsedIntervals + tempBaseSpread;
+			tempBaseSpread = 0;
+		} else {
+			intervalTime = elapsedIntervals + intervalSpreadNormalized;
+			tempBaseSpread -= intervalSpreadNormalized;
+		}
+
+		elapsedIntervals = intervalTime;
+		const labelTime = offsetTimestamp + intervalTime;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (intervalTime / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}

frontend/src/constants/query.ts

@@ -55,4 +55,5 @@ export enum QueryParams {
 	source = 'source',
 	showClassicCreateAlertsPage = 'showClassicCreateAlertsPage',
 	isTestAlert = 'isTestAlert',
+	yAxisUnit = 'yAxisUnit',
 }

frontend/src/constants/queryCacheTime.ts

@@ -0,0 +1,3 @@
+export const DASHBOARD_CACHE_TIME = 30_000;
+// keep it low or zero, otherwise, when enabled auto-refresh, this causes OOM due to accumulated queries in cache
+export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;

frontend/src/constants/reactQueryKeys.ts

@@ -96,4 +96,7 @@ export const REACT_QUERY_KEY = {
 
 	// Span Percentiles Query Keys
 	GET_SPAN_PERCENTILES: 'GET_SPAN_PERCENTILES',
+
+	// Dashboard Grid Card Query Keys
+	DASHBOARD_GRID_CARD_QUERY_RANGE: 'DASHBOARD_GRID_CARD_QUERY_RANGE',
 } as const;

frontend/src/constants/theme.ts

@@ -33,6 +33,125 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
+	traceDetailColorsV3: {
+		// Blues
+		dodgerBlue: '#2F80ED',
+		royalBlue: '#3366E6',
+		steelBlue: '#4682B4',
+
+		// Teals / Cyans
+		turquoise: '#00CEC9',
+		lagoon: '#1ABC9C',
+		cyanBright: '#22A6F2',
+
+		// Greens
+		emeraldGreen: '#27AE60',
+		mediumSeaGreen: '#3CB371',
+		limeGreen: '#A3E635',
+
+		// Yellows / Golds
+		festivalYellow: '#F2C94C',
+		sunflower: '#FFD93D',
+		warmAmber: '#FFCA28',
+
+		// Purples / Violets
+		mediumPurple: '#BB6BD9',
+		royalPurple: '#9B51E0',
+		orchid: '#DA77F2',
+
+		// Accent
+		neonViolet: '#C77DFF',
+		electricPurple: '#6C5CE7',
+		arcticBlue: '#48DBFB',
+
+		// Blues extended
+		blue1: '#1F63E0',
+		blue2: '#3A7AED',
+		blue3: '#5A9DF5',
+		blue4: '#2874A6',
+		blue5: '#2E86C1',
+		blue6: '#3498DB',
+
+		// Cyans
+		cyan1: '#00B0AA',
+		cyan2: '#33D6C2',
+		cyan3: '#66E9DA',
+
+		// Greens extended
+		green1: '#1E8449',
+		green2: '#2ECC71',
+		green3: '#58D68D',
+		green4: '#229954',
+		green5: '#27AE60',
+		green6: '#52BE80',
+
+		// Forest
+		forest1: '#27AE60',
+		forest2: '#2ECC71',
+		forest3: '#58D68D',
+
+		// Lime
+		lime1: '#A3E635',
+		lime2: '#B9F18D',
+		lime3: '#D4FFB0',
+
+		// Teals
+		teal1: '#009688',
+		teal2: '#1ABC9C',
+		teal3: '#48C9B0',
+		teal4: '#1ABC9C',
+		teal5: '#48C9B0',
+		teal6: '#76D7C4',
+
+		// Yellows
+		yellow1: '#F1C40F',
+		yellow2: '#F7DC6F',
+		yellow3: '#F9E79F',
+
+		// Gold
+		gold1: '#F39C12',
+		gold2: '#F1C40F',
+		gold3: '#F7DC6F',
+		gold4: '#B7950B',
+		gold5: '#F1C40F',
+		gold6: '#F4D03F',
+
+		// Mustard
+		mustard1: '#F1C40F',
+		mustard2: '#F7DC6F',
+		mustard3: '#F9E79F',
+
+		// Aqua
+		aqua1: '#00BFFF',
+		aqua2: '#1E90FF',
+		aqua3: '#63B8FF',
+
+		// Purple extended
+		purple1: '#8E44AD',
+		purple2: '#9B59B6',
+		purple3: '#BB8FCE',
+
+		violet1: '#8E44AD',
+		violet2: '#9B59B6',
+		violet3: '#BB8FCE',
+		violet4: '#7D3C98',
+		violet5: '#8E44AD',
+		violet6: '#9B59B6',
+
+		// Lavender
+		lavender1: '#9B59B6',
+		lavender2: '#AF7AC5',
+		lavender3: '#C39BD3',
+
+		// Oranges (safe ones, not red-ish)
+		orange4: '#D35400',
+		orange5: '#E67E22',
+		orange6: '#EB984E',
+
+		coral1: '#E67E22',
+		coral2: '#F39C12',
+		coral3: '#F5B041',
+	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -16,8 +16,8 @@ export const PagerInitialConfig: Partial<PagerChannel> = {
 	client: 'SigNoz Alert Manager',
 	client_url: 'https://enter-signoz-host-n-port-here/alerts',
 	details: JSON.stringify({
-		firing: `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
-		resolved: `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
+		firing: `{{ .Alerts.Firing | toJson }}`,
+		resolved: `{{ .Alerts.Resolved | toJson }}`,
 		num_firing: '{{ .Alerts.Firing | len }}',
 		num_resolved: '{{ .Alerts.Resolved | len }}',
 	}),

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -193,7 +193,6 @@ describe('Dashboard landing page actions header tests', () => {
 			handleDashboardLockToggle: jest.fn(),
 			dashboardResponse: {} as IDashboardContext['dashboardResponse'],
 			selectedDashboard: (getDashboardById.data as unknown) as Dashboard,
-			dashboardId: '4',
 			layouts: [],
 			panelMap: {},
 			setPanelMap: jest.fn(),
@@ -205,8 +204,6 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
-			selectedRowWidgetId: null,
-			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -78,7 +78,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		isDashboardLocked,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
-		setSelectedRowWidgetId,
 		handleDashboardLockToggle,
 	} = useDashboard();
 
@@ -146,7 +145,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
-		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -13,6 +13,10 @@ import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from '../../../constants/queryCacheTime';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import {
@@ -101,9 +105,10 @@ function DynamicVariableInput({
 		return dynamicVars || 'no_dynamic_variables';
 	}, [existingVariables]);
 
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { maxTime, minTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const {
 		variableFetchCycleId,
@@ -232,6 +237,9 @@ function DynamicVariableInput({
 				!!variableData.dynamicVariablesSource &&
 				!!variableData.dynamicVariablesAttribute &&
 				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 			queryFn: ({ signal }) =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -11,6 +11,10 @@ import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from '../../../constants/queryCacheTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
@@ -33,9 +37,10 @@ function QueryVariableInput({
 	);
 	const [errorMessage, setErrorMessage] = useState<null | string>(null);
 
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { maxTime, minTime, isAutoRefreshDisabled } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const {
 		variableFetchCycleId,
@@ -197,6 +202,9 @@ function QueryVariableInput({
 					signal,
 				),
 			refetchOnWindowFocus: false,
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 			onSuccess: (response) => {
 				getOptions(response.payload);
 				settleVariableFetch(variableData.name, 'complete');

frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts

@@ -67,17 +67,18 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 							const oldVariables = prev?.data.variables;
 							// this is added to handle case where we have two different
 							// schemas for variable response
-							if (oldVariables?.[id]) {
-								oldVariables[id] = {
-									...oldVariables[id],
+							const updatedVariables = { ...oldVariables };
+							if (updatedVariables?.[id]) {
+								updatedVariables[id] = {
+									...updatedVariables[id],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
 								};
 							}
-							if (oldVariables?.[name]) {
-								oldVariables[name] = {
-									...oldVariables[name],
+							if (updatedVariables?.[name]) {
+								updatedVariables[name] = {
+									...updatedVariables[name],
 									selectedValue: value,
 									allSelected,
 									haveCustomValuesSelected,
@@ -87,9 +88,7 @@ export const useDashboardVariableUpdate = (): UseDashboardVariableUpdateReturn =
 								...prev,
 								data: {
 									...prev?.data,
-									variables: {
-										...oldVariables,
-									},
+									variables: updatedVariables,
 								},
 							};
 						}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -62,7 +61,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts

@@ -11,7 +11,6 @@ import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 import { AlignedData } from 'uplot';
 
 import { PanelMode } from '../types';
@@ -44,7 +43,7 @@ export function prepareBarPanelConfig({
 	currentQuery: Query;
 	onClick: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
@@ -76,13 +75,17 @@ export function prepareBarPanelConfig({
 		stepInterval: minStepInterval,
 	});
 
+	if (!(apiResponse && apiResponse?.data?.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
 	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
+		const seriesCount = (apiResponse.data.result.length ?? 0) + 1; // +1 for 1-based uPlot series indices
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
+	apiResponse.data.result.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -6,7 +6,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import Histogram from '../../charts/Histogram/Histogram';
@@ -39,7 +38,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 		return prepareHistogramPanelConfig({
 			widget,
 			isDarkMode,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			panelMode,
 		});
 	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
@@ -49,7 +48,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 			return [];
 		}
 		return prepareHistogramPanelData({
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			bucketWidth: widget?.bucketWidth,
 			bucketCount: widget?.bucketCount,
 			mergeAllActiveQueries: widget?.mergeAllActiveQueries,

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -149,7 +149,7 @@ export function prepareHistogramPanelConfig({
 	isDarkMode,
 }: {
 	widget: Widgets;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	panelMode: PanelMode;
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
@@ -204,7 +204,7 @@ export function prepareHistogramPanelConfig({
 			fillColor: '#4E74F8',
 			isDarkMode,
 		});
-	} else {
+	} else if (apiResponse && apiResponse?.data?.result) {
 		apiResponse.data.result.forEach((series) => {
 			const baseLabelName = getLabelName(
 				series.metric,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -9,7 +9,6 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
@@ -68,7 +67,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 			currentQuery: widget.query,
 			onClick: clickHandlerWithContextMenu,
 			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			apiResponse: queryResponse?.data?.payload,
 			timezone,
 			panelMode,
 			minTimeScale: minTimeScale,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -68,11 +68,12 @@ export const prepareUPlotConfig = ({
 	currentQuery: Query;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	timezone: Timezone;
 	panelMode: PanelMode;
 	minTimeScale?: number;
 	maxTimeScale?: number;
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 }): UPlotConfigBuilder => {
 	const stepIntervals: ExecStats['stepIntervals'] = get(
 		apiResponse,
@@ -100,7 +101,12 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	apiResponse.data?.result?.forEach((series) => {
+	if (!(apiResponse && apiResponse.data.result)) {
+		// if no data, return the builder without adding any series
+		return builder;
+	}
+
+	apiResponse.data.result.forEach((series) => {
 		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -18,7 +18,7 @@ import { PanelMode } from '../types';
 export interface BaseConfigBuilderProps {
 	id: string;
 	thresholds?: ThresholdProps[];
-	apiResponse: MetricRangePayloadProps;
+	apiResponse?: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -19,7 +19,6 @@ export default function DashboardEmptyState(): JSX.Element {
 		selectedDashboard,
 		isDashboardLocked,
 		handleToggleDashboardSlider,
-		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
@@ -42,7 +41,6 @@ export default function DashboardEmptyState(): JSX.Element {
 	const [addPanelPermission] = useComponentPermission(permissions, userRole);
 
 	const onEmptyWidgetHandler = useCallback(() => {
-		setSelectedRowWidgetId(null);
 		handleToggleDashboardSlider(true);
 		logEvent('Dashboard Detail: Add new panel clicked', {
 			dashboardId: selectedDashboard?.id,

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -25,6 +25,11 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 
+import {
+	DASHBOARD_CACHE_TIME,
+	DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
+} from '../../../constants/queryCacheTime';
+import { REACT_QUERY_KEY } from '../../../constants/reactQueryKeys';
 import EmptyWidget from '../EmptyWidget';
 import { MenuItemKeys } from '../WidgetHeader/contants';
 import { GridCardGraphProps } from './types';
@@ -68,10 +73,12 @@ function GridCardGraph({
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
+	const {
+		minTime,
+		maxTime,
+		selectedTime: globalSelectedInterval,
+		isAutoRefreshDisabled,
+	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -210,8 +217,10 @@ function GridCardGraph({
 		version || DEFAULT_ENTITY_VERSION,
 		{
 			queryKey: [
+				REACT_QUERY_KEY.DASHBOARD_GRID_CARD_QUERY_RANGE,
 				maxTime,
 				minTime,
+				isAutoRefreshDisabled,
 				globalSelectedInterval,
 				widget?.query,
 				widget?.panelTypes,
@@ -241,6 +250,9 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
+			cacheTime: isAutoRefreshDisabled
+				? DASHBOARD_CACHE_TIME
+				: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
 			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -71,7 +71,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		isDashboardLocked,
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
-		setSelectedRowWidgetId,
 		isDashboardFetching,
 		columnWidths,
 	} = useDashboard();
@@ -195,7 +194,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 
 		updateDashboardMutation.mutate(updatedDashboard, {
 			onSuccess: (updatedDashboard) => {
-				setSelectedRowWidgetId(null);
 				if (updatedDashboard.data) {
 					if (updatedDashboard.data.data.layout) {
 						setLayouts(sortLayout(updatedDashboard.data.data.layout));

frontend/src/container/GridCardLayout/WidgetRow.tsx

@@ -5,6 +5,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import { EllipsisIcon, PenLine, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { setSelectedRowWidgetId } from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -37,7 +38,6 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 		handleToggleDashboardSlider,
 		selectedDashboard,
 		isDashboardLocked,
-		setSelectedRowWidgetId,
 	} = useDashboard();
 
 	const permissions: ComponentTypes[] = ['add_panel'];
@@ -81,7 +81,12 @@ export function WidgetRowHeader(props: WidgetRowHeaderProps): JSX.Element {
 							disabled={!editWidget && addPanelPermission && !isDashboardLocked}
 							icon={<Plus size={14} />}
 							onClick={(): void => {
-								setSelectedRowWidgetId(id);
+								// TODO: @AshwinBhatkal Simplify this check in cleanup of https://github.com/SigNoz/engineering-pod/issues/3953
+								if (!selectedDashboard?.id) {
+									return;
+								}
+
+								setSelectedRowWidgetId(selectedDashboard.id, id);
 								handleToggleDashboardSlider(true);
 							}}
 						>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -39,6 +39,7 @@ import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQuery
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { isEmpty, isUndefined } from 'lodash-es';
 import LiveLogs from 'pages/LiveLogs';
 import { UpdateTimeInterval } from 'store/actions';
@@ -59,6 +60,7 @@ import LogsActionsContainer from './LogsActionsContainer';
 
 import './LogsExplorerViews.styles.scss';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function LogsExplorerViewsContainer({
 	setIsLoadingQueries,
 	listQueryKeyRef,
@@ -109,7 +111,7 @@ function LogsExplorerViewsContainer({
 
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
 
-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
 	const listQuery = useMemo(() => getListQuery(stagedQuery) || null, [
 		stagedQuery,
@@ -367,10 +369,6 @@ function LogsExplorerViewsContainer({
 		orderBy,
 	]);
 
-	const onUnitChangeHandler = useCallback((value: string): void => {
-		setYAxisUnit(value);
-	}, []);
-
 	const chartData = useMemo(() => {
 		if (!stagedQuery) {
 			return [];
@@ -488,10 +486,7 @@ function LogsExplorerViewsContainer({
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter
-									onChange={onUnitChangeHandler}
-									yAxisUnit={yAxisUnit}
-								/>
+								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}

frontend/src/container/MeterExplorer/Explorer/TimeSeries.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -11,6 +11,7 @@ import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsF
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { convertDataValueToMs } from 'container/TimeSeriesView/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlYAxisUnit from 'hooks/useUrlYAxisUnit';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -22,14 +23,13 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 function TimeSeries(): JSX.Element {
 	const { stagedQuery, currentQuery } = useQueryBuilder();
+	const { yAxisUnit, onUnitChange } = useUrlYAxisUnit('');
 
 	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const [yAxisUnit, setYAxisUnit] = useState<string>('');
-
 	const isValidToConvertToMs = useMemo(() => {
 		const isValid: boolean[] = [];
 
@@ -112,10 +112,6 @@ function TimeSeries(): JSX.Element {
 		[data, isValidToConvertToMs],
 	);
 
-	const onUnitChangeHandler = (value: string): void => {
-		setYAxisUnit(value);
-	};
-
 	const hasMetricSelected = useMemo(
 		() => currentQuery.builder.queryData.some((q) => q.aggregateAttribute?.key),
 		[currentQuery],
@@ -123,7 +119,7 @@ function TimeSeries(): JSX.Element {
 
 	return (
 		<div className="meter-time-series-container">
-			<BuilderUnitsFilter onChange={onUnitChangeHandler} yAxisUnit={yAxisUnit} />
+			<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
 			<div className="time-series-container">
 				{!hasMetricSelected && <EmptyMetricsSearch />}
 				{hasMetricSelected &&

frontend/src/container/NewWidget/index.tsx

@@ -34,6 +34,10 @@ import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import {
+	clearSelectedRowWidgetId,
+	getSelectedRowWidgetId,
+} from 'providers/Dashboard/helpers/selectedRowWidgetIdHelper';
 import {
 	getNextWidgets,
 	getPreviousWidgets,
@@ -86,8 +90,6 @@ function NewWidget({
 		selectedDashboard,
 		setSelectedDashboard,
 		setToScrollWidgetId,
-		selectedRowWidgetId,
-		setSelectedRowWidgetId,
 		columnWidths,
 	} = useDashboard();
 
@@ -450,6 +452,8 @@ function NewWidget({
 		const widgetId = query.get('widgetId') || '';
 		let updatedLayout = selectedDashboard.data.layout || [];
 
+		const selectedRowWidgetId = getSelectedRowWidgetId(dashboardId);
+
 		if (isNewDashboard && isEmpty(selectedRowWidgetId)) {
 			const newLayoutItem = placeWidgetAtBottom(widgetId, updatedLayout);
 			updatedLayout = [...updatedLayout, newLayoutItem];
@@ -554,7 +558,6 @@ function NewWidget({
 
 		updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: (updatedDashboard) => {
-				setSelectedRowWidgetId(null);
 				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
 				safeNavigate({
@@ -566,7 +569,6 @@ function NewWidget({
 		selectedDashboard,
 		query,
 		isNewDashboard,
-		selectedRowWidgetId,
 		afterWidgets,
 		selectedWidget,
 		selectedTime.enum,
@@ -577,7 +579,6 @@ function NewWidget({
 		widgets,
 		setSelectedDashboard,
 		setToScrollWidgetId,
-		setSelectedRowWidgetId,
 		safeNavigate,
 		dashboardId,
 	]);
@@ -681,6 +682,10 @@ function NewWidget({
 		 * on mount here with the currentQuery in the begining itself
 		 */
 		setSupersetQuery(currentQuery);
+
+		return (): void => {
+			clearSelectedRowWidgetId(dashboardId);
+		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 

frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx

@@ -619,6 +619,11 @@ function OnboardingAddDataSource(): JSX.Element {
 		);
 	};
 
+	const progressText = `Get Started (${Math.min(
+		currentStep + 1,
+		setupStepItems.length,
+	)}/${setupStepItems.length})`;
+
 	return (
 		<div className="onboarding-v2">
 			<Layout>
@@ -639,7 +644,7 @@ function OnboardingAddDataSource(): JSX.Element {
 									history.push(ROUTES.HOME);
 								}}
 							/>
-							<Typography.Text>Get Started (2/4)</Typography.Text>
+							<Typography.Text>{progressText}</Typography.Text>
 						</div>
 
 						<div className="header-right-section">

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

@@ -611,6 +611,34 @@
 			]
 		}
 	},
+	{
+		"dataSource": "deno",
+		"label": "Deno",
+		"imgUrl": "/Logos/deno.svg",
+		"tags": [
+			"apm/traces",
+			"logs",
+			"metrics"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"deno",
+			"deno monitoring",
+			"deno observability",
+			"javascript",
+			"js",
+			"ts",
+			"typescript",
+			"opentelemetry deno",
+			"observability",
+			"metrics",
+			"logs",
+			"traces",
+			"tracing"
+		],
+		"id": "deno",
+		"link": "/docs/instrumentation/opentelemetry-deno/"
+	},
 	{
 		"dataSource": "javascript",
 		"label": "JavaScript",
@@ -1828,15 +1856,33 @@
 		],
 		"module": "logs",
 		"relatedSearchKeywords": [
+			"apache",
 			"application log file collection",
+			"c#",
+			"c++",
 			"collect",
 			"collect logs from file",
 			"collect logs from log file",
+			"cpp",
+			"csharp",
 			"custom log file monitoring",
+			"deno",
+			"django",
+			"dotnet",
+			"elixir",
+			"express",
 			"file",
 			"file based logging",
 			"filebeat alternative",
+			"flask",
 			"from-log-file",
+			"go",
+			"golang",
+			"java",
+			"javascript",
+			"js",
+			"kotlin",
+			"linux",
 			"log",
 			"log file ingestion",
 			"log file to signoz",
@@ -1844,7 +1890,29 @@
 			"log tailing with otel",
 			"logging",
 			"logs",
-			"otel file logs"
+			"macos",
+			"mongodb",
+			"mysql",
+			"nestjs",
+			"nextjs",
+			"nginx",
+			"otel file logs",
+			"php",
+			"postgres",
+			"postgresql",
+			"python",
+			"rails",
+			"react",
+			"redis",
+			"ruby",
+			"rust",
+			"scala",
+			"spring",
+			"swift",
+			"ts",
+			"typescript",
+			"vue",
+			"windows"
 		],
 		"link": "/docs/userguide/collect_logs_from_file/"
 	},
@@ -5208,7 +5276,7 @@
 	{
 		"dataSource": "prometheus-metrics",
 		"label": "Prometheus Metrics",
-		"imgUrl": "/Logos/other-metrics.svg",
+		"imgUrl": "/Logos/prometheus.svg",
 		"tags": [
 			"metrics",
 			"infrastructure monitoring"
@@ -5809,5 +5877,250 @@
 				}
 			]
 		}
+	},
+	{
+		"dataSource": "rust-metrics",
+		"label": "Rust Metrics",
+		"imgUrl": "/Logos/rust.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"opentelemetry rust",
+			"otel rust",
+			"rust",
+			"rust metrics",
+			"rust monitoring",
+			"rust observability"
+		],
+		"id": "rust-metrics",
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/",
+		"question": {
+			"desc": "What is your Environment?",
+			"type": "select",
+			"entityID": "environment",
+			"options": [
+				{
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-rust/"
+				}
+			]
+		}
+	},
+	{
+		"dataSource": "ruby-metrics",
+		"label": "Ruby Metrics",
+		"imgUrl": "/Logos/ruby-on-rails.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"opentelemetry ruby",
+			"otel ruby",
+			"ruby",
+			"ruby metrics",
+			"ruby monitoring",
+			"ruby observability",
+			"ruby on rails metrics"
+		],
+		"id": "ruby-metrics",
+		"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/",
+		"question": {
+			"desc": "What is your Environment?",
+			"type": "select",
+			"entityID": "environment",
+			"options": [
+				{
+					"key": "vm",
+					"label": "VM",
+					"imgUrl": "/Logos/vm.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "k8s",
+					"label": "Kubernetes",
+					"imgUrl": "/Logos/kubernetes.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "windows",
+					"label": "Windows",
+					"imgUrl": "/Logos/windows.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				},
+				{
+					"key": "docker",
+					"label": "Docker",
+					"imgUrl": "/Logos/docker.svg",
+					"link": "/docs/metrics-management/send-metrics/applications/opentelemetry-ruby/"
+				}
+			]
+		}
+	},
+	{
+		"dataSource": "statsd",
+		"label": "StatsD",
+		"imgUrl": "/Logos/statsd.svg",
+		"tags": [
+			"metrics"
+		],
+		"module": "metrics",
+		"relatedSearchKeywords": [
+			"metrics",
+			"statsd",
+			"statsd metrics",
+			"statsd monitoring",
+			"statsd observability"
+		],
+		"id": "statsd",
+		"link": "/docs/userguide/opentelemetry-statsd/"
+	},
+	{
+		"dataSource": "nvidia-dcgm",
+		"label": "Nvidia DCGM",
+		"imgUrl": "/Logos/nvidia-dcgm.svg",
+		"tags": [
+			"infrastructure monitoring"
+		],
+		"module": "infra-monitoring-hosts",
+		"relatedSearchKeywords": [
+			"dcgm",
+			"gpu monitoring",
+			"infrastructure monitoring",
+			"nvidia",
+			"nvidia dcgm",
+			"nvidia metrics"
+		],
+		"id": "nvidia-dcgm",
+		"link": "/docs/metrics-management/nvidia-dcgm-metrics/"
+	},
+	{
+		"dataSource": "slurm",
+		"label": "Slurm",
+		"imgUrl": "/Logos/slurm.svg",
+		"tags": [
+			"infrastructure monitoring"
+		],
+		"module": "infra-monitoring-hosts",
+		"relatedSearchKeywords": [
+			"infrastructure monitoring",
+			"slurm",
+			"slurm cluster monitoring",
+			"slurm metrics"
+		],
+		"id": "slurm",
+		"link": "/docs/metrics-management/slurm-metrics/"
+	},
+	{
+		"dataSource": "ollama-monitoring",
+		"label": "Ollama",
+		"imgUrl": "/Logos/ollama.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"ollama",
+			"ollama monitoring",
+			"otel ollama",
+			"traces",
+			"tracing"
+		],
+		"id": "ollama-monitoring",
+		"link": "/docs/ollama-monitoring/"
+	},
+	{
+		"dataSource": "haystack-monitoring",
+		"label": "Haystack",
+		"imgUrl": "/Logos/haystack.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"haystack",
+			"haystack monitoring",
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"otel haystack",
+			"traces",
+			"tracing"
+		],
+		"id": "haystack-monitoring",
+		"link": "/docs/haystack-monitoring/"
+	},
+	{
+		"dataSource": "openrouter-observability",
+		"label": "OpenRouter",
+		"imgUrl": "/Logos/openrouter.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"openrouter",
+			"openrouter monitoring",
+			"otel openrouter",
+			"traces",
+			"tracing"
+		],
+		"id": "openrouter-observability",
+		"link": "/docs/openrouter-observability/"
+	},
+	{
+		"dataSource": "huggingface-observability",
+		"label": "Hugging Face",
+		"imgUrl": "/Logos/huggingface.svg",
+		"tags": [
+			"LLM Monitoring"
+		],
+		"module": "apm",
+		"relatedSearchKeywords": [
+			"hugging face monitoring",
+			"huggingface",
+			"llm",
+			"llm monitoring",
+			"monitoring",
+			"observability",
+			"otel huggingface",
+			"traces",
+			"tracing"
+		],
+		"id": "huggingface-observability",
+		"link": "/docs/huggingface-observability/"
 	}
 ]

frontend/src/hooks/useAuthZ/permissions.type.ts

@@ -11,8 +11,17 @@ export default {
 				name: 'dashboards',
 				type: 'metaresources',
 			},
+			{
+				name: 'role',
+				type: 'role',
+			},
+			{
+				name: 'roles',
+				type: 'metaresources',
+			},
 		],
 		relations: {
+			assignee: ['role'],
 			create: ['metaresources'],
 			delete: ['user', 'role', 'organization', 'metaresource'],
 			list: ['metaresources'],

frontend/src/hooks/useGetQueryLabels.test.ts

@@ -0,0 +1,129 @@
+import { renderHook } from '@testing-library/react';
+import {
+	IBuilderFormula,
+	IClickHouseQuery,
+	IPromQLQuery,
+	Query,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+
+import { useGetQueryLabels } from './useGetQueryLabels';
+
+jest.mock('components/QueryBuilderV2/utils', () => ({
+	getQueryLabelWithAggregation: jest.fn(() => []),
+}));
+
+function buildQuery(overrides: Partial<Query> = {}): Query {
+	return {
+		id: 'test-id',
+		queryType: EQueryType.QUERY_BUILDER,
+		builder: {
+			queryData: [],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		promql: [],
+		clickhouse_sql: [],
+		...overrides,
+	};
+}
+
+describe('useGetQueryLabels', () => {
+	describe('QUERY_BUILDER type', () => {
+		it('returns empty array when queryFormulas is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.QUERY_BUILDER,
+				builder: {
+					queryData: [],
+					queryFormulas: (undefined as unknown) as IBuilderFormula[],
+					queryTraceOperator: [],
+				},
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns formula labels when queryFormulas is populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.QUERY_BUILDER,
+				builder: {
+					queryData: [],
+					queryFormulas: [
+						({ queryName: 'F1' } as unknown) as IBuilderFormula,
+						({ queryName: 'F2' } as unknown) as IBuilderFormula,
+					],
+					queryTraceOperator: [],
+				},
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'F1', value: 'F1' },
+				{ label: 'F2', value: 'F2' },
+			]);
+		});
+	});
+
+	describe('CLICKHOUSE type', () => {
+		it('returns empty array when clickhouse_sql is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.CLICKHOUSE,
+				clickhouse_sql: (undefined as unknown) as IClickHouseQuery[],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns labels from clickhouse_sql when populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.CLICKHOUSE,
+				clickhouse_sql: [
+					({ name: 'query_a' } as unknown) as IClickHouseQuery,
+					({ name: 'query_b' } as unknown) as IClickHouseQuery,
+				],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'query_a', value: 'query_a' },
+				{ label: 'query_b', value: 'query_b' },
+			]);
+		});
+	});
+
+	describe('PROM type (default)', () => {
+		it('returns empty array when promql is undefined', () => {
+			const query = buildQuery({
+				queryType: EQueryType.PROM,
+				promql: (undefined as unknown) as IPromQLQuery[],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([]);
+		});
+
+		it('returns labels from promql when populated', () => {
+			const query = buildQuery({
+				queryType: EQueryType.PROM,
+				promql: [
+					({ name: 'prom_1' } as unknown) as IPromQLQuery,
+					({ name: 'prom_2' } as unknown) as IPromQLQuery,
+				],
+			});
+
+			const { result } = renderHook(() => useGetQueryLabels(query));
+
+			expect(result.current).toEqual([
+				{ label: 'prom_1', value: 'prom_1' },
+				{ label: 'prom_2', value: 'prom_2' },
+			]);
+		});
+	});
+});

frontend/src/hooks/useGetQueryLabels.ts

@@ -11,7 +11,7 @@ export const useGetQueryLabels = (
 			const queryLabels = getQueryLabelWithAggregation(
 				currentQuery?.builder?.queryData || [],
 			);
-			const formulaLabels = currentQuery?.builder?.queryFormulas?.map(
+			const formulaLabels = (currentQuery?.builder?.queryFormulas ?? []).map(
 				(formula) => ({
 					label: formula.queryName,
 					value: formula.queryName,
@@ -20,10 +20,13 @@ export const useGetQueryLabels = (
 			return [...queryLabels, ...formulaLabels];
 		}
 		if (currentQuery?.queryType === EQueryType.CLICKHOUSE) {
-			return currentQuery?.clickhouse_sql?.map((q) => ({
+			return (currentQuery?.clickhouse_sql ?? []).map((q) => ({
 				label: q.name,
 				value: q.name,
 			}));
 		}
-		return currentQuery?.promql?.map((q) => ({ label: q.name, value: q.name }));
+		return (currentQuery?.promql ?? []).map((q) => ({
+			label: q.name,
+			value: q.name,
+		}));
 	}, [currentQuery]);

frontend/src/hooks/useUrlYAxisUnit.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { QueryParams } from 'constants/query';
+import { parseAsString, useQueryState } from 'nuqs';
+
+interface UseUrlYAxisUnitResult {
+	yAxisUnit: string;
+	onUnitChange: (value: string) => void;
+}
+
+/**
+ * Hook to manage y-axis unit synchronized with the URL query param.
+ * It:
+ * - Initializes from `QueryParams.yAxisUnit` or a provided default
+ * - Keeps local state in sync when the URL changes (e.g. back/forward, shared links)
+ * - Writes updates back to the URL while preserving existing query params
+ */
+function useUrlYAxisUnit(defaultUnit = ''): UseUrlYAxisUnitResult {
+	const [yAxisUnit, setYAxisUnitInUrl] = useQueryState(
+		QueryParams.yAxisUnit,
+		parseAsString.withDefault(defaultUnit),
+	);
+
+	const onUnitChange = useCallback(
+		(value: string): void => {
+			setYAxisUnitInUrl(value || null);
+		},
+		[setYAxisUnitInUrl],
+	);
+
+	return { yAxisUnit, onUnitChange };
+}
+
+export default useUrlYAxisUnit;

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { ThemeProvider } from 'hooks/useDarkMode';
+import { NuqsAdapter } from 'nuqs/adapters/react';
 import { AppProvider } from 'providers/App/App';
 import TimezoneProvider from 'providers/Timezone';
 import store from 'store';
@@ -45,17 +46,19 @@ if (container) {
 
 	root.render(
 		<HelmetProvider>
-			<ThemeProvider>
-				<TimezoneProvider>
-					<QueryClientProvider client={queryClient}>
-						<Provider store={store}>
-							<AppProvider>
-								<AppRoutes />
-							</AppProvider>
-						</Provider>
-					</QueryClientProvider>
-				</TimezoneProvider>
-			</ThemeProvider>
+			<NuqsAdapter>
+				<ThemeProvider>
+					<TimezoneProvider>
+						<QueryClientProvider client={queryClient}>
+							<Provider store={store}>
+								<AppProvider>
+									<AppRoutes />
+								</AppProvider>
+							</Provider>
+						</QueryClientProvider>
+					</TimezoneProvider>
+				</ThemeProvider>
+			</NuqsAdapter>
 		</HelmetProvider>,
 	);
 }

frontend/src/mocks-server/__mockdata__/alerts.ts

@@ -32,8 +32,8 @@ export const editSlackDescriptionDefaultValue = `{{ range .Alerts -}} *Alert:* {
 export const pagerDutyDescriptionDefaultVaule = `{{ if gt (len .Alerts.Firing) 0 -}} Alerts Firing: {{ range .Alerts.Firing }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }} {{ if gt (len .Alerts.Resolved) 0 -}} Alerts Resolved: {{ range .Alerts.Resolved }} - Message: {{ .Annotations.description }} Labels: {{ range .Labels.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Annotations: {{ range .Annotations.SortedPairs }} - {{ .Name }} = {{ .Value }} {{ end }} Source: {{ .GeneratorURL }} {{ end }} {{- end }}`;
 
 export const pagerDutyAdditionalDetailsDefaultValue = JSON.stringify({
-	firing: `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
-	resolved: `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
+	firing: `{{ .Alerts.Firing | toJson }}`,
+	resolved: `{{ .Alerts.Resolved | toJson }}`,
 	num_firing: '{{ .Alerts.Firing | len }}',
 	num_resolved: '{{ .Alerts.Resolved | len }}',
 });

frontend/src/pages/TraceDetailV2/index.tsx

@@ -4,19 +4,11 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Compass, Cone, TowerControl } from 'lucide-react';
 
-import TraceDetailsV2 from './TraceDetailV2';
+import TraceDetailsV3 from '../TraceDetailsV3';
 
 import './TraceDetailV2.styles.scss';
 
-interface INewTraceDetailProps {
-	items: {
-		label: JSX.Element;
-		key: string;
-		children: JSX.Element;
-	}[];
-}
-
-function NewTraceDetail(props: INewTraceDetailProps): JSX.Element {
+function NewTraceDetail(props: any): JSX.Element {
 	const { items } = props;
 	return (
 		<div className="traces-module-container">
@@ -50,7 +42,7 @@ export default function TraceDetailsPage(): JSX.Element {
 				</div>
 			),
 			key: 'trace-details',
-			children: <TraceDetailsV2 />,
+			children: <TraceDetailsV3 />,
 		},
 		{
 			label: (

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

@@ -0,0 +1,91 @@
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 0px 16px;
+
+	.previous-btn {
+		display: flex;
+		height: 30px;
+		padding: 6px 8px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		background: var(--bg-slate-500);
+		border-radius: 4px;
+		box-shadow: none;
+	}
+
+	.trace-name {
+		display: flex;
+		padding: 6px 8px;
+		margin-left: 6px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 4px 0px 0px 4px;
+		background: var(--bg-slate-500);
+
+		.drafting {
+			color: white;
+		}
+
+		.trace-id {
+			color: #fff;
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.trace-id-value {
+		display: flex;
+		padding: 6px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		background: var(--bg-slate-400);
+		color: var(--Vanilla-400, #c0c1c3);
+		font-family: Inter;
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px;
+		letter-spacing: -0.07px;
+		border: 1px solid var(--bg-slate-300);
+		border-left: unset;
+		border-radius: 0px 4px 4px 0px;
+	}
+}
+
+.lightMode {
+	.trace-details-header {
+		.previous-btn {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+		}
+
+		.trace-name {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+			border-right: none;
+
+			.drafting {
+				color: var(--bg-ink-100);
+			}
+
+			.trace-id {
+				color: var(--bg-ink-100);
+			}
+		}
+
+		.trace-id-value {
+			background: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+}
+// TODO: move to new css module name system

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

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ArrowLeft } from 'lucide-react';
+import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+
+import './TraceDetailsHeader.styles.scss';
+
+function TraceDetailsHeader(): JSX.Element {
+	const { id: traceID } = useParams<TraceDetailV2URLProps>();
+
+	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 className="previous-btn" onClick={handlePreviousBtnClick}>
+				<ArrowLeft size={14} />
+			</Button>
+			<div className="trace-name">
+				<Typography.Text className="trace-id">Trace ID</Typography.Text>
+			</div>
+			<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
+		</div>
+	);
+}
+
+export default TraceDetailsHeader;

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

@@ -0,0 +1,237 @@
+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 { 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 { FlamegraphCanvasProps, SpanRect } from './types';
+import { formatDuration } from './utils';
+
+function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
+	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = 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 [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 = spans.length * rowHeight;
+
+	const { isOverFlamegraphRef } = useFlamegraphZoom({
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	});
+
+	const {
+		handleMouseDown,
+		handleMouseMove: handleDragMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		suppressClickRef,
+		isDraggingRef,
+	} = useFlamegraphDrag({
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	});
+
+	const {
+		hoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	} = useFlamegraphHover({
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	});
+
+	const { drawFlamegraph } = useFlamegraphDraw({
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId: firstSpanAtFetchLevel || undefined,
+		hoveredSpanId: hoveredSpanId ?? '',
+		isDarkMode,
+		spanRectsRef,
+	});
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		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]);
+
+	// todo: move to a separate component/utils file
+	const tooltipElement = tooltipContent
+		? createPortal(
+				<div
+					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)',
+						color: '#fff',
+						padding: '8px 12px',
+						borderRadius: 4,
+						fontSize: 12,
+						fontFamily: 'Inter, sans-serif',
+						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+						pointerEvents: 'none',
+					}}
+				>
+					<div
+						style={{
+							fontWeight: 600,
+							marginBottom: 4,
+							color: tooltipContent.spanColor,
+						}}
+					>
+						{tooltipContent.spanName}
+					</div>
+					<div>Status: {tooltipContent.status}</div>
+					<div>Start: {tooltipContent.startMs.toFixed(2)} ms</div>
+					<div>Duration: {formatDuration(tooltipContent.durationMs * 1e6)}</div>
+				</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={handleMouseDown}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onClick={handleClick}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default FlamegraphCanvas;

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

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+
+import FlamegraphCanvas from './FlamegraphCanvas';
+
+//TODO: analyse if this is needed or not and move to separate file if needed else delete this enum.
+enum TraceFlamegraphState {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA = 'FETCHING_WITH_OLD_DATA',
+}
+
+function TraceFlamegraph(): 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 } = useGetTraceFlamegraph({
+		traceId,
+		selectedSpanId: firstSpanAtFetchLevel,
+	});
+
+	const flamegraphState = useMemo(() => {
+		if (isFetching) {
+			if (data?.payload?.spans && data.payload.spans.length > 0) {
+				return TraceFlamegraphState.FETCHING_WITH_OLD_DATA;
+			}
+			return TraceFlamegraphState.LOADING;
+		}
+		if (error) {
+			return TraceFlamegraphState.ERROR;
+		}
+		if (data?.payload?.spans && data.payload.spans.length === 0) {
+			return TraceFlamegraphState.NO_DATA;
+		}
+		return TraceFlamegraphState.SUCCESS;
+	}, [error, isFetching, data]);
+
+	const spans = useMemo(() => data?.payload?.spans || [], [
+		data?.payload?.spans,
+	]);
+
+	const content = useMemo(() => {
+		switch (flamegraphState) {
+			case TraceFlamegraphState.LOADING:
+				return <div>Loading...</div>;
+			case TraceFlamegraphState.ERROR:
+				return <div>Error loading flamegraph</div>;
+			case TraceFlamegraphState.NO_DATA:
+				return <div>No data found for trace {traceId}</div>;
+			case TraceFlamegraphState.SUCCESS:
+			case TraceFlamegraphState.FETCHING_WITH_OLD_DATA:
+				return (
+					<FlamegraphCanvas
+						spans={spans}
+						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+						onSpanClick={handleSpanClick}
+						traceMetadata={{
+							startTime: data?.payload?.startTimestampMillis || 0,
+							endTime: data?.payload?.endTimestampMillis || 0,
+						}}
+					/>
+				);
+			default:
+				return <div>Fetching the trace...</div>;
+		}
+	}, [
+		data?.payload?.endTimestampMillis,
+		data?.payload?.startTimestampMillis,
+		firstSpanAtFetchLevel,
+		flamegraphState,
+		spans,
+		traceId,
+		handleSpanClick,
+	]);
+
+	return <>{content}</>;
+}
+
+export default TraceFlamegraph;

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

@@ -0,0 +1,525 @@
+import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
+import type { FlamegraphRowMetrics } from '../utils';
+import { getFlamegraphRowMetrics } from '../utils';
+import { drawEventDot, drawSpanBar } 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,
+				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,
+				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,
+				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,
+				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,
+				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: [],
+				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: [],
+				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: [],
+				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: [],
+				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();
+
+			drawEventDot({
+				ctx,
+				x: 50,
+				y: 11,
+				isError: true,
+				isDarkMode: false,
+				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('uses normal styling when isError is false', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: false,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
+			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
+		});
+
+		it('uses dark mode colors for error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: true,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
+			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
+		});
+
+		it('uses dark mode colors for non-error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(14, 165, 233)');
+			expect(ctx.strokeStyle).toBe('rgb(2, 132, 199)');
+		});
+
+		it('calls save, translate, rotate, restore', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 10,
+				y: 20,
+				isError: false,
+				isDarkMode: false,
+				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: [],
+				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: [],
+				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: [],
+				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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,196 @@
+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('does not set suppressClickRef when movement is below threshold', () => {
+		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: 102,
+				clientY: 51,
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(false);
+	});
+
+	it('sets suppressClickRef when drag exceeds threshold', () => {
+		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);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(true);
+	});
+
+	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

@@ -0,0 +1,174 @@
+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] },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartTs: MOCK_TRACE_METADATA.startTime,
+	viewEndTs: MOCK_TRACE_METADATA.endTime,
+	isDraggingRef: { current: false },
+	suppressClickRef: { 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;
+		defaultArgs.suppressClickRef.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 suppressClickRef is set', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.suppressClickRef.current = true;
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} 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

@@ -0,0 +1,279 @@
+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

@@ -0,0 +1,212 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,67 @@
+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/constants.ts

@@ -0,0 +1,36 @@
+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];

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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,178 @@
+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;
+	suppressClickRef: MutableRefObject<boolean>;
+	isDraggingRef: MutableRefObject<boolean>;
+}
+
+const DRAG_THRESHOLD = 5;
+
+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 suppressClickRef = useRef(false);
+
+	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 => {
+		const wasDrag = dragDistanceRef.current > DRAG_THRESHOLD;
+		suppressClickRef.current = wasDrag;
+
+		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,
+		suppressClickRef,
+		isDraggingRef,
+	};
+}

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

@@ -0,0 +1,222 @@
+import React, { RefObject, useCallback, useRef } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import {
+	clamp,
+	drawSpanBar,
+	FlamegraphRowMetrics,
+	getFlamegraphRowMetrics,
+	getSpanColor,
+} from '../utils';
+
+interface UseFlamegraphDrawArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	spans: FlamegraphSpan[][];
+	viewStartTs: number;
+	viewEndTs: number;
+	scrollTop: number;
+	rowHeight: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
+}
+
+interface UseFlamegraphDrawResult {
+	drawFlamegraph: () => void;
+	spanRectsRef: RefObject<SpanRect[]>;
+}
+
+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[];
+	metrics: FlamegraphRowMetrics;
+}
+
+function drawLevel(args: DrawLevelArgs): void {
+	const {
+		ctx,
+		levelSpans,
+		levelIndex,
+		y,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsArray,
+		metrics,
+	} = 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 });
+
+		drawSpanBar({
+			ctx,
+			span,
+			x: Math.max(0, leftOffset),
+			y,
+			width,
+			levelIndex,
+			spanRectsArray,
+			color,
+			isDarkMode,
+			metrics,
+			selectedSpanId,
+			hoveredSpanId,
+		});
+	}
+}
+
+export function useFlamegraphDraw(
+	args: UseFlamegraphDrawArgs,
+): UseFlamegraphDrawResult {
+	const {
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsRef: spanRectsRefProp,
+	} = args;
+
+	const spanRectsRefInternal = useRef<SpanRect[]>([]);
+	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
+
+	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);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- 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,
+				metrics,
+			});
+		}
+
+		spanRectsRef.current = spanRectsArray;
+	}, [
+		canvasRef,
+		containerRef,
+		spanRectsRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+	]);
+
+	// TODO: spanRectsRef is a flat array — hover scans all visible rects O(N).
+	// Upgrade to per-level buckets: spanRects[levelIndex] = [...] so hover can
+	// compute level from mouseY / ROW_HEIGHT and scan only that row.
+	// Further: binary search within a level by x (spans are sorted by start time)
+	// to reduce hover cost from O(N) to O(log N).
+	return { drawFlamegraph, spanRectsRef };
+}

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

@@ -0,0 +1,214 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useState,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import { ITraceMetadata } from '../types';
+import { getSpanColor } from '../utils';
+
+function getCanvasPointer(
+	canvas: HTMLCanvasElement,
+	clientX: number,
+	clientY: number,
+): { cssX: number; cssY: number } | null {
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssHeight = canvas.height / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
+	return { cssX, cssY };
+}
+
+function findSpanAtPosition(
+	cssX: number,
+	cssY: number,
+	spanRects: SpanRect[],
+): FlamegraphSpan | null {
+	for (let i = spanRects.length - 1; i >= 0; i--) {
+		const r = spanRects[i];
+		if (
+			cssX >= r.x &&
+			cssX <= r.x + r.width &&
+			cssY >= r.y &&
+			cssY <= r.y + r.height
+		) {
+			return r.span;
+		}
+	}
+	return null;
+}
+
+export interface TooltipContent {
+	spanName: string;
+	status: 'ok' | 'warning' | 'error';
+	startMs: number;
+	durationMs: number;
+	clientX: number;
+	clientY: number;
+	spanColor: string;
+}
+
+interface UseFlamegraphHoverArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	spanRectsRef: MutableRefObject<SpanRect[]>;
+	traceMetadata: ITraceMetadata;
+	viewStartTs: number;
+	viewEndTs: number;
+	isDraggingRef: MutableRefObject<boolean>;
+	suppressClickRef: MutableRefObject<boolean>;
+	onSpanClick: (spanId: string) => void;
+	isDarkMode: boolean;
+}
+
+interface UseFlamegraphHoverResult {
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+	handleHoverMouseMove: (e: ReactMouseEvent) => void;
+	handleHoverMouseLeave: () => void;
+	handleClick: (e: ReactMouseEvent) => void;
+	tooltipContent: TooltipContent | null;
+}
+
+export function useFlamegraphHover(
+	args: UseFlamegraphHoverArgs,
+): UseFlamegraphHoverResult {
+	const {
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	} = args;
+
+	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
+		null,
+	);
+
+	const isZoomed =
+		viewStartTs !== traceMetadata.startTime ||
+		viewEndTs !== traceMetadata.endTime;
+
+	const updateCursor = useCallback(
+		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
+			if (span) {
+				canvas.style.cursor = 'pointer';
+			} else if (isZoomed) {
+				canvas.style.cursor = 'grab';
+			} else {
+				canvas.style.cursor = 'default';
+			}
+		},
+		[isZoomed],
+	);
+
+	const handleHoverMouseMove = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (isDraggingRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				setHoveredSpanId(span.spanId);
+				setTooltipContent({
+					spanName: span.name || 'unknown',
+					status: span.hasError ? 'error' : 'ok',
+					startMs: span.timestamp - traceMetadata.startTime,
+					durationMs: span.durationNano / 1e6,
+					clientX: e.clientX,
+					clientY: e.clientY,
+					spanColor: getSpanColor({ span, isDarkMode }),
+				});
+				updateCursor(canvas, span);
+			} else {
+				setHoveredSpanId(null);
+				setTooltipContent(null);
+				updateCursor(canvas, null);
+			}
+		},
+		[
+			canvasRef,
+			spanRectsRef,
+			traceMetadata.startTime,
+			isDraggingRef,
+			updateCursor,
+			isDarkMode,
+		],
+	);
+
+	const handleHoverMouseLeave = useCallback((): void => {
+		setHoveredSpanId(null);
+		setTooltipContent(null);
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			updateCursor(canvas, null);
+		}
+	}, [canvasRef, updateCursor]);
+
+	const handleClick = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (suppressClickRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				onSpanClick(span.spanId);
+			}
+		},
+		[canvasRef, spanRectsRef, suppressClickRef, onSpanClick],
+	);
+
+	return {
+		hoveredSpanId,
+		setHoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	};
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+export interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface FlamegraphCanvasProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	onSpanClick: (spanId: string) => void;
+	traceMetadata: ITraceMetadata;
+}
+
+export interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}

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

@@ -0,0 +1,355 @@
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import {
+	DASHED_BORDER_LINE_DASH,
+	EVENT_DOT_SIZE_RATIO,
+	LABEL_FONT,
+	LABEL_PADDING_X,
+	MAX_EVENT_DOT_SIZE,
+	MAX_SPAN_BAR_HEIGHT,
+	MIN_EVENT_DOT_SIZE,
+	MIN_SPAN_BAR_HEIGHT,
+	MIN_WIDTH_FOR_NAME,
+	MIN_WIDTH_FOR_NAME_AND_DURATION,
+	SPAN_BAR_HEIGHT_RATIO,
+} from './constants';
+import { SpanRect } from './types';
+
+export function clamp(v: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, v));
+}
+
+/** Create diagonal stripe pattern for selected/hovered span (repeating-linear-gradient -45deg style). */
+function createStripePattern(
+	ctx: CanvasRenderingContext2D,
+	color: string,
+): CanvasPattern | null {
+	const size = 20;
+	const patternCanvas = document.createElement('canvas');
+	patternCanvas.width = size;
+	patternCanvas.height = size;
+	const pCtx = patternCanvas.getContext('2d');
+	if (!pCtx) {
+		return null;
+	}
+
+	// Diagonal stripes at -45deg: 10px transparent, 10px colored (0.04 opacity), repeat
+	pCtx.globalAlpha = 0.04;
+	pCtx.strokeStyle = color;
+	pCtx.lineWidth = 10;
+	pCtx.lineCap = 'butt';
+	for (let i = -size; i < size * 2; i += size) {
+		pCtx.beginPath();
+		pCtx.moveTo(i + size, 0);
+		pCtx.lineTo(i, size);
+		pCtx.stroke();
+	}
+	pCtx.globalAlpha = 1;
+
+	return ctx.createPattern(patternCanvas, 'repeat');
+}
+
+export function findSpanById(
+	spans: FlamegraphSpan[][],
+	spanId: string,
+): { span: FlamegraphSpan; levelIndex: number } | null {
+	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
+		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
+		if (span) {
+			return { span, levelIndex };
+		}
+	}
+	return null;
+}
+
+export interface FlamegraphRowMetrics {
+	ROW_HEIGHT: number;
+	SPAN_BAR_HEIGHT: number;
+	SPAN_BAR_Y_OFFSET: number;
+	EVENT_DOT_SIZE: number;
+}
+
+export function getFlamegraphRowMetrics(
+	rowHeight: number,
+): FlamegraphRowMetrics {
+	const spanBarHeight = clamp(
+		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
+		MIN_SPAN_BAR_HEIGHT,
+		MAX_SPAN_BAR_HEIGHT,
+	);
+	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
+	const eventDotSize = clamp(
+		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
+		MIN_EVENT_DOT_SIZE,
+		MAX_EVENT_DOT_SIZE,
+	);
+
+	return {
+		ROW_HEIGHT: rowHeight,
+		SPAN_BAR_HEIGHT: spanBarHeight,
+		SPAN_BAR_Y_OFFSET: spanBarYOffset,
+		EVENT_DOT_SIZE: eventDotSize,
+	};
+}
+
+interface GetSpanColorArgs {
+	span: FlamegraphSpan;
+	isDarkMode: boolean;
+}
+
+export function getSpanColor(args: GetSpanColorArgs): string {
+	const { span, isDarkMode } = args;
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+
+	if (span.hasError) {
+		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+	}
+
+	return color;
+}
+
+interface DrawEventDotArgs {
+	ctx: CanvasRenderingContext2D;
+	x: number;
+	y: number;
+	isError: boolean;
+	isDarkMode: boolean;
+	eventDotSize: number;
+}
+
+export function drawEventDot(args: DrawEventDotArgs): void {
+	const { ctx, x, y, isError, isDarkMode, eventDotSize } = args;
+
+	ctx.save();
+	ctx.translate(x, y);
+	ctx.rotate(Math.PI / 4);
+
+	if (isError) {
+		ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+	} else {
+		ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+	}
+
+	ctx.lineWidth = 1;
+	const half = eventDotSize / 2;
+	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.restore();
+}
+
+interface DrawSpanBarArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	levelIndex: number;
+	spanRectsArray: SpanRect[];
+	color: string;
+	isDarkMode: boolean;
+	metrics: FlamegraphRowMetrics;
+	selectedSpanId?: string | null;
+	hoveredSpanId?: string | null;
+}
+
+export function drawSpanBar(args: DrawSpanBarArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		levelIndex,
+		spanRectsArray,
+		color,
+		isDarkMode,
+		metrics,
+		selectedSpanId,
+		hoveredSpanId,
+	} = args;
+
+	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
+	const isSelected = selectedSpanId === span.spanId;
+	const isHovered = hoveredSpanId === span.spanId;
+	const isSelectedOrHovered = isSelected || isHovered;
+
+	ctx.beginPath();
+	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
+
+	if (isSelectedOrHovered) {
+		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
+		const pattern = createStripePattern(ctx, color);
+		if (pattern) {
+			ctx.fillStyle = pattern;
+			ctx.fill();
+		}
+		if (isSelected) {
+			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = isSelected ? 2 : 1;
+		ctx.stroke();
+		if (isSelected) {
+			ctx.setLineDash([]);
+		}
+	} else {
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	spanRectsArray.push({
+		span,
+		x,
+		y: spanY,
+		width,
+		height: metrics.SPAN_BAR_HEIGHT,
+		level: levelIndex,
+	});
+
+	span.event?.forEach((event) => {
+		const spanDurationMs = span.durationNano / 1e6;
+		if (spanDurationMs <= 0) {
+			return;
+		}
+
+		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventOffsetPercent =
+			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
+		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
+		const eventX = x + (clampedOffset / 100) * width;
+		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
+
+		drawEventDot({
+			ctx,
+			x: eventX,
+			y: eventY,
+			isError: event.isError,
+			isDarkMode,
+			eventDotSize: metrics.EVENT_DOT_SIZE,
+		});
+	});
+
+	drawSpanLabel({
+		ctx,
+		span,
+		x,
+		y: spanY,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
+	});
+}
+
+export function formatDuration(durationNano: number): string {
+	const durationMs = durationNano / 1e6;
+	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
+	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
+}
+
+interface DrawSpanLabelArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	color: string;
+	isSelectedOrHovered: boolean;
+	isDarkMode: boolean;
+	spanBarHeight: number;
+}
+
+function drawSpanLabel(args: DrawSpanLabelArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight,
+	} = args;
+
+	if (width < MIN_WIDTH_FOR_NAME) {
+		return;
+	}
+
+	const name = span.name;
+
+	ctx.save();
+
+	// Clip text to span bar bounds
+	ctx.beginPath();
+	ctx.rect(x, y, width, spanBarHeight);
+	ctx.clip();
+
+	ctx.font = LABEL_FONT;
+	ctx.fillStyle = isSelectedOrHovered
+		? color
+		: isDarkMode
+		? 'rgba(0, 0, 0, 0.9)'
+		: 'rgba(255, 255, 255, 0.9)';
+	ctx.textBaseline = 'middle';
+
+	const textY = y + spanBarHeight / 2;
+	const leftX = x + LABEL_PADDING_X;
+	const rightX = x + width - LABEL_PADDING_X;
+	const availableWidth = width - LABEL_PADDING_X * 2;
+
+	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
+		const duration = formatDuration(span.durationNano);
+		const durationWidth = ctx.measureText(duration).width;
+		const minGap = 6;
+		const nameSpace = availableWidth - durationWidth - minGap;
+
+		// Duration right-aligned
+		ctx.textAlign = 'right';
+		ctx.fillText(duration, rightX, textY);
+
+		// Name left-aligned, truncated to fit remaining space
+		if (nameSpace > 20) {
+			ctx.textAlign = 'left';
+			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
+		}
+	} else {
+		// Name only, truncated to fit
+		ctx.textAlign = 'left';
+		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
+	}
+
+	ctx.restore();
+}
+
+function truncateText(
+	ctx: CanvasRenderingContext2D,
+	text: string,
+	maxWidth: number,
+): string {
+	const ellipsis = '...';
+	const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+	if (ctx.measureText(text).width <= maxWidth) {
+		return text;
+	}
+
+	let lo = 0;
+	let hi = text.length;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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