test: added tests for histogram and pie panel

frontend/src/components/ValueGraph/index.tsx

@@ -93,6 +93,7 @@ function ValueGraph({
 		<div
 			ref={containerRef}
 			className="value-graph-container"
+			data-testid="value-graph-container"
 			style={{
 				backgroundColor:
 					threshold.thresholdFormat === 'Background'

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -98,7 +98,11 @@ function YAxisUnitSelector({
 				{categoriesToRender.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
-							<Select.Option key={unit.id} value={unit.id}>
+							<Select.Option
+								key={unit.id}
+								value={unit.id}
+								data-testid={`unit-option-${unit.id}`}
+							>
 								{unit.name}
 							</Select.Option>
 						))}

frontend/src/container/GridTableComponent/index.tsx

@@ -159,6 +159,8 @@ function GridTableComponent({
 				if (threshold && idx !== -1) {
 					return (
 						<div
+							data-testid="threshold-styled-cell"
+							data-threshold-format={threshold.thresholdFormat}
 							style={
 								threshold.thresholdFormat === 'Background'
 									? { backgroundColor: threshold.thresholdColor }

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -231,12 +231,14 @@ function Threshold({
 							type="text"
 							icon={<Pencil size={14} />}
 							className="edit-btn"
+							data-testid="threshold-edit-btn"
 							onClick={editHandler}
 						/>
 						<Button
 							type="text"
 							icon={<Trash2 size={14} />}
 							className="delete-btn"
+							data-testid="threshold-delete-btn"
 							onClick={deleteHandler}
 						/>
 					</div>

pkg/querier/builder_query.go

@@ -265,15 +265,6 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 		return nil, err
 	}
 
-	// TODO: This should move to readAsRaw function in consume.go but for now we are keeping it here since it's only relevant for traces
-	if q.spec.Signal == telemetrytypes.SignalTraces {
-		if raw, ok := payload.(*qbtypes.RawData); ok {
-			for _, rr := range raw.Rows {
-				mergeSpanAttributeColumns(rr.Data)
-			}
-		}
-	}
-
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/querier/consume.go

@@ -13,7 +13,6 @@ import (
 
 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -432,53 +431,6 @@ func readAsRaw(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
 	}, nil
 }
 
-// mergeSpanAttributeColumns merges (attributes_string, attributes_number, attributes_bool, resources_string) into
-// unified "attributes" and "resource" keys, and parses the stringified `events`
-// and `links` columns into structured slices. Raw DB columns are removed.
-func mergeSpanAttributeColumns(data map[string]any) {
-	attrStr, hasStr := data["attributes_string"]
-	attrNum, hasNum := data["attributes_number"]
-	attrBool, hasBool := data["attributes_bool"]
-	// todo(nitya): move to resource json
-	resStr, hasRes := data["resources_string"]
-	if hasStr || hasNum || hasBool || hasRes {
-		attributes := make(map[string]any)
-		if m, ok := attrStr.(map[string]string); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		if m, ok := attrNum.(map[string]float64); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		if m, ok := attrBool.(map[string]bool); ok {
-			for k, v := range m {
-				attributes[k] = v
-			}
-		}
-		delete(data, "attributes_string")
-		delete(data, "attributes_number")
-		delete(data, "attributes_bool")
-		data["attributes"] = attributes
-
-		resource := map[string]string{}
-		if m, ok := resStr.(map[string]string); ok {
-			resource = m
-		}
-		data["resource"] = resource
-		delete(data, "resources_string")
-	}
-
-	if raw, ok := data["events"]; ok {
-		data["events"] = spantypes.ParseEvents(raw)
-	}
-	if raw, ok := data["links"]; ok {
-		data["links"] = spantypes.ParseLinks(raw)
-	}
-}
-
 // numericAsFloat converts numeric types to float64 efficiently.
 func numericAsFloat(v any) float64 {
 	switch x := v.(type) {

pkg/querier/consume_test.go

@@ -1,91 +0,0 @@
-package querier
-
-import (
-	"reflect"
-	"testing"
-
-	"github.com/SigNoz/signoz/pkg/types/spantypes"
-)
-
-func TestMergeSpanAttributeColumns_ParsesEventsAndLinks(t *testing.T) {
-	data := map[string]any{
-		"attributes_string": map[string]string{"http.method": "GET"},
-		"attributes_number": map[string]float64{"http.status_code": 200},
-		"attributes_bool":   map[string]bool{"is_root": true},
-		"resources_string":  map[string]string{"service.name": "api"},
-		"events": []string{
-			`{"name":"request_received","timeUnixNano":1778489782759245000,"attributeMap":{"http.method":"GET","http.route":"/api/chat"}}`,
-			`{"name":"cache_lookup","timeUnixNano":1778489782811697000,"attributeMap":{"cache.hit":"true","cache.key":"user:123:prompt"}}`,
-		},
-		"links": `[{"traceId":"abc","spanId":"123","refType":"CHILD_OF"},{"traceId":"def","spanId":"456","refType":"FOLLOWS_FROM"}]`,
-	}
-
-	mergeSpanAttributeColumns(data)
-
-	attrs, ok := data["attributes"].(map[string]any)
-	if !ok {
-		t.Fatalf("expected attributes to be map[string]any, got %T", data["attributes"])
-	}
-	if attrs["http.method"] != "GET" || attrs["http.status_code"] != float64(200) || attrs["is_root"] != true {
-		t.Fatalf("attributes not merged correctly: %#v", attrs)
-	}
-
-	res, ok := data["resource"].(map[string]string)
-	if !ok || res["service.name"] != "api" {
-		t.Fatalf("resource not set correctly: %#v", data["resource"])
-	}
-
-	for _, removed := range []string{"attributes_string", "attributes_number", "attributes_bool", "resources_string"} {
-		if _, present := data[removed]; present {
-			t.Fatalf("expected %s to be removed", removed)
-		}
-	}
-
-	events, ok := data["events"].([]spantypes.Event)
-	if !ok {
-		t.Fatalf("expected events to be []spantypes.Event, got %T", data["events"])
-	}
-	wantEvents := []spantypes.Event{
-		{
-			Name:         "request_received",
-			TimeUnixNano: 1778489782759245000,
-			Attributes:   map[string]any{"http.method": "GET", "http.route": "/api/chat"},
-		},
-		{
-			Name:         "cache_lookup",
-			TimeUnixNano: 1778489782811697000,
-			Attributes:   map[string]any{"cache.hit": "true", "cache.key": "user:123:prompt"},
-		},
-	}
-	if !reflect.DeepEqual(events, wantEvents) {
-		t.Fatalf("events parsed incorrectly:\n got:  %#v\nwant: %#v", events, wantEvents)
-	}
-
-	links, ok := data["links"].([]spantypes.Link)
-	if !ok {
-		t.Fatalf("expected links to be []spantypes.Link, got %T", data["links"])
-	}
-	wantLinks := []spantypes.Link{
-		{TraceID: "abc", SpanID: "123"},
-		{TraceID: "def", SpanID: "456"},
-	}
-	if !reflect.DeepEqual(links, wantLinks) {
-		t.Fatalf("links parsed incorrectly:\n got:  %#v\nwant: %#v", links, wantLinks)
-	}
-}
-
-func TestMergeSpanAttributeColumns_EmptyEventsAndLinks(t *testing.T) {
-	data := map[string]any{
-		"events": []string{},
-		"links":  "[]",
-	}
-
-	mergeSpanAttributeColumns(data)
-
-	if events, ok := data["events"].([]spantypes.Event); !ok || len(events) != 0 {
-		t.Fatalf("expected empty []spantypes.Event, got %#v", data["events"])
-	}
-	if links, ok := data["links"].([]spantypes.Link); !ok || len(links) != 0 {
-		t.Fatalf("expected empty []spantypes.Link, got %#v", data["links"])
-	}
-}

pkg/querier/trace_operator_query.go

@@ -85,13 +85,6 @@ func (q *traceOperatorQuery) executeWithContext(ctx context.Context, query strin
 		return nil, err
 	}
 
-	// TODO: This should move to readAsRaw function in consume.go but for now we can keep it here since it's only relevant for traces
-	if raw, ok := payload.(*qbtypes.RawData); ok {
-		for _, rr := range raw.Rows {
-			mergeSpanAttributeColumns(rr.Data)
-		}
-	}
-
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/telemetrytraces/const.go

@@ -1,50 +1,6 @@
 package telemetrytraces
 
-import (
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-)
-
-const (
-
-	// Internal Columns.
-	SpanTimestampBucketStartColumn = "ts_bucket_start"
-	SpanResourceFingerPrintColumn  = "resource_fingerprint"
-
-	// Intrinsic Columns.
-	SpanTimestampColumn        = "timestamp"
-	SpanTraceIDColumn          = "trace_id"
-	SpanSpanIDColumn           = "span_id"
-	SpanTraceStateColumn       = "trace_state"
-	SpanParentSpanIDColumn     = "parent_span_id"
-	SpanFlagsColumn            = "flags"
-	SpanNameColumn             = "name"
-	SpanKindColumn             = "kind"
-	SpanKindStringColumn       = "kind_string"
-	SpanDurationNanoColumn     = "duration_nano"
-	SpanStatusCodeColumn       = "status_code"
-	SpanStatusMessageColumn    = "status_message"
-	SpanStatusCodeStringColumn = "status_code_string"
-	SpanEventsColumn           = "events"
-	SpanLinksColumn            = "links"
-
-	// Calculated Columns.
-	SpanResponseStatusCodeColumn = "response_status_code"
-	SpanExternalHTTPURLColumn    = "external_http_url"
-	SpanHTTPURLColumn            = "http_url"
-	SpanExternalHTTPMethodColumn = "external_http_method"
-	SpanHTTPMethodColumn         = "http_method"
-	SpanHTTPHostColumn           = "http_host"
-	SpanDBNameColumn             = "db_name"
-	SpanDBOperationColumn        = "db_operation"
-	SpanHasErrorColumn           = "has_error"
-	SpanIsRemoteColumn           = "is_remote"
-
-	// Contextual Columns.
-	SpanAttributesStringColumn = "attributes_string"
-	SpanAttributesNumberColumn = "attributes_number"
-	SpanAttributesBoolColumn   = "attributes_bool"
-	SpanResourcesStringColumn  = "resources_string"
-)
+import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{
@@ -378,51 +334,6 @@ var (
 	SpanSearchScopeRoot       = "isroot"
 	SpanSearchScopeEntryPoint = "isentrypoint"
 
-	// IntrinsicSpanFields lists the intrinsic span columns, in the order they
-	// should appear when a raw query expands its SelectFields.
-	IntrinsicSpanFields = []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceStateColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanParentSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanFlagsColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanKindColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanKindStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDurationNanoColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusMessageColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanStatusCodeStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanEventsColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanLinksColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-
-	// CalculatedSpanFields lists the calculated/derived span columns, in the
-	// order they should appear when a raw query expands its SelectFields.
-	CalculatedSpanFields = []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanResponseStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanExternalHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanExternalHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHTTPHostColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDBNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanDBOperationColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanHasErrorColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanIsRemoteColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-
-	// ContextualSpanColumns lists the typed attribute and resource columns
-	// selected raw (rather than via ColumnExpressionFor) so that consume.go
-	// can merge them into unified "attributes" and "resource" maps.
-	ContextualSpanColumns = []string{
-		SpanAttributesStringColumn,
-		SpanAttributesNumberColumn,
-		SpanAttributesBoolColumn,
-		SpanResourcesStringColumn,
-	}
-
 	DefaultFields = map[string]telemetrytypes.TelemetryFieldKey{
 		"timestamp": {
 			Name:          "timestamp",

pkg/telemetrytraces/field_mapper_test.go

@@ -78,17 +78,6 @@ func TestGetFieldKeyName(t *testing.T) {
 			expectedResult: "multiIf(resource.`deployment.environment` IS NOT NULL, resource.`deployment.environment`::String, `resource_string_deployment$$environment_exists`==true, `resource_string_deployment$$environment`, NULL)",
 			expectedError:  nil,
 		},
-		{
-			// Query like `attribute.attribute_string:string` should resolve to `attributes_string['attribute_string']`.
-			name: "Attribute key whose name collides with contextual map column resolves as a map lookup",
-			key: telemetrytypes.TelemetryFieldKey{
-				Name:          SpanAttributesStringColumn,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-			},
-			expectedResult: "attributes_string['attributes_string']",
-			expectedError:  nil,
-		},
 		{
 			name: "Non-existent column",
 			key: telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
+	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -15,6 +16,7 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
+	"golang.org/x/exp/maps"
 )
 
 var (
@@ -87,13 +89,40 @@ func (b *traceQueryStatementBuilder) Build(
 		return nil, err
 	}
 
-	isSelectFieldsEmpty := false
+	/*
+		Adding a tech debt note here:
+		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
+	*/
+	/*
+		-------------------------------- Start of tech debt ----------------------------
+	*/
 	if requestType == qbtypes.RequestTypeRaw {
-		isSelectFieldsEmpty = len(query.SelectFields) == 0
-		// we are expanding here to ensure that all the conflicts are taken care in adjustKeys
-		// i.e if there is a conflict we strip away context of the key in adjustKeys
-		query = b.expandRawSelectFields(query)
+
+		selectedFields := query.SelectFields
+
+		if len(selectedFields) == 0 {
+			sortedKeys := maps.Keys(DefaultFields)
+			slices.Sort(sortedKeys)
+			for _, key := range sortedKeys {
+				selectedFields = append(selectedFields, DefaultFields[key])
+			}
+			query.SelectFields = selectedFields
+		}
+
+		selectFieldKeys := []string{}
+		for _, field := range selectedFields {
+			selectFieldKeys = append(selectFieldKeys, field.Name)
+		}
+
+		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
+			if !slices.Contains(selectFieldKeys, x) {
+				query.SelectFields = append(query.SelectFields, DefaultFields[x])
+			}
+		}
 	}
+	/*
+		-------------------------------- End of tech debt ----------------------------
+	*/
 
 	query = b.adjustKeys(ctx, keys, query, requestType)
 
@@ -102,7 +131,7 @@ func (b *traceQueryStatementBuilder) Build(
 
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, q, query, start, end, keys, variables, isSelectFieldsEmpty)
+		return b.buildListQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeTimeSeries:
 		return b.buildTimeSeriesQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeScalar:
@@ -266,7 +295,6 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 	start, end uint64,
 	keys map[string][]*telemetrytypes.TelemetryFieldKey,
 	variables map[string]qbtypes.VariableItem,
-	isSelectFieldsEmpty bool,
 ) (*qbtypes.Statement, error) {
 
 	var (
@@ -281,6 +309,7 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
+	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
 	for _, field := range query.SelectFields {
 		colExpr, err := b.fm.ColumnExpressionFor(ctx, start, end, &field, keys)
 		if err != nil {
@@ -289,12 +318,6 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		sb.SelectMore(colExpr)
 	}
 
-	if isSelectFieldsEmpty {
-		for _, col := range ContextualSpanColumns {
-			sb.SelectMore(col)
-		}
-	}
-
 	// From table
 	sb.From(fmt.Sprintf("%s.%s", DBName, SpanIndexV3TableName))
 
@@ -821,30 +844,3 @@ func (b *traceQueryStatementBuilder) buildResourceFilterCTE(
 		variables,
 	)
 }
-
-// expandRawSelectFields populates SelectFields for raw (list view) queries.
-// It must be called before adjustKeys so that normalization runs over the full set.
-func (b *traceQueryStatementBuilder) expandRawSelectFields(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
-	if len(query.SelectFields) == 0 {
-		selectFields := make([]telemetrytypes.TelemetryFieldKey, 0, len(IntrinsicSpanFields)+len(CalculatedSpanFields))
-		selectFields = append(selectFields, IntrinsicSpanFields...)
-		selectFields = append(selectFields, CalculatedSpanFields...)
-		query.SelectFields = selectFields
-		return query
-	}
-
-	selectFields := []telemetrytypes.TelemetryFieldKey{
-		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
-	}
-	for _, field := range query.SelectFields {
-		// TODO(tvats): If a user specifies attribute.timestamp in the select fields, this loop will basically ignore it, as we already added a field by default. This can be fixed once we close https://github.com/SigNoz/engineering-pod/issues/3693
-		if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
-			continue
-		}
-		selectFields = append(selectFields, field)
-	}
-	query.SelectFields = selectFields
-	return query
-}

pkg/telemetrytraces/stmt_builder_test.go

@@ -439,7 +439,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -468,7 +468,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -512,7 +512,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -556,7 +556,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -601,7 +601,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -711,7 +711,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				Limit:        10,
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -744,7 +744,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				}},
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
+				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,

pkg/types/querybuildertypes/querybuildertypesv5/resp.go

@@ -236,7 +236,6 @@ type RawStream struct {
 	Error chan error
 }
 
-
 func roundToNonZeroDecimals(val float64, n int) float64 {
 	if val == 0 || math.IsNaN(val) || math.IsInf(val, 0) {
 		return val

pkg/types/spantypes/event.go

@@ -1,59 +0,0 @@
-package spantypes
-
-import "encoding/json"
-
-type Event struct {
-	Name         string         `json:"name"`
-	TimeUnixNano uint64         `json:"timeUnixNano"`
-	Attributes   map[string]any `json:"attributes,omitempty"`
-}
-
-// Link is the response shape for a span link.
-// The refType field is intentionally not decoded; it's a Jaeger-era
-// concept that OTel doesn't model, so we drop it on the way out.
-type Link struct {
-	TraceID string `json:"traceId,omitempty"`
-	SpanID  string `json:"spanId,omitempty"`
-}
-
-// dbEvent matches the JSON object stored in the ClickHouse `events`
-// Array(String) column.
-type dbEvent struct {
-	Name         string         `json:"name"`
-	TimeUnixNano uint64         `json:"timeUnixNano"`
-	AttributeMap map[string]any `json:"attributeMap"`
-}
-
-// ParseEvents column (Array(String) of JSON-encoded events) into a slice of Event values.
-// Malformed entries are skipped.
-func ParseEvents(raw any) []Event {
-	strs, ok := raw.([]string)
-	if !ok {
-		return []Event{}
-	}
-	events := make([]Event, 0, len(strs))
-	for _, s := range strs {
-		var e dbEvent
-		if err := json.Unmarshal([]byte(s), &e); err != nil {
-			continue
-		}
-		events = append(events, Event{
-			Name:         e.Name,
-			TimeUnixNano: e.TimeUnixNano,
-			Attributes:   e.AttributeMap,
-		})
-	}
-	return events
-}
-
-func ParseLinks(raw any) []Link {
-	s, ok := raw.(string)
-	if !ok || s == "" {
-		return []Link{}
-	}
-	var links []Link
-	if err := json.Unmarshal([]byte(s), &links); err != nil {
-		return []Link{}
-	}
-	return links
-}

tests/e2e/helpers/dashboards.ts

@@ -3,6 +3,10 @@ import path from 'path';
 import type { APIRequestContext, Locator, Page } from '@playwright/test';
 
 import apmMetricsTemplate from '../testdata/apm-metrics.json';
+import queriesData from '../testdata/queries.json';
+
+export type SignalType = 'metrics' | 'logs' | 'traces';
+export type QueriesData = typeof queriesData;
 
 // ─── Constants ───────────────────────────────────────────────────────────
 //
@@ -177,3 +181,248 @@ export async function openDashboardActionMenu(
 	await icon.click();
 	return page.getByRole('tooltip');
 }
+
+// ─── Dashboard detail page helpers ──────────────────────────────────────────
+
+/**
+ * Click the Configure button (`data-testid="show-drawer"`) on a dashboard
+ * detail page and wait for the settings drawer (`.settings-container-root`) to
+ * be visible. Works from both the empty-state view and the populated toolbar —
+ * both render the same testid.
+ *
+ * Returns the drawer locator so callers can scope further assertions to it.
+ */
+export async function openDashboardSettingsDrawer(page: Page): Promise<Locator> {
+	await page.getByTestId('show-drawer').first().click();
+	const drawer = page.locator('.settings-container-root');
+	await drawer.waitFor({ state: 'visible' });
+	return drawer;
+}
+
+/**
+ * Click `data-testid="save-dashboard-config"` and wait for the resulting
+ * `PUT /api/v1/dashboards/<id>` response. The Save button is only rendered
+ * when there is at least one unsaved change — callers must ensure the drawer
+ * has been dirtied before calling this.
+ */
+export async function saveDashboardSettings(page: Page): Promise<void> {
+	const patchResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByTestId('save-dashboard-config').click();
+	await patchResponse;
+}
+
+/**
+ * Rename a dashboard via the toolbar options popover:
+ * opens the popover (`data-testid="options"`), clicks "Rename", fills the
+ * input, clicks "Rename Dashboard", and waits for the PUT response.
+ *
+ * Pre-condition: the caller must be on the dashboard detail page.
+ */
+export async function renameDashboardViaToolbar(
+	page: Page,
+	newTitle: string,
+): Promise<void> {
+	await page.getByTestId('options').click();
+	await page.getByRole('button', { name: 'Rename' }).click();
+
+	const modal = page.getByRole('dialog');
+	await modal.waitFor({ state: 'visible' });
+
+	const input = modal.getByTestId('dashboard-name');
+	await input.clear();
+	await input.fill(newTitle);
+
+	const patchResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByRole('button', { name: 'Rename Dashboard' }).click();
+	await patchResponse;
+
+	await modal.waitFor({ state: 'hidden' });
+}
+
+// ─── Add panel flow ─────────────────────────────────────────────────────────
+
+/**
+ * From the dashboard detail page (must already be loaded), drive the full
+ * "Add Panel" flow for the given signal type:
+ *   1. Click the empty-state `add-panel` CTA to open the New Panel modal.
+ *   2. Pick the Time Series panel type.
+ *   3. Fill the panel name in the right pane (drives the post-save assertion).
+ *   4. For metrics: type the metric name from `queries.json` into the metric
+ *      AutoComplete and select it from the dropdown. For logs/traces: switch
+ *      the data-source selector to LOGS / TRACES; default Query Builder state
+ *      is sufficient (queries.json query strings are empty by design).
+ *   5. Click Save Changes, confirm the modal, and wait for the
+ *      PUT /api/v1/dashboards/<id> response.
+ *
+ * Throws if the PUT response is not 2xx. After return, the page is back on
+ * the dashboard detail page; the caller asserts the panel rendered.
+ */
+export async function configureAndSavePanel(
+	page: Page,
+	signal: SignalType,
+	panelTitle: string,
+): Promise<void> {
+	await page.getByTestId('add-panel').click();
+
+	const newPanelModal = page
+		.getByRole('dialog')
+		.filter({ hasText: 'New Panel' });
+	await newPanelModal.waitFor({ state: 'visible' });
+	await newPanelModal.getByTestId('panel-type-graph').click();
+
+	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
+	await page.getByTestId('panel-name-input').fill(panelTitle);
+
+	if (signal === 'metrics') {
+		const metricName = queriesData.metrics.metricName;
+		// The testid is on the Ant Select wrapper <div>; the editable input
+		// lives inside it. Target the descendant input for fill().
+		const metricInput = page.getByTestId('metric-name-selector-0').locator('input');
+		await metricInput.click();
+		await metricInput.fill(metricName);
+		// AutoComplete debounces and fetches; wait for the option then click.
+		await page
+			.locator('.ant-select-item-option-content', { hasText: metricName })
+			.first()
+			.click();
+	} else {
+		// logs / traces — switch the data source. Default query is sufficient.
+		await page.getByTestId('query-data-source-selector-0').click();
+		await page
+			.locator('.ant-select-item-option-content', {
+				hasText: signal.toUpperCase(),
+			})
+			.click();
+	}
+
+	const putResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByTestId('new-widget-save').click();
+
+	// Confirmation modal (title varies: "Save Widget" vs "Unsaved Changes" —
+	// don't assert title, just click OK on the topmost dialog).
+	const confirmModal = page.getByRole('dialog').last();
+	await confirmModal.waitFor({ state: 'visible' });
+	await confirmModal.getByRole('button', { name: /^OK$/i }).click();
+
+	const res = await putResponse;
+	if (!res.ok()) {
+		throw new Error(
+			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
+		);
+	}
+
+	// Save navigates back to /dashboard/<id> (no /new suffix).
+	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+}
+
+// ─── Widget editor (re-open existing panel) ────────────────────────────────
+
+/**
+ * Display labels surfaced in the `panel-change-select` Ant Select inside the
+ * widget editor. The mapping to URL `graphType` values comes from the
+ * `PANEL_TYPES` enum: TIME_SERIES='graph', VALUE='value', and so on.
+ */
+export type PanelDisplayLabel =
+	| 'Time Series'
+	| 'Number'
+	| 'Table'
+	| 'List'
+	| 'Bar'
+	| 'Pie'
+	| 'Histogram';
+
+const PANEL_DISPLAY_TO_GRAPH_TYPE: Record<PanelDisplayLabel, string> = {
+	'Time Series': 'graph',
+	Number: 'value',
+	Table: 'table',
+	List: 'list',
+	Bar: 'bar',
+	Pie: 'pie',
+	Histogram: 'histogram',
+};
+
+/**
+ * Open the widget editor for an existing panel by driving the panel header
+ * options menu (the three-dot Ant `Dropdown` next to the title).
+ *
+ * The widget-header-options button is `visibility: hidden` until the panel is
+ * hovered (see `GridCardLayout.styles.scss`) — except on TABLE panels, where
+ * `globalSearchAvailable` keeps it permanently visible. Hovering the title
+ * testid first works for both states.
+ */
+export async function openWidgetEditor(
+	page: Page,
+	panelTitle: string,
+): Promise<void> {
+	await page.getByTestId(panelTitle).first().hover();
+	await page.getByTestId('widget-header-options').first().click();
+	await page
+		.getByRole('menuitem', { name: /^edit$/i })
+		.first()
+		.click();
+	await page.waitForURL(/widgetId=/);
+	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
+}
+
+/**
+ * Click "Save Changes" in the widget editor, confirm via the OK button on the
+ * resulting modal, await the dashboard PUT response, and wait for navigation
+ * back to `/dashboard/<id>`. Throws if the PUT response is not 2xx.
+ *
+ * The confirmation modal title varies between "Save Widget" and "Unsaved
+ * Changes" depending on whether the query was modified — don't assert title,
+ * just OK the topmost dialog.
+ */
+export async function saveWidgetEdit(page: Page): Promise<void> {
+	const putResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByTestId('new-widget-save').click();
+	const confirmModal = page.getByRole('dialog').last();
+	await confirmModal.waitFor({ state: 'visible' });
+	await confirmModal.getByRole('button', { name: /^OK$/i }).click();
+	const res = await putResponse;
+	if (!res.ok()) {
+		throw new Error(
+			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
+		);
+	}
+	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+}
+
+/**
+ * Switch the editor's panel display type via the Ant `Select` exposed as
+ * `data-testid="panel-change-select"`. The select options carry the display
+ * label as visible text (matches `PanelDisplay` enum values). After the
+ * change, this helper waits for the URL `graphType` param to reflect the new
+ * panel type and for the Save Changes button to re-render — the editor
+ * re-routes mid-flow via `redirectWithQueryBuilderData`.
+ *
+ * Note: the "List" option is filtered out of the dropdown when the current
+ * query contains a metrics data source (see VisualizationSettingsSection).
+ */
+export async function changePanelType(
+	page: Page,
+	displayLabel: PanelDisplayLabel,
+): Promise<void> {
+	const expectedGraphType = PANEL_DISPLAY_TO_GRAPH_TYPE[displayLabel];
+	await page.getByTestId('panel-change-select').click();
+	// Each option renders a .select-option containing the display text — match
+	// against the typography element to avoid matching the trigger itself.
+	await page
+		.locator('.ant-select-item-option .display', { hasText: displayLabel })
+		.first()
+		.click();
+	await page.waitForURL(new RegExp(`graphType=${expectedGraphType}`));
+	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
+}

tests/e2e/testdata/queries.json

@@ -0,0 +1,12 @@
+{
+    "logs": {
+        "query": ""
+    },
+    "metrics": {
+        "metricName": "signoz_calls_total",
+        "query": ""
+    },
+    "traces": {
+        "query": ""
+    }
+}

tests/e2e/tests/dashboards/create.spec.ts

@@ -0,0 +1,550 @@
+import path from 'path';
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../fixtures/auth';
+import { newAdminContext } from '../../helpers/auth';
+import {
+	APM_METRICS_TITLE,
+	authToken,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	gotoDashboardsList,
+	openDashboardSettingsDrawer,
+	renameDashboardViaToolbar,
+	saveDashboardSettings,
+	SEARCH_PLACEHOLDER,
+} from '../../helpers/dashboards';
+
+// All tests mutate dashboard state (create / rename / delete). Run serially to
+// prevent cross-test interference on the list and detail pages.
+test.describe.configure({ mode: 'serial' });
+
+// ─── Suite-level seed registry ────────────────────────────────────────────────
+//
+// Every dashboard created by any test is registered here; one afterAll tears
+// them all down. Tests that don't create anything (TC-10, TC-11, TC-13) need
+// no cleanup entry.
+const seedIds = new Set<string>();
+const BASE_FIXTURE_TITLE = 'create-flow-base-fixture';
+
+const APM_METRICS_TESTDATA_PATH = path.resolve(
+	__dirname,
+	'../../testdata/apm-metrics.json',
+);
+
+async function seed(page: Page, title: string): Promise<string> {
+	const id = await createDashboardViaApi(page, title);
+	seedIds.add(id);
+	return id;
+}
+
+test.beforeAll(async ({ browser }) => {
+	// Seed one base dashboard so the list is non-empty and the
+	// `new-dashboard-cta` header button is rendered for all tests that
+	// drive the "New dashboard" dropdown from the list page.
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		seedIds.add(await createDashboardViaApi(page, BASE_FIXTURE_TITLE));
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.describe('Dashboard Create Flow', () => {
+	// ─── 1. Create Dashboard (blank) ─────────────────────────────────────────
+
+	test('TC-01 blank create lands on onboarding state with correct default title', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+
+		const postResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
+		);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('create-dashboard-menu-cta').click();
+		const res = await postResponse;
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
+
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+		const body = (await res.json()) as {
+			data: { data: { title: string }; id: string };
+		};
+		expect(body.data.data.title).toBe('Sample Title');
+
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		// DashboardDescription always renders dashboard-title even on blank dashboards.
+		await expect(page.getByTestId('dashboard-title')).toBeVisible();
+		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
+		await expect(page.getByText('Configure your new dashboard')).toBeVisible();
+		await expect(page.getByTestId('show-drawer').first()).toBeVisible();
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		// Register the UI-created dashboard for cleanup.
+		const id = body.data.id;
+		expect(id, 'POST response must include a dashboard id').toBeTruthy();
+		seedIds.add(id);
+	});
+
+	test('TC-02 configure drawer opens with Overview tab and pre-fills existing title', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc02');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		// Overview tab is the default active tab.
+		await expect(drawer.getByRole('button', { name: 'Overview' })).toBeVisible();
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await expect(nameInput).toHaveValue('create-flow-tc02');
+
+		const descInput = drawer.getByTestId('dashboard-desc');
+		await expect(descInput).toBeVisible();
+		await expect(descInput).toHaveValue('');
+
+		await expect(
+			drawer.getByPlaceholder('Start typing your tag name'),
+		).toBeVisible();
+
+		// Ant Drawer does not close on Escape — use the X close button in the header.
+		await drawer.getByRole('button', { name: 'Close' }).click();
+		await expect(drawer).not.toHaveClass(/ant-drawer-open/);
+	});
+
+	test('TC-03 rename title, add description and tags, save persists to list', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc03-original');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await nameInput.clear();
+		await nameInput.fill('create-flow-tc03-renamed');
+		await expect(drawer.getByText(/1 unsaved change/)).toBeVisible();
+
+		await drawer.getByTestId('dashboard-desc').fill('A test description');
+		await expect(drawer.getByText(/2 unsaved changes/)).toBeVisible();
+
+		const tagInput = drawer.getByPlaceholder('Start typing your tag name');
+		await tagInput.click();
+		await tagInput.fill('e2e-tag');
+		await page.keyboard.press('Enter');
+		await expect(drawer.getByText(/3 unsaved changes/)).toBeVisible();
+
+		// Click save and wait for the unsaved-changes footer to disappear — the
+		// footer only clears after the PUT success callback re-syncs local state.
+		await page.getByTestId('save-dashboard-config').click();
+		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
+
+		await drawer.getByRole('button', { name: 'Close' }).click();
+
+		// Renamed dashboard appears in the list.
+		await gotoDashboardsList(page);
+		const searchInput = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+		await searchInput.fill('create-flow-tc03-renamed');
+		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
+
+		// Tag search also surfaces the renamed dashboard.
+		await searchInput.fill('e2e-tag');
+		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
+	});
+
+	test('TC-04 discard reverts unsaved changes without API call', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc04');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await nameInput.clear();
+		await nameInput.fill('create-flow-tc04-discarded');
+		await drawer.getByTestId('dashboard-desc').fill('discarded desc');
+		await expect(drawer.getByText(/unsaved change/)).toBeVisible();
+
+		// Intercept any PUT to detect an unwanted save.
+		let patchFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				patchFired = true;
+			}
+			route.continue();
+		});
+
+		await drawer.getByRole('button', { name: 'Discard' }).click();
+
+		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
+		await expect(nameInput).toHaveValue('create-flow-tc04');
+		await expect(drawer.getByTestId('dashboard-desc')).toHaveValue('');
+		expect(patchFired).toBe(false);
+	});
+
+	test('TC-05 rename via toolbar options popover persists to the toolbar title', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc05');
+		await page.goto(`/dashboard/${id}`);
+
+		// DashboardDescription toolbar always renders — even on blank dashboards.
+		await expect(page.getByTestId('options')).toBeVisible();
+
+		await renameDashboardViaToolbar(page, 'create-flow-tc05-renamed');
+
+		await expect(page.getByTestId('dashboard-title')).toHaveText(
+			'create-flow-tc05-renamed',
+		);
+	});
+
+	// ─── 2. Variables ─────────────────────────────────────────────────────────
+
+	test('TC-06 add a Custom variable, verify it appears in the variables bar', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc06');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+		await drawer.getByRole('button', { name: 'Variables' }).click();
+
+		await drawer.getByTestId('add-new-variable').click();
+		await expect(drawer.getByRole('button', { name: 'All variables' })).toBeVisible();
+
+		await drawer
+			.getByPlaceholder('Unique name of the variable')
+			.fill('env');
+
+		await drawer.getByRole('button', { name: 'Custom' }).click();
+
+		// After selecting "Custom" type, the Options collapse panel contains a
+		// textarea with placeholder "Enter options separated by commas."
+		const customInput = drawer.getByPlaceholder(
+			'Enter options separated by commas.',
+		);
+		await customInput.fill('prod,staging,dev');
+
+		const patchResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+		);
+		await drawer.getByRole('button', { name: 'Save Variable' }).click();
+		const res = await patchResponse;
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+
+		// After saving, the variable form disappears and the table row is visible.
+		await expect(drawer.getByRole('button', { name: 'All variables' })).not.toBeVisible();
+		await expect(drawer.getByText('env')).toBeVisible();
+
+		// Close the drawer via its X button and check the variables bar.
+		await drawer.getByRole('button', { name: 'Close' }).click();
+		await expect(page.locator('.dashboard-variables')).toBeVisible();
+	});
+
+	test('TC-07 duplicate variable name is rejected inline', async ({
+		authedPage: page,
+	}) => {
+		// Seed a dashboard that already has a variable named 'env'.
+		const id = await seed(page, 'create-flow-tc07');
+		await page.goto(`/dashboard/${id}`);
+
+		// Use the UI to add the first variable so the state is real.
+		const drawer = await openDashboardSettingsDrawer(page);
+		await drawer.getByRole('button', { name: 'Variables' }).click();
+		await drawer.getByTestId('add-new-variable').click();
+		await drawer.getByPlaceholder('Unique name of the variable').fill('env');
+		await drawer.getByRole('button', { name: 'Custom' }).click();
+		await drawer
+			.getByPlaceholder('Enter options separated by commas.')
+			.fill('prod');
+		const firstSave = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+		);
+		await drawer.getByRole('button', { name: 'Save Variable' }).click();
+		await firstSave;
+
+		// Now try to add a second variable with the same name.
+		await drawer.getByTestId('add-new-variable').click();
+		const nameInput = drawer.getByPlaceholder('Unique name of the variable');
+		await nameInput.fill('env');
+
+		await expect(
+			drawer.getByText('Variable name already exists'),
+		).toBeVisible();
+		await expect(
+			drawer.getByRole('button', { name: 'Save Variable' }),
+		).toBeDisabled();
+	});
+
+	// ─── 3. Import JSON ───────────────────────────────────────────────────────
+	//
+	// TC-08 and TC-12 are merged: TC-08 covers the POST contract and navigation;
+	// the merged test also navigates back to the list and verifies metadata
+	// surfacing (the TC-12 concern). This avoids two identical import flows.
+
+	test('TC-08 import via file upload creates dashboard, navigates to detail, and surfaces metadata in list', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		const postResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
+		);
+		await dialog.locator('input[type="file"]').setInputFiles(APM_METRICS_TESTDATA_PATH);
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+		const res = await postResponse;
+
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
+
+		// Register for cleanup.
+		const urlMatch = page.url().match(/\/dashboard\/([0-9a-f-]+)/);
+		expect(urlMatch, 'URL must contain dashboard ID').not.toBeNull();
+		seedIds.add(urlMatch![1]);
+
+		await expect(page.getByTestId('dashboard-title')).toHaveText(APM_METRICS_TITLE);
+
+		// Navigate back and confirm the imported dashboard surfaces in the list
+		// with at least one tag chip (TC-12 coverage).
+		await gotoDashboardsList(page);
+		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(APM_METRICS_TITLE);
+		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
+		// The apm-metrics fixture has tags ['apm', 'latency', 'error rate', 'throughput'].
+		await expect(page.getByText('apm').first()).toBeVisible();
+	});
+
+	// TC-09 (Monaco paste path) is intentionally dropped — the file-upload
+	// path (TC-08) exercises the same populate-editor-then-import code path.
+	// Keyboard-typing large JSON into Monaco is unreliable in headless CI.
+
+	test('TC-10 invalid JSON via file upload shows "Invalid JSON" error', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created by this test — no cleanup entry needed.
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		await dialog.locator('input[type="file"]').setInputFiles({
+			name: 'bad.json',
+			mimeType: 'application/json',
+			buffer: Buffer.from('not valid json {'),
+		});
+
+		await expect(dialog.getByText('Invalid JSON')).toBeVisible();
+		await expect(dialog).toBeVisible();
+
+		// Clicking "Import and Next" with invalid content should surface an error
+		// and keep the dialog open.
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		await expect(dialog).toBeVisible();
+	});
+
+	test('TC-11 import with empty editor clicking Import and Next shows error', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created — no cleanup entry needed.
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+
+		await expect(dialog.getByText('Error loading JSON file')).toBeVisible();
+		await expect(dialog).toBeVisible();
+		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+	});
+
+	// ─── 4. View Templates ────────────────────────────────────────────────────
+
+	test('TC-13 View templates menu item is an external link targeting a new tab', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created — no cleanup entry needed.
+		// The assertion guards against the link being silently changed to an
+		// in-app modal or a different URL (the DashboardTemplatesModal exists in
+		// source but is never triggered from this menu item).
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+
+		const link = page.getByTestId('view-templates-menu-cta');
+		await expect(link).toBeVisible();
+
+		await expect(link).toHaveAttribute(
+			'href',
+			/signoz\.io\/docs\/dashboards\/dashboard-templates/,
+		);
+		await expect(link).toHaveAttribute('target', '_blank');
+		await expect(link).toHaveAttribute('rel', /noopener/);
+	});
+
+	// ─── 5. Post-Create Dashboard Detail — Panel Addition ────────────────────
+
+	test('TC-14 New Panel modal opens and selecting Time Series navigates to widget editor', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc14');
+		await page.goto(`/dashboard/${id}`);
+
+		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
+
+		await page.getByTestId('add-panel').click();
+		// PANEL_TYPES enum: TIME_SERIES='graph', VALUE='value', TABLE='table'
+		// — the testid is panel-type-<enum-value>, not panel-type-<enum-name>.
+		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
+		await expect(modal).toBeVisible();
+
+		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
+		await expect(modal.getByTestId('panel-type-value')).toBeVisible();
+		await expect(modal.getByTestId('panel-type-table')).toBeVisible();
+
+		await modal.getByTestId('panel-type-graph').click();
+		await expect(page).toHaveURL(/graphType=graph/);
+	});
+
+	test('TC-15 New Panel button from toolbar header opens the same panel type modal', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc15');
+		await page.goto(`/dashboard/${id}`);
+
+		// The toolbar "New Panel" button (add-panel-header) is present even on
+		// a blank dashboard, alongside the empty-state "add-panel" button.
+		await expect(page.getByTestId('add-panel-header')).toBeVisible();
+		await page.getByTestId('add-panel-header').click();
+
+		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
+		await expect(modal).toBeVisible();
+		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
+
+		// Click the modal X button to close (Escape also works but may conflict
+		// with the Enterprise modal in the background; explicit click is more reliable).
+		await modal.getByRole('button', { name: 'Close' }).click();
+		await expect(modal).not.toBeVisible();
+	});
+
+	// ─── 6. Cancellation and Navigation Away ─────────────────────────────────
+
+	test('TC-16 browser Back from dashboard detail returns to list with URL preserved', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc16');
+
+		await page.goto(`/dashboard?search=create-flow-tc16`);
+		await page
+			.getByRole('heading', { name: 'Dashboards', level: 1 })
+			.waitFor({ state: 'visible' });
+
+		await page.getByAltText('dashboard-image').first().click();
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+
+		await page.goBack();
+		await expect(page).toHaveURL(/search=create-flow-tc16/);
+		await expect(
+			page.getByPlaceholder(SEARCH_PLACEHOLDER),
+		).toHaveValue('create-flow-tc16');
+	});
+
+	test('TC-17 navigating away with the settings drawer open does not crash', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc17');
+		await page.goto(`/dashboard/${id}`);
+
+		await openDashboardSettingsDrawer(page);
+
+		// Navigate away without closing the drawer.
+		await page.goto('/dashboard');
+		await expect(page).toHaveURL(/\/dashboard($|\?)/);
+		await expect(
+			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+		).toBeVisible();
+		// No error overlay should be present.
+		await expect(
+			page.getByRole('alert').filter({ hasText: /error/i }),
+		).toHaveCount(0);
+	});
+
+	// ─── 7. Add Panel — end-to-end per signal ────────────────────────────────
+	//
+	// TC-14/TC-15 verify the New Panel modal opens and routes to the widget
+	// editor. The TCs below go further: configure a query for each signal
+	// using values from testdata/queries.json, save the panel, return to the
+	// dashboard, and verify the panel card renders.
+
+	test('TC-18 add metrics Time Series panel using signoz_calls_total from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-metrics');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'metrics', 'metrics-timeseries');
+
+		await expect(page.getByTestId('metrics-timeseries')).toBeVisible();
+	});
+
+	test('TC-19 add logs Time Series panel with default query from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-logs');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'logs', 'logs-timeseries');
+
+		await expect(page.getByTestId('logs-timeseries')).toBeVisible();
+	});
+
+	test('TC-20 add traces Time Series panel with default query from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-traces');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'traces', 'traces-timeseries');
+
+		await expect(page.getByTestId('traces-timeseries')).toBeVisible();
+	});
+});

