fix(charts): stop tooltip labels breaking mid-word

`overflow-wrap: anywhere` dropped the label's min-content width to one
character, so it was the only row item that could give way to a wide
value. Charts whose legend names are short also got the narrowest
tooltip, which is where it showed worst.

Assisted-by: Claude Opus 5

conf/example.yaml

@@ -341,7 +341,7 @@ gateway:
 ##################### Tokenizer #####################
 tokenizer:
   # Specifies the tokenizer provider to use.
-  provider: opaque
+  provider: jwt
   lifetime:
     # The duration for which a user can be idle before being required to authenticate.
     idle: 168h

docs/api/openapi.yml

@@ -3552,79 +3552,6 @@ components:
         hide:
           type: boolean
       type: object
-    DashboardtypesHeatmapAxes:
-      properties:
-        yScale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
-      type: object
-    DashboardtypesHeatmapChartAppearance:
-      properties:
-        colors:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
-      type: object
-    DashboardtypesHeatmapColorMode:
-      enum:
-      - palette
-      - opacity
-      type: string
-    DashboardtypesHeatmapColorScale:
-      enum:
-      - log
-      - sqrt
-      - linear
-      type: string
-    DashboardtypesHeatmapColors:
-      properties:
-        fill:
-          type: string
-        maxCount:
-          nullable: true
-          type: number
-        minCount:
-          nullable: true
-          type: number
-        mode:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
-        palette:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
-        steps:
-          type: integer
-      type: object
-    DashboardtypesHeatmapPalette:
-      enum:
-      - ice
-      - moss
-      - rust
-      - graphite
-      - ember
-      - lagoon
-      - orchid
-      - verdant
-      - lava
-      - beacon
-      type: string
-    DashboardtypesHeatmapPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesHeatmapYScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3977,7 +3904,6 @@ components:
       discriminator:
         mapping:
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -3995,7 +3921,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4007,7 +3932,6 @@ components:
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
-      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -4021,18 +3945,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/HeatmapPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:

docs/contributing/go/dslfilteringtosql.md

@@ -1,181 +0,0 @@
-# DSL Filtering to SQL
-
-To support search on any entity's list page (dashboards, alert rules, ...), use [pkg/parser/filterquery/sqlcompiler](/pkg/parser/filterquery/sqlcompiler/compiler.go). It compiles a filter DSL string into a WHERE clause for the relational store: `?`-placeholder SQL plus bind arguments, ready for bun on both SQLite and Postgres. This doc explains what the compiler already does and what an adopting module supplies: a `FieldResolver` that says which keys exist and what each maps to.
-
-The dashboards list is the adopter today; the alert rules list revamp is adopting it next.
-
-## What is the DSL?
-
-A few queries, from simple to full:
-
-```
-payment
-status = active AND name CONTAINS cpu
-(labels.team IN ('infra', 'platform') OR labels.env EXISTS) AND created_at > '2025-01-01T00:00:00Z'
-"name = something"
-```
-
-- `payment` is free text: a bare token with no key, matched as a substring wherever the module decides (name, description, ...).
-- `status = active AND name CONTAINS cpu` is two comparisons of the shape `key OP value`. The `AND` is optional; adjacent terms are an implicit `AND`.
-- The third query shows grouping and precedence: parentheses > `NOT` > `AND` > `OR`. Values are bare tokens or quoted strings; `IN` accepts `in(...)` and `[...]` forms.
-- `"name = something"` is quoted, so it is free text for that exact phrase instead of a `name = something` comparison. Quoting is the escape hatch for a phrase that looks like DSL.
-
-The grammar lives at [grammar/FilterQuery.g4](/grammar/FilterQuery.g4) (see its `comparison` rule for the full operator list), with the ANTLR-generated parser in [pkg/parser/filterquery/grammar](/pkg/parser/filterquery/grammar). It is the same grammar the telemetry search bars use, so the query language feels identical everywhere.
-
-## What does the framework already cover?
-
-```go
-compiled, errs := sqlcompiler.Compile(query, formatter, resolver)
-
-type Compiled struct {
-	SQL  string
-	Args []any
-}
-```
-
-`Compile` returns either a non-nil `*Compiled` or a list of human-readable errors. `Compiled.SQL` is the WHERE clause with `?` placeholders and `Compiled.Args` holds the bind arguments in placeholder order; the store passes both to bun. An empty query compiles to an empty `Compiled`; callers gate on `IsEmpty()`, not nil. The package handles:
-
-- Parsing, with syntax errors collected at line/column positions instead of failing on the first one.
-- The boolean tree: `AND`/`OR`/`NOT`, parentheses, implicit `AND`, and pruning of empty conditions.
-- Operator extraction, including inversion of `NOT LIKE`, `NOT IN`, `NOT EXISTS` and friends.
-- Typed value extraction with accumulated errors: the user sees every problem in the query at once.
-- Argument binding through go-sqlbuilder; no value is ever interpolated into the SQL text.
-
-The resolver is called once per term and builds each predicate with helpers the compiler provides (next section).
-
-## When do I write a FieldResolver?
-
-Whenever a module adopts the DSL for its list page. The resolver is the per-module policy and the only code you write:
-
-```go
-type FieldResolver interface {
-	ResolveComparison(v *Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string
-	ResolveFreeText(v *Visitor, value string) string
-}
-```
-
-- `ResolveComparison` is called once per `key OP value` term. It decides whether the key exists and which column expression it maps to, and returns the SQL predicate for the term.
-- `ResolveFreeText` is called for a bare or quoted keyless token. It returns a predicate matching the token across whatever the module considers searchable (name, description, tags, ...).
-- Both report a bad key, operator or value with `v.AddError(...)` and return `""`. Never panic, never fail fast; the compile fails at the end with all accumulated errors.
-
-The `*Visitor` passed in provides everything needed to build predicates. Use these instead of hand-building SQL or managing arguments yourself:
-
-| On the `Visitor` | Use |
-| --- | --- |
-| `Sb` | the compile's root `SelectBuilder`; predicates and their arguments attach to it |
-| `Formatter` | dialect-portable column expressions (`JSONExtractString`, `LowerExpression`) valid on both SQLite and Postgres |
-| `BuildStringOperation` | `=`, `!=`, `LIKE`/`ILIKE`, `CONTAINS`, `IN` on a string column; escapes `%`/`_` for `CONTAINS`, rejects patterns ending in a dangling backslash, lowers both sides for `ILIKE` so SQLite and Postgres agree |
-| `BuildTimestampComparison` | equality, ranges and `BETWEEN` on RFC3339 timestamps |
-| `BuildBoolComparison` | `= true/false` |
-| `BuildFreeTextContains` | case-insensitive substring match, `COALESCE`d so `NOT (...)` does not drop rows where the column is NULL |
-| `ExtractSingleStringValue`, `ExtractStringValueList` | typed value extraction when building a custom predicate |
-| `AddError` | report a problem; errors accumulate |
-
-In the simplest case, keys map straight to columns and the resolver is a switch. The doc's running example, an imaginary `sample_entity` table:
-
-```go
-func (r sampleEntityFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
-	switch key {
-	case "created_by":
-		return v.BuildStringOperation(v.Sb, ctx, operation, "sample_entity.created_by", key)
-	case "created_at":
-		return v.BuildTimestampComparison(ctx, operation, "sample_entity.created_at")
-	case "locked":
-		return v.BuildBoolComparison(ctx, operation, "sample_entity.locked")
-	}
-	v.AddError("unknown key %q", key)
-	return ""
-}
-
-func (sampleEntityFieldResolver) ResolveFreeText(v *sqlcompiler.Visitor, value string) string {
-	return v.BuildFreeTextContains(v.Sb, "sample_entity.name", value)
-}
-```
-
-### Special cases
-
-Each entity decides its own key policy. The sections below grow the `sample_entity` resolver; the full real-world adopter to read alongside is dashboards' resolver, [pkg/modules/dashboard/impldashboard/listfilter_resolver.go](/pkg/modules/dashboard/impldashboard/listfilter_resolver.go).
-
-#### Reserved and non-reserved keys
-
-A resolver splits the key space in two:
-
-- Reserved keys are properties the entity defines for all its instances: every `sample_entity` has a `name`, `created_by`, `created_at` and `locked`, so those keys are claimed up front and always mean that property. The list API can advertise the set (dashboards and rules return `reservedKeywords`) so frontend suggestions never go stale.
-- Every other key is non-reserved: things users attach to individual instances as they want. For `sample_entity` those are labels, so `team = infra` matches only the instances a user labeled `team: infra` (built out under [Relation tables](#relation-tables)). Dashboards exposes tags the same way, and an entity is free to back this with any other per-instance construct. An entity with nothing user-attached rejects unknown keys with `v.AddError`, as the resolver above does.
-
-So the first thing `ResolveComparison` does is route the key:
-
-```go
-if allowedOperations, isReserved := ReservedOps[key]; isReserved {
-	return r.resolveReservedKey(v, ctx, operation, key, allowedOperations)
-}
-return r.buildLabelComparison(v, ctx, operation, key)
-```
-
-#### Operator allowlists
-
-Not every operator makes sense on every key, reserved or not (`name BETWEEN ...` does not). Declare what each accepts and check before building. `sample_entity` pairs each reserved key with its allowed operators:
-
-```go
-var ReservedOps = map[string]map[qbtypesv5.FilterOperator]struct{}{
-	"name":       stringSearchOps(),
-	"created_at": numericRangeOps(),
-	"locked":     boolOps(),
-}
-
-if _, allowed := allowedOperations[operation]; !allowed {
-	v.AddError("operator %s is not allowed for key %q", sqlcompiler.OperationName(operation), key)
-	return ""
-}
-```
-
-Non-reserved keys get allowlists too, usually one shared list since they are all shaped alike: a label lookup is a string match, so `created_at > '2025-01-01T00:00:00Z'` is fine but `team > infra` is rejected with an `AddError`. Dashboards' real instances of both are `ReservedOps` and `TagKeyOps` in [pkg/types/dashboardtypes](/pkg/types/dashboardtypes/list_filter.go).
-
-#### JSON columns
-
-Suppose `sample_entity` keeps `name` inside a `data` JSON column instead of a plain column. The resolver then builds the column expression with `v.Formatter.JSONExtractString`, which renders correctly on both dialects, and `name CONTAINS cpu` compiles (SQLite flavor) to:
-
-```sql
-json_extract("sample_entity"."data", '$.name') LIKE ? ESCAPE '\'
--- args: ["%cpu%"]
-```
-
-Dashboards stores name and description this way inside `dashboard.data`.
-
-#### Relation tables
-
-The label policy from above: say `sample_entity` labels live in `label`/`label_relation` join tables, so a label term becomes an `EXISTS` subquery. Build it on a fresh `sqlbuilder.SelectBuilder` and pass that builder into `BuildStringOperation`, so its arguments thread through the compile. `team = infra` compiles to:
-
-```sql
-EXISTS (SELECT 1 FROM label_relation lr JOIN label l ON l.id = lr.label_id
-	WHERE lr.entity_id = sample_entity.id
-	AND LOWER(l.key) = LOWER(?) AND l.value = ?)
--- args: ["team", "infra"]
-```
-
-For a negative operator (`team != infra`), build the positive predicate and toggle `NotExists` on the outer builder, so rows without the label at all also match. Dashboards' tags follow this exact pattern over the shared `tag`/`tag_relation` tables.
-
-## How to wire it in?
-
-Give the module a thin `Compile` wrapper that maps the error list onto the module's error code:
-
-```go
-func Compile(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
-	compiled, errs := sqlcompiler.Compile(query, formatter, sampleEntityFieldResolver{})
-	if len(errs) > 0 {
-		return nil, errors.NewInvalidInputf(sampleentitytypes.ErrCodeSampleEntityListFilterInvalid,
-			"invalid filter query: %s", strings.Join(errs, "; "))
-	}
-	return compiled, nil
-}
-```
-
-Dashboards' real wrapper is [pkg/modules/dashboard/impldashboard/listfilter.go](/pkg/modules/dashboard/impldashboard/listfilter.go).
-
-The store then appends `compiled.SQL` with `compiled.Args` to its list query when `!compiled.IsEmpty()`.
-
-## Caveats
-
-- This compiler is for the relational store only. Telemetry filters are a different pipeline; they stay on querybuilder's ClickHouse visitor.
-- A `key REGEXP value` term parses, but no predicate builder implements it: `BuildStringOperation` rejects it with an error, since SQLite has no portable `REGEXP` (Postgres spells it `~`). A resolver may implement it itself for a dialect it controls.
-- `has(...)` function calls and `search(...)` from the telemetry grammar are not implemented; they fall through to `ResolveFreeText` as literal text.

docs/contributing/go/provider.md

@@ -17,7 +17,7 @@ For example, the [prometheus](/pkg/prometheus) provider delivers a prometheus en
 
 - `pkg/prometheus/prometheus.go` - Interface definition
 - `pkg/prometheus/config.go` - Configuration
-- `pkg/prometheus/clickhouseprometheusv2/provider.go` - Clickhouse-powered implementation
+- `pkg/prometheus/clickhouseprometheus/provider.go` - Clickhouse-powered implementation
 - `pkg/prometheus/prometheustest/provider.go` - Mock implementation
 
 ## How to wire it up?

docs/contributing/go/readme.md

@@ -21,5 +21,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
-- [DSL Filtering to SQL](dslfilteringtosql.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/prometheus.md

@@ -9,16 +9,15 @@ change breaks an invariant, flag it and discuss it first.
 
 ---
 
-## Why the provider looks like this
+## Why a second provider
 
-The removed v1 provider served the promql engine through the remote-read
-protobuf adapter. It fetched every raw sample of a query's union window,
-serialized all of them, and gave them to the engine. The cost followed the
-ingested data, not the question. This is how a dashboard of PromQL panels
-could take an instance down. v2 replaced it after a byte-level parity
-rollout, and v1 was then deleted.
+The v1 provider (`pkg/prometheus/clickhouseprometheus`) serves the promql
+engine through the remote-read protobuf adapter. It fetches every raw sample
+of a query's union window. It serializes all of them and gives them to the
+engine. The cost follows the ingested data, not the question. This is how a
+dashboard of PromQL panels can take an instance down.
 
-Each query runs in one of two ways. The classifier decides per query:
+In v2, each query runs in one of two ways. The classifier decides per query:
 
 - **Transpiled**: ClickHouse evaluates the query. Only final (or near-final)
   per-group grid arrays come back. The statements use the
@@ -31,7 +30,7 @@ Each query runs in one of two ways. The classifier decides per query:
 lost user. A construct that cannot reproduce engine semantics exactly falls
 back. It does not approximate.** The conformance suite
 (`tests/integration/tests/promqlconformance/`) replays Prometheus' own test
-corpus against the provider. It is the arbiter. The classification golden
+corpus against both providers. It is the arbiter. The classification golden
 (`testdata/classification_golden.json`) freezes the route of each corpus
 expression. The rest of this document is the PromQL-to-SQL story. That
 mapping is where correctness is won or lost.
@@ -264,8 +263,7 @@ per-thread partials scaled memory with the thread count. The slide then
 combines each slot's at-most-W bucket partials by direct aggregation
 (`arraySum(arraySlice(...))`). Window sums are added the way the engine adds
 them. There is no prefix-sum differencing: its large-minus-large
-cancellation would drift past the conformance tolerance on counter-sized
-values.
+cancellation would drift past the shadow tolerance on counter-sized values.
 This is correct per slot because the bucket union is the exact window
 multiset, and avg/min/max/sum/count are order-insensitive on a multiset
 (sum/avg up to summation order; see the float caveat above). A slot with
@@ -335,7 +333,7 @@ can carry them.
 ## The engine path
 
 Queries that do not transpile run in the stock engine over this package's
-`storage.Querier`. Samples are fetched per
+`storage.Querier`. This is still not the v1 path. Samples are fetched per
 selector with the engine's per-selector hints, not the query-wide union
 window. So `foo / foo offset 1d` reads two narrow windows, not the widest
 one twice. Instant selectors of subquery-free queries fetch only the last
@@ -369,9 +367,9 @@ same predicates as a shard-local semi-join, not a GLOBAL broadcast of the
 matched set. The temporality filter on every samples statement is a
 semantic no-op: the matched fingerprints already come from those
 temporalities. It engages the leading samples primary-key column.
-Delta-temporality series stay invisible to PromQL here, as they were before
-v2. To make Delta visible is its own change with its own semantics to
-design. A Delta stream fed to `rate()`
+Delta-temporality series stay invisible to PromQL here, exactly as in v1.
+The rollout gate is parity with v1. To make Delta visible is its own change
+with its own semantics to design. A Delta stream fed to `rate()`
 as-if-cumulative would be wrong, not just new.
 
 ## Observability

ee/query-service/rules/manager_test.go

@@ -160,7 +160,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 			triggeredTestAlerts := []map[*alertmanagertypes.PostableAlert][]string{}
 
 			// Variable to store promProvider for cleanup
-			var promProvider prometheus.Prometheus
+			var promProvider *prometheustest.Provider
 
 			// Create manager using test factory with hooks
 			mgr := rules.NewTestManager(t, &rules.TestManagerOptions{
@@ -185,29 +185,76 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				TelemetryStoreHook: func(store telemetrystore.TelemetryStore) {
 					mockStore := store.(*telemetrystoretest.Provider)
 
-					// Grid the TestNotification eval computes over (see
-					// Timestamps on base_rule); nil args match any window.
+					// Set up Prometheus-specific mock data
+					// Fingerprint columns for Prometheus queries
+					fingerprintCols := []cmock.ColumnType{
+						{Name: "fingerprint", Type: "UInt64"},
+						{Name: "any(labels)", Type: "String"},
+					}
+
+					// Samples columns for Prometheus queries
+					samplesCols := []cmock.ColumnType{
+						{Name: "metric_name", Type: "String"},
+						{Name: "fingerprint", Type: "UInt64"},
+						{Name: "unix_milli", Type: "Int64"},
+						{Name: "value", Type: "Float64"},
+						{Name: "flags", Type: "UInt32"},
+					}
+
+					// Calculate query time range similar to Prometheus rule tests
+					// TestNotification uses time.Now().UTC() for evaluation
+					// We calculate the query window based on current time to match what the actual evaluation will use
 					evalTime := baseTime
 					evalWindowMs := int64(5 * 60 * 1000) // 5 minutes in ms
-					gridEnd := (evalTime.UnixMilli() / 60000) * 60000
-					gridStart := gridEnd - evalWindowMs
+					evalTimeMs := evalTime.UnixMilli()
+					queryStart := ((evalTimeMs-2*evalWindowMs)/60000)*60000 + 1 // truncate to minute + 1ms
+					queryEnd := (evalTimeMs / 60000) * 60000                    // truncate to minute
 
-					tsList := make([]int64, 0, len(tc.Values))
-					vList := make([]float64, 0, len(tc.Values))
+					// Create fingerprint data
+					fingerprint := uint64(12345)
+					labelsJSON := `{"__name__":"test_metric"}`
+					fingerprintData := [][]interface{}{
+						{fingerprint, labelsJSON},
+					}
+					fingerprintRows := cmock.NewRows(fingerprintCols, fingerprintData)
+
+					// Create samples data from test case values, calculating timestamps relative to baseTime
+					validSamplesData := make([][]interface{}, 0)
 					for _, v := range tc.Values {
 						// Skip NaN and Inf values in the samples data
 						if math.IsNaN(v.Value) || math.IsInf(v.Value, 0) {
 							continue
 						}
-						tsList = append(tsList, baseTime.Add(v.Offset).UnixMilli())
-						vList = append(vList, v.Value)
+						// Calculate timestamp relative to baseTime
+						sampleTimestamp := baseTime.Add(v.Offset).UnixMilli()
+						validSamplesData = append(validSamplesData, []interface{}{
+							"test_metric",
+							fingerprint,
+							sampleTimestamp,
+							v.Value,
+							uint32(0), // flags - 0 means normal value
+						})
 					}
-					grid := prometheustest.LastSampleGrid(tsList, vList, gridStart, gridEnd, 60_000, 300_000)
+					samplesRows := cmock.NewRows(samplesCols, validSamplesData)
 
 					mock := mockStore.Mock()
-					mock.ExpectQuery("SELECT gkey").
-						WithArgs("test_metric", nil, nil, "test_metric", nil, nil).
-						WillReturnRows(cmock.NewRows(prometheustest.GridCols, [][]any{{`[["__name__","test_metric"]]`, grid}}))
+
+					// Mock the fingerprint query (for Prometheus label matching)
+					// args: $1=metric_name (the __name__ matcher maps onto the column)
+					mock.ExpectQuery("SELECT fingerprint, any").
+						WithArgs("test_metric").
+						WillReturnRows(fingerprintRows)
+
+					// Mock the samples query (for Prometheus metric data)
+					// args: metric_name IN (discovered names), subquery metric_name, start, end
+					mock.ExpectQuery("SELECT metric_name, fingerprint, unix_milli").
+						WithArgs(
+							"test_metric",
+							"test_metric",
+							queryStart,
+							queryEnd,
+						).
+						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
 					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
@@ -242,6 +289,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				assert.Empty(t, triggeredTestAlerts)
 			}
 
+			promProvider.Close()
 		})
 	}
 }

frontend/__mocks__/uplotMock.ts

@@ -2,8 +2,6 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
-	/** Consumers read `root.parentElement` to detect a re-mounted container. */
-	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -19,20 +17,13 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
-	const root = document.createElement('div');
-	// Real uPlot mounts its root inside the target; without it a re-render reads
-	// `root.parentElement` off undefined and throws.
-	target?.appendChild(root);
-	return {
-		root,
-		setData: jest.fn(),
-		setSize: jest.fn(),
-		destroy: jest.fn(),
-		redraw: jest.fn(),
-		setSeries: jest.fn(),
-	};
-};
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -62,16 +53,14 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	target: HTMLElement,
+	_target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance(target);
+	return createMockUPlotInstance();
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
-MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

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

