fix(dashboards): align the fill opacity slider with its config section

Assisted-by: Claude Opus 5

docs/api/openapi.yml

@@ -3199,6 +3199,53 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAreaChartAppearance:
+      properties:
+        fillMode:
+          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
+        fillOpacity:
+          $ref: '#/components/schemas/DashboardtypesFillOpacity'
+        lineInterpolation:
+          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
+        lineStyle:
+          $ref: '#/components/schemas/DashboardtypesLineStyle'
+        showPoints:
+          type: boolean
+        spanGaps:
+          $ref: '#/components/schemas/DashboardtypesSpanGaps'
+      type: object
+    DashboardtypesAreaChartPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
+      type: object
+    DashboardtypesAreaChartVisualization:
+      properties:
+        fillSpans:
+          type: boolean
+        stack:
+          $ref: '#/components/schemas/DashboardtypesStackMode'
+        timePreference:
+          $ref: '#/components/schemas/DashboardtypesTimePreference'
+      type: object
+    DashboardtypesAreaFillMode:
+      enum:
+      - solid
+      - gradient
+      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -3430,6 +3477,11 @@ components:
       - gradient
       - none
       type: string
+    DashboardtypesFillOpacity:
+      maximum: 1
+      minimum: 0
+      nullable: true
+      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3892,6 +3944,7 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
+          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -3904,6 +3957,7 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -3915,6 +3969,7 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
+      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
@@ -3922,6 +3977,18 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       type: string
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AreaChartPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -4252,6 +4319,12 @@ components:
             are connected.
           type: boolean
       type: object
+    DashboardtypesStackMode:
+      enum:
+      - none
+      - normal
+      - percent
+      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

docs/contributing/query-range.md