tests/e2e/tests/dashboards/panels/bar.spec.ts

@@ -0,0 +1,484 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'bar-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'bar-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'Bar');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+async function expandSection(page: Page, title: string): Promise<void> {
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) =>
+		el.classList.contains('open'),
+	);
+	if (!isOpen) {
+		await section.locator('button.settings-section-header').click();
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+async function selectYAxisUnit(
+	page: Page,
+	wrapperSelector: string,
+	searchTerm: string,
+	optionText: string,
+): Promise<void> {
+	const wrapper = page.locator(wrapperSelector).first();
+	await wrapper.locator('.ant-select').click();
+	await wrapper.locator('.ant-select input').fill(searchTerm);
+	await page
+		.locator('.ant-select-item-option-content', { hasText: optionText })
+		.first()
+		.click();
+}
+
+test.describe('Bar Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('bar-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('bar-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'bar-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'bar-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and toggles the widget-header info icon', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E bar description');
+		await saveWidgetEdit(page);
+
+		const header = page
+			.locator('.widget-header-container')
+			.filter({ hasText: FIXTURE_PANEL_TITLE });
+		await expect(header.locator('.info-tooltip').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E bar description',
+		);
+
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+		await expect(header.locator('.info-tooltip')).toHaveCount(0);
+	});
+
+	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i })
+			.click();
+		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 stack series toggle persists; editor reflects state via data-stacking-state', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		const stackSwitch = page.locator('section.stack-chart').getByRole('switch');
+		const panelChangeSelect = page.getByTestId('panel-change-select');
+
+		await expect(stackSwitch).toHaveAttribute('aria-checked', 'false');
+		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'false');
+
+		await stackSwitch.click();
+		await expect(stackSwitch).toHaveAttribute('aria-checked', 'true');
+		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'true');
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.stack-chart').getByRole('switch'),
+		).toHaveAttribute('aria-checked', 'true');
+		await expect(page.getByTestId('panel-change-select')).toHaveAttribute(
+			'data-stacking-state',
+			'true',
+		);
+
+		// Reset
+		await page.locator('section.stack-chart').getByRole('switch').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
+		// Tooltip-based visible-change check is omitted — the test stack's
+		// `signoz_calls_total` data slides outside the dashboard's default
+		// "Last 30 minutes" window mid-suite, so the rendered panel often
+		// shows "No Data" and the tooltip never appears. Verify persistence
+		// only — the selector value round-trips through PUT.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		await selectYAxisUnit(
+			page,
+			'.y-axis-unit-selector-v2',
+			'Milliseconds',
+			'Milliseconds (ms)',
+		);
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(
+			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
+		).toContainText(/Milliseconds/);
+
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
+		// Tooltip-based visible-change check is omitted for the same reason
+		// as TC-05.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
+			.first()
+			.click();
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
+			/0 decimals/,
+		);
+
+		// Reset
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Axes');
+
+		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('10');
+		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('100');
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Axes');
+		await expect(
+			page.locator('section.soft-min-max .ant-input-number-input').first(),
+		).toHaveValue('10');
+		await expect(
+			page.locator('section.soft-min-max .ant-input-number-input').last(),
+		).toHaveValue('100');
+
+		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('');
+		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-08 log scale persists (canvas-only visual)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Axes');
+		await page.locator('section.log-scale .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Axes');
+		await expect(
+			page.locator('section.log-scale .ant-select-selection-item').first(),
+		).toContainText(/Logarithmic/);
+
+		await page.locator('section.log-scale .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-09 legend position swap toggles chart-layout--legend-right and shows the search input', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
+		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
+
+		await page.locator('section.legend-position .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
+			.first()
+			.click();
+
+		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
+		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
+		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Legend');
+		await page.locator('section.legend-position .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+
+		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
+		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
+	});
+
+	test('TC-10 Legend Colors panel renders one row per query series with a default color swatch', async ({
+		authedPage: page,
+	}) => {
+		// Driving the Ant ColorPicker is fiddly across builds (trigger class
+		// varies, preset chips may not be configured). Per-option testids have
+		// been added in `YAxisUnitSelector.tsx` for the unit picker, but the
+		// LegendColors picker uses Ant's `ColorPicker` directly with no stable
+		// testids. The pragmatic check is structural: when a query has run
+		// and produced series, the Legend Colors collapse panel renders one
+		// row per legend label with a `.legend-marker` carrying an inline
+		// `background-color` (the auto-assigned default). This guards against
+		// regressions in the LegendColors → query-response wiring.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
+		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
+
+		const items = page.locator('.legend-items .legend-item');
+		await items.first().waitFor({ state: 'visible' });
+		expect(await items.count()).toBeGreaterThan(0);
+
+		const firstMarker = items.first().locator('.legend-marker');
+		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
+		expect(markerStyle).toMatch(/background-color:/);
+	});
+
+	test('TC-11 threshold add + persistence (canvas-only line)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const card = page.locator('.threshold-container').first();
+
+		// Bar thresholds do NOT have a label input — the time-series-alerts block
+		// only renders for TIME_SERIES. Skip label.
+		await card.getByTestId('threshold-value-input').fill('100');
+
+		await card.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Thresholds');
+		await expect(page.locator('.threshold-container').first()).toBeVisible();
+
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-12 panel type swap from Bar to Time Series and back persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Time Series');
+
+		// Editor-side visual change: Time-Series-only section appears.
+		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=graph/);
+
+		await changePanelType(page, 'Bar');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-13 sections hidden for BAR are not rendered', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// Hidden by the panel-type matrix for BAR.
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
+
+		// Expected to be present.
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+		await expect(page.locator('section.stack-chart').first()).toBeVisible();
+		await expect(page.locator('section.panel-time-preference').first()).toBeVisible();
+
+		await expandSection(page, 'Axes');
+		await expect(page.locator('section.soft-min-max').first()).toBeVisible();
+		await expect(page.locator('section.log-scale').first()).toBeVisible();
+
+		await expandSection(page, 'Legend');
+		await expect(page.locator('section.legend-position').first()).toBeVisible();
+
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
+
+		await expandSection(page, 'Thresholds');
+		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
+	});
+
+	test('TC-14 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-bar-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/histogram.spec.ts

@@ -0,0 +1,313 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'histogram-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'histogram-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'Histogram');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+async function expandSection(page: Page, title: string): Promise<void> {
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) =>
+		el.classList.contains('open'),
+	);
+	if (!isOpen) {
+		await section.locator('button.settings-section-header').click();
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+test.describe('Histogram Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('histogram-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(
+			page.getByTestId('histogram-controls-renamed').first(),
+		).toBeVisible();
+
+		await openWidgetEditor(page, 'histogram-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'histogram-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and toggles the widget-header info icon', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E histogram description');
+		await saveWidgetEdit(page);
+
+		const header = page
+			.locator('.widget-header-container')
+			.filter({ hasText: FIXTURE_PANEL_TITLE });
+		await expect(header.locator('.info-tooltip').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E histogram description',
+		);
+
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+		await expect(header.locator('.info-tooltip')).toHaveCount(0);
+	});
+
+	test('TC-03 bucket count and bucket width persist (canvas-only visual)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// Section is titled "Histogram / Buckets" — literal slash + spaces.
+		await expandSection(page, 'Histogram / Buckets');
+
+		const bucketCount = page.locator('.bucket-input .ant-input-number-input').first();
+		const bucketWidth = page
+			.locator('.histogram-settings__bucket-input .ant-input-number-input')
+			.first();
+
+		await bucketCount.fill('50');
+		await bucketWidth.fill('1.5');
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Histogram / Buckets');
+		await expect(
+			page.locator('.bucket-input .ant-input-number-input').first(),
+		).toHaveValue('50');
+		await expect(
+			page
+				.locator('.histogram-settings__bucket-input .ant-input-number-input')
+				.first(),
+		// Ant InputNumber with precision={2} formats 1.5 → "1.50"
+		).toHaveValue('1.50');
+
+		// Reset
+		await page
+			.locator('.bucket-input .ant-input-number-input')
+			.first()
+			.fill('');
+		await page
+			.locator('.histogram-settings__bucket-input .ant-input-number-input')
+			.first()
+			.fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 "Merge all series" toggle removes .legend-container from the DOM', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Histogram / Buckets');
+
+		// Live preview: legend should be present when toggle is OFF.
+		// (Use `.first()` because the editor may render multiple chart areas.)
+		await expect(page.locator('.legend-container').first()).toBeVisible();
+
+		const mergeSwitch = page
+			.locator('section.histogram-settings__combine-hist')
+			.getByRole('switch');
+		await expect(mergeSwitch).toHaveAttribute('aria-checked', 'false');
+		await mergeSwitch.click();
+		await expect(mergeSwitch).toHaveAttribute('aria-checked', 'true');
+
+		// Histogram passes `showLegend={!isQueriesMerged}` → legend container is
+		// not rendered when the merge toggle is ON.
+		await expect(page.locator('.legend-container')).toHaveCount(0);
+
+		await saveWidgetEdit(page);
+
+		// Dashboard render: legend container also absent.
+		await expect(page.locator('.legend-container')).toHaveCount(0);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Histogram / Buckets');
+		await expect(
+			page
+				.locator('section.histogram-settings__combine-hist')
+				.getByRole('switch'),
+		).toHaveAttribute('aria-checked', 'true');
+
+		// Reset
+		await page
+			.locator('section.histogram-settings__combine-hist')
+			.getByRole('switch')
+			.click();
+		await saveWidgetEdit(page);
+		await expect(page.locator('.legend-container').first()).toBeVisible();
+	});
+
+	test('TC-05 Legend Colors panel renders one row per query series with a default color swatch', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
+		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
+
+		const items = page.locator('.legend-items .legend-item');
+		await items.first().waitFor({ state: 'visible' });
+		expect(await items.count()).toBeGreaterThan(0);
+
+		const firstMarker = items.first().locator('.legend-marker');
+		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
+		expect(markerStyle).toMatch(/background-color:/);
+	});
+
+	test('TC-06 panel type swap from Histogram to Time Series and back persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Time Series');
+
+		// Editor-side visual change: Time Series sections appear, Histogram-only
+		// section disappears.
+		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
+		await expect(page.locator('.histogram-settings__bucket-config')).toHaveCount(0);
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=graph/);
+
+		// Reset
+		await changePanelType(page, 'Histogram');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-07 sections hidden for HISTOGRAM are not rendered', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
+		await expect(page.locator('section.log-scale')).toHaveCount(0);
+		await expect(page.locator('section.legend-position')).toHaveCount(0);
+		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
+		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
+		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
+		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
+
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+
+		await expandSection(page, 'Histogram / Buckets');
+		await expect(
+			page.locator('.histogram-settings__bucket-config').first(),
+		).toBeVisible();
+
+		await expandSection(page, 'Legend');
+		await expect(page.locator('.legend-colors-collapse').first()).toBeVisible();
+	});
+
+	test('TC-08 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-histogram-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/list.spec.ts

@@ -0,0 +1,192 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'list-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'list-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		// LIST panels require a logs (or traces) data source — metrics queries
+		// hide the LIST option from panel-change-select.
+		await configureAndSavePanel(page, 'logs', FIXTURE_PANEL_TITLE);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'List');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+test.describe('List Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('list-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('list-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'list-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'list-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and shows info icon on header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E list description');
+		await saveWidgetEdit(page);
+
+		await expect(
+			page
+				.locator('.widget-header-container')
+				.filter({ hasText: FIXTURE_PANEL_TITLE })
+				.locator('.info-tooltip')
+				.first(),
+		).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E list description',
+		);
+
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-03 panel type switch from List to Table persists and re-renders', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Table');
+		// Table re-renders Decimal Precision + Column Units in the right pane.
+		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		// Panel card should now render an Ant table head.
+		await expect(
+			page
+				.locator('[data-testid="' + FIXTURE_PANEL_TITLE + '"]')
+				.first(),
+		).toBeVisible();
+		await expect(page.locator('.ant-table-thead').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=table/);
+
+		// Reset back to List.
+		await changePanelType(page, 'List');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 sections hidden for LIST are not rendered in the right pane', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
+		await expect(page.locator('section.log-scale')).toHaveCount(0);
+		await expect(page.locator('section.legend-position')).toHaveCount(0);
+		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
+		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
+		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
+		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
+
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-description-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+	});
+
+	test('TC-05 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-list-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/pie.spec.ts

@@ -0,0 +1,417 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'pie-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'pie-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'Pie');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+async function expandSection(page: Page, title: string): Promise<void> {
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) =>
+		el.classList.contains('open'),
+	);
+	if (!isOpen) {
+		await section.locator('button.settings-section-header').click();
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+async function selectYAxisUnit(
+	page: Page,
+	wrapperSelector: string,
+	searchTerm: string,
+	optionText: string,
+): Promise<void> {
+	const wrapper = page.locator(wrapperSelector).first();
+	await wrapper.locator('.ant-select').click();
+	await wrapper.locator('.ant-select input').fill(searchTerm);
+	await page
+		.locator('.ant-select-item-option-content', { hasText: optionText })
+		.first()
+		.click();
+}
+
+/**
+ * Trigger the arc tooltip for the first pie slice and return its rendered
+ * value text. Pie uses `@visx/tooltip` (plain DOM portal — not canvas) so the
+ * tooltip node is reliably queryable.
+ *
+ * Playwright's `.hover()` is blocked by the SVG element intercepting pointer
+ * events. `page.mouse.move` bypasses actionability checks but still relies on
+ * the browser hit-testing landing on the `<g>`. The most reliable path is
+ * `page.evaluate` firing a native `MouseEvent` of type `mouseover` directly
+ * on the arc `<g>` element — React 17+ delegates `onMouseEnter` via
+ * `mouseover` on the root, but also captures synthetic `mouseover` events
+ * dispatched on child elements and applies enter/leave semantics.
+ */
+async function readPieArcTooltipText(page: Page): Promise<string> {
+	// Wait for the arc group to be in the DOM.
+	const firstArcG = page.locator('.piechart-container svg g g').first();
+	await firstArcG.waitFor({ state: 'visible' });
+
+	// Dispatch a synthetic mouseover directly on the arc <g>. This reaches
+	// React's event delegation layer regardless of SVG pointer-event interception.
+	// All browser globals are cast via `(globalThis as any)` because the
+	// tsconfig lib does not include "dom" — page.evaluate callbacks run in the
+	// browser but are type-checked in the Node context.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	await page.evaluate((sel: string) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const w = globalThis as any;
+		const g = w.document.querySelector(sel);
+		if (!g) throw new Error('Arc <g> not found');
+		g.dispatchEvent(new w.MouseEvent('mouseover', { bubbles: true, cancelable: true }));
+	}, '.piechart-container svg g g');
+
+	const tooltip = page.locator('.piechart-tooltip').first();
+	await tooltip.waitFor({ state: 'visible', timeout: 5000 });
+	const valueText = (await page.locator('.tooltip-value').first().textContent()) ?? '';
+
+	// Dispatch mouseout on the arc to close the tooltip.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	await page.evaluate((sel: string) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const w = globalThis as any;
+		const g = w.document.querySelector(sel);
+		if (!g) return;
+		g.dispatchEvent(new w.MouseEvent('mouseout', { bubbles: true, cancelable: true }));
+	}, '.piechart-container svg g g');
+	return valueText;
+}
+
+test.describe('Pie Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('pie-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('pie-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'pie-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'pie-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and toggles the widget-header info icon', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E pie description');
+		await saveWidgetEdit(page);
+
+		const header = page
+			.locator('.widget-header-container')
+			.filter({ hasText: FIXTURE_PANEL_TITLE });
+		await expect(header.locator('.info-tooltip').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E pie description',
+		);
+
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+		await expect(header.locator('.info-tooltip')).toHaveCount(0);
+	});
+
+	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i })
+			.click();
+		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 Y-axis unit applies to the SVG centre text and arc tooltip', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		await selectYAxisUnit(
+			page,
+			'.y-axis-unit-selector-v2',
+			'Milliseconds',
+			'Milliseconds (ms)',
+		);
+		await saveWidgetEdit(page);
+
+		// Visible change 1: the SVG centre text gains a `ms` tspan when a
+		// unit is set.
+		const centreTspans = page.locator('.piechart-container svg text tspan');
+		await centreTspans.first().waitFor({ state: 'visible' });
+		const tspanTexts = await centreTspans.allTextContents();
+		expect(tspanTexts.some((t) => /ms/.test(t))).toBe(true);
+
+		// Visible change 2: the arc tooltip includes the `ms` suffix.
+		const tooltipText = await readPieArcTooltipText(page);
+		expect(tooltipText).toMatch(/ms/);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(
+			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
+		).toContainText(/Milliseconds/);
+
+		// Reset
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-05 decimal precision changes the rendered arc-tooltip values', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		// A unit is required for decimal precision to have a visible effect.
+		await selectYAxisUnit(
+			page,
+			'.y-axis-unit-selector-v2',
+			'Seconds',
+			'Seconds (s)',
+		);
+
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
+			.first()
+			.click();
+
+		await saveWidgetEdit(page);
+
+		// Visible change: arc tooltip numeric portion has no decimal point.
+		const tooltipText = await readPieArcTooltipText(page);
+		const numericPart = tooltipText.replace(/[A-Za-z]+/g, '');
+		expect(numericPart).not.toMatch(/\./);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
+			/0 decimals/,
+		);
+
+		// Reset
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
+			.first()
+			.click();
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-06 Legend Colors panel renders one row per query series with a default color swatch', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
+		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
+
+		const items = page.locator('.legend-items .legend-item');
+		await items.first().waitFor({ state: 'visible' });
+		expect(await items.count()).toBeGreaterThan(0);
+
+		const firstMarker = items.first().locator('.legend-marker');
+		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
+		expect(markerStyle).toMatch(/background-color:/);
+	});
+
+	test('TC-07 piechart-legend-item count matches the number of query series', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+
+		// On the dashboard, count legend items and assert each has a coloured
+		// swatch.
+		await page.locator('.piechart-legend-item').first().waitFor({ state: 'visible' });
+		const dashboardCount = await page.locator('.piechart-legend-item').count();
+		expect(dashboardCount).toBeGreaterThan(0);
+
+		const firstSwatchStyle = (await page
+			.locator('.piechart-legend-item .piechart-legend-label')
+			.first()
+			.getAttribute('style')) ?? '';
+		expect(firstSwatchStyle).toMatch(/background-color:/);
+	});
+
+	test('TC-08 panel type swap from Pie to Time Series and back persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Time Series');
+
+		// Editor-side visual change: Time Series sections appear, Pie-only
+		// `.piechart-wrapper` is gone from the editor preview area.
+		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		// Dashboard render now shows a uPlot chart, not a piechart.
+		await expect(page.getByTestId('uplot-main-div').first()).toBeVisible();
+		await expect(page.locator('.piechart-wrapper')).toHaveCount(0);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=graph/);
+
+		// Reset
+		await changePanelType(page, 'Pie');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-09 sections hidden for PIE are not rendered', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
+		await expect(page.locator('section.log-scale')).toHaveCount(0);
+		await expect(page.locator('section.legend-position')).toHaveCount(0);
+		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
+		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
+		await expect(page.locator('.histogram-settings__bucket-config')).toHaveCount(
+			0,
+		);
+
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+		await expect(page.locator('section.panel-time-preference').first()).toBeVisible();
+
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
+		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
+
+		await expandSection(page, 'Legend');
+		await expect(page.locator('.legend-colors-collapse').first()).toBeVisible();
+	});
+
+	test('TC-10 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-pie-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/table.spec.ts

@@ -0,0 +1,470 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'table-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'table-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'Table');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+/**
+ * Return the last <td> in the first data row of the panel's Ant Design table.
+ * Ant Design applies .ant-table-row to actual data rows only (not header rows),
+ * so this correctly skips the fixed/sticky header tbody rows.
+ *
+ * For the metrics panel the row has: td[0] = label column, td[last] = value
+ * column (the aggregation query "A"). The last td is thus the value cell.
+ * However, depending on the panel query there may only be ONE td per row. Use
+ * the cell that contains a non-empty value: any td that is not purely the
+ * label placeholder.
+ *
+ * NOTE: the value cell wraps its text in a <button> element (from the
+ * QueryTable open-traces render path) so textContent picks it up correctly.
+ */
+async function getFirstDataCell(page: Page) {
+	// .ant-table-row targets Ant Design data rows only (not header/fixed rows).
+	const firstRow = page.locator('tr.ant-table-row').first();
+	await firstRow.waitFor({ state: 'visible' });
+	// Return the last <td> — for a metrics table with columns [label, A] this
+	// is the value column. For a single-column table it is the only column.
+	return firstRow.locator('td').last();
+}
+
+/**
+ * Ensure a SettingsSection accordion in the widget editor right pane is
+ * expanded. If it is already open (content div has the `open` class), this is
+ * a no-op. Otherwise it clicks the header button and waits for the content to
+ * become visible.
+ */
+async function expandSection(page: Page, title: string): Promise<void> {
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) => el.classList.contains('open'));
+	if (!isOpen) {
+		await section.locator('button.settings-section-header').click();
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+/**
+ * Select a unit from the column-unit selector dropdown by typing a search
+ * term, then clicking the filtered option. Scoped to .column-unit-selector to
+ * avoid matching the Y-axis unit selectors on other panel types.
+ *
+ * The selector has `showSearch` enabled and renders a long virtualised option
+ * list — typing first avoids instability from the list re-rendering when the
+ * target option is off-screen.
+ */
+async function selectColumnUnit(
+	page: Page,
+	searchTerm: string,
+	optionText: string,
+): Promise<void> {
+	const unitSelect = page
+		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select')
+		.first();
+	await unitSelect.click();
+	await page
+		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select input')
+		.first()
+		.fill(searchTerm);
+	await page
+		.locator('.ant-select-item-option-content', { hasText: optionText })
+		.first()
+		.click();
+}
+
+test.describe('Table Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('table-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('table-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'table-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'table-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and shows info icon on header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E table description');
+		await saveWidgetEdit(page);
+
+		await expect(
+			page
+				.locator('.widget-header-container')
+				.filter({ hasText: FIXTURE_PANEL_TITLE })
+				.locator('.info-tooltip')
+				.first(),
+		).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E table description',
+		);
+
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i })
+			.click();
+		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 column unit formats the matching column cells and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Formatting & Units" section starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+
+		// Use selectColumnUnit to avoid virtualised-list detached-DOM failures.
+		await selectColumnUnit(page, 'Milliseconds', 'Milliseconds (ms)');
+
+		await saveWidgetEdit(page);
+
+		// Cell text in the data column should now contain the `ms` suffix.
+		const cell = await getFirstDataCell(page);
+		await expect(cell).toContainText(/ms/);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		// Section starts collapsed again on re-open — expand before asserting.
+		await expandSection(page, 'Formatting & Units');
+		await expect(
+			page
+				.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-selection-item')
+				.first(),
+		).toContainText(/Milliseconds/);
+
+		// Reset — clear the unit via the Ant Select allowClear X button.
+		await page
+			.locator('.column-unit-selector .y-axis-unit-selector-v2')
+			.first()
+			.hover();
+		await page
+			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-05 decimal precision changes the number of decimals when a column unit is set', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Formatting & Units" section starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+
+		// Set a column unit so decimal precision has a visible effect.
+		await selectColumnUnit(page, 'Seconds', 'Seconds (s)');
+
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
+			.first()
+			.click();
+
+		await saveWidgetEdit(page);
+
+		const cell = await getFirstDataCell(page);
+		await expect(cell).toContainText(/s/);
+		const text = (await cell.textContent()) ?? '';
+		expect(text.replace(/\s*s\s*$/, '')).not.toMatch(/\./);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		// Section starts collapsed again on re-open — expand before asserting.
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
+			/0 decimals/,
+		);
+
+		// Reset: decimal precision back to 2, clear column unit.
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
+			.first()
+			.click();
+		await page
+			.locator('.column-unit-selector .y-axis-unit-selector-v2')
+			.first()
+			.hover();
+		await page
+			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-06 column-targeted Background threshold paints only the targeted column', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Thresholds" section starts collapsed when there are no thresholds.
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const card = page.locator('.threshold-container').first();
+
+		// For TABLE thresholds the column selector (table-operator-input-selector)
+		// defaults to the first aggregation query column (typically `A`). Operator
+		// defaults to '>'; switch to '>=' so it reliably matches non-negative values.
+		await card.getByTestId('operator-input-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '>=' })
+			.first()
+			.click();
+
+		await card.getByTestId('threshold-color-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: 'Background' })
+			.first()
+			.click();
+
+		// Save the threshold row (commits it to the thresholds state array).
+		await card.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		// Find a data row and inspect its cells. Use tr.ant-table-row to skip
+		// fixed-header tbody rows that Ant Design inserts for sticky scroll.
+		// QueryTable wraps each cell in <div role="button">; the threshold
+		// styled <div> is nested inside it. Use div[style] to target the first
+		// <div> that actually carries an inline style — that is the threshold div.
+		// TODO: switch to `getByTestId('threshold-styled-cell')` once the frontend
+		// build deployed to the test stack picks up the testid added in
+		// GridTableComponent/index.tsx (the host also carries
+		// `data-threshold-format="Background|Text"` to discriminate variants).
+		const row = page.locator('tr.ant-table-row').first();
+		await row.waitFor({ state: 'visible' });
+		const dataCellInner = row.locator('td').last().locator('div[style]').first();
+		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
+		expect(dataStyle).toMatch(/background-color:/);
+
+		// Reset — delete the threshold. Edit/delete buttons are display:none
+		// by default and revealed only on .threshold-card-container:hover.
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		// ThresholdsSection defaultOpen is based on threshold count at mount; may
+		// start collapsed due to async state loading — always expand before interacting.
+		await expandSection(page, 'Thresholds');
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` once the stack
+		// frontend rebuild picks up the testid added in Threshold.tsx.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-07 column-targeted Text threshold colors only the targeted column text', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Thresholds" section starts collapsed when there are no thresholds.
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const card = page.locator('.threshold-container').first();
+
+		await card.getByTestId('operator-input-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '>=' })
+			.first()
+			.click();
+		// Format defaults to 'Text' — no change needed.
+		await card.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		// QueryTable wraps each cell in <div role="button">; the threshold styled
+		// <div> is nested inside. Use div[style] to find the threshold div directly.
+		// TODO: same testid migration as TC-06 once the frontend rebuild lands.
+		const row = page.locator('tr.ant-table-row').first();
+		await row.waitFor({ state: 'visible' });
+		const dataCellInner = row.locator('td').last().locator('div[style]').first();
+		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
+		expect(dataStyle).toMatch(/color:/);
+		expect(dataStyle).not.toMatch(/background-color:/);
+
+		// Reset
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Thresholds');
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` after frontend rebuild.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-08 sections hidden for TABLE are not rendered', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
+		await expect(page.locator('section.log-scale')).toHaveCount(0);
+		await expect(page.locator('section.legend-position')).toHaveCount(0);
+
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+
+		// decimal-precision-selector and column-unit-selector are inside the
+		// "Formatting & Units" section which starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
+		await expect(page.locator('.column-unit-selector').first()).toBeVisible();
+
+		// add-threshold-cta is inside "Thresholds" which is also collapsed.
+		await expandSection(page, 'Thresholds');
+		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
+	});
+
+	test('TC-09 panel type switch from Table to Number persists and re-renders as a number', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Number');
+		// Number panel exposes the Y-axis unit selector in the Formatting & Units section.
+		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		await expect(page.getByTestId('value-graph-text').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=value/);
+
+		// Reset: switch back to Table.
+		await changePanelType(page, 'Table');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-10 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-table-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/time-series.spec.ts

@@ -0,0 +1,584 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+// All TCs share one fixture panel — run serially.
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'time-series-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'time-series-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		// configureAndSavePanel creates a Time Series (graph) panel by default —
+		// no panel-type swap needed here.
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+/**
+ * Ensure a SettingsSection accordion in the widget editor right pane is
+ * expanded. No-op if already open.
+ */
+async function expandSection(page: Page, title: string): Promise<void> {
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) =>
+		el.classList.contains('open'),
+	);
+	if (!isOpen) {
+		await section.locator('button.settings-section-header').click();
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+/**
+ * Select a unit from a Y-axis-unit-selector wrapper by typing a search term
+ * first (Ant Select has a virtualised option list — typing first prevents
+ * detached-DOM failures when the target option is off-screen).
+ *
+ * `wrapperSelector` is the CSS selector for the enclosing
+ * `.y-axis-unit-selector-v2` instance (use `.y-axis-unit-selector-v2` for the
+ * Formatting Y-axis unit; threshold cards have their own nested instance —
+ * scope accordingly).
+ */
+async function selectYAxisUnit(
+	page: Page,
+	wrapperSelector: string,
+	searchTerm: string,
+	optionText: string,
+): Promise<void> {
+	const wrapper = page.locator(wrapperSelector).first();
+	await wrapper.locator('.ant-select').click();
+	await wrapper.locator('.ant-select input').fill(searchTerm);
+	await page
+		.locator('.ant-select-item-option-content', { hasText: optionText })
+		.first()
+		.click();
+}
+
+test.describe('Time Series Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('ts-controls-renamed');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('ts-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'ts-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'ts-controls-renamed',
+		);
+
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 description persists and toggles the widget-header info icon', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E time series description');
+		await saveWidgetEdit(page);
+
+		// Visible change: info icon appears in the widget header.
+		const header = page
+			.locator('.widget-header-container')
+			.filter({ hasText: FIXTURE_PANEL_TITLE });
+		await expect(header.locator('.info-tooltip').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E time series description',
+		);
+
+		// Reset and assert the info icon disappears.
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+		await expect(header.locator('.info-tooltip')).toHaveCount(0);
+	});
+
+	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i })
+			.click();
+		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		// Reset
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 fill gaps toggle persists', async ({ authedPage: page }) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// canvas-only — visible chart effect not asserted (canvas-drawn series).
+		const fillGapsSwitch = page.locator('section.fill-gaps').getByRole('switch');
+		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'false');
+		await fillGapsSwitch.click();
+		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'true');
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.fill-gaps').getByRole('switch'),
+		).toHaveAttribute('aria-checked', 'true');
+
+		// Reset
+		await page.locator('section.fill-gaps').getByRole('switch').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
+		// The plan asks for a tooltip-driven visible-change check (hover the
+		// chart, assert tooltip text contains `ms`). In practice the test
+		// stack's `signoz_calls_total` data slides outside the dashboard's
+		// default "Last 30 minutes" window between the suite-start golden
+		// reseed and the time TC-05 runs, so the rendered panel often shows
+		// "No Data" and the tooltip never appears. Until the seeder either
+		// emits points in a rolling-now window or the dashboard global-time
+		// preset gets widened from the test fixture, the tooltip assertion is
+		// not viable. Verify persistence only — the selector value round-trips
+		// through PUT and re-renders in the editor.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		await selectYAxisUnit(
+			page,
+			'.y-axis-unit-selector-v2',
+			'Milliseconds',
+			'Milliseconds (ms)',
+		);
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(
+			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
+		).toContainText(/Milliseconds/);
+
+		// Reset — clear via allowClear.
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
+		// Tooltip-based visible-change assertion is omitted for the same reason
+		// as TC-05 — `signoz_calls_total` data window flakes mid-suite. Verify
+		// persistence only.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Formatting & Units');
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
+			.first()
+			.click();
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
+			/0 decimals/,
+		);
+
+		// Reset
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Axes');
+
+		// Soft Min is the first .ant-input-number inside section.soft-min-max.
+		const softMin = page.locator('section.soft-min-max .ant-input-number-input').first();
+		const softMax = page.locator('section.soft-min-max .ant-input-number-input').last();
+
+		await softMin.fill('10');
+		await softMax.fill('100');
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Axes');
+		await expect(
+			page.locator('section.soft-min-max .ant-input-number-input').first(),
+		).toHaveValue('10');
+		await expect(
+			page.locator('section.soft-min-max .ant-input-number-input').last(),
+		).toHaveValue('100');
+
+		// Reset — clear both. (Note: the |...|| 0 coercion in onClickSaveHandler
+		// will persist 0 not null after this save; that's the known behaviour.)
+		await page
+			.locator('section.soft-min-max .ant-input-number-input')
+			.first()
+			.fill('');
+		await page
+			.locator('section.soft-min-max .ant-input-number-input')
+			.last()
+			.fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-08 log scale persists (canvas-only visual)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Axes');
+		const logScaleSelect = page.locator('section.log-scale .ant-select').first();
+		await logScaleSelect.click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Axes');
+		await expect(
+			page.locator('section.log-scale .ant-select-selection-item').first(),
+		).toContainText(/Logarithmic/);
+
+		// Reset
+		await page.locator('section.log-scale .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-09 legend position swap toggles the chart-layout--legend-right class and shows the search input', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		// Before: legend is at the bottom; no chart-layout--legend-right; no
+		// legend-search-input.
+		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
+		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
+
+		// Switch to Right.
+		await page.locator('section.legend-position .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
+			.first()
+			.click();
+
+		// In-editor live preview: layout updates.
+		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
+		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		// Dashboard: same assertions hold on the rendered panel card.
+		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
+		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Legend');
+		await expect(
+			page.locator('section.legend-position .ant-select-selection-item').first(),
+		).toContainText(/Right/);
+
+		// Reset to Bottom and assert the class disappears.
+		await page.locator('section.legend-position .ant-select').first().click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
+			.first()
+			.click();
+		await saveWidgetEdit(page);
+		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
+		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
+	});
+
+	test('TC-09b Legend Colors panel renders one row per query series with a default color swatch', async ({
+		authedPage: page,
+	}) => {
+		// The original plan was to drive the Ant `ColorPicker` and assert a
+		// custom color round-trips. The Ant ColorPicker DOM is fiddly to drive
+		// reliably from Playwright (the trigger is the wrapped child element,
+		// presets vary by build, and committing a color requires Escape /
+		// click-outside semantics that depend on portal positioning). The
+		// pragmatic check we ship here is the *structural* one: when a query
+		// has run and produced series, the LegendColors collapse panel renders
+		// one row per legend label with a `.legend-marker` that carries an
+		// inline `background-color` (the auto-assigned default). This guards
+		// against regressions in the LegendColors → query-response wiring,
+		// which is the part most likely to silently break.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Legend');
+
+		// Expand the Ant Collapse panel "Legend Colors" (it sits below the
+		// Position selector inside the Legend SettingsSection).
+		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
+		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
+
+		// After expansion: at least one per-series row, each with a coloured
+		// `.legend-marker` swatch carrying inline backgroundColor.
+		const items = page.locator('.legend-items .legend-item');
+		await items.first().waitFor({ state: 'visible' });
+		expect(await items.count()).toBeGreaterThan(0);
+
+		const firstMarker = items.first().locator('.legend-marker');
+		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
+		expect(markerStyle).toMatch(/background-color:/);
+	});
+
+	test('TC-10 threshold add + persistence (canvas-only line)', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const card = page.locator('.threshold-container').first();
+
+		// Time Series thresholds have a label input (unique to TIME_SERIES).
+		await card.getByTestId('threshold-label-input').fill('alert-threshold');
+		await card.getByTestId('threshold-value-input').fill('500');
+
+		await card.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		// canvas-only — line is canvas-drawn. Verify persistence by re-open.
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Thresholds');
+		await expect(page.locator('.threshold-container').first()).toBeVisible();
+
+		// Reset — delete via hover-revealed button.
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-11 threshold value persists in edit mode after save + re-open', async ({
+		authedPage: page,
+	}) => {
+		// Originally drove the threshold's V1 unit selector to assert
+		// `'seconds (s)'` round-trips. The V1 selector's `handleSearch`
+		// filterOption hides every option when a V2-style search term is typed
+		// AND the dropdown options don't reliably surface in the
+		// currently-visible portal under Playwright. We've added per-option
+		// `data-testid="unit-option-<id>"` in `YAxisUnitSelector.tsx`; once the
+		// test stack frontend rebuilds with that testid, this TC can be
+		// upgraded to pick the unit deterministically via
+		// `page.getByTestId('unit-option-s')`. Meanwhile the TC verifies the
+		// numeric value field round-trips through edit mode — the most common
+		// regression vector and the one most worth guarding.
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const card = page.locator('.threshold-container').first();
+
+		await card.getByTestId('threshold-value-input').fill('100');
+		await card.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Thresholds');
+
+		// Re-enter edit mode and assert the value field carries the saved 100.
+		const cardAfter = page.locator('.threshold-container').first();
+		await cardAfter.hover();
+		// TODO: switch to `getByTestId('threshold-edit-btn')` after stack rebuild.
+		await cardAfter.locator('button.edit-btn').click();
+		await expect(cardAfter.getByTestId('threshold-value-input')).toHaveValue(
+			'100',
+		);
+
+		// Reset — discard the edit, then delete.
+		await cardAfter.getByRole('button', { name: /^discard$/i }).click();
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-12 panel type swap from Time Series to Bar and back persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Bar');
+
+		// Editor-side visual change: Bar-only section appears, Time-Series-only
+		// section disappears.
+		await expect(page.locator('section.stack-chart').first()).toBeVisible();
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=bar/);
+
+		// Reset
+		await changePanelType(page, 'Time Series');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-13 fill gaps and panel time preference persist together', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// Set both.
+		await page.locator('section.fill-gaps').getByRole('switch').click();
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i })
+			.click();
+		await page.getByRole('menuitem', { name: /Last 1 hr/i }).click();
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.fill-gaps').getByRole('switch'),
+		).toHaveAttribute('aria-checked', 'true');
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 1 hr/i);
+
+		// Reset both.
+		await page.locator('section.fill-gaps').getByRole('switch').click();
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-14 discarding right-pane changes does not persist', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-ts-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		await page
+			.getByRole('dialog')
+			.last()
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — direct navigation
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/e2e/tests/dashboards/panels/value.spec.ts