@@ -5072,83 +5072,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-}
-export enum DashboardtypesHeatmapYScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
-export interface DashboardtypesHeatmapAxesDTO {
-	yScale?: DashboardtypesHeatmapYScaleDTO;
-}
-
-export enum DashboardtypesHeatmapColorModeDTO {
-	palette = 'palette',
-	opacity = 'opacity',
-}
-export enum DashboardtypesHeatmapPaletteDTO {
-	ice = 'ice',
-	moss = 'moss',
-	rust = 'rust',
-	graphite = 'graphite',
-	ember = 'ember',
-	lagoon = 'lagoon',
-	orchid = 'orchid',
-	verdant = 'verdant',
-	lava = 'lava',
-	beacon = 'beacon',
-}
-export enum DashboardtypesHeatmapColorScaleDTO {
-	log = 'log',
-	sqrt = 'sqrt',
-	linear = 'linear',
-}
-export interface DashboardtypesHeatmapColorsDTO {
-	/**
-	 * @type string
-	 */
-	fill?: string;
-	/**
-	 * @type number,null
-	 */
-	maxCount?: number | null;
-	/**
-	 * @type number,null
-	 */
-	minCount?: number | null;
-	mode?: DashboardtypesHeatmapColorModeDTO;
-	palette?: DashboardtypesHeatmapPaletteDTO;
-	scale?: DashboardtypesHeatmapColorScaleDTO;
-	/**
-	 * @type integer
-	 */
-	steps?: number;
-}
-
-export interface DashboardtypesHeatmapChartAppearanceDTO {
-	colors?: DashboardtypesHeatmapColorsDTO;
-}
-
-export interface DashboardtypesHeatmapPanelSpecDTO {
-	axes?: DashboardtypesHeatmapAxesDTO;
-	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
-	/**
-	 * @enum signoz/HeatmapPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
-	spec: DashboardtypesHeatmapPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5157,8 +5080,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6083,7 +6005,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -198,10 +198,6 @@ function createBaseSpec(
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: normalizeHaving(queryData.having),
-		// Heatmap only. Every other request type rejects an axis, and
-		// `panelTypeDataSourceFormValuesMap` is what keeps one from being carried onto a
-		// query the panel type switched away from.
-		bucketOptions: queryData.bucketOptions,
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -17,7 +17,6 @@ function InputWithLabel({
 	onChange,
 	className,
 	closeIcon,
-	disabled,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -28,7 +27,6 @@ function InputWithLabel({
 	onChange: (value: string) => void;
 	className?: string;
 	closeIcon?: React.ReactNode;
-	disabled?: boolean;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -55,7 +53,6 @@ function InputWithLabel({
 				type={type}
 				value={inputValue}
 				onChange={handleChange}
-				disabled={disabled}
 				name={label.toLowerCase()}
 				data-testid={`input-${label}`}
 			/>

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,18 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderField } from './queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-} from './queryBuilderFields.utils';
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import { clearPreviousQuery } from './QueryV2/previousQuery.utils';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
@@ -21,18 +14,12 @@ import TraceOperator from './QueryV2/TraceOperator/TraceOperator';
 
 import './QueryBuilderV2.styles.scss';
 
-// Raw rows come from logs or spans; metrics only exist aggregated.
-const RAW_QUERY_SIGNALS = [
-	TelemetrytypesSignalDTO.logs,
-	TelemetrytypesSignalDTO.traces,
-];
-
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
 	panelType: newPanelType,
-	fieldsConfig,
-	allowedDataSources,
-	isRawQuery = false,
+	filterConfigs = {},
+	queryComponents,
+	isListViewPanel = false,
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
@@ -84,48 +71,55 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		};
 	}, []);
 
-	const resolvedConfig = useMemo(
-		() =>
-			mergeQueryBuilderFieldsConfig(
-				isRawQuery ? RAW_QUERY_FIELDS : undefined,
-				fieldsConfig,
-			),
-		[isRawQuery, fieldsConfig],
-	);
-
-	const additionalQueries = useMemo(
-		() =>
-			resolveQueryBuilderField(
-				QueryBuilderField.AdditionalQueries,
-				resolvedConfig,
-			),
-		[resolvedConfig],
-	);
-
-	const formula = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Formula, resolvedConfig),
-		[resolvedConfig],
-	);
-
 	const isMultiQueryAllowed = useMemo(
-		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
-		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+		() => !isListViewPanel || showTraceOperator,
+		[showTraceOperator, isListViewPanel],
 	);
 
-	const queryDataSources = useMemo(
-		() => allowedDataSources ?? (isRawQuery ? RAW_QUERY_SIGNALS : undefined),
-		[allowedDataSources, isRawQuery],
-	);
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};
 
-	// What the editor renders. A single-query builder edits the first query alone, so
-	// the query list beside it must not advertise ones there is no way to reach.
-	const renderedQueries = useMemo(
-		() =>
-			isMultiQueryAllowed
-				? currentQuery.builder.queryData
-				: currentQuery.builder.queryData.slice(0, 1),
-		[isMultiQueryAllowed, currentQuery.builder.queryData],
-	);
+			return config;
+		}, []);
+
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				limit: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};
+
+			return config;
+		}, []);
+
+	const queryFilterConfigs = useMemo(() => {
+		if (isListViewPanel) {
+			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
+				? listViewTracesFilterConfigs
+				: listViewLogFilterConfigs;
+		}
+
+		return filterConfigs;
+	}, [
+		isListViewPanel,
+		filterConfigs,
+		currentQuery.builder.queryData,
+		listViewLogFilterConfigs,
+		listViewTracesFilterConfigs,
+	]);
 
 	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
 		if (
@@ -151,46 +145,31 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
+	const shouldShowFooter = useMemo(
+		() =>
+			(!showOnlyWhereClause && !isListViewPanel) ||
+			(currentDataSource === DataSource.TRACES && showTraceOperator),
+		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
+	);
+
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
-		[isRawQuery, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
+		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
-		if (formula.hidden) {
-			return false;
-		}
-
 		if (currentDataSource === DataSource.TRACES) {
-			return !isRawQuery;
+			return !isListViewPanel;
 		}
 
 		return true;
-	}, [formula.hidden, isRawQuery, currentDataSource]);
+	}, [isListViewPanel, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
 		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
-	// Nothing left to add means no footer at all, rather than an empty bar under the
-	// last query.
-	const shouldShowFooter = useMemo(
-		() =>
-			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
-			((!showOnlyWhereClause && !isRawQuery) ||
-				(currentDataSource === DataSource.TRACES && showTraceOperator)),
-		[
-			additionalQueries.hidden,
-			showFormula,
-			showAddTraceOperator,
-			isRawQuery,
-			showTraceOperator,
-			showOnlyWhereClause,
-			currentDataSource,
-		],
-	);
-
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLDivElement>): void => {
 			const target = e.target as HTMLElement | null;
@@ -220,8 +199,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							key={currentQuery.builder.queryData[0].queryName}
 							index={0}
 							query={currentQuery.builder.queryData[0]}
-							fieldsConfig={fieldsConfig}
-							allowedDataSources={queryDataSources}
+							filterConfigs={queryFilterConfigs}
+							queryComponents={queryComponents}
 							isMultiQueryAllowed={isMultiQueryAllowed}
 							showTraceOperator={showTraceOperator}
 							hasTraceOperator={hasTraceOperator}
@@ -229,7 +208,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
-							isRawQuery={isRawQuery}
+							isListViewPanel={isListViewPanel}
 							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -237,14 +216,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							savePreviousQuery={savePreviousQuery}
 						/>
 					) : (
-						renderedQueries.map((query, index) => (
+						currentQuery.builder.queryData.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
 								key={query.queryName}
 								index={index}
 								query={query}
-								fieldsConfig={fieldsConfig}
-								allowedDataSources={queryDataSources}
+								filterConfigs={queryFilterConfigs}
+								queryComponents={queryComponents}
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
@@ -252,7 +231,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
-								isRawQuery={isRawQuery}
+								isListViewPanel={isListViewPanel}
 								signalSource={query.source as 'meter' | ''}
 								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 								signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -272,7 +251,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 									return (
 										<div key={formula.queryName} className="qb-formula">
-											<Formula query={query} formula={formula} index={index} isQBV2 />
+											<Formula
+												filterConfigs={filterConfigs}
+												query={query}
+												formula={formula}
+												index={index}
+												isAdditionalFilterEnable={false}
+												isQBV2
+											/>
 										</div>
 									);
 								})}
@@ -281,13 +267,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{shouldShowFooter && (
 						<QueryFooter
-							showAddQuery={!additionalQueries.hidden}
 							showAddFormula={showFormula}
-							isAddFormulaDisabled={formula.disabled}
-							addFormulaDisabledReason={formula.reason}
 							addNewBuilderQuery={addNewBuilderQuery}
-							isAddQueryDisabled={additionalQueries.disabled}
-							addQueryDisabledReason={additionalQueries.reason}
 							addNewFormula={addNewFormula}
 							addTraceOperator={addTraceOperator}
 							showAddTraceOperator={showAddTraceOperator}
@@ -296,8 +277,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{hasTraceOperator && (
 						<TraceOperator
-							isRawQuery={isRawQuery}
-							fieldsConfig={resolvedConfig}
+							isListViewPanel={isListViewPanel}
 							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
@@ -305,7 +285,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 				{showQueryList && (
 					<div className="query-names-section">
-						{renderedQueries.map((query) => (
+						{currentQuery.builder.queryData.map((query) => (
 							<div key={query.queryName} className="query-name">
 								{query.queryName}
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss

@@ -1,144 +0,0 @@
-/**
- * Borrows the query builder's control metrics rather than the component defaults the
- * toggle group and number input ship with: 36px tall, 2px radius, and the
- * `--query-builder-v2-*` surface the selects above this row already paint on.
- */
-.bucketOptions {
-	--toggle-group-radius: var(--radius-1);
-	--toggle-group-item-size: 36px;
-	--toggle-group-item-font-size: 13px;
-	--toggle-group-item-padding-left: var(--spacing-6);
-	--toggle-group-item-padding-right: var(--spacing-6);
-
-	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
-	// formula, which has no add-ons ancestor to pick the toggle palette up from.
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
-	--input-height: 36px;
-	--input-font-size: 13px;
-	--input-border-radius: var(--radius-1);
-	--input-border-color: var(--query-builder-v2-border-color, var(--l2-border));
-	--input-background: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--input-foreground: var(--query-builder-v2-color, var(--l2-foreground));
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-
-	padding: var(--spacing-4);
-	box-sizing: border-box;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	border-radius: var(--radius-1);
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-}
-
-.controls {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-8);
-}
-
-/** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
-.field {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-}
-
-.bounds {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.label {
-	color: var(--l3-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: 18px;
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	white-space: nowrap;
-}
-
-/**
- * The toggle group exposes a font-size token but no family, so each item's label carries
- * the query builder's value type itself.
- */
-.toggleLabel {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	letter-spacing: -0.07px;
-}
-
-/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
-.numberInput {
-	width: 104px;
-
-	font-family: 'Geist Mono';
-	letter-spacing: -0.07px;
-}
-
-/** Bounds read as a sequence of values, so they take the value type in a flat pill. */
-.bound {
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: var(--radius-1);
-
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	color: var(--query-builder-v2-color, var(--l2-foreground));
-	background: var(--l3-background);
-}
-
-.overflowBound {
-	background: transparent;
-	color: var(--l3-foreground);
-}
-
-.muted {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	color: var(--l3-foreground);
-}
-
-.hint {
-	margin: 0;
-	max-width: 72ch;
-
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	line-height: 18px;
-	color: var(--l3-foreground);
-}
-
-.closeBtn {
-	margin-left: auto;
-	width: 36px;
-	height: 36px;
-}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.tsx

@@ -1,268 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
-import cx from 'classnames';
-import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { ChevronUp } from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	BUCKET_KIND_HINTS,
-	BUCKET_KIND_OPTIONS,
-	DEFAULT_NUM_BUCKETS,
-	LOG_BANDS_OPTIONS,
-	MAX_NUM_BUCKETS,
-} from './constants';
-import {
-	bandsPerDoublingFromScale,
-	BucketKindOption,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	isLinearBuckets,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	logScaleOf,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from './utils';
-
-import styles from './BucketOptions.module.scss';
-
-function BucketOptions({
-	bucketOptions,
-	unit,
-	onChange,
-	onClose,
-}: {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/** The panel's y-axis unit, so the previewed bounds read the way the axis will. */
-	unit?: string;
-	onChange: (next: Querybuildertypesv5BucketOptionsDTO | undefined) => void;
-	/** Omitted where the section isn't dismissable, as on a formula. */
-	onClose?: () => void;
-}): JSX.Element {
-	// A linear axis has no bounds to describe until it has a max value, so the picked
-	// kind is held here rather than read back off the emitted options: it has to survive
-	// the gap between choosing Linear and filling the field in.
-	const [kind, setKind] = useState<BucketKindOption>(
-		kindOptionOf(bucketOptions),
-	);
-	const linearSpec =
-		bucketOptions && isLinearBuckets(bucketOptions)
-			? bucketOptions.spec
-			: undefined;
-	const [logScale, setLogScale] = useState<number>(logScaleOf(bucketOptions));
-	const [maxValue, setMaxValue] = useState<number | null>(
-		linearSpec?.maxValue ?? null,
-	);
-	const [numBuckets, setNumBuckets] = useState<number | null>(
-		linearSpec?.numBuckets ?? null,
-	);
-
-	const emitLinear = useCallback(
-		(nextMaxValue: number | null, nextNumBuckets: number | null): void => {
-			// An incomplete linear axis is sent as no axis at all rather than as a spec the
-			// request would reject.
-			if (nextMaxValue === null || nextMaxValue <= 0) {
-				onChange(undefined);
-				return;
-			}
-
-			onChange(linearBuckets(nextMaxValue, nextNumBuckets));
-		},
-		[onChange],
-	);
-
-	const handleKindChange = useCallback(
-		(value: string): void => {
-			// Radix clears the value when the active item is clicked again; a bucket axis is
-			// always one of the three, so keep the current pick instead.
-			if (!value) {
-				return;
-			}
-
-			const nextKind = value as BucketKindOption;
-			setKind(nextKind);
-
-			if (nextKind === 'auto') {
-				onChange(undefined);
-			} else if (nextKind === 'log') {
-				onChange(logBuckets(logScale));
-			} else {
-				emitLinear(maxValue, numBuckets);
-			}
-		},
-		[emitLinear, logScale, maxValue, numBuckets, onChange],
-	);
-
-	const handleBandsChange = useCallback(
-		(value: string): void => {
-			if (!value) {
-				return;
-			}
-
-			const nextScale = scaleFromBandsPerDoubling(Number(value));
-			setLogScale(nextScale);
-			onChange(logBuckets(nextScale));
-		},
-		[onChange],
-	);
-
-	const handleMaxValueChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setMaxValue(next);
-			emitLinear(next, numBuckets);
-		},
-		[emitLinear, numBuckets],
-	);
-
-	const handleNumBucketsChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setNumBuckets(next);
-			emitLinear(maxValue, next);
-		},
-		[emitLinear, maxValue],
-	);
-
-	// The toggle group takes a ReactNode label, which is how each item picks up the
-	// query builder's value type — the component exposes no font-family token.
-	const kindItems = useMemo(
-		() =>
-			BUCKET_KIND_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	const bandItems = useMemo(
-		() =>
-			LOG_BANDS_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	// The kind toggle can be ahead of what has been emitted, so the preview describes
-	// the picked kind rather than the emitted options.
-	const previewedOptions = useMemo(():
-		| Querybuildertypesv5BucketOptionsDTO
-		| undefined => {
-		if (kind === 'log') {
-			return logBuckets(logScale);
-		}
-		if (kind === 'linear' && maxValue !== null) {
-			return linearBuckets(maxValue, numBuckets);
-		}
-		return undefined;
-	}, [kind, logScale, maxValue, numBuckets]);
-
-	const bounds =
-		kind === 'linear' && !previewedOptions
-			? undefined
-			: previewUpperBounds(previewedOptions);
-
-	return (
-		<div className={styles.bucketOptions} data-testid="bucket-options">
-			<div className={styles.controls}>
-				<div className={styles.field}>
-					<span className={styles.label}>Bucket by</span>
-					<ToggleGroupSimple
-						type="single"
-						value={kind}
-						items={kindItems}
-						onChange={handleKindChange}
-						testId="bucket-options-kind"
-					/>
-				</div>
-
-				{kind === 'log' && (
-					<div className={styles.field}>
-						<span className={styles.label}>Bands per doubling</span>
-						<ToggleGroupSimple
-							type="single"
-							value={String(bandsPerDoublingFromScale(logScale))}
-							items={bandItems}
-							onChange={handleBandsChange}
-							testId="bucket-options-bands"
-						/>
-					</div>
-				)}
-
-				{kind === 'linear' && (
-					<>
-						<div className={styles.field}>
-							<span className={styles.label}>Max value</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={0}
-								value={maxValue}
-								onChange={handleMaxValueChange}
-								placeholder="Required"
-								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
-								data-testid="bucket-options-max-value"
-							/>
-						</div>
-						<div className={styles.field}>
-							<span className={styles.label}>Buckets</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={1}
-								max={MAX_NUM_BUCKETS}
-								precision={0}
-								value={numBuckets}
-								onChange={handleNumBucketsChange}
-								placeholder={String(DEFAULT_NUM_BUCKETS)}
-								data-testid="bucket-options-num-buckets"
-							/>
-						</div>
-					</>
-				)}
-
-				{onClose && (
-					<Button
-						className={cx('periscope-btn', 'ghost', styles.closeBtn)}
-						icon={<ChevronUp size={16} />}
-						onClick={onClose}
-						data-testid="bucket-options-close"
-					/>
-				)}
-			</div>
-
-			<div className={styles.bounds} data-testid="bucket-options-bounds">
-				<span className={styles.label}>Bounds</span>
-				{bounds ? (
-					<>
-						{bounds.map((bound) => (
-							<span className={styles.bound} key={bound}>
-								{formatUpperBound(bound, unit)}
-							</span>
-						))}
-						{hasBoundsBeyondPreview(previewedOptions) && (
-							<span className={styles.muted}>…</span>
-						)}
-						<span className={cx(styles.bound, styles.overflowBound)}>+Inf</span>
-					</>
-				) : (
-					<span className={styles.muted}>Set a max value to see the bounds</span>
-				)}
-			</div>
-
-			<p className={styles.hint}>{BUCKET_KIND_HINTS[kind]}</p>
-		</div>
-	);
-}
-
-BucketOptions.defaultProps = {
-	bucketOptions: undefined,
-	unit: undefined,
-	onClose: undefined,
-};
-
-export default BucketOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/__tests__/utils.test.ts

@@ -1,89 +0,0 @@
-import { MAX_LOG_SCALE } from '../constants';
-import {
-	bandsPerDoublingFromScale,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from '../utils';
-
-describe('bucket option scales', () => {
-	it.each([
-		[0, 1],
-		[1, 2],
-		[2, 4],
-		[3, 8],
-		[4, 16],
-	])('scale %i is %i bands per doubling', (scale, bands) => {
-		expect(bandsPerDoublingFromScale(scale)).toBe(bands);
-		expect(scaleFromBandsPerDoubling(bands)).toBe(scale);
-	});
-});
-
-describe('kindOptionOf', () => {
-	it('reads no options as auto', () => {
-		expect(kindOptionOf(undefined)).toBe('auto');
-	});
-
-	it('reads the kind off the options', () => {
-		expect(kindOptionOf(logBuckets(MAX_LOG_SCALE))).toBe('log');
-		expect(kindOptionOf(linearBuckets(10, null))).toBe('linear');
-	});
-});
-
-describe('previewUpperBounds', () => {
-	it('doubles at one band per doubling', () => {
-		expect(previewUpperBounds(logBuckets(0))).toStrictEqual([
-			1, 2, 4, 8, 16, 32, 64, 128,
-		]);
-	});
-
-	it('falls back to the finest log axis when no options are set', () => {
-		const bounds = previewUpperBounds(undefined);
-
-		expect(bounds).toHaveLength(8);
-		// 16 bands per doubling: the eighth bound is 2^(7/16), still short of the first doubling.
-		expect(bounds?.[7]).toBeCloseTo(2 ** (7 / 16));
-	});
-
-	it('spaces a linear axis evenly by bucket width', () => {
-		expect(previewUpperBounds(linearBuckets(100, 10))).toStrictEqual(
-			[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].slice(0, 8),
-		);
-	});
-
-	it('stops at the last bucket when the axis has fewer than the preview shows', () => {
-		expect(previewUpperBounds(linearBuckets(9, 3))).toStrictEqual([3, 6, 9]);
-	});
-
-	it('has no bounds to preview for a linear axis without a usable max value', () => {
-		expect(previewUpperBounds(linearBuckets(0, null))).toBeUndefined();
-		expect(previewUpperBounds(linearBuckets(-1, null))).toBeUndefined();
-	});
-});
-
-describe('hasBoundsBeyondPreview', () => {
-	it('is always true for a log axis, which has no top', () => {
-		expect(hasBoundsBeyondPreview(logBuckets(0))).toBe(true);
-		expect(hasBoundsBeyondPreview(undefined)).toBe(true);
-	});
-
-	it('tracks whether a linear axis runs past the preview', () => {
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 4))).toBe(false);
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 20))).toBe(true);
-	});
-});
-
-describe('formatUpperBound', () => {
-	it('reads a bound in the panel unit when one is set', () => {
-		expect(formatUpperBound(1, 'ms')).toContain('ms');
-	});
-
-	it('keeps three significant digits when unitless', () => {
-		expect(formatUpperBound(128, undefined)).toBe('128');
-		expect(formatUpperBound(2 ** (1 / 16), undefined)).toBe('1.04');
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts

@@ -1,46 +0,0 @@
-/**
- * Mirrors the limits `querybuildertypesv5` validates `bucketOptions` against. The
- * builder keeps its own copy so an out-of-range axis is refused before the request
- * rather than after it.
- */
-
-/**
- * A log axis spaces bounds at 2^scale bands per doubling. MaxLogScale is the
- * resolution ClickHouse buckets at, so it is both the finest available and what an
- * absent `bucketOptions` resolves to.
- */
-export const MAX_LOG_SCALE = 4;
-
-export const MAX_NUM_BUCKETS = 512;
-
-export const DEFAULT_NUM_BUCKETS = 60;
-
-/**
- * The bands-per-doubling the toggle offers, coarsest first. Each is 2^scale for a
- * scale in [0, MAX_LOG_SCALE]: a negative scale is a whole number of doublings per
- * band instead, which has no bands-per-doubling label.
- */
-export const LOG_BANDS_PER_DOUBLING = [1, 2, 4, 8, 16] as const;
-
-/** How many leading upper bounds the bounds strip previews before eliding. */
-export const PREVIEW_BOUND_COUNT = 8;
-
-/** The kind toggle's options. `auto` sends no options and lets the server choose. */
-export const BUCKET_KIND_OPTIONS = [
-	{ value: 'auto', label: 'Auto' },
-	{ value: 'log', label: 'Log' },
-	{ value: 'linear', label: 'Linear' },
-];
-
-export const LOG_BANDS_OPTIONS = LOG_BANDS_PER_DOUBLING.map((bands) => ({
-	value: String(bands),
-	label: String(bands),
-}));
-
-export const BUCKET_KIND_HINTS = {
-	auto:
-		'Bounds are picked for you: a log axis at 16 bands per doubling, the finest the query can return.',
-	log: 'Bounds are spaced evenly on a log axis, so every band is the same height on screen and the tail stays readable. Fewer bands per doubling means fewer, coarser bands.',
-	linear:
-		'Bounds are spaced evenly from 0 up to the max value, so a band covers the same width wherever it sits. Everything above the max value lands in a single overflow band.',
-};

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts

@@ -1,130 +0,0 @@
-import {
-	Querybuildertypesv5BucketOptionsDTO,
-	Querybuildertypesv5BucketOptionsLinearDTO,
-	Querybuildertypesv5BucketOptionsLinearDTOKind,
-	Querybuildertypesv5BucketOptionsLogDTO,
-	Querybuildertypesv5BucketOptionsLogDTOKind,
-} from 'api/generated/services/sigNoz.schemas';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import {
-	DEFAULT_NUM_BUCKETS,
-	MAX_LOG_SCALE,
-	PREVIEW_BOUND_COUNT,
-} from './constants';
-
-/**
- * The toggle's own vocabulary: the two kinds the request takes, plus `auto` for
- * sending no options at all and letting the server pick the axis.
- */
-export type BucketKindOption = 'auto' | 'log' | 'linear';
-
-export const isLinearBuckets = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO,
-): bucketOptions is Querybuildertypesv5BucketOptionsLinearDTO =>
-	bucketOptions.kind === Querybuildertypesv5BucketOptionsLinearDTOKind.linear;
-
-export const linearBuckets = (
-	maxValue: number,
-	numBuckets: number | null,
-): Querybuildertypesv5BucketOptionsLinearDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind.linear,
-	spec: { maxValue, ...(numBuckets ? { numBuckets } : {}) },
-});
-
-export const logBuckets = (
-	scale: number,
-): Querybuildertypesv5BucketOptionsLogDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
-	spec: { scale },
-});
-
-/**
- * The log spec's scale, defaulted the way the server defaults it. A linear axis has
- * no scale, so it reads as the default too.
- */
-export const logScaleOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number =>
-	bucketOptions && !isLinearBuckets(bucketOptions)
-		? (bucketOptions.spec.scale ?? MAX_LOG_SCALE)
-		: MAX_LOG_SCALE;
-
-export const bandsPerDoublingFromScale = (scale: number): number => 2 ** scale;
-
-export const scaleFromBandsPerDoubling = (bands: number): number =>
-	Math.round(Math.log2(bands));
-
-export const kindOptionOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): BucketKindOption => {
-	if (!bucketOptions) {
-		return 'auto';
-	}
-
-	return isLinearBuckets(bucketOptions) ? 'linear' : 'log';
-};
-
-/**
- * The leading upper bounds the axis will carry. A log axis is anchored at 1 — band
- * index 0's boundary — and a linear one at the top of its first band; both continue
- * past what the strip shows, and everything above the last one lands in the overflow
- * band the UI labels separately.
- *
- * `undefined` for a linear axis with no max value yet: without a top there is nothing
- * to divide.
- */
-export function previewUpperBounds(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number[] | undefined {
-	if (bucketOptions && isLinearBuckets(bucketOptions)) {
-		const { maxValue, numBuckets = DEFAULT_NUM_BUCKETS } = bucketOptions.spec;
-
-		if (!Number.isFinite(maxValue) || maxValue <= 0 || numBuckets <= 0) {
-			return undefined;
-		}
-
-		const width = maxValue / numBuckets;
-
-		return Array.from(
-			{ length: Math.min(numBuckets, PREVIEW_BOUND_COUNT) },
-			(_, index) => (index + 1) * width,
-		);
-	}
-
-	const bands = bandsPerDoublingFromScale(logScaleOf(bucketOptions));
-
-	return Array.from(
-		{ length: PREVIEW_BOUND_COUNT },
-		(_, index) => 2 ** (index / bands),
-	);
-}
-
-/**
- * Whether the strip elides bounds after the ones it shows. A linear axis with no more
- * buckets than the strip holds ends where the strip does.
- */
-export function hasBoundsBeyondPreview(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): boolean {
-	if (!bucketOptions || !isLinearBuckets(bucketOptions)) {
-		return true;
-	}
-
-	return (
-		(bucketOptions.spec.numBuckets ?? DEFAULT_NUM_BUCKETS) > PREVIEW_BOUND_COUNT
-	);
-}
-
-/**
- * A bound is a value on the panel's own axis, so it reads in the panel's unit when one
- * is set. Unitless, three significant digits keep the tightly spaced bounds of a fine
- * log axis distinguishable without printing the float in full.
- */
-export function formatUpperBound(bound: number, unit?: string): string {
-	if (unit) {
-		return getYAxisFormattedValue(String(bound), unit);
-	}
-
-	return Number(bound.toPrecision(3)).toString();
-}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -23,11 +23,6 @@
 		align-items: center;
 		justify-content: center;
 		gap: var(--margin-2);
-
-		&--disabled {
-			opacity: 0.45;
-			cursor: not-allowed;
-		}
 	}
 }
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
-import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -10,29 +9,11 @@ import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/Re
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import {
-	BarChart,
-	ChevronUp,
-	ExternalLink,
-	Grid3X3,
-	ScrollText,
-} from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
+import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-import {
-	QueryBuilderField,
-	QueryBuilderFieldsConfig,
-} from '../../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderFields,
-} from '../../queryBuilderFields.utils';
-
-import BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -41,38 +22,34 @@ import './QueryAddOns.styles.scss';
 interface AddOn {
 	icon: React.ReactNode;
 	label: string;
-	key: QueryBuilderField;
+	key: string;
 	description?: string;
 	docLink?: string;
 }
 
