fix: xor condition for user config validation

fix: make reconciler flow idempotent
fix: improve validation for root user config
2026-02-09 19:22:21 +00:00 · 2026-02-07 12:47:02 +05:30 · 2026-02-07 12:40:50 +05:30 · 2026-02-07 12:13:25 +05:30 · 2026-02-07 03:21:59 +05:30 · 2026-02-06 17:29:46 +05:30
199 changed files with 4736 additions and 7859 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -133,8 +133,5 @@
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
 /frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend

-## Dashboard Libs + Components
-/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
-/frontend/src/lib/dashboard/ @SigNoz/pulse-frontend
-/frontend/src/lib/dashboardVariables/ @SigNoz/pulse-frontend
-/frontend/src/components/NewSelect/ @SigNoz/pulse-frontend
+## UplotV2 
+/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend
--- a/2
+++ b/2
@@ -238,4 +238,4 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"
-	@mockery --config .mockery.yml
+	@mockery --config .mockery.yml
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -18,6 +18,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/role"
+	"github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -76,15 +78,18 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, _ licensing.Licensing, _ dashboard.Module) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, _ role.Setter, _ role.Granter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
+		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, _ []role.RegisterTypeable) role.Setter {
+			return implrole.NewSetter(implrole.NewStore(store), authz)
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -14,6 +14,7 @@ import (
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/ee/modules/role/implrole"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
@@ -28,6 +29,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/role"
+	pkgimplrole "github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -115,15 +118,18 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e

 			return authNs, nil
 		},
-		func(ctx context.Context, sqlstore sqlstore.SQLStore, licensing licensing.Licensing, dashboardModule dashboard.Module) factory.ProviderFactory[authz.AuthZ, authz.Config] {
-			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), licensing, dashboardModule)
+		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, roleSetter, granter, queryParser, querier, licensing)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
+		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
+			return implrole.NewSetter(pkgimplrole.NewStore(store), authz, licensing, registry)
+		},
 	)

 	if err != nil {
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -300,3 +300,8 @@ user:
      allow_self: true
      # The duration within which a user can reset their password.
      max_token_lifetime: 6h
+  root:
+    # The email of the root user.
+    email: root@example.com
+    # The password of the root user.
+    password: Str0ngP@ssw0rd!
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -607,178 +607,6 @@ paths:
      summary: Update auth domain
      tags:
      - authdomains
-  /api/v1/fields/keys:
-    get:
-      deprecated: false
-      description: This endpoint returns field keys
-      operationId: GetFieldsKeys
-      parameters:
-      - in: query
-        name: signal
-        schema:
-          type: string
-      - in: query
-        name: source
-        schema:
-          type: string
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: startUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: endUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: fieldContext
-        schema:
-          type: string
-      - in: query
-        name: fieldDataType
-        schema:
-          type: string
-      - in: query
-        name: metricName
-        schema:
-          type: string
-      - in: query
-        name: searchText
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TelemetrytypesGettableFieldKeys'
-                  status:
-                    type: string
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get field keys
-      tags:
-      - fields
-  /api/v1/fields/values:
-    get:
-      deprecated: false
-      description: This endpoint returns field values
-      operationId: GetFieldsValues
-      parameters:
-      - in: query
-        name: signal
-        schema:
-          type: string
-      - in: query
-        name: source
-        schema:
-          type: string
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: startUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: endUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: fieldContext
-        schema:
-          type: string
-      - in: query
-        name: fieldDataType
-        schema:
-          type: string
-      - in: query
-        name: metricName
-        schema:
-          type: string
-      - in: query
-        name: searchText
-        schema:
-          type: string
-      - in: query
-        name: name
-        schema:
-          type: string
-      - in: query
-        name: existingQuery
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TelemetrytypesGettableFieldValues'
-                  status:
-                    type: string
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get field values
-      tags:
-      - fields
  /api/v1/getResetPasswordToken/{id}:
    get:
      deprecated: false
@@ -2398,12 +2226,6 @@ paths:
              schema:
                $ref: '#/components/schemas/RenderErrorResponse'
          description: Bad Request
-        "422":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unprocessable Entity
        "500":
          content:
            application/json:
@@ -2843,7 +2665,6 @@ paths:
      parameters:
      - in: query
        name: metricName
-        required: true
        schema:
          type: string
      responses:
@@ -2898,7 +2719,6 @@ paths:
      parameters:
      - in: query
        name: metricName
-        required: true
        schema:
          type: string
      responses:
@@ -2954,7 +2774,6 @@ paths:
      parameters:
      - in: query
        name: metricName
-        required: true
        schema:
          type: string
      responses:
@@ -3121,7 +2940,6 @@ paths:
      parameters:
      - in: query
        name: metricName
-        required: true
        schema:
          type: string
      responses:
@@ -3989,9 +3807,6 @@ components:
          type: string
        alertName:
          type: string
-      required:
-      - alertName
-      - alertId
      type: object
    MetricsexplorertypesMetricAlertsResponse:
      properties:
@@ -4000,8 +3815,6 @@ components:
            $ref: '#/components/schemas/MetricsexplorertypesMetricAlert'
          nullable: true
          type: array
-      required:
-      - alerts
      type: object
    MetricsexplorertypesMetricAttribute:
      properties:
@@ -4015,10 +3828,6 @@ components:
            type: string
          nullable: true
          type: array
-      required:
-      - key
-      - values
-      - valueCount
      type: object
    MetricsexplorertypesMetricAttributesRequest:
      properties:
@@ -4030,8 +3839,6 @@ components:
        start:
          nullable: true
          type: integer
-      required:
-      - metricName
      type: object
    MetricsexplorertypesMetricAttributesResponse:
      properties:
@@ -4043,9 +3850,6 @@ components:
        totalKeys:
          format: int64
          type: integer
-      required:
-      - attributes
-      - totalKeys
      type: object
    MetricsexplorertypesMetricDashboard:
      properties:
@@ -4057,11 +3861,6 @@ components:
          type: string
        widgetName:
          type: string
-      required:
-      - dashboardName
-      - dashboardId
-      - widgetId
-      - widgetName
      type: object
    MetricsexplorertypesMetricDashboardsResponse:
      properties:
@@ -4070,8 +3869,6 @@ components:
            $ref: '#/components/schemas/MetricsexplorertypesMetricDashboard'
          nullable: true
          type: array
-      required:
-      - dashboards
      type: object
    MetricsexplorertypesMetricHighlightsResponse:
      properties:
@@ -4087,11 +3884,6 @@ components:
        totalTimeSeries:
          minimum: 0
          type: integer
-      required:
-      - dataPoints
-      - lastReceived
-      - totalTimeSeries
-      - activeTimeSeries
      type: object
    MetricsexplorertypesMetricMetadata:
      properties:
@@ -4100,17 +3892,11 @@ components:
        isMonotonic:
          type: boolean
        temporality:
-          $ref: '#/components/schemas/MetrictypesTemporality'
+          type: string
        type:
-          $ref: '#/components/schemas/MetrictypesType'
+          type: string
        unit:
          type: string
-      required:
-      - description
-      - type
-      - unit
-      - temporality
-      - isMonotonic
      type: object
    MetricsexplorertypesStat:
      properties:
@@ -4125,16 +3911,9 @@ components:
          minimum: 0
          type: integer
        type:
-          $ref: '#/components/schemas/MetrictypesType'
+          type: string
        unit:
          type: string
-      required:
-      - metricName
-      - description
-      - type
-      - unit
-      - timeseries
-      - samples
      type: object
    MetricsexplorertypesStatsRequest:
      properties:
@@ -4152,10 +3931,6 @@ components:
        start:
          format: int64
          type: integer
-      required:
-      - start
-      - end
-      - limit
      type: object
    MetricsexplorertypesStatsResponse:
      properties:
@@ -4167,9 +3942,6 @@ components:
        total:
          minimum: 0
          type: integer
-      required:
-      - metrics
-      - total
      type: object
    MetricsexplorertypesTreemapEntry:
      properties:
@@ -4181,16 +3953,7 @@ components:
        totalValue:
          minimum: 0
          type: integer
-      required:
-      - metricName
-      - percentage
-      - totalValue
      type: object
-    MetricsexplorertypesTreemapMode:
-      enum:
-      - timeseries
-      - samples
-      type: string
    MetricsexplorertypesTreemapRequest:
      properties:
        end:
@@ -4201,15 +3964,10 @@ components:
        limit:
          type: integer
        mode:
-          $ref: '#/components/schemas/MetricsexplorertypesTreemapMode'
+          type: string
        start:
          format: int64
          type: integer
-      required:
-      - start
-      - end
-      - limit
-      - mode
      type: object
    MetricsexplorertypesTreemapResponse:
      properties:
@@ -4223,9 +3981,6 @@ components:
            $ref: '#/components/schemas/MetricsexplorertypesTreemapEntry'
          nullable: true
          type: array
-      required:
-      - timeseries
-      - samples
      type: object
    MetricsexplorertypesUpdateMetricMetadataRequest:
      properties:
@@ -4236,33 +3991,12 @@ components:
        metricName:
          type: string
        temporality:
-          $ref: '#/components/schemas/MetrictypesTemporality'
+          type: string
        type:
-          $ref: '#/components/schemas/MetrictypesType'
+          type: string
        unit:
          type: string
-      required:
-      - metricName
-      - type
-      - description
-      - unit
-      - temporality
-      - isMonotonic
      type: object
-    MetrictypesTemporality:
-      enum:
-      - delta
-      - cumulative
-      - unspecified
-      type: string
-    MetrictypesType:
-      enum:
-      - gauge
-      - sum
-      - histogram
-      - summary
-      - exponentialhistogram
-      type: string
    PreferencetypesPreference:
      properties:
        allowedScopes:
@@ -4416,60 +4150,6 @@ components:
          format: date-time
          type: string
      type: object
-    TelemetrytypesGettableFieldKeys:
-      properties:
-        complete:
-          type: boolean
-        keys:
-          additionalProperties:
-            items:
-              $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-            type: array
-          nullable: true
-          type: object
-      type: object
-    TelemetrytypesGettableFieldValues:
-      properties:
-        complete:
-          type: boolean
-        values:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldValues'
-      type: object
-    TelemetrytypesTelemetryFieldKey:
-      properties:
-        description:
-          type: string
-        fieldContext:
-          type: string
-        fieldDataType:
-          type: string
-        name:
-          type: string
-        signal:
-          type: string
-        unit:
-          type: string
-      type: object
-    TelemetrytypesTelemetryFieldValues:
-      properties:
-        boolValues:
-          items:
-            type: boolean
-          type: array
-        numberValues:
-          items:
-            format: double
-            type: number
-          type: array
-        relatedValues:
-          items:
-            type: string
-          type: array
-        stringValues:
-          items:
-            type: string
-          type: array
-      type: object
    TypesChangePasswordRequest:
      properties:
        newPassword:
@@ -4598,9 +4278,6 @@ components:
          type: string
        orgId:
          type: string
-      required:
-      - orgId
-      - email
      type: object
    TypesPostableInvite:
      properties:
--- a/ee/authz/openfgaauthz/provider.go
+++ b/ee/authz/openfgaauthz/provider.go
@@ -2,18 +2,12 @@ package openfgaauthz

 import (
 	"context"
-	"slices"

-	"github.com/SigNoz/signoz/ee/authz/openfgaserver"
 	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/authz/authzstore/sqlauthzstore"
 	pkgopenfgaauthz "github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	openfgav1 "github.com/openfga/api/proto/openfga/v1"
 	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
@@ -21,224 +15,50 @@ import (

 type provider struct {
 	pkgAuthzService authz.AuthZ
-	openfgaServer   *openfgaserver.Server
-	licensing       licensing.Licensing
-	store           roletypes.Store
-	registry        []authz.RegisterTypeable
 }

-func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, licensing licensing.Licensing, registry ...authz.RegisterTypeable) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+func NewProviderFactory(sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("openfga"), func(ctx context.Context, ps factory.ProviderSettings, config authz.Config) (authz.AuthZ, error) {
-		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema, licensing, registry)
+		return newOpenfgaProvider(ctx, ps, config, sqlstore, openfgaSchema)
 	})
 }

-func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile, licensing licensing.Licensing, registry []authz.RegisterTypeable) (authz.AuthZ, error) {
+func newOpenfgaProvider(ctx context.Context, settings factory.ProviderSettings, config authz.Config, sqlstore sqlstore.SQLStore, openfgaSchema []openfgapkgtransformer.ModuleFile) (authz.AuthZ, error) {
 	pkgOpenfgaAuthzProvider := pkgopenfgaauthz.NewProviderFactory(sqlstore, openfgaSchema)
 	pkgAuthzService, err := pkgOpenfgaAuthzProvider.New(ctx, settings, config)
 	if err != nil {
 		return nil, err
 	}

-	openfgaServer, err := openfgaserver.NewOpenfgaServer(ctx, pkgAuthzService)
-	if err != nil {
-		return nil, err
-	}
-
 	return &provider{
 		pkgAuthzService: pkgAuthzService,
-		openfgaServer:   openfgaServer,
-		licensing:       licensing,
-		store:           sqlauthzstore.NewSqlAuthzStore(sqlstore),
-		registry:        registry,
 	}, nil
 }

 func (provider *provider) Start(ctx context.Context) error {
-	return provider.openfgaServer.Start(ctx)
+	return provider.pkgAuthzService.Start(ctx)
 }

 func (provider *provider) Stop(ctx context.Context) error {
-	return provider.openfgaServer.Stop(ctx)
+	return provider.pkgAuthzService.Stop(ctx)
 }

 func (provider *provider) Check(ctx context.Context, tuple *openfgav1.TupleKey) error {
-	return provider.openfgaServer.Check(ctx, tuple)
+	return provider.pkgAuthzService.Check(ctx, tuple)
 }

-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
-	return provider.openfgaServer.CheckWithTupleCreation(ctx, claims, orgID, relation, typeable, selectors, roleSelectors)
-}
-
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, roleSelectors []authtypes.Selector) error {
-	return provider.openfgaServer.CheckWithTupleCreationWithoutClaims(ctx, orgID, relation, typeable, selectors, roleSelectors)
-}
-
-func (provider *provider) BatchCheck(ctx context.Context, tuples []*openfgav1.TupleKey) error {
-	return provider.openfgaServer.BatchCheck(ctx, tuples)
-}
-
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, typeable)
-}
-
-func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
-	return provider.openfgaServer.Write(ctx, additions, deletions)
-}
-
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*roletypes.Role, error) {
-	return provider.pkgAuthzService.Get(ctx, orgID, id)
-}
-
-func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*roletypes.Role, error) {
-	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
-}
-
-func (provider *provider) List(ctx context.Context, orgID valuer.UUID) ([]*roletypes.Role, error) {
-	return provider.pkgAuthzService.List(ctx, orgID)
-}
-
-func (provider *provider) ListByOrgIDAndNames(ctx context.Context, orgID valuer.UUID, names []string) ([]*roletypes.Role, error) {
-	return provider.pkgAuthzService.ListByOrgIDAndNames(ctx, orgID, names)
-}
-
-func (provider *provider) Grant(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
-	return provider.pkgAuthzService.Grant(ctx, orgID, name, subject)
-}
-
-func (provider *provider) ModifyGrant(ctx context.Context, orgID valuer.UUID, existingRoleName string, updatedRoleName string, subject string) error {
-	return provider.pkgAuthzService.ModifyGrant(ctx, orgID, existingRoleName, updatedRoleName, subject)
-}
-
-func (provider *provider) Revoke(ctx context.Context, orgID valuer.UUID, name string, subject string) error {
-	return provider.pkgAuthzService.Revoke(ctx, orgID, name, subject)
-}
-
-func (provider *provider) CreateManagedRoles(ctx context.Context, orgID valuer.UUID, managedRoles []*roletypes.Role) error {
-	return provider.pkgAuthzService.CreateManagedRoles(ctx, orgID, managedRoles)
-}
-
-func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context, orgID valuer.UUID, userID valuer.UUID) error {
-	tuples := make([]*openfgav1.TupleKey, 0)
-
-	grantTuples, err := provider.getManagedRoleGrantTuples(orgID, userID)
-	if err != nil {
-		return err
-	}
-	tuples = append(tuples, grantTuples...)
-
-	managedRoleTuples, err := provider.getManagedRoleTransactionTuples(orgID)
-	if err != nil {
-		return err
-	}
-	tuples = append(tuples, managedRoleTuples...)
-
-	return provider.Write(ctx, tuples, nil)
-}
-
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	return provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
-}
-
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return roletypes.NewRoleFromStorableRole(existingRole), nil
-	}
-
-	err = provider.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
-}
-
-func (provider *provider) GetResources(_ context.Context) []*authtypes.Resource {
-	typeables := make([]authtypes.Typeable, 0)
-	for _, register := range provider.registry {
-		typeables = append(typeables, register.MustGetTypeables()...)
-	}
-	// role module cannot self register itself!
-	typeables = append(typeables, provider.MustGetTypeables()...)
-
-	resources := make([]*authtypes.Resource, 0)
-	for _, typeable := range typeables {
-		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
-	}
-
-	return resources
-}
-
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
-	storableRole, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	objects := make([]*authtypes.Object, 0)
-	for _, resource := range provider.GetResources(ctx) {
-		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
-			resourceObjects, err := provider.
-				ListObjects(
-					ctx,
-					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.ID.String(), orgID, &authtypes.RelationAssignee),
-					relation,
-					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
-				)
-			if err != nil {
-				return nil, err
-			}
-
-			objects = append(objects, resourceObjects...)
-		}
-	}
-
-	return objects, nil
-}
-
-func (provider *provider) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	return provider.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
-}
-
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
 	if err != nil {
 		return err
 	}

-	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
+	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
 	if err != nil {
 		return err
 	}

-	err = provider.Write(ctx, additionTuples, deletionTuples)
+	err = provider.BatchCheck(ctx, tuples)
 	if err != nil {
 		return err
 	}
@@ -246,95 +66,33 @@ func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, n
 	return nil
 }

-func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	storableRole, err := provider.store.Get(ctx, orgID, id)
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}

-	role := roletypes.NewRoleFromStorableRole(storableRole)
-	err = role.CanEditDelete()
+	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
 	if err != nil {
 		return err
 	}

-	return provider.store.Delete(ctx, orgID, id)
-}
-
-func (provider *provider) MustGetTypeables() []authtypes.Typeable {
-	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
-}
-
-func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	tuples := []*openfgav1.TupleKey{}
-
-	// Grant the admin role to the user
-	adminSubject := authtypes.MustNewSubject(authtypes.TypeableUser, userID.String(), orgID, nil)
-	adminTuple, err := authtypes.TypeableRole.Tuples(
-		adminSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAdminRoleName),
-		},
-		orgID,
-	)
+	err = provider.BatchCheck(ctx, tuples)
 	if err != nil {
-		return nil, err
+		return err
 	}
-	tuples = append(tuples, adminTuple...)

-	// Grant the admin role to the anonymous user
-	anonymousSubject := authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	anonymousTuple, err := authtypes.TypeableRole.Tuples(
-		anonymousSubject,
-		authtypes.RelationAssignee,
-		[]authtypes.Selector{
-			authtypes.MustNewSelector(authtypes.TypeRole, roletypes.SigNozAnonymousRoleName),
-		},
-		orgID,
-	)
-	if err != nil {
-		return nil, err
-	}
-	tuples = append(tuples, anonymousTuple...)
-
-	return tuples, nil
+	return nil
 }

-func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	transactionsByRole := make(map[string][]*authtypes.Transaction)
-	for _, register := range provider.registry {
-		for roleName, txns := range register.MustGetManagedRoleTransactions() {
-			transactionsByRole[roleName] = append(transactionsByRole[roleName], txns...)
-		}
-	}
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for roleName, transactions := range transactionsByRole {
-		for _, txn := range transactions {
-			typeable := authtypes.MustNewTypeableFromType(txn.Object.Resource.Type, txn.Object.Resource.Name)
-			txnTuples, err := typeable.Tuples(
-				authtypes.MustNewSubject(
-					authtypes.TypeableRole,
-					roleName,
-					orgID,
-					&authtypes.RelationAssignee,
-				),
-				txn.Relation,
-				[]authtypes.Selector{txn.Object.Selector},
-				orgID,
-			)
-			if err != nil {
-				return nil, err
-			}
-			tuples = append(tuples, txnTuples...)
-		}
-	}
-
-	return tuples, nil
+func (provider *provider) BatchCheck(ctx context.Context, tuples []*openfgav1.TupleKey) error {
+	return provider.pkgAuthzService.BatchCheck(ctx, tuples)
+}
+
+func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
+	return provider.pkgAuthzService.ListObjects(ctx, subject, relation, typeable)
+}
+
+func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
+	return provider.pkgAuthzService.Write(ctx, additions, deletions)
 }
--- a/ee/authz/openfgaserver/server.go
+++ b/ee/authz/openfgaserver/server.go
@@ -1,83 +0,0 @@
-package openfgaserver
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	openfgav1 "github.com/openfga/api/proto/openfga/v1"
-)
-
-type Server struct {
-	pkgAuthzService authz.AuthZ
-}
-
-func NewOpenfgaServer(ctx context.Context, pkgAuthzService authz.AuthZ) (*Server, error) {
-
-	return &Server{
-		pkgAuthzService: pkgAuthzService,
-	}, nil
-}
-
-func (server *Server) Start(ctx context.Context) error {
-	return server.pkgAuthzService.Start(ctx)
-}
-
-func (server *Server) Stop(ctx context.Context) error {
-	return server.pkgAuthzService.Stop(ctx)
-}
-
-func (server *Server) Check(ctx context.Context, tuple *openfgav1.TupleKey) error {
-	return server.pkgAuthzService.Check(ctx, tuple)
-}
-
-func (server *Server) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
-	if err != nil {
-		return err
-	}
-
-	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
-
-	err = server.BatchCheck(ctx, tuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (server *Server) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
-	if err != nil {
-		return err
-	}
-
-	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
-	if err != nil {
-		return err
-	}
-
-	err = server.BatchCheck(ctx, tuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (server *Server) BatchCheck(ctx context.Context, tuples []*openfgav1.TupleKey) error {
-	return server.pkgAuthzService.BatchCheck(ctx, tuples)
-}
-
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, typeable authtypes.Typeable) ([]*authtypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, typeable)
-}
-
-func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
-	return server.pkgAuthzService.Write(ctx, additions, deletions)
-}
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -11,6 +11,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/role"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/types"
@@ -25,11 +26,13 @@ type module struct {
 	pkgDashboardModule dashboard.Module
 	store              dashboardtypes.Store
 	settings           factory.ScopedProviderSettings
+	roleSetter         role.Setter
+	granter            role.Granter
 	querier            querier.Querier
 	licensing          licensing.Licensing
 }

-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
 	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser)

@@ -37,6 +40,8 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		pkgDashboardModule: pkgDashboardModule,
 		store:              store,
 		settings:           scopedProviderSettings,
+		roleSetter:         roleSetter,
+		granter:            granter,
 		querier:            querier,
 		licensing:          licensing,
 	}
@@ -56,6 +61,29 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.Newf(errors.TypeAlreadyExists, dashboardtypes.ErrCodePublicDashboardAlreadyExists, "dashboard with id %s is already public", storablePublicDashboard.DashboardID)
 	}

+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
+	if err != nil {
+		return err
+	}
+
+	err = module.granter.Grant(ctx, orgID, roletypes.SigNozAnonymousRoleName, authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.StringValue(), orgID, nil))
+	if err != nil {
+		return err
+	}
+
+	additionObject := authtypes.MustNewObject(
+		authtypes.Resource{
+			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+			Type: authtypes.TypeMetaResource,
+		},
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
+	)
+
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, []*authtypes.Object{additionObject}, nil)
+	if err != nil {
+		return err
+	}
+
 	err = module.store.CreatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 	if err != nil {
 		return err
@@ -100,7 +128,6 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id

 	return []authtypes.Selector{
 		authtypes.MustNewSelector(authtypes.TypeMetaResource, id.StringValue()),
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, authtypes.WildCardSelectorString),
 	}, storableDashboard.OrgID, nil
 }

@@ -163,6 +190,29 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}

+	publicDashboard, err := module.GetPublic(ctx, orgID, dashboardID)
+	if err != nil {
+		return err
+	}
+
+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
+	if err != nil {
+		return err
+	}
+
+	deletionObject := authtypes.MustNewObject(
+		authtypes.Resource{
+			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+			Type: authtypes.TypeMetaResource,
+		},
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
+	)
+
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
+	if err != nil {
+		return err
+	}
+
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err
@@ -200,6 +250,10 @@ func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, m
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }

+func (module *module) MustGetTypeables() []authtypes.Typeable {
+	return module.pkgDashboardModule.MustGetTypeables()
+}
+
 func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.List(ctx, orgID)
 }
@@ -212,27 +266,34 @@ func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, role, lock)
 }

