feat: adding more generic struct

.devenv/docker/clickhouse/compose.yaml

@@ -41,18 +41,31 @@ services:
       interval: 30s
       timeout: 5s
       retries: 3
-  telemetrystore-migrator:
-    image: signoz/signoz-otel-collector:v0.142.0
-    container_name: telemetrystore-migrator
+  schema-migrator-sync:
+    image: signoz/signoz-schema-migrator:v0.142.0
+    container_name: schema-migrator-sync
     command:
-    - -c
-    - |
-      /signoz-otel-collector migrate bootstrap --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate sync up --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate async up --clickhouse-dsn tcp://clickhouse:9000
+      - sync
+      - --cluster-name=cluster
+      - --dsn=tcp://clickhouse:9000
+      - --replication=true
+      - --up=
     depends_on:
       clickhouse:
         condition: service_healthy
-    entrypoint:
-    - /bin/sh
+    restart: on-failure
+  schema-migrator-async:
+    image: signoz/signoz-schema-migrator:v0.142.0
+    container_name: schema-migrator-async
+    command:
+      - async
+      - --cluster-name=cluster
+      - --dsn=tcp://clickhouse:9000
+      - --replication=true
+      - --up=
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+      schema-migrator-sync:
+        condition: service_completed_successfully
     restart: on-failure

.github/CODEOWNERS

@@ -43,12 +43,6 @@
 /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,8 +14,5 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

README.de-de.md

@@ -176,6 +176,25 @@ 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,6 +221,34 @@ 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,6 +187,25 @@ 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,15 +193,6 @@ 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
@@ -294,6 +285,7 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
+      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -308,14 +300,3 @@ 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

deploy/docker-swarm/docker-compose.ha.yaml

@@ -61,6 +61,7 @@ x-db-depend: &db-depend
     - clickhouse
     - clickhouse-2
     - clickhouse-3
+    - schema-migrator
 services:
   init-clickhouse:
     !!merge <<: *common
@@ -206,8 +207,6 @@ services:
       interval: 30s
       timeout: 5s
       retries: 3
-    depends_on:
-      - telemetrystore-migrator
   otel-collector:
     !!merge <<: *db-depend
     image: signoz/signoz-otel-collector:v0.142.0
@@ -229,18 +228,19 @@ services:
       replicas: 3
     depends_on:
       - clickhouse
+      - schema-migrator
       - signoz
-  telemetrystore-migrator:
+  schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
-    entrypoint:
-    - /bin/sh
+    image: signoz/signoz-schema-migrator:v0.142.0
+    deploy:
+      restart_policy:
+        condition: on-failure
+        delay: 5s
+    entrypoint: sh
     command:
-    - -c
-    - |
-      /signoz-otel-collector migrate bootstrap --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate sync up --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate async up --clickhouse-dsn tcp://clickhouse:9000
+      - -c
+      - "/signoz-schema-migrator sync --dsn=tcp://clickhouse:9000 --up= && /signoz-schema-migrator async --dsn=tcp://clickhouse:9000 --up="
     depends_on:
       - clickhouse
 networks:

deploy/docker-swarm/docker-compose.yaml

@@ -58,6 +58,7 @@ x-db-depend: &db-depend
   !!merge <<: *common
   depends_on:
     - clickhouse
+    - schema-migrator
 services:
   init-clickhouse:
     !!merge <<: *common
@@ -147,8 +148,6 @@ services:
       interval: 30s
       timeout: 5s
       retries: 3
-    depends_on:
-      - telemetrystore-migrator
   otel-collector:
     !!merge <<: *db-depend
     image: signoz/signoz-otel-collector:v0.142.0
@@ -172,21 +171,21 @@ services:
       replicas: 3
     depends_on:
       - clickhouse
+      - schema-migrator
       - signoz
-  telemetrystore-migrator:
+  schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
-    entrypoint:
-    - /bin/sh
+    image: signoz/signoz-schema-migrator:v0.142.0
+    deploy:
+      restart_policy:
+        condition: on-failure
+        delay: 5s
+    entrypoint: sh
     command:
-    - -c
-    - |
-      /signoz-otel-collector migrate bootstrap --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate sync up --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate async up --clickhouse-dsn tcp://clickhouse:9000
+      - -c
+      - "/signoz-schema-migrator sync --dsn=tcp://clickhouse:9000 --up= && /signoz-schema-migrator async --dsn=tcp://clickhouse:9000 --up="
     depends_on:
       - clickhouse
-    restart: on-failure
 networks:
   signoz-net:
     name: signoz-net

deploy/docker/docker-compose.ha.yaml

@@ -62,6 +62,8 @@ x-db-depend: &db-depend
   depends_on:
     clickhouse:
       condition: service_healthy
+    schema-migrator-sync:
+      condition: service_completed_successfully
 services:
   init-clickhouse:
     !!merge <<: *common
@@ -208,9 +210,6 @@ services:
       interval: 30s
       timeout: 5s
       retries: 3
-    depends_on:
-      telemetrystore-migrator:
-        condition: service_completed_successfully
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
@@ -233,23 +232,29 @@ services:
     depends_on:
       clickhouse:
         condition: service_healthy
+      schema-migrator-sync:
+        condition: service_completed_successfully
       signoz:
         condition: service_healthy
-  telemetrystore-migrator:
+  schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
-    container_name: telemetrystore-migrator
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    container_name: schema-migrator-sync
     command:
-    - -c
-    - |
-      /signoz-otel-collector migrate bootstrap --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate sync up --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate async up --clickhouse-dsn tcp://clickhouse:9000
+      - sync
+      - --dsn=tcp://clickhouse:9000
+      - --up=
     depends_on:
       clickhouse:
         condition: service_healthy
-    entrypoint:
-    - /bin/sh
+  schema-migrator-async:
+    !!merge <<: *db-depend
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    container_name: schema-migrator-async
+    command:
+      - async
+      - --dsn=tcp://clickhouse:9000
+      - --up=
     restart: on-failure
 networks:
   signoz-net:

deploy/docker/docker-compose.yaml

@@ -57,6 +57,8 @@ x-db-depend: &db-depend
   depends_on:
     clickhouse:
       condition: service_healthy
+    schema-migrator-sync:
+      condition: service_completed_successfully
 services:
   init-clickhouse:
     !!merge <<: *common
@@ -140,9 +142,6 @@ services:
       interval: 30s
       timeout: 5s
       retries: 3
-    depends_on:
-      telemetrystore-migrator:
-        condition: service_completed_successfully
   otel-collector:
     !!merge <<: *db-depend
     image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
@@ -164,21 +163,26 @@ services:
     depends_on:
       signoz:
         condition: service_healthy
-  telemetrystore-migrator:
+  schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.142.0}
-    container_name: telemetrystore-migrator
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    container_name: schema-migrator-sync
     command:
-    - -c 
-    - |
-      /signoz-otel-collector migrate bootstrap --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate sync up --clickhouse-dsn tcp://clickhouse:9000 &&
-      /signoz-otel-collector migrate async up --clickhouse-dsn tcp://clickhouse:9000
+      - sync
+      - --dsn=tcp://clickhouse:9000
+      - --up=
     depends_on:
       clickhouse:
         condition: service_healthy
-    entrypoint:
-    - /bin/sh
+    restart: on-failure
+  schema-migrator-async:
+    !!merge <<: *db-depend
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.142.0}
+    container_name: schema-migrator-async
+    command:
+      - async
+      - --dsn=tcp://clickhouse:9000
+      - --up=
     restart: on-failure
 networks:
   signoz-net:

docs/api/openapi.yml

@@ -4678,8 +4678,6 @@ components:
           type: string
         id:
           type: string
-        isRoot:
-          type: boolean
         orgId:
           type: string
         role:

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

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"log/slog"
 	"net/http"
 	"net/http/httputil"
 	"time"
@@ -13,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
@@ -30,13 +30,13 @@ type APIHandlerOptions struct {
 	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
-	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	Gateway                       *httputil.ReverseProxy
 	GatewayUrl                    string
 	// Querier Influx Interval
 	FluxInterval time.Duration
 	GlobalConfig global.Config
+	Logger       *slog.Logger // this is present in Signoz.Instrumentation but adding for quick access
 }
 
 type APIHandler struct {
@@ -45,12 +45,11 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
 		IntegrationsController:        opts.IntegrationsController,
-		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
@@ -58,7 +57,8 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	}, config)
+		Logger:                        opts.Logger,
+	})
 
 	if err != nil {
 		return nil, err
@@ -118,14 +118,12 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 }
 
 func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
-
 	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
 
 	router.HandleFunc(
 		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
 		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
 	).Methods(http.MethodGet)
-
 }
 
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {

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

@@ -6,6 +6,7 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
+	"log/slog"
 	"net/http"
 	"strings"
 	"time"
@@ -13,20 +14,14 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/user"
-	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/integrationstypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/gorilla/mux"
-	"go.uber.org/zap"
 )
 