-/** Fields the add-on bar does not own: each has its own control elsewhere in the query. */
-type NonAddOnField =
-	| QueryBuilderField.Aggregation
-	| QueryBuilderField.StepInterval
-	| QueryBuilderField.Functions
-	| QueryBuilderField.Formula
-	| QueryBuilderField.AdditionalQueries;
-
-// Omit rather than Partial, so a field added to the enum has to be placed on one side.
-const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
-	Record<QueryBuilderField, string>,
-	NonAddOnField
-> = {
-	[QueryBuilderField.GroupBy]: 'groupBy',
-	[QueryBuilderField.Having]: 'having.expression',
-	[QueryBuilderField.OrderBy]: 'orderBy',
-	[QueryBuilderField.Limit]: 'limit',
-	[QueryBuilderField.Legend]: 'legend',
-	[QueryBuilderField.ReduceTo]: 'reduceTo',
-	[QueryBuilderField.BucketOptions]: 'bucketOptions',
+const ADD_ONS_KEYS = {
+	GROUP_BY: 'group_by',
+	HAVING: 'having',
+	ORDER_BY: 'order_by',
+	LIMIT: 'limit',
+	LEGEND_FORMAT: 'legend_format',
+	REDUCE_TO: 'reduce_to',
 };
 
-const ADD_ONS: AddOn[] = [
+const ADD_ONS_KEYS_TO_QUERY_PATH = {
+	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
+	[ADD_ONS_KEYS.HAVING]: 'having.expression',
+	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
+	[ADD_ONS_KEYS.LIMIT]: 'limit',
+	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
+	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
+};
+
+const ADD_ONS = [
 	{
 		icon: <BarChart size={14} />,
 		label: 'Group By',
-		key: QueryBuilderField.GroupBy,
+		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
@@ -80,7 +57,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: QueryBuilderField.Having,
+		key: ADD_ONS_KEYS.HAVING,
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -89,7 +66,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: QueryBuilderField.OrderBy,
+		key: ADD_ONS_KEYS.ORDER_BY,
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -98,7 +75,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: QueryBuilderField.Limit,
+		key: ADD_ONS_KEYS.LIMIT,
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -107,7 +84,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: QueryBuilderField.Legend,
+		key: ADD_ONS_KEYS.LEGEND_FORMAT,
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -115,27 +92,16 @@ const ADD_ONS: AddOn[] = [
 	},
 ];
 
-const REDUCE_TO: AddOn = {
+const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: QueryBuilderField.ReduceTo,
+	key: ADD_ONS_KEYS.REDUCE_TO,
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
 		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };
 
-// Offered only by a heatmap over metrics: the bucket axis is what a heatmap plots
-// against, and no other panel type sends one.
-const BUCKET_OPTIONS: AddOn = {
-	icon: <Grid3X3 size={14} />,
-	label: 'Bucket by',
-	key: QueryBuilderField.BucketOptions,
-	description:
-		'Choose how the bucket axis is spaced — logarithmically, so every band is the same height and the tail stays readable, or linearly up to a max value. Left to Auto, the query picks the finest log axis it can return.',
-	docLink: 'https://signoz.io/docs/userguide/query-builder-v5/',
-};
-
 const hasValue = (value: unknown): boolean =>
 	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
 
@@ -188,26 +154,26 @@ function TooltipContent({
 function QueryAddOns({
 	query,
 	version,
-	isRawQuery,
+	isListViewPanel,
 	showReduceTo,
 	panelType,
 	index,
-	fieldsConfig,
 	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
-	isRawQuery: boolean;
+	isListViewPanel: boolean;
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
-	fieldsConfig?: QueryBuilderFieldsConfig;
 	isForTraceOperator?: boolean;
 }): JSX.Element {
+	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
+
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
 	const initializedRef = useRef(false);
-	const prevAvailableKeysRef = useRef<Set<QueryBuilderField> | null>(null);
+	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
 
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
@@ -216,75 +182,42 @@ function QueryAddOns({
 		isForTraceOperator,
 	});
 
-	const { handleSetQueryData, currentQuery } = useQueryBuilder();
+	const { handleSetQueryData } = useQueryBuilder();
 
-	const supportedAddOns = useMemo((): AddOn[] => {
-		let addOns: AddOn[];
+	useEffect(() => {
+		if (isListViewPanel) {
+			setAddOns([]);
 
+			setSelectedViews([
+				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
+			]);
+
+			return;
+		}
+
+		let filteredAddOns: AddOn[];
 		if (panelType === PANEL_TYPES.VALUE) {
-			addOns = ADD_ONS.filter((addOn) => addOn.key === QueryBuilderField.Legend);
-		} else if (query.dataSource === DataSource.METRICS) {
-			// Group by for metrics is offered by MetricsAggregateSection instead.
-			addOns = ADD_ONS.filter((addOn) => addOn.key !== QueryBuilderField.GroupBy);
+			// Filter out all add-ons except legend format
+			filteredAddOns = ADD_ONS.filter(
+				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
+			);
 		} else {
-			addOns = [...ADD_ONS];
+			filteredAddOns = Object.values(ADD_ONS);
+
+			if (query.dataSource === DataSource.METRICS) {
+				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
+				filteredAddOns = filteredAddOns.filter(
+					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
+				);
+			}
 		}
 
 		if (showReduceTo) {
-			addOns = [...addOns, REDUCE_TO];
+			filteredAddOns = [...filteredAddOns, REDUCE_TO];
 		}
+		setAddOns(filteredAddOns);
 
-		if (
-			panelType === PANEL_TYPES.HEATMAP &&
-			query.dataSource === DataSource.METRICS
-		) {
-			addOns = [...addOns, BUCKET_OPTIONS];
-		}
-
-		return addOns;
-	}, [panelType, query.dataSource, showReduceTo]);
-
-	const resolvedFields = useMemo(
-		() =>
-			resolveQueryBuilderFields(
-				supportedAddOns.map((addOn) => addOn.key),
-				mergeQueryBuilderFieldsConfig(
-					isRawQuery ? RAW_QUERY_FIELDS : undefined,
-					fieldsConfig,
-				),
-			),
-		[supportedAddOns, fieldsConfig, isRawQuery],
-	);
-
-	const offeredAddOns = useMemo(
-		() =>
-			supportedAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.hidden),
-		[supportedAddOns, resolvedFields],
-	);
-
-	const pinnedAddOns = useMemo(
-		() => offeredAddOns.filter((addOn) => resolvedFields.get(addOn.key)?.pinned),
-		[offeredAddOns, resolvedFields],
-	);
-
-	const togglableAddOns = useMemo(
-		() => offeredAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.pinned),
-		[offeredAddOns, resolvedFields],
-	);
-
-	const isPinned = useCallback(
-		(key: QueryBuilderField): boolean => Boolean(resolvedFields.get(key)?.pinned),
-		[resolvedFields],
-	);
-
-	const isDisabled = useCallback(
-		(key: QueryBuilderField): boolean =>
-			Boolean(resolvedFields.get(key)?.disabled),
-		[resolvedFields],
-	);
-
-	useEffect(() => {
-		const availableAddOnKeys = new Set(offeredAddOns.map((a) => a.key));
+		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
 		const previousKeys = prevAvailableKeysRef.current;
 		const hasAvailabilityItemsChanged =
 			previousKeys !== null &&
@@ -298,39 +231,27 @@ function QueryAddOns({
 			const activeAddOnKeys = new Set(
 				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
 					.filter(([, path]) => hasValue(get(query, path)))
-					.map(([key]) => key as QueryBuilderField),
+					.map(([key]) => key),
 			);
 
-			// Initial seeding from query values on mount. A disabled field never opens.
+			// Initial seeding from query values on mount
 			setSelectedViews(
-				offeredAddOns.filter((addOn) => {
-					const resolved = resolvedFields.get(addOn.key);
-
-					return (
-						resolved?.pinned ||
-						(activeAddOnKeys.has(addOn.key) && !resolved?.disabled)
-					);
-				}),
+				filteredAddOns.filter(
+					(addOn) =>
+						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+				),
 			);
 			return;
 		}
 
-		setSelectedViews((prev) => {
-			const kept = prev.filter((view) => availableAddOnKeys.has(view.key));
-
-			const reopenedPinned = pinnedAddOns.filter(
-				(addOn) => !kept.some((view) => view.key === addOn.key),
-			);
-
-			return [...kept, ...reopenedPinned];
-		});
-	}, [offeredAddOns, pinnedAddOns, query]);
+		setSelectedViews((prev) =>
+			prev.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
+			),
+		);
+	}, [panelType, isListViewPanel, query, showReduceTo]);
 
 	const handleOptionClick = (clickedAddOn: AddOn): void => {
-		if (isDisabled(clickedAddOn.key)) {
-			return;
-		}
-
 		const isAlreadySelected = selectedViews.some(
 			(view) => view.key === clickedAddOn.key,
 		);
@@ -344,7 +265,7 @@ function QueryAddOns({
 			// and existing group-by keys, prefill the legend using all group-by keys.
 			// This keeps existing custom legends intact and only helps seed a sensible default.
 			if (
-				clickedAddOn.key === QueryBuilderField.Legend &&
+				clickedAddOn.key === ADD_ONS_KEYS.LEGEND_FORMAT &&
 				isEmpty(query?.legend) &&
 				Array.isArray(query.groupBy) &&
 				query.groupBy.length > 0
@@ -389,16 +310,9 @@ function QueryAddOns({
 		[handleSetQueryData, index, query],
 	);
 
-	const handleRemoveView = useCallback(
-		(key: QueryBuilderField): void => {
-			if (isPinned(key)) {
-				return;
-			}
-
-			setSelectedViews((prev) => prev.filter((view) => view.key !== key));
-		},
-		[isPinned],
-	);
+	const handleRemoveView = useCallback((key: string): void => {
+		setSelectedViews((prev) => prev.filter((view) => view.key !== key));
+	}, []);
 
 	const handleChangeQueryLegend = useCallback(
 		(value: string) => {
@@ -423,18 +337,11 @@ function QueryAddOns({
 		[handleChangeQueryData],
 	);
 
-	const handleChangeBucketOptions = useCallback(
-		(value: Querybuildertypesv5BucketOptionsDTO | undefined) => {
-			handleChangeQueryData('bucketOptions', value);
-		},
-		[handleChangeQueryData],
-	);
-
 	return (
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
-					{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
+					{selectedViews.find((view) => view.key === 'group_by') && (
 						<div className="add-on-content" data-testid="group-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -462,17 +369,15 @@ function QueryAddOns({
 										onChange={handleChangeGroupByKeys}
 									/>
 								</div>
-								{!isPinned(QueryBuilderField.GroupBy) && (
-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
-									/>
-								)}
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<ChevronUp size={16} />}
+									onClick={(): void => handleRemoveView('group_by')}
+								/>
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
+					{selectedViews.find((view) => view.key === 'having') && (
 						<div className="add-on-content" data-testid="having-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -492,7 +397,11 @@ function QueryAddOns({
 								</Tooltip>
 								<div className="input">
 									<HavingFilter
-										onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
+										onClose={(): void => {
+											setSelectedViews((prev) =>
+												prev.filter((view) => view.key !== 'having'),
+											);
+										}}
 										onChange={handleChangeHaving}
 										queryData={query}
 									/>
@@ -500,7 +409,7 @@ function QueryAddOns({
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
+					{selectedViews.find((view) => view.key === 'limit') && (
 						<div className="add-on-content" data-testid="limit-content">
 							<InputWithLabel
 								label="Limit"
@@ -508,12 +417,16 @@ function QueryAddOns({
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
 								placeholder="Enter limit"
-								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
+								onClose={(): void => {
+									setSelectedViews((prev) =>
+										prev.filter((view) => view.key !== 'limit'),
+									);
+								}}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
+					{selectedViews.find((view) => view.key === 'order_by') && (
 						<div className="add-on-content" data-testid="order-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -536,22 +449,22 @@ function QueryAddOns({
 										entityVersion={version}
 										query={query}
 										onChange={handleChangeOrderByKeys}
-										isRawQuery={isRawQuery}
+										isListViewPanel={isListViewPanel}
 										isNewQueryV2
 									/>
 								</div>
-								{!isPinned(QueryBuilderField.OrderBy) && (
+								{!isListViewPanel && (
 									<Button
 										className="close-btn periscope-btn ghost"
 										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
+										onClick={(): void => handleRemoveView('order_by')}
 									/>
 								)}
 							</div>
 						</div>
 					)}
 
-					{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
+					{selectedViews.find((view) => view.key === 'reduce_to') &&
 						showReduceTo && (
 							<div className="add-on-content" data-testid="reduce-to-content">
 								<div className="periscope-input-with-label">
@@ -574,42 +487,31 @@ function QueryAddOns({
 										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 									</div>
 
-									{!isPinned(QueryBuilderField.ReduceTo) && (
-										<Button
-											className="close-btn periscope-btn ghost"
-											icon={<ChevronUp size={16} />}
-											onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
-										/>
-									)}
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView('reduce_to')}
+									/>
 								</div>
 							</div>
 						)}
 
-					{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
+					{selectedViews.find((view) => view.key === 'legend_format') && (
 						<div className="add-on-content" data-testid="legend-format-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"
 								onChange={handleChangeQueryLegend}
 								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-								onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
+								onClose={(): void => {
+									setSelectedViews((prev) =>
+										prev.filter((view) => view.key !== 'legend_format'),
+									);
+								}}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
 					)}
-
-					{selectedViews.find(
-						(view) => view.key === QueryBuilderField.BucketOptions,
-					) && (
-						<div className="add-on-content" data-testid="bucket-options-content">
-							<BucketOptions
-								bucketOptions={query.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-								onClose={(): void => handleRemoveView(QueryBuilderField.BucketOptions)}
-							/>
-						</div>
-					)}
 				</div>
 			)}
 
@@ -618,49 +520,42 @@ function QueryAddOns({
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
-					const oldKeys: string[] = selectedViews.map((view) => view.key);
+					const oldKeys = selectedViews.map((view) => view.key);
 					const toggledKey =
-						newKeys.find((key) => !oldKeys.includes(key)) ??
-						oldKeys.find((key) => !newKeys.includes(key));
+						newKeys.find((k) => !oldKeys.includes(k)) ??
+						oldKeys.find((k) => !newKeys.includes(k));
 					if (!toggledKey) {
 						return;
 					}
-					const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
+					const clickedAddOn = addOns.find((a) => a.key === toggledKey);
 					if (clickedAddOn) {
 						handleOptionClick(clickedAddOn);
 					}
 				}}
-				items={togglableAddOns.map((addOn) => {
-					const resolved = resolvedFields.get(addOn.key);
-
-					return {
-						value: addOn.key,
-						label: (
-							<Tooltip
-								title={
-									<TooltipContent
-										label={addOn.label}
-										description={resolved?.reason ?? addOn.description}
-										docLink={resolved?.disabled ? undefined : addOn.docLink}
-									/>
-								}
-								placement="top"
-								mouseEnterDelay={0.5}
+				items={addOns.map((addOn) => ({
+					value: addOn.key,
+					label: (
+						<Tooltip
+							title={
+								<TooltipContent
+									label={addOn.label}
+									description={addOn.description}
+									docLink={addOn.docLink}
+								/>
+							}
+							placement="top"
+							mouseEnterDelay={0.5}
+						>
+							<span
+								className="add-on-tab-title"
+								data-testid={`query-add-on-${addOn.key}`}
 							>
-								<span
-									className={cx('add-on-tab-title', {
-										'add-on-tab-title--disabled': resolved?.disabled,
-									})}
-									aria-disabled={resolved?.disabled}
-									data-testid={`query-add-on-${addOn.key}`}
-								>
-									{addOn.icon}
-									{addOn.label}
-								</span>
-							</Tooltip>
-						),
-					};
-				})}
+								{addOn.icon}
+								{addOn.label}
+							</span>
+						</Tooltip>
+					),
+				}))}
 			/>
 		</div>
 	);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -8,12 +8,6 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	QueryBuilderField,
-	QueryBuilderFieldsConfig,
-} from '../../queryBuilderFields.types';
-import { resolveQueryBuilderField } from '../../queryBuilderFields.utils';
-
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -24,32 +18,24 @@ function QueryAggregationOptions({
 	onAggregationIntervalChange,
 	onChange,
 	queryData,
-	fieldsConfig,
 }: {
 	dataSource: DataSource;
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
 	queryData: IBuilderQuery | IBuilderTraceOperator;
-	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
-	const stepInterval = useMemo(() => {
+	const showAggregationInterval = useMemo(() => {
 		if (panelType === PANEL_TYPES.VALUE) {
-			return { hidden: true, disabled: false, reason: undefined };
+			return false;
 		}
 
-		const isNonMetricSource =
-			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
-
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
-			return { hidden: true, disabled: false, reason: undefined };
+		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
+			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
 		}
 
-		return resolveQueryBuilderField(QueryBuilderField.StepInterval, fieldsConfig);
-	}, [dataSource, panelType, fieldsConfig]);
+		return true;
+	}, [dataSource, panelType]);
 
 	const handleAggregationIntervalChange = (value: string): void => {
 		onAggregationIntervalChange(Number(value));
@@ -71,24 +57,22 @@ function QueryAggregationOptions({
 					}
 				/>
 
-				{!stepInterval.hidden && (
+				{showAggregationInterval && (
 					<div className="query-aggregation-interval">
 						<Tooltip
 							title={
-								stepInterval.reason ?? (
-									<div>
-										Set the time interval for aggregation
-										<br />
-										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
-											target="_blank"
-											rel="noopener noreferrer"
-											style={{ color: '#1890ff', textDecoration: 'underline' }}
-										>
-											Learn about step intervals
-										</a>
-									</div>
-								)
+								<div>
+									Set the time interval for aggregation
+									<br />
+									<a
+										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										target="_blank"
+										rel="noopener noreferrer"
+										style={{ color: '#1890ff', textDecoration: 'underline' }}
+									>
+										Learn about step intervals
+									</a>
+								</div>
 							}
 							placement="top"
 						>
@@ -108,7 +92,6 @@ function QueryAggregationOptions({
 								placeholder="Auto"
 								type="number"
 								onChange={handleAggregationIntervalChange}
-								disabled={stepInterval.disabled}
 								labelAfter
 							/>
 						</div>
@@ -122,7 +105,6 @@ function QueryAggregationOptions({
 QueryAggregationOptions.defaultProps = {
 	panelType: null,
 	onChange: undefined,
-	fieldsConfig: undefined,
 };
 
 export default QueryAggregationOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -17,13 +17,13 @@ function TraceOperatorSection({
 	const { currentQuery, panelType } = useQueryBuilder();
 
 	const showTraceOperatorWarning = useMemo(() => {
-		const isRawQueryPanel =
+		const isListViewPanel =
 			panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
 		const hasMultipleQueries = currentQuery.builder.queryData.length > 1;
 		const hasTraceOperator =
 			currentQuery.builder.queryTraceOperator &&
 			currentQuery.builder.queryTraceOperator.length > 0;
-		return isRawQueryPanel && hasMultipleQueries && !hasTraceOperator;
+		return isListViewPanel && hasMultipleQueries && !hasTraceOperator;
 	}, [
 		currentQuery?.builder?.queryData,
 		currentQuery?.builder?.queryTraceOperator,
@@ -77,74 +77,50 @@ export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
 	addTraceOperator,
-	showAddQuery = true,
 	showAddFormula = true,
 	showAddTraceOperator = false,
-	isAddQueryDisabled = false,
-	addQueryDisabledReason,
-	isAddFormulaDisabled = false,
-	addFormulaDisabledReason,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
 	addTraceOperator?: () => void;
 	showAddTraceOperator: boolean;
-	showAddQuery?: boolean;
 	showAddFormula?: boolean;
-	isAddQueryDisabled?: boolean;
-	addQueryDisabledReason?: string;
-	isAddFormulaDisabled?: boolean;
-	addFormulaDisabledReason?: string;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
 			<div className="qb-footer-container">
-				{showAddQuery && (
-					<div className="qb-add-new-query">
-						<Tooltip
-							title={
-								addQueryDisabledReason ?? (
-									<div style={{ textAlign: 'center' }}>Add New Query</div>
-								)
-							}
-						>
-							<Button
-								className="add-new-query-button periscope-btn "
-								data-testid="add-new-query-button"
-								icon={<Plus size={16} />}
-								onClick={addNewBuilderQuery}
-								disabled={isAddQueryDisabled}
-							/>
-						</Tooltip>
-					</div>
-				)}
+				<div className="qb-add-new-query">
+					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
+						<Button
+							className="add-new-query-button periscope-btn "
+							icon={<Plus size={16} />}
+							onClick={addNewBuilderQuery}
+						/>
+					</Tooltip>
+				</div>
 
 				{showAddFormula && (
 					<div className="qb-add-formula">
 						<Tooltip
 							title={
-								addFormulaDisabledReason ?? (
-									<div style={{ textAlign: 'center' }}>
-										Add New Formula
-										<Typography.Link
-											href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
-											target="_blank"
-											style={{ textDecoration: 'underline' }}
-										>
-											{' '}
-											<br />
-											Learn more
-										</Typography.Link>
-									</div>
-								)
+								<div style={{ textAlign: 'center' }}>
+									Add New Formula
+									<Typography.Link
+										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
 							}
 						>
 							<Button
 								className="add-formula-button periscope-btn "
-								data-testid="add-formula-button"
 								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
-								disabled={isAddFormulaDisabled}
 							>
 								Add Formula
 							</Button>

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -20,13 +20,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderField } from '../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-} from '../queryBuilderFields.utils';
-
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -38,7 +31,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 		index,
 		queryVariant,
 		query,
-		isRawQuery = false,
+		filterConfigs,
+		isListViewPanel = false,
 		showTraceOperator = false,
 		hasTraceOperator = false,
 		version,
@@ -49,8 +43,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 		signalSourceChangeEnabled = false,
 		queriesCount = 1,
 		savePreviousQuery = false,
-		fieldsConfig,
-		allowedDataSources,
 	}: QueryProps & {
 		onSignalSourceChange: (value: string) => void;
 		signalSourceChangeEnabled: boolean;
@@ -61,7 +53,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 ): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
-	const hasQueryFunctions = query?.functions?.length > 0;
+	const showFunctions = query?.functions?.length > 0;
 	const { dataSource, builderQueryType } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
@@ -74,7 +66,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	} = useQueryOperations({
 		index,
 		query,
-		isRawQuery,
+		filterConfigs,
+		isListViewPanel,
 		entityVersion: version,
 		savePreviousQuery,
 	});
@@ -106,31 +99,14 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, builderQueryType],
 	);
 
-	const resolvedConfig = useMemo(
-		() =>
-			mergeQueryBuilderFieldsConfig(
-				isRawQuery ? RAW_QUERY_FIELDS : undefined,
-				fieldsConfig,
-			),
-		[isRawQuery, fieldsConfig],
-	);
-
-	const aggregation = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Aggregation, resolvedConfig),
-		[resolvedConfig],
-	);
-
-	const functions = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Functions, resolvedConfig),
-		[resolvedConfig],
-	);
-
 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
 			return false;
 		}
-		return dataSource === DataSource.TRACES && (hasTraceOperator || isRawQuery);
-	}, [hasTraceOperator, isRawQuery, showTraceOperator, dataSource]);
+		return (
+			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
+		);
+	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
 
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@@ -173,15 +149,12 @@ export const QueryV2 = forwardRef(function QueryV2(
 									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
-										!functions.hidden &&
-										((version && version === ENTITY_VERSION_V4) ||
-											query.dataSource === DataSource.LOGS ||
-											query.dataSource === DataSource.METRICS ||
-											hasQueryFunctions ||
-											false)
+										(version && version === ENTITY_VERSION_V4) ||
+										query.dataSource === DataSource.LOGS ||
+										query.dataSource === DataSource.METRICS ||
+										showFunctions ||
+										false
 									}
-									areFunctionsDisabled={functions.disabled}
-									functionsDisabledReason={functions.reason}
 									isCollapsed={isCollapsed}
 									showTraceOperator={showTraceOperator}
 									entityType="query"
@@ -194,8 +167,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
 									showDeleteButton={false}
 									showCloneOption={false}
-									isRawQuery={isRawQuery}
-									allowedDataSources={allowedDataSources}
+									isListViewPanel={isListViewPanel}
 									index={index}
 									queryVariant={queryVariant}
 									onChangeDataSource={handleChangeDataSource}
@@ -295,7 +267,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 						</div>
 
 						{!showOnlyWhereClause &&
-							!aggregation.hidden &&
+							!isListViewPanel &&
 							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
@@ -305,7 +277,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onAggregationIntervalChange={handleChangeAggregateEvery}
 									onChange={handleChangeAggregation}
 									queryData={query}
-									fieldsConfig={fieldsConfig}
 								/>
 							)}
 
@@ -326,10 +297,9 @@ export const QueryV2 = forwardRef(function QueryV2(
 									index={index}
 									query={query}
 									version="v3"
-									isRawQuery={isRawQuery}
+									isListViewPanel={isListViewPanel}
 									showReduceTo={showReduceTo}
 									panelType={panelType}
-									fieldsConfig={fieldsConfig}
 								/>
 							)}
 					</div>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -11,7 +11,6 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderFieldsConfig } from '../../queryBuilderFields.types';
 import QueryAddOns from '../QueryAddOns/QueryAddOns';
 import QueryAggregation from '../QueryAggregation/QueryAggregation';
 import TraceOperatorEditor from './TraceOperatorEditor';
@@ -20,12 +19,10 @@ import './TraceOperator.styles.scss';
 
 export default function TraceOperator({
 	traceOperator,
-	isRawQuery = false,
-	fieldsConfig,
+	isListViewPanel = false,
 }: {
 	traceOperator: IBuilderTraceOperator;
-	isRawQuery?: boolean;
-	fieldsConfig?: QueryBuilderFieldsConfig;
+	isListViewPanel?: boolean;
 }): JSX.Element {
 	const { panelType, removeTraceOperator } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -61,12 +58,12 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(
 						'qb-trace-operator-label-with-input',
-						!isRawQuery && 'qb-trace-operator-arrow',
+						!isListViewPanel && 'qb-trace-operator-arrow',
 					)}
 				>
 					<Typography.Text className="label">Trace Operator</Typography.Text>
@@ -79,9 +76,9 @@ export default function TraceOperator({
 					</div>
 				</div>
 
-				{!isRawQuery && (
+				{!isListViewPanel && (
 					<div className="qb-trace-operator-aggregation-container">
-						<div className={cx(!isRawQuery && 'qb-trace-operator-arrow')}>
+						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
 							<QueryAggregation
 								dataSource={DataSource.TRACES}
 								key={`query-search-${traceOperator.queryName}`}
@@ -89,13 +86,12 @@ export default function TraceOperator({
 								onAggregationIntervalChange={handleChangeAggregateEvery}
 								onChange={handleChangeAggregation}
 								queryData={traceOperator}
-								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 						<div
 							className={cx(
 								'qb-trace-operator-add-ons-container',
-								!isRawQuery && 'qb-trace-operator-arrow',
+								!isListViewPanel && 'qb-trace-operator-arrow',
 							)}
 						>
 							<QueryAddOns
@@ -103,10 +99,9 @@ export default function TraceOperator({
 								query={traceOperator}
 								version="v3"
 								isForTraceOperator
-								isRawQuery={false}
+								isListViewPanel={false}
 								showReduceTo={false}
 								panelType={panelType}
-								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 					</div>

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -142,6 +142,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			isMetricsDataSource: false,
 			operators: [],
 			spaceAggregationOptions: [],
+			listOfAdditionalFilters: [],
 			handleChangeOperator: jest.fn(),
 			handleSpaceAggregationChange: jest.fn(),
 			handleChangeAggregatorAttribute: jest.fn(),
@@ -151,6 +152,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 				jest.fn() as unknown as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
 			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
+			listOfAdditionalFormulaFilters: [],
 		});
 	});
 

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -26,10 +26,8 @@ jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): {
 		handleSetQueryData: typeof mockHandleSetQueryData;
-		currentQuery: { unit: string | undefined };
 	} => ({
 		handleSetQueryData: mockHandleSetQueryData,
-		currentQuery: { unit: undefined },
 	}),
 }));
 
@@ -97,7 +95,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.VALUE}
 				index={0}
@@ -121,7 +119,7 @@ describe('QueryAddOns', () => {
 					groupBy: ['service.name'],
 				})}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -137,7 +135,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery
+				isListViewPanel
 				showReduceTo={false}
 				panelType={PANEL_TYPES.LIST}
 				index={0}
@@ -153,7 +151,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -178,7 +176,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -197,7 +195,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -213,7 +211,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ reduceTo: ReduceOperators.SUM })}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -236,7 +234,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -288,7 +286,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -316,7 +314,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -332,145 +330,4 @@ describe('QueryAddOns', () => {
 			expect.anything(),
 		);
 	});
-	describe('bucket options', () => {
-		function renderHeatmap(overrides: Partial<any> = {}): void {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS, ...overrides })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-		}
-
-		it('is offered on a metrics heatmap only', () => {
-			renderHeatmap();
-
-			expect(
-				screen.getByTestId('query-add-on-bucket_options'),
-			).toBeInTheDocument();
-		});
-
-		it('is not offered on other panel types', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it('is not offered on a heatmap over another signal', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.LOGS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it("auto-opens on the query's own kind", () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			expect(screen.getByTestId('bucket-options-content')).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
-			expect(screen.getByRole('radio', { name: '1' })).toBeChecked();
-		});
-
-		it('sends no options for Auto', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Auto' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-		});
-
-		it('sends the scale the picked bands per doubling resolve to', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 4 } } });
-
-			await user.click(screen.getByRole('radio', { name: '1' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
-				kind: 'log',
-				spec: { scale: 0 },
-			});
-		});
-
-		it('previews the bounds the picked axis will carry', () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			const bounds = within(screen.getByTestId('bucket-options-bounds'));
-			['1', '2', '4', '8', '16', '32', '64', '128', '+Inf'].forEach((bound) => {
-				expect(bounds.getByText(bound)).toBeInTheDocument();
-			});
-		});
-
-		it('sends nothing for a linear axis until it has a max value', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-			expect(
-				screen.getByText('Set a max value to see the bounds'),
-			).toBeInTheDocument();
-		});
-
-		it('sends the linear axis once a max value is filled in', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
-
-			await waitFor(() => {
-				expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-					'bucketOptions',
-					{ kind: 'linear', spec: { maxValue: 500 } },
-				);
-			});
-		});
-
-		it('closes back to the toggle bar', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByTestId('bucket-options-close'));
-
-			expect(
-				screen.queryByTestId('bucket-options-content'),
-			).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/components/QueryBuilderV2/__tests__/QueryFooter.test.tsx

@@ -1,46 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import QueryFooter from '../QueryV2/QueryFooter/QueryFooter';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): {
-		currentQuery: { builder: { queryData: unknown[] } };
-		panelType: string;
-	} => ({
-		currentQuery: { builder: { queryData: [] } },
-		panelType: 'time_series',
-	}),
-}));
-
-const noop = (): void => {};
-
-describe('QueryFooter', () => {
-	it('offers both buttons by default', () => {
-		render(
-			<QueryFooter
-				addNewBuilderQuery={noop}
-				addNewFormula={noop}
-				showAddTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('add-new-query-button')).toBeInTheDocument();
-		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
-	});
-
-	// A kind whose request takes a single query (Heatmap) hides the button outright
-	// rather than disabling it — a query it adds is one the builder cannot render.
-	it('drops the Add New Query button when the caller withholds it', () => {
-		render(
-			<QueryFooter
-				addNewBuilderQuery={noop}
-				addNewFormula={noop}
-				showAddQuery={false}
-				showAddTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.queryByTestId('add-new-query-button')).not.toBeInTheDocument();
-		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
-	});
-});

frontend/src/components/QueryBuilderV2/__tests__/queryBuilderFields.utils.test.ts

@@ -1,140 +0,0 @@
-import { QueryBuilderField } from '../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-	resolveQueryBuilderFields,
-} from '../queryBuilderFields.utils';
-
-const SUPPORTED = [
-	QueryBuilderField.GroupBy,
-	QueryBuilderField.Having,
-	QueryBuilderField.OrderBy,
-	QueryBuilderField.Limit,
-	QueryBuilderField.Legend,
-];
-
-describe('resolveQueryBuilderField', () => {
-	it('leaves an unconfigured field available', () => {
-		expect(resolveQueryBuilderField(QueryBuilderField.Having)).toStrictEqual({
-			hidden: false,
-			disabled: false,
-			pinned: false,
-		});
-	});
-
-	it('hides a field configured hidden', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
-			[QueryBuilderField.Having]: { state: 'hidden' },
-		});
-
-		expect(resolved.hidden).toBe(true);
-		expect(resolved.disabled).toBe(false);
-	});
-
-	it('carries the reason through on a disabled field', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
-			[QueryBuilderField.Having]: {
-				state: 'disabled',
-				reason: 'Having filters aggregated results.',
-			},
-		});
-
-		expect(resolved).toStrictEqual({
-			hidden: false,
-			disabled: true,
-			reason: 'Having filters aggregated results.',
-			pinned: false,
-		});
-	});
-
-	it('pins a field configured pinned', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.OrderBy, {
-			[QueryBuilderField.OrderBy]: { state: 'pinned' },
-		});
-
-		expect(resolved.pinned).toBe(true);
-		expect(resolved.hidden).toBe(false);
-	});
-
-	it('only ever resolves one state at a time', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
-			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },
-		});
-
-		expect([resolved.hidden, resolved.disabled, resolved.pinned]).toStrictEqual([
-			false,
-			true,
-			false,
-		]);
-	});
-});
-
-describe('resolveQueryBuilderFields', () => {
-	it('resolves every supported field and nothing else', () => {
-		const resolved = resolveQueryBuilderFields(SUPPORTED);
-
-		expect([...resolved.keys()]).toStrictEqual(SUPPORTED);
-	});
-
-	it('cannot widen beyond what the builder supports', () => {
-		const resolved = resolveQueryBuilderFields([QueryBuilderField.Legend], {
-			[QueryBuilderField.ReduceTo]: { state: 'pinned' },
-		});
-
-		expect(resolved.has(QueryBuilderField.ReduceTo)).toBe(false);
-	});
-});
-
-describe('mergeQueryBuilderFieldsConfig', () => {
-	it('returns the override when there is no baseline', () => {
-		const override = { [QueryBuilderField.Limit]: { state: 'hidden' } } as const;
-
-		expect(mergeQueryBuilderFieldsConfig(undefined, override)).toBe(override);
-	});
-
-	it('returns the baseline when there is no override', () => {
-		expect(mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, undefined)).toBe(
-			RAW_QUERY_FIELDS,
-		);
-	});
-
-	it('lets the override win per field, leaving the rest of the baseline intact', () => {
-		const merged = mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, {
-			[QueryBuilderField.Having]: { state: 'disabled', reason: 'no aggregation' },
-		});
-
-		expect(merged?.[QueryBuilderField.Having]).toStrictEqual({
-			state: 'disabled',
-			reason: 'no aggregation',
-		});
-		expect(merged?.[QueryBuilderField.GroupBy]).toStrictEqual({
-			state: 'hidden',
-		});
-		expect(merged?.[QueryBuilderField.OrderBy]).toStrictEqual({
-			state: 'pinned',
-		});
-	});
-});
-
-describe('RAW_QUERY_FIELDS', () => {
-	it('reduces an aggregate surface to a pinned order by', () => {
-		const resolved = resolveQueryBuilderFields(SUPPORTED, RAW_QUERY_FIELDS);
-
-		const visible = [...resolved.entries()]
-			.filter(([, field]) => !field.hidden)
-			.map(([key]) => key);
-
-		expect(visible).toStrictEqual([QueryBuilderField.OrderBy]);
-		expect(resolved.get(QueryBuilderField.OrderBy)?.pinned).toBe(true);
-	});
-
-	it('leaves additional queries alone, so trace matching still allows several', () => {
-		expect(
-			resolveQueryBuilderField(
-				QueryBuilderField.AdditionalQueries,
-				RAW_QUERY_FIELDS,
-			).hidden,
-		).toBe(false);
-	});
-});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -1,37 +0,0 @@
-/**
- * Everything the query builder can surface.
- *
- * The per-query values double as the add-on identities the builder renders
- * (`data-testid="query-add-on-<value>"`), so they are part of the DOM contract and must
- * not be renamed to match the member names.
- */
-export enum QueryBuilderField {
-	// Per query
-	Aggregation = 'aggregation',
-	StepInterval = 'step_interval',
-	Functions = 'functions',
-	GroupBy = 'group_by',
-	Having = 'having',
-	OrderBy = 'order_by',
-	Limit = 'limit',
-	Legend = 'legend_format',
-	ReduceTo = 'reduce_to',
-	BucketOptions = 'bucket_options',
-	// Builder level
-	Formula = 'formula',
-	AdditionalQueries = 'additional_queries',
-}
-
-/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
-export type QueryBuilderFieldRule =
-	| { state: 'hidden' }
-	| { state: 'disabled'; reason: string }
-	| { state: 'pinned' };
-
-/**
- * A caller's narrowing of the builder's surface. The builder works out which fields suit
- * the current data source and panel type first; this can only take away from that set.
- */
-export type QueryBuilderFieldsConfig = Partial<
-	Record<QueryBuilderField, QueryBuilderFieldRule>
->;

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -1,93 +0,0 @@
-import {
-	QueryBuilderField,
-	QueryBuilderFieldRule,
-	QueryBuilderFieldsConfig,
-} from './queryBuilderFields.types';
-
-export interface ResolvedQueryBuilderField {
-	hidden: boolean;
-	disabled: boolean;
-	reason?: string;
-	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
-	pinned: boolean;
-}
-
-const AVAILABLE: ResolvedQueryBuilderField = {
-	hidden: false,
-	disabled: false,
-	pinned: false,
-};
-
-function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
-	switch (rule.state) {
-		case 'hidden':
-			return { hidden: true, disabled: false, pinned: false };
-		case 'disabled':
-			return {
-				hidden: false,
-				disabled: true,
-				reason: rule.reason,
-				pinned: false,
-			};
-		case 'pinned':
-			return { hidden: false, disabled: false, pinned: true };
-		default:
-			return AVAILABLE;
-	}
-}
-
-export function resolveQueryBuilderField(
-	field: QueryBuilderField,
-	config?: QueryBuilderFieldsConfig,
-): ResolvedQueryBuilderField {
-	const rule = config?.[field];
-
-	return rule ? fromRule(rule) : AVAILABLE;
-}
-
-/**
- * Fields absent from `supported` are hidden whatever the config says, so a config can
- * only ever take away.
- */
-export function resolveQueryBuilderFields(
-	supported: readonly QueryBuilderField[],
-	config?: QueryBuilderFieldsConfig,
-): Map<QueryBuilderField, ResolvedQueryBuilderField> {
-	return new Map(
-		supported.map((field) => [field, resolveQueryBuilderField(field, config)]),
-	);
-}
-
-/**
- * The surface a raw-row builder starts from, layered under a caller's own config.
- * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
- * queries when trace matching is on. Omit rather than Partial, so a field added to the
- * enum has to be placed on one side.
- */
-export const RAW_QUERY_FIELDS: Omit<
-	Record<QueryBuilderField, QueryBuilderFieldRule>,
-	QueryBuilderField.AdditionalQueries
-> = {
-	[QueryBuilderField.Aggregation]: { state: 'hidden' },
-	[QueryBuilderField.StepInterval]: { state: 'hidden' },
-	[QueryBuilderField.Functions]: { state: 'hidden' },
-	[QueryBuilderField.GroupBy]: { state: 'hidden' },
-	[QueryBuilderField.Having]: { state: 'hidden' },
-	[QueryBuilderField.Limit]: { state: 'hidden' },
-	[QueryBuilderField.Legend]: { state: 'hidden' },
-	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
-	[QueryBuilderField.BucketOptions]: { state: 'hidden' },
-	[QueryBuilderField.Formula]: { state: 'hidden' },
-	[QueryBuilderField.OrderBy]: { state: 'pinned' },
-};
-
-export function mergeQueryBuilderFieldsConfig(
-	baseline: QueryBuilderFieldsConfig | undefined,
-	override: QueryBuilderFieldsConfig | undefined,
-): QueryBuilderFieldsConfig | undefined {
-	if (!baseline) {
-		return override;
-	}
-
-	return override ? { ...baseline, ...override } : baseline;
-}