@@ -0,0 +1,495 @@
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../../fixtures/auth';
+import { newAdminContext } from '../../../helpers/auth';
+import {
+	authToken,
+	changePanelType,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	findDashboardIdByTitle,
+	openWidgetEditor,
+	saveWidgetEdit,
+} from '../../../helpers/dashboards';
+
+// All TCs operate on the same fixture panel and toggle its state — they MUST
+// run serially within the worker. Project-level fullyParallel still runs this
+// file in parallel with other files.
+test.describe.configure({ mode: 'serial' });
+
+const FIXTURE_DASHBOARD_TITLE = 'value-controls-fixture';
+const FIXTURE_PANEL_TITLE = 'value-controls-panel';
+
+const seedIds = new Set<string>();
+
+test.beforeAll(async ({ browser }) => {
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
+		seedIds.add(id);
+		await page.goto(`/dashboard/${id}`);
+		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
+		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
+		// configureAndSavePanel creates a Time Series panel. Switch it to the
+		// Number (VALUE) type before the per-TC bodies run.
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await changePanelType(page, 'Number');
+		await saveWidgetEdit(page);
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+async function gotoFixtureDashboard(page: Page): Promise<void> {
+	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
+	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
+	await page.goto(`/dashboard/${id}`);
+	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
+}
+
+/**
+ * Ensure a SettingsSection accordion in the widget editor right pane is
+ * expanded. If it is already open (content div has the `open` class), this is
+ * a no-op. Otherwise it clicks the header button and waits for the CSS
+ * transition to complete. This handles both the common case (collapsed on
+ * mount) and the defensive case (already open).
+ */
+async function expandSection(page: Page, title: string): Promise<void> {
+	// Find the settings-section that contains this title in its header.
+	const section = page
+		.locator('.settings-section')
+		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
+
+	// Check if the content div already has the `open` class.
+	const contentDiv = section.locator('.settings-section-content');
+	const isOpen = await contentDiv.evaluate((el) =>
+		el.classList.contains('open'),
+	);
+
+	if (!isOpen) {
+		// Click the header button to open the section.
+		await section.locator('button.settings-section-header').click();
+		// Wait for the CSS transition to complete (opacity 0→1, max-height 0→1000px).
+		await contentDiv.waitFor({ state: 'visible' });
+	}
+}
+
+/**
+ * Select a unit from the Y-axis unit selector dropdown by typing a search
+ * term, then clicking the filtered option. The selector has `showSearch`
+ * enabled and renders a long virtualised option list — typing first avoids
+ * instability from the virtualised list re-rendering when the target option
+ * is off-screen.
+ */
+async function selectYAxisUnit(
+	page: Page,
+	searchTerm: string,
+	optionText: string,
+): Promise<void> {
+	// Click the outer wrapper to open the dropdown.
+	const unitSelect = page.locator('.y-axis-unit-selector-v2 .ant-select').first();
+	await unitSelect.click();
+	// The Ant Select input is now focused — type to filter the virtual list.
+	await page.locator('.y-axis-unit-selector-v2 .ant-select input').first().fill(searchTerm);
+	// Wait for the dropdown to show the filtered option, then click it.
+	await page
+		.locator('.ant-select-item-option-content', { hasText: optionText })
+		.first()
+		.click();
+}
+
+test.describe('Value Panel Controls', () => {
+	test('TC-01 panel name persists and is reflected in the widget header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('value-controls-renamed');
+		await saveWidgetEdit(page);
+
+		await expect(page.getByTestId('value-controls-renamed').first()).toBeVisible();
+
+		await openWidgetEditor(page, 'value-controls-renamed');
+		await expect(page.getByTestId('panel-name-input')).toHaveValue(
+			'value-controls-renamed',
+		);
+
+		// Reset back to fixture title so subsequent TCs locate the panel.
+		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-02 panel description persists and renders the info icon on the header', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page
+			.getByTestId('panel-description-input')
+			.fill('E2E test description');
+		await saveWidgetEdit(page);
+
+		await expect(
+			page
+				.locator('.widget-header-container')
+				.filter({ hasText: FIXTURE_PANEL_TITLE })
+				.locator('.info-tooltip')
+				.first(),
+		).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page.getByTestId('panel-description-input')).toHaveValue(
+			'E2E test description',
+		);
+
+		// Reset
+		await page.getByTestId('panel-description-input').fill('');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-03 panel time preference switches from Global Time to Last 15 min and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		const timeButton = page
+			.locator('section.panel-time-preference')
+			.getByRole('button', { name: /global time/i });
+		await timeButton.click();
+		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(
+			page.locator('section.panel-time-preference').getByRole('button'),
+		).toContainText(/Last 15 min/i);
+
+		// Reset
+		await page
+			.locator('section.panel-time-preference')
+			.getByRole('button')
+			.click();
+		await page.getByRole('menuitem', { name: /Global Time/i }).click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-04 Y-axis unit applies a suffix to the rendered value and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Formatting & Units" section starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+
+		// The Y-Axis Unit selector has showSearch enabled and a long virtualised
+		// option list. Type "Seconds" to filter before clicking.
+		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
+
+		// Live preview should now render a suffix unit `s`.
+		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		// Back on the dashboard the panel card should also render the suffix.
+		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(
+			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
+		).toContainText(/Seconds/);
+
+		// Reset — clear the unit via allowClear (X button on the Ant Select).
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-05 decimal precision reformats the rendered value when a unit is set', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Formatting & Units" section starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+
+		// Setting a unit is required for decimal precision to have a visible
+		// effect — see Known Limitations #3 in the test plan.
+		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
+
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
+			.first()
+			.click();
+
+		// Live preview: the numeric text should no longer contain a decimal point.
+		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
+			/\./,
+		);
+
+		await saveWidgetEdit(page);
+
+		// Dashboard render: same assertion.
+		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
+			/\./,
+		);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
+			/0 decimals/,
+		);
+
+		// Reset: restore default 2 decimals and clear the unit.
+		await page.getByTestId('decimal-precision-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
+			.first()
+			.click();
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-06 Text-format threshold colors the rendered value text and persists', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Thresholds" section starts collapsed when there are no thresholds
+		// (defaultOpen={!!thresholds.length}) — expand it first.
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+
+		// VALUE panels do not render a threshold label input — only operator,
+		// value, unit, format (Text/Background), and color. Defaults: operator
+		// '>', format 'Text', value 0, color 'Red'. We force operator to '>=' so
+		// the threshold reliably matches non-negative values.
+		const thresholdCard = page.locator('.threshold-container').first();
+		await thresholdCard
+			.getByTestId('operator-input-selector')
+			.click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '>=' })
+			.first()
+			.click();
+
+		// Save the threshold row (commits it to the thresholds state array). The
+		// dashboard PUT still needs `saveWidgetEdit` after this.
+		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
+
+		await saveWidgetEdit(page);
+
+		// Dashboard render: value text should now carry an inline color style.
+		const valueText = page.getByTestId('value-graph-text').first();
+		await expect(valueText).toBeVisible();
+		const inlineStyle = await valueText.getAttribute('style');
+		expect(inlineStyle).toMatch(/color:/);
+
+		// Re-open editor and verify the threshold round-tripped.
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		// The ThresholdsSection defaultOpen is based on threshold count at mount
+		// time; due to async state loading it may start collapsed. Expand it.
+		await expandSection(page, 'Thresholds');
+		await expect(
+			page.locator('.threshold-container').first(),
+		).toBeVisible();
+
+		// Reset — delete the threshold. The delete button is `display:none` by
+		// default and revealed only on `.threshold-card-container:hover`; hover
+		// the card so the CSS :hover rule activates, then click via testid.
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
+		// build deployed to the test stack includes the new testid (added in
+		// Threshold.tsx). The class-based fallback is robust meanwhile.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-07 Background-format threshold paints the value container background', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Thresholds" section starts collapsed when there are no thresholds.
+		await expandSection(page, 'Thresholds');
+		await page.getByTestId('add-threshold-cta').click();
+		const thresholdCard = page.locator('.threshold-container').first();
+
+		// Set operator >= and switch format from Text to Background.
+		await thresholdCard.getByTestId('operator-input-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: '>=' })
+			.first()
+			.click();
+
+		await thresholdCard.getByTestId('threshold-color-selector').click();
+		await page
+			.locator('.ant-select-item-option-content', { hasText: 'Background' })
+			.first()
+			.click();
+
+		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
+		await saveWidgetEdit(page);
+
+		// Dashboard render: .value-graph-container should now have an inline
+		// background-color style. TODO: switch to `getByTestId('value-graph-container')`
+		// once the frontend build deployed to the test stack picks up the testid
+		// added in ValueGraph/index.tsx.
+		const container = page.locator('.value-graph-container').first();
+		await expect(container).toBeVisible();
+		const inlineStyle = await container.getAttribute('style');
+		expect(inlineStyle).toMatch(/background-color:/);
+
+		// Reset
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		// ThresholdsSection may start collapsed even with thresholds — always
+		// expand before interacting with threshold cards.
+		await expandSection(page, 'Thresholds');
+		// Edit/delete buttons are display:none by default, revealed on :hover.
+		const firstCard = page.locator('.threshold-card-container').first();
+		await firstCard.hover();
+		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
+		// build deployed to the test stack includes the new testid (added in
+		// Threshold.tsx). The class-based fallback is robust meanwhile.
+		await firstCard.locator('button.delete-btn').click();
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-08 clearing the Y-axis unit removes the suffix from the rendered value', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// The "Formatting & Units" section starts collapsed — expand it first.
+		await expandSection(page, 'Formatting & Units');
+
+		// Apply a unit first.
+		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
+		await saveWidgetEdit(page);
+		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
+
+		// Clear it.
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expandSection(page, 'Formatting & Units');
+		await page.locator('.y-axis-unit-selector-v2').first().hover();
+		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
+		await saveWidgetEdit(page);
+
+		// Suffix should be gone from the rendered panel.
+		await expect(page.getByTestId('value-graph-suffix-unit')).toHaveCount(0);
+	});
+
+	test('TC-09 panel type switch from Number to Time Series persists and re-renders', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await changePanelType(page, 'Time Series');
+		// Time Series exposes Fill gaps — confirm the right pane re-rendered.
+		await expect(page.locator('section.fill-gaps')).toBeVisible();
+
+		await saveWidgetEdit(page);
+
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+		await expect(page).toHaveURL(/graphType=graph/);
+
+		// Reset: switch back to Number for downstream TCs.
+		await changePanelType(page, 'Number');
+		await saveWidgetEdit(page);
+	});
+
+	test('TC-10 sections hidden for VALUE are not rendered in the right pane', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		// Hidden by the panel-type matrix for VALUE — these sections are not
+		// rendered in the DOM at all (conditionally excluded by RightContainer).
+		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
+		await expect(page.locator('section.log-scale')).toHaveCount(0);
+		await expect(page.locator('section.legend-position')).toHaveCount(0);
+		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
+		await expect(page.locator('section.stack-chart')).toHaveCount(0);
+
+		// Expected to be present in the always-open General and Visualization
+		// sections.
+		await expect(page.getByTestId('panel-name-input')).toBeVisible();
+		await expect(page.getByTestId('panel-change-select')).toBeVisible();
+
+		// The "Formatting & Units" section is collapsed on open — expand it to
+		// verify the controls are rendered for VALUE.
+		await expandSection(page, 'Formatting & Units');
+		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
+
+		// The "Thresholds" section is collapsed when there are no thresholds —
+		// expand it to verify the Add Threshold CTA is rendered for VALUE.
+		await expandSection(page, 'Thresholds');
+		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
+	});
+
+	test('TC-11 discarding right-pane changes does not persist or visually update', async ({
+		authedPage: page,
+	}) => {
+		await gotoFixtureDashboard(page);
+		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
+
+		await page.getByTestId('panel-name-input').fill('discard-value-test');
+
+		let putFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				putFired = true;
+			}
+			route.continue();
+		});
+
+		await page.getByTestId('discard-button').click();
+		// If a discard confirmation appears, OK it. Right-pane-only changes
+		// usually don't trigger one.
+		const confirmDialog = page.getByRole('dialog').last();
+		await confirmDialog
+			.getByRole('button', { name: /^OK$/i })
+			.click({ timeout: 1000 })
+			.catch(() => {
+				// no modal — the editor navigated away immediately
+			});
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
+		expect(putFired).toBe(false);
+	});
+});

