fix: fix old attribute usage in tests

external_http_url stores the hostname but the name
is confusing, so switching to http_host

.gitignore

@@ -1,8 +1,11 @@
 
 node_modules
 
+# editor
 .vscode
 !.vscode/settings.json
+.zed
+.idea
 
 deploy/docker/environment_tiny/common_test
 frontend/node_modules
@@ -31,8 +34,6 @@ frontend/yarn-debug.log*
 frontend/yarn-error.log*
 frontend/src/constants/env.ts
 
-.idea
-
 **/build
 **/storage
 **/locust-scripts/__pycache__/

docs/earlier-thoughts/perses-feasibility-analysis.md

@@ -1,436 +0,0 @@
-# Feasibility Analysis: Adopting Perses.dev Specification for SigNoz Dashboards
-
-## Executive Summary
-
-SigNoz's dashboard JSON has been a free-form `map[string]interface{}` with no schema enforcement. This document evaluates adopting [Perses.dev](https://perses.dev/) (a CNCF Sandbox project) as a structured dashboard specification. The conclusion is that **wholesale adoption is not recommended**, but several Perses design patterns should be borrowed into a SigNoz-native v6 dashboard schema.
-
----
-
-## 1. Current State: SigNoz Dashboard JSON
-
-### 1.1 Structure Overview
-
-The dashboard is stored as `StorableDashboardData = map[string]interface{}` in Go (see `pkg/types/dashboardtypes/dashboard.go`). Top-level fields:
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | `string` | Dashboard display name |
-| `description` | `string` | Dashboard description text |
-| `tags` | `string[]` | Categorization tags (e.g., `["redis", "database"]`) |
-| `image` | `string` | Base64 or URL-encoded SVG for dashboard icon/thumbnail |
-| `version` | `string` | Schema version: `"v4"` or `"v5"` |
-| `layout` | `Layout[]` | React-grid-layout positioning for each widget |
-| `panelMap` | `Record<string, {widgets: Layout[], collapsed: boolean}>` | Groups panels under row widgets for collapsible sections |
-| `widgets` | `Widget[]` | Array of panel/widget definitions |
-| `variables` | `Record<string, IDashboardVariable>` | Dashboard variable definitions |
-| `uploadedGrafana` | `boolean` | Flag indicating if imported from Grafana |
-
-### 1.2 Panel/Widget Types
-
-| Panel Type | Constant | API Request Type |
-|-----------|----------|-----------------|
-| Time Series | `graph` | `time_series` |
-| Bar Chart | `bar` | `time_series` |
-| Table | `table` | `scalar` |
-| Pie Chart | `pie` | `scalar` |
-| Single Value | `value` | `scalar` |
-| List/Logs | `list` | `raw` |
-| Trace | `trace` | `trace` |
-| Histogram | `histogram` | `distribution` |
-| Row (group header) | `row` | N/A |
-
-### 1.3 Query System
-
-Each widget carries a `query` object with three modes simultaneously:
-
-```json
-{
-  "queryType": "builder|clickhouse_sql|promql",
-  "builder": {
-    "queryData": [],
-    "queryFormulas": []
-  },
-  "clickhouse_sql": [],
-  "promql": []
-}
-```
-
-Only `queryType` determines which mode is active; the other sections carry empty placeholder defaults.
-
-#### Builder Query v4 (legacy, widely used)
-- `aggregateOperator` + `aggregateAttribute` as separate fields
-- `filters` with structured `items[]` containing key objects with synthetic IDs
-- `having: []` as array
-
-#### Builder Query v5 (newer, integration dashboards)
-- `aggregations[]` array with `metricName`, `timeAggregation`, `spaceAggregation` combined
-- `filter` with expression string (e.g., `"host_name IN $host_name"`)
-- `having: {expression: ""}` as object
-
-### 1.4 Query Range V5 API
-
-The V5 execution API wraps queries in a `QueryEnvelope` discriminated union:
-
-```
-QueryEnvelope = {type: QueryType, spec: any}
-```
-
-Seven query types: `builder_query`, `builder_formula`, `builder_sub_query`, `builder_join`, `builder_trace_operator`, `promql`, `clickhouse_sql`
-
-Six request types: `scalar`, `time_series`, `raw`, `raw_stream`, `trace`, `distribution`
-
-Three signals with distinct aggregation models:
-- **Metrics**: `metricName + temporality + timeAggregation + spaceAggregation`
-- **Traces**: Expression-based (e.g., `"COUNT()"`, `"p99(duration_nano)"`)
-- **Logs**: Expression-based (e.g., `"COUNT()"`, `"count_distinct(host.name)"`)
-
-17 post-processing functions, server-side formula evaluation, SQL-style joins, and trace span relationship operators.
-
-### 1.5 Documented Pain Points
-
-1. **`StorableDashboardData` is `map[string]interface{}`**: All nested property access requires manual type assertions with fragile `ok` checks.
-
-2. **Two incompatible query schema versions coexisting**: v4 and v5 query formats coexist in the same codebase. The backend migration layer (`pkg/transition/migrate_common.go`) converts at execution time.
-
-3. **Massive boilerplate**: Every widget carries `selectedLogFields` and `selectedTracesFields` arrays even for metrics-only panels. Identical 5-element arrays copy-pasted hundreds of times.
-
-4. **Duplicate query slots**: Every widget carries all three query types (`builder`, `clickhouse_sql`, `promql`) with empty placeholders for inactive types.
-
-5. **Variable key inconsistency**: Variables keyed by human-readable name (e.g., `"Account"`) OR UUID depending on dashboard.
-
-6. **Variables coupled to ClickHouse SQL**: Variable queries use raw `SELECT ... FROM signoz_metrics.distributed_time_series_v4_1day`, coupling dashboard definitions to internal storage schema.
-
-7. **Redundant synthetic IDs**: Filter keys contain derived `id` fields like `"cloud_account_id--string--tag--false"`.
-
-8. **Spelling errors baked in**: `"timePreferance"` (misspelled) is embedded in the serialized JSON contract.
-
-9. **Layout/widget coupling implicit**: Layout items reference widgets by matching `i` to `id` with no schema enforcement. `panelMap` adds another implicit layer.
-
-10. **No schema validation**: Dashboard data has no Go struct for validation. Relies entirely on frontend TypeScript types with extensive optional markers.
-
----
-
-## 2. Perses.dev Specification Overview
-
-### 2.1 What is Perses?
-
-Perses is a CNCF Sandbox project providing:
-- An **open dashboard specification** (implemented in Go, CUE, TypeScript)
-- A **plugin-based extension model** for panels, queries, datasources, and variables
-- **Dashboard-as-Code** via CUE and Go SDKs
-- **Static validation** via `percli` CLI
-- **Grafana migration** tooling
-
-Adopters: Chronosphere, RedHat, SAP, Amadeus.
-
-### 2.2 Dashboard Structure
-
-```yaml
-kind: Dashboard
-metadata:
-  name: "..."
-  project: "..."
-spec:
-  display: {name, description}
-  datasources: {name: DatasourceSpec}    # inline or referenced
-  variables: [Variable]                   # ordered list
-  panels: {id: Panel}                     # map of panel definitions
-  layouts: [Layout]                       # separate from panels
-  duration: "5m"
-  refreshInterval: "30s"
-```
-
-### 2.3 Core Design: Plugin = `{kind: string, spec: any}`
-
-The universal extension point. Panels, queries, datasources, and variables are all plugins:
-
-```go
-type Plugin struct {
-    Kind     string          `json:"kind"`
-    Metadata *PluginMetadata `json:"metadata,omitempty"`
-    Spec     any             `json:"spec"`
-}
-```
-
-### 2.4 Panel Structure
-
-```yaml
-kind: Panel
-spec:
-  display: {name, description}
-  plugin: {kind: "TimeSeriesChart", spec: {...}}
-  queries:
-    - kind: TimeSeriesQuery
-      spec:
-        plugin:
-          kind: PrometheusTimeSeriesQuery
-          spec: {query: "up", datasource: "$ds"}
-```
-
-### 2.5 Layout System
-
-Panels separated from layout. Grid-based positioning with JSON `$ref` pointers:
-
-```yaml
-kind: Grid
-spec:
-  display:
-    title: "Section Name"
-    collapse: {open: true}
-  items:
-    - x: 0, y: 0, width: 6, height: 6
-      content: {"$ref": "#/spec/panels/my_panel"}
-```
-
-### 2.6 Supported Datasources
-
-| Datasource | Plugin Kind | Protocol |
-|---|---|---|
-| Prometheus | `PrometheusDatasource` | PromQL |
-| Tempo | `TempoDatasource` | TraceQL |
-| Loki | `LokiDatasource` | LogQL |
-| Pyroscope | `PyroscopeDatasource` | Pyroscope API |
-| ClickHouse | Community plugin | SQL |
-| VictoriaLogs | Community plugin | VictoriaLogs API |
-
-### 2.7 Plugin System
-
-Five plugin categories: datasource, query, panel, variable, explore. Each distributes as a compressed archive with CUE schemas, React components (via module federation), and optional Grafana migration logic.
-
----
-
-## 3. Feasibility Assessment
-
-### 3.1 Support for Logs/Metrics/Traces/Events/Profiles
-
-| Signal | Perses Status | SigNoz Requirement | Gap |
-|---|---|---|---|
-| **Metrics** | Prometheus plugin (mature) | ClickHouse-backed with dual aggregation model (time + space) | **Significant** - Perses assumes PromQL |
-| **Traces** | Tempo plugin (exists) | ClickHouse-backed with trace operators, span-level queries, joins | **Significant** - Perses Tempo does basic TraceQL |
-| **Logs** | Loki plugin (exists) | ClickHouse-backed with builder queries, raw list views, streaming | **Moderate** - Perses Loki uses LogQL |
-| **Profiles** | Pyroscope plugin (exists) | Not yet core in SigNoz dashboards | Low gap |
-| **Events** | No plugin | Future SigNoz need | Would require custom plugin |
-
-Perses has plugins for all four pillars, but each assumes a specific backend protocol (PromQL, TraceQL, LogQL). SigNoz uses a **unified query builder** abstracting over ClickHouse. This is a fundamental architectural mismatch.
-
-### 3.2 Extensibility
-
-Perses's plugin architecture is genuinely extensible. SigNoz could create custom plugins (`SigNozDatasource`, `SigNozBuilderQuery`, etc.). However, this means:
-- Writing and maintaining a **full Perses plugin ecosystem** for SigNoz
-- Plugin must handle all 7 query types and 3 signal types
-- CUE schema definitions for all SigNoz query structures
-- Tracking Perses upstream changes (still a Sandbox project, not graduated)
-
-### 3.3 Coupling Analysis
-
-| Dimension | Current SigNoz | With Perses | Assessment |
-|---|---|---|---|
-| Dashboard to Storage | Variables use raw ClickHouse SQL | Would need SigNoz query plugin | Improvement possible |
-| Dashboard to Frontend | Widget types tightly coupled to React | Perses separates panel spec from rendering | Improvement |
-| Dashboard to Query API | Widgets carry full query objects | Plugin-typed, referenced via datasource | Improvement, but adds indirection |
-| Dashboard to Perses | N/A | Depends on Perses versioning, plugin compat, CUE toolchain | **New coupling** |
-
-### 3.4 Support for Query Range V5
-
-This is the **most critical gap**:
-
-| SigNoz V5 Feature | Perses Equivalent | Plugin Solvable? |
-|---|---|---|
-| `builder_query` with signal-specific aggregation | Plugin `spec: any` | Yes, but SigNoz-specific |
-| `builder_formula` (cross-query math) | No formula concept | **Partially** - needs custom panel logic |
-| `builder_join` (SQL-style cross-signal joins) | No equivalent | **No** - fundamentally different model |
-| `builder_trace_operator` (span relationships) | No equivalent | **No** - unique to SigNoz |
-| `builder_sub_query` (nested queries) | No equivalent | Would need plugin extension |
-| Multiple query types per panel | Single-typed queries | Would need wrapper plugin |
-| Post-processing functions (ewma, anomaly, timeShift) | No equivalent | Would need to be in plugin spec |
-
----
-
-## 4. Why NOT Adopt Perses Wholesale
-
-### 4.1 SigNoz-inside-Perses
-
-Every SigNoz query feature would live inside `spec: any` blobs within Perses plugin wrappers:
-
-```json
-{
-  "kind": "TimeSeriesQuery",
-  "spec": {
-    "plugin": {
-      "kind": "SigNozBuilderQuery",
-      "spec": { /* ALL SigNoz-specific content here */ }
-    }
-  }
-}
-```
-
-Perses validates the envelope (`kind: TimeSeriesQuery` exists, `plugin.kind` is registered). But the actual content is opaque to Perses. You'd still need your own validation for everything inside `spec`.
-
-### 4.2 Formulas, Joins, and Trace Operators Have No Home
-
-Perses model: `Panel -> queries[] -> Query`. Each query is independent.
-
-SigNoz model: `Panel -> compositeQuery -> {queries[], formulas[], joins[], traceOperators[]}`. Queries reference each other by name. Formulas combine results. Joins cross signals.
-
-You'd have to either:
-- Shove the entire compositeQuery into a single plugin spec (making Perses query structure meaningless)
-- Fork/extend Perses core spec (ongoing merge conflicts)
-
-### 4.3 Plugin Maintenance Burden
-
-Required custom plugins:
-
-| Plugin | Purpose |
-|---|---|
-| `SigNozDatasource` | Points to SigNoz query-service |
-| `SigNozBuilderQuery` | Wraps v5 builder queries for metrics/logs/traces |
-| `SigNozFormulaQuery` | Wraps formula evaluation |
-| `SigNozTraceOperatorQuery` | Wraps trace structural operators |
-| `SigNozJoinQuery` | Wraps cross-signal joins |
-| `SigNozSubQuery` | Wraps nested queries |
-| `SigNozAttributeValuesVariable` | Variable from attribute values |
-| `SigNozQueryVariable` | Variable from query results |
-
-Each needs: CUE schema, React component, Grafana migration handler, and tests. Every v5 feature addition requires plugin schema updates.
-
-### 4.4 Community Mismatch
-
-Perses adopters are primarily Prometheus-centric. A `SigNozDatasource` plugin is useful only to SigNoz. You'd be the sole maintainer of the plugin suite.
-
-### 4.5 The Counterargument
-
-The one strong argument FOR wholesale adoption: **you get out of the "dashboard spec" business entirely**. Even if 80% is SigNoz-specific plugins, the 20% Perses handles (metadata, layout, display, variable ordering, versioning, RBAC scoping) is real work you don't have to maintain. If Perses graduates from CNCF sandbox, ecosystem benefits compound.
-
-This trade-off doesn't justify the ongoing plugin maintenance tax, especially since those patterns are straightforward to implement natively. However, if SigNoz plans to eventually expose PromQL/TraceQL/LogQL-compatible endpoints, the calculus changes significantly.
-
----
-
-## 5. Recommendation: Borrow Patterns, Build Native
-
-### 5.1 Patterns to Adopt from Perses
-
-| Perses Pattern | SigNoz Adoption |
-|---|---|
-| **`kind` + `spec` envelope** | Use for query types, panel types, variables. Consistent with v5 `QueryEnvelope`. |
-| **Panels separated from Layout** | `panels: {}` map + `layouts: []` referencing by ID. |
-| **Ordered variables as array** | Move from `variables: {name: {...}}` to `variables: [...]`. |
-| **CUE or JSON Schema validation** | Define formal schema for dashboards. Use for CI and import/export. |
-| **Dashboard-as-Code SDK** | Go/TypeScript SDK for programmatic dashboard generation. |
-| **Metadata structure** | `kind` + `apiVersion` + `metadata` + `spec` top-level (Kubernetes-style). |
-
-### 5.2 Proposed v6 Dashboard Structure
-
-```json
-{
-  "kind": "Dashboard",
-  "apiVersion": "signoz.io/v1",
-  "metadata": {
-    "name": "redis-overview",
-    "title": "Redis Overview",
-    "description": "...",
-    "tags": ["redis", "database"],
-    "image": "..."
-  },
-  "spec": {
-    "defaults": {
-      "timeRange": "5m",
-      "refreshInterval": "30s"
-    },
-    "variables": [
-      {
-        "kind": "QueryVariable",
-        "spec": {
-          "name": "host_name",
-          "signal": "metrics",
-          "attributeName": "host_name",
-          "multiSelect": true
-        }
-      }
-    ],
-    "panels": {
-      "hit_rate": {
-        "kind": "TimeSeriesPanel",
-        "spec": {
-          "title": "Hit Rate",
-          "description": "Cache hit rate across hosts",
-          "display": {
-            "yAxisUnit": "percent",
-            "legend": {"position": "bottom"}
-          },
-          "query": {
-            "type": "composite",
-            "spec": {
-              "queries": [
-                {
-                  "type": "builder_query",
-                  "spec": {
-                    "name": "A",
-                    "signal": "metrics",
-                    "aggregations": [{"metricName": "redis_keyspace_hits", "timeAggregation": "rate", "spaceAggregation": "sum"}],
-                    "filter": {"expression": "host_name IN $host_name"}
-                  }
-                }
-              ],
-              "formulas": [
-                {"type": "builder_formula", "spec": {"expression": "A / (A + B) * 100"}}
-              ]
-            }
-          }
-        }
-      }
-    },
-    "layouts": [
-      {
-        "kind": "Grid",
-        "spec": {
-          "title": "Overview",
-          "collapsible": true,
-          "collapsed": false,
-          "items": [
-            {"panel": "hit_rate", "x": 0, "y": 0, "w": 6, "h": 6}
-          ]
-        }
-      }
-    ]
-  }
-}
-```
-
-### 5.3 Key Improvements Over Current Format
-
-| Issue | Current | v6 |
-|---|---|---|
-| No validation | `map[string]interface{}` | JSON Schema enforced |
-| Boilerplate | Every widget has selectedLogFields, all query modes | Only active query mode stored, display options per panel type |
-| Variable ordering | `order` field inside map entries | Array position |
-| Variable keys | Name or UUID inconsistently | `name` field in spec, array position |
-| Layout coupling | Implicit `i` matches `id` | Explicit `panel` reference in layout items |
-| Spelling errors | `timePreferance` | `timePreference` (fixed) |
-| Query structure | Flat list of all queries + formulas | Typed envelope matching v5 API |
-| Row grouping | Separate `panelMap` with duplicate layout entries | Integrated into `layouts[]` with `collapsible` flag |
-
-### 5.4 Migration Path
-
-1. **v4/v5 to v6 migration**: Build a Go migration function that transforms existing dashboards to v6 format. Handle both v4 and v5 query formats.
-2. **Backward compatibility**: Support reading v4/v5 dashboards with automatic upgrade to v6 on save.
-3. **Frontend**: Update TypeScript interfaces to match v6 schema. Remove legacy response converters once v5 API is fully adopted.
-4. **Validation**: Add JSON Schema validation on dashboard create/update API endpoints.
-5. **Integration dashboards**: Regenerate all dashboards in `SigNoz/dashboards` repo using v6 format.
-
----
-
-## References
-
-- [Perses Homepage](https://perses.dev/)
-- [Perses Dashboard API](https://perses.dev/perses/docs/api/dashboard/)
-- [Perses Open Specification](https://perses.dev/perses/docs/concepts/open-specification/)
-- [Perses Plugin Creation](https://perses.dev/perses/docs/plugins/creation/)
-- [Perses Prometheus Plugin Model](https://perses.dev/plugins/docs/prometheus/model/)
-- [Perses GitHub Repository](https://github.com/perses/perses)
-- [SigNoz Dashboards Repository](https://github.com/SigNoz/dashboards)
-- SigNoz source: `pkg/types/dashboardtypes/dashboard.go`
-- SigNoz source: `pkg/types/querybuildertypes/querybuildertypesv5/`
-- SigNoz source: `frontend/src/types/api/dashboard/getAll.ts`
-- SigNoz source: `frontend/src/types/api/queryBuilder/queryBuilderData.ts`
-- SigNoz source: `frontend/src/types/api/v5/queryRange.ts`
-- SigNoz source: `pkg/transition/migrate_common.go`

docs/signoz-perses-plugins.cue

@@ -1,378 +0,0 @@
-// SigNoz Perses Plugin Schemas
-//
-// CUE schemas for all SigNoz-specific Perses plugin types.
-// These define the `spec` shape inside Perses Plugin wrappers:
-//   { "kind": "<PluginKind>", "spec": <validated by this file> }
-//
-// Perses core types (Dashboard, Panel, Layout, Variable envelopes)
-// are validated by Perses itself. This file only covers SigNoz plugins.
-//
-// Usage:
-//   percli lint --schema-dir ./signoz-perses-plugins dashboard.json
-//
-// Reference: https://perses.dev/perses/docs/api/plugin/
-
-package signoz
-
-// ============================================================================
-// Datasource Plugin
-// ============================================================================
-
-// SigNozDatasource configures the connection to a SigNoz query service.
-// Used inside: DatasourceSpec.plugin { kind: "SigNozDatasource", spec: ... }
-#SigNozDatasource: {
-	// Direct URL for embedded mode (SigNoz serves its own dashboards).
-	// The frontend calls SigNoz APIs directly at this base URL.
-	directUrl?: string & =~"^/|^https?://"
-
-	// HTTP proxy config for external mode (standalone Perses connecting to SigNoz).
-	proxy?: #HTTPProxy
-}
-
-#HTTPProxy: {
-	kind: "HTTPProxy"
-	spec: {
-		url: string & =~"^https?://"
-		allowedEndpoints?: [...#AllowedEndpoint]
-	}
-}
-
-#AllowedEndpoint: {
-	endpointPattern: string
-	method:          "GET" | "POST" | "PUT" | "DELETE"
-}
-
-// ============================================================================
-// Query Plugins
-// ============================================================================
-
-// SigNozBuilderQuery is a single builder query for one signal.
-// Used inside: TimeSeriesQuery.spec.plugin { kind: "SigNozBuilderQuery", spec: ... }
-// Use this when the panel has independent queries (no formulas, joins, or trace operators).
-#SigNozBuilderQuery: {
-	name:   #QueryName
-	signal: #Signal
-	source?: string
-
-	disabled?: bool | *false
-
-	// Metrics use structured aggregations; traces/logs use expression aggregations
-	aggregations?: [...#MetricAggregation | #ExpressionAggregation]
-
-	filter?:   #Filter
-	groupBy?:  [...#GroupByKey]
-	order?:    [...#OrderBy]
-	having?:   #Having
-
-	selectFields?: [...#TelemetryFieldKey]
-
-	limit?:  int & >=0 & <=10000
-	limitBy?: #LimitBy
-	offset?: int & >=0
-	cursor?: string
-
-	secondaryAggregations?: [...#SecondaryAggregation]
-	functions?: [...#PostProcessingFunction]
-
-	legend?:       string
-	reduceTo?:     #ReduceTo
-	stepInterval?: #StepInterval
-}
-
-// SigNozCompositeQuery bundles multiple queries with formulas, joins, or trace operators.
-// Used inside: TimeSeriesQuery.spec.plugin { kind: "SigNozCompositeQuery", spec: ... }
-// Use this when a panel needs cross-query references (A/B formulas, joins, trace operators).
-#SigNozCompositeQuery: {
-	queries: [...#CompositeQueryEntry] & [_, ...]  // at least one query
-
-	formulas?: [...#FormulaEntry]
-	joins?:    [...#JoinEntry]
-	traceOperators?: [...#TraceOperatorEntry]
-}
-
-// A query within a composite. Same shape as SigNozBuilderQuery.
-#CompositeQueryEntry: #SigNozBuilderQuery
-
-// A formula referencing other queries by name.
-#FormulaEntry: {
-	name:       #QueryName
-	expression: string & !=""  // e.g. "A/B * 100"
-
-	disabled?: bool | *false
-
-	order?:     [...#OrderBy]
-	limit?:     int & >=0 & <=10000
-	having?:    #Having
-	functions?: [...#PostProcessingFunction]
-	legend?:    string
-}
-
-// A join combining results from two queries.
-#JoinEntry: {
-	name: #QueryName
-
-	disabled?: bool | *false
-
-	left:     #QueryRef
-	right:    #QueryRef
-	joinType: "inner" | "left" | "right" | "full" | "cross"
-	on:       string & !=""  // join condition expression
-
-	aggregations?:  [...#MetricAggregation | #ExpressionAggregation]
-	selectFields?:  [...#TelemetryFieldKey]
-	filter?:        #Filter
-	groupBy?:       [...#GroupByKey]
-	having?:        #Having
-	order?:         [...#OrderBy]
-	limit?:         int & >=0 & <=10000
-
-	secondaryAggregations?: [...#SecondaryAggregation]
-	functions?: [...#PostProcessingFunction]
-}
-
-// A trace operator expressing span relationships.
-#TraceOperatorEntry: {
-	name: #QueryName
-
-	disabled?: bool | *false
-
-	// Operators: => (direct descendant), -> (indirect descendant),
-	// && (AND), || (OR), NOT (exclude). Example: "A => B && C"
-	expression: string & !=""
-
-	filter?:         #Filter
-	returnSpansFrom?: string
-
-	order?:     [...#TraceOrderBy]
-	aggregations?: [...#ExpressionAggregation]
-	stepInterval?: #StepInterval
-	groupBy?:   [...#GroupByKey]
-	having?:    #Having
-	limit?:     int & >=0 & <=10000
-	offset?:    int & >=0
-	cursor?:    string
-	legend?:    string
-	selectFields?: [...#TelemetryFieldKey]
-	functions?: [...#PostProcessingFunction]
-}
-
-// SigNozPromQL wraps a raw PromQL query.
-// Used inside: TimeSeriesQuery.spec.plugin { kind: "SigNozPromQL", spec: ... }
-#SigNozPromQL: {
-	name:  string
-	query: string & !=""
-
-	disabled?: bool | *false
-	step?:     #StepInterval
-	stats?:    bool | *false
-	legend?:   string
-}
-
-// SigNozClickHouseSQL wraps a raw ClickHouse SQL query.
-// Used inside: TimeSeriesQuery.spec.plugin { kind: "SigNozClickHouseSQL", spec: ... }
-#SigNozClickHouseSQL: {
-	name:  string
-	query: string & !=""
-
-	disabled?: bool | *false
-	legend?:   string
-}
-
-// ============================================================================
-// Variable Plugins
-// ============================================================================
-
-// SigNozQueryVariable resolves variable values using a builder query.
-// Used inside: ListVariable.spec.plugin { kind: "SigNozQueryVariable", spec: ... }
-#SigNozQueryVariable: {
-	// The query that produces variable values.
-	// Uses the same builder query model as panels.
-	query: #SigNozBuilderQuery | #SigNozCompositeQuery | #SigNozPromQL | #SigNozClickHouseSQL
-}
-
-// SigNozAttributeValues resolves variable values from attribute autocomplete.
-// Used inside: ListVariable.spec.plugin { kind: "SigNozAttributeValues", spec: ... }
-// This is a simpler alternative to SigNozQueryVariable for common cases
-// like "list all values of host.name for metric X".
-#SigNozAttributeValues: {
-	signal:        #Signal
-	metricName?:   string  // required when signal is "metrics"
-	attributeName: string & !=""
-
-	filter?: #Filter  // optional pre-filter
-}
-
-// ============================================================================
-// Signals
-// ============================================================================
-
-#Signal: "metrics" | "traces" | "logs"
-// Extensible to "events" | "profiles" in future
-
-// ============================================================================
-// Aggregations
-// ============================================================================
-
-// MetricAggregation defines the two-level aggregation model for metrics:
-// time aggregation (within each time bucket) then space aggregation (across dimensions).
-#MetricAggregation: {
-	metricName: string & !=""
-
-	temporality?:      #MetricTemporality
-	timeAggregation?:  #TimeAggregation
-	spaceAggregation?: #SpaceAggregation
-	reduceTo?:         #ReduceTo
-}
-
-// ExpressionAggregation uses ClickHouse aggregate function syntax for traces/logs.
-// Examples: "count()", "sum(item_price)", "p99(duration_nano)", "countIf(day > 10)"
-#ExpressionAggregation: {
-	expression: string & !=""
-	alias?:     string
-}
-
-#MetricTemporality: "delta" | "cumulative" | "unspecified"
-
-#TimeAggregation:
-	"latest" | "sum" | "avg" | "min" | "max" |
-	"count" | "count_distinct" | "rate" | "increase"
-
-#SpaceAggregation:
-	"sum" | "avg" | "min" | "max" | "count" |
-	"p50" | "p75" | "p90" | "p95" | "p99"
-
-#ReduceTo: "sum" | "count" | "avg" | "min" | "max" | "last" | "median"
-
-// ============================================================================
-// Filters
-// ============================================================================
-
-// Filter uses expression syntax instead of structured items with synthetic IDs.
-// Supports: =, !=, >, >=, <, <=, IN, NOT IN, LIKE, NOT LIKE, ILIKE, NOT ILIKE,
-// BETWEEN, NOT BETWEEN, EXISTS, NOT EXISTS, REGEXP, NOT REGEXP, CONTAINS, NOT CONTAINS.
-// Variable interpolation: $variable_name
-#Filter: {
-	expression: string
-}
-
-// ============================================================================
-// Group By, Order By, Having
-// ============================================================================
-
-#GroupByKey: {
-	name:           string & !=""
-	signal?:        #Signal
-	fieldContext?:  #FieldContext
-	fieldDataType?: #FieldDataType
-}
-
-#OrderBy: {
-	key:       #OrderByKey
-	direction: "asc" | "desc"
-}
-
-#OrderByKey: {
-	name:           string & !=""
-	signal?:        #Signal
-	fieldContext?:  #FieldContext
-	fieldDataType?: #FieldDataType
-}
-
-#TraceOrderBy: {
-	key: {
-		name: "span_count" | "trace_duration"
-	}
-	direction: "asc" | "desc"
-}
-
-// Having applies a post-aggregation filter.
-// Example: "count() > 100"
-#Having: {
-	expression: string & !=""
-}
-
-// ============================================================================
-// Secondary Aggregations & Limits
-// ============================================================================
-
-#SecondaryAggregation: {
-	expression: string
-	alias?:     string
-
-	stepInterval?: #StepInterval
-	groupBy?:      [...#GroupByKey]
-	order?:        [...#OrderBy]
-	limit?:        int & >=0 & <=10000
-	limitBy?:      #LimitBy
-}
-
-#LimitBy: {
-	keys:  [...string] & [_, ...]  // at least one key
-	value: string  // max rows per group (string for compatibility)
-}
-
-// ============================================================================
-// Post-Processing Functions
-// ============================================================================
-
-#PostProcessingFunction: {
-	name: #FunctionName
-	args?: [...#FunctionArg]
-}
-
-#FunctionName:
-	// Threshold functions
-	"cutOffMin" | "cutOffMax" | "clampMin" | "clampMax" |
-	// Math functions
-	"absolute" | "runningDiff" | "log2" | "log10" | "cumulativeSum" |
-	// Smoothing functions (exponentially weighted moving average)
-	"ewma3" | "ewma5" | "ewma7" |
-	// Smoothing functions (sliding median window)
-	"median3" | "median5" | "median7" |
-	// Time functions
-	"timeShift" |
-	// Analysis functions
-	"anomaly" |
-	// Gap filling
-	"fillZero"
-
-#FunctionArg: {
-	name?:  string
-	value:  number | string | bool
-}
-
-// ============================================================================
-// Telemetry Field References
-// ============================================================================
-
-#TelemetryFieldKey: {
-	name:           string & !=""
-	description?:   string
-	unit?:          string
-	signal?:        #Signal
-	fieldContext?:  #FieldContext
-	fieldDataType?: #FieldDataType
-}
-
-#FieldContext:
-	"resource" | "scope" | "span" | "event" | "link" |
-	"log" | "metric" | "body" | "trace"
-
-#FieldDataType:
-	"string" | "int64" | "float64" | "bool" |
-	"array(string)" | "array(int64)" | "array(float64)" | "array(bool)"
-
-// ============================================================================
-// Common Types
-// ============================================================================
-
-// QueryName must be a valid identifier: starts with letter, contains letters/digits/underscores.
-#QueryName: =~"^[A-Za-z][A-Za-z0-9_]*$"
-
-// QueryRef references another query by name within a composite query.
-#QueryRef: {
-	name: string & !=""
-}
-
-// StepInterval accepts seconds (numeric) or duration string ("15s", "1m", "1h").
-#StepInterval: number & >=0 | =~"^[0-9]+(ns|us|ms|s|m|h)$"

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -14,6 +14,6 @@ export const VIEW_TYPES = {
 export const SPAN_ATTRIBUTES = {
 	URL_PATH: 'http.url',
 	RESPONSE_STATUS_CODE: 'response_status_code',
-	SERVER_NAME: 'net.peer.name',
+	SERVER_NAME: 'http_host',
 	SERVER_PORT: 'net.peer.port',
 } as const;

frontend/src/container/ApiMonitoring/__tests__/TopErrors.test.tsx

@@ -4,6 +4,7 @@ import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor, within } from 'tests/test-utils';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
 import TopErrors from '../Explorer/Domains/DomainDetails/TopErrors';
 import { getTopErrorsQueryPayload } from '../utils';
 
@@ -215,7 +216,7 @@ describe('TopErrors', () => {
 					value: 'true',
 				}),
 				expect.objectContaining({
-					key: expect.objectContaining({ key: 'net.peer.name' }),
+					key: expect.objectContaining({ key: SPAN_ATTRIBUTES.SERVER_NAME }),
 					op: '=',
 					value: 'test-domain',
 				}),

frontend/src/container/ApiMonitoring/utils.tsx

@@ -638,7 +638,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: 'tag',
+											type: '',
 										},
 										op: '=',
 										value: domainName,
@@ -685,7 +685,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: 'tag',
+											type: '',
 										},
 										op: '=',
 										value: domainName,
@@ -733,7 +733,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: 'tag',
+											type: '',
 										},
 										op: '=',
 										value: domainName,
@@ -780,7 +780,7 @@ export const getEndPointsQueryPayload = (
 										key: {
 											dataType: DataTypes.String,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
-											type: 'tag',
+											type: '',
 										},
 										op: '=',
 										value: domainName,
@@ -1302,7 +1302,7 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'e8a043b7',
 			key: {
-				key: 'net.peer.name',
+				key: SPAN_ATTRIBUTES.SERVER_NAME,
 				dataType: DataTypes.String,
 				type: '',
 			},
@@ -2198,7 +2198,7 @@ export const getEndPointZeroStateQueryPayload = (
 									key: {
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
-										type: 'tag',
+										type: '',
 									},
 									op: '=',
 									value: domainName,
@@ -2793,7 +2793,7 @@ export const getStatusCodeBarChartWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
-									type: 'tag',
+									type: '',
 								},
 								op: '=',
 								value: domainName,

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
-import { BarChartProps } from '../types';
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stackSeries(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

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

@@ -1,160 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-import '../Panel.styles.scss';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	const onPlotDestroy = useCallback(() => {
-		uPlotRef.current = null;
-	}, []);
-
-	const onPlotRef = useCallback((plot: uPlot | null): void => {
-		uPlotRef.current = plot;
-	}, []);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={onPlotRef}
-					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

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

@@ -1,108 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	builder.setCursor({
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-
-	return builder;
-}

frontend/src/hooks/useCopyToClipboard.ts

@@ -1,61 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-const DEFAULT_COPIED_RESET_MS = 2000;
-
-export interface UseCopyToClipboardOptions {
-	/** How long (ms) to keep "copied" state before resetting. Default 2000. */
-	copiedResetMs?: number;
-}
-
-export type ID = number | string | null;
-
-export interface UseCopyToClipboardReturn {
-	/** Copy text to clipboard. Pass an optional id to track which item was copied (e.g. seriesIndex). */
-	copyToClipboard: (text: string, id?: ID) => void;
-	/** True when something was just copied and still within the reset threshold. */
-	isCopied: boolean;
-	/** The id passed to the last successful copy, or null after reset. Use to show "copied" state for a specific item (e.g. copiedId === item.seriesIndex). */
-	id: ID;
-}
-
-export function useCopyToClipboard(
-	options: UseCopyToClipboardOptions = {},
-): UseCopyToClipboardReturn {
-	const { copiedResetMs = DEFAULT_COPIED_RESET_MS } = options;
-	const [state, setState] = useState<{ isCopied: boolean; id: ID }>({
-		isCopied: false,
-		id: null,
-	});
-	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(() => {
-		return (): void => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, []);
-
-	const copyToClipboard = useCallback(
-		(text: string, id?: ID): void => {
-			navigator.clipboard.writeText(text).then(() => {
-				if (timeoutRef.current) {
-					clearTimeout(timeoutRef.current);
-				}
-				setState({ isCopied: true, id: id ?? null });
-				timeoutRef.current = setTimeout(() => {
-					setState({ isCopied: false, id: null });
-					timeoutRef.current = null;
-				}, copiedResetMs);
-			});
-		},
-		[copiedResetMs],
-	);
-
-	return {
-		copyToClipboard,
-		isCopied: state.isCopied,
-		id: state.id,
-	};
-}

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

@@ -128,15 +128,6 @@
 		opacity: 1;
 	}
 
-	.legend-item-label-trigger {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		flex: 1;
-		min-width: 0;
-		cursor: pointer;
-	}
-
 	.legend-marker {
 		border-width: 2px;
 		border-radius: 50%;
@@ -166,34 +157,10 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		min-width: 0;
-		user-select: none;
-	}
-
-	.legend-copy-button {
-		display: none;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		padding: 2px;
-		margin: 0;
-		border: none;
-		color: var(--bg-vanilla-400);
-		cursor: pointer;
-		border-radius: 4px;
-		opacity: 1;
-		transition: opacity 0.15s ease, color 0.15s ease;
-
-		&:hover {
-			color: var(--bg-vanilla-100);
-		}
 	}
 
 	&:hover {
 		background: rgba(255, 255, 255, 0.05);
-		.legend-copy-button {
-			display: flex;
-			opacity: 1;
-		}
 	}
 }
 
@@ -205,17 +172,4 @@
 			}
 		}
 	}
-
-	.legend-item {
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
-		.legend-copy-button {
-			color: var(--bg-ink-400);
-
-			&:hover {
-				color: var(--bg-ink-500);
-			}
-		}
-	}
 }

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

@@ -2,10 +2,8 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { Input, Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
-import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { Check, Copy } from 'lucide-react';
 
 import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
@@ -34,7 +32,6 @@ export default function Legend({
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [legendSearchQuery, setLegendSearchQuery] = useState('');
-	const { copyToClipboard, id: copiedId } = useCopyToClipboard();
 
 	const legendItems = useMemo(() => Object.values(legendItemsMap), [
 		legendItemsMap,
@@ -62,53 +59,26 @@ export default function Legend({
 		);
 	}, [position, legendSearchQuery, legendItems]);
 
-	const handleCopyLegendItem = useCallback(
-		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
-			e.stopPropagation();
-			copyToClipboard(label, seriesIndex);
-		},
-		[copyToClipboard],
-	);
-
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => {
-			const isCopied = copiedId === item.seriesIndex;
-			return (
+		(item: LegendItem): JSX.Element => (
+			<AntdTooltip key={item.seriesIndex} title={item.label}>
 				<div
-					key={item.seriesIndex}
 					data-legend-item-id={item.seriesIndex}
 					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
 						'legend-item-off': !item.show,
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<AntdTooltip title={item.label}>
-						<div className="legend-item-label-trigger">
-							<div
-								className="legend-marker"
-								style={{ borderColor: String(item.color) }}
-								data-is-legend-marker={true}
-							/>
-							<span className="legend-label">{item.label}</span>
-						</div>
-					</AntdTooltip>
-					<AntdTooltip title={isCopied ? 'Copied' : 'Copy'}>
-						<button
-							type="button"
-							className="legend-copy-button"
-							onClick={(e): void =>
-								handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-							}
-							aria-label={`Copy ${item.label}`}
-							data-testid="legend-copy"
-						>
-							{isCopied ? <Check size={12} /> : <Copy size={12} />}
-						</button>
-					</AntdTooltip>
+					<div
+						className="legend-marker"
+						style={{ borderColor: String(item.color) }}
+						data-is-legend-marker={true}
+					/>
+					<span className="legend-label">{item.label}</span>
 				</div>
-			);
-		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
+			</AntdTooltip>
+		),
+		[focusedSeriesIndex, position],
 	);
 
 	const isEmptyState = useMemo(() => {

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

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { BarTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-				isStackedBarChart: props.isStackedBarChart,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-			props.isStackedBarChart,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

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

@@ -25,28 +25,16 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
-	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
-	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
-	// When series are hidden, we must use the next *visible* series, not index+1,
-	// since hidden series keep raw values and would produce negative/wrong results.
-	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleIdx = -1;
-		for (let j = index + 1; j < series.length; j++) {
-			if (series[j]?.show) {
-				nextVisibleIdx = j;
-				break;
-			}
-		}
-		if (nextVisibleIdx >= 1) {
-			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
+	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
+		const nextValue = data[index + 1][dataIndex] ?? null;
+		if (nextValue !== null) {
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -92,7 +80,6 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
-			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

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

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	within,
-} from '@testing-library/react';
+import { render, RenderResult, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
@@ -14,9 +8,6 @@ import { useLegendActions } from '../../hooks/useLegendActions';
 import Legend from '../Legend/Legend';
 import { LegendPosition } from '../types';
 
-const mockWriteText = jest.fn().mockResolvedValue(undefined);
-let clipboardSpy: jest.SpyInstance | undefined;
-
 jest.mock('react-virtuoso', () => ({
 	VirtuosoGrid: ({
 		data,
@@ -48,15 +39,6 @@ const mockUseLegendActions = useLegendActions as jest.MockedFunction<
 >;
 
 describe('Legend', () => {
-	beforeAll(() => {
-		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: () => Promise.resolve() },
-			writable: true,
-			configurable: true,
-		});
-	});
-
 	const baseLegendItemsMap = {
 		0: {
 			seriesIndex: 0,
@@ -88,11 +70,6 @@ describe('Legend', () => {
 		onLegendMouseMove = jest.fn();
 		onLegendMouseLeave = jest.fn();
 		onFocusSeries = jest.fn();
-		mockWriteText.mockClear();
-
-		clipboardSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockImplementation(mockWriteText);
 
 		mockUseLegendsSync.mockReturnValue({
 			legendItemsMap: baseLegendItemsMap,
@@ -109,7 +86,6 @@ describe('Legend', () => {
 	});
 
 	afterEach(() => {
-		clipboardSpy?.mockRestore();
 		jest.clearAllMocks();
 	});
 
@@ -234,47 +210,4 @@ describe('Legend', () => {
 			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
 		});
 	});
-
-	describe('copy action', () => {
-		it('copies the legend label to clipboard when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('A');
-		});
-
-		it('copies the correct label when copy is clicked on a different legend item', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const thirdLegendItem = document.querySelector(
-				'[data-legend-item-id="2"]',
-			) as HTMLElement;
-			const copyButton = within(thirdLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('C');
-		});
-
-		it('does not call onLegendClick when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(onLegendClick).not.toHaveBeenCalled();
-		});
-	});
 });

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

@@ -1,10 +1,8 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
-	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -45,13 +43,18 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	private buildLineConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		lineStyle,
+		lineCap,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		lineStyle?: LineStyle;
+		lineCap?: Series.Cap;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
-			stroke: resolvedLineColor,
+			stroke: lineColor,
 			width: lineWidth ?? 2,
 		};
 
@@ -62,26 +65,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
-
-		if (this.props.panelType === PANEL_TYPES.BAR) {
-			lineConfig.fill = resolvedLineColor;
-		}
-
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig(): Partial<Series> {
-		const {
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
-			barAlignment,
-			barMaxWidth,
-			barWidthFactor,
-		} = this.props;
+	private buildPathConfig({
+		pathBuilder,
+		drawStyle,
+		lineInterpolation,
+	}: {
+		pathBuilder?: Series.PathBuilder | null;
+		drawStyle: DrawStyle;
+		lineInterpolation?: LineInterpolation;
+	}): Partial<Series> {
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -98,13 +96,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder({
-						drawStyle,
-						lineInterpolation,
-						barAlignment,
-						barMaxWidth,
-						barWidthFactor,
-					});
+					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -118,21 +110,25 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 * Build points configuration
 	 */
 	private buildPointsConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		pointSize,
+		pointsBuilder,
+		pointsFilter,
+		drawStyle,
+		showPoints,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		pointSize?: number;
+		pointsBuilder: Series.Points.Show | null;
+		pointsFilter: Series.Points.Filter | null;
+		drawStyle: DrawStyle;
+		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
-		const {
-			lineWidth,
-			pointSize,
-			pointsBuilder,
-			pointsFilter,
-			drawStyle,
-			showPoints,
-		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
-			stroke: resolvedLineColor,
-			fill: resolvedLineColor,
+			stroke: lineColor,
+			fill: lineColor,
 			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
@@ -166,16 +162,44 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+		const {
+			drawStyle,
+			pathBuilder,
+			pointsBuilder,
+			pointsFilter,
+			lineInterpolation,
+			lineWidth,
+			lineStyle,
+			lineCap,
+			showPoints,
+			pointSize,
+			scaleKey,
+			label,
+			spanGaps,
+			show = true,
+		} = this.props;
 
-		const resolvedLineColor = this.getLineColor();
+		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			lineStyle,
+			lineCap,
+		});
+		const pathConfig = this.buildPathConfig({
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
 		});
-		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			pointSize,
+			pointsBuilder: pointsBuilder ?? null,
+			pointsFilter: pointsFilter ?? null,
+			drawStyle,
+			showPoints,
 		});
 
 		return {
@@ -203,36 +227,15 @@ interface PathBuilders {
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder({
-	drawStyle,
-	lineInterpolation,
-	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.6,
-	barMaxWidth = 200,
-}: {
-	drawStyle: DrawStyle;
-	lineInterpolation?: LineInterpolation;
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}): Series.PathBuilder {
+function getPathBuilder(
+	style: DrawStyle,
+	lineInterpolation?: LineInterpolation,
+): Series.PathBuilder {
 	if (!builders) {
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar) {
-		const pathBuilders = uPlot.paths;
-		const barsConfigKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
-		if (!builders[barsConfigKey] && pathBuilders.bars) {
-			builders[barsConfigKey] = pathBuilders.bars({
-				size: [barWidthFactor, barMaxWidth],
-				align: barAlignment,
-			});
-		}
-		return builders[barsConfigKey];
-	}
-
-	if (drawStyle === DrawStyle.Line) {
+	if (style === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}

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

@@ -126,45 +126,7 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-/**
- * Props for configuring lines
- */
-export interface LineConfig {
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-}
-
-/**
- * Alignment of bars
- */
-export enum BarAlignment {
-	After = 1,
-	Before = -1,
-	Center = 0,
-}
-
-/**
- * Props for configuring bars
- */
-export interface BarConfig {
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}
-
-/**
- * Props for configuring points
- */
-export interface PointsConfig {
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
-}
-
-export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
+export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -175,7 +137,20 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+
 	isDarkMode?: boolean;
+
+	// Line config
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+
+	// Points config
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {

pkg/modules/thirdpartyapi/translator.go

@@ -12,60 +12,30 @@ import (
 )
 
 const (
-	urlPathKeyLegacy       = "http.url"
-	serverAddressKeyLegacy = "net.peer.name"
-
-	urlPathKey       = "url.full"
-	serverAddressKey = "server.address"
+	derivedKeyHTTPURL  = "http_url" // https://signoz.io/docs/traces-management/guides/derived-fields-spans/#http_url
+	derivedKeyHTTPHost = "http_host"
 )
 
 var defaultStepInterval = 60 * time.Second
 
-type SemconvFieldMapping struct {
-	LegacyField  string
-	CurrentField string
-	FieldType    telemetrytypes.FieldDataType
-	Context      telemetrytypes.FieldContext
-}
-
-var dualSemconvGroupByKeys = map[string][]qbtypes.GroupByKey{
-	"server": {
-		{
-			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name:          serverAddressKey,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				Signal:        telemetrytypes.SignalTraces,
-			},
+var (
+	groupByKeyHTTPHost = qbtypes.GroupByKey{
+		TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+			Name:          derivedKeyHTTPHost,
+			FieldDataType: telemetrytypes.FieldDataTypeString,
+			FieldContext:  telemetrytypes.FieldContextSpan,
+			Signal:        telemetrytypes.SignalTraces,
 		},
-		{
-			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name:          serverAddressKeyLegacy,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				Signal:        telemetrytypes.SignalTraces,
-			},
+	}
+	groupByKeyHTTPURL = qbtypes.GroupByKey{
+		TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+			Name:          derivedKeyHTTPURL,
+			FieldDataType: telemetrytypes.FieldDataTypeString,
+			FieldContext:  telemetrytypes.FieldContextSpan,
+			Signal:        telemetrytypes.SignalTraces,
 		},
-	},
-	"url": {
-		{
-			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name:          urlPathKey,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				Signal:        telemetrytypes.SignalTraces,
-			},
-		},
-		{
-			TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-				Name:          urlPathKeyLegacy,
-				FieldDataType: telemetrytypes.FieldDataTypeString,
-				FieldContext:  telemetrytypes.FieldContextAttribute,
-				Signal:        telemetrytypes.SignalTraces,
-			},
-		},
-	},
-}
+	}
+)
 
 func FilterIntermediateColumns(result *qbtypes.QueryRangeResponse) *qbtypes.QueryRangeResponse {
 	if result == nil || result.Data.Results == nil {
@@ -114,103 +84,6 @@ func FilterIntermediateColumns(result *qbtypes.QueryRangeResponse) *qbtypes.Quer
 	return result
 }
 
-func MergeSemconvColumns(result *qbtypes.QueryRangeResponse) *qbtypes.QueryRangeResponse {
-	if result == nil || result.Data.Results == nil {
-		return result
-	}
-
-	for _, res := range result.Data.Results {
-		scalarData, ok := res.(*qbtypes.ScalarData)
-		if !ok {
-			continue
-		}
-
-		serverAddressKeyIdx := -1
-		serverAddressKeyLegacyIdx := -1
-
-		for i, col := range scalarData.Columns {
-			if col.Name == serverAddressKey {
-				serverAddressKeyIdx = i
-			} else if col.Name == serverAddressKeyLegacy {
-				serverAddressKeyLegacyIdx = i
-			}
-		}
-
-		if serverAddressKeyIdx == -1 || serverAddressKeyLegacyIdx == -1 {
-			continue
-		}
-
-		var newRows [][]any
-		for _, row := range scalarData.Data {
-			if len(row) <= serverAddressKeyIdx || len(row) <= serverAddressKeyLegacyIdx {
-				continue
-			}
-
-			var serverName any
-			if isValidValue(row[serverAddressKeyIdx]) {
-				serverName = row[serverAddressKeyIdx]
-			} else if isValidValue(row[serverAddressKeyLegacyIdx]) {
-				serverName = row[serverAddressKeyLegacyIdx]
-			}
-
-			if serverName != nil {
-				newRow := make([]any, len(row)-1)
-				newRow[0] = serverName
-
-				targetIdx := 1
-				for i, val := range row {
-					if i != serverAddressKeyLegacyIdx && i != serverAddressKeyIdx {
-						if targetIdx < len(newRow) {
-							newRow[targetIdx] = val
-							targetIdx++
-						}
-					}
-				}
-				newRows = append(newRows, newRow)
-			}
-		}
-
-		newColumns := make([]*qbtypes.ColumnDescriptor, len(scalarData.Columns)-1)
-		targetIdx := 0
-		for i, col := range scalarData.Columns {
-			if i == serverAddressKeyIdx {
-				newCol := &qbtypes.ColumnDescriptor{
-					TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
-						Name:          serverAddressKeyLegacy,
-						FieldDataType: col.FieldDataType,
-						FieldContext:  col.FieldContext,
-						Signal:        col.Signal,
-					},
-					QueryName:        col.QueryName,
-					AggregationIndex: col.AggregationIndex,
-					Meta:             col.Meta,
-					Type:             col.Type,
-				}
-				newColumns[targetIdx] = newCol
-				targetIdx++
-			} else if i != serverAddressKeyLegacyIdx {
-				newColumns[targetIdx] = col
-				targetIdx++
-			}
-		}
-
-		scalarData.Columns = newColumns
-		scalarData.Data = newRows
-	}
-
-	return result
-}
-
-func isValidValue(val any) bool {
-	if val == nil {
-		return false
-	}
-	if str, ok := val.(string); ok {
-		return str != "" && str != "n/a"
-	}
-	return true
-}
-
 func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRangeResponse {
 	filteredResults := make([]*qbtypes.QueryRangeResponse, 0, len(results))
 
@@ -261,7 +134,7 @@ func FilterResponse(results []*qbtypes.QueryRangeResponse) []*qbtypes.QueryRange
 
 func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 	for _, label := range series.Labels {
-		if label.Key.Name == serverAddressKeyLegacy || label.Key.Name == serverAddressKey {
+		if label.Key.Name == derivedKeyHTTPHost {
 			if strVal, ok := label.Value.(string); ok {
 				if net.ParseIP(strVal) != nil {
 					return false
@@ -274,12 +147,10 @@ func shouldIncludeSeries(series *qbtypes.TimeSeries) bool {
 
 func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	if row.Data != nil {
-		for _, key := range []string{serverAddressKeyLegacy, serverAddressKey} {
-			if domainVal, ok := row.Data[key]; ok {
-				if domainStr, ok := domainVal.(string); ok {
-					if net.ParseIP(domainStr) != nil {
-						return false
-					}
+		if domainVal, ok := row.Data[derivedKeyHTTPHost]; ok {
+			if domainStr, ok := domainVal.(string); ok {
+				if net.ParseIP(domainStr) != nil {
+					return false
 				}
 			}
 		}
@@ -287,8 +158,8 @@ func shouldIncludeRow(row *qbtypes.RawRow) bool {
 	return true
 }
 
-func mergeGroupBy(base, additional []qbtypes.GroupByKey) []qbtypes.GroupByKey {
-	return append(base, additional...)
+func mergeGroupBy(base qbtypes.GroupByKey, additional []qbtypes.GroupByKey) []qbtypes.GroupByKey {
+	return append([]qbtypes.GroupByKey{base}, additional...)
 }
 
 func BuildDomainList(req *thirdpartyapitypes.ThirdPartyApiRequest) (*qbtypes.QueryRangeRequest, error) {
@@ -354,10 +225,10 @@ func buildEndpointsQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Q
 			Signal:       telemetrytypes.SignalTraces,
 			StepInterval: qbtypes.Step{Duration: defaultStepInterval},
 			Aggregations: []qbtypes.TraceAggregation{
-				{Expression: "count_distinct(http.url)"},
+				{Expression: fmt.Sprintf("count_distinct(%s)", derivedKeyHTTPURL)},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -373,7 +244,7 @@ func buildLastSeenQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Qu
 				{Expression: "max(timestamp)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -389,7 +260,7 @@ func buildRpsQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.QueryEn
 				{Expression: "rate()"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -407,7 +278,7 @@ func buildErrorQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Query
 				{Expression: "count()"},
 			},
 			Filter:  filter,
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -423,7 +294,7 @@ func buildTotalSpanQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.Q
 				{Expression: "count()"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -439,7 +310,7 @@ func buildP99Query(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtypes.QueryEn
 				{Expression: "p99(duration_nano)"},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["server"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPHost, req.GroupBy),
 		},
 	}
 }
@@ -462,10 +333,10 @@ func buildEndpointsInfoQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtyp
 			Signal:       telemetrytypes.SignalTraces,
 			StepInterval: qbtypes.Step{Duration: defaultStepInterval},
 			Aggregations: []qbtypes.TraceAggregation{
-				{Expression: "rate(http.url)"},
+				{Expression: fmt.Sprintf("rate(%s)", derivedKeyHTTPURL)},
 			},
 			Filter:  buildBaseFilter(req.Filter),
-			GroupBy: mergeGroupBy(dualSemconvGroupByKeys["url"], req.GroupBy),
+			GroupBy: mergeGroupBy(groupByKeyHTTPURL, req.GroupBy),
 		},
 	}
 }
@@ -519,8 +390,7 @@ func buildLastSeenInfoQuery(req *thirdpartyapitypes.ThirdPartyApiRequest) qbtype
 }
 
 func buildBaseFilter(additionalFilter *qbtypes.Filter) *qbtypes.Filter {
-	baseExpression := fmt.Sprintf("(%s EXISTS OR %s EXISTS) AND kind_string = 'Client'",
-		urlPathKeyLegacy, urlPathKey)
+	baseExpression := fmt.Sprintf("%s EXISTS AND kind_string = 'Client'", derivedKeyHTTPURL)
 
 	if additionalFilter != nil && additionalFilter.Expression != "" {
 		// even if it contains kind_string we add with an AND so it doesn't matter if the user is overriding it.

pkg/modules/thirdpartyapi/translator_test.go

@@ -1,9 +1,10 @@
 package thirdpartyapi
 
 import (
-	"github.com/SigNoz/signoz/pkg/types/thirdpartyapitypes"
 	"testing"
 
+	"github.com/SigNoz/signoz/pkg/types/thirdpartyapitypes"
+
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/stretchr/testify/assert"
@@ -28,7 +29,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
 														Value: "192.168.1.1",
 													},
 												},
@@ -36,7 +37,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
 														Value: "example.com",
 													},
 												},
@@ -60,7 +61,7 @@ func TestFilterResponse(t *testing.T) {
 											{
 												Labels: []*qbtypes.Label{
 													{
-														Key:   telemetrytypes.TelemetryFieldKey{Name: "net.peer.name"},
+														Key:   telemetrytypes.TelemetryFieldKey{Name: derivedKeyHTTPHost},
 														Value: "example.com",
 													},
 												},
@@ -84,12 +85,12 @@ func TestFilterResponse(t *testing.T) {
 								Rows: []*qbtypes.RawRow{
 									{
 										Data: map[string]any{
-											"net.peer.name": "192.168.1.1",
+											derivedKeyHTTPHost: "192.168.1.1",
 										},
 									},
 									{
 										Data: map[string]any{
-											"net.peer.name": "example.com",
+											derivedKeyHTTPHost: "example.com",
 										},
 									},
 								},
@@ -106,7 +107,7 @@ func TestFilterResponse(t *testing.T) {
 								Rows: []*qbtypes.RawRow{
 									{
 										Data: map[string]any{
-											"net.peer.name": "example.com",
+											derivedKeyHTTPHost: "example.com",
 										},
 									},
 								},

pkg/query-service/app/http_handler.go

@@ -4996,7 +4996,6 @@ func (aH *APIHandler) getDomainList(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	result = thirdpartyapi.MergeSemconvColumns(result)
 	result = thirdpartyapi.FilterIntermediateColumns(result)
 
 	// Filter IP addresses if ShowIp is false
@@ -5053,7 +5052,6 @@ func (aH *APIHandler) getDomainInfo(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	result = thirdpartyapi.MergeSemconvColumns(result)
 	result = thirdpartyapi.FilterIntermediateColumns(result)
 
 	// Filter IP addresses if ShowIp is false