Merge branch 'main' into enh/conver-query-rewrite

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.11
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.11
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -2,11 +2,47 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @SigNoz/frontend-maintainers
+/frontend/ @YounixM @aks07
+/frontend/src/container/MetricsApplication @srikanthccv
+/frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 
-# Onboarding
-/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json @makeavish
-/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx @makeavish
+# Dashboard, Alert, Metrics, Service Map, Services
+/frontend/src/container/ListOfDashboard/ @srikanthccv
+/frontend/src/container/NewDashboard/ @srikanthccv
+/frontend/src/pages/DashboardsListPage/ @srikanthccv
+/frontend/src/pages/DashboardWidget/ @srikanthccv
+/frontend/src/pages/NewDashboard/ @srikanthccv
+/frontend/src/providers/Dashboard/ @srikanthccv
+
+# Alerts
+/frontend/src/container/AlertHistory/ @srikanthccv
+/frontend/src/container/AllAlertChannels/ @srikanthccv
+/frontend/src/container/AnomalyAlertEvaluationView/ @srikanthccv
+/frontend/src/container/CreateAlertChannels/ @srikanthccv
+/frontend/src/container/CreateAlertRule/ @srikanthccv
+/frontend/src/container/EditAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertRules/ @srikanthccv
+/frontend/src/container/ListAlertRules/ @srikanthccv
+/frontend/src/container/TriggeredAlerts/ @srikanthccv
+/frontend/src/pages/AlertChannelCreate/ @srikanthccv
+/frontend/src/pages/AlertDetails/ @srikanthccv
+/frontend/src/pages/AlertHistory/ @srikanthccv
+/frontend/src/pages/AlertList/ @srikanthccv
+/frontend/src/pages/CreateAlert/ @srikanthccv
+/frontend/src/providers/Alert.tsx @srikanthccv
+
+# Metrics
+/frontend/src/container/MetricsExplorer/ @srikanthccv
+/frontend/src/pages/MetricsApplication/ @srikanthccv
+/frontend/src/pages/MetricsExplorer/ @srikanthccv
+
+# Services and Service Map
+/frontend/src/container/ServiceApplication/ @srikanthccv
+/frontend/src/container/ServiceTable/ @srikanthccv
+/frontend/src/pages/Services/ @srikanthccv
+/frontend/src/pages/ServiceTopLevelOperations/ @srikanthccv
+/frontend/src/container/Home/Services/ @srikanthccv
 
 /deploy/ @SigNoz/devops
 .github @SigNoz/devops

.github/workflows/build-enterprise.yaml

@@ -69,7 +69,6 @@ jobs:
           echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
           echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/build-staging.yaml

@@ -68,7 +68,6 @@ jobs:
           echo 'TUNNEL_DOMAIN="${{ secrets.NP_TUNNEL_DOMAIN }}"' >> frontend/.env
           echo 'PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
           echo 'APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/goci.yaml

@@ -73,19 +73,3 @@ jobs:
         shell: bash
         run: |
           make docker-build-enterprise
-  openapi:
-    if: |
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v4
-      - name: go-install
-        uses: actions/setup-go@v5
-        with:
-          go-version: "1.24"
-      - name: generate-openapi
-        run: |
-          go run cmd/enterprise/*.go generate openapi
-          git diff --compact-summary --exit-code || (echo; echo "Unexpected difference in openapi spec. Run go run cmd/enterprise/*.go generate openapi locally and commit."; exit 1)

.github/workflows/gor-signoz.yaml

@@ -35,7 +35,6 @@ jobs:
           echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> .env
           echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
-          echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
       - name: build-frontend
         run:  make js-build
       - name: upload-frontend-artifact

.github/workflows/integrationci.yaml

@@ -9,29 +9,6 @@ on:
       - labeled
 
 jobs:
-  fmtlint:
-    if: |
-      ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v4
-      - name: python
-        uses: actions/setup-python@v5
-        with:
-          python-version: 3.13
-      - name: poetry
-        run: |
-          python -m pip install poetry==2.1.2
-          python -m poetry config virtualenvs.in-project true
-          cd tests/integration && poetry install --no-root
-      - name: fmt
-        run: |
-          make py-fmt
-      - name: lint
-        run: |
-          make py-lint
   test:
     strategy:
       fail-fast: false
@@ -44,7 +21,6 @@ jobs:
           - dashboard
           - querier
           - ttl
-          - preference
         sqlstore-provider:
           - postgres
           - sqlite

.gitignore

@@ -49,7 +49,6 @@ ee/query-service/tests/test-deploy/data/
 # local data
 *.backup
 *.db
-**/db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/
 bin/

Makefile

@@ -72,12 +72,6 @@ devenv-up: devenv-clickhouse devenv-signoz-otel-collector ## Start both clickhou
 	@echo "   - ClickHouse: http://localhost:8123"
 	@echo "   - Signoz OTel Collector: grpc://localhost:4317, http://localhost:4318"
 
