chore: handle 409 conflict also

* chore: hide chartmanager when queries are merged

* chore: added histogram panel tests

.github/CODEOWNERS

@@ -43,6 +43,12 @@
 /pkg/analytics/ @vikrantgupta25
 /pkg/statsreporter/ @vikrantgupta25
 
+# Emailing Owners
+
+/pkg/emailing/ @vikrantgupta25
+/pkg/types/emailtypes/ @vikrantgupta25
+/templates/email/ @vikrantgupta25
+
 # Querier Owners
 
 /pkg/querier/ @srikanthccv

.vscode/settings.json

@@ -14,5 +14,8 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
+	},
+	"[html]": {
+		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

README.de-de.md

@@ -176,25 +176,6 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
 Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #contributing Kanal in unserer [slack community](https://signoz.io/slack)
 
-### Unsere Projektbetreuer
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### Frontend
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## Dokumentation

README.md

@@ -221,34 +221,6 @@ We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
-### Project maintainers
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
-- [Ekansh Gupta](https://github.com/eKuG)
-- [Aniket Agarwal](https://github.com/aniketio-ctrl)
-
-#### Frontend
-
-- [Yunus M](https://github.com/YounixM)
-- [Vikrant Gupta](https://github.com/vikrantgupta25)
-- [Sagar Rajput](https://github.com/SagarRajput-7)
-- [Shaheer Kochai](https://github.com/ahmadshaheer)
-- [Amlan Kumar Nandy](https://github.com/amlannandy)
-- [Sahil Khan](https://github.com/sawhil)
-- [Aditya Singh](https://github.com/aks07)
-- [Abhi Kumar](https://github.com/ahrefabhi)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-- [Vibhu Pandey](https://github.com/therealpandey)
-
 <br /><br />
 
 

README.zh-cn.md

@@ -187,25 +187,6 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
-### 项目维护人员
-
-#### 后端
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### 前端
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### 运维开发
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## 文档

conf/example.yaml

@@ -193,6 +193,15 @@ emailing:
   templates:
     # The directory containing the email templates. This directory should contain a list of files defined at pkg/types/emailtypes/template.go.
     directory: /opt/signoz/conf/templates/email
+    format:
+      header:
+        enabled: false
+        logo_url: ""
+      help:
+        enabled: false
+        email: ""
+      footer:
+        enabled: false
   smtp:
     # The SMTP server address.
     address: localhost:25
@@ -285,7 +294,6 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
-      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -300,3 +308,14 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
+  root:
+    # Whether to enable the root user. When enabled, a root user is provisioned
+    # on startup using the email and password below. The root user cannot be
+    # deleted, updated, or have their password changed through the UI.
+    enabled: false
+    # The email address of the root user.
+    email: ""
+    # The password of the root user. Must meet password requirements.
+    password: ""
+    # The name of the organization to create or look up for the root user.
+    org_name: default

docs/api/openapi.yml

@@ -3526,6 +3526,108 @@ paths:
       summary: Rotate session
       tags:
       - sessions
+  /api/v2/zeus/deployments/host:
+    put:
+      deprecated: false
+      description: This endpoint saves the host of a deployment to zeus.
+      operationId: PutHostInZeus
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableHost'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Put host in Zeus for a deployment.
+      tags:
+      - zeus
+  /api/v2/zeus/deployments/profile:
+    put:
+      deprecated: false
+      description: This endpoint saves the profile of a deployment to zeus.
+      operationId: PutProfileInZeus
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ZeustypesPostableProfile'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Put profile in Zeus for a deployment.
+      tags:
+      - zeus
 components:
   schemas:
     AuthtypesAttributeMapping:
@@ -4678,6 +4780,8 @@ components:
           type: string
         id:
           type: string
+        isRoot:
+          type: boolean
         orgId:
           type: string
         role:
@@ -4686,6 +4790,37 @@ components:
           format: date-time
           type: string
       type: object
+    ZeustypesPostableHost:
+      properties:
+        name:
+          type: string
+      required:
+      - name
+      type: object
+    ZeustypesPostableProfile:
+      properties:
+        existing_observability_tool:
+          type: string
+        has_existing_observability_tool:
+          type: boolean
+        logs_scale_per_day_in_gb:
+          type: integer
+        number_of_hosts:
+          type: integer
+        number_of_services:
+          type: integer
+        reasons_for_interest_in_signoz:
+          items:
+            type: string
+          nullable: true
+          type: array
+        timeline_for_migrating_to_signoz:
+          type: string
+        uses_otel:
+          type: boolean
+        where_did_you_discover_signoz:
+          type: string
+      type: object
   securitySchemes:
     api_key:
       description: API Keys

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)$"

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

@@ -45,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -58,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	})
+	}, config)
 
 	if err != nil {
 		return nil, err

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
 	if err != nil {
 		return nil, err
 	}

ee/zeus/httpzeus/provider.go

@@ -3,6 +3,7 @@ package httpzeus
 import (
 	"bytes"
 	"context"
+	"encoding/json"
 	"io"
 	"net/http"
 	"net/url"
@@ -10,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/http/client"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/tidwall/gjson"
 )
@@ -119,8 +121,13 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
-func (provider *Provider) PutProfile(ctx context.Context, key string, body []byte) error {
-	_, err := provider.do(
+func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
+	body, err := json.Marshal(profile)
+	if err != nil {
+		return err
+	}
+
+	_, err = provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/profiles/me"),
 		http.MethodPut,
@@ -131,10 +138,15 @@ func (provider *Provider) PutProfile(ctx context.Context, key string, body []byt
 	return err
 }
 
-func (provider *Provider) PutHost(ctx context.Context, key string, body []byte) error {
-	_, err := provider.do(
+func (provider *Provider) PutHost(ctx context.Context, key string, host *zeustypes.PostableHost) error {
+	body, err := json.Marshal(host)
+	if err != nil {
+		return err
+	}
+
+	_, err = provider.do(
 		ctx,
-		provider.config.URL.JoinPath("/v2/deployments/me/hosts"),
+		provider.config.URL.JoinPath("/v2/deployments/me/host"),
 		http.MethodPut,
 		key,
 		body,
@@ -183,6 +195,8 @@ func (provider *Provider) errFromStatusCode(statusCode int) error {
 		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "forbidden")
 	case http.StatusNotFound:
 		return errors.Newf(errors.TypeNotFound, errors.CodeNotFound, "not found")
+	case http.StatusConflict:
+		return errors.Newf(errors.TypeAlreadyExists, errors.CodeAlreadyExists, "already exists")
 	}
 
 	return errors.Newf(errors.TypeInternal, errors.CodeInternal, "internal")

frontend/package.json

@@ -55,6 +55,7 @@
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
+		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/table": "0.3.7",

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

@@ -1542,6 +1542,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	id?: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
 	/**
 	 * @type string
 	 */

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -73,7 +73,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'time_series',
 			data: { results: [timeSeries] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		const params = makeBaseParams('time_series', [
@@ -156,7 +156,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		const params = makeBaseParams('scalar', [
@@ -239,7 +239,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
 		};
 
 		const params = makeBaseParams('scalar', [

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

@@ -388,6 +388,7 @@ export function convertV5ResponseToLegacy(
 					warnings: v5Data?.data?.warning || [],
 				},
 				warning: v5Data?.warning || undefined,
+				meta: v5Data?.meta,
 			},
 			warning: v5Data?.warning || undefined,
 		};
@@ -406,6 +407,7 @@ export function convertV5ResponseToLegacy(
 		payload: {
 			data: convertedData,
 			warning: v5Response.payload?.data?.warning || undefined,
+			meta: v5Data?.meta,
 		},
 	};
 

frontend/src/auto-import-registry.d.ts

@@ -21,6 +21,7 @@ import '@signozhq/design-tokens';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
+import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/table';

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -78,12 +78,10 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 describe('VariableItem Integration Tests', () => {
 	let user: ReturnType<typeof userEvent.setup>;
 	let mockOnValueUpdate: jest.Mock;
-	let mockSetVariablesToGetUpdated: jest.Mock;
 
 	beforeEach(() => {
 		user = userEvent.setup();
 		mockOnValueUpdate = jest.fn();
-		mockSetVariablesToGetUpdated = jest.fn();
 		jest.clearAllMocks();
 	});
 
@@ -102,9 +100,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -150,9 +145,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -195,9 +187,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -247,9 +236,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -272,9 +258,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -308,9 +291,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -344,9 +324,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -369,9 +346,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -405,9 +379,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -461,9 +432,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -508,9 +476,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -548,9 +513,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -582,9 +544,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -282,11 +282,11 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 						size="small"
 						style={{ marginLeft: 'auto' }}
 						checked={showIP ?? true}
-						onClick={(): void => {
+						onChange={(checked): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
-								showIP: !(showIP ?? true),
+								showIP: checked,
 							});
-							setParams({ showIP });
+							setParams({ showIP: checked });
 						}}
 					/>
 				</div>

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,4 +1,8 @@
 import { ENVIRONMENT } from 'constants/env';
+import {
+	ApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -18,10 +22,15 @@ import { QuickFiltersConfig } from './constants';
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
+jest.mock('container/ApiMonitoring/queryParams');
 
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
+const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
+	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void
+>;
+const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
@@ -84,6 +93,28 @@ TestQuickFilters.defaultProps = {
 	config: QuickFiltersConfig,
 };
 
+function TestQuickFiltersApiMonitoring({
+	signal = SignalType.LOGS,
+	config = QuickFiltersConfig,
+}: {
+	signal?: SignalType;
+	config?: IQuickFiltersConfig[];
+}): JSX.Element {
+	return (
+		<QuickFilters
+			source={QuickFiltersSource.API_MONITORING}
+			config={config}
+			handleFilterVisibilityChange={handleFilterVisibilityChange}
+			signal={signal}
+		/>
+	);
+}
+
+TestQuickFiltersApiMonitoring.defaultProps = {
+	signal: '',
+	config: QuickFiltersConfig,
+};
+
 beforeAll(() => {
 	server.listen();
 });
@@ -112,6 +143,10 @@ beforeEach(() => {
 		lastUsedQuery: 0,
 		redirectWithQueryBuilderData,
 	});
+	mockUseApiMonitoringParams.mockReturnValue([
+		{ showIP: true } as ApiMonitoringParams,
+		mockSetApiMonitoringParams,
+	]);
 	setupServer();
 });
 
@@ -251,6 +286,24 @@ describe('Quick Filters', () => {
 			);
 		});
 	});
+	it('toggles Show IP addresses and updates API Monitoring params', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		render(<TestQuickFiltersApiMonitoring />);
+
+		// Switch should be rendered and initially checked
+		expect(screen.getByText('Show IP addresses')).toBeInTheDocument();
+		const toggle = screen.getByRole('switch');
+		expect(toggle).toHaveAttribute('aria-checked', 'true');
+
+		await user.click(toggle);
+
+		await waitFor(() => {
+			expect(mockSetApiMonitoringParams).toHaveBeenCalledWith(
+				expect.objectContaining({ showIP: false }),
+			);
+		});
+	});
 });
 
 describe('Quick Filters with custom filters', () => {

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -9,74 +9,6 @@
 		padding: 0px;
 	}
 
-	.dashboard-header {
-		border-bottom: 1px solid var(--bg-slate-400);
-		display: flex;
-		justify-content: space-between;
-		gap: 16px;
-		align-items: center;
-		padding: 0 8px;
-		box-sizing: border-box;
-
-		.dashboard-breadcrumbs {
-			width: 100%;
-			height: 48px;
-			display: flex;
-			gap: 6px;
-			align-items: center;
-			max-width: 80%;
-
-			.dashboard-btn {
-				display: flex;
-				align-items: center;
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				padding: 0px;
-				height: 20px;
-			}
-
-			.dashboard-btn:hover {
-				background-color: unset;
-			}
-
-			.id-btn {
-				display: flex;
-				align-items: center;
-				padding: 0px 2px;
-				border-radius: 2px;
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				height: 20px;
-
-				max-width: calc(100% - 120px);
-
-				span {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-
-				.ant-btn-icon {
-					margin-inline-end: 4px;
-				}
-			}
-			.id-btn:hover {
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-300);
-			}
-		}
-	}
-
 	.dashboard-details {
 		display: flex;
 		justify-content: space-between;
@@ -535,15 +467,6 @@
 	.dashboard-description-container {
 		color: var(--bg-ink-400);
 
-		.dashboard-header {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-			.dashboard-breadcrumbs {
-				.dashboard-btn {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
 		.dashboard-details {
 			.left-section {
 				.dashboard-title {

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

@@ -16,9 +16,7 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -27,7 +25,6 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import {
 	Check,
@@ -37,7 +34,6 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
-	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -51,6 +47,7 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
@@ -71,7 +68,6 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -80,7 +76,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
-		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -292,17 +287,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
-	function goToListPage(): void {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
-
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}
-
 	const {
 		data: publicDashboardResponse,
 		isLoading: isLoadingPublicDashboardData,
@@ -351,32 +335,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<div className="dashboard-header">
-				<section className="dashboard-breadcrumbs">
-					<Button
-						type="text"
-						icon={<LayoutGrid size={14} />}
-						className="dashboard-btn"
-						onClick={(): void => goToListPage()}
-					>
-						Dashboard /
-					</Button>
-					<Button type="text" className="id-btn dashboard-name-btn">
-						<img
-							src={image}
-							alt="dashboard-icon"
-							style={{ height: '14px', width: '14px' }}
-						/>
-						{title}
-					</Button>
-				</section>
-
-				<HeaderRightSection
-					enableAnnouncements={false}
-					enableShare
-					enableFeedback
-				/>
-			</div>
+			<DashboardHeader />
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

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

@@ -9,11 +9,15 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import {
+	enqueueDescendantsOfVariable,
+	enqueueFetchOfAllVariables,
+	initializeVariableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -22,8 +26,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
-		variablesToGetUpdated,
-		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -55,11 +57,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Trigger refetch when dependency order changes or global time changes
+	// Initialize fetch store then start a new fetch cycle.
+	// Runs on dependency order changes, and time range changes.
 	useEffect(() => {
-		if (dependencyData?.order && dependencyData.order.length > 0) {
-			setVariablesToGetUpdated(dependencyData?.order || []);
-		}
+		const allVariableNames = sortedVariablesArray
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		initializeVariableFetchStore(allVariableNames);
+		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -121,29 +126,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			if (dependencyData) {
-				const updatedVariables: string[] = [];
-				onUpdateVariableNode(
-					name,
-					dependencyData.graph,
-					dependencyData.order,
-					(node) => updatedVariables.push(node),
-				);
-				setVariablesToGetUpdated((prev) => [
-					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
-				]);
-			} else {
-				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
-			}
+			// Cascade: enqueue query-type descendants for refetching
+			enqueueDescendantsOfVariable(name);
 		},
 		[
-			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
-			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
-			setVariablesToGetUpdated,
 		],
 	);
 
@@ -158,9 +148,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 						existingVariables={dashboardVariables}
 						variableData={variable}
 						onValueUpdate={onValueUpdate}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
 					/>
 				);
 			})}

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

@@ -2,18 +2,25 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
-import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
+import { SuccessResponseV2 } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { getOptionsForDynamicVariable } from './util';
+import {
+	buildExistingDynamicVariableQuery,
+	extractErrorMessage,
+	getOptionsForDynamicVariable,
+	mergeUniqueStrings,
+	settleVariableFetch,
+} from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -24,7 +31,6 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -55,14 +61,8 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
-	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
+		() => mergeUniqueStrings(optionsData, relatedValues),
 		[optionsData, relatedValues],
 	);
 
@@ -104,67 +104,24 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	// existing query is the query made from the other dynamic variables around this one with there current values
-	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
+	const {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
 
-		const queryParts: string[] = [];
-
-		Object.entries(existingVariables).forEach(([, variable]) => {
-			// Skip the current variable being processed
-			if (variable.id === variableData.id) {
-				return;
-			}
-
-			// Only include dynamic variables that have selected values and are not selected as ALL
-			if (
-				variable.type === 'DYNAMIC' &&
-				variable.dynamicVariablesAttribute &&
-				variable.selectedValue &&
-				!isEmpty(variable.selectedValue) &&
-				(variable.showALLOption ? !variable.allSelected : true)
-			) {
-				const attribute = variable.dynamicVariablesAttribute;
-				const values = Array.isArray(variable.selectedValue)
-					? variable.selectedValue
-					: [variable.selectedValue];
-
-				// Filter out empty values and convert to strings
-				const validValues = values
-					.filter((val) => val !== null && val !== undefined && val !== '')
-					.map((val) => val.toString());
-
-				if (validValues.length > 0) {
-					// Format values for query - wrap strings in quotes, keep numbers as is
-					const formattedValues = validValues.map((val) => {
-						// Check if value is a number
-						const numValue = Number(val);
-						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-							return val; // Keep as number
-						}
-						// Escape single quotes and wrap in quotes
-						return `'${val.replace(/'/g, "\\'")}'`;
-					});
-
-					if (formattedValues.length === 1) {
-						queryParts.push(`${attribute} = ${formattedValues[0]}`);
-					} else {
-						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
-					}
-				}
-			}
-		});
-
-		return queryParts.join(' AND ');
-	}, [
-		existingVariables,
-		variableData.id,
-		variableData.dynamicVariablesAttribute,
-	]);
+	const existingQuery = useMemo(
+		() =>
+			buildExistingDynamicVariableQuery(
+				existingVariables,
+				variableData.id,
+				!!variableData.dynamicVariablesAttribute,
+			),
+		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
+	);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -182,6 +139,73 @@ function DynamicVariableInput({
 		[onDropdownVisibleChange, optionsData, originalRelatedValues],
 	);
 
+	const handleQuerySuccess = useCallback(
+		(data: SuccessResponseV2<FieldValueResponse>): void => {
+			const newNormalizedValues = data.data?.normalizedValues || [];
+			const newRelatedValues = data.data?.relatedValues || [];
+
+			if (!debouncedApiSearchText) {
+				setOptionsData(newNormalizedValues);
+				setIsComplete(data.data?.complete || false);
+			}
+			setFilteredOptionsData(newNormalizedValues);
+			setRelatedValues(newRelatedValues);
+			setOriginalRelatedValues(newRelatedValues);
+
+			// Sync temp selection with latest API values when ALL is active and dropdown is open
+			if (variableData.allSelected && isDropdownOpen) {
+				const latestValues = mergeUniqueStrings(
+					newNormalizedValues,
+					newRelatedValues,
+				);
+
+				const currentStrings = Array.isArray(tempSelection)
+					? tempSelection.map((v) => v.toString())
+					: tempSelection
+					? [tempSelection.toString()]
+					: [];
+
+				const areSame =
+					currentStrings.length === latestValues.length &&
+					latestValues.every((v) => currentStrings.includes(v));
+
+				if (!areSame) {
+					setTempSelection(latestValues);
+				}
+			}
+
+			// Apply default if no value is selected (e.g., new variable, first load)
+			if (!debouncedApiSearchText) {
+				applyDefaultIfNeeded(
+					mergeUniqueStrings(newNormalizedValues, newRelatedValues),
+				);
+			}
+
+			settleVariableFetch(variableData.name, 'complete');
+		},
+		[
+			debouncedApiSearchText,
+			variableData.allSelected,
+			variableData.name,
+			isDropdownOpen,
+			tempSelection,
+			setTempSelection,
+			applyDefaultIfNeeded,
+		],
+	);
+
+	const handleQueryError = useCallback(
+		(error: { message?: string } | null): void => {
+			if (error) {
+				setErrorMessage(extractErrorMessage(error));
+				setIsRetryableError(checkIfRetryableError(error));
+			}
+
+			settleVariableFetch(variableData.name, 'failure');
+		},
+		[variableData.name],
+	);
+
 	const { isLoading, refetch } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -192,13 +216,22 @@ function DynamicVariableInput({
 			debouncedApiSearchText,
 			variableData.dynamicVariablesSource,
 			variableData.dynamicVariablesAttribute,
+			variableFetchCycleId,
 		],
 		{
+			/*
+			 * enabled if
+			 * - we have dynamic variable source and attribute defined (ALWAYS)
+			 * - AND
+			 *   - we're either still fetching variable options
+			 *   - OR
+			 *   - if variable is in idle state and we have already fetched options for it
+			 **/
 			enabled:
-				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute,
-			queryFn: () =>
+				!!variableData.dynamicVariablesAttribute &&
+				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			queryFn: ({ signal }) =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -211,70 +244,10 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
+					signal,
 				),
-			onSuccess: (data) => {
-				const newNormalizedValues = data.data?.normalizedValues || [];
-				const newRelatedValues = data.data?.relatedValues || [];
-
-				if (!debouncedApiSearchText) {
-					setOptionsData(newNormalizedValues);
-					setIsComplete(data.data?.complete || false);
-				}
-				setFilteredOptionsData(newNormalizedValues);
-				setRelatedValues(newRelatedValues);
-				setOriginalRelatedValues(newRelatedValues);
-
-				// Only run auto-check logic when necessary to avoid performance issues
-				if (variableData.allSelected && isDropdownOpen) {
-					// Build the latest full list from API (normalized + related)
-					const latestValues = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					// Update temp selection to exactly reflect latest API values when ALL is active
-					const currentStrings = Array.isArray(tempSelection)
-						? tempSelection.map((v) => v.toString())
-						: tempSelection
-						? [tempSelection.toString()]
-						: [];
-					const areSame =
-						currentStrings.length === latestValues.length &&
-						latestValues.every((v) => currentStrings.includes(v));
-					if (!areSame) {
-						setTempSelection(latestValues);
-					}
-				}
-
-				// Apply default if no value is selected (e.g., new variable, first load)
-				if (!debouncedApiSearchText) {
-					const allNewOptions = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-					applyDefaultIfNeeded(allNewOptions);
-				}
-			},
-			onError: (error: any) => {
-				if (error) {
-					let message = SOMETHING_WENT_WRONG;
-					if (error?.message) {
-						message = error?.message;
-					} else {
-						message =
-							'Please make sure configuration is valid and you have required setup and permissions';
-					}
-					setErrorMessage(message);
-
-					// Check if error is retryable (5xx) or not (4xx)
-					const isRetryable = checkIfRetryableError(error);
-					setIsRetryableError(isRetryable);
-				}
-			},
+			onSuccess: handleQuerySuccess,
+			onError: handleQueryError,
 		},
 	);
 
@@ -336,6 +309,8 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

@@ -3,8 +3,9 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isString } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -12,26 +13,18 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, checkAPIInvocation } from './util';
+import { areArraysEqual, settleVariableFetch } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	| 'variableData'
-	| 'existingVariables'
-	| 'onValueUpdate'
-	| 'variablesToGetUpdated'
-	| 'setVariablesToGetUpdated'
-	| 'dependencyData'
+	'variableData' | 'existingVariables' | 'onValueUpdate'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -43,6 +36,15 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
+	const {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
+
 	const {
 		tempSelection,
 		setTempSelection,
@@ -60,16 +62,6 @@ function QueryVariableInput({
 		strategy: queryVariableSelectStrategy,
 	});
 
-	const validVariableUpdate = useCallback((): boolean => {
-		if (!variableData.name) {
-			return false;
-		}
-		return Boolean(
-			variablesToGetUpdated.length &&
-				variablesToGetUpdated[0] === variableData.name,
-		);
-	}, [variableData.name, variablesToGetUpdated]);
-
 	const getOptions = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(variablesRes: VariableResponseProps | null): void => {
@@ -103,18 +95,24 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						// variablesData.allSelected is added for the case where on change of options we need to update the
-						// local storage
-						if (
-							variableData.name &&
-							(validVariableUpdate() || valueNotInList || variableData.allSelected)
-						) {
+						if (variableData.name && (valueNotInList || variableData.allSelected)) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(
+										variableData.name,
+										variableData.id,
+										newOptionsData,
+										true,
+									);
+								}
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -132,7 +130,11 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (variableData.name && variableData.id) {
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -141,10 +143,6 @@ function QueryVariableInput({
 						setOptionsData(newOptionsData);
 						// Apply default if no value is selected (e.g., new variable, first load)
 						applyDefaultIfNeeded(newOptionsData);
-					} else {
-						setVariablesToGetUpdated((prev) =>
-							prev.filter((name) => name !== variableData.name),
-						);
 					}
 				}
 			} catch (e) {
@@ -157,8 +155,6 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			validVariableUpdate,
-			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -169,27 +165,28 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			JSON.stringify(dependencyData?.order),
+			variableFetchCycleId,
 		],
 		{
-			enabled:
-				variableData &&
-				checkAPIInvocation(
-					variablesToGetUpdated,
-					variableData,
-					dependencyData?.parentDependencyGraph,
+			/*
+			 * enabled if
+			 *   - we're either still fetching variable options
+			 *   - OR
+			 *   - if variable is in idle state and we have already fetched options for it
+			 **/
+			enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
+			queryFn: ({ signal }) =>
+				dashboardVariablesQuery(
+					{
+						query: variableData.queryValue || '',
+						variables: variablePropsToPayloadVariables(existingVariables),
+					},
+					signal,
 				),
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableData.queryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'complete');
 			},
 			onError: (error: {
 				details: {
@@ -206,9 +203,7 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'failure');
 			},
 		},
 	);
@@ -242,6 +237,8 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

@@ -28,6 +28,8 @@ interface SelectVariableInputProps {
 	showRetryButton?: boolean;
 	showIncompleteDataMessage?: boolean;
 	onSearch?: (searchTerm: string) => void;
+	waiting?: boolean;
+	waitingMessage?: string;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
@@ -65,6 +67,7 @@ function SelectVariableInput({
 	showRetryButton,
 	showIncompleteDataMessage,
 	onSearch,
+	waitingMessage,
 }: SelectVariableInputProps): JSX.Element {
 	const commonProps = useMemo(
 		() => ({
@@ -78,7 +81,6 @@ function SelectVariableInput({
 			className: 'variable-select',
 			popupClassName: 'dropdown-styles',
 			getPopupContainer: popupContainer,
-			style: SelectItemStyle,
 			showSearch: true,
 			bordered: false,
 
@@ -86,6 +88,8 @@ function SelectVariableInput({
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
+			waitingMessage,
+			style: SelectItemStyle,
 			options,
 			errorMessage,
 			onRetry,
@@ -101,6 +105,7 @@ function SelectVariableInput({
 			defaultValue,
 			onChange,
 			loading,
+			waitingMessage,
 			options,
 			value,
 			errorMessage,

frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.test.tsx

@@ -47,14 +47,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -69,14 +61,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -92,14 +76,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -133,14 +109,6 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -163,14 +131,6 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -185,14 +145,6 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);

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

@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -21,18 +20,12 @@ export interface VariableItemProps {
 		allSelected: boolean,
 		haveCustomValuesSelected?: boolean,
 	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
-	dependencyData: IDependencyData | null;
 }
 
 function VariableItem({
 	variableData,
 	onValueUpdate,
 	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
 }: VariableItemProps): JSX.Element {
 	const { name, description, type: variableType } = variableData;
 
@@ -65,9 +58,6 @@ function VariableItem({
 						variableData={variableData}
 						onValueUpdate={onValueUpdate}
 						existingVariables={existingVariables}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
 					/>
 				)}
 				{variableType === 'DYNAMIC' && (

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

@@ -7,6 +7,19 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DynamicVariableInput';
 
+// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
+jest.mock('hooks/dashboard/useVariableFetchState', () => ({
+	useVariableFetchState: (): Record<string, unknown> => ({
+		variableFetchCycleId: 0,
+		variableFetchState: 'loading',
+		isVariableSettled: false,
+		isVariableFetching: true,
+		hasVariableFetchedOnce: false,
+		isVariableWaitingForDependencies: false,
+		variableDependencyWaitMessage: '',
+	}),
+}));
+
 // Don't mock the components - use real ones
 
 // Mock for useQuery
@@ -217,9 +230,10 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
+				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // Type is 'DYNAMIC'
+				enabled: true, // isVariableFetching is true from mock
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -8,14 +8,6 @@ import '@testing-library/jest-dom/extend-expect';
 import VariableItem from '../VariableItem';
 
 const mockOnValueUpdate = jest.fn();
-const mockSetVariablesToGetUpdated = jest.fn();
-
-const baseDependencyData = {
-	order: [],
-	graph: {},
-	parentDependencyGraph: {},
-	hasCycle: false,
-};
 
 const TEST_VARIABLE_ID = 'test_variable';
 const VARIABLE_SELECT_TESTID = 'variable-select';
@@ -31,9 +23,6 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
-				variablesToGetUpdated={[]}
-				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx

@@ -2,14 +2,12 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
-	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
-	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -72,97 +70,6 @@ describe('dashboardVariables - utilities and processors', () => {
 		});
 	});
 
-	describe('checkAPIInvocation', () => {
-		const {
-			variablesToGetUpdated,
-			variableData,
-			parentDependencyGraph,
-		} = checkAPIInvocationMock;
-
-		const mockRootElement = {
-			name: 'deployment_environment',
-			key: '036a47cd-9ffc-47de-9f27-0329198964a8',
-			id: '036a47cd-9ffc-47de-9f27-0329198964a8',
-			modificationUUID: '5f71b591-f583-497c-839d-6a1590c3f60f',
-			selectedValue: 'production',
-			type: 'QUERY',
-			// ... other properties omitted for brevity
-		} as any;
-
-		describe('edge cases', () => {
-			it('should return false when variableData is empty', () => {
-				expect(
-					checkAPIInvocation(
-						variablesToGetUpdated,
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-
-			it('should return true when parentDependencyGraph is empty', () => {
-				expect(
-					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
-				).toBeFalsy();
-			});
-		});
-
-		describe('variable sequences', () => {
-			it('should return true for valid sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['k8s_node_name', 'k8s_namespace_name'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeTruthy();
-			});
-
-			it('should return false for invalid sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['k8s_cluster_name', 'k8s_node_name', 'k8s_namespace_name'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-
-			it('should return false when variableData is not in sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['deployment_environment', 'service_name', 'endpoint'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-		});
-
-		describe('root element behavior', () => {
-			it('should return true for valid root element sequence', () => {
-				expect(
-					checkAPIInvocation(
-						[
-							'deployment_environment',
-							'service_name',
-							'endpoint',
-							'http_status_code',
-						],
-						mockRootElement,
-						parentDependencyGraph,
-					),
-				).toBeTruthy();
-			});
-
-			it('should return true for empty variablesToGetUpdated array', () => {
-				expect(
-					checkAPIInvocation([], mockRootElement, parentDependencyGraph),
-				).toBeTruthy();
-			});
-		});
-	});
-
 	describe('Graph Building Utilities', () => {
 		const { graph } = buildGraphMock;
 		const { variables } = buildDependenciesMock;
@@ -223,10 +130,86 @@ describe('dashboardVariables - utilities and processors', () => {
 					},
 					hasCycle: false,
 					cycleNodes: undefined,
+					transitiveDescendants: {
+						deployment_environment: ['service_name', 'endpoint', 'http_status_code'],
+						endpoint: ['http_status_code'],
+						environment: [],
+						http_status_code: [],
+						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
+						k8s_namespace_name: [],
+						k8s_node_name: ['k8s_namespace_name'],
+						service_name: ['endpoint', 'http_status_code'],
+					},
 				};
 
 				expect(buildDependencyGraph(graph)).toEqual(expected);
 			});
+
+			it('should return empty transitiveDescendants for an empty graph', () => {
+				const result = buildDependencyGraph({});
+				expect(result.transitiveDescendants).toEqual({});
+				expect(result.order).toEqual([]);
+				expect(result.hasCycle).toBe(false);
+			});
+
+			it('should compute transitiveDescendants for a linear chain (a -> b -> c)', () => {
+				const linearGraph: VariableGraph = {
+					a: ['b'],
+					b: ['c'],
+					c: [],
+				};
+				const result = buildDependencyGraph(linearGraph);
+				expect(result.transitiveDescendants).toEqual({
+					a: ['b', 'c'],
+					b: ['c'],
+					c: [],
+				});
+			});
+
+			it('should compute transitiveDescendants for a diamond dependency (a -> b, a -> c, b -> d, c -> d)', () => {
+				const diamondGraph: VariableGraph = {
+					a: ['b', 'c'],
+					b: ['d'],
+					c: ['d'],
+					d: [],
+				};
+				const result = buildDependencyGraph(diamondGraph);
+				expect(result.transitiveDescendants.a).toEqual(
+					expect.arrayContaining(['b', 'c', 'd']),
+				);
+				expect(result.transitiveDescendants.a).toHaveLength(3);
+				expect(result.transitiveDescendants.b).toEqual(['d']);
+				expect(result.transitiveDescendants.c).toEqual(['d']);
+				expect(result.transitiveDescendants.d).toEqual([]);
+			});
+
+			it('should handle disconnected components in transitiveDescendants', () => {
+				const disconnectedGraph: VariableGraph = {
+					a: ['b'],
+					b: [],
+					x: ['y'],
+					y: [],
+				};
+				const result = buildDependencyGraph(disconnectedGraph);
+				expect(result.transitiveDescendants.a).toEqual(['b']);
+				expect(result.transitiveDescendants.b).toEqual([]);
+				expect(result.transitiveDescendants.x).toEqual(['y']);
+				expect(result.transitiveDescendants.y).toEqual([]);
+			});
+
+			it('should return empty transitiveDescendants for all leaf nodes', () => {
+				const leafOnlyGraph: VariableGraph = {
+					a: [],
+					b: [],
+					c: [],
+				};
+				const result = buildDependencyGraph(leafOnlyGraph);
+				expect(result.transitiveDescendants).toEqual({
+					a: [],
+					b: [],
+					c: [],
+				});
+			});
 		});
 
 		describe('buildDependencies', () => {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/mock.ts

@@ -1,36 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-export const checkAPIInvocationMock = {
-	variablesToGetUpdated: [],
-	variableData: {
-		name: 'k8s_node_name',
-		key: '4d71d385-beaf-4434-8dbf-c62be68049fc',
-		allSelected: false,
-		customValue: '',
-		description: '',
-		id: '4d71d385-beaf-4434-8dbf-c62be68049fc',
-		modificationUUID: '77233d3c-96d7-4ccb-aa9d-11b04d563068',
-		multiSelect: false,
-		order: 6,
-		queryValue:
-			"SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}\nGROUP BY k8s_node_name",
-		selectedValue: 'gke-signoz-saas-si-consumer-bsc-e2sd4-a6d430fa-gvm2',
-		showALLOption: false,
-		sort: 'DISABLED',
-		textboxValue: '',
-		type: 'QUERY',
-	},
-	parentDependencyGraph: {
-		deployment_environment: [],
-		service_name: ['deployment_environment'],
-		endpoint: ['deployment_environment', 'service_name'],
-		http_status_code: ['endpoint'],
-		k8s_cluster_name: [],
-		environment: [],
-		k8s_node_name: ['k8s_cluster_name'],
-		k8s_namespace_name: ['k8s_cluster_name', 'k8s_node_name'],
-	},
-} as any;
-
 export const onUpdateVariableNodeMock = {
 	nodeToUpdate: 'deployment_environment',
 	graph: {

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

@@ -1,9 +1,16 @@
 import { OptionData } from 'components/NewSelect/types';
-import { isEmpty, isNull } from 'lodash-es';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
+import { isEmpty } from 'lodash-es';
 import {
 	IDashboardVariables,
 	IDependencyData,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import {
+	onVariableFetchComplete,
+	onVariableFetchFailure,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -45,30 +52,16 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		?.map((variable: any) => {
+		.map((variable) => {
 			if (variable.type === 'QUERY') {
-				// Combined pattern for all formats
-				// {{.variable_name}} - original format
-				// $variable_name - dollar prefix format
-				// [[variable_name]] - square bracket format
-				// {{variable_name}} - without dot format
-				const patterns = [
-					`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`, // {{.var}}
-					`\\{\\{\\s*${variableName}\\s*\\}\\}`, // {{var}}
-					`\\$${variableName}\\b`, // $var
-					`\\[\\[\\s*${variableName}\\s*\\]\\]`, // [[var]]
-				];
-				const combinedRegex = new RegExp(patterns.join('|'));
-
 				const queryValue = variable.queryValue || '';
-				const dependVarReMatch = queryValue.match(combinedRegex);
-				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+				if (textContainsVariableReference(queryValue, variableName)) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val: string | null) => !isNull(val));
+		.filter((val): val is string => val !== null);
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -246,10 +239,26 @@ export const buildDependencyGraph = (
 
 	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
+	// Pre-compute transitive descendants by walking topological order in reverse.
+	// Each node's transitive descendants = direct children + their transitive descendants.
+	const transitiveDescendants: VariableGraph = {};
+	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
+		const node = topologicalOrder[i];
+		const desc = new Set<string>();
+		for (const child of adjList[node] || []) {
+			desc.add(child);
+			for (const d of transitiveDescendants[child] || []) {
+				desc.add(d);
+			}
+		}
+		transitiveDescendants[node] = Array.from(desc);
+	}
+
 	return {
 		order: topologicalOrder,
 		graph: adjList,
 		parentDependencyGraph: buildParentDependencyGraph(adjList),
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
@@ -284,33 +293,6 @@ export const onUpdateVariableNode = (
 	});
 };
 
-export const checkAPIInvocation = (
-	variablesToGetUpdated: string[],
-	variableData: IDashboardVariable,
-	parentDependencyGraph?: VariableGraph,
-): boolean => {
-	if (isEmpty(variableData.name)) {
-		return false;
-	}
-
-	if (isEmpty(parentDependencyGraph)) {
-		return false;
-	}
-
-	// if no dependency then true
-	const haveDependency =
-		parentDependencyGraph?.[variableData.name || '']?.length > 0;
-	if (!haveDependency) {
-		return true;
-	}
-
-	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
-	return (
-		variablesToGetUpdated.length > 0 &&
-		variablesToGetUpdated[0] === variableData.name
-	);
-};
-
 export const getOptionsForDynamicVariable = (
 	normalizedValues: (string | number | boolean)[],
 	relatedValues: string[],
@@ -375,3 +357,130 @@ export const getSelectValue = (
 	}
 	return selectedValue?.toString();
 };
+
+/**
+ * Merges multiple arrays of values into a single deduplicated string array.
+ */
+export function mergeUniqueStrings(
+	...arrays: (string | number | boolean)[][]
+): string[] {
+	return [...new Set(arrays.flatMap((arr) => arr.map((v) => v.toString())))];
+}
+
+function isEligibleFilterVariable(
+	variable: IDashboardVariable,
+	currentVariableId: string,
+): boolean {
+	if (variable.id === currentVariableId) {
+		return false;
+	}
+	if (variable.type !== 'DYNAMIC') {
+		return false;
+	}
+	if (!variable.dynamicVariablesAttribute) {
+		return false;
+	}
+	if (!variable.selectedValue || isEmpty(variable.selectedValue)) {
+		return false;
+	}
+	return !(variable.showALLOption && variable.allSelected);
+}
+
+function formatQueryValue(val: string): string {
+	const numValue = Number(val);
+	if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+		return val;
+	}
+	return `'${val.replace(/'/g, "\\'")}'`;
+}
+
+function buildQueryPart(attribute: string, values: string[]): string {
+	const formatted = values.map(formatQueryValue);
+	if (formatted.length === 1) {
+		return `${attribute} = ${formatted[0]}`;
+	}
+	return `${attribute} IN [${formatted.join(', ')}]`;
+}
+
+/**
+ * Builds a filter query string from sibling dynamic variables' selected values.
+ * e.g. `k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'`
+ */
+export function buildExistingDynamicVariableQuery(
+	existingVariables: IDashboardVariables | null,
+	currentVariableId: string,
+	hasDynamicAttribute: boolean,
+): string {
+	if (!existingVariables || !hasDynamicAttribute) {
+		return '';
+	}
+
+	const queryParts: string[] = [];
+
+	for (const variable of Object.values(existingVariables)) {
+		// Skip the current variable being processed
+		if (!isEligibleFilterVariable(variable, currentVariableId)) {
+			continue;
+		}
+
+		const rawValues = Array.isArray(variable.selectedValue)
+			? variable.selectedValue
+			: [variable.selectedValue];
+
+		// Filter out empty values and convert to strings
+		const validValues = rawValues
+			.filter(
+				(val): val is string | number | boolean =>
+					val !== null && val !== undefined && val !== '',
+			)
+			.map((val) => val.toString());
+
+		if (validValues.length > 0 && variable.dynamicVariablesAttribute) {
+			queryParts.push(
+				buildQueryPart(variable.dynamicVariablesAttribute, validValues),
+			);
+		}
+	}
+
+	return queryParts.join(' AND ');
+}
+
+function isVariableInActiveFetchState(state: string | undefined): boolean {
+	return state === 'loading' || state === 'revalidating';
+}
+
+/**
+ * Completes or fails a variable's fetch state machine transition.
+ * No-ops if the variable is not currently in an active fetch state.
+ */
+export function settleVariableFetch(
+	name: string | undefined,
+	outcome: 'complete' | 'failure',
+): void {
+	if (!name) {
+		return;
+	}
+
+	const currentState = variableFetchStore.getSnapshot().states[name];
+	if (!isVariableInActiveFetchState(currentState)) {
+		return;
+	}
+
+	if (outcome === 'complete') {
+		onVariableFetchComplete(name);
+	} else {
+		onVariableFetchFailure(name);
+	}
+}
+
+export function extractErrorMessage(
+	error: { message?: string } | null,
+): string {
+	if (!error) {
+		return SOMETHING_WENT_WRONG;
+	}
+	return (
+		error.message ||
+		'Please make sure configuration is valid and you have required setup and permissions'
+	);
+}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/utils.test.ts

@@ -1,4 +1,31 @@
-import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
+jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
+	variableFetchStore: {
+		getSnapshot: jest.fn(),
+	},
+	onVariableFetchComplete: jest.fn(),
+	onVariableFetchFailure: jest.fn(),
+}));
+
+import {
+	onVariableFetchComplete,
+	onVariableFetchFailure,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import {
+	areArraysEqual,
+	buildExistingDynamicVariableQuery,
+	extractErrorMessage,
+	mergeUniqueStrings,
+	onUpdateVariableNode,
+	settleVariableFetch,
+	VariableGraph,
+} from './util';
+
+// ────────────────────────────────────────────────────────────────
+// Existing tests
+// ────────────────────────────────────────────────────────────────
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -149,3 +176,348 @@ describe('onUpdateVariableNode', () => {
 		expect(visited).toEqual(['namespace', 'service', 'pod']);
 	});
 });
+
+// ────────────────────────────────────────────────────────────────
+// New tests for functions added in recent commits
+// ────────────────────────────────────────────────────────────────
+
+function makeDynamicVar(
+	overrides: Partial<IDashboardVariable> & { id: string },
+): IDashboardVariable {
+	return {
+		name: overrides.id,
+		description: '',
+		type: 'DYNAMIC',
+		sort: 'DISABLED',
+		multiSelect: false,
+		showALLOption: false,
+		allSelected: false,
+		dynamicVariablesAttribute: 'attr',
+		selectedValue: 'some-value',
+		...overrides,
+	} as IDashboardVariable;
+}
+
+describe('mergeUniqueStrings', () => {
+	it('should merge two arrays and deduplicate', () => {
+		expect(mergeUniqueStrings(['a', 'b'], ['b', 'c'])).toEqual(['a', 'b', 'c']);
+	});
+
+	it('should convert numbers and booleans to strings', () => {
+		expect(mergeUniqueStrings([1, true, 'hello'], [2, false])).toEqual([
+			'1',
+			'true',
+			'hello',
+			'2',
+			'false',
+		]);
+	});
+
+	it('should deduplicate when number and its string form both appear', () => {
+		expect(mergeUniqueStrings([42], ['42'])).toEqual(['42']);
+	});
+
+	it('should handle a single array', () => {
+		expect(mergeUniqueStrings(['x', 'y', 'x'])).toEqual(['x', 'y']);
+	});
+
+	it('should handle three or more arrays', () => {
+		expect(mergeUniqueStrings(['a'], ['b'], ['c'], ['a', 'c'])).toEqual([
+			'a',
+			'b',
+			'c',
+		]);
+	});
+
+	it('should return empty array when no arrays are provided', () => {
+		expect(mergeUniqueStrings()).toEqual([]);
+	});
+
+	it('should return empty array when all input arrays are empty', () => {
+		expect(mergeUniqueStrings([], [], [])).toEqual([]);
+	});
+
+	it('should preserve order of first occurrence', () => {
+		expect(mergeUniqueStrings(['c', 'a'], ['b', 'a'])).toEqual(['c', 'a', 'b']);
+	});
+});
+
+describe('buildExistingDynamicVariableQuery', () => {
+	// --- Guard clauses ---
+	it('should return empty string when existingVariables is null', () => {
+		expect(buildExistingDynamicVariableQuery(null, 'v1', true)).toBe('');
+	});
+
+	it('should return empty string when hasDynamicAttribute is false', () => {
+		const variables = { v2: makeDynamicVar({ id: 'v2' }) };
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', false)).toBe('');
+	});
+
+	// --- Eligibility filtering ---
+	it('should skip the current variable (same id)', () => {
+		const variables = {
+			v1: makeDynamicVar({
+				id: 'v1',
+				dynamicVariablesAttribute: 'ns',
+				selectedValue: 'prod',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip non-DYNAMIC variables', () => {
+		const variables = {
+			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip variables without dynamicVariablesAttribute', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: undefined,
+				selectedValue: 'val',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip variables with null selectedValue', () => {
+		const variables = {
+			v2: makeDynamicVar({ id: 'v2', selectedValue: null }),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip variables with empty string selectedValue', () => {
+		const variables = {
+			v2: makeDynamicVar({ id: 'v2', selectedValue: '' }),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip variables with empty array selectedValue', () => {
+		const variables = {
+			v2: makeDynamicVar({ id: 'v2', selectedValue: [] }),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should skip variables where showALLOption and allSelected are both true', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				showALLOption: true,
+				allSelected: true,
+				dynamicVariablesAttribute: 'ns',
+				selectedValue: 'prod',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+
+	it('should include variable with showALLOption true but allSelected false', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				showALLOption: true,
+				allSelected: false,
+				dynamicVariablesAttribute: 'ns',
+				selectedValue: 'prod',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"ns = 'prod'",
+		);
+	});
+
+	// --- Value formatting ---
+	it('should quote string values in the query', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'k8s.namespace.name',
+				selectedValue: 'zeus',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"k8s.namespace.name = 'zeus'",
+		);
+	});
+
+	it('should leave numeric values unquoted', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'http.status_code',
+				selectedValue: '200',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			'http.status_code = 200',
+		);
+	});
+
+	it('should escape single quotes in string values', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'user.name',
+				selectedValue: "O'Brien",
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"user.name = 'O\\'Brien'",
+		);
+	});
+
+	it('should build an IN clause for array selectedValue with multiple items', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'k8s.namespace.name',
+				selectedValue: ['zeus', 'gene'],
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"k8s.namespace.name IN ['zeus', 'gene']",
+		);
+	});
+
+	it('should handle mix of numeric and string values in IN clause', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'http.status_code',
+				selectedValue: ['200', 'unknown'],
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"http.status_code IN [200, 'unknown']",
+		);
+	});
+
+	it('should filter out empty string values from array', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'region',
+				selectedValue: ['us-east', '', 'eu-west'],
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"region IN ['us-east', 'eu-west']",
+		);
+	});
+
+	// --- Multiple siblings ---
+	it('should join multiple sibling variables with AND', () => {
+		const variables = {
+			v2: makeDynamicVar({
+				id: 'v2',
+				dynamicVariablesAttribute: 'k8s.namespace.name',
+				selectedValue: ['zeus', 'gene'],
+			}),
+			v3: makeDynamicVar({
+				id: 'v3',
+				dynamicVariablesAttribute: 'doc_op_type',
+				selectedValue: 'test',
+			}),
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
+			"k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'",
+		);
+	});
+
+	it('should return empty string when no variables are eligible', () => {
+		const variables = {
+			v1: makeDynamicVar({ id: 'v1' }), // same as current — skipped
+			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }), // not DYNAMIC
+			v3: makeDynamicVar({ id: 'v3', selectedValue: null }), // no value
+		};
+		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
+	});
+});
+
+describe('settleVariableFetch', () => {
+	const mockGetSnapshot = variableFetchStore.getSnapshot as jest.Mock;
+	const mockComplete = onVariableFetchComplete as jest.Mock;
+	const mockFailure = onVariableFetchFailure as jest.Mock;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should no-op when name is undefined', () => {
+		settleVariableFetch(undefined, 'complete');
+		expect(mockGetSnapshot).not.toHaveBeenCalled();
+		expect(mockComplete).not.toHaveBeenCalled();
+		expect(mockFailure).not.toHaveBeenCalled();
+	});
+
+	it.each(['idle', 'waiting', 'error', undefined] as const)(
+		'should no-op when variable state is %s',
+		(state) => {
+			mockGetSnapshot.mockReturnValue({ states: { myVar: state } });
+			settleVariableFetch('myVar', 'complete');
+			expect(mockComplete).not.toHaveBeenCalled();
+			expect(mockFailure).not.toHaveBeenCalled();
+		},
+	);
+
+	it('should call onVariableFetchComplete when state is loading and outcome is complete', () => {
+		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
+		settleVariableFetch('myVar', 'complete');
+		expect(mockComplete).toHaveBeenCalledWith('myVar');
+		expect(mockFailure).not.toHaveBeenCalled();
+	});
+
+	it('should call onVariableFetchComplete when state is revalidating and outcome is complete', () => {
+		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
+		settleVariableFetch('myVar', 'complete');
+		expect(mockComplete).toHaveBeenCalledWith('myVar');
+		expect(mockFailure).not.toHaveBeenCalled();
+	});
+
+	it('should call onVariableFetchFailure when state is loading and outcome is failure', () => {
+		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
+		settleVariableFetch('myVar', 'failure');
+		expect(mockFailure).toHaveBeenCalledWith('myVar');
+		expect(mockComplete).not.toHaveBeenCalled();
+	});
+
+	it('should call onVariableFetchFailure when state is revalidating and outcome is failure', () => {
+		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
+		settleVariableFetch('myVar', 'failure');
+		expect(mockFailure).toHaveBeenCalledWith('myVar');
+		expect(mockComplete).not.toHaveBeenCalled();
+	});
+});
+
+describe('extractErrorMessage', () => {
+	const FALLBACK_MESSAGE =
+		'Please make sure configuration is valid and you have required setup and permissions';
+
+	it('should return SOMETHING_WENT_WRONG when error is null', () => {
+		expect(extractErrorMessage(null)).toBe('Something went wrong');
+	});
+
+	it('should return the error message when it exists', () => {
+		expect(extractErrorMessage({ message: 'Query timeout' })).toBe(
+			'Query timeout',
+		);
+	});
+
+	it('should return fallback when error object has no message property', () => {
+		expect(extractErrorMessage({})).toBe(FALLBACK_MESSAGE);
+	});
+
+	it('should return fallback when error.message is empty string', () => {
+		expect(extractErrorMessage({ message: '' })).toBe(FALLBACK_MESSAGE);
+	});
+
+	it('should return fallback when error.message is undefined', () => {
+		expect(extractErrorMessage({ message: undefined })).toBe(FALLBACK_MESSAGE);
+	});
+});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -1,17 +1,11 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { VariableItemProps } from '../VariableItem';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: IDashboardVariable;
+		variableData: VariableItemProps['variableData'];
+		onValueUpdate: VariableItemProps['onValueUpdate'];
 		optionsData: (string | number | boolean)[];
 		allAvailableOptionStrings: string[];
-		onValueUpdate: (
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-		) => void;
 	}): void;
 }

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -17,6 +17,19 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
 
+// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
+jest.mock('hooks/dashboard/useVariableFetchState', () => ({
+	useVariableFetchState: (): Record<string, unknown> => ({
+		variableFetchCycleId: 0,
+		variableFetchState: 'loading',
+		isVariableSettled: false,
+		isVariableFetching: true,
+		hasVariableFetchedOnce: false,
+		isVariableWaitingForDependencies: false,
+		variableDependencyWaitMessage: '',
+	}),
+}));
+
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
@@ -95,7 +108,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn();
+						queryFn({ signal: undefined });
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -234,6 +247,7 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
+					undefined, // signal
 				);
 			});
 
@@ -487,6 +501,7 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
+					undefined, // signal
 				);
 			});
 

frontend/src/container/DashboardContainer/__test__/IntegrationTests.test.tsx

@@ -49,15 +49,11 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
-const mockSetVariablesToGetUpdated = jest.fn();
-
 jest.mock('providers/Dashboard/Dashboard', () => ({
 	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
-		variablesToGetUpdated: ['env'], // Stable initial value
-		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
 	}),
 }));
 

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -0,0 +1,71 @@
+.dashboard-breadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+
+	.dashboard-btn {
+		display: flex;
+		align-items: center;
+		color: var(--bg-vanilla-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		padding: 0px;
+		height: 20px;
+	}
+
+	.dashboard-btn:hover {
+		background-color: unset;
+	}
+
+	.id-btn {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0px 2px;
+		border-radius: 2px;
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		height: 20px;
+
+		max-width: calc(100% - 120px);
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.ant-btn-icon {
+			margin-inline-end: 4px;
+		}
+	}
+	.id-btn:hover {
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboard-icon-image {
+		height: 14px;
+		width: 14px;
+	}
+}
+
+.lightMode {
+	.dashboard-breadcrumbs {
+		.dashboard-btn {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { Button } from 'antd';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { LayoutGrid } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { DashboardData } from 'types/api/dashboard/getAll';
+
+import { Base64Icons } from '../../DashboardSettings/General/utils';
+
+import './DashboardBreadcrumbs.styles.scss';
+
+function DashboardBreadcrumbs(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { selectedDashboard, listSortOrder } = useDashboard();
+
+	const selectedData = selectedDashboard
+		? {
+				...selectedDashboard.data,
+				uuid: selectedDashboard.id,
+		  }
+		: ({} as DashboardData);
+
+	const { title = '', image = Base64Icons[0] } = selectedData || {};
+
+	const goToListPage = useCallback(() => {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}, [listSortOrder, safeNavigate]);
+
+	return (
+		<div className="dashboard-breadcrumbs">
+			<Button
+				type="text"
+				icon={<LayoutGrid size={14} />}
+				className="dashboard-btn"
+				onClick={goToListPage}
+			>
+				Dashboard /
+			</Button>
+			<Button type="text" className="id-btn dashboard-name-btn">
+				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
+				{title}
+			</Button>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.styles.scss

@@ -0,0 +1,15 @@
+.dashboard-header {
+	border-bottom: 1px solid var(--bg-slate-400);
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+	align-items: center;
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
+.lightMode {
+	.dashboard-header {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardBreadcrumbs from './DashboardBreadcrumbs';
+
+import './DashboardHeader.styles.scss';
+
+function DashboardHeader(): JSX.Element {
+	return (
+		<div className="dashboard-header">
+			<DashboardBreadcrumbs />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardHeader);

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

@@ -23,6 +23,7 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
+	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -36,6 +37,9 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
+			if (!showLegend) {
+				return null;
+			}
 			return (
 				<Legend
 					config={config}
@@ -44,7 +48,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -60,6 +64,7 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
+				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

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

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	HistogramTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { HistogramChartProps } from '../types';
+
+export default function Histogram(props: HistogramChartProps): JSX.Element {
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		isQueriesMerged,
+		...rest
+	} = props;
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: HistogramTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <HistogramTooltip {...tooltipProps} />;
+		},
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+	);
+
+	return (
+		<ChartWrapper
+			showLegend={!isQueriesMerged}
+			{...rest}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,6 +7,7 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
+	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -17,6 +18,7 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
+	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -26,14 +28,20 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {}
+
+export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
+	isQueriesMerged?: boolean;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -0,0 +1,117 @@
+import { AlignedData } from 'uplot';
+
+import { getInitialStackedBands, stack } from '../stackUtils';
+
+describe('stackUtils', () => {
+	describe('stack', () => {
+		const neverOmit = (): boolean => false;
+
+		it('preserves time axis as first row', () => {
+			const data: AlignedData = [
+				[100, 200, 300],
+				[1, 2, 3],
+				[4, 5, 6],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[0]).toEqual([100, 200, 300]);
+		});
+
+		it('stacks value series cumulatively (last = raw, first = total)', () => {
+			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
+			const data: AlignedData = [
+				[0, 1, 2],
+				[1, 2, 3], // series 1
+				[4, 5, 6], // series 2
+				[7, 8, 9], // series 3
+			];
+			const { data: result } = stack(data, neverOmit);
+			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
+			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
+			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
+			expect(result[3]).toEqual([7, 8, 9]);
+		});
+
+		it('treats null values as 0 when stacking', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, null],
+				[null, 10],
+			];
+			const { data: result } = stack(data, neverOmit);
+			expect(result[1]).toEqual([1, 10]); // total
+			expect(result[2]).toEqual([0, 10]); // last series with null→0
+		});
+
+		it('copies omitted series as-is without accumulating', () => {
+			// Omit series 2 (index 2); series 1 and 3 are stacked.
+			const data: AlignedData = [
+				[0, 1],
+				[10, 20], // series 1
+				[100, 200], // series 2 - omitted
+				[1, 2], // series 3
+			];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { data: result } = stack(data, omitSeries2);
+			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
+			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
+			expect(result[2]).toEqual([100, 200]); // copied, not stacked
+			expect(result[3]).toEqual([1, 2]);
+		});
+
+		it('returns bands between consecutive visible series when none omitted', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+				[3, 4],
+				[5, 6],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
+		});
+
+		it('returns bands only between visible series when some are omitted', () => {
+			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
+			const data: AlignedData = [[0], [1], [2], [3], [4]];
+			const omitSeries2 = (i: number): boolean => i === 2;
+			const { bands } = stack(data, omitSeries2);
+			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
+		});
+
+		it('returns empty bands when only one value series', () => {
+			const data: AlignedData = [
+				[0, 1],
+				[1, 2],
+			];
+			const { bands } = stack(data, neverOmit);
+			expect(bands).toEqual([]);
+		});
+	});
+
+	describe('getInitialStackedBands', () => {
+		it('returns one band between each consecutive pair for seriesCount 3', () => {
+			expect(getInitialStackedBands(3)).toEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+			]);
+		});
+
+		it('returns empty array for seriesCount 0 or 1', () => {
+			expect(getInitialStackedBands(0)).toEqual([]);
+			expect(getInitialStackedBands(1)).toEqual([]);
+		});
+
+		it('returns single band for seriesCount 2', () => {
+			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
+		});
+
+		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
+			const bands = getInitialStackedBands(5);
+			expect(bands).toEqual([
+				{ series: [1, 2] },
+				{ series: [2, 3] },
+				{ series: [3, 4] },
+				{ series: [4, 5] },
+			]);
+		});
+	});
+});

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

@@ -0,0 +1,116 @@
+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 stack(
+	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/__tests__/useBarChartStacking.test.ts

@@ -0,0 +1,313 @@
+import { renderHook } from '@testing-library/react';
+import uPlot from 'uplot';
+
+import type { UseBarChartStackingParams } from '../useBarChartStacking';
+import { useBarChartStacking } from '../useBarChartStacking';
+
+type MockConfig = { addHook: jest.Mock };
+
+function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
+	return (c as unknown) as UseBarChartStackingParams['config'];
+}
+
+function createMockConfig(): {
+	config: MockConfig;
+	invokeSetData: (plot: uPlot) => void;
+	invokeSetSeries: (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	) => void;
+	removeSetData: jest.Mock;
+	removeSetSeries: jest.Mock;
+} {
+	let setDataHandler: ((plot: uPlot) => void) | null = null;
+	let setSeriesHandler:
+		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
+		| null = null;
+
+	const removeSetData = jest.fn();
+	const removeSetSeries = jest.fn();
+
+	const addHook = jest.fn(
+		(
+			hookName: string,
+			handler: (plot: uPlot, ...args: unknown[]) => void,
+		): (() => void) => {
+			if (hookName === 'setData') {
+				setDataHandler = handler as (plot: uPlot) => void;
+				return removeSetData;
+			}
+			if (hookName === 'setSeries') {
+				setSeriesHandler = handler as (
+					plot: uPlot,
+					seriesIndex: number | null,
+					opts: uPlot.Series,
+				) => void;
+				return removeSetSeries;
+			}
+			return jest.fn();
+		},
+	);
+
+	const config: MockConfig = { addHook };
+
+	const invokeSetData = (plot: uPlot): void => {
+		setDataHandler?.(plot);
+	};
+
+	const invokeSetSeries = (
+		plot: uPlot,
+		seriesIndex: number | null,
+		opts: Partial<uPlot.Series> & { focus?: boolean },
+	): void => {
+		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
+	};
+
+	return {
+		config,
+		invokeSetData,
+		invokeSetSeries,
+		removeSetData,
+		removeSetSeries,
+	};
+}
+
+function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
+	return ({
+		data: [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		],
+		series: [{ show: true }, { show: true }, { show: true }],
+		delBand: jest.fn(),
+		addBand: jest.fn(),
+		setData: jest.fn(),
+		...overrides,
+	} as unknown) as uPlot;
+}
+
+describe('useBarChartStacking', () => {
+	it('returns data as-is when isStackedBarChart is false', () => {
+		const data: uPlot.AlignedData = [
+			[100, 200],
+			[1, 2],
+			[3, 4],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: null,
+			}),
+		);
+		expect(result.current).toBe(data);
+	});
+
+	it('returns data as-is when config is null and isStackedBarChart is true', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[4, 5],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		// Still returns stacked data (computed in useMemo); no hooks registered
+		expect(result.current[0]).toEqual([0, 1]);
+		expect(result.current[1]).toEqual([5, 7]); // stacked
+		expect(result.current[2]).toEqual([4, 5]);
+	});
+
+	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current[0]).toEqual([0, 1, 2]);
+		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
+		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
+		expect(result.current[3]).toEqual([7, 8, 9]);
+	});
+
+	it('returns data as-is when only one value series (no stacking needed)', () => {
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+		];
+		const { result } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: null,
+			}),
+		);
+		expect(result.current).toEqual(data);
+	});
+
+	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
+		expect(config.addHook).toHaveBeenCalledWith(
+			'setSeries',
+			expect.any(Function),
+		);
+	});
+
+	it('does not register hooks when isStackedBarChart is false', () => {
+		const { config } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: false,
+				config: asConfig(config),
+			}),
+		);
+
+		expect(config.addHook).not.toHaveBeenCalled();
+	});
+
+	it('calls cleanup when unmounted', () => {
+		const { config, removeSetData, removeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+
+		const { unmount } = renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		unmount();
+
+		expect(removeSetData).toHaveBeenCalled();
+		expect(removeSetSeries).toHaveBeenCalled();
+	});
+
+	it('re-stacks and updates plot when setData hook is invoked', () => {
+		const { config, invokeSetData } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1, 2],
+			[1, 2, 3],
+			[4, 5, 6],
+		];
+		const plot = createMockPlot({
+			data: [
+				[0, 1, 2],
+				[5, 7, 9],
+				[4, 5, 6],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetData(plot);
+
+		expect(plot.delBand).toHaveBeenCalledWith(null);
+		expect(plot.addBand).toHaveBeenCalled();
+		expect(plot.setData).toHaveBeenCalledWith(
+			expect.arrayContaining([
+				[0, 1, 2],
+				expect.any(Array), // stacked row 1
+				expect.any(Array), // stacked row 2
+			]),
+		);
+	});
+
+	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[10, 20],
+			[5, 10],
+		];
+		// Plot data must match unstacked length so canApplyStacking passes
+		const plot = createMockPlot({
+			data: [
+				[0, 1],
+				[15, 30],
+				[5, 10],
+			],
+		});
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		invokeSetSeries(plot, 1, { show: false });
+
+		expect(plot.setData).toHaveBeenCalled();
+	});
+
+	it('does not re-stack when setSeries is called with focus option', () => {
+		const { config, invokeSetSeries } = createMockConfig();
+		const data: uPlot.AlignedData = [
+			[0, 1],
+			[1, 2],
+			[3, 4],
+		];
+		const plot = createMockPlot();
+
+		renderHook(() =>
+			useBarChartStacking({
+				data,
+				isStackedBarChart: true,
+				config: asConfig(config),
+			}),
+		);
+
+		(plot.setData as jest.Mock).mockClear();
+		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
+
+		expect(plot.setData).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -0,0 +1,69 @@
+import { renderHook } from '@testing-library/react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
+
+jest.mock('providers/Dashboard/Dashboard');
+
+type MockHTMLElement = {
+	scrollIntoView: jest.Mock;
+	focus: jest.Mock;
+};
+
+function createMockElement(): MockHTMLElement {
+	return {
+		scrollIntoView: jest.fn(),
+		focus: jest.fn(),
+	};
+}
+
+describe('useScrollWidgetIntoView', () => {
+	const mockedUseDashboard = useDashboard as jest.MockedFunction<
+		typeof useDashboard
+	>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'widget-id',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'center',
+		});
+		expect(mockElement.focus).toHaveBeenCalled();
+		expect(setToScrollWidgetId).toHaveBeenCalledWith('');
+	});
+
+	it('does nothing when toScrollWidgetId does not match widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'other-widget',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).not.toHaveBeenCalled();
+		expect(mockElement.focus).not.toHaveBeenCalled();
+		expect(setToScrollWidgetId).not.toHaveBeenCalled();
+	});
+});

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

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+/**
+ * Scrolls the given widget container into view when the dashboard
+ * requests it via `toScrollWidgetId`.
+ *
+ * Intended for use in panel components that render a single widget.
+ */
+export function useScrollWidgetIntoView<T extends HTMLElement>(
+	widgetId: string,
+	widgetContainerRef: RefObject<T>,
+): void {
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widgetId) {
+			widgetContainerRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			widgetContainerRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widgetId, widgetContainerRef]);
+}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
+	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
+			if (!showLegend) {
+				return {
+					width: containerWidth,
+					height: containerHeight,
+					legendWidth: 0,
+					legendHeight: 0,
+					averageLegendWidth: MAX_LEGEND_WIDTH,
+				};
+			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<div
+						className="chart-layout__legend-wrapper"
+						style={{
+							height: chartDimensions.legendHeight,
+							width: chartDimensions.legendWidth,
+						}}
+					>
+						{legendComponent(chartDimensions.averageLegendWidth)}
+					</div>
+				)}
 			</div>
 			{layoutChildren}
 		</div>

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

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 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';
@@ -27,7 +27,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		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>();
@@ -36,16 +35,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	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]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -11,6 +11,7 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -77,6 +78,12 @@ export function prepareBarPanelConfig({
 		builder.setBands(getInitialStackedBands(seriesCount));
 	}
 
+	const stepIntervals: Record<string, number> = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+
 	const seriesList: QueryData[] = apiResponse?.data?.result || [];
 	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
@@ -89,6 +96,8 @@ export function prepareBarPanelConfig({
 			? getLegend(series, currentQuery, baseLabelName)
 			: baseLabelName;
 
+		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
+
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
@@ -101,6 +110,7 @@ export function prepareBarPanelConfig({
 			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
+			stepInterval: currentStepInterval,
 		});
 	});
 

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

@@ -0,0 +1,114 @@
+import { useMemo, useRef } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
+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 { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import Histogram from '../../charts/Histogram/Histogram';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import {
+	prepareHistogramPanelConfig,
+	prepareHistogramPanelData,
+} from './utils';
+
+import '../Panel.styles.scss';
+
+function HistogramPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useScrollWidgetIntoView(widget.id, graphRef);
+
+	const config = useMemo(() => {
+		return prepareHistogramPanelConfig({
+			widget,
+			isDarkMode,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			panelMode,
+		});
+	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareHistogramPanelData({
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			bucketWidth: widget?.bucketWidth,
+			bucketCount: widget?.bucketCount,
+			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
+		});
+	}, [
+		queryResponse?.data?.payload,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode || widget.mergeAllActiveQueries) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+		widget.mergeAllActiveQueries,
+	]);
+
+	return (
+		<div className="panel-container" ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<Histogram
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					isQueriesMerged={widget.mergeAllActiveQueries}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanel;

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

@@ -0,0 +1,223 @@
+/* eslint-disable simple-import-sort/imports */
+import type { UseQueryResult } from 'react-query';
+import { render, screen } from 'tests/test-utils';
+
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { Widgets } from 'types/api/dashboard/getAll';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
+
+import HistogramPanel from '../HistogramPanel';
+import { HistogramChartProps } from 'container/DashboardContainer/visualization/charts/types';
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: jest.fn().mockReturnValue({ width: 800, height: 400 }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	__esModule: true,
+	// Provide a no-op provider component so AllTheProviders can render
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<>{children}</>
+	),
+	// And mock the hook used by HistogramPanel
+	useTimezone: jest.fn().mockReturnValue({
+		timezone: { value: 'UTC' },
+	}),
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView',
+	() => ({
+		useScrollWidgetIntoView: jest.fn(),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/Histogram/Histogram',
+	() => ({
+		__esModule: true,
+		default: (props: HistogramChartProps): JSX.Element => (
+			<div data-testid="histogram-chart">
+				<div data-testid="histogram-props">
+					{JSON.stringify({
+						legendPosition: props.legendConfig?.position,
+						isQueriesMerged: props.isQueriesMerged,
+						yAxisUnit: props.yAxisUnit,
+						decimalPrecision: props.decimalPrecision,
+					})}
+				</div>
+				{props.layoutChildren}
+			</div>
+		),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/components/ChartManager/ChartManager',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => (
+			<div data-testid="chart-manager">ChartManager</div>
+		),
+	}),
+);
+
+function createQueryResponse(
+	payloadOverrides: Partial<MetricRangePayloadProps> = {},
+): { data: { payload: MetricRangePayloadProps } } {
+	const basePayload: MetricRangePayloadProps = {
+		data: {
+			result: [
+				{
+					metric: {},
+					queryName: 'A',
+					legend: 'Series A',
+					values: [
+						[1, '10'],
+						[2, '20'],
+					],
+				},
+			],
+			resultType: 'matrix',
+			newResult: {
+				data: {
+					result: [],
+					resultType: 'matrix',
+				},
+			},
+		},
+	};
+
+	return {
+		data: {
+			payload: {
+				...basePayload,
+				...payloadOverrides,
+			},
+		},
+	};
+}
+
+type WidgetLike = {
+	id: string;
+	yAxisUnit: string;
+	decimalPrecision: number;
+	legendPosition: LegendPosition;
+	mergeAllActiveQueries: boolean;
+};
+
+function createWidget(overrides: Partial<WidgetLike> = {}): WidgetLike {
+	return {
+		id: 'widget-id',
+		yAxisUnit: 'ms',
+		decimalPrecision: 2,
+		legendPosition: LegendPosition.BOTTOM,
+		mergeAllActiveQueries: false,
+		...overrides,
+	};
+}
+
+describe('HistogramPanel', () => {
+	it('renders Histogram when container has dimensions', () => {
+		const widget = (createWidget() as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('histogram-chart')).toBeInTheDocument();
+	});
+
+	it('passes legend position and other props to Histogram', () => {
+		const widget = (createWidget({
+			legendPosition: LegendPosition.RIGHT,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		const propsJson = screen.getByTestId('histogram-props').textContent || '{}';
+		const parsed = JSON.parse(propsJson);
+
+		expect(parsed.legendPosition).toBe(LegendPosition.RIGHT);
+		expect(parsed.yAxisUnit).toBe('ms');
+		expect(parsed.decimalPrecision).toBe(2);
+	});
+
+	it('renders ChartManager in full view when queries are not merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: false,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('chart-manager')).toBeInTheDocument();
+	});
+
+	it('does not render ChartManager when queries are merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: true,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByTestId('chart-manager')).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,231 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle } 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 { AlignedData } from 'uplot';
+import { incrRoundDn, roundDecimals } from 'utils/round';
+
+import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+import {
+	buildHistogramBuckets,
+	mergeAlignedDataTables,
+	prependNullBinToFirstHistogramSeries,
+	replaceUndefinedWithNullInAlignedData,
+} from '../utils/histogram';
+
+export interface PrepareHistogramPanelDataParams {
+	apiResponse: MetricRangePayloadProps;
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const HIST_SORT = (a: number, b: number): number => a - b;
+
+function extractNumericValues(
+	result: MetricRangePayloadProps['data']['result'],
+): number[] {
+	const values: number[] = [];
+	for (const item of result) {
+		for (const [, valueStr] of item.values) {
+			values.push(Number.parseFloat(valueStr) || 0);
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+function buildFrames(
+	result: MetricRangePayloadProps['data']['result'],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = result.map((item) =>
+		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}
+
+export function prepareHistogramPanelData({
+	apiResponse,
+	bucketWidth,
+	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramPanelDataParams): AlignedData {
+	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
+	const result = apiResponse.data.result;
+
+	const seriesValues = extractNumericValues(result);
+	if (seriesValues.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...seriesValues].sort((a, b) => a - b);
+	const min = sorted[0];
+	const max = sorted[sorted.length - 1];
+	const range = max - min;
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(result, mergeAllActiveQueries);
+	const histogramsPerSeries: AlignedData[] = frames
+		.filter((frame) => frame.length > 0)
+		.map((frame) => buildHistogramBuckets(frame, getBucket, HIST_SORT));
+
+	if (histogramsPerSeries.length === 0) {
+		return [[]];
+	}
+
+	const mergedHistogramData = mergeAlignedDataTables(histogramsPerSeries);
+	replaceUndefinedWithNullInAlignedData(mergedHistogramData);
+	prependNullBinToFirstHistogramSeries(mergedHistogramData, bucketSize);
+	return mergedHistogramData;
+}
+
+export function prepareHistogramPanelConfig({
+	widget,
+	apiResponse,
+	panelMode,
+	isDarkMode,
+}: {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	panelMode: PanelMode;
+	isDarkMode: boolean;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		apiResponse,
+		panelMode,
+		panelType: PANEL_TYPES.HISTOGRAM,
+	});
+	builder.setCursor({
+		drag: {
+			x: false,
+			y: false,
+			setScale: true,
+		},
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		auto: true,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		auto: true,
+		min: 0,
+	});
+
+	const currentQuery = widget.query;
+	const mergeAllActiveQueries = widget?.mergeAllActiveQueries ?? false;
+
+	// When merged, data has only one y column; add one series to match. Otherwise add one per result.
+	if (mergeAllActiveQueries) {
+		builder.addSeries({
+			label: '',
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			barWidthFactor: 1,
+			pointSize: 5,
+			lineColor: '#3f5ecc',
+			fillColor: '#4E74F8',
+			isDarkMode,
+		});
+	} else {
+		apiResponse.data.result.forEach((series) => {
+			const baseLabelName = getLabelName(
+				series.metric,
+				series.queryName || '', // query
+				series.legend || '',
+			);
+
+			const label = currentQuery
+				? getLegend(series, currentQuery, baseLabelName)
+				: baseLabelName;
+
+			builder.addSeries({
+				label: label,
+				scaleKey: 'y',
+				drawStyle: DrawStyle.Bar,
+				panelType: PANEL_TYPES.HISTOGRAM,
+				colorMapping: widget.customLegendColors ?? {},
+				spanGaps: false,
+				barWidthFactor: 1,
+				pointSize: 5,
+				isDarkMode,
+			});
+		});
+	}
+
+	return builder;
+}

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

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 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';
@@ -26,7 +26,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 	} = props;
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -35,16 +34,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	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]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,10 +85,11 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -127,10 +128,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -149,7 +150,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+			expect(stored).toEqual([{ label: 'CPU', show: false }]);
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -175,10 +176,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			]);
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -201,10 +202,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
 			const expected = [
 				{
 					name: 'widget-1',
@@ -231,14 +232,12 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [true],
-			});
+			expect(getStoredSeriesVisibility('widget-a')).toEqual([
+				{ label: 'A', show: true },
+			]);
+			expect(getStoredSeriesVisibility('widget-b')).toEqual([
+				{ label: 'B', show: true },
+			]);
 		});
 
 		it('calls setItem with storage key and stringified visibility states', () => {

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

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
+	onClick?: OnClickPluginOpts['onClick'];
+	onDragSelect?: (startTime: number, endTime: number) => void;
+	timezone?: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

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

@@ -0,0 +1,225 @@
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+/**
+ * Expands contiguous runs of `null` values to the left and right of their
+ * original positions so that visual gaps in the series are continuous.
+ *
+ * This is used when `NULL_EXPAND` mode is selected while joining series.
+ */
+function propagateNullsAcrossNeighbors(
+	seriesValues: Array<number | null>,
+	nullIndices: number[],
+	alignedLength: number,
+): void {
+	for (
+		let i = 0, currentIndex, lastExpandedNullIndex = -1;
+		i < nullIndices.length;
+		i++
+	) {
+		const nullIndex = nullIndices[i];
+
+		if (nullIndex > lastExpandedNullIndex) {
+			// expand left until we hit a non-null value
+			currentIndex = nullIndex - 1;
+			while (currentIndex >= 0 && seriesValues[currentIndex] == null) {
+				seriesValues[currentIndex--] = null;
+			}
+
+			// expand right until we hit a non-null value
+			currentIndex = nullIndex + 1;
+			while (currentIndex < alignedLength && seriesValues[currentIndex] == null) {
+				seriesValues[(lastExpandedNullIndex = currentIndex++)] = null;
+			}
+		}
+	}
+}
+
+/**
+ * Merges multiple uPlot `AlignedData` tables into a single aligned table.
+ *
+ * - Merges and sorts all distinct x-values from each table.
+ * - Re-aligns every series onto the merged x-axis.
+ * - Applies per-series null handling (`NULL_REMOVE`, `NULL_RETAIN`, `NULL_EXPAND`).
+ */
+/* eslint-disable sonarjs/cognitive-complexity */
+export function mergeAlignedDataTables(
+	alignedTables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let mergedXValues: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	mergedXValues = new Set();
+
+	// Collect all unique x-values from every table.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+		const xLength = xValues.length;
+
+		for (let i = 0; i < xLength; i++) {
+			mergedXValues.add(xValues[i]);
+		}
+	}
+
+	// Sorted, merged x-axis used by the final result.
+	const alignedData: (number | null | undefined)[][] = [
+		Array.from(mergedXValues).sort((a, b) => a - b),
+	];
+
+	const alignedLength = alignedData[0].length;
+
+	// Map from x-value to its index in the merged x-axis.
+	const xValueToIndexMap = new Map<number, number>();
+
+	for (let i = 0; i < alignedLength; i++) {
+		xValueToIndexMap.set(alignedData[0][i] as number, i);
+	}
+
+	// Re-align all series from all tables onto the merged x-axis.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+
+		for (let seriesIndex = 1; seriesIndex < table.length; seriesIndex++) {
+			const seriesValues = table[seriesIndex];
+
+			const alignedSeriesValues = Array(alignedLength).fill(undefined);
+
+			const nullHandlingMode = nullModes
+				? nullModes[tableIndex][seriesIndex]
+				: NULL_RETAIN;
+
+			const nullIndices: number[] = [];
+
+			for (let i = 0; i < seriesValues.length; i++) {
+				const valueAtPoint = seriesValues[i];
+				const alignedIndex = xValueToIndexMap.get(xValues[i]);
+
+				if (alignedIndex == null) {
+					continue;
+				}
+
+				if (valueAtPoint === null) {
+					if (nullHandlingMode !== NULL_REMOVE) {
+						alignedSeriesValues[alignedIndex] = valueAtPoint;
+
+						if (nullHandlingMode === NULL_EXPAND) {
+							nullIndices.push(alignedIndex);
+						}
+					}
+				} else {
+					alignedSeriesValues[alignedIndex] = valueAtPoint;
+				}
+			}
+
+			// Optionally expand nulls to visually preserve gaps.
+			propagateNullsAcrossNeighbors(
+				alignedSeriesValues,
+				nullIndices,
+				alignedLength,
+			);
+
+			alignedData.push(alignedSeriesValues);
+		}
+	}
+
+	return alignedData as AlignedData;
+}
+
+/**
+ * Builds histogram buckets from raw values.
+ *
+ * - Each value is mapped into a bucket via `getBucketForValue`.
+ * - Counts how many values fall into each bucket.
+ * - Optionally sorts buckets using the provided comparator.
+ */
+export function buildHistogramBuckets(
+	values: number[],
+	getBucketForValue: (value: number) => number,
+	sortBuckets?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const bucketMap = new Map<number, { value: number; count: number }>();
+
+	for (let i = 0; i < values.length; i++) {
+		let value = values[i];
+
+		if (value != null) {
+			value = getBucketForValue(value);
+		}
+
+		const bucket = bucketMap.get(value);
+
+		if (bucket) {
+			bucket.count++;
+		} else {
+			bucketMap.set(value, { value, count: 1 });
+		}
+	}
+
+	const buckets = [...bucketMap.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sortBuckets && buckets.sort((a, b) => sortBuckets(a.value, b.value));
+
+	const bucketValues = Array(buckets.length);
+	const bucketCounts = Array(buckets.length);
+
+	for (let i = 0; i < buckets.length; i++) {
+		bucketValues[i] = buckets[i].value;
+		bucketCounts[i] = buckets[i].count;
+	}
+
+	return [bucketValues, bucketCounts];
+}
+
+/**
+ * Mutates an `AlignedData` instance, replacing all `undefined` entries
+ * with explicit `null` values so uPlot treats them as gaps.
+ */
+export function replaceUndefinedWithNullInAlignedData(
+	data: AlignedData,
+): AlignedData {
+	const seriesList = data as (number | null | undefined)[][];
+	for (let seriesIndex = 0; seriesIndex < seriesList.length; seriesIndex++) {
+		for (
+			let pointIndex = 0;
+			pointIndex < seriesList[seriesIndex].length;
+			pointIndex++
+		) {
+			if (seriesList[seriesIndex][pointIndex] === undefined) {
+				seriesList[seriesIndex][pointIndex] = null;
+			}
+		}
+	}
+	return data;
+}
+
+/**
+ * Ensures the first histogram series has a leading "empty" bin so that
+ * all series line up visually when rendered as bars.
+ *
+ * - Prepends a new x-value (first x - `bucketSize`) to the first series.
+ * - Prepends `null` to all subsequent series at the same index.
+ */
+export function prependNullBinToFirstHistogramSeries(
+	alignedData: AlignedData,
+	bucketSize: number,
+): void {
+	const seriesList = alignedData as (number | null)[][];
+	if (
+		seriesList.length > 0 &&
+		seriesList[0].length > 0 &&
+		seriesList[0][0] !== null
+	) {
+		seriesList[0].unshift(seriesList[0][0] - bucketSize);
+		for (let seriesIndex = 1; seriesIndex < seriesList.length; seriesIndex++) {
+			seriesList[seriesIndex].unshift(null);
+		}
+	}
+}

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

@@ -1,10 +1,6 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -14,7 +10,7 @@ import {
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): SeriesVisibilityItem[] | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,10 +25,7 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
+		return widgetState.dataIndex;
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

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

@@ -6,10 +6,12 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -53,7 +55,6 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
-	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -64,8 +65,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
-		variablesToGetUpdated,
 	} = useDashboard();
+
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -117,10 +118,25 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
+	const referencedVariableNames = useMemo(() => {
+		if (!variables || !updatedQuery) {
+			return [];
+		}
+		const allNames = Object.values(variables)
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		return getVariableReferencesInQuery(updatedQuery, allNames);
+	}, [updatedQuery, variables]);
+
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
+		referencedVariableNames,
+	);
+
+	const queryEnabledCondition =
+		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -177,27 +193,6 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
-	// Bring back dependency on variable chaining for panels to refetch,
-	// but only for non-dynamic variables. We derive a stable token from
-	// the head of the variablesToGetUpdated queue when it's non-dynamic.
-	const nonDynamicVariableChainToken = useMemo(() => {
-		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
-			return undefined;
-		}
-		if (!variables) {
-			return undefined;
-		}
-		const headName = variablesToGetUpdated[0];
-		const variableObj = Object.values(variables).find(
-			(variable) => variable?.name === headName,
-		);
-		if (variableObj && variableObj.type !== 'DYNAMIC') {
-			return headName;
-		}
-		return undefined;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated, variables]);
-
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -224,11 +219,7 @@ function GridCardGraph({
 				requestData,
 				variables
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (
-								variable.type !== 'DYNAMIC' ||
-								(widgetsByDynamicVariableId?.[variable.id] &&
-									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
-							) {
+							if (variable.name && referencedVariableNames.includes(variable.name)) {
 								return { ...acc, [id]: variable.selectedValue };
 							}
 							return acc;
@@ -237,9 +228,6 @@ function GridCardGraph({
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
-				// Include non-dynamic variable chaining token to drive refetches
-				// only when a non-dynamic variable is at the head of the queue
-				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -252,7 +240,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
+			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -319,7 +307,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					isFetchingResponse={
-						queryResponse.isFetching || variablesToGetUpdated.length > 0
+						queryResponse.isFetching || isPanelWaitingOnAnyVariable
 					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -72,7 +72,6 @@ export interface GridCardGraphProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
-	widgetsByDynamicVariableId?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -16,7 +16,6 @@ import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynamicVariableId';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -102,8 +101,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
-	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
-
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
@@ -617,7 +614,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 									enableDrillDown={enableDrillDown}
-									widgetsByDynamicVariableId={widgetsByDynamicVariableId}
 								/>
 							</Card>
 						</CardContainer>

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -477,47 +477,67 @@
 			}
 		}
 
-		.opentelemetry-radio-container {
+		.observability-tools-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
 			width: 528px;
 
-			.opentelemetry-radio-group {
-				width: 100%;
+			.observability-tool-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
 
-				.opentelemetry-radio-items-wrapper {
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					gap: 12px;
-					width: 100%;
+				label {
+					color: var(--l1-foreground);
+					font-size: 13px;
+					cursor: pointer;
 				}
 
-				.opentelemetry-radio-item {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					height: 32px;
-					width: calc((528px - 12px) / 2);
-					min-width: 258px;
-					flex: 0 0 calc((528px - 12px) / 2);
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
+					}
+				}
+
+				&.observability-tool-others-item {
+					.onboarding-questionaire-other-input {
+						flex: 1;
+					}
+				}
+			}
+		}
+
+		.migration-timeline-radio-container,
+		.opentelemetry-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
+			width: 528px;
+
+			.migration-timeline-radio-item,
+			.opentelemetry-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
+
+				label {
 					color: var(--l1-foreground);
-					font-family: Inter, sans-serif;
 					font-size: 13px;
-					font-weight: 400;
-					line-height: 1;
-					letter-spacing: -0.065px;
-					box-sizing: border-box;
+					cursor: pointer;
+				}
 
-					.ant-radio {
-						.ant-radio-inner {
-							width: 16px;
-							height: 16px;
-							border-color: var(--l3-border);
-						}
-
-						&.ant-radio-checked .ant-radio-inner {
-							border-color: var(--bg-robin-500);
-							background-color: var(--bg-robin-500);
-						}
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
 					}
 				}
 			}
@@ -977,27 +997,6 @@
 				color: var(--bg-slate-300);
 			}
 
-			.opentelemetry-radio-container {
-				.opentelemetry-radio-group {
-					.opentelemetry-radio-items-wrapper {
-						.opentelemetry-radio-item {
-							color: var(--l1-foreground);
-
-							.ant-radio {
-								.ant-radio-inner {
-									border-color: var(--l3-border);
-								}
-
-								&.ant-radio-checked .ant-radio-inner {
-									border-color: var(--bg-robin-500);
-									background-color: var(--bg-robin-500);
-								}
-							}
-						}
-					}
-				}
-			}
-
 			.onboarding-back-button {
 				border-color: var(--text-vanilla-300);
 				color: var(--l3-foreground);

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,34 +1,27 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
 import { Input } from '@signozhq/input';
-import { Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/radio-group';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import editOrg from 'api/organization/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, Loader2 } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
+import { ArrowRight } from 'lucide-react';
 
 import '../OnboardingQuestionaire.styles.scss';
 
-export interface OrgData {
-	id: string;
-	displayName: string;
-}
-
 export interface OrgDetails {
-	organisationName: string;
 	usesObservability: boolean | null;
 	observabilityTool: string | null;
 	otherTool: string | null;
 	usesOtel: boolean | null;
+	migrationTimeline: string | null;
 }
 
 interface OrgQuestionsProps {
-	currentOrgData: OrgData | null;
 	orgDetails: OrgDetails;
 	onNext: (details: OrgDetails) => void;
 }
@@ -45,19 +38,14 @@ const observabilityTools = {
 	Others: 'Others',
 };
 
-function OrgQuestions({
-	currentOrgData,
-	orgDetails,
-	onNext,
-}: OrgQuestionsProps): JSX.Element {
-	const { updateOrg } = useAppContext();
-	const { notifications } = useNotifications();
+const migrationTimelineOptions = {
+	lessThanMonth: 'Less than a month',
+	oneToThreeMonths: '1-3 months',
+	greaterThanThreeMonths: 'Greater than 3 months',
+	justExploring: 'Just exploring',
+};
 
-	const { t } = useTranslation(['organizationsettings', 'common']);
-
-	const [organisationName, setOrganisationName] = useState<string>(
-		orgDetails?.organisationName || '',
-	);
+function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 	const [observabilityTool, setObservabilityTool] = useState<string | null>(
 		orgDetails?.observabilityTool || null,
 	);
@@ -66,92 +54,33 @@ function OrgQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
-	useEffect(() => {
-		setOrganisationName(orgDetails.organisationName);
-	}, [orgDetails.organisationName]);
-
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-
 	const [usesOtel, setUsesOtel] = useState<boolean | null>(orgDetails.usesOtel);
+	const [migrationTimeline, setMigrationTimeline] = useState<string | null>(
+		orgDetails?.migrationTimeline || null,
+	);
 
-	const handleOrgNameUpdate = async (): Promise<void> => {
+	const showMigrationQuestion =
+		observabilityTool !== null && observabilityTool !== 'None';
+
+	const handleNext = (): void => {
 		const usesObservability =
 			!observabilityTool?.includes('None') && observabilityTool !== null;
 
-		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
-		if (
-			!currentOrgData ||
-			!organisationName ||
-			organisationName === '' ||
-			orgDetails.organisationName === organisationName
-		) {
-			logEvent('Org Onboarding: Answered', {
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
+		logEvent('Org Onboarding: Answered', {
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 
-			onNext({
-				organisationName,
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
-
-			return;
-		}
-
-		try {
-			setIsLoading(true);
-			const { statusCode, error } = await editOrg({
-				displayName: organisationName,
-				orgId: currentOrgData.id,
-			});
-			if (statusCode === 204) {
-				updateOrg(currentOrgData?.id, organisationName);
-
-				logEvent('Org Onboarding: Org Name Updated', {
-					organisationName,
-				});
-
-				logEvent('Org Onboarding: Answered', {
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-
-				onNext({
-					organisationName,
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-			} else {
-				logEvent('Org Onboarding: Org Name Update Failed', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
+		onNext({
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 	};
 
 	const isValidUsesObservability = (): boolean => {
@@ -173,22 +102,29 @@ function OrgQuestions({
 
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
+		const isMigrationValid = !showMigrationQuestion || migrationTimeline !== null;
 
-		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
+		if (usesOtel !== null && isValidObservability && isMigrationValid) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [organisationName, usesOtel, observabilityTool, otherTool]);
+	}, [
+		usesOtel,
+		observabilityTool,
+		otherTool,
+		migrationTimeline,
+		showMigrationQuestion,
+	]);
 
-	const createObservabilityToolHandler = (tool: string) => (
-		checked: boolean,
-	): void => {
-		if (checked) {
-			setObservabilityTool(tool);
-		} else if (observabilityTool === tool) {
-			setObservabilityTool(null);
+	const handleObservabilityToolChange = (value: string): void => {
+		setObservabilityTool(value);
+		if (value !== 'Others') {
+			setOtherTool('');
+		}
+		if (value === 'None') {
+			setMigrationTimeline(null);
 		}
 	};
 
@@ -196,10 +132,6 @@ function OrgQuestions({
 		setUsesOtel(value === 'yes');
 	};
 
-	const handleOnNext = (): void => {
-		handleOrgNameUpdate();
-	};
-
 	return (
 		<div className="questions-container">
 			<div className="onboarding-header-section">
@@ -214,40 +146,24 @@ function OrgQuestions({
 
 			<div className="questions-form-container">
 				<div className="questions-form">
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Name of your company
-						</label>
-						<Input
-							type="text"
-							name="organisationName"
-							id="organisationName"
-							placeholder="e.g. Simpsonville"
-							autoComplete="off"
-							value={organisationName}
-							onChange={(e): void => setOrganisationName(e.target.value)}
-						/>
-					</div>
-
 					<div className="form-group">
 						<label className="question" htmlFor="observabilityTool">
 							Which observability tool do you currently use?
 						</label>
-						<div className="observability-tools-checkbox-container">
+						<RadioGroup
+							value={observabilityTool || ''}
+							onValueChange={handleObservabilityToolChange}
+							className="observability-tools-radio-container"
+						>
 							{Object.entries(observabilityTools).map(([tool, label]) => {
 								if (tool === 'Others') {
 									return (
 										<div
 											key={tool}
-											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
+											className="radio-item observability-tool-radio-item observability-tool-others-item"
 										>
-											<Checkbox
-												id={`checkbox-${tool}`}
-												checked={observabilityTool === tool}
-												onCheckedChange={createObservabilityToolHandler(tool)}
-												labelName={observabilityTool === 'Others' ? '' : label}
-											/>
-											{observabilityTool === 'Others' && (
+											<RadioGroupItem value={tool} id={`radio-${tool}`} />
+											{observabilityTool === 'Others' ? (
 												<Input
 													type="text"
 													className="onboarding-questionaire-other-input"
@@ -256,55 +172,60 @@ function OrgQuestions({
 													autoFocus
 													onChange={(e): void => setOtherTool(e.target.value)}
 												/>
+											) : (
+												<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 											)}
 										</div>
 									);
 								}
 								return (
-									<div
-										key={tool}
-										className="checkbox-item observability-tool-checkbox-item"
-									>
-										<Checkbox
-											id={`checkbox-${tool}`}
-											checked={observabilityTool === tool}
-											onCheckedChange={createObservabilityToolHandler(tool)}
-											labelName={label}
-										/>
+									<div key={tool} className="radio-item observability-tool-radio-item">
+										<RadioGroupItem value={tool} id={`radio-${tool}`} />
+										<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 									</div>
 								);
 							})}
-						</div>
+						</RadioGroup>
 					</div>
 
+					{showMigrationQuestion && (
+						<div className="form-group">
+							<div className="question">
+								What is your timeline for migrating to SigNoz?
+							</div>
+							<RadioGroup
+								value={migrationTimeline || ''}
+								onValueChange={setMigrationTimeline}
+								className="migration-timeline-radio-container"
+							>
+								{Object.entries(migrationTimelineOptions).map(([key, label]) => (
+									<div key={key} className="radio-item migration-timeline-radio-item">
+										<RadioGroupItem value={key} id={`radio-migration-${key}`} />
+										<RadioGroupLabel htmlFor={`radio-migration-${key}`}>
+											{label}
+										</RadioGroupLabel>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+
 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</div>
-						<div className="opentelemetry-radio-container">
-							<Radio.Group
-								value={((): string | undefined => {
-									if (usesOtel === true) {
-										return 'yes';
-									}
-									if (usesOtel === false) {
-										return 'no';
-									}
-									return undefined;
-								})()}
-								onChange={(e: RadioChangeEvent): void =>
-									handleOtelChange(e.target.value)
-								}
-								className="opentelemetry-radio-group"
-							>
-								<div className="opentelemetry-radio-items-wrapper">
-									<Radio value="yes" className="opentelemetry-radio-item">
-										Yes
-									</Radio>
-									<Radio value="no" className="opentelemetry-radio-item">
-										No
-									</Radio>
-								</div>
-							</Radio.Group>
-						</div>
+						<RadioGroup
+							value={usesOtel === true ? 'yes' : usesOtel === false ? 'no' : ''}
+							onValueChange={handleOtelChange}
+							className="opentelemetry-radio-container"
+						>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="yes" id="radio-otel-yes" />
+								<RadioGroupLabel htmlFor="radio-otel-yes">Yes</RadioGroupLabel>
+							</div>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="no" id="radio-otel-no" />
+								<RadioGroupLabel htmlFor="radio-otel-no">No</RadioGroupLabel>
+							</div>
+						</RadioGroup>
 					</div>
 				</div>
 
@@ -312,15 +233,9 @@ function OrgQuestions({
 					variant="solid"
 					color="primary"
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleOnNext}
+					onClick={handleNext}
 					disabled={isNextDisabled}
-					suffixIcon={
-						isLoading ? (
-							<Loader2 className="animate-spin" size={12} />
-						) : (
-							<ArrowRight size={12} />
-						)
-					}
+					suffixIcon={<ArrowRight size={12} />}
 				>
 					Next
 				</Button>

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

@@ -69,7 +69,7 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			expect(screen.getByText(/welcome to signoz cloud/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/name of your company/i)).toBeInTheDocument();
+
 			expect(
 				screen.getByText(/which observability tool do you currently use/i),
 			).toBeInTheDocument();
@@ -86,15 +86,12 @@ describe('OnboardingQuestionaire Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-
 			const datadogCheckbox = screen.getByLabelText(/datadog/i);
 			await user.click(datadogCheckbox);
 
 			const otelYes = screen.getByRole('radio', { name: /yes/i });
 			await user.click(otelYes);
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = await screen.findByRole('button', { name: /next/i });
 			expect(nextButton).not.toBeDisabled();
@@ -112,15 +109,38 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 
+		it('shows migration timeline options only when specific observability tools are selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			render(<OnboardingQuestionaire />);
+
+			// Initially not visible
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+
+			const datadogCheckbox = screen.getByLabelText(/datadog/i);
+			await user.click(datadogCheckbox);
+
+			expect(
+				await screen.findByText(/What is your timeline for migrating to SigNoz/i),
+			).toBeInTheDocument();
+
+			// Not visible when None is selected
+			const noneCheckbox = screen.getByLabelText(/none\/starting fresh/i);
+			await user.click(noneCheckbox);
+
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+		});
+
 		it('proceeds to step 2 when next is clicked', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = screen.getByRole('button', { name: /next/i });
 			await user.click(nextButton);
@@ -137,11 +157,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -157,11 +176,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await waitFor(() => {
@@ -175,11 +193,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -203,11 +220,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -232,11 +248,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate through steps 1 and 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -267,11 +282,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 3
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -290,40 +304,4 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 	});
-
-	describe('Error Handling', () => {
-		it('handles organization update error gracefully', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'INTERNAL_ERROR',
-								message: 'Failed to update organization',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			// Component should still be functional
-			await waitFor(() => {
-				expect(nextButton).not.toBeDisabled();
-			});
-		});
-	});
 });

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -23,7 +23,7 @@ import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
 } from './OptimiseSignozNeeds/OptimiseSignozNeeds';
-import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
+import OrgQuestions, { OrgDetails } from './OrgQuestions/OrgQuestions';
 
 import './OnboardingQuestionaire.styles.scss';
 
@@ -37,11 +37,11 @@ export const showErrorNotification = (
 };
 
 const INITIAL_ORG_DETAILS: OrgDetails = {
-	organisationName: '',
 	usesObservability: true,
 	observabilityTool: '',
 	otherTool: '',
 	usesOtel: null,
+	migrationTimeline: null,
 };
 
 const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
@@ -79,25 +79,11 @@ function OnboardingQuestionaire(): JSX.Element {
 		InviteTeamMembersProps[] | null
 	>(null);
 
-	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
-
 	const [
 		updatingOrgOnboardingStatus,
 		setUpdatingOrgOnboardingStatus,
 	] = useState<boolean>(false);
 
-	useEffect(() => {
-		if (org) {
-			setCurrentOrgData(org[0]);
-
-			setOrgDetails({
-				...orgDetails,
-				organisationName: org[0].displayName,
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [org]);
-
 	useEffect(() => {
 		logEvent('Org Onboarding: Started', {
 			org_id: org?.[0]?.id,
@@ -175,6 +161,7 @@ function OnboardingQuestionaire(): JSX.Element {
 					? (orgDetails?.otherTool as string)
 					: (orgDetails?.observabilityTool as string),
 			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
+			timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
 			reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
 				'Others',
 			)
@@ -208,7 +195,6 @@ function OnboardingQuestionaire(): JSX.Element {
 			<div className="onboarding-questionaire-content">
 				{currentStep === 1 && (
 					<OrgQuestions
-						currentOrgData={currentOrgData}
 						orgDetails={{
 							...orgDetails,
 							usesOtel: orgDetails.usesOtel ?? null,

frontend/src/container/PanelWrapper/constants.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import BarPanel from 'container/DashboardContainer/visualization/panels/BarPanel/BarPanel';
+import HistogramPanel from 'container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel';
 
 import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
-import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
 import TablePanelWrapper from './TablePanelWrapper';
-import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
@@ -16,8 +16,8 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
-	[PANEL_TYPES.BAR]: UplotPanelWrapper,
-	[PANEL_TYPES.HISTOGRAM]: HistogramPanelWrapper,
+	[PANEL_TYPES.BAR]: BarPanel,
+	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 };
 
 export const DEFAULT_BUCKET_COUNT = 30;

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -5,16 +5,12 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import { WidgetGraphComponentProps } from 'container/GridCardLayout/GridCard/types';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 export type PanelWrapperProps = {
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	widget: Widgets;
 	setRequestData?: WidgetGraphComponentProps['setRequestData'];
 	isFullViewMode?: boolean;

frontend/src/hooks/dashboard/__test__/useIsPanelWaitingOnVariable.test.ts

@@ -0,0 +1,316 @@
+import { act, renderHook } from '@testing-library/react';
+import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
+import { IDashboardVariablesStoreState } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import {
+	VariableFetchState,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import { useIsPanelWaitingOnVariable } from '../useVariableFetchState';
+
+function makeVariable(
+	overrides: Partial<IDashboardVariable> & { id: string },
+): IDashboardVariable {
+	return {
+		name: overrides.id,
+		description: '',
+		type: 'QUERY',
+		sort: 'DISABLED',
+		multiSelect: false,
+		showALLOption: false,
+		...overrides,
+	};
+}
+
+function resetStores(): void {
+	variableFetchStore.set(() => ({
+		states: {},
+		lastUpdated: {},
+		cycleIds: {},
+	}));
+	dashboardVariablesStore.set(() => ({
+		dashboardId: '',
+		variables: {},
+		sortedVariablesArray: [],
+		dependencyData: null,
+		variableTypes: {},
+		dynamicVariableOrder: [],
+	}));
+}
+
+function setFetchStates(states: Record<string, VariableFetchState>): void {
+	variableFetchStore.set(() => ({
+		states,
+		lastUpdated: {},
+		cycleIds: {},
+	}));
+}
+
+function setDashboardVariables(
+	overrides: Partial<IDashboardVariablesStoreState>,
+): void {
+	dashboardVariablesStore.set(() => ({
+		dashboardId: '',
+		variables: {},
+		sortedVariablesArray: [],
+		dependencyData: null,
+		variableTypes: {},
+		dynamicVariableOrder: [],
+		...overrides,
+	}));
+}
+
+describe('useIsPanelWaitingOnVariable', () => {
+	beforeEach(() => {
+		resetStores();
+	});
+
+	it('should return false when variableNames is empty', () => {
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable([]));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return false when all referenced variables are idle', () => {
+		setFetchStates({ a: 'idle', b: 'idle' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: 'val1' }),
+				b: makeVariable({ id: 'b', selectedValue: 'val2' }),
+			},
+			variableTypes: { a: 'QUERY', b: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return true when a variable is loading with empty selectedValue', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: undefined }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return true when a variable is waiting with empty selectedValue', () => {
+		setFetchStates({ a: 'waiting' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: '' }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return true when a variable is revalidating with empty selectedValue', () => {
+		setFetchStates({ a: 'revalidating' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: undefined }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return false when a variable is loading but has a selectedValue', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: 'some-value' }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return true for DYNAMIC variable with allSelected=true that is loading', () => {
+		setFetchStates({ dyn: 'loading' });
+		setDashboardVariables({
+			variables: {
+				dyn: makeVariable({
+					id: 'dyn',
+					type: 'DYNAMIC',
+					selectedValue: 'some-val',
+					allSelected: true,
+				}),
+			},
+			variableTypes: { dyn: 'DYNAMIC' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return true for DYNAMIC variable with allSelected=true that is waiting', () => {
+		setFetchStates({ dyn: 'waiting' });
+		setDashboardVariables({
+			variables: {
+				dyn: makeVariable({
+					id: 'dyn',
+					type: 'DYNAMIC',
+					selectedValue: 'val',
+					allSelected: true,
+				}),
+			},
+			variableTypes: { dyn: 'DYNAMIC' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return false for DYNAMIC variable with allSelected=true that is idle', () => {
+		setFetchStates({ dyn: 'idle' });
+		setDashboardVariables({
+			variables: {
+				dyn: makeVariable({
+					id: 'dyn',
+					type: 'DYNAMIC',
+					selectedValue: 'val',
+					allSelected: true,
+				}),
+			},
+			variableTypes: { dyn: 'DYNAMIC' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return false for non-DYNAMIC variable with allSelected=false and non-empty value that is loading', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({
+					id: 'a',
+					selectedValue: 'val',
+					allSelected: false,
+				}),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return true if any one of multiple variables is blocking', () => {
+		setFetchStates({ a: 'idle', b: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: 'val' }),
+				b: makeVariable({ id: 'b', selectedValue: undefined }),
+			},
+			variableTypes: { a: 'QUERY', b: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should return false when variable has no entry in fetch store (treated as idle)', () => {
+		setFetchStates({}); // no state entry for 'a'
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: 'val' }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should return false when variable is in error state with empty selectedValue', () => {
+		setFetchStates({ a: 'error' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: undefined }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should react to store updates', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: undefined }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(true);
+
+		// Simulate variable fetch completing
+		act(() => {
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+			});
+		});
+
+		expect(result.current).toBe(false);
+	});
+
+	it('should handle DYNAMIC variable with allSelected=false and empty selectedValue as blocking', () => {
+		setFetchStates({ dyn: 'loading' });
+		setDashboardVariables({
+			variables: {
+				dyn: makeVariable({
+					id: 'dyn',
+					type: 'DYNAMIC',
+					selectedValue: undefined,
+					allSelected: false,
+				}),
+			},
+			variableTypes: { dyn: 'DYNAMIC' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
+		expect(result.current).toBe(true);
+	});
+
+	it('should handle variable with array selectedValue as non-blocking when loading', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: ['val1', 'val2'] }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(false);
+	});
+
+	it('should handle variable with empty array selectedValue as blocking when loading', () => {
+		setFetchStates({ a: 'loading' });
+		setDashboardVariables({
+			variables: {
+				a: makeVariable({ id: 'a', selectedValue: [] }),
+			},
+			variableTypes: { a: 'QUERY' },
+		});
+
+		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
+		expect(result.current).toBe(true);
+	});
+});

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -0,0 +1,153 @@
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
+import isEmpty from 'lodash-es/isEmpty';
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+
+import { useDashboardVariablesSelector } from './useDashboardVariables';
+
+/**
+ * Generic selector hook for the variable fetch store.
+ * Same pattern as useDashboardVariablesSelector.
+ */
+const useVariableFetchSelector = <T>(
+	selector: (state: IVariableFetchStoreState) => T,
+): T => {
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+
+	const getSnapshot = useCallback(
+		() => selectorRef.current(variableFetchStore.getSnapshot()),
+		[],
+	);
+
+	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
+};
+
+interface UseVariableFetchStateReturn {
+	/** The current fetch state for this variable */
+	variableFetchState: VariableFetchState;
+	/** Current fetch cycle — include in react-query keys to auto-cancel stale requests */
+	variableFetchCycleId: number;
+	/** True if this variable is idle (not waiting and not fetching) */
+	isVariableSettled: boolean;
+	/** True if this variable is actively fetching (loading or revalidating) */
+	isVariableFetching: boolean;
+	/** True if this variable has completed at least one fetch cycle */
+	hasVariableFetchedOnce: boolean;
+	/** True if any parent variable hasn't settled yet */
+	isVariableWaitingForDependencies: boolean;
+	/** Message describing what this variable is waiting on, or null if not waiting */
+	variableDependencyWaitMessage?: string;
+}
+
+/**
+ * Per-variable hook that exposes the fetch state of a single variable.
+ * Reusable by both variable input components and panel components.
+ *
+ * Subscribes to both variableFetchStore (for states) and
+ * dashboardVariablesStore (for parent graph) to compute derived values.
+ */
+export function useVariableFetchState(
+	variableName: string,
+): UseVariableFetchStateReturn {
+	// This variable's fetch state (loading, waiting, idle, etc.)
+	const variableFetchState = useVariableFetchSelector(
+		(s) => s.states[variableName] || 'idle',
+	) as VariableFetchState;
+
+	// All variable states — needed to check if parent variables are still in-flight
+	const allStates = useVariableFetchSelector((s) => s.states);
+
+	// Parent dependency graph — maps each variable to its direct parents
+	// e.g. { "childVariable": ["parentVariable"] } means "childVariable" depends on "parentVariable"
+	const parentGraph = useDashboardVariablesSelector(
+		(s) => s.dependencyData?.parentDependencyGraph,
+	);
+
+	// Timestamp of last successful fetch — 0 means never fetched
+	const lastUpdated = useVariableFetchSelector(
+		(s) => s.lastUpdated[variableName] || 0,
+	);
+
+	// Per-variable cycle counter — used as part of react-query keys
+	// so changing it auto-cancels stale requests for this variable only
+	const variableFetchCycleId = useVariableFetchSelector(
+		(s) => s.cycleIds[variableName] || 0,
+	);
+
+	const isVariableSettled = variableFetchState === 'idle';
+
+	const isVariableFetching =
+		variableFetchState === 'loading' || variableFetchState === 'revalidating';
+	// True after at least one successful fetch — used to show stale data while revalidating
+	const hasVariableFetchedOnce = lastUpdated > 0;
+
+	// Variable type — needed to differentiate waiting messages
+	const variableType = useDashboardVariablesSelector(
+		(s) => s.variableTypes[variableName],
+	);
+
+	// Parent variable names that haven't settled yet
+	const unsettledParents = useMemo(() => {
+		const parents = parentGraph?.[variableName] || [];
+		return parents.filter((p) => (allStates[p] || 'idle') !== 'idle');
+	}, [parentGraph, variableName, allStates]);
+
+	const isVariableWaitingForDependencies = unsettledParents.length > 0;
+
+	const variableDependencyWaitMessage = useMemo(() => {
+		if (variableFetchState !== 'waiting') {
+			return;
+		}
+
+		if (variableType === 'DYNAMIC') {
+			return 'Waiting for all query variable options to load.';
+		}
+
+		if (unsettledParents.length === 0) {
+			return;
+		}
+
+		const quoted = unsettledParents.map((p) => `"${p}"`);
+		const names =
+			quoted.length > 1
+				? `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`
+				: quoted[0];
+		return `Waiting for options of ${names} to load.`;
+	}, [variableFetchState, variableType, unsettledParents]);
+
+	return {
+		variableFetchState,
+		isVariableSettled,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		variableFetchCycleId,
+	};
+}
+
+export function useIsPanelWaitingOnVariable(variableNames: string[]): boolean {
+	const states = useVariableFetchSelector((s) => s.states);
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const variableTypesMap = useDashboardVariablesSelector((s) => s.variableTypes);
+
+	return variableNames.some((name) => {
+		const variableFetchState = states[name];
+		const { selectedValue, allSelected } = dashboardVariables?.[name] || {};
+
+		const isVariableInFetchingOrWaitingState =
+			variableFetchState === 'loading' ||
+			variableFetchState === 'revalidating' ||
+			variableFetchState === 'waiting';
+
+		if (variableTypesMap[name] === 'DYNAMIC' && allSelected) {
+			return isVariableInFetchingOrWaitingState;
+		}
+
+		return isEmpty(selectedValue) ? isVariableInFetchingOrWaitingState : false;
+	});
+}

frontend/src/hooks/dashboard/utils.ts

@@ -3,6 +3,7 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { placeWidgetAtBottom } from 'container/NewWidget/utils';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
 import { isArray } from 'lodash-es';
 import {
 	Dashboard,
@@ -116,10 +117,17 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
+								variable.name &&
 								filter.key?.key === variable.dynamicVariablesAttribute &&
-								((isArray(filter.value) &&
-									filter.value.includes(`$${variable.name}`)) ||
-									filter.value === `$${variable.name}`) &&
+								(isArray(filter.value)
+									? filter.value.some(
+											(v) =>
+												typeof v === 'string' &&
+												variable.name &&
+												textContainsVariableReference(v, variable.name),
+									  )
+									: typeof filter.value === 'string' &&
+									  textContainsVariableReference(filter.value, variable.name)) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -132,7 +140,12 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								queryData.filter?.expression?.includes(`$${variable.name}`) &&
+								variable.name &&
+								queryData.filter?.expression &&
+								textContainsVariableReference(
+									queryData.filter.expression,
+									variable.name,
+								) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -149,7 +162,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							promqlQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							promqlQuery.query &&
+							textContainsVariableReference(promqlQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -165,7 +180,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							clickhouseQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							clickhouseQuery.query &&
+							textContainsVariableReference(clickhouseQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -10,13 +10,12 @@ import {
 	GetQueryResultsProps,
 } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { SuccessResponse, Warning } from 'types/api';
 import APIError from 'types/api/error';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 type UseGetQueryRangeOptions = UseQueryOptions<
-	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
+	MetricQueryRangeSuccessResponse,
 	APIError | Error
 >;
 
@@ -30,10 +29,7 @@ type UseGetQueryRange = (
 		widgetIndex: number;
 		publicDashboardId: string;
 	},
-) => UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
-	Error
->;
+) => UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 
 export const useGetQueryRange: UseGetQueryRange = (
 	requestData,
@@ -145,10 +141,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 		};
 	}, [options?.retry]);
 
-	return useQuery<
-		SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
-		APIError | Error
-	>({
+	return useQuery<MetricQueryRangeSuccessResponse, APIError | Error>({
 		queryFn: async ({ signal }) =>
 			GetMetricQueryRange(
 				modifiedRequestData,

frontend/src/lib/dashboard/getQueryResults.ts

@@ -19,7 +19,11 @@ import { Pagination } from 'hooks/queryPagination';
 import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
 import { isEmpty } from 'lodash-es';
 import { SuccessResponse, SuccessResponseV2, Warning } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
+import { ExecStats, MetricRangePayloadV5 } from 'types/api/v5/queryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -205,13 +209,13 @@ export async function GetMetricQueryRange(
 		widgetIndex: number;
 		publicDashboardId: string;
 	},
-): Promise<SuccessResponse<MetricRangePayloadProps> & { warning?: Warning }> {
+): Promise<MetricQueryRangeSuccessResponse> {
 	let legendMap: Record<string, string>;
 	let response:
-		| SuccessResponse<MetricRangePayloadProps>
-		| SuccessResponseV2<MetricRangePayloadV5>
-		| (SuccessResponse<MetricRangePayloadProps> & { warning?: Warning });
+		| MetricQueryRangeSuccessResponse
+		| SuccessResponseV2<MetricRangePayloadV5>;
 	let warning: Warning | undefined;
+	let meta: ExecStats | undefined;
 
 	const panelType = props.originalGraphType || props.graphType;
 
@@ -299,6 +303,7 @@ export async function GetMetricQueryRange(
 			);
 
 			warning = response.payload.warning || undefined;
+			meta = response.payload.meta || undefined;
 		} else {
 			const v5Response = await getQueryRangeV5(
 				v5Result.queryPayload,
@@ -318,6 +323,7 @@ export async function GetMetricQueryRange(
 			);
 
 			warning = response.payload.warning || undefined;
+			meta = response.payload.meta || undefined;
 		}
 	} else {
 		const legacyResult = prepareQueryRangePayload(props);
@@ -384,6 +390,7 @@ export async function GetMetricQueryRange(
 	return {
 		...response,
 		warning,
+		meta,
 	};
 }
 

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

@@ -0,0 +1,8 @@
+import { HistogramTooltipProps } from '../types';
+import Tooltip from './Tooltip';
+
+export default function HistogramTooltip(
+	props: HistogramTooltipProps,
+): JSX.Element {
+	return <Tooltip {...props} showTooltipHeader={false} />;
+}

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

@@ -16,12 +16,16 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
@@ -30,7 +34,12 @@ export default function Tooltip({
 		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
+	}, [
+		timezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
 
 	return (
 		<div
@@ -39,9 +48,11 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			<div className="uplot-tooltip-header">
-				<span>{headerTitle}</span>
-			</div>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</div>
+			)}
 			<div
 				style={{
 					height: Math.min(

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

@@ -60,6 +60,7 @@ export interface TooltipRenderArgs {
 }
 
 export interface BaseTooltipProps {
+	showTooltipHeader?: boolean;
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
@@ -74,7 +75,14 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 	isStackedBarChart?: boolean;
 }
 
-export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
+export interface HistogramTooltipProps
+	extends BaseTooltipProps,
+		TooltipRenderArgs {}
+
+export type TooltipProps =
+	| TimeSeriesTooltipProps
+	| BarTooltipProps
+	| HistogramTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

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

@@ -1,4 +1,4 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
+import { SeriesVisibilityItem } from 'container/DashboardContainer/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
@@ -238,7 +238,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	/**
 	 * Returns stored series visibility by index from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
 	 */
-	private getStoredVisibility(): SeriesVisibilityState | null {
+	private getStoredVisibility(): SeriesVisibilityItem[] | null {
 		if (
 			this.widgetId &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
@@ -248,14 +248,98 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return null;
 	}
 
+	/**
+	 * Derive visibility resolution state from stored preferences and current series:
+	 * - visibleStoredLabels: labels that should always be visible
+	 * - hiddenStoredLabels: labels that should always be hidden
+	 * - hasActivePreference: whether a "mix" preference applies to new labels
+	 */
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	private getVisibilityResolutionState(): {
+		visibleStoredLabels: Set<string>;
+		hiddenStoredLabels: Set<string>;
+		hasActivePreference: boolean;
+	} {
+		const seriesVisibilityState = this.getStoredVisibility();
+		if (!seriesVisibilityState || seriesVisibilityState.length === 0) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference: false,
+			};
+		}
+
+		// Single pass over stored items to derive:
+		// - visibleStoredLabels: any label that is ever stored as visible
+		// - hiddenStoredLabels: labels that are only ever stored as hidden
+		// - hasMixPreference: there is at least one visible and one hidden entry
+		const visibleStoredLabels = new Set<string>();
+		const hiddenStoredLabels = new Set<string>();
+		let hasAnyVisible = false;
+		let hasAnyHidden = false;
+
+		for (const { label, show } of seriesVisibilityState) {
+			if (show) {
+				hasAnyVisible = true;
+				visibleStoredLabels.add(label);
+				// If a label is ever visible, it should not be treated as "only hidden"
+				if (hiddenStoredLabels.has(label)) {
+					hiddenStoredLabels.delete(label);
+				}
+			} else {
+				hasAnyHidden = true;
+				// Only track as hidden if we have not already seen it as visible
+				if (!visibleStoredLabels.has(label)) {
+					hiddenStoredLabels.add(label);
+				}
+			}
+		}
+
+		const hasMixPreference = hasAnyVisible && hasAnyHidden;
+
+		// Current series labels in this chart.
+		const currentSeriesLabels = this.series.map(
+			(s: UPlotSeriesBuilder) => s.getConfig().label ?? '',
+		);
+
+		// Check if any stored "visible" label exists in the current series list.
+		const hasVisibleIntersection =
+			visibleStoredLabels.size > 0 &&
+			currentSeriesLabels.some((label) => visibleStoredLabels.has(label));
+
+		// Active preference only when there is a mix AND at least one visible
+		// stored label is present in the current series list.
+		const hasActivePreference = hasMixPreference && hasVisibleIntersection;
+
+		// We apply stored visibility in two cases:
+		// - There is an active preference (mix + intersection), OR
+		// - There is no mix (all true or all false) – preserve legacy behavior.
+		const shouldApplyStoredVisibility = !hasMixPreference || hasActivePreference;
+
+		if (!shouldApplyStoredVisibility) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference,
+			};
+		}
+
+		return {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		};
+	}
+
 	/**
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
@@ -263,11 +347,11 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			// +1 because uPlot series 0 is x-axis/time; data series are at 1, 2, ... (also matches stored visibility[0]=time, visibility[1]=first data, ...)
 			const seriesIndex = index + 1;
 			const show = resolveSeriesVisibility({
-				seriesIndex,
 				seriesShow: seriesConfig.show,
 				seriesLabel: label,
-				seriesVisibilityState,
-				isAnySeriesHidden,
+				visibleStoredLabels,
+				hiddenStoredLabels,
+				hasActivePreference,
 			});
 
 			acc[seriesIndex] = {
@@ -296,22 +380,23 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};
 
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		config.series = [
-			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s, index) => {
+			{ value: (): string => '', label: 'Timestamp' }, // Base series for timestamp
+			...this.series.map((s) => {
 				const series = s.getConfig();
 				// Stored visibility[0] is x-axis/time; data series start at visibility[1]
 				const visible = resolveSeriesVisibility({
-					seriesIndex: index + 1,
 					seriesShow: series.show,
 					seriesLabel: series.label ?? '',
-					seriesVisibilityState,
-					isAnySeriesHidden,
+					visibleStoredLabels,
+					hiddenStoredLabels,
+					hasActivePreference,
 				});
 				return {
 					...series,

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

@@ -49,7 +49,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? 2,
@@ -63,8 +63,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			lineConfig.cap = lineCap;
 		}
 
-		if (this.props.panelType === PANEL_TYPES.BAR) {
+		if (fillColor) {
+			lineConfig.fill = fillColor;
+		} else if (this.props.panelType === PANEL_TYPES.BAR) {
 			lineConfig.fill = resolvedLineColor;
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
 		return lineConfig;
@@ -81,6 +85,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			barAlignment,
 			barMaxWidth,
 			barWidthFactor,
+			stepInterval,
 		} = this.props;
 		if (pathBuilder) {
 			return { paths: pathBuilder };
@@ -104,6 +109,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 						barAlignment,
 						barMaxWidth,
 						barWidthFactor,
+						stepInterval,
 					});
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
@@ -145,6 +151,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			pointsConfig.show = false;
 		} else if (showPoints === VisibilityMode.Always) {
 			pointsConfig.show = true;
+		} else {
+			pointsConfig.show = false; // default to hidden
 		}
 
 		return pointsConfig;
@@ -209,12 +217,14 @@ function getPathBuilder({
 	barAlignment = BarAlignment.Center,
 	barWidthFactor = 0.6,
 	barMaxWidth = 200,
+	stepInterval,
 }: {
 	drawStyle: DrawStyle;
 	lineInterpolation?: LineInterpolation;
 	barAlignment?: BarAlignment;
 	barMaxWidth?: number;
 	barWidthFactor?: number;
+	stepInterval?: number;
 }): Series.PathBuilder {
 	if (!builders) {
 		throw new Error('Required uPlot path builders are not available');
@@ -222,14 +232,13 @@ function getPathBuilder({
 
 	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];
+		return getBarPathBuilder({
+			pathBuilders,
+			barAlignment,
+			barWidthFactor,
+			barMaxWidth,
+			stepInterval,
+		});
 	}
 
 	if (drawStyle === DrawStyle.Line) {
@@ -247,4 +256,81 @@ function getPathBuilder({
 	return builders.spline;
 }
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function getBarPathBuilder({
+	pathBuilders,
+	barAlignment,
+	barWidthFactor,
+	barMaxWidth,
+	stepInterval,
+}: {
+	pathBuilders: typeof uPlot.paths;
+	barAlignment: BarAlignment;
+	barWidthFactor: number;
+	barMaxWidth: number;
+	stepInterval?: number;
+}): Series.PathBuilder {
+	if (!builders) {
+		throw new Error('Required uPlot path builders are not available');
+	}
+
+	const barsPathBuilderFactory = pathBuilders.bars;
+
+	// When a stepInterval is provided (in seconds), cap the maximum bar width
+	// so that a single bar never visually spans more than stepInterval worth
+	// of time on the x-scale.
+	if (
+		typeof stepInterval === 'number' &&
+		stepInterval > 0 &&
+		barsPathBuilderFactory
+	) {
+		return (
+			self: uPlot,
+			seriesIdx: number,
+			idx0: number,
+			idx1: number,
+		): Series.Paths | null => {
+			let effectiveBarMaxWidth = barMaxWidth;
+
+			const xScale = self.scales.x as uPlot.Scale | undefined;
+			if (xScale && typeof xScale.min === 'number') {
+				const start = xScale.min as number;
+				const end = start + stepInterval;
+				const startPx = self.valToPos(start, 'x');
+				const endPx = self.valToPos(end, 'x');
+				const intervalPx = Math.abs(endPx - startPx);
+
+				if (intervalPx > 0) {
+					effectiveBarMaxWidth =
+						typeof barMaxWidth === 'number'
+							? Math.min(barMaxWidth, intervalPx)
+							: intervalPx;
+				}
+			}
+
+			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;
+			if (builders && !builders[barsCfgKey]) {
+				builders[barsCfgKey] = barsPathBuilderFactory({
+					size: [barWidthFactor, effectiveBarMaxWidth],
+					align: barAlignment,
+				});
+			}
+
+			return builders && builders[barsCfgKey]
+				? builders[barsCfgKey](self, seriesIdx, idx0, idx1)
+				: null;
+		};
+	}
+
+	const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
+	if (!builders[barsCfgKey] && barsPathBuilderFactory) {
+		builders[barsCfgKey] = barsPathBuilderFactory({
+			size: [barWidthFactor, barMaxWidth],
+			align: barAlignment,
+		});
+	}
+
+	return builders[barsCfgKey];
+}
+
 export type { SeriesProps };

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

@@ -186,11 +186,10 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('restores visibility state from localStorage when selectionPreferencesSource is LOCAL_STORAGE', () => {
-		// Index 0 = x-axis/time; indices 1,2 = data series (Requests, Errors). resolveSeriesVisibility matches by seriesIndex + seriesLabel.
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue({
-			labels: ['x-axis', 'Requests', 'Errors'],
-			visibility: [true, true, false],
-		});
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
 
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',
@@ -202,7 +201,7 @@ describe('UPlotConfigBuilder', () => {
 
 		const legendItems = builder.getLegendItems();
 
-		// When any series is hidden, legend visibility is driven by the stored map
+		// When any series is hidden, visibility is driven by stored label-based preferences
 		expect(legendItems[1].show).toBe(true);
 		expect(legendItems[2].show).toBe(false);
 
@@ -213,6 +212,109 @@ describe('UPlotConfigBuilder', () => {
 		expect(secondSeries?.show).toBe(false);
 	});
 
+	it('hides new series by default when there is a mixed preference and a visible label matches current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+		builder.addSeries(createSeriesProps({ label: 'Errors' }));
+		builder.addSeries(createSeriesProps({ label: 'Latency' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Stored labels: Requests (visible), Errors (hidden).
+		// New label "Latency" should be hidden because there is a mixed preference
+		// and "Requests" (a visible stored label) is present in the current series.
+		expect(legendItems[1].label).toBe('Requests');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Errors');
+		expect(legendItems[2].show).toBe(false);
+		expect(legendItems[3].label).toBe('Latency');
+		expect(legendItems[3].show).toBe(false);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries, thirdSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('Requests');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Errors');
+		expect(secondSeries?.show).toBe(false);
+		expect(thirdSeries?.label).toBe('Latency');
+		expect(thirdSeries?.show).toBe(false);
+	});
+
+	it('shows all series when there is a mixed preference but no visible stored labels match current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'StoredVisible', show: true },
+			{ label: 'StoredHidden', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// None of these labels intersect with the stored visible label "StoredVisible"
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'Memory' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Mixed preference exists in storage, but since no visible labels intersect
+		// with current series, stored preferences are ignored and all are visible.
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Memory');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Memory');
+		expect(secondSeries?.show).toBe(true);
+	});
+
+	it('treats duplicate labels as visible when any stored entry for that label is visible', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'CPU', show: true },
+			{ label: 'CPU', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-dup',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// Two series with the same label; both should be visible because at least
+		// one stored entry for "CPU" is visible.
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+
+		const legendItems = builder.getLegendItems();
+
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('CPU');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('CPU');
+		expect(secondSeries?.show).toBe(true);
+	});
+
 	it('does not attempt to read stored visibility when using in-memory preferences', () => {
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',

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

@@ -175,7 +175,9 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+	fillColor?: string;
 	isDarkMode?: boolean;
+	stepInterval?: number;
 }
 
 export interface LegendItem {

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

@@ -11,22 +11,6 @@ import { Threshold } from '../hooks/types';
 import { findMinMaxThresholdValues } from './threshold';
 import { LogScaleLimits, RangeFunctionParams } from './types';
 
-/**
- * Rounds a number down to the nearest multiple of incr.
- * Used for linear scale min so the axis starts on a clean tick.
- */
-export function incrRoundDn(num: number, incr: number): number {
-	return Math.floor(num / incr) * incr;
-}
-
-/**
- * Rounds a number up to the nearest multiple of incr.
- * Used for linear scale max so the axis ends on a clean tick.
- */
-export function incrRoundUp(num: number, incr: number): number {
-	return Math.ceil(num / incr) * incr;
-}
-
 /**
  * Snaps min/max/softMin/softMax to valid log-scale values (powers of logBase).
  * Only applies when distribution is logarithmic; otherwise returns limits unchanged.
@@ -213,25 +197,6 @@ function getLogScaleRange(
 	);
 }
 
-/**
- * Snaps linear scale min down and max up to whole numbers so axis bounds are clean.
- */
-function roundLinearRange(minMax: Range.MinMax): Range.MinMax {
-	const [currentMin, currentMax] = minMax;
-	let roundedMin = currentMin;
-	let roundedMax = currentMax;
-
-	if (roundedMin != null) {
-		roundedMin = incrRoundDn(roundedMin, 1);
-	}
-
-	if (roundedMax != null) {
-		roundedMax = incrRoundUp(roundedMax, 1);
-	}
-
-	return [roundedMin, roundedMax];
-}
-
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -330,7 +295,6 @@ export function createRangeFunction(
 
 		if (scale.distr === 1) {
 			minMax = getLinearScaleRange(minMax, params, dataMin, dataMax);
-			minMax = roundLinearRange(minMax);
 		} else if (scale.distr === 3) {
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;

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

@@ -1,25 +1,44 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
-
+/**
+ * Resolve the visibility of a single series based on:
+ * - Stored per-series visibility (when applicable)
+ * - Whether there is an "active preference" (mix of visible/hidden that matches current series)
+ * - The series' own default show flag
+ */
 export function resolveSeriesVisibility({
-	seriesIndex,
 	seriesShow,
 	seriesLabel,
-	seriesVisibilityState,
-	isAnySeriesHidden,
+	visibleStoredLabels,
+	hiddenStoredLabels,
+	hasActivePreference,
 }: {
-	seriesIndex: number;
 	seriesShow: boolean | undefined | null;
 	seriesLabel: string;
-	seriesVisibilityState: SeriesVisibilityState | null;
-	isAnySeriesHidden: boolean;
+	visibleStoredLabels: Set<string> | null;
+	hiddenStoredLabels: Set<string> | null;
+	hasActivePreference: boolean;
 }): boolean {
-	if (
-		isAnySeriesHidden &&
-		seriesVisibilityState?.visibility &&
-		seriesVisibilityState.labels.length > seriesIndex &&
-		seriesVisibilityState.labels[seriesIndex] === seriesLabel
-	) {
-		return seriesVisibilityState.visibility[seriesIndex] ?? false;
+	const isStoredVisible = !!visibleStoredLabels?.has(seriesLabel);
+	const isStoredHidden = !!hiddenStoredLabels?.has(seriesLabel);
+
+	// If the label is explicitly stored as visible, always show it.
+	if (isStoredVisible) {
+		return true;
 	}
+
+	// If the label is explicitly stored as hidden (and never stored as visible),
+	// always hide it.
+	if (isStoredHidden) {
+		return false;
+	}
+
+	// "Active preference" means:
+	// - There is a mix of visible/hidden in storage, AND
+	// - At least one stored *visible* label exists in the current series list.
+	// For such a preference, any new/unknown series should be hidden by default.
+	if (hasActivePreference) {
+		return false;
+	}
+
+	// Otherwise fall back to the series' own config or show by default.
 	return seriesShow ?? true;
 }

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -84,8 +84,6 @@ const DashboardContext = createContext<IDashboardContext>({
 	toScrollWidgetId: '',
 	setToScrollWidgetId: () => {},
 	updateLocalStorageDashboardVariables: () => {},
-	variablesToGetUpdated: [],
-	setVariablesToGetUpdated: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
 	selectedRowWidgetId: '',
@@ -183,10 +181,6 @@ export function DashboardProvider({
 		exact: true,
 	});
 
-	const [variablesToGetUpdated, setVariablesToGetUpdated] = useState<string[]>(
-		[],
-	);
-
 	const [layouts, setLayouts] = useState<Layout[]>([]);
 
 	const [panelMap, setPanelMap] = useState<
@@ -517,8 +511,6 @@ export function DashboardProvider({
 			updatedTimeRef,
 			setToScrollWidgetId,
 			updateLocalStorageDashboardVariables,
-			variablesToGetUpdated,
-			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,
@@ -541,8 +533,6 @@ export function DashboardProvider({
 			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			currentDashboard,
-			variablesToGetUpdated,
-			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,

frontend/src/providers/Dashboard/store/__tests__/variableFetchStore.test.ts

@@ -0,0 +1,527 @@
+import * as dashboardVariablesStore from '../dashboardVariables/dashboardVariablesStore';
+import { IDependencyData } from '../dashboardVariables/dashboardVariablesStoreTypes';
+import {
+	enqueueDescendantsOfVariable,
+	enqueueFetchOfAllVariables,
+	initializeVariableFetchStore,
+	onVariableFetchComplete,
+	onVariableFetchFailure,
+	VariableFetchContext,
+	variableFetchStore,
+} from '../variableFetchStore';
+
+const getVariableDependencyContextSpy = jest.spyOn(
+	dashboardVariablesStore,
+	'getVariableDependencyContext',
+);
+
+function resetStore(): void {
+	variableFetchStore.set(() => ({
+		states: {},
+		lastUpdated: {},
+		cycleIds: {},
+	}));
+}
+
+function mockContext(overrides: Partial<VariableFetchContext> = {}): void {
+	getVariableDependencyContextSpy.mockReturnValue({
+		doAllVariablesHaveValuesSelected: false,
+		variableTypes: {},
+		dynamicVariableOrder: [],
+		dependencyData: null,
+		...overrides,
+	});
+}
+
+/**
+ * Helper to build a dependency data object for tests.
+ * Only the fields used by the store actions are required.
+ */
+function buildDependencyData(
+	overrides: Partial<IDependencyData> = {},
+): IDependencyData {
+	return {
+		order: [],
+		graph: {},
+		parentDependencyGraph: {},
+		transitiveDescendants: {},
+		hasCycle: false,
+		...overrides,
+	};
+}
+
+describe('variableFetchStore', () => {
+	beforeEach(() => {
+		resetStore();
+		jest.clearAllMocks();
+	});
+
+	// ==================== initializeVariableFetchStore ====================
+
+	describe('initializeVariableFetchStore', () => {
+		it('should initialize new variables to idle', () => {
+			initializeVariableFetchStore(['a', 'b', 'c']);
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states).toEqual({ a: 'idle', b: 'idle', c: 'idle' });
+		});
+
+		it('should preserve existing states for known variables', () => {
+			// Pre-set a state
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+			});
+
+			initializeVariableFetchStore(['a', 'b']);
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('loading');
+			expect(storeSnapshot.states.b).toBe('idle');
+		});
+
+		it('should clean up stale variables that no longer exist', () => {
+			variableFetchStore.update((d) => {
+				d.states.old = 'idle';
+				d.lastUpdated.old = 100;
+				d.cycleIds.old = 3;
+			});
+
+			initializeVariableFetchStore(['a']);
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.old).toBeUndefined();
+			expect(storeSnapshot.lastUpdated.old).toBeUndefined();
+			expect(storeSnapshot.cycleIds.old).toBeUndefined();
+			expect(storeSnapshot.states.a).toBe('idle');
+		});
+
+		it('should handle empty variable names array', () => {
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+			});
+
+			initializeVariableFetchStore([]);
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states).toEqual({});
+		});
+	});
+
+	// ==================== enqueueFetchOfAllVariables ====================
+
+	describe('enqueueFetchOfAllVariables', () => {
+		it('should no-op when dependencyData is null', () => {
+			mockContext({ dependencyData: null });
+
+			initializeVariableFetchStore(['a']);
+			enqueueFetchOfAllVariables();
+
+			expect(variableFetchStore.getSnapshot().states.a).toBe('idle');
+		});
+
+		it('should set root query variables to loading and dependent ones to waiting', () => {
+			// a is root (no parents), b depends on a
+			mockContext({
+				dependencyData: buildDependencyData({
+					order: ['a', 'b'],
+					parentDependencyGraph: { a: [], b: ['a'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY' },
+			});
+
+			initializeVariableFetchStore(['a', 'b']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('loading');
+			expect(storeSnapshot.states.b).toBe('waiting');
+		});
+
+		it('should set root query variables to revalidating when previously fetched', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					order: ['a'],
+					parentDependencyGraph: { a: [] },
+				}),
+				variableTypes: { a: 'QUERY' },
+			});
+
+			// Pre-set lastUpdated so it appears previously fetched
+			variableFetchStore.update((d) => {
+				d.lastUpdated.a = 1000;
+			});
+
+			initializeVariableFetchStore(['a']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('revalidating');
+		});
+
+		it('should bump cycle IDs for all enqueued variables', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					order: ['a', 'b'],
+					parentDependencyGraph: { a: [], b: ['a'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY' },
+			});
+
+			initializeVariableFetchStore(['a', 'b']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.cycleIds.a).toBe(1);
+			expect(storeSnapshot.cycleIds.b).toBe(1);
+		});
+
+		it('should set dynamic variables to waiting when not all variables have values', () => {
+			mockContext({
+				doAllVariablesHaveValuesSelected: false,
+				dependencyData: buildDependencyData({ order: [] }),
+				variableTypes: { dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			initializeVariableFetchStore(['dyn1']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.dyn1).toBe('waiting');
+		});
+
+		it('should set dynamic variables to loading when all variables have values', () => {
+			mockContext({
+				doAllVariablesHaveValuesSelected: true,
+				dependencyData: buildDependencyData({ order: [] }),
+				variableTypes: { dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			initializeVariableFetchStore(['dyn1']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.dyn1).toBe('loading');
+		});
+
+		it('should not treat non-QUERY parents as query parents', () => {
+			// b has a CUSTOM parent — shouldn't cause waiting
+			mockContext({
+				dependencyData: buildDependencyData({
+					order: ['b'],
+					parentDependencyGraph: { b: ['customVar'] },
+				}),
+				variableTypes: { b: 'QUERY', customVar: 'CUSTOM' },
+			});
+
+			initializeVariableFetchStore(['b', 'customVar']);
+			enqueueFetchOfAllVariables();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.b).toBe('loading');
+		});
+	});
+
+	// ==================== onVariableFetchComplete ====================
+
+	describe('onVariableFetchComplete', () => {
+		it('should set the completed variable to idle with a lastUpdated timestamp', () => {
+			mockContext();
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+			});
+
+			const before = Date.now();
+			onVariableFetchComplete('a');
+			const after = Date.now();
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('idle');
+			expect(storeSnapshot.lastUpdated.a).toBeGreaterThanOrEqual(before);
+			expect(storeSnapshot.lastUpdated.a).toBeLessThanOrEqual(after);
+		});
+
+		it('should unblock waiting query-type children', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					graph: { a: ['b'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.b = 'waiting';
+			});
+
+			onVariableFetchComplete('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('idle');
+			expect(storeSnapshot.states.b).toBe('loading');
+		});
+
+		it('should not unblock non-QUERY children', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					graph: { a: ['dyn1'] },
+				}),
+				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.dyn1 = 'waiting';
+			});
+
+			onVariableFetchComplete('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			// dyn1 is DYNAMIC, not QUERY, so it should remain waiting
+			expect(storeSnapshot.states.dyn1).toBe('waiting');
+		});
+
+		it('should unlock waiting dynamic variables when all query variables are settled', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					graph: { a: [] },
+				}),
+				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.dyn1 = 'waiting';
+			});
+
+			onVariableFetchComplete('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.dyn1).toBe('loading');
+		});
+
+		it('should NOT unlock dynamic variables if a query variable is still in-flight', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					graph: { a: ['b'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.b = 'waiting';
+				d.states.dyn1 = 'waiting';
+			});
+
+			onVariableFetchComplete('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.dyn1).toBe('waiting');
+		});
+	});
+
+	// ==================== onVariableFetchFailure ====================
+
+	describe('onVariableFetchFailure', () => {
+		it('should set the failed variable to error', () => {
+			mockContext();
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+			});
+
+			onVariableFetchFailure('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('error');
+		});
+
+		it('should set query-type transitive descendants to idle', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b', 'c'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.b = 'waiting';
+				d.states.c = 'waiting';
+			});
+
+			onVariableFetchFailure('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.a).toBe('error');
+			expect(storeSnapshot.states.b).toBe('idle');
+			expect(storeSnapshot.states.c).toBe('idle');
+		});
+
+		it('should not touch non-QUERY descendants', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['dyn1'] },
+				}),
+				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.dyn1 = 'waiting';
+			});
+
+			onVariableFetchFailure('a');
+
+			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('waiting');
+		});
+
+		it('should unlock waiting dynamic variables when all query variables settle via error', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: {},
+				}),
+				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
+				dynamicVariableOrder: ['dyn1'],
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'loading';
+				d.states.dyn1 = 'waiting';
+			});
+
+			onVariableFetchFailure('a');
+
+			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('loading');
+		});
+	});
+
+	// ==================== enqueueDescendantsOfVariable ====================
+
+	describe('enqueueDescendantsOfVariable', () => {
+		it('should no-op when dependencyData is null', () => {
+			mockContext({ dependencyData: null });
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			expect(variableFetchStore.getSnapshot().states.b).toBe('idle');
+		});
+
+		it('should enqueue query-type descendants with all parents settled', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b'] },
+					parentDependencyGraph: { b: ['a'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			expect(storeSnapshot.states.b).toBe('loading');
+			expect(storeSnapshot.cycleIds.b).toBe(1);
+		});
+
+		it('should set descendants to waiting when some parents are not settled', () => {
+			// b depends on both a and c; c is still loading
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b'] },
+					parentDependencyGraph: { b: ['a', 'c'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+				d.states.c = 'loading';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			expect(variableFetchStore.getSnapshot().states.b).toBe('waiting');
+		});
+
+		it('should skip non-QUERY descendants', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['dyn1'] },
+					parentDependencyGraph: {},
+				}),
+				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.dyn1 = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			// dyn1 is DYNAMIC, so it should not be touched
+			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('idle');
+		});
+
+		it('should handle chain of descendants: a -> b -> c', () => {
+			// a -> b -> c, all QUERY
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b', 'c'] },
+					parentDependencyGraph: { b: ['a'], c: ['b'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+				d.states.c = 'idle';
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			const storeSnapshot = variableFetchStore.getSnapshot();
+			// b's parent (a) is idle/settled → loading
+			expect(storeSnapshot.states.b).toBe('loading');
+			// c's parent (b) just moved to loading (not settled) → waiting
+			expect(storeSnapshot.states.c).toBe('waiting');
+		});
+
+		it('should set descendants to revalidating when previously fetched', () => {
+			mockContext({
+				dependencyData: buildDependencyData({
+					transitiveDescendants: { a: ['b'] },
+					parentDependencyGraph: { b: ['a'] },
+				}),
+				variableTypes: { a: 'QUERY', b: 'QUERY' },
+			});
+
+			variableFetchStore.update((d) => {
+				d.states.a = 'idle';
+				d.states.b = 'idle';
+				d.lastUpdated.b = 1000;
+			});
+
+			enqueueDescendantsOfVariable('a');
+
+			expect(variableFetchStore.getSnapshot().states.b).toBe('revalidating');
+		});
+	});
+});

frontend/src/providers/Dashboard/store/__tests__/variableFetchStoreUtils.test.ts

@@ -0,0 +1,196 @@
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+} from '../variableFetchStore';
+import {
+	areAllQueryVariablesSettled,
+	isSettled,
+	resolveFetchState,
+	unlockWaitingDynamicVariables,
+} from '../variableFetchStoreUtils';
+
+describe('variableFetchStoreUtils', () => {
+	describe('isSettled', () => {
+		it('should return true for idle state', () => {
+			expect(isSettled('idle')).toBe(true);
+		});
+
+		it('should return true for error state', () => {
+			expect(isSettled('error')).toBe(true);
+		});
+
+		it('should return false for loading state', () => {
+			expect(isSettled('loading')).toBe(false);
+		});
+
+		it('should return false for revalidating state', () => {
+			expect(isSettled('revalidating')).toBe(false);
+		});
+
+		it('should return false for waiting state', () => {
+			expect(isSettled('waiting')).toBe(false);
+		});
+
+		it('should return false for undefined', () => {
+			expect(isSettled(undefined)).toBe(false);
+		});
+	});
+
+	describe('resolveFetchState', () => {
+		it('should return "loading" when variable has never been fetched', () => {
+			const draft: IVariableFetchStoreState = {
+				states: {},
+				lastUpdated: {},
+				cycleIds: {},
+			};
+
+			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
+		});
+
+		it('should return "loading" when lastUpdated is 0', () => {
+			const draft: IVariableFetchStoreState = {
+				states: {},
+				lastUpdated: { myVar: 0 },
+				cycleIds: {},
+			};
+
+			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
+		});
+
+		it('should return "revalidating" when variable has been fetched before', () => {
+			const draft: IVariableFetchStoreState = {
+				states: {},
+				lastUpdated: { myVar: 1000 },
+				cycleIds: {},
+			};
+
+			expect(resolveFetchState(draft, 'myVar')).toBe('revalidating');
+		});
+	});
+
+	describe('areAllQueryVariablesSettled', () => {
+		it('should return true when all query variables are idle', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'idle',
+				b: 'idle',
+			};
+			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
+		});
+
+		it('should return true when all query variables are in error', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'error',
+				b: 'error',
+			};
+			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
+		});
+
+		it('should return true with a mix of idle and error query variables', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'idle',
+				b: 'error',
+			};
+			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
+		});
+
+		it('should return false when any query variable is loading', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'idle',
+				b: 'loading',
+			};
+			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
+		});
+
+		it('should return false when any query variable is waiting', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'idle',
+				b: 'waiting',
+			};
+			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
+		});
+
+		it('should ignore non-QUERY variable types', () => {
+			const states: Record<string, VariableFetchState> = {
+				a: 'idle',
+				dynVar: 'loading',
+			};
+			const variableTypes = {
+				a: 'QUERY' as const,
+				dynVar: 'DYNAMIC' as const,
+			};
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
+		});
+
+		it('should return true when there are no QUERY variables', () => {
+			const states: Record<string, VariableFetchState> = {
+				dynVar: 'loading',
+			};
+			const variableTypes = { dynVar: 'DYNAMIC' as const };
+
+			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
+		});
+	});
+
+	describe('unlockWaitingDynamicVariables', () => {
+		it('should transition waiting dynamic variables to loading when never fetched', () => {
+			const draft: IVariableFetchStoreState = {
+				states: { dyn1: 'waiting', dyn2: 'waiting' },
+				lastUpdated: {},
+				cycleIds: {},
+			};
+
+			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
+
+			expect(draft.states.dyn1).toBe('loading');
+			expect(draft.states.dyn2).toBe('loading');
+		});
+
+		it('should transition waiting dynamic variables to revalidating when previously fetched', () => {
+			const draft: IVariableFetchStoreState = {
+				states: { dyn1: 'waiting' },
+				lastUpdated: { dyn1: 1000 },
+				cycleIds: {},
+			};
+
+			unlockWaitingDynamicVariables(draft, ['dyn1']);
+
+			expect(draft.states.dyn1).toBe('revalidating');
+		});
+
+		it('should not touch dynamic variables that are not in waiting state', () => {
+			const draft: IVariableFetchStoreState = {
+				states: { dyn1: 'idle', dyn2: 'loading' },
+				lastUpdated: {},
+				cycleIds: {},
+			};
+
+			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
+
+			expect(draft.states.dyn1).toBe('idle');
+			expect(draft.states.dyn2).toBe('loading');
+		});
+
+		it('should handle empty dynamic variable order', () => {
+			const draft: IVariableFetchStoreState = {
+				states: { dyn1: 'waiting' },
+				lastUpdated: {},
+				cycleIds: {},
+			};
+
+			unlockWaitingDynamicVariables(draft, []);
+
+			expect(draft.states.dyn1).toBe('waiting');
+		});
+	});
+});

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStore.test.ts

@@ -0,0 +1,297 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import {
+	dashboardVariablesStore,
+	getVariableDependencyContext,
+	setDashboardVariablesStore,
+	updateDashboardVariablesStore,
+} from '../dashboardVariablesStore';
+import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
+
+function createVariable(
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable {
+	return {
+		id: 'test-id',
+		name: 'test-var',
+		description: '',
+		type: 'QUERY',
+		sort: 'DISABLED',
+		showALLOption: false,
+		multiSelect: false,
+		order: 0,
+		...overrides,
+	};
+}
+
+function resetStore(): void {
+	dashboardVariablesStore.set(() => ({
+		dashboardId: '',
+		variables: {},
+		sortedVariablesArray: [],
+		dependencyData: null,
+		variableTypes: {},
+		dynamicVariableOrder: [],
+	}));
+}
+
+describe('dashboardVariablesStore', () => {
+	beforeEach(() => {
+		resetStore();
+	});
+
+	describe('setDashboardVariablesStore', () => {
+		it('should set the dashboard variables and compute derived values', () => {
+			const variables: IDashboardVariables = {
+				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+			};
+
+			setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
+
+			const storeSnapshot = dashboardVariablesStore.getSnapshot();
+			expect(storeSnapshot.dashboardId).toBe('dash-1');
+			expect(storeSnapshot.variables).toEqual(variables);
+			expect(storeSnapshot.variableTypes).toEqual({ env: 'QUERY' });
+			expect(storeSnapshot.sortedVariablesArray).toHaveLength(1);
+		});
+	});
+
+	describe('updateDashboardVariablesStore', () => {
+		it('should update variables and recompute derived values', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+				},
+			});
+
+			const updatedVariables: IDashboardVariables = {
+				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
+				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+			};
+
+			updateDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: updatedVariables,
+			});
+
+			const storeSnapshot = dashboardVariablesStore.getSnapshot();
+			expect(storeSnapshot.variableTypes).toEqual({
+				env: 'QUERY',
+				dyn1: 'DYNAMIC',
+			});
+			expect(storeSnapshot.dynamicVariableOrder).toEqual(['dyn1']);
+		});
+
+		it('should replace dashboardId when it does not match', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					'not-there': createVariable({ name: 'not-there', order: 0 }),
+				},
+			});
+
+			updateDashboardVariablesStore({
+				dashboardId: 'dash-2',
+				variables: {
+					a: createVariable({ name: 'a', order: 0 }),
+				},
+			});
+
+			const storeSnapshot = dashboardVariablesStore.getSnapshot();
+			expect(storeSnapshot.dashboardId).toBe('dash-2');
+			expect(storeSnapshot.variableTypes).toEqual({
+				a: 'QUERY',
+			});
+			expect(storeSnapshot.variableTypes).not.toEqual({
+				'not-there': 'QUERY',
+			});
+		});
+	});
+
+	describe('getVariableDependencyContext', () => {
+		it('should return context with all fields', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 0,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const {
+				variableTypes,
+				dynamicVariableOrder,
+				dependencyData,
+			} = getVariableDependencyContext();
+
+			expect(variableTypes).toEqual({ env: 'QUERY' });
+			expect(dynamicVariableOrder).toEqual([]);
+			expect(dependencyData).not.toBeNull();
+		});
+
+		it('should report doAllVariablesHaveValuesSelected as true when all variables have selectedValue', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 0,
+						selectedValue: 'prod',
+					}),
+					region: createVariable({
+						name: 'region',
+						type: 'CUSTOM',
+						order: 1,
+						selectedValue: 'us-east',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should report doAllVariablesHaveValuesSelected as false when some variables lack selectedValue', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 0,
+						selectedValue: 'prod',
+					}),
+					region: createVariable({
+						name: 'region',
+						type: 'CUSTOM',
+						order: 1,
+						selectedValue: undefined,
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(false);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and selectedValue=null as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: null as any,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and selectedValue=undefined as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: undefined,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty string selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: '',
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty array selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: [] as any,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should report false when a DYNAMIC variable has empty selectedValue and allSelected is not true', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: '',
+						allSelected: false,
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(false);
+		});
+	});
+});

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStoreUtils.test.ts

@@ -0,0 +1,369 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
+import {
+	buildDynamicVariableOrder,
+	buildSortedVariablesArray,
+	buildVariableTypesMap,
+	computeDerivedValues,
+} from '../dashboardVariablesStoreUtils';
+
+const createVariable = (
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable => ({
+	id: 'test-id',
+	name: 'test-var',
+	description: '',
+	type: 'QUERY',
+	sort: 'DISABLED',
+	showALLOption: false,
+	multiSelect: false,
+	order: 0,
+	...overrides,
+});
+
+describe('dashboardVariablesStoreUtils', () => {
+	describe('buildSortedVariablesArray', () => {
+		it('should sort variables by order property', () => {
+			const variables: IDashboardVariables = {
+				c: createVariable({ name: 'c', order: 3 }),
+				a: createVariable({ name: 'a', order: 1 }),
+				b: createVariable({ name: 'b', order: 2 }),
+			};
+
+			const result = buildSortedVariablesArray(variables);
+
+			expect(result.map((v) => v.name)).toEqual(['a', 'b', 'c']);
+		});
+
+		it('should return empty array for empty variables', () => {
+			const result = buildSortedVariablesArray({});
+			expect(result).toEqual([]);
+		});
+
+		it('should create copies of variables (not references)', () => {
+			const original = createVariable({ name: 'a', order: 0 });
+			const variables: IDashboardVariables = { a: original };
+
+			const result = buildSortedVariablesArray(variables);
+
+			expect(result[0]).not.toBe(original);
+			expect(result[0]).toEqual(original);
+		});
+	});
+
+	describe('buildVariableTypesMap', () => {
+		it('should create a name-to-type mapping', () => {
+			const sorted = [
+				createVariable({ name: 'env', type: 'QUERY' }),
+				createVariable({ name: 'region', type: 'CUSTOM' }),
+				createVariable({ name: 'dynVar', type: 'DYNAMIC' }),
+				createVariable({ name: 'text', type: 'TEXTBOX' }),
+			];
+
+			const result = buildVariableTypesMap(sorted);
+
+			expect(result).toEqual({
+				env: 'QUERY',
+				region: 'CUSTOM',
+				dynVar: 'DYNAMIC',
+				text: 'TEXTBOX',
+			});
+		});
+
+		it('should return empty object for empty array', () => {
+			expect(buildVariableTypesMap([])).toEqual({});
+		});
+	});
+
+	describe('buildDynamicVariableOrder', () => {
+		it('should return only DYNAMIC variable names in order', () => {
+			const sorted = [
+				createVariable({ name: 'queryVar', type: 'QUERY', order: 0 }),
+				createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+				createVariable({ name: 'customVar', type: 'CUSTOM', order: 2 }),
+				createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
+			];
+
+			const result = buildDynamicVariableOrder(sorted);
+
+			expect(result).toEqual(['dyn1', 'dyn2']);
+		});
+
+		it('should return empty array when no DYNAMIC variables exist', () => {
+			const sorted = [
+				createVariable({ name: 'a', type: 'QUERY' }),
+				createVariable({ name: 'b', type: 'CUSTOM' }),
+			];
+
+			expect(buildDynamicVariableOrder(sorted)).toEqual([]);
+		});
+
+		it('should return empty array for empty input', () => {
+			expect(buildDynamicVariableOrder([])).toEqual([]);
+		});
+	});
+
+	describe('computeDerivedValues', () => {
+		it('should compute all derived values from variables', () => {
+			const variables: IDashboardVariables = {
+				env: createVariable({
+					name: 'env',
+					type: 'QUERY',
+					order: 0,
+				}),
+				dyn1: createVariable({
+					name: 'dyn1',
+					type: 'DYNAMIC',
+					order: 1,
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.sortedVariablesArray).toHaveLength(2);
+			expect(result.sortedVariablesArray[0].name).toBe('env');
+			expect(result.sortedVariablesArray[1].name).toBe('dyn1');
+
+			expect(result.variableTypes).toEqual({
+				env: 'QUERY',
+				dyn1: 'DYNAMIC',
+			});
+
+			expect(result.dynamicVariableOrder).toEqual(['dyn1']);
+
+			// dependencyData should exist since there are variables
+			expect(result.dependencyData).not.toBeNull();
+		});
+
+		it('should return null dependencyData for empty variables', () => {
+			const result = computeDerivedValues({});
+
+			expect(result.sortedVariablesArray).toEqual([]);
+			expect(result.dependencyData).toBeNull();
+			expect(result.variableTypes).toEqual({});
+			expect(result.dynamicVariableOrder).toEqual([]);
+		});
+
+		it('should handle all four variable types together', () => {
+			const variables: IDashboardVariables = {
+				queryVar: createVariable({
+					name: 'queryVar',
+					type: 'QUERY',
+					order: 0,
+				}),
+				customVar: createVariable({
+					name: 'customVar',
+					type: 'CUSTOM',
+					order: 1,
+				}),
+				dynVar: createVariable({
+					name: 'dynVar',
+					type: 'DYNAMIC',
+					order: 2,
+				}),
+				textVar: createVariable({
+					name: 'textVar',
+					type: 'TEXTBOX',
+					order: 3,
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.sortedVariablesArray).toHaveLength(4);
+			expect(result.sortedVariablesArray.map((v) => v.name)).toEqual([
+				'queryVar',
+				'customVar',
+				'dynVar',
+				'textVar',
+			]);
+
+			expect(result.variableTypes).toEqual({
+				queryVar: 'QUERY',
+				customVar: 'CUSTOM',
+				dynVar: 'DYNAMIC',
+				textVar: 'TEXTBOX',
+			});
+
+			expect(result.dynamicVariableOrder).toEqual(['dynVar']);
+			expect(result.dependencyData).not.toBeNull();
+		});
+
+		it('should sort variables by order regardless of insertion order', () => {
+			const variables: IDashboardVariables = {
+				z: createVariable({ name: 'z', type: 'QUERY', order: 4 }),
+				a: createVariable({ name: 'a', type: 'CUSTOM', order: 0 }),
+				m: createVariable({ name: 'm', type: 'DYNAMIC', order: 2 }),
+				b: createVariable({ name: 'b', type: 'TEXTBOX', order: 1 }),
+				x: createVariable({ name: 'x', type: 'QUERY', order: 3 }),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.sortedVariablesArray.map((v) => v.name)).toEqual([
+				'a',
+				'b',
+				'm',
+				'x',
+				'z',
+			]);
+		});
+
+		it('should include multiple dynamic variables in order', () => {
+			const variables: IDashboardVariables = {
+				dyn3: createVariable({ name: 'dyn3', type: 'DYNAMIC', order: 5 }),
+				query1: createVariable({ name: 'query1', type: 'QUERY', order: 0 }),
+				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
+				custom1: createVariable({ name: 'custom1', type: 'CUSTOM', order: 2 }),
+				dyn2: createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.dynamicVariableOrder).toEqual(['dyn1', 'dyn2', 'dyn3']);
+		});
+
+		it('should build dependency data with query variable order for dependent queries', () => {
+			const variables: IDashboardVariables = {
+				env: createVariable({
+					name: 'env',
+					type: 'QUERY',
+					order: 0,
+					queryValue: 'SELECT DISTINCT env FROM table',
+				}),
+				service: createVariable({
+					name: 'service',
+					type: 'QUERY',
+					order: 1,
+					queryValue: 'SELECT DISTINCT service FROM table WHERE env={{.env}}',
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			const { dependencyData } = result;
+			expect(dependencyData).not.toBeNull();
+			// env should appear in the dependency order (it's a root QUERY variable)
+			expect(dependencyData?.order).toContain('env');
+			// service depends on env, so it should also be in the order
+			expect(dependencyData?.order).toContain('service');
+			// env comes before service in topological order
+			const envIdx = dependencyData?.order.indexOf('env') ?? -1;
+			const svcIdx = dependencyData?.order.indexOf('service') ?? -1;
+			expect(envIdx).toBeLessThan(svcIdx);
+		});
+
+		it('should not include non-QUERY variables in dependency order', () => {
+			const variables: IDashboardVariables = {
+				env: createVariable({
+					name: 'env',
+					type: 'QUERY',
+					order: 0,
+					queryValue: 'SELECT DISTINCT env FROM table',
+				}),
+				customVar: createVariable({
+					name: 'customVar',
+					type: 'CUSTOM',
+					order: 1,
+				}),
+				dynVar: createVariable({
+					name: 'dynVar',
+					type: 'DYNAMIC',
+					order: 2,
+				}),
+				textVar: createVariable({
+					name: 'textVar',
+					type: 'TEXTBOX',
+					order: 3,
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.dependencyData).not.toBeNull();
+			// Only QUERY variables should be in the dependency order
+			result.dependencyData?.order.forEach((name) => {
+				expect(result.variableTypes[name]).toBe('QUERY');
+			});
+		});
+
+		it('should produce transitive descendants in dependency data', () => {
+			const variables: IDashboardVariables = {
+				region: createVariable({
+					name: 'region',
+					type: 'QUERY',
+					order: 0,
+					queryValue: 'SELECT region FROM table',
+				}),
+				cluster: createVariable({
+					name: 'cluster',
+					type: 'QUERY',
+					order: 1,
+					queryValue: 'SELECT cluster FROM table WHERE region={{.region}}',
+				}),
+				host: createVariable({
+					name: 'host',
+					type: 'QUERY',
+					order: 2,
+					queryValue: 'SELECT host FROM table WHERE cluster={{.cluster}}',
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			const { dependencyData: depData } = result;
+			expect(depData).not.toBeNull();
+			expect(depData?.transitiveDescendants).toBeDefined();
+			// region's transitive descendants should include cluster and host
+			expect(depData?.transitiveDescendants['region']).toEqual(
+				expect.arrayContaining(['cluster', 'host']),
+			);
+		});
+
+		it('should handle a single variable', () => {
+			const variables: IDashboardVariables = {
+				solo: createVariable({
+					name: 'solo',
+					type: 'QUERY',
+					order: 0,
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.sortedVariablesArray).toHaveLength(1);
+			expect(result.variableTypes).toEqual({ solo: 'QUERY' });
+			expect(result.dynamicVariableOrder).toEqual([]);
+			expect(result.dependencyData).not.toBeNull();
+			expect(result.dependencyData?.order).toEqual(['solo']);
+		});
+
+		it('should handle only non-QUERY variables', () => {
+			const variables: IDashboardVariables = {
+				custom1: createVariable({
+					name: 'custom1',
+					type: 'CUSTOM',
+					order: 0,
+				}),
+				text1: createVariable({
+					name: 'text1',
+					type: 'TEXTBOX',
+					order: 1,
+				}),
+				dyn1: createVariable({
+					name: 'dyn1',
+					type: 'DYNAMIC',
+					order: 2,
+				}),
+			};
+
+			const result = computeDerivedValues(variables);
+
+			expect(result.sortedVariablesArray).toHaveLength(3);
+			// No QUERY variables, so dependency order should be empty
+			expect(result.dependencyData?.order).toEqual([]);
+			expect(result.dynamicVariableOrder).toEqual(['dyn1']);
+		});
+	});
+});

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,4 +1,7 @@
+import { isEmpty, isUndefined } from 'lodash-es';
+
 import createStore from '../store';
+import { VariableFetchContext } from '../variableFetchStore';
 import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
 import {
 	computeDerivedValues,
@@ -10,6 +13,8 @@ const initialState: IDashboardVariablesStoreState = {
 	variables: {},
 	sortedVariablesArray: [],
 	dependencyData: null,
+	variableTypes: {},
+	dynamicVariableOrder: [],
 };
 
 export const dashboardVariablesStore = createStore<IDashboardVariablesStoreState>(
@@ -55,3 +60,38 @@ export function updateDashboardVariablesStore({
 		updateDerivedValues(draft);
 	});
 }
+
+/**
+ * Read current store snapshot as VariableFetchContext.
+ * Used by components to pass context to variableFetchStore actions
+ * without creating a circular import.
+ */
+export function getVariableDependencyContext(): VariableFetchContext {
+	const state = dashboardVariablesStore.getSnapshot();
+
+	// If every variable already has a selectedValue (e.g. persisted from
+	// localStorage/URL), dynamic variables can start in parallel.
+	// Otherwise they wait for query vars to settle first.
+	const doAllVariablesHaveValuesSelected = Object.values(state.variables).every(
+		(variable) => {
+			if (
+				variable.type === 'DYNAMIC' &&
+				(variable.selectedValue === null || isEmpty(variable.selectedValue)) &&
+				variable.allSelected === true
+			) {
+				return true;
+			}
+
+			return (
+				!isUndefined(variable.selectedValue) && !isEmpty(variable.selectedValue)
+			);
+		},
+	);
+
+	return {
+		doAllVariablesHaveValuesSelected,
+		variableTypes: state.variableTypes,
+		dynamicVariableOrder: state.dynamicVariableOrder,
+		dependencyData: state.dependencyData,
+	};
+}

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts

@@ -1,11 +1,18 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	IDashboardVariable,
+	TVariableQueryType,
+} from 'types/api/dashboard/getAll';
 
 export type VariableGraph = Record<string, string[]>;
 
 export interface IDependencyData {
 	order: string[];
+	// Direct children for each variable
 	graph: VariableGraph;
+	// Direct parents for each variable
 	parentDependencyGraph: VariableGraph;
+	// Pre-computed transitive descendants for each node (all reachable nodes, not just direct children)
+	transitiveDescendants: VariableGraph;
 	hasCycle: boolean;
 	cycleNodes?: string[];
 }
@@ -24,6 +31,12 @@ export interface IDashboardVariablesStoreState {
 
 	// Derived: dependency data for QUERY variables
 	dependencyData: IDependencyData | null;
+
+	// Derived: variable name → type mapping
+	variableTypes: Record<string, TVariableQueryType>;
+
+	// Derived: display-ordered list of dynamic variable names
+	dynamicVariableOrder: string[];
 }
 
 export interface IUseDashboardVariablesReturn {

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -2,9 +2,11 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	IDashboardVariable,
+	TVariableQueryType,
+} from 'types/api/dashboard/getAll';
 
-import { initializeVariableFetchStore } from '../variableFetchStore';
 import {
 	IDashboardVariables,
 	IDashboardVariablesStoreState,
@@ -44,6 +46,7 @@ export function buildDependencyData(
 		order,
 		graph,
 		parentDependencyGraph,
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	} = buildDependencyGraph(dependencies);
@@ -58,49 +61,62 @@ export function buildDependencyData(
 		order: queryVariableOrder,
 		graph,
 		parentDependencyGraph,
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
 }
 
 /**
- * Initialize the variable fetch store with the computed dependency data
+ * Build a variable name → type mapping from sorted variables array
  */
-function initializeFetchStore(
+export function buildVariableTypesMap(
 	sortedVariablesArray: IDashboardVariable[],
-	dependencyData: IDependencyData | null,
-): void {
-	if (dependencyData) {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
+): Record<string, TVariableQueryType> {
+	const types: Record<string, TVariableQueryType> = {};
+	sortedVariablesArray.forEach((v) => {
+		if (v.name) {
+			types[v.name] = v.type;
+		}
+	});
+	return types;
+}
 
-		initializeVariableFetchStore(
-			allVariableNames,
-			dependencyData.graph,
-			dependencyData.parentDependencyGraph,
-		);
-	}
+/**
+ * Build display-ordered list of dynamic variable names
+ */
+export function buildDynamicVariableOrder(
+	sortedVariablesArray: IDashboardVariable[],
+): string[] {
+	return sortedVariablesArray
+		.filter((v) => v.type === 'DYNAMIC' && v.name)
+		.map((v) => v.name as string);
 }
 
 /**
  * Compute derived values from variables
  * This is a composition of buildSortedVariablesArray and buildDependencyData
- * Also initializes the variable fetch store with the new dependency data
  */
 export function computeDerivedValues(
 	variables: IDashboardVariablesStoreState['variables'],
 ): Pick<
 	IDashboardVariablesStoreState,
-	'sortedVariablesArray' | 'dependencyData'
+	| 'sortedVariablesArray'
+	| 'dependencyData'
+	| 'variableTypes'
+	| 'dynamicVariableOrder'
 > {
 	const sortedVariablesArray = buildSortedVariablesArray(variables);
 	const dependencyData = buildDependencyData(sortedVariablesArray);
+	const variableTypes = buildVariableTypesMap(sortedVariablesArray);
+	const dynamicVariableOrder = buildDynamicVariableOrder(sortedVariablesArray);
 
-	// Initialize the variable fetch store when dependency data is computed
-	initializeFetchStore(sortedVariablesArray, dependencyData);
-
-	return { sortedVariablesArray, dependencyData };
+	return {
+		sortedVariablesArray,
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	};
 }
 
 /**
@@ -112,7 +128,8 @@ export function updateDerivedValues(
 ): void {
 	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
 	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-
-	// Initialize the variable fetch store when dependency data is updated
-	initializeFetchStore(draft.sortedVariablesArray, draft.dependencyData);
+	draft.variableTypes = buildVariableTypesMap(draft.sortedVariablesArray);
+	draft.dynamicVariableOrder = buildDynamicVariableOrder(
+		draft.sortedVariablesArray,
+	);
 }

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -1,6 +1,12 @@
-import { VariableGraph } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-
+import { getVariableDependencyContext } from './dashboardVariables/dashboardVariablesStore';
+import { IDashboardVariablesStoreState } from './dashboardVariables/dashboardVariablesStoreTypes';
 import createStore from './store';
+import {
+	areAllQueryVariablesSettled,
+	isSettled,
+	resolveFetchState,
+	unlockWaitingDynamicVariables,
+} from './variableFetchStoreUtils';
 
 // Fetch state for each variable
 export type VariableFetchState =
@@ -14,19 +20,29 @@ export interface IVariableFetchStoreState {
 	// Per-variable fetch state
 	states: Record<string, VariableFetchState>;
 
-	// Dependency graphs (set once when variables change)
-	dependencyGraph: VariableGraph; // variable -> children that depend on it
-	parentGraph: VariableGraph; // variable -> parents it depends on
-
-	// Track last update timestamp per variable to trigger re-fetches
+	// Track last update timestamp per variable
 	lastUpdated: Record<string, number>;
+
+	// Per-variable cycle counter — bumped when a variable needs to refetch.
+	// Used in react-query keys to auto-cancel stale requests for that variable only.
+	cycleIds: Record<string, number>;
 }
 
+/**
+ * Context from dashboardVariablesStore needed by fetch actions.
+ * Passed as parameter to avoid circular imports.
+ */
+export type VariableFetchContext = Pick<
+	IDashboardVariablesStoreState,
+	'variableTypes' | 'dynamicVariableOrder' | 'dependencyData'
+> & {
+	doAllVariablesHaveValuesSelected: boolean;
+};
+
 const initialState: IVariableFetchStoreState = {
 	states: {},
-	dependencyGraph: {},
-	parentGraph: {},
 	lastUpdated: {},
+	cycleIds: {},
 };
 
 export const variableFetchStore = createStore<IVariableFetchStoreState>(
@@ -36,22 +52,183 @@ export const variableFetchStore = createStore<IVariableFetchStoreState>(
 // ============== Actions ==============
 
 /**
- * Initialize the store with dependency graphs and set initial states
+ * Initialize the store with variable names.
+ * Called when dashboard variables change — sets up state entries.
  */
-export function initializeVariableFetchStore(
-	variableNames: string[],
-	dependencyGraph: VariableGraph,
-	parentGraph: VariableGraph,
-): void {
+export function initializeVariableFetchStore(variableNames: string[]): void {
 	variableFetchStore.update((draft) => {
-		draft.dependencyGraph = dependencyGraph;
-		draft.parentGraph = parentGraph;
-
-		// Initialize all variables to idle, preserving existing ready states
+		// Initialize all variables to idle, preserving existing states
 		variableNames.forEach((name) => {
 			if (!draft.states[name]) {
 				draft.states[name] = 'idle';
 			}
 		});
+
+		// Clean up stale entries for variables that no longer exist
+		const nameSet = new Set(variableNames);
+		Object.keys(draft.states).forEach((name) => {
+			if (!nameSet.has(name)) {
+				delete draft.states[name];
+				delete draft.lastUpdated[name];
+				delete draft.cycleIds[name];
+			}
+		});
+	});
+}
+
+/**
+ * Start a full fetch cycle for all fetchable variables.
+ * Called on: initial load, time range change, or dependency graph change.
+ *
+ * Query variables with no query-type parents start immediately.
+ * Query variables with query-type parents get 'waiting'.
+ * Dynamic variables start immediately if all variables already have
+ * selectedValues (e.g. persisted from localStorage/URL). Otherwise they
+ * wait for all query variables to settle first.
+ */
+export function enqueueFetchOfAllVariables(): void {
+	const {
+		doAllVariablesHaveValuesSelected,
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+	if (!dependencyData) {
+		return;
+	}
+
+	const { order: queryVariableOrder, parentDependencyGraph } = dependencyData;
+
+	variableFetchStore.update((draft) => {
+		// Query variables: root ones start immediately, dependent ones wait
+		queryVariableOrder.forEach((name) => {
+			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
+			const parents = parentDependencyGraph[name] || [];
+			const hasQueryParents = parents.some((p) => variableTypes[p] === 'QUERY');
+			if (hasQueryParents) {
+				draft.states[name] = 'waiting';
+			} else {
+				draft.states[name] = resolveFetchState(draft, name);
+			}
+		});
+
+		// Dynamic variables: start immediately if query variables have values,
+		// otherwise wait for query variables to settle first
+		dynamicVariableOrder.forEach((name) => {
+			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
+			draft.states[name] = doAllVariablesHaveValuesSelected
+				? resolveFetchState(draft, name)
+				: 'waiting';
+		});
+	});
+}
+
+/**
+ * Mark a variable as completed. Unblocks waiting query-type children.
+ * If all query variables are now settled, unlocks any waiting dynamic variables.
+ */
+export function onVariableFetchComplete(name: string): void {
+	const {
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+
+	variableFetchStore.update((draft) => {
+		draft.states[name] = 'idle';
+		draft.lastUpdated[name] = Date.now();
+
+		if (!dependencyData) {
+			return;
+		}
+
+		const { graph } = dependencyData;
+
+		// Unblock waiting query-type children
+		const children = graph[name] || [];
+		children.forEach((child) => {
+			if (variableTypes[child] === 'QUERY' && draft.states[child] === 'waiting') {
+				draft.states[child] = resolveFetchState(draft, child);
+			}
+		});
+
+		// If all query variables are settled, unlock any waiting dynamic variables
+		if (
+			variableTypes[name] === 'QUERY' &&
+			areAllQueryVariablesSettled(draft.states, variableTypes)
+		) {
+			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
+		}
+	});
+}
+
+/**
+ * Mark a variable as errored. Sets query-type descendants to idle
+ * (they can't proceed without this parent).
+ * If all query variables are now settled, unlocks any waiting dynamic variables.
+ */
+export function onVariableFetchFailure(name: string): void {
+	const {
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+
+	variableFetchStore.update((draft) => {
+		draft.states[name] = 'error';
+
+		if (!dependencyData) {
+			return;
+		}
+
+		// Set query-type descendants to idle (can't fetch without parent)
+		const descendants = dependencyData.transitiveDescendants[name] || [];
+		descendants.forEach((desc) => {
+			if (variableTypes[desc] === 'QUERY') {
+				draft.states[desc] = 'idle';
+			}
+		});
+
+		// If all query variables are settled (error counts), unlock any waiting dynamic variables
+		if (
+			variableTypes[name] === 'QUERY' &&
+			areAllQueryVariablesSettled(draft.states, variableTypes)
+		) {
+			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
+		}
+	});
+}
+
+/**
+ * Cascade a value change to query-type descendants.
+ * Called when a user changes a variable's value (not from a fetch cycle).
+ *
+ * Direct children whose parents are all settled start immediately.
+ * Deeper descendants wait until their parents complete (BFS order
+ * ensures parents are set before children within a single update).
+ */
+export function enqueueDescendantsOfVariable(name: string): void {
+	const { dependencyData, variableTypes } = getVariableDependencyContext();
+	if (!dependencyData) {
+		return;
+	}
+
+	const { parentDependencyGraph } = dependencyData;
+
+	variableFetchStore.update((draft) => {
+		const descendants = dependencyData.transitiveDescendants[name] || [];
+		const queryDescendants = descendants.filter(
+			(desc) => variableTypes[desc] === 'QUERY',
+		);
+
+		queryDescendants.forEach((desc) => {
+			draft.cycleIds[desc] = (draft.cycleIds[desc] || 0) + 1;
+			const parents = parentDependencyGraph[desc] || [];
+			const allParentsSettled = parents.every((p) => isSettled(draft.states[p]));
+
+			draft.states[desc] = allParentsSettled
+				? resolveFetchState(draft, desc)
+				: 'waiting';
+		});
 	});
 }

frontend/src/providers/Dashboard/store/variableFetchStoreUtils.ts

@@ -0,0 +1,46 @@
+import { TVariableQueryType } from 'types/api/dashboard/getAll';
+
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+} from './variableFetchStore';
+
+export function isSettled(state: VariableFetchState | undefined): boolean {
+	return state === 'idle' || state === 'error';
+}
+
+/**
+ * Resolve the next fetch state based on whether the variable has been fetched before.
+ */
+export function resolveFetchState(
+	draft: IVariableFetchStoreState,
+	name: string,
+): VariableFetchState {
+	return (draft.lastUpdated[name] || 0) > 0 ? 'revalidating' : 'loading';
+}
+
+/**
+ * Check if all query variables are settled (idle or error).
+ */
+export function areAllQueryVariablesSettled(
+	states: Record<string, VariableFetchState>,
+	variableTypes: Record<string, TVariableQueryType>,
+): boolean {
+	return Object.entries(variableTypes)
+		.filter(([, type]) => type === 'QUERY')
+		.every(([name]) => isSettled(states[name]));
+}
+
+/**
+ * Transition waiting dynamic variables to loading/revalidating if in 'waiting' state.
+ */
+export function unlockWaitingDynamicVariables(
+	draft: IVariableFetchStoreState,
+	dynamicVariableOrder: string[],
+): void {
+	dynamicVariableOrder.forEach((dynName) => {
+		if (draft.states[dynName] === 'waiting') {
+			draft.states[dynName] = resolveFetchState(draft, dynName);
+		}
+	});
+}

frontend/src/providers/Dashboard/types.ts

@@ -47,8 +47,6 @@ export interface IDashboardContext {
 		allSelected: boolean,
 		isDynamic?: boolean,
 	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
 	selectedRowWidgetId: string | null;

frontend/src/types/api/metrics/getQueryRange.ts

@@ -1,13 +1,14 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { Warning } from '..';
+import { SuccessResponse, Warning } from '..';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
+import { ExecStats } from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -35,8 +36,15 @@ export interface MetricRangePayloadProps {
 		newResult: MetricRangePayloadV3;
 		warnings?: string[];
 	};
+	meta?: ExecStats;
 }
 
+/** Query range success response including optional warning and meta */
+export type MetricQueryRangeSuccessResponse = SuccessResponse<
+	MetricRangePayloadProps,
+	unknown
+> & { warning?: Warning; meta?: ExecStats };
+
 export interface MetricRangePayloadV3 {
 	data: {
 		result: QueryDataV3[];
@@ -44,4 +52,5 @@ export interface MetricRangePayloadV3 {
 		warnings?: string[];
 	};
 	warning?: Warning;
+	meta?: ExecStats;
 }

frontend/src/types/api/onboarding/types.ts

@@ -7,4 +7,5 @@ export interface UpdateProfileProps {
 	number_of_services: number;
 	number_of_hosts: number;
 	where_did_you_discover_signoz: string;
+	timeline_for_migrating_to_signoz: string;
 }

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

@@ -334,6 +334,7 @@ export interface ExecStats {
 	rowsScanned: number;
 	bytesScanned: number;
 	durationMs: number;
+	stepIntervals: Record<string, number>;
 }
 
 export interface Label {