-type CloudIntegrationConnectionParamsResponse struct {
-	IngestionUrl string `json:"ingestion_url,omitempty"`
-	IngestionKey string `json:"ingestion_key,omitempty"`
-	SigNozAPIUrl string `json:"signoz_api_url,omitempty"`
-	SigNozAPIKey string `json:"signoz_api_key,omitempty"`
-}
+// TODO: move this file with other cloud integration related code
 
 func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseWriter, r *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(r.Context())
@@ -41,23 +36,21 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		return
 	}
 
-	cloudProvider := mux.Vars(r)["cloudProvider"]
-	if cloudProvider != "aws" {
-		RespondError(w, basemodel.BadRequest(fmt.Errorf(
-			"cloud provider not supported: %s", cloudProvider,
-		)), nil)
+	cloudProviderString := mux.Vars(r)["cloudProvider"]
+
+	cloudProvider, err := integrationstypes.NewCloudProvider(cloudProviderString)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
-	apiKey, apiErr := ah.getOrCreateCloudIntegrationPAT(r.Context(), claims.OrgID, cloudProvider)
-	if apiErr != nil {
-		RespondError(w, basemodel.WrapApiError(
-			apiErr, "couldn't provision PAT for cloud integration:",
-		), nil)
+	apiKey, err := ah.getOrCreateCloudIntegrationPAT(r.Context(), claims.OrgID, cloudProvider)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
-	result := CloudIntegrationConnectionParamsResponse{
+	result := integrationstypes.GettableCloudIntegrationConnectionParams{
 		SigNozAPIKey: apiKey,
 	}
 
@@ -71,16 +64,17 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		// Return the API Key (PAT) even if the rest of the params can not be deduced.
 		// Params not returned from here will be requested from the user via form inputs.
 		// This enables gracefully degraded but working experience even for non-cloud deployments.
-		zap.L().Info("ingestion params and signoz api url can not be deduced since no license was found")
-		ah.Respond(w, result)
+		ah.opts.Logger.InfoContext(
+			r.Context(),
+			"ingestion params and signoz api url can not be deduced since no license was found",
+		)
+		render.Success(w, http.StatusOK, result)
 		return
 	}
 
-	signozApiUrl, apiErr := ah.getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
-	if apiErr != nil {
-		RespondError(w, basemodel.WrapApiError(
-			apiErr, "couldn't deduce ingestion url and signoz api url",
-		), nil)
+	signozApiUrl, err := ah.getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
@@ -89,48 +83,41 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 
 	gatewayUrl := ah.opts.GatewayUrl
 	if len(gatewayUrl) > 0 {
-
-		ingestionKey, apiErr := getOrCreateCloudProviderIngestionKey(
+		ingestionKeyString, err := ah.getOrCreateCloudProviderIngestionKey(
 			r.Context(), gatewayUrl, license.Key, cloudProvider,
 		)
-		if apiErr != nil {
-			RespondError(w, basemodel.WrapApiError(
-				apiErr, "couldn't get or create ingestion key",
-			), nil)
+		if err != nil {
+			render.Error(w, err)
 			return
 		}
 
-		result.IngestionKey = ingestionKey
-
+		result.IngestionKey = ingestionKeyString
 	} else {
-		zap.L().Info("ingestion key can't be deduced since no gateway url has been configured")
+		ah.opts.Logger.InfoContext(
+			r.Context(),
+			"ingestion key can't be deduced since no gateway url has been configured",
+		)
 	}
 
-	ah.Respond(w, result)
+	render.Success(w, http.StatusOK, result)
 }
 
-func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId string, cloudProvider string) (
-	string, *basemodel.ApiError,
-) {
+func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId string, cloudProvider valuer.String) (string, error) {
 	integrationPATName := fmt.Sprintf("%s integration", cloudProvider)
 
-	integrationUser, apiErr := ah.getOrCreateCloudIntegrationUser(ctx, orgId, cloudProvider)
-	if apiErr != nil {
-		return "", apiErr
+	integrationUser, err := ah.getOrCreateCloudIntegrationUser(ctx, orgId, cloudProvider)
+	if err != nil {
+		return "", err
 	}
 
 	orgIdUUID, err := valuer.NewUUID(orgId)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't parse orgId: %w", err,
-		))
+		return "", err
 	}
 
 	allPats, err := ah.Signoz.Modules.User.ListAPIKeys(ctx, orgIdUUID)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't list PATs: %w", err,
-		))
+		return "", err
 	}
 	for _, p := range allPats {
 		if p.UserID == integrationUser.ID && p.Name == integrationPATName {
@@ -138,9 +125,10 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		}
 	}
 
-	zap.L().Info(
+	ah.opts.Logger.InfoContext(
+		ctx,
 		"no PAT found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
+		slog.String("cloudProvider", cloudProvider.String()),
 	)
 
 	newPAT, err := types.NewStorableAPIKey(
@@ -150,68 +138,48 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		0,
 	)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloud integration PAT: %w", err,
-		))
+		return "", err
 	}
 
 	err = ah.Signoz.Modules.User.CreateAPIKey(ctx, newPAT)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloud integration PAT: %w", err,
-		))
+		return "", err
 	}
 	return newPAT.Token, nil
 }
 
-func (ah *APIHandler) getOrCreateCloudIntegrationUser(
-	ctx context.Context, orgId string, cloudProvider string,
-) (*types.User, *basemodel.ApiError) {
-	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider)
+// TODO: move this function out of handler and use proper module structure
+func (ah *APIHandler) getOrCreateCloudIntegrationUser(ctx context.Context, orgId string, cloudProvider valuer.String) (*types.User, error) {
+	cloudIntegrationUserName := fmt.Sprintf("%s-integration", cloudProvider.String())
 	email := valuer.MustNewEmail(fmt.Sprintf("%s@signoz.io", cloudIntegrationUserName))
 
 	cloudIntegrationUser, err := types.NewUser(cloudIntegrationUserName, email, types.RoleViewer, valuer.MustNewUUID(orgId))
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
+		return nil, err
 	}
 
 	password := types.MustGenerateFactorPassword(cloudIntegrationUser.ID.StringValue())
 
 	cloudIntegrationUser, err = ah.Signoz.Modules.User.GetOrCreateUser(ctx, cloudIntegrationUser, user.WithFactorPassword(password))
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't look for integration user: %w", err))
+		return nil, err
 	}
 
 	return cloudIntegrationUser, nil
 }
 
-func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
-	string, *basemodel.ApiError,
-) {
-	// TODO: remove this struct from here
-	type deploymentResponse struct {
-		Name        string `json:"name"`
-		ClusterInfo struct {
-			Region struct {
-				DNS string `json:"dns"`
-			} `json:"region"`
-		} `json:"cluster"`
-	}
-
+// TODO: move this function out of handler and use proper module structure
+func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (string, error) {
 	respBytes, err := ah.Signoz.Zeus.GetDeployment(ctx, licenseKey)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't query for deployment info: error: %w", err,
-		))
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't query for deployment info: error")
 	}
 
-	resp := new(deploymentResponse)
+	resp := new(integrationstypes.GettableDeployment)
 
 	err = json.Unmarshal(respBytes, resp)
 	if err != nil {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't unmarshal deployment info response: error: %w", err,
-		))
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't unmarshal deployment info response")
 	}
 
 	regionDns := resp.ClusterInfo.Region.DNS
@@ -219,9 +187,11 @@ func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licens
 
 	if len(regionDns) < 1 || len(deploymentName) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge
-		return "", basemodel.InternalError(fmt.Errorf(
+		return "", errors.WrapInternalf(
+			err,
+			errors.CodeInternal,
 			"deployment info response not in expected shape. couldn't determine region dns and deployment name",
-		))
+		)
 	}
 
 	signozApiUrl := fmt.Sprintf("https://%s.%s", deploymentName, regionDns)
@@ -229,102 +199,85 @@ func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licens
 	return signozApiUrl, nil
 }
 