-func (module *module) MustGetTypeables() []authtypes.Typeable {
-	return module.pkgDashboardModule.MustGetTypeables()
-}
-
-func (module *module) MustGetManagedRoleTransactions() map[string][]*authtypes.Transaction {
-	return map[string][]*authtypes.Transaction{
-		roletypes.SigNozAnonymousRoleName: {
-			{
-				Relation: authtypes.RelationRead,
-				Object: *authtypes.MustNewObject(
-					authtypes.Resource{
-						Type: authtypes.TypeMetaResource,
-						Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-					},
-					authtypes.MustNewSelector(authtypes.TypeMetaResource, "*"),
-				),
-			},
-		},
+func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
+	publicDashboard, err := module.store.GetPublic(ctx, dashboardID.String())
+	if err != nil {
+		return err
 	}
-}

-func (module *module) deletePublic(ctx context.Context, _ valuer.UUID, dashboardID valuer.UUID) error {
-	return module.store.DeletePublic(ctx, dashboardID.StringValue())
+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
+	if err != nil {
+		return err
+	}
+
+	deletionObject := authtypes.MustNewObject(
+		authtypes.Resource{
+			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+			Type: authtypes.TypeMetaResource,
+		},
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
+	)
+
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
+	if err != nil {
+		return err
+	}
+
+	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
+	if err != nil {
+		return err
+	}
+
+	return nil
 }
--- a/ee/modules/role/implrole/setter.go
+++ b/ee/modules/role/implrole/setter.go
@@ -0,0 +1,165 @@
+package implrole
+
+import (
+	"context"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/role"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/roletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type setter struct {
+	store     roletypes.Store
+	authz     authz.AuthZ
+	licensing licensing.Licensing
+	registry  []role.RegisterTypeable
+}
+
+func NewSetter(store roletypes.Store, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
+	return &setter{
+		store:     store,
+		authz:     authz,
+		licensing: licensing,
+		registry:  registry,
+	}
+}
+
+func (setter *setter) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (setter *setter) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	existingRole, err := setter.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+	}
+
+	if existingRole != nil {
+		return roletypes.NewRoleFromStorableRole(existingRole), nil
+	}
+
+	err = setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+	if err != nil {
+		return nil, err
+	}
+
+	return role, nil
+}
+
+func (setter *setter) GetResources(_ context.Context) []*authtypes.Resource {
+	typeables := make([]authtypes.Typeable, 0)
+	for _, register := range setter.registry {
+		typeables = append(typeables, register.MustGetTypeables()...)
+	}
+	// role module cannot self register itself!
+	typeables = append(typeables, setter.MustGetTypeables()...)
+
+	resources := make([]*authtypes.Resource, 0)
+	for _, typeable := range typeables {
+		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
+	}
+
+	return resources
+}
+
+func (setter *setter) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+	storableRole, err := setter.store.Get(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	objects := make([]*authtypes.Object, 0)
+	for _, resource := range setter.GetResources(ctx) {
+		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
+			resourceObjects, err := setter.
+				authz.
+				ListObjects(
+					ctx,
+					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.ID.String(), orgID, &authtypes.RelationAssignee),
+					relation,
+					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
+				)
+			if err != nil {
+				return nil, err
+			}
+
+			objects = append(objects, resourceObjects...)
+		}
+	}
+
+	return objects, nil
+}
+
+func (setter *setter) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return setter.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (setter *setter) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
+	if err != nil {
+		return err
+	}
+
+	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
+	if err != nil {
+		return err
+	}
+
+	err = setter.authz.Write(ctx, additionTuples, deletionTuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (setter *setter) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableRole, err := setter.store.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	role := roletypes.NewRoleFromStorableRole(storableRole)
+	err = role.CanEditDelete()
+	if err != nil {
+		return err
+	}
+
+	return setter.store.Delete(ctx, orgID, id)
+}
+
+func (setter *setter) MustGetTypeables() []authtypes.Typeable {
+	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
+}
--- a/ee/query-service/app/api/api.go
+++ b/ee/query-service/app/api/api.go
@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
+	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
@@ -55,6 +56,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
+		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -211,7 +211,7 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {

 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
-	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz, s.signoz.Modules.RoleGetter)

 	r.Use(otelmux.Middleware(
 		"apiserver",
@@ -237,6 +237,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
+	apiHandler.RegisterFieldsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
--- a/ee/query-service/rules/anomaly.go
+++ b/ee/query-service/rules/anomaly.go
@@ -15,7 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/transition"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"

 	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
@@ -63,8 +63,6 @@ type AnomalyRule struct {
 	seasonality anomaly.Seasonality
 }

-var _ baserules.Rule = (*AnomalyRule)(nil)
-
 func NewAnomalyRule(
 	id string,
 	orgID valuer.UUID,
@@ -492,7 +490,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 			continue
 		}

-		if a.State == model.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration().Duration() {
+		if a.State == model.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration() {
 			a.State = model.StateFiring
 			a.FiredAt = ts
 			state := model.StateFiring
@@ -555,7 +553,7 @@ func (r *AnomalyRule) String() string {
 	ar := ruletypes.PostableRule{
 		AlertName:         r.Name(),
 		RuleCondition:     r.Condition(),
-		EvalWindow:        r.EvalWindow(),
+		EvalWindow:        ruletypes.Duration(r.EvalWindow()),
 		Labels:            r.Labels().Map(),
 		Annotations:       r.Annotations().Map(),
 		PreferredChannels: r.PreferredChannels(),
--- a/ee/query-service/rules/anomaly_test.go
+++ b/ee/query-service/rules/anomaly_test.go
@@ -40,7 +40,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 	// Test basic AlertOnAbsent functionality (without AbsentFor grace period)

 	baseTime := time.Unix(1700000000, 0)
-	evalWindow := valuer.MustParseTextDuration("5m")
+	evalWindow := 5 * time.Minute
 	evalTime := baseTime.Add(5 * time.Minute)

 	target := 500.0
@@ -50,8 +50,8 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
-			EvalWindow: evalWindow,
-			Frequency:  valuer.MustParseTextDuration("1m"),
+			EvalWindow: ruletypes.Duration(evalWindow),
+			Frequency:  ruletypes.Duration(1 * time.Minute),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
 			CompareOp: ruletypes.ValueIsAbove,
@@ -147,7 +147,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 	// 3. Alert fires only if t2 - t1 > AbsentFor

 	baseTime := time.Unix(1700000000, 0)
-	evalWindow := valuer.MustParseTextDuration("5m")
+	evalWindow := 5 * time.Minute

 	// Set target higher than test data so regular threshold alerts don't fire
 	target := 500.0
@@ -157,8 +157,8 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 		AlertType: ruletypes.AlertTypeMetric,
 		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
-			EvalWindow: evalWindow,
-			Frequency:  valuer.MustParseTextDuration("1m"),
+			EvalWindow: ruletypes.Duration(evalWindow),
+			Frequency:  ruletypes.Duration(time.Minute),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
 			CompareOp:     ruletypes.ValueIsAbove,
--- a/ee/query-service/rules/manager.go
+++ b/ee/query-service/rules/manager.go
@@ -48,7 +48,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)

 		// create ch rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {

@@ -72,7 +72,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)

 		// create promql rule task for evaluation
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -96,7 +96,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)

 		// create anomaly rule task for evaluation
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else {
 		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
@@ -213,7 +213,8 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 	return alertsFound, nil
 }

-// newTask returns an appropriate group for the rule type
+// newTask returns an appropriate group for
+// rule type
 func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, maintenanceStore ruletypes.MaintenanceStore, orgID valuer.UUID) baserules.Task {
 	if taskType == baserules.TaskTypeCh {
 		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, maintenanceStore, orgID)
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -61,8 +61,6 @@ module.exports = {
 		curly: 'error', // Requires curly braces for all control statements
 		eqeqeq: ['error', 'always', { null: 'ignore' }], // Enforces === and !== (allows == null for null/undefined check)
 		'no-console': ['error', { allow: ['warn', 'error'] }], // Warns on console.log, allows console.warn/error
-		// TODO: Change this to error in May 2026
-		'max-params': ['warn', 3], // a function can have max 3 params after which it should become an object

 		// TypeScript rules
 		'@typescript-eslint/explicit-function-return-type': 'error', // Requires explicit return types on functions
@@ -118,7 +116,7 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
-		'import/no-cycle': 'warn', // Warns about circular dependencies
+		// 'import/no-cycle': 'warn', // TODO: Enable later to detect circular dependencies

 		// Import sorting rules
 		'simple-import-sort/imports': [
@@ -148,19 +146,6 @@ module.exports = {
 		'sonarjs/no-duplicate-string': 'off', // Disabled - can be noisy (enable periodically to check)
 	},
 	overrides: [
-		{
-			files: [
-				'**/*.test.{js,jsx,ts,tsx}',
-				'**/*.spec.{js,jsx,ts,tsx}',
-				'**/__tests__/**/*.{js,jsx,ts,tsx}',
-			],
-			rules: {
-				// Tests often have intentional duplication and complexity - disable SonarJS rules
-				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
-				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
-				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
-			},
-		},
 		{
 			files: ['src/api/generated/**/*.ts'],
 			rules: {
@@ -168,6 +153,7 @@ module.exports = {
 				'@typescript-eslint/explicit-module-boundary-types': 'off',
 				'no-nested-ternary': 'off',
 				'@typescript-eslint/no-unused-vars': 'warn',
+				'sonarjs/no-duplicate-string': 'off',
 			},
 		},
 	],
--- a/frontend/CONTRIBUTIONS.md
+++ b/frontend/CONTRIBUTIONS.md
@@ -2,11 +2,6 @@

 Embrace the spirit of collaboration and contribute to the success of our open-source project by adhering to these frontend development guidelines with precision and passion.

-### Export Style
-
- **React components** (`src/components/`, `src/container/`, `src/pages/`): Prefer **default exports** for the main component in each file
- **Utilities, hooks, APIs, types, constants** (`src/utils/`, `src/hooks/`, `src/api/`, `src/lib/`, `src/types/`, `src/constants/`): Prefer **named exports** for better tree-shaking and explicit imports
-
 ### React and Components

 - Strive to create small and modular components, ensuring they are divided into individual pieces for improved maintainability and reusability.
--- a/frontend/src/api/generated/services/gateway/index.ts
+++ b/frontend/src/api/generated/services/gateway/index.ts
@@ -28,10 +28,8 @@ import type {
 	GatewaytypesPostableIngestionKeyLimitDTO,
 	GatewaytypesUpdatableIngestionKeyLimitDTO,
 	GetIngestionKeys200,
-	GetIngestionKeysParams,
 	RenderErrorResponseDTO,
 	SearchIngestionKeys200,
-	SearchIngestionKeysParams,
 	UpdateIngestionKeyLimitPathParameters,
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
@@ -44,44 +42,35 @@ type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 * This endpoint returns the ingestion keys for a workspace
 * @summary Get ingestion keys for workspace
 */
-export const getIngestionKeys = (
-	params?: GetIngestionKeysParams,
-	signal?: AbortSignal,
-) => {
+export const getIngestionKeys = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<GetIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };

-export const getGetIngestionKeysQueryKey = (
-	params?: GetIngestionKeysParams,
-) => {
-	return ['getIngestionKeys', ...(params ? [params] : [])] as const;
+export const getGetIngestionKeysQueryKey = () => {
+	return ['getIngestionKeys'] as const;
 };

 export const getGetIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(
-	params?: GetIngestionKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getIngestionKeys>>,
-			TError,
-			TData
-		>;
-	},
-) => {
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKeys>>,
+		TError,
+		TData
+	>;
+}) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey(params);
+	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey();

 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getIngestionKeys>>> = ({
 		signal,
-	}) => getIngestionKeys(params, signal);
+	}) => getIngestionKeys(signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionKeys>>,
@@ -102,17 +91,14 @@ export type GetIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useGetIngestionKeys<
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(
-	params?: GetIngestionKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getIngestionKeys>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetIngestionKeysQueryOptions(params, options);
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getIngestionKeys>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeysQueryOptions(options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -128,11 +114,10 @@ export function useGetIngestionKeys<
 */
 export const invalidateGetIngestionKeys = async (
 	queryClient: QueryClient,
-	params?: GetIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetIngestionKeysQueryKey(params) },
+		{ queryKey: getGetIngestionKeysQueryKey() },
 		options,
 	);

@@ -677,45 +662,35 @@ export const useUpdateIngestionKeyLimit = <
 * This endpoint returns the ingestion keys for a workspace
 * @summary Search ingestion keys for workspace
 */
-export const searchIngestionKeys = (
-	params?: SearchIngestionKeysParams,
-	signal?: AbortSignal,
-) => {
+export const searchIngestionKeys = (signal?: AbortSignal) => {
 	return GeneratedAPIInstance<SearchIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys/search`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };

-export const getSearchIngestionKeysQueryKey = (
-	params?: SearchIngestionKeysParams,
-) => {
-	return ['searchIngestionKeys', ...(params ? [params] : [])] as const;
+export const getSearchIngestionKeysQueryKey = () => {
+	return ['searchIngestionKeys'] as const;
 };

 export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(
-	params?: SearchIngestionKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof searchIngestionKeys>>,
-			TError,
-			TData
-		>;
-	},
-) => {
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof searchIngestionKeys>>,
+		TError,
+		TData
+	>;
+}) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey =
-		queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey(params);
+	const queryKey = queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey();

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof searchIngestionKeys>>
-	> = ({ signal }) => searchIngestionKeys(params, signal);
+	> = ({ signal }) => searchIngestionKeys(signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof searchIngestionKeys>>,
@@ -736,17 +711,14 @@ export type SearchIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(
-	params?: SearchIngestionKeysParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof searchIngestionKeys>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getSearchIngestionKeysQueryOptions(params, options);
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof searchIngestionKeys>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getSearchIngestionKeysQueryOptions(options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -762,11 +734,10 @@ export function useSearchIngestionKeys<
 */
 export const invalidateSearchIngestionKeys = async (
 	queryClient: QueryClient,
-	params?: SearchIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getSearchIngestionKeysQueryKey(params) },
+		{ queryKey: getSearchIngestionKeysQueryKey() },
 		options,
 	);

--- a/frontend/src/api/generated/services/metrics/index.ts
+++ b/frontend/src/api/generated/services/metrics/index.ts
@@ -47,7 +47,7 @@ type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 * @summary Get metric alerts
 */
 export const getMetricAlerts = (
-	params: GetMetricAlertsParams,
+	params?: GetMetricAlertsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricAlerts200>({
@@ -66,7 +66,7 @@ export const getGetMetricAlertsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricAlertsParams,
+	params?: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -103,7 +103,7 @@ export function useGetMetricAlerts<
 	TData = Awaited<ReturnType<typeof getMetricAlerts>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricAlertsParams,
+	params?: GetMetricAlertsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricAlerts>>,
@@ -128,7 +128,7 @@ export function useGetMetricAlerts<
 */
 export const invalidateGetMetricAlerts = async (
 	queryClient: QueryClient,
-	params: GetMetricAlertsParams,
+	params?: GetMetricAlertsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -144,7 +144,7 @@ export const invalidateGetMetricAlerts = async (
 * @summary Get metric dashboards
 */
 export const getMetricDashboards = (
-	params: GetMetricDashboardsParams,
+	params?: GetMetricDashboardsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricDashboards200>({
@@ -165,7 +165,7 @@ export const getGetMetricDashboardsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricDashboardsParams,
+	params?: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -203,7 +203,7 @@ export function useGetMetricDashboards<
 	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricDashboardsParams,
+	params?: GetMetricDashboardsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricDashboards>>,
@@ -228,7 +228,7 @@ export function useGetMetricDashboards<
 */
 export const invalidateGetMetricDashboards = async (
 	queryClient: QueryClient,
-	params: GetMetricDashboardsParams,
+	params?: GetMetricDashboardsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -244,7 +244,7 @@ export const invalidateGetMetricDashboards = async (
 * @summary Get metric highlights
 */
 export const getMetricHighlights = (
-	params: GetMetricHighlightsParams,
+	params?: GetMetricHighlightsParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricHighlights200>({
@@ -265,7 +265,7 @@ export const getGetMetricHighlightsQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricHighlightsParams,
+	params?: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -303,7 +303,7 @@ export function useGetMetricHighlights<
 	TData = Awaited<ReturnType<typeof getMetricHighlights>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricHighlightsParams,
+	params?: GetMetricHighlightsParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricHighlights>>,
@@ -328,7 +328,7 @@ export function useGetMetricHighlights<
 */
 export const invalidateGetMetricHighlights = async (
 	queryClient: QueryClient,
-	params: GetMetricHighlightsParams,
+	params?: GetMetricHighlightsParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
@@ -526,7 +526,7 @@ export const useGetMetricAttributes = <
 * @summary Get metric metadata
 */
 export const getMetricMetadata = (
-	params: GetMetricMetadataParams,
+	params?: GetMetricMetadataParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetMetricMetadata200>({
@@ -547,7 +547,7 @@ export const getGetMetricMetadataQueryOptions = <
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricMetadataParams,
+	params?: GetMetricMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricMetadata>>,
@@ -585,7 +585,7 @@ export function useGetMetricMetadata<
 	TData = Awaited<ReturnType<typeof getMetricMetadata>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: GetMetricMetadataParams,
+	params?: GetMetricMetadataParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getMetricMetadata>>,
@@ -610,7 +610,7 @@ export function useGetMetricMetadata<
 */
 export const invalidateGetMetricMetadata = async (
 	queryClient: QueryClient,
-	params: GetMetricMetadataParams,
+	params?: GetMetricMetadataParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -650,11 +650,11 @@ export interface MetricsexplorertypesMetricAlertDTO {
 	/**
 	 * @type string
 	 */
-	alertId: string;
+	alertId?: string;
 	/**
 	 * @type string
 	 */
-	alertName: string;
+	alertName?: string;
 }

 export interface MetricsexplorertypesMetricAlertsResponseDTO {
@@ -662,24 +662,24 @@ export interface MetricsexplorertypesMetricAlertsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	alerts: MetricsexplorertypesMetricAlertDTO[] | null;
+	alerts?: MetricsexplorertypesMetricAlertDTO[] | null;
 }

 export interface MetricsexplorertypesMetricAttributeDTO {
 	/**
 	 * @type string
 	 */
-	key: string;
+	key?: string;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	valueCount: number;
+	valueCount?: number;
 	/**
 	 * @type array
 	 * @nullable true
 	 */
-	values: string[] | null;
+	values?: string[] | null;
 }

 export interface MetricsexplorertypesMetricAttributesRequestDTO {
@@ -691,7 +691,7 @@ export interface MetricsexplorertypesMetricAttributesRequestDTO {
 	/**
 	 * @type string
 	 */
-	metricName: string;
+	metricName?: string;
 	/**
 	 * @type integer
 	 * @nullable true
@@ -704,31 +704,31 @@ export interface MetricsexplorertypesMetricAttributesResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	attributes: MetricsexplorertypesMetricAttributeDTO[] | null;
+	attributes?: MetricsexplorertypesMetricAttributeDTO[] | null;
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	totalKeys: number;
+	totalKeys?: number;
 }

 export interface MetricsexplorertypesMetricDashboardDTO {
 	/**
 	 * @type string
 	 */
-	dashboardId: string;
+	dashboardId?: string;
 	/**
 	 * @type string
 	 */
-	dashboardName: string;
+	dashboardName?: string;
 	/**
 	 * @type string
 	 */
-	widgetId: string;
+	widgetId?: string;
 	/**
 	 * @type string
 	 */
-	widgetName: string;
+	widgetName?: string;
 }

 export interface MetricsexplorertypesMetricDashboardsResponseDTO {
@@ -736,7 +736,7 @@ export interface MetricsexplorertypesMetricDashboardsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	dashboards: MetricsexplorertypesMetricDashboardDTO[] | null;
+	dashboards?: MetricsexplorertypesMetricDashboardDTO[] | null;
 }

 export interface MetricsexplorertypesMetricHighlightsResponseDTO {
@@ -744,65 +744,74 @@ export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	activeTimeSeries: number;
+	activeTimeSeries?: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	dataPoints: number;
+	dataPoints?: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	lastReceived: number;
+	lastReceived?: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	totalTimeSeries: number;
+	totalTimeSeries?: number;
 }

 export interface MetricsexplorertypesMetricMetadataDTO {
 	/**
 	 * @type string
 	 */
-	description: string;
+	description?: string;
 	/**
 	 * @type boolean
 	 */
-	isMonotonic: boolean;
-	temporality: MetrictypesTemporalityDTO;
-	type: MetrictypesTypeDTO;
+	isMonotonic?: boolean;
 	/**
 	 * @type string
 	 */
-	unit: string;
+	temporality?: string;
+	/**
+	 * @type string
+	 */
+	type?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
 }

 export interface MetricsexplorertypesStatDTO {
 	/**
 	 * @type string
 	 */
-	description: string;
+	description?: string;
 	/**
 	 * @type string
 	 */
-	metricName: string;
+	metricName?: string;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	samples: number;
+	samples?: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	timeseries: number;
-	type: MetrictypesTypeDTO;
+	timeseries?: number;
 	/**
 	 * @type string
 	 */
-	unit: string;
+	type?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
 }

 export interface MetricsexplorertypesStatsRequestDTO {
@@ -810,12 +819,12 @@ export interface MetricsexplorertypesStatsRequestDTO {
 	 * @type integer
 	 * @format int64
 	 */
-	end: number;
+	end?: number;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
 	 * @type integer
 	 */
-	limit: number;
+	limit?: number;
 	/**
 	 * @type integer
 	 */
@@ -825,7 +834,7 @@ export interface MetricsexplorertypesStatsRequestDTO {
 	 * @type integer
 	 * @format int64
 	 */
-	start: number;
+	start?: number;
 }

 export interface MetricsexplorertypesStatsResponseDTO {
@@ -833,52 +842,51 @@ export interface MetricsexplorertypesStatsResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	metrics: MetricsexplorertypesStatDTO[] | null;
+	metrics?: MetricsexplorertypesStatDTO[] | null;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	total: number;
+	total?: number;
 }

 export interface MetricsexplorertypesTreemapEntryDTO {
 	/**
 	 * @type string
 	 */
-	metricName: string;
+	metricName?: string;
 	/**
 	 * @type number
 	 * @format double
 	 */
-	percentage: number;
+	percentage?: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
-	totalValue: number;
+	totalValue?: number;
 }

-export enum MetricsexplorertypesTreemapModeDTO {
-	timeseries = 'timeseries',
-	samples = 'samples',
-}
 export interface MetricsexplorertypesTreemapRequestDTO {
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	end: number;
+	end?: number;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
 	 * @type integer
 	 */
-	limit: number;
-	mode: MetricsexplorertypesTreemapModeDTO;
+	limit?: number;
+	/**
+	 * @type string
+	 */
+	mode?: string;
 	/**
 	 * @type integer
 	 * @format int64
 	 */
-	start: number;
+	start?: number;
 }

 export interface MetricsexplorertypesTreemapResponseDTO {
@@ -886,47 +894,41 @@ export interface MetricsexplorertypesTreemapResponseDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	samples: MetricsexplorertypesTreemapEntryDTO[] | null;
+	samples?: MetricsexplorertypesTreemapEntryDTO[] | null;
 	/**
 	 * @type array
 	 * @nullable true
 	 */
-	timeseries: MetricsexplorertypesTreemapEntryDTO[] | null;
+	timeseries?: MetricsexplorertypesTreemapEntryDTO[] | null;
 }

 export interface MetricsexplorertypesUpdateMetricMetadataRequestDTO {
 	/**
 	 * @type string
 	 */
-	description: string;
+	description?: string;
 	/**
 	 * @type boolean
 	 */
-	isMonotonic: boolean;
+	isMonotonic?: boolean;
 	/**
 	 * @type string
 	 */
-	metricName: string;
-	temporality: MetrictypesTemporalityDTO;
-	type: MetrictypesTypeDTO;
+	metricName?: string;
 	/**
 	 * @type string
 	 */
-	unit: string;
+	temporality?: string;
+	/**
+	 * @type string
+	 */
+	type?: string;
+	/**
+	 * @type string
+	 */
+	unit?: string;
 }

-export enum MetrictypesTemporalityDTO {
-	delta = 'delta',
-	cumulative = 'cumulative',
-	unspecified = 'unspecified',
-}
-export enum MetrictypesTypeDTO {
-	gauge = 'gauge',
-	sum = 'sum',
-	histogram = 'histogram',
-	summary = 'summary',
-	exponentialhistogram = 'exponentialhistogram',
-}
 export interface PreferencetypesPreferenceDTO {
 	/**
 	 * @type array
@@ -1345,7 +1347,7 @@ export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
 	 */
-	email: string;
+	email?: string;
 	/**
 	 * @type string
 	 */
@@ -1353,7 +1355,7 @@ export interface TypesPostableForgotPasswordDTO {
 	/**
 	 * @type string
 	 */
-	orgId: string;
+	orgId?: string;
 }

 export interface TypesPostableInviteDTO {
@@ -1849,19 +1851,6 @@ export type GetFeatures200 = {
 	status?: string;
 };

-export type GetIngestionKeysParams = {
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	page?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	per_page?: number;
-};
-
 export type GetIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
@@ -1901,24 +1890,6 @@ export type DeleteIngestionKeyLimitPathParameters = {
 export type UpdateIngestionKeyLimitPathParameters = {
 	limitId: string;
 };
-export type SearchIngestionKeysParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	name?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	page?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	per_page?: number;
-};
-
 export type SearchIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
@@ -1932,7 +1903,7 @@ export type GetMetricAlertsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName: string;
+	metricName?: string;
 };

 export type GetMetricAlerts200 = {
@@ -1948,7 +1919,7 @@ export type GetMetricDashboardsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName: string;
+	metricName?: string;
 };

 export type GetMetricDashboards200 = {
@@ -1964,7 +1935,7 @@ export type GetMetricHighlightsParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName: string;
+	metricName?: string;
 };

 export type GetMetricHighlights200 = {
@@ -1991,7 +1962,7 @@ export type GetMetricMetadataParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	metricName: string;
+	metricName?: string;
 };

 export type GetMetricMetadata200 = {
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -140,7 +140,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	}, [selectedValues, allAvailableValues, enableAllSelection]);

 	// Define allOptionShown earlier in the code
-	const allOptionShown = value === ALL_SELECTED_VALUE;
+	const allOptionShown = useMemo(
+		() => value === ALL_SELECTED_VALUE || value === 'ALL',
+		[value],
+	);

 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
@@ -11,14 +11,9 @@ import {
 	IBuilderQuery,
 	Query,
 } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryFunction } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { UseQueryOperations } from 'types/common/operations.types';
-import {
-	DataSource,
-	QueryBuilderContextType,
-	QueryFunctionsTypes,
-} from 'types/common/queryBuilder';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';

 import '@testing-library/jest-dom';

@@ -50,17 +45,12 @@ const mockedUseQueryOperations = jest.mocked(

 describe('QueryBuilderV2 + QueryV2 - base render', () => {
 	let handleRunQueryMock: jest.MockedFunction<() => void>;
-	let handleQueryFunctionsUpdatesMock: jest.MockedFunction<() => void>;
-	let baseQBContext: QueryBuilderContextType;

 	beforeEach(() => {
 		const mockCloneQuery = jest.fn() as jest.MockedFunction<
 			(type: string, q: IBuilderQuery) => void
 		>;
 		handleRunQueryMock = jest.fn() as jest.MockedFunction<() => void>;
-		handleQueryFunctionsUpdatesMock = jest.fn() as jest.MockedFunction<
-			() => void
-		>;
 		const baseQuery: IBuilderQuery = {
 			queryName: 'A',
 			dataSource: DataSource.LOGS,
@@ -101,7 +91,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		const updateQueriesData: QueryBuilderContextType['updateQueriesData'] = (q) =>
 			q;

-		const baseContext = ({
+		mockedUseQueryBuilder.mockReturnValue(({
 			currentQuery: currentQueryObj,
 			stagedQuery: null,
 			lastUsedQuery: null,
@@ -134,10 +124,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			initQueryBuilderData: jest.fn(),
 			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
-		} as unknown) as QueryBuilderContextType;
-
-		baseQBContext = baseContext;
-		mockedUseQueryBuilder.mockReturnValue(baseQBContext);
+		} as unknown) as QueryBuilderContextType);

 		mockedUseQueryOperations.mockReturnValue({
 			isTracePanelType: false,
@@ -152,7 +139,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			handleDeleteQuery: jest.fn(),
 			handleChangeQueryData: (jest.fn() as unknown) as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
-			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
+			handleQueryFunctionsUpdates: jest.fn(),
 			listOfAdditionalFormulaFilters: [],
 		});
 	});
@@ -212,56 +199,4 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {

 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
-
-	it('fx button is disabled when functions already exist', () => {
-		const currentQueryBase = baseQBContext.currentQuery as Query;
-		const supersetQueryBase = baseQBContext.supersetQuery as Query;
-
-		mockedUseQueryBuilder.mockReturnValueOnce({
-			...baseQBContext,
-			currentQuery: {
-				...currentQueryBase,
-				builder: {
-					...currentQueryBase.builder,
-					queryData: [
-						{
-							...currentQueryBase.builder.queryData[0],
-							functions: [
-								{ name: QueryFunctionsTypes.TIME_SHIFT, args: [] } as QueryFunction,
-							],
-						},
-					],
-				},
-			},
-			supersetQuery: {
-				...supersetQueryBase,
-				builder: {
-					...supersetQueryBase.builder,
-					queryData: [
-						{
-							...supersetQueryBase.builder.queryData[0],
-							functions: [
-								{ name: QueryFunctionsTypes.TIME_SHIFT, args: [] } as QueryFunction,
-							],
-						},
-					],
-				},
-			},
-		});
-
-		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
-
-		const fxButton = document.querySelector('.function-btn') as HTMLButtonElement;
-		expect(fxButton).toBeInTheDocument();
-		expect(fxButton).toBeDisabled();
-
-		const deleteButton = document.querySelector(
-			'.query-function-delete-btn',
-		) as HTMLButtonElement;
-		expect(deleteButton).toBeInTheDocument();
-		userEvent.click(deleteButton);
-		waitFor(() => {
-			expect(fxButton).not.toBeDisabled();
-		});
-	});
 });
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -34,230 +34,159 @@ const themeColors = {
 		cyan: '#00FFFF',
 	},
 	chartcolors: {
-		// Blues (3)
-		dodgerBlue: '#2F80ED',
-		royalBlue: '#3366E6',
-		steelBlue: '#4682B4',
-
-		// Teals / Cyans (3)
-		turquoise: '#00CEC9',
-		lagoon: '#1ABC9C',
-		cyanBright: '#22A6F2',
-
-		// Greens (3)
-		emeraldGreen: '#27AE60',
-		mediumSeaGreen: '#3CB371',
-		limeGreen: '#A3E635',
-
-		// Yellows / Golds (3)
-		festivalYellow: '#F2C94C',
-		sunflower: '#FFD93D',
-		warmAmber: '#FFCA28',
-
-		// Oranges (3)
-		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
-		pumpkin: '#FF7F50',
-
-		// Reds (3)
 		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
-
-		// Pinks (3)
-		hotPink: '#E84393',
-		rosePink: '#FD79A8',
-		blush: '#FF7EB6',
-
-		// Purples / Violets (3)
-		mediumPurple: '#BB6BD9',
-		royalPurple: '#9B51E0',
-		orchid: '#DA77F2',
-
-		// Accent / Neon / Unique Colors (3)
-		neonViolet: '#C77DFF',
-		electricPurple: '#6C5CE7',
-		arcticBlue: '#48DBFB',
-
-		// Extended palette — systematic variations to reach 100 colors
-		blue1: '#1F63E0',
-		blue2: '#3A7AED',
-		blue3: '#5A9DF5',
-		cyan1: '#00B0AA',
-		cyan2: '#33D6C2',
-		cyan3: '#66E9DA',
-		green1: '#1E8449',
-		green2: '#2ECC71',
-		green3: '#58D68D',
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		orange1: '#D35400',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
-		pink1: '#D81B60',
-		pink2: '#E91E63',
-		pink3: '#F06292',
-		purple1: '#8E44AD',
-		purple2: '#9B59B6',
-		purple3: '#BB8FCE',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#D4FFB0',
-		gold1: '#F39C12',
-		gold2: '#F1C40F',
-		gold3: '#F7DC6F',
-		coral1: '#E67E22',
-		coral2: '#F39C12',
-		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
-		violet1: '#8E44AD',
-		violet2: '#9B59B6',
-		violet3: '#BB8FCE',
-		aqua1: '#00BFFF',
-		aqua2: '#1E90FF',
-		aqua3: '#63B8FF',
-		forest1: '#27AE60',
-		forest2: '#2ECC71',
-		forest3: '#58D68D',
-		blush1: '#FF6F91',
-		blush2: '#FF85A2',
-		blush3: '#FFA0B3',
-		lavender1: '#9B59B6',
-		lavender2: '#AF7AC5',
-		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
-		mustard1: '#F1C40F',
-		mustard2: '#F7DC6F',
-		mustard3: '#F9E79F',
-		teal4: '#1ABC9C',
-		teal5: '#48C9B0',
-		teal6: '#76D7C4',
-		magenta1: '#D6336C',
-		magenta2: '#E84393',
-		magenta3: '#F06292',
-		violet4: '#7D3C98',
-		violet5: '#8E44AD',
-		violet6: '#9B59B6',
-		green4: '#229954',
-		green5: '#27AE60',
-		green6: '#52BE80',
-		blue4: '#2874A6',
-		blue5: '#2E86C1',
-		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
-		orange4: '#D35400',
-		orange5: '#E67E22',
-		orange6: '#EB984E',
-		pink4: '#C2185B',
-		pink5: '#D81B60',
-		pink6: '#E91E63',
-		gold4: '#B7950B',
-		gold5: '#F1C40F',
-		gold6: '#F4D03F',
+		dodgerBlue: '#2F80ED',
+		mediumOrchid: '#BB6BD9',
+		seaBuckthorn: '#F2994A',
+		seaGreen: '#219653',
+		turquoiseBlue: '#56CCF2',
+		festivalOrange: '#F2C94C',
+		silver: '#BDBDBD',
+		outrageousOrange: '#FF6633',
+		roseBud: '#FFB399',
+		canary: '#FFFF99',
+		deepSkyBlue: '#00B3E6',
+		goldTips: '#E6B333',
+		royalBlue: '#3366E6',
+		avocado: '#999966',
+		mintGreen: '#99FF99',
+		chestnut: '#B34D4D',
+		lima: '#80B300',
+		olive: '#809900',
+		beautyBush: '#E6B3B3',
+		danube: '#6680B3',
+		oliveDrab: '#66991A',
+		lavenderRose: '#FF99E6',
+		electricLime: '#CCFF1A',
+		robin: '#3F5ECC',
+		harleyOrange: '#E6331A',
+		turquoise: '#33FFCC',
+		gladeGreen: '#66994D',
+		hemlock: '#66664D',
+		vidaLoca: '#4D8000',
+		rust: '#B33300',
+		red: '#FF0000', // Adding more colors, we need to get better colors from design team
+		blue: '#0000FF',
+		green: '#00FF00',
+		yellow: '#FFFF00',
+		purple: '#800080',
+		cyan: '#00FFFF',
+		magenta: '#FF00FF',
+		orange: '#FFA500',
+		pink: '#FFC0CB',
+		brown: '#A52A2A',
+		teal: '#008080',
+		lime: '#00FF00',
+		maroon: '#800000',
+		navy: '#000080',
+		aquamarine: '#7FFFD4',
+		darkSeaGreen: '#8FBC8F',
+		gray: '#808080',
+		skyBlue: '#87CEEB',
+		indigo: '#4B0082',
+		slateGray: '#708090',
+		chocolate: '#D2691E',
+		tomato: '#FF6347',
+		steelBlue: '#4682B4',
+		peru: '#CD853F',
+		darkOliveGreen: '#556B2F',
+		indianRed: '#CD5C5C',
+		mediumSlateBlue: '#7B68EE',
+		rosyBrown: '#BC8F8F',
+		darkSlateGray: '#2F4F4F',
+		mediumAquamarine: '#66CDAA',
+		lavender: '#E6E6FA',
+		thistle: '#D8BFD8',
+		salmon: '#FA8072',
+		darkSalmon: '#E9967A',
+		paleVioletRed: '#DB7093',
+		mediumPurple: '#9370DB',
+		darkOrchid: '#9932CC',
+		lawnGreen: '#7CFC00',
+		mediumSeaGreen: '#3CB371',
+		lightCoral: '#F08080',
+		gold: '#FFD700',
+		sandyBrown: '#F4A460',
+		darkKhaki: '#BDB76B',
+		cornflowerBlue: '#6495ED',
+		mediumVioletRed: '#C71585',
+		paleGreen: '#98FB98',
 	},
 	lightModeColor: {
-		radicalRed: '#D81B60',
-
-		dodgerBlueDark: '#1E5BD9',
-		steelgrey: '#344B6B',
-		steelpurple: '#5E548E',
-		steelindigo: '#8E4A7C',
-		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
-		steelorange: '#E76F2F',
-		steelgold: '#E09B00',
-		steelrust: '#C93A50',
-		steelgreen: '#2F7D69',
-
-		mediumOrchidDark: '#8E24AA',
-		seaBuckthornDark: '#C75A00',
-		seaGreen: '#1E7F5A',
-		turquoiseBlueDark: '#007EA7',
-		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
-		deepSkyBlueDark: '#0277BD',
-		royalBlue: '#2A4FDB',
-
-		avocadoDark: '#6B6B1E',
-		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
-		limaDark: '#5C7F00',
-		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
-
-		danube: '#4F6FB3',
-		oliveDrab: '#4F7F1A',
-		lavenderRoseDark: '#B0178F',
-		electricLimeDark: '#6B8F00',
-		robin: '#2F4FCC',
-
-		harleyOrange: '#CC2E12',
-		gladeGreen: '#4F7F46',
-		hemlock: '#5C5C45',
-		vidaLoca: '#3D6B00',
-		rust: '#993300',
-
-		red: '#C62828',
-		blue: '#1A237E',
-		green: '#1B7F3A',
-		purple: '#6A1B9A',
-		magentaDark: '#B000B5',
-		pinkDark: '#C2185B',
-
-		brown: '#7A3A1E',
-		teal: '#006D6F',
-		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
-		navy: '#0D1B5E',
-		gray: '#616161',
-
-		skyBlueDark: '#0288D1',
-		indigo: '#303F9F',
-		slateGray: '#556B7C',
-		chocolate: '#9C4A1A',
-		tomato: '#E53935',
-		steelBlue: '#3A6EA5',
-
-		peruDark: '#B35E00',
-		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
-		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
-		darkSlateGray: '#2E4A4A',
-
-		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
-		paleVioletRedDark: '#C2186A',
-
-		mediumPurple: '#7E57C2',
-		darkOrchid: '#7B1FA2',
-		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
-
-		gold: '#D4AF37',
-		sandyBrownDark: '#C76A15',
-		darkKhakiDark: '#8A7F00',
-		cornflowerBlueDark: '#355FCC',
-		mediumVioletRed: '#AD1457',
-		paleGreenDark: '#2E7D32',
+		radicalRed: '#FF1A66',
+		dodgerBlueDark: '#0C6EED',
+		steelgrey: '#2f4b7c',
+		steelpurple: '#665191',
+		steelindigo: '#a05195',
+		steelpink: '#d45087',
+		steelcoral: '#f95d6a',
+		steelorange: '#ff7c43',
+		steelgold: '#ffa600',
+		steelrust: '#de425b',
+		steelgreen: '#41967e',
+		mediumOrchidDark: '#C326FD',
+		seaBuckthornDark: '#E66E05',
+		seaGreen: '#219653',
+		turquoiseBlueDark: '#0099CC',
+		silverDark: '#757575',
+		outrageousOrangeDark: '#F9521A',
+		roseBudDark: '#EB6437',
+		deepSkyBlueDark: '#0595BD',
+		royalBlue: '#3366E6',
+		avocadoDark: '#8E8E29',
+		mintGreenDark: '#00C700',
+		chestnut: '#B34D4D',
+		limaDark: '#6E9900',
+		olive: '#809900',
+		beautyBushDark: '#E25555',
+		danube: '#6680B3',
+		oliveDrab: '#66991A',
+		lavenderRoseDark: '#F024BD',
+		electricLimeDark: '#84A800',
+		robin: '#3F5ECC',
+		harleyOrange: '#E6331A',
+		gladeGreen: '#66994D',
+		hemlock: '#66664D',
+		vidaLoca: '#4D8000',
+		rust: '#B33300',
+		red: '#FF0000', // Adding more colors, we need to get better colors from design team
+		blue: '#0000FF',
+		green: '#00FF00',
+		purple: '#800080',
+		magentaDark: '#EB00EB',
+		pinkDark: '#FF3D5E',
+		brown: '#A52A2A',
+		teal: '#008080',
+		limeDark: '#07A207',
+		maroon: '#800000',
+		navy: '#000080',
+		gray: '#808080',
+		skyBlueDark: '#0CA7E4',
+		indigo: '#4B0082',
+		slateGray: '#708090',
+		chocolate: '#D2691E',
+		tomato: '#FF6347',
+		steelBlue: '#4682B4',
+		peruDark: '#D16E0A',
+		darkOliveGreen: '#556B2F',
+		indianRed: '#CD5C5C',
+		mediumSlateBlue: '#7B68EE',
+		rosyBrownDark: '#CB4848',
+		darkSlateGray: '#2F4F4F',
+		fuchsia: '#FF0AFF',
+		salmonDark: '#FF432E',
+		darkSalmonDark: '#D26541',
+		paleVioletRedDark: '#E83089',
+		mediumPurple: '#9370DB',
+		darkOrchid: '#9932CC',
+		mediumSeaGreenDark: '#109E50',
+		lightCoralDark: '#F85959',
+		gold: '#FFD700',
+		sandyBrownDark: '#D97117',
+		darkKhakiDark: '#99900A',
+		cornflowerBlueDark: '#3371E6',
+		mediumVioletRed: '#C71585',
+		paleGreenDark: '#0D910D',
 	},
 	errorColor: '#d32f2f',
 	royalGrey: '#888888',
--- a/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
+++ b/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
@@ -338,7 +338,7 @@ describe('CreateAlertV2 utils', () => {
 			const props = getCreateAlertLocalStateFromAlertDef(args);
 			expect(props).toBeDefined();
 			expect(props).toMatchObject({
-				basic: {
+				basicAlertState: {
 					...INITIAL_ALERT_STATE,
 					name: 'test-alert',
 					labels: {
@@ -348,10 +348,10 @@ describe('CreateAlertV2 utils', () => {
 					yAxisUnit: UniversalYAxisUnit.MINUTES,
 				},
 				// as we have already verified these utils in their respective tests
-				threshold: expect.any(Object),
-				advancedOptions: expect.any(Object),
-				evaluationWindow: expect.any(Object),
-				notificationSettings: expect.any(Object),
+				thresholdState: expect.any(Object),
+				advancedOptionsState: expect.any(Object),
+				evaluationWindowState: expect.any(Object),
+				notificationSettingsState: expect.any(Object),
 			});
 		});
 	});
--- a/frontend/src/container/CreateAlertV2/context/constants.ts
+++ b/frontend/src/container/CreateAlertV2/context/constants.ts
@@ -196,11 +196,3 @@ export const INITIAL_NOTIFICATION_SETTINGS_STATE: NotificationSettingsState = {
 	description: NOTIFICATION_MESSAGE_PLACEHOLDER,
 	routingPolicies: false,
 };
-
-export const INITIAL_CREATE_ALERT_STATE = {
-	basic: INITIAL_ALERT_STATE,
-	threshold: INITIAL_ALERT_THRESHOLD_STATE,
-	advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
-	evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
-	notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
-};
--- a/frontend/src/container/CreateAlertV2/context/index.tsx
+++ b/frontend/src/container/CreateAlertV2/context/index.tsx
@@ -17,22 +17,26 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AlertTypes } from 'types/api/alerts/alertTypes';

-import { INITIAL_CREATE_ALERT_STATE } from './constants';
 import {
-	AdvancedOptionsAction,
-	AlertThresholdAction,
+	INITIAL_ADVANCED_OPTIONS_STATE,
+	INITIAL_ALERT_STATE,
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_EVALUATION_WINDOW_STATE,
+	INITIAL_NOTIFICATION_SETTINGS_STATE,
+} from './constants';
+import {
 	AlertThresholdMatchType,
-	CreateAlertAction,
-	CreateAlertSlice,
-	EvaluationWindowAction,
 	ICreateAlertContextProps,
 	ICreateAlertProviderProps,
-	NotificationSettingsAction,
 } from './types';
 import {
+	advancedOptionsReducer,
+	alertCreationReducer,
+	alertThresholdReducer,
 	buildInitialAlertDef,
-	createAlertReducer,
+	evaluationWindowReducer,
 	getInitialAlertTypeFromURL,
+	notificationSettingsReducer,
 } from './utils';

 const CreateAlertContext = createContext<ICreateAlertContextProps | null>(null);
@@ -61,65 +65,10 @@ export function CreateAlertProvider(

 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();

-	const [createAlertState, setCreateAlertState] = useReducer(
-		createAlertReducer,
-		{
-			...INITIAL_CREATE_ALERT_STATE,
-			basic: {
-				...INITIAL_CREATE_ALERT_STATE.basic,
-				yAxisUnit: currentQuery.unit,
-			},
-		},
-	);
-
-	const setAlertState = useCallback(
-		(action: CreateAlertAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.BASIC,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setThresholdState = useCallback(
-		(action: AlertThresholdAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setEvaluationWindow = useCallback(
-		(action: EvaluationWindowAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.EVALUATION_WINDOW,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setAdvancedOptions = useCallback(
-		(action: AdvancedOptionsAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.ADVANCED_OPTIONS,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-	const setNotificationSettings = useCallback(
-		(action: NotificationSettingsAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.NOTIFICATION_SETTINGS,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
+	const [alertState, setAlertState] = useReducer(alertCreationReducer, {
+		...INITIAL_ALERT_STATE,
+		yAxisUnit: currentQuery.unit,
+	});

 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
@@ -155,56 +104,92 @@ export function CreateAlertProvider(
 		[redirectWithQueryBuilderData],
 	);

+	const [thresholdState, setThresholdState] = useReducer(
+		alertThresholdReducer,
+		INITIAL_ALERT_THRESHOLD_STATE,
+	);
+
+	const [evaluationWindow, setEvaluationWindow] = useReducer(
+		evaluationWindowReducer,
+		INITIAL_EVALUATION_WINDOW_STATE,
+	);
+
+	const [advancedOptions, setAdvancedOptions] = useReducer(
+		advancedOptionsReducer,
+		INITIAL_ADVANCED_OPTIONS_STATE,
+	);
+
+	const [notificationSettings, setNotificationSettings] = useReducer(
+		notificationSettingsReducer,
+		INITIAL_NOTIFICATION_SETTINGS_STATE,
+	);
+
 	useEffect(() => {
-		setCreateAlertState({
-			slice: CreateAlertSlice.THRESHOLD,
-			action: {
-				type: 'RESET',
-			},
+		setThresholdState({
+			type: 'RESET',
 		});

 		if (thresholdsFromURL) {
 			try {
 				const thresholds = JSON.parse(thresholdsFromURL);
-				setCreateAlertState({
-					slice: CreateAlertSlice.THRESHOLD,
-					action: {
-						type: 'SET_THRESHOLDS',
-						payload: thresholds,
-					},
+				setThresholdState({
+					type: 'SET_THRESHOLDS',
+					payload: thresholds,
 				});
 			} catch (error) {
 				console.error('Error parsing thresholds from URL:', error);
 			}

-			setCreateAlertState({
-				slice: CreateAlertSlice.EVALUATION_WINDOW,
-				action: {
-					type: 'SET_INITIAL_STATE_FOR_METER',
-				},
+			setEvaluationWindow({
+				type: 'SET_INITIAL_STATE_FOR_METER',
 			});

-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_MATCH_TYPE',
-					payload: AlertThresholdMatchType.IN_TOTAL,
-				},
+			setThresholdState({
+				type: 'SET_MATCH_TYPE',
+				payload: AlertThresholdMatchType.IN_TOTAL,
 			});
 		}
 	}, [alertType, thresholdsFromURL]);

 	useEffect(() => {
 		if (isEditMode && initialAlertState) {
-			setCreateAlertState({
+			setAlertState({
 				type: 'SET_INITIAL_STATE',
-				payload: initialAlertState,
+				payload: initialAlertState.basicAlertState,
+			});
+			setThresholdState({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.thresholdState,
+			});
+			setEvaluationWindow({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.evaluationWindowState,
+			});
+			setAdvancedOptions({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.advancedOptionsState,
+			});
+			setNotificationSettings({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.notificationSettingsState,
 			});
 		}
 	}, [initialAlertState, isEditMode]);

 	const discardAlertRule = useCallback(() => {
-		setCreateAlertState({
+		setAlertState({
+			type: 'RESET',
+		});
+		setThresholdState({
+			type: 'RESET',
+		});
+		setEvaluationWindow({
+			type: 'RESET',
+		});
+		setAdvancedOptions({
+			type: 'RESET',
+		});
+		setNotificationSettings({
 			type: 'RESET',
 		});
 		handleAlertTypeChange(AlertTypes.METRICS_BASED_ALERT);
@@ -227,17 +212,17 @@ export function CreateAlertProvider(

 	const contextValue: ICreateAlertContextProps = useMemo(
 		() => ({
-			alertState: createAlertState.basic,
+			alertState,
 			setAlertState,
 			alertType,
 			setAlertType: handleAlertTypeChange,
-			thresholdState: createAlertState.threshold,
+			thresholdState,
 			setThresholdState,
-			evaluationWindow: createAlertState.evaluationWindow,
+			evaluationWindow,
 			setEvaluationWindow,
-			advancedOptions: createAlertState.advancedOptions,
+			advancedOptions,
 			setAdvancedOptions,
-			notificationSettings: createAlertState.notificationSettings,
+			notificationSettings,
 			setNotificationSettings,
 			discardAlertRule,
 			createAlertRule,
@@ -249,14 +234,13 @@ export function CreateAlertProvider(
 			isEditMode: isEditMode || false,
 		}),
 		[
-			createAlertState,
-			setAlertState,
-			setThresholdState,
-			setEvaluationWindow,
-			setAdvancedOptions,
-			setNotificationSettings,
+			alertState,
 			alertType,
 			handleAlertTypeChange,
+			thresholdState,
+			evaluationWindow,
+			advancedOptions,
+			notificationSettings,
 			discardAlertRule,
 			createAlertRule,
 			isCreatingAlertRule,
--- a/frontend/src/container/CreateAlertV2/context/types.ts
+++ b/frontend/src/container/CreateAlertV2/context/types.ts
@@ -9,6 +9,8 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 import { Labels } from 'types/api/alerts/def';

+import { GetCreateAlertLocalStateFromAlertDefReturn } from '../types';
+
 export interface ICreateAlertContextProps {
 	alertState: AlertState;
 	setAlertState: Dispatch<CreateAlertAction>;
@@ -50,7 +52,7 @@ export interface ICreateAlertContextProps {
 export interface ICreateAlertProviderProps {
 	children: React.ReactNode;
 	initialAlertType: AlertTypes;
-	initialAlertState?: CreateAlertState;
+	initialAlertState?: GetCreateAlertLocalStateFromAlertDefReturn;
 	isEditMode?: boolean;
 	ruleId?: string;
 }
@@ -270,31 +272,3 @@ export type NotificationSettingsAction =
 	| { type: 'SET_ROUTING_POLICIES'; payload: boolean }
 	| { type: 'SET_INITIAL_STATE'; payload: NotificationSettingsState }
 	| { type: 'RESET' };
-
-export type CreateAlertState = {
-	basic: AlertState;
-	threshold: AlertThresholdState;
-	advancedOptions: AdvancedOptionsState;
-	evaluationWindow: EvaluationWindowState;
-	notificationSettings: NotificationSettingsState;
-};
-
-export enum CreateAlertSlice {
-	BASIC = 'basic',
-	THRESHOLD = 'threshold',
-	ADVANCED_OPTIONS = 'advancedOptions',
-	EVALUATION_WINDOW = 'evaluationWindow',
-	NOTIFICATION_SETTINGS = 'notificationSettings',
-}
-
-export type CreateAlertReducerAction =
-	| { slice: CreateAlertSlice.BASIC; action: CreateAlertAction }
-	| { slice: CreateAlertSlice.THRESHOLD; action: AlertThresholdAction }
-	| { slice: CreateAlertSlice.ADVANCED_OPTIONS; action: AdvancedOptionsAction }
-	| { slice: CreateAlertSlice.EVALUATION_WINDOW; action: EvaluationWindowAction }
-	| {
-			slice: CreateAlertSlice.NOTIFICATION_SETTINGS;
-			action: NotificationSettingsAction;
-	  }
-	| { type: 'RESET' }
-	| { type: 'SET_INITIAL_STATE'; payload: CreateAlertState };
--- a/frontend/src/container/CreateAlertV2/context/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/context/utils.tsx
@@ -18,7 +18,6 @@ import {
 	INITIAL_ADVANCED_OPTIONS_STATE,
 	INITIAL_ALERT_STATE,
 	INITIAL_ALERT_THRESHOLD_STATE,
-	INITIAL_CREATE_ALERT_STATE,
 	INITIAL_EVALUATION_WINDOW_STATE,
 	INITIAL_NOTIFICATION_SETTINGS_STATE,
 } from './constants';
@@ -29,9 +28,6 @@ import {
 	AlertThresholdAction,
 	AlertThresholdState,
 	CreateAlertAction,
-	CreateAlertReducerAction,
-	CreateAlertSlice,
-	CreateAlertState,
 	EvaluationWindowAction,
 	EvaluationWindowState,
 	NotificationSettingsAction,
@@ -255,57 +251,3 @@ export const notificationSettingsReducer = (
 			return state;
 	}
 };
-
-export const createAlertReducer = (
-	state: CreateAlertState,
-	action: CreateAlertReducerAction,
-): CreateAlertState => {
-	// Global actions
-	if ('type' in action) {
-		switch (action.type) {
-			case 'RESET':
-				return INITIAL_CREATE_ALERT_STATE;
-			case 'SET_INITIAL_STATE':
-				return action.payload;
-			default:
-				return state;
-		}
-	}
-
-	// Slice actions
-	switch (action.slice) {
-		case CreateAlertSlice.BASIC:
-			return { ...state, basic: alertCreationReducer(state.basic, action.action) };
-		case CreateAlertSlice.THRESHOLD:
-			return {
-				...state,
-				threshold: alertThresholdReducer(state.threshold, action.action),
-			};
-		case CreateAlertSlice.ADVANCED_OPTIONS:
-			return {
-				...state,
-				advancedOptions: advancedOptionsReducer(
-					state.advancedOptions,
-					action.action,
-				),
-			};
-		case CreateAlertSlice.EVALUATION_WINDOW:
-			return {
-				...state,
-				evaluationWindow: evaluationWindowReducer(
-					state.evaluationWindow,
-					action.action,
-				),
-			};
-		case CreateAlertSlice.NOTIFICATION_SETTINGS:
-			return {
-				...state,
-				notificationSettings: notificationSettingsReducer(
-					state.notificationSettings,
-					action.action,
-				),
-			};
-		default:
-			return state;
-	}
-};
--- a/frontend/src/container/CreateAlertV2/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/utils.tsx
@@ -21,11 +21,11 @@ import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
 	AlertThresholdState,
-	CreateAlertState,
 	EvaluationWindowState,
 	NotificationSettingsState,
 } from './context/types';
 import { EVALUATION_WINDOW_TIMEFRAME } from './EvaluationSettings/constants';
+import { GetCreateAlertLocalStateFromAlertDefReturn } from './types';

 export function Spinner(): JSX.Element | null {
 	const { isCreatingAlertRule, isUpdatingAlertRule } = useCreateAlertState();
@@ -265,14 +265,14 @@ export function getThresholdStateFromAlertDef(

 export function getCreateAlertLocalStateFromAlertDef(
 	alertDef: PostableAlertRuleV2 | undefined,
-): CreateAlertState {
+): GetCreateAlertLocalStateFromAlertDefReturn {
 	if (!alertDef) {
 		return {
-			basic: INITIAL_ALERT_STATE,
-			threshold: INITIAL_ALERT_THRESHOLD_STATE,
-			advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
-			evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
-			notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
+			basicAlertState: INITIAL_ALERT_STATE,
+			thresholdState: INITIAL_ALERT_THRESHOLD_STATE,
+			advancedOptionsState: INITIAL_ADVANCED_OPTIONS_STATE,
+			evaluationWindowState: INITIAL_EVALUATION_WINDOW_STATE,
+			notificationSettingsState: INITIAL_NOTIFICATION_SETTINGS_STATE,
 		};
 	}
 	// Basic alert state
@@ -294,10 +294,10 @@ export function getCreateAlertLocalStateFromAlertDef(
 	);

 	return {
-		basic: basicAlertState,
-		threshold: thresholdState,
-		advancedOptions: advancedOptionsState,
-		evaluationWindow: evaluationWindowState,
-		notificationSettings: notificationSettingsState,
+		basicAlertState,
+		thresholdState,
+		advancedOptionsState,
+		evaluationWindowState,
+		notificationSettingsState,
 	};
 }
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
@@ -18,8 +18,8 @@ import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynam
 import { getWidgetsHavingDynamicVariableAttribute } from 'hooks/dashboard/utils';
 import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
+import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
+import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { isEmpty, map } from 'lodash-es';
 import {
 	ArrowLeft,
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
@@ -22,7 +22,7 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

 import { TVariableMode } from './types';
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx
@@ -1,69 +0,0 @@
-import { memo, useEffect, useMemo } from 'react';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-import sortValues from 'lib/dashboardVariables/sortVariableValues';
-
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { VariableItemProps } from './VariableItem';
-import { customVariableSelectStrategy } from './variableSelectStrategy/customVariableSelectStrategy';
-
-type CustomVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate'
->;
-
-function CustomVariableInput({
-	variableData,
-	onValueUpdate,
-}: CustomVariableInputProps): JSX.Element {
-	const optionsData: (string | number | boolean)[] = useMemo(() => {
-		return sortValues(
-			commaValuesParser(variableData.customValue || ''),
-			variableData.sort,
-		) as (string | number | boolean)[];
-	}, [variableData.customValue, variableData.sort]);
-
-	const {
-		value,
-		defaultValue,
-		enableSelectAll,
-		onChange,
-		onDropdownVisibleChange,
-		handleClear,
-		applyDefaultIfNeeded,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-		strategy: customVariableSelectStrategy,
-	});
-
-	// Apply default on mount — options are available synchronously for custom variables
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	useEffect(applyDefaultIfNeeded, []);
-
-	const selectOptions = useMemo(
-		() =>
-			optionsData.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[optionsData],
-	);
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={selectOptions}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={onDropdownVisibleChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-		/>
-	);
-}
-
-export default memo(CustomVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
@@ -25,6 +25,12 @@
 		}
 	}

+	&.focused {
+		.variable-value {
+			outline: 1px solid var(--bg-robin-400);
+		}
+	}
+
 	.variable-value {
 		display: flex;
 		min-width: 120px;
@@ -42,11 +48,6 @@
 		font-style: normal;
 		font-weight: 400;
 		line-height: 16px; /* 133.333% */
-
-		&:hover,
-		&:focus-within {
-			outline: 1px solid var(--bg-robin-400);
-		}
 	}

 	.variable-select {
@@ -98,6 +99,12 @@

 .lightMode {
 	.variable-item {
+		&.focused {
+			.variable-value {
+				border: 1px solid var(--bg-robin-400);
+			}
+		}
+
 		.variable-name {
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);
@@ -108,11 +115,6 @@
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);
 			color: var(--bg-ink-400);
-
-			&:hover,
-			&:focus-within {
-				outline: 1px solid var(--bg-robin-400);
-			}
 		}
 	}
 }
@@ -122,9 +124,3 @@
 	padding: 4px 12px;
 	font-size: 12px;
 }
-
-.dashboard-variables-selection-container {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12px;
-}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -1,25 +1,31 @@
-import { memo, useCallback, useEffect, useMemo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'antd';
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import {
-	useDashboardVariables,
-	useDashboardVariablesSelector,
-} from 'hooks/dashboard/useDashboardVariables';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';

-import { onUpdateVariableNode } from './util';
+import DynamicVariableSelection from './DynamicVariableSelection';
+import {
+	buildDependencies,
+	buildDependencyGraph,
+	buildParentDependencyGraph,
+	IDependencyData,
+	onUpdateVariableNode,
+} from './util';
 import VariableItem from './VariableItem';

 import './DashboardVariableSelection.styles.scss';

 function DashboardVariableSelection(): JSX.Element | null {
 	const {
+		selectedDashboard,
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
 		variablesToGetUpdated,
@@ -29,11 +35,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();

 	const { dashboardVariables } = useDashboardVariables();
-	const sortedVariablesArray = useDashboardVariablesSelector(
-		(state) => state.sortedVariablesArray,
-	);
-	const dependencyData = useDashboardVariablesSelector(
-		(state) => state.dependencyData,
+
+	const [variablesTableData, setVariablesTableData] = useState<any>([]);
+
+	const [dependencyData, setDependencyData] = useState<IDependencyData | null>(
+		null,
 	);

 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -41,6 +47,24 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);

 	useEffect(() => {
+		const tableRowData = [];
+
+		// eslint-disable-next-line no-restricted-syntax
+		for (const [key, value] of Object.entries(dashboardVariables)) {
+			const { id } = value;
+
+			tableRowData.push({
+				key,
+				name: key,
+				...dashboardVariables[key],
+				id,
+			});
+		}
+
+		tableRowData.sort((a, b) => a.order - b.order);
+
+		setVariablesTableData(tableRowData);
+
 		// Initialize variables with default values if not in URL
 		initializeDefaultVariables(
 			dashboardVariables,
@@ -49,36 +73,58 @@ function DashboardVariableSelection(): JSX.Element | null {
 		);
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);

-	// Memoize the order key to avoid unnecessary triggers
-	const dependencyOrderKey = useMemo(
-		() => dependencyData?.order?.join(',') ?? '',
-		[dependencyData?.order],
-	);
-
-	// Trigger refetch when dependency order changes or global time changes
 	useEffect(() => {
-		if (dependencyData?.order && dependencyData.order.length > 0) {
-			setVariablesToGetUpdated(dependencyData?.order || []);
+		if (variablesTableData.length > 0) {
+			const depGrp = buildDependencies(variablesTableData);
+			const { order, graph, hasCycle, cycleNodes } = buildDependencyGraph(depGrp);
+			const parentDependencyGraph = buildParentDependencyGraph(graph);
+
+			// cleanup order to only include variables that are of type 'QUERY'
+			const cleanedOrder = order.filter((variable) => {
+				const variableData = variablesTableData.find(
+					(v: IDashboardVariable) => v.name === variable,
+				);
+				return variableData?.type === 'QUERY';
+			});
+
+			setDependencyData({
+				order: cleanedOrder,
+				graph,
+				parentDependencyGraph,
+				hasCycle,
+				cycleNodes,
+			});
 		}
+	}, [dashboardVariables, variablesTableData]);
+
+	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
+	// also trigger when the global time changes
+	useEffect(
+		() => {
+			if (!isEmpty(dependencyData?.order)) {
+				setVariablesToGetUpdated(dependencyData?.order || []);
+			}
+		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dependencyOrderKey, minTime, maxTime]);
+		[JSON.stringify(dependencyData?.order), minTime, maxTime],
+	);

 	// Performance optimization: For dynamic variables with allSelected=true, we don't store
 	// individual values in localStorage since we can always derive them from available options.
 	// This makes localStorage much lighter and more efficient.
-	const onValueUpdate = useCallback(
-		(
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-			// eslint-disable-next-line sonarjs/cognitive-complexity
-		): void => {
+	const onValueUpdate = (
+		name: string,
+		id: string,
+		value: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+	): void => {
+		if (id) {
 			// For dynamic variables, only store in localStorage when NOT allSelected
 			// This makes localStorage much lighter by avoiding storing all individual values
-			const variable = dashboardVariables[id] || dashboardVariables[name];
-			const isDynamic = variable.type === 'DYNAMIC';
+			const variable = dashboardVariables?.[id] || dashboardVariables?.[name];
+			const isDynamic = variable?.type === 'DYNAMIC';
 			updateLocalStorageDashboardVariables(name, value, allSelected, isDynamic);

 			if (allSelected) {
@@ -87,39 +133,41 @@ function DashboardVariableSelection(): JSX.Element | null {
 				updateUrlVariable(name || id, value);
 			}

-			setSelectedDashboard((prev) => {
-				if (prev) {
-					const oldVariables = { ...prev?.data.variables };
-					// this is added to handle case where we have two different
-					// schemas for variable response
-					if (oldVariables?.[id]) {
-						oldVariables[id] = {
-							...oldVariables[id],
-							selectedValue: value,
-							allSelected,
-							haveCustomValuesSelected,
-						};
-					}
-					if (oldVariables?.[name]) {
-						oldVariables[name] = {
-							...oldVariables[name],
-							selectedValue: value,
-							allSelected,
-							haveCustomValuesSelected,
-						};
-					}
-					return {
-						...prev,
-						data: {
-							...prev?.data,
-							variables: {
-								...oldVariables,
+			if (selectedDashboard) {
+				setSelectedDashboard((prev) => {
+					if (prev) {
+						const oldVariables = prev?.data.variables;
+						// this is added to handle case where we have two different
+						// schemas for variable response
+						if (oldVariables?.[id]) {
+							oldVariables[id] = {
+								...oldVariables[id],
+								selectedValue: value,
+								allSelected,
+								haveCustomValuesSelected,
+							};
+						}
+						if (oldVariables?.[name]) {
+							oldVariables[name] = {
+								...oldVariables[name],
+								selectedValue: value,
+								allSelected,
+								haveCustomValuesSelected,
+							};
+						}
+						return {
+							...prev,
+							data: {
+								...prev?.data,
+								variables: {
+									...oldVariables,
+								},
 							},
-						},
-					};
-				}
-				return prev;
-			});
+						};
+					}
+					return prev;
+				});
+			}

 			if (dependencyData) {
 				const updatedVariables: string[] = [];
@@ -135,35 +183,48 @@ function DashboardVariableSelection(): JSX.Element | null {
 			} else {
 				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
 			}
-		},
-		[
-			// This can be removed
-			dashboardVariables,
-			updateLocalStorageDashboardVariables,
-			dependencyData,
-			updateUrlVariable,
-			setSelectedDashboard,
-			setVariablesToGetUpdated,
-		],
+		}
+	};
+
+	if (!dashboardVariables) {
+		return null;
+	}
+
+	const orderBasedSortedVariables = variablesTableData.sort(
+		(a: { order: number }, b: { order: number }) => a.order - b.order,
 	);

 	return (
-		<Row className="dashboard-variables-selection-container">
-			{sortedVariablesArray.map((variable) => {
-				const key = `${variable.name}${variable.id}${variable.order}`;
-
-				return (
-					<VariableItem
-						key={key}
-						existingVariables={dashboardVariables}
-						variableData={variable}
-						onValueUpdate={onValueUpdate}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
-					/>
-				);
-			})}
+		<Row style={{ display: 'flex', gap: '12px' }}>
+			{orderBasedSortedVariables &&
+				Array.isArray(orderBasedSortedVariables) &&
+				orderBasedSortedVariables.length > 0 &&
+				orderBasedSortedVariables.map((variable) =>
+					variable.type === 'DYNAMIC' ? (
+						<DynamicVariableSelection
+							key={`${variable.name}${variable.id}${variable.order}`}
+							existingVariables={dashboardVariables}
+							variableData={{
+								name: variable.name,
+								...variable,
+							}}
+							onValueUpdate={onValueUpdate}
+						/>
+					) : (
+						<VariableItem
+							key={`${variable.name}${variable.id}}${variable.order}`}
+							existingVariables={dashboardVariables}
+							variableData={{
+								name: variable.name,
+								...variable,
+							}}
+							onValueUpdate={onValueUpdate}
+							variablesToGetUpdated={variablesToGetUpdated}
+							setVariablesToGetUpdated={setVariablesToGetUpdated}
+							dependencyData={dependencyData}
+						/>
+					),
+				)}
 		</Row>
 	);
 }
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx
@@ -1,343 +0,0 @@
-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 useDebounce from 'hooks/useDebounce';
-import { isEmpty } from 'lodash-es';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
-
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { getOptionsForDynamicVariable } from './util';
-import { VariableItemProps } from './VariableItem';
-import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
-
-import './DashboardVariableSelection.styles.scss';
-
-type DynamicVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate' | 'existingVariables'
->;
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DynamicVariableInput({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableInputProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [relatedValues, setRelatedValues] = useState<string[]>([]);
-	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
-		[],
-	);
-
-	// Track dropdown open state for auto-checking new values
-	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	// Build a memoized list of all currently available option strings (normalized + related)
-	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
-		[optionsData, relatedValues],
-	);
-
-	const {
-		value,
-		tempSelection,
-		setTempSelection,
-		handleClear,
-		enableSelectAll,
-		defaultValue,
-		applyDefaultIfNeeded,
-		onChange,
-		onDropdownVisibleChange,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-		strategy: dynamicVariableSelectStrategy,
-		allAvailableOptionStrings,
-	});
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) {
-			return 'no_variables';
-		}
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// existing query is the query made from the other dynamic variables around this one with there current values
-	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
-
-		const 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(
-		(visible: boolean): void => {
-			setIsDropdownOpen(visible);
-
-			onDropdownVisibleChange(visible);
-
-			if (!visible) {
-				setFilteredOptionsData(optionsData);
-				setRelatedValues(originalRelatedValues);
-				setApiSearchText('');
-			}
-		},
-		[onDropdownVisibleChange, optionsData, originalRelatedValues],
-	);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-			debouncedApiSearchText,
-			variableData.dynamicVariablesSource,
-			variableData.dynamicVariablesAttribute,
-		],
-		{
-			enabled:
-				variableData.type === 'DYNAMIC' &&
-				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute,
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-					existingQuery,
-				),
-			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);
-				}
-			},
-		},
-	);
-
-	const handleRetry = useCallback((): void => {
-		setErrorMessage(null);
-		setIsRetryableError(true);
-		refetch();
-	}, [refetch]);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					setRelatedValues(originalRelatedValues);
-					return;
-				}
-
-				const lowerText = text.toLowerCase();
-				setFilteredOptionsData(
-					optionsData.filter((option) =>
-						option.toString().toLowerCase().includes(lowerText),
-					),
-				);
-				setRelatedValues(
-					originalRelatedValues.filter((val) =>
-						val.toLowerCase().includes(lowerText),
-					),
-				);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData, originalRelatedValues],
-	);
-
-	const selectOptions = useMemo(
-		() =>
-			getOptionsForDynamicVariable(filteredOptionsData || [], relatedValues || []),
-		[filteredOptionsData, relatedValues],
-	);
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={selectOptions}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleSelectDropdownVisibilityChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-			// dynamic variable specific + API related props
-			loading={isLoading}
-			errorMessage={errorMessage}
-			onRetry={handleRetry}
-			isDynamicVariable
-			showRetryButton={isRetryableError}
-			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-			onSearch={handleSearch}
-		/>
-	);
-}
-
-export default memo(DynamicVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx
@@ -0,0 +1,602 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable no-nested-ternary */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Tooltip, Typography } from 'antd';
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useDebounce from 'hooks/useDebounce';
+import { isEmpty, isUndefined } from 'lodash-es';
+import { AppState } from 'store/reducers';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ALL_SELECT_VALUE } from '../utils';
+import { SelectItemStyle } from './styles';
+import {
+	areArraysEqual,
+	getOptionsForDynamicVariable,
+	uniqueValues,
+} from './util';
+import { getSelectValue } from './VariableItem';
+
+import './DashboardVariableSelection.styles.scss';
+
+interface DynamicVariableSelectionProps {
+	variableData: IDashboardVariable;
+	existingVariables: Record<string, IDashboardVariable>;
+	onValueUpdate: (
+		name: string,
+		id: string,
+		arg1: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+	) => void;
+}
+
+function DynamicVariableSelection({
+	variableData,
+	onValueUpdate,
+	existingVariables,
+}: DynamicVariableSelectionProps): JSX.Element {
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
+
+	const [isComplete, setIsComplete] = useState<boolean>(false);
+
+	const [filteredOptionsData, setFilteredOptionsData] = useState<
+		(string | number | boolean)[]
+	>([]);
+
+	const [relatedValues, setRelatedValues] = useState<string[]>([]);
+	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
+		[],
+	);
+
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// Track dropdown open state for auto-checking new values
+	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+	// Create a dependency key from all dynamic variables
+	const dynamicVariablesKey = useMemo(() => {
+		if (!existingVariables) {
+			return 'no_variables';
+		}
+
+		const dynamicVars = Object.values(existingVariables)
+			.filter((v) => v.type === 'DYNAMIC')
+			.map(
+				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
+			)
+			.join('|');
+
+		return dynamicVars || 'no_dynamic_variables';
+	}, [existingVariables]);
+
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// existing query is the query made from the other dynamic variables around this one with there current values
+	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
+	const existingQuery = useMemo(() => {
+		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
+			return '';
+		}
+
+		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((value) => value !== null && value !== undefined && value !== '')
+					.map((value) => value.toString());
+
+				if (validValues.length > 0) {
+					// Format values for query - wrap strings in quotes, keep numbers as is
+					const formattedValues = validValues.map((value) => {
+						// Check if value is a number
+						const numValue = Number(value);
+						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+							return value; // Keep as number
+						}
+						// Escape single quotes and wrap in quotes
+						return `'${value.replace(/'/g, "\\'")}'`;
+					});
+
+					if (formattedValues.length === 1) {
+						queryParts.push(`${attribute} = ${formattedValues[0]}`);
+					} else {
+						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
+					}
+				}
+			}
+		});
+
+		return queryParts.join(' AND ');
+	}, [
+		existingVariables,
+		variableData.id,
+		variableData.dynamicVariablesAttribute,
+	]);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+			debouncedApiSearchText,
+		],
+		{
+			enabled: variableData.type === 'DYNAMIC',
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+					existingQuery,
+				),
+			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);
+					}
+				}
+			},
+			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);
+				}
+			},
+		},
+	);
+
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+
+			if (
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
+			) {
+				return;
+			}
+
+			if (variableData.name) {
+				if (
+					value === ALL_SELECT_VALUE ||
+					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+				) {
+					// For ALL selection in dynamic variables, pass null to avoid storing values
+					// The parent component will handle this appropriately
+					onValueUpdate(variableData.name, variableData.id, null, true);
+				} else {
+					// Build union of available options shown in dropdown (normalized + related)
+					const allAvailableOptionStrings = [
+						...new Set([
+							...optionsData.map((v) => v.toString()),
+							...relatedValues.map((v) => v.toString()),
+						]),
+					];
+
+					const haveCustomValuesSelected =
+						Array.isArray(value) &&
+						!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
+
+					onValueUpdate(
+						variableData.name,
+						variableData.id,
+						value,
+						allAvailableOptionStrings.every((v) => value.includes(v.toString())),
+						haveCustomValuesSelected,
+					);
+				}
+			}
+		},
+		[variableData, onValueUpdate, optionsData, relatedValues],
+	);
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesSource &&
+			variableData.dynamicVariablesAttribute
+		) {
+			refetch();
+		}
+	}, [
+		refetch,
+		variableData.dynamicVariablesSource,
+		variableData.dynamicVariablesAttribute,
+		debouncedApiSearchText,
+	]);
+
+	// Build a memoized list of all currently available option strings (normalized + related)
+	const allAvailableOptionStrings = useMemo(
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
+		[optionsData, relatedValues],
+	);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					setRelatedValues(originalRelatedValues);
+					return;
+				}
+
+				const localFilteredOptionsData: (string | number | boolean)[] = [];
+				optionsData.forEach((option) => {
+					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
+						localFilteredOptionsData.push(option);
+					}
+				});
+				setFilteredOptionsData(localFilteredOptionsData);
+				setRelatedValues(
+					originalRelatedValues.filter((value) =>
+						value.toLowerCase().includes(text.toLowerCase()),
+					),
+				);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData, originalRelatedValues],
+	);
+
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(
+		() => getSelectValue(selectedValue, variableData),
+		[selectedValue, variableData],
+	);
+
+	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
+
+	const selectValue =
+		variableData.allSelected && enableSelectAll
+			? ALL_SELECT_VALUE
+			: selectedValueStringified;
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = useCallback(
+		(inputValue: string | string[]): void => {
+			// Store the selection in temporary state while dropdown is open
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+			const sanitizedValue = uniqueValues(value);
+			setTempSelection(sanitizedValue);
+		},
+		[variableData.multiSelect],
+	);
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Update dropdown open state for auto-checking
+		setIsDropdownOpen(visible);
+
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
+				// When ALL is selected, set selection to exactly the latest available values
+				const latestAll = [...allAvailableOptionStrings];
+				setTempSelection(latestAll);
+			} else {
+				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+			}
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Only call handleChange if there's actually a change in the selection
+			const currentValue = variableData.selectedValue;
+
+			// Helper function to check if arrays have the same elements regardless of order
+			const areArraysEqualIgnoreOrder = (a: any[], b: any[]): boolean => {
+				if (a.length !== b.length) {
+					return false;
+				}
+				const sortedA = [...a].sort();
+				const sortedB = [...b].sort();
+				return areArraysEqual(sortedA, sortedB);
+			};
+
+			// If ALL was selected before and remains ALL after, skip updating
+			const wasAllSelected = enableSelectAll && variableData.allSelected;
+			const isAllSelectedAfter =
+				enableSelectAll &&
+				Array.isArray(tempSelection) &&
+				tempSelection.length === allAvailableOptionStrings.length &&
+				allAvailableOptionStrings.every((v) => tempSelection.includes(v));
+
+			if (wasAllSelected && isAllSelectedAfter) {
+				setTempSelection(undefined);
+				return;
+			}
+
+			const hasChanged =
+				tempSelection !== currentValue &&
+				!(
+					Array.isArray(tempSelection) &&
+					Array.isArray(currentValue) &&
+					areArraysEqualIgnoreOrder(tempSelection, currentValue)
+				);
+
+			if (hasChanged) {
+				handleChange(tempSelection);
+			}
+			setTempSelection(undefined);
+		}
+
+		// Always reset filtered data when dropdown closes, regardless of tempSelection state
+		if (!visible) {
+			setFilteredOptionsData(optionsData);
+			setRelatedValues(originalRelatedValues);
+			setApiSearchText('');
+		}
+	};
+
+	useEffect(
+		() => (): void => {
+			// Cleanup on unmount
+			setTempSelection(undefined);
+			setFilteredOptionsData([]);
+			setRelatedValues([]);
+			setApiSearchText('');
+		},
+		[],
+	);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else if (variableData.allSelected) {
+						// If ALL is selected but no stored values, derive from available options
+						// This handles the case where we don't store values in localStorage for ALL
+						value = allAvailableOptionStrings;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		variableData.allSelected,
+		selectedValue,
+		tempSelection,
+		optionsData,
+		allAvailableOptionStrings,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
+
+	return (
+		<div className="variable-item">
+			<Typography.Text className="variable-name" ellipsis>
+				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
+						<InfoCircleOutlined className="info-icon" />
+					</Tooltip>
+				)}
+			</Typography.Text>
+			<div className="variable-value">
+				{variableData.multiSelect ? (
+					<CustomMultiSelect
+						key={variableData.id}
+						options={getOptionsForDynamicVariable(
+							filteredOptionsData || [],
+							relatedValues || [],
+						)}
+						defaultValue={variableData.defaultValue}
+						onChange={handleTempChange}
+						bordered={false}
+						placeholder="Select value"
+						placement="bottomLeft"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						maxTagCount={2}
+						getPopupContainer={popupContainer}
+						value={
+							(tempSelection || selectValue) === ALL_SELECT_VALUE
+								? 'ALL'
+								: tempSelection || selectValue
+						}
+						onDropdownVisibleChange={handleDropdownVisibleChange}
+						errorMessage={errorMessage}
+						// eslint-disable-next-line react/no-unstable-nested-components
+						maxTagPlaceholder={(omittedValues): JSX.Element => {
+							const maxDisplayValues = 10;
+							const valuesToShow = omittedValues.slice(0, maxDisplayValues);
+							const hasMore = omittedValues.length > maxDisplayValues;
+							const tooltipText =
+								valuesToShow.map(({ value }) => value).join(', ') +
+								(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
+
+							return (
+								<Tooltip title={tooltipText}>
+									<span>+ {omittedValues.length} </span>
+								</Tooltip>
+							);
+						}}
+						onClear={(): void => {
+							handleChange([]);
+						}}
+						enableAllSelection={enableSelectAll}
+						maxTagTextLength={30}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							setErrorMessage(null);
+							setIsRetryableError(true);
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+						isDynamicVariable
+						showRetryButton={isRetryableError}
+					/>
+				) : (
+					<CustomSelect
+						key={variableData.id}
+						onChange={handleChange}
+						bordered={false}
+						placeholder="Select value"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						getPopupContainer={popupContainer}
+						options={getOptionsForDynamicVariable(
+							filteredOptionsData || [],
+							relatedValues || [],
+						)}
+						value={selectValue}
+						defaultValue={variableData.defaultValue}
+						errorMessage={errorMessage}
+						onSearch={handleSearch}
+						// eslint-disable-next-line sonarjs/no-identical-functions
+						onRetry={(): void => {
+							setErrorMessage(null);
+							setIsRetryableError(true);
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+						isDynamicVariable
+						showRetryButton={isRetryableError}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DynamicVariableSelection;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx
@@ -1,249 +0,0 @@
-import { memo, useCallback, useMemo, useState } from 'react';
-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 sortValues from 'lib/dashboardVariables/sortVariableValues';
-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';
-
-import { variablePropsToPayloadVariables } from '../utils';
-import SelectVariableInput from './SelectVariableInput';
-import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, checkAPIInvocation } from './util';
-import { VariableItemProps } from './VariableItem';
-import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
-
-type QueryVariableInputProps = Pick<
-	VariableItemProps,
-	| 'variableData'
-	| 'existingVariables'
-	| 'onValueUpdate'
-	| 'variablesToGetUpdated'
-	| 'setVariablesToGetUpdated'
-	| 'dependencyData'
->;
-
-function QueryVariableInput({
-	variableData,
-	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
-	onValueUpdate,
-}: QueryVariableInputProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const {
-		tempSelection,
-		setTempSelection,
-		value,
-		defaultValue,
-		enableSelectAll,
-		onChange,
-		onDropdownVisibleChange,
-		handleClear,
-		applyDefaultIfNeeded,
-	} = useDashboardVariableSelectHelper({
-		variableData,
-		optionsData,
-		onValueUpdate,
-		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 => {
-			try {
-				setErrorMessage(null);
-
-				if (
-					variablesRes?.variableValues &&
-					Array.isArray(variablesRes?.variableValues)
-				) {
-					const newOptionsData = sortValues(
-						variablesRes?.variableValues,
-						variableData.sort,
-					);
-
-					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
-
-					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-						let valueNotInList = false;
-
-						if (isArray(variableData.selectedValue)) {
-							variableData.selectedValue.forEach((val) => {
-								if (!newOptionsData.includes(val)) {
-									valueNotInList = true;
-								}
-							});
-						} else if (
-							isString(variableData.selectedValue) &&
-							!newOptionsData.includes(variableData.selectedValue)
-						) {
-							valueNotInList = true;
-						}
-
-						// variablesData.allSelected is added for the case where on change of options we need to update the
-						// local storage
-						if (
-							variableData.name &&
-							(validVariableUpdate() || valueNotInList || variableData.allSelected)
-						) {
-							if (
-								variableData.allSelected &&
-								variableData.multiSelect &&
-								variableData.showALLOption
-							) {
-								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
-
-								// Update tempSelection to maintain ALL state when dropdown is open
-								if (tempSelection !== undefined) {
-									setTempSelection(newOptionsData.map((option) => option.toString()));
-								}
-							} else {
-								const value = variableData.selectedValue;
-								let allSelected = false;
-
-								if (variableData.multiSelect) {
-									const { selectedValue } = variableData;
-									allSelected =
-										newOptionsData.length > 0 &&
-										Array.isArray(selectedValue) &&
-										newOptionsData.every((option) => selectedValue.includes(option));
-								}
-
-								if (variableData.name && variableData.id) {
-									onValueUpdate(variableData.name, variableData.id, value, allSelected);
-								}
-							}
-						}
-
-						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) {
-				console.error(e);
-			}
-		},
-		[
-			variableData,
-			optionsData,
-			onValueUpdate,
-			tempSelection,
-			setTempSelection,
-			validVariableUpdate,
-			setVariablesToGetUpdated,
-			applyDefaultIfNeeded,
-		],
-	);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || '',
-			`${minTime}`,
-			`${maxTime}`,
-			JSON.stringify(dependencyData?.order),
-		],
-		{
-			enabled:
-				variableData &&
-				checkAPIInvocation(
-					variablesToGetUpdated,
-					variableData,
-					dependencyData?.parentDependencyGraph,
-				),
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableData.queryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
-			refetchOnWindowFocus: false,
-			onSuccess: (response) => {
-				getOptions(response.payload);
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
-			},
-			onError: (error: {
-				details: {
-					error: string;
-				};
-			}) => {
-				const { details } = error;
-
-				if (details.error) {
-					let message = details.error;
-					if ((details.error ?? '').toString().includes('Syntax error:')) {
-						message =
-							'Please make sure query is valid and dependent variables are selected';
-					}
-					setErrorMessage(message);
-				}
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
-			},
-		},
-	);
-
-	const handleRetry = useCallback((): void => {
-		setErrorMessage(null);
-		refetch();
-	}, [refetch]);
-
-	const selectOptions = useMemo(
-		() =>
-			optionsData.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[optionsData],
-	);
-
-	return (
-		<SelectVariableInput
-			variableId={variableData.id}
-			options={selectOptions}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={onDropdownVisibleChange}
-			onClear={handleClear}
-			enableSelectAll={enableSelectAll}
-			defaultValue={defaultValue}
-			isMultiSelect={variableData.multiSelect}
-			// query variable specific, API related props
-			loading={isLoading}
-			errorMessage={errorMessage}
-			onRetry={handleRetry}
-		/>
-	);
-}
-
-export default memo(QueryVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx
@@ -1,144 +0,0 @@
-import { memo, useMemo } from 'react';
-import { orange } from '@ant-design/colors';
-import { WarningOutlined } from '@ant-design/icons';
-import { Popover, Tooltip, Typography } from 'antd';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { OptionData } from 'components/NewSelect/types';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-
-const errorIconStyle = { margin: '0 0.5rem' };
-
-interface SelectVariableInputProps {
-	variableId: string;
-	options: OptionData[];
-	value: string | string[] | undefined;
-	enableSelectAll: boolean;
-	isMultiSelect: boolean;
-	onChange: (value: string | string[]) => void;
-	onClear: () => void;
-	defaultValue?: string | string[];
-	onDropdownVisibleChange?: (visible: boolean) => void;
-	loading?: boolean;
-	errorMessage?: string | null;
-	onRetry?: () => void;
-	isDynamicVariable?: boolean;
-	showRetryButton?: boolean;
-	showIncompleteDataMessage?: boolean;
-	onSearch?: (searchTerm: string) => void;
-}
-
-const MAX_TAG_DISPLAY_VALUES = 10;
-
-export const renderMaxTagPlaceholder = (
-	omittedValues: { label?: React.ReactNode; value?: string | number }[],
-): JSX.Element => {
-	const valuesToShow = omittedValues.slice(0, MAX_TAG_DISPLAY_VALUES);
-	const hasMore = omittedValues.length > MAX_TAG_DISPLAY_VALUES;
-	const tooltipText =
-		valuesToShow.map(({ value: v }) => v ?? '').join(', ') +
-		(hasMore ? ` + ${omittedValues.length - MAX_TAG_DISPLAY_VALUES} more` : '');
-
-	return (
-		<Tooltip title={tooltipText}>
-			<span>+ {omittedValues.length} </span>
-		</Tooltip>
-	);
-};
-
-function SelectVariableInput({
-	variableId,
-	options,
-	value,
-	onChange,
-	onDropdownVisibleChange,
-	onClear,
-	loading,
-	errorMessage,
-	onRetry,
-	enableSelectAll,
-	isMultiSelect,
-	defaultValue,
-	isDynamicVariable,
-	showRetryButton,
-	showIncompleteDataMessage,
-	onSearch,
-}: SelectVariableInputProps): JSX.Element {
-	const commonProps = useMemo(
-		() => ({
-			// main props
-			key: variableId,
-			value,
-			defaultValue,
-
-			// setup props
-			placeholder: 'Select value',
-			className: 'variable-select',
-			popupClassName: 'dropdown-styles',
-			getPopupContainer: popupContainer,
-			style: SelectItemStyle,
-			showSearch: true,
-			bordered: false,
-
-			// changing props
-			'data-testid': 'variable-select',
-			onChange,
-			loading,
-			options,
-			errorMessage,
-			onRetry,
-
-			// dynamic variable only props
-			isDynamicVariable,
-			showRetryButton,
-			showIncompleteDataMessage,
-			onSearch,
-		}),
-		[
-			variableId,
-			defaultValue,
-			onChange,
-			loading,
-			options,
-			value,
-			errorMessage,
-			onRetry,
-			isDynamicVariable,
-			showRetryButton,
-			showIncompleteDataMessage,
-			onSearch,
-		],
-	);
-
-	return (
-		<>
-			{isMultiSelect ? (
-				<CustomMultiSelect
-					{...commonProps}
-					placement="bottomLeft"
-					maxTagCount={2}
-					onDropdownVisibleChange={onDropdownVisibleChange}
-					maxTagPlaceholder={renderMaxTagPlaceholder}
-					onClear={onClear}
-					enableAllSelection={enableSelectAll}
-					maxTagTextLength={30}
-					allowClear={value !== ALL_SELECT_VALUE}
-				/>
-			) : (
-				<CustomSelect {...commonProps} />
-			)}
-
-			{errorMessage && (
-				<span style={errorIconStyle}>
-					<Popover placement="top" content={<Typography>{errorMessage}</Typography>}>
-						<WarningOutlined style={{ color: orange[5] }} />
-					</Popover>
-				</span>
-			)}
-		</>
-	);
-}
-
-export default memo(SelectVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx
@@ -1,85 +0,0 @@
-import { memo, useCallback, useRef, useState } from 'react';
-import { Input, InputRef } from 'antd';
-
-import { VariableItemProps } from './VariableItem';
-
-type TextboxVariableInputProps = Pick<
-	VariableItemProps,
-	'variableData' | 'onValueUpdate'
->;
-
-function TextboxVariableInput({
-	variableData,
-	onValueUpdate,
-}: TextboxVariableInputProps): JSX.Element {
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			if (inputValue === variableData.selectedValue) {
-				return;
-			}
-			if (variableData.name) {
-				onValueUpdate(variableData.name, variableData.id, inputValue, false);
-			}
-		},
-		[
-			onValueUpdate,
-			variableData.id,
-			variableData.name,
-			variableData.selectedValue,
-		],
-	);
-
-	const textboxInputRef = useRef<InputRef>(null);
-	const [textboxInputValue, setTextboxInputValue] = useState<string>(
-		(variableData.selectedValue?.toString() ||
-			variableData.defaultValue?.toString()) ??
-			'',
-	);
-
-	const handleInputOnChange = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>) => {
-			setTextboxInputValue(event.target.value);
-		},
-		[setTextboxInputValue],
-	);
-
-	const handleInputOnBlur = useCallback(
-		(event: React.FocusEvent<HTMLInputElement>): void => {
-			const value = event.target.value.trim();
-			// If empty, reset to default value
-			if (!value && variableData.defaultValue) {
-				setTextboxInputValue(variableData.defaultValue.toString());
-				handleChange(variableData.defaultValue.toString());
-			} else {
-				handleChange(value);
-			}
-		},
-		[handleChange, variableData.defaultValue],
-	);
-
-	const handleInputOnKeyDown = useCallback(
-		(event: React.KeyboardEvent<HTMLInputElement>): void => {
-			if (event.key === 'Enter') {
-				textboxInputRef.current?.blur();
-			}
-		},
-		[],
-	);
-
-	return (
-		<Input
-			key={variableData.id}
-			ref={textboxInputRef}
-			placeholder="Enter value"
-			data-testid={`variable-textbox-${variableData.id}`}
-			bordered={false}
-			value={textboxInputValue}
-			title={textboxInputValue}
-			onChange={handleInputOnChange}
-			onBlur={handleInputOnBlur}
-			onKeyDown={handleInputOnKeyDown}
-		/>
-	);
-}
-
-export default memo(TextboxVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
@@ -1,81 +1,529 @@
-import { memo } from 'react';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable no-nested-ternary */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { orange } from '@ant-design/colors';
+import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
+import { Input, InputRef, Popover, Tooltip, Typography } from 'antd';
+import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
+import sortValues from 'lib/dashbaordVariables/sortVariableValues';
+import { debounce, isArray, isEmpty, isString } from 'lodash-es';
+import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { VariableResponseProps } from 'types/api/dashboard/variables/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';

-import CustomVariableInput from './CustomVariableInput';
-import DynamicVariableInput from './DynamicVariableInput';
-import QueryVariableInput from './QueryVariableInput';
-import TextboxVariableInput from './TextboxVariableInput';
+import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
+import { SelectItemStyle } from './styles';
+import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';

 import './DashboardVariableSelection.styles.scss';

-export interface VariableItemProps {
+interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
 	onValueUpdate: (
 		name: string,
 		id: string,
-		value: IDashboardVariable['selectedValue'],
+		arg1: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
 	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 	dependencyData: IDependencyData | null;
 }

+export const getSelectValue = (
+	selectedValue: IDashboardVariable['selectedValue'],
+	variableData: IDashboardVariable,
+): string | string[] | undefined => {
+	if (Array.isArray(selectedValue)) {
+		if (!variableData.multiSelect && selectedValue.length === 1) {
+			return selectedValue[0]?.toString();
+		}
+		return selectedValue.map((item) => item.toString());
+	}
+	return selectedValue?.toString();
+};
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function VariableItem({
 	variableData,
-	onValueUpdate,
 	existingVariables,
+	onValueUpdate,
 	variablesToGetUpdated,
 	setVariablesToGetUpdated,
 	dependencyData,
 }: VariableItemProps): JSX.Element {
-	const { name, description, type: variableType } = variableData;
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// Local state for textbox input to ensure smooth editing experience
+	const [textboxInputValue, setTextboxInputValue] = useState<string>(
+		(variableData.selectedValue?.toString() ||
+			variableData.defaultValue?.toString()) ??
+			'',
+	);
+	const [isTextboxFocused, setIsTextboxFocused] = useState<boolean>(false);
+	const textboxInputRef = useRef<InputRef>(null);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const validVariableUpdate = (): boolean => {
+		if (!variableData.name) {
+			return false;
+		}
+
+		// variableData.name is present as the top element or next in the queue - variablesToGetUpdated
+		return Boolean(
+			variablesToGetUpdated.length &&
+				variablesToGetUpdated[0] === variableData.name,
+		);
+	};
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const getOptions = (variablesRes: VariableResponseProps | null): void => {
+		if (variablesRes && variableData.type === 'QUERY') {
+			try {
+				setErrorMessage(null);
+
+				if (
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
+				) {
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
+					);
+
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						/* eslint-disable no-useless-escape */
+
+						let valueNotInList = false;
+
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								const isUsed = newOptionsData.includes(val);
+
+								if (!isUsed) {
+									valueNotInList = true;
+								}
+							});
+						} else if (isString(variableData.selectedValue)) {
+							const isUsed = newOptionsData.includes(variableData.selectedValue);
+
+							if (!isUsed) {
+								valueNotInList = true;
+							}
+						}
+
+						// variablesData.allSelected is added for the case where on change of options we need to update the
+						// local storage
+						if (
+							variableData.type === 'QUERY' &&
+							variableData.name &&
+							(validVariableUpdate() || valueNotInList || variableData.allSelected)
+						) {
+							if (
+								variableData.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;
+
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (variableData && variableData?.name && variableData?.id) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
+							}
+						}
+
+						setOptionsData(newOptionsData);
+					} else {
+						setVariablesToGetUpdated((prev) =>
+							prev.filter((name) => name !== variableData.name),
+						);
+					}
+				}
+			} catch (e) {
+				console.error(e);
+			}
+		} else if (variableData.type === 'CUSTOM') {
+			const optionsData = sortValues(
+				commaValuesParser(variableData.customValue || ''),
+				variableData.sort,
+			) as never;
+
+			setOptionsData(optionsData);
+		}
+	};
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || '',
+			`${minTime}`,
+			`${maxTime}`,
+			JSON.stringify(dependencyData?.order),
+		],
+		{
+			enabled:
+				variableData &&
+				variableData.type === 'QUERY' &&
+				checkAPIInvocation(
+					variablesToGetUpdated,
+					variableData,
+					dependencyData?.parentDependencyGraph,
+				),
+			queryFn: () =>
+				dashboardVariablesQuery({
+					query: variableData.queryValue || '',
+					variables: variablePropsToPayloadVariables(existingVariables),
+				}),
+			refetchOnWindowFocus: false,
+			onSuccess: (response) => {
+				getOptions(response.payload);
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
+			},
+			onError: (error: {
+				details: {
+					error: string;
+				};
+			}) => {
+				const { details } = error;
+
+				if (details.error) {
+					let message = details.error;
+					if ((details.error ?? '').toString().includes('Syntax error:')) {
+						message =
+							'Please make sure query is valid and dependent variables are selected';
+					}
+					setErrorMessage(message);
+				}
+				setVariablesToGetUpdated((prev) =>
+					prev.filter((v) => v !== variableData.name),
+				);
+			},
+		},
+	);
+
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+
+			if (
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
+			) {
+				return;
+			}
+			if (variableData.name) {
+				// Check if ALL is effectively selected by comparing with available options
+				const isAllSelected =
+					Array.isArray(value) &&
+					value.length > 0 &&
+					optionsData.every((option) => value.includes(option.toString()));
+
+				if (isAllSelected && variableData.showALLOption) {
+					// For ALL selection, pass null to avoid storing values
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(variableData.name, variableData.id, value, false);
+				}
+			}
+		},
+		[
+			variableData.multiSelect,
+			variableData.selectedValue,
+			variableData.name,
+			variableData.id,
+			onValueUpdate,
+			optionsData,
+			variableData.showALLOption,
+		],
+	);
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = (inputValue: string | string[]): void => {
+		// Store the selection in temporary state while dropdown is open
+		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+		setTempSelection(value);
+	};
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
+		}
+	};
+
+	// do not debounce the above function as we do not need debounce in select variables
+	const debouncedHandleChange = debounce(handleChange, 500);
+
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(
+		() => getSelectValue(selectedValue, variableData),
+		[selectedValue, variableData],
+	);
+
+	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
+
+	const selectValue =
+		variableData.allSelected && enableSelectAll
+			? 'ALL'
+			: selectedValueStringified;
+
+	// Apply default value on first render if no selection exists
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		selectedValue,
+		tempSelection,
+		optionsData,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
+
+	useEffect(() => {
+		// Fetch options for CUSTOM Type
+		if (variableData.type === 'CUSTOM') {
+			getOptions(null);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variableData.type, variableData.customValue]);

 	return (
-		<div className="variable-item">
+		<div className={`variable-item${isTextboxFocused ? ' focused' : ''}`}>
 			<Typography.Text className="variable-name" ellipsis>
-				${name}
-				{description && (
-					<Tooltip title={description}>
+				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
 						<InfoCircleOutlined className="info-icon" />
 					</Tooltip>
 				)}
 			</Typography.Text>

 			<div className="variable-value">
-				{variableType === 'TEXTBOX' && (
-					<TextboxVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
+				{variableData.type === 'TEXTBOX' ? (
+					<Input
+						ref={textboxInputRef}
+						placeholder="Enter value"
+						data-testid={`variable-textbox-${variableData.id}`}
+						bordered={false}
+						value={textboxInputValue}
+						title={textboxInputValue}
+						onChange={(e): void => {
+							setTextboxInputValue(e.target.value);
+						}}
+						onFocus={(): void => {
+							setIsTextboxFocused(true);
+						}}
+						onBlur={(e): void => {
+							setIsTextboxFocused(false);
+							const value = e.target.value.trim();
+							// If empty, reset to default value
+							if (!value && variableData.defaultValue) {
+								setTextboxInputValue(variableData.defaultValue.toString());
+								debouncedHandleChange(variableData.defaultValue.toString());
+							} else {
+								debouncedHandleChange(value);
+							}
+						}}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								const value = textboxInputValue.trim();
+								if (!value && variableData.defaultValue) {
+									setTextboxInputValue(variableData.defaultValue.toString());
+									debouncedHandleChange(variableData.defaultValue.toString());
+								} else {
+									debouncedHandleChange(value);
+								}
+								textboxInputRef.current?.blur();
+							}
+						}}
 					/>
+				) : (
+					optionsData &&
+					(variableData.multiSelect ? (
+						<CustomMultiSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleTempChange}
+							bordered={false}
+							placeholder="Select value"
+							placement="bottomLeft"
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							popupClassName="dropdown-styles"
+							maxTagCount={2}
+							getPopupContainer={popupContainer}
+							value={tempSelection || selectValue}
+							onDropdownVisibleChange={handleDropdownVisibleChange}
+							errorMessage={errorMessage}
+							// eslint-disable-next-line react/no-unstable-nested-components
+							maxTagPlaceholder={(omittedValues): JSX.Element => {
+								const maxDisplayValues = 10;
+								const valuesToShow = omittedValues.slice(0, maxDisplayValues);
+								const hasMore = omittedValues.length > maxDisplayValues;
+								const tooltipText =
+									valuesToShow.map(({ value }) => value).join(', ') +
+									(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
+
+								return (
+									<Tooltip title={tooltipText}>
+										<span>+ {omittedValues.length} </span>
+									</Tooltip>
+								);
+							}}
+							onClear={(): void => {
+								handleChange([]);
+							}}
+							enableAllSelection={enableSelectAll}
+							maxTagTextLength={30}
+							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
+							onRetry={(): void => {
+								setErrorMessage(null);
+								refetch();
+							}}
+						/>
+					) : (
+						<CustomSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleChange}
+							bordered={false}
+							placeholder="Select value"
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							popupClassName="dropdown-styles"
+							getPopupContainer={popupContainer}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							value={selectValue}
+							errorMessage={errorMessage}
+							onRetry={(): void => {
+								setErrorMessage(null);
+								refetch();
+							}}
+						/>
+					))
 				)}