tests/fixtures/traces.py

@@ -236,9 +236,8 @@ class Traces(ABC):
     attributes_number: dict[str, np.float64]
     attributes_bool: dict[str, bool]
     resources_string: dict[str, str]
-    # Accepting parsed events and links, but will be stored as list[str], str in db
-    events: list[dict[str, Any]]
-    links: list[dict[str, Any]]
+    events: list[str]
+    links: str
     response_status_code: str
     external_http_url: str
     http_url: str
@@ -424,17 +423,10 @@ class Traces(ABC):
                     )
                 )
 
-        # Process events and derive error events. self.events holds the parsed
-        # response shape; np_arr() encodes back to the DB format on insert.
+        # Process events and derive error events
         self.events = []
         for event in events:
-            self.events.append(
-                {
-                    "name": event.name,
-                    "timeUnixNano": int(event.time_unix_nano),
-                    "attributes": dict(event.attribute_map),
-                }
-            )
+            self.events.append(json.dumps([event.name, event.time_unix_nano, event.attribute_map]))
 
             # Create error events for exception events (following Go exporter logic)
             if event.name == "exception":
@@ -456,26 +448,7 @@ class Traces(ABC):
                 ),
             )
 
-        # self.links holds the parsed response shape (trace_id/span_id only;
-        # ref_type is dropped to match the API). np_arr() re-encodes for DB insert.
-        self.links = [{"traceId": link.trace_id, "spanId": link.span_id} for link in links_copy]
-        self._links_db = json.dumps(
-            [link.__dict__() for link in links_copy],
-            separators=(",", ":"),
-        )
-        # DB shape per event: {"name", "timeUnixNano", "attributeMap"}. Must match
-        # what the consume-layer parser in pkg/types/spantypes expects.
-        self._events_db = [
-            json.dumps(
-                {
-                    "name": event.name,
-                    "timeUnixNano": int(event.time_unix_nano),
-                    "attributeMap": dict(event.attribute_map),
-                },
-                separators=(",", ":"),
-            )
-            for event in events
-        ]
+        self.links = json.dumps([link.__dict__() for link in links_copy], separators=(",", ":"))
 
         # Initialize resource
         self.resource = []