@@ -54,93 +54,50 @@ The `fieldContexts` map includes aliases (`tag` -> `attribute`, `spanfield` -> `
 
 ## The Abstraction Stack
 
-The query pipeline has three layers. The generic layer is written one time, in `pkg/querybuilder`. A storage is written one time per signal. The statement builders compose them. Each layer depends only on the layer below it. This layering is intentional and must be preserved.
+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                <- Composes one query into executable SQL
-  ├── AggExprRewriter           <- Rewrites aggregation expressions through the generic layer
-  ├── filter visitor            <- Parses the filter expression and compiles it one term at a time
-  └── querybuilder (generic)    <- Resolution, the filter condition, the column expression
-        └── Storage             <- What one signal's tables can answer about one field key
+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
 ```
 
-### Storage
+### FieldMapper
 
-**Contract:** `qbtypes.Storage` in `pkg/types/querybuildertypes/querybuildertypesv5/qb.go`. One implementation per signal: traces, logs, metrics, audit, rule state history, the resource fingerprint sub-query, and the related-values metadata.
+**Contract:** Given a `TelemetryFieldKey`, return a ClickHouse column expression that yields the value for that field when used in a SELECT.
 
-A storage answers four questions and nothing else:
+**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.
 
-- `Read(key)`: one call for one field key. It returns the bare SQL read, with no alias, no guard, and no cast. It returns the membership test (`Presence`), which binds no args so it can sit inside guards, and its negation in the storage's own form (`Absence`). It returns what a row without the key reads (`Absent`, below). It tells whether the group by, order by, and aggregation cast must leave the native type alone (`KeepType`: time columns, metrics labels). It tells whether the key filters but cannot be selected (`FilterOnly`: the legacy string body). It honors the materialization and the evolutions the key carries.
-- `Fallback(key, operator, value)`: the field keys that could hold a key metadata does not report: column aliases, the type variants of a map read, body paths, and virtual keys that compile to structural predicates (a span search scope, a full-text search over a scope).
-- `Traits()`: the storage's part in the resource fingerprint split, whether it supports body functions, what it does with an unknown key, and which contexts mean "this signal's own record".
-- `Compile`: the one override, for a storage with its own condition language. Logs have the body JSON language. The resource fingerprint has index hints. The related values have a polarity form. Metrics have String-typed labels. Every other storage returns `querybuilder.SharedCondition`.
+**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.
 
-**Principle:** A storage describes its field keys. It never decides a guard, an ambiguity, a warning, or the shape of a fold. Those decisions are derived one time, in the generic layer, from those descriptions.
+### ConditionBuilder
 
-### Absent
+**Contract:** Given a field key, an operator, and a value, produce a valid SQL predicate for a WHERE clause.
 
-`Read` returns the field's `Absent`: what a row without the field reads. It is a property of the read, not of the column. `resource.x::String` reads the empty string for an absent row. The multi-era fold `multiIf(..., NULL)` reads NULL. A table column always reads a real value. Every guard derives from it:
+**Dependency:** Uses FieldMapper for the left-hand side of the condition.
 
-| WhenAbsent | Absent row reads | Positive filter | Raw select | Multi-candidate column | Field keys |
-|---|---|---|---|---|---|
-| `AlwaysPresent` | a real value | no guard | no guard | no branch, ends the candidate list | table columns |
-| `AbsentIsSentinel` | `''`, 0, false, and that is not a value | exists guard | exists guard | presence branch | map attributes, cast JSON paths, string families |
-| `AbsentIsNull` | NULL | no guard | no guard | presence branch | multi-era folds, body JSON paths, numeric families |
-| `AbsentIsValue` | `''`, and that is the keyless contract | no guard | no guard | no presence branch | metrics labels, rule state history labels |
+**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.
 
-### The generic layer
+### AggExprRewriter
 
-`pkg/querybuilder` needs two inputs, made one time per request:
+**Contract:** Given a user-facing aggregation expression like `sum(duration_nano)`, resolve field references within it and produce valid ClickHouse SQL.
 
-- The metadata keys: `keys := metadataStore.GetKeysMulti(...)`, the field keys the metadata store reports for the query's names, as `map[name][]*TelemetryFieldKey`.
-- `q := querybuilder.NewQueryInfo(ctx, orgID, fl, signal, metric, startNs, endNs)`: the time range every read needs, the signal and the queried metric that family admission needs, and the query-path flags (`FamiliesOn`, `BodyJSONOn`). The flags are evaluated one time.
+**Dependency:** Uses FieldMapper to resolve field names within expressions.
 
-The functions, from the outside in:
+**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.
 
-| Function | Does |
-|---|---|
-| `PrepareWhereClause(query, opts)` | The filter visitor. Parses the filter grammar and compiles each term through `RejectsBodyFunction`, `Resolve`, and `Condition`. Returns the WHERE clause, the warnings, and the cost-guard flag. |
-| `NewAggExprRewriter(settings, fullTextColumn, storage, fl, signal)` | Parses an aggregation expression such as `sum(duration_nano)` and resolves each field reference through `ResolveColumn`. |
-| `ResolveColumn(ctx, q, storage, key, target, metadata)` | `Resolve` with `FilterOperatorUnknown`, then `Column`. Every select field, order by, group by, and aggregation argument calls it. |
-| `Resolve(ctx, q, storage, key, operator, value, metadata)` | One requested key to its meanings in this storage (see "A resolved key"). |
-| `Condition(ctx, q, storage, resolved, dropResourceFields, operator, value, sb)` | A resolved key to the conditions of one filter term: the split narrows the fields, and each field compiles through `storage.Compile`. |
-| `Conditions(...)` | `RejectsBodyFunction`, `Resolve`, and `Condition` in one call, for callers outside the visitor: the related-values metadata, the scoped traces predicate resolver, tests. |
-| `Column(ctx, q, storage, resolved, target)` | A resolved key to one bare column expression. The caller aliases. |
-| `RejectsBodyFunction(traits, operator)` | Runs before resolution. A storage without body functions (`has`, `hasAny`, `hasAll`, `hasToken`, `search`) errors. The fingerprint side of a split skips the term, because the main query evaluates it. After resolution, `Condition` errors when `has`, `hasAny`, `hasAll`, or `hasToken` lands on a map-backed key (resource, attribute, scope), before the split can drop it. |
-| `SharedCondition(...)` | The `Compile` of every storage without its own condition language: `LogicalRead`, the shared data-type collision cast, `OperatorCondition`, then the guard rule. |
-| `OperatorCondition(...)` | The operator switch over an already cast read. A storage with its own cast policy composes with it. |
-| `LogicalRead(...)` | The only place family expressions are built. A single-member field reads through its member. A family merges the member reads, current member first: `COALESCE(NULLIF(m1, ''), NULLIF(m2, ''), '')` for strings, `multiIf` with a NULL tail for numbers. It ORs the member presence tests. A row without any member reads what the tail of the merge reads. A member with a value map reads through `TransformRead`. `NOT EXISTS` is the read's `Absence`, the storage's own negated form. |
+### StatementBuilder
 
-### A resolved key
+**Contract:** Given a complete `QueryBuilderQuery`, a time range, and a request type, produces an executable SQL statement.
 
-`Resolve` turns one requested key into a `Resolved` value. It is the only thing the filter condition (`Condition`) and the column expression (`Column`) receive. Compile it with the operator and value it was resolved with. The operand tells the use: a nil value means a select field, group by, order by, aggregation, or presence test.
+**Dependency:** Uses all three abstractions above.
 
-```go
-type Resolved struct {
-	Key          *TelemetryFieldKey // the spelling the request used
-	Fields       []*LogicalField    // its meanings in this storage, one per interpretation
-	FromFallback bool               // the fields came from the storage's Fallback, not from metadata matches
-	Ambiguous    bool               // the matches held several interpretations
-	Skipped      bool               // the storage contributes nothing for this key
-	Warnings     []string           // the warnings to surface: ambiguity, not-found
-}
-```
-
-A `LogicalField` is one meaning: one name, context, and data type, backed by one or more physical members. A family (one field with several spellings) is one logical field with several members, current spelling first. Ambiguity (one name, different fields) is several logical fields.
-
-The resolution order is the same for every storage, in the filter and in every select field, group by, order by, and aggregation:
-
-1. **Own context.** A key under one of the storage's own contexts (`span.x`, `log.x`) matches its own context first, then a column the storage knows under that context. Only when both miss does it look up as if it had no context. `span.http.method` then corrects to the attribute. Strict contexts (`resource.`, `attribute.`, `scope.`, `body.`) are kept as written.
-2. **Matches.** The metadata keys under the key's spellings, grouped into families when the flag is on. Each combination of context and data type is one interpretation.
-3. **Ambiguity.** A filter settles several interpretations by resource over attribute, with a warning. A select field, group by, order by, or aggregation keeps every interpretation in metadata order and folds them, so it shows the value wherever it is.
-4. **Intrinsic column first**, bare keys only. A column every row has leads the list. Metadata can report the column, or the storage's `Fallback` can. When only `Fallback` knows the column, its key carries the data type the column reads as (`querybuilder.ColumnDataType`). A same-named metadata key of a contradicting type then drops, and a time column merges none. When metadata reports the column too, every match reads. A metadata gap degrades to the correct column, never to a corrupt metadata key.
-5. **Fallback.** With no match, the storage's fallback keys for the key. When the storage ignores unknown keys (a side query whose main query owns the error), the key is `Skipped`. Otherwise a key nothing can serve is an error with suggestions. The not-found warning fires only when every fallback key is a guess, that is, none of them is always present.
-
-`Condition` then applies the fingerprint split. `MainOfSplit` drops the resource fields the sub-query serves and keeps fallback keys. `FingerprintOfSplit` keeps resource fields only. `Condition` compiles each field, and the visitor joins the per-field conditions by the operator's polarity. `Column` reads each field through `LogicalRead`. Group by, order by, and aggregation cast the read unless it keeps its type. `Column` then guards by `Absent`, and renders one candidate bare or several as `multiIf(..., NULL)`. A filter-only candidate drops. The error surfaces only when no candidate remains.
+**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
 
-A statement builder must not spell a column or a condition. It calls `ResolveColumn` and the filter visitor. A storage must not decide a guard or an ambiguity. It declares `Absent` and answers the four questions. Skipping layers recreates the per-signal copies the contract removed.
+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.
 
 ---
 
@@ -162,15 +119,14 @@ Only additive/counting aggregations (`count`, `count_distinct`, `sum`, `rate`) d
 
 **Enforcement:** `GetQueriesSupportingZeroDefault` determines which queries can default to zero. The `FormulaEvaluator` consumes this via `canDefaultZero`. Changes to aggregation handling must preserve this distinction.
 
-### Constraint: The exists guard derives from the operator and from the field
+### Constraint: Existence semantics differ for positive vs negative operators
 
-- **Positive operators** (`=`, `>`, `LIKE`, `IN`, etc.) implicitly assert field existence for a field that reads a sentinel when absent. `http.method = GET` on a map attribute means "the field exists AND equals GET".
-- **Negative operators** (`!=`, `NOT IN`, `NOT LIKE`, etc.) never add an existence check. `http.method != GET` includes records where the field doesn't exist at all.
-- A field that reads NULL when absent, and a table column, take no guard on any operator: the comparison already excludes the absent row, or there is no absent row.
+- **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. The operator side is declared in `AddDefaultExistsFilter`. The field side is the `Absent` a storage returns from `Read`.
+**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`. Any new read must declare what an absent row reads. Never add a guard by hand in a storage.
+**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
 
@@ -232,11 +188,11 @@ The `MetadataStore` interface provides runtime field discovery and type resoluti
 
 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. `querybuilder.Resolve` is where the variants settle: it returns every interpretation as a `LogicalField`, marks the result `Ambiguous`, and carries the warning.
+**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 storage's `Read` to generate a simpler column expression. The user should never need to know whether a field is materialized.
+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
 
@@ -247,14 +203,14 @@ Fields inside JSON body columns (`body.response.errors[].code`) need pre-compute
 ## Summary of Inviolable Rules
 
 1. **User-facing types never contain ClickHouse column names or SQL fragments.**
-2. **Field-to-column translation only happens in a Storage (`Read`, `Fallback`).**
+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. **The exists guard derives from `AddDefaultExistsFilter` and `Absent`. Positive operators guard sentinel reads. Negative operators never guard.**
+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 three-layer abstraction stack (Storage -> querybuilder generic layer -> StatementBuilder) must not be bypassed or flattened. A storage describes its field keys. The generic layer decides.**
+12. **The four-layer abstraction stack (FieldMapper -> ConditionBuilder -> AggExprRewriter -> StatementBuilder) must not be bypassed or flattened.**

frontend/orval.config.ts

@@ -28,10 +28,8 @@ export default defineConfig({
 			clean: true,
 			override: {
 				query: {
-					// Leave useQuery/useMutation unset. Orval's verb tiebreak
-					// (`if (verb === GET && isMutation) isQuery = false`) inverts every
-					// operation when both are forced to true: GET becomes a mutation and
-					// the write verbs become queries.
+					useQuery: true,
+					useMutation: true,
 					useInvalidate: true,
 					signal: true,
 					useOperationIdAsQueryKey: false,

frontend/package.json

@@ -78,7 +78,7 @@
     "crypto-js": "4.2.0",
     "d3-hierarchy": "3.1.2",
     "dayjs": "^1.10.7",
-    "dompurify": "3.4.15",
+    "dompurify": "3.4.12",
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
     "history": "4.10.1",
@@ -118,7 +118,7 @@
     "react-redux": "^7.2.2",
     "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
-    "react-router-dom-v5-compat": "6.30.6",
+    "react-router-dom-v5-compat": "6.30.3",
     "react-syntax-highlighter": "15.5.0",
     "react-use": "^17.3.2",
     "react-virtuoso": "4.0.3",
@@ -200,7 +200,7 @@
     "json-schema-to-typescript": "^15.0.4",
     "lint-staged": "^17.0.4",
     "msw": "1.3.2",
-    "orval": "8.22.0",
+    "orval": "8.9.1",
     "oxfmt": "0.54.0",
     "oxlint": "1.69.0",
     "oxlint-tsgolint": "0.23.0",
@@ -209,10 +209,10 @@
     "react-resizable": "3.0.4",
     "redux-mock-store": "1.5.4",
     "sass": "1.97.3",
-    "sharp": "0.35.4",
+    "sharp": "0.35.0",
     "storybook": "10.5.9",
-    "stylelint": "17.15.0",
-    "svgo": "4.1.0",
+    "stylelint": "17.7.0",
+    "svgo": "4.0.2",
     "ts-jest": "29.4.9",
     "typescript-plugin-css-modules": "5.2.0",
     "use-sync-external-store": "1.6.0",
@@ -232,5 +232,26 @@
     "*.(scss|css)": [
       "stylelint"
     ]
+  },
+  "overrides": {
+    "@babel/core@<=7.29.0": ">=7.29.6 <8",
+    "@istanbuljs/load-nyc-config>js-yaml": ">=4.3.1 <5",
+    "cookie@<0.7.0": ">=0.7.1 <1",
+    "dompurify@<=3.4.10": ">=3.4.11 <4",
+    "esbuild@>=0.27.3 <0.28.1": ">=0.28.1 <0.29.0",
+    "js-cookie@<=3.0.5": ">=3.0.7 <4",
+    "js-yaml@>=4.0.0 <=4.1.1": ">=4.2.0 <5",
+    "prismjs@<1.30.0": ">=1.30.0 <2",
+    "react-router@>=6.7.0 <6.30.4": ">=6.30.4 <7",
+    "tmp@<0.2.6": ">=0.2.6 <0.3.0",
+    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2",
+    "brace-expansion@<1.1.18": ">=1.1.18 <2",
+    "brace-expansion@>=2.0.0 <2.1.4": ">=2.1.4 <3",
+    "brace-expansion@>=5.0.0 <5.0.9": ">=5.0.9 <6",
+    "fast-uri@<3.1.5": ">=3.1.5 <4",
+    "immutable@<5.1.8": ">=5.1.8 <6",
+    "js-yaml@>=4.0.0 <4.3.1": ">=4.3.1 <5",
+    "less@<4.5.0": ">=4.5.0 <5",
+    "nanoid@<3.3.18": ">=3.3.18 <4"
   }
 }

frontend/pnpm-workspace.yaml

@@ -13,11 +13,7 @@ overrides:
  '@babel/core@<=7.29.0': '>=7.29.6 <8'
  # via: jest > babel-plugin-istanbul > @istanbuljs/load-nyc-config@1.1.0 (js-yaml ^3.13.1)
  # remove: blocked — 1.1.0 is latest and still depends on js-yaml 3.x
- '@istanbuljs/load-nyc-config>js-yaml': '>=4.3.2 <5'
- # via: msw@1.3.2 (devDep) > @mswjs/interceptors@0.17.10 (@xmldom/xmldom ^0.8.3)
- # remove: upgrade msw to >=2 (drops the 0.8.x interceptor). Do NOT open the cap:
- # 0.9.x is ESM-only and changes the DOMParser error contract
- '@xmldom/xmldom@<0.8.15': '>=0.8.15 <0.9'
+ '@istanbuljs/load-nyc-config>js-yaml': '>=4.3.1 <5'
  # via: babel-plugin-istanbul > test-exclude@6 > minimatch@3.1.5 (^1.1.7); also glob@7
  # remove: blocked — babel-plugin-istanbul pins test-exclude@6, which pins minimatch@3
  brace-expansion@<1.1.18: '>=1.1.18 <2'
@@ -27,39 +23,32 @@ overrides:
  # via: eslint-plugin-sonarjs@4.0.2 (minimatch ^10.2.4) > minimatch@10.2.5 (^5.0.5)
  # remove: blocked — minimatch@10.2.6 (latest) only widens to ^5.0.8, still vulnerable
  'brace-expansion@>=5.0.0 <5.0.9': '>=5.0.9 <6'
- # via: direct devDep @babel/core > @babel/helper-compilation-targets (browserslist ^4.24.0)
- # remove: blocked, the range is open so the floor is what pulls the fix.
- # Also lifts baseline-browser-mapping, which browserslist@4.28.7 floors at ^2.11.20
- browserslist@<4.28.7: '>=4.28.7 <5'
  # via: msw@1.3.2 (devDep) > cookie ^0.4.2
  # remove: upgrade msw to >=2 (ships cookie ^1). Do NOT open the cap: cookie >=1 is
  # ESM-only and breaks msw under jest's CJS sandbox (kills every test suite)
  cookie@<0.7.0: '>=0.7.1 <1'
- # via: @grafana/data@11.6.15 (3.4.0/3.2.4 exact);
+ # via: direct dep dompurify 3.4.0; @grafana/data@11.6.15 (3.4.0/3.2.4 exact);
  #      @monaco-editor/react > monaco-editor@0.55.1 (3.2.7 exact)
- # remove: blocked. The direct dep is already on 3.4.15, but @grafana/data
- #         (latest 13.1.0) and monaco-editor (latest 0.55.1) still pin vulnerable versions
- dompurify@<=3.4.12: '>=3.4.13 <4'
- # via: rolldown-vite@7.3.1 (esbuild ^0.27.0); ts-jest@29.4.9 (~0.27.4)
+ # remove: bump direct dep to 3.4.11; @grafana/data (latest 13.1.0) and
+ #         monaco-editor (latest 0.55.1) still pin vulnerable versions — blocked
+ dompurify@<=3.4.10: '>=3.4.11 <4'
+ # via: rolldown-vite@7.3.1 (esbuild ^0.27.0); orval@8.9.1 (^0.27.4); ts-jest@29.4.9 (~0.27.4)
  # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
  #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
  esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
  # via: @commitlint/cli > @commitlint/config-validator > ajv@8 (fast-uri ^3.0.1)
- # remove: blocked — ajv@8 caps fast-uri at ^3, and only 3.1.6 carries the fix
- fast-uri@<3.1.6: '>=3.1.6 <4'
- # via: direct dep posthog-js@1.298.0 (fflate ^0.4.8)
- # remove: blocked, posthog-js 1.430.2 (latest) is still on ^0.4.8
- fflate@<0.4.9: '>=0.4.9 <0.5'
+ # remove: blocked — ajv@8 caps fast-uri at ^3, and only 3.1.5 carries the fix
+ fast-uri@<3.1.5: '>=3.1.5 <4'
  # via: direct devDep sass@1.97.3 (immutable ^5.0.2)
  # remove: blocked — plain sass bumps stay within ^5, so the floor is what pulls 5.1.8
  immutable@<5.1.8: '>=5.1.8 <6'
  # via: react-use@17.5.1 (direct, js-cookie ^2.2.1); @grafana/data > react-use@17.6.0
  # remove: bump react-use to >=17.6.1 (js-cookie ^3); @grafana/data side blocked
  js-cookie@<=3.0.5: '>=3.0.7 <4'
- # via: json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0);
- #      @commitlint/cli > @commitlint/load > cosmiconfig@9 (^4.1.0)
- # remove: blocked, both consumers cap js-yaml at ^4 and only 4.3.2 carries the fix
- 'js-yaml@>=4.0.0 <4.3.2': '>=4.3.2 <5'
+ # via: @orval/core@8.9.1 (devDep, js-yaml 4.1.1 EXACT pin — not deletable);
+ #      json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0)
+ # remove: upgrade orval to >=8.20.0 (drops js-yaml dependency entirely)
+ 'js-yaml@>=4.0.0 <4.3.1': '>=4.3.1 <5'
  # via: typescript-plugin-css-modules@5.2.0 (less ^4.2.0) > less@4.4.0 (image-size ~0.5.0)
  # remove: bump typescript-plugin-css-modules once it floors less itself; image-size has
  #         no patched release at all, so dropping the dep is the only fix — less@4.5.0 did
@@ -70,15 +59,10 @@ overrides:
  # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
  # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
  prismjs@<1.30.0: '>=1.30.0 <2'
- # via: typescript-plugin-css-modules@5.2.0 > postcss-modules-local-by-default@4.2.0
- #      (postcss-selector-parser ^7.0.0)
- # remove: blocked, 4.2.0 is latest and the range is open, so the floor is what pulls the fix
- postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'
- # via: @signozhq/ui > nuqs@2 (react-router ^6.4.0 || ^7)
- # remove: blocked. GHSA-wrjc-x8rr-h8h6 and the deserializeErrors advisory are patched
- # only in 7.18.0. Do NOT open the cap: react-router >=7 requires React 19 and breaks
- # the app-wide CompatRouter, so those two moderates stay until the app moves to React 19
- react-router@>=6.7.0 <6.30.6: '>=6.30.6 <7'
+ # via: direct dep react-router-dom-v5-compat@6.30.3 (react-router 6.30.3 exact)
+ # remove: bump react-router-dom-v5-compat to 6.30.4. Do NOT open the cap:
+ # react-router >=7 requires React 19 and breaks the app-wide CompatRouter
+ react-router@>=6.7.0 <6.30.4: '>=6.30.4 <7'
  # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
  # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
  tmp@<0.2.6: '>=0.2.6 <0.3.0'

frontend/scripts/post-types-generation.sh

@@ -14,6 +14,15 @@ done
 
 echo "\n✅ Tag files renamed to index.ts"
 
+# Format generated files
+echo "\n\n---\nRunning prettier...\n"
+if ! pnpm prettify src/api/generated; then
+  echo "Formatting failed!"
+  exit 1
+fi
+echo "\n✅ Formatting successful"
+
+
 # Fix linting issues
 echo "\n\n---\nRunning lint...\n"
 if ! pnpm lint:generated; then
@@ -23,15 +32,6 @@ fi
 echo "\n✅ Lint check successful"
 
 
-# Format generated files (must run after lint: oxlint --fix writes unformatted autofixes)
-echo "\n\n---\nRunning prettier...\n"
-if ! pnpm prettify src/api/generated; then
-  echo "Formatting failed!"
-  exit 1
-fi
-echo "\n✅ Formatting successful"
-
-
 # Check for type errors
 echo "\n\n---\nChecking for type errors...\n"
 if ! tsc --noEmit; then

frontend/src/api/generated/services/ai-observability/index.ts

@@ -25,26 +25,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns the field keys the AI observability explorer can filter on, including the computed per-trace aggregates
  * @summary Get AI observability field keys
@@ -131,7 +111,7 @@ export function useGetAIObservabilityFieldsKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -236,7 +216,7 @@ export function useGetAIObservabilityFieldsValues<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -19,26 +19,6 @@ import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns alerts for the organization
  * @summary Get alerts
@@ -97,7 +77,7 @@ export function useGetAlerts<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -32,26 +32,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all auth domains
  * @summary List all auth domains
@@ -118,7 +98,7 @@ export function useListAuthDomains<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -343,7 +323,7 @@ export const getGetAuthDomainQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getAuthDomain>>,
@@ -380,7 +360,7 @@ export function useGetAuthDomain<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -43,26 +43,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all notification channels for the organization
  * @summary List notification channels
@@ -129,7 +109,7 @@ export function useListChannels<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -354,7 +334,7 @@ export const getGetChannelByIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getChannelByID>>,
@@ -391,7 +371,7 @@ export function useGetChannelByID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -758,7 +738,7 @@ export function useListNotificationChannels<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -987,7 +967,7 @@ export const getGetNotificationChannelQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getNotificationChannel>>,
@@ -1025,7 +1005,7 @@ export function useGetNotificationChannel<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -51,26 +51,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * [Deprecated] This endpoint is called by the deployed agent to check in
  * @deprecated
@@ -219,7 +199,7 @@ export const getListAccountsQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: cloudProvider !== null && cloudProvider !== undefined,
+		enabled: !!cloudProvider,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof listAccounts>>,
@@ -256,7 +236,7 @@ export function useListAccounts<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -500,11 +480,7 @@ export const getGetAccountQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled:
-			cloudProvider !== null &&
-			cloudProvider !== undefined &&
-			id !== null &&
-			id !== undefined,
+		enabled: !!(cloudProvider && id),
 		...queryOptions,
 	} as UseQueryOptions<Awaited<ReturnType<typeof getAccount>>, TError, TData> & {
 		queryKey: QueryKey;
@@ -539,7 +515,7 @@ export function useGetAccount<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -707,11 +683,7 @@ export const getListAccountServicesMetadataQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled:
-			cloudProvider !== null &&
-			cloudProvider !== undefined &&
-			id !== null &&
-			id !== undefined,
+		enabled: !!(cloudProvider && id),
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof listAccountServicesMetadata>>,
@@ -752,7 +724,7 @@ export function useListAccountServicesMetadata<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -823,13 +795,7 @@ export const getGetAccountServiceQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled:
-			cloudProvider !== null &&
-			cloudProvider !== undefined &&
-			id !== null &&
-			id !== undefined &&
-			serviceId !== null &&
-			serviceId !== undefined,
+		enabled: !!(cloudProvider && id && serviceId),
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getAccountService>>,
@@ -869,7 +835,7 @@ export function useGetAccountService<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1133,7 +1099,7 @@ export const getGetConnectionCredentialsQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: cloudProvider !== null && cloudProvider !== undefined,
+		enabled: !!cloudProvider,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getConnectionCredentials>>,
@@ -1174,7 +1140,7 @@ export function useGetConnectionCredentials<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1239,7 +1205,7 @@ export const getListServicesMetadataQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: cloudProvider !== null && cloudProvider !== undefined,
+		enabled: !!cloudProvider,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof listServicesMetadata>>,
@@ -1279,7 +1245,7 @@ export function useListServicesMetadata<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1347,11 +1313,7 @@ export const getGetServiceQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled:
-			cloudProvider !== null &&
-			cloudProvider !== undefined &&
-			serviceId !== null &&
-			serviceId !== undefined,
+		enabled: !!(cloudProvider && serviceId),
 		...queryOptions,
 	} as UseQueryOptions<Awaited<ReturnType<typeof getService>>, TError, TData> & {
 		queryKey: QueryKey;
@@ -1389,7 +1351,7 @@ export function useGetService<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -72,26 +72,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
  * @summary Delete public dashboard
@@ -218,7 +198,7 @@ export const getGetPublicDashboardQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getPublicDashboard>>,
@@ -255,7 +235,7 @@ export function useGetPublicDashboard<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -520,7 +500,7 @@ export const getGetPublicDashboardDataQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getPublicDashboardData>>,
@@ -558,7 +538,7 @@ export function useGetPublicDashboardData<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -625,7 +605,7 @@ export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined && idx !== null && idx !== undefined,
+		enabled: !!(id && idx),
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
@@ -666,7 +646,7 @@ export function useGetPublicDashboardWidgetQueryRange<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -751,7 +731,7 @@ export function useListDashboardViews<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1111,7 +1091,7 @@ export function useListDashboardsV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1337,7 +1317,7 @@ export const getGetDashboardV2QueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getDashboardV2>>,
@@ -1374,7 +1354,7 @@ export function useGetDashboardV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1953,7 +1933,7 @@ export const getGetSystemDashboardQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: name !== null && name !== undefined,
+		enabled: !!name,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getSystemDashboard>>,
@@ -1990,7 +1970,7 @@ export function useGetSystemDashboard<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -2055,7 +2035,7 @@ export const getGetPublicDashboardDataV2QueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getPublicDashboardDataV2>>,
@@ -2093,7 +2073,7 @@ export function useGetPublicDashboardDataV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -2167,7 +2147,7 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined && key !== null && key !== undefined,
+		enabled: !!(id && key),
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -2210,7 +2190,7 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -2315,7 +2295,7 @@ export function useListDashboardsForUserV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -32,26 +32,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all planned maintenance / downtime schedules
  * @summary List downtime schedules
@@ -131,7 +111,7 @@ export function useListDowntimeSchedules<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -360,7 +340,7 @@ export const getGetDowntimeScheduleByIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
@@ -398,7 +378,7 @@ export function useGetDowntimeScheduleByID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -19,26 +19,6 @@ import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns the supported features and their details
  * @summary Get features
@@ -105,7 +85,7 @@ export function useGetFeatures<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -25,26 +25,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns field keys
  * @summary Get field keys
@@ -121,7 +101,7 @@ export function useGetFieldsKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -216,7 +196,7 @@ export function useGetFieldsValues<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -48,26 +48,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns the ingestion keys for a workspace
  * @summary Get ingestion keys for workspace
@@ -149,7 +129,7 @@ export function useGetIngestionKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -376,7 +356,7 @@ export const getGetIngestionKeyQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: keyId !== null && keyId !== undefined,
+		enabled: !!keyId,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionKey>>,
@@ -413,7 +393,7 @@ export function useGetIngestionKey<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -577,7 +557,7 @@ export const getGetIngestionKeyLimitsQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: keyId !== null && keyId !== undefined,
+		enabled: !!keyId,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionKeyLimits>>,
@@ -614,7 +594,7 @@ export function useGetIngestionKeyLimits<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1001,7 +981,7 @@ export function useSearchIngestionKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1230,7 +1210,7 @@ export const getGetIngestionLimitQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: limitId !== null && limitId !== undefined,
+		enabled: !!limitId,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionLimit>>,
@@ -1267,7 +1247,7 @@ export function useGetIngestionLimit<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -22,26 +22,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns global config
  * @summary Get global config
@@ -108,7 +88,7 @@ export function useGetGlobalConfig<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -26,26 +26,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * @summary Health check
  */
@@ -103,7 +83,7 @@ export function useHealthz<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -176,7 +156,7 @@ export function useLivez<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -246,7 +226,7 @@ export function useReadyz<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -48,26 +48,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Checks whether the metrics and attributes required to power the infra-monitoring section selected by the 'type' query parameter (hosts, processes, pods, nodes, deployments, daemonsets, statefulsets, jobs, namespaces, clusters, volumes) are being received. For each collector receiver or processor that contributes required metrics or attributes, lists what is present and what is missing, with a prebuilt user-facing message and a docs link per missing component. Default-enabled metrics are those expected as soon as the receiver is configured; optional metrics require 'enabled: true' in receiver config. 'ready' is true only when every missing list is empty.
  * @summary Run Infra Monitoring Setup Checks
@@ -136,7 +116,7 @@ export function useGetChecks<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -32,26 +32,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint validates the license key with the upstream server and activates the license for the organization.
  * @deprecated
@@ -281,7 +261,7 @@ export function useListLicenses<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -504,7 +484,7 @@ export const getGetLicenseQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<Awaited<ReturnType<typeof getLicense>>, TError, TData> & {
 		queryKey: QueryKey;
@@ -539,7 +519,7 @@ export function useGetLicense<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -703,7 +683,7 @@ export function useGetActiveLicense<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -31,26 +31,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Returns all LLM pricing rules for the authenticated org, with pagination.
  * @summary List pricing rules
@@ -130,7 +110,7 @@ export function useListLLMPricingRules<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -359,7 +339,7 @@ export const getGetLLMPricingRuleQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getLLMPricingRule>>,
@@ -396,7 +376,7 @@ export function useGetLLMPricingRule<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -481,7 +461,7 @@ export function useListUnmappedLLMModels<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -28,26 +28,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoints allows complex query exporting raw data for traces and logs
  * @summary Export raw data
@@ -217,7 +197,7 @@ export function useListPromotedAndIndexedPaths<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -60,26 +60,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Returns active metric volume-control (label reduction) rules.
  * @summary List metric reduction rules
@@ -163,7 +143,7 @@ export function useListMetricReductionRules<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -392,7 +372,7 @@ export const getGetMetricReductionRuleByIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getMetricReductionRuleByID>>,
@@ -433,7 +413,7 @@ export function useGetMetricReductionRuleByID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -704,7 +684,7 @@ export function useGetMetricReductionRuleStats<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -790,7 +770,7 @@ export function useGetMetricReductionRuleTimeseries<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -884,7 +864,7 @@ export function useListMetrics<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -979,7 +959,7 @@ export function useGetMetricAlerts<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1077,7 +1057,7 @@ export function useGetMetricAttributes<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1175,7 +1155,7 @@ export function useGetMetricDashboards<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1273,7 +1253,7 @@ export function useGetMetricHighlights<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1454,7 +1434,7 @@ export function useGetMetricMetadata<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1625,7 +1605,7 @@ export function useGetMetricsOnboardingStatus<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1888,7 +1868,7 @@ export function useGetMetricDashboardsV2<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -26,26 +26,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns the organization I belong to
  * @summary Get my organization
@@ -112,7 +92,7 @@ export function useGetMyOrganization<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -33,26 +33,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all org preferences
  * @summary List org preferences
@@ -119,7 +99,7 @@ export function useListOrgPreferences<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -183,7 +163,7 @@ export const getGetOrgPreferenceQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: name !== null && name !== undefined,
+		enabled: !!name,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getOrgPreference>>,
@@ -220,7 +200,7 @@ export function useGetOrgPreference<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -405,7 +385,7 @@ export function useListUserPreferences<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -469,7 +449,7 @@ export const getGetUserPreferenceQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: name !== null && name !== undefined,
+		enabled: !!name,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getUserPreference>>,
@@ -506,7 +486,7 @@ export function useGetUserPreference<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -30,26 +30,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Prometheus-compatible endpoint: the request and response contract is the upstream Prometheus HTTP API (https://prometheus.io/docs/prometheus/latest/querying/api/). Parameters are accepted as URL query parameters or a form-encoded body, on GET and POST alike.
  * @summary Prometheus instant query
@@ -128,7 +108,7 @@ export function usePrometheusQuery<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -313,7 +293,7 @@ export function usePrometheusQueryRange<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

frontend/src/api/generated/services/quick-filter/index.ts

@@ -29,26 +29,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Returns the org's quick filters for every source, each filter as a telemetry field key.
  * @summary List quick filters
@@ -115,7 +95,7 @@ export function useListQuickFilters<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -179,7 +159,7 @@ export const getGetQuickFiltersQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: source !== null && source !== undefined,
+		enabled: !!source,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getQuickFilters>>,
@@ -216,7 +196,7 @@ export function useGetQuickFilters<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -32,26 +32,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all roles
  * @summary List roles
@@ -110,7 +90,7 @@ export function useListRoles<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -329,7 +309,7 @@ export const getGetRoleQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<Awaited<ReturnType<typeof getRole>>, TError, TData> & {
 		queryKey: QueryKey;
@@ -360,7 +340,7 @@ export function useGetRole<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -32,26 +32,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all route policies for the organization
  * @summary List route policies
@@ -118,7 +98,7 @@ export function useGetAllRoutePolicies<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -345,7 +325,7 @@ export const getGetRoutePolicyByIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRoutePolicyByID>>,
@@ -382,7 +362,7 @@ export function useGetRoutePolicyByID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -52,26 +52,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint lists all alert rules with their current evaluation state
  * @summary List alert rules
@@ -130,7 +110,7 @@ export function useListRules<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -353,7 +333,7 @@ export const getGetRuleByIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleByID>>,
@@ -390,7 +370,7 @@ export function useGetRuleByID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -660,7 +640,7 @@ export const getGetRuleHistoryFilterKeysQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryFilterKeys>>,
@@ -703,7 +683,7 @@ export function useGetRuleHistoryFilterKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -777,7 +757,7 @@ export const getGetRuleHistoryFilterValuesQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryFilterValues>>,
@@ -820,7 +800,7 @@ export function useGetRuleHistoryFilterValues<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -894,7 +874,7 @@ export const getGetRuleHistoryOverallStatusQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryOverallStatus>>,
@@ -937,7 +917,7 @@ export function useGetRuleHistoryOverallStatus<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1010,7 +990,7 @@ export const getGetRuleHistoryStatsQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryStats>>,
@@ -1052,7 +1032,7 @@ export function useGetRuleHistoryStats<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1125,7 +1105,7 @@ export const getGetRuleHistoryTimelineQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryTimeline>>,
@@ -1168,7 +1148,7 @@ export function useGetRuleHistoryTimeline<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1242,7 +1222,7 @@ export const getGetRuleHistoryTopContributorsQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRuleHistoryTopContributors>>,
@@ -1285,7 +1265,7 @@ export function useGetRuleHistoryTopContributors<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

frontend/src/api/generated/services/saved-view/index.ts

@@ -33,26 +33,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Returns saved views, optionally filtered by source and name.
  * @summary List saved views
@@ -129,7 +109,7 @@ export function useListSavedViews<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -353,7 +333,7 @@ export const getGetSavedViewQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getSavedView>>,
@@ -390,7 +370,7 @@ export function useGetSavedView<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -47,26 +47,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint assigns a role to a service account
  * @summary Create service account role
@@ -277,7 +257,7 @@ export const getGetServiceAccountRoleQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getServiceAccountRole>>,
@@ -314,7 +294,7 @@ export function useGetServiceAccountRole<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -399,7 +379,7 @@ export function useListServiceAccounts<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -627,7 +607,7 @@ export const getGetServiceAccountQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getServiceAccount>>,
@@ -664,7 +644,7 @@ export function useGetServiceAccount<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -829,7 +809,7 @@ export const getListServiceAccountKeysQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof listServiceAccountKeys>>,
@@ -867,7 +847,7 @@ export function useListServiceAccountKeys<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1212,7 +1192,7 @@ export const getGetServiceAccountRolesQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getServiceAccountRoles>>,
@@ -1250,7 +1230,7 @@ export function useGetServiceAccountRoles<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1335,7 +1315,7 @@ export function useGetMyServiceAccount<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -34,26 +34,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint creates a session for a user using google callback
  * @summary Create session by google callback
@@ -123,7 +103,7 @@ export function useCreateSessionByGoogleCallback<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -210,7 +190,7 @@ export function useCreateSessionByOIDCCallback<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -484,7 +464,7 @@ export function useGetSessionContext<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -3220,30 +3220,33 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
-export type CloudintegrationtypesAgentReportDTODataAnyOf = {
+export type CloudintegrationtypesAgentReportDTOAnyOfDataAnyOf = {
 	[key: string]: unknown;
 };
 
 /**
  * @nullable
  */
-export type CloudintegrationtypesAgentReportDTOData =
-	CloudintegrationtypesAgentReportDTODataAnyOf | null;
+export type CloudintegrationtypesAgentReportDTOAnyOfData =
+	CloudintegrationtypesAgentReportDTOAnyOfDataAnyOf | null;
 
-/**
- * @nullable
- */
-export type CloudintegrationtypesAgentReportDTO = {
+export type CloudintegrationtypesAgentReportDTOAnyOf = {
 	/**
 	 * @type object,null
 	 */
-	data: CloudintegrationtypesAgentReportDTOData;
+	data: CloudintegrationtypesAgentReportDTOAnyOfData;
 	/**
 	 * @type integer
 	 * @format int64
 	 */
 	timestampMillis: number;
-} | null;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesAgentReportDTO =
+	CloudintegrationtypesAgentReportDTOAnyOf | null;
 
 export interface CloudintegrationtypesAzureAccountConfigDTO {
 	/**
@@ -3442,10 +3445,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cloudstorage = 'cloudstorage',
 	cloudsql_mysql = 'cloudsql_mysql',
 }
-/**
- * @nullable
- */
-export type CloudintegrationtypesCloudIntegrationServiceDTO = {
+export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
 	 * @type string
 	 */
@@ -3466,7 +3466,13 @@ export type CloudintegrationtypesCloudIntegrationServiceDTO = {
 	 * @format date-time
 	 */
 	updatedAt?: string;
-} | null;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesCloudIntegrationServiceDTO =
+	CloudintegrationtypesCloudIntegrationServiceDTOAnyOf | null;
 
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
@@ -3620,16 +3626,19 @@ export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
 	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
 }
 
-/**
- * @nullable
- */
-export type CloudintegrationtypesIntegrationConfigDTO = {
+export type CloudintegrationtypesIntegrationConfigDTOAnyOf = {
 	/**
 	 * @type array
 	 */
 	enabled_regions: string[];
 	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
-} | null;
+};
+
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesIntegrationConfigDTO =
+	CloudintegrationtypesIntegrationConfigDTOAnyOf | null;
 
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
@@ -3998,6 +4007,52 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
+export enum DashboardtypesAreaFillModeDTO {
+	solid = 'solid',
+	gradient = 'gradient',
+}
+/**
+ * @minimum 0
+ * @maximum 1
+ * @nullable
+ */
+export type DashboardtypesFillOpacityDTO = number | null;
+
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
+export interface DashboardtypesAreaChartAppearanceDTO {
+	fillMode?: DashboardtypesAreaFillModeDTO;
+	fillOpacity?: DashboardtypesFillOpacityDTO | null;
+	lineInterpolation?: DashboardtypesLineInterpolationDTO;
+	lineStyle?: DashboardtypesLineStyleDTO;
+	/**
+	 * @type boolean
+	 */
+	showPoints?: boolean;
+	spanGaps?: DashboardtypesSpanGapsDTO;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -4075,6 +4130,11 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	value: number;
 }
 
+export enum DashboardtypesStackModeDTO {
+	none = 'none',
+	normal = 'normal',
+	percent = 'percent',
+}
 export enum DashboardtypesTimePreferenceDTO {
 	global_time = 'global_time',
 	last_5_min = 'last_5_min',
@@ -4087,6 +4147,27 @@ export enum DashboardtypesTimePreferenceDTO {
 	last_1_week = 'last_1_week',
 	last_1_month = 'last_1_month',
 }
+export interface DashboardtypesAreaChartVisualizationDTO {
+	/**
+	 * @type boolean
+	 */
+	fillSpans?: boolean;
+	stack?: DashboardtypesStackModeDTO;
+	timePreference?: DashboardtypesTimePreferenceDTO;
+}
+
+export interface DashboardtypesAreaChartPanelSpecDTO {
+	axes?: DashboardtypesAxesDTO;
+	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
+	formatting?: DashboardtypesPanelFormattingDTO;
+	legend?: DashboardtypesLegendDTO;
+	/**
+	 * @type array,null
+	 */
+	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
+	visualization?: DashboardtypesAreaChartVisualizationDTO;
+}
+
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -4784,29 +4865,6 @@ export enum DashboardtypesFillModeDTO {
 	gradient = 'gradient',
 	none = 'none',
 }
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
 export interface DashboardtypesTimeSeriesChartAppearanceDTO {
 	fillMode?: DashboardtypesFillModeDTO;
 	lineInterpolation?: DashboardtypesLineInterpolationDTO;
@@ -4859,6 +4917,18 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBarChartPanelSpecDTO;
 }
 
+export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind {
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
+}
+export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO {
+	/**
+	 * @enum signoz/AreaChartPanel
+	 * @type string
+	 */
+	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind;
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTOKind {
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 }
@@ -5064,6 +5134,7 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
@@ -5988,6 +6059,7 @@ export interface DashboardtypesListableDashboardViewDTO {
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
+	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 	'signoz/PieChartPanel' = 'signoz/PieChartPanel',
 	'signoz/TablePanel' = 'signoz/TablePanel',
@@ -9450,10 +9522,7 @@ export interface TelemetrystoretypesMergeTreeReadDTO {
 	table: string;
 }
 
-/**
- * @nullable
- */
-export type TelemetrystoretypesGranulesDTO = {
+export type TelemetrystoretypesGranulesDTOAnyOf = {
 	/**
 	 * @type integer
 	 * @format int64
@@ -9473,7 +9542,13 @@ export type TelemetrystoretypesGranulesDTO = {
 	 * @format int64
 	 */
 	skipped: number;
-} | null;
+};
+
+/**
+ * @nullable
+ */
+export type TelemetrystoretypesGranulesDTO =
+	TelemetrystoretypesGranulesDTOAnyOf | null;
 
 export interface Querybuildertypesv5PreviewStatementDTO {
 	/**
@@ -10671,10 +10746,7 @@ export interface SpantypesGettableFlamegraphTraceDTO {
 	startTimestampMillis: number;
 }
 
-/**
- * @nullable
- */
-export type SpantypesSpanMapperGroupConditionDTO = {
+export type SpantypesSpanMapperGroupConditionDTOAnyOf = {
 	/**
 	 * @type array,null
 	 */
@@ -10683,7 +10755,13 @@ export type SpantypesSpanMapperGroupConditionDTO = {
 	 * @type array,null
 	 */
 	resource: string[] | null;
-} | null;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperGroupConditionDTO =
+	SpantypesSpanMapperGroupConditionDTOAnyOf | null;
 
 export interface SpantypesSpanMapperGroupDTO {
 	condition: SpantypesSpanMapperGroupConditionDTO | null;

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

@@ -41,26 +41,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * Returns all span attribute mapping groups for the authenticated org.
  * @summary List span attribute mapping groups
@@ -140,7 +120,7 @@ export function useListSpanMapperGroups<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -469,7 +449,7 @@ export const getListSpanMappersQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: groupId !== null && groupId !== undefined,
+		enabled: !!groupId,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof listSpanMappers>>,
@@ -506,7 +486,7 @@ export function useListSpanMappers<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -19,26 +19,6 @@ import type { GetStats200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint returns the collected stats for the organization
  * @summary Get stats
@@ -97,7 +77,7 @@ export function useGetStats<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -28,26 +28,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint gets the organization's subscription along with its usage and billing details.
  * @summary Get the subscription.
@@ -114,7 +94,7 @@ export function useGetSubscription<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -50,26 +50,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint is deprecated and always fails. Use GET /api/v2/users/me instead.
  * @deprecated
@@ -138,7 +118,7 @@ export function useGetMyUserDeprecated<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -452,7 +432,7 @@ export const getGetUsersByRoleIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getUsersByRoleID>>,
@@ -489,7 +469,7 @@ export function useGetUsersByRoleID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -713,7 +693,7 @@ export const getGetUserRoleQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getUserRole>>,
@@ -750,7 +730,7 @@ export function useGetUserRole<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -827,7 +807,7 @@ export function useListUsers<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1046,7 +1026,7 @@ export const getGetUserQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<Awaited<ReturnType<typeof getUser>>, TError, TData> & {
 		queryKey: QueryKey;
@@ -1077,7 +1057,7 @@ export function useGetUser<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1241,7 +1221,7 @@ export const getGetResetPasswordTokenQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getResetPasswordToken>>,
@@ -1278,7 +1258,7 @@ export function useGetResetPasswordToken<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1422,7 +1402,7 @@ export const getGetRolesByUserIDQueryOptions = <
 	return {
 		queryKey,
 		queryFn,
-		enabled: id !== null && id !== undefined,
+		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
 		Awaited<ReturnType<typeof getRolesByUserID>>,
@@ -1459,7 +1439,7 @@ export function useGetRolesByUserID<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**
@@ -1536,7 +1516,7 @@ export function useGetMyUser<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

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

@@ -27,26 +27,6 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
-const withQueryKey = <T extends object, K>(
-	query: T,
-	queryKey: K,
-): T & { queryKey: K } => {
-	const result = { queryKey } as T & { queryKey: K };
-	for (const key of Object.keys(query)) {
-		// The explicit queryKey always wins, matching the previous
-		// `{ ...query, queryKey }` spread where it was set last.
-		if (key === 'queryKey') {
-			continue;
-		}
-		Object.defineProperty(result, key, {
-			enumerable: true,
-			configurable: true,
-			get: () => (query as Record<string, unknown>)[key],
-		});
-	}
-	return result;
-};
-
 /**
  * This endpoint gets the host info from zeus.
  * @summary Get host info from Zeus.
@@ -105,7 +85,7 @@ export function useGetHosts<
 		queryKey: QueryKey;
 	};
 
-	return withQueryKey(query, queryOptions.queryKey);
+	return { ...query, queryKey: queryOptions.queryKey };
 }
 
 /**

frontend/src/constants/panelTypes.ts

@@ -29,6 +29,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
+		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.

frontend/src/constants/queryBuilder.ts

@@ -374,6 +374,7 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
+	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	TEXT = 'text',

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -131,7 +131,7 @@ export function AboutSigNozQuestions({
 
 						<AntdInput.TextArea
 							className="discover-signoz-input"
-							placeholder="e.g., I asked ChatGPT for Datadog alternatives, searched Google for “OpenTelemetry tools,” saw a Reddit or LinkedIn post, or heard about it from a colleague."
+							placeholder={`e.g., googling "datadog alternative", a post on r/devops, from a friend/colleague, a LinkedIn post, ChatGPT, etc.`}
 							value={discoverSignoz}
 							autoFocus
 							rows={4}

frontend/src/container/OnboardingQuestionaire/__tests__/OnboardingQuestionaire.test.tsx

@@ -204,12 +204,10 @@ describe('OnboardingQuestionaire Component', () => {
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await expect(
-				screen.findByPlaceholderText(/e\.g\., I asked ChatGPT/i, {}),
+				screen.findByPlaceholderText(/e\.g\., googling/i, {}),
 			).resolves.toBeInTheDocument();
 
-			const discoverInput = screen.getByPlaceholderText(
-				/e\.g\., I asked ChatGPT/i,
-			);
+			const discoverInput = screen.getByPlaceholderText(/e\.g\., googling/i);
 			await user.type(discoverInput, 'Found via Google search');
 
 			const interestCheckbox = screen.getByLabelText(
@@ -258,11 +256,11 @@ describe('OnboardingQuestionaire Component', () => {
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await expect(
-				screen.findByPlaceholderText(/e\.g\., I asked ChatGPT/i, {}),
+				screen.findByPlaceholderText(/e\.g\., googling/i, {}),
 			).resolves.toBeInTheDocument();
 
 			await user.type(
-				screen.getByPlaceholderText(/e\.g\., I asked ChatGPT/i),
+				screen.getByPlaceholderText(/e\.g\., googling/i),
 				'Found via Google',
 			);
 			await user.click(screen.getByLabelText(/lowering observability costs/i));
@@ -299,7 +297,7 @@ describe('OnboardingQuestionaire Component', () => {
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await user.type(
-				await screen.findByPlaceholderText(/e\.g\., I asked ChatGPT/i),
+				await screen.findByPlaceholderText(/e\.g\., googling/i),
 				'Found via Google',
 			);
 			await user.click(screen.getByLabelText(/lowering observability costs/i));
@@ -331,11 +329,11 @@ describe('OnboardingQuestionaire Component', () => {
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await expect(
-				screen.findByPlaceholderText(/e\.g\., I asked ChatGPT/i, {}),
+				screen.findByPlaceholderText(/e\.g\., googling/i, {}),
 			).resolves.toBeInTheDocument();
 
 			await user.type(
-				screen.getByPlaceholderText(/e\.g\., I asked ChatGPT/i),
+				screen.getByPlaceholderText(/e\.g\., googling/i),
 				'Found via Google',
 			);
 			await user.click(screen.getByLabelText(/lowering observability costs/i));

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -27,6 +27,7 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		LIST: false,
 		TRACE: false,
 		BAR: true,
+		AREA: true,
 		PIE: false,
 		HISTOGRAM: false,
 		TEXT: false,

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -19,5 +19,7 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
+	// Dashboards v2 renders this kind; the fallback only keeps the lookup exhaustive.
+	[PANEL_TYPES.AREA]: TimeSeriesPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 };

frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -1,57 +0,0 @@
-@use '../../../../styles/scrollbar' as *;
-
-.container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	// Let the flex children shrink below their content height so the series list
-	// scrolls within the capped legend height instead of overflowing the wrapper
-	// (the default min-height:auto would block the shrink).
-	min-height: 0;
-}
-
-.scroller {
-	// flex:1 + min-height:0 pins the scroller to the space left after the
-	// toolbar instead of growing to fit every row.
-	flex: 1;
-	min-height: 0;
-	height: 100%;
-	width: 100%;
-	padding-right: var(--spacing-2);
-	overflow-x: hidden;
-	overscroll-behavior: contain;
-
-	@include custom-scrollbar;
-}
-
-.gridItem {
-	// Or the item keeps its content width and the label never ellipsizes.
-	min-width: 0;
-	max-width: 100%;
-}
-
-.gridList {
-	min-width: 0;
-	display: grid;
-	grid-auto-flow: row;
-	// min() keeps the column inside a narrow panel, where a wider one would push
-	// the row's actions out of the clipped area.
-	grid-template-columns: repeat(
-		auto-fill,
-		minmax(min(var(--legend-item-width, 240px), 100%), 1fr)
-	);
-	gap: var(--spacing-1) var(--spacing-4);
-}
-
-.container.isRight .gridList {
-	grid-template-columns: 1fr;
-}
-
-.emptyState {
-	padding: var(--spacing-16) 0;
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-	text-align: center;
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -0,0 +1,204 @@
+@use '../../../../styles/scrollbar' as *;
+
+.legend-search-container {
+	flex-shrink: 0;
+	width: 100%;
+	padding-right: 8px;
+
+	.legend-search-input {
+		font-size: 12px;
+	}
+}
+
+.legend-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	height: 100%;
+	width: 100%;
+	// Allow the flex children to shrink below their content height so the
+	// virtualized grid scrolls within the capped legend height instead of
+	// overflowing the wrapper (default min-height:auto would block the shrink).
+	min-height: 0;
+
+	&:has(.legend-item-focused) .legend-item {
+		opacity: 0.3;
+	}
+
+	&:has(.legend-item-focused) .legend-item.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-empty-state {
+		font-size: 12px;
+		color: var(--l2-foreground);
+		text-align: center;
+		padding: 12px;
+		padding: 2rem 0;
+	}
+
+	.legend-virtuoso-container {
+		// flex:1 + min-height:0 pins the scroller to the space left after the
+		// search box (RIGHT legend) and lets it scroll instead of growing to fit
+		// every row — without this the grid overflows a BOTTOM legend's fixed height.
+		flex: 1;
+		min-height: 0;
+		height: 100%;
+		width: 100%;
+
+		.virtuoso-grid-list {
+			min-width: 0;
+			display: grid;
+			grid-auto-flow: row;
+			grid-template-columns: repeat(
+				auto-fill,
+				minmax(var(--legend-average-width, 240px), 1fr)
+			);
+			column-gap: 12px;
+		}
+
+		.virtuoso-grid-item {
+			min-width: 0;
+		}
+
+		&.legend-virtuoso-container-right {
+			.virtuoso-grid-list {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&.legend-virtuoso-container-single-row {
+			.virtuoso-grid-list {
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(var(--legend-average-width, 240px), max-content)
+				);
+				justify-content: center;
+			}
+		}
+
+		@include custom-scrollbar;
+	}
+}
+
+.legend-row {
+	padding: 4px 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+
+	&.legend-single-row {
+		justify-content: center;
+	}
+
+	&.legend-row-right {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+	&.legend-row-bottom {
+		flex-direction: row;
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	// Include padding within the width so a full-width row (legend-item-right) fits its
+	// column instead of overflowing by the 16px horizontal padding — there is no global
+	// border-box reset, so the default content-box would make it overflow.
+	box-sizing: border-box;
+	max-width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	cursor: pointer;
+
+	&.legend-item-right {
+		width: 100%;
+	}
+
+	&.legend-item-off {
+		opacity: 0.3;
+		text-decoration: line-through;
+		text-decoration-thickness: 1px;
+	}
+
+	&.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-item-label-trigger {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+	}
+
+	.legend-marker {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 50%;
+		min-width: 11px;
+		min-height: 11px;
+		width: 11px;
+		height: 11px;
+		flex-shrink: 0;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+		position: relative;
+
+		&:hover {
+			transform: scale(1.2);
+			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+		}
+
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+
+	.legend-label {
+		flex: 1;
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.legend-copy-button {
+		// Always laid out (space reserved) but transparent, so revealing it on
+		// hover fades the icon in without reflowing the row / shifting the label.
+		// Shrink the shared icon Button (defaults to a 2rem square) to the
+		// compact legend row via its size tokens.
+		--button-height: auto;
+		--button-width: auto;
+		--button-padding: 2px;
+
+		opacity: 0;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		border-radius: 4px;
+		transition:
+			opacity 0.15s ease,
+			color 0.15s ease;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
+	&:hover {
+		background: var(--l3-background);
+		.legend-copy-button {
+			opacity: 1;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,106 +1,139 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
+import { Input } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 
-import { LegendAction, LegendPosition, LegendProps } from '../types';
+import { LegendPosition, LegendProps } from '../types';
 
-import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
-import LegendRow from './LegendRow';
-import LegendToolbar from './LegendToolbar';
-import { filterLegendItems, getShownSeriesState } from './utils';
+import './Legend.styles.scss';
 
-import styles from './Legend.module.scss';
+export const MAX_LEGEND_WIDTH = 240;
 
 /**
- * Presentational legend, source-agnostic: the uPlot charts feed it via
- * UPlotLegend, Pie feeds it directly. Every state change is delegated.
+ * Presentational legend. Renders the supplied `items` (markers + labels, an
+ * optional copy button, and a search box for the RIGHT position) and delegates
+ * all interaction to the container handlers. Source-agnostic — the uPlot
+ * charts feed it via UPlotLegend; Pie feeds it directly.
  */
 export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
 	focusedSeriesIndex,
-	onAction,
+	onClick,
+	onMouseMove,
+	onMouseLeave,
 	showCopy = true,
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [filterQuery, setFilterQuery] = useState('');
+	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 
-	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
-	const isRightPosition = position === LegendPosition.RIGHT;
+	// Search is intrinsic to the right-positioned legend.
+	const searchEnabled = position === LegendPosition.RIGHT;
+	const { width: containerWidth } = useResizeObserver(legendContainerRef);
 
-	const { visibleCount, soleShownSeriesIndex } = useMemo(
-		() => getShownSeriesState(items),
-		[items],
-	);
+	const isSingleRow = useMemo(() => {
+		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
+			return false;
+		}
+		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
+		return totalRows <= 1;
+	}, [averageLegendWidth, items.length, position, containerWidth]);
 
-	// A bottom legend gets two rows; spending one on chrome costs more chart than
-	// the readout is worth.
-	const showToolbar = isRightPosition && items.length > 0;
-	const showFilter = showToolbar;
+	const visibleLegendItems = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return items;
+		}
 
-	const effectiveQuery = showFilter ? filterQuery : '';
-
-	const visibleLegendItems = useMemo(
-		() => filterLegendItems(items, effectiveQuery),
-		[items, effectiveQuery],
-	);
-
-	const isEmptyState =
-		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
-
-	const isAllShown = visibleCount === items.length;
-
-	// A row that unmounts under the pointer never fires its own mouseleave.
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
+		const query = legendSearchQuery.trim().toLowerCase();
+		return items.filter((item) => item.label?.toLowerCase().includes(query));
+	}, [searchEnabled, legendSearchQuery, items]);
 
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<LegendRow
-				key={item.seriesIndex}
-				item={item}
-				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
-				isAllShown={isAllShown}
-				isFocused={focusedSeriesIndex === item.seriesIndex}
-				showCopy={showCopy}
-				onAction={onAction}
-			/>
-		),
-		[soleShownSeriesIndex, isAllShown, focusedSeriesIndex, showCopy, onAction],
+		(item: LegendItem): JSX.Element => {
+			// `color` is uPlot's stroke union (string | fn | gradient); only a string
+			// is a usable CSS colour for the marker.
+			const markerColor = typeof item.color === 'string' ? item.color : undefined;
+			return (
+				<div
+					key={item.seriesIndex}
+					data-legend-item-id={item.seriesIndex}
+					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
+						'legend-item-off': !item.show,
+						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+					})}
+				>
+					<TooltipSimple title={item.label} arrow side="top" disableHoverableContent>
+						<div className="legend-item-label-trigger">
+							<div
+								className="legend-marker"
+								style={{ borderColor: markerColor }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</TooltipSimple>
+					{showCopy && (
+						<CopyButton
+							value={item.label ?? ''}
+							size={12}
+							className="legend-copy-button"
+							ariaLabel={`Copy ${item.label}`}
+							testId="legend-copy"
+						/>
+					)}
+				</div>
+			);
+		},
+		[focusedSeriesIndex, position, showCopy],
 	);
 
+	const isEmptyState = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return false;
+		}
+		return visibleLegendItems.length === 0;
+	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+
 	return (
 		<div
 			ref={legendContainerRef}
-			className={cx(styles.container, {
-				[styles.isRight]: isRightPosition,
-			})}
-			style={{ ['--legend-item-width' as string]: `${itemWidth}px` }}
-			onMouseLeave={handleMouseLeave}
-			data-testid="legend-container"
+			className="legend-container"
+			onClick={onClick}
+			onMouseMove={onMouseMove}
+			onMouseLeave={onMouseLeave}
+			style={{
+				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
+			}}
 		>
-			{showToolbar && (
-				<LegendToolbar
-					visibleCount={visibleCount}
-					totalCount={items.length}
-					showFilter={showFilter}
-					filterQuery={filterQuery}
-					onFilterQueryChange={setFilterQuery}
-				/>
+			{searchEnabled && (
+				<div className="legend-search-container">
+					<Input
+						allowClear
+						placeholder="Search..."
+						value={legendSearchQuery}
+						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
+						className="legend-search-input"
+					/>
+				</div>
 			)}
 			{isEmptyState ? (
-				<div className={styles.emptyState}>
-					No series found matching &quot;{effectiveQuery}&quot;
+				<div className="legend-empty-state">
+					No series found matching &quot;{legendSearchQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid
-					className={styles.scroller}
-					listClassName={styles.gridList}
-					itemClassName={styles.gridItem}
+					className={cx(
+						'legend-virtuoso-container',
+						`legend-virtuoso-container-${position.toLowerCase()}`,
+						{ 'legend-virtuoso-container-single-row': isSingleRow },
+					)}
 					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>

frontend/src/lib/uPlotV2/components/Legend/LegendRow.module.scss

@@ -1,170 +0,0 @@
-.row {
-	// Width of the revealed actions, given up by the label on hover only.
-	--legend-actions-reserve: 78px;
-
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 28px;
-	padding: 0 var(--spacing-3) 0 var(--spacing-4);
-	box-sizing: border-box;
-	width: 100%;
-	max-width: 100%;
-	min-width: 0;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition: background 160ms linear;
-
-	&:hover,
-	&:focus-visible {
-		background: var(--l3-background);
-	}
-}
-
-.isFocused {
-	background: var(--l3-background);
-}
-
-.marker {
-	// Reads as a checkbox without being one: filled when shown, hollow when
-	// hidden, deliberately not a check glyph.
-	flex: 0 0 auto;
-	box-sizing: border-box;
-	position: relative;
-	// Above the actions, so a narrow row's chip never covers the series colour.
-	z-index: 4;
-	width: 12px;
-	height: 12px;
-	padding: 0;
-	appearance: none;
-	border-width: 1.5px;
-	border-style: solid;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition:
-		transform 200ms ease,
-		box-shadow 200ms ease,
-		background-color 160ms linear,
-		opacity 160ms linear;
-
-	&:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0 0 2px
-			color-mix(in srgb, var(--l1-foreground) 30%, transparent);
-	}
-
-	&:active {
-		transform: scale(0.9);
-	}
-
-	&:disabled {
-		cursor: default;
-	}
-
-	&:disabled:hover {
-		transform: none;
-		box-shadow: none;
-	}
-}
-
-// Series names run long and have no spaces to break on, so they need both a
-// cap and a break rule or the tooltip becomes one panel-wide line.
-.rowTooltip {
-	max-width: 420px;
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-
-.label {
-	flex: 1 1 auto;
-	box-sizing: border-box;
-	width: 100%;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-	color: var(--l2-foreground);
-	user-select: none;
-}
-
-.isHidden .marker {
-	opacity: 0.45;
-}
-
-.isHidden .label {
-	color: var(--l3-foreground);
-	text-decoration: line-through;
-	text-decoration-thickness: 1px;
-}
-
-/* Row actions */
-
-.actions {
-	position: absolute;
-	top: var(--spacing-2);
-	right: var(--spacing-3);
-	z-index: 3;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding-left: var(--spacing-5, 10px);
-	// Sits on the row's hover background and masks the label's tail behind it.
-	background: var(--l3-background);
-	box-shadow: -8px 0 8px var(--l3-background);
-	opacity: 0;
-	transform: translateX(10px);
-	pointer-events: none;
-	transition:
-		opacity 180ms cubic-bezier(0.08, 0.52, 0.52, 1),
-		transform 180ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-// :focus-visible, not :focus-within — the latter also matches the click that
-// just toggled the series, leaving the actions stuck open.
-.row:hover .actions,
-.row:focus-visible .actions,
-.row:has(:focus-visible) .actions {
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-}
-
-// The cap spares rows sized to their actions, not their label.
-.row:hover .label,
-.row:focus-visible .label,
-.row:has(:focus-visible) .label {
-	padding-right: min(var(--legend-actions-reserve), 50%);
-}
-
-.actionTrigger {
-	display: inline-flex;
-}
-
-.actionButton {
-	--button-height: 20px;
-	--button-width: 20px;
-	--button-padding: 0;
-	--button-variant-ghost-color: var(--l3-foreground);
-	--button-variant-ghost-hover-color: var(--l1-foreground);
-
-	flex-shrink: 0;
-}
-
-.actionButton.scopeButton {
-	--button-width: auto;
-	--button-padding: 0 var(--spacing-4);
-	--button-font-size: var(--font-size-xs);
-	--button-border-radius: calc(var(--radius) * 4);
-	--button-base-border-width: 1px;
-	// --l2-border is the actions bar's own background: one step up reads.
-	--button-base-border-color: var(--l3-border);
-
-	border-style: solid;
-}
-.actionButton.scopeButton:hover {
-	border-color: var(--l2-border);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx

@@ -1,182 +0,0 @@
-import { KeyboardEvent, memo, MouseEvent, useCallback } from 'react';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-
-import { LegendAction, OnLegendAction } from '../types';
-
-import { LEGEND_TOOLTIP_DELAY_MS } from './constants';
-import styles from './LegendRow.module.scss';
-
-export interface LegendRowProps {
-	item: LegendItem;
-	/** The only series currently shown, so hiding it is refused. */
-	isSoleShown: boolean;
-	/** Nothing is hidden, so the row's action can only narrow the selection. */
-	isAllShown: boolean;
-	isFocused: boolean;
-	showCopy: boolean;
-	onAction: OnLegendAction;
-}
-
-/**
- * One legend row. The marker is its own target for excluding a single series —
- * the one thing the row click can't do while everything is showing. The actions
- * overlay the label's tail rather than taking layout width, and their reveal is
- * pure CSS.
- */
-function LegendRow({
-	item,
-	isSoleShown,
-	isAllShown,
-	isFocused,
-	showCopy,
-	onAction,
-}: LegendRowProps): JSX.Element {
-	const { seriesIndex, show } = item;
-	const label = item.label ?? '';
-	const isShowAllAction = show && !isAllShown;
-	const scopeActionLabel = isShowAllAction
-		? 'Show all series'
-		: 'Show only current series';
-	// `color` is uPlot's stroke union (string | fn | gradient); only a string is
-	// a usable CSS colour for the marker.
-	const seriesColor = typeof item.color === 'string' ? item.color : undefined;
-
-	/** Everything showing -> isolate; showing alone -> restore all. */
-	const handleRowClick = useCallback((): void => {
-		if (isSoleShown) {
-			onAction({ type: LegendAction.SHOW_ALL });
-			return;
-		}
-		onAction({
-			type: isAllShown ? LegendAction.SHOW_ONLY : LegendAction.TOGGLE,
-			seriesIndex,
-		});
-	}, [isSoleShown, isAllShown, onAction, seriesIndex]);
-
-	const handleMarkerClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onAction({ type: LegendAction.TOGGLE, seriesIndex });
-		},
-		[onAction, seriesIndex],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>): void => {
-			// Let the row actions handle their own keys.
-			if (event.target !== event.currentTarget) {
-				return;
-			}
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				handleRowClick();
-			}
-		},
-		[handleRowClick],
-	);
-
-	const handleScopeClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			if (isShowAllAction) {
-				onAction({ type: LegendAction.SHOW_ALL });
-				return;
-			}
-			onAction({ type: LegendAction.SHOW_ONLY, seriesIndex });
-		},
-		[isShowAllAction, onAction, seriesIndex],
-	);
-
-	const handleMouseEnter = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex }),
-		[onAction, seriesIndex],
-	);
-
-	const handleMouseLeave = useCallback(
-		(): void => onAction({ type: LegendAction.HOVER, seriesIndex: null }),
-		[onAction],
-	);
-
-	return (
-		<div
-			className={cx(styles.row, {
-				[styles.isHidden]: !show,
-				[styles.isFocused]: isFocused,
-			})}
-			data-legend-item-id={seriesIndex}
-			data-testid={`legend-item-${seriesIndex}`}
-			role="switch"
-			tabIndex={0}
-			aria-checked={show}
-			aria-label={label}
-			onClick={handleRowClick}
-			onKeyDown={handleKeyDown}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<button
-				type="button"
-				className={styles.marker}
-				style={{
-					borderColor: seriesColor,
-					backgroundColor: show ? seriesColor : 'transparent',
-				}}
-				onClick={handleMarkerClick}
-				disabled={isSoleShown}
-				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
-				data-is-legend-marker={true}
-				data-testid={`legend-marker-${seriesIndex}`}
-			/>
-			<TooltipSimple
-				title={label}
-				arrow
-				side="top"
-				delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-				tooltipContentProps={{ className: styles.rowTooltip }}
-			>
-				<span className={styles.label}>{label}</span>
-			</TooltipSimple>
-			<div className={styles.actions}>
-				<TooltipSimple
-					title={scopeActionLabel}
-					arrow
-					side="top"
-					delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-					tooltipContentProps={{ className: styles.rowTooltip }}
-				>
-					{/* Radix's asChild merge strips the button's own data-testid. */}
-					<span className={styles.actionTrigger}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="sm"
-							className={cx(styles.actionButton, styles.scopeButton)}
-							onClick={handleScopeClick}
-							aria-label={scopeActionLabel}
-							testId={`legend-scope-${seriesIndex}`}
-						>
-							{isShowAllAction ? 'All' : 'Only'}
-						</Button>
-					</span>
-				</TooltipSimple>
-				{showCopy && (
-					<CopyButton
-						value={label}
-						size={13}
-						className={styles.actionButton}
-						ariaLabel={`Copy ${label}`}
-						testId={`legend-copy-${seriesIndex}`}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default memo(LegendRow);

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.module.scss

@@ -1,35 +0,0 @@
-.toolbar {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--spacing-5, 10px);
-	padding: 0 var(--spacing-4) var(--spacing-5, 10px);
-	flex-shrink: 0;
-
-	> * {
-		flex: 0 1 auto;
-	}
-}
-
-.status {
-	// Wraps rather than losing the count at its end.
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.searchContainer {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: var(--spacing-4);
-	padding-bottom: var(--spacing-5, 10px);
-}
-
-.searchInput {
-	font-size: var(--font-size-xs);
-}
-
-.searchIcon {
-	color: var(--l3-foreground);
-}

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -1,56 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-import { Input } from 'antd';
-import { Search } from '@signozhq/icons';
-
-import styles from './LegendToolbar.module.scss';
-
-export interface LegendToolbarProps {
-	visibleCount: number;
-	totalCount: number;
-	/** Search is intrinsic to the right-positioned legend. */
-	showFilter: boolean;
-	filterQuery: string;
-	onFilterQueryChange: (query: string) => void;
-}
-
-/** Legend chrome: the series search box and the "Showing N of M" readout. */
-export default function LegendToolbar({
-	visibleCount,
-	totalCount,
-	showFilter,
-	filterQuery,
-	onFilterQueryChange,
-}: LegendToolbarProps): JSX.Element {
-	const handleFilterChange = useCallback(
-		(event: ChangeEvent<HTMLInputElement>): void =>
-			onFilterQueryChange(event.target.value),
-		[onFilterQueryChange],
-	);
-
-	return (
-		<>
-			{showFilter && (
-				<div className={styles.searchContainer}>
-					<Input
-						allowClear
-						prefix={<Search size={12} className={styles.searchIcon} />}
-						placeholder="Search..."
-						value={filterQuery}
-						onChange={handleFilterChange}
-						className={styles.searchInput}
-						data-testid="legend-search-input"
-					/>
-				</div>
-			)}
-			<div className={styles.toolbar}>
-				<span
-					className={styles.status}
-					aria-live="polite"
-					data-testid="legend-status"
-				>
-					{`Showing ${visibleCount} of ${totalCount} series`}
-				</span>
-			</div>
-		</>
-	);
-}

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -8,8 +8,8 @@ import Legend from './Legend';
 
 /**
  * uPlot legend controller. Derives the legend items + focus/visibility state
- * from the chart config (useLegendsSync) and the series interactions from the
- * plot context (useLegendActions), then renders the presentational Legend.
+ * from the chart config (useLegendsSync) and the toggle/focus interactions from
+ * the plot context (useLegendActions), then renders the presentational Legend.
  * Must be rendered inside a PlotContextProvider.
  */
 export default function UPlotLegend({
@@ -17,8 +17,13 @@ export default function UPlotLegend({
 	config,
 	averageLegendWidth,
 }: UPlotLegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
-	const onAction = useLegendActions();
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
 
 	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
 
@@ -28,7 +33,9 @@ export default function UPlotLegend({
 			position={position}
 			averageLegendWidth={averageLegendWidth}
 			focusedSeriesIndex={focusedSeriesIndex}
-			onAction={onAction}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 		/>
 	);
 }

frontend/src/lib/uPlotV2/components/Legend/__tests__/UPlotLegend.test.tsx

@@ -1,419 +0,0 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../../hooks/useLegendActions';
-import UPlotLegend from '../UPlotLegend';
-import { LegendAction, LegendActionPayload, LegendPosition } from '../../types';
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-/** The payloads of one action type, in dispatch order. */
-const dispatched = (
-	onAction: jest.Mock,
-	type: LegendAction,
-): LegendActionPayload[] =>
-	onAction.mock.calls
-		.map(([payload]) => payload as LegendActionPayload)
-		.filter((payload) => payload.type === type);
-
-describe('UPlotLegend', () => {
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onAction: jest.Mock;
-
-	beforeEach(() => {
-		onAction = jest.fn();
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue(onAction);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<TooltipProvider>
-				<UPlotLegend
-					position={position}
-					// config is consumed by the mocked useLegendsSync hook, not directly
-					config={{} as any}
-				/>
-			</TooltipProvider>,
-		);
-
-	describe('layout and position', () => {
-		it('renders the search input on a RIGHT legend', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
-			// The row interactions are the same in both placements.
-			expect(screen.getByTestId('legend-item-0')).toBeInTheDocument();
-			expect(screen.getByTestId('legend-scope-0')).toBeInTheDocument();
-		});
-
-		it('renders the marker with the series colour, filled only when shown', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({
-				'border-color': '#ff0000',
-				'background-color': '#ff0000',
-			});
-			// Hidden series read as an empty checkbox.
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({ 'background-color': 'transparent' });
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('status readout', () => {
-		it('reports how many series are showing', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-status')).toHaveTextContent(
-				'Showing 2 of 3 series',
-			);
-		});
-	});
-
-	describe('filter behavior', () => {
-		it('filters legend items based on the query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'a');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows the empty state when nothing matches', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('ignores a whitespace-only query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.type(screen.getByTestId('legend-search-input'), '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('row interactions', () => {
-		const allShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1], show: true },
-			2: { ...baseLegendItemsMap[2] },
-		};
-
-		const mockAllShown = (): void => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: allShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		};
-
-		it('isolates the series when everything is showing', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			// Nothing the user can see is there to exclude, so the click means Only.
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('toggles the series once something is already hidden', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('excludes just that series when its marker is clicked', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-marker-0'));
-
-			// The marker is the one way to exclude a single series while
-			// everything is showing — the row click isolates instead.
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('stops the marker offering to hide the last series showing', () => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toBeDisabled();
-			expect(screen.getByTestId('legend-marker-1')).toBeEnabled();
-		});
-
-		it('labels the marker with what clicking it does', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toHaveAttribute(
-				'aria-label',
-				'Hide A',
-			);
-			expect(screen.getByTestId('legend-marker-1')).toHaveAttribute(
-				'aria-label',
-				'Show B',
-			);
-		});
-
-		it('adds the clicked series to the selection while one is alone', async () => {
-			const user = userEvent.setup();
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is showing alone; clicking another row builds the selection
-			// up rather than moving the isolation.
-			await user.click(screen.getByText('B'));
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('toggles the series on Enter and Space', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			row.focus();
-			await user.keyboard('{Enter}');
-			await user.keyboard(' ');
-
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toStrictEqual([
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-				{ type: LegendAction.TOGGLE, seriesIndex: 0 },
-			]);
-		});
-
-		it('reflects visibility on the row for assistive tech', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-item-0')).toHaveAttribute(
-				'aria-checked',
-				'true',
-			);
-			expect(screen.getByTestId('legend-item-1')).toHaveAttribute(
-				'aria-checked',
-				'false',
-			);
-		});
-
-		it('restores every series from All without also toggling the row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is shown while B is hidden, so its action is All.
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-
-		it('isolates the series from Only on a hidden row', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-1'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toStrictEqual([
-				{ type: LegendAction.SHOW_ONLY, seriesIndex: 1 },
-			]);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-		});
-
-		it('highlights the hovered series and clears it on leave', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			await user.hover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: 0,
-			});
-
-			await user.unhover(row);
-			expect(onAction).toHaveBeenCalledWith({
-				type: LegendAction.HOVER,
-				seriesIndex: null,
-			});
-		});
-	});
-
-	describe('one-series state', () => {
-		const soleShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1] },
-			2: { ...baseLegendItemsMap[2], show: false },
-		};
-
-		beforeEach(() => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: soleShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		});
-
-		it('offers All on the shown row and Only on the hidden ones', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-scope-0')).toHaveTextContent('All');
-			expect(screen.getByTestId('legend-scope-1')).toHaveTextContent('Only');
-			expect(screen.getByTestId('legend-scope-2')).toHaveTextContent('Only');
-		});
-
-		it('restores everything from All', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-scope-0'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-		});
-
-		it('restores everything when the row showing alone is clicked again', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(dispatched(onAction, LegendAction.SHOW_ALL)).toHaveLength(1);
-			expect(dispatched(onAction, LegendAction.TOGGLE)).toHaveLength(0);
-			expect(dispatched(onAction, LegendAction.SHOW_ONLY)).toHaveLength(0);
-		});
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/__tests__/utils.test.ts

@@ -1,45 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-import { filterLegendItems, getShownSeriesState } from '../utils';
-
-const items = (shown: boolean[]): LegendItem[] =>
-	shown.map((show, index) => ({
-		seriesIndex: index + 1,
-		label: `series-${index}`,
-		color: '#000',
-		show,
-	}));
-
-describe('getShownSeriesState', () => {
-	it('counts the shown series', () => {
-		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
-			visibleCount: 2,
-			soleShownSeriesIndex: null,
-		});
-	});
-
-	it('names the series when exactly one is shown', () => {
-		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
-			visibleCount: 1,
-			soleShownSeriesIndex: 2,
-		});
-	});
-
-	it('reports nothing shown', () => {
-		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
-			visibleCount: 0,
-			soleShownSeriesIndex: null,
-		});
-	});
-});
-
-describe('filterLegendItems', () => {
-	it('matches case-insensitively on the label', () => {
-		const filtered = filterLegendItems(items([true, true, true]), 'SERIES-1');
-		expect(filtered.map((item) => item.label)).toStrictEqual(['series-1']);
-	});
-
-	it('returns every item for a blank query', () => {
-		expect(filterLegendItems(items([true, true]), '   ')).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -1,20 +0,0 @@
-/** Widest a single legend item is allowed to get when sizing the legend grid. */
-export const MAX_LEGEND_WIDTH = 240;
-
-/**
- * Enough for a row to contain its own hover actions, which a short label would
- * otherwise size a column too narrow for. Little room for the label is intended.
- */
-export const MIN_LEGEND_ITEM_WIDTH = 110;
-
-/** Marker + row padding, on top of the estimated label width. */
-export const LEGEND_ITEM_EXTRA_WIDTH = 16;
-
-/** Must match `.row`'s height and the grid's row gap, or the reserved
- * rectangle clips a row. */
-export const LEGEND_ROW_HEIGHT = 28;
-export const LEGEND_ROW_GAP = 2;
-export const LEGEND_MAX_BOTTOM_ROWS = 2;
-
-/** Hover delay before a row's full-name tooltip opens. */
-export const LEGEND_TOOLTIP_DELAY_MS = 500;

frontend/src/lib/uPlotV2/components/Legend/utils.ts

@@ -1,34 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-export interface ShownSeriesState {
-	visibleCount: number;
-	/** The series index when exactly one series is shown, else null. */
-	soleShownSeriesIndex: number | null;
-}
-
-/**
- * Driven by what is actually shown, never a remembered isolation: hiding series
- * one at a time down to a single one is the same state as "Only".
- */
-export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
-	const shown = items.filter((item) => item.show);
-
-	return {
-		visibleCount: shown.length,
-		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
-	};
-}
-
-export function filterLegendItems(
-	items: LegendItem[],
-	query: string,
-): LegendItem[] {
-	const normalisedQuery = query.trim().toLowerCase();
-	if (!normalisedQuery) {
-		return items;
-	}
-
-	return items.filter((item) =>
-		item.label?.toLowerCase().includes(normalisedQuery),
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.module.scss

@@ -12,11 +12,10 @@
 	}
 }
 
-// Matches the legend row's marker.
 .uplotTooltipItemMarker {
-	border-radius: var(--radius);
+	border-radius: 50%;
 	border-style: solid;
-	border-width: 1.5px;
+	border-width: 2px;
 	width: 12px;
 	height: 12px;
 	box-sizing: border-box;
@@ -31,23 +30,11 @@
 	justify-content: space-between;
 }
 
-// The legend's mono type; the container's Inter stays for the header.
-.uplotTooltipItemLabel,
-.uplotTooltipItemValue {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-}
-
 .uplotTooltipItemLabel {
 	white-space: normal;
 	overflow-wrap: anywhere;
 }
 
-.uplotTooltipItemValue {
-	white-space: nowrap;
-}
-
 .uplotTooltipItemContentSeparator {
 	flex: 1;
 	border-width: 0.5px;

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.tsx

@@ -25,7 +25,7 @@ export default function TooltipItem({
 		>
 			<div
 				className={Styles.uplotTooltipItemMarker}
-				style={{ borderColor: item.color, backgroundColor: item.color }}
+				style={{ borderColor: item.color }}
 				data-is-legend-marker={true}
 				data-testid={markerTestId}
 			/>
@@ -39,7 +39,7 @@ export default function TooltipItem({
 					className={Styles.uplotTooltipItemContentSeparator}
 					style={{ borderColor: item.color }}
 				/>
-				<span className={Styles.uplotTooltipItemValue}>{item.tooltipValue}</span>
+				<span>{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/__tests__/UPlotLegend.test.tsx

@@ -0,0 +1,216 @@
+import React from 'react';
+import { render, RenderResult, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+
+import { useLegendActions } from '../../hooks/useLegendActions';
+import UPlotLegend from '../Legend/UPlotLegend';
+import { LegendPosition } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+		className,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+		className?: string;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid" className={className}>
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
+					{itemContent(index, item)}
+				</div>
+			))}
+		</div>
+	),
+}));
+
+jest.mock('lib/uPlotV2/hooks/useLegendsSync');
+jest.mock('lib/uPlotV2/hooks/useLegendActions');
+
+const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
+	typeof useLegendsSync
+>;
+const mockUseLegendActions = useLegendActions as jest.MockedFunction<
+	typeof useLegendActions
+>;
+
+describe('UPlotLegend', () => {
+	const baseLegendItemsMap = {
+		0: {
+			seriesIndex: 0,
+			label: 'A',
+			show: true,
+			color: '#ff0000',
+		},
+		1: {
+			seriesIndex: 1,
+			label: 'B',
+			show: false,
+			color: '#00ff00',
+		},
+		2: {
+			seriesIndex: 2,
+			label: 'C',
+			show: true,
+			color: '#0000ff',
+		},
+	};
+
+	let onLegendClick: jest.Mock;
+	let onLegendMouseMove: jest.Mock;
+	let onLegendMouseLeave: jest.Mock;
+	let onFocusSeries: jest.Mock;
+
+	beforeEach(() => {
+		onLegendClick = jest.fn();
+		onLegendMouseMove = jest.fn();
+		onLegendMouseLeave = jest.fn();
+		onFocusSeries = jest.fn();
+
+		mockUseLegendsSync.mockReturnValue({
+			legendItemsMap: baseLegendItemsMap,
+			focusedSeriesIndex: 1,
+			setFocusedSeriesIndex: jest.fn(),
+		});
+
+		mockUseLegendActions.mockReturnValue({
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+			onFocusSeries,
+		});
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderLegend = (position?: LegendPosition): RenderResult =>
+		render(
+			<TooltipProvider>
+				<UPlotLegend
+					position={position}
+					// config is consumed by the mocked useLegendsSync hook, not directly
+					config={{} as any}
+				/>
+			</TooltipProvider>,
+		);
+
+	describe('layout and position', () => {
+		it('renders search input when legend position is RIGHT', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
+		});
+
+		it('does not render search input when legend position is BOTTOM (default)', () => {
+			renderLegend();
+
+			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
+		});
+
+		it('renders the marker with the correct border color', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendMarker = document.querySelector(
+				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+			) as HTMLElement;
+
+			expect(legendMarker).toHaveStyle({
+				'border-color': '#ff0000',
+			});
+		});
+
+		it('renders all legend items in the grid by default', () => {
+			renderLegend(LegendPosition.RIGHT);
+
+			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('search behavior (RIGHT position)', () => {
+		it('filters legend items based on search query (case-insensitive)', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'A');
+
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.queryByText('B')).not.toBeInTheDocument();
+			expect(screen.queryByText('C')).not.toBeInTheDocument();
+		});
+
+		it('shows empty state when no legend items match the search query', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'network');
+
+			expect(
+				screen.getByText(/No series found matching "network"/i),
+			).toBeInTheDocument();
+			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
+		});
+
+		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, '   ');
+
+			expect(
+				screen.queryByText(/No series found matching/i),
+			).not.toBeInTheDocument();
+			expect(screen.getByText('A')).toBeInTheDocument();
+			expect(screen.getByText('B')).toBeInTheDocument();
+			expect(screen.getByText('C')).toBeInTheDocument();
+		});
+	});
+
+	describe('legend actions', () => {
+		it('calls onLegendClick when a legend item is clicked', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			await user.click(screen.getByText('A'));
+
+			expect(onLegendClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls mouseMove when the mouse moves over a legend item', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const legendItem = document.querySelector(
+				'[data-legend-item-id="0"]',
+			) as HTMLElement;
+
+			await user.hover(legendItem);
+
+			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
+			const user = userEvent.setup();
+			renderLegend(LegendPosition.RIGHT);
+
+			const container = document.querySelector('.legend-container') as HTMLElement;
+
+			await user.hover(container);
+			await user.unhover(container);
+
+			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
+		});
+	});
+});

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
@@ -115,39 +115,26 @@ export enum LegendPosition {
 export interface LegendConfig {
 	position: LegendPosition;
 }
-export enum LegendAction {
-	TOGGLE = 'toggle',
-	SHOW_ONLY = 'showOnly',
-	SHOW_ALL = 'showAll',
-	HOVER = 'hover',
-}
-
-/** Everything the legend can ask of its container, as one dispatch. */
-export type LegendActionPayload =
-	/** Row click / Space / Enter / marker click: hide or show that one series. */
-	| { type: LegendAction.TOGGLE; seriesIndex: number }
-	/** Show that series alone. */
-	| { type: LegendAction.SHOW_ONLY; seriesIndex: number }
-	/** Leave the narrowed selection and show every series. */
-	| { type: LegendAction.SHOW_ALL }
-	/** Row hover, for the chart-side highlight; null on leave. */
-	| { type: LegendAction.HOVER; seriesIndex: number | null };
-
-export type OnLegendAction = (payload: LegendActionPayload) => void;
-
 /**
  * Presentational legend props. Source-agnostic: it renders whatever `items`
  * it's given and delegates interaction to the container handlers, so it serves
- * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
+ * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie). The search
+ * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
  */
 export interface LegendProps {
 	items: LegendItem[];
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Series index highlighted by the chart cursor. */
+	/** Series index to highlight (hovered/focused). */
 	focusedSeriesIndex: number | null;
-	onAction: OnLegendAction;
+	/**
+	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
+	 * handler reads the target's id rather than binding per item.
+	 */
+	onClick: MouseEventHandler<HTMLDivElement>;
+	onMouseMove: MouseEventHandler<HTMLDivElement>;
+	onMouseLeave: () => void;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
 }

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -3,6 +3,7 @@ import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
+import { resolveFillOpacity, toAlphaHex } from '../utils/fillOpacity';
 import { generateGradientFill } from '../utils/generateGradientFill';
 import { isolatedPointFilter } from '../utils/seriesPointsFilter';
 import {
@@ -58,7 +59,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap, fillColor, fillMode } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor, fillMode, fillOpacity } =
+			this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? DEFAULT_LINE_WIDTH,
@@ -86,11 +88,17 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
 		} else if (fillMode && fillMode !== FillMode.None) {
+			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
-				lineConfig.fill = `${finalFillColor}70`;
+				lineConfig.fill = `${finalFillColor}${toAlphaHex(resolvedOpacity)}`;
 			} else if (fillMode === FillMode.Gradient) {
 				lineConfig.fill = (self: uPlot): CanvasGradient =>
-					generateGradientFill(self, finalFillColor, 'rgba(0, 0, 0, 0)');
+					generateGradientFill(
+						self,
+						finalFillColor,
+						'rgba(0, 0, 0, 0)',
+						resolvedOpacity,
+					);
 			}
 		}
 

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -3,7 +3,7 @@ import uPlot from 'uplot';
 
 import { isolatedPointFilter } from '../../utils/seriesPointsFilter';
 import type { SeriesProps } from '../types';
-import { DrawStyle, LineInterpolation, LineStyle } from '../types';
+import { DrawStyle, FillMode, LineInterpolation, LineStyle } from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
@@ -362,4 +362,40 @@ describe('UPlotSeriesBuilder', () => {
 		expect(config.points?.filter).toBeUndefined();
 		expect(config.points?.show).toBe(true);
 	});
+
+	// Pins the alpha the solid fill hardcoded before opacity was configurable.
+	it('fills a solid series at the default opacity', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.Solid,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBe('#11223370');
+	});
+
+	it('fills a solid series at the declared opacity', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.Solid,
+				fillOpacity: 0.5,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBe('#11223380');
+	});
+
+	it('leaves an unfilled series without a fill', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				fillColor: '#112233',
+				fillMode: FillMode.None,
+				fillOpacity: 0.5,
+			}),
+		);
+
+		expect(builder.getConfig().fill).toBeUndefined();
+	});
 });

frontend/src/lib/uPlotV2/config/types.ts

@@ -222,6 +222,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	spanGaps?: boolean | number;
 	fillColor?: string;
 	fillMode?: FillMode;
+	/** 0–1, for `Solid` and `Gradient`; unset uses `DEFAULT_FILL_OPACITY`. */
+	fillOpacity?: number;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };

frontend/src/lib/uPlotV2/constants.ts

@@ -6,11 +6,6 @@ export const DEFAULT_HOVER_PROXIMITY_VALUE = 30; // only snap if within 30px hor
 export const DEFAULT_FOCUS_PROXIMITY_VALUE = 1e6;
 export const STEP_INTERVAL_MULTIPLIER = 3; // multiply the width computed by STEP_INTERVAL_MULTIPLIER to get the hover prox value
 
-/** Opacity applied to the series that are NOT highlighted while a legend row is hovered. */
-export const LEGEND_HIGHLIGHT_DIM_ALPHA = 0.16;
-/** Stroke-width multiplier applied to the series highlighted from the legend. */
-export const LEGEND_HIGHLIGHT_WIDTH_RATIO = 1.6;
-
 export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
 	focus: {
 		alpha: 0.3,

frontend/src/lib/uPlotV2/context/PlotContext.tsx

@@ -8,10 +8,6 @@ import {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	LEGEND_HIGHLIGHT_DIM_ALPHA,
-	LEGEND_HIGHLIGHT_WIDTH_RATIO,
-} from 'lib/uPlotV2/constants';
 import type { SeriesVisibilityItem } from 'lib/visualization/panels/types';
 import { updateSeriesVisibilityToLocalStorage } from 'lib/visualization/panels/utils/legendVisibilityUtils';
 import type uPlot from 'uplot';
@@ -24,26 +20,12 @@ export interface IPlotContext {
 	setPlotContextInitialState: (state: PlotContextInitialState) => void;
 	onToggleSeriesVisibility: (seriesIndex: number) => void;
 	onToggleSeriesOnOff: (seriesIndex: number) => void;
-	/** Show this series alone. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** Show every series again. */
-	onShowAllSeries: () => void;
 	onFocusSeries: (seriesIndex: number | null) => void;
-	/** Lift one series above the rest (dim + thicken) without changing visibility. */
-	onHighlightSeries: (seriesIndex: number | null) => void;
 	syncSeriesVisibilityToLocalStorage: () => void;
 }
 
 export const PlotContext = createContext<IPlotContext | null>(null);
 
-/** Data series (index 0 is the x-axis) currently drawn. */
-const countShownSeries = (plot: uPlot): number =>
-	plot.series.reduce(
-		(count, series, index) =>
-			index > 0 && series.show !== false ? count + 1 : count,
-		0,
-	);
-
 export const PlotContextProvider = ({
 	children,
 }: PropsWithChildren): JSX.Element => {
@@ -51,9 +33,6 @@ export const PlotContextProvider = ({
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
 	const idRef = useRef<string | undefined>(undefined);
 	const shouldSavePreferencesRef = useRef<boolean>(false);
-	/** Pre-highlight stroke widths, captured on the first highlight so it can be undone. */
-	const baseSeriesWidthsRef = useRef<Map<number, number | undefined>>(new Map());
-	const highlightedSeriesIndexRef = useRef<number | null>(null);
 
 	const setPlotContextInitialState = useCallback(
 		({
@@ -64,8 +43,6 @@ export const PlotContextProvider = ({
 			uPlotInstanceRef.current = uPlotInstance;
 			idRef.current = id;
 			activeSeriesIndex.current = undefined;
-			baseSeriesWidthsRef.current = new Map();
-			highlightedSeriesIndexRef.current = null;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
@@ -87,54 +64,6 @@ export const PlotContextProvider = ({
 		updateSeriesVisibilityToLocalStorage(idRef.current, seriesVisibility);
 	}, []);
 
-	const onHighlightSeries = useCallback((seriesIndex: number | null): void => {
-		const plot = uPlotInstanceRef.current;
-		if (!plot) {
-			return;
-		}
-
-		highlightedSeriesIndexRef.current = seriesIndex;
-
-		plot.series.forEach((series, index) => {
-			if (index === 0) {
-				return;
-			}
-			if (!baseSeriesWidthsRef.current.has(index)) {
-				baseSeriesWidthsRef.current.set(index, series.width);
-			}
-			const baseWidth = baseSeriesWidthsRef.current.get(index);
-			const isHighlighted = index === seriesIndex;
-
-			/* eslint-disable no-param-reassign */
-			series.alpha =
-				seriesIndex === null || isHighlighted ? 1 : LEGEND_HIGHLIGHT_DIM_ALPHA;
-			series.width =
-				isHighlighted && baseWidth !== undefined
-					? baseWidth * LEGEND_HIGHLIGHT_WIDTH_RATIO
-					: baseWidth;
-			/* eslint-enable no-param-reassign */
-		});
-
-		// Only the stroke style changed, so the cached paths stay valid.
-		plot.redraw(false);
-	}, []);
-
-	/**
-	 * Leaving the dim on a hidden series leaves every other one faded, which
-	 * reads as an isolation rather than as one series being excluded.
-	 */
-	const clearHighlightIfHidden = useCallback((): void => {
-		const plot = uPlotInstanceRef.current;
-		const highlightedIndex = highlightedSeriesIndexRef.current;
-		if (!plot || highlightedIndex === null) {
-			return;
-		}
-
-		if (plot.series[highlightedIndex]?.show === false) {
-			onHighlightSeries(null);
-		}
-	}, [onHighlightSeries]);
-
 	const onToggleSeriesVisibility = useCallback(
 		(seriesIndex: number): void => {
 			const plot = uPlotInstanceRef.current;
@@ -174,61 +103,14 @@ export const PlotContextProvider = ({
 			if (!series) {
 				return;
 			}
-
-			// An empty chart is never worth reaching.
-			const isHiding = series.show !== false;
-			if (isHiding && countShownSeries(plot) <= 1) {
-				return;
-			}
-
 			plot.setSeries(seriesIndex, { show: !series.show });
 			if (idRef.current && shouldSavePreferencesRef.current) {
 				syncSeriesVisibilityToLocalStorage();
 			}
-
-			clearHighlightIfHidden();
 		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
+		[syncSeriesVisibilityToLocalStorage],
 	);
 
-	/** Applies `resolveShow` to every data series in one batch, then persists. */
-	const setSeriesVisibility = useCallback(
-		(resolveShow: (seriesIndex: number) => boolean): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			activeSeriesIndex.current = undefined;
-
-			plot.batch(() => {
-				plot.series.forEach((_, index) => {
-					if (index === 0) {
-						return;
-					}
-					plot.setSeries(index, { show: resolveShow(index) });
-				});
-				if (idRef.current && shouldSavePreferencesRef.current) {
-					syncSeriesVisibilityToLocalStorage();
-				}
-			});
-
-			clearHighlightIfHidden();
-		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
-	);
-
-	const onShowOnlySeries = useCallback(
-		(seriesIndex: number): void => {
-			setSeriesVisibility((index) => index === seriesIndex);
-		},
-		[setSeriesVisibility],
-	);
-
-	const onShowAllSeries = useCallback((): void => {
-		setSeriesVisibility(() => true);
-	}, [setSeriesVisibility]);
-
 	const onFocusSeries = useCallback((seriesIndex: number | null): void => {
 		const plot = uPlotInstanceRef.current;
 		if (!plot) {
@@ -249,20 +131,14 @@ export const PlotContextProvider = ({
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		}),
 		[
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		],
 	);

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -26,7 +26,6 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 		series,
 		batch: jest.fn((fn: () => void) => fn()),
 		setSeries: jest.fn(),
-		redraw: jest.fn(),
 	}) as unknown as uPlot;
 
 interface TestComponentProps {
@@ -45,10 +44,7 @@ const TestComponent = ({
 		syncSeriesVisibilityToLocalStorage,
 		onToggleSeriesVisibility,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
 		onFocusSeries,
-		onHighlightSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
 		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
@@ -88,13 +84,6 @@ const TestComponent = ({
 			>
 				Toggle on/off 1
 			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-2"
-				onClick={(): void => onToggleSeriesOnOff(2)}
-			>
-				Toggle on/off 2
-			</button>
 			<button
 				type="button"
 				data-testid="toggle-on-off-5"
@@ -109,34 +98,6 @@ const TestComponent = ({
 			>
 				Focus series
 			</button>
-			<button
-				type="button"
-				data-testid="show-only-1"
-				onClick={(): void => onShowOnlySeries(1)}
-			>
-				Show only 1
-			</button>
-			<button
-				type="button"
-				data-testid="show-all"
-				onClick={(): void => onShowAllSeries()}
-			>
-				Show all
-			</button>
-			<button
-				type="button"
-				data-testid="highlight-1"
-				onClick={(): void => onHighlightSeries(1)}
-			>
-				Highlight 1
-			</button>
-			<button
-				type="button"
-				data-testid="clear-highlight"
-				onClick={(): void => onHighlightSeries(null)}
-			>
-				Clear highlight
-			</button>
 		</div>
 	);
 };
@@ -312,7 +273,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -364,7 +324,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -384,48 +343,6 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
 			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
 		});
-
-		it('refuses to hide the last series showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// An empty chart is never a state worth reaching.
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('still shows a hidden series when only one is left showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-		});
 	});
 
 	describe('onFocusSeries', () => {
@@ -464,193 +381,4 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
 		});
 	});
-	describe('onShowOnlySeries', () => {
-		const renderWithSeries = (
-			series: MockSeries[],
-		): { plot: uPlot; user: ReturnType<typeof userEvent.setup> } => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			return { plot, user };
-		};
-
-		it('hides every other series, leaving the x-axis alone', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalled();
-		});
-
-		it('keeps isolating the series that is already the only one shown', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-		});
-	});
-
-	describe('onShowAllSeries', () => {
-		it('shows every hidden series again', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-all'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: true });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-		});
-	});
-
-	describe('onHighlightSeries', () => {
-		const series = (): MockSeries[] => [
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true, width: 2 },
-			{ label: 'Memory', show: true, width: 2 },
-		];
-
-		it('dims the other series and thickens the highlighted one', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(3.2);
-			expect(plot.series[2].alpha).toBe(0.16);
-			expect(plot.series[2].width).toBe(2);
-			// Only the stroke changed, so the cached paths are reused.
-			expect(plot.redraw).toHaveBeenCalledWith(false);
-		});
-
-		it('restores every series when the highlight is cleared', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('clear-highlight'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(2);
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('drops the dim when the highlighted series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			// The mock's setSeries doesn't mutate, so mirror what uPlot would do.
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// Otherwise every remaining series stays faded and the panel reads as
-			// an isolation instead of one series being excluded.
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('keeps the dim when a different series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-2'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[2].alpha).toBe(0.16);
-		});
-
-		it('leaves visibility untouched', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -1,5 +1,4 @@
 import { renderHook } from '@testing-library/react';
-import { LegendAction } from 'lib/uPlotV2/components/types';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
 
@@ -12,12 +11,10 @@ const mockUsePlotContext = usePlotContext as jest.MockedFunction<
 describe('useLegendActions', () => {
 	let onToggleSeriesVisibility: jest.Mock;
 	let onToggleSeriesOnOff: jest.Mock;
-	let onShowOnlySeries: jest.Mock;
-	let onShowAllSeries: jest.Mock;
-	let onFocusSeries: jest.Mock;
-	let onHighlightSeries: jest.Mock;
+	let onFocusSeriesPlot: jest.Mock;
 	let setPlotContextInitialState: jest.Mock;
 	let syncSeriesVisibilityToLocalStorage: jest.Mock;
+	let setFocusedSeriesIndexMock: jest.Mock;
 	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
 
 	beforeAll(() => {
@@ -40,20 +37,15 @@ describe('useLegendActions', () => {
 	beforeEach(() => {
 		onToggleSeriesVisibility = jest.fn();
 		onToggleSeriesOnOff = jest.fn();
-		onShowOnlySeries = jest.fn();
-		onShowAllSeries = jest.fn();
-		onFocusSeries = jest.fn();
-		onHighlightSeries = jest.fn();
+		onFocusSeriesPlot = jest.fn();
 		setPlotContextInitialState = jest.fn();
 		syncSeriesVisibilityToLocalStorage = jest.fn();
+		setFocusedSeriesIndexMock = jest.fn();
 
 		mockUsePlotContext.mockReturnValue({
 			onToggleSeriesVisibility,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowAllSeries,
-			onFocusSeries,
-			onHighlightSeries,
+			onFocusSeries: onFocusSeriesPlot,
 			setPlotContextInitialState,
 			syncSeriesVisibilityToLocalStorage,
 		});
@@ -61,65 +53,149 @@ describe('useLegendActions', () => {
 		cancelAnimationFrameSpy.mockClear();
 	});
 
-	describe('visibility actions', () => {
-		it('toggles a single series on row click', () => {
-			const { result } = renderHook(() => useLegendActions());
+	const createMouseEvent = (options: {
+		legendItemId?: number;
+		isMarker?: boolean;
+	}): any => {
+		const { legendItemId, isMarker = false } = options;
 
-			result.current({ type: LegendAction.TOGGLE, seriesIndex: 2 });
+		return {
+			target: {
+				dataset: {
+					...(isMarker ? { isLegendMarker: 'true' } : {}),
+				},
+				closest: jest.fn(() =>
+					legendItemId !== undefined
+						? { dataset: { legendItemId: String(legendItemId) } }
+						: null,
+				),
+			},
+		};
+	};
 
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(2);
-			// The row must never isolate — that is what "Only" is for.
+	describe('onLegendClick', () => {
+		it('toggles series visibility when clicking on legend label', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
+
+			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+		});
+
+		it('toggles series on/off when clicking on marker', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(
+				createMouseEvent({ legendItemId: 0, isMarker: true }),
+			);
+
+			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
 			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 
-		it('forwards the Only and All actions to the plot', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('does nothing when click target is not inside a legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.SHOW_ONLY, seriesIndex: 1 });
-			result.current({ type: LegendAction.SHOW_ALL });
+			result.current.onLegendClick(createMouseEvent({}));
 
-			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
-			expect(onShowAllSeries).toHaveBeenCalled();
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 	});
 
-	describe('hover highlight', () => {
-		it('highlights the hovered series', () => {
-			const { result } = renderHook(() => useLegendActions());
+	describe('onFocusSeries', () => {
+		it('schedules focus update and calls plot focus handler via mouse move', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(2);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
 		});
 
-		it('clears the highlight on leave', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current({ type: LegendAction.HOVER, seriesIndex: null });
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(null);
-		});
-
-		it('coalesces rapid hovers into one frame', () => {
-			const { result } = renderHook(() => useLegendActions());
-
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			result.current({ type: LegendAction.HOVER, seriesIndex: 2 });
-
-			// Each new hover cancels the frame the previous one queued.
 			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
 		});
+	});
 
-		it('cancels a pending highlight frame on unmount', () => {
-			jest
-				.spyOn(global, 'requestAnimationFrame')
-				.mockImplementation((): number => 7);
+	describe('onLegendMouseMove', () => {
+		it('focuses new series when hovering over different legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 0,
+				}),
+			);
 
-			const { result, unmount } = renderHook(() => useLegendActions());
-			result.current({ type: LegendAction.HOVER, seriesIndex: 1 });
-			unmount();
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(7);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
+		});
+
+		it('does nothing when hovering over already focused series', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 1,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+
+			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
+			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseLeave', () => {
+		it('cancels pending animation frame and clears focus state', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseLeave();
+
+			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
 		});
 	});
 });

frontend/src/lib/uPlotV2/hooks/useLegendActions.ts

@@ -1,66 +1,117 @@
-import { useCallback, useEffect, useRef } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 
-import {
-	LegendAction,
-	LegendActionPayload,
-	OnLegendAction,
-} from '../components/types';
-
-/**
- * Legend interactions, bound to the plot through PlotContext. Hover is coalesced
- * to one chart redraw per frame.
- */
-export function useLegendActions(): OnLegendAction {
+export function useLegendActions({
+	setFocusedSeriesIndex,
+	focusedSeriesIndex,
+}: {
+	setFocusedSeriesIndex: Dispatch<SetStateAction<number | null>>;
+	focusedSeriesIndex: number | null;
+}): {
+	onLegendClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onFocusSeries: (seriesIndex: number | null) => void;
+	onLegendMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+} {
 	const {
+		onFocusSeries: onFocusSeriesPlot,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowAllSeries,
-		onHighlightSeries,
+		onToggleSeriesVisibility,
 	} = usePlotContext();
 
-	const rafIdRef = useRef<number | null>(null);
+	const rafId = useRef<number | null>(null); // requestAnimationFrame id
 
-	const cancelPendingHighlight = useCallback((): void => {
-		if (rafIdRef.current != null) {
-			cancelAnimationFrame(rafIdRef.current);
-			rafIdRef.current = null;
+	const getLegendItemIdFromEvent = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): string | undefined => {
+			const target = e.target as HTMLElement | null;
+			if (!target) {
+				return undefined;
+			}
+
+			const legendItemElement = target.closest<HTMLElement>(
+				'[data-legend-item-id]',
+			);
+
+			return legendItemElement?.dataset.legendItemId;
+		},
+		[],
+	);
+
+	const onLegendClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): void => {
+			const legendItemId = getLegendItemIdFromEvent(e);
+			if (!legendItemId) {
+				return;
+			}
+			const isLegendMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+			const seriesIndex = Number(legendItemId);
+
+			if (isLegendMarker) {
+				onToggleSeriesOnOff(seriesIndex);
+				return;
+			}
+
+			onToggleSeriesVisibility(seriesIndex);
+		},
+		[onToggleSeriesVisibility, onToggleSeriesOnOff, getLegendItemIdFromEvent],
+	);
+
+	const onFocusSeries = useCallback(
+		(seriesIndex: number | null): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+			}
+			rafId.current = requestAnimationFrame(() => {
+				setFocusedSeriesIndex(seriesIndex);
+				onFocusSeriesPlot(seriesIndex);
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeriesPlot],
+	);
+
+	const onLegendMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+		const legendItemId = getLegendItemIdFromEvent(e);
+		const seriesIndex = legendItemId ? Number(legendItemId) : null;
+		if (seriesIndex === focusedSeriesIndex) {
+			return;
 		}
-	}, []);
+		onFocusSeries(seriesIndex);
+	};
 
-	useEffect(() => cancelPendingHighlight, [cancelPendingHighlight]);
+	const onLegendMouseLeave = useCallback(
+		(): void => {
+			// Cancel any pending RAF from handleFocusSeries to prevent race condition
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+				rafId.current = null;
+			}
+			setFocusedSeriesIndex(null);
+			onFocusSeries(null);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeries],
+	);
 
-	return useCallback(
-		(payload: LegendActionPayload): void => {
-			switch (payload.type) {
-				case LegendAction.TOGGLE:
-					onToggleSeriesOnOff(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ONLY:
-					onShowOnlySeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ALL:
-					onShowAllSeries();
-					break;
-				case LegendAction.HOVER: {
-					const { seriesIndex } = payload;
-					cancelPendingHighlight();
-					rafIdRef.current = requestAnimationFrame(() => {
-						rafIdRef.current = null;
-						onHighlightSeries(seriesIndex);
-					});
-					break;
-				}
-				default:
-					break;
+	// Cleanup pending animation frames on unmount
+	useEffect(
+		() => (): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
 			}
 		},
-		[
-			cancelPendingHighlight,
-			onHighlightSeries,
-			onShowAllSeries,
-			onShowOnlySeries,
-			onToggleSeriesOnOff,
-		],
+		[],
 	);
+	return {
+		onLegendClick,
+		onFocusSeries,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/fillOpacity.test.ts

@@ -0,0 +1,43 @@
+import {
+	DEFAULT_FILL_OPACITY,
+	GRADIENT_MID_STOP_RATIO,
+	resolveFillOpacity,
+	toAlphaHex,
+} from '../fillOpacity';
+
+describe('resolveFillOpacity', () => {
+	it('falls back to the default for a missing or unusable value', () => {
+		expect(resolveFillOpacity(undefined)).toBe(DEFAULT_FILL_OPACITY);
+		expect(resolveFillOpacity(null)).toBe(DEFAULT_FILL_OPACITY);
+		expect(resolveFillOpacity(NaN)).toBe(DEFAULT_FILL_OPACITY);
+	});
+
+	it('keeps 0 rather than treating it as absent', () => {
+		expect(resolveFillOpacity(0)).toBe(0);
+	});
+
+	it('clamps to 0–1', () => {
+		expect(resolveFillOpacity(-0.5)).toBe(0);
+		expect(resolveFillOpacity(2)).toBe(1);
+	});
+});
+
+describe('toAlphaHex', () => {
+	// The alphas hardcoded before opacity was configurable.
+	it('reproduces the legacy solid alpha at the default opacity', () => {
+		expect(toAlphaHex(DEFAULT_FILL_OPACITY)).toBe('70');
+	});
+
+	it('reproduces the legacy gradient mid-stop alpha at the default opacity', () => {
+		expect(toAlphaHex(DEFAULT_FILL_OPACITY * GRADIENT_MID_STOP_RATIO)).toBe('40');
+	});
+
+	it('pads a single-digit alpha', () => {
+		expect(toAlphaHex(0)).toBe('00');
+		expect(toAlphaHex(0.02)).toBe('05');
+	});
+
+	it('maps a full opacity to ff', () => {
+		expect(toAlphaHex(1)).toBe('ff');
+	});
+});

frontend/src/lib/uPlotV2/utils/fillOpacity.ts

@@ -0,0 +1,22 @@
+/**
+ * `0x70 / 255` reproduces the alpha the fill modes hardcoded before opacity was
+ * configurable, so a series that declares none renders byte-identically.
+ */
+export const DEFAULT_FILL_OPACITY = 0x70 / 255;
+
+/** Alpha ratio between a gradient's two stops, so it keeps its falloff at any opacity. */
+export const GRADIENT_MID_STOP_RATIO = 0x40 / 0x70;
+
+/** Clamps into 0–1; missing or non-finite falls back to the default. */
+export function resolveFillOpacity(opacity?: number | null): number {
+	if (typeof opacity !== 'number' || !Number.isFinite(opacity)) {
+		return DEFAULT_FILL_OPACITY;
+	}
+	return Math.min(1, Math.max(0, opacity));
+}
+
+/** 0–1 opacity → the two-digit hex alpha suffix appended to an `#rrggbb` colour. */
+export function toAlphaHex(opacity: number): string {
+	const alpha = Math.round(resolveFillOpacity(opacity) * 255);
+	return alpha.toString(16).padStart(2, '0');
+}

frontend/src/lib/uPlotV2/utils/generateGradientFill.ts

@@ -1,9 +1,16 @@
 import uPlot from 'uplot';
 
+import {
+	DEFAULT_FILL_OPACITY,
+	GRADIENT_MID_STOP_RATIO,
+	toAlphaHex,
+} from './fillOpacity';
+
 export function generateGradientFill(
 	uPlotInstance: uPlot,
 	startColor: string,
 	endColor: string,
+	opacity: number = DEFAULT_FILL_OPACITY,
 ): CanvasGradient {
 	const g = uPlotInstance.ctx.createLinearGradient(
 		0,
@@ -11,8 +18,11 @@ export function generateGradientFill(
 		0,
 		uPlotInstance.bbox.height,
 	);
-	g.addColorStop(0, `${startColor}70`);
-	g.addColorStop(0.6, `${startColor}40`);
+	g.addColorStop(0, `${startColor}${toAlphaHex(opacity)}`);
+	g.addColorStop(
+		0.6,
+		`${startColor}${toAlphaHex(opacity * GRADIENT_MID_STOP_RATIO)}`,
+	);
 	g.addColorStop(1, endColor);
 	return g;
 }

frontend/src/lib/visualization/charts/Pie/Pie.tsx

@@ -45,7 +45,9 @@ export default function Pie({
 		visibleData,
 		legendItems,
 		focusedSeriesIndex,
-		onLegendAction,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	} = usePieInteractions(data, id);
 
 	const {
@@ -225,7 +227,9 @@ export default function Pie({
 					position={position}
 					averageLegendWidth={averageLegendWidth}
 					focusedSeriesIndex={focusedSeriesIndex}
-					onAction={onLegendAction}
+					onClick={onLegendClick}
+					onMouseMove={onLegendMouseMove}
+					onMouseLeave={onLegendMouseLeave}
 				/>
 			</div>
 		</div>

frontend/src/lib/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -100,29 +100,17 @@ describe('Pie', () => {
 		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
 	});
 
-	it('isolates a slice when its legend row is clicked with everything showing', () => {
+	it('hides a slice when its legend marker is clicked', () => {
 		renderPie();
 		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
 		expect(svg.querySelectorAll('path')).toHaveLength(3);
 
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-
-		// Nothing visible to exclude, so the click isolates: one arc left.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
-	});
-
-	it('excludes a slice when its legend row is clicked with others already hidden', () => {
-		renderPie();
-		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
-
-		// Isolate, then add a second slice back, so nothing is isolated any more.
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-		fireEvent.click(screen.getByTestId('legend-item-0'));
-		expect(svg.querySelectorAll('path')).toHaveLength(2);
-
-		fireEvent.click(screen.getByTestId('legend-item-0'));
+		const marker = document.querySelector(
+			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
+		) as HTMLElement;
+		fireEvent.click(marker);
 
 		// One slice hidden → one fewer arc drawn.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
+		expect(svg.querySelectorAll('path')).toHaveLength(2);
 	});
 });

frontend/src/lib/visualization/charts/__tests__/utils.test.ts

@@ -1,9 +1,6 @@
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import {
-	calculateAverageLegendWidth,
-	calculateChartDimensions,
-} from 'lib/visualization/charts/utils';
+import { calculateChartDimensions } from 'lib/visualization/charts/utils';
 
 const labels = (count: number, length = 20): string[] =>
 	Array.from({ length: count }, (_, i) =>
@@ -52,104 +49,63 @@ describe('calculateChartDimensions', () => {
 		expect(dims.width).toBe(784);
 	});
 
-	it('RIGHT: never shrinks the column below the floor that fits its chrome', () => {
+	it('RIGHT: never shrinks the column below the 150px floor', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 400,
 			legendConfig: { position: LegendPosition.RIGHT },
 			seriesLabels: labels(3, 3),
 		});
-		expect(dims.legendWidth).toBe(190);
-		expect(dims.width).toBe(810);
+		expect(dims.legendWidth).toBe(150);
+		expect(dims.width).toBe(850);
 	});
 
-	it('RIGHT: on a narrow container the legend keeps its chrome, up to half the width', () => {
+	it('RIGHT: on a narrow container the legend never takes more than 40% of the width', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 300,
 			containerHeight: 400,
 			legendConfig: { position: LegendPosition.RIGHT },
 			seriesLabels: labels(10, 40),
 		});
-		// 40% is 120px, too narrow for the column's own toolbar.
-		expect(dims.legendWidth).toBe(150);
-		expect(dims.width).toBe(150);
+		expect(dims.legendWidth).toBe(120);
+		expect(dims.width).toBe(180);
 	});
 
-	it('RIGHT: stops widening the column once the panel is narrower than its chrome', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 200,
-			containerHeight: 400,
-			legendConfig: { position: LegendPosition.RIGHT },
-			seriesLabels: labels(10, 40),
-		});
-		expect(dims.legendWidth).toBe(100);
-		expect(dims.width).toBe(100);
-	});
-
-	it('BOTTOM: items that fit one row reserve exactly one row', () => {
+	it('BOTTOM: a single row of items reserves one legend row', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(3),
 		});
-		// One 28px row + the wrapper's 12px bottom padding.
+		// One row = line height (28) + padding (12).
 		expect(dims.legendHeight).toBe(40);
 		expect(dims.height).toBe(460);
 		expect(dims.legendWidth).toBe(1000);
 	});
 
-	it('BOTTOM: more items than one row reserve exactly two rows', () => {
+	it('BOTTOM: many items cap at two rows on a tall container', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
-		// clipped third row, and none left over.
-		expect(dims.legendHeight).toBe(70);
-		expect(dims.height).toBe(430);
+		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
+		expect(dims.legendHeight).toBe(68);
+		expect(dims.height).toBe(432);
 	});
 
-	it('BOTTOM: items one past a row still reserve two rows', () => {
-		// 1000px wide fits 5 of these per row, so 6 items need a second row.
+	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(6),
-		});
-		expect(dims.legendHeight).toBe(70);
-	});
-
-	it('BOTTOM: drops to a single row rather than take half a short panel', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 120,
+			containerHeight: 160,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// A whole row goes rather than a clipped one being reserved.
-		expect(dims.legendHeight).toBe(40);
-		expect(dims.height).toBe(80);
-	});
-});
-
-describe('calculateAverageLegendWidth', () => {
-	it('scales with the label length', () => {
-		// 16px of chrome + 30 chars at 8px.
-		expect(calculateAverageLegendWidth(labels(4, 30))).toBe(256);
-	});
-
-	it('never drops below what a row needs to contain its hover actions', () => {
-		// Short or unnamed series would otherwise size a column the actions
-		// escape, spilling over the item beside it.
-		expect(calculateAverageLegendWidth(['cpu'])).toBe(110);
-		expect(calculateAverageLegendWidth([''])).toBe(110);
-	});
-
-	it('keeps the default estimate when there are no labels to measure', () => {
-		expect(calculateAverageLegendWidth([])).toBe(120);
+		// Without the height-relative cap the legend would take 68px of a 160px
+		// panel and the chart (pie especially) collapses to a sliver.
+		expect(dims.legendHeight).toBe(48); // 30% of 160
+		expect(dims.height).toBe(112);
 	});
 });