-				{variableType === 'CUSTOM' && (
-					<CustomVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-					/>
-				)}
-				{variableType === 'QUERY' && (
-					<QueryVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-						existingVariables={existingVariables}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
-					/>
-				)}
-				{variableType === 'DYNAMIC' && (
-					<DynamicVariableInput
-						variableData={variableData}
-						onValueUpdate={onValueUpdate}
-						existingVariables={existingVariables}
-					/>
+				{variableData.type !== 'TEXTBOX' && errorMessage && (
+					<span style={{ margin: '0 0.5rem' }}>
+						<Popover
+							placement="top"
+							content={<Typography>{errorMessage}</Typography>}
+						>
+							<WarningOutlined style={{ color: orange[5] }} />
+						</Popover>
+					</span>
 				)}
 			</div>
 		</div>
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/test/DynamicVariableSelection.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/test/DynamicVariableSelection.test.tsx
@@ -5,7 +5,7 @@ import * as ReactRedux from 'react-redux';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

-import DynamicVariableInput from '../DynamicVariableInput';
+import DynamicVariableSelection from '../DynamicVariableSelection';

 // Don't mock the components - use real ones

@@ -54,7 +54,7 @@ const mockApiResponse = {
 // Mock scrollIntoView since it's not available in JSDOM
 window.HTMLElement.prototype.scrollIntoView = jest.fn();

-describe('DynamicVariableInput Component', () => {
+describe('DynamicVariableSelection Component', () => {
 	const mockOnValueUpdate = jest.fn();

 	const mockDynamicVariableData: IDashboardVariable = {
@@ -108,13 +108,18 @@ describe('DynamicVariableInput Component', () => {

 	it('renders with single select variable correctly', () => {
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);

+		// Verify component renders correctly
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// Verify the selected value is displayed
 		const selectedItem = screen.getByRole('combobox');
 		expect(selectedItem).toBeInTheDocument();
@@ -131,13 +136,18 @@ describe('DynamicVariableInput Component', () => {
 		};

 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={multiSelectWithAllSelected}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);

+		// Verify variable name is rendered
+		expect(
+			screen.getByText(`$${multiSelectWithAllSelected.name}`),
+		).toBeInTheDocument();
+
 		// In ALL selected mode, there should be an "ALL" text element
 		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
@@ -154,13 +164,18 @@ describe('DynamicVariableInput Component', () => {
 		});

 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);

+		// Verify component renders in loading state
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// Open dropdown to see loading text
 		const selectElement = screen.getByRole('combobox');
 		fireEvent.mouseDown(selectElement);
@@ -184,13 +199,18 @@ describe('DynamicVariableInput Component', () => {
 		});

 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);

+		// Verify the component renders
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
 		// For error states, we should check that error handling is in place
 		// Without opening the dropdown as the error message might be handled differently
 		expect(ReactQuery.useQuery).toHaveBeenCalled();
@@ -199,7 +219,7 @@ describe('DynamicVariableInput Component', () => {

 	it('makes API call to fetch variable values', () => {
 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={mockDynamicVariableData}
 				existingVariables={mockExistingVariables}
 				onValueUpdate={mockOnValueUpdate}
@@ -215,8 +235,6 @@ describe('DynamicVariableInput Component', () => {
 				'2023-01-01T00:00:00Z', // minTime from useSelector mock
 				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
 				'',
-				'Traces',
-				'service.name',
 			],
 			expect.objectContaining({
 				enabled: true, // Type is 'DYNAMIC'
@@ -237,13 +255,16 @@ describe('DynamicVariableInput Component', () => {
 		};

 		render(
-			<DynamicVariableInput
+			<DynamicVariableSelection
 				variableData={customVariable}
 				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
 				onValueUpdate={mockOnValueUpdate}
 			/>,
 		);

+		// Verify the component correctly displays the selected value
+		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
+
 		// Find the selection item in the component using data-testid
 		const selectElement = screen.getByTestId('variable-select');
 		expect(selectElement).toBeInTheDocument();
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/test/VariableItem.defaulting.behavior.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/test/VariableItem.defaulting.behavior.test.tsx
@@ -63,10 +63,10 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});

-			expect(await screen.findByText('option1')).toBeInTheDocument();
+			expect(screen.getByText('option1')).toBeInTheDocument();
 		});

-		test('should auto-select first option when no previous and no default', async () => {
+		test('should show placeholder when no previous and no default', async () => {
 			const variable: IDashboardVariable = {
 				id: TEST_VARIABLE_ID,
 				name: TEST_VARIABLE_NAME,
@@ -85,8 +85,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});

-			// With the new variable select strategy, the first option is auto-selected
-			expect(await screen.findByText('option1')).toBeInTheDocument();
+			expect(screen.getByText('Select value')).toBeInTheDocument();
 		});
 	});

@@ -111,7 +110,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});

-			expect(await screen.findByText('ALL')).toBeInTheDocument();
+			expect(screen.getByText('ALL')).toBeInTheDocument();
 		});
 	});

@@ -135,7 +134,7 @@ describe('VariableItem Default Value Selection Behavior', () => {
 				expect(screen.getByTestId(VARIABLE_SELECT_TESTID)).toBeInTheDocument();
 			});

-			expect(await screen.findByText('Select value')).toBeInTheDocument();
+			expect(screen.getByText('Select value')).toBeInTheDocument();
 		});
 	});
 });
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts
@@ -1,252 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { isEmpty } from 'lodash-es';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { areArraysEqual, getSelectValue } from './util';
-import { VariableSelectStrategy } from './variableSelectStrategy/variableSelectStrategyTypes';
-import {
-	areArraysEqualIgnoreOrder,
-	uniqueValues,
-} from './variableSelectStrategy/variableSelectStrategyUtils';
-
-interface UseDashboardVariableSelectHelperParams {
-	variableData: IDashboardVariable;
-	optionsData: (string | number | boolean)[];
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-	strategy: VariableSelectStrategy;
-	/** Override for all available option strings (default: optionsData.map(String)) */
-	allAvailableOptionStrings?: string[];
-}
-
-interface UseDashboardVariableSelectHelperReturn {
-	// State
-	tempSelection: string | string[] | undefined;
-	setTempSelection: React.Dispatch<
-		React.SetStateAction<string | string[] | undefined>
-	>;
-	value: string | string[] | undefined;
-	defaultValue: string | string[] | undefined;
-
-	// Derived values
-	enableSelectAll: boolean;
-
-	// Handlers
-	onChange: (value: string | string[]) => void;
-	onDropdownVisibleChange: (visible: boolean) => void;
-	handleClear: () => void;
-
-	// Default value helpers
-	applyDefaultIfNeeded: (
-		overrideOptions?: (string | number | boolean)[],
-	) => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function useDashboardVariableSelectHelper({
-	variableData,
-	optionsData,
-	onValueUpdate,
-	strategy,
-	allAvailableOptionStrings,
-}: UseDashboardVariableSelectHelperParams): UseDashboardVariableSelectHelperReturn {
-	const { selectedValue } = variableData;
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const effectiveAllAvailableOptionStrings = useMemo(
-		() => allAvailableOptionStrings ?? optionsData.map((v) => v.toString()),
-		[allAvailableOptionStrings, optionsData],
-	);
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
-			: selectedValueStringified;
-
-	const getDefaultValue = useCallback(
-		(overrideOptions?: (string | number | boolean)[]) => {
-			const options = overrideOptions || optionsData;
-			if (variableData.multiSelect) {
-				if (variableData.showALLOption) {
-					return variableData.defaultValue || options.map((o) => o.toString());
-				}
-				return variableData.defaultValue || options?.[0]?.toString();
-			}
-			return variableData.defaultValue || options[0]?.toString();
-		},
-		[
-			variableData.multiSelect,
-			variableData.showALLOption,
-			variableData.defaultValue,
-			optionsData,
-		],
-	);
-
-	const defaultValue = useMemo(() => getDefaultValue(), [getDefaultValue]);
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-
-			strategy.handleChange({
-				value,
-				variableData,
-				optionsData,
-				allAvailableOptionStrings: effectiveAllAvailableOptionStrings,
-				onValueUpdate,
-			});
-		},
-		[
-			variableData,
-			optionsData,
-			effectiveAllAvailableOptionStrings,
-			onValueUpdate,
-			strategy,
-		],
-	);
-
-	const handleTempChange = useCallback(
-		(inputValue: string | string[]): void => {
-			// Store the selection in temporary state while dropdown is open
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			setTempSelection(uniqueValues(value));
-		},
-		[variableData.multiSelect],
-	);
-
-	// Single select onChange: apply default if value is empty
-	const handleSingleSelectChange = useCallback(
-		(inputValue: string | string[]): void => {
-			if (isEmpty(inputValue)) {
-				if (defaultValue !== undefined) {
-					handleChange(defaultValue as string | string[]);
-				}
-				return;
-			}
-			handleChange(inputValue);
-		},
-		[handleChange, defaultValue],
-	);
-
-	// Handle dropdown visibility changes
-	const onDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			// Initialize temp selection when opening dropdown
-			if (visible) {
-				if (variableData.allSelected && enableSelectAll) {
-					// When ALL is selected, show all available options as individually checked
-					setTempSelection([...effectiveAllAvailableOptionStrings]);
-				} else {
-					setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-				}
-			}
-			// Apply changes when closing dropdown
-			else if (!visible && tempSelection !== undefined) {
-				// If ALL was selected before AND all options remain selected, skip updating
-				const wasAllSelected = enableSelectAll && variableData.allSelected;
-				const isAllSelectedAfter =
-					enableSelectAll &&
-					Array.isArray(tempSelection) &&
-					tempSelection.length === effectiveAllAvailableOptionStrings.length &&
-					effectiveAllAvailableOptionStrings.every((v) => tempSelection.includes(v));
-
-				if (wasAllSelected && isAllSelectedAfter) {
-					setTempSelection(undefined);
-					return;
-				}
-
-				// Apply default if closing with empty selection
-				let valueToApply = tempSelection;
-				if (isEmpty(tempSelection) && defaultValue !== undefined) {
-					valueToApply = defaultValue as string | string[];
-				}
-
-				// Order-agnostic change detection
-				const currentValue = variableData.selectedValue;
-				const hasChanged =
-					valueToApply !== currentValue &&
-					!(
-						Array.isArray(valueToApply) &&
-						Array.isArray(currentValue) &&
-						areArraysEqualIgnoreOrder(valueToApply, currentValue)
-					);
-
-				if (hasChanged) {
-					handleChange(valueToApply);
-				}
-				setTempSelection(undefined);
-			}
-		},
-		[
-			variableData,
-			enableSelectAll,
-			effectiveAllAvailableOptionStrings,
-			tempSelection,
-			handleChange,
-			defaultValue,
-		],
-	);
-
-	// Explicit function for callers to apply default on mount / data load
-	// Pass overrideOptions when freshly-loaded options aren't in state yet (async callers)
-	const applyDefaultIfNeeded = useCallback(
-		(overrideOptions?: (string | number | boolean)[]): void => {
-			if (isEmpty(selectValue)) {
-				const defaultValueFromOptions = getDefaultValue(overrideOptions);
-				if (defaultValueFromOptions !== undefined) {
-					handleChange(defaultValueFromOptions as string | string[]);
-				}
-			}
-		},
-		[selectValue, handleChange, getDefaultValue],
-	);
-
-	const handleClear = useCallback((): void => {
-		handleChange([]);
-	}, [handleChange]);
-
-	const value = variableData.multiSelect
-		? tempSelection || selectValue
-		: selectValue;
-
-	const onChange = useMemo(() => {
-		return variableData.multiSelect ? handleTempChange : handleSingleSelectChange;
-	}, [variableData.multiSelect, handleTempChange, handleSingleSelectChange]);
-
-	return {
-		tempSelection,
-		setTempSelection,
-		enableSelectAll,
-		onDropdownVisibleChange,
-		handleClear,
-		value,
-		defaultValue,
-		onChange,
-		applyDefaultIfNeeded,
-	};
-}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';