-.PHONY: devenv-clickhouse-clean
-devenv-clickhouse-clean: ## Clean all ClickHouse data from filesystem
-	@echo "Removing ClickHouse data..."
-	@rm -rf .devenv/docker/clickhouse/fs/tmp/*
-	@echo "ClickHouse data cleaned!"
-
 ##############################################################
 # go commands
 ##############################################################
@@ -92,7 +86,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER=cluster \
 	go run -race \
-		$(GO_BUILD_CONTEXT_ENTERPRISE)/*.go server
+		$(GO_BUILD_CONTEXT_ENTERPRISE)/*.go
 
 .PHONY: go-test
 go-test: ## Runs go unit tests

cmd/community/main.go

@@ -13,7 +13,6 @@ func main() {
 
 	// register a list of commands to the root command
 	registerServer(cmd.RootCmd, logger)
-	cmd.RegisterGenerate(cmd.RootCmd, logger)
 
 	cmd.Execute(logger)
 }

cmd/enterprise/Dockerfile.integration

@@ -1,3 +1,11 @@
+FROM node:18-bullseye AS build
+
+WORKDIR /opt/
+COPY ./frontend/ ./
+ENV NODE_OPTIONS=--max-old-space-size=8192
+RUN CI=1 yarn install
+RUN CI=1 yarn build
+
 FROM golang:1.24-bullseye
 
 ARG OS="linux"
@@ -32,6 +40,8 @@ COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
+COPY --from=build /opt/build ./web/
+
 RUN chmod 755 /root /root/signoz
 
 ENTRYPOINT ["/root/signoz", "server"]

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,47 +0,0 @@
-FROM node:18-bullseye AS build
-
-WORKDIR /opt/
-COPY ./frontend/ ./
-ENV NODE_OPTIONS=--max-old-space-size=8192
-RUN CI=1 yarn install
-RUN CI=1 yarn build
-
-FROM golang:1.24-bullseye
-
-ARG OS="linux"
-ARG TARGETARCH
-ARG ZEUSURL
-
-# This path is important for stacktraces
-WORKDIR $GOPATH/src/github.com/signoz/signoz
-WORKDIR /root
-
-RUN set -eux; \
-	apt-get update; \
-	apt-get install -y --no-install-recommends \
-		g++ \
-		gcc \
-		libc6-dev \
-		make \
-		pkg-config \
-	; \
-	rm -rf /var/lib/apt/lists/*
-
-COPY go.mod go.sum ./
-
-RUN go mod download
-
-COPY ./cmd/ ./cmd/
-COPY ./ee/ ./ee/
-COPY ./pkg/ ./pkg/
-COPY ./templates/email /root/templates
-
-COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
-RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
-
-COPY --from=build /opt/build ./web/
-
-RUN chmod 755 /root /root/signoz
-
-ENTRYPOINT ["/root/signoz", "server"]

cmd/enterprise/main.go

@@ -13,7 +13,6 @@ func main() {
 
 	// register a list of commands to the root command
 	registerServer(cmd.RootCmd, logger)
-	cmd.RegisterGenerate(cmd.RootCmd, logger)
 
 	cmd.Execute(logger)
 }

cmd/generate.go

@@ -1,21 +0,0 @@
-package cmd
-
-import (
-	"log/slog"
-
-	"github.com/spf13/cobra"
-)
-
-func RegisterGenerate(parentCmd *cobra.Command, logger *slog.Logger) {
-	var generateCmd = &cobra.Command{
-		Use:               "generate",
-		Short:             "Generate artifacts",
-		SilenceUsage:      true,
-		SilenceErrors:     true,
-		CompletionOptions: cobra.CompletionOptions{DisableDefaultCmd: true},
-	}
-
-	registerGenerateOpenAPI(generateCmd)
-
-	parentCmd.AddCommand(generateCmd)
-}

cmd/openapi.go

@@ -1,41 +0,0 @@
-package cmd
-
-import (
-	"context"
-	"log/slog"
-
-	"github.com/SigNoz/signoz/pkg/instrumentation"
-	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/version"
-	"github.com/spf13/cobra"
-)
-
-func registerGenerateOpenAPI(parentCmd *cobra.Command) {
-	openapiCmd := &cobra.Command{
-		Use:   "openapi",
-		Short: "Generate OpenAPI schema for SigNoz",
-		RunE: func(currCmd *cobra.Command, args []string) error {
-			return runGenerateOpenAPI(currCmd.Context())
-		},
-	}
-
-	parentCmd.AddCommand(openapiCmd)
-}
-
-func runGenerateOpenAPI(ctx context.Context) error {
-	instrumentation, err := instrumentation.New(ctx, instrumentation.Config{Logs: instrumentation.LogsConfig{Level: slog.LevelInfo}}, version.Info, "signoz")
-	if err != nil {
-		return err
-	}
-
-	openapi, err := signoz.NewOpenAPI(ctx, instrumentation)
-	if err != nil {
-		return err
-	}
-
-	if err := openapi.CreateAndWrite("docs/api/openapi.yml"); err != nil {
-		return err
-	}
-
-	return nil
-}

conf/example.yaml

@@ -3,13 +3,6 @@
 # Do not modify this file
 #
 
-##################### Global #####################
-global:
-  # the url under which the signoz apiserver is externally reachable.
-  external_url: <unset>
-  # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
-  ingestion_url: <unset>
-
 ##################### Version #####################
 version:
   banner:
@@ -54,10 +47,10 @@ cache:
   provider: memory
   # memory: Uses in-memory caching.
   memory:
-    # Max items for the in-memory cache (10x the entries)
-    num_counters: 100000
-    # Total cost in bytes allocated bounded cache
-    max_cost: 67108864
+    # Time-to-live for cache entries in memory. Specify the duration in ns
+    ttl: 60000000000
+    # The interval at which the cache will be cleaned up
+    cleanup_interval: 1m
   # redis: Uses Redis as the caching backend.
   redis:
     # The hostname or IP address of the Redis server.

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.105.1
+    image: signoz/signoz:v0.102.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.12
+    image: signoz/signoz-otel-collector:v0.129.11
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.11
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.105.1
+    image: signoz/signoz:v0.102.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.12
+    image: signoz/signoz-otel-collector:v0.129.11
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.11
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.105.1}
+    image: signoz/signoz:${VERSION:-v0.102.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +213,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.11}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.105.1}
+    image: signoz/signoz:${VERSION:-v0.102.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.11}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/go/handler.md

@@ -1,179 +0,0 @@
-# Handler
-
-Handlers in SigNoz are responsible for exposing module functionality over HTTP. They are thin adapters that:
-
-- Decode incoming HTTP requests
-- Call the appropriate module layer
-- Return structured responses (or errors) in a consistent format
-- Describe themselves for OpenAPI generation
-
-They are **not** the place for complex business logic; that belongs in modules (for example, `pkg/modules/user`, `pkg/modules/session`, etc).
-
-## How are handlers structured?
-
-At a high level, a typical flow looks like this:
-
-1. A `Handler` interface is defined in the module (for example, `user.Handler`, `session.Handler`, `organization.Handler`).
-2. The `apiserver` provider wires those handlers into HTTP routes using Gorilla `mux.Router`.
-
-Each route wraps a module handler method with the following:
-- Authorization middleware (from `pkg/http/middleware`)
-- A generic HTTP `handler.Handler` (from `pkg/http/handler`)
-- An `OpenAPIDef` that describes the operation for OpenAPI generation
-
-For example, in `pkg/apiserver/signozapiserver`:
-
-```go
-if err := router.Handle("/api/v1/invite", handler.New(
-    provider.authZ.AdminAccess(provider.userHandler.CreateInvite),
-    handler.OpenAPIDef{
-        ID:                  "CreateInvite",
-        Tags:                []string{"users"},
-        Summary:             "Create invite",
-        Description:         "This endpoint creates an invite for a user",
-        Request:             new(types.PostableInvite),
-        RequestContentType:  "application/json",
-        Response:            new(types.Invite),
-        ResponseContentType: "application/json",
-        SuccessStatusCode:   http.StatusCreated,
-        ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
-        Deprecated:          false,
-        SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-    },
-)).Methods(http.MethodPost).GetError(); err != nil {
-    return err
-}
-```
-
-In this pattern:
-
-- `provider.userHandler.CreateInvite` is a handler method.
-- `provider.authZ.AdminAccess(...)` wraps that method with authorization checks and context setup.
-- `handler.New` converts it into an HTTP handler and wires it to OpenAPI via the `OpenAPIDef`.
-
-## How to write a new handler method?
-
-When adding a new endpoint:
-
-1. Add a method to the appropriate module `Handler` interface.
-2. Implement that method in the module.
-3. Register the method in `signozapiserver` with the correct route, HTTP method, auth, and `OpenAPIDef`.
-
-### 1. Extend an existing `Handler` interface or create a new one
-
-Find the module in `pkg/modules/<name>` and extend its `Handler` interface with a new method that receives an `http.ResponseWriter` and `*http.Request`. For example:
-
-```go
-type Handler interface {
-    // existing methods...
-    CreateThing(rw http.ResponseWriter, req *http.Request)
-}
-```
-
-Keep the method focused on HTTP concerns and delegate business logic to the module.
-
-### 2. Implement the handler method
-
-In the module implementation, implement the new method. A typical implementation:
-
-- Extracts authentication and organization context from `req.Context()`
-- Decodes the request body into a `types.*` struct using the `binding` package
-- Calls module functions
-- Uses the `render` package to write responses or errors
-
-```go
-func (h *handler) CreateThing(rw http.ResponseWriter, req *http.Request) {
-    // Extract authentication and organization context from req.Context()
-    claims, err := authtypes.ClaimsFromContext(req.Context())
-    if err != nil {
-        render.Error(rw, err)
-        return
-    }
-
-    // Decode the request body into a `types.*` struct using the `binding` package
-    var in types.PostableThing
-    if err := binding.JSON.BindBody(req.Body, &in); err != nil {
-        render.Error(rw, err)
-        return
-    }
-    
-    // Call module functions
-    out, err := h.module.CreateThing(req.Context(), claims.OrgID, &in)
-    if err != nil {
-        render.Error(rw, err)
-        return
-    }
-
-    // Use the `render` package to write responses or errors
-    render.Success(rw, http.StatusCreated, out)
-}
-```
-
-### 3. Register the handler in `signozapiserver`
-
-In `pkg/apiserver/signozapiserver`, add a route in the appropriate `add*Routes` function (`addUserRoutes`, `addSessionRoutes`, `addOrgRoutes`, etc.). The pattern is:
-
-```go
-if err := router.Handle("/api/v1/things", handler.New(
-    provider.authZ.AdminAccess(provider.thingHandler.CreateThing),
-    handler.OpenAPIDef{
-        ID:                  "CreateThing",
-        Tags:                []string{"things"},
-        Summary:             "Create thing",
-        Description:         "This endpoint creates a thing",
-        Request:             new(types.PostableThing),
-        RequestContentType:  "application/json",
-        Response:            new(types.GettableThing),
-        ResponseContentType: "application/json",
-        SuccessStatusCode:   http.StatusCreated,
-        ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusConflict},
-        Deprecated:          false,
-        SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-    },
-)).Methods(http.MethodPost).GetError(); err != nil {
-    return err
-}
-```
-
-### 4. Update the OpenAPI spec
-
-Run the following command to update the OpenAPI spec:
-
-```bash
-go run cmd/enterprise/*.go generate openapi
-```
-
-This will update the OpenAPI spec in `docs/api/openapi.yml` to reflect the new endpoint.
-
-## How does OpenAPI integration work?
-
-The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAPIDef`. This drives the generated OpenAPI document.
-
-- **ID**: A unique identifier for the operation (used as the `operationId`).
-- **Tags**: Logical grouping for the operation (for example, `"users"`, `"sessions"`, `"orgs"`).
-- **Summary / Description**: Human-friendly documentation.
-- **Request / RequestContentType**:
-  - `Request` is a Go type that describes the request body or form.
-  - `RequestContentType` is usually `"application/json"` or `"application/x-www-form-urlencoded"` (for callbacks like SAML).
-- **Response / ResponseContentType**:
-  - `Response` is the Go type for the successful response payload.
-  - `ResponseContentType` is usually `"application/json"`; use `""` for responses without a body.
-- **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
-- **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
-- **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
-
-The generic handler:
-
-- Automatically appends `401`, `403`, and `500` to `ErrorStatusCodes` when appropriate.
-- Registers request and response schemas with the OpenAPI reflector so they appear in `docs/api/openapi.yml`.
-
-See existing examples in:
-
-- `addUserRoutes` (for typical JSON request/response)
-- `addSessionRoutes` (for form-encoded and redirect flows)
-
-## What should I remember?
-
-- **Keep handlers thin**: focus on HTTP concerns and delegate logic to modules/services.
-- **Always register routes through `signozapiserver`** using `handler.New` and a complete `OpenAPIDef`.
-- **Choose accurate request/response types** from the `types` packages so OpenAPI schemas are correct.

ee/authn/callbackauthn/oidccallbackauthn/authn.go

@@ -129,12 +129,6 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
 }
 
-func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {
-	return &authtypes.AuthNProviderInfo{
-		RelayStatePath: nil,
-	}
-}
-
 func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.URL, authDomain *authtypes.AuthDomain) (*oidc.Provider, *oauth2.Config, error) {
 	if authDomain.AuthDomainConfig().OIDC.IssuerAlias != "" {
 		ctx = oidc.InsecureIssuerURLContext(ctx, authDomain.AuthDomainConfig().OIDC.IssuerAlias)

ee/authn/callbackauthn/samlcallbackauthn/authn.go

@@ -99,14 +99,6 @@ func (a *AuthN) HandleCallback(ctx context.Context, formValues url.Values) (*aut
 	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
 }
 
-func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {
-	state := authtypes.NewState(&url.URL{Path: "login"}, authDomain.StorableAuthDomain().ID).URL.String()
-
-	return &authtypes.AuthNProviderInfo{
-		RelayStatePath: &state,
-	}
-}
-
 func (a *AuthN) serviceProvider(siteURL *url.URL, authDomain *authtypes.AuthDomain) (*saml2.SAMLServiceProvider, error) {
 	certStore, err := a.getCertificateStore(authDomain)
 	if err != nil {

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

@@ -19,7 +19,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
-	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -61,7 +60,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		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),
 	})
 
 	if err != nil {
@@ -94,6 +92,10 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// routes available only in ee version
 	router.HandleFunc("/api/v1/features", am.ViewAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
 
+	// paid plans specific routes
+	router.HandleFunc("/api/v1/complete/saml", am.OpenAccess(ah.Signoz.Handlers.Session.CreateSessionBySAMLCallback)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/complete/oidc", am.OpenAccess(ah.Signoz.Handlers.Session.CreateSessionByOIDCCallback)).Methods(http.MethodGet)
+
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
 

ee/query-service/app/server.go

@@ -3,14 +3,12 @@ package app
 import (
 	"context"
 	"fmt"
+	"log/slog"
 	"net"
 	"net/http"
 	_ "net/http/pprof" // http profiler
 	"slices"
 
-	"github.com/SigNoz/signoz/pkg/cache/memorycache"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
 	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
 	"go.opentelemetry.io/otel/propagation"
@@ -76,26 +74,13 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	cacheForTraceDetail, err := memorycache.New(context.TODO(), signoz.Instrumentation.ToProviderSettings(), cache.Config{
-		Provider: "memory",
-		Memory: cache.Memory{
-			NumCounters: 10 * 10000,
-			MaxCost:     1 << 27, // 128 MB
-		},
-	})
-	if err != nil {
-		return nil, err
-	}
-
 	reader := clickhouseReader.NewReader(
 		signoz.SQLStore,
 		signoz.TelemetryStore,
 		signoz.Prometheus,
 		signoz.TelemetryStore.Cluster(),
 		config.Querier.FluxInterval,
-		cacheForTraceDetail,
 		signoz.Cache,
-		nil,
 	)
 
 	rm, err := makeRulesManager(
@@ -107,8 +92,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		signoz.Prometheus,
 		signoz.Modules.OrgGetter,
 		signoz.Querier,
-		signoz.Instrumentation.ToProviderSettings(),
-		signoz.QueryParser,
+		signoz.Instrumentation.Logger(),
 	)
 
 	if err != nil {
@@ -245,11 +229,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.MetricExplorerRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
-	err := s.signoz.APIServer.AddToRouter(r)
-	if err != nil {
-		return nil, err
-	}
-
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
@@ -260,7 +239,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 
 	handler = handlers.CompressHandler(handler)
 
-	err = web.AddToRouter(r)
+	err := web.AddToRouter(r)
 	if err != nil {
 		return nil, err
 	}
@@ -355,8 +334,8 @@ func (s *Server) Stop(ctx context.Context) error {
 	return nil
 }
 
-func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
-	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
+func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, querier querier.Querier, logger *slog.Logger) (*baserules.Manager, error) {
+	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
 	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
 	managerOpts := &baserules.ManagerOptions{
@@ -366,7 +345,7 @@ func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertma
 		Logger:              zap.L(),
 		Reader:              ch,
 		Querier:             querier,
-		SLogger:             providerSettings.Logger,
+		SLogger:             logger,
 		Cache:               cache,
 		EvalDelay:           baseconst.GetEvalDelay(),
 		PrepareTaskFunc:     rules.PrepareTaskFunc,

ee/query-service/rules/anomaly.go

@@ -246,9 +246,7 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 				continue
 			}
 		}
-		results, err := r.Threshold.Eval(*series, r.Unit(), ruletypes.EvalData{
-			ActiveAlerts: r.ActiveAlertsLabelFP(),
-		})
+		results, err := r.Threshold.ShouldAlert(*series, r.Unit())
 		if err != nil {
 			return nil, err
 		}
@@ -298,9 +296,7 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 				continue
 			}
 		}
-		results, err := r.Threshold.Eval(*series, r.Unit(), ruletypes.EvalData{
-			ActiveAlerts: r.ActiveAlertsLabelFP(),
-		})
+		results, err := r.Threshold.ShouldAlert(*series, r.Unit())
 		if err != nil {
 			return nil, err
 		}
@@ -414,7 +410,6 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 			GeneratorURL:      r.GeneratorURL(),
 			Receivers:         ruleReceiverMap[lbs.Map()[ruletypes.LabelThresholdName]],
 			Missing:           smpl.IsMissing,
-			IsRecovering:      smpl.IsRecovering,
 		}
 	}
 
@@ -427,9 +422,6 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 
 			alert.Value = a.Value
 			alert.Annotations = a.Annotations
-			// Update the recovering and missing state of existing alert
-			alert.IsRecovering = a.IsRecovering
-			alert.Missing = a.Missing
 			if v, ok := alert.Labels.Map()[ruletypes.LabelThresholdName]; ok {
 				alert.Receivers = ruleReceiverMap[v]
 			}
@@ -488,30 +480,6 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 				Value:        a.Value,
 			})
 		}
-
-		// We need to change firing alert to recovering if the returned sample meets recovery threshold
-		changeFiringToRecovering := a.State == model.StateFiring && a.IsRecovering
-		// We need to change recovering alerts to firing if the returned sample meets target threshold
-		changeRecoveringToFiring := a.State == model.StateRecovering && !a.IsRecovering && !a.Missing
-		// in any of the above case we need to update the status of alert
-		if changeFiringToRecovering || changeRecoveringToFiring {
-			state := model.StateRecovering
-			if changeRecoveringToFiring {
-				state = model.StateFiring
-			}
-			a.State = state
-			r.logger.DebugContext(ctx, "converting alert state", "name", r.Name(), "state", state)
-			itemsToAdd = append(itemsToAdd, model.RuleStateHistory{
-				RuleID:       r.ID(),
-				RuleName:     r.Name(),
-				State:        state,
-				StateChanged: true,
-				UnixMilli:    ts.UnixMilli(),
-				Labels:       model.LabelsString(labelsJSON),
-				Fingerprint:  a.QueryResultLables.Hash(),
-				Value:        a.Value,
-			})
-		}
 	}
 
 	currentState := r.State()

frontend/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-	ignorePatterns: ['src/parser/*.ts', 'scripts/update-registry.js'],
+	ignorePatterns: ['src/parser/*.ts'],
 	env: {
 		browser: true,
 		es2021: true,

frontend/example.env

@@ -3,6 +3,5 @@ BUNDLE_ANALYSER="true"
 FRONTEND_API_ENDPOINT="http://localhost:8080/"
 PYLON_APP_ID="pylon-app-id"
 APPCUES_APP_ID="appcess-app-id"
-PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
 CI="1"

frontend/package.json

@@ -14,7 +14,7 @@
 		"jest": "jest",
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
-		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)  && node scripts/update-registry.js",
+		"postinstall": "yarn i18n:generate-hash && (is-ci || yarn husky:configure)",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
 		"commitlint": "commitlint --edit $1",
 		"test": "jest",
@@ -38,7 +38,7 @@
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
 		"@monaco-editor/react": "^4.3.1",
-		"@playwright/test": "1.55.1",
+		"@playwright/test": "1.54.1",
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
@@ -47,8 +47,6 @@
 		"@signozhq/button": "0.0.2",
 		"@signozhq/calendar": "0.0.0",
 		"@signozhq/callout": "0.0.2",
-		"@signozhq/checkbox": "0.0.2",
-		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "1.1.4",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
@@ -85,7 +83,6 @@
 		"color": "^4.2.1",
 		"color-alpha": "1.1.3",
 		"cross-env": "^7.0.3",
-		"crypto-js": "4.2.0",
 		"css-loader": "5.0.0",
 		"css-minimizer-webpack-plugin": "5.0.1",
 		"d3-hierarchy": "3.1.2",
@@ -105,6 +102,7 @@
 		"i18next-http-backend": "^1.3.2",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
+		"kbar": "0.1.0-beta.48",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
@@ -114,7 +112,7 @@
 		"overlayscrollbars": "^2.8.1",
 		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
-		"posthog-js": "1.298.0",
+		"posthog-js": "1.215.5",
 		"rc-tween-one": "3.0.6",
 		"react": "18.2.0",
 		"react-addons-update": "15.6.3",
@@ -151,6 +149,7 @@
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
 		"uplot": "1.6.31",
+		"userpilot": "1.3.9",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "5.94.0",
@@ -187,7 +186,6 @@
 		"@types/color": "^3.0.3",
 		"@types/compression-webpack-plugin": "^9.0.0",
 		"@types/copy-webpack-plugin": "^8.0.1",
-		"@types/crypto-js": "4.2.2",
 		"@types/dompurify": "^2.4.0",
 		"@types/event-source-polyfill": "^1.0.0",
 		"@types/fontfaceobserver": "2.1.0",

frontend/public/Logos/amazon-bedrock.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>AWS</title><path d="M6.763 11.212q.002.446.088.71c.064.176.144.368.256.576.04.063.056.127.056.183q.002.12-.152.24l-.503.335a.4.4 0 0 1-.208.072q-.12-.002-.239-.112a2.5 2.5 0 0 1-.287-.375 6 6 0 0 1-.248-.471q-.934 1.101-2.347 1.101c-.67 0-1.205-.191-1.596-.574-.39-.384-.59-.894-.59-1.533 0-.678.24-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583q-.001-.908-.375-1.277c-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103s-.583.16-.862.272a2 2 0 0 1-.28.104.5.5 0 0 1-.127.023q-.168.002-.168-.247v-.391c0-.128.016-.224.056-.28a.6.6 0 0 1 .224-.167 4.6 4.6 0 0 1 1.005-.36 4.8 4.8 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647q.661.646.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144a1.8 1.8 0 0 0 .758-.51 1.3 1.3 0 0 0 .272-.512c.047-.191.08-.423.08-.694v-.335a7 7 0 0 0-.735-.136 6 6 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296m6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 6.726a1.4 1.4 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783q.227-.001.31.08c.065.048.113.16.16.312l1.342 5.284 1.245-5.284q.058-.24.151-.312a.55.55 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348q.074-.24.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1 1 0 0 1-.056.2l-1.923 6.17q-.072.24-.168.311a.5.5 0 0 1-.303.08h-.687c-.15 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32L12.32 7.747l-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.6.6 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247q.072 0 .144.024c.048.016.12.048.2.08q.408.181.878.279c.32.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.78.78 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.9 1.9 0 0 1-.4-1.158q0-.502.216-.886c.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .36.008.535.032.183.024.35.056.518.088q.24.058.455.127.216.072.336.144a.7.7 0 0 1 .24.2.43.43 0 0 1 .071.263v.375q-.002.254-.184.256a.8.8 0 0 1-.303-.096 3.65 3.65 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223s-.375.383-.375.71c0 .224.08.416.24.567.16.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767s.367.702.367 1.117c0 .343-.072.655-.207.926a2.2 2.2 0 0 1-.583.703c-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167"/><path fill="#f90" d="M.378 15.475c3.384 1.963 7.56 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.44-.2.814.287.383.607-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351m23.531-.2c.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151l.175-.439c.343-.88.802-2.198.52-2.555-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399"/></svg>

frontend/public/Logos/azure-openai.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>Azure</title><path fill="url(#a)" d="M7.242 1.613A1.11 1.11 0 0 1 8.295.857h6.977L8.03 22.316a1.11 1.11 0 0 1-1.052.755h-5.43a1.11 1.11 0 0 1-1.053-1.466z"/><path fill="#0078d4" d="M18.397 15.296H7.4a.51.51 0 0 0-.347.882l7.066 6.595c.206.192.477.298.758.298h6.226z"/><path fill="url(#b)" d="M15.272.857H7.497L0 23.071h7.775l1.596-4.73 5.068 4.73h6.665l-2.707-7.775h-7.998z"/><path fill="url(#c)" d="M17.193 1.613a1.11 1.11 0 0 0-1.052-.756h-7.81.035c.477 0 .9.304 1.052.756l6.748 19.992a1.11 1.11 0 0 1-1.052 1.466h-.12 7.895a1.11 1.11 0 0 0 1.052-1.466z"/><defs><linearGradient id="a" x1="8.247" x2="1.002" y1="1.626" y2="23.03" gradientUnits="userSpaceOnUse"><stop stop-color="#114a8b"/><stop offset="1" stop-color="#0669bc"/></linearGradient><linearGradient id="b" x1="14.042" x2="12.324" y1="15.302" y2="15.888" gradientUnits="userSpaceOnUse"><stop stop-opacity=".3"/><stop offset=".071" stop-opacity=".2"/><stop offset=".321" stop-opacity=".1"/><stop offset=".623" stop-opacity=".05"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="12.841" x2="20.793" y1="1.626" y2="22.814" gradientUnits="userSpaceOnUse"><stop stop-color="#3ccbf4"/><stop offset="1" stop-color="#2892df"/></linearGradient></defs></svg>

frontend/public/Logos/crew-ai.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>CrewAI</title><path fill="#461816" d="M19.41 10.783a2.75 2.75 0 0 1 2.471 1.355c.483.806.622 1.772.385 2.68l-.136.522a10 10 0 0 1-3.156 5.058c-.605.517-1.283 1.062-2.083 1.524l-.028.017c-.402.232-.884.511-1.398.756-1.19.602-2.475.997-3.798 1.167-.854.111-1.716.155-2.577.132h-.018a8.6 8.6 0 0 1-5.046-1.87l-.012-.01-.012-.01A8.02 8.02 0 0 1 1.22 17.42a10.9 10.9 0 0 1-.102-3.779A15.6 15.6 0 0 1 2.88 8.4a21.8 21.8 0 0 1 2.432-3.678 15.4 15.4 0 0 1 3.56-3.182A10 10 0 0 1 12.44.104h.004l.003-.002c2.057-.384 3.743.374 5.024 1.26a8.3 8.3 0 0 1 2.395 2.513l.024.04.023.042a5.47 5.47 0 0 1 .508 4.012c-.239.97-.577 1.914-1.01 2.814z"/><path fill="#fff" d="M18.861 13.165a.748.748 0 0 1 1.256.031c.199.332.256.73.159 1.103l-.137.522a7.94 7.94 0 0 1-2.504 4.014c-.572.49-1.138.939-1.774 1.306-.427.247-.857.496-1.303.707a9.6 9.6 0 0 1-3.155.973 14.3 14.3 0 0 1-2.257.116 6.53 6.53 0 0 1-3.837-1.422 5.97 5.97 0 0 1-2.071-3.494 8.9 8.9 0 0 1-.085-3.08 13.6 13.6 0 0 1 1.54-4.568 19.7 19.7 0 0 1 2.212-3.348 13.4 13.4 0 0 1 3.088-2.76 7.9 7.9 0 0 1 2.832-1.14c1.307-.245 2.434.207 3.481.933a6.2 6.2 0 0 1 1.806 1.892c.423.767.536 1.668.314 2.515a12.4 12.4 0 0 1-.99 2.67l-.223.497q-.48 1.07-.97 2.137a.76.76 0 0 1-.97.467 3.39 3.39 0 0 1-2.283-2.49c-.095-.83.04-1.669.39-2.426.288-.746.61-1.477.933-2.208l.248-.563a.53.53 0 0 0-.204-.742 2.35 2.35 0 0 0-1.2.702 25 25 0 0 0-1.614 1.767 21.6 21.6 0 0 0-2.619 4.184 7.6 7.6 0 0 0-.816 2.753 7 7 0 0 0 .07 2.219 2.055 2.055 0 0 0 1.934 1.715c1.801.1 3.59-.363 5.116-1.328a19 19 0 0 0 1.675-1.294c.752-.71 1.376-1.519 1.958-2.36"/></svg>

frontend/public/Logos/dashboards.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none" viewBox="0 0 150 150"><circle cx="75" cy="75" r="70" fill="#f3f4f6"/><g transform="translate(25 25)"><rect width="60" height="55" fill="#fcd34d" rx="6"/><path stroke="#d97706" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m10 40 15-15 15 8 15-23"/><rect width="35" height="55" x="65" fill="#6ee7b7" rx="6"/><rect width="20" height="6" x="73" y="10" fill="#059669" rx="3"/><rect width="15" height="6" x="73" y="22" fill="#059669" opacity=".7" rx="3"/><rect width="18" height="6" x="73" y="34" fill="#059669" opacity=".7" rx="3"/><rect width="100" height="40" y="60" fill="#a5b4fc" rx="6"/><rect width="80" height="8" x="10" y="70" fill="#4f46e5" rx="4"/><rect width="50" height="8" x="20" y="83" fill="#6366f1" rx="4"/></g></svg>

frontend/public/Logos/envoy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#b31aab" d="m33.172 61.48.176 7.325 7.797 4.785-.176-7.324Zm19.031 30.504-.176-7.18-6.84-4.206c-.085-.059-.203-.145-.289-.203l.176 7.207Zm-24.355 9.688L10.012 90.715l-.438-18.367 8.758-3.746-.172-7.352-13.969 5.969c-1.074.46-1.714 1.441-1.687 2.566l.523 22.055c.032 1.125.73 2.25 1.836 2.941l21.383 13.149c.992.605 2.215.78 3.203.46a.8.8 0 0 0 .29-.113l13.124-5.593-7.129-4.383Zm0 0"/><path fill="#d163ce" d="M85.488 61.047c-.031-1.328-.843-2.625-2.125-3.43L57.38 41.672l-.813.344.176 7.726 20.57 12.63.493 20.648 7.86 4.812.433-.172ZM54.383 97.289 30.262 82.47l-.582-24.883 11-4.7-.203-8.562-17.082 7.293c-1.25.547-2.008 1.672-1.977 3l.668 29.18c.031 1.324.844 2.625 2.125 3.402l28.281 17.387c1.164.723 2.563.894 3.754.547.117-.028.234-.086.348-.145l16.703-7.12-8.32-5.102Zm0 0"/><path fill="#e13eaf" d="M122.234 40.633 85.98 18.343c-1.335-.808-2.937-1.038-4.304-.605-.145.028-.262.086-.406.145l-35.383 15.11c-1.426.605-2.297 1.902-2.27 3.429l.903 37.371c.03 1.527.96 2.996 2.445 3.89l36.254 22.262c1.336.805 2.937 1.035 4.277.606.145-.031.262-.09.406-.145l35.383-15.11c1.426-.605 2.297-1.933 2.27-3.433l-.875-37.367c-.028-1.473-.961-2.969-2.446-3.863M85.398 91.64 53.891 72.293l-.79-32.496 30.727-13.121 31.512 19.347.785 32.497Zm0 0"/></svg>

frontend/public/Logos/logs.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none" viewBox="0 0 150 150"><circle cx="75" cy="75" r="70" fill="#f3f4f6"/><g transform="translate(25 40)"><rect width="12" height="12" fill="#059669" opacity=".8" rx="3"/><rect width="80" height="12" x="20" fill="#10b981" rx="3"/><rect width="12" height="12" y="22" fill="#059669" opacity=".8" rx="3"/><rect width="65" height="12" x="20" y="22" fill="#10b981" rx="3"/><rect width="12" height="12" y="44" fill="#059669" opacity=".8" rx="3"/><rect width="75" height="12" x="20" y="44" fill="#10b981" rx="3"/><rect width="12" height="12" y="66" fill="#059669" opacity=".8" rx="3"/><rect width="50" height="12" x="20" y="66" fill="#10b981" rx="3"/></g></svg>

frontend/public/Logos/metrics.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none" viewBox="0 0 150 150"><circle cx="75" cy="75" r="70" fill="#f3f4f6"/><defs><linearGradient id="a" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#f59e0b" stop-opacity=".5"/><stop offset="100%" stop-color="#f59e0b" stop-opacity=".05"/></linearGradient></defs><g transform="translate(25 35)"><path stroke="#d1d5db" stroke-linecap="round" stroke-width="2" d="M0 80h100M0 80V0"/><path fill="url(#a)" d="M2 78c18 0 28-28 48-23s30-35 48-40v63z"/><path stroke="#d97706" stroke-linecap="round" stroke-width="5" d="M2 78c18 0 28-28 48-23s30-35 48-40"/><circle cx="50" cy="55" r="4" fill="#f59e0b"/><circle cx="98" cy="15" r="4" fill="#f59e0b"/></g></svg>

frontend/public/Logos/pydantic-ai.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>PydanticAI</title><path fill="#e72564" d="M13.223 22.86c-.605.83-1.844.83-2.448 0L5.74 15.944a1.514 1.514 0 0 1 .73-2.322l5.035-1.738c.32-.11.668-.11.988 0l5.035 1.738c.962.332 1.329 1.5.73 2.322zm-1.224-1.259 4.688-6.439-4.688-1.618-4.688 1.618L12 21.602z"/><path fill="#e723a0" d="M23.71 13.463c.604.832.221 2.01-.756 2.328l-8.133 2.652a1.514 1.514 0 0 1-1.983-1.412l-.097-5.326c-.006-.338.101-.67.305-.94l3.209-4.25a1.514 1.514 0 0 1 2.434.022l5.022 6.926zm-1.574.775L17.46 7.79l-2.988 3.958.09 4.959z"/><path fill="#e520e9" d="M18.016.591a1.514 1.514 0 0 1 1.98 1.44l.009 8.554a1.514 1.514 0 0 1-1.956 1.45l-5.095-1.554a1.5 1.5 0 0 1-.8-.58l-3.05-4.366a1.514 1.514 0 0 1 .774-2.308zm.25 1.738L10.69 4.783l2.841 4.065 4.744 1.446-.008-7.965z"/><path fill="#e520e9" d="M5.99.595a1.514 1.514 0 0 0-1.98 1.44L4 10.588a1.514 1.514 0 0 0 1.956 1.45l5.095-1.554c.323-.098.605-.303.799-.58l3.052-4.366a1.514 1.514 0 0 0-.775-2.308zm-.25 1.738 7.577 2.454-2.842 4.065-4.743 1.446.007-7.965z"/><path fill="#e723a0" d="M.29 13.461a1.514 1.514 0 0 0 .756 2.329l8.133 2.651a1.514 1.514 0 0 0 1.983-1.412l.097-5.325a1.5 1.5 0 0 0-.305-.94L7.745 6.513a1.514 1.514 0 0 0-2.434.023L.289 13.461zm1.574.776L6.54 7.788l2.988 3.959-.09 4.958z"/><path fill="#ff96d1" d="m16.942 17.751 1.316-1.806q.178-.248.245-.523l-2.63.858-1.627 2.235a1.5 1.5 0 0 0 .575-.072zm-4.196-5.78.033 1.842 1.742.602-.034-1.843-1.741-.6zm7.257-3.622-1.314-1.812a1.5 1.5 0 0 0-.419-.393l.003 2.767 1.624 2.24q.107-.261.108-.566zm-5.038 2.746-1.762-.537 1.11-1.471 1.762.537zm-2.961-1.41 1.056-1.51-1.056-1.51-1.056 1.51zM9.368 3.509c.145-.122.316-.219.51-.282l2.12-.686 2.13.69c.191.062.36.157.503.276l-2.634.853zm1.433 7.053L9.691 9.09l-1.762.537 1.11 1.47 1.762-.537zm-6.696.584L5.733 8.9l.003-2.763c-.16.1-.305.232-.425.398L4.003 8.339l-.002 2.25q.002.299.104.557m7.149.824-1.741.601-.034 1.843 1.742-.601zM9.75 18.513l-1.628-2.237-2.629-.857q.068.276.247.525l1.313 1.804 2.126.693c.192.062.385.085.571.072"/></svg>

frontend/public/Logos/traces.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none" viewBox="0 0 150 150"><circle cx="75" cy="75" r="70" fill="#f3f4f6"/><rect width="100" height="14" x="25" y="45" fill="#4f46e5" rx="4"/><rect width="60" height="14" x="40" y="68" fill="#6366f1" rx="4"/><rect width="20" height="14" x="105" y="91" fill="#818cf8" rx="4"/><path stroke="#c7d2fe" stroke-width="2" d="M35 59v16m5 0h-5M100 59v39m5 0h-5"/></svg>

frontend/scripts/update-registry.js

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires, import/no-dynamic-require, simple-import-sort/imports, simple-import-sort/exports */
-const fs = require('fs');
-const path = require('path');
-
-// 1. Define paths
-const packageJsonPath = path.resolve(__dirname, '../package.json');
-const registryPath = path.resolve(
-	__dirname,
-	'../src/auto-import-registry.d.ts',
-);
-
-// 2. Read package.json
-const packageJson = require(packageJsonPath);
-
-// 3. Combine dependencies and devDependencies
-const allDeps = {
-	...packageJson.dependencies,
-	...packageJson.devDependencies,
-};
-
-// 4. Filter for @signozhq packages
-const signozPackages = Object.keys(allDeps).filter((dep) =>
-	dep.startsWith('@signozhq/'),
-);
-
-// 5. Generate file content
-const fileContent = `// -------------------------------------------------------------------------
-// AUTO-GENERATED FILE
-// -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
-// whenever you run 'yarn install' or 'npm install'.
-//
-// It forces VS Code to index these specific packages to fix auto-import
-// performance issues in TypeScript 4.x.
-//
-// PR for reference: https://github.com/SigNoz/signoz/pull/9694
-// -------------------------------------------------------------------------
-
-${signozPackages.map((pkg) => `import '${pkg}';`).join('\n')}
-`;
-
-// 6. Write the file
-try {
-	fs.writeFileSync(registryPath, fileContent);
-	console.log(
-		`✅ Auto-import registry updated with ${signozPackages.length} @signozhq packages.`,
-	);
-} catch (err) {
-	console.error('❌ Failed to update auto-import registry:', err);
-}

frontend/src/AppRoutes/Private.tsx

@@ -245,14 +245,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			history.replace(newLocation);
 			return;
 		}
