Merge branch 'SIG-5603-dyn-var' of github.com:SigNoz/signoz into feat/cross-filtering-2

* feat: added dynamic variable to the dashboard details

* feat: added new component to existing variables

* feat: added enhancement to multiselect and select for dyn-variables

* feat: added refetch method between all dynamic-variables

* feat: correct error handling

* feat: correct error handling

* feat: enforced non-empty selectedvalues and default value

* feat: added client and server side searches

* feat: retry on error

* feat: correct error handling

* feat: handle defautl value in existing variables

* feat: lowercase the source for payload

* feat: fixed the incorrect assignment of active indices

* feat: improved handling of all option

* feat: improved the ALL option visuals

* feat: handled default value enforcement in existing variables

* feat: added unix time to values call

* feat: added incomplete data message and info to search

* feat: changed dashboard panel call handling with existing variables

* feat: adjusted the response type and data with the new API schema for values

* feat: code refactor

* feat: made dyn-variable option as the default

* feat: added test cases for dyn variable creation and completion

* feat: updated test cases

.devenv/docker/clickhouse/compose.yaml

@@ -1,6 +1,6 @@
 services:
   clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     container_name: clickhouse
     volumes:
       - ${PWD}/fs/etc/clickhouse-server/config.d/config.xml:/etc/clickhouse-server/config.d/config.xml
@@ -23,8 +23,6 @@ services:
       retries: 3
     depends_on:
       - zookeeper
-    environment:
-      - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:
     image: signoz/zookeeper:3.7.1
     container_name: zookeeper
@@ -42,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.2
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.2
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -5,45 +5,6 @@
 /frontend/ @SigNoz/frontend @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
-
-# 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
 

.golangci.yml

@@ -8,7 +8,6 @@ linters:
     - depguard
     - iface
     - unparam
-    - forbidigo
 
 linters-settings:
   sloglint:
@@ -25,10 +24,6 @@ linters-settings:
         deny:
           - pkg: "go.uber.org/zap"
             desc: "Do not use zap logger. Use slog instead."
-      noerrors:
-        deny:
-          - pkg: "errors"
-            desc: "Do not use errors package. Use github.com/SigNoz/signoz/pkg/errors instead."
   iface:
     enable:
       - identical

CONTRIBUTING.md

@@ -78,5 +78,4 @@ Need assistance? Join our Slack community:
 
 - Set up your [development environment](docs/contributing/development.md)
 - Deploy and observe [SigNoz in action with OpenTelemetry Demo Application](docs/otel-demo-docs.md)
-- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future.
-- Write [integration tests](docs/contributing/go/integration.md)
+- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future. 

cmd/community/server.go

@@ -32,7 +32,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
 			if err != nil {
 				return err
 			}

cmd/config.go

@@ -2,6 +2,7 @@ package cmd
 
 import (
 	"context"
+	"fmt"
 	"log/slog"
 	"os"
 
@@ -11,10 +12,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/signoz"
 )
 