-type ingestionKey struct {
-	Name  string `json:"name"`
-	Value string `json:"value"`
-	// other attributes from gateway response not included here since they are not being used.
-}
-
-type ingestionKeysSearchResponse struct {
-	Status string         `json:"status"`
-	Data   []ingestionKey `json:"data"`
-	Error  string         `json:"error"`
-}
-
-type createIngestionKeyResponse struct {
-	Status string       `json:"status"`
-	Data   ingestionKey `json:"data"`
-	Error  string       `json:"error"`
-}
-
-func getOrCreateCloudProviderIngestionKey(
-	ctx context.Context, gatewayUrl string, licenseKey string, cloudProvider string,
-) (string, *basemodel.ApiError) {
+func (ah *APIHandler) getOrCreateCloudProviderIngestionKey(
+	ctx context.Context, gatewayUrl string, licenseKey string, cloudProvider valuer.String,
+) (string, error) {
 	cloudProviderKeyName := fmt.Sprintf("%s-integration", cloudProvider)
 
 	// see if the key already exists
-	searchResult, apiErr := requestGateway[ingestionKeysSearchResponse](
+	searchResult, err := requestGateway[integrationstypes.GettableIngestionKeysSearch](
 		ctx,
 		gatewayUrl,
 		licenseKey,
 		fmt.Sprintf("/v1/workspaces/me/keys/search?name=%s", cloudProviderKeyName),
 		nil,
+		ah.opts.Logger,
 	)
-
-	if apiErr != nil {
-		return "", basemodel.WrapApiError(
-			apiErr, "couldn't search for cloudprovider ingestion key",
-		)
+	if err != nil {
+		return "", err
 	}
 
 	if searchResult.Status != "success" {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't search for cloudprovider ingestion key: status: %s, error: %s",
+		return "", errors.NewInternalf(
+			errors.CodeInternal,
+			"couldn't search for cloud provider ingestion key: status: %s, error: %s",
 			searchResult.Status, searchResult.Error,
-		))
-	}
-
-	for _, k := range searchResult.Data {
-		if k.Name == cloudProviderKeyName {
-			if len(k.Value) < 1 {
-				// Fail early if actual response structure and expectation here ever diverge
-				return "", basemodel.InternalError(fmt.Errorf(
-					"ingestion keys search response not as expected",
-				))
-			}
-
-			return k.Value, nil
-		}
-	}
-
-	zap.L().Info(
-		"no existing ingestion key found for cloud integration, creating a new one",
-		zap.String("cloudProvider", cloudProvider),
-	)
-	createKeyResult, apiErr := requestGateway[createIngestionKeyResponse](
-		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",
-		map[string]any{
-			"name": cloudProviderKeyName,
-			"tags": []string{"integration", cloudProvider},
-		},
-	)
-	if apiErr != nil {
-		return "", basemodel.WrapApiError(
-			apiErr, "couldn't create cloudprovider ingestion key",
 		)
 	}
 
+	for _, k := range searchResult.Data {
+		if k.Name != cloudProviderKeyName {
+			continue
+		}
+
+		if len(k.Value) < 1 {
+			// Fail early if actual response structure and expectation here ever diverge
+			return "", errors.NewInternalf(errors.CodeInternal, "ingestion keys search response not as expected")
+		}
+
+		return k.Value, nil
+	}
+
+	ah.opts.Logger.InfoContext(
+		ctx,
+		"no existing ingestion key found for cloud integration, creating a new one",
+		slog.String("cloudProvider", cloudProvider.String()),
+	)
+
+	createKeyResult, err := requestGateway[integrationstypes.GettableCreateIngestionKey](
+		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",
+		map[string]any{
+			"name": cloudProviderKeyName,
+			"tags": []string{"integration", cloudProvider.String()},
+		},
+		ah.opts.Logger,
+	)
+	if err != nil {
+		return "", err
+	}
+
 	if createKeyResult.Status != "success" {
-		return "", basemodel.InternalError(fmt.Errorf(
-			"couldn't create cloudprovider ingestion key: status: %s, error: %s",
+		return "", errors.NewInternalf(
+			errors.CodeInternal,
+			"couldn't create cloud provider ingestion key: status: %s, error: %s",
 			createKeyResult.Status, createKeyResult.Error,
-		))
+		)
 	}
 
-	ingestionKey := createKeyResult.Data.Value
-	if len(ingestionKey) < 1 {
+	ingestionKeyString := createKeyResult.Data.Value
+	if len(ingestionKeyString) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge
-		return "", basemodel.InternalError(fmt.Errorf(
+		return "", errors.NewInternalf(errors.CodeInternal,
 			"ingestion key creation response not as expected",
-		))
+		)
 	}
 
-	return ingestionKey, nil
+	return ingestionKeyString, nil
 }
 
 func requestGateway[ResponseType any](
-	ctx context.Context, gatewayUrl string, licenseKey string, path string, payload any,
-) (*ResponseType, *basemodel.ApiError) {
+	ctx context.Context, gatewayUrl, licenseKey, path string, payload any, logger *slog.Logger,
+) (*ResponseType, error) {
 
 	baseUrl := strings.TrimSuffix(gatewayUrl, "/")
 	reqUrl := fmt.Sprintf("%s%s", baseUrl, path)
@@ -335,13 +288,12 @@ func requestGateway[ResponseType any](
 		"X-Consumer-Groups":      "ns:default",
 	}
 
-	return requestAndParseResponse[ResponseType](ctx, reqUrl, headers, payload)
+	return requestAndParseResponse[ResponseType](ctx, reqUrl, headers, payload, logger)
 }
 
 func requestAndParseResponse[ResponseType any](
-	ctx context.Context, url string, headers map[string]string, payload any,
-) (*ResponseType, *basemodel.ApiError) {
-
+	ctx context.Context, url string, headers map[string]string, payload any, logger *slog.Logger,
+) (*ResponseType, error) {
 	reqMethod := http.MethodGet
 	var reqBody io.Reader
 	if payload != nil {
@@ -349,18 +301,14 @@ func requestAndParseResponse[ResponseType any](
 
 		bodyJson, err := json.Marshal(payload)
 		if err != nil {
-			return nil, basemodel.InternalError(fmt.Errorf(
-				"couldn't serialize request payload to JSON: %w", err,
-			))
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't marshal payload")
 		}
-		reqBody = bytes.NewBuffer([]byte(bodyJson))
+		reqBody = bytes.NewBuffer(bodyJson)
 	}
 
 	req, err := http.NewRequestWithContext(ctx, reqMethod, url, reqBody)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf(
-			"couldn't prepare request: %w", err,
-		))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't create req")
 	}
 
 	for k, v := range headers {
@@ -373,23 +321,26 @@ func requestAndParseResponse[ResponseType any](
 
 	response, err := client.Do(req)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't make request: %w", err))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't make req")
 	}
 
-	defer response.Body.Close()
+	defer func() {
+		err = response.Body.Close()
+		if err != nil {
+			logger.ErrorContext(ctx, "couldn't close response body", "error", err)
+		}
+	}()
 
 	respBody, err := io.ReadAll(response.Body)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf("couldn't read response: %w", err))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't read response body")
 	}
 
 	var resp ResponseType
 
 	err = json.Unmarshal(respBody, &resp)
 	if err != nil {
-		return nil, basemodel.InternalError(fmt.Errorf(
-			"couldn't unmarshal gateway response into %T", resp,
-		))
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't unmarshal response body")
 	}
 
 	return &resp, nil

ee/query-service/app/server.go

@@ -38,7 +38,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -127,13 +126,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
-	if err != nil {
-		return nil, fmt.Errorf(
-			"couldn't create cloud provider integrations controller: %w", err,
-		)
-	}
-
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
 		signoz.SQLStore,
@@ -167,15 +159,15 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
-		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
 		Gateway:                       gatewayProxy,
 		GatewayUrl:                    config.Gateway.URL.String(),
 		GlobalConfig:                  config.Global,
+		Logger:                        signoz.Instrumentation.Logger(),
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
 	if err != nil {
 		return nil, err
 	}

frontend/__mocks__/uplotMock.ts

@@ -12,8 +12,6 @@ export interface MockUPlotInstance {
 export interface MockUPlotPaths {
 	spline: jest.Mock;
 	bars: jest.Mock;
-	linear: jest.Mock;
-	stepped: jest.Mock;
 }
 
 // Create mock instance methods
@@ -25,23 +23,10 @@ const createMockUPlotInstance = (): MockUPlotInstance => ({
 	setSeries: jest.fn(),
 });
 
-// Path builder: (self, seriesIdx, idx0, idx1) => paths or null
-const createMockPathBuilder = (name: string): jest.Mock =>
-	jest.fn(() => ({
-		name, // To test if the correct pathBuilder is used
-		stroke: jest.fn(),
-		fill: jest.fn(),
-		clip: jest.fn(),
-	}));
-
-// Create mock paths - linear, spline, stepped needed by UPlotSeriesBuilder.getPathBuilder
-const mockPaths = {
-	spline: jest.fn(() => createMockPathBuilder('spline')),
-	bars: jest.fn(() => createMockPathBuilder('bars')),
-	linear: jest.fn(() => createMockPathBuilder('linear')),
-	stepped: jest.fn((opts?: { align?: number }) =>
-		createMockPathBuilder(`stepped-(${opts?.align ?? 0})`),
-	),
+// Create mock paths
+const mockPaths: MockUPlotPaths = {
+	spline: jest.fn(),
+	bars: jest.fn(),
 };
 
 // Mock static methods

frontend/package.json

@@ -55,7 +55,6 @@
 		"@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/dashboard/variables/dashboardVariablesQuery.ts

@@ -11,7 +11,6 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
-	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -33,7 +32,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload, { signal });
+		const response = await axios.post(`/variables/query`, payload);
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -19,7 +19,6 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
-	abortSignal?: AbortSignal,
 ): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};
 
@@ -48,10 +47,7 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await axios.get('/fields/values', {
-			params,
-			signal: abortSignal,
-		});
+		const response = await axios.get('/fields/values', { params });
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

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