frontend/src/lib/visualization/charts/utils.ts

@@ -1,10 +1,4 @@
-import {
-	LEGEND_MAX_BOTTOM_ROWS,
-	MIN_LEGEND_ITEM_WIDTH,
-	LEGEND_ROW_GAP,
-	LEGEND_ROW_HEIGHT,
-	MAX_LEGEND_WIDTH,
-} from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 export interface ChartDimensions {
 	width: number;
@@ -19,31 +13,22 @@ const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
 const BASE_LEGEND_WIDTH = 16;
 const LEGEND_PADDING = 12;
-// Two rows are worth having, but not at the cost of half the panel.
-const MAX_SHORT_PANEL_LEGEND_RATIO = 0.5;
+const LEGEND_LINE_HEIGHT = 28;
 
 // RIGHT legend is a vertical column with its own width budget (cap protects the donut).
 const MAX_RIGHT_LEGEND_WIDTH = 320;
 const RIGHT_LEGEND_WIDTH_RATIO = 0.4;
 // Column padding + copy button, not covered by the text-length estimate.
 const RIGHT_LEGEND_RESERVED_WIDTH = 40;
-// Fits the toolbar's "Showing N of M series" readout plus the wrapper padding.
-const MIN_RIGHT_LEGEND_WIDTH = 190;
-// Past this the split inverts and the chart becomes the smaller half.
-const RIGHT_LEGEND_FLOOR_RATIO = 0.5;
 
 /**
  * Calculates the average width of the legend items based on the labels of the series.
- * Never returns less than a legend row needs to hold its own hover actions.
  * @param legends - The labels of the series.
  * @returns The average width of the legend items.
  */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return Math.max(
-			MIN_LEGEND_ITEM_WIDTH,
-			DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH,
-		);
+		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
 	}
 
 	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