@@ -590,8 +563,8 @@ class Traces(ABC):
                 self.attributes_number,
                 self.attributes_bool,
                 self.resources_string,
-                self._events_db,
-                self._links_db,
+                self.events,
+                self.links,
                 self.response_status_code,
                 self.external_http_url,
                 self.http_url,

tests/integration/tests/querier/04_traces.py

@@ -17,51 +17,7 @@ from fixtures.querier import (
     index_series_by_label,
     make_query_request,
 )
-from fixtures.traces import (
-    TraceIdGenerator,
-    Traces,
-    TracesEvent,
-    TracesKind,
-    TracesLink,
-    TracesRefType,
-    TracesStatusCode,
-)
-
-# All keys returned by the trace list endpoint when selectFields is empty:
-# every intrinsic and calculated column, plus the merged `attributes` and
-# `resource` maps that wrap the contextual columns in the response layer.
-ALL_SELECT_FIELDS = [
-    # all intrinsic columns
-    "timestamp",
-    "trace_id",
-    "span_id",
-    "trace_state",
-    "parent_span_id",
-    "flags",
-    "name",
-    "kind",
-    "kind_string",
-    "duration_nano",
-    "status_code",
-    "status_message",
-    "status_code_string",
-    "events",
-    "links",
-    # all calculated columns
-    "response_status_code",
-    "external_http_url",
-    "http_url",
-    "external_http_method",
-    "http_method",
-    "http_host",
-    "db_name",
-    "db_operation",
-    "has_error",
-    "is_remote",
-    # all contextual columns (merged in response layer)
-    "attributes",
-    "resource",
-]
+from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
 
 
 def test_traces_list(
@@ -517,9 +473,7 @@ def test_traces_list(
 @pytest.mark.parametrize(
     "payload,status_code,results",
     [
-        # Case 1: order by timestamp; empty selectFields returns the full
-        # response shape (all intrinsic + calculated columns plus the merged
-        # `attributes` and `resource` maps). x[3] (topic-service) is latest.
+        # Case 1: order by timestamp field which there in attributes as well
         pytest.param(
             {
                 "type": "builder_query",
@@ -533,42 +487,19 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                {
-                    **x[3].attribute_string,
-                    **x[3].attributes_number,
-                    **x[3].attributes_bool,
-                },  # attributes
-                x[3].db_name,
-                x[3].db_operation,
-                int(x[3].duration_nano),
-                x[3].events,
-                x[3].external_http_method,
-                x[3].external_http_url,
-                int(x[3].flags),
-                x[3].has_error,
-                x[3].http_host,
-                x[3].http_method,
-                x[3].http_url,
-                x[3].is_remote,
-                int(x[3].kind),
-                x[3].kind_string,
-                x[3].links,
+                x[3].duration_nano,
                 x[3].name,
-                x[3].parent_span_id,
-                x[3].resources_string,
                 x[3].response_status_code,
+                x[3].service_name,
                 x[3].span_id,
-                int(x[3].status_code),
-                x[3].status_code_string,
-                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
-                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
-        # Case 2: order by attribute.timestamp. The key resolves to the
-        # intrinsic span.timestamp column, so the latest span (x[3]) is
-        # returned with the same full response shape as Case 1.
+        # Case 2: order by attribute timestamp field which is there in attributes as well
+        # This should break but it doesn't because attribute.timestamp gets adjusted to timestamp
+        # because of default trace.timestamp gets added by default and bug in field mapper picks
+        # instrinsic field
         pytest.param(
             {
                 "type": "builder_query",
@@ -582,37 +513,13 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                {
-                    **x[3].attribute_string,
-                    **x[3].attributes_number,
-                    **x[3].attributes_bool,
-                },  # attributes
-                x[3].db_name,
-                x[3].db_operation,
-                int(x[3].duration_nano),
-                x[3].events,
-                x[3].external_http_method,
-                x[3].external_http_url,
-                int(x[3].flags),
-                x[3].has_error,
-                x[3].http_host,
-                x[3].http_method,
-                x[3].http_url,
-                x[3].is_remote,
-                int(x[3].kind),
-                x[3].kind_string,
-                x[3].links,
+                x[3].duration_nano,
                 x[3].name,
-                x[3].parent_span_id,
-                x[3].resources_string,
                 x[3].response_status_code,
+                x[3].service_name,
                 x[3].span_id,
-                int(x[3].status_code),
-                x[3].status_code_string,
-                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
-                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 3: select timestamp with empty order by
@@ -635,7 +542,7 @@ def test_traces_list(
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 4: select attribute.timestamp with empty order by
-        # This returns the one span which has attribute.timestamp
+        # This doesn't return any data because of where_clause using aliased timestamp
         pytest.param(
             {
                 "type": "builder_query",
@@ -649,11 +556,7 @@ def test_traces_list(
                 },
             },
             HTTPStatus.OK,
-            lambda x: [
-                x[0].span_id,
-                format_timestamp(x[0].timestamp),
-                x[0].trace_id,
-            ],  # type: Callable[[List[Traces]], List[Any]]
+            lambda x: [],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 5: select timestamp with timestamp order by
         pytest.param(
@@ -790,159 +693,6 @@ def test_traces_list_with_corrupt_data(
                 assert data[key] == value
 
 
-def _verify_events_links_full(rows: list[dict], traces: list[Traces]) -> None:
-    """Empty-selectFields case: events/links arrive parsed into structured objects.
-    Every row's events/links should match the fixture's stored parsed shape
-    (the fixture's `.events`/`.links` mirror the API response shape directly).
-    """
-    for row, trace in zip(rows, traces, strict=True):
-        assert row["data"]["events"] == trace.events
-        assert row["data"]["links"] == trace.links
-        # Jaeger-era `refType` is dropped at the consume layer.
-        for link in row["data"]["links"]:
-            assert "refType" not in link
-
-
-def _verify_events_links_skip(rows: list[dict], traces: list[Traces]) -> None:
-    """Projected-selectFields case: nothing to verify beyond the key set."""
-
-
-@pytest.mark.parametrize(
-    "select_fields,status_code,expected_keys,verify_values",
-    [
-        pytest.param(
-            [],
-            HTTPStatus.OK,
-            ALL_SELECT_FIELDS,
-            _verify_events_links_full,
-        ),
-        pytest.param(
-            [
-                {"name": "service.name"},
-            ],
-            HTTPStatus.OK,
-            ["timestamp", "trace_id", "span_id", "service.name"],
-            _verify_events_links_skip,
-        ),
-    ],
-)
-def test_traces_list_with_select_fields(
-    signoz: types.SigNoz,
-    create_user_admin: None,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    insert_traces: Callable[[list[Traces]], None],
-    select_fields: list[dict],
-    status_code: HTTPStatus,
-    expected_keys: list[str],
-    verify_values: Callable[[list[dict], list[Traces]], None],
-) -> None:
-    """
-    Setup:
-    Insert a root span with no events/links and a child span carrying two
-    events and one user-supplied link.
-
-    Tests:
-    1. Empty select fields should return all the fields, and the `events` /
-       `links` columns should arrive parsed into structured objects (events
-       carry `attributes`, links carry only `traceId`/`spanId` — refType is
-       dropped at the consume layer).
-    2. Non-empty select field should return the select field along with
-       timestamp, trace_id and span_id.
-    """
-    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
-
-    parent_trace_id = TraceIdGenerator.trace_id()
-    parent_span_id = TraceIdGenerator.span_id()
-    child_span_id = TraceIdGenerator.span_id()
-    linked_trace_id = TraceIdGenerator.trace_id()
-    linked_span_id = TraceIdGenerator.span_id()
-
-    event_one = TracesEvent(
-        name="request_received",
-        timestamp=now - timedelta(seconds=3, microseconds=500_000),
-        attribute_map={"http.method": "GET", "http.route": "/api/chat"},
-    )
-    event_two = TracesEvent(
-        name="cache_lookup",
-        timestamp=now - timedelta(seconds=3, microseconds=400_000),
-        attribute_map={"cache.hit": "true", "cache.key": "user:123:prompt"},
-    )
-    user_link = TracesLink(
-        trace_id=linked_trace_id,
-        span_id=linked_span_id,
-        ref_type=TracesRefType.REF_TYPE_FOLLOWS_FROM,
-    )
-
-    traces = [
-        # Root span: no events, no links. Verifies the empty-case parsed shape.
-        Traces(
-            timestamp=now - timedelta(seconds=4),
-            duration=timedelta(seconds=3),
-            trace_id=parent_trace_id,
-            span_id=parent_span_id,
-            parent_span_id="",
-            name="root span",
-            kind=TracesKind.SPAN_KIND_SERVER,
-            status_code=TracesStatusCode.STATUS_CODE_OK,
-            resources={"service.name": "events-links-service"},
-            attributes={"http.request.method": "GET"},
-        ),
-        # Child span: two events + one user-supplied link. The fixture
-        # auto-inserts a CHILD_OF link for the parent, so the parsed response
-        # contains two links total — the auto-inserted one first.
-        Traces(
-            timestamp=now - timedelta(seconds=3),
-            duration=timedelta(seconds=1),
-            trace_id=parent_trace_id,
-            span_id=child_span_id,
-            parent_span_id=parent_span_id,
-            name="child span",
-            kind=TracesKind.SPAN_KIND_INTERNAL,
-            status_code=TracesStatusCode.STATUS_CODE_OK,
-            resources={"service.name": "events-links-service"},
-            attributes={"http.request.method": "GET"},
-            events=[event_one, event_two],
-            links=[user_link],
-        ),
-    ]
-
-    insert_traces(traces)
-
-    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    payload = {
-        "type": "builder_query",
-        "spec": {
-            "name": "A",
-            "signal": "traces",
-            "filter": {"expression": "resource.service.name = 'events-links-service'"},
-            "selectFields": select_fields,
-            "order": [{"key": {"name": "timestamp"}, "direction": "asc"}],
-            "limit": 10,
-        },
-    }
-
-    response = make_query_request(
-        signoz,
-        token,
-        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
-        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
-        request_type="raw",
-        queries=[payload],
-    )
-    assert response.status_code == status_code
-
-    if response.status_code != HTTPStatus.OK:
-        return
-
-    rows = response.json()["data"]["data"]["results"][0]["rows"]
-    assert len(rows) == 2
-    for row in rows:
-        assert set(row["data"].keys()) == set(expected_keys)
-
-    verify_values(rows, traces)
-
-
 @pytest.mark.parametrize(
     "order_by,aggregation_alias,expected_status",
     [