@@ -1542,10 +1542,6 @@ 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, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		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, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		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, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [

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

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

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

@@ -21,7 +21,6 @@ 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/CustomMultiSelect.tsx

@@ -73,7 +73,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -1682,7 +1681,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -1700,17 +1698,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
-					{errorMessage && !loading && !waitingMessage && (
+					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
@@ -1732,7 +1720,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -1775,7 +1762,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDarkMode,
 		isDynamicVariable,
 		showRetryButton,
-		waitingMessage,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -63,7 +63,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showRetryButton = true,
 	isDynamicVariable = false,
-	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -569,7 +568,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
-						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -585,16 +583,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{!loading && waitingMessage && (
-						<div className="navigation-loading">
-							<div className="navigation-icons">
-								<LoadingOutlined />
-							</div>
-							<div className="navigation-text" title={waitingMessage}>
-								{waitingMessage}
-							</div>
-						</div>
-					)}
 					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
@@ -617,7 +605,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
-						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -654,7 +641,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		showRetryButton,
 		isDarkMode,
 		isDynamicVariable,
-		waitingMessage,
 	]);
 
 	// Handle dropdown visibility changes

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

@@ -78,10 +78,12 @@ 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();
 	});
 
@@ -100,6 +102,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -145,6 +150,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -187,6 +195,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -236,6 +247,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -258,6 +272,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -291,6 +308,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -324,6 +344,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -346,6 +369,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -379,6 +405,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -432,6 +461,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -476,6 +508,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -513,6 +548,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -544,6 +582,9 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

frontend/src/components/NewSelect/types.ts

@@ -30,7 +30,6 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	showIncompleteDataMessage?: boolean;
 	showRetryButton?: boolean;
 	isDynamicVariable?: boolean;
-	waitingMessage?: string;
 }
 
 export interface CustomTagProps {
@@ -67,5 +66,4 @@ export interface CustomMultiSelectProps
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;
-	waitingMessage?: string;
 }

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}
-						onChange={(checked): void => {
+						onClick={(): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
-								showIP: checked,
+								showIP: !(showIP ?? true),
 							});
-							setParams({ showIP: checked });
+							setParams({ showIP });
 						}}
 					/>
 				</div>

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

@@ -1,8 +1,4 @@
 import { ENVIRONMENT } from 'constants/env';
-import {
-	ApiMonitoringParams,
-	useApiMonitoringParams,
-} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -22,15 +18,10 @@ 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;
@@ -93,28 +84,6 @@ 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();
 });
@@ -143,10 +112,6 @@ beforeEach(() => {
 		lastUsedQuery: 0,
 		redirectWithQueryBuilderData,
 	});
-	mockUseApiMonitoringParams.mockReturnValue([
-		{ showIP: true } as ApiMonitoringParams,
-		mockSetApiMonitoringParams,
-	]);
 	setupServer();
 });
 
@@ -286,24 +251,6 @@ 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,6 +9,74 @@
 		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;
@@ -467,6 +535,15 @@
 	.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,7 +16,9 @@ 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';
@@ -25,6 +27,7 @@ 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,
@@ -34,6 +37,7 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
+	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -47,7 +51,6 @@ 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';
@@ -68,6 +71,7 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -76,6 +80,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
+		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -287,6 +292,17 @@ 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,
@@ -335,7 +351,32 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<DashboardHeader />
+			<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>
 			<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,15 +9,11 @@ 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';
@@ -26,6 +22,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
+		variablesToGetUpdated,
+		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -57,14 +55,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Initialize fetch store then start a new fetch cycle.
-	// Runs on dependency order changes, and time range changes.
+	// Trigger refetch when dependency order changes or global time changes
 	useEffect(() => {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		initializeVariableFetchStore(allVariableNames);
-		enqueueFetchOfAllVariables();
+		if (dependencyData?.order && dependencyData.order.length > 0) {
+			setVariablesToGetUpdated(dependencyData?.order || []);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -126,14 +121,29 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			// Cascade: enqueue query-type descendants for refetching
-			enqueueDescendantsOfVariable(name);
+			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));
+			}
 		},
 		[
+			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
+			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
+			setVariablesToGetUpdated,
 		],
 	);
 
@@ -148,6 +158,9 @@ 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,25 +2,18 @@ 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 {
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	getOptionsForDynamicVariable,
-	mergeUniqueStrings,
-	settleVariableFetch,
-} from './util';
+import { getOptionsForDynamicVariable } from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -31,6 +24,7 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -61,8 +55,14 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
+	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => mergeUniqueStrings(optionsData, relatedValues),
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
 		[optionsData, relatedValues],
 	);
 
@@ -104,24 +104,67 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
+	// 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 existingQuery = useMemo(
-		() =>
-			buildExistingDynamicVariableQuery(
-				existingVariables,
-				variableData.id,
-				!!variableData.dynamicVariablesAttribute,
-			),
-		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
-	);
+		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,
+	]);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -139,73 +182,6 @@ 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,
@@ -216,22 +192,13 @@ 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 &&
-				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
-			queryFn: ({ signal }) =>
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -244,10 +211,70 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
-					signal,
 				),
-			onSuccess: handleQuerySuccess,
-			onError: handleQueryError,
+			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);
+				}
+			},
 		},
 	);
 
@@ -309,8 +336,6 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