@@ -51,10 +36,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
 	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
 	const percentileLength = lengths[Math.max(0, index)];
 
-	return Math.max(
-		MIN_LEGEND_ITEM_WIDTH,
-		BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH,
-	);
+	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
 }
 
 /**
@@ -70,9 +52,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
  *   - Chart width is `containerWidth - legendWidth`.
  * - BOTTOM legend:
  *   - Computes how many items fit per row, then uses at most 2 rows.
- *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
- *     the rectangle never clips a row or reserves space for half of one. Two
- *     rows that would take half a short panel fall back to one row.
+ *   - `legendHeight` is derived from row count, capped by both a fixed pixel max and a % of container height.
  *   - Chart height is `containerHeight - legendHeight`, never below 0.
  * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
  *
@@ -120,14 +100,9 @@ export function calculateChartDimensions({
 			MAX_RIGHT_LEGEND_WIDTH,
 			containerWidth * RIGHT_LEGEND_WIDTH_RATIO,
 		);
-		// The column's chrome outranks the 40% share on a narrow panel.
-		const floorWidth = Math.min(
-			MIN_RIGHT_LEGEND_WIDTH,
-			containerWidth * RIGHT_LEGEND_FLOOR_RATIO,
-		);
 		const rightLegendWidth = Math.min(
-			Math.max(MIN_RIGHT_LEGEND_WIDTH, desiredLegendWidth),
-			Math.max(floorWidth, maxRightLegendWidth),
+			Math.max(150, desiredLegendWidth),
+			maxRightLegendWidth,
 		);
 
 		return {
@@ -140,6 +115,8 @@ export function calculateChartDimensions({
 		};
 	}
 
+	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
+
 	const legendItemWidth = Math.ceil(
 		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
 	);
@@ -148,30 +125,30 @@ export function calculateChartDimensions({
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
 	);
 
-	// The wrapper's bottom padding is inside this height (border-box).
-	const heightForRows = (rowCount: number): number =>
-		rowCount * LEGEND_ROW_HEIGHT +
-		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING;
-
-	const neededRowCount = Math.max(
-		1,
-		Math.min(
-			LEGEND_MAX_BOTTOM_ROWS,
-			Math.ceil(legendItemCount / legendItemsPerRow),
-		),
+	const legendRowCount = Math.min(
+		2,
+		Math.ceil(legendItemCount / legendItemsPerRow),
 	);
 
-	// Without this, short grid panels hand most of their area to the legend and
-	// the chart — the pie donut especially — collapses to a sliver. Dropping a
-	// whole row beats clipping one.
-	const legendRowCount =
-		neededRowCount > 1 &&
-		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
-			? 1
-			: neededRowCount;
+	const idealBottomLegendHeight =
+		legendRowCount > 1
+			? legendRowCount * legendRowHeight - LEGEND_PADDING
+			: legendRowHeight;
 
-	const bottomLegendHeight = heightForRows(legendRowCount);
+	// Cap at two rows / 80px, and never more than 30% of the container height
+	// (the doc above always promised the %-cap; without it, short grid panels
+	// hand most of their area to the legend and the chart — the pie donut
+	// especially — collapses to a sliver). 30% mirrors the RIGHT-legend width cap.
+	const maxAllowedLegendHeight = Math.min(
+		2 * legendRowHeight,
+		80,
+		Math.floor(containerHeight * 0.3),
+	);
+
+	const bottomLegendHeight = Math.min(
+		idealBottomLegendHeight,
+		maxAllowedLegendHeight,
+	);
 
 	return {
 		width: containerWidth,

frontend/src/lib/visualization/charts/utils/__tests__/stackSeriesUtils.test.ts

@@ -137,6 +137,15 @@ describe('stackSeries', () => {
 			]);
 		});
 
+		it('tops out at exactly 100 for values that do not divide cleanly', () => {
+			// Accumulating each slice's share drifts past 100 and stretches the y axis.
+			const data: AlignedData = [[1], [63], [78], [44]];
+
+			const [, top] = stackSeries(data, includeAll, StackMode.Percent).data;
+
+			expect(top[0]).toBe(100);
+		});
+
 		it('yields 0 across a column whose signed total cancels to zero', () => {
 			const data: AlignedData = [[1], [10], [-10]];
 

frontend/src/lib/visualization/charts/utils/stackSeriesUtils.ts

@@ -42,45 +42,11 @@ interface BuildStackedSeriesParams {
 	mode: StackMode;
 }
 
-/** Per-point total. Mixed-sign columns sum signed, as "share of total" implies. */
-function columnTotals({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: Omit<BuildStackedSeriesParams, 'mode'>): number[] {
-	const totals = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = 1; seriesIndex <= valueSeriesCount; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const rawValues = data[seriesIndex] as (number | null)[];
-		rawValues.forEach((rawValue, pointIndex) => {
-			totals[pointIndex] += rawValue == null ? 0 : Number(rawValue);
-		});
-	}
-
-	return totals;
-}
-
 /** A column whose participating series sum to 0 has no share to divide, so every slice is 0. */
 function toPercent(value: number, total: number): number {
 	return total === 0 ? 0 : (value / total) * 100;
 }
 