--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
@@ -1,9 +1,6 @@
 import { OptionData } from 'components/NewSelect/types';
 import { isEmpty, isNull } from 'lodash-es';
-import {
-	IDashboardVariables,
-	IDependencyData,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

 export function areArraysEqual(
@@ -100,6 +97,14 @@ export const buildDependencies = (
 	return graph;
 };

+export interface IDependencyData {
+	order: string[];
+	graph: VariableGraph;
+	parentDependencyGraph: VariableGraph;
+	hasCycle: boolean;
+	cycleNodes?: string[];
+}
+
 export const buildParentDependencyGraph = (
 	graph: VariableGraph,
 ): VariableGraph => {
@@ -363,15 +368,21 @@ export const uniqueOptions = (options: OptionData[]): OptionData[] => {
 	return uniqueOptions;
 };

-export const getSelectValue = (
-	selectedValue: IDashboardVariable['selectedValue'],
-	variableData: IDashboardVariable,
-): string | string[] | undefined => {
-	if (Array.isArray(selectedValue)) {
-		if (!variableData.multiSelect && selectedValue.length === 1) {
-			return selectedValue[0]?.toString();
-		}
-		return selectedValue.map((item) => item.toString());
+export const uniqueValues = (values: string[] | string): string[] | string => {
+	if (Array.isArray(values)) {
+		const uniqueValues: string[] = [];
+		const seenValues = new Set<string>();
+
+		values.forEach((value) => {
+			if (seenValues.has(value)) {
+				return;
+			}
+			seenValues.add(value);
+			uniqueValues.push(value);
+		});
+
+		return uniqueValues;
 	}
-	return selectedValue?.toString();
+
+	return values;
 };
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx
@@ -1,4 +0,0 @@
-import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const customVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx
@@ -1,20 +0,0 @@
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const defaultVariableSelectStrategy: VariableSelectStrategy = {
-	handleChange({ value, variableData, optionsData, onValueUpdate }) {
-		if (!variableData.name) {
-			return;
-		}
-
-		const isAllSelected =
-			Array.isArray(value) &&
-			value.length > 0 &&
-			optionsData.every((option) => value.includes(option.toString()));
-
-		if (isAllSelected && variableData.showALLOption) {
-			onValueUpdate(variableData.name, variableData.id, optionsData, true);
-		} else {
-			onValueUpdate(variableData.name, variableData.id, value, false);
-		}
-	},
-};
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx
@@ -1,37 +0,0 @@
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const dynamicVariableSelectStrategy: VariableSelectStrategy = {
-	handleChange({
-		value,
-		variableData,
-		allAvailableOptionStrings,
-		onValueUpdate,
-	}) {
-		if (!variableData.name) {
-			return;
-		}
-
-		if (
-			value === ALL_SELECT_VALUE ||
-			(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-		) {
-			onValueUpdate(variableData.name, variableData.id, null, true);
-		} else {
-			// For ALL selection in dynamic variables, pass null to avoid storing values
-			// The parent component will handle this appropriately
-			const haveCustomValuesSelected =
-				Array.isArray(value) &&
-				!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
-
-			onValueUpdate(
-				variableData.name,
-				variableData.id,
-				value,
-				allAvailableOptionStrings.every((v) => value.includes(v.toString())),
-				haveCustomValuesSelected,
-			);
-		}
-	},
-};
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx
@@ -1,4 +0,0 @@
-import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
-import { VariableSelectStrategy } from './variableSelectStrategyTypes';
-
-export const queryVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts
@@ -1,17 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-export interface VariableSelectStrategy {
-	handleChange(params: {
-		value: string | string[];
-		variableData: IDashboardVariable;
-		optionsData: (string | number | boolean)[];
-		allAvailableOptionStrings: string[];
-		onValueUpdate: (
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-		) => void;
-	}): void;
-}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts
@@ -1,32 +0,0 @@
-import { isEqual } from 'lodash-es';
-
-export const areArraysEqualIgnoreOrder = (
-	a: (string | number | boolean)[],
-	b: (string | number | boolean)[],
-): boolean => {
-	if (a.length !== b.length) {
-		return false;
-	}
-	const sortedA = [...a].sort();
-	const sortedB = [...b].sort();
-	return isEqual(sortedA, sortedB);
-};
-
-export const uniqueValues = (values: string[] | string): string[] | string => {
-	if (Array.isArray(values)) {
-		const uniqueValues: string[] = [];
-		const seenValues = new Set<string>();
-
-		values.forEach((value) => {
-			if (seenValues.has(value)) {
-				return;
-			}
-			seenValues.add(value);
-			uniqueValues.push(value);
-		});
-
-		return uniqueValues;
-	}
-
-	return values;
-};
--- a/frontend/src/container/DashboardContainer/test/DynamicVariableDefaultBehavior.test.tsx
+++ b/frontend/src/container/DashboardContainer/test/DynamicVariableDefaultBehavior.test.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import * as ReactRedux from 'react-redux';
 import {
 	act,
@@ -15,22 +15,13 @@ import {
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

-import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
+import DynamicVariableSelection from '../DashboardVariablesSelection/DynamicVariableSelection';

 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
 }));

-// Mock useQuery from react-query
-jest.mock('react-query', () => {
-	const originalModule = jest.requireActual('react-query');
-	return {
-		...originalModule,
-		useQuery: jest.fn(),
-	};
-});
-
 describe('Dynamic Variable Default Behavior', () => {
 	const mockOnValueUpdate = jest.fn();
 	const mockApiResponse = {
@@ -68,46 +59,6 @@ describe('Dynamic Variable Default Behavior', () => {
 		// Mock getFieldValues API to return our test data
 		(getFieldValues as jest.Mock).mockResolvedValue(mockApiResponse);

-		// Mock useQuery implementation to avoid infinite re-renders
-		// and ensure onSuccess is called once
-		(useQuery as jest.Mock).mockImplementation((key, options) => {
-			const { onSuccess, enabled, queryFn } = options || {};
-			const variableName = key[1];
-			const dynamicVarsKey = key[2];
-
-			React.useEffect(() => {
-				if (enabled !== false) {
-					if (onSuccess) {
-						// For 'services' tests:
-						// 1. "Default to ALL" expectations imply empty options -> [] behavior. This happens when selectedValue is undefined (dynamicVarsKey has 'null').
-						// 2. "ALL Option Special Value" needs full options to render the "ALL" item in dropdown. This happens when selectedValue is defined.
-						if (
-							variableName === 'services' &&
-							typeof dynamicVarsKey === 'string' &&
-							dynamicVarsKey.includes('null')
-						) {
-							onSuccess({
-								...mockApiResponse,
-								data: { ...mockApiResponse.data, normalizedValues: [] },
-							});
-						} else {
-							onSuccess(mockApiResponse);
-						}
-					}
-					if (queryFn) {
-						queryFn();
-					}
-				}
-			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
-
-			return {
-				isLoading: false,
-				isError: false,
-				data: mockApiResponse,
-				refetch: jest.fn(),
-			};
-		});
-
 		jest.spyOn(ReactRedux, 'useSelector').mockReturnValue({
 			minTime: '2023-01-01T00:00:00Z',
 			maxTime: '2023-01-02T00:00:00Z',
@@ -133,7 +84,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -169,7 +120,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -213,7 +164,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -221,6 +172,9 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});

+			// Component should render without errors
+			expect(screen.getByText('$service')).toBeInTheDocument();
+
 			// Check if the dropdown is present
 			const selectElement = screen.getByRole('combobox');
 			expect(selectElement).toBeInTheDocument();
@@ -278,7 +232,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -313,7 +267,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -339,7 +293,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(screen.queryByText('backend')).not.toBeInTheDocument();
 		});

-		it('sahould default to ALL when no default and no previous selection', async () => {
+		it('should default to ALL when no default and no previous selection', async () => {
 			const variableData: IDashboardVariable = {
 				id: 'var21',
 				name: 'services',
@@ -357,7 +311,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -391,7 +345,7 @@ describe('Dynamic Variable Default Behavior', () => {
 			expect(mockOnValueUpdate).toHaveBeenCalledWith(
 				'services',
 				'var21',
-				[],
+				[], // Empty array when allSelected is true
 				true, // allSelected = true
 				false,
 			);
@@ -417,7 +371,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -454,7 +408,7 @@ describe('Dynamic Variable Default Behavior', () => {

 			await act(async () => {
 				renderWithQueryClient(
-					<DynamicVariableInput
+					<DynamicVariableSelection
 						variableData={variableData}
 						existingVariables={{ var1: variableData }}
 						onValueUpdate={mockOnValueUpdate}
@@ -462,6 +416,9 @@ describe('Dynamic Variable Default Behavior', () => {
 				);
 			});

+			// Component should render without errors
+			expect(screen.getByText('$services')).toBeInTheDocument();
+
 			// Check if ALL is displayed in the UI (in the main selection area)
 			const allTextElement = screen.getByText('ALL');
 			expect(allTextElement).toBeInTheDocument();
--- a/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
@@ -1,104 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import _noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function TimeSeries({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	disableTooltip = false,
-	canPinTooltip = false,
-	timezone,
-	yAxisUnit,
-	decimalPrecision,
-	syncMode,
-	syncKey,
-	onDestroy = _noop,
-	children,
-	layoutChildren,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{!disableTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={(props: TooltipRenderArgs): React.ReactNode => (
-									<Tooltip
-										{...props}
-										timezone={timezone}
-										yAxisUnit={yAxisUnit}
-										decimalPrecision={decimalPrecision}
-									/>
-								)}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}
--- a/frontend/src/container/DashboardContainer/visualization/charts/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/types.ts
@@ -1,29 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig } from 'lib/uPlotV2/components/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-interface BaseChartProps {
-	width: number;
-	height: number;
-	disableTooltip?: boolean;
-	timezone: string;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
-	canPinTooltip?: boolean;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}
-
-interface TimeSeriesChartProps extends BaseChartProps {
-	config: UPlotConfigBuilder;
-	legendConfig: LegendConfig;
-	data: uPlot.AlignedData;
-	plotRef?: (plot: uPlot | null) => void;
-	onDestroy?: (plot: uPlot) => void;
-	children?: React.ReactNode;
-	layoutChildren?: React.ReactNode;
-	'data-testid'?: string;
-}
-
-export type ChartProps = TimeSeriesChartProps;
--- a/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
@@ -5,32 +5,25 @@ export interface ChartDimensions {
 	height: number;
 	legendWidth: number;
 	legendHeight: number;
-	averageLegendWidth: number;
+	legendsPerSet: number;
 }

 const AVG_CHAR_WIDTH = 8;
-const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
-const BASE_LEGEND_WIDTH = 16;
+const LEGEND_GAP = 16;
 const LEGEND_PADDING = 12;
-const LEGEND_LINE_HEIGHT = 28;
+const LEGEND_LINE_HEIGHT = 36;

 /**
- * Calculates the average width of the legend items based on the labels of the series.
- * @param legends - The labels of the series.
- * @returns The average width of the legend items.
+ * Average text width from series labels (for legendsPerSet).
 */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
+		return DEFAULT_AVG_LABEL_LENGTH;
 	}
-
-	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
-
-	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
-	const percentileLength = lengths[Math.max(0, index)];
-
-	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
+	const averageLabelLength =
+		legends.reduce((sum, l) => sum + l.length, 0) / legends.length;
+	return averageLabelLength * AVG_CHAR_WIDTH;
 }

 /**
@@ -71,7 +64,7 @@ export function calculateChartDimensions({
 			height: 0,
 			legendWidth: 0,
 			legendHeight: 0,
-			averageLegendWidth: 0,
+			legendsPerSet: 0,
 		};
 	}

@@ -92,15 +85,13 @@ export function calculateChartDimensions({
 			legendWidth: rightLegendWidth,
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
-			averageLegendWidth: rightLegendWidth,
+			legendsPerSet: 1,
 		};
 	}

 	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;

-	const legendItemWidth = Math.ceil(
-		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
-	);
+	const legendItemWidth = Math.min(approxLegendItemWidth, 400);
 	const legendItemsPerRow = Math.max(
 		1,
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
@@ -123,11 +114,17 @@ export function calculateChartDimensions({
 		maxAllowedLegendHeight,
 	);

+	// How many legend items per row in the Legend component.
+	const legendsPerSet = Math.ceil(
+		(containerWidth + LEGEND_GAP) /
+			(Math.min(MAX_LEGEND_WIDTH, approxLegendItemWidth) + LEGEND_GAP),
+	);
+
 	return {
 		width: containerWidth,
 		height: Math.max(0, containerHeight - bottomLegendHeight),
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
-		averageLegendWidth: legendItemWidth,
+		legendsPerSet,
 	};
 }
--- a/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss
+++ b/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss
@@ -1,21 +0,0 @@
-.chart-manager-container {
-	width: 100%;
-	max-height: calc(40% - 40px);
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.chart-manager-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 16px;
-
-		.chart-manager-actions-container {
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-}
--- a/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
@@ -1,147 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Input } from 'antd';
-import { ResizeTable } from 'components/ResizeTable';
-import { getGraphManagerTableColumns } from 'container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns';
-import { ExtendedChartDataset } from 'container/GridCardLayout/GridCard/FullView/types';
-import { getDefaultTableDataSet } from 'container/GridCardLayout/GridCard/FullView/utils';
-import { useNotifications } from 'hooks/useNotifications';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-
-import './ChartManager.styles.scss';
-
-interface ChartManagerProps {
-	config: UPlotConfigBuilder;
-	alignedData: uPlot.AlignedData;
-	yAxisUnit?: string;
-	onCancel?: () => void;
-}
-
-/**
- * ChartManager provides a tabular view to manage the visibility of
- * individual series on a uPlot chart.
- *
- * It syncs with the legend state coming from the plot context and
- * allows users to:
- * - filter series by label
- * - toggle individual series on/off
- * - persist the visibility configuration to local storage.
- *
- * @param config - `UPlotConfigBuilder` instance used to derive chart options.
- * @param alignedData - uPlot aligned data used to build the initial table dataset.
- * @param yAxisUnit - Optional unit label for Y-axis values shown in the table.
- * @param onCancel - Optional callback invoked when the user cancels the dialog.
- */
-export default function ChartManager({
-	config,
-	alignedData,
-	yAxisUnit,
-	onCancel,
-}: ChartManagerProps): JSX.Element {
-	const { notifications } = useNotifications();
-	const { legendItemsMap } = useLegendsSync({
-		config,
-		subscribeToFocusChange: false,
-	});
-	const {
-		onToggleSeriesOnOff,
-		onToggleSeriesVisibility,
-		syncSeriesVisibilityToLocalStorage,
-	} = usePlotContext();
-	const { isDashboardLocked } = useDashboard();
-
-	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
-		getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
-	);
-
-	const graphVisibilityState = useMemo(
-		() =>
-			Object.entries(legendItemsMap).reduce<boolean[]>((acc, [key, item]) => {
-				acc[Number(key)] = item.show;
-				return acc;
-			}, []),
-		[legendItemsMap],
-	);
-
-	useEffect(() => {
-		setTableDataSet(
-			getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
-		);
-	}, [alignedData, config]);
-
-	const filterHandler = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = event.target.value.toString().toLowerCase();
-			const updatedDataSet = tableDataSet.map((item) => {
-				if (item.label?.toLocaleLowerCase().includes(value)) {
-					return { ...item, show: true };
-				}
-				return { ...item, show: false };
-			});
-			setTableDataSet(updatedDataSet);
-		},
-		[tableDataSet],
-	);
-
-	const dataSource = useMemo(
-		() =>
-			tableDataSet.filter(
-				(item, index) => index !== 0 && item.show, // skipping the first item as it is the x-axis
-			),
-		[tableDataSet],
-	);
-
-	const columns = useMemo(
-		() =>
-			getGraphManagerTableColumns({
-				tableDataSet,
-				checkBoxOnChangeHandler: (_e, index) => {
-					onToggleSeriesOnOff(index);
-				},
-				graphVisibilityState,
-				labelClickedHandler: onToggleSeriesVisibility,
-				yAxisUnit,
-				isGraphDisabled: isDashboardLocked,
-			}),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[tableDataSet, graphVisibilityState, yAxisUnit, isDashboardLocked],
-	);
-
-	const handleSave = useCallback((): void => {
-		syncSeriesVisibilityToLocalStorage();
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
-		if (onCancel) {
-			onCancel();
-		}
-	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
-
-	return (
-		<div className="chart-manager-container">
-			<div className="chart-manager-header">
-				<Input onChange={filterHandler} placeholder="Filter Series" />
-				<div className="chart-manager-actions-container">
-					<Button type="default" onClick={onCancel}>
-						Cancel
-					</Button>
-					<Button type="primary" onClick={handleSave}>
-						Save
-					</Button>
-				</div>
-			</div>
-			<div className="chart-manager-table-container">
-				<ResizeTable
-					columns={columns}
-					dataSource={dataSource}
-					virtual
-					rowKey="index"
-					scroll={{ y: 200 }}
-					pagination={false}
-				/>
-			</div>
-		</div>
-	);
-}
--- a/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
+++ b/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
@@ -1,120 +0,0 @@
-import { useCallback } from 'react';
-import { UseQueryResult } from 'react-query';
-import {
-	getTimeRangeFromStepInterval,
-	isApmMetric,
-} from 'container/PanelWrapper/utils';
-import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
-import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
-import {
-	PopoverPosition,
-	useCoordinates,
-} from 'periscope/components/ContextMenu';
-import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-interface UseTimeSeriesContextMenuParams {
-	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
-}
-
-export const usePanelContextMenu = ({
-	widget,
-	queryResponse,
-}: UseTimeSeriesContextMenuParams): {
-	coordinates: { x: number; y: number } | null;
-	popoverPosition: PopoverPosition | null;
-	onClose: () => void;
-	menuItemsConfig: {
-		header?: string | React.ReactNode;
-		items?: React.ReactNode;
-	};
-	clickHandlerWithContextMenu: (...args: any[]) => void;
-} => {
-	const {
-		coordinates,
-		popoverPosition,
-		clickedData,
-		onClose,
-		subMenu,
-		onClick,
-		setSubMenu,
-	} = useCoordinates();
-
-	const { menuItemsConfig } = useGraphContextMenu({
-		widgetId: widget.id || '',
-		query: widget.query,
-		graphData: clickedData,
-		onClose,
-		coordinates,
-		subMenu,
-		setSubMenu,
-		contextLinks: widget.contextLinks,
-		panelType: widget.panelTypes,
-		queryRange: queryResponse,
-	});
-
-	const clickHandlerWithContextMenu = useCallback(
-		(...args: any[]) => {
-			const [
-				xValue,
-				_yvalue,
-				_mouseX,
-				_mouseY,
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				axesData,
-				focusedSeries,
-			] = args;
-
-			const data = getUplotClickData({
-				metric,
-				queryData,
-				absoluteMouseX,
-				absoluteMouseY,
-				focusedSeries,
-			});
-
-			let timeRange;
-
-			if (axesData && queryData?.queryName) {
-				const compositeQuery = (queryResponse?.data?.params as any)?.compositeQuery;
-
-				if (compositeQuery?.queries) {
-					const specificQuery = compositeQuery.queries.find(
-						(query: any) => query.spec?.name === queryData.queryName,
-					);
-
-					const stepInterval = specificQuery?.spec?.stepInterval || 60;
-
-					timeRange = getTimeRangeFromStepInterval(
-						stepInterval,
-						metric?.clickedTimestamp || xValue,
-						specificQuery?.spec?.signal === DataSource.METRICS &&
-							isApmMetric(specificQuery?.spec?.aggregations[0]?.metricName),
-					);
-				}
-			}
-
-			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label, timeRange });
-			}
-		},
-		[onClick, queryResponse],
-	);
-
-	return {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	};
-};
--- a/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss
+++ b/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss
@@ -10,6 +10,7 @@

 		.chart-layout__legend-wrapper {
 			padding-left: 0 !important;
+			padding-right: 12px !important;
 		}
 	}

--- a/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx
@@ -11,7 +11,6 @@ export interface ChartLayoutProps {
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
-		averageLegendWidth: number;
 	}) => React.ReactNode;
 	layoutChildren?: React.ReactNode;
 	containerWidth: number;
@@ -57,7 +56,6 @@ export default function ChartLayout({
 					{children({
 						chartWidth: chartDimensions.width,
 						chartHeight: chartDimensions.height,
-						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
 				<div
@@ -67,7 +65,7 @@ export default function ChartLayout({
 						width: chartDimensions.legendWidth,
 					}}
 				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
+					{legendComponent(chartDimensions.legendsPerSet)}
 				</div>
 			</div>
 			{layoutChildren}
--- a/frontend/src/container/DashboardContainer/visualization/panels/Panel.styles.scss
+++ b/frontend/src/container/DashboardContainer/visualization/panels/Panel.styles.scss
@@ -1,4 +0,0 @@
-.panel-container {
-	height: 100%;
-	width: 100%;
-}
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -1,176 +0,0 @@
-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 { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { LineInterpolation } from 'lib/uPlotV2/config/types';
-import { ContextMenu } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
-
-import '../Panel.styles.scss';
-
-function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareChartData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const config = useMemo(() => {
-		const tzDate = (timestamp: number): Date =>
-			uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-
-		return prepareUPlotConfig({
-			widgetId: widget.id || '',
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			tzDate,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-			isLogScale: widget?.isLogScale ?? false,
-			thresholds: {
-				scaleKey: 'y',
-				thresholds: (widget.thresholds || []).map((threshold) => ({
-					thresholdValue: threshold.thresholdValue ?? 0,
-					thresholdColor: threshold.thresholdColor,
-					thresholdUnit: threshold.thresholdUnit,
-					thresholdLabel: threshold.thresholdLabel,
-				})),
-				yAxisUnit: widget.yAxisUnit,
-			},
-			yAxisUnit: widget.yAxisUnit || '',
-			softMin: widget.softMin === undefined ? null : widget.softMin,
-			softMax: widget.softMax === undefined ? null : widget.softMax,
-			spanGaps: false,
-			colorMapping: widget.customLegendColors ?? {},
-			lineInterpolation: LineInterpolation.Spline,
-			isDarkMode,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			currentQuery: widget.query,
-			panelMode,
-		});
-	}, [
-		widget.id,
-		maxTimeScale,
-		minTimeScale,
-		timezone.value,
-		widget.customLegendColors,
-		widget.isLogScale,
-		widget.softMax,
-		widget.softMin,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		widget.query,
-		widget.thresholds,
-		widget.yAxisUnit,
-		panelMode,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-	]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<TimeSeries
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</TimeSeries>
-			)}
-		</div>
-	);
-}
-
-export default TimeSeriesPanel;
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
@@ -1,170 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	fillMissingXAxisTimestamps,
-	getXAxisTimestamps,
-} from 'container/DashboardContainer/visualization/panels/utils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	SelectionPreferencesSource,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { PanelMode } from '../types';
-
-export const prepareChartData = (
-	apiResponse: MetricRangePayloadProps,
-): uPlot.AlignedData => {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-
-	return [timestampArr, ...yAxisValuesArr];
-};
-
-export const prepareUPlotConfig = ({
-	widgetId,
-	apiResponse,
-	tzDate,
-	minTimeScale,
-	maxTimeScale,
-	isLogScale,
-	thresholds,
-	softMin,
-	softMax,
-	spanGaps,
-	colorMapping,
-	lineInterpolation,
-	isDarkMode,
-	currentQuery,
-	onDragSelect,
-	onClick,
-	yAxisUnit,
-	panelMode,
-}: {
-	widgetId: string;
-	apiResponse: MetricRangePayloadProps;
-	tzDate: uPlot.LocalDateFromUnix;
-	minTimeScale: number | undefined;
-	maxTimeScale: number | undefined;
-	isLogScale: boolean;
-	softMin: number | null;
-	softMax: number | null;
-	spanGaps: boolean;
-	colorMapping: Record<string, string>;
-	lineInterpolation: LineInterpolation;
-	isDarkMode: boolean;
-	thresholds: ThresholdsDrawHookOptions;
-	currentQuery: Query;
-	yAxisUnit: string;
-	onDragSelect: (startTime: number, endTime: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	panelMode: PanelMode;
-}): UPlotConfigBuilder => {
-	const builder = new UPlotConfigBuilder({
-		onDragSelect,
-		widgetId,
-		tzDate,
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
-			: SelectionPreferencesSource.IN_MEMORY,
-	});
-
-	// X scale – time axis
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	// Y scale – value axis, driven primarily by softMin/softMax and data
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin: softMin ?? undefined,
-		softMax: softMax ?? undefined,
-		thresholds,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	builder.addThresholds(thresholds);
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({
-				onClick,
-				apiResponse,
-			}),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale: false,
-		panelType: PANEL_TYPES.TIME_SERIES,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale: false,
-		yAxisUnit,
-		panelType: PANEL_TYPES.TIME_SERIES,
-	});
-
-	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({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Line,
-			label: label,
-			colorMapping,
-			spanGaps,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-		});
-	});
-	return builder;
-};
--- a/frontend/src/container/DashboardContainer/visualization/panels/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/types.ts
@@ -13,16 +13,3 @@ export interface GraphVisibilityState {
 	name: string;
 	dataIndex: SeriesVisibilityItem[];
 }
-
-/**
- * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
- * interactions) per context.
- */
-export enum PanelMode {
-	/** Panel opened in full-screen / standalone view (e.g. from a dashboard widget). */
-	STANDALONE_VIEW = 'STANDALONE_VIEW',
-	/** Panel in the widget builder while editing a dashboard. */
-	DASHBOARD_EDIT = 'DASHBOARD_EDIT',
-	/** Panel rendered as a widget on a dashboard (read-only view). */
-	DASHBOARD_VIEW = 'DASHBOARD_VIEW',
-}
--- a/frontend/src/container/DashboardContainer/visualization/panels/utils/index.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/utils/index.ts
@@ -1,54 +0,0 @@
-import { normalizePlotValue } from 'lib/uPlotV2/utils/dataUtils';
-import { QueryData } from 'types/api/widgets/getQuery';
-
-export function getXAxisTimestamps(seriesList: QueryData[]): number[] {
-	const timestamps = new Set<number>();
-
-	seriesList.forEach((series: { values?: [number, string][] }) => {
-		if (series?.values) {
-			series.values.forEach((value) => {
-				timestamps.add(value[0]);
-			});
-		}
-	});
-
-	const timestampsArr = Array.from(timestamps);
-	timestampsArr.sort((a, b) => a - b);
-
-	return timestampsArr;
-}
-
-export function fillMissingXAxisTimestamps(
-	timestampArr: number[],
-	data: Array<{ values?: [number, string][] }>,
-): (number | null)[][] {
-	// Ensure we work with a sorted, de‑duplicated list of x-axis timestamps
-	const canonicalTimestamps = Array.from(new Set(timestampArr)).sort(
-		(a, b) => a - b,
-	);
-
-	return data.map(({ values }) =>
-		buildSeriesYValues(canonicalTimestamps, values),
-	);
-}
-
-function buildSeriesYValues(
-	timestamps: number[],
-	values?: [number, string][],
-): (number | null)[] {
-	if (!values?.length) {
-		return [];
-	}
-
-	const valueByTimestamp = new Map<number, number | null>();
-
-	for (let i = 0; i < values.length; i++) {
-		const [timestamp, rawValue] = values[i];
-		valueByTimestamp.set(timestamp, normalizePlotValue(rawValue));
-	}
-
-	return timestamps.map((timestamp) => {
-		const value = valueByTimestamp.get(timestamp);
-		return value !== undefined ? value : null;
-	});
-}
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/tests/PanelWrapperDragSelect.test.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/tests/PanelWrapperDragSelect.test.tsx
@@ -2,7 +2,6 @@

 import { MutableRefObject } from 'react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { render, screen, waitFor } from 'tests/test-utils';
@@ -157,7 +156,6 @@ describe('PanelWrapper with DragSelect', () => {

 		render(
 			<PanelWrapper
-				panelMode={PanelMode.STANDALONE_VIEW}
 				widget={mockWidget}
 				queryResponse={mockQueryResponse}
 				onDragSelect={mockOnDragSelect}
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -17,7 +17,6 @@ import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import useDrilldown from 'container/GridCardLayout/GridCard/FullView/useDrilldown';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import {
@@ -33,8 +32,8 @@ import { useChartMutable } from 'hooks/useChartMutable';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import GetMinMax from 'lib/getMinMax';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
@@ -367,7 +366,6 @@ function FullView({
 								/>
 							)}
 							<PanelWrapper
-								panelMode={PanelMode.STANDALONE_VIEW}
 								queryResponse={response}
 								widget={widget}
 								setRequestData={setRequestData}
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -14,7 +14,6 @@ import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplor
 import { ToggleGraphProps } from 'components/Graph/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { placeWidgetAtBottom } from 'container/NewWidget/utils';
 import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
 import useGetResolvedText from 'hooks/dashboard/useGetResolvedText';
@@ -408,7 +407,6 @@ function WidgetGraphComponent({
 					ref={graphRef}
 				>
 					<PanelWrapper
-						panelMode={PanelMode.DASHBOARD_VIEW}
 						widget={widget}
 						queryResponse={queryResponse}
 						setRequestData={setRequestData}
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -8,8 +8,8 @@ import { populateMultipleResults } from 'container/NewWidget/LeftContainer/Widge
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -4,7 +4,7 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
--- a/frontend/src/container/GridCardLayout/useResolveQuery.ts
+++ b/frontend/src/container/GridCardLayout/useResolveQuery.ts
@@ -6,7 +6,7 @@ import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AppState } from 'store/reducers';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -13,7 +13,6 @@ import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplor
 import { ToggleGraphProps } from 'components/Graph/types';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
 import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
 import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
@@ -184,7 +183,6 @@ function WidgetGraph({
 			}}
 		>
 			<PanelWrapper
-				panelMode={PanelMode.DASHBOARD_EDIT}
 				widget={selectedWidget}
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -27,8 +27,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
--- a/frontend/src/container/PanelWrapper/PanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
@@ -21,7 +21,6 @@ function PanelWrapper({
 	onOpenTraceBtnClick,
 	customSeries,
 	customOnRowClick,
-	panelMode,
 	enableDrillDown = false,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
@@ -34,7 +33,6 @@ function PanelWrapper({
 	}
 	return (
 		<Component
-			panelMode={panelMode}
 			widget={widget}
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
--- a/frontend/src/container/PanelWrapper/tests/TablePanelWrapper.test.tsx
+++ b/frontend/src/container/PanelWrapper/tests/TablePanelWrapper.test.tsx
@@ -1,4 +1,3 @@
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { render } from 'tests/test-utils';
 import { Widgets } from 'types/api/dashboard/getAll';

@@ -12,7 +11,6 @@ describe('Table panel wrappper tests', () => {
 	it('table should render fine with the query response and column units', () => {
 		const { container, getByText } = render(
 			<TablePanelWrapper
-				panelMode={PanelMode.DASHBOARD_VIEW}
 				widget={(tablePanelWidgetQuery as unknown) as Widgets}
 				queryResponse={(tablePanelQueryResponse as unknown) as any}
 				onDragSelect={(): void => {}}
--- a/frontend/src/container/PanelWrapper/tests/ValuePanelWrapper.test.tsx
+++ b/frontend/src/container/PanelWrapper/tests/ValuePanelWrapper.test.tsx
@@ -1,4 +1,3 @@
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { render } from 'tests/test-utils';
 import { Widgets } from 'types/api/dashboard/getAll';

@@ -21,7 +20,6 @@ describe('Value panel wrappper tests', () => {
 	it('should render value panel correctly with yaxis unit', () => {
 		const { getByText } = render(
 			<ValuePanelWrapper
-				panelMode={PanelMode.DASHBOARD_VIEW}
 				widget={(valuePanelWidget as unknown) as Widgets}
 				queryResponse={(valuePanelQueryResponse as unknown) as any}
 				onDragSelect={(): void => {}}
@@ -36,7 +34,6 @@ describe('Value panel wrappper tests', () => {
 	it('should render tooltip when there are conflicting thresholds', () => {
 		const { getByTestId, container } = render(
 			<ValuePanelWrapper
-				panelMode={PanelMode.DASHBOARD_VIEW}
 				widget={({ ...valuePanelWidget, thresholds } as unknown) as Widgets}
 				queryResponse={(valuePanelQueryResponse as unknown) as any}
 				onDragSelect={(): void => {}}
--- a/frontend/src/container/PanelWrapper/panelWrapper.types.ts
+++ b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import { WidgetGraphComponentProps } from 'container/GridCardLayout/GridCard/types';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -32,7 +31,6 @@ export type PanelWrapperProps = {
 	customOnRowClick?: (record: RowData) => void;
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	enableDrillDown?: boolean;
-	panelMode: PanelMode;
 };

 export type TooltipData = {
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
@@ -40,7 +40,6 @@
 			font-size: 12px;
 			font-style: normal;
 			font-weight: 400;
-			pointer-events: none;
 			// line-height: 18px;

 			color: var(--bg-sakura-400) !important;
--- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
@@ -96,7 +96,6 @@ export default function QueryFunctions({
 	const isDarkMode = useIsDarkMode();

 	const hasAnomalyFunction = functions.some((func) => func.name === 'anomaly');
-	const hasFunctions = functions.length > 0;

 	const handleAddNewFunction = (): void => {
 		const defaultFunctionStruct =
@@ -181,14 +180,10 @@ export default function QueryFunctions({
 		<div
 			className={cx(
 				'query-functions-container',
-				hasFunctions ? 'hasFunctions' : '',
+				functions && functions.length > 0 ? 'hasFunctions' : '',
 			)}
 		>
-			<Button
-				className="periscope-btn function-btn"
-				disabled={hasFunctions}
-				onClick={handleAddNewFunction}
-			>
+			<Button className="periscope-btn function-btn">
 				<FunctionIcon
 					className="function-icon"
 					fillColor={!isDarkMode ? '#0B0C0E' : 'white'}
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/test/QueryBuilderSearchV2.test.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/test/QueryBuilderSearchV2.test.tsx
@@ -12,7 +12,7 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
-import { IUseDashboardVariablesReturn } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IUseDashboardVariablesReturn } from 'hooks/dashboard/useDashboardVariables';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
--- a/frontend/src/container/ServiceApplication/utils.ts
+++ b/frontend/src/container/ServiceApplication/utils.ts
@@ -1,8 +1,8 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { ServicesList } from 'types/api/metrics/getService';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
--- a/frontend/src/hooks/dashboard/test/useGetResolvedText.test.tsx
+++ b/frontend/src/hooks/dashboard/test/useGetResolvedText.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';

 import useGetResolvedText from '../useGetResolvedText';

--- a/frontend/src/hooks/dashboard/useDashboardVariables.ts
+++ b/frontend/src/hooks/dashboard/useDashboardVariables.ts
@@ -1,40 +1,21 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
+import { useSyncExternalStore } from 'react';
+
 import {
-	IDashboardVariablesStoreState,
-	IUseDashboardVariablesReturn,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+	dashboardVariablesStore,
+	IDashboardVariables,
+} from '../../providers/Dashboard/store/dashboardVariablesStore';

-/**
- * Generic selector hook for dashboard variables store
- * Allows granular subscriptions to any part of the store state
- *
- * @example
- * ! Select top-level field
- * const variables = useDashboardVariablesSelector(s => s.variables);
- *
- * ! Select specific variable
- * const fooVar = useDashboardVariablesSelector(s => s.variables['foo']);
- *
- * ! Select derived value
- * const hasVariables = useDashboardVariablesSelector(s => Object.keys(s.variables).length > 0);
- */
-export const useDashboardVariablesSelector = <T>(
-	selector: (state: IDashboardVariablesStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(dashboardVariablesStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(dashboardVariablesStore.subscribe, getSnapshot);
-};
+export interface IUseDashboardVariablesReturn {
+	dashboardVariables: IDashboardVariables;
+}

 export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const dashboardVariables = useSyncExternalStore(
+		dashboardVariablesStore.subscribe,
+		dashboardVariablesStore.getSnapshot,
+	);

-	return { dashboardVariables };
+	return {
+		dashboardVariables,
+	};
 };
--- a/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
+++ b/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
@@ -13,7 +13,7 @@ import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { useNotifications } from 'hooks/useNotifications';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
--- a/frontend/src/hooks/queryBuilder/useGetWidgetQueryRange.ts
+++ b/frontend/src/hooks/queryBuilder/useGetWidgetQueryRange.ts
@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
--- a/frontend/src/lib/dashbaordVariables/customCommaValuesParser.ts
+++ b/frontend/src/lib/dashbaordVariables/customCommaValuesParser.ts
--- a/frontend/src/lib/dashbaordVariables/getDashboardVariables.ts
+++ b/frontend/src/lib/dashbaordVariables/getDashboardVariables.ts
@@ -1,5 +1,5 @@
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import store from 'store';

 export const getDashboardVariables = (
--- a/frontend/src/lib/dashbaordVariables/sortVariableValues.ts
+++ b/frontend/src/lib/dashbaordVariables/sortVariableValues.ts
--- a/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
+++ b/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
@@ -14,7 +14,7 @@ describe('Get Series Data', () => {
 		expect(seriesData.length).toBe(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#FF6F91');
+		expect(seriesData[1].fill).toBe('#C71585');
 		expect(seriesData[1].width).toBe(2);
 	});

--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss
@@ -1,18 +1,7 @@
-.legend-search-container {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: 8px;
-
-	.legend-search-input {
-		font-size: 12px;
-	}
-}
-
 .legend-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 12px;
 	height: 100%;
 	width: 100%;

@@ -24,50 +13,10 @@
 		opacity: 1;
 	}

-	.legend-empty-state {
-		font-size: 12px;
-		color: var(--bg-vanilla-400);
-		text-align: center;
-		padding: 12px;
-		padding: 2rem 0;
-	}
-
 	.legend-virtuoso-container {
 		height: 100%;
 		width: 100%;

-		.virtuoso-grid-list {
-			min-width: 0;
-			display: grid;
-			grid-auto-flow: row;
-			grid-template-columns: repeat(
-				auto-fill,
-				minmax(var(--legend-average-width, 240px), 1fr)
-			);
-			row-gap: 4px;
-			column-gap: 12px;
-		}
-
-		.virtuoso-grid-item {
-			min-width: 0;
-		}
-
-		&.legend-virtuoso-container-right {
-			.virtuoso-grid-list {
-				grid-template-columns: 1fr;
-			}
-		}
-
-		&.legend-virtuoso-container-single-row {
-			.virtuoso-grid-list {
-				grid-template-columns: repeat(
-					auto-fit,
-					minmax(var(--legend-average-width, 240px), max-content)
-				);
-				justify-content: center;
-			}
-		}
-
 		&::-webkit-scrollbar {
 			width: 0.3rem;
 		}
@@ -109,15 +58,9 @@
 	align-items: center;
 	gap: 6px;
 	padding: 4px 8px;
-	max-width: 100%;
-	overflow: hidden;
 	border-radius: 4px;
 	cursor: pointer;

-	&.legend-item-right {
-		width: 100%;
-	}
-
 	&.legend-item-off {
 		opacity: 0.3;
 		text-decoration: line-through;
--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
@@ -1,21 +1,23 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { VirtuosoGrid } from 'react-virtuoso';
-import { Input, Tooltip as AntdTooltip } from 'antd';
+import { useCallback, useMemo, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+import { LegendPosition } from 'types/api/dashboard/getAll';

-import { LegendPosition, LegendProps } from '../types';
+import { LegendProps } from '../types';
 import { useLegendActions } from './useLegendActions';

 import './Legend.styles.scss';

-export const MAX_LEGEND_WIDTH = 240;
+export const MAX_LEGEND_WIDTH = 320;
+const LEGENDS_PER_SET_DEFAULT = 5;

 export default function Legend({
 	position = LegendPosition.BOTTOM,
 	config,
-	averageLegendWidth = MAX_LEGEND_WIDTH,
+	legendsPerSet = LEGENDS_PER_SET_DEFAULT,
 }: LegendProps): JSX.Element {
 	const {
 		legendItemsMap,
@@ -31,63 +33,56 @@ export default function Legend({
 		focusedSeriesIndex,
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [legendSearchQuery, setLegendSearchQuery] = useState('');

-	const legendItems = useMemo(() => Object.values(legendItemsMap), [
-		legendItemsMap,
-	]);
+	// Chunk legend items into rows of LEGENDS_PER_ROW items each
+	const legendRows = useMemo(() => {
+		const legendItems = Object.values(legendItemsMap);

-	const isSingleRow = useMemo(() => {
-		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
-			return false;
-		}
-		const containerWidth = legendContainerRef.current.clientWidth;
+		return legendItems.reduce((acc: LegendItem[][], curr, i) => {
+			if (i % legendsPerSet === 0) {
+				acc.push([]);
+			}
+			acc[acc.length - 1].push(curr);
+			return acc;
+		}, [] as LegendItem[][]);
+	}, [legendItemsMap, legendsPerSet]);

-		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
-		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
-		return totalRows <= 1;
-	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
-
-	const visibleLegendItems = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
-			return legendItems;
-		}
-
-		const query = legendSearchQuery.trim().toLowerCase();
-		return legendItems.filter((item) =>
-			item.label?.toLowerCase().includes(query),
-		);
-	}, [position, legendSearchQuery, legendItems]);
-
-	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<AntdTooltip key={item.seriesIndex} title={item.label}>
-				<div
-					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,
-					})}
-				>
-					<div
-						className="legend-marker"
-						style={{ borderColor: String(item.color) }}
-						data-is-legend-marker={true}
-					/>
-					<span className="legend-label">{item.label}</span>
-				</div>
-			</AntdTooltip>
+	const renderLegendRow = useCallback(
+		(rowIndex: number, row: LegendItem[]): JSX.Element => (
+			<div
+				key={rowIndex}
+				className={cx(
+					'legend-row',
+					`legend-row-${position.toLowerCase()}`,
+					legendRows.length === 1 && position === LegendPosition.BOTTOM
+						? 'legend-single-row'
+						: '',
+				)}
+			>
+				{row.map((item) => (
+					<AntdTooltip key={item.seriesIndex} title={item.label}>
+						<div
+							data-legend-item-id={item.seriesIndex}
+							className={cx('legend-item', {
+								'legend-item-off': !item.show,
+								'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+							})}
+							style={{ maxWidth: `min(${MAX_LEGEND_WIDTH}px, 100%)` }}
+						>
+							<div
+								className="legend-marker"
+								style={{ borderColor: String(item.color) }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</AntdTooltip>
+				))}
+			</div>
 		),
-		[focusedSeriesIndex, position],
+		[focusedSeriesIndex, position, legendRows],
 	);

-	const isEmptyState = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
-			return false;
-		}
-		return visibleLegendItems.length === 0;
-	}, [position, legendSearchQuery, visibleLegendItems]);
-
 	return (
 		<div
 			ref={legendContainerRef}
@@ -95,36 +90,12 @@ export default function Legend({
 			onClick={onLegendClick}
 			onMouseMove={onLegendMouseMove}
 			onMouseLeave={onLegendMouseLeave}
-			style={{
-				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
-			}}
 		>
-			{position === LegendPosition.RIGHT && (
-				<div className="legend-search-container">
-					<Input
-						allowClear
-						placeholder="Search..."
-						value={legendSearchQuery}
-						onChange={(e): void => setLegendSearchQuery(e.target.value)}
-						className="legend-search-input"
-					/>
-				</div>
-			)}
-			{isEmptyState ? (
-				<div className="legend-empty-state">
-					No series found matching &quot;{legendSearchQuery}&quot;
-				</div>
-			) : (
-				<VirtuosoGrid
-					className={cx(
-						'legend-virtuoso-container',
-						`legend-virtuoso-container-${position.toLowerCase()}`,
-						{ 'legend-virtuoso-container-single-row': isSingleRow },
-					)}
-					data={visibleLegendItems}
-					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
-				/>
-			)}
+			<Virtuoso
+				className="legend-virtuoso-container"
+				data={legendRows}
+				itemContent={(index, row): JSX.Element => renderLegendRow(index, row)}
+			/>
 		</div>
 	);
 }
--- a/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss
@@ -5,7 +5,7 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 0.5rem 0.5rem 1rem;
+	padding: 1rem 1rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -15,12 +15,6 @@
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-500);
 		border: 1px solid var(--bg-vanilla-300);
-
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-400);
-			}
-		}
 	}

 	.uplot-tooltip-header {
@@ -28,18 +22,18 @@
 		font-weight: 500;
 	}

-	.uplot-tooltip-list {
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-100);
-			border-radius: 0.5rem;
+	.uplot-tooltip-list-container {
+		height: 100%;
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+			}
+			&::-webkit-scrollbar-corner {
+				background: transparent;
+			}
+			&::-webkit-scrollbar-thumb {
+				background: rgb(136, 136, 136);
+			}
 		}
 	}

--- a/frontend/src/lib/uPlotV2/components/UPlotChart.tsx
+++ b/frontend/src/lib/uPlotV2/components/UPlotChart.tsx
@@ -6,6 +6,7 @@ import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import uPlot, { AlignedData, Options } from 'uplot';

+import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { usePlotContext } from '../context/PlotContext';
 import { UPlotChartProps } from './types';

@@ -48,6 +49,7 @@ export default function UPlotChart({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const plotInstanceRef = useRef<uPlot | null>(null);
 	const prevPropsRef = useRef<UPlotChartProps | null>(null);
+	const configUsedForPlotRef = useRef<UPlotConfigBuilder | null>(null);

 	/**
 	 * Destroy the existing plot instance if present.
@@ -55,6 +57,12 @@ export default function UPlotChart({
 	const destroyPlot = useCallback((): void => {
 		if (plotInstanceRef.current) {
 			onDestroy?.(plotInstanceRef.current);
+			// Clean up the config builder that was used to create this plot (not the current prop)
+			if (configUsedForPlotRef.current) {
+				configUsedForPlotRef.current.destroy();
+			}
+			configUsedForPlotRef.current = null;
+
 			plotInstanceRef.current.destroy();
 			plotInstanceRef.current = null;
 			setPlotContextInitialState({ uPlotInstance: null });
@@ -89,14 +97,13 @@ export default function UPlotChart({
 		if (plotRef) {
 			plotRef(plot);
 		}
-
 		setPlotContextInitialState({
 			uPlotInstance: plot,
 			widgetId: config.getWidgetId(),
-			shouldSaveSelectionPreference: config.getShouldSaveSelectionPreference(),
 		});

 		plotInstanceRef.current = plot;
+		configUsedForPlotRef.current = config;
 	}, [
 		config,
 		data,
@@ -136,13 +143,11 @@ export default function UPlotChart({
 			return;
 		}

-		// Check if the plot instance's root is no longer attached to our container
-		// (e.g., after React has re‑mounted the container div). In uPlot, `root`
-		// is a child of the container, so we must compare against its parent node.
+		// Check if the plot instance's container has been unmounted (e.g., after "No Data" state)
+		// If so, we need to recreate the plot with the new container
 		const isPlotOrphaned =
-			!!plotInstanceRef.current &&
-			(!containerRef.current ||
-				plotInstanceRef.current.root.parentElement !== containerRef.current);
+			plotInstanceRef.current &&
+			plotInstanceRef.current.root !== containerRef.current;

 		// Update dimensions without reinitializing if only size changed
 		if (
--- a/frontend/src/lib/uPlotV2/components/tests/UPlotChart.test.tsx
+++ b/frontend/src/lib/uPlotV2/components/tests/UPlotChart.test.tsx
@@ -1,412 +0,0 @@
-import type { ReactNode } from 'react';
-import { render, screen } from '@testing-library/react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { AlignedData } from 'uplot';
-
-import { PlotContextProvider } from '../../context/PlotContext';
-import UPlotChart from '../UPlotChart';
-
-// ---------------------------------------------------------------------------
-// Mocks
-// ---------------------------------------------------------------------------
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-		updateSeriesVisibilityToLocalStorage: jest.fn(),
-	}),
-);
-
-jest.mock('@sentry/react', () => ({
-	ErrorBoundary: ({ children }: { children: ReactNode }): JSX.Element => (
-		<>{children}</>
-	),
-}));
-
-jest.mock('pages/ErrorBoundaryFallback/ErrorBoundaryFallback', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div>Error Fallback</div>,
-}));
-
-interface MockUPlotInstance {
-	root: HTMLDivElement;
-	setData: jest.Mock;
-	setSize: jest.Mock;
-	destroy: jest.Mock;
-}
-
-let instances: MockUPlotInstance[] = [];
-const mockUPlotConstructor = jest.fn();
-
-jest.mock('uplot', () => {
-	function MockUPlot(
-		opts: Record<string, unknown>,
-		data: unknown,
-		target: HTMLElement,
-	): MockUPlotInstance {
-		mockUPlotConstructor(opts, data, target);
-
-		const rootEl = document.createElement('div');
-		target.appendChild(rootEl);
-
-		const inst: MockUPlotInstance = {
-			root: rootEl,
-			setData: jest.fn(),
-			setSize: jest.fn(),
-			destroy: jest.fn(),
-		};
-		instances.push(inst);
-		return inst;
-	}
-
-	MockUPlot.paths = {
-		spline: jest.fn(() => jest.fn()),
-		bars: jest.fn(() => jest.fn()),
-		linear: jest.fn(() => jest.fn()),
-		stepped: jest.fn(() => jest.fn()),
-	};
-	MockUPlot.tzDate = jest.fn();
-
-	return { __esModule: true, default: MockUPlot };
-});
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const createMockConfig = (): UPlotConfigBuilder => {
-	return ({
-		getConfig: jest.fn().mockReturnValue({
-			series: [{ value: (): string => '' }],
-			axes: [],
-			scales: {},
-			hooks: {},
-			cursor: {},
-		}),
-		getWidgetId: jest.fn().mockReturnValue(undefined),
-		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
-	} as unknown) as UPlotConfigBuilder;
-};
-
-const validData: AlignedData = [
-	[1, 2, 3],
-	[10, 20, 30],
-];
-const emptyData: AlignedData = [[]];
-
-const Wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
-	<PlotContextProvider>{children}</PlotContextProvider>
-);
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('UPlotChart', () => {
-	beforeEach(() => {
-		instances = [];
-		mockUPlotConstructor.mockClear();
-	});
-
-	describe('when data is empty', () => {
-		it('displays "No Data" message instead of the chart container', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(screen.getByText('No Data')).toBeInTheDocument();
-			expect(screen.queryByTestId('uplot-main-div')).not.toBeInTheDocument();
-		});
-
-		it('sizes the empty-state container to the given width and height', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={750}
-					height={350}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const noDataContainer = screen
-				.getByText('No Data')
-				.closest('.uplot-no-data');
-			expect(noDataContainer).toHaveStyle({ width: '750px', height: '350px' });
-		});
-
-		it('does not create a uPlot instance', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={emptyData}
-					width={600}
-					height={400}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('chart container', () => {
-		it('renders children inside the chart wrapper', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-				>
-					<div data-testid="tooltip-plugin">Tooltip</div>
-				</UPlotChart>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(screen.getByTestId('tooltip-plugin')).toBeInTheDocument();
-		});
-	});
-
-	describe('plot creation', () => {
-		it('instantiates uPlot with floored dimensions and the container element', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600.9}
-					height={400.2}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-
-			const [opts, data, target] = mockUPlotConstructor.mock.calls[0];
-			expect(opts.width).toBe(600);
-			expect(opts.height).toBe(400);
-			expect(data).toBe(validData);
-			expect(target).toBe(screen.getByTestId('uplot-main-div'));
-		});
-
-		it('merges config builder output into the uPlot options', () => {
-			const config = createMockConfig();
-			config.getConfig = jest.fn().mockReturnValue({
-				series: [{ value: (): string => '' }],
-				axes: [{ scale: 'y' }],
-				scales: { y: {} },
-				hooks: {},
-				cursor: { show: true },
-			});
-
-			render(
-				<UPlotChart
-					config={(config as unknown) as UPlotConfigBuilder}
-					data={validData}
-					width={500}
-					height={300}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const [opts] = mockUPlotConstructor.mock.calls[0];
-			expect(opts.width).toBe(500);
-			expect(opts.height).toBe(300);
-			expect(opts.axes).toEqual([{ scale: 'y' }]);
-			expect(opts.cursor).toEqual({ show: true });
-		});
-
-		it('skips creation when width or height is 0', () => {
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={0}
-					height={0}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(mockUPlotConstructor).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('lifecycle callbacks', () => {
-		it('invokes plotRef with the uPlot instance after creation', () => {
-			const plotRef = jest.fn();
-
-			render(
-				<UPlotChart
-					config={createMockConfig()}
-					data={validData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			expect(plotRef).toHaveBeenCalledTimes(1);
-			expect(plotRef).toHaveBeenCalledWith(instances[0]);
-		});
-
-		it('destroys the instance and notifies callbacks when data becomes empty', () => {
-			const plotRef = jest.fn();
-			const onDestroy = jest.fn();
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart
-					config={config}
-					data={validData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-					onDestroy={onDestroy}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const firstInstance = instances[0];
-			plotRef.mockClear();
-
-			rerender(
-				<UPlotChart
-					config={config}
-					data={emptyData}
-					width={600}
-					height={400}
-					plotRef={plotRef}
-					onDestroy={onDestroy}
-				/>,
-			);
-
-			expect(onDestroy).toHaveBeenCalledWith(firstInstance);
-			expect(firstInstance.destroy).toHaveBeenCalled();
-			expect(plotRef).toHaveBeenCalledWith(null);
-			expect(screen.getByText('No Data')).toBeInTheDocument();
-		});
-
-		it('destroys the previous instance before creating a new one on config change', () => {
-			const onDestroy = jest.fn();
-			const config1 = createMockConfig();
-			const config2 = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart
-					config={config1}
-					data={validData}
-					width={600}
-					height={400}
-					onDestroy={onDestroy}
-				/>,
-				{ wrapper: Wrapper },
-			);
-
-			const firstInstance = instances[0];
-
-			rerender(
-				<UPlotChart
-					config={config2}
-					data={validData}
-					width={600}
-					height={400}
-					onDestroy={onDestroy}
-				/>,
-			);
-
-			expect(onDestroy).toHaveBeenCalledWith(firstInstance);
-			expect(firstInstance.destroy).toHaveBeenCalled();
-			expect(instances).toHaveLength(2);
-		});
-	});
-
-	describe('prop updates', () => {
-		it('calls setData without recreating the plot when only data changes', () => {
-			const config = createMockConfig();
-			const newData: AlignedData = [
-				[4, 5, 6],
-				[40, 50, 60],
-			];
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const inst = instances[0];
-
-			rerender(
-				<UPlotChart config={config} data={newData} width={600} height={400} />,
-			);
-
-			expect(inst.setData).toHaveBeenCalledWith(newData);
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls setSize with floored values when only dimensions change', () => {
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const instance = instances[0];
-
-			rerender(
-				<UPlotChart
-					config={config}
-					data={validData}
-					width={800.7}
-					height={500.3}
-				/>,
-			);
-
-			expect(instance.setSize).toHaveBeenCalledWith({ width: 800, height: 500 });
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-		});
-
-		it('recreates the plot when config changes', () => {
-			const config1 = createMockConfig();
-			const config2 = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config1} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			rerender(
-				<UPlotChart config={config2} data={validData} width={600} height={400} />,
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(2);
-		});
-
-		it('does nothing when all props remain the same', () => {
-			const config = createMockConfig();
-
-			const { rerender } = render(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-				{ wrapper: Wrapper },
-			);
-
-			const instance = instances[0];
-
-			rerender(
-				<UPlotChart config={config} data={validData} width={600} height={400} />,
-			);
-
-			expect(mockUPlotConstructor).toHaveBeenCalledTimes(1);
-			expect(instance.setData).not.toHaveBeenCalled();
-			expect(instance.setSize).not.toHaveBeenCalled();
-		});
-	});
-});
--- a/frontend/src/lib/uPlotV2/components/types.ts
+++ b/frontend/src/lib/uPlotV2/components/types.ts
@@ -75,7 +75,7 @@ export interface LegendConfig {
 export interface LegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
-	averageLegendWidth?: number;
+	legendsPerSet?: number;
 }

 export interface TooltipContentItem {
--- a/frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts
+++ b/frontend/src/lib/uPlotV2/config/UPlotConfigBuilder.ts
@@ -1,7 +1,6 @@
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
-import { resolveSeriesVisibility } from 'lib/uPlotV2/utils/seriesVisibility';
 import { merge } from 'lodash-es';
 import noop from 'lodash-es/noop';
 import uPlot, { Cursor, Hooks, Options } from 'uplot';
@@ -12,7 +11,6 @@ import {
 	DEFAULT_CURSOR_CONFIG,
 	DEFAULT_PLOT_CONFIG,
 	LegendItem,
-	SelectionPreferencesSource,
 } from './types';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
@@ -38,10 +36,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 > {
 	series: UPlotSeriesBuilder[] = [];

-	private selectionPreferencesSource: SelectionPreferencesSource =
-		SelectionPreferencesSource.IN_MEMORY;
-	private shouldSaveSelectionPreference = false;
-
 	private axes: Record<string, UPlotAxisBuilder> = {};

 	readonly scales: UPlotScaleBuilder[] = [];
@@ -70,15 +64,11 @@ export class UPlotConfigBuilder extends ConfigBuilder<

 	private onDragSelect: (startTime: number, endTime: number) => void;

+	private cleanups: Array<() => void> = [];
+
 	constructor(args?: ConfigBuilderProps) {
 		super(args ?? {});
-		const {
-			widgetId,
-			onDragSelect,
-			tzDate,
-			selectionPreferencesSource,
-			shouldSaveSelectionPreference,
-		} = args ?? {};
+		const { widgetId, onDragSelect, tzDate } = args ?? {};
 		if (widgetId) {
 			this.widgetId = widgetId;
 		}
@@ -87,38 +77,25 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			this.tzDate = tzDate;
 		}

-		if (selectionPreferencesSource) {
-			this.selectionPreferencesSource = selectionPreferencesSource;
-		}
-
-		if (shouldSaveSelectionPreference) {
-			this.shouldSaveSelectionPreference = shouldSaveSelectionPreference;
-		}
-
 		this.onDragSelect = noop;
+
 		if (onDragSelect) {
 			this.onDragSelect = onDragSelect;
-			this.addHook('setSelect', (self: uPlot): void => {
+			// Add a hook to handle the select event
+			const cleanup = this.addHook('setSelect', (self: uPlot): void => {
 				const selection = self.select;
 				// Only trigger onDragSelect when there's an actual drag range (width > 0)
 				// A click without dragging produces width === 0, which should be ignored
 				if (selection && selection.width > 0) {
 					const startTime = self.posToVal(selection.left, 'x');
 					const endTime = self.posToVal(selection.left + selection.width, 'x');
-
 					this.onDragSelect(startTime * 1000, endTime * 1000);
 				}
 			});
+			this.cleanups.push(cleanup);
 		}
 	}

-	/**
-	 * Get the save selection preferences
-	 */
-	getShouldSaveSelectionPreference(): boolean {
-		return this.shouldSaveSelectionPreference;
-	}
-
 	/**
 	 * Add or merge an axis configuration
 	 */
@@ -181,7 +158,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	addThresholds(options: ThresholdsDrawHookOptions): void {
 		if (!this.thresholds[options.scaleKey]) {
 			this.thresholds[options.scaleKey] = options;
-			this.addHook('draw', thresholdsDrawHook(options));
+			const cleanup = this.addHook('draw', thresholdsDrawHook(options));
+			this.cleanups.push(cleanup);
 		}
 	}

@@ -234,39 +212,20 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.tzDate = tzDate;
 	}

-	/**
-	 * Returns stored series visibility map from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
-	 */
-	private getStoredVisibilityMap(): Map<string, boolean> | null {
-		if (
-			this.widgetId &&
-			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
-		) {
-			return getStoredSeriesVisibility(this.widgetId);
-		}
-		return null;
-	}
-
 	/**
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const visibilityMap = this.getStoredVisibilityMap();
-		const isAnySeriesHidden = !!(
-			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
-		);
-
+		const visibilityMap = this.widgetId
+			? getStoredSeriesVisibility(this.widgetId)
+			: null;
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
 			const label = seriesConfig.label ?? '';
 			const seriesIndex = index + 1; // +1 because the first series is the timestamp

-			const show = resolveSeriesVisibility(
-				label,
-				seriesConfig.show,
-				visibilityMap,
-				isAnySeriesHidden,
-			);
+			// Priority: stored visibility > series config > default (true)
+			const show = visibilityMap?.get(label) ?? seriesConfig.show ?? true;

 			acc[seriesIndex] = {
 				seriesIndex,
@@ -279,6 +238,13 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		}, {} as Record<number, LegendItem>);
 	}

+	/**
+	 * Remove all hooks and cleanup functions
+	 */
+	destroy(): void {
+		this.cleanups.forEach((cleanup) => cleanup());
+	}
+
 	/**
 	 * Get the widget id
 	 */
@@ -294,27 +260,9 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};

-		const visibilityMap = this.getStoredVisibilityMap();
-		const isAnySeriesHidden = !!(
-			visibilityMap && Array.from(visibilityMap.values()).some((show) => !show)
-		);
-
 		config.series = [
 			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s) => {
-				const series = s.getConfig();
-				const label = series.label ?? '';
-				const visible = resolveSeriesVisibility(
-					label,
-					series.show,
-					visibilityMap,
-					isAnySeriesHidden,
-				);
-				return {
-					...series,
-					show: visible,
-				};
-			}),
+			...this.series.map((s) => s.getConfig()),
 		];
 		config.axes = Object.values(this.axes).map((a) => a.getConfig());
 		config.scales = this.scales.reduce(
--- a/frontend/src/lib/uPlotV2/config/types.ts
+++ b/frontend/src/lib/uPlotV2/config/types.ts
@@ -22,14 +22,6 @@ export abstract class ConfigBuilder<P, T> {
 	merge?(props: Partial<P>): void;
 }

-/**
- * Preferences source for the uPlot config builder
- */
-export enum SelectionPreferencesSource {
-	LOCAL_STORAGE = 'LOCAL_STORAGE',
-	IN_MEMORY = 'IN_MEMORY',
-}
-
 /**
 * Props for configuring the uPlot config builder
 */
@@ -37,8 +29,6 @@ export interface ConfigBuilderProps {
 	widgetId?: string;
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	tzDate?: uPlot.LocalDateFromUnix;
-	selectionPreferencesSource?: SelectionPreferencesSource;
-	shouldSaveSelectionPreference?: boolean;
 }

 /**
--- a/frontend/src/lib/uPlotV2/context/PlotContext.tsx
+++ b/frontend/src/lib/uPlotV2/context/PlotContext.tsx
@@ -9,17 +9,16 @@ import {
 import type { SeriesVisibilityItem } from 'container/DashboardContainer/visualization/panels/types';
 import { updateSeriesVisibilityToLocalStorage } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import type uPlot from 'uplot';
+
 export interface PlotContextInitialState {
 	uPlotInstance: uPlot | null;
 	widgetId?: string;
-	shouldSaveSelectionPreference?: boolean;
 }
 export interface IPlotContext {
 	setPlotContextInitialState: (state: PlotContextInitialState) => void;
 	onToggleSeriesVisibility: (seriesIndex: number) => void;
 	onToggleSeriesOnOff: (seriesIndex: number) => void;
 	onFocusSeries: (seriesIndex: number | null) => void;
-	syncSeriesVisibilityToLocalStorage: () => void;
 }

 export const PlotContext = createContext<IPlotContext | null>(null);
@@ -30,84 +29,68 @@ export const PlotContextProvider = ({
 	const uPlotInstanceRef = useRef<uPlot | null>(null);
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
 	const widgetIdRef = useRef<string | undefined>(undefined);
-	const shouldSavePreferencesRef = useRef<boolean>(false);

 	const setPlotContextInitialState = useCallback(
-		({
-			uPlotInstance,
-			widgetId,
-			shouldSaveSelectionPreference,
-		}: PlotContextInitialState): void => {
+		({ uPlotInstance, widgetId }: PlotContextInitialState): void => {
 			uPlotInstanceRef.current = uPlotInstance;
 			widgetIdRef.current = widgetId;
 			activeSeriesIndex.current = undefined;
-			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
 	);

-	const syncSeriesVisibilityToLocalStorage = useCallback((): void => {
+	const onToggleSeriesVisibility = useCallback((seriesIndex: number): void => {
 		const plot = uPlotInstanceRef.current;
-		if (!plot || !widgetIdRef.current) {
+		if (!plot) {
 			return;
 		}

-		const seriesVisibility: SeriesVisibilityItem[] = plot.series.map(
-			(series) => ({
-				label: series.label ?? '',
-				show: series.show ?? true,
-			}),
-		);
+		const isReset = activeSeriesIndex.current === seriesIndex;
+		activeSeriesIndex.current = isReset ? undefined : seriesIndex;

-		updateSeriesVisibilityToLocalStorage(widgetIdRef.current, seriesVisibility);
+		plot.batch(() => {
+			plot.series.forEach((_, index) => {
+				if (index === 0) {
+					return;
+				}
+				const currentSeriesIndex = index;
+				plot.setSeries(currentSeriesIndex, {
+					show: isReset || currentSeriesIndex === seriesIndex,
+				});
+			});
+			if (widgetIdRef.current) {
+				const seriesVisibility: SeriesVisibilityItem[] = plot.series.map(
+					(series) => ({
+						label: series.label ?? '',
+						show: series.show ?? true,
+					}),
+				);
+				updateSeriesVisibilityToLocalStorage(widgetIdRef.current, seriesVisibility);
+			}
+		});
 	}, []);

-	const onToggleSeriesVisibility = useCallback(
-		(seriesIndex: number): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
+	const onToggleSeriesOnOff = useCallback((seriesIndex: number): void => {
+		const plot = uPlotInstanceRef.current;
+		if (!plot) {
+			return;
+		}

-			const isReset = activeSeriesIndex.current === seriesIndex;
-			activeSeriesIndex.current = isReset ? undefined : seriesIndex;
-
-			plot.batch(() => {
-				plot.series.forEach((_, index) => {
-					if (index === 0) {
-						return;
-					}
-					const currentSeriesIndex = index;
-					plot.setSeries(currentSeriesIndex, {
-						show: isReset || currentSeriesIndex === seriesIndex,
-					});
-				});
-				if (widgetIdRef.current && shouldSavePreferencesRef.current) {
-					syncSeriesVisibilityToLocalStorage();
-				}
-			});
-		},
-		[syncSeriesVisibilityToLocalStorage],
-	);
-
-	const onToggleSeriesOnOff = useCallback(
-		(seriesIndex: number): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			const series = plot.series[seriesIndex];
-			if (!series) {
-				return;
-			}
-			plot.setSeries(seriesIndex, { show: !series.show });
-			if (widgetIdRef.current && shouldSavePreferencesRef.current) {
-				syncSeriesVisibilityToLocalStorage();
-			}
-		},
-		[syncSeriesVisibilityToLocalStorage],
-	);
+		const series = plot.series[seriesIndex];
+		if (!series) {
+			return;
+		}
+		plot.setSeries(seriesIndex, { show: !series.show });
+		if (widgetIdRef.current) {
+			const seriesVisibility: SeriesVisibilityItem[] = plot.series.map(
+				(series) => ({
+					label: series.label ?? '',
+					show: series.show ?? true,
+				}),
+			);
+			updateSeriesVisibilityToLocalStorage(widgetIdRef.current, seriesVisibility);
+		}
+	}, []);

 	const onFocusSeries = useCallback((seriesIndex: number | null): void => {
 		const plot = uPlotInstanceRef.current;
@@ -130,14 +113,12 @@ export const PlotContextProvider = ({
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
 			onFocusSeries,
-			syncSeriesVisibilityToLocalStorage,
 		}),
 		[
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
 			onFocusSeries,
-			syncSeriesVisibilityToLocalStorage,
 		],
 	);

--- a/frontend/src/lib/uPlotV2/utils/tests/dataUtils.test.ts
+++ b/frontend/src/lib/uPlotV2/utils/tests/dataUtils.test.ts
@@ -1,62 +0,0 @@
-import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
-
-describe('dataUtils', () => {
-	describe('isInvalidPlotValue', () => {
-		it('treats null and undefined as invalid', () => {
-			expect(isInvalidPlotValue(null)).toBe(true);
-			expect(isInvalidPlotValue(undefined)).toBe(true);
-		});
-
-		it('treats finite numbers as valid and non-finite as invalid', () => {
-			expect(isInvalidPlotValue(0)).toBe(false);
-			expect(isInvalidPlotValue(123.45)).toBe(false);
-			expect(isInvalidPlotValue(Number.NaN)).toBe(true);
-			expect(isInvalidPlotValue(Infinity)).toBe(true);
-			expect(isInvalidPlotValue(-Infinity)).toBe(true);
-		});
-
-		it('treats well-formed numeric strings as valid', () => {
-			expect(isInvalidPlotValue('0')).toBe(false);
-			expect(isInvalidPlotValue('123.45')).toBe(false);
-			expect(isInvalidPlotValue('-1')).toBe(false);
-		});
-
-		it('treats Infinity/NaN string variants and non-numeric strings as invalid', () => {
-			expect(isInvalidPlotValue('+Inf')).toBe(true);
-			expect(isInvalidPlotValue('-Inf')).toBe(true);
-			expect(isInvalidPlotValue('Infinity')).toBe(true);
-			expect(isInvalidPlotValue('-Infinity')).toBe(true);
-			expect(isInvalidPlotValue('NaN')).toBe(true);
-			expect(isInvalidPlotValue('not-a-number')).toBe(true);
-		});
-
-		it('treats non-number, non-string values as valid (left to caller)', () => {
-			expect(isInvalidPlotValue({})).toBe(false);
-			expect(isInvalidPlotValue([])).toBe(false);
-			expect(isInvalidPlotValue(true)).toBe(false);
-		});
-	});
-
-	describe('normalizePlotValue', () => {
-		it('returns null for invalid values detected by isInvalidPlotValue', () => {
-			expect(normalizePlotValue(null)).toBeNull();
-			expect(normalizePlotValue(undefined)).toBeNull();
-			expect(normalizePlotValue(NaN)).toBeNull();
-			expect(normalizePlotValue(Infinity)).toBeNull();
-			expect(normalizePlotValue('-Infinity')).toBeNull();
-			expect(normalizePlotValue('not-a-number')).toBeNull();
-		});
-
-		it('parses valid numeric strings into numbers', () => {
-			expect(normalizePlotValue('0')).toBe(0);
-			expect(normalizePlotValue('123.45')).toBe(123.45);
-			expect(normalizePlotValue('-1')).toBe(-1);
-		});
-
-		it('passes through valid numbers unchanged', () => {
-			expect(normalizePlotValue(0)).toBe(0);
-			expect(normalizePlotValue(123)).toBe(123);
-			expect(normalizePlotValue(42.5)).toBe(42.5);
-		});
-	});
-});
--- a/frontend/src/lib/uPlotV2/utils/tests/scale.test.ts
+++ b/frontend/src/lib/uPlotV2/utils/tests/scale.test.ts
@@ -1,201 +0,0 @@
-import uPlot from 'uplot';
-
-import { DistributionType } from '../../config/types';
-import * as scaleUtils from '../scale';
-
-describe('scale utils', () => {
-	describe('normalizeLogScaleLimits', () => {
-		it('returns limits unchanged when distribution is not logarithmic', () => {
-			const limits = {
-				min: 1,
-				max: 100,
-				softMin: 5,
-				softMax: 50,
-			};
-
-			const result = scaleUtils.normalizeLogScaleLimits({
-				distr: DistributionType.Linear,
-				logBase: 10,
-				limits,
-			});
-
-			expect(result).toEqual(limits);
-		});
-
-		it('snaps positive limits to powers of the log base when distribution is logarithmic', () => {
-			const result = scaleUtils.normalizeLogScaleLimits({
-				distr: DistributionType.Logarithmic,
-				logBase: 10,
-				limits: {
-					min: 3,
-					max: 900,
-					softMin: 12,
-					softMax: 85,
-				},
-			});
-
-			expect(result.min).toBe(1); // 10^0
-			expect(result.max).toBe(1000); // 10^3
-			expect(result.softMin).toBe(10); // 10^1
-			expect(result.softMax).toBe(100); // 10^2
-		});
-	});
-
-	describe('getDistributionConfig', () => {
-		it('returns empty config for time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: true,
-				distr: DistributionType.Linear,
-				logBase: 2,
-			});
-
-			expect(config).toEqual({});
-		});
-
-		it('returns linear distribution settings for non-time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.Linear,
-				logBase: 2,
-			});
-
-			expect(config.distr).toBe(1);
-			expect(config.log).toBe(2);
-		});
-
-		it('returns log distribution settings for non-time scales', () => {
-			const config = scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.Logarithmic,
-				logBase: 10,
-			});
-
-			expect(config.distr).toBe(3);
-			expect(config.log).toBe(10);
-		});
-	});
-
-	describe('getRangeConfig', () => {
-		it('computes range config and fixed range flags correctly', () => {
-			const {
-				rangeConfig,
-				hardMinOnly,
-				hardMaxOnly,
-				hasFixedRange,
-			} = scaleUtils.getRangeConfig(0, 100, null, null, 0.1, 0.2);
-
-			expect(rangeConfig.min).toEqual({
-				pad: 0.1,
-				hard: 0,
-				soft: undefined,
-				mode: 3,
-			});
-			expect(rangeConfig.max).toEqual({
-				pad: 0.2,
-				hard: 100,
-				soft: undefined,
-				mode: 3,
-			});
-			expect(hardMinOnly).toBe(true);
-			expect(hardMaxOnly).toBe(true);
-			expect(hasFixedRange).toBe(true);
-		});
-	});
-
-	describe('createRangeFunction', () => {
-		it('returns [dataMin, dataMax] when no fixed range and no data', () => {
-			const params = {
-				rangeConfig: {} as uPlot.Range.Config,
-				hardMinOnly: false,
-				hardMaxOnly: false,
-				hasFixedRange: false,
-				min: null,
-				max: null,
-			};
-
-			const rangeFn = scaleUtils.createRangeFunction(params);
-
-			const u = ({
-				scales: {
-					y: {
-						distr: 1,
-						log: 10,
-					},
-				},
-			} as unknown) as uPlot;
-
-			const result = rangeFn(
-				u,
-				(null as unknown) as number,
-				(null as unknown) as number,
-				'y',
-			);
-
-			expect(result).toEqual([null, null]);
-		});
-
-		it('applies hard min/max for linear scale when only hard limits are set', () => {
-			const params = {
-				rangeConfig: {} as uPlot.Range.Config,
-				hardMinOnly: true,
-				hardMaxOnly: true,
-				hasFixedRange: true,
-				min: 0,
-				max: 100,
-			};
-
-			const rangeFn = scaleUtils.createRangeFunction(params);
-
-			// Use an undefined distr so the range function skips calling uPlot.rangeNum
-			// and we can focus on the behavior of applyHardLimits.
-			const u = ({
-				scales: {
-					y: {
-						distr: undefined,
-						log: 10,
-					},
-				},
-			} as unknown) as uPlot;
-
-			const result = rangeFn(u, 10, 20, 'y');
-
-			// After applyHardLimits, the returned range should respect configured min/max
-			expect(result).toEqual([0, 100]);
-		});
-	});
-
-	describe('adjustSoftLimitsWithThresholds', () => {
-		it('returns original soft limits when there are no thresholds', () => {
-			const result = scaleUtils.adjustSoftLimitsWithThresholds(1, 5, [], 'ms');
-
-			expect(result).toEqual({ softMin: 1, softMax: 5 });
-		});
-
-		it('expands soft limits to include threshold min/max values', () => {
-			const result = scaleUtils.adjustSoftLimitsWithThresholds(
-				3,
-				6,
-				[{ thresholdValue: 2 }, { thresholdValue: 8 }],
-				'ms',
-			);
-
-			// min should be pulled down to the smallest threshold value
-			expect(result.softMin).toBe(2);
-			// max should be pushed up to the largest threshold value
-			expect(result.softMax).toBe(8);
-		});
-	});
-
-	describe('getFallbackMinMaxTimeStamp', () => {
-		it('returns a 24-hour window ending at approximately now', () => {
-			const { fallbackMin, fallbackMax } = scaleUtils.getFallbackMinMaxTimeStamp();
-
-			// Difference should be exactly one day in seconds
-			expect(fallbackMax - fallbackMin).toBe(86400);
-
-			// Both should be reasonable timestamps (not NaN or negative)
-			expect(fallbackMin).toBeGreaterThan(0);
-			expect(fallbackMax).toBeGreaterThan(fallbackMin);
-		});
-	});
-});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Karan Balani	9a4ba514a3	fix: xor condition for user config validation	2026-02-07 12:47:02 +05:30
Karan Balani	7e13f1d3e3	fix: make reconciler flow idempotent	2026-02-07 12:40:50 +05:30
Karan Balani	1ef54166ac	fix: improve validation for root user config	2026-02-07 12:13:25 +05:30
Karan Balani	441f992f6a	chore: move to new migration format and minor other changes	2026-02-07 03:21:59 +05:30
Karan Balani	85fd97ee29	fix: comments	2026-02-06 17:29:46 +05:30
Karan Balani	172e866a23	chore: minor changes	2026-02-06 17:16:53 +05:30
Karan Balani	56b6f1d32c	fix: reconciler logic for finding root users if email is changed in config	2026-02-06 16:56:31 +05:30
Karan Balani	cdf8bfd155	chore: various cursor bug bot comments addressed	2026-02-06 16:52:19 +05:30
Karan Balani	7f5462f4a0	chore: better response for bulk invite failed cases	2026-02-06 16:47:45 +05:30
Karan Balani	57200c6a9c	chore: handle root user invite in bulk invite api	2026-02-06 16:42:42 +05:30
Karan Balani	613b2a9b8f	chore: add check if the user is trying to delete their own user	2026-02-06 16:36:27 +05:30
Karan Balani	db2ff8f639	chore: dummy push	2026-02-06 02:22:39 +05:30
Karan Balani	d86de3d59a	chore: handle various edge cases for root user login and operations	2026-02-06 00:18:38 +05:30
Karan Balani	18a40f341e	fix: go lint	2026-02-05 12:05:16 +05:30
Karan Balani	190b1d6d39	chore: minor fixes, still stuck on reconciler	2026-02-05 11:14:02 +05:30
Karan Balani	700a50f5ee	feat(authn): root user	2026-02-05 11:14:02 +05:30