@@ -3,9 +3,8 @@ 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, isEmpty, isString } from 'lodash-es';
+import { isArray, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -13,18 +12,26 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, settleVariableFetch } from './util';
+import { areArraysEqual, checkAPIInvocation } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	'variableData' | 'existingVariables' | 'onValueUpdate'
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
+	variablesToGetUpdated,
+	setVariablesToGetUpdated,
+	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -36,15 +43,6 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
-
 	const {
 		tempSelection,
 		setTempSelection,
@@ -62,6 +60,16 @@ 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 => {
@@ -95,24 +103,18 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						if (variableData.name && (valueNotInList || variableData.allSelected)) {
+						// 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.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
-									onValueUpdate(
-										variableData.name,
-										variableData.id,
-										newOptionsData,
-										true,
-									);
-								}
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -130,11 +132,7 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (
-									variableData.name &&
-									variableData.id &&
-									!isEmpty(variableData.selectedValue)
-								) {
+								if (variableData.name && variableData.id) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -143,6 +141,10 @@ 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) {
@@ -155,6 +157,8 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -165,28 +169,27 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			variableFetchCycleId,
+			JSON.stringify(dependencyData?.order),
 		],
 		{
-			/*
-			 * 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,
+			enabled:
+				variableData &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
 				),
+			queryFn: () =>
+				dashboardVariablesQuery({
+					query: variableData.queryValue || '',
+					variables: variablePropsToPayloadVariables(existingVariables),
+				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				settleVariableFetch(variableData.name, 'complete');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 			onError: (error: {
 				details: {
@@ -203,7 +206,9 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				settleVariableFetch(variableData.name, 'failure');
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
 			},
 		},
 	);
@@ -237,8 +242,6 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

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

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

@@ -47,6 +47,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -61,6 +69,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -76,6 +92,14 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -109,6 +133,14 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -131,6 +163,14 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
+					variablesToGetUpdated={[]}
+					setVariablesToGetUpdated={(): void => {}}
+					dependencyData={{
+						order: [],
+						graph: {},
+						parentDependencyGraph: {},
+						hasCycle: false,
+					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -145,6 +185,14 @@ 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,6 +1,7 @@
 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';
@@ -20,12 +21,18 @@ 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;
 
@@ -58,6 +65,9 @@ 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,19 +7,6 @@ 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
@@ -230,10 +217,9 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
-				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // isVariableFetching is true from mock
+				enabled: true, // Type is 'DYNAMIC'
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

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

@@ -8,6 +8,14 @@ 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';
@@ -23,6 +31,9 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
+				variablesToGetUpdated={[]}
+				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

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

@@ -2,12 +2,14 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
+	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
+	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -70,6 +72,97 @@ 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;
@@ -130,86 +223,10 @@ 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,3 +1,36 @@
+/* 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,16 +1,9 @@
 import { OptionData } from 'components/NewSelect/types';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-import { isEmpty } from 'lodash-es';
+import { isEmpty, isNull } 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(
@@ -52,16 +45,30 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		.map((variable) => {
+		?.map((variable: any) => {
 			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 || '';
-				if (textContainsVariableReference(queryValue, variableName)) {
+				const dependVarReMatch = queryValue.match(combinedRegex);
+				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val): val is string => val !== null);
+		.filter((val: string | null) => !isNull(val));
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -239,26 +246,10 @@ 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,
 	};
@@ -293,6 +284,33 @@ 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[],
@@ -357,130 +375,3 @@ 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,31 +1,4 @@
-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
-// ────────────────────────────────────────────────────────────────
+import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -176,348 +149,3 @@ 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,11 +1,17 @@
-import { VariableItemProps } from '../VariableItem';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: VariableItemProps['variableData'];
-		onValueUpdate: VariableItemProps['onValueUpdate'];
+		variableData: IDashboardVariable;
 		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,19 +17,6 @@ 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(),
@@ -108,7 +95,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn({ signal: undefined });
+						queryFn();
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -247,7 +234,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 
@@ -501,7 +487,6 @@ 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,11 +49,15 @@ 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

@@ -1,71 +0,0 @@
-.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

@@ -1,55 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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/BarChart/BarChart.tsx

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

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

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

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

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

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

@@ -1,117 +0,0 @@
-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/stackSeriesUtils.ts

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

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

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function 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

@@ -1,313 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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/useBarChartStacking.ts

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

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

@@ -1,26 +0,0 @@
-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,14 +1,12 @@
 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;
@@ -22,7 +20,6 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
-	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -33,15 +30,6 @@ 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)
@@ -54,7 +42,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig, showLegend],
+		[containerWidth, containerHeight, legendConfig],
 	);
 
 	return (
@@ -72,17 +60,15 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				{showLegend && (
-					<div
-						className="chart-layout__legend-wrapper"
-						style={{
-							height: chartDimensions.legendHeight,
-							width: chartDimensions.legendWidth,
-						}}
-					>
-						{legendComponent(chartDimensions.averageLegendWidth)}
-					</div>
-				)}
+				<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,150 +0,0 @@
-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 { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-import '../Panel.styles.scss';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useScrollWidgetIntoView(widget.id, graphRef);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	const onPlotDestroy = useCallback(() => {
-		uPlotRef.current = null;
-	}, []);
-
-	const onPlotRef = useCallback((plot: uPlot | null): void => {
-		uPlotRef.current = plot;
-	}, []);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={onPlotRef}
-					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

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

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

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

@@ -1,114 +0,0 @@
-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

@@ -1,223 +0,0 @@
-/* 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

@@ -1,231 +0,0 @@
-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,6 +26,7 @@ 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>();
@@ -34,7 +35,16 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useScrollWidgetIntoView(widget.id, graphRef);
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

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

@@ -83,7 +83,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: false,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
 			showPoints: VisibilityMode.Never,

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

@@ -1,270 +0,0 @@
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { GraphVisibilityState } from '../../types';
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from '../legendVisibilityUtils';
-
-describe('legendVisibilityUtils', () => {
-	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
-
-	beforeEach(() => {
-		localStorage.clear();
-		jest.spyOn(window.localStorage.__proto__, 'getItem');
-		jest.spyOn(window.localStorage.__proto__, 'setItem');
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getStoredSeriesVisibility', () => {
-		it('returns null when there is no stored visibility state', () => {
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
-		});
-
-		it('returns null when widget has no stored dataIndex', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns visibility array by index when widget state exists', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: false },
-					],
-				},
-				{
-					name: 'widget-2',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('returns visibility by index including duplicate labels', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'CPU', show: false },
-						{ label: 'Memory', show: false },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('returns null on malformed JSON in localStorage', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns null when widget id is not found', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'another-widget',
-					dataIndex: [{ label: 'CPU', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-	});
-
-	describe('updateSeriesVisibilityToLocalStorage', () => {
-		it('creates new visibility state when none exists', () => {
-			const seriesVisibility = [
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-		});
-
-		it('adds a new widget entry when other widgets already exist', () => {
-			const existing: GraphVisibilityState[] = [
-				{
-					name: 'widget-existing',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			const newVisibility = [{ label: 'CPU', show: false }];
-
-			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-new');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([{ label: 'CPU', show: false }]);
-		});
-
-		it('updates existing widget visibility when entry already exists', () => {
-			const initialVisibility: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: true },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
-
-			const updatedVisibility = [
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-		});
-
-		it('silently handles malformed existing JSON without throwing', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			expect(() =>
-				updateSeriesVisibilityToLocalStorage('widget-1', [
-					{ label: 'CPU', show: true },
-				]),
-			).not.toThrow();
-		});
-
-		it('when existing JSON is malformed, overwrites with valid data for the widget', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-			expect(stored).not.toBeNull();
-			expect(stored).toEqual([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-			]);
-			const expected = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'x-axis', show: true },
-						{ label: 'CPU', show: false },
-					],
-				},
-			];
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				JSON.stringify(expected),
-			);
-		});
-
-		it('preserves other widgets when updating one widget', () => {
-			const existing: GraphVisibilityState[] = [
-				{ name: 'widget-a', dataIndex: [{ label: 'A', show: true }] },
-				{ name: 'widget-b', dataIndex: [{ label: 'B', show: false }] },
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			updateSeriesVisibilityToLocalStorage('widget-b', [
-				{ label: 'B', show: 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', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', [
-				{ label: 'CPU', show: true },
-			]);
-
-			expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-			expect(localStorage.setItem).toHaveBeenCalledWith(
-				storageKey,
-				expect.any(String),
-			);
-			const [_, value] = (localStorage.setItem as jest.Mock).mock.calls[0];
-			expect((): void => JSON.parse(value)).not.toThrow();
-			expect(JSON.parse(value)).toEqual([
-				{ name: 'widget-1', dataIndex: [{ label: 'CPU', show: true }] },
-			]);
-		});
-
-		it('stores empty dataIndex when seriesVisibility is empty', () => {
-			updateSeriesVisibilityToLocalStorage('widget-1', []);
-
-			const raw = localStorage.getItem(storageKey);
-			expect(raw).not.toBeNull();
-			const parsed = JSON.parse(raw ?? '[]');
-			expect(parsed).toEqual([{ name: 'widget-1', dataIndex: [] }]);
-			expect(getStoredSeriesVisibility('widget-1')).toBeNull();
-		});
-	});
-});

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,10 +40,8 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = timezone
-		? (timestamp: number): Date =>
-				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
-		: undefined;
+	const tzDate = (timestamp: number): Date =>
+		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,
@@ -90,7 +88,7 @@ export function buildBaseConfig({
 		max: undefined,
 		softMin: widget.softMin ?? undefined,
 		softMax: widget.softMax ?? undefined,
-		thresholds: thresholdOptions,
+		// thresholds,
 		logBase: widget.isLogScale ? 10 : undefined,
 		distribution: widget.isLogScale
 			? DistributionType.Logarithmic

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

@@ -1,225 +0,0 @@
-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

@@ -3,14 +3,13 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
- * Retrieves the stored series visibility for a specific widget from localStorage by index.
- * Index 0 is the x-axis (time); indices 1, 2, ... are data series (same order as uPlot plot.series).
+ * Retrieves the visibility map for a specific widget from localStorage
  * @param widgetId - The unique identifier of the widget
- * @returns visibility[i] = show state for series at index i, or null if not found
+ * @returns A Map of series labels to their visibility state, or null if not found
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityItem[] | null {
+): Map<string, boolean> | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -25,12 +24,8 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return widgetState.dataIndex;
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			// If the stored data is malformed, remove it
-			localStorage.removeItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		}
+		return new Map(widgetState.dataIndex.map((item) => [item.label, item.show]));
+	} catch {
 		// Silently handle parsing errors - fall back to default visibility
 		return null;
 	}
@@ -40,31 +35,40 @@ export function updateSeriesVisibilityToLocalStorage(
 	widgetId: string,
 	seriesVisibility: SeriesVisibilityItem[],
 ): void {
-	let visibilityStates: GraphVisibilityState[] = [];
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
-		visibilityStates = JSON.parse(storedData || '[]');
-	} catch (error) {
-		if (error instanceof SyntaxError) {
-			visibilityStates = [];
+
+		let visibilityStates: GraphVisibilityState[];
+
+		if (!storedData) {
+			visibilityStates = [
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			visibilityStates = JSON.parse(storedData);
 		}
-	}
-	const widgetState = visibilityStates.find((state) => state.name === widgetId);
+		const widgetState = visibilityStates.find((state) => state.name === widgetId);
 
-	if (widgetState) {
-		widgetState.dataIndex = seriesVisibility;
-	} else {
-		visibilityStates = [
-			...visibilityStates,
-			{
-				name: widgetId,
-				dataIndex: seriesVisibility,
-			},
-		];
-	}
+		if (!widgetState) {
+			visibilityStates = [
+				...visibilityStates,
+				{
+					name: widgetId,
+					dataIndex: seriesVisibility,
+				},
+			];
+		} else {
+			widgetState.dataIndex = seriesVisibility;
+		}
 
-	localStorage.setItem(
-		LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
-		JSON.stringify(visibilityStates),
-	);
+		localStorage.setItem(
+			LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+			JSON.stringify(visibilityStates),
+		);
+	} catch {
+		// Silently handle parsing errors - fall back to default visibility
+	}
 }

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

@@ -6,12 +6,10 @@ 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';
@@ -55,6 +53,7 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
+	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -65,8 +64,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
+		variablesToGetUpdated,
 	} = useDashboard();
-
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -118,25 +117,10 @@ 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 isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
-		referencedVariableNames,
-	);
-
-	const queryEnabledCondition =
-		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -193,6 +177,27 @@ 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,
@@ -219,7 +224,11 @@ function GridCardGraph({
 				requestData,
 				variables
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (variable.name && referencedVariableNames.includes(variable.name)) {
+							if (
+								variable.type !== 'DYNAMIC' ||
+								(widgetsByDynamicVariableId?.[variable.id] &&
+									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
+							) {
 								return { ...acc, [id]: variable.selectedValue };
 							}
 							return acc;
@@ -228,6 +237,9 @@ 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 (
@@ -240,7 +252,7 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition,
+			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -307,7 +319,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					isFetchingResponse={
-						queryResponse.isFetching || isPanelWaitingOnAnyVariable
+						queryResponse.isFetching || variablesToGetUpdated.length > 0
 					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}

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

@@ -72,6 +72,7 @@ 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,6 +16,7 @@ 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';
@@ -101,6 +102,8 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
+	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
+
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
@@ -614,6 +617,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 									enableDrillDown={enableDrillDown}
+									widgetsByDynamicVariableId={widgetsByDynamicVariableId}
 								/>
 							</Card>
 						</CardContainer>

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

@@ -477,67 +477,47 @@
 			}
 		}
 
-		.observability-tools-radio-container {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0 12px;
-			width: 528px;
-
-			.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);
-
-				label {
-					color: var(--l1-foreground);
-					font-size: 13px;
-					cursor: pointer;
-				}
-
-				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);
+			.opentelemetry-radio-group {
+				width: 100%;
 
-				label {
-					color: var(--l1-foreground);
-					font-size: 13px;
-					cursor: pointer;
+				.opentelemetry-radio-items-wrapper {
+					display: flex;
+					flex-direction: row;
+					flex-wrap: nowrap;
+					gap: 12px;
+					width: 100%;
 				}
 
-				button[role='radio'] {
-					&[data-state='unchecked'] {
-						border-color: var(--l3-border) !important;
-						border-width: 1px !important;
+				.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);
+					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;
+
+					.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);
+						}
 					}
 				}
 			}
@@ -997,6 +977,27 @@
 				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,27 +1,34 @@
 /* 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 {
-	RadioGroup,
-	RadioGroupItem,
-	RadioGroupLabel,
-} from '@signozhq/radio-group';
-import { Typography } from 'antd';
+import { Radio, Typography } from 'antd';
+import { RadioChangeEvent } from 'antd/es/radio';
 import logEvent from 'api/common/logEvent';
-import { ArrowRight } from 'lucide-react';
+import editOrg from 'api/organization/editOrg';
+import { useNotifications } from 'hooks/useNotifications';
+import { ArrowRight, Loader2 } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 
 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;
 }
@@ -38,14 +45,19 @@ const observabilityTools = {
 	Others: 'Others',
 };
 
-const migrationTimelineOptions = {
-	lessThanMonth: 'Less than a month',
-	oneToThreeMonths: '1-3 months',
-	greaterThanThreeMonths: 'Greater than 3 months',
-	justExploring: 'Just exploring',
-};
+function OrgQuestions({
+	currentOrgData,
+	orgDetails,
+	onNext,
+}: OrgQuestionsProps): JSX.Element {
+	const { updateOrg } = useAppContext();
+	const { notifications } = useNotifications();
 
-function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
+	const { t } = useTranslation(['organizationsettings', 'common']);
+
+	const [organisationName, setOrganisationName] = useState<string>(
+		orgDetails?.organisationName || '',
+	);
 	const [observabilityTool, setObservabilityTool] = useState<string | null>(
 		orgDetails?.observabilityTool || null,
 	);
@@ -54,33 +66,92 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 	);
 	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 showMigrationQuestion =
-		observabilityTool !== null && observabilityTool !== 'None';
-
-	const handleNext = (): void => {
+	const handleOrgNameUpdate = async (): Promise<void> => {
 		const usesObservability =
 			!observabilityTool?.includes('None') && observabilityTool !== null;
 
-		logEvent('Org Onboarding: Answered', {
-			usesObservability,
-			observabilityTool,
-			otherTool,
-			usesOtel,
-			migrationTimeline,
-		});
+		/* 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,
+			});
 
-		onNext({
-			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',
+				}),
+			});
+		}
 	};
 
 	const isValidUsesObservability = (): boolean => {
@@ -102,29 +173,22 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
-		const isMigrationValid = !showMigrationQuestion || migrationTimeline !== null;
 
-		if (usesOtel !== null && isValidObservability && isMigrationValid) {
+		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		usesOtel,
-		observabilityTool,
-		otherTool,
-		migrationTimeline,
-		showMigrationQuestion,
-	]);
+	}, [organisationName, usesOtel, observabilityTool, otherTool]);
 
-	const handleObservabilityToolChange = (value: string): void => {
-		setObservabilityTool(value);
-		if (value !== 'Others') {
-			setOtherTool('');
-		}
-		if (value === 'None') {
-			setMigrationTimeline(null);
+	const createObservabilityToolHandler = (tool: string) => (
+		checked: boolean,
+	): void => {
+		if (checked) {
+			setObservabilityTool(tool);
+		} else if (observabilityTool === tool) {
+			setObservabilityTool(null);
 		}
 	};
 
@@ -132,6 +196,10 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 		setUsesOtel(value === 'yes');
 	};
 
+	const handleOnNext = (): void => {
+		handleOrgNameUpdate();
+	};
+
 	return (
 		<div className="questions-container">
 			<div className="onboarding-header-section">
@@ -146,24 +214,40 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 
 			<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>
-						<RadioGroup
-							value={observabilityTool || ''}
-							onValueChange={handleObservabilityToolChange}
-							className="observability-tools-radio-container"
-						>
+						<div className="observability-tools-checkbox-container">
 							{Object.entries(observabilityTools).map(([tool, label]) => {
 								if (tool === 'Others') {
 									return (
 										<div
 											key={tool}
-											className="radio-item observability-tool-radio-item observability-tool-others-item"
+											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
 										>
-											<RadioGroupItem value={tool} id={`radio-${tool}`} />
-											{observabilityTool === 'Others' ? (
+											<Checkbox
+												id={`checkbox-${tool}`}
+												checked={observabilityTool === tool}
+												onCheckedChange={createObservabilityToolHandler(tool)}
+												labelName={observabilityTool === 'Others' ? '' : label}
+											/>
+											{observabilityTool === 'Others' && (
 												<Input
 													type="text"
 													className="onboarding-questionaire-other-input"
@@ -172,60 +256,55 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 													autoFocus
 													onChange={(e): void => setOtherTool(e.target.value)}
 												/>
-											) : (
-												<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 											)}
 										</div>
 									);
 								}
 								return (
-									<div key={tool} className="radio-item observability-tool-radio-item">
-										<RadioGroupItem value={tool} id={`radio-${tool}`} />
-										<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
+									<div
+										key={tool}
+										className="checkbox-item observability-tool-checkbox-item"
+									>
+										<Checkbox
+											id={`checkbox-${tool}`}
+											checked={observabilityTool === tool}
+											onCheckedChange={createObservabilityToolHandler(tool)}
+											labelName={label}
+										/>
 									</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>
 
 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</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 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>
 					</div>
 				</div>
 
@@ -233,9 +312,15 @@ function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 					variant="solid"
 					color="primary"
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleNext}
+					onClick={handleOnNext}
 					disabled={isNextDisabled}
-					suffixIcon={<ArrowRight size={12} />}
+					suffixIcon={
+						isLoading ? (
+							<Loader2 className="animate-spin" size={12} />
+						) : (
+							<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,12 +86,15 @@ 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();
@@ -109,38 +112,15 @@ 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);
@@ -157,10 +137,11 @@ 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(
@@ -176,10 +157,11 @@ 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(() => {
@@ -193,10 +175,11 @@ 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(
@@ -220,10 +203,11 @@ 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(
@@ -248,10 +232,11 @@ 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(
@@ -282,10 +267,11 @@ 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(
@@ -304,4 +290,40 @@ 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, { OrgDetails } from './OrgQuestions/OrgQuestions';
+import OrgQuestions, { OrgData, 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,11 +79,25 @@ 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,
@@ -161,7 +175,6 @@ 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',
 			)
@@ -195,6 +208,7 @@ 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,23 +1,22 @@
 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 = {
-	[PANEL_TYPES.TIME_SERIES]: TimeSeriesPanel,
+	[PANEL_TYPES.TIME_SERIES]: UplotPanelWrapper,
 	[PANEL_TYPES.TABLE]: TablePanelWrapper,
 	[PANEL_TYPES.LIST]: ListPanelWrapper,
 	[PANEL_TYPES.VALUE]: ValuePanelWrapper,
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
-	[PANEL_TYPES.BAR]: BarPanel,
-	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
+	[PANEL_TYPES.BAR]: UplotPanelWrapper,
+	[PANEL_TYPES.HISTOGRAM]: HistogramPanelWrapper,
 };
 
 export const DEFAULT_BUCKET_COUNT = 30;

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

@@ -5,12 +5,16 @@ 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 { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 export type PanelWrapperProps = {
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	widget: Widgets;
 	setRequestData?: WidgetGraphComponentProps['setRequestData'];
 	isFullViewMode?: boolean;

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

@@ -1,316 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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,7 +3,6 @@ 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,
@@ -117,17 +116,10 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								variable.name &&
 								filter.key?.key === variable.dynamicVariablesAttribute &&
-								(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)) &&
+								((isArray(filter.value) &&
+									filter.value.includes(`$${variable.name}`)) ||
+									filter.value === `$${variable.name}`) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -140,12 +132,7 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								variable.name &&
-								queryData.filter?.expression &&
-								textContainsVariableReference(
-									queryData.filter.expression,
-									variable.name,
-								) &&
+								queryData.filter?.expression?.includes(`$${variable.name}`) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -162,9 +149,7 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							variable.name &&
-							promqlQuery.query &&
-							textContainsVariableReference(promqlQuery.query, variable.name) &&
+							promqlQuery.query?.includes(`$${variable.name}`) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -180,9 +165,7 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							variable.name &&
-							clickhouseQuery.query &&
-							textContainsVariableReference(clickhouseQuery.query, variable.name) &&
+							clickhouseQuery.query?.includes(`$${variable.name}`) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

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

frontend/src/hooks/useCopyToClipboard.ts

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

frontend/src/lib/dashboard/getQueryResults.ts

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

frontend/src/lib/dashboardVariables/variableReference.test.ts

@@ -1,445 +0,0 @@
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import {
-	buildVariableReferencePattern,
-	extractQueryTextStrings,
-	getVariableReferencesInQuery,
-	textContainsVariableReference,
-} from './variableReference';
-
-describe('buildVariableReferencePattern', () => {
-	const varName = 'deployment_environment';
-
-	it.each([
-		['{{.deployment_environment}}', '{{.var}} syntax'],
-		['{{ .deployment_environment }}', '{{.var}} with spaces'],
-		['{{deployment_environment}}', '{{var}} syntax'],
-		['{{ deployment_environment }}', '{{var}} with spaces'],
-		['$deployment_environment', '$var syntax'],
-		['[[deployment_environment]]', '[[var]] syntax'],
-		['[[ deployment_environment ]]', '[[var]] with spaces'],
-	])('matches %s (%s)', (text) => {
-		expect(buildVariableReferencePattern(varName).test(text)).toBe(true);
-	});
-
-	it('does not match partial variable names', () => {
-		const pattern = buildVariableReferencePattern('env');
-		// $env should match at word boundary, but $environment should not match $env
-		expect(pattern.test('$environment')).toBe(false);
-	});
-
-	it('matches $var at word boundary within larger text', () => {
-		const pattern = buildVariableReferencePattern('env');
-		expect(pattern.test('SELECT * WHERE x = $env')).toBe(true);
-		expect(pattern.test('$env AND y = 1')).toBe(true);
-	});
-});
-
-describe('textContainsVariableReference', () => {
-	describe('guard clauses', () => {
-		it('returns false for empty text', () => {
-			expect(textContainsVariableReference('', 'var')).toBe(false);
-		});
-
-		it('returns false for empty variable name', () => {
-			expect(textContainsVariableReference('some text', '')).toBe(false);
-		});
-	});
-
-	describe('all syntax formats', () => {
-		const varName = 'service_name';
-
-		it('detects {{.var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{.service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects {{var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects $var format', () => {
-			const query = "SELECT * FROM table WHERE service = '$service_name'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects [[var]] format', () => {
-			const query = "SELECT * FROM table WHERE service = '[[service_name]]'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-	});
-
-	describe('embedded in larger text', () => {
-		it('finds variable in a multi-line query', () => {
-			const query = `SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name
-FROM signoz_metrics.distributed_time_series_v4_1day
-WHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}
-GROUP BY k8s_node_name`;
-			expect(textContainsVariableReference(query, 'k8s_cluster_name')).toBe(true);
-			expect(textContainsVariableReference(query, 'k8s_node_name')).toBe(false); // plain text, not a variable reference
-		});
-	});
-
-	describe('no false positives', () => {
-		it('does not match substring of a longer variable name', () => {
-			expect(
-				textContainsVariableReference('$service_name_v2', 'service_name'),
-			).toBe(false);
-		});
-
-		it('does not match plain text that happens to contain the name', () => {
-			expect(
-				textContainsVariableReference(
-					'the service_name column is important',
-					'service_name',
-				),
-			).toBe(false);
-		});
-	});
-});
-
-// ---- Query text extraction & variable reference detection ----
-
-const baseQuery: Query = {
-	id: 'test-query',
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
-	clickhouse_sql: [],
-};
-
-describe('extractQueryTextStrings', () => {
-	it('returns empty array for query builder with no data', () => {
-		expect(extractQueryTextStrings(baseQuery)).toEqual([]);
-	});
-
-	it('extracts string values from query builder filter items', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: ['$service_name', 'hardcoded'] },
-								{ id: '2', op: '=', value: '$env' },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['$service_name', 'hardcoded', '$env']);
-	});
-
-	it('extracts filter expression from query builder', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: { items: [], op: 'AND' },
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['env = $deployment_environment']);
-	});
-
-	it('skips non-string filter values', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: [42, true] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-
-	it('extracts promql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: 'up{env="$env"}', legend: '', disabled: false },
-				{ name: 'B', query: 'cpu{ns="$namespace"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'up{env="$env"}',
-			'cpu{ns="$namespace"}',
-		]);
-	});
-
-	it('extracts clickhouse sql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * WHERE env = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE env = {{.env}}',
-		]);
-	});
-
-	it('accumulates texts across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$env' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filters: {
-							items: [{ id: '2', op: '=', value: ['$service_name'] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['$env', '$service_name']);
-	});
-
-	it('collects both filter items and filter expression from the same queryData', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'$service_name',
-			'env = $deployment_environment',
-		]);
-	});
-
-	it('skips promql entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{ name: 'B', query: 'up{env="$env"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['up{env="$env"}']);
-	});
-
-	it('skips clickhouse entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{
-					name: 'B',
-					query: 'SELECT * WHERE x = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE x = {{.env}}',
-		]);
-	});
-
-	it('returns empty array for unknown query type', () => {
-		const query = {
-			...baseQuery,
-			queryType: ('unknown' as unknown) as EQueryType,
-		};
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-});
-
-describe('getVariableReferencesInQuery', () => {
-	const variableNames = [
-		'deployment_environment',
-		'service_name',
-		'endpoint',
-		'unused_var',
-	];
-
-	it('returns empty array when query has no text', () => {
-		expect(getVariableReferencesInQuery(baseQuery, variableNames)).toEqual([]);
-	});
-
-	it('detects variables referenced in query builder filters', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: '$service_name' },
-								{ id: '2', op: 'IN', value: ['$deployment_environment'] },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('detects variables in promql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query:
-						'http_requests{env="{{.deployment_environment}}", endpoint="$endpoint"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'endpoint']);
-	});
-
-	it('detects variables in clickhouse sql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * FROM table WHERE service = [[service_name]]',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['service_name']);
-	});
-
-	it('detects variables spread across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('returns empty array when no variables are referenced', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{job="api"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, variableNames)).toEqual([]);
-	});
-
-	it('returns empty array when variableNames list is empty', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{env="$deployment_environment"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, [])).toEqual([]);
-	});
-});

frontend/src/lib/dashboardVariables/variableReference.ts

@@ -1,136 +0,0 @@
-import { isArray } from 'lodash-es';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-/**
- * Builds a RegExp that matches any recognized variable reference syntax:
- *   {{.variableName}}  — dot prefix, optional whitespace
- *   {{variableName}}   — no dot, optional whitespace
- *   $variableName      — dollar prefix, word-boundary terminated
- *   [[variableName]]   — square brackets, optional whitespace
- */
-export function buildVariableReferencePattern(variableName: string): RegExp {
-	const patterns = [
-		`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`,
-		`\\{\\{\\s*${variableName}\\s*\\}\\}`,
-		`\\$${variableName}\\b`,
-		`\\[\\[\\s*${variableName}\\s*\\]\\]`,
-	];
-	return new RegExp(patterns.join('|'));
-}
-
-/**
- * Returns true if `text` contains a reference to `variableName` in any of the
- * recognized variable syntaxes.
- */
-export function textContainsVariableReference(
-	text: string,
-	variableName: string,
-): boolean {
-	if (!text || !variableName) {
-		return false;
-	}
-	return buildVariableReferencePattern(variableName).test(text);
-}
-
-/**
- * Extracts all text strings from a widget Query that could contain variable
- * references. Covers:
- * - QUERY_BUILDER: filter items' string values + filter.expression
- * - PROM: each promql[].query
- * - CLICKHOUSE: each clickhouse_sql[].query
- */
-function extractQueryBuilderTexts(query: Query): string[] {
-	const texts: string[] = [];
-	const queryDataList = query.builder?.queryData;
-	if (isArray(queryDataList)) {
-		queryDataList.forEach((queryData) => {
-			// Collect string values from filter items
-			queryData.filters?.items?.forEach((filter: TagFilterItem) => {
-				if (isArray(filter.value)) {
-					filter.value.forEach((v) => {
-						if (typeof v === 'string') {
-							texts.push(v);
-						}
-					});
-				} else if (typeof filter.value === 'string') {
-					texts.push(filter.value);
-				}
-			});
-
-			// Collect filter expression
-			if (queryData.filter?.expression) {
-				texts.push(queryData.filter.expression);
-			}
-		});
-	}
-	return texts;
-}
-
-function extractPromQLTexts(query: Query): string[] {
-	const texts: string[] = [];
-	if (isArray(query.promql)) {
-		query.promql.forEach((promqlQuery) => {
-			if (promqlQuery.query) {
-				texts.push(promqlQuery.query);
-			}
-		});
-	}
-	return texts;
-}
-
-function extractClickhouseSQLTexts(query: Query): string[] {
-	const texts: string[] = [];
-	if (isArray(query.clickhouse_sql)) {
-		query.clickhouse_sql.forEach((clickhouseQuery) => {
-			if (clickhouseQuery.query) {
-				texts.push(clickhouseQuery.query);
-			}
-		});
-	}
-	return texts;
-}
-
-/**
- * Extracts all text strings from a widget Query that could contain variable
- * references. Covers:
- * - QUERY_BUILDER: filter items' string values + filter.expression
- * - PROM: each promql[].query
- * - CLICKHOUSE: each clickhouse_sql[].query
- */
-export function extractQueryTextStrings(query: Query): string[] {
-	if (query.queryType === EQueryType.QUERY_BUILDER) {
-		return extractQueryBuilderTexts(query);
-	}
-
-	if (query.queryType === EQueryType.PROM) {
-		return extractPromQLTexts(query);
-	}
-
-	if (query.queryType === EQueryType.CLICKHOUSE) {
-		return extractClickhouseSQLTexts(query);
-	}
-
-	return [];
-}
-
-/**
- * Given a widget Query and an array of variable names, returns the subset of
- * variable names that are referenced in the query text.
- *
- * This performs text-based detection only. Structural checks (like
- * filter.key.key matching a variable attribute) are NOT included.
- */
-export function getVariableReferencesInQuery(
-	query: Query,
-	variableNames: string[],
-): string[] {
-	const texts = extractQueryTextStrings(query);
-	if (texts.length === 0) {
-		return [];
-	}
-
-	return variableNames.filter((name) =>
-		texts.some((text) => textContainsVariableReference(text, name)),
-	);
-}

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-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,16 +16,12 @@ 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) {
@@ -34,12 +30,7 @@ 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,
-		showTooltipHeader,
-	]);
+	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
 
 	return (
 		<div
@@ -48,11 +39,9 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			{showTooltipHeader && (
-				<div className="uplot-tooltip-header">
-					<span>{headerTitle}</span>
-				</div>
-			)}
+			<div className="uplot-tooltip-header">
+				<span>{headerTitle}</span>
+			</div>
 			<div
 				style={{
 					height: Math.min(

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

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

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

@@ -1,280 +0,0 @@
-import React from 'react';
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../hooks/useLegendActions';
-import Legend from '../Legend/Legend';
-import { LegendPosition } from '../types';
-
-const mockWriteText = jest.fn().mockResolvedValue(undefined);
-let clipboardSpy: jest.SpyInstance | undefined;
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-describe('Legend', () => {
-	beforeAll(() => {
-		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: () => Promise.resolve() },
-			writable: true,
-			configurable: true,
-		});
-	});
-
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onLegendClick: jest.Mock;
-	let onLegendMouseMove: jest.Mock;
-	let onLegendMouseLeave: jest.Mock;
-	let onFocusSeries: jest.Mock;
-
-	beforeEach(() => {
-		onLegendClick = jest.fn();
-		onLegendMouseMove = jest.fn();
-		onLegendMouseLeave = jest.fn();
-		onFocusSeries = jest.fn();
-		mockWriteText.mockClear();
-
-		clipboardSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockImplementation(mockWriteText);
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue({
-			onLegendClick,
-			onLegendMouseMove,
-			onLegendMouseLeave,
-			onFocusSeries,
-		});
-	});
-
-	afterEach(() => {
-		clipboardSpy?.mockRestore();
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<Legend
-				position={position}
-				// config is not used directly in the component, it's consumed by the mocked hook
-				config={{} as any}
-			/>,
-		);
-
-	describe('layout and position', () => {
-		it('renders search input when legend position is RIGHT', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('does not render search input when legend position is BOTTOM (default)', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-		});
-
-		it('renders the marker with the correct border color', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendMarker = document.querySelector(
-				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-			) as HTMLElement;
-
-			expect(legendMarker).toHaveStyle({
-				'border-color': '#ff0000',
-			});
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('search behavior (RIGHT position)', () => {
-		it('filters legend items based on search query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'A');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows empty state when no legend items match the search query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('legend actions', () => {
-		it('calls onLegendClick when a legend item is clicked', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(onLegendClick).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls mouseMove when the mouse moves over a legend item', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-
-			await user.hover(legendItem);
-
-			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const container = document.querySelector('.legend-container') as HTMLElement;
-
-			await user.hover(container);
-			await user.unhover(container);
-
-			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('copy action', () => {
-		it('copies the legend label to clipboard when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('A');
-		});
-
-		it('copies the correct label when copy is clicked on a different legend item', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const thirdLegendItem = document.querySelector(
-				'[data-legend-item-id="2"]',
-			) as HTMLElement;
-			const copyButton = within(thirdLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('C');
-		});
-
-		it('does not call onLegendClick when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(onLegendClick).not.toHaveBeenCalled();
-		});
-	});
-});

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

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

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

@@ -4,12 +4,12 @@ import uPlot, { Axis } from 'uplot';
 
 import { uPlotXAxisValuesFormat } from '../../uPlotLib/utils/constants';
 import getGridColor from '../../uPlotLib/utils/getGridColor';
-import { buildYAxisSizeCalculator } from '../utils/axis';
 import { AxisProps, ConfigBuilder } from './types';
 
 const PANEL_TYPES_WITH_X_AXIS_DATETIME_FORMAT = [
 	PANEL_TYPES.TIME_SERIES,
 	PANEL_TYPES.BAR,
+	PANEL_TYPES.PIE,
 ];
 
 /**
@@ -114,6 +114,81 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			: undefined;
 	}
 
+	/**
+	 * Calculate axis size from existing size property
+	 */
+	private getExistingAxisSize(
+		self: uPlot,
+		axis: Axis,
+		values: string[] | undefined,
+		axisIdx: number,
+		cycleNum: number,
+	): number {
+		const internalSize = (axis as { _size?: number })._size;
+		if (internalSize !== undefined) {
+			return internalSize;
+		}
+
+		const existingSize = axis.size;
+		if (typeof existingSize === 'function') {
+			return existingSize(self, values ?? [], axisIdx, cycleNum);
+		}
+
+		return existingSize ?? 0;
+	}
+
+	/**
+	 * Calculate text width for longest value
+	 */
+	private calculateTextWidth(
+		self: uPlot,
+		axis: Axis,
+		values: string[] | undefined,
+	): number {
+		if (!values || values.length === 0) {
+			return 0;
+		}
+
+		// Find longest value
+		const longestVal = values.reduce(
+			(acc, val) => (val.length > acc.length ? val : acc),
+			'',
+		);
+
+		if (longestVal === '' || !axis.font?.[0]) {
+			return 0;
+		}
+
+		// eslint-disable-next-line prefer-destructuring, no-param-reassign
+		self.ctx.font = axis.font[0];
+		return self.ctx.measureText(longestVal).width / devicePixelRatio;
+	}
+
+	/**
+	 * Build Y-axis dynamic size calculator
+	 */
+	private buildYAxisSizeCalculator(): uPlot.Axis.Size {
+		return (
+			self: uPlot,
+			values: string[] | undefined,
+			axisIdx: number,
+			cycleNum: number,
+		): number => {
+			const axis = self.axes[axisIdx];
+
+			// Bail out, force convergence
+			if (cycleNum > 1) {
+				return this.getExistingAxisSize(self, axis, values, axisIdx, cycleNum);
+			}
+
+			const gap = this.props.gap ?? 5;
+			let axisSize = (axis.ticks?.size ?? 0) + gap;
+			axisSize += this.calculateTextWidth(self, axis, values);
+
+			return Math.ceil(axisSize);
+		};
+	}
+
 	/**
 	 * Build dynamic size calculator for Y-axis
 	 */
@@ -127,7 +202,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 
 		// Y-axis needs dynamic sizing based on text width
 		if (scaleKey === 'y') {
-			return buildYAxisSizeCalculator(this.props.gap ?? 5);
+			return this.buildYAxisSizeCalculator();
 		}
 
 		return undefined;