frontend/src/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// V2-only kind; it renders through the V2 panel registry.
-		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,

frontend/src/constants/queryBuilder.ts

@@ -32,6 +32,7 @@ import {
 	MeterAggregateOperator,
 	MetricAggregateOperator,
 	NumberOperators,
+	QueryAdditionalFilter,
 	QueryBuilderData,
 	ReduceOperators,
 	StringOperators,
@@ -103,6 +104,43 @@ export const metricsSpaceAggregationOperatorsByType = {
 	ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
 };
 
+export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
+	metrics: [
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+		{ text: 'Having', field: 'having' },
+	],
+	logs: [
+		{ text: 'Order by', field: 'orderBy' },
+		{ text: 'Limit', field: 'limit' },
+		{ text: 'Having', field: 'having' },
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+	],
+	traces: [
+		{ text: 'Order by', field: 'orderBy' },
+		{ text: 'Limit', field: 'limit' },
+		{ text: 'Having', field: 'having' },
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+	],
+};
+
+const commonFormulaFilters: QueryAdditionalFilter[] = [
+	{
+		text: 'Having',
+		field: 'having',
+	},
+	{ text: 'Order by', field: 'orderBy' },
+	{ text: 'Limit', field: 'limit' },
+];
+
+export const mapOfFormulaToFilters: Record<
+	DataSource,
+	QueryAdditionalFilter[]
+> = {
+	metrics: commonFormulaFilters,
+	logs: commonFormulaFilters,
+	traces: commonFormulaFilters,
+};
+
 export const REDUCE_TO_VALUES: SelectOption<ReduceOperators, string>[] = [
 	{ value: ReduceOperators.LAST, label: 'Latest of values in timeframe' },
 	{ value: ReduceOperators.SUM, label: 'Sum of values in timeframe' },
@@ -338,7 +376,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	HEATMAP = 'heatmap',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/constants/queryBuilderOperators.ts

@@ -527,21 +527,6 @@ export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
 	},
 ];
 
-/**
- * A heatmap's Y axis is the `le` labels themselves, so every percentile draws the grid a
- * count already draws. Sum is also what the statement builder forces on a histogram
- * heatmap whatever is asked for, so it is the only honest option to offer.
- */
-export const metricsHeatmapHistogramSpaceAggregateOperatorOptions: SelectOption<
-	string,
-	string
->[] = [
-	{
-		value: MetricAggregateOperator.COUNT,
-		label: 'Count',
-	},
-];
-
 export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
 	string,
 	string

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -467,7 +467,6 @@ describe('Footer utils', () => {
 											timeAggregation: 'avg',
 										},
 									],
-									bucketOptions: undefined,
 									disabled: false,
 									filter: {
 										expression: '',

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,23 +1,35 @@
 import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const isRawQuery = useMemo(
+	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
+		() => ({
+			stepInterval: { isHidden: false, isDisabled: false },
+			limit: { isHidden: false, isDisabled: true },
+			having: { isHidden: false, isDisabled: true },
+		}),
+		[],
+	);
+
+	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isRawQuery={isRawQuery}
+			isListViewPanel={isListViewPanel}
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			panelType={panelTypes}
-			showOnlyWhereClause={isRawQuery}
+			filterConfigs={filterConfigs}
+			showOnlyWhereClause={isListViewPanel}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LogExplorerQuerySection/index.tsx

@@ -1,6 +1,13 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	initialQueriesMap,
+	OPERATORS,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -29,11 +36,42 @@ function LogExplorerQuerySection({
 
 	useShareBuilderUrl({ defaultValue });
 
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isTable = panelTypes === PANEL_TYPES.TABLE;
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: isTable, isDisabled: false },
+			having: { isHidden: isList, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps): JSX.Element => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
+		[],
+	);
+
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({
+			...(panelTypes === PANEL_TYPES.LIST ? { renderOrderBy } : {}),
+		}),
+		[panelTypes, renderOrderBy],
+	);
+
 	return (
 		<QueryBuilderV2
-			isRawQuery={panelTypes === PANEL_TYPES.LIST}
+			isListViewPanel={panelTypes === PANEL_TYPES.LIST}
 			config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
 			panelType={panelTypes}
+			filterConfigs={filterConfigs}
+			queryComponents={queryComponents}
 			showOnlyWhereClause={selectedView === ExplorerViews.LIST}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>

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

@@ -12,6 +12,7 @@ import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -119,6 +120,11 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({}),
+		[],
+	);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div
@@ -175,6 +181,7 @@ function Explorer(): JSX.Element {
 								signalSource: 'meter',
 							}}
 							panelType={PANEL_TYPES.TIME_SERIES}