-func NewSigNozConfig(ctx context.Context, logger *slog.Logger, flags signoz.DeprecatedFlags) (signoz.Config, error) {
+func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.Config, error) {
 	config, err := signoz.NewConfig(
 		ctx,
-		logger,
 		config.ResolverConfig{
 			Uris: []string{"env:"},
 			ProviderFactories: []config.ProviderFactory{
@@ -31,10 +31,14 @@ func NewSigNozConfig(ctx context.Context, logger *slog.Logger, flags signoz.Depr
 	return config, nil
 }
 
-func NewJWTSecret(ctx context.Context, logger *slog.Logger) string {
+func NewJWTSecret(_ context.Context, _ *slog.Logger) string {
 	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
 	if len(jwtSecret) == 0 {
-		logger.ErrorContext(ctx, "🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!", "error", "SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application. Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access. Please set the SIGNOZ_JWT_SECRET environment variable immediately. For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
+		fmt.Println("🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!")
+		fmt.Println("SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application.")
+		fmt.Println("Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access.")
+		fmt.Println("Please set the SIGNOZ_JWT_SECRET environment variable immediately.")
+		fmt.Println("For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
 	}
 
 	return jwtSecret

cmd/enterprise/server.go

@@ -35,7 +35,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
 			if err != nil {
 				return err
 			}

conf/example.yaml

@@ -137,7 +137,10 @@ prometheus:
 ##################### Alertmanager #####################
 alertmanager:
   # Specifies the alertmanager provider to use.
-  provider: signoz
+  provider: legacy
+  legacy:
+    # The API URL (with prefix) of the legacy Alertmanager instance.
+    api_url: http://localhost:9093/api
   signoz:
     # The poll interval for periodically syncing the alertmanager with the config in the store.
     poll_interval: 1m

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

@@ -11,7 +11,7 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  image: clickhouse/clickhouse-server:25.5.6
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   deploy:
     labels:
@@ -37,8 +37,6 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
-  environment:
-    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
   image: signoz/zookeeper:3.7.1
@@ -65,7 +63,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     command:
       - bash
       - -c
@@ -176,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.95.0
+    image: signoz/signoz:v0.93.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.2
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.2
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -11,7 +11,7 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  image: clickhouse/clickhouse-server:25.5.6
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   deploy:
     labels:
@@ -36,8 +36,6 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
-  environment:
-    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
   image: signoz/zookeeper:3.7.1
@@ -62,7 +60,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     command:
       - bash
       - -c
@@ -117,7 +115,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.95.0
+    image: signoz/signoz:v0.93.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.5
+    image: signoz/signoz-otel-collector:v0.129.2
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.5
+    image: signoz/signoz-schema-migrator:v0.129.2
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -10,7 +10,7 @@ x-common: &common
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
   # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:25.5.6
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   labels:
     signoz.io/scrape: "true"
@@ -40,8 +40,6 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
-  environment:
-    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
   image: signoz/zookeeper:3.7.1
@@ -67,7 +65,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     container_name: signoz-init-clickhouse
     command:
       - bash
@@ -179,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.95.0}
+    image: signoz/signoz:${VERSION:-v0.93.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +211,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.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.2}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +237,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +248,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -9,7 +9,8 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  image: clickhouse/clickhouse-server:25.5.6
+  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   labels:
     signoz.io/scrape: "true"
@@ -35,8 +36,6 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
-  environment:
-    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
   image: signoz/zookeeper:3.7.1
@@ -62,7 +61,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     container_name: signoz-init-clickhouse
     command:
       - bash
@@ -111,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.95.0}
+    image: signoz/signoz:${VERSION:-v0.93.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.2}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.2}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/go/integration.md

@@ -1,213 +0,0 @@
-# Integration Tests
-
-SigNoz uses integration tests to verify that different components work together correctly in a real environment. These tests run against actual services (ClickHouse, PostgreSQL, etc.) to ensure end-to-end functionality.
-
-## How to set up the integration test environment?
-
-### Prerequisites
-
-Before running integration tests, ensure you have the following installed:
-
-- Python 3.13+
-- Poetry (for dependency management)
-- Docker (for containerized services)
-
-### Initial Setup
-
-1. Navigate to the integration tests directory:
-```bash
-cd tests/integration
-```
-
-2. Install dependencies using Poetry:
-```bash
-poetry install --no-root
-```
-
-### Starting the Test Environment
-
-To spin up all the containers necessary for writing integration tests and keep them running:
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/setup.py::test_setup
-```
-
-This command will:
-- Start all required services (ClickHouse, PostgreSQL, Zookeeper, etc.)
-- Keep containers running due to the `--reuse` flag
-- Verify that the setup is working correctly
-
-### Stopping the Test Environment
-
-When you're done writing integration tests, clean up the environment:
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --teardown -s src/bootstrap/setup.py::test_teardown
-```
-
-This will destroy the running integration test setup and clean up resources.
-
-## Understanding the Integration Test Framework
-
-Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. Wiremock is used to spin up **test doubles** of other services.
-
-- **Why Python/pytest?** It's expressive, low-boilerplate, and has powerful fixture capabilities that make integration testing straightforward. Extensive libraries for HTTP requests, JSON handling, and data analysis (numpy) make it easier to test APIs and verify data
-- **Why testcontainers?** They let us spin up isolated dependencies that match our production environment without complex setup.
-- **Why wiremock?** Well maintained, documented and extensible.
-
-```
-.
-├── conftest.py
-├── fixtures
-│   ├── __init__.py
-│   ├── auth.py
-│   ├── clickhouse.py
-│   ├── fs.py
-│   ├── http.py
-│   ├── migrator.py
-│   ├── network.py
-│   ├── postgres.py
-│   ├── signoz.py
-│   ├── sql.py
-│   ├── sqlite.py
-│   ├── types.py
-│   └── zookeeper.py
-├── poetry.lock
-├── pyproject.toml
-└── src
-    └── bootstrap
-        ├── __init__.py
-        ├── a_database.py
-        ├── b_register.py
-        └── c_license.py
-```
-
-Each test suite follows some important principles:
-
-1. **Organization**: Test suites live under `src/` in self-contained packages. Fixtures (a pytest concept) live inside `fixtures/`.
-2. **Execution Order**: Files are prefixed with `a_`, `b_`, `c_` to ensure sequential execution.
-3. **Time Constraints**: Each suite should complete in under 10 minutes (setup takes ~4 mins).
-
-### Test Suite Design
-
-Test suites should target functional domains or subsystems within SigNoz. When designing a test suite, consider these principles:
-
-- **Functional Cohesion**: Group tests around a specific capability or service boundary
-- **Data Flow**: Follow the path of data through related components
-- **Change Patterns**: Components frequently modified together should be tested together
-
-The exact boundaries for modules are intentionally flexible, allowing teams to define logical groupings based on their specific context and knowledge of the system.
-
-Eg: The **bootstrap** integration test suite validates core system functionality:
-
-- Database initialization
-- Version check
-
-Other test suites can be **pipelines, auth, querier.**
-
-## How to write an integration test?
-
-Now start writing an integration test. Create a new file `src/bootstrap/e_version.py` and paste the following:
-
-```python
-import requests
-
-from fixtures import types
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-def test_version(signoz: types.SigNoz) -> None:
-    response = requests.get(signoz.self.host_config.get("/api/v1/version"), timeout=2)
-    logger.info(response)
-```
-
-We have written a simple test which calls the `version` endpoint of the container in step 1. In **order to just run this function, run the following command:**
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/e_version.py::test_version
-```
-
-> Note: The `--reuse` flag is used to reuse the environment if it is already running. Always use this flag when writing and running integration tests. If you don't use this flag, the environment will be destroyed and recreated every time you run the test.
-
-Here's another example of how to write a more comprehensive integration test:
-
-```python
-from http import HTTPStatus
-import requests
-from fixtures import types
-from fixtures.logger import setup_logger
-
-logger = setup_logger(__name__)
-
-def test_user_registration(signoz: types.SigNoz) -> None:
-    """Test user registration functionality."""
-    response = requests.post(
-        signoz.self.host_configs["8080"].get("/api/v1/register"),
-        json={
-            "name": "testuser",
-            "orgId": "",
-            "orgName": "test.org",
-            "email": "test@example.com",
-            "password": "password123Z$",
-        },
-        timeout=2,
-    )
-    
-    assert response.status_code == HTTPStatus.OK
-    assert response.json()["setupCompleted"] is True
-```
-
-## How to run integration tests?
-
-### Running All Tests
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/
-```
-
-### Running Specific Test Categories
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>
-
-# Run querier tests
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/querier/
-# Run auth tests
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/
-```
-
-### Running Individual Tests
-
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>/<file>.py::test_name
-
-# Run test_register in file a_register.py in auth suite
-poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/a_register.py::test_register
-```
-
-## How to configure different options for integration tests?
-
-Tests can be configured using pytest options:
-
-- `--sqlstore-provider` - Choose database provider (default: postgres)
-- `--postgres-version` - PostgreSQL version (default: 15)
-- `--clickhouse-version` - ClickHouse version (default: 24.1.2-alpine)
-- `--zookeeper-version` - Zookeeper version (default: 3.7.1)
-
-Example:
-```bash
-poetry run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postgres-version=14 src/auth/
-```
-
-
-## What should I remember?
-
-- **Always use the `--reuse` flag** when setting up the environment to keep containers running
-- **Use the `--teardown` flag** when cleaning up to avoid resource leaks
-- **Follow the naming convention** with alphabetical prefixes for test execution order
-- **Use proper timeouts** in HTTP requests to avoid hanging tests
-- **Clean up test data** between tests to avoid interference
-- **Use descriptive test names** that clearly indicate what is being tested
-- **Leverage fixtures** for common setup and authentication
-- **Test both success and failure scenarios** to ensure robust functionality

ee/authz/openfgaschema/base.fga

@@ -1,44 +0,0 @@
-module base
-
-type organisation 
-  relations
-    define read: [user, role#assignee]
-    define update: [user, role#assignee]
-
-type user
-  relations
-    define read: [user, role#assignee]
-    define update: [user, role#assignee]
-    define delete: [user, role#assignee]
-
-type anonymous
-
-type role 
-  relations
-    define assignee: [user]
-
-    define read: [user, role#assignee]
-    define update: [user, role#assignee]
-    define delete: [user, role#assignee]
-
-type resources
-  relations
-    define create: [user, role#assignee]
-    define list: [user, role#assignee]
-
-    define read: [user, role#assignee]
-    define update: [user, role#assignee]
-    define delete: [user, role#assignee]
-
-type resource
-  relations
-      define read: [user, anonymous, role#assignee]
-      define update: [user, role#assignee]
-      define delete: [user, role#assignee]
-
-      define block: [user, role#assignee]
-
-
-type telemetry
-  relations
-      define read: [user, anonymous, role#assignee]

ee/authz/openfgaschema/schema.go

@@ -1,29 +0,0 @@
-package openfgaschema
-
-import (
-	"context"
-	_ "embed"
-
-	"github.com/SigNoz/signoz/pkg/authz"
-	openfgapkgtransformer "github.com/openfga/language/pkg/go/transformer"
-)
-
-var (
-	//go:embed base.fga
-	baseDSL string
-)
-
-type schema struct{}
-
-func NewSchema() authz.Schema {
-	return &schema{}
-}
-
-func (schema *schema) Get(ctx context.Context) []openfgapkgtransformer.ModuleFile {
-	return []openfgapkgtransformer.ModuleFile{
-		{
-			Name:     "base.fga",
-			Contents: baseDSL,
-		},
-	}
-}

ee/http/middleware/authz.go

@@ -1,132 +0,0 @@
-package middleware
-
-import (
-	"log/slog"
-	"net/http"
-
-	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/gorilla/mux"
-)
-
-const (
-	authzDeniedMessage string = "::AUTHZ-DENIED::"
-)
-
-type AuthZ struct {
-	logger       *slog.Logger
-	authzService authz.AuthZ
-}
-
-func NewAuthZ(logger *slog.Logger) *AuthZ {
-	if logger == nil {
-		panic("cannot build authz middleware, logger is empty")
-	}
-
-	return &AuthZ{logger: logger}
-}
-
-func (middleware *AuthZ) ViewAccess(next http.HandlerFunc) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		claims, err := authtypes.ClaimsFromContext(req.Context())
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		if err := claims.IsViewer(); err != nil {
-			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
-			render.Error(rw, err)
-			return
-		}
-
-		next(rw, req)
-	})
-}
-
-func (middleware *AuthZ) EditAccess(next http.HandlerFunc) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		claims, err := authtypes.ClaimsFromContext(req.Context())
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		if err := claims.IsEditor(); err != nil {
-			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
-			render.Error(rw, err)
-			return
-		}
-
-		next(rw, req)
-	})
-}
-
-func (middleware *AuthZ) AdminAccess(next http.HandlerFunc) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		claims, err := authtypes.ClaimsFromContext(req.Context())
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		if err := claims.IsAdmin(); err != nil {
-			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
-			render.Error(rw, err)
-			return
-		}
-
-		next(rw, req)
-	})
-}
-
-func (middleware *AuthZ) SelfAccess(next http.HandlerFunc) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		claims, err := authtypes.ClaimsFromContext(req.Context())
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		id := mux.Vars(req)["id"]
-		if err := claims.IsSelfAccess(id); err != nil {
-			middleware.logger.WarnContext(req.Context(), authzDeniedMessage, "claims", claims)
-			render.Error(rw, err)
-			return
-		}
-
-		next(rw, req)
-	})
-}
-
-func (middleware *AuthZ) OpenAccess(next http.HandlerFunc) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		next(rw, req)
-	})
-}
-
-// Check middleware accepts the relation, typeable, parentTypeable (for direct access + group relations) and a callback function to derive selector and parentSelectors on per request basis.
-func (middleware *AuthZ) Check(next http.HandlerFunc, relation authtypes.Relation, translation authtypes.Relation, typeable authtypes.Typeable, parentTypeable authtypes.Typeable, cb authtypes.SelectorCallbackFn) http.HandlerFunc {
-	return http.HandlerFunc(func(rw http.ResponseWriter, req *http.Request) {
-		claims, err := authtypes.ClaimsFromContext(req.Context())
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		selector, parentSelectors, err := cb(req)
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		err = middleware.authzService.CheckWithTupleCreation(req.Context(), claims, relation, typeable, selector, parentTypeable, parentSelectors...)
-		if err != nil {
-			render.Error(rw, err)
-			return
-		}
-
-		next(rw, req)
-	})
-}

ee/query-service/app/server.go

@@ -8,8 +8,6 @@ import (
 	"net/http"
 	_ "net/http/pprof" // http profiler
 
-	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
-
 	"github.com/gorilla/handlers"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
@@ -46,6 +44,19 @@ import (
 	"go.uber.org/zap"
 )
 
+type ServerOptions struct {
+	Config                     signoz.Config
+	SigNoz                     *signoz.SigNoz
+	HTTPHostPort               string
+	PrivateHostPort            string
+	PreferSpanMetrics          bool
+	FluxInterval               string
+	FluxIntervalForTraceDetail string
+	Cluster                    string
+	GatewayUrl                 string
+	Jwt                        *authtypes.JWT
+}
+
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
 	config      signoz.Config
@@ -58,6 +69,11 @@ type Server struct {
 	httpServer   *http.Server
 	httpHostPort string
 
+	// private http
+	privateConn     net.Listener
+	privateHTTP     *http.Server
+	privateHostPort string
+
 	opampServer *opamp.Server
 
 	// Usage manager
@@ -167,6 +183,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		jwt:                jwt,
 		ruleManager:        rm,
 		httpHostPort:       baseconst.HTTPHostPort,
+		privateHostPort:    baseconst.PrivateHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
 	}
@@ -179,6 +196,13 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 
 	s.httpServer = httpServer
 
+	privateServer, err := s.createPrivateServer(apiHandler)
+	if err != nil {
+		return nil, err
+	}
+
+	s.privateHTTP = privateServer
+
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
@@ -191,6 +215,36 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 	return s.unavailableChannel
 }
 
+func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server, error) {
+	r := baseapp.NewRouter()
+
+	r.Use(middleware.NewAuth(s.jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
+	).Wrap)
+	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
+
+	apiHandler.RegisterPrivateRoutes(r)
+
+	c := cors.New(cors.Options{
+		//todo(amol): find out a way to add exact domain or
+		// ip here for alert manager
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
+	})
+
+	handler := c.Handler(r)
+	handler = handlers.CompressHandler(handler)
+
+	return &http.Server{
+		Handler: handler,
+	}, nil
+}
+
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
 	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
@@ -256,6 +310,19 @@ func (s *Server) initListeners() error {
 
 	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
 
+	// listen on private port to support internal services
+	privateHostPort := s.privateHostPort
+
+	if privateHostPort == "" {
+		return fmt.Errorf("baseconst.PrivateHostPort is required")
+	}
+
+	s.privateConn, err = net.Listen("tcp", privateHostPort)
+	if err != nil {
+		return err
+	}
+	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.privateHostPort))
+
 	return nil
 }
 
@@ -294,6 +361,26 @@ func (s *Server) Start(ctx context.Context) error {
 		}
 	}()
 
+	var privatePort int
+	if port, err := utils.GetPort(s.privateConn.Addr()); err == nil {
+		privatePort = port
+	}
+
+	go func() {
+		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.privateHostPort))
+
+		switch err := s.privateHTTP.Serve(s.privateConn); err {
+		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
+			// normal exit, nothing to do
+			zap.L().Info("private http server closed")
+		default:
+			zap.L().Error("Could not start private HTTP server", zap.Error(err))
+		}
+
+		s.unavailableChannel <- healthcheck.Unavailable
+
+	}()
+
 	go func() {
 		zap.L().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
 		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
@@ -313,6 +400,12 @@ func (s *Server) Stop(ctx context.Context) error {
 		}
 	}
 
+	if s.privateHTTP != nil {
+		if err := s.privateHTTP.Shutdown(ctx); err != nil {
+			return err
+		}
+	}
+
 	s.opampServer.Stop()
 
 	if s.ruleManager != nil {
@@ -336,8 +429,6 @@ func makeRulesManager(
 	querier querier.Querier,
 	logger *slog.Logger,
 ) (*baserules.Manager, error) {
-	ruleStore := sqlrulestore.NewRuleStore(sqlstore)
-	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
 	managerOpts := &baserules.ManagerOptions{
 		TelemetryStore:      telemetryStore,
@@ -352,10 +443,8 @@ func makeRulesManager(
 		PrepareTaskFunc:     rules.PrepareTaskFunc,
 		PrepareTestRuleFunc: rules.TestNotification,
 		Alertmanager:        alertmanager,
+		SQLStore:            sqlstore,
 		OrgGetter:           orgGetter,
-		RuleStore:           ruleStore,
-		MaintenanceStore:    maintenanceStore,
-		SqlStore:            sqlstore,
 	}
 
 	// create Manager

ee/query-service/constants/constants.go

@@ -40,7 +40,7 @@ var IsDotMetricsEnabled = false
 var IsPreferSpanMetrics = false
 
 func init() {
-	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
+	if GetOrDefaultEnv(DotMetricsEnabled, "false") == "true" {
 		IsDotMetricsEnabled = true
 	}
 

ee/query-service/rules/anomaly.go

@@ -35,6 +35,7 @@ import (
 	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	yaml "gopkg.in/yaml.v2"
 )
 
 const (
@@ -166,9 +167,16 @@ func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) (*v3.
 		ctx, "prepare query range request v4", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds(),
 	)
 
-	st, en := r.Timestamps(ts)
-	start := st.UnixMilli()
-	end := en.UnixMilli()
+	start := ts.Add(-time.Duration(r.EvalWindow())).UnixMilli()
+	end := ts.UnixMilli()
+
+	if r.EvalDelay() > 0 {
+		start = start - int64(r.EvalDelay().Milliseconds())
+		end = end - int64(r.EvalDelay().Milliseconds())
+	}
+	// round to minute otherwise we could potentially miss data
+	start = start - (start % (60 * 1000))
+	end = end - (end % (60 * 1000))
 
 	compositeQuery := r.Condition().CompositeQuery
 
@@ -245,17 +253,10 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
 	for _, series := range queryResult.AnomalyScores {
-		if r.Condition() != nil && r.Condition().RequireMinPoints {
-			if len(series.Points) < r.Condition().RequiredNumPoints {
-				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
-				continue
-			}
+		smpl, shouldAlert := r.ShouldAlert(*series)
+		if shouldAlert {
+			resultVector = append(resultVector, smpl)
 		}
-		results, err := r.Threshold.ShouldAlert(*series)
-		if err != nil {
-			return nil, err
-		}
-		resultVector = append(resultVector, results...)
 	}
 	return resultVector, nil
 }
@@ -295,17 +296,10 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
 	for _, series := range queryResult.AnomalyScores {
-		if r.Condition().RequireMinPoints {
-			if len(series.Points) < r.Condition().RequiredNumPoints {
-				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
-				continue
-			}
+		smpl, shouldAlert := r.ShouldAlert(*series)
+		if shouldAlert {
+			resultVector = append(resultVector, smpl)
 		}
-		results, err := r.Threshold.ShouldAlert(*series)
-		if err != nil {
-			return nil, err
-		}
-		resultVector = append(resultVector, results...)
 	}
 	return resultVector, nil
 }
@@ -505,7 +499,7 @@ func (r *AnomalyRule) String() string {
 		PreferredChannels: r.PreferredChannels(),
 	}
 
-	byt, err := json.Marshal(ar)
+	byt, err := yaml.Marshal(ar)
 	if err != nil {
 		return fmt.Sprintf("error marshaling alerting rule: %s", err.Error())
 	}

ee/query-service/rules/manager.go

@@ -3,10 +3,8 @@ package rules
 import (
 	"context"
 	"fmt"
-
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/errors"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
@@ -22,10 +20,6 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	var task baserules.Task
 
 	ruleId := baserules.RuleIdFromTaskName(opts.TaskName)
-	evaluation, err := opts.Rule.Evaluation.GetEvaluation()
-	if err != nil {
-		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "evaluation is invalid: %v", err)
-	}
 	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
@@ -46,7 +40,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)
 
 		// create ch rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {
 
@@ -68,7 +62,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)
 
 		// create promql rule task for evalution
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -90,7 +84,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)
 
 		// create anomaly rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
 		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)

frontend/.cursorrules

@@ -1,484 +0,0 @@
-# Persona
-You are an expert developer with deep knowledge of Jest, React Testing Library, MSW, and TypeScript, tasked with creating unit tests for this repository.
-
-# Auto-detect TypeScript Usage
-Check for TypeScript in the project through tsconfig.json or package.json dependencies.
-Adjust syntax based on this detection.
-
-# TypeScript Type Safety for Jest Tests
-**CRITICAL**: All Jest tests MUST be fully type-safe with proper TypeScript types.
-
-**Type Safety Requirements:**
-- Use proper TypeScript interfaces for all mock data
-- Type all Jest mock functions with `jest.MockedFunction<T>`
-- Use generic types for React components and hooks
-- Define proper return types for mock functions
-- Use `as const` for literal types when needed
-- Avoid `any` type – use proper typing instead
-
-# Unit Testing Focus
-Focus on critical functionality (business logic, utility functions, component behavior)
-Mock dependencies (API calls, external modules) before imports
-Test multiple data scenarios (valid inputs, invalid inputs, edge cases)
-Write maintainable tests with descriptive names grouped in describe blocks
-
-# Global vs Local Mocks
-**Use Global Mocks for:**
-- High-frequency dependencies (20+ test files)
-- Core infrastructure (react-router-dom, react-query, antd)
-- Standard implementations across the app
-- Browser APIs (ResizeObserver, matchMedia, localStorage)
-- Utility libraries (date-fns, lodash)
-
-**Use Local Mocks for:**
-- Business logic dependencies (5-15 test files)
-- Test-specific behavior (different data per test)
-- API endpoints with specific responses
-- Domain-specific components
-- Error scenarios and edge cases
-
-**Global Mock Files Available (from jest.config.ts):**
-- `uplot` → `__mocks__/uplotMock.ts`
-
-# Repo-specific Testing Conventions
-
-## Imports
-Always import from our harness:
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-```
-For API mocks:
-```ts
-import { server, rest } from 'mocks-server/server';
-```
-Do not import directly from `@testing-library/react`.
-
-## Router
-Use the router built into render:
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-Only mock `useLocation` / `useParams` if the test depends on them.
-
-## Hook Mocks
-Pattern:
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */ as any);
-```
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## MSW
-Global MSW server runs automatically.
-Override per-test:
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-Keep large responses in `mocks-server/__mockdata_`.
-
-## Interactions
-- Prefer `userEvent` for real user interactions (click, type, select, tab).
-- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
-- Always await interactions:
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-```ts
-// Example: virtualized list scroll (no userEvent helper)
-const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
-scroller.scrollTop = targetScrollTop;
-act(() => { fireEvent.scroll(scroller); });
-```
-
-## Timers
-❌ No global fake timers.
-✅ Per-test only, for debounce/throttle:
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`).
-Fallback: visible text.
-Last resort: `data-testid`.
-
-# Example Test (using only configured global mocks)
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# Best Practices
-- **Critical Functionality**: Prioritize testing business logic and utilities
-- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
-- **Data Scenarios**: Always test valid, invalid, and edge cases
-- **Descriptive Names**: Make test intent clear
-- **Organization**: Group related tests in describe
-- **Consistency**: Match repo conventions
-- **Edge Cases**: Test null, undefined, unexpected values
-- **Limit Scope**: 3–5 focused tests per file
-- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
-- **No Any**: Enforce type safety
-
-# Example Test
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-    server.use(
-      rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 })))
-    );
-
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
-
-# Anti-patterns
-❌ Importing RTL directly
-❌ Using global fake timers
-❌ Wrapping render in `act(...)`
-❌ Mocking infra dependencies locally (router, react-query)
-✅ Use our harness (`tests/test-utils`)
-✅ Use MSW for API overrides
-✅ Use userEvent + await
-✅ Pin time only in tests that assert relative dates
-
-# TypeScript Type Safety Examples
-
-## Proper Mock Typing
-```ts
-// ✅ GOOD - Properly typed mocks
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-interface ApiResponse<T> {
-  data: T;
-  status: number;
-  message: string;
-}
-
-// Type the mock functions
-const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
-const mockUpdateUser = jest.fn() as jest.MockedFunction<(user: User) => Promise<ApiResponse<User>>>;
-
-// Mock implementation with proper typing
-mockFetchUser.mockResolvedValue({
-  data: { id: 1, name: 'John Doe', email: 'john@example.com' },
-  status: 200,
-  message: 'Success'
-});
-
-// ❌ BAD - Using any type
-const mockFetchUser = jest.fn() as any; // Don't do this
-```
-
-## React Component Testing with Types
-```ts
-// ✅ GOOD - Properly typed component testing
-interface ComponentProps {
-  title: string;
-  data: User[];
-  onUserSelect: (user: User) => void;
-  isLoading?: boolean;
-}
-
-const TestComponent: React.FC<ComponentProps> = ({ title, data, onUserSelect, isLoading = false }) => {
-  // Component implementation
-};
-
-describe('TestComponent', () => {
-  it('should render with proper props', () => {
-    // Arrange - Type the props properly
-    const mockProps: ComponentProps = {
-      title: 'Test Title',
-      data: [{ id: 1, name: 'John', email: 'john@example.com' }],
-      onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-      isLoading: false
-    };
-    
-    // Act
-    render(<TestComponent {...mockProps} />);
-    
-    // Assert
-    expect(screen.getByText('Test Title')).toBeInTheDocument();
-  });
-});
-```
-
-## Hook Testing with Types
-```ts
-// ✅ GOOD - Properly typed hook testing
-interface UseUserDataReturn {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
-const useUserData = (id: number): UseUserDataReturn => {
-  // Hook implementation
-};
-
-describe('useUserData', () => {
-  it('should return user data with proper typing', () => {
-    // Arrange
-    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-    mockFetchUser.mockResolvedValue({
-      data: mockUser,
-      status: 200,
-      message: 'Success'
-    });
-    
-    // Act
-    const { result } = renderHook(() => useUserData(1));
-    
-    // Assert
-    expect(result.current.user).toEqual(mockUser);
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-## Global Mock Type Safety
-```ts
-// ✅ GOOD - Type-safe global mocks
-// In __mocks__/routerMock.ts
-export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
-  pathname: '/traces',
-  search: '',
-  hash: '',
-  state: null,
-  key: 'test-key',
-  ...overrides,
-});
-
-// In test files
-const location = useLocation(); // Properly typed from global mock
-expect(location.pathname).toBe('/traces');
-```
-
-# TypeScript Configuration for Jest
-
-## Required Jest Configuration
-```json
-// jest.config.ts
-{
-  "preset": "ts-jest/presets/js-with-ts-esm",
-  "globals": {
-    "ts-jest": {
-      "useESM": true,
-      "isolatedModules": true,
-      "tsconfig": "<rootDir>/tsconfig.jest.json"
-    }
-  },
-  "extensionsToTreatAsEsm": [".ts", ".tsx"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
-}
-```
-
-## TypeScript Jest Configuration
-```json
-// tsconfig.jest.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": ["jest", "@testing-library/jest-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
-  },
-  "include": [
-    "src/**/*",
-    "**/*.test.ts",
-    "**/*.test.tsx",
-    "__mocks__/**/*"
-  ]
-}
-```
-
-## Common Type Safety Patterns
-
-### Mock Function Typing
-```ts
-// ✅ GOOD - Proper mock function typing
-const mockApiCall = jest.fn() as jest.MockedFunction<typeof apiCall>;
-const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
-
-// ❌ BAD - Using any
-const mockApiCall = jest.fn() as any;
-```
-
-### Generic Mock Typing
-```ts
-// ✅ GOOD - Generic mock typing
-interface MockApiResponse<T> {
-  data: T;
-  status: number;
-}
-
-const mockFetchData = jest.fn() as jest.MockedFunction<
-  <T>(endpoint: string) => Promise<MockApiResponse<T>>
->;
-
-// Usage
-mockFetchData<User>('/users').mockResolvedValue({
-  data: { id: 1, name: 'John' },
-  status: 200
-});
-```
-
-### React Testing Library with Types
-```ts
-// ✅ GOOD - Typed testing utilities
-import { render, screen, RenderResult } from '@testing-library/react';
-import { ComponentProps } from 'react';
-
-type TestComponentProps = ComponentProps<typeof TestComponent>;
-
-const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
-  const defaultProps: TestComponentProps = {
-    title: 'Test',
-    data: [],
-    onSelect: jest.fn(),
-    ...props
-  };
-  
-  return render(<TestComponent {...defaultProps} />);
-};
-```
-
-### Error Handling with Types
-```ts
-// ✅ GOOD - Typed error handling
-interface ApiError {
-  message: string;
-  code: number;
-  details?: Record<string, unknown>;
-}
-
-const mockApiError: ApiError = {
-  message: 'API Error',
-  code: 500,
-  details: { endpoint: '/users' }
-};
-
-mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
-```
-
-## Type Safety Checklist
-- [ ] All mock functions use `jest.MockedFunction<T>`
-- [ ] All mock data has proper interfaces
-- [ ] No `any` types in test files
-- [ ] Generic types are used where appropriate
-- [ ] Error types are properly defined
-- [ ] Component props are typed
-- [ ] Hook return types are defined
-- [ ] API response types are defined
-- [ ] Global mocks are type-safe
-- [ ] Test utilities are properly typed
-
-# Mock Decision Tree
-```
-Is it used in 20+ test files?
-├─ YES → Use Global Mock
-│   ├─ react-router-dom
-│   ├─ react-query
-│   ├─ antd components
-│   └─ browser APIs
-│
-└─ NO → Is it business logic?
-    ├─ YES → Use Local Mock
-    │   ├─ API endpoints
-    │   ├─ Custom hooks
-    │   └─ Domain components
-    │
-    └─ NO → Is it test-specific?
-        ├─ YES → Use Local Mock
-        │   ├─ Error scenarios
-        │   ├─ Loading states
-        │   └─ Specific data
-        │
-        └─ NO → Consider Global Mock
-            └─ If it becomes frequently used
-```
-
-# Common Anti-Patterns to Avoid
-
-❌ **Don't mock global dependencies locally:**
-```js
-// BAD - This is already globally mocked
-jest.mock('react-router-dom', () => ({ ... }));
-```
-
-❌ **Don't create global mocks for test-specific data:**
-```js
-// BAD - This should be local
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => specificTestData)
-}));
-```
-
-✅ **Do use global mocks for infrastructure:**
-```js
-// GOOD - Use global mock
-import { useLocation } from 'react-router-dom';
-```
-
-✅ **Do create local mocks for business logic:**
-```js
-// GOOD - Local mock for specific test needs
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData)
-}));
-```

frontend/.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 build
 *.typegen.ts
-i18-generate-hash.js
-src/parser/TraceOperatorParser/**
+i18-generate-hash.js

frontend/.prettierignore

@@ -10,6 +10,4 @@ public/
 **/*.json
 
 # Ignore all files in parser folder:
-src/parser/**
-
-src/TraceOperator/parser/**
+src/parser/**

frontend/__mocks__/uplotMock.ts

@@ -1,51 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// Mock for uplot library used in tests
-export interface MockUPlotInstance {
-	setData: jest.Mock;
-	setSize: jest.Mock;
-	destroy: jest.Mock;
-	redraw: jest.Mock;
-	setSeries: jest.Mock;
-}
-
-export interface MockUPlotPaths {
-	spline: jest.Mock;
-	bars: jest.Mock;
-}
-
-// Create mock instance methods
-const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: jest.fn(),
-	setSize: jest.fn(),
-	destroy: jest.fn(),
-	redraw: jest.fn(),
-	setSeries: jest.fn(),
-});
-
-// Create mock paths
-const mockPaths: MockUPlotPaths = {
-	spline: jest.fn(),
-	bars: jest.fn(),
-};
-
-// Mock static methods
-const mockTzDate = jest.fn(
-	(date: Date, _timezone: string) => new Date(date.getTime()),
-);
-
-// Mock uPlot constructor - this needs to be a proper constructor function
-function MockUPlot(
-	_options: unknown,
-	_data: unknown,
-	_target: HTMLElement,
-): MockUPlotInstance {
-	return createMockUPlotInstance();
-}
-
-// Add static methods to the constructor
-MockUPlot.tzDate = mockTzDate;
-MockUPlot.paths = mockPaths;
-
-// Export the constructor as default
-export default MockUPlot;

frontend/__mocks__/useSafeNavigate.ts

@@ -1,29 +0,0 @@
-// Mock for useSafeNavigate hook to avoid React Router version conflicts in tests
-interface SafeNavigateOptions {
-	replace?: boolean;
-	state?: unknown;
-}
-
-interface SafeNavigateTo {
-	pathname?: string;
-	search?: string;
-	hash?: string;
-}
-
-type SafeNavigateToType = string | SafeNavigateTo;
-
-interface UseSafeNavigateReturn {
-	safeNavigate: jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>;
-}
-
-export const useSafeNavigate = (): UseSafeNavigateReturn => ({
-	safeNavigate: jest.fn(
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => {
-			console.log(`Mock safeNavigate called with:`, to, options);
-		},
-	) as jest.MockedFunction<
-		(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
-	>,
-});

frontend/jest.config.ts

@@ -1,7 +1,5 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
-
 const config: Config.InitialOptions = {
 	clearMocks: true,
 	coverageDirectory: 'coverage',
@@ -12,10 +10,6 @@ const config: Config.InitialOptions = {
 	moduleNameMapper: {
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
-		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
-		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
-		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],

frontend/package.json

@@ -44,13 +44,10 @@
 		"@sentry/react": "8.41.0",
 		"@sentry/webpack-plugin": "2.22.6",
 		"@signozhq/badge": "0.0.2",
-		"@signozhq/button": "0.0.2",
 		"@signozhq/calendar": "0.0.0",
-		"@signozhq/callout": "0.0.2",
 		"@signozhq/design-tokens": "1.1.4",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
-		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/table": "0.3.7",
 		"@signozhq/tooltip": "0.0.2",
@@ -139,7 +136,6 @@
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"rehype-raw": "7.0.0",
-		"rrule": "2.8.1",
 		"stream": "^0.0.2",
 		"style-loader": "1.3.0",
 		"styled-components": "^5.3.11",
@@ -278,7 +274,6 @@
 		"serialize-javascript": "6.0.2",
 		"prismjs": "1.30.0",
 		"got": "11.8.5",
-		"form-data": "4.0.4",
-		"brace-expansion": "^2.0.2"
+		"form-data": "4.0.4"
 	}
 }

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -16,7 +16,6 @@ describe('getFieldKeys API', () => {
 	});
 
 	const mockSuccessResponse = {
-		status: 200,
 		data: {
 			status: 'success',
 			data: {
@@ -58,7 +57,6 @@ describe('getFieldKeys API', () => {
 	it('should call API with name parameter when provided', async () => {
 		// Mock successful API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -80,7 +78,6 @@ describe('getFieldKeys API', () => {
 	it('should call API with both signal and name when provided', async () => {
 		// Mock successful API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -106,10 +103,12 @@ describe('getFieldKeys API', () => {
 		// Call the function
 		const result = await getFieldKeys('traces');
 
-		// Verify the returned structure matches SuccessResponseV2 format
+		// Verify the returned structure matches our expected format
 		expect(result).toEqual({
-			httpStatusCode: 200,
-			data: mockSuccessResponse.data.data,
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: mockSuccessResponse.data.data,
 		});
 	});
 });

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -18,7 +18,6 @@ describe('getFieldValues API', () => {
 	it('should call the API with correct parameters (no options)', async () => {
 		// Mock API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -42,7 +41,6 @@ describe('getFieldValues API', () => {
 	it('should call the API with signal parameter', async () => {
 		// Mock API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -66,7 +64,6 @@ describe('getFieldValues API', () => {
 	it('should call the API with name parameter', async () => {
 		// Mock API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -90,7 +87,6 @@ describe('getFieldValues API', () => {
 	it('should call the API with value parameter', async () => {
 		// Mock API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -107,14 +103,13 @@ describe('getFieldValues API', () => {
 
 		// Verify API was called with value parameter
 		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
-			params: { name: 'service.name', searchText: 'front' },
+			params: { name: 'service.name', value: 'front' },
 		});
 	});
 
 	it('should call the API with time range parameters', async () => {
 		// Mock API response
 		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -151,7 +146,6 @@ describe('getFieldValues API', () => {
 	it('should normalize the response values', async () => {
 		// Mock API response with multiple value types
 		const mockResponse = {
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -171,19 +165,18 @@ describe('getFieldValues API', () => {
 		const result = await getFieldValues('traces', 'mixed.values');
 
 		// Verify the response has normalized values array
-		expect(result.data?.normalizedValues).toContain('frontend');
-		expect(result.data?.normalizedValues).toContain('backend');
-		expect(result.data?.normalizedValues).toContain('200');
-		expect(result.data?.normalizedValues).toContain('404');
-		expect(result.data?.normalizedValues).toContain('true');
-		expect(result.data?.normalizedValues).toContain('false');
-		expect(result.data?.normalizedValues?.length).toBe(6);
+		expect(result.payload?.normalizedValues).toContain('frontend');
+		expect(result.payload?.normalizedValues).toContain('backend');
+		expect(result.payload?.normalizedValues).toContain('200');
+		expect(result.payload?.normalizedValues).toContain('404');
+		expect(result.payload?.normalizedValues).toContain('true');
+		expect(result.payload?.normalizedValues).toContain('false');
+		expect(result.payload?.normalizedValues?.length).toBe(6);
 	});
 
 	it('should return a properly formatted success response', async () => {
 		// Create mock response
 		const mockApiResponse = {
-			status: 200,
 			data: {
 				status: 'success',
 				data: {
@@ -201,10 +194,12 @@ describe('getFieldValues API', () => {
 		// Call the function
 		const result = await getFieldValues('traces', 'service.name');
 
-		// Verify the returned structure matches SuccessResponseV2 format
+		// Verify the returned structure
 		expect(result).toEqual({
-			httpStatusCode: 200,
-			data: expect.objectContaining({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: expect.objectContaining({
 				values: expect.any(Object),
 				normalizedValues: expect.any(Array),
 				complete: true,

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,7 +1,5 @@
 import { ApiBaseInstance } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
 
 /**
@@ -12,7 +10,7 @@ import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
 export const getFieldKeys = async (
 	signal?: 'traces' | 'logs' | 'metrics',
 	name?: string,
-): Promise<SuccessResponseV2<FieldKeyResponse>> => {
+): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
 	const params: Record<string, string> = {};
 
 	if (signal) {
@@ -23,16 +21,14 @@ export const getFieldKeys = async (
 		params.name = encodeURIComponent(name);
 	}
 
-	try {
-		const response = await ApiBaseInstance.get('/fields/keys', { params });
+	const response = await ApiBaseInstance.get('/fields/keys', { params });
 
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,8 +1,5 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import { ApiBaseInstance } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 
 /**
@@ -10,7 +7,6 @@ import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
  * @param signal Type of signal (traces, logs, metrics)
  * @param name Name of the attribute for which values are being fetched
  * @param value Optional search text
- * @param existingQuery Optional existing query - across all present dynamic variables
  */
 export const getFieldValues = async (
 	signal?: 'traces' | 'logs' | 'metrics',
@@ -19,7 +15,7 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
-): Promise<SuccessResponseV2<FieldValueResponse>> => {
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
 	const params: Record<string, string> = {};
 
 	if (signal) {
@@ -46,42 +42,39 @@ export const getFieldValues = async (
 		params.existingQuery = existingQuery;
 	}
 
-	try {
-		const response = await ApiBaseInstance.get('/fields/values', { params });
+	const response = await ApiBaseInstance.get('/fields/values', { params });
 
-		// Normalize values from different types (stringValues, boolValues, etc.)
-		if (response.data?.data?.values) {
-			const allValues: string[] = [];
-			Object.entries(response.data?.data?.values).forEach(
-				([key, valueArray]: [string, any]) => {
-					// Skip RelatedValues as they should be kept separate
-					if (key === 'relatedValues') {
-						return;
-					}
+	// Normalize values from different types (stringValues, boolValues, etc.)
+	if (response.data?.data?.values) {
+		const allValues: string[] = [];
+		Object.entries(response.data.data.values).forEach(
+			([key, valueArray]: [string, any]) => {
+				// Skip RelatedValues as they should be kept separate
+				if (key === 'relatedValues') {
+					return;
+				}
 
-					if (Array.isArray(valueArray)) {
-						allValues.push(...valueArray.map(String));
-					}
-				},
-			);
+				if (Array.isArray(valueArray)) {
+					allValues.push(...valueArray.map(String));
+				}
+			},
+		);
 
-			// Add a normalized values array to the response
-			response.data.data.normalizedValues = allValues;
+		// Add a normalized values array to the response
+		response.data.data.normalizedValues = allValues;
 
-			// Add relatedValues to the response as per FieldValueResponse
-			if (response.data?.data?.values?.relatedValues) {
-				response.data.data.relatedValues =
-					response.data?.data?.values?.relatedValues;
-			}
+		// Add relatedValues to the response as per FieldValueResponse
+		if (response.data.data.values.relatedValues) {
+			response.data.data.relatedValues = response.data.data.values.relatedValues;
 		}
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default getFieldValues;

frontend/src/api/v1/download/downloadExportData.ts

@@ -1,64 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp } from 'types/api';
-import { ExportRawDataProps } from 'types/api/exportRawData/getExportRawData';
-
-export const downloadExportData = async (
-	props: ExportRawDataProps,
-): Promise<void> => {
-	try {
-		const queryParams = new URLSearchParams();
-
-		queryParams.append('start', String(props.start));
-		queryParams.append('end', String(props.end));
-		queryParams.append('filter', props.filter);
-		props.columns.forEach((col) => {
-			queryParams.append('columns', col);
-		});
-		queryParams.append('order_by', props.orderBy);
-		queryParams.append('limit', String(props.limit));
-		queryParams.append('format', props.format);
-
-		const response = await axios.get<Blob>(`export_raw_data?${queryParams}`, {
-			responseType: 'blob', // Important: tell axios to handle response as blob
-			decompress: true, // Enable automatic decompression
-			headers: {
-				Accept: 'application/octet-stream', // Tell server we expect binary data
-			},
-			timeout: 0,
-		});
-
-		// Only proceed if the response status is 200
-		if (response.status !== 200) {
-			throw new Error(
-				`Failed to download data: server returned status ${response.status}`,
-			);
-		}
-		// Create blob URL from response data
-		const blob = new Blob([response.data], { type: 'application/octet-stream' });
-		const url = window.URL.createObjectURL(blob);
-
-		// Create and configure download link
-		const link = document.createElement('a');
-		link.href = url;
-
-		// Get filename from Content-Disposition header or generate timestamped default
-		const filename =
-			response.headers['content-disposition']
-				?.split('filename=')[1]
-				?.replace(/["']/g, '') || `exported_data.${props.format || 'txt'}`;
-
-		link.setAttribute('download', filename);
-
-		// Trigger download
-		document.body.appendChild(link);
-		link.click();
-		link.remove();
-		URL.revokeObjectURL(url);
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default downloadExportData;

frontend/src/api/v1/login/loginPrecheck.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { Props, Signup as PayloadProps } from 'types/api/user/loginPrecheck';
+import { PayloadProps, Props } from 'types/api/user/loginPrecheck';
 
 const loginPrecheck = async (
 	props: Props,

frontend/src/api/v1/register/signup.ts

@@ -1,21 +1,25 @@
 import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Signup } from 'types/api/user/loginPrecheck';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps } from 'types/api/user/loginPrecheck';
 import { Props } from 'types/api/user/signup';
 
-const signup = async (props: Props): Promise<SuccessResponseV2<Signup>> => {
+const signup = async (
+	props: Props,
+): Promise<SuccessResponse<null | PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post<PayloadProps>(`/register`, {
+		const response = await axios.post(`/register`, {
 			...props,
 		});
 		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data?.data,
 		};
 	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		return ErrorResponseHandler(error as AxiosError);
 	}
 };
 

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

@@ -92,7 +92,6 @@ describe('prepareQueryRangePayloadV5', () => {
 				builder: {
 					queryData: [baseBuilderQuery()],
 					queryFormulas: [baseFormula()],
-					queryTraceOperator: [],
 				},
 			},
 			graphType: PANEL_TYPES.TIME_SERIES,
@@ -216,7 +215,7 @@ describe('prepareQueryRangePayloadV5', () => {
 					},
 				],
 				clickhouse_sql: [],
-				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+				builder: { queryData: [], queryFormulas: [] },
 			},
 			graphType: PANEL_TYPES.TIME_SERIES,
 			originalGraphType: PANEL_TYPES.TABLE,
@@ -287,7 +286,7 @@ describe('prepareQueryRangePayloadV5', () => {
 						legend: 'LC',
 					},
 				],
-				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+				builder: { queryData: [], queryFormulas: [] },
 			},
 			graphType: PANEL_TYPES.TABLE,
 			selectedTime: 'GLOBAL_TIME',
@@ -346,7 +345,7 @@ describe('prepareQueryRangePayloadV5', () => {
 				unit: undefined,
 				promql: [],
 				clickhouse_sql: [],
-				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+				builder: { queryData: [], queryFormulas: [] },
 			},
 			graphType: PANEL_TYPES.TIME_SERIES,
 			selectedTime: 'GLOBAL_TIME',
@@ -387,7 +386,6 @@ describe('prepareQueryRangePayloadV5', () => {
 				builder: {
 					queryData: [baseBuilderQuery()],
 					queryFormulas: [],
-					queryTraceOperator: [],
 				},
 			},
 			graphType: PANEL_TYPES.TABLE,
@@ -461,7 +459,6 @@ describe('prepareQueryRangePayloadV5', () => {
 				builder: {
 					queryData: [logsQuery],
 					queryFormulas: [],
-					queryTraceOperator: [],
 				},
 			},
 			graphType: PANEL_TYPES.LIST,
@@ -575,7 +572,6 @@ describe('prepareQueryRangePayloadV5', () => {
 						},
 					],
 					queryFormulas: [],
-					queryTraceOperator: [],
 				},
 			},
 			graphType: PANEL_TYPES.TIME_SERIES,

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

@@ -1,15 +1,11 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable sonarjs/no-identical-functions */
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import {
 	BaseBuilderQuery,
 	FieldContext,
@@ -337,109 +333,6 @@ export function convertBuilderQueriesToV5(
 	);
 }
 
-function createTraceOperatorBaseSpec(
-	queryData: IBuilderTraceOperator,
-	requestType: RequestType,
-	panelType?: PANEL_TYPES,
-): BaseBuilderQuery {
-	const nonEmptySelectColumns = (queryData.selectColumns as (
-		| BaseAutocompleteData
-		| TelemetryFieldKey
-	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
-
-	const {
-		stepInterval,
-		groupBy,
-		limit,
-		offset,
-		legend,
-		having,
-		orderBy,
-		pageSize,
-	} = queryData;
-
-	return {
-		stepInterval: stepInterval || undefined,
-		groupBy:
-			groupBy?.length > 0
-				? groupBy.map(
-						(item: any): GroupByKey => ({
-							name: item.key,
-							fieldDataType: item?.dataType,
-							fieldContext: item?.type,
-							description: item?.description,
-							unit: item?.unit,
-							signal: item?.signal,
-							materialized: item?.materialized,
-						}),
-				  )
-				: undefined,
-		limit:
-			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
-				? limit || pageSize || undefined
-				: limit || undefined,
-		offset: requestType === 'raw' || requestType === 'trace' ? offset : undefined,
-		order:
-			orderBy?.length > 0
-				? orderBy.map(
-						(order: any): OrderBy => ({
-							key: {
-								name: order.columnName,
-							},
-							direction: order.order,
-						}),
-				  )
-				: undefined,
-		legend: isEmpty(legend) ? undefined : legend,
-		having: isEmpty(having) ? undefined : (having as Having),
-		selectFields: isEmpty(nonEmptySelectColumns)
-			? undefined
-			: nonEmptySelectColumns?.map(
-					(column: any): TelemetryFieldKey => ({
-						name: column.name ?? column.key,
-						fieldDataType:
-							column?.fieldDataType ?? (column?.dataType as FieldDataType),
-						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
-						signal: column?.signal ?? undefined,
-					}),
-			  ),
-	};
-}
-
-export function convertTraceOperatorToV5(
-	traceOperator: Record<string, IBuilderTraceOperator>,
-	requestType: RequestType,
-	panelType?: PANEL_TYPES,
-): QueryEnvelope[] {
-	return Object.entries(traceOperator).map(
-		([queryName, traceOperatorData]): QueryEnvelope => {
-			const baseSpec = createTraceOperatorBaseSpec(
-				traceOperatorData,
-				requestType,
-				panelType,
-			);
-
-			// Skip aggregation for raw request type
-			const aggregations =
-				requestType === 'raw'
-					? undefined
-					: createAggregation(traceOperatorData, panelType);
-
-			const spec: QueryEnvelope['spec'] = {
-				name: queryName,
-				...baseSpec,
-				expression: traceOperatorData.expression || '',
-				aggregations: aggregations as TraceAggregation[],
-			};
-
-			return {
-				type: 'builder_trace_operator' as QueryType,
-				spec,
-			};
-		},
-	);
-}
-
 /**
  * Converts PromQL queries to V5 format
  */
@@ -522,28 +415,14 @@ export const prepareQueryRangePayloadV5 = ({
 
 	switch (query.queryType) {
 		case EQueryType.QUERY_BUILDER: {
-			const { queryData: data, queryFormulas, queryTraceOperator } = query.builder;
+			const { queryData: data, queryFormulas } = query.builder;
 			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
 			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
 
-			const filteredTraceOperator =
-				queryTraceOperator && queryTraceOperator.length > 0
-					? queryTraceOperator.filter((traceOperator) =>
-							Boolean(traceOperator.expression.trim()),
-					  )
-					: [];
-
-			const currentTraceOperator = mapQueryDataToApi(
-				filteredTraceOperator,
-				'queryName',
-				tableParams,
-			);
-
 			// Combine legend maps
 			legendMap = {
 				...currentQueryData.newLegendMap,
 				...currentFormulas.newLegendMap,
-				...currentTraceOperator.newLegendMap,
 			};
 
 			// Convert builder queries
@@ -576,14 +455,8 @@ export const prepareQueryRangePayloadV5 = ({
 				}),
 			);
 
-			const traceOperatorQueries = convertTraceOperatorToV5(
-				currentTraceOperator.data,
-				requestType,
-				graphType,
-			);
-
-			// Combine all query types
-			queries = [...builderQueries, ...formulaQueries, ...traceOperatorQueries];
+			// Combine both types
+			queries = [...builderQueries, ...formulaQueries];
 			break;
 		}
 		case EQueryType.PROM: {

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -2,28 +2,10 @@
 	position: relative;
 	padding-left: 20px;
 
-	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
-		margin-bottom: 12px;
-	}
-
-	&-content {
-		display: flex;
-		flex-direction: column;
-		gap: 32px;
-	}
-
-	&-section-title {
-		font-size: 14px;
-		line-height: 20px;
-		color: var(--text-vanilla-400, #c0c1c3);
-	}
-
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
 		color: var(--text-vanilla-400, #c0c1c3);
-		display: block;
-		margin-bottom: 12px;
 	}
 
 	&-list {
@@ -99,7 +81,12 @@
 		}
 	}
 
-	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		font-weight: 600;
 		color: var(--text-vanilla-100, #fff);
 	}
@@ -109,8 +96,7 @@
 		line-height: 32px;
 	}
 
-	h2,
-	&-section-title {
+	h2 {
 		font-size: 20px;
 		line-height: 28px;
 	}
@@ -122,7 +108,6 @@
 		overflow: hidden;
 		border-radius: 4px;
 		border: 1px solid var(--bg-slate-400, #1d212d);
-		margin-bottom: 28px;
 	}
 
 	.changelog-media-video {
@@ -139,8 +124,17 @@
 		&-line {
 			background-color: var(--bg-vanilla-300);
 		}
+		li,
+		p {
+			color: var(--text-ink-500);
+		}
 
-		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
 			color: var(--text-ink-500);
 		}
 

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -55,35 +55,33 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 				<div className="inner-ball" />
 			</div>
 			<span className="changelog-release-date">{formattedReleaseDate}</span>
-			<div className="changelog-renderer-content">
-				{changelog.features && changelog.features.length > 0 && (
-					<div className="changelog-renderer-list">
-						{changelog.features.map((feature) => (
-							<div key={feature.id}>
-								<div className="changelog-renderer-section-title">{feature.title}</div>
-								{feature.media && renderMedia(feature.media)}
-								<ReactMarkdown>{feature.description}</ReactMarkdown>
-							</div>
-						))}
-					</div>
-				)}
-				{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
-					<div className="changelog-renderer-bug-fixes">
-						<div className="changelog-renderer-section-title">Bug Fixes</div>
-						{changelog.bug_fixes && (
-							<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
-						)}
-					</div>
-				)}
-				{changelog.maintenance && changelog.maintenance.length > 0 && (
-					<div className="changelog-renderer-maintenance">
-						<div className="changelog-renderer-section-title">Maintenance</div>
-						{changelog.maintenance && (
-							<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
-						)}
-					</div>
-				)}
-			</div>
+			{changelog.features && changelog.features.length > 0 && (
+				<div className="changelog-renderer-list">
+					{changelog.features.map((feature) => (
+						<div key={feature.id}>
+							<h2>{feature.title}</h2>
+							{feature.media && renderMedia(feature.media)}
+							<ReactMarkdown>{feature.description}</ReactMarkdown>
+						</div>
+					))}
+				</div>
+			)}
+			{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
+				<div>
+					<h2>Bug Fixes</h2>
+					{changelog.bug_fixes && (
+						<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
+					)}
+				</div>
+			)}
+			{changelog.maintenance && changelog.maintenance.length > 0 && (
+				<div>
+					<h2>Maintenance</h2>
+					{changelog.maintenance && (
+						<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
+					)}
+				</div>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/timezoneUtils.ts

@@ -119,9 +119,7 @@ const filterAndSortTimezones = (
 			return createTimezoneEntry(normalizedTz, offset);
 		});
 
-export const generateTimezoneData = (
-	includeEtcTimezones = false,
-): Timezone[] => {
+const generateTimezoneData = (includeEtcTimezones = false): Timezone[] => {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const allTimezones = (Intl as any).supportedValuesOf('timeZone');
 	const timezones: Timezone[] = [];

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

@@ -19,6 +19,20 @@ beforeAll(() => {
 	});
 });
 
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
 jest.mock('react-dnd', () => ({
 	useDrop: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),
 	useDrag: jest.fn().mockImplementation(() => [jest.fn(), jest.fn(), jest.fn()]),

frontend/src/components/ErrorModal/ErrorModal.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import APIError from 'types/api/error';
 
 import ErrorModal from './ErrorModal';
@@ -56,8 +56,9 @@ describe('ErrorModal Component', () => {
 
 		// Click the close button
 		const closeButton = screen.getByTestId('close-button');
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		await user.click(closeButton);
+		act(() => {
+			fireEvent.click(closeButton);
+		});
 
 		// Check if onClose was called
 		expect(onCloseMock).toHaveBeenCalledTimes(1);
@@ -148,8 +149,9 @@ it('should open the modal when the trigger component is clicked', async () => {
 
 	// Click the trigger component
 	const triggerButton = screen.getByText('Open Error Modal');
-	const user = userEvent.setup({ pointerEventsCheck: 0 });
-	await user.click(triggerButton);
+	act(() => {
+		fireEvent.click(triggerButton);
+	});
 
 	// Check if the modal is displayed
 	expect(screen.getByText('An error occurred')).toBeInTheDocument();
@@ -168,15 +170,18 @@ it('should close the modal when the onCancel event is triggered', async () => {
 
 	// Click the trigger component
 	const triggerButton = screen.getByText('error');
-	const user = userEvent.setup({ pointerEventsCheck: 0 });
-	await user.click(triggerButton);
+	act(() => {
+		fireEvent.click(triggerButton);
+	});
 
 	await waitFor(() => {
 		expect(screen.getByText('An error occurred')).toBeInTheDocument();
 	});
 
 	// Trigger the onCancel event
-	await user.click(screen.getByTestId('close-button'));
+	act(() => {
+		fireEvent.click(screen.getByTestId('close-button'));
+	});
 
 	// Check if the modal is closed
 	expect(onCloseMock).toHaveBeenCalledTimes(1);

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -125,7 +125,6 @@ export const getHostTracesQueryPayload = (
 				},
 			],
 			queryFormulas: [],
-			queryTraceOperator: [],
 		},
 		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
 		queryType: EQueryType.QUERY_BUILDER,

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -51,7 +51,6 @@ export const getHostLogsQueryPayload = (
 				},
 			],
 			queryFormulas: [],
-			queryTraceOperator: [],
 		},
 		id: uuidv4(),
 		queryType: EQueryType.QUERY_BUILDER,

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -49,7 +49,6 @@ function InputWithLabel({
 				value={inputValue}
 				onChange={handleChange}
 				name={label.toLowerCase()}
-				data-testid={`input-${label}`}
 			/>
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (

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

@@ -208,11 +208,7 @@ function ListLogView({
 				fontSize={fontSize}
 			>
 				<div className="log-line">
-					<LogStateIndicator
-						fontSize={fontSize}
-						severityText={logData.severity_text}
-						severityNumber={logData.severity_number}
-					/>
+					<LogStateIndicator type={logType} fontSize={fontSize} />
 					<div>
 						<LogContainer fontSize={fontSize}>
 							{updatedSelecedFields.some((field) => field.name === 'body') && (

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

@@ -7,6 +7,7 @@
 		height: 100%;
 		width: 3px;
 		border-radius: 50px;
+		background-color: transparent;
 
 		&.small {
 			min-height: 16px;
@@ -20,107 +21,24 @@
 			min-height: 24px;
 		}
 
-		// Severity variant CSS classes using design tokens
-		// Trace variants -
-		&.severity-trace-0 {
-			background-color: var(--bg-forest-600);
-		}
-		&.severity-trace-1 {
-			background-color: var(--bg-forest-500);
-		}
-		&.severity-trace-2 {
-			background-color: var(--bg-forest-400);
-		}
-		&.severity-trace-3 {
-			background-color: var(--bg-forest-300);
-		}
-		&.severity-trace-4 {
-			background-color: var(--bg-forest-200);
-		}
-
-		// Debug variants
-		&.severity-debug-0 {
-			background-color: var(--bg-aqua-600);
-		}
-		&.severity-debug-1 {
-			background-color: var(--bg-aqua-500);
-		}
-		&.severity-debug-2 {
-			background-color: var(--bg-aqua-400);
-		}
-		&.severity-debug-3 {
-			background-color: var(--bg-aqua-300);
-		}
-		&.severity-debug-4 {
-			background-color: var(--bg-aqua-200);
-		}
-
-		// Info variants
-		&.severity-info-0 {
-			background-color: var(--bg-robin-600);
-		}
-		&.severity-info-1 {
+		&.INFO {
 			background-color: var(--bg-robin-500);
 		}
-		&.severity-info-2 {
-			background-color: var(--bg-robin-400);
-		}
-		&.severity-info-3 {
-			background-color: var(--bg-robin-300);
-		}
-		&.severity-info-4 {
-			background-color: var(--bg-robin-200);
-		}
-
-		// Warn variants
-		&.severity-warn-0 {
-			background-color: var(--bg-amber-600);
-		}
-		&.severity-warn-1 {
+		&.WARNING,
+		&.WARN {
 			background-color: var(--bg-amber-500);
 		}
-		&.severity-warn-2 {
-			background-color: var(--bg-amber-400);
-		}
-		&.severity-warn-3 {
-			background-color: var(--bg-amber-300);
-		}
-		&.severity-warn-4 {
-			background-color: var(--bg-amber-200);
-		}
-
-		// Error variants
-		&.severity-error-0 {
-			background-color: var(--bg-cherry-600);
-		}
-		&.severity-error-1 {
+		&.ERROR {
 			background-color: var(--bg-cherry-500);
 		}
-		&.severity-error-2 {
-			background-color: var(--bg-cherry-400);
+		&.TRACE {
+			background-color: var(--bg-forest-400);
 		}
-		&.severity-error-3 {
-			background-color: var(--bg-cherry-300);
+		&.DEBUG {
+			background-color: var(--bg-aqua-500);
 		}
-		&.severity-error-4 {
-			background-color: var(--bg-cherry-200);
-		}
-
-		// Fatal variants
-		&.severity-fatal-0 {
-			background-color: var(--bg-sakura-600);
-		}
-		&.severity-fatal-1 {
+		&.FATAL {
 			background-color: var(--bg-sakura-500);
 		}
-		&.severity-fatal-2 {
-			background-color: var(--bg-sakura-400);
-		}
-		&.severity-fatal-3 {
-			background-color: var(--bg-sakura-300);
-		}
-		&.severity-fatal-4 {
-			background-color: var(--bg-sakura-200);
-		}
 	}
 }

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx

@@ -6,41 +6,37 @@ import LogStateIndicator from './LogStateIndicator';
 describe('LogStateIndicator', () => {
 	it('renders correctly with default props', () => {
 		const { container } = render(
-			<LogStateIndicator severityText="INFO" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
 		);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('log-state-indicator')).toBe(true);
 		expect(indicator.classList.contains('isActive')).toBe(false);
 		expect(container.querySelector('.line')).toBeTruthy();
-		expect(
-			container.querySelector('.line')?.classList.contains('severity-info-0'),
-		).toBe(true);
+		expect(container.querySelector('.line')?.classList.contains('INFO')).toBe(
+			true,
+		);
 	});
 
 	it('renders correctly with different types', () => {
 		const { container: containerInfo } = render(
-			<LogStateIndicator severityText="INFO" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
+		);
+		expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe(
+			true,
 		);
-		expect(
-			containerInfo.querySelector('.line')?.classList.contains('severity-info-0'),
-		).toBe(true);
 
 		const { container: containerWarning } = render(
-			<LogStateIndicator severityText="WARNING" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="WARNING" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
-			containerWarning
-				.querySelector('.line')
-				?.classList.contains('severity-warn-0'),
+			containerWarning.querySelector('.line')?.classList.contains('WARNING'),
 		).toBe(true);
 
 		const { container: containerError } = render(
-			<LogStateIndicator severityText="ERROR" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="ERROR" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
-			containerError
-				.querySelector('.line')
-				?.classList.contains('severity-error-0'),
+			containerError.querySelector('.line')?.classList.contains('ERROR'),
 		).toBe(true);
 	});
 });

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -3,8 +3,6 @@ import './LogStateIndicator.styles.scss';
 import cx from 'classnames';
 import { FontSize } from 'container/OptionsMenu/types';
 
-import { getLogTypeBySeverityNumber } from './utils';
-
 export const SEVERITY_TEXT_TYPE = {
 	TRACE: 'TRACE',
 	TRACE2: 'TRACE2',
@@ -44,112 +42,18 @@ export const LogType = {
 	UNKNOWN: 'UNKNOWN',
 } as const;
 
-// Severity variant mapping to CSS classes
-const SEVERITY_VARIANT_CLASSES: Record<string, string> = {
-	// Trace variants - forest-600 to forest-200
-	TRACE: 'severity-trace-0',
-	Trace: 'severity-trace-1',
-	trace: 'severity-trace-2',
-	trc: 'severity-trace-3',
-	Trc: 'severity-trace-4',
-
-	// Debug variants - aqua-600 to aqua-200
-	DEBUG: 'severity-debug-0',
-	Debug: 'severity-debug-1',
-	debug: 'severity-debug-2',
-	dbg: 'severity-debug-3',
-	Dbg: 'severity-debug-4',
-
-	// Info variants - robin-600 to robin-200
-	INFO: 'severity-info-0',
-	Info: 'severity-info-1',
-	info: 'severity-info-2',
-	Information: 'severity-info-3',
-	information: 'severity-info-4',
-
-	// Warn variants - amber-600 to amber-200
-	WARN: 'severity-warn-0',
-	WARNING: 'severity-warn-0',
-	Warn: 'severity-warn-1',
-	warn: 'severity-warn-2',
-	warning: 'severity-warn-3',
-	Warning: 'severity-warn-4',
-	wrn: 'severity-warn-3',
-	Wrn: 'severity-warn-4',
-
-	// Error variants - cherry-600 to cherry-200
-	// eslint-disable-next-line sonarjs/no-duplicate-string
-	ERROR: 'severity-error-0',
-	Error: 'severity-error-1',
-	error: 'severity-error-2',
-	err: 'severity-error-3',
-	Err: 'severity-error-4',
-	ERR: 'severity-error-0',
-	fail: 'severity-error-2',
-	Fail: 'severity-error-3',
-	FAIL: 'severity-error-0',
-
-	// Fatal variants - sakura-600 to sakura-200
-	// eslint-disable-next-line sonarjs/no-duplicate-string
-	FATAL: 'severity-fatal-0',
-	Fatal: 'severity-fatal-1',
-	fatal: 'severity-fatal-2',
-	// eslint-disable-next-line sonarjs/no-duplicate-string
-	critical: 'severity-fatal-3',
-	Critical: 'severity-fatal-4',
-	CRITICAL: 'severity-fatal-0',
-	crit: 'severity-fatal-3',
-	Crit: 'severity-fatal-4',
-	CRIT: 'severity-fatal-0',
-	panic: 'severity-fatal-2',
-	Panic: 'severity-fatal-3',
-	PANIC: 'severity-fatal-0',
-};
-
-function getSeverityClass(
-	severityText?: string,
-	severityNumber?: number,
-): string {
-	// Priority 1: Use severityText for exact variant mapping
-	if (severityText) {
-		const variantClass = SEVERITY_VARIANT_CLASSES[severityText.trim()];
-		if (variantClass) {
-			return variantClass;
-		}
-	}
-
-	// Priority 2: Use severityNumber for base color (use middle shade as default)
-	if (severityNumber) {
-		const logType = getLogTypeBySeverityNumber(severityNumber);
-		if (logType !== LogType.UNKNOWN) {
-			return `severity-${logType.toLowerCase()}-0`; // Use middle shade (index 2)
-		}
-	}
-
-	return 'severity-info-0'; // Fallback to CSS classes based on type
-}
-
 function LogStateIndicator({
+	type,
 	fontSize,
-	severityText,
-	severityNumber,
 }: {
+	type: string;
 	fontSize: FontSize;
-	severityText?: string;
-	severityNumber?: number;
 }): JSX.Element {
-	const severityClass = getSeverityClass(severityText, severityNumber);
-
 	return (
 		<div className="log-state-indicator">
-			<div className={cx('line', fontSize, severityClass)} />
+			<div className={cx('line', type, fontSize)}> </div>
 		</div>
 	);
 }
 
-LogStateIndicator.defaultProps = {
-	severityText: '',
-	severityNumber: 0,
-};
-
 export default LogStateIndicator;

frontend/src/components/Logs/LogStateIndicator/utils.ts

@@ -41,7 +41,7 @@ const getLogTypeBySeverityText = (severityText: string): string => {
 };
 
 // https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
-export const getLogTypeBySeverityNumber = (severityNumber: number): string => {
+const getLogTypeBySeverityNumber = (severityNumber: number): string => {
 	if (severityNumber < 1) {
 		return LogType.UNKNOWN;
 	}

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

@@ -1,5 +1,6 @@
-import { Color } from '@signozhq/design-tokens';
-import { DrawerProps, Tooltip } from 'antd';
+import './RawLogView.styles.scss';
+
+import { DrawerProps } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -25,7 +26,7 @@ import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButton
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from '../LogStateIndicator/utils';
 // styles
-import { InfoIconWrapper, RawLogContent, RawLogViewContainer } from './styles';
+import { RawLogContent, RawLogViewContainer } from './styles';
 import { RawLogViewProps } from './types';
 
 function RawLogView({
@@ -34,17 +35,12 @@ function RawLogView({
 	data,
 	linesPerRow,
 	isTextOverflowEllipsisDisabled,
-	isHighlighted,
-	helpTooltip,
 	selectedFields = [],
 	fontSize,
-	onLogClick,
 }: RawLogViewProps): JSX.Element {
-	const {
-		isHighlighted: isUrlHighlighted,
-		isLogsExplorerPage,
-		onLogCopy,
-	} = useCopyLogLink(data.id);
+	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
+		data.id,
+	);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
 	const {
@@ -130,20 +126,12 @@ function RawLogView({
 		formatTimezoneAdjustedTimestamp,
 	]);
 
-	const handleClickExpand = useCallback(
-		(event: MouseEvent) => {
-			if (activeContextLog || isReadOnly) return;
+	const handleClickExpand = useCallback(() => {
+		if (activeContextLog || isReadOnly) return;
 
-			// Use custom click handler if provided, otherwise use default behavior
-			if (onLogClick) {
-				onLogClick(data, event);
-			} else {
-				onSetActiveLog(data);
-				setSelectedTab(VIEW_TYPES.OVERVIEW);
-			}
-		},
-		[activeContextLog, isReadOnly, data, onSetActiveLog, onLogClick],
-	);
+		onSetActiveLog(data);
+		setSelectedTab(VIEW_TYPES.OVERVIEW);
+	}, [activeContextLog, isReadOnly, data, onSetActiveLog]);
 
 	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
 		(
@@ -195,30 +183,16 @@ function RawLogView({
 			align="middle"
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
-			$isHightlightedLog={isUrlHighlighted}
+			$isHightlightedLog={isHighlighted}
 			$isActiveLog={
 				activeLog?.id === data.id || activeContextLog?.id === data.id || isActiveLog
 			}
-			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 			fontSize={fontSize}
 		>
-			<LogStateIndicator
-				fontSize={fontSize}
-				severityText={data.severity_text}
-				severityNumber={data.severity_number}
-			/>
-			{helpTooltip && (
-				<Tooltip title={helpTooltip} placement="top" mouseEnterDelay={0.5}>
-					<InfoIconWrapper
-						size={14}
-						className="help-tooltip-icon"
-						color={Color.BG_VANILLA_400}
-					/>
-				</Tooltip>
-			)}
+			<LogStateIndicator type={logType} fontSize={fontSize} />
 
 			<RawLogContent
 				className="raw-log-content"
@@ -262,7 +236,6 @@ RawLogView.defaultProps = {
 	isActiveLog: false,
 	isReadOnly: false,
 	isTextOverflowEllipsisDisabled: false,
-	isHighlighted: false,
 };
 
 export default RawLogView;

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

@@ -3,13 +3,8 @@ import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
-import { Info } from 'lucide-react';
 import styled from 'styled-components';
-import {
-	getActiveLogBackground,
-	getCustomHighlightBackground,
-	getDefaultLogBackground,
-} from 'utils/logs';
+import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
 import { RawLogContentProps } from './types';
 
@@ -18,7 +13,6 @@ export const RawLogViewContainer = styled(Row)<{
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isHightlightedLog: boolean;
-	$isCustomHighlighted?: boolean;
 	$logType: string;
 	fontSize: FontSize;
 }>`
@@ -56,18 +50,6 @@ export const RawLogViewContainer = styled(Row)<{
 			  };
 			  transition: background-color 2s ease-in;`
 			: ''}
-
-	${({ $isCustomHighlighted, $isDarkMode, $logType }): string =>
-		getCustomHighlightBackground($isCustomHighlighted, $isDarkMode, $logType)}
-`;
-
-export const InfoIconWrapper = styled(Info)`
-	display: flex;
-	align-items: center;
-	margin-right: 4px;
-	cursor: help;
-	flex-shrink: 0;
-	height: auto;
 `;
 
 export const ExpandIconWrapper = styled(Col)`

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,5 +1,4 @@
 import { FontSize } from 'container/OptionsMenu/types';
-import { MouseEvent } from 'react';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -7,13 +6,10 @@ export interface RawLogViewProps {
 	isActiveLog?: boolean;
 	isReadOnly?: boolean;
 	isTextOverflowEllipsisDisabled?: boolean;
-	isHighlighted?: boolean;
-	helpTooltip?: string;
 	data: ILog;
 	linesPerRow: number;
 	fontSize: FontSize;
 	selectedFields?: IField[];
-	onLogClick?: (log: ILog, event: MouseEvent) => void;
 }
 
 export interface RawLogContentProps {

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -11,6 +11,7 @@ import { useTimezone } from 'providers/Timezone';
 import { useMemo } from 'react';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
 import {
 	defaultListViewPanelStyle,
 	defaultTableStyle,
@@ -92,9 +93,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					children: (
 						<div className={cx('state-indicator', fontSize)}>
 							<LogStateIndicator
+								type={getLogIndicatorTypeForTable(item)}
 								fontSize={fontSize}
-								severityText={item.severity_text as string}
-								severityNumber={item.severity_number as number}
 							/>
 						</div>
 					),

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.styles.scss

@@ -1,86 +0,0 @@
-.logs-download-popover {
-	.ant-popover-inner {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			var(--bg-ink-400) 0%,
-			var(--bg-ink-500) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 0 8px 12px 8px;
-		margin: 6px 0;
-	}
-
-	.export-options-container {
-		width: 240px;
-		border-radius: 4px;
-
-		.title {
-			display: flex;
-			color: var(--bg-slate-50);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px;
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-			margin-bottom: 8px;
-		}
-
-		.export-format,
-		.row-limit,
-		.columns-scope {
-			padding: 12px 4px;
-			display: flex;
-			flex-direction: column;
-
-			:global(.ant-radio-wrapper) {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 13px;
-			}
-		}
-
-		.horizontal-line {
-			height: 1px;
-			background: var(--bg-slate-400);
-		}
-
-		.export-button {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.lightMode {
-	.logs-download-popover {
-		.ant-popover-inner {
-			border: 1px solid var(--bg-vanilla-300);
-			background: linear-gradient(
-				139deg,
-				var(--bg-vanilla-100) 0%,
-				var(--bg-vanilla-300) 98.68%
-			);
-			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-		}
-		.export-options-container {
-			.title {
-				color: var(--bg-ink-200);
-			}
-
-			:global(.ant-radio-wrapper) {
-				color: var(--bg-ink-400);
-			}
-
-			.horizontal-line {
-				background: var(--bg-vanilla-300);
-			}
-		}
-	}
-}

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.test.tsx

@@ -1,341 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { message } from 'antd';
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import { DownloadFormats, DownloadRowCounts } from './constants';
-import LogsDownloadOptionsMenu from './LogsDownloadOptionsMenu';
-
-// Mock antd message
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	return {
-		...actual,
-		message: {
-			success: jest.fn(),
-			error: jest.fn(),
-		},
-	};
-});
-
-const TEST_IDS = {
-	DOWNLOAD_BUTTON: 'periscope-btn-download-options',
-} as const;
-
-interface TestProps {
-	startTime: number;
-	endTime: number;
-	filter: string;
-	columns: TelemetryFieldKey[];
-	orderBy: string;
-}
-
-const createTestProps = (): TestProps => ({
-	startTime: 1631234567890,
-	endTime: 1631234567999,
-	filter: 'status = 200',
-	columns: [
-		{
-			name: 'http.status',
-			fieldContext: 'attribute',
-			fieldDataType: 'int64',
-		} as TelemetryFieldKey,
-	],
-	orderBy: 'timestamp:desc',
-});
-
-const testRenderContent = (props: TestProps): void => {
-	render(
-		<LogsDownloadOptionsMenu
-			startTime={props.startTime}
-			endTime={props.endTime}
-			filter={props.filter}
-			columns={props.columns}
-			orderBy={props.orderBy}
-		/>,
-	);
-};
-
-const testSuccessResponse = (res: any, ctx: any): any =>
-	res(
-		ctx.status(200),
-		ctx.set('Content-Type', 'application/octet-stream'),
-		ctx.set('Content-Disposition', 'attachment; filename="export.csv"'),
-		ctx.body('id,value\n1,2\n'),
-	);
-
-describe('LogsDownloadOptionsMenu', () => {
-	const BASE_URL = ENVIRONMENT.baseURL;
-	const EXPORT_URL = `${BASE_URL}/api/v1/export_raw_data`;
-	let requestSpy: jest.Mock<any, any>;
-	const setupDefaultServer = (): void => {
-		server.use(
-			rest.get(EXPORT_URL, (req, res, ctx) => {
-				const params = req.url.searchParams;
-				const payload = {
-					start: Number(params.get('start')),
-					end: Number(params.get('end')),
-					filter: params.get('filter'),
-					columns: params.getAll('columns'),
-					order_by: params.get('order_by'),
-					limit: Number(params.get('limit')),
-					format: params.get('format'),
-				};
-				requestSpy(payload);
-				return testSuccessResponse(res, ctx);
-			}),
-		);
-	};
-
-	// Mock URL.createObjectURL used by download logic
-	const originalCreateObjectURL = URL.createObjectURL;
-	const originalRevokeObjectURL = URL.revokeObjectURL;
-
-	beforeEach(() => {
-		requestSpy = jest.fn();
-		setupDefaultServer();
-		(message.success as jest.Mock).mockReset();
-		(message.error as jest.Mock).mockReset();
-		// jsdom doesn't implement it by default
-		((URL as unknown) as {
-			createObjectURL: (b: Blob) => string;
-		}).createObjectURL = jest.fn(() => 'blob:mock');
-		((URL as unknown) as {
-			revokeObjectURL: (u: string) => void;
-		}).revokeObjectURL = jest.fn();
-	});
-
-	beforeAll(() => {
-		server.listen();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	afterAll(() => {
-		server.close();
-		// restore
-		URL.createObjectURL = originalCreateObjectURL;
-		URL.revokeObjectURL = originalRevokeObjectURL;
-	});
-
-	it('renders download button', () => {
-		const props = createTestProps();
-		testRenderContent(props);
-
-		const button = screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON);
-		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
-	});
-
-	it('shows popover with export options when download button is clicked', () => {
-		const props = createTestProps();
-		render(
-			<LogsDownloadOptionsMenu
-				startTime={props.startTime}
-				endTime={props.endTime}
-				filter={props.filter}
-				columns={props.columns}
-				orderBy={props.orderBy}
-			/>,
-		);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-
-		expect(screen.getByRole('dialog')).toBeInTheDocument();
-		expect(screen.getByText('FORMAT')).toBeInTheDocument();
-		expect(screen.getByText('Number of Rows')).toBeInTheDocument();
-		expect(screen.getByText('Columns')).toBeInTheDocument();
-	});
-
-	it('allows changing export format', () => {
-		const props = createTestProps();
-		testRenderContent(props);
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-
-		const csvRadio = screen.getByRole('radio', { name: 'csv' });
-		const jsonlRadio = screen.getByRole('radio', { name: 'jsonl' });
-
-		expect(csvRadio).toBeChecked();
-		fireEvent.click(jsonlRadio);
-		expect(jsonlRadio).toBeChecked();
-		expect(csvRadio).not.toBeChecked();
-	});
-
-	it('allows changing row limit', () => {
-		const props = createTestProps();
-		testRenderContent(props);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-
-		const tenKRadio = screen.getByRole('radio', { name: '10k' });
-		const fiftyKRadio = screen.getByRole('radio', { name: '50k' });
-
-		expect(tenKRadio).toBeChecked();
-		fireEvent.click(fiftyKRadio);
-		expect(fiftyKRadio).toBeChecked();
-		expect(tenKRadio).not.toBeChecked();
-	});
-
-	it('allows changing columns scope', () => {
-		const props = createTestProps();
-		testRenderContent(props);
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-
-		const allColumnsRadio = screen.getByRole('radio', { name: 'All' });
-		const selectedColumnsRadio = screen.getByRole('radio', { name: 'Selected' });
-
-		expect(allColumnsRadio).toBeChecked();
-		fireEvent.click(selectedColumnsRadio);
-		expect(selectedColumnsRadio).toBeChecked();
-		expect(allColumnsRadio).not.toBeChecked();
-	});
-
-	it('calls downloadExportData with correct parameters when export button is clicked (Selected columns)', async () => {
-		const props = createTestProps();
-		testRenderContent(props);
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		fireEvent.click(screen.getByRole('radio', { name: 'Selected' }));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(requestSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					start: props.startTime,
-					end: props.endTime,
-					columns: ['attribute.http.status:int64'],
-					filter: props.filter,
-					order_by: props.orderBy,
-					format: DownloadFormats.CSV,
-					limit: DownloadRowCounts.TEN_K,
-				}),
-			);
-		});
-	});
-
-	it('calls downloadExportData with correct parameters when export button is clicked', async () => {
-		const props = createTestProps();
-		testRenderContent(props);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		fireEvent.click(screen.getByRole('radio', { name: 'All' }));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(requestSpy).toHaveBeenCalledWith(
-				expect.objectContaining({
-					start: props.startTime,
-					end: props.endTime,
-					columns: [],
-					filter: props.filter,
-					order_by: props.orderBy,
-					format: DownloadFormats.CSV,
-					limit: DownloadRowCounts.TEN_K,
-				}),
-			);
-		});
-	});
-
-	it('handles successful export with success message', async () => {
-		const props = createTestProps();
-		testRenderContent(props);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(message.success).toHaveBeenCalledWith(
-				'Export completed successfully',
-			);
-		});
-	});
-
-	it('handles export failure with error message', async () => {
-		// Override handler to return 500 for this test
-		server.use(rest.get(EXPORT_URL, (_req, res, ctx) => res(ctx.status(500))));
-		const props = createTestProps();
-		testRenderContent(props);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(message.error).toHaveBeenCalledWith(
-				'Failed to export logs. Please try again.',
-			);
-		});
-	});
-
-	it('handles UI state correctly during export process', async () => {
-		server.use(
-			rest.get(EXPORT_URL, (_req, res, ctx) => testSuccessResponse(res, ctx)),
-		);
-		const props = createTestProps();
-		testRenderContent(props);
-
-		// Open popover
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-		// Start export
-		fireEvent.click(screen.getByText('Export'));
-
-		// Check button is disabled during export
-		expect(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON)).toBeDisabled();
-
-		// Check popover is closed immediately after export starts
-		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-
-		// Wait for export to complete and verify button is enabled again
-		await waitFor(() => {
-			expect(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON)).not.toBeDisabled();
-		});
-	});
-
-	it('uses filename from Content-Disposition and triggers download click', async () => {
-		server.use(
-			rest.get(EXPORT_URL, (_req, res, ctx) =>
-				res(
-					ctx.status(200),
-					ctx.set('Content-Type', 'application/octet-stream'),
-					ctx.set('Content-Disposition', 'attachment; filename="report.jsonl"'),
-					ctx.body('row\n'),
-				),
-			),
-		);
-
-		const originalCreateElement = document.createElement.bind(document);
-		const anchorEl = originalCreateElement('a') as HTMLAnchorElement;
-		const setAttrSpy = jest.spyOn(anchorEl, 'setAttribute');
-		const clickSpy = jest.spyOn(anchorEl, 'click');
-		const removeSpy = jest.spyOn(anchorEl, 'remove');
-		const createElSpy = jest
-			.spyOn(document, 'createElement')
-			.mockImplementation((tagName: any): any =>
-				tagName === 'a' ? anchorEl : originalCreateElement(tagName),
-			);
-		const appendSpy = jest.spyOn(document.body, 'appendChild');
-
-		const props = createTestProps();
-		testRenderContent(props);
-
-		fireEvent.click(screen.getByTestId(TEST_IDS.DOWNLOAD_BUTTON));
-		fireEvent.click(screen.getByText('Export'));
-
-		await waitFor(() => {
-			expect(appendSpy).toHaveBeenCalledWith(anchorEl);
-			expect(setAttrSpy).toHaveBeenCalledWith('download', 'report.jsonl');
-			expect(clickSpy).toHaveBeenCalled();
-			expect(removeSpy).toHaveBeenCalled();
-		});
-		expect(anchorEl.getAttribute('download')).toBe('report.jsonl');
-
-		createElSpy.mockRestore();
-		appendSpy.mockRestore();
-	});
-});

frontend/src/components/LogsDownloadOptionsMenu/LogsDownloadOptionsMenu.tsx

@@ -1,170 +0,0 @@
-import './LogsDownloadOptionsMenu.styles.scss';
-
-import { Button, message, Popover, Radio, Tooltip, Typography } from 'antd';
-import { downloadExportData } from 'api/v1/download/downloadExportData';
-import { Download, DownloadIcon, Loader2 } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-
-import {
-	DownloadColumnsScopes,
-	DownloadFormats,
-	DownloadRowCounts,
-} from './constants';
-
-function convertTelemetryFieldKeyToText(key: TelemetryFieldKey): string {
-	const prefix = key.fieldContext ? `${key.fieldContext}.` : '';
-	const suffix = key.fieldDataType ? `:${key.fieldDataType}` : '';
-	return `${prefix}${key.name}${suffix}`;
-}
-
-interface LogsDownloadOptionsMenuProps {
-	startTime: number;
-	endTime: number;
-	filter: string;
-	columns: TelemetryFieldKey[];
-	orderBy: string;
-}
-
-export default function LogsDownloadOptionsMenu({
-	startTime,
-	endTime,
-	filter,
-	columns,
-	orderBy,
-}: LogsDownloadOptionsMenuProps): JSX.Element {
-	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
-	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
-	const [columnsScope, setColumnsScope] = useState<string>(
-		DownloadColumnsScopes.ALL,
-	);
-	const [isDownloading, setIsDownloading] = useState<boolean>(false);
-	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-
-	const handleExportRawData = useCallback(async (): Promise<void> => {
-		setIsPopoverOpen(false);
-		try {
-			setIsDownloading(true);
-			const downloadOptions = {
-				source: 'logs',
-				start: startTime,
-				end: endTime,
-				columns:
-					columnsScope === DownloadColumnsScopes.SELECTED
-						? columns.map((col) => convertTelemetryFieldKeyToText(col))
-						: [],
-				filter,
-				orderBy,
-				format: exportFormat,
-				limit: rowLimit,
-			};
-
-			await downloadExportData(downloadOptions);
-			message.success('Export completed successfully');
-		} catch (error) {
-			console.error('Error exporting logs:', error);
-			message.error('Failed to export logs. Please try again.');
-		} finally {
-			setIsDownloading(false);
-		}
-	}, [
-		startTime,
-		endTime,
-		columnsScope,
-		columns,
-		filter,
-		orderBy,
-		exportFormat,
-		rowLimit,
-		setIsDownloading,
-		setIsPopoverOpen,
-	]);
-
-	const popoverContent = useMemo(
-		() => (
-			<div
-				className="export-options-container"
-				role="dialog"
-				aria-label="Export options"
-				aria-modal="true"
-			>
-				<div className="export-format">
-					<Typography.Text className="title">FORMAT</Typography.Text>
-					<Radio.Group
-						value={exportFormat}
-						onChange={(e): void => setExportFormat(e.target.value)}
-					>
-						<Radio value={DownloadFormats.CSV}>csv</Radio>
-						<Radio value={DownloadFormats.JSONL}>jsonl</Radio>
-					</Radio.Group>
-				</div>
-
-				<div className="horizontal-line" />
-
-				<div className="row-limit">
-					<Typography.Text className="title">Number of Rows</Typography.Text>
-					<Radio.Group
-						value={rowLimit}
-						onChange={(e): void => setRowLimit(e.target.value)}
-					>
-						<Radio value={DownloadRowCounts.TEN_K}>10k</Radio>
-						<Radio value={DownloadRowCounts.THIRTY_K}>30k</Radio>
-						<Radio value={DownloadRowCounts.FIFTY_K}>50k</Radio>
-					</Radio.Group>
-				</div>
-
-				<div className="horizontal-line" />
-
-				<div className="columns-scope">
-					<Typography.Text className="title">Columns</Typography.Text>
-					<Radio.Group
-						value={columnsScope}
-						onChange={(e): void => setColumnsScope(e.target.value)}
-					>
-						<Radio value={DownloadColumnsScopes.ALL}>All</Radio>
-						<Radio value={DownloadColumnsScopes.SELECTED}>Selected</Radio>
-					</Radio.Group>
-				</div>
-
-				<Button
-					type="primary"
-					icon={<Download size={16} />}
-					onClick={handleExportRawData}
-					className="export-button"
-					disabled={isDownloading}
-					loading={isDownloading}
-				>
-					Export
-				</Button>
-			</div>
-		),
-		[exportFormat, rowLimit, columnsScope, isDownloading, handleExportRawData],
-	);
-
-	return (
-		<Popover
-			content={popoverContent}
-			trigger="click"
-			placement="bottomRight"
-			arrow={false}
-			open={isPopoverOpen}
-			onOpenChange={setIsPopoverOpen}
-			rootClassName="logs-download-popover"
-		>
-			<Tooltip title="Download" placement="top">
-				<Button
-					className="periscope-btn ghost"
-					icon={
-						isDownloading ? (
-							<Loader2 size={18} className="animate-spin" />
-						) : (
-							<DownloadIcon size={15} />
-						)
-					}
-					data-testid="periscope-btn-download-options"
-					disabled={isDownloading}
-				/>
-			</Tooltip>
-		</Popover>
-	);
-}

frontend/src/components/LogsDownloadOptionsMenu/constants.ts

@@ -1,15 +0,0 @@
-export const DownloadFormats = {
-	CSV: 'csv',
-	JSONL: 'jsonl',
-};
-
-export const DownloadColumnsScopes = {
-	ALL: 'all',
-	SELECTED: 'selected',
-};
-
-export const DownloadRowCounts = {
-	TEN_K: 10_000,
-	THIRTY_K: 30_000,
-	FIFTY_K: 50_000,
-};

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -3,30 +3,24 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './LogsFormatOptionsMenu.styles.scss';
 
-import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import {
-	Check,
-	ChevronLeft,
-	ChevronRight,
-	Minus,
-	Plus,
-	Sliders,
-	X,
-} from 'lucide-react';
+import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface LogsFormatOptionsMenuProps {
+	title: string;
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
 }
 
 export default function LogsFormatOptionsMenu({
+	title,
 	items,
 	selectedOptionFormat,
 	config,
@@ -49,7 +43,6 @@ export default function LogsFormatOptionsMenu({
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
 	const initialMouseEnterRef = useRef<boolean>(false);
-	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const onChange = useCallback(
 		(key: LogViewMode) => {
@@ -209,7 +202,7 @@ export default function LogsFormatOptionsMenu({
 		};
 	}, [selectedValue]);
 
-	const popoverContent = (
+	return (
 		<div
 			className={cx(
 				'nested-menu-container',
@@ -351,7 +344,7 @@ export default function LogsFormatOptionsMenu({
 					</div>
 					<div className="horizontal-line" />
 					<div className="menu-container">
-						<div className="title">FORMAT</div>
+						<div className="title"> {title} </div>
 
 						<div className="menu-items">
 							{items.map(
@@ -447,21 +440,4 @@ export default function LogsFormatOptionsMenu({
 			)}
 		</div>
 	);
-	return (
-		<Popover
-			content={popoverContent}
-			trigger="click"
-			placement="bottomRight"
-			arrow={false}
-			open={isPopoverOpen}
-			onOpenChange={setIsPopoverOpen}
-			rootClassName="format-options-popover"
-		>
-			<Button
-				className="periscope-btn ghost"
-				icon={<Sliders size={14} />}
-				data-testid="periscope-btn-format-options"
-			/>
-		</Popover>
-	);
 }

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable no-nested-ternary */
@@ -14,11 +12,9 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Checkbox, Select, Typography } from 'antd';
 import cx from 'classnames';
-import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Info } from 'lucide-react';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import React, {
 	useCallback,
@@ -72,8 +68,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showLabels = false,
 	enableRegexOption = false,
-	isDynamicVariable = false,
-	showRetryButton = true,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -93,8 +87,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const justOpenedRef = useRef<boolean>(false);
 	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
-	const isDarkMode = useIsDarkMode();
-
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
 		(): string[] =>
@@ -309,8 +301,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					: filteredOptions,
 			);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filteredOptions, searchText, options]);
+	}, [filteredOptions, searchText, options, selectedValues]);
 
 	// ===== Text Selection Utilities =====
 
@@ -1557,39 +1548,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								}
 							}}
 						>
-							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox checked={allOptionsSelected} className="option-checkbox">
-									<div className="option-content">
-										<div className="all-option-text">ALL</div>
-									</div>
-								</Checkbox>
-								<div
-									onClick={(e): void => {
-										e.stopPropagation();
-									}}
-									onMouseDown={(e): void => {
-										e.stopPropagation();
-									}}
-								>
-									{isDynamicVariable && (
-										<TextToolTip
-											text="ALL in dynamic variable = No filter applied (unlike other variable types where ALL sends all selected values). Learn more"
-											url="https://signoz.io/docs/userguide/manage-variables/#note-about-all"
-											urlText="here"
-											useFilledIcon={false}
-											outlinedIcon={
-												<Info
-													size={14}
-													style={{
-														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-														marginLeft: 5,
-													}}
-												/>
-											}
-										/>
-									)}
+							<Checkbox
+								checked={allOptionsSelected}
+								style={{ width: '100%', height: '100%' }}
+							>
+								<div className="option-content">
+									<div>ALL</div>
 								</div>
-							</div>
+							</Checkbox>
 						</div>
 						<div className="divider" />
 					</>
@@ -1621,23 +1587,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="select-group" key={section.label}>
 								<div className="group-label" role="heading" aria-level={2}>
 									{section.label}
-									{isDynamicVariable && (
-										<TextToolTip
-											text="Related values: Filtered by other variable selections. All values: Unfiltered complete list. Learn more"
-											url="https://signoz.io/docs/userguide/manage-variables/#dynamic-variable-dropdowns-display-values-in-two-sections"
-											urlText="here"
-											useFilledIcon={false}
-											outlinedIcon={
-												<Info
-													size={14}
-													style={{
-														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-														marginTop: 1,
-													}}
-												/>
-											}
-										/>
-									)}
 								</div>
 								<div role="group" aria-label={`${section.label} options`}>
 									<Virtuoso
@@ -1679,7 +1628,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-icons">
 								<LoadingOutlined />
 							</div>
-							<div className="navigation-text">Refreshing values...</div>
+							<div className="navigation-text">We are updating the values...</div>
 						</div>
 					)}
 					{errorMessage && !loading && (
@@ -1687,7 +1636,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							{onRetry && showRetryButton && (
+							{onRetry && (
 								<div className="navigation-icons">
 									<ReloadOutlined
 										twoToneColor={Color.BG_CHERRY_400}
@@ -1706,7 +1655,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						!loading &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
-								Don&apos;t see the value? Use search
+								Use search for more options
 							</div>
 						)}
 
@@ -1743,9 +1692,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		showIncompleteDataMessage,
 		isScrolledToBottom,
 		enableRegexOption,
-		isDarkMode,
-		isDynamicVariable,
-		showRetryButton,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -13,11 +13,9 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Select } from 'antd';
 import cx from 'classnames';
-import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowUp, Info } from 'lucide-react';
+import { ArrowDown, ArrowUp } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import React, {
 	useCallback,
@@ -61,8 +59,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	showIncompleteDataMessage = false,
-	showRetryButton = true,
-	isDynamicVariable = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -71,8 +67,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
 	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
-	const isDarkMode = useIsDarkMode();
-
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
@@ -528,23 +522,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="select-group" key={section.label}>
 								<div className="group-label" role="heading" aria-level={2}>
 									{section.label}
-									{isDynamicVariable && (
-										<TextToolTip
-											text="Related values: Filtered by other variable selections. All values: Unfiltered complete list. Learn more"
-											url="https://signoz.io/docs/userguide/manage-variables/#dynamic-variable-dropdowns-display-values-in-two-sections"
-											urlText="here"
-											useFilledIcon={false}
-											outlinedIcon={
-												<Info
-													size={14}
-													style={{
-														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-														marginTop: 1,
-													}}
-												/>
-											}
-										/>
-									)}
 								</div>
 								<div role="group" aria-label={`${section.label} options`}>
 									{section.options && mapOptions(section.options)}
@@ -570,7 +547,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-icons">
 								<LoadingOutlined />
 							</div>
-							<div className="navigation-text">Refreshing values...</div>
+							<div className="navigation-text">We are updating the values...</div>
 						</div>
 					)}
 					{errorMessage && !loading && (
@@ -578,7 +555,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							{onRetry && showRetryButton && (
+							{onRetry && (
 								<div className="navigation-icons">
 									<ReloadOutlined
 										twoToneColor={Color.BG_CHERRY_400}
@@ -597,7 +574,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						!loading &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
-								Don&apos;t see the value? Use search
+								Use search for more options
 							</div>
 						)}
 
@@ -628,9 +605,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		onRetry,
 		showIncompleteDataMessage,
 		isScrolledToBottom,
-		showRetryButton,
-		isDarkMode,
-		isDynamicVariable,
 	]);
 
 	// Handle dropdown visibility changes

frontend/src/components/NewSelect/__test__/CustomMultiSelect.retry.test.tsx

@@ -1,127 +0,0 @@
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	waitFor,
-} from '@testing-library/react';
-import { VirtuosoMockContext } from 'react-virtuoso';
-
-import CustomMultiSelect from '../CustomMultiSelect';
-
-// Mock scrollIntoView which isn't available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Helper function to render with VirtuosoMockContext
-const renderWithVirtuoso = (component: React.ReactElement): RenderResult =>
-	render(
-		<VirtuosoMockContext.Provider
-			value={{ viewportHeight: 300, itemHeight: 100 }}
-		>
-			{component}
-		</VirtuosoMockContext.Provider>,
-	);
-
-// Mock options data
-const mockOptions = [
-	{ label: 'Option 1', value: 'option1' },
-	{ label: 'Option 2', value: 'option2' },
-	{ label: 'Option 3', value: 'option3' },
-];
-
-// CSS selector for retry button
-const RETRY_BUTTON_SELECTOR = '.navigation-icons .anticon-reload';
-
-describe('CustomMultiSelect - Retry Functionality', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should show retry button when 5xx error occurs and error message is displayed', async () => {
-		const mockOnRetry = jest.fn();
-		const errorMessage = 'Internal Server Error (500)';
-
-		renderWithVirtuoso(
-			<CustomMultiSelect
-				options={mockOptions}
-				errorMessage={errorMessage}
-				onRetry={mockOnRetry}
-				showRetryButton
-				loading={false}
-			/>,
-		);
-
-		// Open dropdown to see error state
-		const selectElement = screen.getByRole('combobox');
-		fireEvent.mouseDown(selectElement);
-
-		// Wait for dropdown to appear with error message
-		await waitFor(() => {
-			expect(screen.getByText(errorMessage)).toBeInTheDocument();
-		});
-
-		// Check that retry button (ReloadOutlined icon) is present
-		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
-		expect(retryButton).toBeInTheDocument();
-	});
-
-	it('should show retry button when 4xx error occurs and error message is displayed (current behavior)', async () => {
-		const mockOnRetry = jest.fn();
-		const errorMessage = 'Bad Request (400)';
-
-		renderWithVirtuoso(
-			<CustomMultiSelect
-				options={mockOptions}
-				errorMessage={errorMessage}
-				onRetry={mockOnRetry}
-				showRetryButton={false}
-				loading={false}
-			/>,
-		);
-
-		// Open dropdown
-		const selectElement = screen.getByRole('combobox');
-		fireEvent.mouseDown(selectElement);
-
-		// Wait for dropdown to appear with error message
-		await waitFor(() => {
-			expect(screen.getByText(errorMessage)).toBeInTheDocument();
-		});
-
-		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
-		expect(retryButton).not.toBeInTheDocument();
-	});
-
-	it('should call onRetry function when retry button is clicked', async () => {
-		const mockOnRetry = jest.fn();
-		const errorMessage = 'Internal Server Error (500)';
-
-		renderWithVirtuoso(
-			<CustomMultiSelect
-				options={mockOptions}
-				errorMessage={errorMessage}
-				onRetry={mockOnRetry}
-				showRetryButton
-				loading={false}
-			/>,
-		);
-
-		// Open dropdown
-		const selectElement = screen.getByRole('combobox');
-		fireEvent.mouseDown(selectElement);
-
-		// Wait for dropdown to appear
-		await waitFor(() => {
-			expect(screen.getByText(errorMessage)).toBeInTheDocument();
-		});
-
-		// Find and click the retry button
-		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
-		expect(retryButton).toBeInTheDocument();
-
-		fireEvent.click(retryButton as Element);
-
-		// Verify onRetry was called
-		expect(mockOnRetry).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/components/NewSelect/__test__/CustomMultiSelect.test.tsx

@@ -1,27 +1,10 @@
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	waitFor,
-} from '@testing-library/react';
-import { VirtuosoMockContext } from 'react-virtuoso';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import CustomMultiSelect from '../CustomMultiSelect';
 
 // Mock scrollIntoView which isn't available in JSDOM
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
-// Helper function to render with VirtuosoMockContext
-const renderWithVirtuoso = (component: React.ReactElement): RenderResult =>
-	render(
-		<VirtuosoMockContext.Provider
-			value={{ viewportHeight: 300, itemHeight: 100 }}
-		>
-			{component}
-		</VirtuosoMockContext.Provider>,
-	);
-
 // Mock options data
 const mockOptions = [
 	{ label: 'Option 1', value: 'option1' },
@@ -49,7 +32,7 @@ const mockGroupedOptions = [
 describe('CustomMultiSelect Component', () => {
 	it('renders with placeholder', () => {
 		const handleChange = jest.fn();
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				placeholder="Select multiple options"
 				options={mockOptions}
@@ -64,9 +47,7 @@ describe('CustomMultiSelect Component', () => {
 
 	it('opens dropdown when clicked', async () => {
 		const handleChange = jest.fn();
-		renderWithVirtuoso(
-			<CustomMultiSelect options={mockOptions} onChange={handleChange} />,
-		);
+		render(<CustomMultiSelect options={mockOptions} onChange={handleChange} />);
 
 		// Click to open the dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -85,7 +66,7 @@ describe('CustomMultiSelect Component', () => {
 		const handleChange = jest.fn();
 
 		// Start with option1 already selected
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				options={mockOptions}
 				onChange={handleChange}
@@ -112,7 +93,7 @@ describe('CustomMultiSelect Component', () => {
 
 	it('selects ALL options when ALL is clicked', async () => {
 		const handleChange = jest.fn();
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				options={mockOptions}
 				onChange={handleChange}
@@ -145,7 +126,7 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('displays selected options as tags', async () => {
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect options={mockOptions} value={['option1', 'option2']} />,
 		);
 
@@ -156,7 +137,7 @@ describe('CustomMultiSelect Component', () => {
 
 	it('removes a tag when clicked', async () => {
 		const handleChange = jest.fn();
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				options={mockOptions}
 				value={['option1', 'option2']}
@@ -178,7 +159,7 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('filters options when searching', async () => {
-		renderWithVirtuoso(<CustomMultiSelect options={mockOptions} />);
+		render(<CustomMultiSelect options={mockOptions} />);
 
 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -212,7 +193,7 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('renders grouped options correctly', async () => {
-		renderWithVirtuoso(<CustomMultiSelect options={mockGroupedOptions} />);
+		render(<CustomMultiSelect options={mockGroupedOptions} />);
 
 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -230,18 +211,18 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('shows loading state', () => {
-		renderWithVirtuoso(<CustomMultiSelect options={mockOptions} loading />);
+		render(<CustomMultiSelect options={mockOptions} loading />);
 
 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
 		fireEvent.mouseDown(selectElement);
 
 		// Check loading text is displayed
-		expect(screen.getByText('Refreshing values...')).toBeInTheDocument();
+		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
 	});
 
 	it('shows error message', () => {
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				options={mockOptions}
 				errorMessage="Test error message"
@@ -257,9 +238,7 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('shows no data message', () => {
-		renderWithVirtuoso(
-			<CustomMultiSelect options={[]} noDataMessage="No data available" />,
-		);
+		render(<CustomMultiSelect options={[]} noDataMessage="No data available" />);
 
 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -270,7 +249,7 @@ describe('CustomMultiSelect Component', () => {
 	});
 
 	it('shows "ALL" tag when all options are selected', () => {
-		renderWithVirtuoso(
+		render(
 			<CustomMultiSelect
 				options={mockOptions}
 				value={['option1', 'option2', 'option3']}

frontend/src/components/NewSelect/__test__/CustomSelect.test.tsx

@@ -140,7 +140,7 @@ describe('CustomSelect Component', () => {
 		fireEvent.mouseDown(selectElement);
 
 		// Check loading text is displayed
-		expect(screen.getByText('Refreshing values...')).toBeInTheDocument();
+		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
 	});
 
 	it('shows error message', () => {

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

@@ -1,624 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { Provider } from 'react-redux';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import configureStore from 'redux-mock-store';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import VariableItem from '../../../container/NewDashboard/DashboardVariablesSelection/VariableItem';
-
-// Mock the dashboard variables query
-jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() =>
-		Promise.resolve({
-			payload: {
-				variableValues: ['option1', 'option2', 'option3', 'option4'],
-			},
-		}),
-	),
-}));
-
-// Mock scrollIntoView which isn't available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Constants
-const TEST_VARIABLE_NAME = 'test_variable';
-const TEST_VARIABLE_ID = 'test-var-id';
-
-// Create a mock store
-const mockStore = configureStore([])({
-	globalTime: {
-		minTime: Date.now() - 3600000, // 1 hour ago
-		maxTime: Date.now(),
-	},
-});
-
-// Test data
-const createMockVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: TEST_VARIABLE_ID,
-	name: TEST_VARIABLE_NAME,
-	description: 'Test variable description',
-	type: 'QUERY',
-	queryValue: 'SELECT DISTINCT value FROM table',
-	customValue: '',
-	sort: 'ASC',
-	multiSelect: false,
-	showALLOption: true,
-	selectedValue: [],
-	allSelected: false,
-	...overrides,
-});
-
-function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { retry: false },
-		},
-	});
-
-	return (
-		<Provider store={mockStore}>
-			<QueryClientProvider client={queryClient}>
-				<VirtuosoMockContext.Provider
-					// eslint-disable-next-line react/jsx-no-constructed-context-values
-					value={{ viewportHeight: 300, itemHeight: 40 }}
-				>
-					{children}
-				</VirtuosoMockContext.Provider>
-			</QueryClientProvider>
-		</Provider>
-	);
-}
-
-describe('VariableItem Integration Tests', () => {
-	let user: ReturnType<typeof userEvent.setup>;
-	let mockOnValueUpdate: jest.Mock;
-	let mockSetVariablesToGetUpdated: jest.Mock;
-
-	beforeEach(() => {
-		user = userEvent.setup();
-		mockOnValueUpdate = jest.fn();
-		mockSetVariablesToGetUpdated = jest.fn();
-		jest.clearAllMocks();
-	});
-
-	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
-	describe('CustomSelect Integration (VI)', () => {
-		test('VI-01: Single select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: false,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('option1')).toBeInTheDocument();
-				expect(screen.getByText('option2')).toBeInTheDocument();
-				expect(screen.getByText('option3')).toBeInTheDocument();
-			});
-
-			// Select an option
-			const option1 = screen.getByText('option1');
-			await user.click(option1);
-
-			expect(mockOnValueUpdate).toHaveBeenCalledWith(
-				TEST_VARIABLE_NAME,
-				TEST_VARIABLE_ID,
-				'option1',
-				false,
-			);
-		});
-	});
-
-	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
-	describe('CustomMultiSelect Integration (VI)', () => {
-		test('VI-02: Multi select variable integration', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3,option4',
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render with CustomMultiSelect
-			const combobox = screen.getByRole('combobox');
-			expect(combobox).toBeInTheDocument();
-
-			await user.click(combobox);
-
-			await waitFor(() => {
-				// Should show ALL option
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Wait for Virtuoso to render the custom options
-			await waitFor(
-				() => {
-					expect(screen.getByText('option1')).toBeInTheDocument();
-					expect(screen.getByText('option2')).toBeInTheDocument();
-					expect(screen.getByText('option3')).toBeInTheDocument();
-					expect(screen.getByText('option4')).toBeInTheDocument();
-				},
-				{ timeout: 5000 },
-			);
-		});
-	});
-
-	// ===== 3. TEXTBOX VARIABLE TYPE =====
-	describe('Textbox Variable Integration', () => {
-		test('VI-03: Textbox variable handling', async () => {
-			const variable = createMockVariable({
-				type: 'TEXTBOX',
-				selectedValue: 'initial-value',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should render a regular input
-			const textInput = screen.getByDisplayValue('initial-value');
-			expect(textInput).toBeInTheDocument();
-			expect(textInput.tagName).toBe('INPUT');
-
-			// Clear and type new value
-			await user.clear(textInput);
-			await user.type(textInput, 'new-text-value');
-
-			// Should call onValueUpdate after debounce
-			await waitFor(
-				() => {
-					expect(mockOnValueUpdate).toHaveBeenCalledWith(
-						TEST_VARIABLE_NAME,
-						TEST_VARIABLE_ID,
-						'new-text-value',
-						false,
-					);
-				},
-				{ timeout: 1000 },
-			);
-		});
-	});
-
-	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
-	describe('Value Persistence and State Management', () => {
-		test('VI-04: All selected state handling', () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'service1,service2,service3',
-				selectedValue: ['service1', 'service2', 'service3'],
-				allSelected: true,
-				showALLOption: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show "ALL" instead of individual values
-			expect(screen.getByText('ALL')).toBeInTheDocument();
-		});
-
-		test('VI-05: Dropdown behavior with temporary selections', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'item1,item2,item3',
-				selectedValue: ['item1'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Wait for dropdown to open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-	});
-
-	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
-	describe('Accessibility and User Experience', () => {
-		test('VI-06: Variable description tooltip', async () => {
-			const variable = createMockVariable({
-				description: 'This variable controls the service selection',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show info icon
-			const infoIcon = document.querySelector('.info-icon');
-			expect(infoIcon).toBeInTheDocument();
-
-			// Hover to show tooltip
-			if (infoIcon) {
-				await user.hover(infoIcon);
-			}
-
-			await waitFor(() => {
-				expect(
-					screen.getByText('This variable controls the service selection'),
-				).toBeInTheDocument();
-			});
-		});
-
-		test('VI-07: Variable name display', () => {
-			const variable = createMockVariable({
-				name: 'service_name',
-				type: 'CUSTOM',
-				customValue: 'service1,service2',
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Should show variable name with $ prefix
-			expect(screen.getByText('$service_name')).toBeInTheDocument();
-		});
-
-		test('VI-08: Max tag count behavior', async () => {
-			const variable = createMockVariable({
-				multiSelect: true,
-				type: 'CUSTOM',
-				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
-				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to render
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			// Should show limited number of tags with "+ X more"
-			const tags = document.querySelectorAll('.ant-select-selection-item');
-
-			// The component should render without crashing
-			expect(tags.length).toBeGreaterThanOrEqual(0);
-		});
-	});
-
-	// ===== 8. SEARCH INTERACTION TESTS =====
-	describe('Search Interaction Tests', () => {
-		test('VI-14: Search persistence across dropdown open/close', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			const searchInput = document.querySelector(
-				'.ant-select-selection-search-input',
-			);
-			expect(searchInput).toBeInTheDocument();
-
-			if (searchInput) {
-				await user.type(searchInput, 'search-text');
-			}
-
-			// Verify search text is in input
-			await waitFor(() => {
-				expect(searchInput).toHaveValue('search-text');
-			});
-
-			// Press Escape to close dropdown
-			await user.keyboard('{Escape}');
-
-			// Dropdown should close and search text should be cleared
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-				expect(searchInput).toHaveValue('');
-			});
-		});
-	});
-
-	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
-	describe('Advanced Keyboard Navigation (VI)', () => {
-		test('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-				selectedValue: ['option1', 'option2', 'option3'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Navigate to chips using arrow keys
-			await user.keyboard('{ArrowLeft}');
-
-			// Use Shift + Arrow to navigate between chips
-			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
-
-			// Use Del to delete the active chip
-			await user.keyboard('{Delete}');
-
-			// Note: The component may not immediately call onValueUpdate
-			// This test verifies the chip deletion behavior
-			await waitFor(() => {
-				// Check if a chip was removed from the selection
-				const selectionItems = document.querySelectorAll(
-					'.ant-select-selection-item',
-				);
-				expect(selectionItems.length).toBeLessThan(3);
-			});
-		});
-	});
-
-	// ===== 11. ADVANCED UI STATES =====
-	describe('Advanced UI States (VI)', () => {
-		test('VI-19: No data with previous value selected in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: '',
-				multiSelect: true,
-				selectedValue: ['previous-value'],
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			// Should show no data message (the component may not show this exact text)
-			await waitFor(() => {
-				// Check if dropdown is empty or shows no data indication
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-		});
-
-		test('VI-20: Always editable accessibility in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			const combobox = screen.getByRole('combobox');
-
-			// Should be editable
-			expect(combobox).not.toBeDisabled();
-			await user.click(combobox);
-			expect(combobox).toHaveFocus();
-
-			// Should still be interactive
-			expect(combobox).not.toBeDisabled();
-		});
-	});
-
-	// ===== 13. DROPDOWN PERSISTENCE =====
-	describe('Dropdown Persistence (VI)', () => {
-		test('VI-24: Dropdown stays open for non-save actions in variable', async () => {
-			const variable = createMockVariable({
-				type: 'CUSTOM',
-				customValue: 'option1,option2,option3',
-				multiSelect: true,
-			});
-
-			render(
-				<TestWrapper>
-					<VariableItem
-						variableData={variable}
-						existingVariables={{}}
-						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
-					/>
-				</TestWrapper>,
-			);
-
-			// Wait for component to initialize
-			await waitFor(() => {
-				const combobox = screen.getByRole('combobox');
-				expect(combobox).toBeInTheDocument();
-			});
-
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-
-			await waitFor(() => {
-				expect(screen.getByText('ALL')).toBeInTheDocument();
-			});
-
-			// Navigate with arrow keys (non-save action)
-			await user.keyboard('{ArrowDown}');
-			await user.keyboard('{ArrowDown}');
-
-			// Dropdown should still be open
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toBeInTheDocument();
-			});
-
-			// Verify the component renders without crashing
-			expect(combobox).toBeInTheDocument();
-
-			// Only ESC should close the dropdown
-			await user.keyboard('{Escape}');
-
-			await waitFor(() => {
-				const dropdown = document.querySelector('.ant-select-dropdown');
-				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
-			});
-		});
-	});
-});

frontend/src/components/NewSelect/styles.scss

@@ -410,10 +410,6 @@ $custom-border-color: #2c3044;
 		margin-top: 4px;
 
 		.group-label {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
@@ -461,13 +457,6 @@ $custom-border-color: #2c3044;
 				width: 100%;
 			}
 
-			.all-option-text {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				width: 100%;
-			}
-
 			.option-content {
 				display: flex;
 				justify-content: space-between;
@@ -801,10 +790,6 @@ $custom-border-color: #2c3044;
 
 		.select-group {
 			.group-label {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-
 				color: rgba(0, 0, 0, 0.85);
 				background-color: #fafafa;
 				border-bottom: 1px solid #f0f0f0;

frontend/src/components/NewSelect/types.ts

@@ -28,8 +28,6 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
 	showIncompleteDataMessage?: boolean;
-	showRetryButton?: boolean;
-	isDynamicVariable?: boolean;
 }
 
 export interface CustomTagProps {
@@ -64,6 +62,4 @@ export interface CustomMultiSelectProps
 	showIncompleteDataMessage?: boolean;
 	showLabels?: boolean;
 	enableRegexOption?: boolean;
-	isDynamicVariable?: boolean;
-	showRetryButton?: boolean;
 }

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -102,7 +102,7 @@ function ListViewOrderBy({
 			onChange={onChange}
 			onSearch={handleSearch}
 			notFoundContent={<Loader isLoading={isLoading} />}
-			placeholder="Select a field"
+			placeholder="Select an attribute"
 			style={{ width: 200 }}
 			options={selectOptions}
 			filterOption={(input, option): boolean =>

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

@@ -22,10 +22,6 @@
 		flex: 1;
 
 		position: relative;
-
-		.qb-trace-view-selector-container {
-			padding: 12px 8px 8px 8px;
-		}
 	}
 
 	.qb-content-section {
@@ -183,7 +179,7 @@
 		flex-direction: column;
 		gap: 8px;
 
-		margin-left: 26px;
+		margin-left: 32px;
 		padding-bottom: 16px;
 		padding-left: 8px;
 
@@ -199,8 +195,8 @@
 			}
 
 			.formula-container {
-				padding: 8px;
-				margin-left: 74px;
+				margin-left: 82px;
+				padding: 4px 0px;
 
 				.ant-col {
 					&::before {
@@ -295,13 +291,6 @@
 					);
 				}
 			}
-			.qb-trace-operator-button-container {
-				&-text {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-				}
-			}
 		}
 	}
 
@@ -342,12 +331,6 @@
 					);
 					left: 15px;
 				}
-
-				&.has-trace-operator {
-					&::before {
-						height: 0px;
-					}
-				}
 			}
 
 			.formula-name {
@@ -364,7 +347,7 @@
 
 				&::before {
 					content: '';
-					height: 128px;
+					height: 65px;
 					content: '';
 					position: absolute;
 					left: 0;
@@ -404,7 +387,6 @@
 	}
 
 	.qb-search-filter-container {
-		flex: 1;
 		display: flex;
 		flex-direction: row;
 		align-items: flex-start;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -5,13 +5,11 @@ import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useEffect, useMemo, useRef } from 'react';
-import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
 import { QueryV2 } from './QueryV2/QueryV2';
-import TraceOperator from './QueryV2/TraceOperator/TraceOperator';
 
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
@@ -20,7 +18,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	queryComponents,
 	isListViewPanel = false,
 	showOnlyWhereClause = false,
-	showTraceOperator = false,
 	version,
 }: QueryBuilderProps): JSX.Element {
 	const {
@@ -28,7 +25,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		addNewBuilderQuery,
 		addNewFormula,
 		handleSetConfig,
-		addTraceOperator,
 		panelType,
 		initialDataSource,
 	} = useQueryBuilder();
@@ -58,11 +54,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		newPanelType,
 	]);
 
-	const isMultiQueryAllowed = useMemo(
-		() => !isListViewPanel || showTraceOperator,
-		[showTraceOperator, isListViewPanel],
-	);
-
 	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
 		const config: QueryBuilderProps['filterConfigs'] = {
 			stepInterval: { isHidden: true, isDisabled: true },
@@ -106,60 +97,11 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		listViewTracesFilterConfigs,
 	]);
 
-	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
-		if (
-			currentQuery.builder.queryTraceOperator &&
-			currentQuery.builder.queryTraceOperator.length > 0
-		) {
-			return currentQuery.builder.queryTraceOperator[0];
-		}
-
-		return undefined;
-	}, [currentQuery.builder.queryTraceOperator]);
-
-	const hasAtLeastOneTraceQuery = useMemo(
-		() =>
-			currentQuery.builder.queryData.some(
-				(query) => query.dataSource === DataSource.TRACES,
-			),
-		[currentQuery.builder.queryData],
-	);
-
-	const hasTraceOperator = useMemo(
-		() => showTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
-	);
-
-	const shouldShowFooter = useMemo(
-		() =>
-			(!showOnlyWhereClause && !isListViewPanel) ||
-			(currentDataSource === DataSource.TRACES && showTraceOperator),
-		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
-	);
-
-	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
-		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
-	);
-
-	const showFormula = useMemo(() => {
-		if (currentDataSource === DataSource.TRACES) {
-			return !isListViewPanel;
-		}
-
-		return true;
-	}, [isListViewPanel, currentDataSource]);
-
-	const showAddTraceOperator = useMemo(
-		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
-		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
-	);
-
 	return (
 		<QueryBuilderV2Provider>
 			<div className="query-builder-v2">
 				<div className="qb-content-container">
-					{!isMultiQueryAllowed ? (
+					{isListViewPanel && (
 						<QueryV2
 							ref={containerRef}
 							key={currentQuery.builder.queryData[0].queryName}
@@ -167,16 +109,15 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							query={currentQuery.builder.queryData[0]}
 							filterConfigs={queryFilterConfigs}
 							queryComponents={queryComponents}
-							isMultiQueryAllowed={isMultiQueryAllowed}
-							showTraceOperator={showTraceOperator}
-							hasTraceOperator={hasTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
 						/>
-					) : (
+					)}
+
+					{!isListViewPanel &&
 						currentQuery.builder.queryData.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
@@ -186,17 +127,13 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								filterConfigs={queryFilterConfigs}
 								queryComponents={queryComponents}
 								version={version}
-								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
-								showTraceOperator={showTraceOperator}
-								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
 								signalSource={config?.signalSource || ''}
 							/>
-						))
-					)}
+						))}
 
 					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
 						<div className="qb-formulas-container">
@@ -221,25 +158,15 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						</div>
 					)}
 
-					{shouldShowFooter && (
+					{!showOnlyWhereClause && !isListViewPanel && (
 						<QueryFooter
-							showAddFormula={showFormula}
 							addNewBuilderQuery={addNewBuilderQuery}
 							addNewFormula={addNewFormula}
-							addTraceOperator={addTraceOperator}
-							showAddTraceOperator={showAddTraceOperator}
-						/>
-					)}
-
-					{hasTraceOperator && (
-						<TraceOperator
-							isListViewPanel={isListViewPanel}
-							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
 				</div>
 
-				{showQueryList && (
+				{!showOnlyWhereClause && !isListViewPanel && (
 					<div className="query-names-section">
 						{currentQuery.builder.queryData.map((query) => (
 							<div key={query.queryName} className="query-name">

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

@@ -1,11 +1,7 @@
-.query-add-ons {
-	width: 100%;
-}
-
 .add-ons-list {
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
-	gap: 16px;
 
 	.add-ons-tabs {
 		display: flex;

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

@@ -9,7 +9,7 @@ import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/Orde
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { get, isEmpty } from 'lodash-es';
+import { isEmpty } from 'lodash-es';
 import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -34,14 +34,6 @@ const ADD_ONS_KEYS = {
 	LEGEND_FORMAT: 'legend_format',
 };
 
-const ADD_ONS_KEYS_TO_QUERY_PATH = {
-	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
-	[ADD_ONS_KEYS.HAVING]: 'having.expression',
-	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
-	[ADD_ONS_KEYS.LIMIT]: 'limit',
-	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
-};
-
 const ADD_ONS = [
 	{
 		icon: <BarChart2 size={14} />,
@@ -99,9 +91,6 @@ const REDUCE_TO = {
 		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
-const hasValue = (value: unknown): boolean =>
-	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
-
 // Custom tooltip content component
 function TooltipContent({
 	label,
@@ -155,7 +144,6 @@ function QueryAddOns({
 	showReduceTo,
 	panelType,
 	index,
-	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
@@ -163,7 +151,6 @@ function QueryAddOns({
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
-	isForTraceOperator?: boolean;
 }): JSX.Element {
 	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
 
@@ -173,7 +160,6 @@ function QueryAddOns({
 		index,
 		query,
 		entityVersion: '',
-		isForTraceOperator,
 	});
 
 	const { handleSetQueryData } = useQueryBuilder();
@@ -206,29 +192,21 @@ function QueryAddOns({
 			}
 		}
 
+		// add reduce to if showReduceTo is true
 		if (showReduceTo) {
 			filteredAddOns = [...filteredAddOns, REDUCE_TO];
 		}
+
 		setAddOns(filteredAddOns);
 
-		const activeAddOnKeys = new Set(
-			Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
-				.filter(([, path]) => hasValue(get(query, path)))
-				.map(([key]) => key),
-		);
-
-		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
-
-		// Filter and set selected views: add-ons that are both active and available
-		setSelectedViews(
-			ADD_ONS.filter(
-				(addOn) =>
-					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+		// Filter selectedViews to only include add-ons present in filteredAddOns
+		setSelectedViews((prevSelectedViews) =>
+			prevSelectedViews.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
 			),
 		);
-
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query]);
+	}, [panelType, isListViewPanel, query.dataSource]);
 
 	const handleOptionClick = (e: RadioChangeEvent): void => {
 		if (selectedViews.find((view) => view.key === e.target.value.key)) {
@@ -304,7 +282,7 @@ function QueryAddOns({
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
 					{selectedViews.find((view) => view.key === 'group_by') && (
-						<div className="add-on-content" data-testid="group-by-content">
+						<div className="add-on-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -340,7 +318,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'having') && (
-						<div className="add-on-content" data-testid="having-content">
+						<div className="add-on-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -372,7 +350,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'limit') && (
-						<div className="add-on-content" data-testid="limit-content">
+						<div className="add-on-content">
 							<InputWithLabel
 								label="Limit"
 								onChange={handleChangeLimit}
@@ -386,7 +364,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'order_by') && (
-						<div className="add-on-content" data-testid="order-by-content">
+						<div className="add-on-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -424,7 +402,7 @@ function QueryAddOns({
 					)}
 
 					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
-						<div className="add-on-content" data-testid="reduce-to-content">
+						<div className="add-on-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -455,7 +433,7 @@ function QueryAddOns({
 					)}
 
 					{selectedViews.find((view) => view.key === 'legend_format') && (
-						<div className="add-on-content" data-testid="legend-format-content">
+						<div className="add-on-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"

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

@@ -4,10 +4,7 @@ import { Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useMemo } from 'react';
-import {
-	IBuilderQuery,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import QueryAggregationSelect from './QueryAggregationSelect';
@@ -23,7 +20,7 @@ function QueryAggregationOptions({
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
-	queryData: IBuilderQuery | IBuilderTraceOperator;
+	queryData: IBuilderQuery;
 }): JSX.Element {
 	const showAggregationInterval = useMemo(() => {
 		// eslint-disable-next-line sonarjs/prefer-single-boolean-return

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

@@ -686,10 +686,7 @@ function QueryAggregationSelect({
 				>
 					<Info
 						size={14}
-						style={{
-							opacity: 0.9,
-							color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-						}}
+						style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
 					/>
 				</div>
 			</Tooltip>

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

@@ -1,20 +1,12 @@
-/* eslint-disable react/require-default-props */
 import { Button, Tooltip, Typography } from 'antd';
-import { DraftingCompass, Plus, Sigma } from 'lucide-react';
-import BetaTag from 'periscope/components/BetaTag/BetaTag';
+import { Plus, Sigma } from 'lucide-react';
 
 export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
-	addTraceOperator,
-	showAddFormula = true,
-	showAddTraceOperator = false,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
-	addTraceOperator?: () => void;
-	showAddTraceOperator: boolean;
-	showAddFormula?: boolean;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
@@ -30,65 +22,32 @@ export default function QueryFooter({
 					</Tooltip>
 				</div>
 
-				{showAddFormula && (
-					<div className="qb-add-formula">
-						<Tooltip
-							title={
-								<div style={{ textAlign: 'center' }}>
-									Add New Formula
-									<Typography.Link
-										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
-										target="_blank"
-										style={{ textDecoration: 'underline' }}
-									>
-										{' '}
-										<br />
-										Learn more
-									</Typography.Link>
-								</div>
-							}
+				<div className="qb-add-formula">
+					<Tooltip
+						title={
+							<div style={{ textAlign: 'center' }}>
+								Add New Formula
+								<Typography.Link
+									href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+									target="_blank"
+									style={{ textDecoration: 'underline' }}
+								>
+									{' '}
+									<br />
+									Learn more
+								</Typography.Link>
+							</div>
+						}
+					>
+						<Button
+							className="add-formula-button periscope-btn secondary"
+							icon={<Sigma size={16} />}
+							onClick={addNewFormula}
 						>
-							<Button
-								className="add-formula-button periscope-btn secondary"
-								icon={<Sigma size={16} />}
-								onClick={addNewFormula}
-							>
-								Add Formula
-							</Button>
-						</Tooltip>
-					</div>
-				)}
-				{showAddTraceOperator && (
-					<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 secondary"
-								icon={<DraftingCompass size={16} />}
-								onClick={(): void => addTraceOperator?.()}
-							>
-								<div className="qb-trace-operator-button-container-text">
-									Add Trace Matching
-									<BetaTag />
-								</div>
-							</Button>
-						</Tooltip>
-					</div>
-				)}
+							Add Formula
+						</Button>
+					</Tooltip>
+				</div>
 			</div>
 		</div>
 	);

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

@@ -7,7 +7,6 @@
 		'Helvetica Neue', sans-serif;
 
 	.query-where-clause-editor-container {
-		position: relative;
 		display: flex;
 		flex-direction: row;
 

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

@@ -23,7 +23,6 @@ import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
 	OPERATORS,
-	QUERY_BUILDER_FUNCTIONS,
 	QUERY_BUILDER_KEY_TYPES,
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
@@ -1077,11 +1076,11 @@ function QuerySearch({
 		}
 
 		if (queryContext.isInFunction) {
-			options = Object.values(QUERY_BUILDER_FUNCTIONS).map((option) => ({
-				label: option,
-				apply: `${option}()`,
-				type: 'function',
-			}));
+			options = [
+				{ label: 'HAS', type: 'function' },
+				{ label: 'HASANY', type: 'function' },
+				{ label: 'HASALL', type: 'function' },
+			];
 
 			// Add space after selection for functions
 			const optionsWithSpace = addSpaceToOptions(options);
@@ -1270,10 +1269,7 @@ function QuerySearch({
 					>
 						<Info
 							size={14}
-							style={{
-								opacity: 0.9,
-								color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-							}}
+							style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
 						/>
 					</a>
 				</Tooltip>

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

@@ -1,4 +1,3 @@
-/* eslint-disable sonarjs/cognitive-complexity */
 import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
@@ -27,12 +26,9 @@ export const QueryV2 = memo(function QueryV2({
 	query,
 	filterConfigs,
 	isListViewPanel = false,
-	showTraceOperator = false,
-	hasTraceOperator = false,
 	version,
 	showOnlyWhereClause = false,
 	signalSource = '',
-	isMultiQueryAllowed = false,
 }: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
@@ -79,15 +75,6 @@ export const QueryV2 = memo(function QueryV2({
 		dataSource,
 	]);
 
-	const showInlineQuerySearch = useMemo(() => {
-		if (!showTraceOperator) {
-			return false;
-		}
-		return (
-			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
-		);
-	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
-
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
 			handleChangeQueryData('stepInterval', value);
@@ -121,12 +108,11 @@ export const QueryV2 = memo(function QueryV2({
 			ref={ref}
 		>
 			<div className="qb-content-section">
-				{(!showOnlyWhereClause || showTraceOperator) && (
+				{!showOnlyWhereClause && (
 					<div className="qb-header-container">
 						<div className="query-actions-container">
 							<div className="query-actions-left-container">
 								<QBEntityOptions
-									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
 										(version && version === ENTITY_VERSION_V4) ||
@@ -136,7 +122,6 @@ export const QueryV2 = memo(function QueryV2({
 										false
 									}
 									isCollapsed={isCollapsed}
-									showTraceOperator={showTraceOperator}
 									entityType="query"
 									entityData={query}
 									onToggleVisibility={handleToggleDisableQuery}
@@ -154,28 +139,7 @@ export const QueryV2 = memo(function QueryV2({
 								/>
 							</div>
 
-							{!isCollapsed && showInlineQuerySearch && (
-								<div className="qb-search-filter-container">
-									<div className="query-search-container">
-										<QuerySearch
-											key={`query-search-${query.queryName}-${query.dataSource}`}
-											onChange={handleSearchChange}
-											queryData={query}
-											dataSource={dataSource}
-											signalSource={signalSource}
-										/>
-									</div>
-
-									{showSpanScopeSelector && (
-										<div className="traces-search-filter-container">
-											<div className="traces-search-filter-in">in</div>
-											<SpanScopeSelector query={query} />
-										</div>
-									)}
-								</div>
-							)}
-
-							{isMultiQueryAllowed && (
+							{!isListViewPanel && (
 								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
@@ -217,31 +181,28 @@ export const QueryV2 = memo(function QueryV2({
 								</div>
 							)}
 
-							{!showInlineQuerySearch && (
-								<div className="qb-search-filter-container">
-									<div className="query-search-container">
-										<QuerySearch
-											key={`query-search-${query.queryName}-${query.dataSource}`}
-											onChange={handleSearchChange}
-											queryData={query}
-											dataSource={dataSource}
-											signalSource={signalSource}
-										/>
-									</div>
-
-									{showSpanScopeSelector && (
-										<div className="traces-search-filter-container">
-											<div className="traces-search-filter-in">in</div>
-											<SpanScopeSelector query={query} />
-										</div>
-									)}
+							<div className="qb-search-filter-container">
+								<div className="query-search-container">
+									<QuerySearch
+										key={`query-search-${query.queryName}-${query.dataSource}`}
+										onChange={handleSearchChange}
+										queryData={query}
+										dataSource={dataSource}
+										signalSource={signalSource}
+									/>
 								</div>
-							)}
+
+								{showSpanScopeSelector && (
+									<div className="traces-search-filter-container">
+										<div className="traces-search-filter-in">in</div>
+										<SpanScopeSelector query={query} />
+									</div>
+								)}
+							</div>
 						</div>
 
 						{!showOnlyWhereClause &&
 							!isListViewPanel &&
-							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
 									dataSource={dataSource}
@@ -264,17 +225,16 @@ export const QueryV2 = memo(function QueryV2({
 							/>
 						)}
 
-						{!showOnlyWhereClause &&
-							!(hasTraceOperator && query.dataSource === DataSource.TRACES) && (
-								<QueryAddOns
-									index={index}
-									query={query}
-									version="v3"
-									isListViewPanel={isListViewPanel}
-									showReduceTo={showReduceTo}
-									panelType={panelType}
-								/>
-							)}
+						{!showOnlyWhereClause && (
+							<QueryAddOns
+								index={index}
+								query={query}
+								version="v3"
+								isListViewPanel={isListViewPanel}
+								showReduceTo={showReduceTo}
+								panelType={panelType}
+							/>
+						)}
 					</div>
 				)}
 			</div>

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

@@ -1,159 +0,0 @@
-.qb-trace-operator {
-	padding: 8px;
-	display: flex;
-	gap: 8px;
-
-	&.non-list-view {
-		padding-left: 40px;
-		position: relative;
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 24px;
-			left: 12px;
-			height: 88px;
-			width: 1px;
-			background: repeating-linear-gradient(
-				to bottom,
-				var(--bg-slate-400),
-				var(--bg-slate-400) 4px,
-				transparent 4px,
-				transparent 8px
-			);
-		}
-	}
-
-	&-arrow {
-		position: relative;
-		&::before {
-			content: '';
-			position: absolute;
-			top: 16px;
-			transform: translateY(-50%);
-			left: -26px;
-			height: 1px;
-			width: 20px;
-			background: repeating-linear-gradient(
-				to right,
-				var(--bg-slate-400),
-				var(--bg-slate-400) 4px,
-				transparent 4px,
-				transparent 8px
-			);
-		}
-
-		&::after {
-			content: '';
-			position: absolute;
-			top: 16px;
-			left: -10px;
-			transform: translateY(-50%);
-			height: 4px;
-			width: 4px;
-			border-radius: 50%;
-			background-color: var(--bg-slate-400);
-		}
-	}
-
-	&-input {
-		width: 100%;
-	}
-
-	&-container {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&-aggregation-container {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&-add-ons-container {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		gap: 16px;
-	}
-
-	&-label-with-input {
-		position: relative;
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-
-		.qb-trace-operator-editor-container {
-			flex: 1;
-		}
-
-		&.arrow-left {
-			&::before {
-				content: '';
-				position: absolute;
-				left: -16px;
-				top: 50%;
-				height: 1px;
-				width: 16px;
-				background-color: var(--bg-slate-400);
-			}
-		}
-
-		.label {
-			color: var(--bg-vanilla-400);
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			padding: 0px 8px;
-			border-right: 1px solid var(--bg-slate-400);
-		}
-	}
-}
-
-.lightMode {
-	.qb-trace-operator {
-		&-arrow {
-			&::before {
-				background: repeating-linear-gradient(
-					to right,
-					var(--bg-vanilla-300),
-					var(--bg-vanilla-300) 4px,
-					transparent 4px,
-					transparent 8px
-				);
-			}
-			&::after {
-				background-color: var(--bg-vanilla-300);
-			}
-		}
-		&.non-list-view {
-			&::before {
-				background: repeating-linear-gradient(
-					to bottom,
-					var(--bg-vanilla-300),
-					var(--bg-vanilla-300) 4px,
-					transparent 4px,
-					transparent 8px
-				);
-			}
-		}
-
-		&-label-with-input {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-
-			.label {
-				color: var(--bg-ink-500) !important;
-				border-right: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-}

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

@@ -1,119 +0,0 @@
-/* eslint-disable react/require-default-props */
-/* eslint-disable sonarjs/no-duplicate-string */
-
-import './TraceOperator.styles.scss';
-
-import { Button, Tooltip, Typography } from 'antd';
-import cx from 'classnames';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { Trash2 } from 'lucide-react';
-import { useCallback } from 'react';
-import {
-	IBuilderQuery,
-	IBuilderTraceOperator,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import QueryAddOns from '../QueryAddOns/QueryAddOns';
-import QueryAggregation from '../QueryAggregation/QueryAggregation';
-import TraceOperatorEditor from './TraceOperatorEditor';
-
-export default function TraceOperator({
-	traceOperator,
-	isListViewPanel = false,
-}: {
-	traceOperator: IBuilderTraceOperator;
-	isListViewPanel?: boolean;
-}): JSX.Element {
-	const { panelType, removeTraceOperator } = useQueryBuilder();
-	const { handleChangeQueryData } = useQueryOperations({
-		index: 0,
-		query: traceOperator,
-		entityVersion: '',
-		isForTraceOperator: true,
-	});
-
-	const handleTraceOperatorChange = useCallback(
-		(traceOperatorExpression: string) => {
-			handleChangeQueryData('expression', traceOperatorExpression);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeAggregateEvery = useCallback(
-		(value: IBuilderQuery['stepInterval']) => {
-			handleChangeQueryData('stepInterval', value);
-		},
-		[handleChangeQueryData],
-	);
-
-	const handleChangeAggregation = useCallback(
-		(value: string) => {
-			handleChangeQueryData('aggregations', [
-				{
-					expression: value,
-				},
-			]);
-		},
-		[handleChangeQueryData],
-	);
-
-	return (
-		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
-			<div className="qb-trace-operator-container">
-				<div
-					className={cx(
-						'qb-trace-operator-label-with-input',
-						!isListViewPanel && 'qb-trace-operator-arrow',
-					)}
-				>
-					<Typography.Text className="label">TRACE OPERATOR</Typography.Text>
-					<div className="qb-trace-operator-editor-container">
-						<TraceOperatorEditor
-							value={traceOperator?.expression || ''}
-							traceOperator={traceOperator}
-							onChange={handleTraceOperatorChange}
-						/>
-					</div>
-				</div>
-
-				{!isListViewPanel && (
-					<div className="qb-trace-operator-aggregation-container">
-						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
-							<QueryAggregation
-								dataSource={DataSource.TRACES}
-								key={`query-search-${traceOperator.queryName}`}
-								panelType={panelType || undefined}
-								onAggregationIntervalChange={handleChangeAggregateEvery}
-								onChange={handleChangeAggregation}
-								queryData={traceOperator}
-							/>
-						</div>
-						<div
-							className={cx(
-								'qb-trace-operator-add-ons-container',
-								!isListViewPanel && 'qb-trace-operator-arrow',
-							)}
-						>
-							<QueryAddOns
-								index={0}
-								query={traceOperator}
-								version="v3"
-								isForTraceOperator
-								isListViewPanel={false}
-								showReduceTo={false}
-								panelType={panelType}
-							/>
-						</div>
-					</div>
-				)}
-			</div>
-			<Tooltip title="Remove Trace Operator" placement="topLeft">
-				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
-					<Trash2 size={14} />
-				</Button>
-			</Tooltip>
-		</div>
-	);
-}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -1,491 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable sonarjs/no-identical-functions */
-
-import '../QuerySearch/QuerySearch.styles.scss';
-
-import { CheckCircleFilled } from '@ant-design/icons';
-import {
-	autocompletion,
-	closeCompletion,
-	CompletionContext,
-	completionKeymap,
-	CompletionResult,
-	startCompletion,
-} from '@codemirror/autocomplete';
-import { javascript } from '@codemirror/lang-javascript';
-import { Color } from '@signozhq/design-tokens';
-import { copilot } from '@uiw/codemirror-theme-copilot';
-import { githubLight } from '@uiw/codemirror-theme-github';
-import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Popover } from 'antd';
-import cx from 'classnames';
-import {
-	TRACE_OPERATOR_OPERATORS,
-	TRACE_OPERATOR_OPERATORS_LABELS,
-	TRACE_OPERATOR_OPERATORS_WITH_PRIORITY,
-} from 'constants/antlrQueryConstants';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { TriangleAlert } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { IDetailedError, IValidationResult } from 'types/antlrQueryTypes';
-import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { validateTraceOperatorQuery } from 'utils/queryValidationUtils';
-
-import { getTraceOperatorContextAtCursor } from './utils/traceOperatorContextUtils';
-import { getInvolvedQueriesInTraceOperator } from './utils/utils';
-
-// Custom extension to stop events
-const stopEventsExtension = EditorView.domEventHandlers({
-	keydown: (event) => {
-		// Stop all keyboard events from propagating to global shortcuts
-		event.stopPropagation();
-		event.stopImmediatePropagation();
-		return false; // Important for CM to know you handled it
-	},
-	input: (event) => {
-		event.stopPropagation();
-		return false;
-	},
-	focus: (event) => {
-		// Ensure focus events don't interfere with global shortcuts
-		event.stopPropagation();
-		return false;
-	},
-	blur: (event) => {
-		// Ensure blur events don't interfere with global shortcuts
-		event.stopPropagation();
-		return false;
-	},
-});
-
-interface TraceOperatorEditorProps {
-	value: string;
-	traceOperator: IBuilderTraceOperator;
-	onChange: (value: string) => void;
-	placeholder?: string;
-	onRun?: (query: string) => void;
-}
-
-function TraceOperatorEditor({
-	value,
-	onChange,
-	traceOperator,
-	placeholder = 'Enter your trace operator query',
-	onRun,
-}: TraceOperatorEditorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [isFocused, setIsFocused] = useState(false);
-	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
-	const editorRef = useRef<EditorView | null>(null);
-	const [validation, setValidation] = useState<IValidationResult>({
-		isValid: false,
-		message: '',
-		errors: [],
-	});
-	// Track if the query was changed externally (from props) vs internally (user input)
-	const [isExternalQueryChange, setIsExternalQueryChange] = useState(false);
-	const [lastExternalValue, setLastExternalValue] = useState<string>('');
-	const { currentQuery, handleRunQuery } = useQueryBuilder();
-
-	const queryOptions = useMemo(
-		() =>
-			currentQuery.builder.queryData
-				.filter((query) => query.dataSource === DataSource.TRACES) // Only show trace queries
-				.map((query) => ({
-					label: query.queryName,
-					type: 'atom',
-					apply: query.queryName,
-				})),
-		[currentQuery.builder.queryData],
-	);
-
-	const toggleSuggestions = useCallback(
-		(timeout?: number) => {
-			const timeoutId = setTimeout(() => {
-				if (!editorRef.current) return;
-				if (isFocused) {
-					startCompletion(editorRef.current);
-				} else {
-					closeCompletion(editorRef.current);
-				}
-			}, timeout);
-
-			return (): void => clearTimeout(timeoutId);
-		},
-		[isFocused],
-	);
-
-	const handleQueryValidation = (newQuery: string): void => {
-		try {
-			const validationResponse = validateTraceOperatorQuery(newQuery);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process trace operator',
-				errors: [error as IDetailedError],
-			});
-		}
-	};
-
-	// Detect external value changes and mark for validation
-	useEffect(() => {
-		const newValue = value || '';
-		if (newValue !== lastExternalValue) {
-			setIsExternalQueryChange(true);
-			setLastExternalValue(newValue);
-		}
-	}, [value, lastExternalValue]);
-
-	// Validate when the value changes externally (including on mount)
-	useEffect(() => {
-		if (isExternalQueryChange && value) {
-			handleQueryValidation(value);
-			setIsExternalQueryChange(false);
-		}
-	}, [isExternalQueryChange, value]);
-
-	// Enhanced autosuggestion function with context awareness
-	function autoSuggestions(context: CompletionContext): CompletionResult | null {
-		// This matches words before the cursor position
-		// eslint-disable-next-line no-useless-escape
-		const word = context.matchBefore(/[a-zA-Z0-9_.:/?&=#%\-\[\]]*/);
-		if (word?.from === word?.to && !context.explicit) return null;
-
-		// Get the trace operator context at the cursor position
-		const queryContext = getTraceOperatorContextAtCursor(value, cursorPos.ch);
-
-		// Define autocomplete options based on the context
-		let options: {
-			label: string;
-			type: string;
-			info?: string;
-			apply:
-				| string
-				| ((view: EditorView, completion: any, from: number, to: number) => void);
-			detail?: string;
-			boost?: number;
-		}[] = [];
-
-		// Helper function to add space after selection
-		const addSpaceAfterSelection = (
-			view: EditorView,
-			completion: any,
-			from: number,
-			to: number,
-			shouldAddSpace = true,
-		): void => {
-			view.dispatch({
-				changes: {
-					from,
-					to,
-					insert: shouldAddSpace ? `${completion.apply} ` : `${completion.apply}`,
-				},
-				selection: {
-					anchor:
-						from +
-						(shouldAddSpace ? completion.apply.length + 1 : completion.apply.length),
-				},
-			});
-			// Do not reopen here; onUpdate will handle reopening via toggleSuggestions
-		};
-
-		// Helper function to add space after selection to options
-		const addSpaceToOptions = (opts: typeof options): typeof options =>
-			opts.map((option) => {
-				const originalApply = option.apply || option.label;
-				return {
-					...option,
-					apply: (
-						view: EditorView,
-						completion: any,
-						from: number,
-						to: number,
-					): void => {
-						addSpaceAfterSelection(view, { apply: originalApply }, from, to);
-					},
-				};
-			});
-
-		if (queryContext.isInAtom) {
-			// Suggest atoms (identifiers) for trace operators
-
-			const involvedQueries = getInvolvedQueriesInTraceOperator([traceOperator]);
-
-			options = queryOptions.map((option) => ({
-				...option,
-				boost: !involvedQueries.includes(option.apply as string) ? 100 : -99,
-			}));
-
-			// Filter options based on what user is typing
-			const searchText = word?.text.toLowerCase().trim() ?? '';
-			options = options.filter((option) =>
-				option.label.toLowerCase().includes(searchText),
-			);
-
-			// Add space after selection for atoms
-			const optionsWithSpace = addSpaceToOptions(options);
-
-			return {
-				from: word?.from ?? 0,
-				to: word?.to ?? cursorPos.ch,
-				options: optionsWithSpace,
-			};
-		}
-
-		if (queryContext.isInOperator) {
-			// Suggest operators for trace operators
-			const operators = Object.values(TRACE_OPERATOR_OPERATORS);
-			options = operators.map((operator) => ({
-				label: TRACE_OPERATOR_OPERATORS_LABELS[operator]
-					? `${operator} (${TRACE_OPERATOR_OPERATORS_LABELS[operator]})`
-					: operator,
-				type: 'operator',
-				apply: operator,
-				boost: TRACE_OPERATOR_OPERATORS_WITH_PRIORITY[operator] * -10,
-			}));
-
-			// Add space after selection for operators
-			const optionsWithSpace = addSpaceToOptions(options);
-
-			return {
-				from: word?.from ?? 0,
-				to: word?.to ?? cursorPos.ch,
-				options: optionsWithSpace,
-			};
-		}
-
-		if (queryContext.isInParenthesis) {
-			// Different suggestions based on the context within parenthesis
-			const curChar = value.charAt(cursorPos.ch - 1) || '';
-
-			if (curChar === '(') {
-				// Right after opening parenthesis, suggest atoms or nested expressions
-				options = [
-					{ label: '(', type: 'parenthesis', apply: '(' },
-					...queryOptions,
-				];
-
-				// Add space after selection for opening parenthesis context
-				const optionsWithSpace = addSpaceToOptions(options);
-
-				return {
-					from: word?.from ?? 0,
-					options: optionsWithSpace,
-				};
-			}
-
-			if (curChar === ')') {
-				// After closing parenthesis, suggest operators
-				const operators = Object.values(TRACE_OPERATOR_OPERATORS);
-				options = operators.map((operator) => ({
-					label: TRACE_OPERATOR_OPERATORS_LABELS[operator]
-						? `${operator} (${TRACE_OPERATOR_OPERATORS_LABELS[operator]})`
-						: operator,
-					type: 'operator',
-					apply: operator,
-					boost: TRACE_OPERATOR_OPERATORS_WITH_PRIORITY[operator] * -10,
-				}));
-
-				// Add space after selection for closing parenthesis context
-				const optionsWithSpace = addSpaceToOptions(options);
-
-				return {
-					from: word?.from ?? 0,
-					options: optionsWithSpace,
-				};
-			}
-		}
-
-		// Default: suggest atoms if no specific context
-		options = [
-			...queryOptions,
-			{
-				label: '(',
-				type: 'parenthesis',
-				apply: '(',
-			},
-		];
-
-		// Filter options based on what user is typing
-		const searchText = word?.text.toLowerCase().trim() ?? '';
-		options = options.filter((option) =>
-			option.label.toLowerCase().includes(searchText),
-		);
-
-		// Add space after selection
-		const optionsWithSpace = addSpaceToOptions(options);
-
-		return {
-			from: word?.from ?? 0,
-			to: word?.to ?? context.pos,
-			options: optionsWithSpace,
-		};
-	}
-
-	const handleUpdate = useCallback(
-		(viewUpdate: { view: EditorView }): void => {
-			if (!editorRef.current) {
-				editorRef.current = viewUpdate.view;
-			}
-
-			const selection = viewUpdate.view.state.selection.main;
-			const pos = selection.head;
-
-			const lineInfo = viewUpdate.view.state.doc.lineAt(pos);
-			const newPos = {
-				line: lineInfo.number,
-				ch: pos - lineInfo.from,
-			};
-
-			if (newPos.line !== cursorPos.line || newPos.ch !== cursorPos.ch) {
-				setCursorPos(newPos);
-				// Trigger suggestions on context update
-				toggleSuggestions(10);
-			}
-		},
-		[cursorPos, toggleSuggestions],
-	);
-
-	const handleChange = (newValue: string): void => {
-		// Mark as internal change to avoid triggering external validation
-		setIsExternalQueryChange(false);
-		setLastExternalValue(newValue);
-		onChange(newValue);
-	};
-
-	const handleBlur = (): void => {
-		handleQueryValidation(value);
-		setIsFocused(false);
-	};
-
-	// Effect to handle focus state and trigger suggestions on focus
-	useEffect(() => {
-		const clearTimeout = toggleSuggestions(10);
-		return (): void => clearTimeout();
-	}, [isFocused, toggleSuggestions]);
-
-	return (
-		<div className="code-mirror-where-clause">
-			<div className="query-where-clause-editor-container">
-				<CodeMirror
-					value={value}
-					theme={isDarkMode ? copilot : githubLight}
-					onChange={handleChange}
-					onUpdate={handleUpdate}
-					className={cx('query-where-clause-editor', {
-						isValid: validation.isValid === true,
-						hasErrors: validation.errors.length > 0,
-					})}
-					extensions={[
-						autocompletion({
-							override: [autoSuggestions],
-							defaultKeymap: true,
-							closeOnBlur: true,
-							activateOnTyping: true,
-							maxRenderedOptions: 50,
-						}),
-						javascript({ jsx: false, typescript: false }),
-						EditorView.lineWrapping,
-						stopEventsExtension,
-						Prec.highest(
-							keymap.of([
-								...completionKeymap,
-								{
-									key: 'Escape',
-									run: closeCompletion,
-								},
-								{
-									key: 'Enter',
-									preventDefault: true,
-									// Prevent default behavior of Enter to add new line
-									// and instead run a custom action
-									run: (): boolean => true,
-								},
-								{
-									key: 'Mod-Enter',
-									preventDefault: true,
-									run: (): boolean => {
-										if (onRun && typeof onRun === 'function') {
-											onRun(value);
-										} else {
-											handleRunQuery();
-										}
-										return true;
-									},
-								},
-								{
-									key: 'Shift-Enter',
-									preventDefault: true,
-									// Prevent default behavior of Shift-Enter to add new line
-									run: (): boolean => true,
-								},
-							]),
-						),
-					]}
-					placeholder={placeholder}
-					basicSetup={{
-						lineNumbers: false,
-					}}
-					onFocus={(): void => {
-						setIsFocused(true);
-					}}
-					onBlur={handleBlur}
-				/>
-				{value && validation.isValid === false && !isFocused && (
-					<div
-						className={cx('query-status-container', {
-							hasErrors: validation.errors.length > 0,
-						})}
-					>
-						<Popover
-							placement="bottomRight"
-							showArrow={false}
-							content={
-								<div className="query-status-content">
-									<div className="query-status-content-header">
-										<div className="query-validation">
-											<div className="query-validation-errors">
-												{validation.errors.map((error) => (
-													<div key={error.message} className="query-validation-error">
-														<div className="query-validation-error">
-															{error.line}:{error.column} - {error.message}
-														</div>
-													</div>
-												))}
-											</div>
-										</div>
-									</div>
-								</div>
-							}
-							overlayClassName="query-status-popover"
-						>
-							{validation.isValid ? (
-								<Button
-									type="text"
-									icon={<CheckCircleFilled />}
-									className="periscope-btn ghost"
-								/>
-							) : (
-								<Button
-									type="text"
-									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-									className="periscope-btn ghost"
-								/>
-							)}
-						</Popover>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-TraceOperatorEditor.defaultProps = {
-	onRun: undefined,
-	placeholder: 'Enter your trace operator query',
-};
-
-export default TraceOperatorEditor;

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/__tests__/traceOperatorContextUtils.test.ts

@@ -1,425 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable sonarjs/cognitive-complexity */
-
-import { Token } from 'antlr4';
-import TraceOperatorGrammarLexer from 'parser/TraceOperatorParser/TraceOperatorGrammarLexer';
-
-import {
-	createTraceOperatorContext,
-	extractTraceExpressionPairs,
-	getTraceOperatorContextAtCursor,
-} from '../utils/traceOperatorContextUtils';
-
-describe('traceOperatorContextUtils', () => {
-	describe('createTraceOperatorContext', () => {
-		it('should create a context object with all required properties', () => {
-			const mockToken = {
-				type: TraceOperatorGrammarLexer.IDENTIFIER,
-				text: 'test',
-				start: 0,
-				stop: 3,
-			} as Token;
-
-			const context = createTraceOperatorContext(
-				mockToken,
-				true,
-				false,
-				false,
-				false,
-				'atom',
-				'operator',
-				[],
-				null,
-			);
-
-			expect(context).toEqual({
-				tokenType: TraceOperatorGrammarLexer.IDENTIFIER,
-				text: 'test',
-				start: 0,
-				stop: 3,
-				currentToken: 'test',
-				isInAtom: true,
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				atomToken: 'atom',
-				operatorToken: 'operator',
-				expressionPairs: [],
-				currentPair: null,
-			});
-		});
-
-		it('should create a context object with default values', () => {
-			const mockToken = {
-				type: TraceOperatorGrammarLexer.IDENTIFIER,
-				text: 'test',
-				start: 0,
-				stop: 3,
-			} as Token;
-
-			const context = createTraceOperatorContext(
-				mockToken,
-				false,
-				true,
-				false,
-				false,
-			);
-
-			expect(context).toEqual({
-				tokenType: TraceOperatorGrammarLexer.IDENTIFIER,
-				text: 'test',
-				start: 0,
-				stop: 3,
-				currentToken: 'test',
-				isInAtom: false,
-				isInOperator: true,
-				isInParenthesis: false,
-				isInExpression: false,
-				atomToken: undefined,
-				operatorToken: undefined,
-				expressionPairs: [],
-				currentPair: undefined,
-			});
-		});
-	});
-
-	describe('extractTraceExpressionPairs', () => {
-		it('should extract simple expression pair', () => {
-			const query = 'A => B';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(1);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].position.leftStart).toBe(0);
-			expect(result[0].position.leftEnd).toBe(0);
-			expect(result[0].operator).toBe('=>');
-			expect(result[0].position.operatorStart).toBe(2);
-			expect(result[0].position.operatorEnd).toBe(3);
-			expect(result[0].rightAtom).toBe('B');
-			expect(result[0].position.rightStart).toBe(5);
-			expect(result[0].position.rightEnd).toBe(5);
-			expect(result[0].isComplete).toBe(true);
-		});
-
-		it('should extract multiple expression pairs', () => {
-			const query = 'A => B && C => D';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(2);
-
-			// First pair: A => B
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].operator).toBe('=>');
-			expect(result[0].rightAtom).toBe('B');
-
-			// Second pair: C => D
-			expect(result[1].leftAtom).toBe('C');
-			expect(result[1].operator).toBe('=>');
-			expect(result[1].rightAtom).toBe('D');
-		});
-
-		it('should handle NOT operator', () => {
-			const query = 'NOT A => B';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(1);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].operator).toBe('=>');
-			expect(result[0].rightAtom).toBe('B');
-		});
-
-		it('should handle parentheses', () => {
-			const query = '(A => B) && (C => D)';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(2);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].rightAtom).toBe('B');
-			expect(result[1].leftAtom).toBe('C');
-			expect(result[1].rightAtom).toBe('D');
-		});
-
-		it('should handle incomplete expressions', () => {
-			const query = 'A =>';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(1);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].operator).toBe('=>');
-			expect(result[0].rightAtom).toBeUndefined();
-			expect(result[0].isComplete).toBe(true);
-		});
-
-		it('should handle complex nested expressions', () => {
-			const query = 'A => B && (C => D || E => F)';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(3);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].rightAtom).toBe('B');
-			expect(result[1].leftAtom).toBe('C');
-			expect(result[1].rightAtom).toBe('D');
-			expect(result[2].leftAtom).toBe('E');
-			expect(result[2].rightAtom).toBe('F');
-		});
-
-		it('should handle whitespace variations', () => {
-			const query = 'A=>B';
-			const result = extractTraceExpressionPairs(query);
-
-			expect(result).toHaveLength(1);
-			expect(result[0].leftAtom).toBe('A');
-			expect(result[0].operator).toBe('=>');
-			expect(result[0].rightAtom).toBe('B');
-		});
-
-		it('should handle error cases gracefully', () => {
-			const query = 'invalid syntax @#$%';
-			const result = extractTraceExpressionPairs(query);
-
-			// Should return an array (even if empty or with partial results)
-			expect(Array.isArray(result)).toBe(true);
-			expect(result.length).toBeGreaterThanOrEqual(0);
-		});
-	});
-
-	describe('getTraceOperatorContextAtCursor', () => {
-		beforeEach(() => {
-			// Reset console.error mock
-			jest.spyOn(console, 'error').mockImplementation(() => {});
-		});
-
-		afterEach(() => {
-			jest.restoreAllMocks();
-		});
-
-		it('should return default context for empty query', () => {
-			const result = getTraceOperatorContextAtCursor('', 0);
-
-			expect(result).toEqual({
-				tokenType: -1,
-				text: '',
-				start: 0,
-				stop: 0,
-				currentToken: '',
-				isInAtom: true,
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				expressionPairs: [],
-				currentPair: null,
-			});
-		});
-
-		it('should return default context for null query', () => {
-			const result = getTraceOperatorContextAtCursor(null as any, 0);
-
-			expect(result).toEqual({
-				tokenType: -1,
-				text: '',
-				start: 0,
-				stop: 0,
-				currentToken: '',
-				isInAtom: true,
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				expressionPairs: [],
-				currentPair: null,
-			});
-		});
-
-		it('should return default context for undefined query', () => {
-			const result = getTraceOperatorContextAtCursor(undefined as any, 0);
-
-			expect(result).toEqual({
-				tokenType: -1,
-				text: '',
-				start: 0,
-				stop: 0,
-				currentToken: '',
-				isInAtom: true,
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				expressionPairs: [],
-				currentPair: null,
-			});
-		});
-
-		it('should identify atom context', () => {
-			const query = 'A => B';
-			const result = getTraceOperatorContextAtCursor(query, 0); // cursor at 'A'
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(true);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(0);
-			expect(result.stop).toBe(0);
-		});
-
-		it('should identify operator context', () => {
-			const query = 'A => B';
-			const result = getTraceOperatorContextAtCursor(query, 2); // cursor at '='
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBeUndefined();
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(true);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(2);
-			expect(result.stop).toBe(2);
-		});
-
-		it('should identify parenthesis context', () => {
-			const query = '(A => B)';
-			const result = getTraceOperatorContextAtCursor(query, 0); // cursor at '('
-
-			expect(result.atomToken).toBeUndefined();
-			expect(result.operatorToken).toBeUndefined();
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(true);
-			expect(result.start).toBe(0);
-			expect(result.stop).toBe(0);
-		});
-
-		it('should handle cursor at space', () => {
-			const query = 'A => B';
-			const result = getTraceOperatorContextAtCursor(query, 1); // cursor at space
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBeUndefined();
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(true);
-			expect(result.isInParenthesis).toBe(false);
-		});
-
-		it('should handle cursor at end of query', () => {
-			const query = 'A => B';
-			const result = getTraceOperatorContextAtCursor(query, 5); // cursor at end
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(true);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(5);
-			expect(result.stop).toBe(5);
-		});
-
-		it('should handle complex query', () => {
-			const query = 'A => B && C => D';
-			const result = getTraceOperatorContextAtCursor(query, 8); // cursor at '&'
-
-			expect(result.atomToken).toBeUndefined();
-			expect(result.operatorToken).toBe('&&');
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(true);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(7);
-			expect(result.stop).toBe(8);
-		});
-
-		it('should identify operator position in complex query', () => {
-			const query = 'A => B && C => D';
-			const result = getTraceOperatorContextAtCursor(query, 10); // cursor at 'C'
-
-			expect(result.atomToken).toBe('C');
-			expect(result.operatorToken).toBe('&&');
-			expect(result.isInAtom).toBe(true);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(10);
-			expect(result.stop).toBe(10);
-		});
-
-		it('should identify atom position in complex query', () => {
-			const query = 'A => B && C => D';
-			const result = getTraceOperatorContextAtCursor(query, 13); // cursor at '>'
-
-			expect(result.atomToken).toBe('C');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(true);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(12);
-			expect(result.stop).toBe(13);
-		});
-
-		it('should handle transition points', () => {
-			const query = 'A => B';
-			const result = getTraceOperatorContextAtCursor(query, 4); // cursor at 'B'
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(true);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(4);
-			expect(result.stop).toBe(4);
-		});
-
-		it('should handle whitespace in complex queries', () => {
-			const query = 'A=>B && C=>D';
-			const result = getTraceOperatorContextAtCursor(query, 6); // cursor at '&'
-
-			expect(result.atomToken).toBeUndefined();
-			expect(result.operatorToken).toBe('&&');
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(true);
-			expect(result.isInParenthesis).toBe(false);
-			expect(result.start).toBe(5);
-			expect(result.stop).toBe(6);
-		});
-
-		it('should handle NOT operator context', () => {
-			const query = 'NOT A => B';
-			const result = getTraceOperatorContextAtCursor(query, 0); // cursor at 'N'
-
-			expect(result.atomToken).toBeUndefined();
-			expect(result.operatorToken).toBeUndefined();
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(true);
-		});
-
-		it('should handle parentheses context', () => {
-			const query = '(A => B)';
-			const result = getTraceOperatorContextAtCursor(query, 1); // cursor at 'A'
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(false);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(true);
-			expect(result.start).toBe(0);
-			expect(result.stop).toBe(0);
-		});
-
-		it('should handle expression pairs context', () => {
-			const query = 'A => B && C => D';
-			const result = getTraceOperatorContextAtCursor(query, 5); // cursor at 'A' in "&&"
-
-			expect(result.atomToken).toBe('A');
-			expect(result.operatorToken).toBe('=>');
-			expect(result.isInAtom).toBe(true);
-			expect(result.isInOperator).toBe(false);
-			expect(result.isInParenthesis).toBe(false);
-		});
-
-		it('should handle various cursor positions', () => {
-			const query = 'A => B';
-
-			// Test cursor at each position
-			for (let i = 0; i < query.length; i++) {
-				const result = getTraceOperatorContextAtCursor(query, i);
-				expect(result).toBeDefined();
-				expect(typeof result.start).toBe('number');
-				expect(typeof result.stop).toBe('number');
-			}
-		});
-	});
-});

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

@@ -1,46 +0,0 @@
-import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
-
-import { getInvolvedQueriesInTraceOperator } from '../utils/utils';
-
-const makeTraceOperator = (expression: string): IBuilderTraceOperator =>
-	(({ expression } as unknown) as IBuilderTraceOperator);
-
-describe('getInvolvedQueriesInTraceOperator', () => {
-	it('returns empty array for empty input', () => {
-		const result = getInvolvedQueriesInTraceOperator([]);
-		expect(result).toEqual([]);
-	});
-
-	it('extracts identifiers from expression', () => {
-		const result = getInvolvedQueriesInTraceOperator([
-			makeTraceOperator('A => B'),
-		]);
-		expect(result).toEqual(['A', 'B']);
-	});
-
-	it('extracts identifiers from complex expression', () => {
-		const result = getInvolvedQueriesInTraceOperator([
-			makeTraceOperator('A => (NOT B || C)'),
-		]);
-		expect(result).toEqual(['A', 'B', 'C']);
-	});
-
-	it('filters out querynames from complex expression', () => {
-		const result = getInvolvedQueriesInTraceOperator([
-			makeTraceOperator(
-				'(A1 && (NOT B2 || (C3 -> (D4 && E5)))) => ((F6 || G7) && (NOT (H8 -> I9)))',
-			),
-		]);
-		expect(result).toEqual([
-			'A1',
-			'B2',
-			'C3',
-			'D4',
-			'E5',
-			'F6',
-			'G7',
-			'H8',
-			'I9',
-		]);
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/traceOperatorContextUtils.ts

@@ -1,562 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-continue */
-
-import { CharStreams, CommonTokenStream, Token } from 'antlr4';
-import TraceOperatorGrammarLexer from 'parser/TraceOperatorParser/TraceOperatorGrammarLexer';
-import { IToken } from 'types/antlrQueryTypes';
-
-// Trace Operator Context Interface
-export interface ITraceOperatorContext {
-	tokenType: number;
-	text: string;
-	start: number;
-	stop: number;
-	currentToken: string;
-	isInAtom: boolean;
-	isInOperator: boolean;
-	isInParenthesis: boolean;
-	isInExpression: boolean;
-	atomToken?: string;
-	operatorToken?: string;
-	expressionPairs: ITraceExpressionPair[];
-	currentPair?: ITraceExpressionPair | null;
-}
-
-// Trace Expression Pair Interface
-export interface ITraceExpressionPair {
-	leftAtom: string;
-	operator: string;
-	rightAtom?: string;
-	rightExpression?: string;
-	position: {
-		leftStart: number;
-		leftEnd: number;
-		operatorStart: number;
-		operatorEnd: number;
-		rightStart?: number;
-		rightEnd?: number;
-	};
-	isComplete: boolean;
-}
-
-// Helper functions to determine token types
-function isAtomToken(tokenType: number): boolean {
-	return tokenType === TraceOperatorGrammarLexer.IDENTIFIER;
-}
-
-function isOperatorToken(tokenType: number): boolean {
-	return [
-		TraceOperatorGrammarLexer.T__2, // '=>'
-		TraceOperatorGrammarLexer.T__3, // '&&'
-		TraceOperatorGrammarLexer.T__4, // '||'
-		TraceOperatorGrammarLexer.T__5, // 'NOT'
-		TraceOperatorGrammarLexer.T__6, // '->'
-	].includes(tokenType);
-}
-
-function isParenthesisToken(tokenType: number): boolean {
-	return (
-		tokenType === TraceOperatorGrammarLexer.T__0 ||
-		tokenType === TraceOperatorGrammarLexer.T__1
-	);
-}
-
-function isOpeningParenthesis(tokenType: number): boolean {
-	return tokenType === TraceOperatorGrammarLexer.T__0;
-}
-
-function isClosingParenthesis(tokenType: number): boolean {
-	return tokenType === TraceOperatorGrammarLexer.T__1;
-}
-
-// Function to create a context object
-export function createTraceOperatorContext(
-	token: Token,
-	isInAtom: boolean,
-	isInOperator: boolean,
-	isInParenthesis: boolean,
-	isInExpression: boolean,
-	atomToken?: string,
-	operatorToken?: string,
-	expressionPairs?: ITraceExpressionPair[],
-	currentPair?: ITraceExpressionPair | null,
-): ITraceOperatorContext {
-	return {
-		tokenType: token.type,
-		text: token.text || '',
-		start: token.start,
-		stop: token.stop,
-		currentToken: token.text || '',
-		isInAtom,
-		isInOperator,
-		isInParenthesis,
-		isInExpression,
-		atomToken,
-		operatorToken,
-		expressionPairs: expressionPairs || [],
-		currentPair,
-	};
-}
-
-// Helper to determine token context
-function determineTraceTokenContext(
-	token: IToken,
-): {
-	isInAtom: boolean;
-	isInOperator: boolean;
-	isInParenthesis: boolean;
-	isInExpression: boolean;
-} {
-	const tokenType = token.type;
-
-	return {
-		isInAtom: isAtomToken(tokenType),
-		isInOperator: isOperatorToken(tokenType),
-		isInParenthesis: isParenthesisToken(tokenType),
-		isInExpression: false, // Will be determined by broader context
-	};
-}
-
-/**
- * Extracts all expression pairs from a trace operator query string
- * This parses the query according to the TraceOperatorGrammar.g4 grammar
- *
- * @param query The trace operator query string to parse
- * @returns An array of ITraceExpressionPair objects representing the expression pairs
- */
-export function extractTraceExpressionPairs(
-	query: string,
-): ITraceExpressionPair[] {
-	try {
-		const input = query || '';
-		const chars = CharStreams.fromString(input);
-		const lexer = new TraceOperatorGrammarLexer(chars);
-
-		const tokenStream = new CommonTokenStream(lexer);
-		tokenStream.fill();
-
-		const allTokens = tokenStream.tokens as IToken[];
-		const expressionPairs: ITraceExpressionPair[] = [];
-		let currentPair: Partial<ITraceExpressionPair> | null = null;
-
-		let i = 0;
-		while (i < allTokens.length) {
-			const token = allTokens[i];
-			i++;
-
-			// Skip EOF and whitespace tokens
-			if (token.type === TraceOperatorGrammarLexer.EOF || token.channel !== 0) {
-				continue;
-			}
-
-			// If token is an IDENTIFIER (atom), start or continue a pair
-			if (isAtomToken(token.type)) {
-				// If we don't have a current pair, start one
-				if (!currentPair) {
-					currentPair = {
-						leftAtom: token.text,
-						position: {
-							leftStart: token.start,
-							leftEnd: token.stop,
-							operatorStart: 0,
-							operatorEnd: 0,
-						},
-					};
-				}
-				// If we have a current pair but no operator yet, this is still the left atom
-				else if (!currentPair.operator && currentPair.position) {
-					currentPair.leftAtom = token.text;
-					currentPair.position.leftStart = token.start;
-					currentPair.position.leftEnd = token.stop;
-				}
-				// If we have an operator, this is the right atom
-				else if (
-					currentPair.operator &&
-					!currentPair.rightAtom &&
-					currentPair.position
-				) {
-					currentPair.rightAtom = token.text;
-					currentPair.position.rightStart = token.start;
-					currentPair.position.rightEnd = token.stop;
-					currentPair.isComplete = true;
-
-					// Add the completed pair to the result
-					expressionPairs.push(currentPair as ITraceExpressionPair);
-					currentPair = null;
-				}
-			}
-			// If token is an operator and we have a left atom
-			else if (
-				isOperatorToken(token.type) &&
-				currentPair &&
-				currentPair.leftAtom &&
-				currentPair.position
-			) {
-				currentPair.operator = token.text;
-				currentPair.position.operatorStart = token.start;
-				currentPair.position.operatorEnd = token.stop;
-
-				// If this is a NOT operator, it might be followed by another operator
-				if (token.type === TraceOperatorGrammarLexer.T__5 && i < allTokens.length) {
-					// Look ahead for the next operator
-					const nextToken = allTokens[i];
-					if (isOperatorToken(nextToken.type) && nextToken.channel === 0) {
-						currentPair.operator = `${token.text} ${nextToken.text}`;
-						currentPair.position.operatorEnd = nextToken.stop;
-						i++; // Skip the next token since we've consumed it
-					}
-				}
-			}
-			// If token is an opening parenthesis after an operator, this is a right expression
-			else if (
-				isOpeningParenthesis(token.type) &&
-				currentPair &&
-				currentPair.operator &&
-				!currentPair.rightAtom &&
-				currentPair.position
-			) {
-				// Find the matching closing parenthesis
-				let parenCount = 1;
-				let j = i;
-				let rightExpression = '';
-				const rightStart = token.start;
-				let rightEnd = token.stop;
-
-				while (j < allTokens.length && parenCount > 0) {
-					const parenToken = allTokens[j];
-					if (parenToken.channel === 0) {
-						if (isOpeningParenthesis(parenToken.type)) {
-							parenCount++;
-						} else if (isClosingParenthesis(parenToken.type)) {
-							parenCount--;
-							if (parenCount === 0) {
-								rightEnd = parenToken.stop;
-								break;
-							}
-						}
-					}
-					rightExpression += parenToken.text;
-					j++;
-				}
-
-				if (parenCount === 0) {
-					currentPair.rightExpression = rightExpression;
-					currentPair.position.rightStart = rightStart;
-					currentPair.position.rightEnd = rightEnd;
-					currentPair.isComplete = true;
-
-					// Add the completed pair to the result
-					expressionPairs.push(currentPair as ITraceExpressionPair);
-					currentPair = null;
-
-					// Skip to the end of the expression
-					i = j;
-				}
-			}
-		}
-
-		// Add any remaining incomplete pair
-		if (currentPair && currentPair.leftAtom && currentPair.position) {
-			expressionPairs.push({
-				...currentPair,
-				isComplete: !!(currentPair.leftAtom && currentPair.operator),
-			} as ITraceExpressionPair);
-		}
-
-		return expressionPairs;
-	} catch (error) {
-		console.error('Error in extractTraceExpressionPairs:', error);
-		return [];
-	}
-}
-
-/**
- * Gets the current expression pair at the cursor position
- *
- * @param expressionPairs An array of ITraceExpressionPair objects
- * @param query The full query string
- * @param cursorIndex The position of the cursor in the query
- * @returns The expression pair at the cursor position, or null if not found
- */
-export function getCurrentTraceExpressionPair(
-	expressionPairs: ITraceExpressionPair[],
-	cursorIndex: number,
-): ITraceExpressionPair | null {
-	try {
-		if (expressionPairs.length === 0) {
-			return null;
-		}
-
-		// Find the rightmost pair whose end position is before or at the cursor
-		let bestMatch: ITraceExpressionPair | null = null;
-
-		// eslint-disable-next-line no-restricted-syntax
-		for (const pair of expressionPairs) {
-			const { position } = pair;
-			const pairEnd =
-				position.rightEnd || position.operatorEnd || position.leftEnd;
-			const pairStart = position.leftStart;
-
-			// If this pair ends at or before the cursor, and it's further right than our previous best match
-			if (
-				pairStart <= cursorIndex &&
-				cursorIndex <= pairEnd + 1 &&
-				(!bestMatch ||
-					pairEnd >
-						(bestMatch.position.rightEnd ||
-							bestMatch.position.operatorEnd ||
-							bestMatch.position.leftEnd))
-			) {
-				bestMatch = pair;
-			}
-		}
-
-		return bestMatch;
-	} catch (error) {
-		console.error('Error in getCurrentTraceExpressionPair:', error);
-		return null;
-	}
-}
-
-/**
- * Gets the current trace operator context at the cursor position
- * This is useful for determining what kind of suggestions to show
- *
- * @param query The trace operator query string
- * @param cursorIndex The position of the cursor in the query
- * @returns The trace operator context at the cursor position
- */
-export function getTraceOperatorContextAtCursor(
-	query: string,
-	cursorIndex: number,
-): ITraceOperatorContext {
-	try {
-		// Guard against infinite recursion
-		const stackTrace = new Error().stack || '';
-		const callCount = (stackTrace.match(/getTraceOperatorContextAtCursor/g) || [])
-			.length;
-		if (callCount > 3) {
-			console.warn(
-				'Potential infinite recursion detected in getTraceOperatorContextAtCursor',
-			);
-			return {
-				tokenType: -1,
-				text: '',
-				start: cursorIndex,
-				stop: cursorIndex,
-				currentToken: '',
-				isInAtom: true,
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				expressionPairs: [],
-				currentPair: null,
-			};
-		}
-
-		// Create input stream and lexer
-		const input = query || '';
-		const chars = CharStreams.fromString(input);
-		const lexer = new TraceOperatorGrammarLexer(chars);
-
-		const tokenStream = new CommonTokenStream(lexer);
-		tokenStream.fill();
-
-		const allTokens = tokenStream.tokens as IToken[];
-
-		// Get expression pairs information
-		const expressionPairs = extractTraceExpressionPairs(query);
-		const currentPair = getCurrentTraceExpressionPair(
-			expressionPairs,
-			cursorIndex,
-		);
-
-		// Find the token at or just before the cursor
-		let lastTokenBeforeCursor: IToken | null = null;
-		for (let i = 0; i < allTokens.length; i++) {
-			const token = allTokens[i];
-			if (token.type === TraceOperatorGrammarLexer.EOF) continue;
-
-			if (token.stop < cursorIndex || token.stop + 1 === cursorIndex) {
-				lastTokenBeforeCursor = token;
-			}
-
-			if (token.start > cursorIndex) {
-				break;
-			}
-		}
-
-		// Find exact token at cursor
-		let exactToken: IToken | null = null;
-		for (let i = 0; i < allTokens.length; i++) {
-			const token = allTokens[i];
-			if (token.type === TraceOperatorGrammarLexer.EOF) continue;
-
-			if (token.start <= cursorIndex && cursorIndex <= token.stop + 1) {
-				exactToken = token;
-				break;
-			}
-		}
-
-		// If we don't have any tokens, return default context
-		if (!lastTokenBeforeCursor && !exactToken) {
-			return {
-				tokenType: -1,
-				text: '',
-				start: cursorIndex,
-				stop: cursorIndex,
-				currentToken: '',
-				isInAtom: true, // Default to atom context when input is empty
-				isInOperator: false,
-				isInParenthesis: false,
-				isInExpression: false,
-				expressionPairs,
-				currentPair: null,
-			};
-		}
-
-		// Check if cursor is at a space after a token (transition point)
-		const isAtSpace = cursorIndex < query.length && query[cursorIndex] === ' ';
-		const isAfterSpace = cursorIndex > 0 && query[cursorIndex - 1] === ' ';
-		const isAfterToken = cursorIndex > 0 && query[cursorIndex - 1] !== ' ';
-		const isTransitionPoint =
-			(isAtSpace && isAfterToken) ||
-			(cursorIndex === query.length && isAfterToken);
-
-		// If we're at a transition point after a token, progress the context
-		if (
-			lastTokenBeforeCursor &&
-			(isAtSpace || isAfterSpace || isTransitionPoint)
-		) {
-			const lastTokenContext = determineTraceTokenContext(lastTokenBeforeCursor);
-
-			// Apply context progression: atom → operator → atom/expression → operator → atom
-			if (lastTokenContext.isInAtom) {
-				// After atom + space, move to operator context
-				return {
-					tokenType: lastTokenBeforeCursor.type,
-					text: lastTokenBeforeCursor.text,
-					start: cursorIndex,
-					stop: cursorIndex,
-					currentToken: lastTokenBeforeCursor.text,
-					isInAtom: false,
-					isInOperator: true,
-					isInParenthesis: false,
-					isInExpression: false,
-					atomToken: lastTokenBeforeCursor.text,
-					expressionPairs,
-					currentPair,
-				};
-			}
-
-			if (lastTokenContext.isInOperator) {
-				// After operator + space, move to atom/expression context
-				return {
-					tokenType: lastTokenBeforeCursor.type,
-					text: lastTokenBeforeCursor.text,
-					start: cursorIndex,
-					stop: cursorIndex,
-					currentToken: lastTokenBeforeCursor.text,
-					isInAtom: true, // Expecting an atom or expression after operator
-					isInOperator: false,
-					isInParenthesis: false,
-					isInExpression: false,
-					operatorToken: lastTokenBeforeCursor.text,
-					atomToken: currentPair?.leftAtom,
-					expressionPairs,
-					currentPair,
-				};
-			}
-
-			if (
-				lastTokenContext.isInParenthesis &&
-				isClosingParenthesis(lastTokenBeforeCursor.type)
-			) {
-				// After closing parenthesis, move to operator context
-				return {
-					tokenType: lastTokenBeforeCursor.type,
-					text: lastTokenBeforeCursor.text,
-					start: cursorIndex,
-					stop: cursorIndex,
-					currentToken: lastTokenBeforeCursor.text,
-					isInAtom: false,
-					isInOperator: true,
-					isInParenthesis: false,
-					isInExpression: false,
-					expressionPairs,
-					currentPair,
-				};
-			}
-		}
-
-		// If cursor is at the end of a token, return the current token context
-		if (exactToken && cursorIndex === exactToken.stop + 1) {
-			const tokenContext = determineTraceTokenContext(exactToken);
-
-			return {
-				tokenType: exactToken.type,
-				text: exactToken.text,
-				start: exactToken.start,
-				stop: exactToken.stop,
-				currentToken: exactToken.text,
-				...tokenContext,
-				atomToken: tokenContext.isInAtom ? exactToken.text : currentPair?.leftAtom,
-				operatorToken: tokenContext.isInOperator
-					? exactToken.text
-					: currentPair?.operator,
-				expressionPairs,
-				currentPair,
-			};
-		}
-
-		// Regular token-based context detection
-		if (exactToken?.channel === 0) {
-			const tokenContext = determineTraceTokenContext(exactToken);
-
-			return {
-				tokenType: exactToken.type,
-				text: exactToken.text,
-				start: exactToken.start,
-				stop: exactToken.stop,
-				currentToken: exactToken.text,
-				...tokenContext,
-				atomToken: tokenContext.isInAtom ? exactToken.text : currentPair?.leftAtom,
-				operatorToken: tokenContext.isInOperator
-					? exactToken.text
-					: currentPair?.operator,
-				expressionPairs,
-				currentPair,
-			};
-		}
-
-		// Default fallback to atom context
-		return {
-			tokenType: -1,
-			text: '',
-			start: cursorIndex,
-			stop: cursorIndex,
-			currentToken: '',
-			isInAtom: true,
-			isInOperator: false,
-			isInParenthesis: false,
-			isInExpression: false,
-			expressionPairs,
-			currentPair,
-		};
-	} catch (error) {
-		console.error('Error in getTraceOperatorContextAtCursor:', error);
-		return {
-			tokenType: -1,
-			text: '',
-			start: cursorIndex,
-			stop: cursorIndex,
-			currentToken: '',
-			isInAtom: true,
-			isInOperator: false,
-			isInParenthesis: false,
-			isInExpression: false,
-			expressionPairs: [],
-			currentPair: null,
-		};
-	}
-}

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils.ts

@@ -1,22 +0,0 @@
-import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
-
-export const getInvolvedQueriesInTraceOperator = (
-	traceOperators: IBuilderTraceOperator[],
-): string[] => {
-	if (
-		!traceOperators ||
-		traceOperators.length === 0 ||
-		traceOperators.length > 1
-	)
-		return [];
-
-	const currentTraceOperator = traceOperators[0];
-
-	// Match any word starting with letter or underscore
-	const tokens =
-		currentTraceOperator.expression.match(/\b[A-Za-z_][A-Za-z0-9_]*\b/g) || [];
-
-	// Filter out operator keywords
-	const operators = new Set(['NOT']);
-	return tokens.filter((t) => !operators.has(t));
-};

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

@@ -1,186 +0,0 @@
-/* eslint-disable */
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import QueryAddOns from '../QueryV2/QueryAddOns/QueryAddOns';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-// Mocks: only what is required for this component to render and for us to assert handler calls
-const mockHandleChangeQueryData = jest.fn();
-const mockHandleSetQueryData = jest.fn();
-
-jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
-	useQueryOperations: () => ({
-		handleChangeQueryData: mockHandleChangeQueryData,
-	}),
-}));
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: () => ({
-		handleSetQueryData: mockHandleSetQueryData,
-	}),
-}));
-
-jest.mock('container/QueryBuilder/filters/GroupByFilter/GroupByFilter', () => ({
-	GroupByFilter: ({ onChange }: any) => (
-		<button data-testid="groupby" onClick={() => onChange(['service.name'])}>
-			GroupByFilter
-		</button>
-	),
-}));
-
-jest.mock('container/QueryBuilder/filters/OrderByFilter/OrderByFilter', () => ({
-	OrderByFilter: ({ onChange }: any) => (
-		<button
-			data-testid="orderby"
-			onClick={() => onChange([{ columnName: 'duration', order: 'desc' }])}
-		>
-			OrderByFilter
-		</button>
-	),
-}));
-
-jest.mock('../QueryV2/QueryAddOns/HavingFilter/HavingFilter', () => ({
-	__esModule: true,
-	default: ({ onChange, onClose }: any) => (
-		<div>
-			<button data-testid="having-change" onClick={() => onChange('p99 > 500')}>
-				HavingFilter
-			</button>
-			<button data-testid="having-close" onClick={onClose}>
-				close
-			</button>
-		</div>
-	),
-}));
-
-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 {
-		dataSource: DataSource.TRACES,
-		aggregations: [{ id: 'a', operator: 'count' }],
-		groupBy: [],
-		orderBy: [],
-		legend: '',
-		limit: null,
-		having: { expression: '' },
-		...overrides,
-	};
-}
-
-describe('QueryAddOns', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('VALUE panel: no sections auto-open when query has no active add-ons', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery()}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo
-				panelType={PANEL_TYPES.VALUE}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.queryByTestId('legend-format-content')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('reduce-to-content')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('order-by-content')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('limit-content')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('group-by-content')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('having-content')).not.toBeInTheDocument();
-	});
-
-	it('hides group-by section for METRICS even if groupBy is set in query', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery({
-					dataSource: DataSource.METRICS,
-					groupBy: ['service.name'],
-				})}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.queryByTestId('group-by-content')).not.toBeInTheDocument();
-	});
-
-	it('defaults to Order By open in list view panel', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery()}
-				version="v5"
-				isListViewPanel
-				showReduceTo={false}
-				panelType={PANEL_TYPES.LIST}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('order-by-content')).toBeInTheDocument();
-	});
-
-	it('limit input auto-opens when limit is set and changing it calls handler', () => {
-		render(
-			<QueryAddOns
-				query={baseQuery({ limit: 5 })}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		const input = screen.getByTestId('input-Limit') as HTMLInputElement;
-		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
-		expect(input.value).toBe('5');
-
-		fireEvent.change(input, { target: { value: '10' } });
-		expect(mockHandleChangeQueryData).toHaveBeenCalledWith('limit', 10);
-	});
-
-	it('auto-opens Order By and Limit when present in query', () => {
-		const query = baseQuery({
-			orderBy: [{ columnName: 'duration', order: 'desc' }],
-			limit: 7,
-		});
-		render(
-			<QueryAddOns
-				query={query}
-				version="v5"
-				isListViewPanel={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('order-by-content')).toBeInTheDocument();
-		const limitInput = screen.getByTestId('input-Limit') as HTMLInputElement;
-		expect(screen.getByTestId('limit-content')).toBeInTheDocument();
-		expect(limitInput.value).toBe('7');
-	});
-});

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -50,7 +50,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		filterConfig,
 		isDynamicFilters,
 		customFilters,
-		refetchCustomFilters,
+		setIsStale,
 		isCustomFiltersLoading,
 	} = useFilterConfig({ signal, config });
 
@@ -263,7 +263,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							signal={signal}
 							setIsSettingsOpen={setIsSettingsOpen}
 							customFilters={customFilters}
-							refetchCustomFilters={refetchCustomFilters}
+							setIsStale={setIsStale}
 						/>
 					)}
 				</div>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -14,12 +14,12 @@ function QuickFiltersSettings({
 	signal,
 	setIsSettingsOpen,
 	customFilters,
-	refetchCustomFilters,
+	setIsStale,
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: FilterType[];
-	refetchCustomFilters: () => void;
+	setIsStale: (isStale: boolean) => void;
 }): JSX.Element {
 	const {
 		handleSettingsClose,
@@ -34,7 +34,7 @@ function QuickFiltersSettings({
 	} = useQuickFilterSettings({
 		setIsSettingsOpen,
 		customFilters,
-		refetchCustomFilters,
+		setIsStale,
 		signal,
 	});
 

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -12,7 +12,7 @@ import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
 	customFilters: FilterType[];
-	refetchCustomFilters: () => void;
+	setIsStale: (isStale: boolean) => void;
 	signal?: SignalType;
 }
 
@@ -32,7 +32,7 @@ interface UseQuickFilterSettingsReturn {
 const useQuickFilterSettings = ({
 	customFilters,
 	setIsSettingsOpen,
-	refetchCustomFilters,
+	setIsStale,
 	signal,
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -46,7 +46,7 @@ const useQuickFilterSettings = ({
 	} = useMutation(updateCustomFiltersAPI, {
 		onSuccess: () => {
 			setIsSettingsOpen(false);
-			refetchCustomFilters();
+			setIsStale(true);
 			logEvent('Quick Filters Settings: changes saved', {
 				addedFilters,
 			});

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,8 +1,12 @@
 import getCustomFilters from 'api/quickFilters/getCustomFilters';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	Filter as FilterType,
+	PayloadProps,
+} from 'types/api/quickFilters/getCustomFilters';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -14,34 +18,37 @@ interface UseFilterConfigProps {
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
 	customFilters: FilterType[];
+	setCustomFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
-	refetchCustomFilters: () => void;
+	setIsStale: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const useFilterConfig = ({
 	signal,
 	config,
 }: UseFilterConfigProps): UseFilterConfigReturn => {
-	const {
-		isFetching: isCustomFiltersLoading,
-		data: customFilters = [],
-		refetch,
-	} = useQuery<FilterType[], Error>(
-		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
-		async () => {
-			const res = await getCustomFilters({ signal: signal || '' });
-			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
-		},
-		{
-			enabled: !!signal,
-		},
-	);
-
+	const [customFilters, setCustomFilters] = useState<FilterType[]>([]);
+	const [isStale, setIsStale] = useState(true);
 	const isDynamicFilters = useMemo(() => customFilters.length > 0, [
 		customFilters,
 	]);
-
+	const { isFetching: isCustomFiltersLoading } = useQuery<
+		SuccessResponse<PayloadProps> | ErrorResponse,
+		Error
+	>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		() => getCustomFilters({ signal: signal || '' }),
+		{
+			onSuccess: (data) => {
+				if ('payload' in data && data.payload?.filters) {
+					setCustomFilters(data.payload.filters || ([] as FilterType[]));
+				}
+				setIsStale(false);
+			},
+			enabled: !!signal && isStale,
+		},
+	);
 	const filterConfig = useMemo(
 		() => getFilterConfig(signal, customFilters, config),
 		[config, customFilters, signal],
@@ -50,9 +57,10 @@ const useFilterConfig = ({
 	return {
 		filterConfig,
 		customFilters,
+		setCustomFilters,
 		isCustomFiltersLoading,
 		isDynamicFilters,
-		refetchCustomFilters: refetch,
+		setIsStale,
 	};
 };
 

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

@@ -1,6 +1,15 @@
 import '@testing-library/jest-dom';
 
+import {
+	act,
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import { ENVIRONMENT } from 'constants/env';
+import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
 	otherFiltersResponse,
@@ -9,7 +18,8 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { USER_ROLES } from 'types/roles';
 
 import QuickFilters from '../QuickFilters';
 import { IQuickFiltersConfig, QuickFiltersSource, SignalType } from '../types';
@@ -19,6 +29,21 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
 
+// eslint-disable-next-line sonarjs/no-duplicate-string
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
+	}),
+}));
+
+const userRole = USER_ROLES.ADMIN;
+
+// mock useAppContext
+jest.mock('providers/App/App', () => ({
+	useAppContext: jest.fn(() => ({ user: { role: userRole } })),
+}));
+
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
@@ -53,10 +78,11 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
+
+		rest.get(quickFiltersAttributeValuesURL, (req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
-		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+		rest.get(fieldsValuesURL, (req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -70,12 +96,14 @@ function TestQuickFilters({
 	config?: IQuickFiltersConfig[];
 }): JSX.Element {
 	return (
-		<QuickFilters
-			source={QuickFiltersSource.EXCEPTIONS}
-			config={config}
-			handleFilterVisibilityChange={handleFilterVisibilityChange}
-			signal={signal}
-		/>
+		<MockQueryClientProvider>
+			<QuickFilters
+				source={QuickFiltersSource.EXCEPTIONS}
+				config={config}
+				handleFilterVisibilityChange={handleFilterVisibilityChange}
+				signal={signal}
+			/>
+		</MockQueryClientProvider>
 	);
 }
 
@@ -90,11 +118,11 @@ beforeAll(() => {
 
 afterEach(() => {
 	server.resetHandlers();
-	jest.clearAllMocks();
 });
 
 afterAll(() => {
 	server.close();
+	cleanup();
 });
 
 beforeEach(() => {
@@ -123,13 +151,9 @@ describe('Quick Filters', () => {
 	});
 
 	it('should add filter data to query when checkbox is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters />);
-
-		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
-		const target = await screen.findByText('mq-kafka');
-		await user.click(target);
+		const checkbox = screen.getByText('mq-kafka');
+		fireEvent.click(checkbox);
 
 		await waitFor(() => {
 			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
@@ -158,20 +182,16 @@ describe('Quick Filters', () => {
 
 describe('Quick Filters with custom filters', () => {
 	it('loads the custom filters correctly', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters signal={SIGNAL} />);
-
 		expect(screen.getByText('Filters for')).toBeInTheDocument();
 		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
-
 		await screen.findByText(FILTER_SERVICE_NAME);
 		const allByText = await screen.findAllByText('otel-demo');
+		// since 2 filter collapse are open, there are 2 filter items visible
 		expect(allByText).toHaveLength(2);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
+		fireEvent.click(icon);
 
 		expect(await screen.findByText('Edit quick filters')).toBeInTheDocument();
 
@@ -187,19 +207,16 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
+		fireEvent.click(icon);
 
 		const otherFilterItem = await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME);
 		const addButton = otherFilterItem.parentElement?.querySelector('button');
 		expect(addButton).not.toBeNull();
-		await user.click(addButton as HTMLButtonElement);
+		fireEvent.click(addButton as HTMLButtonElement);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		await waitFor(() => {
@@ -208,21 +225,17 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('removes a filter from ADDED FILTERS and moves it to OTHER FILTERS', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
+		fireEvent.click(icon);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-
-		await user.click(removeBtn as HTMLButtonElement);
+		fireEvent.click(removeBtn as HTMLButtonElement);
 
 		await waitFor(() => {
 			expect(addedSection).not.toContainElement(
@@ -237,20 +250,17 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('restores original filter state on Discard', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
+		fireEvent.click(icon);
 
 		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-		await user.click(removeBtn as HTMLButtonElement);
+		fireEvent.click(removeBtn as HTMLButtonElement);
 
 		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
 		await waitFor(() => {
@@ -262,11 +272,7 @@ describe('Quick Filters with custom filters', () => {
 			);
 		});
 
-		const discardBtn = screen
-			.getByText(DISCARD_TEXT)
-			.closest('button') as HTMLButtonElement;
-		expect(discardBtn).not.toBeNull();
-		await user.click(discardBtn);
+		fireEvent.click(screen.getByText(DISCARD_TEXT));
 
 		await waitFor(() => {
 			expect(addedSection).toContainElement(
@@ -279,25 +285,18 @@ describe('Quick Filters with custom filters', () => {
 	});
 
 	it('saves the updated filters by calling PUT with correct payload', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 
 		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
+		fireEvent.click(icon);
 
 		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
 		const removeBtn = target.parentElement?.querySelector('button');
 		expect(removeBtn).not.toBeNull();
-		await user.click(removeBtn as HTMLButtonElement);
+		fireEvent.click(removeBtn as HTMLButtonElement);
 
-		const saveBtn = screen
-			.getByText(SAVE_CHANGES_TEXT)
-			.closest('button') as HTMLButtonElement;
-		expect(saveBtn).not.toBeNull();
-		await user.click(saveBtn);
+		fireEvent.click(screen.getByText(SAVE_CHANGES_TEXT));
 
 		await waitFor(() => {
 			expect(putHandler).toHaveBeenCalled();
@@ -312,36 +311,31 @@ describe('Quick Filters with custom filters', () => {
 		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
+	// render duration filter
 	it('should render duration slider for duration_nono filter', async () => {
-		// Use fake timers only in this test (for debounce), and wire them to userEvent
+		// Set up fake timers **before rendering**
 		jest.useFakeTimers();
-		const user = userEvent.setup({
-			advanceTimers: (ms) => jest.advanceTimersByTime(ms),
-			pointerEventsCheck: 0,
-		});
 
 		const { getByTestId } = render(<TestQuickFilters signal={SIGNAL} />);
 		await screen.findByText(FILTER_SERVICE_NAME);
 		expect(screen.getByText('Duration')).toBeInTheDocument();
 
-		// Open the duration section (use role if it’s a button/collapse)
-		await user.click(screen.getByText('Duration'));
+		// click to open the duration filter
+		fireEvent.click(screen.getByText('Duration'));
 
 		const minDuration = getByTestId('min-input') as HTMLInputElement;
 		const maxDuration = getByTestId('max-input') as HTMLInputElement;
-
 		expect(minDuration).toHaveValue(null);
 		expect(minDuration).toHaveProperty('placeholder', '0');
 		expect(maxDuration).toHaveValue(null);
 		expect(maxDuration).toHaveProperty('placeholder', '100000000');
 
-		// Type values and advance debounce
-		await user.clear(minDuration);
-		await user.type(minDuration, '10000');
-		await user.clear(maxDuration);
-		await user.type(maxDuration, '20000');
-		jest.advanceTimersByTime(2000);
-
+		await act(async () => {
+			// set values
+			fireEvent.change(minDuration, { target: { value: '10000' } });
+			fireEvent.change(maxDuration, { target: { value: '20000' } });
+			jest.advanceTimersByTime(2000);
+		});
 		await waitFor(() => {
 			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
 				expect.objectContaining({
@@ -369,144 +363,6 @@ describe('Quick Filters with custom filters', () => {
 			);
 		});
 
-		jest.useRealTimers();
-	});
-});
-
-describe('Quick Filters refetch behavior', () => {
-	it('fetches custom filters on every mount when signal is provided', async () => {
-		let getCalls = 0;
-
-		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) => {
-				getCalls += 1;
-				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
-			}),
-		);
-
-		const { unmount } = render(<TestQuickFilters signal={SIGNAL} />);
-		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
-
-		unmount();
-
-		render(<TestQuickFilters signal={SIGNAL} />);
-		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
-
-		expect(getCalls).toBe(2);
-	});
-
-	it('does not fetch custom filters when signal is undefined', async () => {
-		let getCalls = 0;
-
-		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) => {
-				getCalls += 1;
-				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
-			}),
-		);
-
-		render(<TestQuickFilters signal={undefined} />);
-
-		await waitFor(() => expect(getCalls).toBe(0));
-	});
-
-	it('refetches custom filters after saving settings', async () => {
-		let getCalls = 0;
-		putHandler.mockClear();
-
-		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) => {
-				getCalls += 1;
-				return res(ctx.status(200), ctx.json(quickFiltersListResponse));
-			}),
-			rest.put(saveQuickFiltersURL, async (req, res, ctx) => {
-				putHandler(await req.json());
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<TestQuickFilters signal={SIGNAL} />);
-
-		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
-
-		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
-
-		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
-		const removeBtn = target.parentElement?.querySelector(
-			'button',
-		) as HTMLButtonElement;
-		await user.click(removeBtn);
-
-		await user.click(screen.getByText(SAVE_CHANGES_TEXT));
-
-		await waitFor(() => expect(putHandler).toHaveBeenCalled());
-		await waitFor(() => expect(getCalls).toBeGreaterThanOrEqual(2));
-	});
-
-	it('renders updated filters after refetch post-save', async () => {
-		const updatedResponse = {
-			...quickFiltersListResponse,
-			data: {
-				...quickFiltersListResponse.data,
-				filters: [
-					...(quickFiltersListResponse.data.filters ?? []),
-					{
-						key: 'new.custom.filter',
-						dataType: 'string',
-						type: 'resource',
-					} as const,
-				],
-			},
-		};
-
-		let getCount = 0;
-		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) => {
-				getCount += 1;
-				return getCount >= 2
-					? res(ctx.status(200), ctx.json(updatedResponse))
-					: res(ctx.status(200), ctx.json(quickFiltersListResponse));
-			}),
-			rest.put(saveQuickFiltersURL, async (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json({})),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<TestQuickFilters signal={SIGNAL} />);
-
-		expect(await screen.findByText(FILTER_SERVICE_NAME)).toBeInTheDocument();
-
-		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
-		const settingsButton = icon.closest('button') ?? icon;
-		await user.click(settingsButton);
-
-		// Make a minimal change so Save button appears
-		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
-		const removeBtn = target.parentElement?.querySelector(
-			'button',
-		) as HTMLButtonElement;
-		await user.click(removeBtn);
-
-		await user.click(screen.getByText(SAVE_CHANGES_TEXT));
-
-		await waitFor(() => {
-			expect(screen.getByText('New Custom Filter')).toBeInTheDocument();
-		});
-	});
-
-	it('shows empty state when GET fails', async () => {
-		server.use(
-			rest.get(quickFiltersListURL, (_req, res, ctx) =>
-				res(ctx.status(500), ctx.json({})),
-			),
-		);
-
-		render(<TestQuickFilters signal={SIGNAL} config={[]} />);
-
-		expect(await screen.findByText('No filters found')).toBeInTheDocument();
+		jest.useRealTimers(); // Clean up
 	});
 });

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

@@ -17,19 +17,6 @@
 		font-weight: var(--font-weight-normal);
 	}
 
-	.view-title-container {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		justify-content: center;
-
-		.icon-container {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-
 	.tab {
 		border: 1px solid var(--bg-slate-400);
 		&:hover {

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -5,8 +5,7 @@ import { RadioChangeEvent } from 'antd/es/radio';
 
 interface Option {
 	value: string;
-	label: string | React.ReactNode;
-	icon?: React.ReactNode;
+	label: string;
 }
 
 interface SignozRadioGroupProps {
@@ -38,10 +37,7 @@ function SignozRadioGroup({
 					value={option.value}
 					className={value === option.value ? 'selected_view tab' : 'tab'}
 				>
-					<div className="view-title-container">
-						{option.icon && <div className="icon-container">{option.icon}</div>}
-						{option.label}
-					</div>
+					{option.label}
 				</Radio.Button>
 			))}
 		</Radio.Group>

frontend/src/components/SpanHoverCard/SpanHoverCard.styles.scss

@@ -1,108 +0,0 @@
-.span-hover-card {
-	width: 206px;
-
-	.ant-popover-inner {
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.32) 0%,
-			rgba(18, 19, 23, 0.36) 98.68%
-		);
-		padding: 12px 16px;
-		border: 1px solid var(--bg-slate-500);
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background: linear-gradient(
-				139deg,
-				rgba(18, 19, 23, 0.32) 0%,
-				rgba(18, 19, 23, 0.36) 98.68%
-			);
-			backdrop-filter: blur(20px);
-			border-radius: 4px;
-			z-index: -1;
-			will-change: background-color, backdrop-filter;
-		}
-	}
-
-	&__title {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		margin-bottom: 0.5rem;
-	}
-
-	&__operation {
-		color: var(--bg-vanilla-100);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-	}
-
-	&__service {
-		font-size: 0.875rem;
-		color: var(--bg-vanilla-400);
-		font-weight: 400;
-	}
-
-	&__error {
-		font-size: 0.75rem;
-		color: var(--bg-cherry-500);
-		font-weight: 500;
-	}
-
-	&__row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		max-width: 174px;
-		margin-top: 8px;
-	}
-
-	&__label {
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-	}
-
-	&__value {
-		color: var(--bg-vanilla-100);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		text-align: right;
-	}
-
-	&__relative-time {
-		display: flex;
-		align-items: center;
-		margin-top: 4px;
-		gap: 8px;
-		border-radius: 1px 0 0 1px;
-		background: linear-gradient(
-			90deg,
-			hsla(358, 75%, 59%, 0.2) 0%,
-			rgba(229, 72, 77, 0) 100%
-		);
-
-		&-icon {
-			width: 2px;
-			height: 20px;
-			flex-shrink: 0;
-			border-radius: 2px;
-			background: var(--bg-cherry-500);
-		}
-	}
-
-	&__relative-text {
-		color: var(--bg-cherry-300);
-		font-size: 12px;
-		line-height: 20px;
-	}
-}

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,101 +0,0 @@
-import './SpanHoverCard.styles.scss';
-
-import { Popover, Typography } from 'antd';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
-import { ReactNode } from 'react';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface SpanHoverCardProps {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const duration = span.durationNano / 1e6; // Convert nanoseconds to milliseconds
-	const { time: formattedDuration, timeUnitName } = convertTimeToRelevantUnit(
-		duration,
-	);
-
-	// Calculate relative start time from trace start
-	const relativeStartTime = span.timestamp - traceMetadata.startTime;
-	const {
-		time: relativeTime,
-		timeUnitName: relativeTimeUnit,
-	} = convertTimeToRelevantUnit(relativeStartTime);
-
-	// Format absolute start time
-	const startTimeFormatted = dayjs(span.timestamp).format(
-		DATE_TIME_FORMATS.SPAN_POPOVER_DATE,
-	);
-
-	const getContent = (): JSX.Element => (
-		<div className="span-hover-card">
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Duration:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{toFixed(formattedDuration, 2)}
-					{timeUnitName}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Events:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{span.event?.length || 0}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Start time:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{startTimeFormatted}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__relative-time">
-				<div className="span-hover-card__relative-time-icon" />
-				<Typography.Text className="span-hover-card__relative-text">
-					{toFixed(relativeTime, 2)}
-					{relativeTimeUnit} after trace start
-				</Typography.Text>
-			</div>
-		</div>
-	);
-
-	return (
-		<Popover
-			title={
-				<div className="span-hover-card__title">
-					<Typography.Text className="span-hover-card__operation">
-						{span.name}
-					</Typography.Text>
-				</div>
-			}
-			content={getContent()}
-			trigger="hover"
-			rootClassName="span-hover-card"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;

frontend/src/components/TextToolTip/TextToolTip.tsx

@@ -8,7 +8,7 @@ import {
 import { Tooltip } from 'antd';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { style } from './constant';
 
@@ -17,8 +17,6 @@ function TextToolTip({
 	url,
 	useFilledIcon = true,
 	urlText,
-	filledIcon,
-	outlinedIcon,
 }: TextToolTipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -64,44 +62,27 @@ function TextToolTip({
 		[isDarkMode],
 	);
 
-	// Use provided icons or fallback to default icons
-	const defaultFilledIcon = <QuestionCircleFilled style={iconStyle} />;
-	const defaultOutlinedIcon = (
-		<QuestionCircleOutlined style={iconOutlinedStyle} />
-	);
-
-	const renderIcon = (): ReactNode => {
-		if (useFilledIcon) {
-			return filledIcon ? (
-				<div style={{ color: iconStyle.color }}>{filledIcon}</div>
+	return (
+		<Tooltip overlay={overlay}>
+			{useFilledIcon ? (
+				<QuestionCircleFilled style={iconStyle} />
 			) : (
-				defaultFilledIcon
-			);
-		}
-		return outlinedIcon ? (
-			<div style={{ color: iconOutlinedStyle.color }}>{outlinedIcon}</div>
-		) : (
-			defaultOutlinedIcon
-		);
-	};
-
-	return <Tooltip overlay={overlay}>{renderIcon()}</Tooltip>;
+				<QuestionCircleOutlined style={iconOutlinedStyle} />
+			)}
+		</Tooltip>
+	);
 }
 
 TextToolTip.defaultProps = {
 	url: '',
 	urlText: '',
 	useFilledIcon: true,
-	filledIcon: undefined,
-	outlinedIcon: undefined,
 };
 interface TextToolTipProps {
 	url?: string;
 	text: string;
 	useFilledIcon?: boolean;
 	urlText?: string;
-	filledIcon?: ReactNode;
-	outlinedIcon?: ReactNode;
 }
 
 export default TextToolTip;

frontend/src/components/Uplot/Uplot.tsx

@@ -62,7 +62,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 		useEffect(() => {
 			onCreateRef.current = onCreate;
 			onDeleteRef.current = onDelete;
-		}, [onCreate, onDelete]);
+		});
 
 		const destroy = useCallback((chart: uPlot | null) => {
 			if (chart) {
@@ -71,25 +71,12 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 				chartRef.current = null;
 			}
 
-			// Clean up tooltip overlay that might be detached
+			// remove chart tooltip on cleanup
 			const overlay = document.getElementById('overlay');
+
 			if (overlay) {
-				// Remove all child elements from overlay
-				while (overlay.firstChild) {
-					overlay.removeChild(overlay.firstChild);
-				}
 				overlay.style.display = 'none';
 			}
-
-			// Clean up any remaining tooltips that might be detached
-			const tooltips = document.querySelectorAll(
-				'.uplot-tooltip, .tooltip-container',
-			);
-			tooltips.forEach((tooltip) => {
-				if (tooltip && tooltip.parentNode) {
-					tooltip.parentNode.removeChild(tooltip);
-				}
-			});
 		}, []);
 
 		const create = useCallback(() => {