-/** What a raw value adds to the stack at a given point. */
-type Contribution = (value: number, pointIndex: number) => number;
-
-function contributionForMode(params: BuildStackedSeriesParams): Contribution {
-	if (params.mode !== StackMode.Percent) {
-		return (value): number => value;
-	}
-	// Resolved up front: totals span series the accumulation below has not reached yet.
-	const totals = columnTotals(params);
-	return (value, pointIndex): number => toPercent(value, totals[pointIndex]);
-}
-
 /**
  * Accumulate from last series upward: last series = raw values, first = total.
  * Omitted series are copied as-is (no accumulation).
@@ -93,14 +59,7 @@ function buildStackedSeries({
 	mode,
 }: BuildStackedSeriesParams): (number | null)[][] {
 	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-	const contributionOf = contributionForMode({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-		mode,
-	});
+	const columnTotals = Array(pointCount).fill(0) as number[];
 
 	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
 		const rawValues = data[seriesIndex] as (number | null)[];
@@ -110,14 +69,27 @@ function buildStackedSeries({
 		} else {
 			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
 				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += contributionOf(
-					numericValue,
-					pointIndex,
-				));
+				return (columnTotals[pointIndex] += numericValue);
 			});
 		}
 	}
 
+	if (mode !== StackMode.Percent) {
+		return stackedSeries;
+	}
+
+	// Scale the running totals once they are final rather than accumulating per-slice
+	// percentages: the topmost series then divides the total by itself and lands on
+	// exactly 100, where accumulated shares drift past it and stretch the y axis.
+	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
+		if (omit(seriesIndex)) {
+			continue;
+		}
+		stackedSeries[seriesIndex - 1] = stackedSeries[seriesIndex - 1].map(
+			(value, pointIndex) => toPercent(value as number, columnTotals[pointIndex]),
+		);
+	}
+
 	return stackedSeries;
 }
 

frontend/src/lib/visualization/hooks/__tests__/usePieInteractions.test.tsx

@@ -1,9 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
-import { LegendAction } from 'lib/uPlotV2/components/types';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
 } from 'lib/visualization/panels/utils/legendVisibilityUtils';
+import type { MouseEvent } from 'react';
 
 import { PieSlice } from 'lib/visualization/charts/types';
 import { usePieInteractions } from 'lib/visualization/hooks/usePieInteractions';
@@ -24,6 +24,22 @@ const DATA: PieSlice[] = [
 	{ label: 'checkout', value: 40, color: '#c' },
 ];
 
+// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
+// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
+function legendEvent(
+	index: number | null,
+	isMarker = false,
+): MouseEvent<HTMLDivElement> {
+	const itemEl =
+		index == null ? null : { dataset: { legendItemId: String(index) } };
+	return {
+		target: {
+			closest: (): unknown => itemEl,
+			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
+		},
+	} as unknown as MouseEvent<HTMLDivElement>;
+}
+
 describe('usePieInteractions', () => {
 	beforeEach(() => {
 		mockGetStored.mockReturnValue(null);
@@ -43,16 +59,11 @@ describe('usePieInteractions', () => {
 		expect(result.current.active).toBeNull();
 	});
 
-	describe('row toggle', () => {
+	describe('marker click (toggle one)', () => {
 		it('hides then unhides the clicked slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
 			expect(result.current.legendItems[1].show).toBe(false);
@@ -62,50 +73,18 @@ describe('usePieInteractions', () => {
 				{ label: 'checkout', show: true },
 			]);
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 			expect(result.current.legendItems[1].show).toBe(true);
 		});
 	});
 
-	describe('the last slice showing', () => {
-		it('cannot be hidden', () => {
+	describe('label click (isolate / reset)', () => {
+		it('isolates the clicked slice, then resets on a second click', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 0,
-				}),
-			);
-
-			// An empty donut is never a state worth reaching.
-			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
-		});
-	});
-
-	describe('Only', () => {
-		it('isolates the slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
 			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
@@ -113,39 +92,8 @@ describe('usePieInteractions', () => {
 				false,
 				false,
 			]);
-		});
 
-		it('switches the isolation to another slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 2,
-				}),
-			);
-
-			expect(result.current.visibleData).toStrictEqual([DATA[2]]);
-		});
-	});
-
-	describe('All', () => {
-		it('brings every hidden slice back', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.SHOW_ONLY,
-					seriesIndex: 0,
-				}),
-			);
-			act(() => result.current.onLegendAction({ type: LegendAction.SHOW_ALL }));
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 		});
@@ -155,37 +103,11 @@ describe('usePieInteractions', () => {
 		it('focuses the hovered slice and clears on leave', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 2 }),
-			);
+			act(() => result.current.onLegendMouseMove(legendEvent(2)));
 			expect(result.current.active).toStrictEqual(DATA[2]);
 			expect(result.current.focusedSeriesIndex).toBe(2);
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.HOVER,
-					seriesIndex: null,
-				}),
-			);
-			expect(result.current.active).toBeNull();
-			expect(result.current.focusedSeriesIndex).toBeNull();
-		});
-
-		it('drops the focus when the focused slice is hidden', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 1 }),
-			);
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
-
-			// Otherwise every remaining arc stays dimmed and the donut reads as an
-			// isolation instead of one slice being excluded.
+			act(() => result.current.onLegendMouseLeave());
 			expect(result.current.active).toBeNull();
 			expect(result.current.focusedSeriesIndex).toBeNull();
 		});
@@ -193,15 +115,8 @@ describe('usePieInteractions', () => {
 		it('does not focus a hidden slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 1,
-				}),
-			);
-			act(() =>
-				result.current.onLegendAction({ type: LegendAction.HOVER, seriesIndex: 1 }),
-			);
+			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
+			act(() => result.current.onLegendMouseMove(legendEvent(1)));
 
 			expect(result.current.active).toBeNull();
 		});
@@ -210,12 +125,7 @@ describe('usePieInteractions', () => {
 	describe('persistence', () => {
 		it('does not write to storage when no id is provided', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
-			act(() =>
-				result.current.onLegendAction({
-					type: LegendAction.TOGGLE,
-					seriesIndex: 0,
-				}),
-			);
+			act(() => result.current.onLegendClick(legendEvent(0, true)));
 			expect(mockUpdateStored).not.toHaveBeenCalled();
 		});
 

frontend/src/lib/visualization/hooks/usePieInteractions.ts

@@ -1,11 +1,6 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
-import {
-	LegendAction,
-	LegendActionPayload,
-	OnLegendAction,
-} from 'lib/uPlotV2/components/types';
-import type { Dispatch, SetStateAction } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
 	getStoredSeriesVisibility,
@@ -23,15 +18,27 @@ export interface UsePieInteractionsResult {
 	legendItems: LegendItem[];
 	/** Index of the active slice for the legend's focus highlight, or null. */
 	focusedSeriesIndex: number | null;