+							queryComponents={queryComponents}
 							showFunctions={false}
 							version="v3"
 						/>

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -12,6 +12,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -322,6 +323,11 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({}),
+		[],
+	);
+
 	const [warning, setWarning] = useState<Warning | undefined>();
 
 	const oneChartPerQueryDisabledTooltip = useMemo(() => {
@@ -375,6 +381,7 @@ function Explorer(): JSX.Element {
 				<QueryBuilderV2
 					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
 					panelType={PANEL_TYPES.TIME_SERIES}
+					queryComponents={queryComponents}
 					showFunctions={false}
 					version="v3"
 				/>

frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryBuilderFieldsConfig } from 'components/QueryBuilderV2/queryBuilderFields.types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';
+
+export type WhereClauseConfig = {
+	customKey: string;
+	customOp: string;
+};
+
+type FilterConfigs = {
+	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
+		isHidden: boolean;
+		isDisabled: boolean;
+	};
+} & { filters: WhereClauseConfig };
+
 export type QueryBuilderConfig =
 	| {
 			queryVariant: 'static';
@@ -16,16 +29,9 @@ export type QueryBuilderProps = {
 	config?: QueryBuilderConfig;
 	panelType: PANEL_TYPES;
 	actions?: ReactNode;
-	fieldsConfig?: QueryBuilderFieldsConfig;
-	/**
-	 * The builder edits raw rows rather than an aggregation: a single query unless trace
-	 * matching is on, no formulas, data-source switches reset to the raw-query template,
-	 * and order by resolves keys without an aggregate attribute. Supplies the defaults for
-	 * `fieldsConfig` and `allowedDataSources`, which override it per field.
-	 */
-	isRawQuery?: boolean;
-	/** Defaults to every signal. */
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	filterConfigs?: Partial<FilterConfigs>;
+	queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
+	isListViewPanel?: boolean;
 	showFunctions?: boolean;
 	showOnlyWhereClause?: boolean;
 	showOnlyTraceOperator?: boolean;

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.interfaces.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export type AdditionalFiltersProps = {
+	listOfAdditionalFilter: string[];
+	children: ReactNode;
+};

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styled.ts

@@ -0,0 +1,38 @@
+import { SquareMinus, SquarePlus } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import styled, { css } from 'styled-components';
+
+const IconCss = css`
+	margin-right: 0.6875rem;
+	transition: all 0.2s ease;
+`;
+
+export const StyledIconOpen = styled(SquarePlus)`
+	${IconCss}
+`;
+
+export const StyledIconClose = styled(SquareMinus)`
+	${IconCss}
+`;
+
+export const StyledInner = styled(Col)`
+	width: fit-content;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 0.875rem;
+	min-height: 1.375rem;
+	cursor: pointer;
+	&:hover {
+		${StyledIconOpen}, ${StyledIconClose} {
+			opacity: 0.7;
+		}
+	}
+`;
+
+export const StyledLink = styled(Typography.Link)`
+	pointer-events: none;
+	color: ${Color.BG_ROBIN_400} !important;
+`;

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styles.scss

@@ -0,0 +1,15 @@
+.filter-toggler {
+	margin-right: 8px;
+}
+
+.additinal-filters-container {
+	.action-btn {
+		background: var(--primary-background);
+		width: 16px;
+		height: 16px;
+		border-radius: 3px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx

@@ -0,0 +1,66 @@
+import { Fragment, memo, ReactNode, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Col, Row } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Minus, Plus } from '@signozhq/icons';
+
+// ** Types
+import { AdditionalFiltersProps } from './AdditionalFiltersToggler.interfaces';
+// ** Styles
+import { StyledInner, StyledLink } from './AdditionalFiltersToggler.styled';
+
+import './AdditionalFiltersToggler.styles.scss';
+
+export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
+	children,
+	listOfAdditionalFilter,
+}: AdditionalFiltersProps): JSX.Element {
+	const [isOpenedFilters, setIsOpenedFilters] = useState<boolean>(false);
+
+	const handleToggleOpenFilters = (): void => {
+		setIsOpenedFilters((prevState) => !prevState);
+	};
+
+	const filtersTexts: ReactNode = listOfAdditionalFilter?.map((str, index) => {
+		const isNextLast = index + 1 === listOfAdditionalFilter.length - 1;
+
+		if (index === listOfAdditionalFilter.length - 1) {
+			return (
+				<Fragment key={str}>
+					{listOfAdditionalFilter?.length > 1 && 'and'}{' '}
+					<StyledLink>{str.toUpperCase()}</StyledLink>
+				</Fragment>
+			);
+		}
+
+		return (
+			<span key={str}>
+				<StyledLink>{str.toUpperCase()}</StyledLink>
+				{isNextLast ? ' ' : ', '}
+			</span>
+		);
+	});
+
+	return (
+		<Row className="additinal-filters-container">
+			<Col span={24}>
+				<StyledInner onClick={handleToggleOpenFilters} style={{ marginBottom: 0 }}>
+					{isOpenedFilters ? (
+						<span className="action-btn">
+							<Minus size={14} color={Color.BG_INK_500} />
+						</span>
+					) : (
+						<span className="action-btn">
+							<Plus size={14} color={Color.BG_INK_500} />
+						</span>
+					)}
+
+					{!isOpenedFilters && (
+						<Typography>Add conditions for {filtersTexts}</Typography>
+					)}
+				</StyledInner>
+			</Col>
+			{isOpenedFilters && <Col span={24}>{children}</Col>}
+		</Row>
+	);
+});

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/index.ts

@@ -0,0 +1 @@
+export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.interfaces.ts

@@ -1,10 +1,8 @@
 import { SelectProps } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 
 export type QueryLabelProps = {
 	onChange: (value: DataSource) => void;
-	/** Defaults to every signal. */
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	isListViewPanel?: boolean;
 	'data-testid'?: string;
 } & Omit<SelectProps, 'onChange'>;

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { Select } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 // ** Helpers
@@ -8,24 +7,25 @@ import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 // ** Types
 import { QueryLabelProps } from './DataSourceDropdown.interfaces';
-import { signalsToDataSources } from './DataSourceDropdown.utils';
 
-const ALL_SIGNALS = [
-	TelemetrytypesSignalDTO.logs,
-	TelemetrytypesSignalDTO.metrics,
-	TelemetrytypesSignalDTO.traces,
-];
+const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES];
+
+const exploreDataSourceMap = [DataSource.LOGS, DataSource.TRACES];
 
 export const DataSourceDropdown = memo(function DataSourceDropdown(
 	props: QueryLabelProps,
 ): JSX.Element {
-	const { onChange, value, style, allowedDataSources = ALL_SIGNALS } = props;
+	const { onChange, value, style, isListViewPanel = false } = props;
 
-	const dataSourceOptions: SelectOption<DataSource, string>[] =
-		signalsToDataSources(allowedDataSources).map((source) => ({
-			label: transformToUpperCase(source),
-			value: source,
-		}));
+	const dataSourceOptions: SelectOption<DataSource, string>[] = isListViewPanel
+		? exploreDataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}))
+		: dataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}));
 
 	return (
 		<Select

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.utils.ts

@@ -1,23 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-// Total, not Partial, so a signal added to the generated enum has to be mapped here
-// before it compiles.
-const SIGNAL_TO_DATA_SOURCE: Record<
-	TelemetrytypesSignalDTO,
-	DataSource | undefined
-> = {
-	[TelemetrytypesSignalDTO.logs]: DataSource.LOGS,
-	[TelemetrytypesSignalDTO.metrics]: DataSource.METRICS,
-	[TelemetrytypesSignalDTO.traces]: DataSource.TRACES,
-	// The "unset" member: not a data source a query can be built against.
-	[TelemetrytypesSignalDTO['']]: undefined,
-};
-
-export function signalsToDataSources(
-	signals: readonly TelemetrytypesSignalDTO[],
-): DataSource[] {
-	return signals
-		.map((signal) => SIGNAL_TO_DATA_SOURCE[signal])
-		.filter((dataSource): dataSource is DataSource => Boolean(dataSource));
-}

frontend/src/container/QueryBuilder/components/DataSourceDropdown/__tests__/DataSourceDropdown.test.tsx

@@ -1,79 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { DataSourceDropdown } from '../DataSourceDropdown';
-
-const TEST_ID = 'query-data-source-selector';
-
-async function openDropdown(): Promise<void> {
-	const user = userEvent.setup();
-	const trigger = screen.getByTestId(TEST_ID);
-	await user.click(trigger.querySelector('.ant-select-selector') as HTMLElement);
-}
-
-describe('DataSourceDropdown', () => {
-	// antd's virtual list renders only the first couple of options into jsdom, so
-	// each case asserts what the restriction admits and excludes, not the full list.
-	it('offers the signals beyond the current one when nothing restricts it', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Metrics' })).toBeInTheDocument();
-	});
-
-	it('offers only the signals the caller can visualize', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				allowedDataSources={[TelemetrytypesSignalDTO.metrics]}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Metrics' }),
-		).resolves.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Logs' }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Traces' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('drops a signal that is not a data source a query can be built against', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.LOGS}
-				allowedDataSources={[
-					TelemetrytypesSignalDTO.logs,
-					TelemetrytypesSignalDTO.traces,
-					TelemetrytypesSignalDTO[''],
-				]}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Traces' })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Metrics' }),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.interfaces.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+
+export type FilterLabelProps = {
+	label: string;
+	style?: CSSProperties;
+};

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+interface Props {
+	isDarkMode: boolean;
+	children?: React.ReactNode;
+}
+
+export const StyledLabel = styled.div<Props>`
+	padding: 0 0.6875rem;
+	min-height: 2rem;
+	min-width: 5.625rem;
+	display: inline-flex;
+	white-space: nowrap;
+	align-items: center;
+	border-radius: 0.125rem;
+`;

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+// ** Types
+import { FilterLabelProps } from './FilterLabel.interfaces';
+// ** Styles
+import { StyledLabel } from './FilterLabel.styled';
+
+export const FilterLabel = memo(function FilterLabel({
+	label,
+}: FilterLabelProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	return (
+		<StyledLabel isDarkMode={isDarkMode}>
+			<Typography
+				style={{
+					color: 'var(--bg-vanilla-400)',
+				}}
+			>
+				{label}
+			</Typography>
+		</StyledLabel>
+	);
+});

frontend/src/container/QueryBuilder/components/FilterLabel/index.ts

@@ -0,0 +1 @@
+export { FilterLabel } from './FilterLabel';

frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts

@@ -1,3 +1,4 @@
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
@@ -7,5 +8,7 @@ export type FormulaProps = {
 	formula: IBuilderFormula;
 	index: number;
 	query: IBuilderQuery;
+	filterConfigs: Partial<QueryBuilderProps['filterConfigs']>;
+	isAdditionalFilterEnable: boolean;
 	isQBV2?: boolean;
 };

frontend/src/container/QueryBuilder/components/Formula/Formula.tsx

@@ -1,9 +1,12 @@
 import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import BucketOptions from 'components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions';
 import { LEGEND } from 'constants/global';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+// ** Components
+import { FilterLabel } from 'container/QueryBuilder/components';
+import HavingFilter from 'container/QueryBuilder/filters/Formula/Having/HavingFilter';
+import LimitFilter from 'container/QueryBuilder/filters/Formula/Limit/Limit';
+import OrderByFilter from 'container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter';
 // ** Hooks
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -14,6 +17,7 @@ import {
 import { getFormatedLegend } from 'utils/getFormatedLegend';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { AdditionalFiltersToggler } from '../AdditionalFiltersToggler';
 import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
 // ** Types
 import { FormulaProps } from './Formula.interfaces';
@@ -23,22 +27,22 @@ import './Formula.styles.scss';
 export function Formula({
 	index,
 	formula,
+	filterConfigs,
 	query,
+	isAdditionalFilterEnable,
 	isQBV2,
 }: FormulaProps): JSX.Element {
-	const {
-		removeQueryBuilderEntityByIndex,
-		handleSetFormulaData,
-		panelType,
-		currentQuery,
-	} = useQueryBuilder();
+	const { removeQueryBuilderEntityByIndex, handleSetFormulaData } =
+		useQueryBuilder();
 
-	const { handleChangeFormulaData } = useQueryOperations({
-		index,
-		query,
-		formula,
-		entityVersion: '',
-	});
+	const { listOfAdditionalFormulaFilters, handleChangeFormulaData } =
+		useQueryOperations({
+			index,
+			query,
+			filterConfigs,
+			formula,
+			entityVersion: '',
+		});
 
 	const [isCollapse, setIsCollapsed] = useState(false);
 
@@ -79,9 +83,16 @@ export function Formula({
 		[handleChangeFormulaData],
 	);
 
-	const handleChangeBucketOptions = useCallback(
-		(value: IBuilderFormula['bucketOptions']) => {
-			handleChangeFormulaData('bucketOptions', value);
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderFormula['having']) => {
+			handleChangeFormulaData('having', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const handleChangeOrderByFilter = useCallback(
+		(value: IBuilderFormula['orderBy']) => {
+			handleChangeFormulaData('orderBy', value);
 		},
 		[handleChangeFormulaData],
 	);
@@ -111,6 +122,54 @@ export function Formula({
 		[formula.orderBy],
 	);
 
+	const renderAdditionalFilters = useMemo(
+		() => (
+			<>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Limit" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<LimitFilter formula={formula} onChange={handleChangeLimit} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="HAVING" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<HavingFilter formula={formula} onChange={handleChangeHavingFilter} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Order by" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<OrderByFilter
+								query={query}
+								formula={formula}
+								onChange={handleChangeOrderByFilter}
+							/>
+						</Col>
+					</Row>
+				</Col>
+			</>
+		),
+		[
+			formula,
+			handleChangeHavingFilter,
+			handleChangeLimit,
+			handleChangeOrderByFilter,
+			query,
+		],
+	);
+
 	return (
 		<Row gutter={[0, 15]}>
 			<QBEntityOptions
@@ -147,6 +206,17 @@ export function Formula({
 							addonBefore="Legend Format"
 						/>
 					</Col>
+					{isAdditionalFilterEnable && (
+						<Col span={24}>
+							<AdditionalFiltersToggler
+								listOfAdditionalFilter={listOfAdditionalFormulaFilters}
+							>
+								<Row gutter={[0, 11]} justify="space-between">
+									{renderAdditionalFilters}
+								</Row>
+							</AdditionalFiltersToggler>
+						</Col>
+					)}
 					{isQBV2 && (
 						<Col span={24}>
 							<div className="formula-qbv2-container">
@@ -176,17 +246,6 @@ export function Formula({
 							</div>
 						</Col>
 					)}
-					{/* A heatmap draws its one enabled query, which is the formula when its
-					    inputs are disabled — so the formula states its own bucket axis. */}
-					{isQBV2 && panelType === PANEL_TYPES.HEATMAP && (
-						<Col span={24}>
-							<BucketOptions
-								bucketOptions={formula.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-							/>
-						</Col>
-					)}
 				</Row>
 			)}
 		</Row>

frontend/src/container/QueryBuilder/components/Formula/__tests__/Formula.bucketOptions.test.tsx

@@ -1,91 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { render, screen, userEvent } from 'tests/test-utils';
-import type { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
-
-import { Formula } from '../Formula';
-
-const mockHandleChangeFormulaData = jest.fn();
-let mockPanelType: PANEL_TYPES = PANEL_TYPES.HEATMAP;
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): Record<string, unknown> => ({
-		removeQueryBuilderEntityByIndex: jest.fn(),
-		handleSetFormulaData: jest.fn(),
-		panelType: mockPanelType,
-		currentQuery: { unit: undefined },
-	}),
-}));
-
-jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
-	useQueryOperations: (): Record<string, unknown> => ({
-		handleChangeFormulaData: mockHandleChangeFormulaData,
-	}),
-}));
-
-jest.mock('../../QBEntityOptions/QBEntityOptions', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="qb-entity-options" />,
-}));
-
-function formula(overrides: Partial<IBuilderFormula> = {}): IBuilderFormula {
-	return {
-		queryName: 'F1',
-		expression: 'A',
-		legend: '',
-		disabled: false,
-		...overrides,
-	};
-}
-
-function renderFormula(overrides: Partial<IBuilderFormula> = {}): void {
-	render(
-		<Formula index={0} formula={formula(overrides)} query={{} as never} isQBV2 />,
-	);
-}
-
-describe('Formula bucket options', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockPanelType = PANEL_TYPES.HEATMAP;
-	});
-
-	it('offers a bucket axis on a heatmap', () => {
-		renderFormula();
-
-		expect(screen.getByTestId('bucket-options')).toBeInTheDocument();
-	});
-
-	it('is not dismissable — a formula has no add-on toggle bar to collapse into', () => {
-		renderFormula();
-
-		expect(screen.queryByTestId('bucket-options-close')).not.toBeInTheDocument();
-	});
-
-	it('offers no bucket axis on other panel types', () => {
-		mockPanelType = PANEL_TYPES.TIME_SERIES;
-		renderFormula();
-
-		expect(screen.queryByTestId('bucket-options')).not.toBeInTheDocument();
-	});
-
-	it('opens on the axis the formula already carries', () => {
-		renderFormula({
-			bucketOptions: { kind: 'log', spec: { scale: 0 } } as never,
-		});
-
-		expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
-		expect(screen.getByRole('radio', { name: '1' })).toBeChecked();
-	});
-
-	it('writes the picked axis onto the formula', async () => {
-		const user = userEvent.setup();
-		renderFormula();
-
-		await user.click(screen.getByRole('radio', { name: 'Log' }));
-
-		expect(mockHandleChangeFormulaData).toHaveBeenCalledWith('bucketOptions', {
-			kind: 'log',
-			spec: { scale: 4 },
-		});
-	});
-});

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss

@@ -84,14 +84,5 @@
 		.options-group {
 			max-width: 100%;
 		}