-
-		// if the current route is public dashboard then don't redirect to login
-		const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
-
-		if (isPublicDashboard) {
-			return;
-		}
-
 		// if the current route
 		if (currentRoute) {
 			const { isPrivate, key } = currentRoute;

frontend/src/AppRoutes/index.tsx

@@ -4,16 +4,14 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
-import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
+import KBarCommandPalette from 'components/KBarCommandPalette/KBarCommandPalette';
 import NotFound from 'components/NotFound';
-import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
-import Hex from 'crypto-js/enc-hex';
-import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -23,17 +21,19 @@ import { StatusCodes } from 'http-status-codes';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
+import AlertRuleProvider from 'providers/Alert';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
-import { CmdKProvider } from 'providers/cmdKProvider';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
+import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { CompatRouter } from 'react-router-dom-v5-compat';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
+import { Userpilot } from 'userpilot';
 import { extractDomain } from 'utils/app';
 
 import { Home } from './pageComponents';
@@ -84,9 +84,9 @@ function App(): JSX.Element {
 					email,
 					name: displayName,
 					company_name: orgName,
-					deployment_name: hostNameParts[0],
+					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
-					deployment_url: hostname,
+					tenant_url: hostname,
 					company_domain: domain,
 					source: 'signoz-ui',
 					role,
@@ -94,9 +94,9 @@ function App(): JSX.Element {
 
 				const groupTraits = {
 					name: orgName,
-					deployment_name: hostNameParts[0],
+					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
-					deployment_url: hostname,
+					tenant_url: hostname,
 					company_domain: domain,
 					source: 'signoz-ui',
 				};
@@ -111,23 +111,37 @@ function App(): JSX.Element {
 				if (window && window.Appcues) {
 					window.Appcues.identify(id, {
 						name: displayName,
-						deployment_name: hostNameParts[0],
+
+						tenant_id: hostNameParts[0],
 						data_region: hostNameParts[1],
-						deployment_url: hostname,
+						tenant_url: hostname,
 						company_domain: domain,
+
 						companyName: orgName,
 						email,
 						paidUser: !!trialInfo?.trialConvertedToSubscription,
 					});
 				}
 
+				Userpilot.identify(email, {
+					email,
+					name: displayName,
+					orgName,
+					tenant_id: hostNameParts[0],
+					data_region: hostNameParts[1],
+					tenant_url: hostname,
+					company_domain: domain,
+					source: 'signoz-ui',
+					isPaidUser: !!trialInfo?.trialConvertedToSubscription,
+				});
+
 				posthog?.identify(id, {
 					email,
 					name: displayName,
 					orgName,
-					deployment_name: hostNameParts[0],
+					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
-					deployment_url: hostname,
+					tenant_url: hostname,
 					company_domain: domain,
 					source: 'signoz-ui',
 					isPaidUser: !!trialInfo?.trialConvertedToSubscription,
@@ -135,9 +149,9 @@ function App(): JSX.Element {
 
 				posthog?.group('company', orgId, {
 					name: orgName,
-					deployment_name: hostNameParts[0],
+					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
-					deployment_url: hostname,
+					tenant_url: hostname,
 					company_domain: domain,
 					source: 'signoz-ui',
 					isPaidUser: !!trialInfo?.trialConvertedToSubscription,
@@ -214,10 +228,7 @@ function App(): JSX.Element {
 	]);
 
 	useEffect(() => {
-		if (
-			pathname === ROUTES.ONBOARDING ||
-			pathname.startsWith('/public/dashboard/')
-		) {
+		if (pathname === ROUTES.ONBOARDING) {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			window.Pylon('hideChatBubble');
@@ -259,20 +270,11 @@ function App(): JSX.Element {
 				!showAddCreditCardModal &&
 				(isCloudUser || isEnterpriseSelfHostedUser)
 			) {
-				const email = user.email || '';
-				const secret = process.env.PYLON_IDENTITY_SECRET || '';
-				let emailHash = '';
-
-				if (email && secret) {
-					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-				}
-
 				window.pylon = {
 					chat_settings: {
 						app_id: process.env.PYLON_APP_ID,
 						email: user.email,
 						name: user.displayName || user.email,
-						email_hash: emailHash,
 					},
 				};
 			}
@@ -306,6 +308,10 @@ function App(): JSX.Element {
 				});
 			}
 
+			if (process.env.USERPILOT_KEY) {
+				Userpilot.initialize(process.env.USERPILOT_KEY);
+			}
+
 			if (!isSentryInitialized) {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
@@ -365,36 +371,36 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
-						<CmdKProvider>
+						<KBarCommandPaletteProvider>
+							<UserpilotRouteTracker />
+							<KBarCommandPalette />
 							<NotificationProvider>
 								<ErrorModalProvider>
-									{isLoggedInState && <CmdKPalette userRole={user.role} />}
-									{isLoggedInState && (
-										<ShiftHoldOverlayController userRole={user.role} />
-									)}
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
 												<DashboardProvider>
 													<KeyboardHotkeysProvider>
-														<AppLayout>
-															<PreferenceContextProvider>
-																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																	<Switch>
-																		{routes.map(({ path, component, exact }) => (
-																			<Route
-																				key={`${path}`}
-																				exact={exact}
-																				path={path}
-																				component={component}
-																			/>
-																		))}
-																		<Route exact path="/" component={Home} />
-																		<Route path="*" component={NotFound} />
-																	</Switch>
-																</Suspense>
-															</PreferenceContextProvider>
-														</AppLayout>
+														<AlertRuleProvider>
+															<AppLayout>
+																<PreferenceContextProvider>
+																	<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																		<Switch>
+																			{routes.map(({ path, component, exact }) => (
+																				<Route
+																					key={`${path}`}
+																					exact={exact}
+																					path={path}
+																					component={component}
+																				/>
+																			))}
+																			<Route exact path="/" component={Home} />
+																			<Route path="*" component={NotFound} />
+																		</Switch>
+																	</Suspense>
+																</PreferenceContextProvider>
+															</AppLayout>
+														</AlertRuleProvider>
 													</KeyboardHotkeysProvider>
 												</DashboardProvider>
 											</QueryBuilderProvider>
@@ -402,7 +408,7 @@ function App(): JSX.Element {
 									</PrivateRoute>
 								</ErrorModalProvider>
 							</NotificationProvider>
-						</CmdKProvider>
+						</KBarCommandPaletteProvider>
 					</CompatRouter>
 				</Router>
 			</ConfigProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -295,10 +295,3 @@ export const MetricsExplorer = Loadable(
 export const ApiMonitoring = Loadable(
 	() => import(/* webpackChunkName: "ApiMonitoring" */ 'pages/ApiMonitoring'),
 );
-
-export const PublicDashboardPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Public Dashboard Page" */ 'pages/PublicDashboard'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -34,7 +34,6 @@ import {
 	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
-	PublicDashboardPage,
 	ServiceMapPage,
 	ServiceMetricsPage,
 	ServicesTablePage,
@@ -170,13 +169,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
-	{
-		path: ROUTES.PUBLIC_DASHBOARD,
-		exact: false,
-		component: PublicDashboardPage,
-		isPrivate: false,
-		key: 'PUBLIC_DASHBOARD',
-	},
 	{
 		path: ROUTES.DASHBOARD_WIDGET,
 		exact: true,

frontend/src/api/common/logEvent.ts

@@ -1,8 +1,6 @@
 import { LogEventAxiosInstance as axios } from 'api';
-import getLocalStorageApi from 'api/browser/localstorage/get';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { EventSuccessPayloadProps } from 'types/api/events/types';
 
@@ -13,14 +11,9 @@ const logEvent = async (
 	rateLimited?: boolean,
 ): Promise<SuccessResponse<EventSuccessPayloadProps> | ErrorResponse> => {
 	try {
-		// add deployment_url and user_email to attributes
+		// add tenant_url to attributes
 		const { hostname } = window.location;
-		const userEmail = getLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_EMAIL);
-		const updatedAttributes = {
-			...attributes,
-			deployment_url: hostname,
-			user_email: userEmail,
-		};
+		const updatedAttributes = { ...attributes, tenant_url: hostname };
 		const response = await axios.post('/event', {
 			eventName,
 			attributes: updatedAttributes,

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
-import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
-
-const createPublicDashboard = async (
-	props: CreatePublicDashboardProps,
-): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = '30m' } = props;
-
-	try {
-		const response = await axios.post(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default createPublicDashboard;

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -1,20 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
-
-const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardData;

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -1,20 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
-
-const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
-	try {
-		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardMeta;

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { MetricRangePayloadV5 } from 'api/v5/v5';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
-
-
-const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
-	try {
-		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {
-			params: {
-				startTime: props.startTime,
-				endTime: props.endTime,
-			},
-		});
-        
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getPublicDashboardWidgetData;

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -1,22 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
-
-const revokePublicDashboardAccess = async (
-	props: RevokePublicDashboardAccessProps,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.delete<PayloadProps>(`/dashboards/${props.id}/public`);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default revokePublicDashboardAccess;

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
-
-const updatePublicDashboard = async (
-	props: UpdatePublicDashboardProps,
-): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {
-
-    const { dashboardId, timeRangeEnabled = false, defaultTimeRange = '30m' } = props;
-
-	try {
-		const response = await axios.put(
-			`/dashboards/${dashboardId}/public`,
-			{ timeRangeEnabled, defaultTimeRange },
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default updatePublicDashboard;

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -1,29 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorResponseV2, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { MetricMetadataResponse } from 'types/api/metricsExplorer/v2/getMetricMetadata';
-
-export const getMetricMetadata = async (
-	metricName: string,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
-	try {
-		const encodedMetricName = encodeURIComponent(metricName);
-		const response = await axios.get(
-			`/metrics/metadata?metricName=${encodedMetricName}`,
-			{
-				signal,
-				headers,
-			},
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};

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

@@ -1,25 +0,0 @@
-// -------------------------------------------------------------------------
-// AUTO-GENERATED FILE
-// -------------------------------------------------------------------------
-// This file is generated by scripts/update-registry.js automatically
-// whenever you run 'yarn install' or 'npm install'.
-//
-// It forces VS Code to index these specific packages to fix auto-import
-// performance issues in TypeScript 4.x.
-//
-// PR for reference: https://github.com/SigNoz/signoz/pull/9694
-// -------------------------------------------------------------------------
-
-import '@signozhq/badge';
-import '@signozhq/button';
-import '@signozhq/calendar';
-import '@signozhq/callout';
-import '@signozhq/checkbox';
-import '@signozhq/command';
-import '@signozhq/design-tokens';
-import '@signozhq/input';
-import '@signozhq/popover';
-import '@signozhq/resizable';
-import '@signozhq/sonner';
-import '@signozhq/table';
-import '@signozhq/tooltip';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -62,8 +62,6 @@ interface CustomTimePickerProps {
 	showLiveLogs?: boolean;
 	onGoLive?: () => void;
 	onExitLiveLogs?: () => void;
-	/** When false, hides the "Recently Used" time ranges section */
-	showRecentlyUsed?: boolean;
 }
 
 function CustomTimePicker({
@@ -83,7 +81,6 @@ function CustomTimePicker({
 	onGoLive,
 	onExitLiveLogs,
 	showLiveLogs,
-	showRecentlyUsed = true,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -398,7 +395,6 @@ function CustomTimePicker({
 								setActiveView={setActiveView}
 								setIsOpenedFromFooter={setIsOpenedFromFooter}
 								isOpenedFromFooter={isOpenedFromFooter}
-								showRecentlyUsed={showRecentlyUsed}
 							/>
 						) : (
 							content
@@ -468,5 +464,4 @@ CustomTimePicker.defaultProps = {
 	onCustomTimeStatusUpdate: noop,
 	onExitLiveLogs: noop,
 	showLiveLogs: false,
-	showRecentlyUsed: true,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -47,7 +47,6 @@ interface CustomTimePickerPopoverContentProps {
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
 	onExitLiveLogs: () => void;
-	showRecentlyUsed: boolean;
 }
 
 interface RecentlyUsedDateTimeRange {
@@ -73,7 +72,6 @@ function CustomTimePickerPopoverContent({
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
 	onExitLiveLogs,
-	showRecentlyUsed = true,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
@@ -226,35 +224,33 @@ function CustomTimePickerPopoverContent({
 								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 							</div>
 
-							{showRecentlyUsed && (
-								<div className="recently-used-container">
-									<div className="time-heading">RECENTLY USED</div>
-									<div className="recently-used-range">
-										{recentlyUsedTimeRanges.map((range: RecentlyUsedDateTimeRange) => (
-											<div
-												className="recently-used-range-item"
-												role="button"
-												tabIndex={0}
-												onKeyDown={(e): void => {
-													if (e.key === 'Enter' || e.key === ' ') {
-														handleExitLiveLogs();
-														onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
-														setIsOpen(false);
-													}
-												}}
-												key={range.value}
-												onClick={(): void => {
+							<div className="recently-used-container">
+								<div className="time-heading">RECENTLY USED</div>
+								<div className="recently-used-range">
+									{recentlyUsedTimeRanges.map((range: RecentlyUsedDateTimeRange) => (
+										<div
+											className="recently-used-range-item"
+											role="button"
+											tabIndex={0}
+											onKeyDown={(e): void => {
+												if (e.key === 'Enter' || e.key === ' ') {
 													handleExitLiveLogs();
 													onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
 													setIsOpen(false);
-												}}
-											>
-												{range.label}
-											</div>
-										))}
-									</div>
+												}
+											}}
+											key={range.value}
+											onClick={(): void => {
+												handleExitLiveLogs();
+												onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
+												setIsOpen(false);
+											}}
+										>
+											{range.label}
+										</div>
+									))}
 								</div>
-							)}
+							</div>
 						</div>
 					)}
 				</div>

frontend/src/components/Graph/__tests__/yAxisConfig.test.ts

@@ -1,6 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { PrecisionOptionsEnum } from '../types';
-import { getYAxisFormattedValue } from '../yAxisConfig';
+import { getYAxisFormattedValue, PrecisionOptionsEnum } from '../yAxisConfig';
 
 const testFullPrecisionGetYAxisFormattedValue = (
 	value: string,
@@ -233,7 +232,7 @@ describe('getYAxisFormattedValue - units (full precision legacy assertions)', ()
 		).toBe('1%');
 		expect(
 			testFullPrecisionGetYAxisFormattedValue('1.00555555559595876', 'percent'),
-		).toBe('1.005555555595959%');
+		).toBe('1.005555555595958%');
 	});
 
 	test('ratio', () => {
@@ -360,7 +359,7 @@ describe('getYAxisFormattedValue - precision option tests', () => {
 				's',
 				PrecisionOptionsEnum.FULL,
 			),
-		).toBe('26.254299141484417 µs');
+		).toBe('26254299141484417000000 µs');
 
 		expect(
 			getYAxisFormattedValue('4353.81', 'ms', PrecisionOptionsEnum.FULL),

frontend/src/components/Graph/types.ts

@@ -78,18 +78,3 @@ export interface ITimeRange {
 	minTime: number | null;
 	maxTime: number | null;
 }
-
-export const DEFAULT_SIGNIFICANT_DIGITS = 15;
-
-// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
-export const MAX_DECIMALS = 15;
-
-export enum PrecisionOptionsEnum {
-	ZERO = 0,
-	ONE = 1,
-	TWO = 2,
-	THREE = 3,
-	FOUR = 4,
-	FULL = 'full',
-}
-export type PrecisionOption = 0 | 1 | 2 | 3 | 4 | PrecisionOptionsEnum.FULL;

frontend/src/components/Graph/utils.ts

@@ -16,12 +16,8 @@ import {
 } from './Plugin/IntersectionCursor';
 import {
 	CustomChartOptions,
-	DEFAULT_SIGNIFICANT_DIGITS,
 	GraphOnClickHandler,
 	IAxisTimeConfig,
-	MAX_DECIMALS,
-	PrecisionOption,
-	PrecisionOptionsEnum,
 	StaticLineProps,
 } from './types';
 import { getToolTipValue, getYAxisFormattedValue } from './yAxisConfig';
@@ -153,7 +149,6 @@ export const getGraphOptions = (
 	scales: {
 		x: {
 			stacked: isStacked,
-			offset: false,
 			grid: {
 				display: true,
 				color: getGridColor(),
@@ -246,68 +241,3 @@ declare module 'chart.js' {
 		custom: TooltipPositionerFunction<ChartType>;
 	}
 }
-
-/**
- * Formats a number for display, preserving leading zeros after the decimal point
- * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
- * It avoids scientific notation and removes unnecessary trailing zeros.
- *
- * @example
- * formatDecimalWithLeadingZeros(1.2345); // "1.2345"
- * formatDecimalWithLeadingZeros(0.0012345); // "0.0012345"
- * formatDecimalWithLeadingZeros(5.0); // "5"
- *
- * @param value The number to format.
- * @returns The formatted string.
- */
-export const formatDecimalWithLeadingZeros = (
-	value: number,
-	precision: PrecisionOption,
-): string => {
-	if (value === 0) {
-		return '0';
-	}
-
-	// Use toLocaleString to get a full decimal representation without scientific notation.
-	const numStr = value.toLocaleString('en-US', {
-		useGrouping: false,
-		maximumFractionDigits: 20,
-	});
-
-	const [integerPart, decimalPart = ''] = numStr.split('.');
-
-	// If there's no decimal part, the integer part is the result.
-	if (!decimalPart) {
-		return integerPart;
-	}
-
-	// Find the index of the first non-zero digit in the decimal part.
-	const firstNonZeroIndex = decimalPart.search(/[^0]/);
-
-	// If the decimal part consists only of zeros, return just the integer part.
-	if (firstNonZeroIndex === -1) {
-		return integerPart;
-	}
-
-	// Determine the number of decimals to keep: leading zeros + up to N significant digits.
-	const significantDigits =
-		precision === PrecisionOptionsEnum.FULL
-			? DEFAULT_SIGNIFICANT_DIGITS
-			: precision;
-	const decimalsToKeep = firstNonZeroIndex + (significantDigits || 0);
-
-	// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
-	const finalDecimalsToKeep = Math.min(decimalsToKeep, MAX_DECIMALS);
-	const trimmedDecimalPart = decimalPart.substring(0, finalDecimalsToKeep);
-
-	// If precision is 0, we drop the decimal part entirely.
-	if (precision === 0) {
-		return integerPart;
-	}
-
-	// Remove any trailing zeros from the result to keep it clean.
-	const finalDecimalPart = trimmedDecimalPart.replace(/0+$/, '');
-
-	// Return the integer part, or the integer and decimal parts combined.
-	return finalDecimalPart ? `${integerPart}.${finalDecimalPart}` : integerPart;
-};

frontend/src/components/Graph/yAxisConfig.ts

@@ -1,17 +1,86 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { formattedValueToString, getValueFormat } from '@grafana/data';
 import * as Sentry from '@sentry/react';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
-import { isUniversalUnit } from 'components/YAxisUnitSelector/utils';
 import { isNaN } from 'lodash-es';
 
-import { formatUniversalUnit } from '../YAxisUnitSelector/formatter';
-import {
-	DEFAULT_SIGNIFICANT_DIGITS,
-	PrecisionOption,
-	PrecisionOptionsEnum,
-} from './types';
-import { formatDecimalWithLeadingZeros } from './utils';
+const DEFAULT_SIGNIFICANT_DIGITS = 15;
+// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
+const MAX_DECIMALS = 15;
+
+export enum PrecisionOptionsEnum {
+	ZERO = 0,
+	ONE = 1,
+	TWO = 2,
+	THREE = 3,
+	FOUR = 4,
+	FULL = 'full',
+}
+export type PrecisionOption = 0 | 1 | 2 | 3 | 4 | PrecisionOptionsEnum.FULL;
+
+/**
+ * Formats a number for display, preserving leading zeros after the decimal point
+ * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
+ * It avoids scientific notation and removes unnecessary trailing zeros.
+ *
+ * @example
+ * formatDecimalWithLeadingZeros(1.2345); // "1.2345"
+ * formatDecimalWithLeadingZeros(0.0012345); // "0.0012345"
+ * formatDecimalWithLeadingZeros(5.0); // "5"
+ *
+ * @param value The number to format.
+ * @returns The formatted string.
+ */
+const formatDecimalWithLeadingZeros = (
+	value: number,
+	precision: PrecisionOption,
+): string => {
+	if (value === 0) {
+		return '0';
+	}
+
+	// Use toLocaleString to get a full decimal representation without scientific notation.
+	const numStr = value.toLocaleString('en-US', {
+		useGrouping: false,
+		maximumFractionDigits: 20,
+	});
+
+	const [integerPart, decimalPart = ''] = numStr.split('.');
+
+	// If there's no decimal part, the integer part is the result.
+	if (!decimalPart) {
+		return integerPart;
+	}
+
+	// Find the index of the first non-zero digit in the decimal part.
+	const firstNonZeroIndex = decimalPart.search(/[^0]/);
+
+	// If the decimal part consists only of zeros, return just the integer part.
+	if (firstNonZeroIndex === -1) {
+		return integerPart;
+	}
+
+	// Determine the number of decimals to keep: leading zeros + up to N significant digits.
+	const significantDigits =
+		precision === PrecisionOptionsEnum.FULL
+			? DEFAULT_SIGNIFICANT_DIGITS
+			: precision;
+	const decimalsToKeep = firstNonZeroIndex + (significantDigits || 0);
+
+	// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
+	const finalDecimalsToKeep = Math.min(decimalsToKeep, MAX_DECIMALS);
+	const trimmedDecimalPart = decimalPart.substring(0, finalDecimalsToKeep);
+
+	// If precision is 0, we drop the decimal part entirely.
+	if (precision === 0) {
+		return integerPart;
+	}
+
+	// Remove any trailing zeros from the result to keep it clean.
+	const finalDecimalPart = trimmedDecimalPart.replace(/0+$/, '');
+
+	// Return the integer part, or the integer and decimal parts combined.
+	return finalDecimalPart ? `${integerPart}.${finalDecimalPart}` : integerPart;
+};
 
 /**
  * Formats a Y-axis value based on a given format string.
@@ -32,10 +101,19 @@ export const getYAxisFormattedValue = (
 	if (numValue === Infinity) return '∞';
 	if (numValue === -Infinity) return '-∞';
 
+	const decimalPlaces = value.split('.')[1]?.length || undefined;
+
+	// Use custom formatter for the 'none' format honoring precision
+	if (format === 'none') {
+		return formatDecimalWithLeadingZeros(numValue, precision);
+	}
+
 	// For all other standard formats, delegate to grafana/data's built-in formatter.
 	const computeDecimals = (): number | undefined => {
 		if (precision === PrecisionOptionsEnum.FULL) {
-			return DEFAULT_SIGNIFICANT_DIGITS;
+			return decimalPlaces && decimalPlaces >= DEFAULT_SIGNIFICANT_DIGITS
+				? decimalPlaces
+				: DEFAULT_SIGNIFICANT_DIGITS;
 		}
 		return precision;
 	};
@@ -52,22 +130,6 @@ export const getYAxisFormattedValue = (
 	};
 
 	try {
-		// Use custom formatter for the 'none' format honoring precision
-		if (format === 'none') {
-			return formatDecimalWithLeadingZeros(numValue, precision);
-		}
-
-		// Separate logic for universal units// Separate logic for universal units
-		if (format && isUniversalUnit(format)) {
-			const decimals = computeDecimals();
-			return formatUniversalUnit(
-				numValue,
-				format as UniversalYAxisUnit,
-				precision,
-				decimals,
-			);
-		}
-
 		const formatter = getValueFormat(format);
 		const formattedValue = formatter(numValue, computeDecimals(), undefined);
 		if (formattedValue.text && formattedValue.text.includes('.')) {
@@ -76,7 +138,6 @@ export const getYAxisFormattedValue = (
 				precision,
 			);
 		}
-
 		return formattedValueToString(formattedValue);
 	} catch (error) {
 		Sentry.captureEvent({

frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss

@@ -0,0 +1,152 @@
+.kbar-command-palette__positioner {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding: 1rem;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(6px);
+	z-index: 50;
+}
+
+.kbar-command-palette__animator {
+	width: 100%;
+	max-width: 600px;
+}
+
+.kbar-command-palette__card {
+	background: var(--bg-ink-500);
+	color: var(--text-vanilla-100);
+	border-radius: 3px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.kbar-command-palette__search {
+	padding: 12px 16px;
+	font-size: 13px;
+	border: none;
+	border-bottom: 1px solid var(--border-ink-200);
+	color: var(--text-vanilla-100);
+	outline: none;
+	background-color: var(--bg-ink-500);
+}
+
+.kbar-command-palette__section {
+	padding: 8px 16px 4px;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--text-robin-500);
+	font-family: 'Inter', sans-serif;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+}
+
+.kbar-command-palette__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	font-size: 13px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.kbar-command-palette__item:hover,
+.kbar-command-palette__item--active {
+	background: var(--bg-ink-400);
+}
+
+.kbar-command-palette__icon {
+	flex-shrink: 0;
+	width: 18px;
+	height: 18px;
+	color: #444;
+}
+
+.kbar-command-palette__shortcut {
+	margin-left: auto;
+	display: flex;
+	gap: 4px;
+}
+
+.kbar-command-palette__key {
+	padding: 2px 6px;
+	font-size: 12px;
+	border-radius: 4px;
+	background: var(--bg-ink-300);
+	color: var(--text-vanilla-300);
+	text-transform: uppercase;
+	font-family: 'Space Mono', monospace;
+}
+
+.kbar-command-palette__results-container {
+	div {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-300);
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: var(--bg-slate-200);
+		}
+	}
+}
+
+.lightMode {
+	.kbar-command-palette__positioner {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.kbar-command-palette__card {
+		background: #fff;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	}
+
+	.kbar-command-palette__search {
+		border-bottom: 1px solid #e5e5e5;
+		color: var(--text-ink-500);
+		background-color: var(--bg-vanilla-100);
+	}
+
+	.kbar-command-palette__item {
+		color: var(--text-ink-500);
+	}
+
+	.kbar-command-palette__item:hover,
+	.kbar-command-palette__item--active {
+		background: #f5f5f5;
+	}
+
+	.kbar-command-palette__icon {
+		color: #444;
+	}
+
+	.kbar-command-palette__key {
+		background: #eee;
+		color: #555;
+	}
+
+	.kbar-command-palette__results-container {
+		div {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-300);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--bg-vanilla-300);
+			}
+		}
+	}
+}

frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx

@@ -0,0 +1,69 @@
+import './KBarCommandPalette.scss';
+
+import {
+	KBarAnimator,
+	KBarPortal,
+	KBarPositioner,
+	KBarResults,
+	KBarSearch,
+	useMatches,
+} from 'kbar';
+
+function Results(): JSX.Element {
+	const { results } = useMatches();
+
+	const renderResults = ({
+		item,
+		active,
+	}: {
+		item: any;
+		active: boolean;
+	}): JSX.Element =>
+		typeof item === 'string' ? (
+			<div className="kbar-command-palette__section">{item}</div>
+		) : (
+			<div
+				className={`kbar-command-palette__item ${
+					active ? 'kbar-command-palette__item--active' : ''
+				}`}
+			>
+				{item.icon}
+				<span>{item.name}</span>
+				{item.shortcut?.length ? (
+					<span className="kbar-command-palette__shortcut">
+						{item.shortcut.map((sc: string) => (
+							<kbd key={sc} className="kbar-command-palette__key">
+								{sc}
+							</kbd>
+						))}
+					</span>
+				) : null}
+			</div>
+		);
+
+	return (
+		<div className="kbar-command-palette__results-container">
+			<KBarResults items={results} onRender={renderResults} />
+		</div>
+	);
+}
+
+function KBarCommandPalette(): JSX.Element {
+	return (
+		<KBarPortal>
+			<KBarPositioner className="kbar-command-palette__positioner">
+				<KBarAnimator className="kbar-command-palette__animator">
+					<div className="kbar-command-palette__card">
+						<KBarSearch
+							className="kbar-command-palette__search"
+							placeholder="Search or type a command..."
+						/>
+						<Results />
+					</div>
+				</KBarAnimator>
+			</KBarPositioner>
+		</KBarPortal>
+	);
+}
+
+export default KBarCommandPalette;

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -1,15 +1,11 @@
-.log-field-container {
-	display: flex;
-	overflow: hidden;
-	width: 100%;
-	align-items: baseline;
-}
-.log-field-key,
-.log-field-key-colon {
+.log-field-key {
+	padding-right: 5px;
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
 
 	&.small {
 		font-size: 11px;
@@ -26,20 +22,6 @@
 		line-height: 24px;
 	}
 }
-.log-field-key {
-	line-height: 18px; /* 128.571% */
-	letter-spacing: -0.07px;
-	white-space: nowrap;
-	display: inline-block;
-	max-width: 20vw;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	margin: 0;
-}
-.log-field-key-colon {
-	min-width: 0.8rem;
-	flex-shrink: 0;
-}
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
@@ -176,8 +158,7 @@
 }
 
 .lightMode {
-	.log-field-key,
-	.log-field-key-colon {
+	.log-field-key {
 		color: var(--text-slate-400);
 	}
 	.log-value {
@@ -189,10 +170,3 @@
 		}
 	}
 }
-
-.dark {
-	.log-field-key,
-	.log-field-key-colon {
-		color: rgba(255, 255, 255, 0.45);
-	}
-}

frontend/src/components/Logs/ListLogView/index.tsx

@@ -25,7 +25,13 @@ import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButton
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
-import { Container, LogContainer, LogText } from './styles';
+import {
+	Container,
+	LogContainer,
+	LogText,
+	Text,
+	TextContainer,
+} from './styles';
 import { isValidLogField } from './util';
 
 interface LogFieldProps {
@@ -52,18 +58,16 @@ function LogGeneralField({
 	);
 
 	return (
-		<div className="log-field-container">
-			<p className={cx('log-field-key', fontSize)} title={fieldKey}>
-				{fieldKey}
-			</p>
-			<span className={cx('log-field-key-colon', fontSize)}>&nbsp;:&nbsp;</span>
+		<TextContainer>
+			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
+				{`${fieldKey} : `}
+			</Text>
 			<LogText
 				dangerouslySetInnerHTML={html}
 				className={cx('log-value', fontSize)}
-				title={fieldValue}
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
-		</div>
+		</TextContainer>
 	);
 }
 

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Card } from 'antd';
+import { Card, Typography } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground } from 'utils/logs';
@@ -46,6 +46,19 @@ export const Container = styled(Card)<{
 			getActiveLogBackground($isActiveLog, $isDarkMode, $logType)}
 `;
 
+export const Text = styled(Typography.Text)`
+	&&& {
+		min-width: 2.5rem;
+		white-space: nowrap;
+	}
+`;
+
+export const TextContainer = styled.div`
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+`;
+
 export const LogContainer = styled.div<LogContainerProps>`
 	margin-left: 0.5rem;
 	display: flex;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -471,13 +471,11 @@ function LogsFormatOptionsMenu({
 			rootClassName="format-options-popover"
 			destroyTooltipOnHide
 		>
-			<Tooltip title="Options">
-				<Button
-					className="periscope-btn ghost"
-					icon={<Sliders size={14} />}
-					data-testid="periscope-btn-format-options"
-				/>
-			</Tooltip>
+			<Button
+				className="periscope-btn ghost"
+				icon={<Sliders size={14} />}
+				data-testid="periscope-btn-format-options"
+			/>
 		</Popover>
 	);
 }

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.scss

@@ -1,16 +0,0 @@
-.overflow-input {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.overflow-input-mirror {
-	position: absolute;
-	visibility: hidden;
-	white-space: pre;
-	pointer-events: none;
-	font: inherit;
-	letter-spacing: inherit;
-	height: 0;
-	overflow: hidden;
-}

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.test.tsx

@@ -1,119 +0,0 @@
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-
-import OverflowInputToolTip from './OverflowInputToolTip';
-
-const TOOLTIP_INNER_SELECTOR = '.ant-tooltip-inner';
-// Utility to mock overflow behaviour on inputs / elements.
-// Stubs HTMLElement.prototype.clientWidth, scrollWidth and offsetWidth used by component.
-function mockOverflow(clientWidth: number, scrollWidth: number): void {
-	Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
-		configurable: true,
-		value: clientWidth,
-	});
-	Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
-		configurable: true,
-		value: scrollWidth,
-	});
-	// mirror.offsetWidth is used to compute mirrorWidth = offsetWidth + 24.
-	// Use clientWidth so the mirror measurement aligns with the mocked client width in tests.
-	Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-		configurable: true,
-		value: clientWidth,
-	});
-}
-
-function queryTooltipInner(): HTMLElement | null {
-	// find element that has role="tooltip" (could be the inner itself)
-	const tooltip = document.querySelector<HTMLElement>('[role="tooltip"]');
-	if (!tooltip) return document.querySelector(TOOLTIP_INNER_SELECTOR);
-
-	// if the role element is already the inner, return it; otherwise return its descendant
-	if (tooltip.classList.contains('ant-tooltip-inner')) return tooltip;
-	return (
-		(tooltip.querySelector(TOOLTIP_INNER_SELECTOR) as HTMLElement) ??
-		document.querySelector(TOOLTIP_INNER_SELECTOR)
-	);
-}
-
-describe('OverflowInputToolTip', () => {
-	beforeEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	test('shows tooltip when content overflows and input is clamped at maxAutoWidth', async () => {
-		mockOverflow(150, 250); // clientWidth >= maxAutoWidth (150), scrollWidth > clientWidth
-
-		render(<OverflowInputToolTip value="Very long overflowing text" />);
-
-		await userEvent.hover(screen.getByRole('textbox'));
-
-		await waitFor(() => {
-			expect(queryTooltipInner()).not.toBeNull();
-		});
-
-		const tooltipInner = queryTooltipInner();
-		if (!tooltipInner) throw new Error('Tooltip inner not found');
-		expect(
-			within(tooltipInner).getByText('Very long overflowing text'),
-		).toBeInTheDocument();
-	});
-
-	test('does NOT show tooltip when content does not overflow', async () => {
-		mockOverflow(150, 100); // content fits (scrollWidth <= clientWidth)
-
-		render(<OverflowInputToolTip value="Short text" />);
-
-		await userEvent.hover(screen.getByRole('textbox'));
-
-		await waitFor(() => {
-			expect(queryTooltipInner()).toBeNull();
-		});
-	});
-
-	test('does NOT show tooltip when content overflows but input is NOT at maxAutoWidth', async () => {
-		mockOverflow(100, 250); // clientWidth < maxAutoWidth (150), scrollWidth > clientWidth
-
-		render(<OverflowInputToolTip value="Long but input not clamped" />);
-
-		await userEvent.hover(screen.getByRole('textbox'));
-
-		await waitFor(() => {
-			expect(queryTooltipInner()).toBeNull();
-		});
-	});
-
-	test('uncontrolled input allows typing', async () => {
-		render(<OverflowInputToolTip defaultValue="Init" />);
-
-		const input = screen.getByRole('textbox') as HTMLInputElement;
-		await userEvent.type(input, 'ABC');
-
-		expect(input).toHaveValue('InitABC');
-	});
-
-	test('disabled input never shows tooltip even if overflowing', async () => {
-		mockOverflow(150, 300);
-
-		render(<OverflowInputToolTip value="Overflowing!" disabled />);
-
-		await userEvent.hover(screen.getByRole('textbox'));
-
-		await waitFor(() => {
-			expect(queryTooltipInner()).toBeNull();
-		});
-	});
-
-	test('renders mirror span and input correctly (structural assertions instead of snapshot)', () => {
-		const { container } = render(<OverflowInputToolTip value="Snapshot" />);
-		const mirror = container.querySelector('.overflow-input-mirror');
-		const input = container.querySelector('input') as HTMLInputElement | null;
-
-		expect(mirror).toBeTruthy();
-		expect(mirror?.textContent).toBe('Snapshot');
-		expect(input).toBeTruthy();
-		expect(input?.value).toBe('Snapshot');
-
-		// width should be set inline (component calculates width on mount)
-		expect(input?.getAttribute('style')).toContain('width:');
-	});
-});

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.tsx

@@ -1,73 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable react/jsx-props-no-spreading */
-
-import './OverflowInputToolTip.scss';
-
-import { Input, InputProps, InputRef, Tooltip } from 'antd';
-import cx from 'classnames';
-import { useEffect, useRef, useState } from 'react';
-
-export interface OverflowTooltipInputProps extends InputProps {
-	tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
-	minAutoWidth?: number;
-	maxAutoWidth?: number;
-}
-
-function OverflowInputToolTip({
-	value,
-	defaultValue,
-	onChange,
-	disabled = false,
-	tooltipPlacement = 'top',
-	className,
-	minAutoWidth = 70,
-	maxAutoWidth = 150,
-	...rest
-}: OverflowTooltipInputProps): JSX.Element {
-	const inputRef = useRef<InputRef>(null);
-	const mirrorRef = useRef<HTMLSpanElement | null>(null);
-	const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
-
-	useEffect(() => {
-		const input = inputRef.current?.input;
-		const mirror = mirrorRef.current;
-		if (!input || !mirror) {
-			setIsOverflowing(false);
-			return;
-		}
-
-		mirror.textContent = String(value ?? '') || ' ';
-		const mirrorWidth = mirror.offsetWidth + 24;
-		const newWidth = Math.min(maxAutoWidth, Math.max(minAutoWidth, mirrorWidth));
-		input.style.width = `${newWidth}px`;
-
-		// consider clamped when mirrorWidth reaches maxAutoWidth (allow -5px tolerance)
-		const isClamped = mirrorWidth >= maxAutoWidth - 5;
-		const overflow = input.scrollWidth > input.clientWidth && isClamped;
-
-		setIsOverflowing(overflow);
-	}, [value, disabled, minAutoWidth, maxAutoWidth]);
-
-	const tooltipTitle = !disabled && isOverflowing ? String(value ?? '') : '';
-
-	return (
-		<>
-			<span ref={mirrorRef} aria-hidden className="overflow-input-mirror" />
-			<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
-				<Input
-					{...rest}
-					value={value}
-					defaultValue={defaultValue}
-					onChange={onChange}
-					disabled={disabled}
-					ref={inputRef}
-					className={cx('overflow-input', className)}
-				/>
-			</Tooltip>
-		</>
-	);
-}
-
-OverflowInputToolTip.displayName = 'OverflowInputToolTip';
-
-export default OverflowInputToolTip;

frontend/src/components/OverflowInputToolTip/index.tsx

@@ -1,3 +0,0 @@
-import OverflowInputToolTip from './OverflowInputToolTip';
-
-export default OverflowInputToolTip;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -300,10 +300,6 @@
 				}
 			}
 			.qb-trace-operator-button-container {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-
 				&-text {
 					display: flex;
 					align-items: center;
@@ -560,10 +556,6 @@
 					border: 1px solid var(--bg-vanilla-300) !important;
 					background: var(--bg-vanilla-100) !important;
 					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-					.ant-select-selection-item {
-						color: var(--text-ink-400);
-					}
 				}
 			}
 		}
@@ -573,10 +565,6 @@
 				border: 1px solid var(--bg-vanilla-300) !important;
 				background: var(--bg-vanilla-100) !important;
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-				.ant-select-selection-item {
-					color: var(--text-ink-400);
-				}
 			}
 
 			.ant-select-arrow {

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -169,10 +169,6 @@
 					.ant-select-selector {
 						border: 1px solid var(--bg-vanilla-300) !important;
 						background: var(--bg-vanilla-100) !important;
-
-						.ant-select-selection-item {
-							color: var(--text-ink-400);
-						}
 					}
 				}
 			}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -32,7 +32,6 @@ const ADD_ONS_KEYS = {
 	ORDER_BY: 'order_by',
 	LIMIT: 'limit',
 	LEGEND_FORMAT: 'legend_format',
-	REDUCE_TO: 'reduce_to',
 };
 
 const ADD_ONS_KEYS_TO_QUERY_PATH = {
@@ -41,14 +40,13 @@ const ADD_ONS_KEYS_TO_QUERY_PATH = {
 	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
 	[ADD_ONS_KEYS.LIMIT]: 'limit',
 	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
-	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
 };
 
 const ADD_ONS = [
 	{
 		icon: <BarChart2 size={14} />,
 		label: 'Group By',
-		key: ADD_ONS_KEYS.GROUP_BY,
+		key: 'group_by',
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
@@ -56,7 +54,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: ADD_ONS_KEYS.HAVING,
+		key: 'having',
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -65,7 +63,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: ADD_ONS_KEYS.ORDER_BY,
+		key: 'order_by',
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -74,7 +72,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: ADD_ONS_KEYS.LIMIT,
+		key: 'limit',
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -83,7 +81,7 @@ const ADD_ONS = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: ADD_ONS_KEYS.LEGEND_FORMAT,
+		key: 'legend_format',
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -94,7 +92,7 @@ const ADD_ONS = [
 const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: ADD_ONS_KEYS.REDUCE_TO,
+	key: 'reduce_to',
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
@@ -220,9 +218,10 @@ function QueryAddOns({
 		);
 
 		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
+
 		// Filter and set selected views: add-ons that are both active and available
 		setSelectedViews(
-			filteredAddOns.filter(
+			ADD_ONS.filter(
 				(addOn) =>
 					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
 			),
@@ -301,7 +300,7 @@ function QueryAddOns({
 	);
 
 	return (
-		<div className="query-add-ons" data-testid="query-add-ons">
+		<div className="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
 					{selectedViews.find((view) => view.key === 'group_by') && (

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -43,10 +43,7 @@ function QueryAggregationOptions({
 	};
 
 	return (
-		<div
-			className="query-aggregation-container"
-			data-testid="query-aggregation-container"
-		>
+		<div className="query-aggregation-container">
 			<div className="aggregation-container">
 				<QueryAggregationSelect
 					onChange={onChange}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -2,74 +2,8 @@ import './QueryFooter.styles.scss';
 
 /* eslint-disable react/require-default-props */
 import { Button, Tooltip, Typography } from 'antd';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { DraftingCompass, Plus, Sigma } from 'lucide-react';
 import BetaTag from 'periscope/components/BetaTag/BetaTag';
-import { useMemo } from 'react';
-
-function TraceOperatorSection({
-	addTraceOperator,
-}: {
-	addTraceOperator?: () => void;
-}): JSX.Element {
-	const { currentQuery, panelType } = useQueryBuilder();
-
-	const showTraceOperatorWarning = useMemo(() => {
-		const isListViewPanel =
-			panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
-		const hasMultipleQueries = currentQuery.builder.queryData.length > 1;
-		const hasTraceOperator =
-			currentQuery.builder.queryTraceOperator &&
-			currentQuery.builder.queryTraceOperator.length > 0;
-		return isListViewPanel && hasMultipleQueries && !hasTraceOperator;
-	}, [
-		currentQuery?.builder?.queryData,
-		currentQuery?.builder?.queryTraceOperator,
-		panelType,
-	]);
-
-	const traceOperatorWarning = useMemo(() => {
-		if (currentQuery.builder.queryData.length === 0) return '';
-		const firstQuery = currentQuery.builder.queryData[0];
-		return `Currently, you are only seeing results from query ${firstQuery.queryName}. Add a trace operator to combine results of multiple queries.`;
-	}, [currentQuery]);
-	return (
-		<div className="qb-trace-operator-button-container">
-			<Tooltip
-				title={
-					<div style={{ textAlign: 'center' }}>
-						Add Trace Matching
-						<Typography.Link
-							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
-							target="_blank"
-							style={{ textDecoration: 'underline' }}
-						>
-							{' '}
-							<br />
-							Learn more
-						</Typography.Link>
-					</div>
-				}
-			>
-				<Button
-					className="add-trace-operator-button periscope-btn"
-					icon={<DraftingCompass size={16} />}
-					onClick={(): void => addTraceOperator?.()}
-				>
-					<div className="qb-trace-operator-button-container-text">
-						Add Trace Matching
-						<BetaTag />
-					</div>
-				</Button>
-			</Tooltip>
-			{showTraceOperatorWarning && (
-				<WarningPopover message={traceOperatorWarning} />
-			)}
-		</div>
-	);
-}
 
 export default function QueryFooter({
 	addNewBuilderQuery,
@@ -126,7 +60,35 @@ export default function QueryFooter({
 					</div>
 				)}
 				{showAddTraceOperator && (
-					<TraceOperatorSection addTraceOperator={addTraceOperator} />
+					<div className="qb-trace-operator-button-container">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add Trace Matching
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
+						>
+							<Button
+								className="add-trace-operator-button periscope-btn "
+								icon={<DraftingCompass size={16} />}
+								onClick={(): void => addTraceOperator?.()}
+							>
+								<div className="qb-trace-operator-button-container-text">
+									Add Trace Matching
+									<BetaTag />
+								</div>
+							</Button>
+						</Tooltip>
+					</div>
 				)}
 			</div>
 		</div>

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -114,9 +114,9 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
+	const handleQueryValidation = useCallback((newQuery: string): void => {
 		try {
-			const validationResponse = validateQuery(newExpression);
+			const validationResponse = validateQuery(newQuery);
 			setValidation(validationResponse);
 		} catch (error) {
 			setValidation({
@@ -127,7 +127,7 @@ function QuerySearch({
 		}
 	}, []);
 
-	const getCurrentExpression = useCallback(
+	const getCurrentQuery = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
 		[],
 	);
@@ -167,14 +167,19 @@ function QuerySearch({
 		() => {
 			if (!isEditorReady) return;
 
-			const newExpression = queryData.filter?.expression || '';
-			const currentExpression = getCurrentExpression();
+			const newQuery = queryData.filter?.expression || '';
+			const currentQuery = getCurrentQuery();
 
-			// Do not update codemirror editor if the expression is the same
-			if (newExpression !== currentExpression && !isFocused) {
-				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
+			/* eslint-disable-next-line sonarjs/no-collapsible-if */
+			if (newQuery !== currentQuery && !isFocused) {
+				// Prevent clearing a non-empty editor when queryData becomes empty temporarily
+				// Only update if newQuery has a value, or if both are empty (initial state)
+				if (newQuery || !currentQuery) {
+					updateEditorValue(newQuery, { skipOnChange: true });
+
+					if (newQuery) {
+						handleQueryValidation(newQuery);
+					}
 				}
 			}
 		},
@@ -608,8 +613,8 @@ function QuerySearch({
 	};
 
 	const handleBlur = (): void => {
-		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		const currentQuery = getCurrentQuery();
+		handleQueryValidation(currentQuery);
 		setIsFocused(false);
 	};
 
@@ -628,11 +633,11 @@ function QuerySearch({
 
 	const handleExampleClick = (exampleQuery: string): void => {
 		// If there's an existing query, append the example with AND
-		const currentExpression = getCurrentExpression();
-		const newExpression = currentExpression
-			? `${currentExpression} AND ${exampleQuery}`
+		const currentQuery = getCurrentQuery();
+		const newQuery = currentQuery
+			? `${currentQuery} AND ${exampleQuery}`
 			: exampleQuery;
-		updateEditorValue(newExpression);
+		updateEditorValue(newQuery);
 	};
 
 	// Helper function to render a badge for the current context mode
@@ -668,9 +673,9 @@ function QuerySearch({
 		if (word?.from === word?.to && !context.explicit) return null;
 
 		// Get current query from editor
-		const currentExpression = getCurrentExpression();
+		const currentQuery = editorRef.current?.state.doc.toString() || '';
 		// Get the query context at the cursor position
-		const queryContext = getQueryContextAtCursor(currentExpression, cursorPos.ch);
+		const queryContext = getQueryContextAtCursor(currentQuery, cursorPos.ch);
 
 		// Define autocomplete options based on the context
 		let options: {
@@ -1166,8 +1171,8 @@ function QuerySearch({
 
 		if (queryContext.isInParenthesis) {
 			// Different suggestions based on the context within parenthesis or bracket
-			const currentExpression = getCurrentExpression();
-			const curChar = currentExpression.charAt(cursorPos.ch - 1) || '';
+			const currentQuery = editorRef.current?.state.doc.toString() || '';
+			const curChar = currentQuery.charAt(cursorPos.ch - 1) || '';
 
 			if (curChar === '(' || curChar === '[') {
 				// Right after opening parenthesis/bracket
@@ -1316,7 +1321,7 @@ function QuerySearch({
 						style={{
 							position: 'absolute',
 							top: 8,
-							right: validation.isValid === false && getCurrentExpression() ? 40 : 8, // Move left when error shown
+							right: validation.isValid === false && getCurrentQuery() ? 40 : 8, // Move left when error shown
 							cursor: 'help',
 							zIndex: 10,
 							transition: 'right 0.2s ease',
@@ -1378,7 +1383,7 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											onRun(getCurrentQuery());
 										} else {
 											handleRunQuery();
 										}
@@ -1404,7 +1409,7 @@ function QuerySearch({
 					onBlur={handleBlur}
 				/>
 
-				{getCurrentExpression() && validation.isValid === false && !isFocused && (
+				{getCurrentQuery() && validation.isValid === false && !isFocused && (
 					<div
 						className={cx('query-status-container', {
 							hasErrors: validation.errors.length > 0,

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable import/named */
-import { EditorView } from '@uiw/react-codemirror';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { initialQueriesMap } from 'constants/queryBuilder';
@@ -152,6 +151,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetKeys.mockClear();
 
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -170,8 +171,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
 
 		// Focus and type into the editor
-		await userEvent.click(editor);
-		await userEvent.type(editor, SAMPLE_KEY_TYPING);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_KEY_TYPING);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetKeys).toHaveBeenCalled(), {
@@ -186,6 +187,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedGetValues.mockClear();
 
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -201,8 +204,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await userEvent.click(editor);
-		await userEvent.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_VALUE_TYPING_INCOMPLETE);
 
 		// Wait for debounced API call (300ms debounce + some buffer)
 		await waitFor(() => expect(mockedGetValues).toHaveBeenCalled(), {
@@ -238,6 +241,7 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 
 	it('calls provided onRun on Mod-Enter', async () => {
 		const onRun = jest.fn() as jest.MockedFunction<(q: string) => void>;
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 		render(
 			<QuerySearch
@@ -255,8 +259,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await userEvent.click(editor);
-		await userEvent.type(editor, SAMPLE_STATUS_QUERY);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_STATUS_QUERY);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -276,6 +280,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		>;
 		mockedHandleRunQuery.mockClear();
 
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
 		render(
 			<QuerySearch
 				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
@@ -291,8 +297,8 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		});
 
 		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await userEvent.click(editor);
-		await userEvent.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+		await user.click(editor);
+		await user.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
 
 		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
 		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
@@ -342,73 +348,4 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 			{ timeout: 3000 },
 		);
 	});
-
-	it('handles queryData.filter.expression changes without triggering onChange', async () => {
-		// Spy on CodeMirror's EditorView.dispatch, which is invoked when updateEditorValue
-		// applies a programmatic change to the editor.
-		const dispatchSpy = jest.spyOn(EditorView.prototype, 'dispatch');
-		const initialExpression = "service.name = 'frontend'";
-		const updatedExpression = "service.name = 'backend'";
-
-		const onChange = jest.fn() as jest.MockedFunction<(v: string) => void>;
-
-		const initialQueryData = {
-			...initialQueriesMap.logs.builder.queryData[0],
-			filter: {
-				expression: initialExpression,
-			},
-		};
-
-		const { rerender } = render(
-			<QuerySearch
-				onChange={onChange}
-				queryData={initialQueryData}
-				dataSource={DataSource.LOGS}
-			/>,
-		);
-
-		// Wait for CodeMirror to initialize with the initial expression
-		await waitFor(
-			() => {
-				const editorContent = document.querySelector(
-					CM_EDITOR_SELECTOR,
-				) as HTMLElement;
-				expect(editorContent).toBeInTheDocument();
-				const textContent = editorContent.textContent || '';
-				expect(textContent).toBe(initialExpression);
-			},
-			{ timeout: 3000 },
-		);
-
-		// Ensure the editor is explicitly blurred (not focused)
-		// Blur the actual CodeMirror editor container so that QuerySearch's onBlur handler runs.
-		// Note: In jsdom + CodeMirror we can't reliably assert the DOM text content changes when
-		// the expression is updated programmatically, but we can assert that:
-		// 1) The component continues to render, and
-		// 2) No onChange is fired for programmatic updates.
-
-		const updatedQueryData = {
-			...initialQueryData,
-			filter: {
-				expression: updatedExpression,
-			},
-		};
-
-		// Re-render with updated queryData.filter.expression
-		rerender(
-			<QuerySearch
-				onChange={onChange}
-				queryData={updatedQueryData}
-				dataSource={DataSource.LOGS}
-			/>,
-		);
-
-		// updateEditorValue should have resulted in a dispatch call + onChange should not have been called
-		await waitFor(() => {
-			expect(dispatchSpy).toHaveBeenCalled();
-			expect(onChange).not.toHaveBeenCalled();
-		});
-
-		dispatchSpy.mockRestore();
-	});
 });

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -1,12 +1,6 @@
 /* eslint-disable */
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	within,
-} from 'tests/test-utils';
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
 
 import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -61,7 +55,16 @@ jest.mock('../QueryV2/QueryAddOns/HavingFilter/HavingFilter', () => ({
 	),
 }));
 
-// ReduceToFilter is not mocked - we test the actual Ant Design Select component
+jest.mock(
+	'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter',
+	() => ({
+		ReduceToFilter: ({ onChange }: any) => (
+			<button data-testid="reduce-to" onClick={() => onChange('sum')}>
+				ReduceToFilter
+			</button>
+		),
+	}),
+);
 
 function baseQuery(overrides: Partial<any> = {}): any {
 	return {
@@ -137,7 +140,7 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('order-by-content')).toBeInTheDocument();
 	});
 
-	it('limit input auto-opens when limit is set and changing it calls handler', async () => {
+	it('limit input auto-opens when limit is set and changing it calls handler', () => {
 		render(
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
@@ -180,88 +183,4 @@ describe('QueryAddOns', () => {
 		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
 		expect(limitInput.value).toBe('7');
 	});
-
-	it('shows reduce-to add-on when showReduceTo is true', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery()}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('query-add-on-reduce_to')).toBeInTheDocument();
-	});
-
-	it('auto-opens reduce-to content when reduceTo is set', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery({ reduceTo: 'sum' })}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('reduce-to-content')).toBeInTheDocument();
-	});
-
-	it('calls handleSetQueryData when reduce-to value changes', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const query = baseQuery({
-			reduceTo: 'avg',
-			aggregations: [{ id: 'a', operator: 'count', reduceTo: 'avg' }],
-		});
-		render(
-			<QueryAddOns
-				query={query}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		// Wait for the reduce-to content section to be visible (it auto-opens when reduceTo is set)
-		await waitFor(() => {
-			expect(screen.getByTestId('reduce-to-content')).toBeInTheDocument();
-		});
-
-		// Get the Select component by its role (combobox)
-		// The Select is within the reduce-to-content section
-		const reduceToContent = screen.getByTestId('reduce-to-content');
-		const selectCombobox = within(reduceToContent).getByRole('combobox');
-
-		// Open the dropdown by clicking on the combobox
-		await user.click(selectCombobox);
-
-		// Wait for the dropdown listbox to appear
-		await screen.findByRole('listbox');
-
-		// Find and click the "Sum" option
-		const sumOption = await screen.findByText('Sum of values in timeframe');
-		await user.click(sumOption);
-
-		// Verify the handler was called with the correct value
-		await waitFor(() => {
-			expect(mockHandleSetQueryData).toHaveBeenCalledWith(0, {
-				...query,
-				aggregations: [
-					{
-						...(query.aggregations?.[0] as any),
-						reduceTo: 'sum',
-					},
-				],
-			});
-		});
-	});
 });

frontend/src/components/QueryBuilderV2/__tests__/queryProcessor.test.ts

@@ -0,0 +1,543 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+
+import {
+	clearQueryPairsCache,
+	convertFiltersToExpressionWithExistingQuery,
+} from '../queryProcessor';
+
+describe('convertFiltersToExpressionWithExistingQuery', () => {
+	beforeEach(() => {
+		clearQueryPairsCache();
+		jest.clearAllMocks();
+	});
+
+	it('should handle empty, null, and undefined inputs', () => {
+		// Test null and undefined existing query
+		expect(
+			convertFiltersToExpressionWithExistingQuery(null as any, undefined),
+		).toEqual({
+			filters: null,
+			filter: { expression: '' },
+		});
+		expect(
+			convertFiltersToExpressionWithExistingQuery(undefined as any, undefined),
+		).toEqual({
+			filters: undefined,
+			filter: { expression: '' },
+		});
+
+		// Test empty filters
+		expect(
+			convertFiltersToExpressionWithExistingQuery(
+				{ items: [], op: 'AND' },
+				undefined,
+			),
+		).toEqual({
+			filters: { items: [], op: 'AND' },
+			filter: { expression: '' },
+		});
+		expect(
+			convertFiltersToExpressionWithExistingQuery(
+				{ items: undefined, op: 'AND' } as any,
+				undefined,
+			),
+		).toEqual({
+			filters: { items: undefined, op: 'AND' },
+			filter: { expression: '' },
+		});
+	});
+
+	it('should return filters with new expression when no existing query', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service.name', key: 'service.name', type: 'string' },
+					op: OPERATORS['='],
+					value: 'test-service',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			undefined,
+		);
+
+		expect(result.filters).toEqual(filters);
+		expect(result.filter.expression).toBe("service.name = 'test-service'");
+	});
+
+	it('should handle empty filters', () => {
+		const filters = {
+			items: [],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			undefined,
+		);
+
+		expect(result.filters).toEqual(filters);
+		expect(result.filter.expression).toBe('');
+	});
+
+	it('should create filters from existing query when filters array is empty', () => {
+		const filters = {
+			items: [],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name = 'testing'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filters.items[0]).toEqual({
+			id: expect.any(String),
+			key: {
+				id: 'service.name',
+				key: 'service.name',
+				type: '',
+			},
+			op: '=',
+			value: 'testing',
+		});
+		expect(result.filter.expression).toBe(existingQuery);
+	});
+
+	it('should create multiple filters from complex existing query', () => {
+		const filters = {
+			items: [],
+			op: 'AND',
+		};
+
+		const existingQuery =
+			"service.name = 'testing' AND status = 'success' AND count > 100";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(3);
+		expect(result.filters.items[0]).toEqual({
+			id: expect.any(String),
+			key: {
+				id: 'service.name',
+				key: 'service.name',
+				type: '',
+			},
+			op: '=',
+			value: 'testing',
+		});
+		expect(result.filters.items[1]).toEqual({
+			id: expect.any(String),
+			key: {
+				id: 'status',
+				key: 'status',
+				type: '',
+			},
+			op: '=',
+			value: 'success',
+		});
+		expect(result.filters.items[2]).toEqual({
+			id: expect.any(String),
+			key: {
+				id: 'count',
+				key: 'count',
+				type: '',
+			},
+			op: '>',
+			value: '100',
+		});
+		expect(result.filter.expression).toBe(existingQuery);
+	});
+
+	it('should handle existing query with matching filters', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service.name', key: 'service.name', type: 'string' },
+					op: OPERATORS['='],
+					value: 'updated-service',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name = 'old-service'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters).toBeDefined();
+		expect(result.filter).toBeDefined();
+		expect(result.filter.expression).toBe("service.name = 'updated-service'");
+		// Ensure parser can parse the existing query
+		expect(extractQueryPairs(existingQuery)).toEqual(
+			expect.arrayContaining([
+				expect.objectContaining({
+					key: 'service.name',
+					operator: '=',
+					value: "'old-service'",
+				}),
+			]),
+		);
+	});
+
+	it('should handle IN operator with existing query', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service.name', key: 'service.name', type: 'string' },
+					op: OPERATORS.IN,
+					value: ['service1', 'service2'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name IN ['old-service']";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters).toBeDefined();
+		expect(result.filter).toBeDefined();
+		expect(result.filter.expression).toBe(
+			"service.name IN ['service1', 'service2']",
+		);
+	});
+
+	it('should handle IN operator conversion from equals', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service.name', key: 'service.name', type: 'string' },
+					op: OPERATORS.IN,
+					value: ['service1', 'service2'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name = 'old-service'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe(
+			"service.name IN ['service1', 'service2'] ",
+		);
+	});
+
+	it('should handle NOT IN operator conversion from not equals', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service.name', key: 'service.name', type: 'string' },
+					op: negateOperator(OPERATORS.IN),
+					value: ['service1', 'service2'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name != 'old-service'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe(
+			"service.name NOT IN ['service1', 'service2'] ",
+		);
+	});
+
+	it('should add new filters when they do not exist in existing query', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'new.key', key: 'new.key', type: 'string' },
+					op: OPERATORS['='],
+					value: 'new-value',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name = 'old-service'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(2); // Original + new filter
+		expect(result.filter.expression).toBe(
+			"service.name = 'old-service' new.key = 'new-value'",
+		);
+	});
+
+	it('should handle simple value replacement', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'status', key: 'status', type: 'string' },
+					op: OPERATORS['='],
+					value: 'error',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "status = 'success'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe("status = 'error'");
+	});
+
+	it('should handle filters with no key gracefully', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: undefined,
+					op: OPERATORS['='],
+					value: 'test-value',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service.name = 'old-service'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(2);
+		expect(result.filter.expression).toBe("service.name = 'old-service'");
+	});
+
+	it('should normalize deprecated operators', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service', key: 'service', type: 'string' },
+					op: 'regex', // deprecated operator
+					value: 'api',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			undefined,
+		);
+
+		expect(result.filters.items[0].op).toBe('regexp');
+	});
+
+	it('should handle complex mixed scenarios', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service', key: 'service', type: 'string' },
+					op: OPERATORS.IN,
+					value: ['api-gateway', 'user-service'],
+				},
+				{
+					id: '2',
+					key: { id: 'status', key: 'status', type: 'string' },
+					op: OPERATORS['='],
+					value: 'success',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "service = 'old-service' AND count > 100";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(3); // 2 new + 1 existing
+		expect(result.filter.expression).toContain(
+			"service IN ['api-gateway', 'user-service']",
+		);
+		expect(result.filter.expression).toContain("status = 'success'");
+		expect(result.filter.expression).toContain('count > 100');
+	});
+
+	it('should handle empty query string', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service', key: 'service', type: 'string' },
+					op: '=',
+					value: 'api',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpressionWithExistingQuery(filters, '');
+
+		expect(result.filter.expression).toBe("service = 'api'");
+	});
+
+	it('should handle invalid query gracefully', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service', key: 'service', type: 'string' },
+					op: '=',
+					value: 'api',
+				},
+			],
+			op: 'AND',
+		};
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			'invalid query',
+		);
+
+		expect(result.filters).toBeDefined();
+		expect(result.filter.expression).toBe("invalid query service = 'api'");
+	});
+
+	it('should preserve existing filters when no matching query pairs', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'service', key: 'service', type: 'string' },
+					op: '=',
+					value: 'api',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "different.field = 'value'";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(2); // Original + existing
+		expect(result.filter.expression).toContain("service = 'api'");
+		expect(result.filter.expression).toContain("different.field = 'value'");
+	});
+
+	it('should handle array values in IN operators', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'services', key: 'services', type: 'string' },
+					op: OPERATORS.IN,
+					value: ['api', 'user', 'auth'],
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = "services IN ['old-service']";
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe("services IN ['api', 'user', 'auth']");
+	});
+
+	it('should handle function operators', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'tags', key: 'tags', type: 'string' },
+					op: 'has',
+					value: 'production',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = '';
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe("has(tags, 'production')");
+	});
+
+	it('should handle non-value operators like EXISTS', () => {
+		const filters = {
+			items: [
+				{
+					id: '1',
+					key: { id: 'user_id', key: 'user_id', type: 'string' },
+					op: 'EXISTS',
+					value: '',
+				},
+			],
+			op: 'AND',
+		};
+
+		const existingQuery = 'user_id EXISTS';
+
+		const result = convertFiltersToExpressionWithExistingQuery(
+			filters,
+			existingQuery,
+		);
+
+		expect(result.filters.items).toHaveLength(1);
+		expect(result.filter.expression).toBe('user_id EXISTS');
+	});
+});

frontend/src/components/QueryBuilderV2/__tests__/utils.test.ts

@@ -1,6 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable import/no-unresolved */
-import { negateOperator, OPERATORS } from 'constants/antlrQueryConstants';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -12,8 +11,6 @@ import { extractQueryPairs } from 'utils/queryContextUtils';
 import {
 	convertAggregationToExpression,
 	convertFiltersToExpression,
-	convertFiltersToExpressionWithExistingQuery,
-	formatValueForExpression,
 	removeKeysFromExpression,
 } from '../utils';
 
@@ -551,231 +548,6 @@ describe('convertFiltersToExpression', () => {
 				"user_id NOT EXISTS AND description NOT CONTAINS 'error' AND NOT has(tags, 'production') AND NOT hasAny(labels, ['env:prod', 'service:api'])",
 		});
 	});
-
-	it('should return filters with new expression when no existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS['='],
-					value: 'test-service',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			undefined,
-		);
-
-		expect(result.filters).toEqual(filters);
-		expect(result.filter.expression).toBe("service.name = 'test-service'");
-	});
-
-	it('should handle empty filters', () => {
-		const filters = {
-			items: [],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			undefined,
-		);
-
-		expect(result.filters).toEqual(filters);
-		expect(result.filter.expression).toBe('');
-	});
-
-	it('should handle existing query with matching filters', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS['='],
-					value: 'updated-service',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters).toBeDefined();
-		expect(result.filter).toBeDefined();
-		expect(result.filter.expression).toBe("service.name = 'updated-service'");
-		// Ensure parser can parse the existing query
-		expect(extractQueryPairs(existingQuery)).toEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					key: 'service.name',
-					operator: '=',
-					value: "'old-service'",
-				}),
-			]),
-		);
-	});
-
-	it('should handle IN operator with existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS.IN,
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name IN ['old-service']";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters).toBeDefined();
-		expect(result.filter).toBeDefined();
-		expect(result.filter.expression).toBe(
-			"service.name IN ['service1', 'service2']",
-		);
-	});
-
-	it('should handle IN operator conversion from equals', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: OPERATORS.IN,
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe(
-			"service.name IN ['service1', 'service2'] ",
-		);
-	});
-
-	it('should handle NOT IN operator conversion from not equals', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'service.name', key: 'service.name', type: 'string' },
-					op: negateOperator(OPERATORS.IN),
-					value: ['service1', 'service2'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name != 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe(
-			"service.name NOT IN ['service1', 'service2'] ",
-		);
-	});
-
-	it('should add new filters when they do not exist in existing query', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'new.key', key: 'new.key', type: 'string' },
-					op: OPERATORS['='],
-					value: 'new-value',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(2); // Original + new filter
-		expect(result.filter.expression).toBe(
-			"service.name = 'old-service' new.key = 'new-value'",
-		);
-	});
-
-	it('should handle simple value replacement', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: { id: 'status', key: 'status', type: 'string' },
-					op: OPERATORS['='],
-					value: 'error',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "status = 'success'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(1);
-		expect(result.filter.expression).toBe("status = 'error'");
-	});
-
-	it('should handle filters with no key gracefully', () => {
-		const filters = {
-			items: [
-				{
-					id: '1',
-					key: undefined,
-					op: OPERATORS['='],
-					value: 'test-value',
-				},
-			],
-			op: 'AND',
-		};
-
-		const existingQuery = "service.name = 'old-service'";
-
-		const result = convertFiltersToExpressionWithExistingQuery(
-			filters,
-			existingQuery,
-		);
-
-		expect(result.filters.items).toHaveLength(2);
-		expect(result.filter.expression).toBe("service.name = 'old-service'");
-	});
 });
 
 describe('convertAggregationToExpression', () => {
@@ -1194,220 +966,3 @@ describe('removeKeysFromExpression', () => {
 		});
 	});
 });
-
-describe('formatValueForExpression', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('Variable values', () => {
-		it('should return variable values as-is', () => {
-			expect(formatValueForExpression('$variable')).toBe('$variable');
-			expect(formatValueForExpression('$env')).toBe('$env');
-			expect(formatValueForExpression(' $variable ')).toBe(' $variable ');
-		});
-
-		it('should return variable arrays as-is', () => {
-			expect(formatValueForExpression(['$var1', '$var2'])).toBe('$var1,$var2');
-		});
-	});
-
-	describe('Numeric string values', () => {
-		it('should return numeric strings with quotes', () => {
-			expect(formatValueForExpression('123')).toBe("'123'");
-			expect(formatValueForExpression('0')).toBe("'0'");
-			expect(formatValueForExpression('100000')).toBe("'100000'");
-			expect(formatValueForExpression('-42')).toBe("'-42'");
-			expect(formatValueForExpression('3.14')).toBe("'3.14'");
-			expect(formatValueForExpression(' 456 ')).toBe("' 456 '");
-		});
-
-		it('should handle numeric strings with IN operator', () => {
-			expect(formatValueForExpression('123', 'IN')).toBe("['123']");
-			expect(formatValueForExpression(['123', '456'], 'IN')).toBe(
-				"['123', '456']",
-			);
-		});
-	});
-
-	describe('Quoted string values', () => {
-		it('should return already quoted strings as-is', () => {
-			expect(formatValueForExpression("'quoted'")).toBe("'quoted'");
-			expect(formatValueForExpression('"double-quoted"')).toBe('"double-quoted"');
-			expect(formatValueForExpression('`backticked`')).toBe('`backticked`');
-			expect(formatValueForExpression("'100000'")).toBe("'100000'");
-		});
-
-		it('should preserve quoted strings in arrays', () => {
-			expect(formatValueForExpression(["'value1'", "'value2'"])).toBe(
-				"['value1', 'value2']",
-			);
-			expect(formatValueForExpression(["'100000'", "'200000'"], 'IN')).toBe(
-				"['100000', '200000']",
-			);
-		});
-	});
-
-	describe('Regular string values', () => {
-		it('should wrap regular strings in single quotes', () => {
-			expect(formatValueForExpression('hello')).toBe("'hello'");
-			expect(formatValueForExpression('api-gateway')).toBe("'api-gateway'");
-			expect(formatValueForExpression('test value')).toBe("'test value'");
-		});
-
-		it('should escape single quotes in strings', () => {
-			expect(formatValueForExpression("user's data")).toBe("'user\\'s data'");
-			expect(formatValueForExpression("John's")).toBe("'John\\'s'");
-			expect(formatValueForExpression("it's a test")).toBe("'it\\'s a test'");
-		});
-
-		it('should handle empty strings', () => {
-			expect(formatValueForExpression('')).toBe("''");
-		});
-
-		it('should handle strings with special characters', () => {
-			expect(formatValueForExpression('/api/v1/users')).toBe("'/api/v1/users'");
-			expect(formatValueForExpression('user@example.com')).toBe(
-				"'user@example.com'",
-			);
-			expect(formatValueForExpression('Contains "quotes"')).toBe(
-				'\'Contains "quotes"\'',
-			);
-		});
-	});
-
-	describe('Number values', () => {
-		it('should convert numbers to strings without quotes', () => {
-			expect(formatValueForExpression(123)).toBe('123');
-			expect(formatValueForExpression(0)).toBe('0');
-			expect(formatValueForExpression(-42)).toBe('-42');
-			expect(formatValueForExpression(100000)).toBe('100000');
-			expect(formatValueForExpression(3.14)).toBe('3.14');
-		});
-
-		it('should handle numbers with IN operator', () => {
-			expect(formatValueForExpression(123, 'IN')).toBe('[123]');
-			expect(formatValueForExpression([100, 200] as any, 'IN')).toBe('[100, 200]');
-		});
-	});
-
-	describe('Boolean values', () => {
-		it('should convert booleans to strings without quotes', () => {
-			expect(formatValueForExpression(true)).toBe('true');
-			expect(formatValueForExpression(false)).toBe('false');
-		});
-
-		it('should handle booleans with IN operator', () => {
-			expect(formatValueForExpression(true, 'IN')).toBe('[true]');
-			expect(formatValueForExpression([true, false] as any, 'IN')).toBe(
-				'[true, false]',
-			);
-		});
-	});
-
-	describe('Array values', () => {
-		it('should format array of strings', () => {
-			expect(formatValueForExpression(['a', 'b', 'c'])).toBe("['a', 'b', 'c']");
-			expect(formatValueForExpression(['service1', 'service2'])).toBe(
-				"['service1', 'service2']",
-			);
-		});
-
-		it('should format array of numeric strings', () => {
-			expect(formatValueForExpression(['123', '456', '789'])).toBe(
-				"['123', '456', '789']",
-			);
-		});
-
-		it('should format array of numbers', () => {
-			expect(formatValueForExpression([1, 2, 3] as any)).toBe('[1, 2, 3]');
-			expect(formatValueForExpression([100, 200, 300] as any)).toBe(
-				'[100, 200, 300]',
-			);
-		});
-
-		it('should format mixed array types', () => {
-			expect(formatValueForExpression(['hello', 123, true] as any)).toBe(
-				"['hello', 123, true]",
-			);
-		});
-
-		it('should format array with quoted values', () => {
-			expect(formatValueForExpression(["'quoted'", 'regular'])).toBe(
-				"['quoted', 'regular']",
-			);
-		});
-
-		it('should format array with empty strings', () => {
-			expect(formatValueForExpression(['', 'value'])).toBe("['', 'value']");
-		});
-	});
-
-	describe('IN and NOT IN operators', () => {
-		it('should format single value as array for IN operator', () => {
-			expect(formatValueForExpression('value', 'IN')).toBe("['value']");
-			expect(formatValueForExpression(123, 'IN')).toBe('[123]');
-			expect(formatValueForExpression('123', 'IN')).toBe("['123']");
-		});
-
-		it('should format array for IN operator', () => {
-			expect(formatValueForExpression(['a', 'b'], 'IN')).toBe("['a', 'b']");
-			expect(formatValueForExpression(['123', '456'], 'IN')).toBe(
-				"['123', '456']",
-			);
-		});
-
-		it('should format single value as array for NOT IN operator', () => {
-			expect(formatValueForExpression('value', 'NOT IN')).toBe("['value']");
-			expect(formatValueForExpression('value', 'not in')).toBe("['value']");
-		});
-
-		it('should format array for NOT IN operator', () => {
-			expect(formatValueForExpression(['a', 'b'], 'NOT IN')).toBe("['a', 'b']");
-		});
-	});
-
-	describe('Edge cases', () => {
-		it('should handle strings that look like numbers but have quotes', () => {
-			expect(formatValueForExpression("'123'")).toBe("'123'");
-			expect(formatValueForExpression('"456"')).toBe('"456"');
-			expect(formatValueForExpression('`789`')).toBe('`789`');
-		});
-
-		it('should handle strings with leading/trailing whitespace', () => {
-			expect(formatValueForExpression('  hello  ')).toBe("'  hello  '");
-			expect(formatValueForExpression('  123  ')).toBe("'  123  '");
-		});
-
-		it('should handle very large numbers', () => {
-			expect(formatValueForExpression('999999999')).toBe("'999999999'");
-			expect(formatValueForExpression(999999999)).toBe('999999999');
-		});
-
-		it('should handle decimal numbers', () => {
-			expect(formatValueForExpression('123.456')).toBe("'123.456'");
-			expect(formatValueForExpression(123.456)).toBe('123.456');
-		});
-
-		it('should handle negative numbers', () => {
-			expect(formatValueForExpression('-100')).toBe("'-100'");
-			expect(formatValueForExpression(-100)).toBe('-100');
-		});
-
-		it('should handle strings that are not valid numbers', () => {
-			expect(formatValueForExpression('123abc')).toBe("'123abc'");
-			expect(formatValueForExpression('abc123')).toBe("'abc123'");
-			expect(formatValueForExpression('12.34.56')).toBe("'12.34.56'");
-		});
-
-		it('should handle empty array', () => {
-			expect(formatValueForExpression([])).toBe('[]');
-			expect(formatValueForExpression([], 'IN')).toBe('[]');
-		});
-
-		it('should handle array with single element', () => {
-			expect(formatValueForExpression(['single'])).toBe("['single']");
-			expect(formatValueForExpression([123] as any)).toBe('[123]');
-		});
-	});
-});

frontend/src/components/QueryBuilderV2/queryProcessor.ts

@@ -0,0 +1,531 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import {
+	DEPRECATED_OPERATORS_MAP,
+	OPERATORS,
+} from 'constants/antlrQueryConstants';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { cloneDeep } from 'lodash-es';
+import { IQueryPair } from 'types/antlrQueryTypes';
+import {
+	TagFilter,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+import { unquote } from 'utils/stringUtils';
+import { v4 as uuid } from 'uuid';
+
+import { convertFiltersToExpression } from './utils';
+
+interface ProcessingResult {
+	type: 'update' | 'add' | 'skip' | 'transform';
+	modifications?: QueryModification[];
+	newFilters?: TagFilterItem[];
+	shouldAddToNonExisting?: boolean;
+}
+
+interface QueryModification {
+	type: 'replace' | 'append' | 'prepend';
+	startIndex?: number;
+	endIndex?: number;
+	newContent: string;
+}
+
+interface QueryProcessingContext {
+	readonly originalQuery: string;
+	queryPairsMap: Map<string, IQueryPair>;
+	readonly visitedPairs: Set<string>;
+	modifications: QueryModification[];
+	newFilters: TagFilterItem[];
+	nonExistingFilters: TagFilterItem[];
+	modifiedQuery: string;
+}
+
+// Cache for query pairs to avoid repeated parsing
+const queryPairsCache = new Map<string, Map<string, IQueryPair>>();
+
+// Validation functions
+const validateFilter = (filter: TagFilterItem): boolean =>
+	!!(filter.key?.key && filter.op && filter.value !== undefined);
+
+const validateQuery = (query: string): boolean =>
+	typeof query === 'string' && query.trim().length > 0;
+
+const areValuesEqual = (existing: unknown[], current: unknown[]): boolean => {
+	if (existing.length !== current.length) return false;
+
+	const existingSet = new Set(existing.map((v) => String(v)));
+	return current.every((v) => existingSet.has(String(v)));
+};
+
+// Format a value for the expression string
+const formatValueForExpression = (
+	value: string[] | string | number | boolean,
+	operator?: string,
+): string => {
+	// Check if it's a variable
+	const isVariable = (val: string | string[] | number | boolean): boolean => {
+		if (Array.isArray(val)) {
+			return val.some((v) => typeof v === 'string' && v.trim().startsWith('$'));
+		}
+		return typeof val === 'string' && val.trim().startsWith('$');
+	};
+
+	if (isVariable(value)) {
+		return String(value);
+	}
+
+	// Check if operator requires array values
+	const isArrayOperator = (op: string): boolean => {
+		const arrayOperators = ['in', 'not in', 'IN', 'NOT IN'];
+		return arrayOperators.includes(op);
+	};
+
+	// For IN operators, ensure value is always an array
+	if (isArrayOperator(operator || '')) {
+		const arrayValue = Array.isArray(value) ? value : [value];
+		return `[${arrayValue
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
+	}
+
+	if (Array.isArray(value)) {
+		// Handle array values (e.g., for IN operations)
+		return `[${value
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
+	}
+
+	if (typeof value === 'string') {
+		// Add single quotes around all string values and escape internal single quotes
+		return `'${value.replace(/'/g, "\\'")}'`;
+	}
+
+	return String(value);
+};
+
+// Clear cache when needed (e.g., for testing or memory management)
+export const clearQueryPairsCache = (): void => {
+	queryPairsCache.clear();
+};
+
+const getQueryPairsMap = (query: string): Map<string, IQueryPair> => {
+	const trimmedQuery = query.trim();
+
+	if (!queryPairsCache.has(trimmedQuery)) {
+		const queryPairs = extractQueryPairs(trimmedQuery) || [];
+		const queryPairsMap: Map<string, IQueryPair> = new Map();
+
+		queryPairs.forEach((pair) => {
+			const key = pair.hasNegation
+				? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
+				: `${pair.key}-${pair.operator}`.trim().toLowerCase();
+			queryPairsMap.set(key, pair);
+		});
+
+		queryPairsCache.set(trimmedQuery, queryPairsMap);
+	}
+
+	return queryPairsCache.get(trimmedQuery) || new Map();
+};
+
+// Helper function to normalize deprecated operators
+const normalizeDeprecatedOperators = (filters: TagFilter): TagFilter => {
+	const updatedFilters = cloneDeep(filters);
+
+	if (updatedFilters?.items) {
+		updatedFilters.items = updatedFilters.items.map((item) => {
+			const opLower = item.op?.toLowerCase();
+			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(opLower)) {
+				return {
+					...item,
+					op: DEPRECATED_OPERATORS_MAP[
+						opLower as keyof typeof DEPRECATED_OPERATORS_MAP
+					].toLowerCase(),
+				};
+			}
+			return item;
+		});
+	}
+
+	return updatedFilters;
+};
+
+// ES5 compatible operator handlers using functions instead of classes
+
+// Helper function to check if operator is IN or NOT IN
+function isInOperator(operator: string): boolean {
+	const sanitizedOperator = operator.trim().toUpperCase();
+	return (
+		[OPERATORS.IN, `${OPERATORS.NOT} ${OPERATORS.IN}`].indexOf(
+			sanitizedOperator,
+		) !== -1
+	);
+}
+
+// Helper function to handle IN operator transformations
+// Generic helper function to handle operator transformations
+function handleOperatorTransformation(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+	formattedValue: string,
+	targetOperator: string,
+	transformationConfigs: Array<{
+		operatorKey: string;
+		positionProperty: 'operatorStart' | 'negationStart';
+	}>,
+): ProcessingResult {
+	const { key } = filter;
+	const { op } = filter;
+
+	// Skip if key is not defined
+	if (!key || !key.key) {
+		return { type: 'add', shouldAddToNonExisting: true };
+	}
+
+	// Check each transformation configuration
+	const foundConfig = transformationConfigs.find((config) => {
+		const transformationKey = `${key.key}-${config.operatorKey}`;
+		const transformationKeyLower = transformationKey.trim().toLowerCase();
+		return context.queryPairsMap.has(transformationKeyLower);
+	});
+
+	if (foundConfig) {
+		const transformationKey = `${key.key}-${foundConfig.operatorKey}`;
+		const transformationKeyLower = transformationKey.trim().toLowerCase();
+		const transformationPair = context.queryPairsMap.get(transformationKeyLower);
+		context.visitedPairs.add(transformationKeyLower);
+
+		if (
+			transformationPair &&
+			transformationPair.position &&
+			transformationPair.position.valueEnd
+		) {
+			const startPosition =
+				transformationPair.position[foundConfig.positionProperty];
+			context.modifiedQuery = `${
+				context.modifiedQuery.slice(0, startPosition) + targetOperator
+			} ${formattedValue} ${context.modifiedQuery.slice(
+				transformationPair.position.valueEnd + 1,
+			)}`;
+			context.queryPairsMap = getQueryPairsMap(context.modifiedQuery.trim());
+		}
+		// Mark the current filter as visited to prevent it from being added as a new filter
+		context.visitedPairs.add(`${key.key}-${op}`.trim().toLowerCase());
+		return { type: 'transform', shouldAddToNonExisting: false };
+	}
+
+	return { type: 'add', shouldAddToNonExisting: true };
+}
+
+function handleInTransformations(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+	formattedValue: string,
+): ProcessingResult {
+	const transformationConfigs = [
+		{
+			operatorKey: `${OPERATORS.NOT} ${filter.op}`,
+			positionProperty: 'negationStart' as const,
+		},
+		{ operatorKey: OPERATORS['='], positionProperty: 'operatorStart' as const },
+		{ operatorKey: OPERATORS['!='], positionProperty: 'operatorStart' as const },
+	];
+
+	return handleOperatorTransformation(
+		filter,
+		context,
+		formattedValue,
+		OPERATORS.IN,
+		transformationConfigs,
+	);
+}
+
+// Helper function to handle NOT IN operator transformations
+function handleNotInTransformations(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+	formattedValue: string,
+): ProcessingResult {
+	const transformationConfigs = [
+		{ operatorKey: OPERATORS['!='], positionProperty: 'operatorStart' as const },
+	];
+
+	return handleOperatorTransformation(
+		filter,
+		context,
+		formattedValue,
+		`${OPERATORS.NOT} ${OPERATORS.IN}`,
+		transformationConfigs,
+	);
+}
+
+// Helper function to handle operator transformations
+function handleOperatorTransformations(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+	formattedValue: string,
+): ProcessingResult {
+	const { op } = filter;
+	const sanitizedOperator = op.trim().toUpperCase();
+
+	if (sanitizedOperator === OPERATORS.IN) {
+		return handleInTransformations(filter, context, formattedValue);
+	}
+	if (sanitizedOperator === `${OPERATORS.NOT} ${OPERATORS.IN}`) {
+		return handleNotInTransformations(filter, context, formattedValue);
+	}
+	return { type: 'add', shouldAddToNonExisting: true };
+}
+
+// ES5 compatible operator handler functions
+function processInOperator(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+): ProcessingResult {
+	const { key } = filter;
+	const { op } = filter;
+	const { value } = filter;
+
+	// Skip if key is not defined
+	if (!key || !key.key) {
+		return { type: 'skip' };
+	}
+
+	const formattedValue = formatValueForExpression(value, op);
+	const pairKey = `${key.key}-${op}`.trim().toLowerCase();
+
+	// Check if exact match exists
+	const existingPair = context.queryPairsMap.get(pairKey);
+	if (
+		existingPair &&
+		existingPair.position &&
+		existingPair.position.valueStart &&
+		existingPair.position.valueEnd
+	) {
+		context.visitedPairs.add(pairKey);
+
+		// Check if values are identical for array-based operators
+		if (existingPair.valueList && filter.value && Array.isArray(filter.value)) {
+			const cleanValues = (values: unknown[]): unknown[] =>
+				values.map((val) => (typeof val === 'string' ? unquote(val) : val));
+
+			const cleanExistingValues = cleanValues(existingPair.valueList);
+			const cleanFilterValues = cleanValues(filter.value);
+
+			if (areValuesEqual(cleanExistingValues, cleanFilterValues)) {
+				// Values are identical, preserve existing formatting
+				context.modifiedQuery =
+					context.modifiedQuery.slice(0, existingPair.position.valueStart) +
+					existingPair.value +
+					context.modifiedQuery.slice(existingPair.position.valueEnd + 1);
+				return { type: 'skip' };
+			}
+		}
+
+		// Update the value
+		context.modifiedQuery =
+			context.modifiedQuery.slice(0, existingPair.position.valueStart) +
+			formattedValue +
+			context.modifiedQuery.slice(existingPair.position.valueEnd + 1);
+
+		// Update the query pairs map
+		context.queryPairsMap = getQueryPairsMap(context.modifiedQuery);
+		return { type: 'update' };
+	}
+
+	// Handle operator transformations
+	return handleOperatorTransformations(filter, context, formattedValue);
+}
+
+function processDefaultOperator(
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+): ProcessingResult {
+	const { key } = filter;
+	const { op } = filter;
+	const { value } = filter;
+
+	// Skip if key is not defined
+	if (!key || !key.key) {
+		return { type: 'add', shouldAddToNonExisting: true };
+	}
+
+	const pairKey = `${key.key}-${op}`.trim().toLowerCase();
+
+	if (context.queryPairsMap.has(pairKey)) {
+		const existingPair = context.queryPairsMap.get(pairKey);
+		context.visitedPairs.add(pairKey);
+
+		if (
+			existingPair &&
+			existingPair.position &&
+			existingPair.position.valueStart &&
+			existingPair.position.valueEnd
+		) {
+			const formattedValue = formatValueForExpression(value, op);
+			context.modifiedQuery =
+				context.modifiedQuery.slice(0, existingPair.position.valueStart) +
+				formattedValue +
+				context.modifiedQuery.slice(existingPair.position.valueEnd + 1);
+			context.queryPairsMap = getQueryPairsMap(context.modifiedQuery);
+		}
+		return { type: 'update' };
+	}
+
+	return { type: 'add', shouldAddToNonExisting: true };
+}
+
+// Factory function to get appropriate handler
+function getOperatorHandler(
+	operator: string,
+): (
+	filter: TagFilterItem,
+	context: QueryProcessingContext,
+) => ProcessingResult {
+	if (isInOperator(operator)) {
+		return processInOperator;
+	}
+	return processDefaultOperator;
+}
+
+// Helper function to create new filter items from unvisited query pairs
+const createNewFilterItems = (
+	context: QueryProcessingContext,
+): TagFilterItem[] => {
+	const newFilterItems: TagFilterItem[] = [];
+
+	context.queryPairsMap.forEach((pair, key) => {
+		if (!context.visitedPairs.has(key)) {
+			const operator = pair.hasNegation
+				? getOperatorValue(`NOT_${pair.operator}`.toUpperCase())
+				: getOperatorValue(pair.operator.toUpperCase());
+
+			const formatValuesForFilter = (
+				value: string | string[],
+			): string | string[] => {
+				if (Array.isArray(value)) {
+					return value.map((v) => (typeof v === 'string' ? unquote(v) : String(v)));
+				}
+				if (typeof value === 'string') {
+					return unquote(value);
+				}
+				return String(value);
+			};
+
+			newFilterItems.push({
+				id: uuid(),
+				op: operator,
+				key: {
+					id: pair.key,
+					key: pair.key,
+					type: '',
+				},
+				value: pair.isMultiValue
+					? formatValuesForFilter(pair.valueList as string[]) ?? ''
+					: formatValuesForFilter(pair.value as string) ?? '',
+			});
+		}
+	});
+
+	return newFilterItems;
+};
+
+// Main refactored function
+export const convertFiltersToExpressionWithExistingQuery = (
+	filters: TagFilter,
+	existingQuery: string | undefined,
+): { filters: TagFilter; filter: { expression: string } } => {
+	// Early return for no existing query
+	if (!existingQuery) {
+		const normalizedFilters = normalizeDeprecatedOperators(filters);
+		const expression = convertFiltersToExpression(normalizedFilters);
+		return {
+			filters: normalizedFilters,
+			filter: expression,
+		};
+	}
+
+	// Validate inputs
+	if (!validateQuery(existingQuery)) {
+		return { filters, filter: { expression: existingQuery || '' } };
+	}
+
+	// Normalize deprecated operators
+	const normalizedFilters = normalizeDeprecatedOperators(filters);
+
+	// Initialize processing context
+	const context: QueryProcessingContext = {
+		originalQuery: existingQuery,
+		queryPairsMap: getQueryPairsMap(existingQuery.trim()),
+		visitedPairs: new Set(),
+		modifications: [],
+		newFilters: [],
+		nonExistingFilters: [],
+		modifiedQuery: existingQuery,
+	};
+
+	// Process each filter (if any exist)
+	if (normalizedFilters.items?.length > 0) {
+		normalizedFilters.items.filter(validateFilter).forEach((filter) => {
+			const handler = getOperatorHandler(filter.op);
+			const result = handler(filter, context);
+
+			// Apply result based on type
+			switch (result.type) {
+				case 'add':
+					if (result.shouldAddToNonExisting) {
+						context.nonExistingFilters.push(filter);
+					}
+					break;
+				case 'update':
+				case 'transform':
+				case 'skip':
+					// Already handled in the processor
+					break;
+				default:
+					// Handle any other cases
+					break;
+			}
+		});
+	}
+
+	// Create new filter items from unvisited query pairs
+	const newFilterItems = createNewFilterItems(context);
+
+	// Merge new filter items with existing ones
+	if (newFilterItems.length > 0) {
+		if (normalizedFilters?.items?.length > 0) {
+			// Add new filter items to existing ones
+			normalizedFilters.items = [...normalizedFilters.items, ...newFilterItems];
+		} else {
+			// Use new filter items as the main filters
+			normalizedFilters.items = newFilterItems;
+		}
+	}
+
+	// Build final expression
+	let finalExpression = context.modifiedQuery;
+
+	if (context.nonExistingFilters.length > 0) {
+		// Convert non-existing filters to expression and append
+		const nonExistingFilterExpression = convertFiltersToExpression({
+			items: context.nonExistingFilters,
+			op: filters.op || 'AND',
+		});
+
+		if (nonExistingFilterExpression.expression) {
+			finalExpression = `${context.modifiedQuery.trim()} ${
+				nonExistingFilterExpression.expression
+			}`;
+		}
+	}
+
+	return {
+		filters: normalizedFilters,
+		filter: { expression: finalExpression || '' },
+	};
+};

frontend/src/components/QueryBuilderV2/utils.ts

@@ -2,11 +2,9 @@
 import { createAggregation } from 'api/v5/queryRange/prepareQueryRangePayloadV5';
 import {
 	DEPRECATED_OPERATORS_MAP,
-	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep, isEqual, sortBy } from 'lodash-es';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -24,7 +22,7 @@ import {
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
-import { isQuoted, unquote } from 'utils/stringUtils';
+import { unquote } from 'utils/stringUtils';
 import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -38,57 +36,49 @@ const isArrayOperator = (operator: string): boolean => {
 	return arrayOperators.includes(operator);
 };
 
-const isVariable = (
-	value: (string | number | boolean)[] | string | number | boolean,
-): boolean => {
+const isVariable = (value: string | string[] | number | boolean): boolean => {
 	if (Array.isArray(value)) {
 		return value.some((v) => typeof v === 'string' && v.trim().startsWith('$'));
 	}
 	return typeof value === 'string' && value.trim().startsWith('$');
 };
 
-/**
- * Formats a single value for use in expression strings.
- * Strings are quoted and escaped, while numbers and booleans are converted to strings.
- */
-const formatSingleValue = (v: string | number | boolean): string => {
-	if (typeof v === 'string') {
-		// Preserve already-quoted strings
-		if (isQuoted(v)) {
-			return v;
-		}
-		// Quote and escape single quotes in strings
-		return `'${v.replace(/'/g, "\\'")}'`;
-	}
-	// Convert numbers and booleans to strings without quotes
-	return String(v);
-};
-
 /**
  * Format a value for the expression string
  * @param value - The value to format
  * @param operator - The operator being used (to determine if array is needed)
  * @returns Formatted value string
  */
-export const formatValueForExpression = (
-	value: (string | number | boolean)[] | string | number | boolean,
+const formatValueForExpression = (
+	value: string[] | string | number | boolean,
 	operator?: string,
 ): string => {
 	if (isVariable(value)) {
 		return String(value);
 	}
 
+	// For IN operators, ensure value is always an array
 	if (isArrayOperator(operator || '')) {
 		const arrayValue = Array.isArray(value) ? value : [value];
-		return `[${arrayValue.map(formatSingleValue).join(', ')}]`;
+		return `[${arrayValue
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
 	}
 
 	if (Array.isArray(value)) {
-		return `[${value.map(formatSingleValue).join(', ')}]`;
+		// Handle array values (e.g., for IN operations)
+		return `[${value
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
 	}
 
 	if (typeof value === 'string') {
-		return formatSingleValue(value);
+		// Add single quotes around all string values and escape internal single quotes
+		return `'${value.replace(/'/g, "\\'")}'`;
 	}
 
 	return String(value);
@@ -144,47 +134,14 @@ export const convertFiltersToExpression = (
 	};
 };
 
-/**
- * Converts a string value to its appropriate type (number, boolean, or string)
- * for use in filter objects. This is the inverse of formatSingleValue.
- */
-function formatSingleValueForFilter(
-	value: string | number | boolean,
-): string | number | boolean {
-	if (typeof value === 'string') {
-		const trimmed = value.trim();
-
-		// Try to convert numeric strings to numbers
-		if (trimmed !== '' && !Number.isNaN(Number(trimmed))) {
-			return Number(trimmed);
-		}
-
-		// Convert boolean strings to booleans
-		if (trimmed === 'true' || trimmed === 'false') {
-			return trimmed === 'true';
-		}
-
-		if (isQuoted(value)) {
-			return unquote(value);
-		}
-	}
-
-	// Return non-string values as-is, or string values that couldn't be converted
-	return value;
-}
-
-/**
- * Formats values for filter objects, converting string representations
- * to their proper types (numbers, booleans) when appropriate.
- */
-const formatValuesForFilter = (
-	value: (string | number | boolean)[] | number | boolean | string,
-): (string | number | boolean)[] | number | boolean | string => {
+const formatValuesForFilter = (value: string | string[]): string | string[] => {
 	if (Array.isArray(value)) {
-		return value.map(formatSingleValueForFilter);
+		return value.map((v) => (typeof v === 'string' ? unquote(v) : String(v)));
 	}
-
-	return formatSingleValueForFilter(value);
+	if (typeof value === 'string') {
+		return unquote(value);
+	}
+	return String(value);
 };
 
 export const convertExpressionToFilters = (
@@ -215,298 +172,6 @@ export const convertExpressionToFilters = (
 
 	return filters;
 };
-const getQueryPairsMap = (query: string): Map<string, IQueryPair> => {
-	const queryPairs = extractQueryPairs(query);
-	const queryPairsMap: Map<string, IQueryPair> = new Map();
-
-	queryPairs.forEach((pair) => {
-		const key = pair.hasNegation
-			? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
-			: `${pair.key}-${pair.operator}`.trim().toLowerCase();
-		queryPairsMap.set(key, pair);
-	});
-
-	return queryPairsMap;
-};
-
-export const convertFiltersToExpressionWithExistingQuery = (
-	filters: TagFilter,
-	existingQuery: string | undefined,
-): { filters: TagFilter; filter: { expression: string } } => {
-	// Check for deprecated operators and replace them with new operators
-	const updatedFilters = cloneDeep(filters);
-
-	// Replace deprecated operators in filter items
-	if (updatedFilters?.items) {
-		updatedFilters.items = updatedFilters.items.map((item) => {
-			const opLower = item.op?.toLowerCase();
-			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(opLower)) {
-				return {
-					...item,
-					op: DEPRECATED_OPERATORS_MAP[
-						opLower as keyof typeof DEPRECATED_OPERATORS_MAP
-					].toLowerCase(),
-				};
-			}
-			return item;
-		});
-	}
-
-	if (!existingQuery) {
-		// If no existing query, return filters with a newly generated expression
-		return {
-			filters: updatedFilters,
-			filter: convertFiltersToExpression(updatedFilters),
-		};
-	}
-
-	const nonExistingFilters: TagFilterItem[] = [];
-	let modifiedQuery = existingQuery; // We'll modify this query as we proceed
-	const visitedPairs: Set<string> = new Set(); // Set to track visited query pairs
-
-	// Map extracted query pairs to key-specific pair information for faster access
-	let queryPairsMap = getQueryPairsMap(existingQuery);
-
-	filters?.items?.forEach((filter) => {
-		const { key, op, value } = filter;
-
-		// Skip invalid filters with no key
-		if (!key) return;
-
-		let shouldAddToNonExisting = true; // Flag to decide if the filter should be added to non-existing filters
-		const sanitizedOperator = op.trim().toUpperCase();
-
-		// Check if the operator is IN or NOT IN
-		if (
-			[OPERATORS.IN, `${OPERATORS.NOT} ${OPERATORS.IN}`].includes(
-				sanitizedOperator,
-			)
-		) {
-			const existingPair = queryPairsMap.get(
-				`${key.key}-${op}`.trim().toLowerCase(),
-			);
-			const formattedValue = formatValueForExpression(value, op);
-
-			// If a matching query pair exists, modify the query
-			if (
-				existingPair &&
-				existingPair.position?.valueStart &&
-				existingPair.position?.valueEnd
-			) {
-				visitedPairs.add(`${key.key}-${op}`.trim().toLowerCase());
-
-				// Check if existing values match current filter values (for array-based operators)
-				if (existingPair.valueList && filter.value && Array.isArray(filter.value)) {
-					// Clean quotes from string values for comparison
-					const cleanValues = (values: any[]): any[] =>
-						values.map((val) => (typeof val === 'string' ? unquote(val) : val));
-
-					const cleanExistingValues = cleanValues(existingPair.valueList);
-					const cleanFilterValues = cleanValues(filter.value);
-
-					// Compare arrays (order-independent) - if identical, keep existing value
-					const isSameValues =
-						cleanExistingValues.length === cleanFilterValues.length &&
-						isEqual(sortBy(cleanExistingValues), sortBy(cleanFilterValues));
-
-					if (isSameValues) {
-						// Values are identical, preserve existing formatting
-						modifiedQuery =
-							modifiedQuery.slice(0, existingPair.position.valueStart) +
-							existingPair.value +
-							modifiedQuery.slice(existingPair.position.valueEnd + 1);
-						return;
-					}
-				}
-
-				modifiedQuery =
-					modifiedQuery.slice(0, existingPair.position.valueStart) +
-					formattedValue +
-					modifiedQuery.slice(existingPair.position.valueEnd + 1);
-
-				queryPairsMap = getQueryPairsMap(modifiedQuery);
-				return;
-			}
-
-			// Handle the different cases for IN operator
-			switch (sanitizedOperator) {
-				case OPERATORS.IN:
-					// If there's a NOT IN or equal operator, merge the filter
-					if (
-						queryPairsMap.has(
-							`${key.key}-${OPERATORS.NOT} ${op}`.trim().toLowerCase(),
-						)
-					) {
-						const notInPair = queryPairsMap.get(
-							`${key.key}-${OPERATORS.NOT} ${op}`.trim().toLowerCase(),
-						);
-						visitedPairs.add(
-							`${key.key}-${OPERATORS.NOT} ${op}`.trim().toLowerCase(),
-						);
-						if (notInPair?.position?.valueEnd) {
-							modifiedQuery = `${modifiedQuery.slice(
-								0,
-								notInPair.position.negationStart,
-							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
-								notInPair.position.valueEnd + 1,
-							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
-						}
-						shouldAddToNonExisting = false; // Don't add this to non-existing filters
-					} else if (
-						queryPairsMap.has(`${key.key}-${OPERATORS['=']}`.trim().toLowerCase())
-					) {
-						const equalsPair = queryPairsMap.get(
-							`${key.key}-${OPERATORS['=']}`.trim().toLowerCase(),
-						);
-						visitedPairs.add(`${key.key}-${OPERATORS['=']}`.trim().toLowerCase());
-						if (equalsPair?.position?.valueEnd) {
-							modifiedQuery = `${modifiedQuery.slice(
-								0,
-								equalsPair.position.operatorStart,
-							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
-								equalsPair.position.valueEnd + 1,
-							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
-						}
-						shouldAddToNonExisting = false; // Don't add this to non-existing filters
-					} else if (
-						queryPairsMap.has(`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase())
-					) {
-						const notEqualsPair = queryPairsMap.get(
-							`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase(),
-						);
-						visitedPairs.add(`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase());
-						if (notEqualsPair?.position?.valueEnd) {
-							modifiedQuery = `${modifiedQuery.slice(
-								0,
-								notEqualsPair.position.operatorStart,
-							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
-								notEqualsPair.position.valueEnd + 1,
-							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
-						}
-						shouldAddToNonExisting = false; // Don't add this to non-existing filters
-					}
-					break;
-				case `${OPERATORS.NOT} ${OPERATORS.IN}`:
-					if (
-						queryPairsMap.has(`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase())
-					) {
-						const notEqualsPair = queryPairsMap.get(
-							`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase(),
-						);
-						visitedPairs.add(`${key.key}-${OPERATORS['!=']}`.trim().toLowerCase());
-						if (notEqualsPair?.position?.valueEnd) {
-							modifiedQuery = `${modifiedQuery.slice(
-								0,
-								notEqualsPair.position.operatorStart,
-							)}${OPERATORS.NOT} ${
-								OPERATORS.IN
-							} ${formattedValue} ${modifiedQuery.slice(
-								notEqualsPair.position.valueEnd + 1,
-							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery);
-						}
-						shouldAddToNonExisting = false; // Don't add this to non-existing filters
-					}
-					break; // No operation needed for NOT IN case
-				default:
-					break;
-			}
-		}
-
-		if (
-			queryPairsMap.has(`${filter.key?.key}-${filter.op}`.trim().toLowerCase())
-		) {
-			const existingPair = queryPairsMap.get(
-				`${filter.key?.key}-${filter.op}`.trim().toLowerCase(),
-			);
-			if (
-				existingPair &&
-				existingPair.position?.valueStart &&
-				existingPair.position?.valueEnd
-			) {
-				const formattedValue = formatValueForExpression(value, op);
-				// replace the value with the new value
-				modifiedQuery =
-					modifiedQuery.slice(0, existingPair.position.valueStart) +
-					formattedValue +
-					modifiedQuery.slice(existingPair.position.valueEnd + 1);
-				queryPairsMap = getQueryPairsMap(modifiedQuery);
-			}
-
-			visitedPairs.add(`${filter.key?.key}-${filter.op}`.trim().toLowerCase());
-		}
-
-		// Add filters that don't have an existing pair to non-existing filters
-		if (
-			shouldAddToNonExisting &&
-			!queryPairsMap.has(`${filter.key?.key}-${filter.op}`.trim().toLowerCase())
-		) {
-			nonExistingFilters.push(filter);
-		}
-	});
-
-	// Create new filters from non-visited query pairs
-	const newFilterItems: TagFilterItem[] = [];
-	queryPairsMap.forEach((pair, key) => {
-		if (!visitedPairs.has(key)) {
-			const operator = pair.hasNegation
-				? getOperatorValue(`NOT_${pair.operator}`.toUpperCase())
-				: getOperatorValue(pair.operator.toUpperCase());
-
-			newFilterItems.push({
-				id: uuid(),
-				op: operator,
-				key: {
-					id: pair.key,
-					key: pair.key,
-					type: '',
-				},
-				value: pair.isMultiValue
-					? formatValuesForFilter(pair.valueList as string[]) ?? ''
-					: formatValuesForFilter(pair.value as string) ?? '',
-			});
-		}
-	});
-
-	// Merge new filter items with existing ones
-	if (newFilterItems.length > 0 && updatedFilters?.items) {
-		updatedFilters.items = [...updatedFilters.items, ...newFilterItems];
-	}
-
-	// If no non-existing filters, return the modified query directly
-	if (nonExistingFilters.length === 0) {
-		return {
-			filters: updatedFilters,
-			filter: { expression: modifiedQuery },
-		};
-	}
-
-	// Convert non-existing filters to an expression and append to the modified query
-	const nonExistingFilterExpression = convertFiltersToExpression({
-		items: nonExistingFilters,
-		op: filters.op || 'AND',
-	});
-
-	if (nonExistingFilterExpression.expression) {
-		return {
-			filters: updatedFilters,
-			filter: {
-				expression: `${modifiedQuery.trim()} ${
-					nonExistingFilterExpression.expression
-				}`,
-			},
-		};
-	}
-
-	// Return the final result with the modified query
-	return {
-		filters: updatedFilters,
-		filter: { expression: modifiedQuery || '' },
-	};
-};
 
 /**
  * Removes specified key-value pairs from a logical query expression string.

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.test.tsx

@@ -1,4 +1,3 @@
-import userEvent from '@testing-library/user-event';
 import { FiltersType, QuickFiltersSource } from 'components/QuickFilters/types';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -6,7 +5,7 @@ import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQue
 import { quickFiltersAttributeValuesResponse } from 'mocks-server/__mockdata__/customQuickFilters';
 import { rest, server } from 'mocks-server/server';
 import { UseQueryResult } from 'react-query';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 import { SuccessResponse } from 'types/api';
 import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -42,15 +41,13 @@ interface MockFilterConfig {
 	type: FiltersType;
 }
 
-const SERVICE_NAME_KEY = 'service.name';
-
 const createMockFilter = (
 	overrides: Partial<MockFilterConfig> = {},
 ): MockFilterConfig => ({
 	// eslint-disable-next-line sonarjs/no-duplicate-string
 	title: 'Service Name',
 	attributeKey: {
-		key: SERVICE_NAME_KEY,
+		key: 'service.name',
 		dataType: DataTypes.String,
 		type: 'resource',
 	},
@@ -71,7 +68,7 @@ const createMockQueryBuilderData = (hasActiveFilters = false): any => ({
 							? [
 									{
 										key: {
-											key: SERVICE_NAME_KEY,
+											key: 'service.name',
 											dataType: DataTypes.String,
 											type: 'resource',
 										},
@@ -191,222 +188,4 @@ describe('CheckboxFilter - User Flows', () => {
 			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 	});
-
-	it('should update query filters when a checkbox is clicked', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-
-		// Start with no active filters so clicking a checkbox creates one
-		mockUseQueryBuilder.mockReturnValue({
-			...createMockQueryBuilderData(false),
-			redirectWithQueryBuilderData,
-		} as any);
-
-		const mockFilter = createMockFilter({ defaultOpen: true });
-
-		render(
-			<CheckboxFilter
-				filter={mockFilter}
-				source={QuickFiltersSource.LOGS_EXPLORER}
-			/>,
-		);
-
-		// Wait for checkboxes to render
-		await waitFor(() => {
-			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
-		});
-
-		const checkboxes = screen.getAllByRole('checkbox');
-
-		// User unchecks the first value (`mq-kafka`)
-		await userEvent.click(checkboxes[0]);
-
-		// Composite query params (query builder data) should be updated via redirectWithQueryBuilderData
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
-
-		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
-		const updatedFilters = updatedQuery.builder.queryData[0].filters;
-
-		expect(updatedFilters.items).toHaveLength(1);
-		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
-		// When unchecking from an "all selected" state, we use a NOT_IN filter for that value
-		expect(updatedFilters.items[0].op).toBe('not in');
-		expect(updatedFilters.items[0].value).toBe('mq-kafka');
-	});
-
-	it('should set an IN filter with only the clicked value when using Only', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-
-		// Existing filter: service.name IN ['mq-kafka', 'otel-demo']
-		mockUseQueryBuilder.mockReturnValue({
-			lastUsedQuery: 0,
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							filters: {
-								items: [
-									{
-										key: {
-											key: SERVICE_NAME_KEY,
-											dataType: DataTypes.String,
-											type: 'resource',
-										},
-										op: 'in',
-										value: ['mq-kafka', 'otel-demo'],
-									},
-								],
-								op: 'AND',
-							},
-						},
-					],
-				},
-			},
-			redirectWithQueryBuilderData,
-		} as any);
-
-		const mockFilter = createMockFilter({ defaultOpen: true });
-
-		render(
-			<CheckboxFilter
-				filter={mockFilter}
-				source={QuickFiltersSource.LOGS_EXPLORER}
-			/>,
-		);
-
-		// Wait for values to render
-		await waitFor(() => {
-			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
-		});
-
-		// Click on the value label to trigger the "Only" behavior
-		await userEvent.click(screen.getByText('mq-kafka'));
-
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
-		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
-		const updatedFilters = updatedQuery.builder.queryData[0].filters;
-
-		expect(updatedFilters.items).toHaveLength(1);
-		expect(updatedFilters.items[0].key.key).toBe(SERVICE_NAME_KEY);
-		expect(updatedFilters.items[0].op).toBe('in');
-		expect(updatedFilters.items[0].value).toBe('mq-kafka');
-	});
-
-	it('should clear filters for the attribute when using All', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-
-		// Existing filter: service.name IN ['mq-kafka']
-		mockUseQueryBuilder.mockReturnValue({
-			lastUsedQuery: 0,
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							filters: {
-								items: [
-									{
-										key: {
-											key: SERVICE_NAME_KEY,
-											dataType: DataTypes.String,
-											type: 'resource',
-										},
-										op: 'in',
-										value: ['mq-kafka'],
-									},
-								],
-								op: 'AND',
-							},
-						},
-					],
-				},
-			},
-			redirectWithQueryBuilderData,
-		} as any);
-
-		const mockFilter = createMockFilter({ defaultOpen: true });
-
-		render(
-			<CheckboxFilter
-				filter={mockFilter}
-				source={QuickFiltersSource.LOGS_EXPLORER}
-			/>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('mq-kafka')).toBeInTheDocument();
-		});
-
-		// Only one value is selected, so clicking it should switch to "All" (no filter for this key)
-		await userEvent.click(screen.getByText('mq-kafka'));
-
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
-		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
-		const updatedFilters = updatedQuery.builder.queryData[0].filters;
-
-		const filtersForServiceName = updatedFilters.items.filter(
-			(item: any) => item.key?.key === SERVICE_NAME_KEY,
-		);
-
-		expect(filtersForServiceName).toHaveLength(0);
-	});
-
-	it('should extend an existing IN filter when checking an additional value', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-
-		// Existing filter: service.name IN 'mq-kafka'
-		mockUseQueryBuilder.mockReturnValue({
-			lastUsedQuery: 0,
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							filters: {
-								items: [
-									{
-										key: {
-											key: SERVICE_NAME_KEY,
-											dataType: DataTypes.String,
-											type: 'resource',
-										},
-										op: 'in',
-										value: 'mq-kafka',
-									},
-								],
-								op: 'AND',
-							},
-						},
-					],
-				},
-			},
-			redirectWithQueryBuilderData,
-		} as any);
-
-		const mockFilter = createMockFilter({ defaultOpen: true });
-
-		render(
-			<CheckboxFilter
-				filter={mockFilter}
-				source={QuickFiltersSource.LOGS_EXPLORER}
-			/>,
-		);
-
-		// Wait for checkboxes to render
-		await waitFor(() => {
-			expect(screen.getAllByRole('checkbox')).toHaveLength(4);
-		});
-
-		const checkboxes = screen.getAllByRole('checkbox');
-
-		// First checkbox corresponds to 'mq-kafka' (already selected),
-		// second will be 'otel-demo' which we now select additionally.
-		await userEvent.click(checkboxes[1]);
-
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledTimes(1);
-		const [updatedQuery] = redirectWithQueryBuilderData.mock.calls[0];
-		const updatedFilters = updatedQuery.builder.queryData[0].filters;
-		const [filterForServiceName] = updatedFilters.items;
-
-		expect(filterForServiceName.key.key).toBe(SERVICE_NAME_KEY);
-		expect(filterForServiceName.op).toBe('in');
-		expect(filterForServiceName.value).toEqual(['mq-kafka', 'otel-demo']);
-	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -178,7 +178,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			if (SELECTED_OPERATORS.includes(filterSync.op)) {
 				if (isArray(filterSync.value)) {
 					filterSync.value.forEach((val) => {
-						filterState[String(val)] = true;
+						filterState[val] = true;
 					});
 				} else if (typeof filterSync.value === 'string') {
 					filterState[filterSync.value] = true;
@@ -191,7 +191,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				filterState = setDefaultValues(attributeValues, true);
 				if (isArray(filterSync.value)) {
 					filterSync.value.forEach((val) => {
-						filterState[String(val)] = false;
+						filterState[val] = false;
 					});
 				} else if (typeof filterSync.value === 'string') {
 					filterState[filterSync.value] = false;

frontend/src/components/ShiftOverlay/ShiftHoldOverlayController.tsx

@@ -1,27 +0,0 @@
-import { createShortcutActions } from '../../constants/shortcutActions';
-import { useCmdK } from '../../providers/cmdKProvider';
-import { ShiftOverlay } from './ShiftOverlay';
-import { useShiftHoldOverlay } from './useShiftHoldOverlay';
-
-type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
-export function ShiftHoldOverlayController({
-	userRole,
-}: {
-	userRole: UserRole;
-}): JSX.Element | null {
-	const { open: isCmdKOpen } = useCmdK();
-	const noop = (): void => undefined;
-
-	const actions = createShortcutActions({
-		navigate: noop,
-		handleThemeChange: noop,
-	});
-
-	const visible = useShiftHoldOverlay({
-		isModalOpen: isCmdKOpen,
-	});
-
-	return (
-		<ShiftOverlay visible={visible} actions={actions} userRole={userRole} />
-	);
-}

frontend/src/components/ShiftOverlay/ShiftOverlay.tsx

@@ -1,77 +0,0 @@
-import './shiftOverlay.scss';
-
-import { useMemo } from 'react';
-import ReactDOM from 'react-dom';
-
-import { formatShortcut } from './formatShortcut';
-
-export type UserRole = 'ADMIN' | 'EDITOR' | 'AUTHOR' | 'VIEWER';
-export type CmdAction = {
-	id: string;
-	name: string;
-	shortcut?: string[];
-	keywords?: string;
-	section?: string;
-	roles?: UserRole[];
-	perform: () => void;
-};
-
-interface ShortcutProps {
-	label: string;
-	keyHint: React.ReactNode;
-}
-
-function Shortcut({ label, keyHint }: ShortcutProps): JSX.Element {
-	return (
-		<div className="shift-overlay__item">
-			<span className="shift-overlay__label">{label}</span>
-			<kbd className="shift-overlay__kbd">{keyHint}</kbd>
-		</div>
-	);
-}
-
-interface ShiftOverlayProps {
-	visible: boolean;
-	actions: CmdAction[];
-	userRole: UserRole;
-}
-
-export function ShiftOverlay({
-	visible,
-	actions,
-	userRole,
-}: ShiftOverlayProps): JSX.Element | null {
-	const navigationActions = useMemo(() => {
-		// RBAC filter: show action if no roles set OR current user role is included
-		const permitted = actions.filter(
-			(a) => !a.roles || a.roles.includes(userRole),
-		);
-
-		// Navigation only + must have shortcut
-		return permitted.filter(
-			(a) =>
-				a.section?.toLowerCase() === 'navigation' &&
-				a.shortcut &&
-				a.shortcut.length > 0,
-		);
-	}, [actions, userRole]);
-
-	if (!visible || navigationActions.length === 0) {
-		return null;
-	}
-
-	return ReactDOM.createPortal(
-		<div className="shift-overlay">
-			<div className="shift-overlay__panel">
-				{navigationActions.map((action) => (
-					<Shortcut
-						key={action.id}
-						label={action.name.replace(/^Go to\s+/i, '')}
-						keyHint={formatShortcut(action.shortcut)}
-					/>
-				))}
-			</div>
-		</div>,
-		document.body,
-	);
-}

frontend/src/components/ShiftOverlay/__tests__/ShiftOverlay.test.tsx

@@ -1,102 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render, screen } from '@testing-library/react';
-
-import type { CmdAction } from '../ShiftOverlay';
-import { ShiftOverlay } from '../ShiftOverlay';
-
-jest.mock('../formatShortcut', () => ({
-	formatShortcut: (shortcut: string[]): string => shortcut.join('+'),
-}));
-
-const baseActions: CmdAction[] = [
-	{
-		id: '1',
-		name: 'Go to Traces',
-		section: 'navigation',
-		shortcut: ['Shift', 'T'],
-		perform: jest.fn(),
-	},
-	{
-		id: '2',
-		name: 'Go to Metrics',
-		section: 'navigation',
-		shortcut: ['Shift', 'M'],
-		roles: ['ADMIN'], // ✅ now UserRole[]
-		perform: jest.fn(),
-	},
-	{
-		id: '3',
-		name: 'Create Alert',
-		section: 'actions',
-		shortcut: ['A'],
-		perform: jest.fn(),
-	},
-	{
-		id: '4',
-		name: 'Go to Logs',
-		section: 'navigation',
-		perform: jest.fn(),
-	},
-];
-
-describe('ShiftOverlay', () => {
-	it('renders nothing when not visible', () => {
-		const { container } = render(
-			<ShiftOverlay visible={false} actions={baseActions} userRole="ADMIN" />,
-		);
-
-		expect(container.firstChild).toBeNull();
-	});
-
-	it('renders nothing when no navigation shortcuts exist', () => {
-		const { container } = render(
-			<ShiftOverlay
-				visible
-				actions={[
-					{
-						id: 'x',
-						name: 'Create Alert',
-						section: 'actions',
-						perform: jest.fn(),
-					},
-				]}
-				userRole="ADMIN"
-			/>,
-		);
-
-		expect(container.firstChild).toBeNull();
-	});
-
-	it('renders navigation shortcuts in a portal', () => {
-		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
-
-		expect(document.body.querySelector('.shift-overlay')).toBeInTheDocument();
-
-		expect(screen.getByText('Traces')).toBeInTheDocument();
-		expect(screen.getByText('Metrics')).toBeInTheDocument();
-
-		expect(screen.getByText('Shift+T')).toBeInTheDocument();
-		expect(screen.getByText('Shift+M')).toBeInTheDocument();
-	});
-
-	it('applies RBAC filtering correctly', () => {
-		render(<ShiftOverlay visible actions={baseActions} userRole="VIEWER" />);
-
-		expect(screen.getByText('Traces')).toBeInTheDocument();
-		expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
-	});
-
-	it('strips "Go to" prefix from labels', () => {
-		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
-
-		expect(screen.getByText('Traces')).toBeInTheDocument();
-		expect(screen.queryByText('Go to Traces')).not.toBeInTheDocument();
-	});
-
-	it('does not render actions without shortcuts', () => {
-		render(<ShiftOverlay visible actions={baseActions} userRole="ADMIN" />);
-
-		expect(screen.queryByText('Logs')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ShiftOverlay/__tests__/useShiftHoldOverlay.test.tsx

@@ -1,144 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-
-import { useShiftHoldOverlay } from '../useShiftHoldOverlay';
-
-jest.useFakeTimers();
-
-function pressShift(target: EventTarget = window): void {
-	const event = new KeyboardEvent('keydown', {
-		key: 'Shift',
-		bubbles: true,
-	});
-	Object.defineProperty(event, 'target', { value: target });
-	window.dispatchEvent(event);
-}
-
-function releaseShift(): void {
-	window.dispatchEvent(
-		new KeyboardEvent('keyup', {
-			key: 'Shift',
-			bubbles: true,
-		}),
-	);
-}
-
-describe('useShiftHoldOverlay', () => {
-	afterEach(() => {
-		jest.clearAllTimers();
-	});
-
-	it('shows overlay after holding Shift for 600ms', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(true);
-	});
-
-	it('does not show overlay if Shift is released early', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(300);
-			releaseShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('hides overlay on Shift key release', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(true);
-
-		act(() => {
-			releaseShift();
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('does not activate when modal is open', () => {
-		const { result } = renderHook(() =>
-			useShiftHoldOverlay({ isModalOpen: true }),
-		);
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('does not activate in typing context (input)', () => {
-		const input = document.createElement('input');
-		document.body.appendChild(input);
-
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift(input);
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(false);
-
-		document.body.removeChild(input);
-	});
-
-	it('cleans up on window blur', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(true);
-
-		act(() => {
-			window.dispatchEvent(new Event('blur'));
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('cleans up on document visibility change', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({}));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(true);
-
-		act(() => {
-			document.dispatchEvent(new Event('visibilitychange'));
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('does nothing when disabled', () => {
-		const { result } = renderHook(() => useShiftHoldOverlay({ disabled: true }));
-
-		act(() => {
-			pressShift();
-			jest.advanceTimersByTime(600);
-		});
-
-		expect(result.current).toBe(false);
-	});
-});

frontend/src/components/ShiftOverlay/formatShortcut.tsx

@@ -1,44 +0,0 @@
-import './shiftOverlay.scss';
-
-import { ArrowUp, ChevronUp, Command, Option } from 'lucide-react';
-import { ReactNode } from 'react';
-
-export function formatShortcut(shortcut?: string[]): ReactNode {
-	if (!shortcut || shortcut.length === 0) return null;
-
-	const combo = shortcut.find((s) => typeof s === 'string' && s.trim());
-	if (!combo) return null;
-
-	return combo.split('+').map((key) => {
-		const k = key.trim().toLowerCase();
-
-		let node: ReactNode;
-		switch (k) {
-			case 'shift':
-				node = <ArrowUp size={14} />;
-				break;
-			case 'cmd':
-			case 'meta':
-				node = <Command size={14} />;
-				break;
-			case 'alt':
-				node = <Option size={14} />;
-				break;
-			case 'ctrl':
-			case 'control':
-				node = <ChevronUp size={14} />;
-				break;
-			case 'arrowup':
-				node = <ArrowUp size={14} />;
-				break;
-			default:
-				node = k.toUpperCase();
-		}
-
-		return (
-			<span key={`shortcut-${k}`} className="shift-overlay__key">
-				{node}
-			</span>
-		);
-	});
-}

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -1,75 +0,0 @@
-.shift-overlay {
-	position: fixed;
-	bottom: 20px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9999;
-	pointer-events: none;
-
-	&__panel {
-		display: flex;
-		gap: 20px;
-		padding: 8px 12px;
-
-		background: var(--bg-ink-500);
-		color: var(--bg-vanilla-300);
-
-		border-radius: 8px;
-		font-size: 13px;
-		line-height: 1.2;
-
-		box-shadow: 0 6px 20px var(--bg-ink-500);
-		animation: shift-overlay-fade-in 120ms ease-out;
-	}
-
-	&__item {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		white-space: nowrap;
-	}
-
-	&__label {
-		opacity: 0.9;
-	}
-
-	&__kbd {
-		font-family: monospace;
-		font-size: 12px;
-		padding: 2px 6px;
-		display: flex;
-
-		border-radius: 4px;
-		background: var(--bg-slate-100);
-	}
-
-	&__key {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-
-		min-width: 15px;
-		height: 20px;
-
-		border-radius: 4px;
-
-		background-color: var(--bg-slate-100);
-
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 1;
-		color: var(--bg-vanilla-300);
-		flex-shrink: 0;
-	}
-}
-
-@keyframes shift-overlay-fade-in {
-	from {
-		opacity: 0;
-		transform: translateY(-4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}

frontend/src/components/ShiftOverlay/useShiftHoldOverlay.ts

@@ -1,87 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-const HOLD_DELAY_MS = 500;
-
-function isTypingContext(target: EventTarget | null): boolean {
-	if (!(target instanceof HTMLElement)) return false;
-
-	const tag = target.tagName;
-	return tag === 'INPUT' || tag === 'TEXTAREA' || target.isContentEditable;
-}
-
-interface UseShiftHoldOverlayOptions {
-	disabled?: boolean;
-	isModalOpen?: boolean;
-}
-
-export function useShiftHoldOverlay({
-	disabled = false,
-	isModalOpen = false,
-}: UseShiftHoldOverlayOptions): boolean {
-	const [visible, setVisible] = useState<boolean>(false);
-
-	const timerRef = useRef<number | null>(null);
-	const isHoldingRef = useRef<boolean>(false);
-
-	useEffect((): (() => void) | void => {
-		if (disabled) return;
-
-		function cleanup(): void {
-			isHoldingRef.current = false;
-
-			if (timerRef.current !== null) {
-				window.clearTimeout(timerRef.current);
-				timerRef.current = null;
-			}
-
-			setVisible(false);
-		}
-
-		function onKeyDown(e: KeyboardEvent): void {
-			if (e.key !== 'Shift') return;
-			if (e.repeat) return;
-
-			// Suppress in bad contexts
-			if (
-				isModalOpen ||
-				e.metaKey ||
-				e.ctrlKey ||
-				e.altKey ||
-				isTypingContext(e.target)
-			) {
-				return;
-			}
-
-			isHoldingRef.current = true;
-
-			timerRef.current = window.setTimeout(() => {
-				if (isHoldingRef.current) {
-					setVisible(true);
-				}
-			}, HOLD_DELAY_MS);
-		}
-
-		function onKeyUp(e: KeyboardEvent): void {
-			if (e.key !== 'Shift') return;
-			cleanup();
-		}
-
-		function onBlur(): void {
-			cleanup();
-		}
-
-		window.addEventListener('keydown', onKeyDown);
-		window.addEventListener('keyup', onKeyUp);
-		window.addEventListener('blur', onBlur);
-		document.addEventListener('visibilitychange', cleanup);
-
-		return (): void => {
-			window.removeEventListener('keydown', onKeyDown);
-			window.removeEventListener('keyup', onKeyUp);
-			window.removeEventListener('blur', onBlur);
-			document.removeEventListener('visibilitychange', cleanup);
-		};
-	}, [disabled, isModalOpen]);
-
-	return visible;
-}

frontend/src/components/UserpilotRouteTracker/UserpilotRouteTracker.test.tsx

@@ -0,0 +1,223 @@
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import { Userpilot } from 'userpilot';
+
+import UserpilotRouteTracker from './UserpilotRouteTracker';
+
+// Mock constants
+const INITIAL_PATH = '/initial';
+const TIMER_DELAY = 100;
+
+// Mock the userpilot module
+jest.mock('userpilot', () => ({
+	Userpilot: {
+		reload: jest.fn(),
+	},
+}));
+
+// Mock location state
+let mockLocation = {
+	pathname: INITIAL_PATH,
+	search: '',
+	hash: '',
+	state: null,
+};
+
+// Mock react-router-dom
+jest.mock('react-router-dom', () => {
+	const originalModule = jest.requireActual('react-router-dom');
+
+	return {
+		...originalModule,
+		useLocation: jest.fn(() => mockLocation),
+	};
+});
+
+describe('UserpilotRouteTracker', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Reset timers
+		jest.useFakeTimers();
+		// Reset error mock implementation
+		(Userpilot.reload as jest.Mock).mockImplementation(() => {});
+		// Reset location to initial state
+		mockLocation = {
+			pathname: INITIAL_PATH,
+			search: '',
+			hash: '',
+			state: null,
+		};
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('calls Userpilot.reload on initial render', () => {
+		render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward timer to trigger the setTimeout in reloadUserpilot
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('calls Userpilot.reload when pathname changes', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		// Create a new location object with different pathname
+		const newLocation = {
+			...mockLocation,
+			pathname: '/new-path',
+		};
+
+		// Update the mock location with new path and trigger re-render
+		act(() => {
+			mockLocation = newLocation;
+			// Force a component update with the new location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer to allow the setTimeout to execute
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('calls Userpilot.reload when search parameters change', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		// Create a new location object with different search params
+		const newLocation = {
+			...mockLocation,
+			search: '?param=value',
+		};
+
+		// Update the mock location with new search and trigger re-render
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		act(() => {
+			mockLocation = newLocation;
+			// Force a component update with the new location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer to allow the setTimeout to execute
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('handles errors in Userpilot.reload gracefully', () => {
+		// Mock console.error to prevent test output noise and capture calls
+		const consoleErrorSpy = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => {});
+
+		// Instead of using the component, we test the error handling behavior directly
+		const errorMsg = 'Error message';
+
+		// Set up a function that has the same error handling behavior as in component
+		const testErrorHandler = (): void => {
+			try {
+				if (typeof Userpilot !== 'undefined' && Userpilot.reload) {
+					Userpilot.reload();
+				}
+			} catch (error) {
+				console.error('[Userpilot] Error reloading on route change:', error);
+			}
+		};
+
+		// Make Userpilot.reload throw an error
+		(Userpilot.reload as jest.Mock).mockImplementation(() => {
+			throw new Error(errorMsg);
+		});
+
+		// Execute the function that should handle errors
+		testErrorHandler();
+
+		// Verify error was logged
+		expect(consoleErrorSpy).toHaveBeenCalledWith(
+			'[Userpilot] Error reloading on route change:',
+			expect.any(Error),
+		);
+
+		// Restore console mock
+		consoleErrorSpy.mockRestore();
+	});
+
+	it('does not call Userpilot.reload when same route is rendered again', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		act(() => {
+			mockLocation = {
+				pathname: mockLocation.pathname,
+				search: mockLocation.search,
+				hash: mockLocation.hash,
+				state: mockLocation.state,
+			};
+			// Force a component update with the same location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		// Should not call reload since path and search are the same
+		expect(Userpilot.reload).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/UserpilotRouteTracker/UserpilotRouteTracker.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Userpilot } from 'userpilot';
+
+/**
+ * UserpilotRouteTracker - A component that tracks route changes and calls Userpilot.reload
+ * on actual page changes (pathname changes or significant query parameter changes).
+ *
+ * This component renders nothing and is designed to be placed once high in the component tree.
+ */
+function UserpilotRouteTracker(): null {
+	const location = useLocation();
+	const prevPathRef = useRef<string>(location.pathname);
+	const prevSearchRef = useRef<string>(location.search);
+	const isFirstRenderRef = useRef<boolean>(true);
+
+	// Function to reload Userpilot safely - using useCallback to avoid dependency issues
+	const reloadUserpilot = useCallback((): void => {
+		try {
+			if (typeof Userpilot !== 'undefined' && Userpilot.reload) {
+				setTimeout(() => {
+					Userpilot.reload();
+				}, 100);
+			}
+		} catch (error) {
+			console.error('[Userpilot] Error reloading on route change:', error);
+		}
+	}, []);
+
+	// Handle first render
+	useEffect(() => {
+		if (isFirstRenderRef.current) {
+			isFirstRenderRef.current = false;
+			reloadUserpilot();
+		}
+	}, [reloadUserpilot]);
+
+	// Handle route/query changes
+	useEffect(() => {
+		// Skip first render as it's handled by the effect above
+		if (isFirstRenderRef.current) {
+			return;
+		}
+
+		// Check if the path has changed or if significant query params have changed
+		const pathChanged = location.pathname !== prevPathRef.current;
+		const searchChanged = location.search !== prevSearchRef.current;
+
+		if (pathChanged || searchChanged) {
+			// Update refs
+			prevPathRef.current = location.pathname;
+			prevSearchRef.current = location.search;
+			reloadUserpilot();
+		}
+	}, [location.pathname, location.search, reloadUserpilot]);
+
+	return null;
+}
+
+export default UserpilotRouteTracker;

frontend/src/components/ValueGraph/__tests__/ValueGraph.test.tsx

@@ -1,205 +0,0 @@
-import { screen } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import ValueGraph from '../index';
-import { getBackgroundColorAndThresholdCheck } from '../utils';
-
-// Mock the utils module
-jest.mock('../utils', () => ({
-	getBackgroundColorAndThresholdCheck: jest.fn(() => ({
-		threshold: {} as any,
-		isConflictingThresholds: false,
-	})),
-}));
-
-const mockGetBackgroundColorAndThresholdCheck = getBackgroundColorAndThresholdCheck as jest.MockedFunction<
-	typeof getBackgroundColorAndThresholdCheck
->;
-
-const TEST_ID_VALUE_GRAPH_TEXT = 'value-graph-text';
-const TEST_ID_VALUE_GRAPH_PREFIX_UNIT = 'value-graph-prefix-unit';
-const TEST_ID_VALUE_GRAPH_SUFFIX_UNIT = 'value-graph-suffix-unit';
-
-describe('ValueGraph', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders the numeric value correctly', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
-	});
-
-	it('renders value with suffix unit', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="42ms" rawValue={42} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42');
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('ms');
-	});
-
-	it('renders value with prefix unit', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="$100" rawValue={100} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
-	});
-
-	it('renders value with both prefix and suffix units', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="$100USD" rawValue={100} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('100');
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_PREFIX_UNIT)).toHaveTextContent('$');
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('USD');
-	});
-
-	it('renders value with K suffix', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1.5K" rawValue={1500} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.5K');
-	});
-
-	it('applies text color when threshold format is Text', () => {
-		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
-			threshold: {
-				thresholdFormat: 'Text',
-				thresholdColor: 'red',
-			} as any,
-			isConflictingThresholds: false,
-		});
-
-		const { getByTestId } = render(
-			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveStyle({ color: 'red' });
-	});
-
-	it('applies background color when threshold format is Background', () => {
-		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
-			threshold: {
-				thresholdFormat: 'Background',
-				thresholdColor: 'blue',
-			} as any,
-			isConflictingThresholds: false,
-		});
-
-		const { container } = render(
-			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
-		);
-
-		const containerElement = container.querySelector('.value-graph-container');
-		expect(containerElement).toHaveStyle({ backgroundColor: 'blue' });
-	});
-
-	it('displays conflicting thresholds indicator when multiple thresholds match', () => {
-		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
-			threshold: {
-				thresholdFormat: 'Text',
-				thresholdColor: 'red',
-			} as any,
-			isConflictingThresholds: true,
-		});
-
-		const { getByTestId } = render(
-			<ValueGraph value="42" rawValue={42} thresholds={[]} />,
-		);
-
-		expect(getByTestId('conflicting-thresholds')).toBeInTheDocument();
-	});
-
-	it('does not display conflicting thresholds indicator when no conflict', () => {
-		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
-			threshold: {} as any,
-			isConflictingThresholds: false,
-		});
-
-		render(<ValueGraph value="42" rawValue={42} thresholds={[]} />);
-
-		expect(
-			screen.queryByTestId('conflicting-thresholds'),
-		).not.toBeInTheDocument();
-	});
-
-	it('applies text color to units when threshold format is Text', () => {
-		mockGetBackgroundColorAndThresholdCheck.mockReturnValue({
-			threshold: {
-				thresholdFormat: 'Text',
-				thresholdColor: 'green',
-			} as any,
-			isConflictingThresholds: false,
-		});
-
-		render(<ValueGraph value="42ms" rawValue={42} thresholds={[]} />);
-
-		const unitElement = screen.getByText('ms');
-		expect(unitElement).toHaveStyle({ color: 'green' });
-	});
-
-	it('renders decimal values correctly', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="42.5" rawValue={42.5} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('42.5');
-	});
-
-	it('handles values with M suffix', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1.2M" rawValue={1200000} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1.2M');
-	});
-
-	it('handles values with B suffix', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="2.3B" rawValue={2300000000} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('2.3B');
-	});
-
-	it('handles scientific notation values', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1e-9" rawValue={1e-9} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
-	});
-
-	it('handles scientific notation with suffix unit', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1e-9%" rawValue={1e-9} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e-9');
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_SUFFIX_UNIT)).toHaveTextContent('%');
-	});
-
-	it('handles scientific notation with uppercase E', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1E-9" rawValue={1e-9} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1E-9');
-	});
-
-	it('handles scientific notation with positive exponent', () => {
-		const { getByTestId } = render(
-			<ValueGraph value="1e+9" rawValue={1e9} thresholds={[]} />,
-		);
-
-		expect(getByTestId(TEST_ID_VALUE_GRAPH_TEXT)).toHaveTextContent('1e+9');
-	});
-});

frontend/src/components/ValueGraph/index.tsx

@@ -3,39 +3,11 @@ import './ValueGraph.styles.scss';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
 
-function Unit({
-	type,
-	unit,
-	threshold,
-	fontSize,
-}: {
-	type: 'prefix' | 'suffix';
-	unit: string;
-	threshold: ThresholdProps;
-	fontSize: string;
-}): JSX.Element {
-	return (
-		<Typography.Text
-			className="value-graph-unit"
-			data-testid={`value-graph-${type}-unit`}
-			style={{
-				color:
-					threshold.thresholdFormat === 'Text'
-						? threshold.thresholdColor
-						: undefined,
-				fontSize: `calc(${fontSize} * 0.7)`,
-			}}
-		>
-			{unit}
-		</Typography.Text>
-	);
-}
-
 function ValueGraph({
 	value,
 	rawValue,
@@ -45,16 +17,10 @@ function ValueGraph({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [fontSize, setFontSize] = useState('2.5vw');
 
-	const { numericValue, prefixUnit, suffixUnit } = useMemo(() => {
-		const matches = value.match(
-			/^([^\d.]*)?([\d.]+(?:[eE][+-]?[\d]+)?[KMB]?)([^\d.]*)?$/,
-		);
-		return {
-			numericValue: matches?.[2] || value,
-			prefixUnit: matches?.[1]?.trim() || '',
-			suffixUnit: matches?.[3]?.trim() || '',
-		};
-	}, [value]);
+	// Parse value to separate number and unit (assuming unit is at the end)
+	const matches = value.match(/([\d.]+[KMB]?)(.*)$/);
+	const numericValue = matches?.[1] || value;
+	const unit = matches?.[2]?.trim() || '';
 
 	// Adjust font size based on container size
 	useEffect(() => {
@@ -99,17 +65,8 @@ function ValueGraph({
 			}}
 		>
 			<div className="value-text-container">
-				{prefixUnit && (
-					<Unit
-						type="prefix"
-						unit={prefixUnit}
-						threshold={threshold}
-						fontSize={fontSize}
-					/>
-				)}
 				<Typography.Text
 					className="value-graph-text"
-					data-testid="value-graph-text"
 					style={{
 						color:
 							threshold.thresholdFormat === 'Text'
@@ -120,13 +77,19 @@ function ValueGraph({
 				>
 					{numericValue}
 				</Typography.Text>
-				{suffixUnit && (
-					<Unit
-						type="suffix"
-						unit={suffixUnit}
-						threshold={threshold}
-						fontSize={fontSize}
-					/>
+				{unit && (
+					<Typography.Text
+						className="value-graph-unit"
+						style={{
+							color:
+								threshold.thresholdFormat === 'Text'
+									? threshold.thresholdColor
+									: undefined,
+							fontSize: `calc(${fontSize} * 0.7)`,
+						}}
+					>
+						{unit}
+					</Typography.Text>
 				)}
 			</div>
 			{isConflictingThresholds && (

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -7,7 +7,7 @@ import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown, TriangleAlert } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { ReactNode, useMemo } from 'react';
+import { ReactNode } from 'react';
 import { Warning } from 'types/api';
 
 interface WarningContentProps {
@@ -106,51 +106,19 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 	);
 }
 
-function PopoverMessage({
-	message,
-}: {
-	message: string | ReactNode;
-}): JSX.Element {
-	return (
-		<section className="warning-content">
-			<section className="warning-content__summary-section">
-				<header className="warning-content__summary">
-					<div className="warning-content__summary-left">
-						<div className="warning-content__summary-text">
-							<p className="warning-content__warning-message">{message}</p>
-						</div>
-					</div>
-				</header>
-			</section>
-		</section>
-	);
-}
-
 interface WarningPopoverProps extends PopoverProps {
 	children?: ReactNode;
-	warningData?: Warning;
-	message?: string | ReactNode;
+	warningData: Warning;
 }
 
 function WarningPopover({
 	children,
 	warningData,
-	message = '',
 	...popoverProps
 }: WarningPopoverProps): JSX.Element {
-	const content = useMemo(() => {
-		if (message) {
-			return <PopoverMessage message={message} />;
-		}
-		if (warningData) {
-			return <WarningContent warning={warningData} />;
-		}
-		return null;
-	}, [message, warningData]);
-
 	return (
 		<Popover
-			content={content}
+			content={<WarningContent warning={warningData} />}
 			overlayStyle={{ padding: 0, maxWidth: '600px' }}
 			overlayInnerStyle={{ padding: 0 }}
 			autoAdjustOverflow
@@ -169,8 +137,6 @@ function WarningPopover({
 
 WarningPopover.defaultProps = {
 	children: undefined,
-	warningData: null,
-	message: null,
 };
 
 export default WarningPopover;

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,18 +1,11 @@
 import './styles.scss';
 
-import { WarningFilled } from '@ant-design/icons';
-import { Select, Tooltip } from 'antd';
+import { Select } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
-import classNames from 'classnames';
-import { useMemo } from 'react';
 
-import { UniversalYAxisUnitMappings } from './constants';
+import { UniversalYAxisUnitMappings, Y_AXIS_CATEGORIES } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
-import {
-	getUniversalNameFromMetricUnit,
-	getYAxisCategories,
-	mapMetricUnitToUniversalUnit,
-} from './utils';
+import { mapMetricUnitToUniversalUnit } from './utils';
 
 function YAxisUnitSelector({
 	value,
@@ -20,25 +13,9 @@ function YAxisUnitSelector({
 	placeholder = 'Please select a unit',
 	loading = false,
 	'data-testid': dataTestId,
-	source,
-	initialValue,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
-	const incompatibleUnitMessage = useMemo(() => {
-		if (!initialValue || !value || loading) return '';
-		const initialUniversalUnit = mapMetricUnitToUniversalUnit(initialValue);
-		const currentUniversalUnit = mapMetricUnitToUniversalUnit(value);
-		if (initialUniversalUnit !== currentUniversalUnit) {
-			const initialUniversalUnitName = getUniversalNameFromMetricUnit(
-				initialValue,
-			);
-			const currentUniversalUnitName = getUniversalNameFromMetricUnit(value);
-			return `Unit mismatch. Saved unit is ${initialUniversalUnitName}, but ${currentUniversalUnitName} is selected.`;
-		}
-		return '';
-	}, [initialValue, value, loading]);
-
 	const handleSearch = (
 		searchTerm: string,
 		currentOption: DefaultOptionType | undefined,
@@ -60,8 +37,6 @@ function YAxisUnitSelector({
 		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
-	const categories = getYAxisCategories(source);
-
 	return (
 		<div className="y-axis-unit-selector-component">
 			<Select
@@ -71,19 +46,9 @@ function YAxisUnitSelector({
 				placeholder={placeholder}
 				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
-				suffixIcon={
-					incompatibleUnitMessage ? (
-						<Tooltip title={incompatibleUnitMessage}>
-							<WarningFilled />
-						</Tooltip>
-					) : undefined
-				}
-				className={classNames({
-					'warning-state': incompatibleUnitMessage,
-				})}
 				data-testid={dataTestId}
 			>
-				{categories.map((category) => (
+				{Y_AXIS_CATEGORIES.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
 							<Select.Option key={unit.id} value={unit.id}>