-	/** Every legend interaction, dispatched by type. */
-	onLegendAction: OnLegendAction;
+	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+}
+
+// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
+// event target (the shared Legend tags each item with its seriesIndex).
+function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
+	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
+		'[data-legend-item-id]',
+	);
+	const id = el?.dataset.legendItemId;
+	return id != null ? Number(id) : null;
 }
 
 /**
- * Pie interaction + derived state: hover/focus, slice hide/show driven by the
- * shared legend's actions, and persistence of the hidden set to localStorage
- * (keyed by `id`, matched by label) so it survives reloads. Returns the visible
- * slices, legend items, focus index, and the legend action dispatch.
+ * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
+ * uPlot legend — marker toggles one, label isolates), and persistence of the
+ * hidden set to localStorage (keyed by `id`, matched by label) so it survives
+ * reloads. Returns the visible slices, legend items, focus index, and the
+ * legend container handlers.
  */
 export function usePieInteractions(
 	data: PieSlice[],
@@ -41,6 +48,7 @@ export function usePieInteractions(
 	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
 		() => new Set(),
 	);
+	const isolatedIndexRef = useRef<number | null>(null);
 
 	const legendItems = useMemo<LegendItem[]>(
 		() =>
@@ -96,88 +104,65 @@ export function usePieInteractions(
 		[id, data],
 	);
 
-	const hoverSeries = useCallback(
-		(sliceIndex: number | null): void => {
+	const onLegendMouseMove = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
 			// Don't focus/dim for hidden slices — they aren't on the donut.
-			setActive(
-				sliceIndex != null && !hiddenIndices.has(sliceIndex)
-					? data[sliceIndex]
-					: null,
-			);
+			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
 		},
 		[data, hiddenIndices],
 	);
 
-	const toggleSeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set(hiddenIndices);
-			if (next.has(sliceIndex)) {
-				next.delete(sliceIndex);
-			} else {
-				// An empty donut is never worth reaching.
-				if (data.length - next.size <= 1) {
-					return;
-				}
-				next.add(sliceIndex);
+	// Marker click toggles just that slice on/off; label click isolates it
+	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
+	const onLegendClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			if (index == null) {
+				return;
 			}
-			applyHidden(next);
-		},
-		[data.length, hiddenIndices, applyHidden],
-	);
+			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
 
-	const showOnlySeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set<number>();
-			data.forEach((_, index) => {
-				if (index !== sliceIndex) {
+			if (isMarker) {
+				const next = new Set(hiddenIndices);
+				if (next.has(index)) {
+					next.delete(index);
+				} else {
 					next.add(index);
 				}
+				applyHidden(next);
+				return;
+			}
+
+			const isReset = isolatedIndexRef.current === index;
+			isolatedIndexRef.current = isReset ? null : index;
+			if (isReset) {
+				applyHidden(new Set());
+				return;
+			}
+			const next = new Set<number>();
+			data.forEach((_, i) => {
+				if (i !== index) {
+					next.add(i);
+				}
 			});
 			applyHidden(next);
 		},
-		[data, applyHidden],
+		[data, hiddenIndices, applyHidden],
 	);
 
-	const showAllSeries = useCallback(
-		(): void => applyHidden(new Set()),
-		[applyHidden],
-	);
+	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
 
-	const onLegendAction = useCallback(
-		(payload: LegendActionPayload): void => {
-			switch (payload.type) {
-				case LegendAction.TOGGLE:
-					toggleSeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ONLY:
-					showOnlySeries(payload.seriesIndex);
-					break;
-				case LegendAction.SHOW_ALL:
-					showAllSeries();
-					break;
-				case LegendAction.HOVER:
-					hoverSeries(payload.seriesIndex);
-					break;
-				default:
-					break;
-			}
-		},
-		[toggleSeries, showOnlySeries, showAllSeries, hoverSeries],
-	);
-
-	const activeIndex = active ? data.indexOf(active) : -1;
-	// Left active, a hidden slice keeps every other arc dimmed, which reads as an
-	// isolation rather than as one slice being excluded.
-	const effectiveActive =
-		activeIndex >= 0 && !hiddenIndices.has(activeIndex) ? active : null;
-	const focusedIndex = effectiveActive ? activeIndex : -1;
+	const focusedIndex = active ? data.indexOf(active) : -1;
 
 	return {
-		active: effectiveActive,
+		active,
 		setActive,
 		visibleData,
 		legendItems,
 		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
-		onLegendAction,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	};
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -29,6 +29,7 @@
 		box-sizing: border-box;
 		min-height: 0;
 		overflow: hidden;
-		padding: 0 12px 12px 12px;
+		padding-left: 12px;
+		padding-bottom: 12px;
 	}
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'lib/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSlider/ConfigSlider.module.scss

@@ -0,0 +1,23 @@
+.row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.slider {
+	flex: 1;
+	min-width: 0;
+	// The design-system slider insets its track by half a thumb on each side so the
+	// fill follows the thumb's centre. Pull that inset back off the row so the track
+	// lines up with the other controls; the thumb never paints past the track edge.
+	margin-inline: calc(var(--slider-thumb-width, 18px) / -2);
+}
+
+.value {
+	flex-shrink: 0;
+	min-width: 36px;
+	text-align: right;
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+	color: var(--l3-foreground);
+}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/ConfigSlider/ConfigSlider.tsx

@@ -0,0 +1,47 @@
+import { Slider } from '@signozhq/ui/slider';
+
+import styles from './ConfigSlider.module.scss';
+
+interface ConfigSliderProps {
+	testId: string;
+	value: number;
+	min: number;
+	max: number;
+	step: number;
+	/** Renders the current value beside the track (e.g. as a percentage). */
+	formatValue?: (value: number) => string;
+	onChange: (value: number) => void;
+}
+
+/**
+ * Numeric slider for the config sections. The design-system Slider is multi-thumb
+ * capable, so its callback hands back `number | number[]`; this narrows to one thumb.
+ */
+function ConfigSlider({
+	testId,
+	value,
+	min,
+	max,
+	step,
+	formatValue,
+	onChange,
+}: ConfigSliderProps): JSX.Element {
+	return (
+		<div className={styles.row}>
+			<Slider
+				testId={testId}
+				className={styles.slider}
+				value={value}
+				min={min}
+				max={max}
+				step={step}
+				onChange={(next): void => onChange(Array.isArray(next) ? next[0] : next)}
+			/>
+			<span className={styles.value}>
+				{formatValue ? formatValue(value) : value}
+			</span>
+		</div>
+	);
+}
+
+export default ConfigSlider;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx

@@ -2,16 +2,16 @@ import type { ComponentType } from 'react';
 import type {
 	DashboardtypesLinkDTO,
 	DashboardtypesAxesDTO,
-	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesHistogramBucketsDTO,
 	DashboardtypesLegendDTO,
 	DashboardtypesPanelSpecDTO,
-	DashboardtypesTimeSeriesChartAppearanceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	SectionKind,
 	type AnyThreshold,
+	type PanelChartAppearanceSlice,
 	type PanelFormattingSlice,
+	type PanelVisualizationSlice,
 	type SectionEditorProps,
 	type SectionSpecMap,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
@@ -94,21 +94,15 @@ export const SECTION_REGISTRY: {
 	},
 	[SectionKind.ChartAppearance]: {
 		Component: ChartAppearanceSection,
-		get: (spec): DashboardtypesTimeSeriesChartAppearanceDTO | undefined =>
-			getPluginSlice<DashboardtypesTimeSeriesChartAppearanceDTO>(
-				spec,
-				'chartAppearance',
-			),
+		get: (spec): PanelChartAppearanceSlice | undefined =>
+			getPluginSlice<PanelChartAppearanceSlice>(spec, 'chartAppearance'),
 		update: (spec, chartAppearance): PanelSpec =>
 			updatePluginSlice(spec, 'chartAppearance', chartAppearance),
 	},
 	[SectionKind.Visualization]: {
 		Component: VisualizationSection,
-		get: (spec): DashboardtypesBarChartVisualizationDTO | undefined =>
-			getPluginSlice<DashboardtypesBarChartVisualizationDTO>(
-				spec,
-				'visualization',
-			),
+		get: (spec): PanelVisualizationSlice | undefined =>
+			getPluginSlice<PanelVisualizationSlice>(spec, 'visualization'),
 		update: (spec, visualization): PanelSpec =>
 			updatePluginSlice(spec, 'visualization', visualization),
 	},

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -9,8 +9,11 @@ import type {
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
+import { resolveFillOpacity } from 'lib/uPlotV2/utils/fillOpacity';
+
 import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
+import ConfigSlider from '../../controls/ConfigSlider/ConfigSlider';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
 import { SegmentIcon } from '../../controls/segmentIcons';
 import type { SectionEditorContext } from '../../sectionContext';
@@ -72,10 +75,21 @@ const FILL_MODE_OPTIONS = [
 	},
 ];
 
+// An always-filled kind's wire enum (`AreaFillMode`) has no `none`.
+const FILLED_FILL_MODE_OPTIONS = FILL_MODE_OPTIONS.filter(
+	(option) => option.value !== DashboardtypesFillModeDTO.none,
+);
+
+const FILL_OPACITY_STEP = 0.01;
+
+function formatOpacity(opacity: number): string {
+	return `${Math.round(opacity * 100)}%`;
+}
+
 /**
  * Edits the `chartAppearance` slice of a TimeSeries panel spec: line style /
- * interpolation, fill mode, point markers, and the connect-null-gaps threshold. Each
- * control is gated by its `controls` flag.
+ * interpolation, fill mode, fill opacity, point markers, and the connect-null-gaps
+ * threshold. Each control is gated by its `controls` flag.
  */
 function ChartAppearanceSection({
 	value,
@@ -124,7 +138,9 @@ function ChartAppearanceSection({
 					<ConfigSegmented
 						testId="panel-editor-v2-fill-mode"
 						value={value?.fillMode}
-						items={FILL_MODE_OPTIONS}
+						items={
+							controls.fillOpacity ? FILLED_FILL_MODE_OPTIONS : FILL_MODE_OPTIONS
+						}
 						onChange={(next): void =>
 							onChange({ ...value, fillMode: next as DashboardtypesFillModeDTO })
 						}
@@ -132,6 +148,22 @@ function ChartAppearanceSection({
 				</div>
 			)}
 
+			{controls.fillOpacity && (
+				<div className={styles.field}>
+					<Typography.Text>Fill opacity</Typography.Text>
+					<ConfigSlider
+						testId="panel-editor-v2-fill-opacity"
+						// The chart's own default, so the thumb starts where an unset fill renders.
+						value={resolveFillOpacity(value?.fillOpacity)}
+						min={0}
+						max={1}
+						step={FILL_OPACITY_STEP}
+						formatValue={formatOpacity}
+						onChange={(fillOpacity): void => onChange({ ...value, fillOpacity })}
+					/>
+				</div>
+			)}
+
 			{controls.showPoints && (
 				<ConfigSwitch
 					testId="panel-editor-v2-show-points"

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/ChartAppearanceSection.test.tsx

@@ -5,6 +5,7 @@ import {
 	DashboardtypesLineStyleDTO,
 	type DashboardtypesTimeSeriesChartAppearanceDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { DEFAULT_FILL_OPACITY } from 'lib/uPlotV2/utils/fillOpacity';
 
 import ChartAppearanceSection from '../ChartAppearanceSection';
 
@@ -104,6 +105,66 @@ describe('ChartAppearanceSection', () => {
 		});
 	});
 
+	it('shows the fill opacity at the chart default when the spec omits it', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-fill-opacity'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(`${Math.round(DEFAULT_FILL_OPACITY * 100)}%`),
+		).toBeInTheDocument();
+	});
+
+	it('renders the stored fill opacity as a percentage', () => {
+		render(
+			<ChartAppearanceSection
+				value={{ fillOpacity: 0.25 }}
+				controls={{ fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('25%')).toBeInTheDocument();
+	});
+
+	it('offers no None fill mode to a kind that declares fill opacity', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillMode: true, fillOpacity: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('Solid')).toBeInTheDocument();
+		expect(screen.getByText('Gradient')).toBeInTheDocument();
+		expect(screen.queryByText('None')).not.toBeInTheDocument();
+		expect(
+			screen.getByTestId('panel-editor-v2-fill-opacity'),
+		).toBeInTheDocument();
+	});
+
+	it('offers all three fill modes to a kind that can be unfilled', () => {
+		render(
+			<ChartAppearanceSection
+				value={undefined}
+				controls={{ fillMode: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByText('None')).toBeInTheDocument();
+		expect(screen.getByText('Solid')).toBeInTheDocument();
+		expect(screen.getByText('Gradient')).toBeInTheDocument();
+	});
+
 	it('writes the chosen line interpolation through the dropdown', async () => {
 		const onChange = jest.fn();
 		render(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/VisualizationSection.tsx

@@ -1,14 +1,17 @@
 import { Typography } from '@signozhq/ui/typography';
+import type { DashboardtypesStackModeDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import { EQueryType } from 'types/common/dashboard';
 
+import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
 import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
 import PanelTypeSwitcher from '../../PanelTypeSwitcher/PanelTypeSwitcher';
 import type { SectionEditorContext } from '../../sectionContext';
+import { STACK_MODE_OPTIONS } from './stackModeOptions';
 import { TIME_PREFERENCE_OPTIONS } from './timePreferenceOptions';
 
 import styles from './VisualizationSection.module.scss';
@@ -21,9 +24,10 @@ type VisualizationSectionProps = SectionEditorProps<SectionKind.Visualization> &
 
 /**
  * Edits the `visualization` slice: the panel-type switcher (`switchPanelKind`, every
- * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only), and
- * gap filling (`fillSpans`, TimeSeries only). Each control is gated by its `controls`
- * flag, so a kind only renders — and only writes — the fields its spec supports.
+ * kind), the per-panel time preference, bar stacking (`stackedBarChart`, Bar only),
+ * area stacking (`stack`, Area only) and gap filling (`fillSpans`). Each control is
+ * gated by its `controls` flag, so a kind only renders — and only writes — the fields
+ * its spec supports.
  */
 function VisualizationSection({
 	value,
@@ -77,6 +81,20 @@ function VisualizationSection({
 				/>
 			)}
 
+			{controls.stackMode && (
+				<div className={styles.field}>
+					<Typography.Text>Stack series</Typography.Text>
+					<ConfigSegmented
+						testId="panel-editor-v2-stack-mode"
+						value={value?.stack}
+						items={STACK_MODE_OPTIONS}
+						onChange={(next): void =>
+							onChange({ ...value, stack: next as DashboardtypesStackModeDTO })
+						}
+					/>
+				</div>
+			)}
+
 			{controls.fillSpans && (
 				<ConfigSwitch
 					testId="panel-editor-v2-fill-spans"

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -1,6 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DashboardtypesTimePreferenceDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	DashboardtypesStackModeDTO,
+	DashboardtypesTimePreferenceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import VisualizationSection from '../VisualizationSection';
 
@@ -115,6 +118,43 @@ describe('VisualizationSection', () => {
 		});
 	});
 
+	it('writes the chosen stack mode through the segmented control', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+		render(
+			<VisualizationSection
+				value={{ fillSpans: true }}
+				controls={{ switchPanelKind: true, stackMode: true }}
+				onChange={onChange}
+			/>,
+		);
+
+		expect(screen.getByTestId('panel-editor-v2-stack-mode')).toBeInTheDocument();
+		await user.click(screen.getByText('Percent'));
+
+		expect(onChange).toHaveBeenCalledWith({
+			fillSpans: true,
+			stack: DashboardtypesStackModeDTO.percent,
+		});
+	});
+
+	it('renders no stack-mode control for a kind that declares bar stacking', () => {
+		render(
+			<VisualizationSection
+				value={undefined}
+				controls={{ switchPanelKind: true, stacking: true }}
+				onChange={jest.fn()}
+			/>,
+		);
+
+		expect(
+			screen.getByTestId('panel-editor-v2-stacked-bar-chart'),
+		).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('panel-editor-v2-stack-mode'),
+		).not.toBeInTheDocument();
+	});
+
 	it('toggles fill spans through onChange', () => {
 		const onChange = jest.fn();
 		render(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/stackModeOptions.ts

@@ -0,0 +1,10 @@
+import { DashboardtypesStackModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { ConfigSegmentedItem } from '../../controls/ConfigSegmented/ConfigSegmented';
+
+// `percent` rescales each x-slice to its column total; the y axis follows.
+export const STACK_MODE_OPTIONS: ConfigSegmentedItem[] = [
+	{ value: DashboardtypesStackModeDTO.none, label: 'None' },
+	{ value: DashboardtypesStackModeDTO.normal, label: 'Normal' },
+	{ value: DashboardtypesStackModeDTO.percent, label: 'Percent' },
+];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/__tests__/capabilities.test.ts

@@ -29,6 +29,7 @@ const { time_series, scalar, raw } = Querybuildertypesv5RequestTypeDTO;
 const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 	'signoz/TimeSeriesPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/BarChartPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
+	'signoz/AreaChartPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/NumberPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/HistogramPanel': [QUERY_BUILDER, CLICKHOUSE, PROM],
 	'signoz/PieChartPanel': [QUERY_BUILDER, CLICKHOUSE],
@@ -41,6 +42,7 @@ const EXPECTED_QUERY_TYPES: Record<PanelKind, EQueryType[]> = {
 const EXPECTED_SIGNALS: Record<PanelKind, TelemetrytypesSignalDTO[]> = {
 	'signoz/TimeSeriesPanel': [metrics, logs, traces],
 	'signoz/BarChartPanel': [metrics, logs, traces],
+	'signoz/AreaChartPanel': [metrics, logs, traces],
 	'signoz/NumberPanel': [metrics, logs, traces],
 	'signoz/HistogramPanel': [metrics, logs, traces],
 	'signoz/PieChartPanel': [metrics, logs, traces],
@@ -72,6 +74,13 @@ const EXPECTED_QUERY_CAPABILITIES: Partial<
 		orderTiebreaker: false,
 		serverPaginated: false,
 	},
+	'signoz/AreaChartPanel': {
+		requestType: time_series,
+		formatTableResultForUI: false,
+		bucketedStepInterval: false,
+		orderTiebreaker: false,
+		serverPaginated: false,
+	},
 	'signoz/HistogramPanel': {
 		requestType: time_series,
 		formatTableResultForUI: false,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/Renderer.tsx

@@ -0,0 +1,233 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { DashboardtypesAreaChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import TimeSeries from 'lib/visualization/charts/TimeSeries/TimeSeries';
+import ChartManager from 'lib/visualization/components/ChartManager/ChartManager';
+import TooltipFooter from 'lib/visualization/panels/components/TooltipFooter';
+import { PanelMode } from 'lib/visualization/panels/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
+import {
+	flattenTimeSeries,
+	getExecStats,
+	getTimeSeriesResults,
+} from 'pages/DashboardPage/DashboardContainer/queryV5/v5ResponseData';
+import { prepareAlignedData } from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
+import { useTimezone } from 'providers/Timezone';
+
+import NoData from '../../components/NoData/NoData';
+import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
+import PanelStyles from '../../panel.module.scss';
+import { PanelRendererProps } from '../../types/rendererProps';
+import {
+	resolveDecimalPrecision,
+	resolveLegendPosition,
+	resolveStackMode,
+} from '../../utils/chartAppearance/resolvers';
+import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
+import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
+import { sortSeriesByMeanDesc } from '../../utils/sortSeriesByMean';
+
+import { buildAreaChartConfig } from './utils/buildConfig';
+import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+
+function AreaChartPanelRenderer({
+	panelId,
+	panel,
+	data,
+	isFetching,
+	refetch,
+	onClick,
+	onDragSelect,
+	dashboardPreference,
+	panelMode,
+	onCloseStandaloneView,
+	enableDrillDown,
+}: PanelRendererProps<'signoz/AreaChartPanel'>): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	const spec = useMemo<DashboardtypesAreaChartPanelSpecDTO>(
+		() => panel.spec.plugin.spec,
+		[panel.spec.plugin.spec],
+	);
+
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries),
+		[panel.spec.queries],
+	);
+
+	// X-scale clamps come from the request that produced the data, so each panel
+	// pins to the window it fetched — matters during drag-zoom transitions before
+	// new data arrives.
+	const { minTimeScale, maxTimeScale } = useMemo(() => {
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
+		return { minTimeScale: startTime, maxTimeScale: endTime };
+	}, [data.requestPayload]);
+
+	const groupByPerQuery = useGroupByPerQuery(builderQueries);
+
+	const flatSeries = useMemo(
+		() =>
+			sortSeriesByMeanDesc(
+				flattenTimeSeries(
+					getTimeSeriesResults(data.response),
+					data.legendMap ?? {},
+				),
+			),
+		[data.response, data.legendMap],
+	);
+
+	const config = useMemo(
+		() =>
+			buildAreaChartConfig({
+				panelId,
+				spec,
+				builderQueries,
+				series: flatSeries,
+				stepIntervals: getExecStats(data.response)?.stepIntervals,
+				isDarkMode,
+				timezone,
+				panelMode,
+				minTimeScale,
+				maxTimeScale,
+				onDragSelect,
+			}),
+		[
+			panelId,
+			spec,
+			builderQueries,
+			flatSeries,
+			data.response,
+			isDarkMode,
+			timezone,
+			panelMode,
+			minTimeScale,
+			maxTimeScale,
+			onDragSelect,
+			// TooltipPlugin mutates `config` for cursor sync; rebuild on syncMode change
+			// so a fresh instance doesn't inherit stale sync settings (e.g. "No Sync").
+			dashboardPreference?.syncMode,
+		],
+	);
+
+	const chartData = useMemo(() => prepareAlignedData(flatSeries), [flatSeries]);
+
+	const decimalPrecision = useMemo(
+		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
+		[spec.formatting?.decimalPrecision],
+	);
+
+	const legendPosition = useMemo(() => {
+		return resolveLegendPosition(spec.legend?.position);
+	}, [spec.legend?.position]);
+
+	// The standalone View modal shows V1's graph-manager legend below the chart:
+	// Filter Series + per-series show/hide + Save. Series visibility auto-persists to
+	// localStorage (STANDALONE_VIEW selection prefs), keyed by panelId.
+	const layoutChildren = useMemo(
+		() =>
+			panelMode === PanelMode.STANDALONE_VIEW ? (
+				<div className={PanelStyles.chartManagerContainer}>
+					<ChartManager
+						config={config}
+						alignedData={chartData}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						onCancel={onCloseStandaloneView}
+					/>
+				</div>
+			) : null,
+		[
+			panelMode,
+			config,
+			chartData,
+			spec.formatting?.unit,
+			decimalPrecision,
+			onCloseStandaloneView,
+		],
+	);
+
+	const renderTooltipFooter = useCallback(
+		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
+			<TooltipFooter
+				id={panelId}
+				isPinned={isPinned}
+				canDrilldown={!!enableDrillDown}
+				dismiss={dismiss}
+			/>
+		),
+		[panelId, enableDrillDown],
+	);
+
+	// Keying on sync prefs forces a full chart teardown/re-mount so stale sync
+	// settings aren't inherited — the only way to fully reset the uPlot instance.
+	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
+
+	const handleChartClick = useCallback(
+		(args: ChartClickData): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichChartClick({
+				clickData: args,
+				series: flatSeries,
+				builderQueries,
+			});
+			if (!payload) {
+				return;
+			}
+			const timeRange = stepClickTimeRange({
+				clickedDataTimestamp: args.clickedDataTimestamp,
+				queryName: payload.context.queryName,
+				builderQueries,
+				stepInterval: getExecStats(data.response)?.stepIntervals?.[
+					payload.context.queryName
+				],
+			});
+			onClick({ ...payload, context: { ...payload.context, timeRange } });
+		},
+		[onClick, flatSeries, builderQueries, data.response],
+	);
+
+	return (
+		<div
+			ref={graphRef}
+			data-testid="area-chart-renderer"
+			className={PanelStyles.panelContainer}
+		>
+			{flatSeries.length === 0 && (
+				<NoData isFetching={isFetching} onRetry={refetch} panel={panel} />
+			)}
+			{flatSeries.length > 0 &&
+				containerDimensions.width > 0 &&
+				containerDimensions.height > 0 && (
+					<TimeSeries
+						key={key}
+						config={config}
+						data={chartData}
+						legendConfig={{ position: legendPosition }}
+						layoutChildren={layoutChildren}
+						groupByPerQuery={groupByPerQuery}
+						canPinTooltip
+						timezone={timezone}
+						yAxisUnit={spec.formatting?.unit}
+						decimalPrecision={decimalPrecision}
+						width={containerDimensions.width}
+						height={containerDimensions.height}
+						syncMode={dashboardPreference?.syncMode}
+						syncFilterMode={dashboardPreference?.syncFilterMode}
+						stack={resolveStackMode(spec.visualization?.stack)}
+						renderTooltipFooter={renderTooltipFooter}
+						onClick={enableDrillDown ? handleChartClick : undefined}
+					/>
+				)}
+		</div>
+	);
+}
+
+export default AreaChartPanelRenderer;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/definition.ts

@@ -0,0 +1,48 @@
+import { ChartArea } from '@signozhq/icons';
+
+import type { PanelDefinition } from '../../types/panelDefinition';
+import QueryBuilderEditorPane from 'pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane';
+import Renderer from './Renderer';
+import { sections } from './sections';
+import {
+	Querybuildertypesv5RequestTypeDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { EQueryType } from 'types/common/dashboard';
+
+export const definition: PanelDefinition<'signoz/AreaChartPanel'> = {
+	kind: 'signoz/AreaChartPanel',
+	displayName: 'Area Chart',
+	mode: 'query',
+	icon: ChartArea,
+	Renderer,
+	EditorPane: QueryBuilderEditorPane,
+	sections,
+	supportedSignals: [
+		TelemetrytypesSignalDTO.metrics,
+		TelemetrytypesSignalDTO.logs,
+		TelemetrytypesSignalDTO.traces,
+	],
+	supportedQueryTypes: [
+		EQueryType.QUERY_BUILDER,
+		EQueryType.CLICKHOUSE,
+		EQueryType.PROM,
+	],
+	queryBuilderFields: {},
+	queryCapabilities: {
+		requestType: Querybuildertypesv5RequestTypeDTO.time_series,
+		formatTableResultForUI: false,
+		bucketedStepInterval: false,
+		orderTiebreaker: false,
+		serverPaginated: false,
+	},
+	actions: {
+		view: true,
+		edit: true,
+		clone: true,
+		download: { csv: false, png: true, svg: true },
+		createAlert: true,
+		search: false,
+		drilldown: true,
+	},
+};

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/sections.ts

@@ -0,0 +1,42 @@
+import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
+import {
+	SectionKind,
+	ThresholdVariant,
+	type SectionConfig,
+} from '../../types/sections';
+
+// Declaring `fillOpacity` also makes the kind always-filled: `fillMode` drops `none`
+// and defaults to solid.
+export const sections: SectionConfig[] = [
+	{
+		kind: SectionKind.Visualization,
+		controls: {
+			switchPanelKind: true,
+			timePreference: true,
+			stackMode: true,
+			fillSpans: true,
+		},
+	},
+	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
+	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
+	{
+		kind: SectionKind.Legend,
+		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
+	},
+	{
+		kind: SectionKind.ChartAppearance,
+		controls: {
+			lineStyle: true,
+			lineInterpolation: true,
+			fillMode: true,
+			fillOpacity: true,
+			showPoints: true,
+			spanGaps: true,
+		},
+	},
+	{
+		kind: SectionKind.Thresholds,
+		controls: { variant: ThresholdVariant.LABEL },
+	},
+	{ kind: SectionKind.ContextLinks },
+];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/utils/buildConfig.ts

@@ -0,0 +1,160 @@
+import type { DashboardtypesAreaChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	buildBaseConfig,
+	minStepInterval,
+	type TimeAxisChromeArgs,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/baseConfigBuilder';
+import {
+	LINE_INTERPOLATION_MAP,
+	LINE_STYLE_MAP,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/enumMaps';
+import {
+	resolveAreaFillMode,
+	resolveSpanGaps,
+} from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/resolvers';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
+import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
+import {
+	hasSingleVisiblePoint,
+	toClickPluginPayload,
+} from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
+import getLabelName from 'lib/getLabelName';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+const DEFAULT_POINT_SIZE = 5;
+
+export interface BuildAreaChartConfigArgs extends TimeAxisChromeArgs {
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+	/** Flat list of builder queries (see `getBuilderQueries`); powers per-query legend resolution. */
+	builderQueries: BuilderQuery[];
+	/** Flattened V5 series (see `flattenTimeSeries`). */
+	series: PanelSeries[];
+}
+
+/**
+ * Builds a `UPlotConfigBuilder` for an Area panel: shared scaffolding plus one filled
+ * series per result. Stacking is declared on the chart component instead, which hands
+ * it to the builder.
+ */
+export function buildAreaChartConfig({
+	panelId,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+	timezone,
+	panelMode,
+	onDragSelect,
+	onClick,
+	minTimeScale,
+	maxTimeScale,
+}: BuildAreaChartConfigArgs): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		panelId,
+		isTimeAxis: true,
+		isDarkMode,
+		timezone,
+		panelMode,
+		isLogScale: spec.axes?.isLogScale,
+		softMin: spec.axes?.softMin ?? undefined,
+		softMax: spec.axes?.softMax ?? undefined,
+		formatting: spec.formatting,
+		thresholds: spec.thresholds,
+		stepIntervals,
+		clickPayload: toClickPluginPayload(series),
+		minTimeScale,
+		maxTimeScale,
+		onDragSelect,
+		onClick,
+	});
+
+	addSeries({
+		builder,
+		spec,
+		builderQueries,
+		series,
+		stepIntervals,
+		isDarkMode,
+	});
+
+	return builder;
+}
+
+interface AddSeriesArgs {
+	builder: UPlotConfigBuilder;
+	spec: DashboardtypesAreaChartPanelSpecDTO;
+	builderQueries: BuilderQuery[];
+	series: PanelSeries[];
+	/** Per-query step intervals (seconds); floor for a numeric spanGaps threshold. */
+	stepIntervals?: Record<string, number>;
+	isDarkMode: boolean;
+}
+
+/**
+ * Adds one filled uPlot series per flattened V5 series; mutates the builder in place.
+ * Order must match `prepareAlignedData` — both iterate the same flat list.
+ */
+function addSeries({
+	builder,
+	spec,
+	builderQueries,
+	series,
+	stepIntervals,
+	isDarkMode,
+}: AddSeriesArgs): void {
+	const chartAppearance = spec.chartAppearance;
+	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
+	// a defined record (it dereferences keys without a guard).
+	const colorMapping = spec.legend?.customColors ?? {};
+	const resolvedSpanGaps = chartAppearance?.spanGaps
+		? resolveSpanGaps(chartAppearance.spanGaps)
+		: true;
+	// A numeric spanGaps is a max-gap threshold (seconds); floor it at the step interval so a
+	// sub-step value doesn't break the line at every normal point. Boolean `true` passes through.
+	const minStep = stepIntervals ? minStepInterval(stepIntervals) : undefined;
+	const spanGaps =
+		typeof resolvedSpanGaps === 'number' && minStep !== undefined
+			? Math.max(minStep, resolvedSpanGaps)
+			: resolvedSpanGaps;
+
+	const lineStyle = chartAppearance?.lineStyle
+		? LINE_STYLE_MAP[chartAppearance.lineStyle]
+		: LineStyle.Solid;
+	const lineInterpolation = chartAppearance?.lineInterpolation
+		? LINE_INTERPOLATION_MAP[chartAppearance.lineInterpolation]
+		: LineInterpolation.Spline;
+	const fillMode = resolveAreaFillMode(chartAppearance?.fillMode);
+	// Null and undefined both mean "kind default", which the chart layer resolves.
+	const fillOpacity = chartAppearance?.fillOpacity ?? undefined;
+
+	series.forEach((s) => {
+		const hasSingleValidPoint = hasSingleVisiblePoint(s.values);
+		const baseLabel = getLabelName(s.labels, s.queryName, s.legend);
+		const label = resolveSeriesLabelV5(s, builderQueries, baseLabel);
+
+		builder.addSeries({
+			scaleKey: 'y',
+			// A single visible point can't be drawn as a line — degrade to points
+			// so the user still sees the datum (matches V1 behavior).
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			label,
+			colorMapping,
+			spanGaps,
+			lineStyle,
+			lineInterpolation,
+			showPoints: chartAppearance?.showPoints || hasSingleValidPoint,
+			pointSize: DEFAULT_POINT_SIZE,
+			fillMode,
+			fillOpacity,
+			isDarkMode,
+			metric: s.labels,
+		});
+	});
+}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/registry.ts

@@ -1,3 +1,4 @@
+import { definition as AreaChart } from './kinds/AreaChartPanel/definition';
 import { definition as BarChart } from './kinds/BarChartPanel/definition';
 import { definition as Histogram } from './kinds/HistogramPanel/definition';
 import { definition as NumberValue } from './kinds/NumberPanel/definition';
@@ -21,6 +22,7 @@ export const PANELS: PanelRegistry = {
 	[NumberValue.kind]: NumberValue,
 	[Table.kind]: Table,
 	[BarChart.kind]: BarChart,
+	[AreaChart.kind]: AreaChart,
 	[PieChart.kind]: PieChart,
 	[Histogram.kind]: Histogram,
 	[List.kind]: List,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/interactions.ts

@@ -28,6 +28,11 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
 		onDragSelect?: DragSelect;
 		onCloseStandaloneView?: CloseStandaloneView;
 	};
+	'signoz/AreaChartPanel': {
+		onClick?: (event: DrilldownClickPayload) => void;
+		onDragSelect?: DragSelect;
+		onCloseStandaloneView?: CloseStandaloneView;
+	};
 	'signoz/TablePanel': { onClick?: (event: DrilldownClickPayload) => void };
 	'signoz/PieChartPanel': { onClick?: (event: DrilldownClickPayload) => void };
 	'signoz/NumberPanel': { onClick?: (event: DrilldownClickPayload) => void };

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelKind.ts

@@ -18,6 +18,7 @@ export type PanelKind = `${DashboardtypesPanelPluginKindDTO}`;
 export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
 	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
 	'signoz/BarChartPanel': PANEL_TYPES.BAR,
+	'signoz/AreaChartPanel': PANEL_TYPES.AREA,
 	'signoz/NumberPanel': PANEL_TYPES.VALUE,
 	'signoz/PieChartPanel': PANEL_TYPES.PIE,
 	'signoz/TablePanel': PANEL_TYPES.TABLE,

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/sections.ts

@@ -1,5 +1,7 @@
 import type {
 	DashboardtypesLinkDTO,
+	DashboardtypesAreaChartAppearanceDTO,
+	DashboardtypesAreaChartVisualizationDTO,
 	DashboardtypesAxesDTO,
 	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesComparisonThresholdDTO,
@@ -87,15 +89,27 @@ export type AnyThreshold =
 export type PanelFormattingSlice = DashboardtypesPanelFormattingDTO &
 	Pick<DashboardtypesTableFormattingDTO, 'columnUnits'>;
 
+// Superset spanning every kind's chart-appearance DTO. Area's `fillMode` is a
+// nominally distinct enum with the same members as TimeSeries', so the TimeSeries one
+// types the shared control.
+export type PanelChartAppearanceSlice =
+	DashboardtypesTimeSeriesChartAppearanceDTO &
+		Pick<DashboardtypesAreaChartAppearanceDTO, 'fillOpacity'>;
+
+// Superset spanning every kind's visualization DTO. Bar and Area express stacking
+// differently (`stackedBarChart` bool vs `stack` enum); a kind declares exactly one.
+export type PanelVisualizationSlice = DashboardtypesBarChartVisualizationDTO &
+	Pick<DashboardtypesAreaChartVisualizationDTO, 'stack'>;
+
 export interface SectionSpecMap {
 	[SectionKind.Formatting]: PanelFormattingSlice; // spec.plugin.spec.formatting
 	[SectionKind.Axes]: DashboardtypesAxesDTO; // spec.plugin.spec.axes
 	[SectionKind.Legend]: DashboardtypesLegendDTO; // spec.plugin.spec.legend
-	[SectionKind.ChartAppearance]: DashboardtypesTimeSeriesChartAppearanceDTO; // spec.plugin.spec.chartAppearance
+	[SectionKind.ChartAppearance]: PanelChartAppearanceSlice; // spec.plugin.spec.chartAppearance
 	[SectionKind.Buckets]: DashboardtypesHistogramBucketsDTO; // spec.plugin.spec.histogramBuckets
-	// spec.plugin.spec.visualization — typed as the Bar shape (widest superset);
+	// spec.plugin.spec.visualization — typed as the superset of every kind's shape;
 	// the `controls` bag gates which fields each kind writes.
-	[SectionKind.Visualization]: DashboardtypesBarChartVisualizationDTO;
+	[SectionKind.Visualization]: PanelVisualizationSlice;
 	[SectionKind.Thresholds]: AnyThreshold[]; // spec.plugin.spec.thresholds (variant picks the editor)
 	[SectionKind.ContextLinks]: DashboardtypesLinkDTO[]; // spec.links (PANEL-level)
 	[SectionKind.Columns]: TelemetrytypesTelemetryFieldKeyDTO[]; // spec.plugin.spec.selectFields (List)
@@ -124,6 +138,11 @@ export interface SectionControls {
 		lineStyle?: boolean;
 		lineInterpolation?: boolean;
 		fillMode?: boolean;
+		/**
+		 * Declaring it also marks the kind always-filled: `fillMode` drops `none` to match
+		 * the narrower `AreaFillMode` wire enum the save API validates against.
+		 */
+		fillOpacity?: boolean;
 		showPoints?: boolean;
 		spanGaps?: boolean;
 	};
@@ -133,12 +152,13 @@ export interface SectionControls {
 		mergeQueries?: boolean;
 	};
 	// switchPanelKind → the visualization-type switcher (every kind, so you can switch
-	// away from any panel); stacking → stackedBarChart (Bar); fillSpans → fill gaps with
-	// 0 (TimeSeries).
+	// away from any panel); stacking → stackedBarChart (Bar); stackMode → stack
+	// (Area); fillSpans → fill gaps with 0 (TimeSeries / Area).
 	[SectionKind.Visualization]: {
 		switchPanelKind: boolean;
 		timePreference?: boolean;
 		stacking?: boolean;
+		stackMode?: boolean;
 		fillSpans?: boolean;
 	};
 	// Editor discriminator (not a spec field): which threshold variant a kind edits.