-
-		.query-functions-container--disabled {
-			opacity: 0.45;
-			cursor: not-allowed;
-
-			> * {
-				pointer-events: none;
-			}
-		}
 	}
 }

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom';
 import { Button, Col, Tooltip } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -27,8 +26,6 @@ interface QBEntityOptionsProps {
 	query?: IBuilderQuery;
 	isMetricsDataSource?: boolean;
 	showFunctions?: boolean;
-	areFunctionsDisabled?: boolean;
-	functionsDisabledReason?: string;
 	isCollapsed: boolean;
 	entityType: string;
 	entityData: any;
@@ -39,8 +36,7 @@ interface QBEntityOptionsProps {
 	onQueryFunctionsUpdates?: (functions: QueryFunction[]) => void;
 	showDeleteButton?: boolean;
 	showCloneOption?: boolean;
-	isRawQuery?: boolean;
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	isListViewPanel?: boolean;
 	index?: number;
 	showTraceOperator?: boolean;
 	hasTraceOperator?: boolean;
@@ -54,15 +50,12 @@ export default function QBEntityOptions({
 	isMetricsDataSource,
 	isCollapsed,
 	showFunctions,
-	areFunctionsDisabled,
-	functionsDisabledReason,
 	entityType,
 	entityData,
 	onToggleVisibility,
 	onCollapseEntity,
 	onQueryFunctionsUpdates,
-	isRawQuery,
-	allowedDataSources,
+	isListViewPanel,
 	onDelete,
 	showDeleteButton,
 	showCloneOption,
@@ -107,7 +100,7 @@ export default function QBEntityOptions({
 									value="query-builder"
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
-									disabled={isRawQuery && !showTraceOperator}
+									disabled={isListViewPanel && !showTraceOperator}
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -126,7 +119,7 @@ export default function QBEntityOptions({
 									'periscope-btn',
 									entityType === 'query' ? 'query-name' : 'formula-name',
 									query?.dataSource === DataSource.TRACES &&
-										(hasTraceOperator || (showTraceOperator && isRawQuery))
+										(hasTraceOperator || (showTraceOperator && isListViewPanel))
 										? 'has-trace-operator'
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
@@ -145,33 +138,24 @@ export default function QBEntityOptions({
 										}}
 										data-testid={`query-data-source-selector-${index}`}
 										value={query?.dataSource || DataSource.METRICS}
-										allowedDataSources={allowedDataSources}
+										isListViewPanel={isListViewPanel}
 										className="query-data-source-dropdown"
 									/>
 								</div>
 							)}
 
 							{showFunctions &&
-								!isRawQuery &&
+								!isListViewPanel &&
 								(isMetricsDataSource || isLogsDataSource) &&
 								query &&
 								onQueryFunctionsUpdates && (
-									<Tooltip title={functionsDisabledReason}>
-										<div
-											className={cx('query-functions-container', {
-												'query-functions-container--disabled': areFunctionsDisabled,
-											})}
-											aria-disabled={areFunctionsDisabled}
-										>
-											<QueryFunctions
-												query={query}
-												queryFunctions={query.functions || []}
-												key={query.functions?.toString()}
-												onChange={onQueryFunctionsUpdates}
-												maxFunctions={isLogsDataSource ? 1 : 3}
-											/>
-										</div>
-									</Tooltip>
+									<QueryFunctions
+										query={query}
+										queryFunctions={query.functions || []}
+										key={query.functions?.toString()}
+										onChange={onQueryFunctionsUpdates}
+										maxFunctions={isLogsDataSource ? 1 : 3}
+									/>
 								)}
 						</Button.Group>
 					</div>
@@ -184,7 +168,7 @@ export default function QBEntityOptions({
 					)}
 				</div>
 
-				{showDeleteButton && !isRawQuery && (
+				{showDeleteButton && !isListViewPanel && (
 					<Button className="periscope-btn ghost" onClick={onDelete}>
 						<Trash2 size={14} />
 					</Button>
@@ -195,14 +179,11 @@ export default function QBEntityOptions({
 }
 
 QBEntityOptions.defaultProps = {
-	isRawQuery: false,
-	allowedDataSources: undefined,
+	isListViewPanel: false,
 	query: undefined,
 	isMetricsDataSource: false,
 	onQueryFunctionsUpdates: undefined,
 	showFunctions: false,
-	areFunctionsDisabled: false,
-	functionsDisabledReason: undefined,
 	onCloneQuery: noop,
 	index: 0,
 	onDelete: noop,

frontend/src/container/QueryBuilder/components/index.ts

@@ -1,4 +1,6 @@
+export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';
 export { DataSourceDropdown } from './DataSourceDropdown';
+export { FilterLabel } from './FilterLabel';
 export { Formula } from './Formula';
 export { HavingFilterTag } from './HavingFilterTag';
 export { ListItemWrapper } from './ListItemWrapper';

frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Select } from 'antd';
+import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
+import { HavingFilterTag } from 'container/QueryBuilder/components';
+import { useTagValidation } from 'hooks/queryBuilder/useTagValidation';
+import {
+	transformFromStringToHaving,
+	transformHavingToStringValue,
+} from 'lib/query/transformQueryBuilderData';
+import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
+import { SelectOption } from 'types/common/select';
+import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+
+import { getHavingObject, isValidHavingValue } from '../../utils';
+import { HavingFilterProps, HavingTagRenderProps } from './types';
+
+function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
+	const getPopupContainer = useSelectPopupContainer();
+	const { having } = formula;
+	const [searchText, setSearchText] = useState<string>('');
+	const [localValues, setLocalValues] = useState<string[]>([]);
+	const [currentFormValue, setCurrentFormValue] =
+		useState<HavingForm>(initialHavingValues);
+	const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
+
+	const { isMulti } = useTagValidation(
+		currentFormValue.op,
+		currentFormValue.value,
+	);
+
+	const columnName = formula.expression.replace(/ /g, '').toUpperCase();
+
+	const aggregatorOptions: SelectOption<string, string>[] = useMemo(
+		() => [{ label: columnName, value: columnName }],
+		[columnName],
+	);
+
+	const handleUpdateTag = useCallback(
+		(value: string) => {
+			const filteredValues = localValues.filter(
+				(currentValue) => currentValue !== value,
+			);
+			const having: Having[] = filteredValues.map(transformFromStringToHaving);
+
+			onChange(having);
+			setSearchText(value);
+		},
+		[localValues, onChange],
+	);
+
+	const generateOptions = useCallback(
+		(currentString: string) => {
+			const [aggregator = '', op = '', ...restValue] = currentString.split(' ');
+			let newOptions: SelectOption<string, string>[] = [];
+
+			const isAggregatorExist = columnName
+				.toLowerCase()
+				.includes(currentString.toLowerCase());
+
+			const isAggregatorChosen = aggregator === columnName;
+
+			if (isAggregatorExist || aggregator === '') {
+				newOptions = aggregatorOptions;
+			}
+
+			if ((isAggregatorChosen && op === '') || op) {
+				const filteredOperators = HAVING_OPERATORS.filter((num) =>
+					num.toLowerCase().includes(op.toLowerCase()),
+				);
+
+				newOptions = filteredOperators.map((opt) => ({
+					label: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+					value: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+				}));
+			}
+
+			setOptions(newOptions);
+		},
+		[aggregatorOptions, columnName],
+	);
+
+	const parseSearchText = useCallback(
+		(text: string) => {
+			const { columnName, op, value } = getHavingObject(text);
+			setCurrentFormValue({ columnName, op, value });
+
+			generateOptions(text);
+		},
+		[generateOptions],
+	);
+
+	const tagRender = ({
+		label,
+		value,
+		closable,
+		disabled,
+		onClose,
+	}: HavingTagRenderProps): JSX.Element => {
+		const handleClose = (): void => {
+			onClose();
+			setSearchText('');
+		};
+		return (
+			<HavingFilterTag
+				label={label}
+				value={value}
+				closable={closable}
+				disabled={disabled}
+				onClose={handleClose}
+				onUpdate={handleUpdateTag}
+			/>
+		);
+	};
+
+	const handleSearch = (search: string): void => {
+		const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
+
+		const currentSearch = isMulti
+			? trimmedSearch
+			: trimmedSearch.split(' ').slice(0, 3).join(' ');
+
+		const isValidSearch = isValidHavingValue(currentSearch);
+
+		if (isValidSearch) {
+			setSearchText(currentSearch);
+		}
+	};
+
+	useEffect(() => {
+		setLocalValues(transformHavingToStringValue(having || []));
+	}, [having]);
+
+	useEffect(() => {
+		parseSearchText(searchText);
+	}, [searchText, parseSearchText]);
+
+	const resetChanges = (): void => {
+		setSearchText('');
+		setCurrentFormValue(initialHavingValues);
+		setOptions(aggregatorOptions);
+	};
+
+	const handleDeselect = (value: string): void => {
+		const result = localValues.filter((item) => item !== value);
+		const having: Having[] = result.map(transformFromStringToHaving);
+		onChange(having);
+		resetChanges();
+	};
+
+	const handleSelect = (currentValue: string): void => {
+		const { columnName, op, value } = getHavingObject(currentValue);
+
+		const isCompletedValue = value.every((item) => !!item);
+
+		const isClearSearch = isCompletedValue && columnName && op;
+
+		setSearchText(isClearSearch ? '' : currentValue);
+	};
+
+	const handleChange = (values: string[]): void => {
+		const having: Having[] = values.map(transformFromStringToHaving);
+
+		const isSelectable =
+			currentFormValue.value.length > 0 &&
+			currentFormValue.value.every((value) => !!value);
+
+		if (isSelectable) {
+			onChange(having);
+			resetChanges();
+		}
+	};
+
+	return (
+		<Select
+			getPopupContainer={getPopupContainer}
+			autoClearSearchValue={false}
+			mode="multiple"
+			onSearch={handleSearch}
+			searchValue={searchText}
+			data-testid="havingSelectFormula"
+			placeholder="Count(operation) > 5"
+			style={{ width: '100%' }}
+			tagRender={tagRender}
+			onDeselect={handleDeselect}
+			onSelect={handleSelect}
+			onChange={handleChange}
+			value={localValues}
+		>
+			{options.map((opt) => (
+				<Select.Option key={opt.value} value={opt.value} title="havingOption">
+					{opt.label}
+				</Select.Option>
+			))}
+		</Select>
+	);
+}
+
+export default HavingFilter;

frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts

@@ -0,0 +1,12 @@
+import { HavingFilterTagProps } from 'container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces';
+import {
+	Having,
+	IBuilderFormula,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export type HavingFilterProps = {
+	formula: IBuilderFormula;
+	onChange: (having: Having[]) => void;
+};
+
+export type HavingTagRenderProps = Omit<HavingFilterTagProps, 'onUpdate'>;

frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx

@@ -0,0 +1,20 @@
+import { InputNumber } from 'antd';
+
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
+import { handleKeyDownLimitFilter } from '../../utils';
+import { LimitFilterProps } from './types';
+
+function LimitFilter({ onChange, formula }: LimitFilterProps): JSX.Element {
+	return (
+		<InputNumber
+			min={1}
+			type="number"
+			value={formula.limit}
+			style={selectStyle}
+			onChange={onChange}
+			onKeyDown={handleKeyDownLimitFilter}
+		/>
+	);
+}
+
+export default LimitFilter;

frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts

@@ -0,0 +1,6 @@
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface LimitFilterProps {
+	onChange: (values: number | null) => void;
+	formula: IBuilderFormula;
+}

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import { Select, Spin } from 'antd';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
+import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
+import { OrderByProps } from './types';
+import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';
+
+function OrderByFilter({
+	formula,
+	onChange,
+	query,
+}: OrderByProps): JSX.Element {
+	const getPopupContainer = useSelectPopupContainer();
+	const {
+		debouncedSearchText,
+		createOptions,
+		aggregationOptions,
+		handleChange,
+		handleSearchKeys,
+		selectedValue,
+		generateOptions,
+	} = useOrderByFormulaFilter({
+		query,
+		onChange,
+		formula,
+	});
+
+	const { data, isFetching } = useGetAggregateKeys(
+		{
+			aggregateAttribute: query.aggregateAttribute?.key || '',
+			dataSource: query.dataSource,
+			aggregateOperator: query.aggregateOperator || '',
+			searchText: debouncedSearchText,
+		},
+		{
+			enabled: !!query.aggregateAttribute?.key,
+			keepPreviousData: true,
+		},
+	);
+
+	const optionsData = useMemo(() => {
+		const keyOptions = createOptions(data?.payload?.attributeKeys || []);
+		const groupByOptions = createOptions(query.groupBy);
+		const options =
+			query.aggregateOperator === MetricAggregateOperator.NOOP
+				? keyOptions
+				: [...groupByOptions, ...aggregationOptions];
+
+		return generateOptions(options);
+	}, [
+		aggregationOptions,
+		createOptions,
+		data?.payload?.attributeKeys,
+		generateOptions,
+		query.aggregateOperator,
+		query.groupBy,
+	]);
+
+	const isDisabledSelect =
+		!query.aggregateAttribute?.key ||
+		query.aggregateOperator === MetricAggregateOperator.NOOP;
+
+	return (
+		<Select
+			getPopupContainer={getPopupContainer}
+			mode="tags"
+			style={selectStyle}
+			onSearch={handleSearchKeys}
+			showSearch
+			disabled={isDisabledSelect}
+			showArrow={false}
+			value={selectedValue}
+			labelInValue
+			filterOption={false}
+			options={optionsData}
+			notFoundContent={isFetching ? <Spin size="small" /> : null}
+			onChange={handleChange}
+		/>
+	);
+}
+
+export default OrderByFilter;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts

@@ -0,0 +1,12 @@
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export interface OrderByProps {
+	formula: IBuilderFormula;
+	query: IBuilderQuery;
+	onChange: (value: IBuilderFormula['orderBy']) => void;
+}
+
+export type IOrderByFormulaFilterProps = OrderByProps;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx

@@ -0,0 +1,129 @@
+import { useMemo, useState } from 'react';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import useDebounce from 'hooks/useDebounce';
+import { IOption } from 'hooks/useResourceAttribute/types';
+import isEqual from 'lodash-es/isEqual';
+import uniqWith from 'lodash-es/uniqWith';
+import { parse } from 'papaparse';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
+
+import { ORDERBY_FILTERS } from '../../OrderByFilter/config';
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { UseOrderByFilterResult } from '../../OrderByFilter/useOrderByFilter';
+import {
+	getLabelFromValue,
+	mapLabelValuePairs,
+	orderByValueDelimiter,
+} from '../../OrderByFilter/utils';
+import { getRemoveOrderFromValue } from '../../QueryBuilderSearchV2/utils';
+import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
+import { IOrderByFormulaFilterProps } from './types';
+import { transformToOrderByStringValuesByFormula } from './utils';
+
+export const useOrderByFormulaFilter = ({
+	onChange,
+	formula,
+}: IOrderByFormulaFilterProps): UseOrderByFilterResult => {
+	const [searchText, setSearchText] = useState<string>('');
+
+	const debouncedSearchText = useDebounce(searchText, DEBOUNCE_DELAY);
+
+	const handleSearchKeys = (searchText: string): void =>
+		setSearchText(searchText);
+
+	const handleChange = (values: IOption[]): void => {
+		const validResult = getValidOrderByResult(values);
+		const result = getUniqueOrderByValues(validResult);
+
+		const orderByValues: OrderByPayload[] = result.map((item) => {
+			const match = parse(item.value, { delimiter: orderByValueDelimiter });
+
+			if (!match) {
+				return {
+					columnName: item.value,
+					order: ORDERBY_FILTERS.ASC,
+				};
+			}
+
+			const [columnName, order] = match.data.flat() as string[];
+
+			const columnNameValue =
+				columnName === SIGNOZ_VALUE ? SIGNOZ_VALUE : columnName;
+
+			const orderValue = order ?? ORDERBY_FILTERS.ASC;
+
+			return {
+				columnName: columnNameValue,
+				order: orderValue,
+			};
+		});
+
+		setSearchText('');
+		onChange(orderByValues);
+	};
+
+	const aggregationOptions = [
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.ASC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+		},
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.DESC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+		},
+	];
+
+	const selectedValue = transformToOrderByStringValuesByFormula(formula);
+
+	const createOptions = (data: BaseAutocompleteData[]): IOption[] =>
+		mapLabelValuePairs(data).flat();
+
+	const customValue: IOption[] = useMemo(() => {
+		if (!searchText) {
+			return [];
+		}
+
+		return [
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.ASC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+			},
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.DESC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+			},
+		];
+	}, [searchText]);
+
+	const generateOptions = (options: IOption[]): IOption[] => {
+		const currentCustomValue = options.find(
+			(keyOption) =>
+				getRemoveOrderFromValue(keyOption.value) === debouncedSearchText,
+		)
+			? []
+			: customValue;
+
+		const result = [...currentCustomValue, ...options];
+
+		const uniqResult = uniqWith(result, isEqual);
+
+		return uniqResult.filter(
+			(option) =>
+				!getLabelFromValue(selectedValue).includes(
+					getRemoveOrderFromValue(option.value),
+				),
+		);
+	};
+
+	return {
+		searchText,
+		debouncedSearchText,
+		selectedValue,
+		aggregationOptions,
+		createOptions,
+		handleChange,
+		handleSearchKeys,
+		generateOptions,
+	};
+};

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts

@@ -0,0 +1,26 @@
+import { IOption } from 'hooks/useResourceAttribute/types';
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { orderByValueDelimiter } from '../../OrderByFilter/utils';
+
+export const transformToOrderByStringValuesByFormula = (
+	formula: IBuilderFormula,
+): IOption[] => {
+	const prepareSelectedValue: IOption[] =
+		formula?.orderBy?.map((item) => {
+			if (item.columnName === SIGNOZ_VALUE) {
+				return {
+					label: `${formula.expression} ${item.order}`,
+					value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+				};
+			}
+
+			return {
+				label: `${item.columnName} ${item.order}`,
+				value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+			};
+		}) || [];
+
+	return prepareSelectedValue;
+};

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts

@@ -6,7 +6,7 @@ import {
 export type OrderByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: OrderByPayload[]) => void;
-	isRawQuery?: boolean;
+	isListViewPanel?: boolean;
 	entityVersion?: string;
 	isNewQueryV2?: boolean;
 };

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx

@@ -12,7 +12,7 @@ import { useOrderByFilter } from './useOrderByFilter';
 export function OrderByFilter({
 	query,
 	onChange,
-	isRawQuery = false,
+	isListViewPanel = false,
 	entityVersion,
 	isNewQueryV2 = false,
 }: OrderByFilterProps): JSX.Element {
@@ -35,7 +35,7 @@ export function OrderByFilter({
 			searchText: debouncedSearchText,
 		},
 		{
-			enabled: !!query.aggregateAttribute?.key || isRawQuery,
+			enabled: !!query.aggregateAttribute?.key || isListViewPanel,
 			keepPreviousData: true,
 		},
 	);

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -19,6 +19,7 @@ import {
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -87,6 +88,7 @@ interface CustomTagProps {
 interface QueryBuilderSearchV2Props {
 	query: IBuilderQuery;
 	onChange: (value: TagFilter) => void;
+	whereClauseConfig?: WhereClauseConfig;
 	placeholder?: string;
 	className?: string;
 	suffixIcon?: React.ReactNode;
@@ -143,6 +145,7 @@ function QueryBuilderSearchV2(
 		placeholder,
 		className,
 		suffixIcon,
+		whereClauseConfig,
 		hardcodedAttributeKeys,
 		hasPopupContainer,
 		rootClassName,
@@ -474,7 +477,31 @@ function QueryBuilderSearchV2(
 		if (searchValue) {
 			const operatorType =
 				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
+			// if key is added and operator is not present then convert to body CONTAINS key
 			if (
+				currentFilterItem?.key &&
+				isEmpty(currentFilterItem?.op) &&
+				whereClauseConfig?.customKey === 'body' &&
+				whereClauseConfig?.customOp === OPERATORS.CONTAINS
+			) {
+				// eslint-disable-next-line sonarjs/no-identical-functions
+				setTags((prev) => [
+					...prev,
+					{
+						key: {
+							key: 'body',
+							dataType: DataTypes.String,
+							type: '',
+							id: 'body--string----true',
+						},
+						op: OPERATORS.CONTAINS,
+						value: currentFilterItem?.key?.key,
+					},
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			} else if (
 				currentFilterItem?.op === OPERATORS.EXISTS ||
 				currentFilterItem?.op === OPERATORS.NOT_EXISTS
 			) {
@@ -516,6 +543,8 @@ function QueryBuilderSearchV2(
 		currentFilterItem?.op,
 		currentFilterItem?.value,
 		searchValue,
+		whereClauseConfig?.customKey,
+		whereClauseConfig?.customOp,
 	]);
 
 	// this useEffect takes care of tokenisation based on the search state
@@ -1056,6 +1085,7 @@ QueryBuilderSearchV2.defaultProps = {
 	placeholder: PLACEHOLDER,
 	className: '',
 	suffixIcon: null,
+	whereClauseConfig: {},
 	hasPopupContainer: true,
 	rootClassName: '',
 	hardcodedAttributeKeys: undefined,

frontend/src/container/QueryBuilder/type.ts

@@ -26,7 +26,7 @@ export type QueryProps = {
 	isAvailableToDisable: boolean;
 	query: IBuilderQuery;
 	queryVariant?: 'static' | 'dropdown';
-	isRawQuery?: boolean;
+	isListViewPanel?: boolean;
 	showFunctions?: boolean;
 	version: string;
 	showSpanScopeSelector?: boolean;
@@ -35,4 +35,4 @@ export type QueryProps = {
 	hasTraceOperator?: boolean;
 	signalSource?: string;
 	isMultiQueryAllowed?: boolean;
-} & Pick<QueryBuilderProps, 'fieldsConfig' | 'allowedDataSources'>;
+} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/TracesExplorer/QuerySection/index.tsx

@@ -1,23 +1,55 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const isRawQuery = useMemo(
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: false, isDisabled: false },
+			limit: { isHidden: isList, isDisabled: true },
+			having: { isHidden: isList, isDisabled: true },
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps) => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
+		[],
+	);
+
+	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
+		const shouldRenderCustomOrderBy =
+			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
+
+		return {
+			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
+		};
+	}, [panelTypes, renderOrderBy]);
+
+	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isRawQuery={isRawQuery}
+			isListViewPanel={isListViewPanel}
 			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			queryComponents={queryComponents}
 			panelType={panelTypes}
+			filterConfigs={filterConfigs}
 			showOnlyWhereClause={
 				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
 			}

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

@@ -29,7 +29,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
-		HEATMAP: false,
 		TEXT: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Card/FullView/index.tsx

@@ -316,7 +316,7 @@ function FullView({
 								<QueryBuilderV2
 									panelType={selectedPanelType}
 									version="v3"
-									isRawQuery={selectedPanelType === PANEL_TYPES.LIST}
+									isListViewPanel={selectedPanelType === PANEL_TYPES.LIST}
 									signalSourceChangeEnabled
 									// filterConfigs={filterConfigs}
 									// queryComponents={queryComponents}

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

@@ -20,6 +20,4 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
-	// V2-only kind; it renders through the V2 panel registry.
-	[PANEL_TYPES.HEATMAP]: null,
 };

frontend/src/hooks/queryBuilder/__tests__/useQueryBuilderOperations.test.ts

@@ -62,14 +62,14 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 		legend: '',
 	};
 
-	const setupMockQueryBuilder = (panelType = 'time_series'): void => {
+	const setupMockQueryBuilder = (): void => {
 		(useQueryBuilder as jest.Mock).mockReturnValue({
 			handleSetQueryData: mockHandleSetQueryData,
 			handleSetFormulaData: mockHandleSetFormulaData,
 			removeQueryBuilderEntityByIndex: mockRemoveQueryBuilderEntityByIndex,
 			setLastUsedQuery: mockSetLastUsedQuery,
 			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-			panelType,
+			panelType: 'time_series',
 			currentQuery: {
 				builder: {
 					queryData: [defaultMockQuery, defaultMockQuery],
@@ -332,85 +332,4 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 			);
 		});
 	});
-
-	describe('spaceAggregationOptions for a histogram metric', () => {
-		const histogramQuery: IBuilderQuery = {
-			...defaultMockQuery,
-			aggregateAttribute: {
-				key: 'signoz_latency',
-				dataType: DataTypes.Float64,
-				type: ATTRIBUTE_TYPES.HISTOGRAM,
-			} as BaseAutocompleteData,
-		};
-
-		it('offers the percentiles on a time series panel', () => {
-			const result = renderHookWithProps({ query: histogramQuery });
-
-			expect(
-				result.current.spaceAggregationOptions.map((o) => o.value),
-			).toStrictEqual([
-				MetricAggregateOperator.P50,
-				MetricAggregateOperator.P75,
-				MetricAggregateOperator.P90,
-				MetricAggregateOperator.P95,
-				MetricAggregateOperator.P99,
-			]);
-		});
-
-		it('offers count alone on a heatmap panel, whose Y axis is the `le` labels', () => {
-			setupMockQueryBuilder('heatmap');
-
-			const result = renderHookWithProps({ query: histogramQuery });
-
-			expect(
-				result.current.spaceAggregationOptions.map((o) => o.value),
-			).toStrictEqual([MetricAggregateOperator.COUNT]);
-		});
-	});
-
-	describe('picking a histogram metric', () => {
-		const histogramAttribute: BaseAutocompleteData = {
-			key: 'http.client.duration.bucket',
-			dataType: DataTypes.Float64,
-			type: ATTRIBUTE_TYPES.HISTOGRAM,
-		};
-
-		it('defaults the spatial aggregation to p90 on a time series panel', () => {
-			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
-			act(() => {
-				result.current.handleChangeAggregatorAttribute(histogramAttribute);
-			});
-
-			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
-				0,
-				expect.objectContaining({
-					aggregations: [
-						expect.objectContaining({
-							spaceAggregation: MetricAggregateOperator.P90,
-						}),
-					],
-				}),
-			);
-		});
-
-		it('defaults it to count on a heatmap panel, which offers nothing else', () => {
-			setupMockQueryBuilder('heatmap');
-
-			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
-			act(() => {
-				result.current.handleChangeAggregatorAttribute(histogramAttribute);
-			});
-
-			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
-				0,
-				expect.objectContaining({
-					aggregations: [
-						expect.objectContaining({
-							spaceAggregation: MetricAggregateOperator.COUNT,
-						}),
-					],
-				}),
-			);
-		});
-	});
 });

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -14,11 +14,12 @@ import {
 	initialQueryBuilderFormValuesMap,
 	listViewInitialLogQuery,
 	listViewInitialTraceQuery,
+	mapOfFormulaToFilters,
+	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import {
 	metricsGaugeSpaceAggregateOperatorOptions,
-	metricsHeatmapHistogramSpaceAggregateOperatorOptions,
 	metricsHistogramSpaceAggregateOperatorOptions,
 	metricsSumSpaceAggregateOperatorOptions,
 	metricsUnknownSpaceAggregateOperatorOptions,
@@ -58,8 +59,9 @@ import { getFormatedLegend } from 'utils/getFormatedLegend';
 export const useQueryOperations: UseQueryOperations = ({
 	query,
 	index,
+	filterConfigs,
 	formula,
-	isRawQuery = false,
+	isListViewPanel = false,
 	entityVersion,
 	isForTraceOperator = false,
 	savePreviousQuery = false,
@@ -103,7 +105,46 @@ export const useQueryOperations: UseQueryOperations = ({
 		}
 	}, [query]);
 
-	const { dataSource } = query;
+	const { dataSource, aggregateOperator } = query;
+
+	const getNewListOfAdditionalFilters = useCallback(
+		(dataSource: DataSource, isQuery: boolean): string[] => {
+			const additionalFiltersKeys: (keyof Pick<
+				IBuilderQuery,
+				'orderBy' | 'limit' | 'having' | 'stepInterval'
+			>)[] = ['having', 'limit', 'orderBy', 'stepInterval'];
+
+			const mapsOfFilters = isQuery ? mapOfQueryFilters : mapOfFormulaToFilters;
+
+			const result: string[] = mapsOfFilters[dataSource]?.reduce<string[]>(
+				(acc, item) => {
+					if (
+						filterConfigs &&
+						filterConfigs[item.field as (typeof additionalFiltersKeys)[number]]
+							?.isHidden
+					) {
+						return acc;
+					}
+
+					acc.push(item.text);
+
+					return acc;
+				},
+				[],
+			);
+
+			return result;
+		},
+
+		[filterConfigs],
+	);
+
+	const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
+		string[]
+	>(getNewListOfAdditionalFilters(dataSource, true));
+
+	const [listOfAdditionalFormulaFilters, setListOfAdditionalFormulaFilters] =
+		useState<string[]>(getNewListOfAdditionalFilters(dataSource, false));
 
 	const handleChangeOperator = useCallback(
 		(value: string): void => {
@@ -177,11 +218,6 @@ export const useQueryOperations: UseQueryOperations = ({
 							(aggregateAttribute?.type as ATTRIBUTE_TYPES) || ATTRIBUTE_TYPES.GAUGE,
 					});
 
-			const histogramSpaceAggregationOptions =
-				panelType === PANEL_TYPES.HEATMAP
-					? metricsHeatmapHistogramSpaceAggregateOperatorOptions
-					: metricsHistogramSpaceAggregateOperatorOptions;
-
 			switch (aggregateAttribute?.type) {
 				case ATTRIBUTE_TYPES.SUM:
 					setSpaceAggregationOptions(metricsSumSpaceAggregateOperatorOptions);
@@ -191,11 +227,11 @@ export const useQueryOperations: UseQueryOperations = ({
 					break;
 
 				case ATTRIBUTE_TYPES.HISTOGRAM:
-					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
+					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
 					break;
 
 				case ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM:
-					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
+					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
 					break;
 				default:
 					setSpaceAggregationOptions(metricsUnknownSpaceAggregateOperatorOptions);
@@ -304,13 +340,7 @@ export const useQueryOperations: UseQueryOperations = ({
 									timeAggregation: '',
 									metricName: newQuery.aggregateAttribute?.key || '',
 									temporality: '',
-									// A heatmap cell holds a count of observations per `le` band, which is
-									// the one option the kind offers — a percentile default would sit in the
-									// selector with nothing behind it.
-									spaceAggregation:
-										panelType === PANEL_TYPES.HEATMAP
-											? MetricAggregateOperator.COUNT
-											: MetricAggregateOperator.P90,
+									spaceAggregation: MetricAggregateOperator.P90,
 									reduceTo: ReduceOperators.AVG,
 								},
 							];
@@ -400,7 +430,6 @@ export const useQueryOperations: UseQueryOperations = ({
 			index,
 			handleMetricAggregateAtributeTypes,
 			previousMetricInfo,
-			panelType,
 		],
 	);
 
@@ -431,7 +460,7 @@ export const useQueryOperations: UseQueryOperations = ({
 				removeKeyFromPreviousQuery(newKey);
 			}
 
-			if (isRawQuery) {
+			if (isListViewPanel) {
 				let listPanelQuery: Query | null = null;
 
 				if (nextSource === DataSource.LOGS) {
@@ -477,7 +506,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			handleSetQueryData(index, newQueryData);
 		},
 		[
-			isRawQuery,
+			isListViewPanel,
 			panelType,
 			query,
 			handleSetQueryData,
@@ -596,18 +625,32 @@ export const useQueryOperations: UseQueryOperations = ({
 		handleMetricAggregateAtributeTypes,
 	]);
 
+	useEffect(() => {
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, true);
+
+		setListOfAdditionalFilters(additionalFilters);
+	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
+
+	useEffect(() => {
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, false);
+
+		setListOfAdditionalFormulaFilters(additionalFilters);
+	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
+
 	return {
 		isTracePanelType,
 		isMetricsDataSource,
 		isLogsDataSource,
 		operators,
 		spaceAggregationOptions,
+		listOfAdditionalFilters,
 		handleChangeOperator,
 		handleSpaceAggregationChange,
 		handleChangeAggregatorAttribute,
 		handleChangeDataSource,
 		handleDeleteQuery,
 		handleChangeQueryData,
+		listOfAdditionalFormulaFilters,
 		handleChangeFormulaData,
 		handleQueryFunctionsUpdates,
 	};

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -222,31 +222,6 @@ describe('useGetYAxisUnit', () => {
 		expect(result.current.isError).toBe(false);
 	});
 
-	it('resolves the unit on the first render, without a settling pass', () => {
-		// The real `useGetMetrics` rebuilds its array on every render; a hook that
-		// stored the unit would need an extra render to settle, and would schedule one
-		// after every render of the panel editor.
-		mockUseGetMetrics.mockImplementation(() => ({
-			isLoading: false,
-			isError: false,
-			metrics: [MOCK_METRIC_1],
-		}));
-
-		let renderCount = 0;
-		const { result, rerender } = renderHook(() => {
-			renderCount += 1;
-			return useGetYAxisUnit();
-		});
-
-		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
-		expect(renderCount).toBe(1);
-
-		rerender();
-
-		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
-		expect(renderCount).toBe(2);
-	});
-
 	it('should return undefined when metrics have different units', async () => {
 		mockUseGetMetrics.mockReturnValueOnce({
 			isLoading: false,

frontend/src/hooks/useGetYAxisUnit.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
 	getMetricUnits,
 	useGetMetrics,
@@ -46,6 +46,7 @@ function useGetYAxisUnit(
 	},
 ): UseGetYAxisUnitResult {
 	const { stagedQuery } = useQueryBuilder();
+	const [yAxisUnit, setYAxisUnit] = useState<string | undefined>();
 
 	const metricNames: string[] | null = useMemo(() => {
 		// If the query type is not QUERY_BUILDER, return null
@@ -94,16 +95,27 @@ function useGetYAxisUnit(
 		[units],
 	);
 
-	// Derived, not stored: `useGetMetrics` rebuilds its array on every render, so a
-	// state-and-effect version schedules an update after every render — the shape
-	// React reports as "Maximum update depth exceeded".
-	const yAxisUnit = useMemo(() => {
-		// A single shared unit is the only thing a single axis can carry; metrics that
-		// disagree, or that carry no unit at all, leave the axis unitless.
-		if (units.length === 0 || !areAllMetricUnitsSame) {
-			return undefined;
+	useEffect(() => {
+		// If there are no metrics, set the y-axis unit to undefined
+		if (units.length === 0) {
+			setYAxisUnit(undefined);
+			// If there is one metric and it has a non-empty unit, set the y-axis unit to it
+		} else if (units.length === 1 && units[0] !== '') {
+			setYAxisUnit(units[0]);
+			// If all metrics have the same non-empty unit, set the y-axis unit to it
+		} else if (areAllMetricUnitsSame) {
+			if (units[0] !== '') {
+				setYAxisUnit(units[0]);
+			} else {
+				setYAxisUnit(undefined);
+			}
+			// If there is more than one metric and they have different units, set the y-axis unit to undefined
+		} else if (units.length > 1 && !areAllMetricUnitsSame) {
+			setYAxisUnit(undefined);
+			// If there is one metric and it has an empty unit, set the y-axis unit to undefined
+		} else if (units.length === 1 && units[0] === '') {
+			setYAxisUnit(undefined);
 		}
-		return units[0] || undefined;
 	}, [units, areAllMetricUnitsSame]);
 
 	return { yAxisUnit, isLoading, isError };

frontend/src/lib/query/__tests__/handleQueryChange.test.ts

@@ -1,78 +0,0 @@
-import { Querybuildertypesv5BucketOptionsLogDTOKind } from 'api/generated/services/sigNoz.schemas';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import type {
-	IBuilderFormula,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { handleQueryChange } from '../panelQuery';
-
-const bucketOptions = {
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
-	spec: { scale: 0 },
-};
-
-function queryWithFormulaAxis(): Query {
-	const base = initialQueriesMap[DataSource.METRICS];
-	const formula: IBuilderFormula = {
-		queryName: 'F1',
-		expression: 'A',
-		legend: '',
-		disabled: false,
-		bucketOptions,
-	};
-
-	return {
-		...base,
-		builder: {
-			...base.builder,
-			queryData: [{ ...base.builder.queryData[0], bucketOptions }],
-			queryFormulas: [formula],
-		},
-	};
-}
-
-describe('handleQueryChange bucket options', () => {
-	it('keeps both axes when the panel stays a heatmap', () => {
-		const result = handleQueryChange(
-			PANEL_TYPES.HEATMAP,
-			queryWithFormulaAxis(),
-			PANEL_TYPES.HEATMAP,
-		);
-
-		expect(result.builder.queryData[0].bucketOptions).toStrictEqual(
-			bucketOptions,
-		);
-		expect(result.builder.queryFormulas[0].bucketOptions).toStrictEqual(
-			bucketOptions,
-		);
-	});
-
-	// The request rejects an axis on any type but heatmap, so a switch has to shed it
-	// from the query (via the field allowlist) and from the formula (by hand).
-	it('drops both axes when switching to another panel type', () => {
-		const result = handleQueryChange(
-			PANEL_TYPES.TIME_SERIES,
-			queryWithFormulaAxis(),
-			PANEL_TYPES.HEATMAP,
-		);
-
-		expect(result.builder.queryData[0].bucketOptions).toBeUndefined();
-		expect(result.builder.queryFormulas[0].bucketOptions).toBeUndefined();
-	});
-
-	it('leaves the rest of the formula intact', () => {
-		const result = handleQueryChange(
-			PANEL_TYPES.TIME_SERIES,
-			queryWithFormulaAxis(),
-			PANEL_TYPES.HEATMAP,
-		);
-
-		expect(result.builder.queryFormulas[0]).toMatchObject({
-			queryName: 'F1',
-			expression: 'A',
-			disabled: false,
-		});
-	});
-});

frontend/src/lib/query/panelQuery.ts

@@ -8,11 +8,7 @@ import {
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { cloneDeep, isEqual, set, unset } from 'lodash-es';
-import {
-	IBuilderFormula,
-	IBuilderQuery,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 // Asks "would saving the current panel change the persisted widget spec?".
@@ -103,7 +99,6 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
-	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
 
 export const panelTypeDataSourceFormValuesMap: Record<
@@ -311,75 +306,6 @@ export const panelTypeDataSourceFormValuesMap: Record<
 			},
 		},
 	},
-	// `functions` and `having` are dropped rather than carried: the heatmap request
-	// rejects both. Every signal is listed because the map is keyed by the query's
-	// own, which a switch can still be holding.
-	[PANEL_TYPES.HEATMAP]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-					'bucketOptions',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
 	[PANEL_TYPES.TABLE]: {
 		[DataSource.LOGS]: {
 			builder: {
@@ -612,24 +538,6 @@ export const panelTypeDataSourceFormValuesMap: Record<
 	},
 };
 
-/**
- * Formulas are carried across a panel-type switch whole, not rebuilt from
- * `panelTypeDataSourceFormValuesMap` the way `queryData` is, so a bucket axis has to be
- * dropped by hand. The request rejects one on any type but heatmap.
- */
-const withoutNonHeatmapBucketOptions = (
-	formulas: IBuilderFormula[],
-	newPanelType: keyof PartialPanelTypes,
-): IBuilderFormula[] => {
-	if (newPanelType === PANEL_TYPES.HEATMAP) {
-		return formulas;
-	}
-
-	return (formulas ?? []).map(
-		({ bucketOptions: _bucketOptions, ...rest }) => rest,
-	);
-};
-
 export function handleQueryChange(
 	newPanelType: keyof PartialPanelTypes,
 	supersetQuery: Query,
@@ -673,10 +581,6 @@ export function handleQueryChange(
 
 				return tempQuery;
 			}),
-			queryFormulas: withoutNonHeatmapBucketOptions(
-				supersetQuery.builder.queryFormulas,
-				newPanelType,
-			),
 			queryTraceOperator:
 				newPanelType === PANEL_TYPES.LIST
 					? []

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

@@ -1,78 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	padding: 4px 12px 8px;
-	box-sizing: border-box;
-}
-
-.label {
-	flex: 0 0 auto;
-	font-size: 11px;
-	line-height: 16px;
-	color: var(--muted-foreground);
-	font-variant-numeric: tabular-nums;
-}
-
-.track {
-	position: relative;
-	flex: 1 1 auto;
-	height: 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-}
-
-.marker {
-	position: absolute;
-	top: -3px;
-	bottom: -3px;
-	width: 2px;
-	transform: translateX(-1px);
-	// Reads against the panel through the 3px it overhangs the track at either end,
-	// which is what carries it where the ramp happens to match it.
-	background: var(--popover-foreground);
-	border-radius: 1px;
-}
-
-.caption {
-	flex: 0 0 auto;
-	font-size: 10px;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--muted-foreground);
-}
-
-.keys {
-	display: flex;
-	flex: 0 0 auto;
-	gap: 12px;
-	align-items: center;
-}
-
-.key {
-	display: flex;
-	gap: 5px;
-	align-items: center;
-	font-size: 11px;
-	color: var(--muted-foreground);
-}
-
-.swatch,
-.hatchSwatch {
-	width: 11px;
-	height: 11px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-	box-sizing: border-box;
-}
-
-// Approximates the canvas hatch painted over null cells, which `createHatchPattern`
-// strokes in the theme's own direction — light on dark, dark on light.
-.hatchSwatch {
-	background-image: repeating-linear-gradient(
-		45deg,
-		transparent 0 2px,
-		var(--muted-foreground) 2px 3px
-	);
-}

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

@@ -1,81 +0,0 @@
-import { useMemo } from 'react';
-
-import Styles from './ColorBar.module.scss';
-
-export interface ColorBarProps {
-	/** Low to high, drawn as hard-edged segments so the bar shows the same set of
-	 *  colours as the cells. */
-	ramp: string[];
-	minLabel: string;
-	maxLabel: string;
-	/** 0..1. `null` hides the marker. */
-	markerPosition?: number | null;
-	/** What the colour encodes, e.g. "count". */
-	label?: string;
-	/** Keys for the two states a ramp cannot express: a hatched data gap, and a
-	 *  genuine zero at the bottom. Without them the difference is guesswork. */
-	showStateKeys?: boolean;
-	'data-testid'?: string;
-}
-
-/** What a colour means, plus a marker for the value under the cursor. */
-export default function ColorBar({
-	ramp,
-	minLabel,
-	maxLabel,
-	markerPosition = null,
-	label,
-	showStateKeys = true,
-	'data-testid': testId = 'color-bar',
-}: ColorBarProps): JSX.Element | null {
-	const gradient = useMemo(() => {
-		if (ramp.length === 0) {
-			return undefined;
-		}
-		if (ramp.length === 1) {
-			return ramp[0];
-		}
-		const stops = ramp.flatMap((color, index) => {
-			const from = (index / ramp.length) * 100;
-			const to = ((index + 1) / ramp.length) * 100;
-			return [`${color} ${from}%`, `${color} ${to}%`];
-		});
-		return `linear-gradient(to right, ${stops.join(', ')})`;
-	}, [ramp]);
-
-	if (gradient === undefined) {
-		return null;
-	}
-
-	const clampedMarker =
-		markerPosition === null ? null : Math.min(Math.max(markerPosition, 0), 1);
-
-	return (
-		<div className={Styles.container} data-testid={testId}>
-			{label && <span className={Styles.caption}>{label}</span>}
-			<span className={Styles.label}>{minLabel}</span>
-			<div className={Styles.track} style={{ background: gradient }}>
-				{clampedMarker !== null && (
-					<span
-						className={Styles.marker}
-						style={{ left: `${clampedMarker * 100}%` }}
-						data-testid={`${testId}-marker`}
-					/>
-				)}
-			</div>
-			<span className={Styles.label}>{maxLabel}</span>
-			{showStateKeys && (
-				<div className={Styles.keys} data-testid={`${testId}-state-keys`}>
-					<span className={Styles.key}>
-						<span className={Styles.hatchSwatch} />
-						no data
-					</span>
-					<span className={Styles.key}>
-						<span className={Styles.swatch} style={{ background: ramp[0] }} />
-						count 0
-					</span>
-				</div>
-			)}
-		</div>
-	);
-}

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

@@ -1,94 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import ColorBar from '../ColorBar';
-
-const RAMP = ['#111111', '#555555', '#999999', '#dddddd'];
-
-describe('ColorBar', () => {
-	it('renders the domain labels', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="1,204" />);
-
-		expect(screen.getByText('0')).toBeInTheDocument();
-		expect(screen.getByText('1,204')).toBeInTheDocument();
-	});
-
-	it('renders nothing without a ramp', () => {
-		const { container } = render(
-			<ColorBar ramp={[]} minLabel="0" maxLabel="0" />,
-		);
-
-		expect(container).toBeEmptyDOMElement();
-	});
-
-	it('hides the marker when nothing is hovered', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.queryByTestId('color-bar-marker')).not.toBeInTheDocument();
-	});
-
-	it('positions the marker at the hovered value', () => {
-		render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={0.25} />,
-		);
-
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '25%' });
-	});
-
-	it('clamps a marker outside the ramp to its ends', () => {
-		const { rerender } = render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={-2} />,
-		);
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '0%' });
-
-		rerender(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={4} />,
-		);
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '100%' });
-	});
-
-	it('keys the two states a colour ramp cannot express', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.getByText('no data')).toBeInTheDocument();
-		expect(screen.getByText('count 0')).toBeInTheDocument();
-	});
-
-	it('draws the count-0 key with the bottom of the ramp', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.getByText('count 0').firstChild).toHaveStyle({
-			background: RAMP[0],
-		});
-	});
-
-	it('hides the state keys when asked', () => {
-		render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" showStateKeys={false} />,
-		);
-
-		expect(screen.queryByText('no data')).not.toBeInTheDocument();
-	});
-
-	it('captions what the colour encodes', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" label="count" />);
-
-		expect(screen.getByText('count')).toBeInTheDocument();
-	});
-
-	it('renders hard-edged segments so the bar matches the drawn cells', () => {
-		render(
-			<ColorBar
-				ramp={['#111111', '#dddddd']}
-				minLabel="0"
-				maxLabel="10"
-				data-testid="scale"
-			/>,
-		);
-
-		const track = screen.getByTestId('scale').querySelector('div');
-		expect(track).toHaveStyle({
-			background:
-				'linear-gradient(to right, #111111 0%, #111111 50%, #dddddd 50%, #dddddd 100%)',
-		});
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapBucketList.tsx

@@ -1,30 +0,0 @@
-import cx from 'classnames';
-
-import { formatCount, HeatmapBucketRow } from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/** The buckets either side of the hovered one, so a mode reads as a shape rather
- *  than a single number. */
-export default function HeatmapBucketList({
-	rows,
-}: {
-	rows: HeatmapBucketRow[];
-}): JSX.Element {
-	return (
-		<div className={Styles.rows} data-testid="heatmap-tooltip-buckets">
-			{rows.map((bucket) => (
-				<div
-					key={bucket.row}
-					className={cx(Styles.row, { [Styles.rowHovered]: bucket.isHovered })}
-					data-hovered={bucket.isHovered}
-					data-testid="heatmap-tooltip-bucket-row"
-				>
-					<span className={Styles.rowLabel}>{bucket.label}</span>
-					<span className={Styles.rowSeparator} />
-					<span className={Styles.rowValue}>{formatCount(bucket.count)}</span>
-				</div>
-			))}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/HeatmapContributionList.tsx

@@ -1,31 +0,0 @@
-import { formatCount, HeatmapContributionRow } from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/** Only shown when the cell sums more than one group. */
-export default function HeatmapContributionList({
-	rows,
-}: {
-	rows: HeatmapContributionRow[];
-}): JSX.Element {
-	return (
-		<div className={Styles.rows} data-testid="heatmap-tooltip-contribution">
-			{rows.map((row) => (
-				<div
-					key={row.label}
-					className={Styles.row}
-					data-testid="heatmap-tooltip-contribution-row"
-				>
-					<span
-						className={Styles.marker}
-						style={{ borderColor: row.color, backgroundColor: row.color }}
-						data-is-legend-marker={true}
-					/>
-					<span className={Styles.rowLabel}>{row.label}</span>
-					<span className={Styles.rowSeparator} style={{ borderColor: row.color }} />
-					<span className={Styles.rowValue}>{formatCount(row.count)}</span>
-				</div>
-			))}
-		</div>
-	);
-}

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

@@ -1,173 +0,0 @@
-@use '../../../../../../styles/scrollbar' as *;
-
-// Surface matches the shared Tooltip exactly — same tokens, same radius, no
-// shadow (the plugin's portal wrapper is transparent and paints nothing). Text
-// follows the theme through the popover/muted pair; the fixed vanilla ramp reads
-// as white-on-white in light mode.
-//
-// Padding lives on the sections rather than here, also matching the shared
-// tooltip: TooltipFooter draws its own dashed top border, background and bottom
-// corner radius, so it has to reach the container edges.
-.container {
-	// The list pays this less each row's own inset, so its text lands on it too.
-	--gutter: 14px;
-	--row-inset: 6px;
-
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 220px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-// Separates the cell identity from whichever question the second block answers.
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.identity {
-	display: flex;
-	flex-direction: column;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-	padding: var(--spacing-8) var(--gutter) 0;
-	font-size: var(--font-size-sm);
-	font-weight: 500;
-	font-variant-numeric: tabular-nums;
-}
-
-.filter {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	min-width: 0;
-	padding: var(--spacing-3) var(--gutter) 0;
-}
-
-// Names the group the grid is under, as the legend draws a shown series; it is
-// not a colour key.
-.filterMarker {
-	width: 12px;
-	height: 12px;
-	border-radius: var(--radius);
-	border: 1.5px solid currentColor;
-	background: currentColor;
-	box-sizing: border-box;
-	flex-shrink: 0;
-}
-
-.filterLabel {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-2);
-	padding: var(--spacing-4) var(--gutter);
-}
-
-.titleBucket,
-.titleCount {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-weight: 700;
-	letter-spacing: -0.01em;
-	color: var(--popover-foreground);
-}
-
-.titleCount {
-	font-variant-numeric: tabular-nums;
-	white-space: nowrap;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	padding: var(--spacing-4) calc(var(--gutter) - var(--row-inset))
-		var(--spacing-6);
-	max-height: 320px;
-	overflow-y: auto;
-
-	@include custom-scrollbar;
-}
-
-.row {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--row-inset);
-	border-radius: var(--radius);
-	font-weight: 400;
-	font-variant-numeric: tabular-nums;
-}
-
-// The hovered bucket is the one the cursor is on; lift it out of the neighbours.
-.rowHovered {
-	background: var(--l3-background);
-	font-weight: 700;
-}
-
-.rowLabel,
-.rowValue {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-}
-
-.rowLabel {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	text-align: right;
-	white-space: nowrap;
-}
-
-.marker {
-	width: 12px;
-	height: 12px;
-	border-radius: var(--radius);
-	border-style: solid;
-	border-width: 1.5px;
-	box-sizing: border-box;
-	flex-shrink: 0;
-}
-
-.rowSeparator,
-.titleSeparator {
-	flex: 1;
-	border-width: 0.5px;
-	border-style: dashed;
-	border-color: currentColor;
-	min-width: 24px;
-	opacity: 0.5;
-}

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

@@ -1,180 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import {
-	resolveColumnIndex,
-	resolveRowIndex,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import { useTimezone } from 'providers/Timezone';
-
-import { HeatmapTooltipProps } from '../../../types';
-import TooltipPinnedBadge from '../TooltipPinnedBadge/TooltipPinnedBadge';
-import HeatmapBucketList from './HeatmapBucketList';
-import HeatmapContributionList from './HeatmapContributionList';
-import {
-	buildBucketRows,
-	buildContributionRows,
-	formatBucketLabel,
-	formatColumnRange,
-	formatCount,
-	HeatmapTooltipBody,
-	resolveTooltipBody,
-} from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/**
- * The cell identity is the same in every state; the second block answers whichever
- * question the panel state leaves open (see `resolveTooltipBody`). Purpose-built
- * rather than composed from the shared `Tooltip`, which renders a flat list of
- * series values — none of these states is that shape.
- *
- * The cell comes from the live cursor, not a prop: uPlot's `cursor.idx` snaps to
- * the nearest timestamp, so half of every column would report its neighbour.
- */
-export default function HeatmapTooltip({
-	uPlotInstance,
-	yAxis,
-	step,
-	series,
-	visibleGroups,
-	groupColor,
-	yAxisUnit,
-	decimalPrecision,
-	timezone,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: HeatmapTooltipProps): JSX.Element | null {
-	const { timezone: userTimezone } = useTimezone();
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
-
-	// Read outside the memo: uPlot mutates the same instance on every move, so
-	// keying off the instance alone would freeze the cell.
-	const { left = -10, top = -10 } = uPlotInstance.cursor;
-
-	const cell = useMemo(() => {
-		if (left < 0 || top < 0) {
-			return null;
-		}
-		const timestamps = uPlotInstance.data[0] as ArrayLike<number>;
-		const column = resolveColumnIndex(
-			timestamps,
-			uPlotInstance.posToVal(left, 'x'),
-			step,
-		);
-		const row = resolveRowIndex(yAxis.edges, uPlotInstance.posToVal(top, 'y'));
-		if (column === null || row === null) {
-			return null;
-		}
-		return {
-			row,
-			column,
-			timestamp: timestamps[column],
-			count:
-				(uPlotInstance.data[row + 1] as Array<number | null> | undefined)?.[
-					column
-				] ?? null,
-		};
-	}, [left, top, uPlotInstance, yAxis, step]);
-
-	// The cell sums the enabled groups, so those are what a breakdown must cover.
-	const visible = useMemo(
-		() => series.filter((entry) => visibleGroups.includes(entry.label)),
-		[series, visibleGroups],
-	);
-	const body = resolveTooltipBody(visible.length);
-
-	const bucketRows = useMemo(() => {
-		if (!cell || body !== HeatmapTooltipBody.Buckets) {
-			return [];
-		}
-		return buildBucketRows({
-			counts: uPlotInstance.data.slice(1) as Array<
-				ArrayLike<number | null> | undefined
-			>,
-			yAxis,
-			row: cell.row,
-			column: cell.column,
-			yAxisUnit,
-			decimalPrecision,
-		});
-	}, [cell, body, uPlotInstance, yAxis, yAxisUnit, decimalPrecision]);
-
-	const contributionRows = useMemo(() => {
-		if (!cell || body !== HeatmapTooltipBody.Contribution) {
-			return [];
-		}
-		return buildContributionRows({
-			series: visible,
-			timestamp: cell.timestamp,
-			row: cell.row,
-			color: groupColor,
-		});
-	}, [cell, body, visible, groupColor]);
-
-	if (!cell) {
-		return null;
-	}
-
-	// A single enabled group out of several means the legend has isolated it.
-	const isolated =
-		series.length > 1 && visible.length === 1 ? visible[0] : undefined;
-	const filterLabel = isolated?.label ?? '';
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="heatmap-tooltip"
-		>
-			<div className={Styles.identity}>
-				<div className={Styles.header}>
-					<span data-testid="heatmap-tooltip-range">
-						{formatColumnRange({
-							start: cell.timestamp,
-							step,
-							timezone: resolvedTimezone,
-						})}
-					</span>
-					{isPinned && <TooltipPinnedBadge />}
-				</div>
-
-				{filterLabel && (
-					<div
-						className={Styles.filter}
-						style={{ color: groupColor }}
-						data-testid="heatmap-tooltip-filter"
-					>
-						<span className={Styles.filterMarker} />
-						<span className={Styles.filterLabel}>{filterLabel}</span>
-					</div>
-				)}
-
-				<div className={Styles.title}>
-					<span className={Styles.titleBucket} data-testid="heatmap-tooltip-bucket">
-						{formatBucketLabel({
-							yAxis,
-							row: cell.row,
-							yAxisUnit,
-							decimalPrecision,
-						})}
-					</span>
-					<span className={Styles.titleSeparator} />
-					<span className={Styles.titleCount} data-testid="heatmap-tooltip-count">
-						{formatCount(cell.count)}
-					</span>
-				</div>
-			</div>
-
-			<span className={Styles.divider} data-testid="heatmap-tooltip-divider" />
-
-			{body === HeatmapTooltipBody.Contribution ? (
-				<HeatmapContributionList rows={contributionRows} />
-			) : (
-				<HeatmapBucketList rows={bucketRows} />
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/__tests__/HeatmapTooltip.test.tsx

@@ -1,284 +0,0 @@
-import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	HeatmapAxisScale,
-	HeatmapSeries,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import { render, RenderResult, screen } from 'tests/test-utils';
-import type uPlot from 'uplot';
-
-import HeatmapTooltip from '../HeatmapTooltip';
-
-const BOUNDS = [100, 500, 1000, 2500];
-const Y_AXIS = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-const TIMESTAMPS = [1_700_000_000, 1_700_000_300];
-const STEP = 300;
-const PLOT_SIZE = 500;
-const ROW_COUNT = BOUNDS.length + 1;
-
-/** Row 2 is the 500ms–1s bucket the design mock hovers. */
-const HOVERED_ROW = 2;
-
-function seriesFor(
-	group: string,
-	countsAtHoveredRow: [number, number],
-): HeatmapSeries {
-	return {
-		label: `{service.name="${group}"}`,
-		points: TIMESTAMPS.map((timestamp, column) => ({
-			timestamp,
-			counts: Array.from({ length: ROW_COUNT }, (_, row) =>
-				row === HOVERED_ROW ? countsAtHoveredRow[column] : row * 10,
-			),
-		})),
-	};
-}
-
-const GROUPED: HeatmapSeries[] = [
-	seriesFor('checkout', [355, 300]),
-	seriesFor('frontend', [86, 80]),
-	seriesFor('cart', [14, 10]),
-	seriesFor('payments', [0, 0]),
-];
-
-/** Grid counts, matching what the renderer would have been handed. */
-function gridData(rowTotals: number[]): uPlot.AlignedData {
-	return [
-		TIMESTAMPS,
-		...Array.from({ length: ROW_COUNT }, (_, row) => [
-			rowTotals[row] ?? row * 40,
-			rowTotals[row] ?? row * 40,
-		]),
-	] as unknown as uPlot.AlignedData;
-}
-
-// Totals chosen to match the mock: 2 / 92 / 455 / 269 / 10 bottom-up.
-const ROW_TOTALS = [10, 269, 455, 92, 2];
-
-function createFakePlot(): uPlot {
-	const xSpan = TIMESTAMPS[TIMESTAMPS.length - 1] + STEP - TIMESTAMPS[0];
-	const ySpan = Y_AXIS.max - Y_AXIS.min;
-	// Aim the cursor at the middle of the hovered row, first column.
-	const rowMid = (Y_AXIS.edges[HOVERED_ROW] + Y_AXIS.edges[HOVERED_ROW + 1]) / 2;
-	const top = PLOT_SIZE * (1 - (rowMid - Y_AXIS.min) / ySpan);
-
-	return {
-		data: gridData(ROW_TOTALS),
-		cursor: { left: PLOT_SIZE * 0.25, top },
-		posToVal: (pos: number, scaleKey: string): number =>
-			scaleKey === 'x'
-				? TIMESTAMPS[0] + (pos / PLOT_SIZE) * xSpan
-				: Y_AXIS.min + ((PLOT_SIZE - pos) / PLOT_SIZE) * ySpan,
-	} as unknown as uPlot;
-}
-
-function renderTooltip(
-	overrides: Partial<React.ComponentProps<typeof HeatmapTooltip>> = {},
-): RenderResult {
-	return render(
-		<HeatmapTooltip
-			id="panel-1"
-			uPlotInstance={createFakePlot()}
-			dataIndexes={[]}
-			seriesIndex={null}
-			isPinned={false}
-			dismiss={jest.fn()}
-			viaSync={false}
-			yAxis={Y_AXIS}
-			step={STEP}
-			series={GROUPED}
-			visibleGroups={GROUPED.map((entry) => entry.label)}
-			groupColor="#fcfdbf"
-			yAxisUnit="ms"
-			{...overrides}
-		/>,
-	);
-}
-
-describe('HeatmapTooltip — cell identity', () => {
-	it('heads with the time span the column covers, not a single instant', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-range').textContent).toMatch(
-			/^\d{2}\/\d{2} \d{2}:\d{2} → \d{2}:\d{2}$/,
-		);
-	});
-
-	it('names the hovered bucket and its count', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-bucket')).toHaveTextContent(
-			'500 ms – 1 s',
-		);
-		expect(screen.getByTestId('heatmap-tooltip-count')).toHaveTextContent('455');
-	});
-
-	it('marks the surface as pinned so the border picks up the ring', () => {
-		renderTooltip({ isPinned: true });
-
-		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
-			'data-pinned',
-			'true',
-		);
-	});
-
-	it('names a pinned tooltip in its header, as the shared tooltip does', () => {
-		renderTooltip({ isPinned: true });
-
-		expect(screen.getByTestId('uplot-tooltip-status')).toBeInTheDocument();
-	});
-
-	it('leaves the header unbadged while unpinned', () => {
-		renderTooltip();
-
-		expect(screen.queryByTestId('uplot-tooltip-status')).not.toBeInTheDocument();
-	});
-
-	it('is unpinned by default', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
-			'data-pinned',
-			'false',
-		);
-	});
-
-	it('separates the cell identity from the block below it', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-divider')).toBeInTheDocument();
-	});
-
-	it('renders a footer when the panel supplies one', () => {
-		renderTooltip({
-			renderTooltipFooter: ({ isPinned }): JSX.Element => (
-				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
-			),
-		});
-
-		expect(screen.getByTestId('footer')).toHaveTextContent('press P');
-	});
-
-	it('tells the footer when the tooltip is pinned', () => {
-		renderTooltip({
-			isPinned: true,
-			renderTooltipFooter: ({ isPinned }): JSX.Element => (
-				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
-			),
-		});
-
-		expect(screen.getByTestId('footer')).toHaveTextContent('pinned');
-	});
-
-	it('renders nothing when the cursor is off the plot', () => {
-		const plot = createFakePlot();
-		(plot as { cursor: unknown }).cursor = { left: -10, top: -10 };
-
-		const { container } = renderTooltip({ uPlotInstance: plot });
-
-		expect(container).toBeEmptyDOMElement();
-	});
-});
-
-describe('HeatmapTooltip — grouped, nothing selected', () => {
-	it('breaks the cell down by group instead of showing neighbours', () => {
-		renderTooltip();
-
-		expect(
-			screen.getByTestId('heatmap-tooltip-contribution'),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('heatmap-tooltip-buckets'),
-		).not.toBeInTheDocument();
-	});
-
-	it('names each row as the legend does and orders by contribution', () => {
-		renderTooltip();
-
-		const rows = screen
-			.getAllByTestId('heatmap-tooltip-contribution-row')
-			.map((row) => row.textContent);
-
-		expect(rows[0]).toContain('checkout');
-		expect(rows[0]).toContain('355');
-		expect(rows[1]).toContain('frontend');
-		expect(rows[2]).toContain('cart');
-	});
-
-	it('still lists a group that contributed nothing', () => {
-		renderTooltip();
-
-		const rows = screen.getAllByTestId('heatmap-tooltip-contribution-row');
-		expect(rows).toHaveLength(GROUPED.length);
-		expect(rows[3]).toHaveTextContent('payments');
-		expect(rows[3]).toHaveTextContent('0');
-	});
-
-	it('does not name a filter when every group is enabled', () => {
-		renderTooltip();
-
-		expect(
-			screen.queryByTestId('heatmap-tooltip-filter'),
-		).not.toBeInTheDocument();
-	});
-});
-
-describe('HeatmapTooltip — grouped, one enabled', () => {
-	const selected = { visibleGroups: ['{service.name="checkout"}'] };
-
-	it('returns to neighbouring buckets, since contribution is already answered', () => {
-		renderTooltip(selected);
-
-		expect(screen.getByTestId('heatmap-tooltip-buckets')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('heatmap-tooltip-contribution'),
-		).not.toBeInTheDocument();
-	});
-
-	it('names the active filter', () => {
-		renderTooltip(selected);
-
-		expect(screen.getByTestId('heatmap-tooltip-filter')).toHaveTextContent(
-			'{service.name="checkout"}',
-		);
-	});
-});
-
-describe('HeatmapTooltip — no grouping', () => {
-	const ungrouped = {
-		series: [{ label: '', points: GROUPED[0].points }],
-		visibleGroups: [''],
-	};
-
-	it('shows neighbouring buckets, highest first', () => {
-		renderTooltip(ungrouped);
-
-		const rows = screen
-			.getAllByTestId('heatmap-tooltip-bucket-row')
-			.map((row) => row.textContent);
-
-		// Two buckets either side of 500ms – 1s, reading down the y axis.
-		expect(rows).toHaveLength(5);
-		expect(rows[0]).toContain('> 2.5 s');
-		expect(rows[2]).toContain('500 ms – 1 s');
-		expect(rows[4]).toContain('≤ 100 ms');
-	});
-
-	it('marks the hovered bucket among its neighbours', () => {
-		renderTooltip(ungrouped);
-
-		const hovered = screen
-			.getAllByTestId('heatmap-tooltip-bucket-row')
-			.filter((row) => row.dataset.hovered === 'true');
-
-		expect(hovered).toHaveLength(1);
-		expect(hovered[0]).toHaveTextContent('500 ms – 1 s');
-	});
-
-	it('never breaks down a single series', () => {
-		renderTooltip(ungrouped);
-
-		expect(
-			screen.queryByTestId('heatmap-tooltip-contribution'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/__tests__/heatmapTooltipContent.test.ts

@@ -1,65 +0,0 @@
-import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import { HeatmapAxisScale } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-
-import { buildBucketRows, formatColumnRange } from '../heatmapTooltipContent';
-
-const TIMEZONE = 'UTC';
-/** 2026-09-02T05:30:00Z. */
-const START = 1_788_327_000;
-
-/** Two decimals round every one of these to `0.06 ms` or `0.07 ms`. */
-const CLOSE_BOUNDS = [
-	0.05731275270029195, 0.059850205043660856, 0.0625, 0.06526711140171336,
-	0.0681567332915786,
-];
-const CLOSE_Y_AXIS = resolveHeatmapYAxis(CLOSE_BOUNDS, HeatmapAxisScale.Log);
-const COUNTS = CLOSE_Y_AXIS.rows.map((_, row) => [row]);
-
-describe('formatColumnRange', () => {
-	it('dates the column once while it stays inside a day', () => {
-		expect(
-			formatColumnRange({ start: START, step: 9 * 3600, timezone: TIMEZONE }),
-		).toBe('09/02 05:30 → 14:30');
-	});
-
-	it('carries the date across a column that spans days', () => {
-		expect(
-			formatColumnRange({ start: START, step: 2 * 86_400, timezone: TIMEZONE }),
-		).toBe('09/02 05:30 → 09/04 05:30');
-	});
-
-	it('adds seconds for a sub-minute column, which times alone cannot separate', () => {
-		expect(
-			formatColumnRange({ start: START, step: 30, timezone: TIMEZONE }),
-		).toBe('09/02 05:30:00 → 05:30:30');
-	});
-
-	it('reads the day in the panel timezone, not UTC', () => {
-		// 05:30Z is the previous evening in Los Angeles, so the same column reads as
-		// crossing a date boundary there and not in UTC.
-		expect(
-			formatColumnRange({
-				start: START,
-				step: 9 * 3600,
-				timezone: 'America/Los_Angeles',
-			}),
-		).toBe('09/01 22:30 → 09/02 07:30');
-	});
-});
-
-describe('buildBucketRows', () => {
-	it('identifies a row by its place on the axis, which its label cannot', () => {
-		const rows = buildBucketRows({
-			counts: COUNTS,
-			yAxis: CLOSE_Y_AXIS,
-			row: 3,
-			column: 0,
-			yAxisUnit: 'ms',
-			decimalPrecision: 2,
-		});
-
-		expect(new Set(rows.map((row) => row.label)).size).toBeLessThan(rows.length);
-		expect(rows.map((row) => row.row)).toStrictEqual([5, 4, 3, 2, 1]);
-		expect(rows.map((row) => row.count)).toStrictEqual([5, 4, 3, 2, 1]);
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/components/HeatmapTooltip/heatmapTooltipContent.ts

@@ -1,172 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { formatRowLabel } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	HeatmapSeries,
-	HeatmapYAxis,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-
-/** Rows shown either side of the hovered one. */
-const NEIGHBOUR_SPAN = 2;
-/** Below this, the header needs seconds to distinguish columns. */
-const SUB_MINUTE_STEP = 60;
-
-export const NO_DATA_LABEL = 'no data';
-
-/**
- * Which question the second block answers. A cell summed across several groups begs
- * "which group?"; a cell that is already one series begs "how does this bucket
- * compare with its neighbours?".
- */
-export enum HeatmapTooltipBody {
-	Buckets = 'buckets',
-	Contribution = 'contribution',
-}
-
-export interface HeatmapBucketRow {
-	/** The bucket's row on the y axis. Labels are not unique — two boundaries can
-	 *  round to the same text — so this is what identifies a row. */
-	row: number;
-	label: string;
-	count: number | null;
-	isHovered: boolean;
-}
-
-export interface HeatmapContributionRow {
-	label: string;
-	color: string;
-	count: number;
-}
-
-export function resolveTooltipBody(visibleCount: number): HeatmapTooltipBody {
-	// One enabled group contributes the whole cell, so there is nothing to break
-	// down — whether the query is ungrouped or the legend has isolated a group.
-	return visibleCount > 1
-		? HeatmapTooltipBody.Contribution
-		: HeatmapTooltipBody.Buckets;
-}
-
-/** A cell is an interval, so a single instant would misreport what it contains.
- *  The start carries the date — the x axis prints one only where the day turns
- *  over — and the end repeats it only across midnight. */
-export function formatColumnRange({
-	start,
-	step,
-	timezone,
-}: {
-	/** Column start, in seconds. */
-	start: number;
-	/** Column width, in seconds. */
-	step: number;
-	timezone: string;
-}): string {
-	const time =
-		step < SUB_MINUTE_STEP
-			? DATE_TIME_FORMATS.TIME_SECONDS
-			: DATE_TIME_FORMATS.TIME;
-	const dated = `${DATE_TIME_FORMATS.DATE_SHORT} ${time}`;
-	const from = dayjs(start * 1000).tz(timezone);
-	const to = dayjs((start + step) * 1000).tz(timezone);
-	const toFormat = to.isSame(from, 'day') ? time : dated;
-	return `${from.format(dated)} → ${to.format(toFormat)}`;
-}
-
-/** Formatted with the panel's unit. */
-export function formatBucketLabel({
-	yAxis,
-	row,
-	yAxisUnit,
-	decimalPrecision,
-}: {
-	yAxis: HeatmapYAxis;
-	row: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}): string {
-	const bucket = yAxis.rows[row];
-	if (!bucket) {
-		return '';
-	}
-	return formatRowLabel(bucket, (value) =>
-		getToolTipValue(String(value), yAxisUnit, decimalPrecision),
-	);
-}
-
-export function formatCount(count: number | null): string {
-	return count === null ? NO_DATA_LABEL : count.toLocaleString();
-}
-
-/** Highest first, so the list reads in the same direction as the y axis. */
-export function buildBucketRows({
-	counts,
-	yAxis,
-	row,
-	column,
-	yAxisUnit,
-	decimalPrecision,
-}: {
-	/** Row-major, as the renderer draws them. */
-	counts: Array<ArrayLike<number | null> | undefined>;
-	yAxis: HeatmapYAxis;
-	row: number;
-	column: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}): HeatmapBucketRow[] {
-	const formatBucketValue = (value: number): string =>
-		getToolTipValue(String(value), yAxisUnit, decimalPrecision);
-
-	const rows: HeatmapBucketRow[] = [];
-	for (let offset = NEIGHBOUR_SPAN; offset >= -NEIGHBOUR_SPAN; offset -= 1) {
-		const index = row + offset;
-		const bucket = yAxis.rows[index];
-		if (!bucket) {
-			continue;
-		}
-		rows.push({
-			row: index,
-			label: formatRowLabel(bucket, formatBucketValue),
-			count: counts[index]?.[column] ?? null,
-			isHovered: offset === 0,
-		});
-	}
-	return rows;
-}
-
-/**
- * Largest first. Groups that contributed nothing are still listed — that is an
- * answer, and dropping the row makes the list look truncated.
- */
-export function buildContributionRows({
-	series,
-	timestamp,
-	row,
-	color,
-}: {
-	/** Only the groups the legend has enabled — they are what the cell sums. */
-	series: HeatmapSeries[];
-	/** Column start, in seconds. */
-	timestamp: number;
-	row: number;
-	/** The grid's one colour; there is no per-series hue. */
-	color: string;
-}): HeatmapContributionRow[] {
-	return series
-		.map((entry) => {
-			const point = entry.points.find((item) => item.timestamp === timestamp);
-			return {
-				label: entry.label,
-				color,
-				// Absent or null contributed nothing to the sum this breaks down.
-				count: point?.counts[row] ?? 0,
-			};
-		})
-		.sort((a, b) => b.count - a.count);
-}

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

@@ -16,3 +16,15 @@
 .pinnedItem {
 	padding: var(--spacing-4);
 }
+
+.status {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	font-size: 10px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--callout-primary-title);
+	flex-shrink: 0;
+}

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

@@ -3,12 +3,12 @@ import cx from 'classnames';
 import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
+import { Pin } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import type uPlot from 'uplot';
 
 import { TooltipContentItem } from '../../../types';
 import TooltipItem from '../TooltipItem/TooltipItem';
-import TooltipPinnedBadge from '../TooltipPinnedBadge/TooltipPinnedBadge';
 
 import Styles from './TooltipHeader.module.scss';
 
@@ -65,7 +65,14 @@ export default function TooltipHeader({
 			{showTooltipHeader && headerTitle && (
 				<div className={cx(Styles.headerRow, headerRowClassName)}>
 					<span>{headerTitle}</span>
-					{isPinned && <TooltipPinnedBadge />}
+					{isPinned && (
+						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">
+							<>
+								<Pin size={12} />
+								<span>Pinned</span>
+							</>
+						</div>
+					)}
 				</div>
 			)}
 

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

@@ -25,6 +25,7 @@
 
 .uplotTooltipItemContent {
 	width: 100%;
+	min-width: 0;
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-2);
@@ -40,16 +41,24 @@
 }
 
 .uplotTooltipItemLabel {
+	min-width: 0;
+	// Not `anywhere`, which drops min-content to one character and lets a wide
+	// value squeeze the label into a mid-word break.
 	white-space: normal;
-	overflow-wrap: anywhere;
+	overflow-wrap: break-word;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 
 .uplotTooltipItemValue {
 	white-space: nowrap;
+	flex: 0 0 auto;
 }
 
 .uplotTooltipItemContentSeparator {
-	flex: 1;
+	flex: 1 1 24px;
 	border-width: 0.5px;
 	border-style: dashed;
 	min-width: 24px;

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

@@ -34,7 +34,9 @@ export default function TooltipItem({
 				style={{ color: item.color }}
 				data-testid={contentTestId}
 			>
-				<span className={Styles.uplotTooltipItemLabel}>{item.label}</span>
+				<span className={Styles.uplotTooltipItemLabel} title={item.label}>
+					{item.label}
+				</span>
 				<span
 					className={Styles.uplotTooltipItemContentSeparator}
 					style={{ borderColor: item.color }}

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

@@ -1,11 +0,0 @@
-.status {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	font-size: 10px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--callout-primary-title);
-	flex-shrink: 0;
-}

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

@@ -1,12 +0,0 @@
-import { Pin } from '@signozhq/icons';
-
-import Styles from './TooltipPinnedBadge.module.scss';
-
-export default function TooltipPinnedBadge(): JSX.Element {
-	return (
-		<div className={Styles.status} data-testid="uplot-tooltip-status">
-			<Pin size={12} />
-			<span>Pinned</span>
-		</div>
-	);
-}

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

@@ -5,7 +5,6 @@ import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
-import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -104,21 +103,6 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 export interface HistogramTooltipProps
 	extends BaseTooltipProps, TooltipRenderArgs {}
 
-/** Not part of `TooltipProps`: it renders its own container, since none of its
- *  states is the flat series list the shared `Tooltip` draws. */
-export interface HeatmapTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	yAxis: HeatmapYAxis;
-	/** Column width in seconds. */
-	step: number;
-	/** Needed to break a summed cell down by contribution. */
-	series: HeatmapSeries[];
-	/** Groups the legend has enabled; the cell sums exactly these. */
-	visibleGroups: string[];
-	/** Same colour the legend and the densest cells use. */
-	groupColor: string;
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

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

@@ -148,7 +148,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			show = true,
 			side = 2, // bottom by default
 			space,
-			splits,
 			gap = 5, // default gap is 5
 		} = this.props;
 
@@ -180,9 +179,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (values) {
 			axisConfig.values = values;
 		}
-		if (splits) {
-			axisConfig.splits = splits;
-		}
 		if (gap !== undefined) {
 			axisConfig.gap = gap;
 		}

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

@@ -46,13 +46,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 
 		// Special handling for time scales (X axis)
 		if (time) {
-			// An explicit range wins: the alignment below trims the tail of the window
-			// to whole minutes, which is right for point-based series but drops the
-			// final column of any chart whose marks span an interval.
-			if (range) {
-				return { [scaleKey]: { time: true, auto: false, range } };
-			}
-
 			let minTime = this.min ?? 0;
 			let maxTime = this.max ?? 0;
 

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

@@ -78,8 +78,6 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit axis splits, overriding the default tick calculation. */
-	splits?: uPlot.Axis.Splits;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/colorScale.test.ts

@@ -1,268 +0,0 @@
-import {
-	clampColorSteps,
-	createHeatmapColorResolver,
-	DEFAULT_COLOR_STEPS,
-	DEFAULT_HEATMAP_COLORS,
-	getMaxCount,
-	getSmallestPositiveCount,
-	MAX_COLOR_STEPS,
-	MIN_OPACITY_ALPHA,
-	normalizeCount,
-	resolveCountDomain,
-} from '../colorScale';
-import { HeatmapColorMode, HeatmapColorScale } from '../types';
-
-const SERIES_COLOR = '#4e74f8';
-
-describe('getMaxCount', () => {
-	it('ignores null cells', () => {
-		expect(
-			getMaxCount([
-				[1, null, 9],
-				[null, 4],
-			]),
-		).toBe(9);
-	});
-
-	it('returns 0 for an empty or all-null grid', () => {
-		expect(getMaxCount([])).toBe(0);
-		expect(getMaxCount([[null, null]])).toBe(0);
-	});
-
-	it('ignores non-finite counts', () => {
-		expect(getMaxCount([[3, Number.POSITIVE_INFINITY, Number.NaN]])).toBe(3);
-	});
-});
-
-describe('getSmallestPositiveCount', () => {
-	it('ignores nulls, zeros and non-finite counts', () => {
-		expect(
-			getSmallestPositiveCount([
-				[0, null, 4],
-				[Number.NaN, 2, -3],
-			]),
-		).toBe(2);
-	});
-
-	it('returns null when nothing is above zero', () => {
-		expect(getSmallestPositiveCount([[0, null]])).toBeNull();
-	});
-});
-
-describe('resolveCountDomain', () => {
-	it('floors at 0 on auto so a zero count sits at the bottom of the scale', () => {
-		expect(
-			resolveCountDomain({ minCount: null, maxCount: null }, [[5, 20]]),
-		).toStrictEqual({
-			min: 0,
-			max: 20,
-			logFloor: 5,
-		});
-	});
-
-	it('honours explicit clamps', () => {
-		expect(
-			resolveCountDomain({ minCount: 10, maxCount: 100 }, [[5, 20]]),
-		).toStrictEqual({
-			min: 10,
-			max: 100,
-			logFloor: 5,
-		});
-	});
-
-	it('collapses a max at or below min', () => {
-		expect(
-			resolveCountDomain({ minCount: 50, maxCount: 10 }, [[5]]),
-		).toStrictEqual({
-			min: 50,
-			max: 50,
-			logFloor: 5,
-		});
-	});
-
-	it('takes the log floor from the smallest positive count, below 1 included', () => {
-		expect(
-			resolveCountDomain({ minCount: null, maxCount: null }, [[0, 0.02, 0.8]])
-				.logFloor,
-		).toBeCloseTo(0.02, 6);
-	});
-
-	it('keeps the log floor within MAX_LOG_DECADES of the max', () => {
-		expect(
-			resolveCountDomain({ minCount: null, maxCount: null }, [[1, 1e9]]).logFloor,
-		).toBe(1e3);
-	});
-
-	it('falls back to a floor of 1 for a grid without a positive count', () => {
-		expect(
-			resolveCountDomain({ minCount: null, maxCount: null }, [[null, 0]]).logFloor,
-		).toBe(1);
-	});
-});
-
-describe('normalizeCount', () => {
-	const domain = { min: 0, max: 1000, logFloor: 1 };
-
-	it('spreads low counts on a log scale where a linear one washes them out', () => {
-		const log = (count: number): number =>
-			normalizeCount({ count, domain, scale: HeatmapColorScale.Log });
-
-		expect(log(10)).toBeCloseTo(1 / 3, 5);
-		expect(log(20)).toBeCloseTo(Math.log10(20) / 3, 5);
-		expect(
-			normalizeCount({ count: 10, domain, scale: HeatmapColorScale.Linear }),
-		).toBeCloseTo(0.01, 5);
-	});
-
-	it('puts 0 and 1 at the bottom of a log scale', () => {
-		expect(
-			normalizeCount({ count: 0, domain, scale: HeatmapColorScale.Log }),
-		).toBe(0);
-		expect(
-			normalizeCount({ count: 1, domain, scale: HeatmapColorScale.Log }),
-		).toBe(0);
-	});
-
-	it('reaches the top of the scale at max on every scale', () => {
-		[
-			HeatmapColorScale.Log,
-			HeatmapColorScale.Sqrt,
-			HeatmapColorScale.Linear,
-		].forEach((scale) => {
-			expect(normalizeCount({ count: 1000, domain, scale })).toBeCloseTo(1, 6);
-		});
-	});
-
-	it('takes the square root of the linear position on a sqrt scale', () => {
-		expect(
-			normalizeCount({
-				count: 250,
-				domain: { min: 0, max: 1000, logFloor: 1 },
-				scale: HeatmapColorScale.Sqrt,
-			}),
-		).toBeCloseTo(0.5, 6);
-	});
-
-	it('clamps counts outside the domain', () => {
-		const scale = HeatmapColorScale.Linear;
-		expect(normalizeCount({ count: -5, domain, scale })).toBe(0);
-		expect(normalizeCount({ count: 5000, domain, scale })).toBe(1);
-	});
-
-	it('returns the bottom of the scale when min equals max', () => {
-		expect(
-			normalizeCount({
-				count: 7,
-				domain: { min: 7, max: 7, logFloor: 1 },
-				scale: HeatmapColorScale.Log,
-			}),
-		).toBe(0);
-	});
-
-	it('spreads a log domain that sits entirely below a count of 1', () => {
-		const fractional = { min: 0, max: 1, logFloor: 0.001 };
-		const log = (count: number): number =>
-			normalizeCount({
-				count,
-				domain: fractional,
-				scale: HeatmapColorScale.Log,
-			});
-
-		expect(log(0.001)).toBe(0);
-		expect(log(0.1)).toBeCloseTo(2 / 3, 5);
-		expect(log(1)).toBeCloseTo(1, 6);
-	});
-
-	it('reads a log scale linearly when the floor reaches the top of the domain', () => {
-		const domainAtFloor = { min: 0, max: 1, logFloor: 1 };
-
-		expect(
-			normalizeCount({
-				count: 1,
-				domain: domainAtFloor,
-				scale: HeatmapColorScale.Log,
-			}),
-		).toBe(1);
-		expect(
-			normalizeCount({
-				count: 0.5,
-				domain: domainAtFloor,
-				scale: HeatmapColorScale.Log,
-			}),
-		).toBe(0.5);
-	});
-});
-
-describe('clampColorSteps', () => {
-	it('clamps to the supported range', () => {
-		expect(clampColorSteps(1)).toBe(2);
-		expect(clampColorSteps(500)).toBe(MAX_COLOR_STEPS);
-		expect(clampColorSteps(32)).toBe(32);
-	});
-
-	it('falls back to the default for a non-finite value', () => {
-		expect(clampColorSteps(Number.NaN)).toBe(DEFAULT_COLOR_STEPS);
-	});
-});
-
-describe('createHeatmapColorResolver', () => {
-	const build = (
-		overrides: Partial<typeof DEFAULT_HEATMAP_COLORS> = {},
-		isDarkMode = true,
-	): ReturnType<typeof createHeatmapColorResolver> =>
-		createHeatmapColorResolver({
-			options: { ...DEFAULT_HEATMAP_COLORS, ...overrides },
-			domain: { min: 0, max: 1000, logFloor: 1 },
-			isDarkMode,
-			seriesColor: SERIES_COLOR,
-		});
-
-	it('leaves null cells uncoloured so they can be hatched', () => {
-		const resolver = build();
-
-		expect(resolver.colorFor(null)).toBeNull();
-		expect(resolver.positionOf(null)).toBeNull();
-	});
-
-	it('gives a zero count the bottom colour, not the null treatment', () => {
-		const resolver = build();
-
-		expect(resolver.colorFor(0)).toBe(resolver.ramp[0]);
-	});
-
-	it('emits one ramp entry per step', () => {
-		expect(build({ steps: 8 }).ramp).toHaveLength(8);
-	});
-
-	it('maps the max count to the top of the ramp', () => {
-		const resolver = build({ steps: 8 });
-
-		expect(resolver.colorFor(1000)).toBe(resolver.ramp[7]);
-	});
-
-	it('picks different stops per theme so low counts stay near the surface', () => {
-		expect(build({}, true).ramp[0]).not.toBe(build({}, false).ramp[0]);
-	});
-
-	it('varies alpha in opacity mode, never below the visibility floor', () => {
-		const resolver = build({ mode: HeatmapColorMode.Opacity, steps: 4 });
-
-		expect(resolver.ramp[0]).toBe(`rgba(78, 116, 248, ${MIN_OPACITY_ALPHA})`);
-		// `color` drops the alpha channel from the string once it reaches 1.
-		expect(resolver.ramp[3]).toBe('rgb(78, 116, 248)');
-	});
-
-	it('prefers an explicit opacity fill over the series colour', () => {
-		const resolver = build({
-			mode: HeatmapColorMode.Opacity,
-			fill: '#e5484d',
-			steps: 2,
-		});
-
-		expect(resolver.ramp[1]).toBe('rgb(229, 72, 77)');
-	});
-
-	it('reports the domain it applied', () => {
-		expect(build().domain).toStrictEqual({ min: 0, max: 1000, logFloor: 1 });
-	});
-});