feat(devenv): add otel-collector support for local development

- Add .devenv/docker/otel-collector/ with compose.yaml and config
- Add devenv-otel-collector and devenv-up targets to Makefile
- Update development.md with otel-collector setup instructions
- Add README.md with usage documentation for otel-collector setup

This enables developers to run the complete SigNoz stack locally,
including the OpenTelemetry Collector for receiving telemetry data
on ports 4317 (gRPC) and 4318 (HTTP).

.devenv/docker/clickhouse/compose.yaml

@@ -24,7 +24,7 @@ services:
     depends_on:
       - zookeeper
   zookeeper:
-    image: signoz/zookeeper:3.7.1
+    image: bitnami/zookeeper:3.7.1
     container_name: zookeeper
     volumes:
       - ${PWD}/fs/tmp/zookeeper:/bitnami/zookeeper
@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.128.2
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.128.2
     container_name: schema-migrator-async
     command:
       - async

.devenv/docker/otel-collector/README.md

@@ -0,0 +1,44 @@
+# SigNoz OTel Collector Development Environment
+
+This directory contains the Docker Compose setup for running the SigNoz OpenTelemetry Collector locally during development.
+
+## What it does
+
+- Starts the SigNoz OTel Collector container
+- Exposes OTLP endpoints for receiving telemetry data:
+  - **gRPC**: `localhost:4317`
+  - **HTTP**: `localhost:4318`
+- Connects to ClickHouse running on the host machine
+- Processes and forwards telemetry data to ClickHouse
+
+## Usage
+
+```bash
+# Start the OTel Collector
+make devenv-otel-collector
+
+# Or start both ClickHouse and OTel Collector together
+make devenv-up
+```
+
+## Prerequisites
+
+- ClickHouse must be running (use `make devenv-clickhouse`)
+- Docker must be installed and running
+
+## Testing
+
+Send a test trace to verify everything is working:
+
+```bash
+curl -X POST http://localhost:4318/v1/traces \
+  -H "Content-Type: application/json" \
+  -d '{"resourceSpans":[{"resource":{"attributes":[{"key":"service.name","value":{"stringValue":"test-service"}}]},"scopeSpans":[{"spans":[{"traceId":"12345678901234567890123456789012","spanId":"1234567890123456","name":"test-span","startTimeUnixNano":"1609459200000000000","endTimeUnixNano":"1609459201000000000"}]}]}]}'
+```
+
+## Configuration
+
+- `compose.yaml`: Docker Compose configuration for the OTel Collector
+- `otel-collector-config.yaml`: OpenTelemetry Collector configuration file
+
+The configuration is set up to connect to ClickHouse via `host.docker.internal:9000`, which allows the containerized collector to reach ClickHouse running on the host machine.

.devenv/docker/otel-collector/compose.yaml

@@ -1,5 +1,5 @@
 services:
-  signoz-otel-collector:
+  otel-collector:
     image: signoz/signoz-otel-collector:v0.128.2
     container_name: signoz-otel-collector-dev
     command:

Makefile

@@ -61,16 +61,24 @@ devenv-postgres: ## Run postgres in devenv
 	@cd .devenv/docker/postgres; \
 	docker compose -f compose.yaml up -d
 
-.PHONY: devenv-signoz-otel-collector
-devenv-signoz-otel-collector: ## Run signoz-otel-collector in devenv (requires clickhouse to be running)
-	@cd .devenv/docker/signoz-otel-collector; \
+.PHONY: devenv-otel-collector
+devenv-otel-collector: ## Run otel-collector in devenv (requires clickhouse to be running)
+	@cd .devenv/docker/otel-collector; \
 	docker compose -f compose.yaml up -d
 
 .PHONY: devenv-up
-devenv-up: devenv-clickhouse devenv-signoz-otel-collector ## Start both clickhouse and signoz-otel-collector for local development
-	@echo "Development environment is ready!"
+devenv-up: ## Start both clickhouse and otel-collector for local development
+	@echo "Starting ClickHouse..."
+	@cd .devenv/docker/clickhouse; \
+	docker compose -f compose.yaml up -d
+	@echo "Waiting for ClickHouse to be ready..."
+	@sleep 10
+	@echo "Starting OTel Collector..."
+	@cd .devenv/docker/otel-collector; \
+	docker compose -f compose.yaml up -d
+	@echo "✅ Development environment is ready!"
 	@echo "   - ClickHouse: http://localhost:8123"
-	@echo "   - Signoz OTel Collector: grpc://localhost:4317, http://localhost:4318"
+	@echo "   - OTel Collector: grpc://localhost:4317, http://localhost:4318"
 
 ##############################################################
 # go commands

conf/example.yaml

@@ -121,8 +121,6 @@ telemetrystore:
       timeout_before_checking_execution_speed: 0
       max_bytes_to_read: 0
       max_result_rows: 0
-      ignore_data_skipping_indices: ""
-      secondary_indices_enable_bulk_filtering: false
 
 ##################### Prometheus #####################
 prometheus:

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

@@ -39,7 +39,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: signoz/zookeeper:3.7.1
+  image: bitnami/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.92.1
+    image: signoz/signoz:v0.91.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -207,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.128.2
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.128.2
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: signoz/zookeeper:3.7.1
+  image: bitnami/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -115,7 +115,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.92.1
+    image: signoz/signoz:v0.91.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.128.2
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.128.2
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -42,7 +42,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: signoz/zookeeper:3.7.1
+  image: bitnami/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"
@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.92.1}
+    image: signoz/signoz:${VERSION:-v0.91.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -211,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.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.2}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +237,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +248,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: signoz/zookeeper:3.7.1
+  image: bitnami/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"
@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.92.1}
+    image: signoz/signoz:${VERSION:-v0.91.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -143,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.2}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/development.md

@@ -57,12 +57,12 @@ This command:
 - Sets up Zookeeper
 - Runs the latest schema migrations
 
-### 2. Setting up SigNoz OpenTelemetry Collector
+### 2. Setting up OpenTelemetry Collector
 
 Next, start the OpenTelemetry Collector to receive telemetry data:
 
 ```bash
-make devenv-signoz-otel-collector
+make devenv-otel-collector
 ```
 
 This command:
@@ -114,7 +114,8 @@ This command:
 
 Now you're all set to start developing! Happy coding! 🎉
 
-## Verifying Your Setup
+## Testing Your Setup
+
 To verify everything is working correctly:
 
 1. **Check ClickHouse**: `curl http://localhost:8123/ping` (should return "Ok.")
@@ -122,7 +123,7 @@ To verify everything is working correctly:
 3. **Check Backend**: `curl http://localhost:8080/api/v1/health` (should return `{"status":"ok"}`)
 4. **Check Frontend**: Open `http://localhost:3301` in your browser
 
-## How to send test data?
+## Sending Test Data
 
 You can now send telemetry data to your local SigNoz instance:
 

ee/anomaly/seasonal.go

@@ -50,14 +50,19 @@ func (p *BaseSeasonalProvider) getQueryParams(req *AnomaliesRequest) *anomalyQue
 
 func (p *BaseSeasonalProvider) toTSResults(ctx context.Context, resp *qbtypes.QueryRangeResponse) []*qbtypes.TimeSeriesData {
 
-	tsData := []*qbtypes.TimeSeriesData{}
-
-	if resp == nil {
+	if resp == nil || resp.Data == nil {
 		p.logger.InfoContext(ctx, "nil response from query range")
-		return tsData
 	}
 
-	for _, item := range resp.Data.Results {
+	data, ok := resp.Data.(struct {
+		Results  []any    `json:"results"`
+		Warnings []string `json:"warnings"`
+	})
+	if !ok {
+		return nil
+	}
+	tsData := []*qbtypes.TimeSeriesData{}
+	for _, item := range data.Results {
 		if resultData, ok := item.(*qbtypes.TimeSeriesData); ok {
 			tsData = append(tsData, resultData)
 		}
@@ -390,11 +395,6 @@ func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UU
 			continue
 		}
 
-		// no data;
-		if len(result.Aggregations) == 0 {
-			continue
-		}
-
 		aggOfInterest := result.Aggregations[0]
 
 		for _, series := range aggOfInterest.Series {

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

@@ -113,8 +113,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// v5
 	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
-	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
-
 	// Gateway
 	router.PathPrefix(gateway.RoutePrefix).HandlerFunc(am.EditAccess(ah.ServeGatewayHTTP))
 

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

@@ -260,9 +260,11 @@ func (aH *APIHandler) queryRangeV5(rw http.ResponseWriter, req *http.Request) {
 		finalResp := &qbtypes.QueryRangeResponse{
 			Type: queryRangeRequest.RequestType,
 			Data: struct {
-				Results []any `json:"results"`
+				Results  []any    `json:"results"`
+				Warnings []string `json:"warnings"`
 			}{
-				Results: results,
+				Results:  results,
+				Warnings: make([]string, 0), // TODO(srikanthccv): will there be any warnings here?
 			},
 			Meta: struct {
 				RowsScanned  uint64 `json:"rowsScanned"`

ee/query-service/rules/anomaly.go

@@ -211,8 +211,7 @@ func (r *AnomalyRule) prepareQueryRangeV5(ctx context.Context, ts time.Time) (*q
 		},
 		NoCache: true,
 	}
-	req.CompositeQuery.Queries = make([]qbtypes.QueryEnvelope, len(r.Condition().CompositeQuery.Queries))
-	copy(req.CompositeQuery.Queries, r.Condition().CompositeQuery.Queries)
+	copy(r.Condition().CompositeQuery.Queries, req.CompositeQuery.Queries)
 	return req, nil
 }
 

frontend/public/locales/en-GB/titles.json

@@ -46,8 +46,5 @@
 	"ALERT_HISTORY": "SigNoz | Alert Rule History",
 	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview",
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
-	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
-	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring"
 }

frontend/public/locales/en/titles.json

@@ -69,8 +69,5 @@
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
-	"API_MONITORING": "SigNoz | External APIs",
-	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter"
+	"API_MONITORING": "SigNoz | External APIs"
 }

frontend/src/AppRoutes/routes.ts

@@ -1,6 +1,5 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
-import MeterExplorer from 'pages/MeterExplorer';
 import { RouteProps } from 'react-router-dom';
 
 import {
@@ -435,28 +434,6 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
-
-	{
-		path: ROUTES.METER,
-		exact: true,
-		component: MeterExplorer,
-		key: 'METER',
-		isPrivate: true,
-	},
-	{
-		path: ROUTES.METER_EXPLORER,
-		exact: true,
-		component: MeterExplorer,
-		key: 'METER_EXPLORER',
-		isPrivate: true,
-	},
-	{
-		path: ROUTES.METER_EXPLORER_VIEWS,
-		exact: true,
-		component: MeterExplorer,
-		key: 'METER_EXPLORER_VIEWS',
-		isPrivate: true,
-	},
 	{
 		path: ROUTES.API_MONITORING,
 		exact: true,

frontend/src/api/dashboard/substitute_vars.ts

@@ -1,34 +0,0 @@
-import { ApiV5Instance } from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { QueryRangePayloadV5 } from 'api/v5/v5';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
-
-interface ISubstituteVars {
-	compositeQuery: ICompositeMetricQuery;
-}
-
-export const getSubstituteVars = async (
-	props?: Partial<QueryRangePayloadV5>,
-	signal?: AbortSignal,
-	headers?: Record<string, string>,
-): Promise<SuccessResponseV2<ISubstituteVars>> => {
-	try {
-		const response = await ApiV5Instance.post<{ data: ISubstituteVars }>(
-			'/substitute_vars',
-			props,
-			{
-				signal,
-				headers,
-			},
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,34 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-/**
- * Get field keys for a given signal type
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Optional search text
- */
-export const getFieldKeys = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	const response = await ApiBaseInstance.get('/fields/keys', { params });
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,63 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-/**
- * Get field values for a given signal type and field name
- * @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
- */
-export const getFieldValues = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-	value?: string,
-	startUnixMilli?: number,
-	endUnixMilli?: number,
-): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	if (value) {
-		params.value = value;
-	}
-
-	if (startUnixMilli) {
-		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
-	}
-
-	if (endUnixMilli) {
-		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
-	}
-
-	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.values(response.data.data.values).forEach((valueArray: any) => {
-			if (Array.isArray(valueArray)) {
-				allValues.push(...valueArray.map(String));
-			}
-		});
-
-		// Add a normalized values array to the response
-		response.data.data.normalizedValues = allValues;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldValues;

frontend/src/api/metrics/getQueryRange.ts

@@ -2,7 +2,7 @@ import { ApiV3Instance, ApiV4Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ENTITY_VERSION_V4 } from 'constants/app';
-import { ErrorResponse, SuccessResponse, Warning } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	MetricRangePayloadV3,
 	QueryRangePayload,
@@ -13,9 +13,7 @@ export const getMetricsQueryRange = async (
 	version: string,
 	signal: AbortSignal,
 	headers?: Record<string, string>,
-): Promise<
-	(SuccessResponse<MetricRangePayloadV3> & { warning?: Warning }) | ErrorResponse
-> => {
+): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
 		if (version && version === ENTITY_VERSION_V4) {
 			const response = await ApiV4Instance.post('/query_range', props, {

frontend/src/api/queryBuilder/getAggregateAttribute.ts

@@ -17,7 +17,6 @@ export const getAggregateAttribute = async ({
 	aggregateOperator,
 	searchText,
 	dataSource,
-	source,
 }: IGetAggregateAttributePayload): Promise<
 	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 > => {
@@ -28,7 +27,7 @@ export const getAggregateAttribute = async ({
 			`/autocomplete/aggregate_attributes?${createQueryParams({
 				aggregateOperator,
 				searchText,
-				dataSource: source === 'meter' ? 'meter' : dataSource,
+				dataSource,
 			})}`,
 		);
 

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -14,7 +14,6 @@ export const getKeySuggestions = (
 		metricName = '',
 		fieldContext = '',
 		fieldDataType = '',
-		signalSource = '',
 	} = props;
 
 	const encodedSignal = encodeURIComponent(signal);
@@ -22,9 +21,8 @@ export const getKeySuggestions = (
 	const encodedMetricName = encodeURIComponent(metricName);
 	const encodedFieldContext = encodeURIComponent(fieldContext);
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
-	const encodedSource = encodeURIComponent(signalSource);
 
 	return axios.get(
-		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}`,
 	);
 };

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -8,15 +8,13 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	const { signal, key, searchText, signalSource, metricName } = props;
+	const { signal, key, searchText } = props;
 
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
-	const encodedMetricName = encodeURIComponent(metricName || '');
 	const encodedSearchText = encodeURIComponent(searchText);
-	const encodedSource = encodeURIComponent(signalSource || '');
 
 	return axios.get(
-		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}`,
 	);
 };

frontend/src/api/saveView/getAllViews.ts

@@ -4,6 +4,6 @@ import { AllViewsProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const getAllViews = (
-	sourcepage: DataSource | 'meter',
+	sourcepage: DataSource,
 ): Promise<AxiosResponse<AllViewsProps>> =>
 	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

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

@@ -1,5 +1,5 @@
 import { cloneDeep, isEmpty } from 'lodash-es';
-import { SuccessResponse, Warning } from 'types/api';
+import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
 	DistributionData,
@@ -28,18 +28,14 @@ function getColName(
 	const aggregationsCount = aggregationPerQuery[col.queryName]?.length || 0;
 	const isSingleAggregation = aggregationsCount === 1;
 
-	if (aggregationsCount > 0) {
-		// Single aggregation: Priority is alias > legend > expression
-		if (isSingleAggregation) {
-			return alias || legend || expression || col.queryName;
-		}
-
-		// Multiple aggregations: Each follows single rules BUT never shows legend
-		// Priority: alias > expression (legend is ignored for multiple aggregations)
-		return alias || expression || col.queryName;
+	// Single aggregation: Priority is alias > legend > expression
+	if (isSingleAggregation) {
+		return alias || legend || expression;
 	}
 
-	return legend || col.queryName;
+	// Multiple aggregations: Each follows single rules BUT never shows legend
+	// Priority: alias > expression (legend is ignored for multiple aggregations)
+	return alias || expression;
 }
 
 function getColId(
@@ -52,14 +48,7 @@ function getColId(
 	const aggregation =
 		aggregationPerQuery?.[col.queryName]?.[col.aggregationIndex];
 	const expression = aggregation?.expression || '';
-	const aggregationsCount = aggregationPerQuery[col.queryName]?.length || 0;
-	const isMultipleAggregations = aggregationsCount > 1;
-
-	if (isMultipleAggregations && expression) {
-		return `${col.queryName}.${expression}`;
-	}
-
-	return col.queryName;
+	return `${col.queryName}.${expression}`;
 }
 
 /**
@@ -352,7 +341,7 @@ export function convertV5ResponseToLegacy(
 	v5Response: SuccessResponse<MetricRangePayloadV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
-): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
+): SuccessResponse<MetricRangePayloadV3> {
 	const { payload, params } = v5Response;
 	const v5Data = payload?.data;
 
@@ -378,18 +367,14 @@ export function convertV5ResponseToLegacy(
 			legendMap,
 			aggregationPerQuery,
 		);
-
 		return {
 			...v5Response,
 			payload: {
 				data: {
 					resultType: 'scalar',
 					result: webTables,
-					warnings: v5Data?.data?.warning || [],
 				},
-				warning: v5Data?.warning || undefined,
 			},
-			warning: v5Data?.warning || undefined,
 		};
 	}
 
@@ -405,7 +390,6 @@ export function convertV5ResponseToLegacy(
 		...v5Response,
 		payload: {
 			data: convertedData,
-			warning: v5Response.payload?.data?.warning || undefined,
 		},
 	};
 

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

@@ -5,7 +5,10 @@ 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 } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
 import {
 	BaseBuilderQuery,
 	FieldContext,
@@ -27,7 +30,6 @@ import {
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
-import { normalizeFunctionName } from 'utils/functionNameNormalizer';
 
 type PrepareQueryRangePayloadV5Result = {
 	queryPayload: QueryRangePayloadV5;
@@ -121,21 +123,17 @@ function createBaseSpec(
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map(
-					(func: QueryFunction): QueryFunction => {
-						// Normalize function name to handle case sensitivity
-						const normalizedName = normalizeFunctionName(func?.name);
-						return {
-							name: normalizedName as FunctionName,
-							args: isEmpty(func.namedArgs)
-								? func.args?.map((arg) => ({
-										value: arg?.value,
-								  }))
-								: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
-										name,
-										value,
-								  })),
-						};
-					},
+					(func: QueryFunctionProps): QueryFunction => ({
+						name: func.name as FunctionName,
+						args: isEmpty(func.namedArgs)
+							? func.args.map((arg) => ({
+									value: arg,
+							  }))
+							: Object.entries(func.namedArgs).map(([name, value]) => ({
+									name,
+									value,
+							  })),
+					}),
 			  ),
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
@@ -260,7 +258,6 @@ export function convertBuilderQueriesToV5(
 					spec = {
 						name: queryName,
 						signal: 'metrics' as const,
-						source: queryData.source || '',
 						...baseSpec,
 						aggregations: aggregations as MetricAggregation[],
 						// reduceTo: queryData.reduceTo,

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -19,7 +19,6 @@ export interface NavigateToExplorerProps {
 	endTime?: number;
 	sameTab?: boolean;
 	shouldResolveQuery?: boolean;
-	widgetQuery?: Query;
 }
 
 export function useNavigateToExplorer(): (
@@ -31,34 +30,27 @@ export function useNavigateToExplorer(): (
 	);
 
 	const prepareQuery = useCallback(
-		(
-			selectedFilters: TagFilterItem[],
-			dataSource: DataSource,
-			query?: Query,
-		): Query => {
-			const widgetQuery = query || currentQuery;
-			return {
-				...widgetQuery,
-				builder: {
-					...widgetQuery.builder,
-					queryData: widgetQuery.builder.queryData
-						.map((item) => ({
-							...item,
-							dataSource,
-							aggregateOperator: MetricAggregateOperator.NOOP,
-							filters: {
-								...item.filters,
-								items: [...(item.filters?.items || []), ...selectedFilters],
-								op: item.filters?.op || 'AND',
-							},
-							groupBy: [],
-							disabled: false,
-						}))
-						.slice(0, 1),
-					queryFormulas: [],
-				},
-			};
-		},
+		(selectedFilters: TagFilterItem[], dataSource: DataSource): Query => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData
+					.map((item) => ({
+						...item,
+						dataSource,
+						aggregateOperator: MetricAggregateOperator.NOOP,
+						filters: {
+							...item.filters,
+							items: [...(item.filters?.items || []), ...selectedFilters],
+							op: item.filters?.op || 'AND',
+						},
+						groupBy: [],
+						disabled: false,
+					}))
+					.slice(0, 1),
+				queryFormulas: [],
+			},
+		}),
 		[currentQuery],
 	);
 
@@ -75,7 +67,6 @@ export function useNavigateToExplorer(): (
 				endTime,
 				sameTab,
 				shouldResolveQuery,
-				widgetQuery,
 			} = props;
 			const urlParams = new URLSearchParams();
 			if (startTime && endTime) {
@@ -86,7 +77,7 @@ export function useNavigateToExplorer(): (
 				urlParams.set(QueryParams.endTime, (maxTime / 1000000).toString());
 			}
 
-			let preparedQuery = prepareQuery(filters, dataSource, widgetQuery);
+			let preparedQuery = prepareQuery(filters, dataSource);
 
 			if (shouldResolveQuery) {
 				await getUpdatedQuery({

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

@@ -137,11 +137,5 @@
 		h6 {
 			color: var(--text-ink-500);
 		}
-
-		code {
-			background-color: var(--bg-vanilla-300);
-			border: 1px solid var(--bg-vanilla-300);
-			color: var(--text-ink-500);
-		}
 	}
 }

frontend/src/components/Common/Common.styles.scss

@@ -1,33 +0,0 @@
-.error-state-container {
-	height: 240px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-
-	border-radius: 3px;
-
-	.error-state-container-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		.error-state-text {
-			font-size: 14px;
-			font-weight: 500;
-		}
-
-		.error-state-additional-messages {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.error-state-additional-text {
-				font-size: 12px;
-				font-weight: 400;
-				margin-left: 8px;
-			}
-		}
-	}
-}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,59 +0,0 @@
-import './Common.styles.scss';
-
-import { Typography } from 'antd';
-
-import APIError from '../../types/api/error';
-
-interface ErrorStateComponentProps {
-	message?: string;
-	error?: APIError;
-}
-
-const defaultProps: Partial<ErrorStateComponentProps> = {
-	message: undefined,
-	error: undefined,
-};
-
-function ErrorStateComponent({
-	message,
-	error,
-}: ErrorStateComponentProps): JSX.Element {
-	// Handle API Error object
-	if (error) {
-		const mainMessage = error.getErrorMessage();
-		const additionalErrors = error.getErrorDetails().error.errors || [];
-
-		return (
-			<div className="error-state-container">
-				<div className="error-state-container-content">
-					<Typography className="error-state-text">{mainMessage}</Typography>
-					{additionalErrors.length > 0 && (
-						<div className="error-state-additional-messages">
-							{additionalErrors.map((additionalError) => (
-								<Typography
-									key={`error-${additionalError.message}`}
-									className="error-state-additional-text"
-								>
-									• {additionalError.message}
-								</Typography>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	// Handle simple string message (backwards compatibility)
-	return (
-		<div className="error-state-container">
-			<div className="error-state-container-content">
-				<Typography className="error-state-text">{message}</Typography>
-			</div>
-		</div>
-	);
-}
-
-ErrorStateComponent.defaultProps = defaultProps;
-
-export default ErrorStateComponent;

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -1,79 +0,0 @@
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { ReactNode } from 'react';
-import APIError from 'types/api/error';
-
-interface ErrorInPlaceProps {
-	/** The error object to display */
-	error: APIError;
-	/** Custom class name */
-	className?: string;
-	/** Custom style */
-	style?: React.CSSProperties;
-	/** Whether to show a border */
-	bordered?: boolean;
-	/** Background color */
-	background?: string;
-	/** Padding */
-	padding?: string | number;
-	/** Height - defaults to 100% to take available space */
-	height?: string | number;
-	/** Width - defaults to 100% to take available space */
-	width?: string | number;
-	/** Custom content instead of ErrorContent */
-	children?: ReactNode;
-}
-
-/**
- * ErrorInPlace - A component that renders error content directly in the available space
- * of its parent container. Perfect for displaying errors in widgets, cards, or any
- * container where you want the error to take up the full available space.
- *
- * @example
- * <ErrorInPlace error={error} />
- *
- * @example
- * <ErrorInPlace error={error} bordered background="#f5f5f5" padding={16} />
- */
-function ErrorInPlace({
-	error,
-	className = '',
-	style,
-	bordered = false,
-	background,
-	padding = 16,
-	height = '100%',
-	width = '100%',
-	children,
-}: ErrorInPlaceProps): JSX.Element {
-	const containerStyle: React.CSSProperties = {
-		display: 'flex',
-		flexDirection: 'column',
-		width,
-		height,
-		padding: typeof padding === 'number' ? `${padding}px` : padding,
-		backgroundColor: background,
-		border: bordered ? '1px solid var(--bg-slate-400, #374151)' : 'none',
-		borderRadius: bordered ? '4px' : '0',
-		overflow: 'auto',
-		...style,
-	};
-
-	return (
-		<div className={`error-in-place ${className}`.trim()} style={containerStyle}>
-			{children || <ErrorContent error={error} />}
-		</div>
-	);
-}
-
-ErrorInPlace.defaultProps = {
-	className: undefined,
-	style: undefined,
-	bordered: undefined,
-	background: undefined,
-	padding: undefined,
-	height: undefined,
-	width: undefined,
-	children: undefined,
-};
-
-export default ErrorInPlace;

frontend/src/components/ErrorPopover/ErrorPopover.tsx

@@ -1,33 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import { Popover, PopoverProps } from 'antd';
-import { ReactNode } from 'react';
-
-interface ErrorPopoverProps extends Omit<PopoverProps, 'content'> {
-	/** Content to display in the popover */
-	content: ReactNode;
-	/** Element that triggers the popover */
-	children: ReactNode;
-}
-
-/**
- * ErrorPopover - A clean wrapper around Ant Design's Popover
- * that provides a simple interface for displaying content in a popover.
- *
- * @example
- * <ErrorPopover content={<ErrorContent error={error} />}>
- *   <CircleX />
- * </ErrorPopover>
- */
-function ErrorPopover({
-	content,
-	children,
-	...popoverProps
-}: ErrorPopoverProps): JSX.Element {
-	return (
-		<Popover content={content} {...popoverProps}>
-			{children}
-		</Popover>
-	);
-}
-
-export default ErrorPopover;

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -28,7 +28,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -38,7 +37,7 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
 
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
@@ -63,8 +62,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
-	onDropdownVisibleChange,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -81,8 +78,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
-	const justOpenedRef = useRef<boolean>(false);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -129,12 +124,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
-	// Define allOptionShown earlier in the code
-	const allOptionShown = useMemo(
-		() => value === ALL_SELECTED_VALUE || value === 'ALL',
-		[value],
-	);
-
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -143,18 +132,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[], directCaller?: boolean): void => {
+		(newValue: string | string[]): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
-			if (
-				(allOptionShown || isAllSelected) &&
-				!directCaller &&
-				currentNewValue.length === 0
-			) {
-				return;
-			}
-
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -163,7 +144,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__ALL__" is selected (means select all actual values)
+			// Case 2: "__all__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -194,14 +175,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[
-			allOptionShown,
-			isAllSelected,
-			onChange,
-			allAvailableValues,
-			options,
-			enableAllSelection,
-		],
+		[onChange, allAvailableValues, options, enableAllSelection],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -536,19 +510,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			const trimmedValue = value.trim();
-			setSearchText(trimmedValue);
+			setSearchText(value.trim());
 			if (!isOpen) {
 				setIsOpen(true);
-				justOpenedRef.current = true;
 			}
-
-			// Reset active index when search changes if dropdown is open
-			if (isOpen && trimmedValue) {
-				setActiveIndex(0);
-			}
-
-			if (onSearch) onSearch(trimmedValue);
+			if (onSearch) onSearch(value.trim());
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -562,34 +528,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a unique key that doesn't rely on array index
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(
+				new RegExp(
+					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
+					'gi',
+				),
+			);
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a unique key that doesn't rely on array index
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				// If regex fails, return the original text without highlighting
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -600,10 +560,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([], true);
+			handleInternalChange([]);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE], true);
+			handleInternalChange([ALL_SELECTED_VALUE]);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -778,26 +738,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
-			// Simple early return if ALL is selected - block all possible keyboard interactions
-			// that could remove the ALL tag, but still allow dropdown navigation and search
-			if (
-				(allOptionShown || isAllSelected) &&
-				(e.key === 'Backspace' || e.key === 'Delete')
-			) {
-				// Only prevent default if the input is empty or cursor is at start position
-				const activeElement = document.activeElement as HTMLInputElement;
-				const isInputActive = activeElement?.tagName === 'INPUT';
-				const isInputEmpty = isInputActive && !activeElement?.value;
-				const isCursorAtStart =
-					isInputActive && activeElement?.selectionStart === 0;
-
-				if (isInputEmpty || isCursorAtStart) {
-					e.preventDefault();
-					e.stopPropagation();
-					return;
-				}
-			}
-
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -812,7 +752,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: ALL_SELECTED_VALUE, // Special value for the ALL option
+						value: '__all__', // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -844,17 +784,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
-			// If we just opened the dropdown and have options, set first option as active
-			if (justOpenedRef.current && flatOptions.length > 0) {
-				setActiveIndex(0);
-				justOpenedRef.current = false;
-			}
-
-			// If no option is active but we have options and dropdown is open, activate the first one
-			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
-				setActiveIndex(0);
-			}
-
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1200,7 +1129,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1230,10 +1159,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
-						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
-						if (onDropdownVisibleChange) {
-							onDropdownVisibleChange(false);
-						}
 						break;
 
 					case SPACEKEY:
@@ -1243,7 +1168,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1289,7 +1214,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						justOpenedRef.current = true; // Set flag to initialize active option on next render
+						setActiveIndex(0);
 						setActiveChipIndex(-1);
 						break;
 
@@ -1335,14 +1260,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
-			allOptionShown,
-			isAllSelected,
-			isOpen,
-			activeIndex,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
+			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1358,8 +1278,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			onDropdownVisibleChange,
+			activeIndex,
 			handleSelectAll,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1384,14 +1306,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
-
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1468,7 +1382,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1547,18 +1460,15 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<ArrowLeft size={8} className="icons" />
-								<ArrowRight size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<ArrowLeft size={8} className="icons" />
+							<ArrowRight size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1584,19 +1494,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -1613,7 +1513,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1623,31 +1522,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Custom handler for dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			setIsOpen(visible);
-			if (visible) {
-				justOpenedRef.current = true;
-				setActiveIndex(0);
-				setActiveChipIndex(-1);
-			} else {
-				setSearchText('');
-				setActiveIndex(-1);
-				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
-			}
-			// Pass through to the parent component's handler if provided
-			if (onDropdownVisibleChange) {
-				onDropdownVisibleChange(visible);
-			}
-		},
-		[onDropdownVisibleChange],
-	);
-
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1712,9 +1588,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (allOptionShown) {
-				// Don't render a visible tag - will be shown as placeholder
-				return <div style={{ display: 'none' }} />;
+			if (value === ALL_SELECTED_VALUE && isAllSelected) {
+				const handleAllTagClose = (
+					e: React.MouseEvent | React.KeyboardEvent,
+				): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleInternalChange([]); // Clear selection when ALL tag is closed
+				};
+
+				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
+					if (e.key === 'Enter' || e.key === SPACEKEY) {
+						handleAllTagClose(e);
+					}
+					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
+				};
+
+				return (
+					<div
+						className={cx('ant-select-selection-item', {
+							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
+							'ant-select-selection-item-selected': selectedChips.includes(0),
+						})}
+						style={
+							activeChipIndex === 0 || selectedChips.includes(0)
+								? {
+										borderColor: Color.BG_ROBIN_500,
+										backgroundColor: Color.BG_SLATE_400,
+								  }
+								: undefined
+						}
+					>
+						<span className="ant-select-selection-item-content">ALL</span>
+						{closable && (
+							<span
+								className="ant-select-selection-item-remove"
+								onClick={handleAllTagClose}
+								onKeyDown={handleAllTagKeyDown}
+								role="button"
+								tabIndex={0}
+								aria-label="Remove ALL tag (deselect all)"
+							>
+								×
+							</span>
+						)}
+					</div>
+				);
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1794,69 +1713,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
+		[
+			isAllSelected,
+			handleInternalChange,
+			activeChipIndex,
+			selectedChips,
+			selectedValues,
+			maxTagCount,
+		],
 	);
 
-	// Simple onClear handler to prevent clearing ALL
-	const onClearHandler = useCallback((): void => {
-		// Skip clearing if ALL is selected
-		if (allOptionShown || isAllSelected) {
-			return;
-		}
-
-		// Normal clear behavior
-		handleInternalChange([], true);
-		if (onClear) onClear();
-	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
-
 	// ===== Component Rendering =====
 	return (
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
+		<Select
+			ref={selectRef}
+			className={cx('custom-multiselect', className, {
+				'has-selection': selectedChips.length > 0 && !isAllSelected,
+				'is-all-selected': isAllSelected,
 			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
-				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			placeholder={placeholder}
+			mode="multiple"
+			showSearch
+			filterOption={false}
+			onSearch={handleSearch}
+			value={displayValue}
+			onChange={handleInternalChange}
+			onClear={(): void => handleInternalChange([])}
+			onDropdownVisibleChange={setIsOpen}
+			open={isOpen}
+			defaultActiveFirstOption={defaultActiveFirstOption}
+			popupMatchSelectWidth={dropdownMatchSelectWidth}
+			allowClear={allowClear}
+			getPopupContainer={getPopupContainer ?? popupContainer}
+			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+			dropdownRender={customDropdownRender}
+			menuItemSelectedIcon={null}
+			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+			onKeyDown={handleKeyDown}
+			tagRender={tagRender as any}
+			placement={placement}
+			listHeight={300}
+			searchValue={searchText}
+			maxTagTextLength={maxTagTextLength}
+			maxTagCount={isAllSelected ? 1 : maxTagCount}
+			{...rest}
+		/>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,7 +29,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -58,29 +57,17 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
-	// Flag to track if dropdown just opened
-	const justOpenedRef = useRef<boolean>(false);
-
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -143,33 +130,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a deterministic but unique key
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a deterministic but unique key
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -269,14 +246,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
-			// Reset active option index when search changes
-			if (isOpen) {
-				setActiveOptionIndex(0);
-			}
-
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch, isOpen],
+		[onSearch],
 	);
 
 	/**
@@ -300,23 +272,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
-					let processedOptions = isEmpty(value)
-						? filteredOptions
-						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
-
-					if (!isEmpty(searchText)) {
-						processedOptions = filterOptionsBySearch(processedOptions, searchText);
-					}
-
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
+						isEmpty(value)
+							? filteredOptions
+							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
 					);
 
 					// Add custom option if needed
-					if (
-						!isEmpty(searchText) &&
-						!isLabelPresent(processedOptions, searchText)
-					) {
+					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -337,52 +300,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
-				// If we just opened the dropdown and have options, set first option as active
-				if (justOpenedRef.current && options.length > 0) {
-					setActiveOptionIndex(0);
-					justOpenedRef.current = false;
-				}
-
-				// If no option is active but we have options, activate the first one
-				if (activeOptionIndex === -1 && options.length > 0) {
-					setActiveOptionIndex(0);
-				}
-
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev < options.length - 1 ? prev + 1 : 0,
+						);
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev > 0 ? prev - 1 : options.length - 1,
+						);
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev > 0 ? prev - 1 : options.length - 1,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
 						} else {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev < options.length - 1 ? prev + 1 : 0,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
 						}
 						break;
 
@@ -395,7 +339,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -408,7 +351,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -417,7 +359,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
-						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -428,7 +369,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -439,7 +379,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				justOpenedRef.current = true; // Set flag to initialize active option on next render
+				setActiveOptionIndex(0);
 			}
 		},
 		[
@@ -504,7 +444,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -515,6 +454,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
+
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -532,16 +472,13 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -567,19 +504,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -593,7 +520,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -601,22 +527,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
-		setIsOpen(visible);
-		if (visible) {
-			justOpenedRef.current = true;
-			setActiveOptionIndex(0);
-		} else {
-			setSearchText('');
-			setActiveOptionIndex(-1);
-		}
-	}, []);
-
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -670,7 +582,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
+			onDropdownVisibleChange={setIsOpen}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,43 +35,6 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
-	&.is-all-selected {
-		.ant-select-selection-search-input {
-			caret-color: transparent;
-		}
-
-		.ant-select-selection-placeholder {
-			opacity: 1 !important;
-			color: var(--bg-vanilla-400) !important;
-			font-weight: 500;
-			visibility: visible !important;
-			pointer-events: none;
-			z-index: 2;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85) !important;
-			}
-		}
-
-		&.ant-select-focused .ant-select-selection-placeholder {
-			opacity: 0.45 !important;
-		}
-	}
-
-	.all-selected-text {
-		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		color: var(--bg-vanilla-400);
-		z-index: 1;
-		pointer-events: none;
-
-		.lightMode & {
-			color: rgba(0, 0, 0, 0.85);
-		}
-	}
-
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
@@ -195,7 +158,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 300px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -313,10 +276,6 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
-	.navigation-text-incomplete {
-		color: var(--bg-amber-600) !important;
-	}
-
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -363,7 +322,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -697,10 +656,6 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
-			font-size: 12px !important;
-			height: 20px;
-			line-height: 18px;
-
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -881,38 +836,3 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
-
-.custom-multiselect-wrapper {
-	position: relative;
-	width: 100%;
-
-	&.all-selected {
-		.all-text {
-			position: absolute;
-			left: 12px;
-			top: 50%;
-			transform: translateY(-50%);
-			color: var(--bg-vanilla-400);
-			font-weight: 500;
-			z-index: 2;
-			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85);
-			}
-		}
-
-		&:focus-within .all-text {
-			opacity: 0.45;
-		}
-
-		.ant-select-selection-search-input {
-			caret-color: auto;
-		}
-
-		.ant-select-selection-placeholder {
-			display: none;
-		}
-	}
-}

frontend/src/components/NewSelect/types.ts

@@ -24,10 +24,9 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -52,12 +51,10 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	maxTagTextLength?: number;
-	showIncompleteDataMessage?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -133,15 +133,3 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
-
-/**
- * Utility function to handle dropdown scroll and detect when scrolled to bottom
- * Returns true when scrolled to within 20px of the bottom
- */
-export const handleScrollToBottom = (
-	e: React.UIEvent<HTMLDivElement>,
-): boolean => {
-	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
-	return scrollHeight - scrollTop - clientHeight < 20;
-};

frontend/src/components/PanelDataLoading/PanelDataLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-panel-data {
-	padding: 24px 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-
-	.loading-panel-data-content {
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,19 +0,0 @@
-import './PanelDataLoading.styles.scss';
-
-import { Typography } from 'antd';
-
-export function PanelDataLoading(): JSX.Element {
-	return (
-		<div className="loading-panel-data">
-			<div className="loading-panel-data-content">
-				<img
-					className="loading-gif"
-					src="/Icons/loading-plane.gif"
-					alt="wait-icon"
-				/>
-
-				<Typography.Text>Fetching data...</Typography.Text>
-			</div>
-		</div>
-	);
-}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -131,7 +131,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
-								signalSource={config?.signalSource || ''}
 							/>
 						))}
 

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -1,11 +1,4 @@
-import {
-	createContext,
-	ReactNode,
-	useCallback,
-	useContext,
-	useMemo,
-	useState,
-} from 'react';
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
 
 // Types for the context state
 export type AggregationOption = { func: string; arg: string };
@@ -13,12 +6,8 @@ export type AggregationOption = { func: string; arg: string };
 interface QueryBuilderV2ContextType {
 	searchText: string;
 	setSearchText: (text: string) => void;
-	aggregationOptionsMap: Record<string, AggregationOption[]>;
-	setAggregationOptions: (
-		queryName: string,
-		options: AggregationOption[],
-	) => void;
-	getAggregationOptions: (queryName: string) => AggregationOption[];
+	aggregationOptions: AggregationOption[];
+	setAggregationOptions: (options: AggregationOption[]) => void;
 	aggregationInterval: string;
 	setAggregationInterval: (interval: string) => void;
 	queryAddValues: any; // Replace 'any' with a more specific type if available
@@ -35,50 +24,26 @@ export function QueryBuilderV2Provider({
 	children: ReactNode;
 }): JSX.Element {
 	const [searchText, setSearchText] = useState('');
-	const [aggregationOptionsMap, setAggregationOptionsMap] = useState<
-		Record<string, AggregationOption[]>
-	>({});
+	const [aggregationOptions, setAggregationOptions] = useState<
+		AggregationOption[]
+	>([]);
 	const [aggregationInterval, setAggregationInterval] = useState('');
 	const [queryAddValues, setQueryAddValues] = useState<any>(null); // Replace 'any' if you have a type
 
-	const setAggregationOptions = useCallback(
-		(queryName: string, options: AggregationOption[]): void => {
-			setAggregationOptionsMap((prev) => ({
-				...prev,
-				[queryName]: options,
-			}));
-		},
-		[],
-	);
-
-	const getAggregationOptions = useCallback(
-		(queryName: string): AggregationOption[] =>
-			aggregationOptionsMap[queryName] || [],
-		[aggregationOptionsMap],
-	);
-
 	return (
 		<QueryBuilderV2Context.Provider
 			value={useMemo(
 				() => ({
 					searchText,
 					setSearchText,
-					aggregationOptionsMap,
+					aggregationOptions,
 					setAggregationOptions,
-					getAggregationOptions,
 					aggregationInterval,
 					setAggregationInterval,
 					queryAddValues,
 					setQueryAddValues,
 				}),
-				[
-					searchText,
-					aggregationOptionsMap,
-					aggregationInterval,
-					queryAddValues,
-					getAggregationOptions,
-					setAggregationOptions,
-				],
+				[searchText, aggregationOptions, aggregationInterval, queryAddValues],
 			)}
 		>
 			{children}

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

@@ -7,6 +7,7 @@ import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import SpaceAggregationOptions from 'container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions';
 import { GroupByFilter, OperatorsSelect } from 'container/QueryBuilder/filters';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Info } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
@@ -18,13 +19,11 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 	index,
 	version,
 	panelType,
-	signalSource = '',
 }: {
 	query: IBuilderQuery;
 	index: number;
 	version: string;
 	panelType: PANEL_TYPES | null;
-	signalSource: string;
 }): JSX.Element {
 	const { setAggregationOptions } = useQueryBuilderV2Context();
 	const {
@@ -51,17 +50,17 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 	);
 
 	useEffect(() => {
-		setAggregationOptions(query.queryName, [
+		setAggregationOptions([
 			{
 				func: queryAggregation.spaceAggregation || 'count',
 				arg: queryAggregation.metricName || '',
 			},
 		]);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		queryAggregation.spaceAggregation,
 		queryAggregation.metricName,
-		query.queryName,
+		setAggregationOptions,
+		query,
 	]);
 
 	const handleChangeGroupByKeys = useCallback(
@@ -101,22 +100,12 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 					<div className="metrics-time-aggregation-section">
 						<div className="metrics-aggregation-section-content">
 							<div className="metrics-aggregation-section-content-item">
-								<Tooltip
-									title={
-										<a
-											href="https://signoz.io/docs/metrics-management/types-and-aggregation/#aggregation"
-											target="_blank"
-											rel="noopener noreferrer"
-											style={{ color: '#1890ff', textDecoration: 'underline' }}
-										>
-											Learn more about temporal aggregation
-										</a>
-									}
-								>
-									<div className="metrics-aggregation-section-content-item-label main-label">
-										AGGREGATE WITHIN TIME SERIES{' '}
-									</div>
-								</Tooltip>
+								<div className="metrics-aggregation-section-content-item-label main-label">
+									AGGREGATE BY TIME{' '}
+									<Tooltip title="AGGREGATE BY TIME">
+										<Info size={12} />
+									</Tooltip>
+								</div>
 								<div className="metrics-aggregation-section-content-item-value">
 									<OperatorsSelect
 										value={queryAggregation.timeAggregation || ''}
@@ -129,30 +118,9 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 
 							{showAggregationInterval && (
 								<div className="metrics-aggregation-section-content-item">
-									<Tooltip
-										title={
-											<div>
-												Set the time interval for aggregation
-												<br />
-												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
-													target="_blank"
-													rel="noopener noreferrer"
-													style={{ color: '#1890ff', textDecoration: 'underline' }}
-												>
-													Learn about step intervals
-												</a>
-											</div>
-										}
-										placement="top"
-									>
-										<div
-											className="metrics-aggregation-section-content-item-label"
-											style={{ cursor: 'help' }}
-										>
-											every
-										</div>
-									</Tooltip>
+									<div className="metrics-aggregation-section-content-item-label">
+										every
+									</div>
 
 									<div className="metrics-aggregation-section-content-item-value">
 										<InputWithLabel
@@ -170,22 +138,12 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 					<div className="metrics-space-aggregation-section">
 						<div className="metrics-aggregation-section-content">
 							<div className="metrics-aggregation-section-content-item">
-								<Tooltip
-									title={
-										<a
-											href="https://signoz.io/docs/metrics-management/types-and-aggregation/#aggregation"
-											target="_blank"
-											rel="noopener noreferrer"
-											style={{ color: '#1890ff', textDecoration: 'underline' }}
-										>
-											Learn more about spatial aggregation
-										</a>
-									}
-								>
-									<div className="metrics-aggregation-section-content-item-label main-label">
-										AGGREGATE ACROSS TIME SERIES
-									</div>
-								</Tooltip>
+								<div className="metrics-aggregation-section-content-item-label main-label">
+									AGGREGATE LABELS
+									<Tooltip title="AGGREGATE LABELS">
+										<Info size={12} />
+									</Tooltip>
+								</div>
 								<div className="metrics-aggregation-section-content-item-value">
 									<SpaceAggregationOptions
 										panelType={panelType}
@@ -210,7 +168,6 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										disabled={!queryAggregation.metricName}
 										query={query}
 										onChange={handleChangeGroupByKeys}
-										signalSource={signalSource}
 									/>
 								</div>
 							</div>
@@ -247,35 +204,13 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 									disabled={!queryAggregation.metricName}
 									query={query}
 									onChange={handleChangeGroupByKeys}
-									signalSource={signalSource}
 								/>
 							</div>
 						</div>
 						<div className="metrics-aggregation-section-content-item">
-							<Tooltip
-								title={
-									<div>
-										Set the time interval for aggregation
-										<br />
-										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
-											target="_blank"
-											rel="noopener noreferrer"
-											style={{ color: '#1890ff', textDecoration: 'underline' }}
-										>
-											Learn about step intervals
-										</a>
-									</div>
-								}
-								placement="top"
-							>
-								<div
-									className="metrics-aggregation-section-content-item-label"
-									style={{ cursor: 'help' }}
-								>
-									every
-								</div>
-							</Tooltip>
+							<div className="metrics-aggregation-section-content-item-label">
+								every
+							</div>
 
 							<div className="metrics-aggregation-section-content-item-value">
 								<InputWithLabel

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

@@ -44,14 +44,13 @@
 .lightMode {
 	.metrics-select-container {
 		.ant-select-selector {
-			border: 1px solid var(--bg-vanilla-300) !important;
+			border: 1px solid var(--bg-slate-300) !important;
 			background: var(--bg-vanilla-100);
 			color: var(--text-ink-100);
 		}
 
 		.ant-select-dropdown {
 			background: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300) !important;
 			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 			backdrop-filter: none;

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

@@ -9,12 +9,10 @@ export const MetricsSelect = memo(function MetricsSelect({
 	query,
 	index,
 	version,
-	signalSource,
 }: {
 	query: IBuilderQuery;
 	index: number;
 	version: string;
-	signalSource: 'meter' | '';
 }): JSX.Element {
 	const { handleChangeAggregatorAttribute } = useQueryOperations({
 		index,
@@ -24,12 +22,7 @@ export const MetricsSelect = memo(function MetricsSelect({
 
 	return (
 		<div className="metrics-select-container">
-			<AggregatorFilter
-				onChange={handleChangeAggregatorAttribute}
-				query={query}
-				index={index}
-				signalSource={signalSource || ''}
-			/>
+			<AggregatorFilter onChange={handleChangeAggregatorAttribute} query={query} />
 		</div>
 	);
 });

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

@@ -95,8 +95,7 @@ function HavingFilter({
 	queryData: IBuilderQuery;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const { getAggregationOptions } = useQueryBuilderV2Context();
-	const aggregationOptions = getAggregationOptions(queryData.queryName);
+	const { aggregationOptions } = useQueryBuilderV2Context();
 	const having = queryData?.having as Having;
 	const [input, setInput] = useState(having?.expression || '');
 

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

@@ -111,13 +111,17 @@
 					border-radius: 2px !important;
 					font-size: 12px !important;
 					font-weight: 500 !important;
+					margin-top: -2px !important;
+					width: 100% !important;
 					position: absolute !important;
-					top: calc(100% + 6px) !important;
+					top: 38px !important;
 					left: 0px !important;
-					right: 0px !important;
 
 					border-radius: 4px;
 					border: 1px solid var(--bg-slate-200, #1d212d);
+					border-top: none !important;
+					border-top-left-radius: 0px !important;
+					border-top-right-radius: 0px !important;
 					background: linear-gradient(
 						139deg,
 						rgba(18, 19, 23, 0.8) 0%,
@@ -125,9 +129,7 @@
 					) !important;
 					backdrop-filter: blur(20px);
 					box-sizing: border-box;
-					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 					font-family: 'Space Mono', monospace !important;
-					color: var(--bg-vanilla-100) !important;
 
 					ul {
 						width: 100% !important;
@@ -163,6 +165,7 @@
 							overflow: hidden;
 
 							font-family: 'Space Mono', monospace !important;
+							color: var(--bg-vanilla-100) !important;
 
 							.cm-completionIcon {
 								display: none !important;
@@ -327,18 +330,16 @@
 						background: var(--bg-vanilla-100) !important;
 						border: 1px solid var(--bg-vanilla-300) !important;
 						color: var(--bg-ink-500) !important;
-						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
 
 						ul {
 							li {
-								color: var(--bg-ink-300) !important;
 								&:hover {
 									background: var(--bg-vanilla-300) !important;
 								}
 
 								&[aria-selected='true'] {
+									color: var(--bg-ink-500) !important;
 									background: var(--bg-vanilla-300) !important;
-									font-weight: 600 !important;
 								}
 							}
 						}

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

@@ -1,7 +1,6 @@
-/* eslint-disable react/require-default-props */
 import './QueryAddOns.styles.scss';
 
-import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
+import { Button, Radio, RadioChangeEvent } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -10,7 +9,7 @@ import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/Re
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { isEmpty } from 'lodash-es';
-import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
+import { BarChart2, ChevronUp, ScrollText } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
@@ -22,8 +21,6 @@ interface AddOn {
 	icon: React.ReactNode;
 	label: string;
 	key: string;
-	description?: string;
-	docLink?: string;
 }
 
 const ADD_ONS_KEYS = {
@@ -39,45 +36,26 @@ const ADD_ONS = [
 		icon: <BarChart2 size={14} />,
 		label: 'Group By',
 		key: 'group_by',
-		description:
-			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
 		key: 'having',
-		description:
-			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
-		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
 		key: 'order_by',
-		description:
-			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
-		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
 		key: 'limit',
-		description:
-			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
-		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
 		key: 'legend_format',
-		description:
-			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
-		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
 	},
 ];
 
@@ -85,58 +63,8 @@ const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
 	key: 'reduce_to',
-	description:
-		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
-	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
-// Custom tooltip content component
-function TooltipContent({
-	label,
-	description,
-	docLink,
-}: {
-	label: string;
-	description?: string;
-	docLink?: string;
-}): JSX.Element {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: '8px',
-				maxWidth: '300px',
-			}}
-		>
-			<strong style={{ fontSize: '14px' }}>{label}</strong>
-			{description && (
-				<span style={{ fontSize: '12px', lineHeight: '1.5' }}>{description}</span>
-			)}
-			{docLink && (
-				<a
-					href={docLink}
-					target="_blank"
-					rel="noopener noreferrer"
-					onClick={(e): void => e.stopPropagation()}
-					style={{
-						display: 'flex',
-						alignItems: 'center',
-						gap: '4px',
-						color: '#4096ff',
-						fontSize: '12px',
-						marginTop: '4px',
-					}}
-				>
-					Learn more
-					<ExternalLink size={12} />
-				</a>
-			)}
-		</div>
-	);
-}
-
 function QueryAddOns({
 	query,
 	version,
@@ -284,21 +212,7 @@ function QueryAddOns({
 					{selectedViews.find((view) => view.key === 'group_by') && (
 						<div className="add-on-content">
 							<div className="periscope-input-with-label">
-								<Tooltip
-									title={
-										<TooltipContent
-											label="Group By"
-											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
-										/>
-									}
-									placement="top"
-									mouseEnterDelay={0.5}
-								>
-									<div className="label" style={{ cursor: 'help' }}>
-										Group By
-									</div>
-								</Tooltip>
+								<div className="label">Group By</div>
 								<div className="input">
 									<GroupByFilter
 										disabled={
@@ -320,21 +234,7 @@ function QueryAddOns({
 					{selectedViews.find((view) => view.key === 'having') && (
 						<div className="add-on-content">
 							<div className="periscope-input-with-label">
-								<Tooltip
-									title={
-										<TooltipContent
-											label="Having"
-											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
-										/>
-									}
-									placement="top"
-									mouseEnterDelay={0.5}
-								>
-									<div className="label" style={{ cursor: 'help' }}>
-										Having
-									</div>
-								</Tooltip>
+								<div className="label">Having</div>
 								<div className="input">
 									<HavingFilter
 										onClose={(): void => {
@@ -366,21 +266,7 @@ function QueryAddOns({
 					{selectedViews.find((view) => view.key === 'order_by') && (
 						<div className="add-on-content">
 							<div className="periscope-input-with-label">
-								<Tooltip
-									title={
-										<TooltipContent
-											label="Order By"
-											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
-										/>
-									}
-									placement="top"
-									mouseEnterDelay={0.5}
-								>
-									<div className="label" style={{ cursor: 'help' }}>
-										Order By
-									</div>
-								</Tooltip>
+								<div className="label">Order By</div>
 								<div className="input">
 									<OrderByFilter
 										entityVersion={version}
@@ -404,21 +290,7 @@ function QueryAddOns({
 					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
 						<div className="add-on-content">
 							<div className="periscope-input-with-label">
-								<Tooltip
-									title={
-										<TooltipContent
-											label="Reduce to"
-											description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
-										/>
-									}
-									placement="top"
-									mouseEnterDelay={0.5}
-								>
-									<div className="label" style={{ cursor: 'help' }}>
-										Reduce to
-									</div>
-								</Tooltip>
+								<div className="label">Reduce to</div>
 								<div className="input">
 									<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 								</div>
@@ -458,32 +330,20 @@ function QueryAddOns({
 					value={selectedViews}
 				>
 					{addOns.map((addOn) => (
-						<Tooltip
-							key={addOn.key}
-							title={
-								<TooltipContent
-									label={addOn.label}
-									description={addOn.description}
-									docLink={addOn.docLink}
-								/>
+						<Radio.Button
+							key={addOn.label}
+							className={
+								selectedViews.find((view) => view.key === addOn.key)
+									? 'selected-view tab'
+									: 'tab'
 							}
-							placement="top"
-							mouseEnterDelay={0.5}
+							value={addOn}
 						>
-							<Radio.Button
-								className={
-									selectedViews.find((view) => view.key === addOn.key)
-										? 'selected-view tab'
-										: 'tab'
-								}
-								value={addOn}
-							>
-								<div className="add-on-tab-title">
-									{addOn.icon}
-									{addOn.label}
-								</div>
-							</Radio.Button>
-						</Tooltip>
+							<div className="add-on-tab-title">
+								{addOn.icon}
+								{addOn.label}
+							</div>
+						</Radio.Button>
 					))}
 				</Radio.Group>
 			</div>

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

@@ -63,14 +63,17 @@
 						border-radius: 2px !important;
 						font-size: 12px !important;
 						font-weight: 500 !important;
+						margin-top: 8px !important;
 						min-width: 400px !important;
 						position: absolute !important;
-						top: calc(100% + 6px) !important;
 						left: 0px !important;
-						right: 0px !important;
+						width: 100% !important;
 
 						border-radius: 4px;
 						border: 1px solid var(--bg-slate-200, #1d212d);
+						border-top: none !important;
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
 						background: linear-gradient(
 							139deg,
 							rgba(18, 19, 23, 0.8) 0%,
@@ -78,7 +81,6 @@
 						) !important;
 						backdrop-filter: blur(20px);
 						box-sizing: border-box;
-						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 						font-family: 'Space Mono', monospace !important;
 
 						ul {
@@ -267,17 +269,19 @@
 							background: var(--bg-vanilla-100) !important;
 							border: 1px solid var(--bg-vanilla-300) !important;
 							color: var(--bg-ink-500) !important;
-							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
 
 							ul {
 								li {
-									color: var(--bg-ink-300) !important;
+									&:hover {
+										background-color: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+										font-weight: 600;
+									}
 
-									&:hover,
 									&[aria-selected='true'] {
 										background: var(--bg-vanilla-300) !important;
 										color: var(--bg-ink-500) !important;
-										font-weight: 600 !important;
+										font-weight: 600;
 									}
 								}
 							}

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

@@ -1,6 +1,5 @@
 import './QueryAggregation.styles.scss';
 
-import { Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useMemo } from 'react';
@@ -54,31 +53,7 @@ function QueryAggregationOptions({
 
 				{showAggregationInterval && (
 					<div className="query-aggregation-interval">
-						<Tooltip
-							title={
-								<div>
-									Set the time interval for aggregation
-									<br />
-									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
-										target="_blank"
-										rel="noopener noreferrer"
-										style={{ color: '#1890ff', textDecoration: 'underline' }}
-									>
-										Learn about step intervals
-									</a>
-								</div>
-							}
-							placement="top"
-						>
-							<div
-								className="metrics-aggregation-section-content-item-label"
-								style={{ cursor: 'help' }}
-							>
-								every
-							</div>
-						</Tooltip>
-
+						<div className="query-aggregation-interval-label">every</div>
 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
 								initialValue={

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

@@ -27,13 +27,13 @@ import CodeMirror, {
 	ViewPlugin,
 	ViewUpdate,
 } from '@uiw/react-codemirror';
-import { Button, Popover, Tooltip } from 'antd';
+import { Button, Popover } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { Info, TriangleAlert } from 'lucide-react';
+import { TriangleAlert } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -263,7 +263,7 @@ function QueryAggregationSelect({
 
 		setValidationError(validateAggregations());
 		setFunctionArgPairs(pairs);
-		setAggregationOptions(queryData.queryName, pairs);
+		setAggregationOptions(pairs);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [input, maxAggregations, validFunctions]);
 
@@ -639,50 +639,6 @@ function QueryAggregationSelect({
 					}
 				}}
 			/>
-
-			<Tooltip
-				title={
-					<div>
-						Aggregation functions:
-						<br />
-						<span style={{ fontSize: '12px', lineHeight: '1.4' }}>
-							• <strong>count</strong> - number of occurrences
-							<br />• <strong>sum/avg</strong> - sum/average of values
-							<br />• <strong>min/max</strong> - minimum/maximum value
-							<br />• <strong>p50/p90/p99</strong> - percentiles
-							<br />• <strong>count_distinct</strong> - unique values
-							<br />• <strong>rate</strong> - per-interval rate
-						</span>
-						<br />
-						<a
-							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
-							target="_blank"
-							rel="noopener noreferrer"
-							style={{ color: '#1890ff', textDecoration: 'underline' }}
-						>
-							View documentation
-						</a>
-					</div>
-				}
-				placement="left"
-			>
-				<div
-					style={{
-						position: 'absolute',
-						top: '8px', // Match the error icon's top position
-						right: validationError ? '40px' : '8px', // Move left when error icon is shown
-						cursor: 'help',
-						zIndex: 10,
-						transition: 'right 0.2s ease',
-					}}
-				>
-					<Info
-						size={14}
-						style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
-					/>
-				</div>
-			</Tooltip>
-
 			{validationError && (
 				<div className="query-aggregation-error-container">
 					<Popover

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

@@ -12,7 +12,22 @@ export default function QueryFooter({
 		<div className="qb-footer">
 			<div className="qb-footer-container">
 				<div className="qb-add-new-query">
-					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
+					<Tooltip
+						title={
+							<div style={{ textAlign: 'center' }}>
+								Add New Query
+								<Typography.Link
+									href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
+									target="_blank"
+									style={{ textDecoration: 'underline' }}
+								>
+									{' '}
+									<br />
+									Learn more
+								</Typography.Link>
+							</div>
+						}
+					>
 						<Button
 							className="add-new-query-button periscope-btn secondary"
 							type="text"
@@ -28,7 +43,7 @@ export default function QueryFooter({
 							<div style={{ textAlign: 'center' }}>
 								Add New Formula
 								<Typography.Link
-									href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+									href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}
 								>

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

@@ -48,7 +48,7 @@
 
 	.cm-editor {
 		border-radius: 2px;
-		// overflow: hidden;
+		overflow: hidden;
 		background-color: transparent !important;
 
 		&:focus-within {
@@ -75,11 +75,11 @@
 			border-radius: 2px !important;
 			font-size: 12px !important;
 			font-weight: 500 !important;
+			margin-top: -2px !important;
 			min-width: 400px !important;
-			position: absolute !important;
-			top: calc(100% + 6px) !important;
+			position: relative !important;
+			top: 0px !important;
 			left: 0px !important;
-			right: 0px !important;
 
 			border-radius: 4px;
 			border: 0px;
@@ -91,8 +91,6 @@
 			backdrop-filter: blur(20px);
 			box-sizing: border-box;
 			font-family: 'Space Mono', monospace !important;
-			border: 1px solid var(--bg-slate-200);
-			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 
 			ul {
 				width: 100% !important;
@@ -573,9 +571,9 @@
 
 			.cm-tooltip-autocomplete {
 				background: var(--bg-vanilla-100) !important;
-				border: 1px solid var(--bg-vanilla-300);
+
+				border: 0px;
 				backdrop-filter: blur(20px);
-				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
 
 				ul {
 					li {
@@ -585,7 +583,7 @@
 						&:hover,
 						&[aria-selected='true'] {
 							background-color: var(--bg-vanilla-300) !important;
-							font-weight: 600 !important;
+							font-weight: 600;
 						}
 					}
 				}

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

@@ -16,13 +16,12 @@ 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, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Collapse, Popover, Tag } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
-	OPERATORS,
 	QUERY_BUILDER_KEY_TYPES,
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
@@ -31,7 +30,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { TriangleAlert } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
 	IDetailedError,
@@ -41,11 +40,11 @@ import {
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
+import { validateQuery } from 'utils/antlrQueryUtils';
 import {
 	getCurrentValueIndexAtCursor,
 	getQueryContextAtCursor,
 } from 'utils/queryContextUtils';
-import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
@@ -81,17 +80,18 @@ function QuerySearch({
 	queryData,
 	dataSource,
 	onRun,
-	signalSource,
 }: {
 	onChange: (value: string) => void;
 	queryData: IBuilderQuery;
 	dataSource: DataSource;
-	signalSource?: string;
 	onRun?: (query: string) => void;
 }): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [query, setQuery] = useState<string>(queryData.filter?.expression || '');
-	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
+	const [valueSuggestions, setValueSuggestions] = useState<any[]>([
+		{ label: 'error', type: 'value' },
+		{ label: 'frontend', type: 'value' },
+	]);
 	const [activeKey, setActiveKey] = useState<string>('');
 	const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
 	const [queryContext, setQueryContext] = useState<IQueryContext | null>(null);
@@ -114,27 +114,9 @@ function QuerySearch({
 		}
 	};
 
-	// Track if the query was changed externally (from queryData) vs internally (user input)
-	const [isExternalQueryChange, setIsExternalQueryChange] = useState(false);
-	const [lastExternalQuery, setLastExternalQuery] = useState<string>('');
-
 	useEffect(() => {
-		const newQuery = queryData.filter?.expression || '';
-		// Only mark as external change if the query actually changed from external source
-		if (newQuery !== lastExternalQuery) {
-			setQuery(newQuery);
-			setIsExternalQueryChange(true);
-			setLastExternalQuery(newQuery);
-		}
-	}, [queryData.filter?.expression, lastExternalQuery]);
-
-	// Validate query when it changes externally (from queryData)
-	useEffect(() => {
-		if (isExternalQueryChange && query) {
-			handleQueryValidation(query);
-			setIsExternalQueryChange(false);
-		}
-	}, [isExternalQueryChange, query]);
+		setQuery(queryData.filter?.expression || '');
+	}, [queryData.filter?.expression]);
 
 	const [keySuggestions, setKeySuggestions] = useState<
 		QueryKeyDataSuggestionsProps[] | null
@@ -145,6 +127,7 @@ function QuerySearch({
 	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
 	const [isFocused, setIsFocused] = useState(false);
 
+	const [isCompleteKeysList, setIsCompleteKeysList] = useState(false);
 	const [
 		isFetchingCompleteValuesList,
 		setIsFetchingCompleteValuesList,
@@ -155,7 +138,6 @@ function QuerySearch({
 	// Reference to the editor view for programmatic autocompletion
 	const editorRef = useRef<EditorView | null>(null);
 	const lastKeyRef = useRef<string>('');
-	const lastFetchedKeyRef = useRef<string>('');
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
@@ -188,78 +170,36 @@ function QuerySearch({
 		500,
 	);
 
-	const toggleSuggestions = useCallback(
-		(timeout?: number) => {
-			const timeoutId = setTimeout(() => {
-				if (!editorRef.current) return;
-				if (isFocused) {
-					startCompletion(editorRef.current);
-				} else {
-					closeCompletion(editorRef.current);
-				}
-			}, timeout);
+	const fetchKeySuggestions = async (searchText?: string): Promise<void> => {
+		if (dataSource === DataSource.METRICS && !queryData.aggregateAttribute?.key) {
+			setKeySuggestions([]);
+			return;
+		}
+		const response = await getKeySuggestions({
+			signal: dataSource,
+			searchText: searchText || '',
+			metricName: debouncedMetricName ?? undefined,
+		});
 
-			return (): void => clearTimeout(timeoutId);
-		},
-		[isFocused],
-	);
-
-	const fetchKeySuggestions = useCallback(
-		async (searchText?: string): Promise<void> => {
-			if (
-				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key
-			) {
-				setKeySuggestions([]);
-				return;
+		if (response.data.data) {
+			const { complete, keys } = response.data.data;
+			const options = generateOptions(keys);
+			// Use a Map to deduplicate by label and preserve order: new options take precedence
+			const merged = new Map<string, QueryKeyDataSuggestionsProps>();
+			options.forEach((opt) => merged.set(opt.label, opt));
+			if (searchText && lastKeyRef.current !== searchText) {
+				(keySuggestions || []).forEach((opt) => {
+					if (!merged.has(opt.label)) merged.set(opt.label, opt);
+				});
 			}
-
-			lastFetchedKeyRef.current = searchText || '';
-
-			const response = await getKeySuggestions({
-				signal: dataSource,
-				searchText: searchText || '',
-				metricName: debouncedMetricName ?? undefined,
-				signalSource: signalSource as 'meter' | '',
-			});
-
-			if (response.data.data) {
-				const { keys } = response.data.data;
-				const options = generateOptions(keys);
-				// Use a Map to deduplicate by label and preserve order: new options take precedence
-				const merged = new Map<string, QueryKeyDataSuggestionsProps>();
-				options.forEach((opt) => merged.set(opt.label, opt));
-				if (searchText && lastKeyRef.current !== searchText) {
-					(keySuggestions || []).forEach((opt) => {
-						if (!merged.has(opt.label)) merged.set(opt.label, opt);
-					});
-				}
-				setKeySuggestions(Array.from(merged.values()));
-
-				// Force reopen the completion if editor is available and focused
-				if (editorRef.current) {
-					toggleSuggestions(10);
-				}
-			}
-		},
-		[
-			dataSource,
-			debouncedMetricName,
-			keySuggestions,
-			toggleSuggestions,
-			queryData.aggregateAttribute?.key,
-			signalSource,
-		],
-	);
-
-	const debouncedFetchKeySuggestions = useMemo(
-		() => debounce(fetchKeySuggestions, 300),
-		[fetchKeySuggestions],
-	);
+			setKeySuggestions(Array.from(merged.values()));
+			setIsCompleteKeysList(complete);
+		}
+	};
 
 	useEffect(() => {
 		setKeySuggestions([]);
-		debouncedFetchKeySuggestions();
+		fetchKeySuggestions();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dataSource, debouncedMetricName]);
 
@@ -370,11 +310,6 @@ function QuerySearch({
 				},
 			]);
 
-			// Force reopen the completion if editor is available and focused
-			if (editorRef.current) {
-				toggleSuggestions(10);
-			}
-
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
 
 			try {
@@ -382,8 +317,6 @@ function QuerySearch({
 					key,
 					searchText: sanitizedSearchText,
 					signal: dataSource,
-					signalSource: signalSource as 'meter' | '',
-					metricName: debouncedMetricName ?? undefined,
 				});
 
 				// Skip updates if component unmounted or key changed
@@ -449,9 +382,13 @@ function QuerySearch({
 						]);
 					}
 
-					// Force reopen the completion if editor is available and focused
+					// Force reopen the completion if editor is available
 					if (editorRef.current) {
-						toggleSuggestions(10);
+						setTimeout(() => {
+							if (isMountedRef.current && editorRef.current) {
+								startCompletion(editorRef.current);
+							}
+						}, 10);
 					}
 				}
 			} catch (error) {
@@ -471,14 +408,7 @@ function QuerySearch({
 				setIsFetchingCompleteValuesList(false);
 			}
 		},
-		[
-			activeKey,
-			dataSource,
-			isLoadingSuggestions,
-			debouncedMetricName,
-			signalSource,
-			toggleSuggestions,
-		],
+		[activeKey, dataSource, isLoadingSuggestions],
 	);
 
 	const debouncedFetchValueSuggestions = useMemo(
@@ -538,13 +468,14 @@ function QuerySearch({
 		}
 	}, []);
 
+	const handleQueryChange = useCallback(async (newQuery: string) => {
+		setQuery(newQuery);
+	}, []);
+
 	const handleChange = (value: string): void => {
 		setQuery(value);
+		handleQueryChange(value);
 		onChange(value);
-		// Mark as internal change to avoid triggering external validation
-		setIsExternalQueryChange(false);
-		// Update lastExternalQuery to prevent external validation trigger
-		setLastExternalQuery(value);
 	};
 
 	const handleBlur = (): void => {
@@ -552,27 +483,24 @@ function QuerySearch({
 		setIsFocused(false);
 	};
 
-	useEffect(
-		() => (): void => {
+	useEffect(() => {
+		if (query) {
+			handleQueryValidation(query);
+		}
+
+		return (): void => {
 			if (debouncedFetchValueSuggestions) {
 				debouncedFetchValueSuggestions.cancel();
 			}
-			if (debouncedFetchKeySuggestions) {
-				debouncedFetchKeySuggestions.cancel();
-			}
-		},
+		};
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
-	);
+	}, []);
 
 	const handleExampleClick = (exampleQuery: string): void => {
 		// If there's an existing query, append the example with AND
 		const newQuery = query ? `${query} AND ${exampleQuery}` : exampleQuery;
 		setQuery(newQuery);
-		// Mark as internal change to avoid triggering external validation
-		setIsExternalQueryChange(false);
-		// Update lastExternalQuery to prevent external validation trigger
-		setLastExternalQuery(newQuery);
+		handleQueryChange(newQuery);
 	};
 
 	// Helper function to render a badge for the current context mode
@@ -815,14 +743,16 @@ function QuerySearch({
 		}
 
 		if (queryContext.isInKey) {
-			const searchText = word?.text.toLowerCase().trim() ?? '';
+			const searchText = word?.text.toLowerCase() ?? '';
 
 			options = (keySuggestions || []).filter((option) =>
 				option.label.toLowerCase().includes(searchText),
 			);
 
-			if (options.length === 0 && lastFetchedKeyRef.current !== searchText) {
-				debouncedFetchKeySuggestions(searchText);
+			if (!isCompleteKeysList && options.length === 0) {
+				setTimeout(() => {
+					fetchKeySuggestions(searchText);
+				}, 300);
 			}
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
@@ -897,32 +827,12 @@ function QuerySearch({
 									QUERY_BUILDER_KEY_TYPES.STRING
 								].includes(op.label),
 							)
-							.map((op) => {
-								if (op.label === OPERATORS['=']) {
-									return {
-										...op,
-										boost: 200,
-									};
-								}
-								if (
-									[
-										OPERATORS['!='],
-										OPERATORS.LIKE,
-										OPERATORS.ILIKE,
-										OPERATORS.CONTAINS,
-										OPERATORS.IN,
-									].includes(op.label)
-								) {
-									return {
-										...op,
-										boost: 100,
-									};
-								}
-								return {
-									...op,
-									boost: 0,
-								};
-							});
+							.map((op) => ({
+								...op,
+								boost: ['=', '!=', 'LIKE', 'ILIKE', 'CONTAINS', 'IN'].includes(op.label)
+									? 100
+									: 0,
+							}));
 					} else if (keyType === QUERY_BUILDER_KEY_TYPES.BOOLEAN) {
 						// Prioritize boolean operators
 						options = options
@@ -931,24 +841,10 @@ function QuerySearch({
 									QUERY_BUILDER_KEY_TYPES.BOOLEAN
 								].includes(op.label),
 							)
-							.map((op) => {
-								if (op.label === OPERATORS['=']) {
-									return {
-										...op,
-										boost: 200,
-									};
-								}
-								if (op.label === OPERATORS['!=']) {
-									return {
-										...op,
-										boost: 100,
-									};
-								}
-								return {
-									...op,
-									boost: 0,
-								};
-							});
+							.map((op) => ({
+								...op,
+								boost: ['=', '!='].includes(op.label) ? 100 : 0,
+							}));
 					}
 				}
 			}
@@ -1138,15 +1034,26 @@ function QuerySearch({
 
 	// Effect to handle focus state and trigger suggestions
 	useEffect(() => {
-		const clearTimeout = toggleSuggestions(10);
-		return (): void => clearTimeout();
-	}, [isFocused, toggleSuggestions]);
+		if (editorRef.current) {
+			if (!isFocused) {
+				closeCompletion(editorRef.current);
+			} else {
+				startCompletion(editorRef.current);
+			}
+		}
+	}, [isFocused]);
 
 	useEffect(() => {
 		if (!queryContext) return;
+
 		// Trigger suggestions based on context
 		if (editorRef.current) {
-			toggleSuggestions(10);
+			// Small delay to ensure the context is fully updated
+			setTimeout(() => {
+				if (editorRef.current) {
+					startCompletion(editorRef.current);
+				}
+			}, 50);
 		}
 
 		// Handle value suggestions for value context
@@ -1159,28 +1066,7 @@ function QuerySearch({
 				fetchValueSuggestions({ key });
 			}
 		}
-	}, [
-		queryContext,
-		toggleSuggestions,
-		isLoadingSuggestions,
-		activeKey,
-		fetchValueSuggestions,
-	]);
-
-	const getTooltipContent = (): JSX.Element => (
-		<div>
-			Need help with search syntax?
-			<br />
-			<a
-				href="https://signoz.io/docs/userguide/search-syntax/"
-				target="_blank"
-				rel="noopener noreferrer"
-				style={{ color: '#1890ff', textDecoration: 'underline' }}
-			>
-				View documentation
-			</a>
-		</div>
-	);
+	}, [queryContext, activeKey, isLoadingSuggestions, fetchValueSuggestions]);
 
 	return (
 		<div className="code-mirror-where-clause">
@@ -1223,31 +1109,6 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
-				<Tooltip title={getTooltipContent()} placement="left">
-					<a
-						href="https://signoz.io/docs/userguide/search-syntax/"
-						target="_blank"
-						rel="noopener noreferrer"
-						style={{
-							position: 'absolute',
-							top: 8,
-							right: validation.isValid === false && query ? 40 : 8, // Move left when error shown
-							cursor: 'help',
-							zIndex: 10,
-							transition: 'right 0.2s ease',
-							display: 'inline-flex',
-							alignItems: 'center',
-							color: '#8c8c8c',
-						}}
-						onClick={(e): void => e.stopPropagation()}
-					>
-						<Info
-							size={14}
-							style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
-						/>
-					</a>
-				</Tooltip>
-
 				<CodeMirror
 					value={query}
 					theme={isDarkMode ? copilot : githubLight}
@@ -1306,7 +1167,7 @@ function QuerySearch({
 							]),
 						),
 					]}
-					placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
+					placeholder="Enter your filter query (e.g., status = 'error' AND service = 'frontend')"
 					basicSetup={{
 						lineNumbers: false,
 					}}
@@ -1452,7 +1313,6 @@ function QuerySearch({
 
 QuerySearch.defaultProps = {
 	onRun: undefined,
-	signalSource: '',
 };
 
 export default QuerySearch;

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

@@ -28,7 +28,6 @@ export const QueryV2 = memo(function QueryV2({
 	isListViewPanel = false,
 	version,
 	showOnlyWhereClause = false,
-	signalSource = '',
 }: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
@@ -176,7 +175,6 @@ export const QueryV2 = memo(function QueryV2({
 										query={query}
 										index={index}
 										version={ENTITY_VERSION_V5}
-										signalSource={signalSource as 'meter' | ''}
 									/>
 								</div>
 							)}
@@ -188,7 +186,6 @@ export const QueryV2 = memo(function QueryV2({
 										onChange={handleSearchChange}
 										queryData={query}
 										dataSource={dataSource}
-										signalSource={signalSource}
 									/>
 								</div>
 
@@ -221,7 +218,6 @@ export const QueryV2 = memo(function QueryV2({
 								index={index}
 								key={`metrics-aggregate-section-${query.queryName}-${query.dataSource}`}
 								version="v4"
-								signalSource={signalSource as 'meter' | ''}
 							/>
 						)}
 

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

@@ -1,536 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { convertFiltersToExpression } from '../utils';
-
-describe('convertFiltersToExpression', () => {
-	it('should handle empty, null, and undefined inputs', () => {
-		// Test null and undefined
-		expect(convertFiltersToExpression(null as any)).toEqual({ expression: '' });
-		expect(convertFiltersToExpression(undefined as any)).toEqual({
-			expression: '',
-		});
-
-		// Test empty filters
-		expect(convertFiltersToExpression({ items: [], op: 'AND' })).toEqual({
-			expression: '',
-		});
-		expect(
-			convertFiltersToExpression({ items: undefined, op: 'AND' } as any),
-		).toEqual({ expression: '' });
-	});
-
-	it('should convert basic comparison operators with proper value formatting', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'service', type: 'string' },
-					op: '=',
-					value: 'api-gateway',
-				},
-				{
-					id: '2',
-					key: { key: 'status', type: 'string' },
-					op: '!=',
-					value: 'error',
-				},
-				{
-					id: '3',
-					key: { key: 'duration', type: 'number' },
-					op: '>',
-					value: 100,
-				},
-				{
-					id: '4',
-					key: { key: 'count', type: 'number' },
-					op: '<=',
-					value: 50,
-				},
-				{
-					id: '5',
-					key: { key: 'is_active', type: 'boolean' },
-					op: '=',
-					value: true,
-				},
-				{
-					id: '6',
-					key: { key: 'enabled', type: 'boolean' },
-					op: '=',
-					value: false,
-				},
-				{
-					id: '7',
-					key: { key: 'count', type: 'number' },
-					op: '=',
-					value: 0,
-				},
-				{
-					id: '7',
-					key: { key: 'regex', type: 'string' },
-					op: 'regex',
-					value: '.*',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"service = 'api-gateway' AND status != 'error' AND duration > 100 AND count <= 50 AND is_active = true AND enabled = false AND count = 0 AND regex REGEXP '.*'",
-		});
-	});
-
-	it('should handle string value formatting and escaping', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'message', type: 'string' },
-					op: '=',
-					value: "user's data",
-				},
-				{
-					id: '2',
-					key: { key: 'description', type: 'string' },
-					op: '=',
-					value: '',
-				},
-				{
-					id: '3',
-					key: { key: 'path', type: 'string' },
-					op: '=',
-					value: '/api/v1/users',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"message = 'user\\'s data' AND description = '' AND path = '/api/v1/users'",
-		});
-	});
-
-	it('should handle IN operator with various value types and array formatting', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'service', type: 'string' },
-					op: 'IN',
-					value: ['api-gateway', 'user-service', 'auth-service'],
-				},
-				{
-					id: '2',
-					key: { key: 'status', type: 'string' },
-					op: 'IN',
-					value: 'success', // Single value should be converted to array
-				},
-				{
-					id: '3',
-					key: { key: 'tags', type: 'string' },
-					op: 'IN',
-					value: [], // Empty array
-				},
-				{
-					id: '4',
-					key: { key: 'name', type: 'string' },
-					op: 'IN',
-					value: ["John's", "Mary's", 'Bob'], // Values with quotes
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"service in ['api-gateway', 'user-service', 'auth-service'] AND status in ['success'] AND tags in [] AND name in ['John\\'s', 'Mary\\'s', 'Bob']",
-		});
-	});
-
-	it('should convert deprecated operators to their modern equivalents', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'service', type: 'string' },
-					op: 'nin',
-					value: ['api-gateway', 'user-service'],
-				},
-				{
-					id: '2',
-					key: { key: 'message', type: 'string' },
-					op: 'nlike',
-					value: 'error',
-				},
-				{
-					id: '3',
-					key: { key: 'path', type: 'string' },
-					op: 'nregex',
-					value: '/api/.*',
-				},
-				{
-					id: '4',
-					key: { key: 'service', type: 'string' },
-					op: 'NIN', // Test case insensitivity
-					value: ['api-gateway'],
-				},
-				{
-					id: '5',
-					key: { key: 'user_id', type: 'string' },
-					op: 'nexists',
-					value: '',
-				},
-				{
-					id: '6',
-					key: { key: 'description', type: 'string' },
-					op: 'ncontains',
-					value: 'error',
-				},
-				{
-					id: '7',
-					key: { key: 'tags', type: 'string' },
-					op: 'nhas',
-					value: 'production',
-				},
-				{
-					id: '8',
-					key: { key: 'labels', type: 'string' },
-					op: 'nhasany',
-					value: ['env:prod', 'service:api'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"service NOT IN ['api-gateway', 'user-service'] AND message NOT LIKE 'error' AND path NOT REGEXP '/api/.*' AND service NOT IN ['api-gateway'] AND user_id NOT EXISTS AND description NOT CONTAINS 'error' AND NOT has(tags, 'production') AND NOT hasAny(labels, ['env:prod', 'service:api'])",
-		});
-	});
-
-	it('should handle non-value operators and function operators', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'user_id', type: 'string' },
-					op: 'EXISTS',
-					value: '', // Value should be ignored for EXISTS
-				},
-				{
-					id: '2',
-					key: { key: 'user_id', type: 'string' },
-					op: 'EXISTS',
-					value: 'some-value', // Value should be ignored for EXISTS
-				},
-				{
-					id: '3',
-					key: { key: 'tags', type: 'string' },
-					op: 'has',
-					value: 'production',
-				},
-				{
-					id: '4',
-					key: { key: 'tags', type: 'string' },
-					op: 'hasAny',
-					value: ['production', 'staging'],
-				},
-				{
-					id: '5',
-					key: { key: 'tags', type: 'string' },
-					op: 'hasAll',
-					value: ['production', 'monitoring'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"user_id exists AND user_id exists AND has(tags, 'production') AND hasAny(tags, ['production', 'staging']) AND hasAll(tags, ['production', 'monitoring'])",
-		});
-	});
-
-	it('should filter out invalid filters and handle edge cases', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'service', type: 'string' },
-					op: '=',
-					value: 'api-gateway',
-				},
-				{
-					id: '2',
-					key: undefined, // Invalid filter - should be skipped
-					op: '=',
-					value: 'error',
-				},
-				{
-					id: '3',
-					key: { key: '', type: 'string' }, // Invalid filter with empty key - should be skipped
-					op: '=',
-					value: 'test',
-				},
-				{
-					id: '4',
-					key: { key: 'status', type: 'string' },
-					op: ' = ', // Test whitespace handling
-					value: 'success',
-				},
-				{
-					id: '5',
-					key: { key: 'service', type: 'string' },
-					op: 'In', // Test mixed case handling
-					value: ['api-gateway'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"service = 'api-gateway' AND status = 'success' AND service in ['api-gateway']",
-		});
-	});
-
-	it('should handle complex mixed operator scenarios with proper joining', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'service', type: 'string' },
-					op: 'IN',
-					value: ['api-gateway', 'user-service'],
-				},
-				{
-					id: '2',
-					key: { key: 'user_id', type: 'string' },
-					op: 'EXISTS',
-					value: '',
-				},
-				{
-					id: '3',
-					key: { key: 'tags', type: 'string' },
-					op: 'has',
-					value: 'production',
-				},
-				{
-					id: '4',
-					key: { key: 'duration', type: 'number' },
-					op: '>',
-					value: 100,
-				},
-				{
-					id: '5',
-					key: { key: 'status', type: 'string' },
-					op: 'nin',
-					value: ['error', 'timeout'],
-				},
-				{
-					id: '6',
-					key: { key: 'method', type: 'string' },
-					op: '=',
-					value: 'POST',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"service in ['api-gateway', 'user-service'] AND user_id exists AND has(tags, 'production') AND duration > 100 AND status NOT IN ['error', 'timeout'] AND method = 'POST'",
-		});
-	});
-
-	it('should handle all numeric comparison operators and edge cases', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'count', type: 'number' },
-					op: '=',
-					value: 0,
-				},
-				{
-					id: '2',
-					key: { key: 'score', type: 'number' },
-					op: '>',
-					value: 100,
-				},
-				{
-					id: '3',
-					key: { key: 'limit', type: 'number' },
-					op: '>=',
-					value: 50,
-				},
-				{
-					id: '4',
-					key: { key: 'threshold', type: 'number' },
-					op: '<',
-					value: 1000,
-				},
-				{
-					id: '5',
-					key: { key: 'max_value', type: 'number' },
-					op: '<=',
-					value: 999,
-				},
-				{
-					id: '6',
-					key: { key: 'values', type: 'string' },
-					op: 'IN',
-					value: ['1', '2', '3', '4', '5'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"count = 0 AND score > 100 AND limit >= 50 AND threshold < 1000 AND max_value <= 999 AND values in ['1', '2', '3', '4', '5']",
-		});
-	});
-
-	it('should handle boolean values and string comparisons with special characters', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'is_active', type: 'boolean' },
-					op: '=',
-					value: true,
-				},
-				{
-					id: '2',
-					key: { key: 'is_deleted', type: 'boolean' },
-					op: '=',
-					value: false,
-				},
-				{
-					id: '3',
-					key: { key: 'email', type: 'string' },
-					op: '=',
-					value: 'user@example.com',
-				},
-				{
-					id: '4',
-					key: { key: 'description', type: 'string' },
-					op: '=',
-					value: 'Contains "quotes" and \'apostrophes\'',
-				},
-				{
-					id: '5',
-					key: { key: 'path', type: 'string' },
-					op: '=',
-					value: '/api/v1/users/123?filter=true',
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"is_active = true AND is_deleted = false AND email = 'user@example.com' AND description = 'Contains \"quotes\" and \\'apostrophes\\'' AND path = '/api/v1/users/123?filter=true'",
-		});
-	});
-
-	it('should handle all function operators and complex array scenarios', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'tags', type: 'string' },
-					op: 'has',
-					value: 'production',
-				},
-				{
-					id: '2',
-					key: { key: 'labels', type: 'string' },
-					op: 'hasAny',
-					value: ['env:prod', 'service:api'],
-				},
-				{
-					id: '3',
-					key: { key: 'metadata', type: 'string' },
-					op: 'hasAll',
-					value: ['version:1.0', 'team:backend'],
-				},
-				{
-					id: '4',
-					key: { key: 'services', type: 'string' },
-					op: 'IN',
-					value: ['api-gateway', 'user-service', 'auth-service', 'payment-service'],
-				},
-				{
-					id: '5',
-					key: { key: 'excluded_services', type: 'string' },
-					op: 'nin',
-					value: ['legacy-service', 'deprecated-service'],
-				},
-				{
-					id: '6',
-					key: { key: 'status_codes', type: 'string' },
-					op: 'IN',
-					value: ['200', '201', '400', '500'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"has(tags, 'production') AND hasAny(labels, ['env:prod', 'service:api']) AND hasAll(metadata, ['version:1.0', 'team:backend']) AND services in ['api-gateway', 'user-service', 'auth-service', 'payment-service'] AND excluded_services NOT IN ['legacy-service', 'deprecated-service'] AND status_codes in ['200', '201', '400', '500']",
-		});
-	});
-
-	it('should handle specific deprecated operators: nhas, ncontains, nexists', () => {
-		const filters: TagFilter = {
-			items: [
-				{
-					id: '1',
-					key: { key: 'user_id', type: 'string' },
-					op: 'nexists',
-					value: '',
-				},
-				{
-					id: '2',
-					key: { key: 'description', type: 'string' },
-					op: 'ncontains',
-					value: 'error',
-				},
-				{
-					id: '3',
-					key: { key: 'tags', type: 'string' },
-					op: 'nhas',
-					value: 'production',
-				},
-				{
-					id: '4',
-					key: { key: 'labels', type: 'string' },
-					op: 'nhasany',
-					value: ['env:prod', 'service:api'],
-				},
-			],
-			op: 'AND',
-		};
-
-		const result = convertFiltersToExpression(filters);
-		expect(result).toEqual({
-			expression:
-				"user_id NOT EXISTS AND description NOT CONTAINS 'error' AND NOT has(tags, 'production') AND NOT hasAny(labels, ['env:prod', 'service:api'])",
-		});
-	});
-});

frontend/src/components/QueryBuilderV2/utils.ts

@@ -1,10 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { createAggregation } from 'api/v5/queryRange/prepareQueryRangePayloadV5';
-import {
-	DEPRECATED_OPERATORS_MAP,
-	OPERATORS,
-	QUERY_BUILDER_FUNCTIONS,
-} from 'constants/antlrQueryConstants';
+import { OPERATORS } from 'constants/antlrQueryConstants';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { cloneDeep } from 'lodash-es';
 import { IQueryPair } from 'types/antlrQueryTypes';
@@ -25,7 +21,6 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { unquote } from 'utils/stringUtils';
-import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -91,32 +86,8 @@ export const convertFiltersToExpression = (
 				return '';
 			}
 
-			let operator = op.trim().toLowerCase();
-			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(operator)) {
-				operator =
-					DEPRECATED_OPERATORS_MAP[
-						operator as keyof typeof DEPRECATED_OPERATORS_MAP
-					];
-			}
-
-			if (isNonValueOperator(operator)) {
-				return `${key.key} ${operator}`;
-			}
-
-			if (isFunctionOperator(operator)) {
-				// Get the proper function name from QUERY_BUILDER_FUNCTIONS
-				const functionOperators = Object.values(QUERY_BUILDER_FUNCTIONS);
-				const properFunctionName =
-					functionOperators.find(
-						(func: string) => func.toLowerCase() === operator.toLowerCase(),
-					) || operator;
-
-				const formattedValue = formatValueForExpression(value, operator);
-				return `${properFunctionName}(${key.key}, ${formattedValue})`;
-			}
-
-			const formattedValue = formatValueForExpression(value, operator);
-			return `${key.key} ${operator} ${formattedValue}`;
+			const formattedValue = formatValueForExpression(value, op);
+			return `${key.key} ${op} ${formattedValue}`;
 		})
 		.filter((expression) => expression !== ''); // Remove empty expressions
 
@@ -141,6 +112,7 @@ export const convertExpressionToFilters = (
 	if (!expression) return [];
 
 	const queryPairs = extractQueryPairs(expression);
+
 	const filters: TagFilterItem[] = [];
 
 	queryPairs.forEach((pair) => {
@@ -168,36 +140,19 @@ export const convertFiltersToExpressionWithExistingQuery = (
 	filters: TagFilter,
 	existingQuery: string | undefined,
 ): { filters: TagFilter; filter: { expression: string } } => {
-	// Check for deprecated operators and replace them with new operators
-	const updatedFilters = cloneDeep(filters);
-
-	// Replace deprecated operators in filter items
-	if (updatedFilters?.items) {
-		updatedFilters.items = updatedFilters.items.map((item) => {
-			const opLower = item.op?.toLowerCase();
-			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(opLower)) {
-				return {
-					...item,
-					op: DEPRECATED_OPERATORS_MAP[
-						opLower as keyof typeof DEPRECATED_OPERATORS_MAP
-					].toLowerCase(),
-				};
-			}
-			return item;
-		});
-	}
-
 	if (!existingQuery) {
 		// If no existing query, return filters with a newly generated expression
 		return {
-			filters: updatedFilters,
-			filter: convertFiltersToExpression(updatedFilters),
+			filters,
+			filter: convertFiltersToExpression(filters),
 		};
 	}
 
 	// Extract query pairs from the existing query
 	const queryPairs = extractQueryPairs(existingQuery.trim());
 	let queryPairsMap: Map<string, IQueryPair> = new Map();
+
+	const updatedFilters = cloneDeep(filters); // Clone filters to avoid direct mutation
 	const nonExistingFilters: TagFilterItem[] = [];
 	let modifiedQuery = existingQuery; // We'll modify this query as we proceed
 	const visitedPairs: Set<string> = new Set(); // Set to track visited query pairs
@@ -584,16 +539,43 @@ export const convertAggregationToExpression = (
 	];
 };
 
+export const getQueryTitles = (currentQuery: Query): string[] => {
+	if (currentQuery.queryType === EQueryType.QUERY_BUILDER) {
+		const queryTitles: string[] = [];
+
+		// Handle builder queries with multiple aggregations
+		currentQuery.builder.queryData.forEach((q) => {
+			const aggregationCount = q.aggregations?.length || 1;
+
+			if (aggregationCount > 1) {
+				// If multiple aggregations, create titles like A.0, A.1, A.2
+				for (let i = 0; i < aggregationCount; i++) {
+					queryTitles.push(`${q.queryName}.${i}`);
+				}
+			} else {
+				// Single aggregation, just use query name
+				queryTitles.push(q.queryName);
+			}
+		});
+
+		// Handle formulas (they don't have aggregations, so just use query name)
+		const formulas = currentQuery.builder.queryFormulas.map((q) => q.queryName);
+
+		return [...queryTitles, ...formulas];
+	}
+
+	if (currentQuery.queryType === EQueryType.CLICKHOUSE) {
+		return currentQuery.clickhouse_sql.map((q) => q.name);
+	}
+
+	return currentQuery.promql.map((q) => q.name);
+};
+
 function getColId(
 	queryName: string,
 	aggregation: { alias?: string; expression?: string },
-	isMultipleAggregations: boolean,
 ): string {
-	if (isMultipleAggregations && aggregation.expression) {
-		return `${queryName}.${aggregation.expression}`;
-	}
-
-	return queryName;
+	return `${queryName}.${aggregation.expression}`;
 }
 
 // function to give you label value for query name taking multiaggregation into account
@@ -617,7 +599,7 @@ export function getQueryLabelWithAggregation(
 		const isMultipleAggregations = aggregations.length > 1;
 
 		aggregations.forEach((agg: any, index: number) => {
-			const columnId = getColId(queryName, agg, isMultipleAggregations);
+			const columnId = getColId(queryName, agg);
 
 			// For display purposes, show the aggregation index for multiple aggregations
 			const displayLabel = isMultipleAggregations

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

@@ -17,7 +17,6 @@ import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
@@ -74,59 +73,18 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 			searchText: searchText ?? '',
 		},
 		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
+			enabled: isOpen,
 			keepPreviousData: true,
 		},
 	);
 
-	const {
-		data: keyValueSuggestions,
-		isLoading: isLoadingKeyValueSuggestions,
-	} = useGetQueryKeyValueSuggestions({
-		key: filter.attributeKey.key,
-		signal: filter.dataSource || DataSource.LOGS,
-		signalSource: 'meter',
-		options: {
-			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	});
-
 	const attributeValues: string[] = useMemo(() => {
 		const dataType = filter.attributeKey.dataType || DataTypes.String;
-
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
-			const responseData = keyValueSuggestions?.data as any;
-			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
-
-			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
-				// Strict filtering for empty string - we'll handle it as a special case if needed
-				.filter(
-					(value: string | null | undefined): value is string =>
-						value !== null && value !== undefined && value !== '',
-				);
-
-			// Generate options from number values
-			const numberOptions = numberValues
-				.filter(
-					(value: number | null | undefined): value is number =>
-						value !== null && value !== undefined,
-				)
-				.map((value: number) => value.toString());
-
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
-
 		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
 		return (data?.payload?.[key] || []).filter(
 			(val) => val !== undefined && val !== null,
 		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
+	}, [data?.payload, filter.attributeKey.dataType]);
 
 	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);
 
@@ -520,14 +478,12 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen &&
-				(isLoading || isLoadingKeyValueSuggestions) &&
-				!attributeValues.length && (
-					<section className="loading">
-						<Skeleton paragraph={{ rows: 4 }} />
-					</section>
-				)}
-			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
+			{isOpen && isLoading && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && !isLoading && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
 						<section className="search">

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,8 +1,6 @@
 .quick-filters-container {
 	display: flex;
 	height: 100%;
-	position: relative;
-
 	.quick-filters-settings-container {
 		position: relative;
 	}
@@ -104,37 +102,6 @@
 			margin: 8px 12px;
 		}
 	}
-
-	.no-filters-container {
-		display: flex;
-		height: 100%;
-		gap: 8px;
-		align-items: center;
-		padding: 8px;
-	}
-}
-
-.perilin-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-
-	background: radial-gradient(circle, #fff 10%, transparent 0);
-	background-size: 12px 12px;
-	opacity: 1;
-
-	mask-image: radial-gradient(
-		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
-	);
-	-webkit-mask-image: radial-gradient(
-		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
-	);
 }
 
 .lightMode {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -15,7 +15,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { cloneDeep, isFunction, isNull } from 'lodash-es';
-import { Frown, Settings2 as SettingsIcon } from 'lucide-react';
+import { Settings2 as SettingsIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useMemo, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -236,13 +236,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 											);
 									}
 								})}
-
-								{filterConfig.length === 0 && (
-									<div className="no-filters-container">
-										<Frown size={16} />
-										<Typography.Text>No filters found</Typography.Text>
-									</div>
-								)}
 							</section>
 						</>
 					</OverlayScrollbar>

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

@@ -5,11 +5,8 @@ import { SignalType } from 'components/QuickFilters/types';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useMemo } from 'react';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -43,10 +40,6 @@ function OtherFilters({
 		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
 		[signal],
 	);
-	const isMeterDataSource = useMemo(
-		() => signal && signal === SignalType.METER_EXPLORER,
-		[signal],
-	);
 
 	const {
 		data: suggestionsData,
@@ -76,22 +69,7 @@ function OtherFilters({
 		},
 		{
 			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && !isLogDataSource && !isMeterDataSource,
-		},
-	);
-
-	const {
-		data: fieldKeysData,
-		isLoading: isLoadingFieldKeys,
-	} = useGetQueryKeySuggestions(
-		{
-			searchText: inputValue,
-			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-			signalSource: 'meter',
-		},
-		{
-			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && isMeterDataSource,
+			enabled: !!signal && !isLogDataSource,
 		},
 	);
 
@@ -99,33 +77,13 @@ function OtherFilters({
 		let filterAttributes;
 		if (isLogDataSource) {
 			filterAttributes = suggestionsData?.payload?.attributes || [];
-		} else if (isMeterDataSource) {
-			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
-				fieldKeysData?.data?.data?.keys || {},
-			)?.flat();
-			filterAttributes = fieldKeys.map(
-				(attr) =>
-					({
-						key: attr.name,
-						dataType: attr.fieldDataType,
-						type: attr.fieldContext,
-						signal: attr.signal,
-					} as BaseAutocompleteData),
-			);
 		} else {
 			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
 		}
 		return filterAttributes?.filter(
 			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
 		);
-	}, [
-		suggestionsData,
-		aggregateKeysData,
-		addedFilters,
-		isLogDataSource,
-		fieldKeysData,
-		isMeterDataSource,
-	]);
+	}, [suggestionsData, aggregateKeysData, addedFilters, isLogDataSource]);
 
 	const handleAddFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => [
@@ -141,8 +99,7 @@ function OtherFilters({
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		const isLoading =
-			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
+		const isLoading = isFetchingSuggestions || isFetchingAggregateKeys;
 		if (isLoading) return <OtherFiltersSkeleton />;
 		if (!otherFilters?.length)
 			return <div className="no-values-found">No values found</div>;

frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts

@@ -6,5 +6,4 @@ export const SIGNAL_DATA_SOURCE_MAP = {
 	[SignalType.TRACES]: DataSource.TRACES,
 	[SignalType.EXCEPTIONS]: DataSource.TRACES,
 	[SignalType.API_MONITORING]: DataSource.TRACES,
-	[SignalType.METER_EXPLORER]: DataSource.METRICS,
 };

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

@@ -54,7 +54,6 @@ const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
 const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
 const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
-const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
 const FILTER_OS_DESCRIPTION = 'os.description';
 const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
@@ -78,11 +77,7 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-
-		rest.get(quickFiltersAttributeValuesURL, (req, res, ctx) =>
-			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
-		),
-		rest.get(fieldsValuesURL, (req, res, ctx) =>
+		rest.get(quickFiltersAttributeValuesURL, (_, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);

frontend/src/components/QuickFilters/types.ts

@@ -23,7 +23,6 @@ export enum SignalType {
 	LOGS = 'logs',
 	API_MONITORING = 'api_monitoring',
 	EXCEPTIONS = 'exceptions',
-	METER_EXPLORER = 'meter',
 }
 
 export interface IQuickFiltersConfig {
@@ -54,5 +53,4 @@ export enum QuickFiltersSource {
 	TRACES_EXPLORER = 'traces-explorer',
 	API_MONITORING = 'api-monitoring',
 	EXCEPTIONS = 'exceptions',
-	METER_EXPLORER = 'meter',
 }

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -4,7 +4,7 @@ import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
-import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
@@ -110,14 +110,11 @@ function ResizeTable({
 			// Apply stored column widths from widget configuration
 			const columnsWithStoredWidths = columns.map((col) => {
 				const dataIndex = (col as RowData).dataIndex as string;
-				if (dataIndex && columnWidths) {
-					const width = getColumnWidth(dataIndex, columnWidths);
-					if (width) {
-						return {
-							...col,
-							width, // Apply stored width
-						};
-					}
+				if (dataIndex && columnWidths && columnWidths[dataIndex]) {
+					return {
+						...col,
+						width: columnWidths[dataIndex], // Apply stored width
+					};
 				}
 				return col;
 			});

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,208 +0,0 @@
-.warning-content {
-	display: flex;
-	flex-direction: column;
-	// === SECTION: Summary (Top)
-	&__summary-section {
-		display: flex;
-		flex-direction: column;
-		border-bottom: 1px solid var(--bg-slate-400);
-	}
-
-	&__summary {
-		display: flex;
-		justify-content: space-between;
-		padding: 16px;
-	}
-
-	&__summary-left {
-		display: flex;
-		align-items: baseline;
-		gap: 8px;
-	}
-
-	&__summary-text {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-
-	&__warning-code {
-		color: var(--bg-vanilla-100);
-		margin: 0;
-		font-size: 16px;
-		font-weight: 500;
-		line-height: 24px; /* 150% */
-		letter-spacing: -0.08px;
-	}
-
-	&__warning-message {
-		margin: 0;
-		color: var(--bg-vanilla-400);
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-
-	&__docs-button {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		padding: 9px 12.5px;
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 18px; /* 150% */
-		letter-spacing: 0.12px;
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		box-shadow: none;
-	}
-
-	&__message-badge {
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		padding: 0px 16px 16px;
-
-		.key-value-label {
-			width: fit-content;
-			border-color: var(--bg-slate-400);
-			border-radius: 20px;
-			overflow: hidden;
-			&__key {
-				padding-left: 8px;
-				padding-right: 8px;
-			}
-			&__value {
-				padding-right: 10px;
-				color: var(--bg-vanilla-400);
-				font-size: 12px;
-				font-weight: 500;
-				line-height: 18px; /* 150% */
-				letter-spacing: 0.48px;
-				pointer-events: none;
-			}
-		}
-		&-label {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			&-dot {
-				height: 6px;
-				width: 6px;
-				background: var(--bg-sakura-500);
-				border-radius: 50%;
-			}
-			&-text {
-				color: var(--bg-vanilla-100);
-				font-size: 10px;
-				font-weight: 500;
-				line-height: 18px; /* 180% */
-				letter-spacing: 0.5px;
-			}
-		}
-		&-line {
-			flex: 1;
-			height: 8px;
-			background-image: radial-gradient(circle, #444c63 1px, transparent 2px);
-			background-size: 8px 11px;
-			background-position: top left;
-			padding: 6px;
-		}
-	}
-
-	// === SECTION: Message List (Bottom)
-
-	&__message-list-container {
-		position: relative;
-	}
-
-	&__message-list {
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		max-height: 275px;
-	}
-
-	&__message-item {
-		position: relative;
-		margin-bottom: 4px;
-		color: var(--bg-vanilla-400);
-		font-family: Geist Mono;
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 18px;
-		color: var(--bg-vanilla-400);
-		padding: 3px 12px;
-		padding-left: 26px;
-	}
-
-	&__message-item::before {
-		font-family: unset;
-		content: '';
-		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 2px;
-		height: 4px;
-		border-radius: 50px;
-		background: var(--bg-slate-400);
-	}
-
-	&__scroll-hint {
-		position: absolute;
-		bottom: 10px;
-		left: 0px;
-		right: 0px;
-		margin: auto;
-		width: fit-content;
-		display: inline-flex;
-		padding: 4px 12px 4px 10px;
-		justify-content: center;
-		align-items: center;
-		gap: 3px;
-		background: var(--bg-slate-200);
-		border-radius: 20px;
-		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
-	}
-
-	&__scroll-hint-text {
-		color: var(--bg-vanilla-100);
-
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-	}
-}
-
-.lightMode {
-	.warning-content {
-		&__warning-code {
-			color: var(--bg-ink-100);
-		}
-		&__warning-message {
-			color: var(--bg-ink-400);
-		}
-		&__message-item {
-			color: var(--bg-ink-400);
-		}
-		&__message-badge {
-			&-label-text {
-				color: var(--bg-ink-400);
-			}
-			.key-value-label__value {
-				color: var(--bg-ink-400);
-			}
-		}
-		&__docs-button {
-			background: var(--bg-vanilla-100);
-			color: var(--bg-ink-100);
-		}
-	}
-}

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -1,142 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import './WarningPopover.styles.scss';
-
-import { Color } from '@signozhq/design-tokens';
-import { Button, Popover, PopoverProps } from 'antd';
-import ErrorIcon from 'assets/Error';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { BookOpenText, ChevronsDown, TriangleAlert } from 'lucide-react';
-import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { ReactNode } from 'react';
-import { Warning } from 'types/api';
-
-interface WarningContentProps {
-	warning: Warning;
-}
-
-export function WarningContent({ warning }: WarningContentProps): JSX.Element {
-	const {
-		url: warningUrl,
-		warnings: warningMessages,
-		code: warningCode,
-		message: warningMessage,
-	} = warning || {};
-
-	if (!warning) {
-		return <div />;
-	}
-
-	return (
-		<section className="warning-content">
-			{/* Summary Header */}
-			<section className="warning-content__summary-section">
-				<header className="warning-content__summary">
-					<div className="warning-content__summary-left">
-						<div className="warning-content__icon-wrapper">
-							<ErrorIcon />
-						</div>
-
-						<div className="warning-content__summary-text">
-							<h2 className="warning-content__warning-code">{warningCode}</h2>
-							<p className="warning-content__warning-message">{warningMessage}</p>
-						</div>
-					</div>
-
-					{warningUrl && (
-						<div className="warning-content__summary-right">
-							<Button
-								type="default"
-								className="warning-content__docs-button"
-								href={warningUrl}
-								target="_blank"
-								data-testid="warning-docs-button"
-							>
-								<BookOpenText size={14} />
-								Open Docs
-							</Button>
-						</div>
-					)}
-				</header>
-
-				{warningMessages?.length > 0 && (
-					<div className="warning-content__message-badge">
-						<KeyValueLabel
-							badgeKey={
-								<div className="warning-content__message-badge-label">
-									<div className="warning-content__message-badge-label-dot" />
-									<div className="warning-content__message-badge-label-text">
-										MESSAGES
-									</div>
-								</div>
-							}
-							badgeValue={warningMessages.length.toString()}
-						/>
-						<div className="warning-content__message-badge-line" />
-					</div>
-				)}
-			</section>
-
-			{/* Detailed Messages */}
-			<section className="warning-content__messages-section">
-				<div className="warning-content__message-list-container">
-					<OverlayScrollbar>
-						<ul className="warning-content__message-list">
-							{warningMessages?.map((warning) => (
-								<li className="warning-content__message-item" key={warning.message}>
-									{warning.message}
-								</li>
-							))}
-						</ul>
-					</OverlayScrollbar>
-					{warningMessages?.length > 10 && (
-						<div className="warning-content__scroll-hint">
-							<ChevronsDown
-								size={16}
-								color={Color.BG_VANILLA_100}
-								className="warning-content__scroll-hint-icon"
-							/>
-							<span className="warning-content__scroll-hint-text">
-								Scroll for more
-							</span>
-						</div>
-					)}
-				</div>
-			</section>
-		</section>
-	);
-}
-
-interface WarningPopoverProps extends PopoverProps {
-	children?: ReactNode;
-	warningData: Warning;
-}
-
-function WarningPopover({
-	children,
-	warningData,
-	...popoverProps
-}: WarningPopoverProps): JSX.Element {
-	return (
-		<Popover
-			content={<WarningContent warning={warningData} />}
-			overlayStyle={{ padding: 0, maxWidth: '600px' }}
-			overlayInnerStyle={{ padding: 0 }}
-			autoAdjustOverflow
-			{...popoverProps}
-		>
-			{children || (
-				<TriangleAlert
-					size={16}
-					style={{ cursor: 'pointer' }}
-					color={Color.BG_AMBER_500}
-				/>
-			)}
-		</Popover>
-	);
-}
-
-WarningPopover.defaultProps = {
-	children: undefined,
-};
-
-export default WarningPopover;

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,63 +0,0 @@
-import './styles.scss';
-
-import { Select } from 'antd';
-import { DefaultOptionType } from 'antd/es/select';
-
-import { UniversalYAxisUnitMappings, Y_AXIS_CATEGORIES } from './constants';
-import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
-import { mapMetricUnitToUniversalUnit } from './utils';
-
-function YAxisUnitSelector({
-	value,
-	onChange,
-	placeholder = 'Please select a unit',
-	loading = false,
-}: YAxisUnitSelectorProps): JSX.Element {
-	const universalUnit = mapMetricUnitToUniversalUnit(value);
-
-	const handleSearch = (
-		searchTerm: string,
-		currentOption: DefaultOptionType | undefined,
-	): boolean => {
-		if (!currentOption?.value) return false;
-
-		const search = searchTerm.toLowerCase();
-		const unitId = currentOption.value.toString().toLowerCase();
-		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
-
-		// Check label and id
-		if (unitId.includes(search) || unitLabel.includes(search)) return true;
-
-		// Check aliases (from the mapping) using array iteration
-		const aliases = Array.from(
-			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
-		);
-
-		return aliases.some((alias) => alias.toLowerCase().includes(search));
-	};
-
-	return (
-		<div className="y-axis-unit-selector-component">
-			<Select
-				showSearch
-				value={universalUnit}
-				onChange={onChange}
-				placeholder={placeholder}
-				filterOption={(input, option): boolean => handleSearch(input, option)}
-				loading={loading}
-			>
-				{Y_AXIS_CATEGORIES.map((category) => (
-					<Select.OptGroup key={category.name} label={category.name}>
-						{category.units.map((unit) => (
-							<Select.Option key={unit.id} value={unit.id}>
-								{unit.name}
-							</Select.Option>
-						))}
-					</Select.OptGroup>
-				))}
-			</Select>
-		</div>
-	);
-}
-
-export default YAxisUnitSelector;

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

@@ -1,68 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import YAxisUnitSelector from '../YAxisUnitSelector';
-
-describe('YAxisUnitSelector', () => {
-	const mockOnChange = jest.fn();
-
-	beforeEach(() => {
-		mockOnChange.mockClear();
-	});
-
-	it('renders with default placeholder', () => {
-		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
-		expect(screen.getByText('Please select a unit')).toBeInTheDocument();
-	});
-
-	it('renders with custom placeholder', () => {
-		render(
-			<YAxisUnitSelector
-				value=""
-				onChange={mockOnChange}
-				placeholder="Custom placeholder"
-			/>,
-		);
-		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
-	});
-
-	it('calls onChange when a value is selected', () => {
-		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-		const option = screen.getByText('Bytes (B)');
-		fireEvent.click(option);
-
-		expect(mockOnChange).toHaveBeenCalledWith('By', {
-			children: 'Bytes (B)',
-			key: 'By',
-			value: 'By',
-		});
-	});
-
-	it('filters options based on search input', () => {
-		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-		const input = screen.getByRole('combobox');
-		fireEvent.change(input, { target: { value: 'byte' } });
-
-		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
-	});
-
-	it('shows all categories and their units', () => {
-		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
-		const select = screen.getByRole('combobox');
-
-		fireEvent.mouseDown(select);
-
-		// Check for category headers
-		expect(screen.getByText('Data')).toBeInTheDocument();
-		expect(screen.getByText('Time')).toBeInTheDocument();
-
-		// Check for some common units
-		expect(screen.getByText('Bytes (B)')).toBeInTheDocument();
-		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
-	});
-});

frontend/src/components/YAxisUnitSelector/__tests__/utils.test.tsx

@@ -1,39 +0,0 @@
-import {
-	getUniversalNameFromMetricUnit,
-	mapMetricUnitToUniversalUnit,
-} from '../utils';
-
-describe('YAxisUnitSelector utils', () => {
-	describe('mapMetricUnitToUniversalUnit', () => {
-		it('maps known units correctly', () => {
-			expect(mapMetricUnitToUniversalUnit('bytes')).toBe('By');
-			expect(mapMetricUnitToUniversalUnit('seconds')).toBe('s');
-			expect(mapMetricUnitToUniversalUnit('bytes_per_second')).toBe('By/s');
-		});
-
-		it('returns null or self for unknown units', () => {
-			expect(mapMetricUnitToUniversalUnit('unknown_unit')).toBe('unknown_unit');
-			expect(mapMetricUnitToUniversalUnit('')).toBe(null);
-			expect(mapMetricUnitToUniversalUnit(undefined)).toBe(null);
-		});
-	});
-
-	describe('getUniversalNameFromMetricUnit', () => {
-		it('returns human readable names for known units', () => {
-			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
-			expect(getUniversalNameFromMetricUnit('seconds')).toBe('Seconds (s)');
-			expect(getUniversalNameFromMetricUnit('bytes_per_second')).toBe('Bytes/sec');
-		});
-
-		it('returns original unit for unknown units', () => {
-			expect(getUniversalNameFromMetricUnit('unknown_unit')).toBe('unknown_unit');
-			expect(getUniversalNameFromMetricUnit('')).toBe('-');
-			expect(getUniversalNameFromMetricUnit(undefined)).toBe('-');
-		});
-
-		it('handles case variations', () => {
-			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
-			expect(getUniversalNameFromMetricUnit('s')).toBe('Seconds (s)');
-		});
-	});
-});

frontend/src/components/YAxisUnitSelector/constants.ts

@@ -1,627 +0,0 @@
-import { UniversalYAxisUnit, YAxisUnit } from './types';
-
-// Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents
-export const UniversalYAxisUnitMappings: Record<
-	UniversalYAxisUnit,
-	Set<YAxisUnit>
-> = {
-	// Time
-	[UniversalYAxisUnit.NANOSECONDS]: new Set([
-		YAxisUnit.UCUM_NANOSECONDS,
-		YAxisUnit.OPEN_METRICS_NANOSECONDS,
-	]),
-	[UniversalYAxisUnit.MICROSECONDS]: new Set([
-		YAxisUnit.AWS_MICROSECONDS,
-		YAxisUnit.UCUM_MICROSECONDS,
-		YAxisUnit.OPEN_METRICS_MICROSECONDS,
-	]),
-	[UniversalYAxisUnit.MILLISECONDS]: new Set([
-		YAxisUnit.AWS_MILLISECONDS,
-		YAxisUnit.UCUM_MILLISECONDS,
-		YAxisUnit.OPEN_METRICS_MILLISECONDS,
-	]),
-	[UniversalYAxisUnit.SECONDS]: new Set([
-		YAxisUnit.AWS_SECONDS,
-		YAxisUnit.UCUM_SECONDS,
-		YAxisUnit.OPEN_METRICS_SECONDS,
-	]),
-	[UniversalYAxisUnit.MINUTES]: new Set([
-		YAxisUnit.UCUM_MINUTES,
-		YAxisUnit.OPEN_METRICS_MINUTES,
-	]),
-	[UniversalYAxisUnit.HOURS]: new Set([
-		YAxisUnit.UCUM_HOURS,
-		YAxisUnit.OPEN_METRICS_HOURS,
-	]),
-	[UniversalYAxisUnit.DAYS]: new Set([
-		YAxisUnit.UCUM_DAYS,
-		YAxisUnit.OPEN_METRICS_DAYS,
-	]),
-	[UniversalYAxisUnit.WEEKS]: new Set([YAxisUnit.UCUM_WEEKS]),
-
-	// Data
-	[UniversalYAxisUnit.BYTES]: new Set([
-		YAxisUnit.AWS_BYTES,
-		YAxisUnit.UCUM_BYTES,
-		YAxisUnit.OPEN_METRICS_BYTES,
-	]),
-	[UniversalYAxisUnit.KILOBYTES]: new Set([
-		YAxisUnit.AWS_KILOBYTES,
-		YAxisUnit.UCUM_KILOBYTES,
-		YAxisUnit.OPEN_METRICS_KILOBYTES,
-	]),
-	[UniversalYAxisUnit.MEGABYTES]: new Set([
-		YAxisUnit.AWS_MEGABYTES,
-		YAxisUnit.UCUM_MEGABYTES,
-		YAxisUnit.OPEN_METRICS_MEGABYTES,
-	]),
-	[UniversalYAxisUnit.GIGABYTES]: new Set([
-		YAxisUnit.AWS_GIGABYTES,
-		YAxisUnit.UCUM_GIGABYTES,
-		YAxisUnit.OPEN_METRICS_GIGABYTES,
-	]),
-	[UniversalYAxisUnit.TERABYTES]: new Set([
-		YAxisUnit.AWS_TERABYTES,
-		YAxisUnit.UCUM_TERABYTES,
-		YAxisUnit.OPEN_METRICS_TERABYTES,
-	]),
-	[UniversalYAxisUnit.PETABYTES]: new Set([
-		YAxisUnit.AWS_PETABYTES,
-		YAxisUnit.UCUM_PEBIBYTES,
-		YAxisUnit.OPEN_METRICS_PEBIBYTES,
-	]),
-	[UniversalYAxisUnit.EXABYTES]: new Set([
-		YAxisUnit.AWS_EXABYTES,
-		YAxisUnit.UCUM_EXABYTES,
-		YAxisUnit.OPEN_METRICS_EXABYTES,
-	]),
-	[UniversalYAxisUnit.ZETTABYTES]: new Set([
-		YAxisUnit.AWS_ZETTABYTES,
-		YAxisUnit.UCUM_ZETTABYTES,
-		YAxisUnit.OPEN_METRICS_ZETTABYTES,
-	]),
-	[UniversalYAxisUnit.YOTTABYTES]: new Set([
-		YAxisUnit.AWS_YOTTABYTES,
-		YAxisUnit.UCUM_YOTTABYTES,
-		YAxisUnit.OPEN_METRICS_YOTTABYTES,
-	]),
-
-	// Data Rate
-	[UniversalYAxisUnit.BYTES_SECOND]: new Set([
-		YAxisUnit.AWS_BYTES_SECOND,
-		YAxisUnit.UCUM_BYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_BYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.KILOBYTES_SECOND]: new Set([
-		YAxisUnit.AWS_KILOBYTES_SECOND,
-		YAxisUnit.UCUM_KILOBYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_KILOBYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.MEGABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_MEGABYTES_SECOND,
-		YAxisUnit.UCUM_MEGABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_MEGABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.GIGABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_GIGABYTES_SECOND,
-		YAxisUnit.UCUM_GIGABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_GIGABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.TERABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_TERABYTES_SECOND,
-		YAxisUnit.UCUM_TERABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_TERABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.PETABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_PETABYTES_SECOND,
-		YAxisUnit.UCUM_PETABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_PETABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.EXABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_EXABYTES_SECOND,
-		YAxisUnit.UCUM_EXABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_EXABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.ZETTABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_ZETTABYTES_SECOND,
-		YAxisUnit.UCUM_ZETTABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_ZETTABYTES_SECOND,
-	]),
-	[UniversalYAxisUnit.YOTTABYTES_SECOND]: new Set([
-		YAxisUnit.AWS_YOTTABYTES_SECOND,
-		YAxisUnit.UCUM_YOTTABYTES_SECOND,
-		YAxisUnit.OPEN_METRICS_YOTTABYTES_SECOND,
-	]),
-
-	// Bits
-	[UniversalYAxisUnit.BITS]: new Set([
-		YAxisUnit.AWS_BITS,
-		YAxisUnit.UCUM_BITS,
-		YAxisUnit.OPEN_METRICS_BITS,
-	]),
-	[UniversalYAxisUnit.KILOBITS]: new Set([
-		YAxisUnit.AWS_KILOBITS,
-		YAxisUnit.UCUM_KILOBITS,
-		YAxisUnit.OPEN_METRICS_KILOBITS,
-	]),
-	[UniversalYAxisUnit.MEGABITS]: new Set([
-		YAxisUnit.AWS_MEGABITS,
-		YAxisUnit.UCUM_MEGABITS,
-		YAxisUnit.OPEN_METRICS_MEGABITS,
-	]),
-	[UniversalYAxisUnit.GIGABITS]: new Set([
-		YAxisUnit.AWS_GIGABITS,
-		YAxisUnit.UCUM_GIGABITS,
-		YAxisUnit.OPEN_METRICS_GIGABITS,
-	]),
-	[UniversalYAxisUnit.TERABITS]: new Set([
-		YAxisUnit.AWS_TERABITS,
-		YAxisUnit.UCUM_TERABITS,
-		YAxisUnit.OPEN_METRICS_TERABITS,
-	]),
-	[UniversalYAxisUnit.PETABITS]: new Set([
-		YAxisUnit.AWS_PETABITS,
-		YAxisUnit.UCUM_PETABITS,
-		YAxisUnit.OPEN_METRICS_PETABITS,
-	]),
-	[UniversalYAxisUnit.EXABITS]: new Set([
-		YAxisUnit.AWS_EXABITS,
-		YAxisUnit.UCUM_EXABITS,
-		YAxisUnit.OPEN_METRICS_EXABITS,
-	]),
-	[UniversalYAxisUnit.ZETTABITS]: new Set([
-		YAxisUnit.AWS_ZETTABITS,
-		YAxisUnit.UCUM_ZETTABITS,
-		YAxisUnit.OPEN_METRICS_ZETTABITS,
-	]),
-	[UniversalYAxisUnit.YOTTABITS]: new Set([
-		YAxisUnit.AWS_YOTTABITS,
-		YAxisUnit.UCUM_YOTTABITS,
-		YAxisUnit.OPEN_METRICS_YOTTABITS,
-	]),
-
-	// Bit Rate
-	[UniversalYAxisUnit.BITS_SECOND]: new Set([
-		YAxisUnit.AWS_BITS_SECOND,
-		YAxisUnit.UCUM_BITS_SECOND,
-		YAxisUnit.OPEN_METRICS_BITS_SECOND,
-	]),
-	[UniversalYAxisUnit.KILOBITS_SECOND]: new Set([
-		YAxisUnit.AWS_KILOBITS_SECOND,
-		YAxisUnit.UCUM_KILOBITS_SECOND,
-		YAxisUnit.OPEN_METRICS_KILOBITS_SECOND,
-	]),
-	[UniversalYAxisUnit.MEGABITS_SECOND]: new Set([
-		YAxisUnit.AWS_MEGABITS_SECOND,
-		YAxisUnit.UCUM_MEGABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_MEGABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.GIGABITS_SECOND]: new Set([
-		YAxisUnit.AWS_GIGABITS_SECOND,
-		YAxisUnit.UCUM_GIGABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_GIGABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.TERABITS_SECOND]: new Set([
-		YAxisUnit.AWS_TERABITS_SECOND,
-		YAxisUnit.UCUM_TERABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_TERABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.PETABITS_SECOND]: new Set([
-		YAxisUnit.AWS_PETABITS_SECOND,
-		YAxisUnit.UCUM_PETABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_PETABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.EXABITS_SECOND]: new Set([
-		YAxisUnit.AWS_EXABITS_SECOND,
-		YAxisUnit.UCUM_EXABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_EXABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.ZETTABITS_SECOND]: new Set([
-		YAxisUnit.AWS_ZETTABITS_SECOND,
-		YAxisUnit.UCUM_ZETTABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_ZETTABITS_SECOND,
-	]),
-	[UniversalYAxisUnit.YOTTABITS_SECOND]: new Set([
-		YAxisUnit.AWS_YOTTABITS_SECOND,
-		YAxisUnit.UCUM_YOTTABITS_SECOND,
-		YAxisUnit.OPEN_METRICS_YOTTABITS_SECOND,
-	]),
-
-	// Count
-	[UniversalYAxisUnit.COUNT]: new Set([
-		YAxisUnit.AWS_COUNT,
-		YAxisUnit.UCUM_COUNT,
-		YAxisUnit.OPEN_METRICS_COUNT,
-	]),
-	[UniversalYAxisUnit.COUNT_SECOND]: new Set([
-		YAxisUnit.AWS_COUNT_SECOND,
-		YAxisUnit.UCUM_COUNT_SECOND,
-		YAxisUnit.OPEN_METRICS_COUNT_SECOND,
-	]),
-
-	// Percent
-	[UniversalYAxisUnit.PERCENT]: new Set([
-		YAxisUnit.AWS_PERCENT,
-		YAxisUnit.UCUM_PERCENT,
-		YAxisUnit.OPEN_METRICS_PERCENT,
-	]),
-	[UniversalYAxisUnit.NONE]: new Set([
-		YAxisUnit.AWS_NONE,
-		YAxisUnit.UCUM_NONE,
-		YAxisUnit.OPEN_METRICS_NONE,
-	]),
-	[UniversalYAxisUnit.PERCENT_UNIT]: new Set([
-		YAxisUnit.OPEN_METRICS_PERCENT_UNIT,
-	]),
-
-	// Count Rate
-	[UniversalYAxisUnit.COUNT_MINUTE]: new Set([
-		YAxisUnit.UCUM_COUNTS_MINUTE,
-		YAxisUnit.OPEN_METRICS_COUNTS_MINUTE,
-	]),
-	[UniversalYAxisUnit.OPS_SECOND]: new Set([
-		YAxisUnit.UCUM_OPS_SECOND,
-		YAxisUnit.OPEN_METRICS_OPS_SECOND,
-	]),
-	[UniversalYAxisUnit.OPS_MINUTE]: new Set([
-		YAxisUnit.UCUM_OPS_MINUTE,
-		YAxisUnit.OPEN_METRICS_OPS_MINUTE,
-	]),
-	[UniversalYAxisUnit.REQUESTS_SECOND]: new Set([
-		YAxisUnit.UCUM_REQUESTS_SECOND,
-		YAxisUnit.OPEN_METRICS_REQUESTS_SECOND,
-	]),
-	[UniversalYAxisUnit.REQUESTS_MINUTE]: new Set([
-		YAxisUnit.UCUM_REQUESTS_MINUTE,
-		YAxisUnit.OPEN_METRICS_REQUESTS_MINUTE,
-	]),
-	[UniversalYAxisUnit.READS_SECOND]: new Set([
-		YAxisUnit.UCUM_READS_SECOND,
-		YAxisUnit.OPEN_METRICS_READS_SECOND,
-	]),
-	[UniversalYAxisUnit.WRITES_SECOND]: new Set([
-		YAxisUnit.UCUM_WRITES_SECOND,
-		YAxisUnit.OPEN_METRICS_WRITES_SECOND,
-	]),
-	[UniversalYAxisUnit.READS_MINUTE]: new Set([
-		YAxisUnit.UCUM_READS_MINUTE,
-		YAxisUnit.OPEN_METRICS_READS_MINUTE,
-	]),
-	[UniversalYAxisUnit.WRITES_MINUTE]: new Set([
-		YAxisUnit.UCUM_WRITES_MINUTE,
-		YAxisUnit.OPEN_METRICS_WRITES_MINUTE,
-	]),
-	[UniversalYAxisUnit.IOOPS_SECOND]: new Set([
-		YAxisUnit.UCUM_IOPS_SECOND,
-		YAxisUnit.OPEN_METRICS_IOPS_SECOND,
-	]),
-};
-
-// Mapping of universal y-axis units to their display labels
-export const Y_AXIS_UNIT_NAMES: Record<UniversalYAxisUnit, string> = {
-	[UniversalYAxisUnit.SECONDS]: 'Seconds (s)',
-	[UniversalYAxisUnit.MILLISECONDS]: 'Milliseconds (ms)',
-	[UniversalYAxisUnit.MICROSECONDS]: 'Microseconds (µs)',
-	[UniversalYAxisUnit.BYTES]: 'Bytes (B)',
-	[UniversalYAxisUnit.KILOBYTES]: 'Kilobytes (KB)',
-	[UniversalYAxisUnit.MEGABYTES]: 'Megabytes (MB)',
-	[UniversalYAxisUnit.GIGABYTES]: 'Gigabytes (GB)',
-	[UniversalYAxisUnit.TERABYTES]: 'Terabytes (TB)',
-	[UniversalYAxisUnit.PETABYTES]: 'Petabytes (PB)',
-	[UniversalYAxisUnit.EXABYTES]: 'Exabytes (EB)',
-	[UniversalYAxisUnit.ZETTABYTES]: 'Zettabytes (ZB)',
-	[UniversalYAxisUnit.YOTTABYTES]: 'Yottabytes (YB)',
-	[UniversalYAxisUnit.BITS]: 'Bits (b)',
-	[UniversalYAxisUnit.KILOBITS]: 'Kilobits (Kb)',
-	[UniversalYAxisUnit.MEGABITS]: 'Megabits (Mb)',
-	[UniversalYAxisUnit.GIGABITS]: 'Gigabits (Gb)',
-	[UniversalYAxisUnit.TERABITS]: 'Terabits (Tb)',
-	[UniversalYAxisUnit.PETABITS]: 'Petabits (Pb)',
-	[UniversalYAxisUnit.EXABITS]: 'Exabits (Eb)',
-	[UniversalYAxisUnit.ZETTABITS]: 'Zettabits (Zb)',
-	[UniversalYAxisUnit.YOTTABITS]: 'Yottabits (Yb)',
-	[UniversalYAxisUnit.BYTES_SECOND]: 'Bytes/sec',
-	[UniversalYAxisUnit.KILOBYTES_SECOND]: 'Kilobytes/sec',
-	[UniversalYAxisUnit.MEGABYTES_SECOND]: 'Megabytes/sec',
-	[UniversalYAxisUnit.GIGABYTES_SECOND]: 'Gigabytes/sec',
-	[UniversalYAxisUnit.TERABYTES_SECOND]: 'Terabytes/sec',
-	[UniversalYAxisUnit.PETABYTES_SECOND]: 'Petabytes/sec',
-	[UniversalYAxisUnit.EXABYTES_SECOND]: 'Exabytes/sec',
-	[UniversalYAxisUnit.ZETTABYTES_SECOND]: 'Zettabytes/sec',
-	[UniversalYAxisUnit.YOTTABYTES_SECOND]: 'Yottabytes/sec',
-	[UniversalYAxisUnit.BITS_SECOND]: 'Bits/sec',
-	[UniversalYAxisUnit.KILOBITS_SECOND]: 'Kilobits/sec',
-	[UniversalYAxisUnit.MEGABITS_SECOND]: 'Megabits/sec',
-	[UniversalYAxisUnit.GIGABITS_SECOND]: 'Gigabits/sec',
-	[UniversalYAxisUnit.TERABITS_SECOND]: 'Terabits/sec',
-	[UniversalYAxisUnit.PETABITS_SECOND]: 'Petabits/sec',
-	[UniversalYAxisUnit.EXABITS_SECOND]: 'Exabits/sec',
-	[UniversalYAxisUnit.ZETTABITS_SECOND]: 'Zettabits/sec',
-	[UniversalYAxisUnit.YOTTABITS_SECOND]: 'Yottabits/sec',
-	[UniversalYAxisUnit.COUNT]: 'Count',
-	[UniversalYAxisUnit.COUNT_SECOND]: 'Count/sec',
-	[UniversalYAxisUnit.PERCENT]: 'Percent (0 - 100)',
-	[UniversalYAxisUnit.NONE]: 'None',
-	[UniversalYAxisUnit.WEEKS]: 'Weeks',
-	[UniversalYAxisUnit.DAYS]: 'Days',
-	[UniversalYAxisUnit.HOURS]: 'Hours',
-	[UniversalYAxisUnit.MINUTES]: 'Minutes',
-	[UniversalYAxisUnit.NANOSECONDS]: 'Nanoseconds',
-	[UniversalYAxisUnit.COUNT_MINUTE]: 'Count/min',
-	[UniversalYAxisUnit.OPS_SECOND]: 'Ops/sec',
-	[UniversalYAxisUnit.OPS_MINUTE]: 'Ops/min',
-	[UniversalYAxisUnit.REQUESTS_SECOND]: 'Requests/sec',
-	[UniversalYAxisUnit.REQUESTS_MINUTE]: 'Requests/min',
-	[UniversalYAxisUnit.READS_SECOND]: 'Reads/sec',
-	[UniversalYAxisUnit.WRITES_SECOND]: 'Writes/sec',
-	[UniversalYAxisUnit.READS_MINUTE]: 'Reads/min',
-	[UniversalYAxisUnit.WRITES_MINUTE]: 'Writes/min',
-	[UniversalYAxisUnit.IOOPS_SECOND]: 'IOPS/sec',
-	[UniversalYAxisUnit.PERCENT_UNIT]: 'Percent (0.0 - 1.0)',
-};
-
-// Splitting the universal y-axis units into categories
-export const Y_AXIS_CATEGORIES = [
-	{
-		name: 'Time',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
-				id: UniversalYAxisUnit.SECONDS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
-				id: UniversalYAxisUnit.MILLISECONDS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MICROSECONDS],
-				id: UniversalYAxisUnit.MICROSECONDS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NANOSECONDS],
-				id: UniversalYAxisUnit.NANOSECONDS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MINUTES],
-				id: UniversalYAxisUnit.MINUTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HOURS],
-				id: UniversalYAxisUnit.HOURS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DAYS],
-				id: UniversalYAxisUnit.DAYS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WEEKS],
-				id: UniversalYAxisUnit.WEEKS,
-			},
-		],
-	},
-	{
-		name: 'Data',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
-				id: UniversalYAxisUnit.BYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES],
-				id: UniversalYAxisUnit.KILOBYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES],
-				id: UniversalYAxisUnit.MEGABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES],
-				id: UniversalYAxisUnit.GIGABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES],
-				id: UniversalYAxisUnit.TERABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES],
-				id: UniversalYAxisUnit.PETABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES],
-				id: UniversalYAxisUnit.EXABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES],
-				id: UniversalYAxisUnit.ZETTABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES],
-				id: UniversalYAxisUnit.YOTTABYTES,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS],
-				id: UniversalYAxisUnit.BITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS],
-				id: UniversalYAxisUnit.KILOBITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS],
-				id: UniversalYAxisUnit.MEGABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS],
-				id: UniversalYAxisUnit.GIGABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS],
-				id: UniversalYAxisUnit.TERABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS],
-				id: UniversalYAxisUnit.PETABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS],
-				id: UniversalYAxisUnit.EXABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS],
-				id: UniversalYAxisUnit.ZETTABITS,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS],
-				id: UniversalYAxisUnit.YOTTABITS,
-			},
-		],
-	},
-	{
-		name: 'Data Rate',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
-				id: UniversalYAxisUnit.BYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES_SECOND],
-				id: UniversalYAxisUnit.KILOBYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES_SECOND],
-				id: UniversalYAxisUnit.MEGABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES_SECOND],
-				id: UniversalYAxisUnit.GIGABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES_SECOND],
-				id: UniversalYAxisUnit.TERABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES_SECOND],
-				id: UniversalYAxisUnit.PETABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES_SECOND],
-				id: UniversalYAxisUnit.EXABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES_SECOND],
-				id: UniversalYAxisUnit.ZETTABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES_SECOND],
-				id: UniversalYAxisUnit.YOTTABYTES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS_SECOND],
-				id: UniversalYAxisUnit.BITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS_SECOND],
-				id: UniversalYAxisUnit.KILOBITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS_SECOND],
-				id: UniversalYAxisUnit.MEGABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS_SECOND],
-				id: UniversalYAxisUnit.GIGABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS_SECOND],
-				id: UniversalYAxisUnit.TERABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS_SECOND],
-				id: UniversalYAxisUnit.PETABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS_SECOND],
-				id: UniversalYAxisUnit.EXABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS_SECOND],
-				id: UniversalYAxisUnit.ZETTABITS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS_SECOND],
-				id: UniversalYAxisUnit.YOTTABITS_SECOND,
-			},
-		],
-	},
-	{
-		name: 'Count',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
-				id: UniversalYAxisUnit.COUNT,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_SECOND],
-				id: UniversalYAxisUnit.COUNT_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_MINUTE],
-				id: UniversalYAxisUnit.COUNT_MINUTE,
-			},
-		],
-	},
-	{
-		name: 'Operations',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
-				id: UniversalYAxisUnit.OPS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_MINUTE],
-				id: UniversalYAxisUnit.OPS_MINUTE,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_SECOND],
-				id: UniversalYAxisUnit.REQUESTS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_MINUTE],
-				id: UniversalYAxisUnit.REQUESTS_MINUTE,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_SECOND],
-				id: UniversalYAxisUnit.READS_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_SECOND],
-				id: UniversalYAxisUnit.WRITES_SECOND,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_MINUTE],
-				id: UniversalYAxisUnit.READS_MINUTE,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_MINUTE],
-				id: UniversalYAxisUnit.WRITES_MINUTE,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.IOOPS_SECOND],
-				id: UniversalYAxisUnit.IOOPS_SECOND,
-			},
-		],
-	},
-	{
-		name: 'Percentage',
-		units: [
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
-				id: UniversalYAxisUnit.PERCENT,
-			},
-			{
-				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT_UNIT],
-				id: UniversalYAxisUnit.PERCENT_UNIT,
-			},
-		],
-	},
-];

frontend/src/components/YAxisUnitSelector/index.ts

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

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -1,5 +0,0 @@
-.y-axis-unit-selector-component {
-	.ant-select {
-		width: 220px;
-	}
-}

frontend/src/components/YAxisUnitSelector/types.ts

@@ -1,365 +0,0 @@
-export interface YAxisUnitSelectorProps {
-	value: string | undefined;
-	onChange: (value: UniversalYAxisUnit) => void;
-	placeholder?: string;
-	loading?: boolean;
-	disabled?: boolean;
-}
-
-export enum UniversalYAxisUnit {
-	// Time
-	WEEKS = 'wk',
-	DAYS = 'd',
-	HOURS = 'h',
-	MINUTES = 'min',
-	SECONDS = 's',
-	MICROSECONDS = 'us',
-	MILLISECONDS = 'ms',
-	NANOSECONDS = 'ns',
-
-	// Data
-	BYTES = 'By',
-	KILOBYTES = 'kBy',
-	MEGABYTES = 'MBy',
-	GIGABYTES = 'GBy',
-	TERABYTES = 'TBy',
-	PETABYTES = 'PBy',
-	EXABYTES = 'EBy',
-	ZETTABYTES = 'ZBy',
-	YOTTABYTES = 'YBy',
-
-	// Data Rate
-	BYTES_SECOND = 'By/s',
-	KILOBYTES_SECOND = 'kBy/s',
-	MEGABYTES_SECOND = 'MBy/s',
-	GIGABYTES_SECOND = 'GBy/s',
-	TERABYTES_SECOND = 'TBy/s',
-	PETABYTES_SECOND = 'PBy/s',
-	EXABYTES_SECOND = 'EBy/s',
-	ZETTABYTES_SECOND = 'ZBy/s',
-	YOTTABYTES_SECOND = 'YBy/s',
-
-	// Bits
-	BITS = 'bit',
-	KILOBITS = 'kbit',
-	MEGABITS = 'Mbit',
-	GIGABITS = 'Gbit',
-	TERABITS = 'Tbit',
-	PETABITS = 'Pbit',
-	EXABITS = 'Ebit',
-	ZETTABITS = 'Zbit',
-	YOTTABITS = 'Ybit',
-
-	// Bit Rate
-	BITS_SECOND = 'bit/s',
-	KILOBITS_SECOND = 'kbit/s',
-	MEGABITS_SECOND = 'Mbit/s',
-	GIGABITS_SECOND = 'Gbit/s',
-	TERABITS_SECOND = 'Tbit/s',
-	PETABITS_SECOND = 'Pbit/s',
-	EXABITS_SECOND = 'Ebit/s',
-	ZETTABITS_SECOND = 'Zbit/s',
-	YOTTABITS_SECOND = 'Ybit/s',
-
-	// Count
-	COUNT = '{count}',
-	COUNT_SECOND = '{count}/s',
-	COUNT_MINUTE = '{count}/min',
-
-	// Operations
-	OPS_SECOND = '{ops}/s',
-	OPS_MINUTE = '{ops}/min',
-
-	// Requests
-	REQUESTS_SECOND = '{req}/s',
-	REQUESTS_MINUTE = '{req}/min',
-
-	// Reads/Writes
-	READS_SECOND = '{read}/s',
-	WRITES_SECOND = '{write}/s',
-	READS_MINUTE = '{read}/min',
-	WRITES_MINUTE = '{write}/min',
-
-	// IO Operations
-	IOOPS_SECOND = '{iops}/s',
-
-	// Percent
-	PERCENT = '%',
-	PERCENT_UNIT = 'percentunit',
-	NONE = '1',
-}
-
-export enum YAxisUnit {
-	AWS_SECONDS = 'Seconds',
-	UCUM_SECONDS = 's',
-	OPEN_METRICS_SECONDS = 'seconds',
-
-	AWS_MICROSECONDS = 'Microseconds',
-	UCUM_MICROSECONDS = 'us',
-	OPEN_METRICS_MICROSECONDS = 'microseconds',
-
-	AWS_MILLISECONDS = 'Milliseconds',
-	UCUM_MILLISECONDS = 'ms',
-	OPEN_METRICS_MILLISECONDS = 'milliseconds',
-
-	AWS_BYTES = 'Bytes',
-	UCUM_BYTES = 'By',
-	OPEN_METRICS_BYTES = 'bytes',
-
-	AWS_KILOBYTES = 'Kilobytes',
-	UCUM_KILOBYTES = 'kBy',
-	OPEN_METRICS_KILOBYTES = 'kilobytes',
-
-	AWS_MEGABYTES = 'Megabytes',
-	UCUM_MEGABYTES = 'MBy',
-	OPEN_METRICS_MEGABYTES = 'megabytes',
-
-	AWS_GIGABYTES = 'Gigabytes',
-	UCUM_GIGABYTES = 'GBy',
-	OPEN_METRICS_GIGABYTES = 'gigabytes',
-
-	AWS_TERABYTES = 'Terabytes',
-	UCUM_TERABYTES = 'TBy',
-	OPEN_METRICS_TERABYTES = 'terabytes',
-
-	AWS_PETABYTES = 'Petabytes',
-	UCUM_PETABYTES = 'PBy',
-	OPEN_METRICS_PETABYTES = 'petabytes',
-
-	AWS_EXABYTES = 'Exabytes',
-	UCUM_EXABYTES = 'EBy',
-	OPEN_METRICS_EXABYTES = 'exabytes',
-
-	AWS_ZETTABYTES = 'Zettabytes',
-	UCUM_ZETTABYTES = 'ZBy',
-	OPEN_METRICS_ZETTABYTES = 'zettabytes',
-
-	AWS_YOTTABYTES = 'Yottabytes',
-	UCUM_YOTTABYTES = 'YBy',
-	OPEN_METRICS_YOTTABYTES = 'yottabytes',
-
-	AWS_BYTES_SECOND = 'Bytes/Second',
-	UCUM_BYTES_SECOND = 'By/s',
-	OPEN_METRICS_BYTES_SECOND = 'bytes_per_second',
-
-	AWS_KILOBYTES_SECOND = 'Kilobytes/Second',
-	UCUM_KILOBYTES_SECOND = 'kBy/s',
-	OPEN_METRICS_KILOBYTES_SECOND = 'kilobytes_per_second',
-
-	AWS_MEGABYTES_SECOND = 'Megabytes/Second',
-	UCUM_MEGABYTES_SECOND = 'MBy/s',
-	OPEN_METRICS_MEGABYTES_SECOND = 'megabytes_per_second',
-
-	AWS_GIGABYTES_SECOND = 'Gigabytes/Second',
-	UCUM_GIGABYTES_SECOND = 'GBy/s',
-	OPEN_METRICS_GIGABYTES_SECOND = 'gigabytes_per_second',
-
-	AWS_TERABYTES_SECOND = 'Terabytes/Second',
-	UCUM_TERABYTES_SECOND = 'TBy/s',
-	OPEN_METRICS_TERABYTES_SECOND = 'terabytes_per_second',
-
-	AWS_PETABYTES_SECOND = 'Petabytes/Second',
-	UCUM_PETABYTES_SECOND = 'PBy/s',
-	OPEN_METRICS_PETABYTES_SECOND = 'petabytes_per_second',
-
-	AWS_EXABYTES_SECOND = 'Exabytes/Second',
-	UCUM_EXABYTES_SECOND = 'EBy/s',
-	OPEN_METRICS_EXABYTES_SECOND = 'exabytes_per_second',
-
-	AWS_ZETTABYTES_SECOND = 'Zettabytes/Second',
-	UCUM_ZETTABYTES_SECOND = 'ZBy/s',
-	OPEN_METRICS_ZETTABYTES_SECOND = 'zettabytes_per_second',
-
-	AWS_YOTTABYTES_SECOND = 'Yottabytes/Second',
-	UCUM_YOTTABYTES_SECOND = 'YBy/s',
-	OPEN_METRICS_YOTTABYTES_SECOND = 'yottabytes_per_second',
-
-	AWS_BITS = 'Bits',
-	UCUM_BITS = 'bit',
-	OPEN_METRICS_BITS = 'bits',
-
-	AWS_KILOBITS = 'Kilobits',
-	UCUM_KILOBITS = 'kbit',
-	OPEN_METRICS_KILOBITS = 'kilobits',
-
-	AWS_MEGABITS = 'Megabits',
-	UCUM_MEGABITS = 'Mbit',
-	OPEN_METRICS_MEGABITS = 'megabits',
-
-	AWS_GIGABITS = 'Gigabits',
-	UCUM_GIGABITS = 'Gbit',
-	OPEN_METRICS_GIGABITS = 'gigabits',
-
-	AWS_TERABITS = 'Terabits',
-	UCUM_TERABITS = 'Tbit',
-	OPEN_METRICS_TERABITS = 'terabits',
-
-	AWS_PETABITS = 'Petabits',
-	UCUM_PETABITS = 'Pbit',
-	OPEN_METRICS_PETABITS = 'petabits',
-
-	AWS_EXABITS = 'Exabits',
-	UCUM_EXABITS = 'Ebit',
-	OPEN_METRICS_EXABITS = 'exabits',
-
-	AWS_ZETTABITS = 'Zettabits',
-	UCUM_ZETTABITS = 'Zbit',
-	OPEN_METRICS_ZETTABITS = 'zettabits',
-
-	AWS_YOTTABITS = 'Yottabits',
-	UCUM_YOTTABITS = 'Ybit',
-	OPEN_METRICS_YOTTABITS = 'yottabits',
-
-	AWS_BITS_SECOND = 'Bits/Second',
-	UCUM_BITS_SECOND = 'bit/s',
-	OPEN_METRICS_BITS_SECOND = 'bits_per_second',
-
-	AWS_KILOBITS_SECOND = 'Kilobits/Second',
-	UCUM_KILOBITS_SECOND = 'kbit/s',
-	OPEN_METRICS_KILOBITS_SECOND = 'kilobits_per_second',
-
-	AWS_MEGABITS_SECOND = 'Megabits/Second',
-	UCUM_MEGABITS_SECOND = 'Mbit/s',
-	OPEN_METRICS_MEGABITS_SECOND = 'megabits_per_second',
-
-	AWS_GIGABITS_SECOND = 'Gigabits/Second',
-	UCUM_GIGABITS_SECOND = 'Gbit/s',
-	OPEN_METRICS_GIGABITS_SECOND = 'gigabits_per_second',
-
-	AWS_TERABITS_SECOND = 'Terabits/Second',
-	UCUM_TERABITS_SECOND = 'Tbit/s',
-	OPEN_METRICS_TERABITS_SECOND = 'terabits_per_second',
-
-	AWS_PETABITS_SECOND = 'Petabits/Second',
-	UCUM_PETABITS_SECOND = 'Pbit/s',
-	OPEN_METRICS_PETABITS_SECOND = 'petabits_per_second',
-
-	AWS_EXABITS_SECOND = 'Exabits/Second',
-	UCUM_EXABITS_SECOND = 'Ebit/s',
-	OPEN_METRICS_EXABITS_SECOND = 'exabits_per_second',
-
-	AWS_ZETTABITS_SECOND = 'Zettabits/Second',
-	UCUM_ZETTABITS_SECOND = 'Zbit/s',
-	OPEN_METRICS_ZETTABITS_SECOND = 'zettabits_per_second',
-
-	AWS_YOTTABITS_SECOND = 'Yottabits/Second',
-	UCUM_YOTTABITS_SECOND = 'Ybit/s',
-	OPEN_METRICS_YOTTABITS_SECOND = 'yottabits_per_second',
-
-	AWS_COUNT = 'Count',
-	UCUM_COUNT = '{count}',
-	OPEN_METRICS_COUNT = 'count',
-
-	AWS_COUNT_SECOND = 'Count/Second',
-	UCUM_COUNT_SECOND = '{count}/s',
-	OPEN_METRICS_COUNT_SECOND = 'count_per_second',
-
-	AWS_PERCENT = 'Percent',
-	UCUM_PERCENT = '%',
-	OPEN_METRICS_PERCENT = 'ratio',
-
-	AWS_NONE = 'None',
-	UCUM_NONE = '1',
-	OPEN_METRICS_NONE = 'none',
-
-	UCUM_NANOSECONDS = 'ns',
-	OPEN_METRICS_NANOSECONDS = 'nanoseconds',
-
-	UCUM_MINUTES = 'min',
-	OPEN_METRICS_MINUTES = 'minutes',
-
-	UCUM_HOURS = 'h',
-	OPEN_METRICS_HOURS = 'hours',
-
-	UCUM_DAYS = 'd',
-	OPEN_METRICS_DAYS = 'days',
-
-	UCUM_WEEKS = 'wk',
-	OPEN_METRICS_WEEKS = 'weeks',
-
-	UCUM_KIBIBYTES = 'KiBy',
-	OPEN_METRICS_KIBIBYTES = 'kibibytes',
-
-	UCUM_MEBIBYTES = 'MiBy',
-	OPEN_METRICS_MEBIBYTES = 'mebibytes',
-
-	UCUM_GIBIBYTES = 'GiBy',
-	OPEN_METRICS_GIBIBYTES = 'gibibytes',
-
-	UCUM_TEBIBYTES = 'TiBy',
-	OPEN_METRICS_TEBIBYTES = 'tebibytes',
-
-	UCUM_PEBIBYTES = 'PiBy',
-	OPEN_METRICS_PEBIBYTES = 'pebibytes',
-
-	UCUM_KIBIBYTES_SECOND = 'KiBy/s',
-	OPEN_METRICS_KIBIBYTES_SECOND = 'kibibytes_per_second',
-
-	UCUM_KIBIBITS_SECOND = 'Kibit/s',
-	OPEN_METRICS_KIBIBITS_SECOND = 'kibibits_per_second',
-
-	UCUM_MEBIBYTES_SECOND = 'MiBy/s',
-	OPEN_METRICS_MEBIBYTES_SECOND = 'mebibytes_per_second',
-
-	UCUM_MEBIBITS_SECOND = 'Mibit/s',
-	OPEN_METRICS_MEBIBITS_SECOND = 'mebibits_per_second',
-
-	UCUM_GIBIBYTES_SECOND = 'GiBy/s',
-	OPEN_METRICS_GIBIBYTES_SECOND = 'gibibytes_per_second',
-
-	UCUM_GIBIBITS_SECOND = 'Gibit/s',
-	OPEN_METRICS_GIBIBITS_SECOND = 'gibibits_per_second',
-
-	UCUM_TEBIBYTES_SECOND = 'TiBy/s',
-	OPEN_METRICS_TEBIBYTES_SECOND = 'tebibytes_per_second',
-
-	UCUM_TEBIBITS_SECOND = 'Tibit/s',
-	OPEN_METRICS_TEBIBITS_SECOND = 'tebibits_per_second',
-
-	UCUM_PEBIBYTES_SECOND = 'PiBy/s',
-	OPEN_METRICS_PEBIBYTES_SECOND = 'pebibytes_per_second',
-
-	UCUM_PEBIBITS_SECOND = 'Pibit/s',
-	OPEN_METRICS_PEBIBITS_SECOND = 'pebibits_per_second',
-
-	UCUM_TRUE_FALSE = '{bool}',
-	OPEN_METRICS_TRUE_FALSE = 'boolean_true_false',
-
-	UCUM_YES_NO = '{bool}',
-	OPEN_METRICS_YES_NO = 'boolean_yes_no',
-
-	UCUM_COUNTS_SECOND = '{count}/s',
-	OPEN_METRICS_COUNTS_SECOND = 'counts_per_second',
-
-	UCUM_OPS_SECOND = '{ops}/s',
-	OPEN_METRICS_OPS_SECOND = 'ops_per_second',
-
-	UCUM_REQUESTS_SECOND = '{requests}/s',
-	OPEN_METRICS_REQUESTS_SECOND = 'requests_per_second',
-
-	UCUM_REQUESTS_MINUTE = '{requests}/min',
-	OPEN_METRICS_REQUESTS_MINUTE = 'requests_per_minute',
-
-	UCUM_READS_SECOND = '{reads}/s',
-	OPEN_METRICS_READS_SECOND = 'reads_per_second',
-
-	UCUM_WRITES_SECOND = '{writes}/s',
-	OPEN_METRICS_WRITES_SECOND = 'writes_per_second',
-
-	UCUM_IOPS_SECOND = '{iops}/s',
-	OPEN_METRICS_IOPS_SECOND = 'io_ops_per_second',
-
-	UCUM_COUNTS_MINUTE = '{count}/min',
-	OPEN_METRICS_COUNTS_MINUTE = 'counts_per_minute',
-
-	UCUM_OPS_MINUTE = '{ops}/min',
-	OPEN_METRICS_OPS_MINUTE = 'ops_per_minute',
-
-	UCUM_READS_MINUTE = '{reads}/min',
-	OPEN_METRICS_READS_MINUTE = 'reads_per_minute',
-
-	UCUM_WRITES_MINUTE = '{writes}/min',
-	OPEN_METRICS_WRITES_MINUTE = 'writes_per_minute',
-
-	OPEN_METRICS_PERCENT_UNIT = 'percentunit',
-}

frontend/src/components/YAxisUnitSelector/utils.tsx

@@ -1,33 +0,0 @@
-import { UniversalYAxisUnitMappings, Y_AXIS_UNIT_NAMES } from './constants';
-import { UniversalYAxisUnit, YAxisUnit } from './types';
-
-export const mapMetricUnitToUniversalUnit = (
-	unit: string | undefined,
-): UniversalYAxisUnit | null => {
-	if (!unit) {
-		return null;
-	}
-
-	const universalUnit = Object.values(UniversalYAxisUnit).find(
-		(u) => UniversalYAxisUnitMappings[u].has(unit as YAxisUnit) || unit === u,
-	);
-
-	return universalUnit || (unit as UniversalYAxisUnit) || null;
-};
-
-export const getUniversalNameFromMetricUnit = (
-	unit: string | undefined,
-): string => {
-	if (!unit) {
-		return '-';
-	}
-
-	const universalUnit = mapMetricUnitToUniversalUnit(unit);
-	if (!universalUnit) {
-		return unit;
-	}
-
-	const universalName = Y_AXIS_UNIT_NAMES[universalUnit];
-
-	return universalName || unit || '-';
-};

frontend/src/constants/antlrQueryConstants.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
 export const OPERATORS = {
 	IN: 'IN',
 	LIKE: 'LIKE',
@@ -17,50 +15,6 @@ export const OPERATORS = {
 	'<': '<',
 };
 
-export const QUERY_BUILDER_FUNCTIONS = {
-	HAS: 'has',
-	HASANY: 'hasAny',
-	HASALL: 'hasAll',
-};
-
-export function negateOperator(operatorOrFunction: string): string {
-	// Special cases for equals/not equals
-	if (operatorOrFunction === OPERATORS['=']) {
-		return OPERATORS['!='];
-	}
-	if (operatorOrFunction === OPERATORS['!=']) {
-		return OPERATORS['='];
-	}
-	// For all other operators and functions, add NOT in front
-	return `${OPERATORS.NOT} ${operatorOrFunction}`;
-}
-
-export enum DEPRECATED_OPERATORS {
-	REGEX = 'regex',
-	NIN = 'nin',
-	NREGEX = 'nregex',
-	NLIKE = 'nlike',
-	NILIKE = 'nilike',
-	NEXTISTS = 'nexists',
-	NCONTAINS = 'ncontains',
-	NHAS = 'nhas',
-	NHASANY = 'nhasany',
-	NHASALL = 'nhasall',
-}
-
-export const DEPRECATED_OPERATORS_MAP = {
-	[DEPRECATED_OPERATORS.REGEX]: OPERATORS.REGEXP,
-	[DEPRECATED_OPERATORS.NIN]: negateOperator(OPERATORS.IN),
-	[DEPRECATED_OPERATORS.NREGEX]: negateOperator(OPERATORS.REGEXP),
-	[DEPRECATED_OPERATORS.NLIKE]: negateOperator(OPERATORS.LIKE),
-	[DEPRECATED_OPERATORS.NILIKE]: negateOperator(OPERATORS.ILIKE),
-	[DEPRECATED_OPERATORS.NEXTISTS]: negateOperator(OPERATORS.EXISTS),
-	[DEPRECATED_OPERATORS.NCONTAINS]: negateOperator(OPERATORS.CONTAINS),
-	[DEPRECATED_OPERATORS.NHAS]: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
-	[DEPRECATED_OPERATORS.NHASANY]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASANY),
-	[DEPRECATED_OPERATORS.NHASALL]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASALL),
-};
-
 export const NON_VALUE_OPERATORS = [OPERATORS.EXISTS];
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

frontend/src/constants/orgPreferences.ts

@@ -7,8 +7,8 @@ export const ORG_PREFERENCES = {
 		'welcome_checklist_setup_alerts_skipped',
 	WELCOME_CHECKLIST_SETUP_SAVED_VIEW_SKIPPED:
 		'welcome_checklist_setup_saved_view_skipped',
-	WELCOME_CHECKLIST_SEND_METRICS_SKIPPED:
-		'welcome_checklist_send_metrics_skipped',
+	WELCOME_CHECKLIST_SEND_INFRA_METRICS_SKIPPED:
+		'welcome_checklist_send_infra_metrics_skipped',
 	WELCOME_CHECKLIST_SETUP_DASHBOARDS_SKIPPED:
 		'welcome_checklist_setup_dashboards_skipped',
 	WELCOME_CHECKLIST_SETUP_WORKSPACE_SKIPPED:

frontend/src/constants/query.ts

@@ -49,5 +49,4 @@ export enum QueryParams {
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
-	variableConfigs = 'variableConfigs',
 }

frontend/src/constants/queryBuilder.ts

@@ -23,7 +23,6 @@ import {
 	BoolOperators,
 	DataSource,
 	LogsAggregatorOperator,
-	MeterAggregateOperator,
 	MetricAggregateOperator,
 	NumberOperators,
 	QueryAdditionalFilter,
@@ -37,7 +36,6 @@ import { v4 as uuid } from 'uuid';
 
 import {
 	logsAggregateOperatorOptions,
-	meterAggregateOperatorOptions,
 	metricAggregateOperatorOptions,
 	metricsGaugeAggregateOperatorOptions,
 	metricsGaugeSpaceAggregateOperatorOptions,
@@ -81,7 +79,6 @@ export const mapOfOperators = {
 	metrics: metricAggregateOperatorOptions,
 	logs: logsAggregateOperatorOptions,
 	traces: tracesAggregateOperatorOptions,
-	meter: meterAggregateOperatorOptions,
 };
 
 export const metricsOperatorsByType = {
@@ -196,7 +193,6 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 	groupBy: [],
 	legend: '',
 	reduceTo: 'avg',
-	source: '',
 };
 
 const initialQueryBuilderFormLogsValues: IBuilderQuery = {
@@ -213,39 +209,6 @@ const initialQueryBuilderFormTracesValues: IBuilderQuery = {
 	dataSource: DataSource.TRACES,
 };
 
-export const initialQueryBuilderFormMeterValues: IBuilderQuery = {
-	dataSource: DataSource.METRICS,
-	queryName: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
-	aggregateOperator: MeterAggregateOperator.COUNT,
-	aggregateAttribute: initialAutocompleteData,
-	timeAggregation: MeterAggregateOperator.RATE,
-	spaceAggregation: MeterAggregateOperator.SUM,
-	filter: { expression: '' },
-	aggregations: [
-		{
-			metricName: '',
-			temporality: '',
-			timeAggregation: MeterAggregateOperator.COUNT,
-			spaceAggregation: MeterAggregateOperator.SUM,
-			reduceTo: 'avg',
-		},
-	],
-	functions: [],
-	filters: { items: [], op: 'AND' },
-	expression: createNewBuilderItemName({
-		existNames: [],
-		sourceNames: alphabet,
-	}),
-	disabled: false,
-	stepInterval: undefined,
-	having: [],
-	limit: null,
-	orderBy: [],
-	groupBy: [],
-	legend: '',
-	reduceTo: 'avg',
-};
-
 export const initialQueryBuilderFormValuesMap: Record<
 	DataSource,
 	IBuilderQuery
@@ -322,19 +285,6 @@ export const initialQueriesMap: Record<DataSource, Query> = {
 	traces: initialQueryTracesWithType,
 };
 
-export const initialQueryMeterWithType: Query = {
-	...initialQueryWithType,
-	builder: {
-		...initialQueryWithType.builder,
-		queryData: [
-			{
-				...initialQueryBuilderFormValuesMap.metrics,
-				source: 'meter',
-			},
-		],
-	},
-};
-
 export const operatorsByTypes: Record<LocalDataType, string[]> = {
 	string: Object.values(StringOperators),
 	number: Object.values(NumberOperators),

frontend/src/constants/queryBuilderOperators.ts

@@ -125,126 +125,6 @@ export const metricAggregateOperatorOptions: SelectOption<string, string>[] = [
 	},
 ];
 
-export const meterAggregateOperatorOptions: SelectOption<string, string>[] = [
-	{
-		value: MetricAggregateOperator.COUNT,
-		label: 'Count',
-	},
-	{
-		value: MetricAggregateOperator.COUNT_DISTINCT,
-		// eslint-disable-next-line sonarjs/no-duplicate-string
-		label: 'Count Distinct',
-	},
-	{
-		value: MetricAggregateOperator.SUM,
-		label: 'Sum',
-	},
-	{
-		value: MetricAggregateOperator.AVG,
-		label: 'Avg',
-	},
-	{
-		value: MetricAggregateOperator.MAX,
-		label: 'Max',
-	},
-	{
-		value: MetricAggregateOperator.MIN,
-		label: 'Min',
-	},
-	{
-		value: MetricAggregateOperator.P05,
-		label: 'P05',
-	},
-	{
-		value: MetricAggregateOperator.P10,
-		label: 'P10',
-	},
-	{
-		value: MetricAggregateOperator.P20,
-		label: 'P20',
-	},
-	{
-		value: MetricAggregateOperator.P25,
-		label: 'P25',
-	},
-	{
-		value: MetricAggregateOperator.P50,
-		label: 'P50',
-	},
-	{
-		value: MetricAggregateOperator.P75,
-		label: 'P75',
-	},
-	{
-		value: MetricAggregateOperator.P90,
-		label: 'P90',
-	},
-	{
-		value: MetricAggregateOperator.P95,
-		label: 'P95',
-	},
-	{
-		value: MetricAggregateOperator.P99,
-		label: 'P99',
-	},
-	{
-		value: MetricAggregateOperator.RATE,
-		label: 'Rate',
-	},
-	{
-		value: MetricAggregateOperator.SUM_RATE,
-		label: 'Sum_rate',
-	},
-	{
-		value: MetricAggregateOperator.AVG_RATE,
-		label: 'Avg_rate',
-	},
-	{
-		value: MetricAggregateOperator.MAX_RATE,
-		label: 'Max_rate',
-	},
-	{
-		value: MetricAggregateOperator.MIN_RATE,
-		label: 'Min_rate',
-	},
-	{
-		value: MetricAggregateOperator.RATE_SUM,
-		label: 'Rate_sum',
-	},
-	{
-		value: MetricAggregateOperator.RATE_AVG,
-		label: 'Rate_avg',
-	},
-	{
-		value: MetricAggregateOperator.RATE_MIN,
-		label: 'Rate_min',
-	},
-	{
-		value: MetricAggregateOperator.RATE_MAX,
-		label: 'Rate_max',
-	},
-	{
-		value: MetricAggregateOperator.HIST_QUANTILE_50,
-		label: 'Hist_quantile_50',
-	},
-	{
-		value: MetricAggregateOperator.HIST_QUANTILE_75,
-		label: 'Hist_quantile_75',
-	},
-	{
-		value: MetricAggregateOperator.HIST_QUANTILE_90,
-		label: 'Hist_quantile_90',
-	},
-	{
-		value: MetricAggregateOperator.HIST_QUANTILE_95,
-		label: 'Hist_quantile_95',
-	},
-	{
-		value: MetricAggregateOperator.HIST_QUANTILE_99,
-		label: 'Hist_quantile_99',
-	},
-];
-
 export const tracesAggregateOperatorOptions: SelectOption<string, string>[] = [
 	{
 		value: TracesAggregatorOperator.COUNT,

frontend/src/constants/routes.ts

@@ -77,9 +77,6 @@ const ROUTES = {
 	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
-	METER: '/meter',
-	METER_EXPLORER: '/meter/explorer',
-	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 } as const;
 

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -6,7 +6,6 @@ export const GlobalShortcuts = {
 	NavigateToAlerts: 'a+shift',
 	NavigateToExceptions: 'e+shift',
 	NavigateToMessagingQueues: 'm+shift',
-	ToggleSidebar: 'b+shift',
 };
 
 export const GlobalShortcutsName = {
@@ -17,7 +16,6 @@ export const GlobalShortcutsName = {
 	NavigateToAlerts: 'shift+a',
 	NavigateToExceptions: 'shift+e',
 	NavigateToMessagingQueues: 'shift+m',
-	ToggleSidebar: 'shift+b',
 };
 
 export const GlobalShortcutsDescription = {
@@ -28,5 +26,4 @@ export const GlobalShortcutsDescription = {
 	NavigateToAlerts: 'Navigate to alerts page',
 	NavigateToExceptions: 'Navigate to Exceptions page',
 	NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
-	ToggleSidebar: 'Toggle sidebar visibility',
 };

frontend/src/container/AppLayout/__tests__/sidebar-toggle-shortcut.test.tsx

@@ -1,176 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
-import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
-import { USER_PREFERENCES } from 'constants/userPreferences';
-import {
-	KeyboardHotkeysProvider,
-	useKeyboardHotkeys,
-} from 'hooks/hotkeys/useKeyboardHotkeys';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-// Mock dependencies
-jest.mock('api/common/logEvent', () => jest.fn());
-
-// Mock the AppContext
-const mockUpdateUserPreferenceInContext = jest.fn();
-
-const SHIFT_B_KEYBOARD_SHORTCUT = '{Shift>}b{/Shift}';
-
-jest.mock('providers/App/App', () => ({
-	useAppContext: jest.fn(() => ({
-		userPreferences: [
-			{
-				name: USER_PREFERENCES.SIDENAV_PINNED,
-				value: false,
-			},
-		],
-		updateUserPreferenceInContext: mockUpdateUserPreferenceInContext,
-	})),
-}));
-
-function TestComponent({
-	mockHandleShortcut,
-}: {
-	mockHandleShortcut: () => void;
-}): JSX.Element {
-	const { registerShortcut } = useKeyboardHotkeys();
-	registerShortcut(GlobalShortcuts.ToggleSidebar, mockHandleShortcut);
-	return <div data-testid="test">Test</div>;
-}
-
-describe('Sidebar Toggle Shortcut', () => {
-	let queryClient: QueryClient;
-
-	beforeEach(() => {
-		queryClient = new QueryClient({
-			defaultOptions: {
-				queries: {
-					retry: false,
-				},
-				mutations: {
-					retry: false,
-				},
-			},
-		});
-
-		jest.clearAllMocks();
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('Global Shortcuts Constants', () => {
-		it('should have the correct shortcut key combination', () => {
-			expect(GlobalShortcuts.ToggleSidebar).toBe('b+shift');
-		});
-	});
-
-	describe('Keyboard Shortcut Registration', () => {
-		it('should register the sidebar toggle shortcut correctly', async () => {
-			const user = userEvent.setup();
-			const mockHandleShortcut = jest.fn();
-
-			render(
-				<QueryClientProvider client={queryClient}>
-					<KeyboardHotkeysProvider>
-						<TestComponent mockHandleShortcut={mockHandleShortcut} />
-					</KeyboardHotkeysProvider>
-				</QueryClientProvider>,
-			);
-
-			// Trigger the shortcut
-			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
-
-			expect(mockHandleShortcut).toHaveBeenCalled();
-		});
-
-		it('should not trigger shortcut in input fields', async () => {
-			const user = userEvent.setup();
-			const mockHandleShortcut = jest.fn();
-
-			function TestComponent(): JSX.Element {
-				const { registerShortcut } = useKeyboardHotkeys();
-				registerShortcut(GlobalShortcuts.ToggleSidebar, mockHandleShortcut);
-				return (
-					<div>
-						<input data-testid="input-field" />
-						<div data-testid="test">Test</div>
-					</div>
-				);
-			}
-
-			render(
-				<QueryClientProvider client={queryClient}>
-					<KeyboardHotkeysProvider>
-						<TestComponent />
-					</KeyboardHotkeysProvider>
-				</QueryClientProvider>,
-			);
-
-			// Focus on input field
-			const inputField = screen.getByTestId('input-field');
-			await user.click(inputField);
-
-			// Try to trigger shortcut while focused on input
-			await user.keyboard('{Shift>}b{/Shift}');
-
-			// Should not trigger the shortcut
-			expect(mockHandleShortcut).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('Sidebar Toggle Functionality', () => {
-		it('should log the toggle event with correct parameters', async () => {
-			const user = userEvent.setup();
-			const mockHandleShortcut = jest.fn(() => {
-				logEvent('Global Shortcut: Sidebar Toggle', {
-					previousState: false,
-					newState: true,
-				});
-			});
-
-			render(
-				<QueryClientProvider client={queryClient}>
-					<KeyboardHotkeysProvider>
-						<TestComponent mockHandleShortcut={mockHandleShortcut} />
-					</KeyboardHotkeysProvider>
-				</QueryClientProvider>,
-			);
-
-			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
-
-			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
-				previousState: false,
-				newState: true,
-			});
-		});
-
-		it('should update user preference in context', async () => {
-			const user = userEvent.setup();
-			const mockHandleShortcut = jest.fn(() => {
-				const save = {
-					name: USER_PREFERENCES.SIDENAV_PINNED,
-					value: true,
-				};
-				mockUpdateUserPreferenceInContext(save);
-			});
-
-			render(
-				<QueryClientProvider client={queryClient}>
-					<KeyboardHotkeysProvider>
-						<TestComponent mockHandleShortcut={mockHandleShortcut} />
-					</KeyboardHotkeysProvider>
-				</QueryClientProvider>,
-			);
-
-			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
-
-			expect(mockUpdateUserPreferenceInContext).toHaveBeenCalledWith({
-				name: USER_PREFERENCES.SIDENAV_PINNED,
-				value: true,
-			});
-		});
-	});
-});

frontend/src/container/AppLayout/index.tsx

@@ -10,10 +10,8 @@ import setLocalStorageApi from 'api/browser/localstorage/set';
 import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
 import logEvent from 'api/common/logEvent';
 import manageCreditCardApi from 'api/v1/portal/create';
-import updateUserPreference from 'api/v1/user/preferences/name/update';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
 import getUserVersion from 'api/v1/version/getVersion';
-import { AxiosError } from 'axios';
 import cx from 'classnames';
 import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
@@ -24,12 +22,10 @@ import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
-import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
@@ -72,10 +68,8 @@ import {
 	LicensePlatform,
 	LicenseState,
 } from 'types/api/licensesV3/getActive';
-import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
-import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
 	getFormattedDate,
@@ -668,85 +662,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		</div>
 	);
 
-	const sideNavPinnedPreference = userPreferences?.find(
+	const sideNavPinned = userPreferences?.find(
 		(preference) => preference.name === USER_PREFERENCES.SIDENAV_PINNED,
 	)?.value as boolean;
 
-	// Add loading state to prevent layout shift during initial load
-	const [isSidebarLoaded, setIsSidebarLoaded] = useState(false);
-
-	// Get sidebar state from localStorage as fallback until preferences are loaded
-	const getSidebarStateFromLocalStorage = useCallback((): boolean => {
-		try {
-			const storedValue = getLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED);
-			return storedValue === 'true';
-		} catch {
-			return false;
-		}
-	}, []);
-
-	// Set sidebar as loaded after user preferences are fetched
-	useEffect(() => {
-		if (userPreferences !== null) {
-			setIsSidebarLoaded(true);
-		}
-	}, [userPreferences]);
-
-	// Use localStorage value as fallback until preferences are loaded
-	const isSideNavPinned = isSidebarLoaded
-		? sideNavPinnedPreference
-		: getSidebarStateFromLocalStorage();
-
-	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
-	const { updateUserPreferenceInContext } = useAppContext();
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-		{
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
-	const handleToggleSidebar = useCallback((): void => {
-		const newState = !isSideNavPinned;
-
-		logEvent('Global Shortcut: Sidebar Toggle', {
-			previousState: isSideNavPinned,
-			newState,
-		});
-
-		// Save to localStorage immediately for instant feedback
-		setLocalStorageApi(USER_PREFERENCES.SIDENAV_PINNED, newState.toString());
-
-		// Update the context immediately
-		const save = {
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: newState,
-		};
-		updateUserPreferenceInContext(save as UserPreference);
-
-		// Make the API call in the background
-		updateUserPreferenceMutation({
-			name: USER_PREFERENCES.SIDENAV_PINNED,
-			value: newState,
-		});
-	}, [
-		isSideNavPinned,
-		updateUserPreferenceInContext,
-		updateUserPreferenceMutation,
-	]);
-
-	// Register the sidebar toggle shortcut
-	useEffect(() => {
-		registerShortcut(GlobalShortcuts.ToggleSidebar, handleToggleSidebar);
-
-		return (): void => {
-			deregisterShortcut(GlobalShortcuts.ToggleSidebar);
-		};
-	}, [registerShortcut, deregisterShortcut, handleToggleSidebar]);
-
 	const SHOW_TRIAL_EXPIRY_BANNER =
 		showTrialExpiryBanner && !showPaymentFailedWarning;
 	const SHOW_WORKSPACE_RESTRICTED_BANNER = showWorkspaceRestricted;
@@ -820,14 +739,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				className={cx(
 					'app-layout',
 					isDarkMode ? 'darkMode dark' : 'lightMode',
-					isSideNavPinned ? 'side-nav-pinned' : '',
+					sideNavPinned ? 'side-nav-pinned' : '',
 					SHOW_WORKSPACE_RESTRICTED_BANNER ? 'isWorkspaceRestricted' : '',
 					SHOW_TRIAL_EXPIRY_BANNER ? 'isTrialExpired' : '',
 					SHOW_PAYMENT_FAILED_BANNER ? 'isPaymentFailed' : '',
 				)}
 			>
 				{isToDisplayLayout && !renderFullScreen && (
-					<SideNav isPinned={isSideNavPinned} />
+					<SideNav isPinned={sideNavPinned} />
 				)}
 				<div
 					className={cx('app-content', {

frontend/src/container/CreateAlertRule/defaults.ts

@@ -1,4 +1,4 @@
-import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import {
 	initialQueryBuilderFormValuesMap,
 	initialQueryPromQLData,
@@ -28,7 +28,7 @@ const defaultAnnotations = {
 
 export const alertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
+	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -62,7 +62,7 @@ export const alertDefaults: AlertDef = {
 
 export const anamolyAlertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
+	version: ENTITY_VERSION_V4,
 	ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
 	condition: {
 		compositeQuery: {
@@ -107,7 +107,7 @@ export const anamolyAlertDefaults: AlertDef = {
 
 export const logAlertDefaults: AlertDef = {
 	alertType: AlertTypes.LOGS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
+	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -139,7 +139,7 @@ export const logAlertDefaults: AlertDef = {
 
 export const traceAlertDefaults: AlertDef = {
 	alertType: AlertTypes.TRACES_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
+	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -171,7 +171,7 @@ export const traceAlertDefaults: AlertDef = {
 
 export const exceptionAlertDefaults: AlertDef = {
 	alertType: AlertTypes.EXCEPTIONS_BASED_ALERT,
-	version: ENTITY_VERSION_V5,
+	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,6 +1,6 @@
 import { Form, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
@@ -71,14 +71,14 @@ function CreateRules(): JSX.Element {
 			case AlertTypes.ANOMALY_BASED_ALERT:
 				setInitValues({
 					...anamolyAlertDefaults,
-					version: version || ENTITY_VERSION_V5,
+					version: version || ENTITY_VERSION_V4,
 					ruleType: AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
 				});
 				break;
 			default:
 				setInitValues({
 					...alertDefaults,
-					version: version || ENTITY_VERSION_V5,
+					version: version || ENTITY_VERSION_V4,
 					ruleType: AlertDetectionTypes.THRESHOLD_ALERT,
 				});
 		}

frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx

@@ -16,7 +16,6 @@ function ExplorerOptionWrapper({
 	sourcepage,
 	isOneChartPerQuery,
 	splitedQueries,
-	signalSource,
 }: ExplorerOptionsWrapperProps): JSX.Element {
 	const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
 
@@ -33,7 +32,6 @@ function ExplorerOptionWrapper({
 			isLoading={isLoading}
 			onExport={onExport}
 			sourcepage={sourcepage}
-			signalSource={signalSource}
 			isExplorerOptionHidden={isExplorerOptionHidden}
 			setIsExplorerOptionHidden={setIsExplorerOptionHidden}
 			isOneChartPerQuery={isOneChartPerQuery}

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,12 +1,12 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 8px;
+	bottom: 24px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;
 
 	display: flex;
-	gap: 8px;
+	gap: 16px;
 	background-color: transparent;
 
 	.multi-alert-button,
@@ -33,12 +33,11 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 12px;
-	padding: 10px 12px;
+	padding: 10px 10px;
+	border-radius: 50px;
+	border: 1px solid var(--bg-slate-400);
 	background: rgba(22, 24, 29, 0.6);
-	border: 1px solid var(--bg-slate-500);
-	border-radius: 4px;
 	backdrop-filter: blur(20px);
-	box-sizing: border-box;
 
 	.action-icon {
 		display: flex;
@@ -65,9 +64,9 @@
 
 .explorer-options {
 	padding: 10px 12px;
-	border-radius: 4px;
-	border: 1px solid var(--bg-slate-500);
-	background: var(--bg-ink-400);
+	border: 1px solid var(--bg-slate-400);
+	border-radius: 50px;
+	background: rgba(22, 24, 29, 0.6);
 	backdrop-filter: blur(20px);
 
 	cursor: default;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -93,7 +93,6 @@ function ExplorerOptions({
 	onExport,
 	query,
 	sourcepage,
-	signalSource,
 	isExplorerOptionHidden = false,
 	setIsExplorerOptionHidden,
 	isOneChartPerQuery = false,
@@ -111,7 +110,6 @@ function ExplorerOptions({
 
 	const isLogsExplorer = sourcepage === DataSource.LOGS;
 	const isMetricsExplorer = sourcepage === DataSource.METRICS;
-	const isMeterExplorer = signalSource === 'meter';
 
 	const PRESERVED_VIEW_LOCAL_STORAGE_KEY = LOCALSTORAGE.LAST_USED_SAVED_VIEWS;
 
@@ -122,11 +120,8 @@ function ExplorerOptions({
 		if (isMetricsExplorer) {
 			return PreservedViewsTypes.METRICS;
 		}
-		if (isMeterExplorer) {
-			return PreservedViewsTypes.METER;
-		}
 		return PreservedViewsTypes.TRACES;
-	}, [isLogsExplorer, isMetricsExplorer, isMeterExplorer]);
+	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const onModalToggle = useCallback((value: boolean) => {
 		setIsExport(value);
@@ -155,10 +150,6 @@ function ExplorerOptions({
 				[MetricsExplorerEventKeys.OneChartPerQueryEnabled]: isOneChartPerQuery,
 				panelType,
 			});
-		} else if (isMeterExplorer) {
-			logEvent('Meter Explorer: Save view clicked', {
-				panelType,
-			});
 		}
 		setIsSaveModalOpen(!isSaveModalOpen);
 	};
@@ -252,7 +243,7 @@ function ExplorerOptions({
 		error,
 		isRefetching,
 		refetch: refetchAllView,
-	} = useGetAllViews(isMeterExplorer ? 'meter' : sourcepage);
+	} = useGetAllViews(sourcepage);
 
 	const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 
@@ -325,7 +316,7 @@ function ExplorerOptions({
 		compositeQuery,
 		viewKey,
 		extraData: updatedExtraData,
-		sourcePage: isMeterExplorer ? 'meter' : sourcepage,
+		sourcePage: sourcepage,
 		viewName,
 	});
 
@@ -341,7 +332,7 @@ function ExplorerOptions({
 				compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),
 				viewKey,
 				extraData: updatedExtraData,
-				sourcePage: isMeterExplorer ? 'meter' : sourcepage,
+				sourcePage: sourcepage,
 				viewName,
 			},
 			{
@@ -468,11 +459,6 @@ function ExplorerOptions({
 				panelType,
 				viewName: option?.value,
 			});
-		} else if (isMeterExplorer) {
-			logEvent('Meter Explorer: Select view', {
-				panelType,
-				viewName: option?.value,
-			});
 		}
 
 		updatePreservedViewInLocalStorage(option);
@@ -519,11 +505,6 @@ function ExplorerOptions({
 					: defaultLogsSelectedColumns,
 		});
 
-		if (signalSource === 'meter') {
-			history.replace(ROUTES.METER_EXPLORER);
-			return;
-		}
-
 		history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
 	};
 
@@ -568,7 +549,7 @@ function ExplorerOptions({
 			redirectWithQueryBuilderData,
 			refetchAllView,
 			saveViewAsync,
-			sourcePage: isMeterExplorer ? 'meter' : sourcepage,
+			sourcePage: sourcepage,
 			viewName: newViewName,
 			setNewViewName,
 		});
@@ -687,7 +668,7 @@ function ExplorerOptions({
 		return `Query ${query.builder.queryData[0].queryName}`;
 	};
 
-	const CreateAlertButton = useMemo(() => {
+	const alertButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
 				<Button
@@ -740,7 +721,7 @@ function ExplorerOptions({
 		splitedQueries,
 	]);
 
-	const AddToDashboardButton = useMemo(() => {
+	const dashboardButton = useMemo(() => {
 		if (isOneChartPerQuery) {
 			const selectLabel = (
 				<Button
@@ -848,7 +829,7 @@ function ExplorerOptions({
 					style={{
 						background: extraData
 							? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
-							: 'initial',
+							: 'transparent',
 					}}
 				>
 					<div className="view-options">
@@ -903,13 +884,10 @@ function ExplorerOptions({
 
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
-					{signalSource !== 'meter' && (
-						<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-							{CreateAlertButton}
-							{AddToDashboardButton}
-						</div>
-					)}
-
+					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
+						{alertButton}
+						{dashboardButton}
+					</div>
 					<div className="actions">
 						{/* Hide the info icon for metrics explorer until we get the docs link */}
 						{!isMetricsExplorer && (
@@ -1015,7 +993,6 @@ export interface ExplorerOptionsProps {
 	query: Query | null;
 	disabled: boolean;
 	sourcepage: DataSource;
-	signalSource?: string;
 	isExplorerOptionHidden?: boolean;
 	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 	isOneChartPerQuery?: boolean;
@@ -1028,7 +1005,6 @@ ExplorerOptions.defaultProps = {
 	setIsExplorerOptionHidden: undefined,
 	isOneChartPerQuery: false,
 	splitedQueries: [],
-	signalSource: '',
 };
 
 export default ExplorerOptions;

frontend/src/container/ExplorerOptions/constants.ts

@@ -2,5 +2,4 @@ export enum PreservedViewsTypes {
 	LOGS = 'logs',
 	TRACES = 'traces',
 	METRICS = 'metrics',
-	METER = 'meter',
 }

frontend/src/container/ExplorerOptions/types.ts

@@ -13,7 +13,7 @@ import { PreservedViewsTypes } from './constants';
 export interface SaveNewViewHandlerProps {
 	viewName: string;
 	compositeQuery: ICompositeMetricQuery;
-	sourcePage: DataSource | 'meter';
+	sourcePage: DataSource;
 	extraData: SaveViewProps['extraData'];
 	panelType: PANEL_TYPES | null;
 	notifications: NotificationInstance;
@@ -32,8 +32,7 @@ export interface SaveNewViewHandlerProps {
 export type PreservedViewType =
 	| PreservedViewsTypes.LOGS
 	| PreservedViewsTypes.TRACES
-	| PreservedViewsTypes.METRICS
-	| PreservedViewsTypes.METER;
+	| PreservedViewsTypes.METRICS;
 
 export type PreservedViewsInLocalStorage = Partial<
 	Record<PreservedViewType, { key: string; value: string }>

frontend/src/container/ExplorerOptions/utils.ts

@@ -37,7 +37,7 @@ export const saveNewViewHandler = ({
 		{
 			viewName,
 			compositeQuery,
-			sourcePage: sourcePage as DataSource,
+			sourcePage,
 			extraData,
 		},
 		{

frontend/src/container/FormAlertRules/ChartPreview/ChartPreview.styles.scss

@@ -2,12 +2,6 @@
 	height: 57vh;
 	width: 100%;
 
-	.chart-preview-header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
 	.threshold-alert-uplot-chart-container {
 		height: calc(100% - 24px);
 	}

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -1,14 +1,12 @@
 import './ChartPreview.styles.scss';
 
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import Spinner from 'components/Spinner';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
-import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
@@ -28,7 +26,6 @@ import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -37,10 +34,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
-import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';
-import { LegendPosition } from 'types/api/dashboard/getAll';
-import APIError from 'types/api/error';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -50,7 +44,7 @@ import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { AlertDetectionTypes } from '..';
-import { ChartContainer } from './styles';
+import { ChartContainer, FailedMessageContainer } from './styles';
 import { getThresholdLabel } from './utils';
 
 export interface ChartPreviewProps {
@@ -86,7 +80,6 @@ function ChartPreview({
 	const threshold = alertDef?.condition.target || 0;
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const [graphVisibility, setGraphVisibility] = useState<boolean[]>([]);
 	const { currentQuery } = useQueryBuilder();
 
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
@@ -178,19 +171,6 @@ function ChartPreview({
 		setMaxTimeScale(endTime);
 	}, [maxTime, minTime, globalSelectedInterval, queryResponse, setQueryStatus]);
 
-	// Initialize graph visibility from localStorage
-	useEffect(() => {
-		if (queryResponse?.data?.payload?.data?.result) {
-			const {
-				graphVisibilityStates: localStoredVisibilityState,
-			} = getLocalStorageGraphVisibilityState({
-				apiResponse: queryResponse.data.payload.data.result,
-				name: 'alert-chart-preview',
-			});
-			setGraphVisibility(localStoredVisibilityState);
-		}
-	}, [queryResponse?.data?.payload?.data?.result]);
-
 	if (queryResponse.data && graphType === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
 			queryResponse.data?.payload.data.result,
@@ -277,10 +257,6 @@ function ChartPreview({
 				timezone: timezone.value,
 				currentQuery,
 				query: query || currentQuery,
-				graphsVisibilityStates: graphVisibility,
-				setGraphsVisibilityStates: setGraphVisibility,
-				enhancedLegend: true,
-				legendPosition: LegendPosition.BOTTOM,
 			}),
 		[
 			yAxisUnit,
@@ -298,7 +274,6 @@ function ChartPreview({
 			timezone.value,
 			currentQuery,
 			query,
-			graphVisibility,
 		],
 	);
 
@@ -314,23 +289,20 @@ function ChartPreview({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
 			?.active || false;
 
-	const isWarning = !isEmpty(queryResponse.data?.warning);
 	return (
 		<div className="alert-chart-container" ref={graphRef}>
 			<ChartContainer>
-				<div className="chart-preview-header">
-					{headline}
-					{isWarning && (
-						<WarningPopover warningData={queryResponse.data?.warning as Warning} />
-					)}
-				</div>
+				{headline}
 
 				<div className="threshold-alert-uplot-chart-container">
 					{queryResponse.isLoading && (
 						<Spinner size="large" tip="Loading..." height="100%" />
 					)}
 					{(queryResponse?.isError || queryResponse?.error) && (
-						<ErrorInPlace error={queryResponse.error as APIError} />
+						<FailedMessageContainer color="red" title="Failed to refresh the chart">
+							<InfoCircleOutlined />
+							{queryResponse.error.message || t('preview_chart_unexpected_error')}
+						</FailedMessageContainer>
 					)}
 
 					{chartDataAvailable && !isAnomalyDetectionAlert && (

frontend/src/container/FormAlertRules/index.tsx

@@ -37,8 +37,11 @@ import {
 	defaultEvalWindow,
 	defaultMatchType,
 } from 'types/api/alerts/def';
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryFunction } from 'types/api/v5/queryRange';
+import {
+	IBuilderQuery,
+	Query,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -179,17 +182,12 @@ function FormAlertRules({
 		setDetectionMethod(value);
 	};
 
-	const updateFunctions = (data: IBuilderQuery): QueryFunction[] => {
-		const anomalyFunction: QueryFunction = {
-			name: 'anomaly' as any,
-			args: [
-				{
-					name: 'z_score_threshold',
-					value: alertDef.condition.target || 3,
-				},
-			],
+	const updateFunctions = (data: IBuilderQuery): QueryFunctionProps[] => {
+		const anomalyFunction = {
+			name: 'anomaly',
+			args: [],
+			namedArgs: { z_score_threshold: alertDef.condition.target || 3 },
 		};
-
 		const functions = data.functions || [];
 
 		if (alertDef.ruleType === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
@@ -240,18 +238,8 @@ function FormAlertRules({
 			const queryData = currentQuery.builder.queryData[index];
 
 			const updatedFunctions = updateFunctions(queryData);
-
-			// Only update if functions actually changed to avoid resetting aggregateAttribute
-			const currentFunctions = queryData.functions || [];
-			const functionsChanged = !isEqual(currentFunctions, updatedFunctions);
-
-			if (functionsChanged) {
-				const updatedQueryData = {
-					...queryData,
-					functions: updatedFunctions,
-				};
-				handleSetQueryData(index, updatedQueryData);
-			}
+			queryData.functions = updatedFunctions;
+			handleSetQueryData(index, queryData);
 		}
 	};
 

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

@@ -30,7 +30,6 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
@@ -46,6 +45,7 @@ import { getLocalStorageGraphVisibilityState, handleGraphClick } from './utils';
 function WidgetGraphComponent({
 	widget,
 	queryResponse,
+	errorMessage,
 	version,
 	threshold,
 	headerMenuList,
@@ -184,19 +184,9 @@ function WidgetGraphComponent({
 					notifications.success({
 						message: 'Panel cloned successfully, redirecting to new copy.',
 					});
-
-					const clonedWidget = updatedDashboard.data?.data?.widgets?.find(
-						(w) => w.id === uuid,
-					) as Widgets;
-
 					const queryParams = {
-						[QueryParams.graphType]: clonedWidget?.panelTypes,
-						[QueryParams.widgetId]: uuid,
-						...(clonedWidget?.query && {
-							[QueryParams.compositeQuery]: encodeURIComponent(
-								JSON.stringify(clonedWidget.query),
-							),
-						}),
+						graphType: widget?.panelTypes,
+						widgetId: uuid,
 					};
 					safeNavigate(`${pathname}/new?${createQueryParams(queryParams)}`);
 				},
@@ -376,6 +366,7 @@ function WidgetGraphComponent({
 					onDelete={handleOnDelete}
 					onClone={onCloneHandler}
 					queryResponse={queryResponse}
+					errorMessage={errorMessage}
 					threshold={threshold}
 					headerMenuList={headerMenuList}
 					isWarning={isWarning}

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

@@ -13,6 +13,7 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -61,12 +62,14 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
+		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -117,7 +120,11 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const queryEnabledCondition =
+		isVisible &&
+		!isEmptyWidget &&
+		isQueryEnabled &&
+		isEmpty(variablesToGetUpdated);
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -156,24 +163,22 @@ function GridCardGraph({
 		};
 	});
 
-	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
-	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
-	// useEffect(() => {
-	// 	if (variablesToGetUpdated.length > 0) {
-	// 		queryClient.cancelQueries([
-	// 			maxTime,
-	// 			minTime,
-	// 			globalSelectedInterval,
-	// 			variables,
-	// 			widget?.query,
-	// 			widget?.panelTypes,
-	// 			widget.timePreferance,
-	// 			widget.fillSpans,
-	// 			requestData,
-	// 		]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, [variablesToGetUpdated]);
+	useEffect(() => {
+		if (variablesToGetUpdated.length > 0) {
+			queryClient.cancelQueries([
+				maxTime,
+				minTime,
+				globalSelectedInterval,
+				variables,
+				widget?.query,
+				widget?.panelTypes,
+				widget.timePreferance,
+				widget.fillSpans,
+				requestData,
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -219,15 +224,6 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce(
-							(acc, [id, variable]) => ({
-								...acc,
-								[id]: variable.selectedValue,
-							}),
-							{},
-					  )
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
@@ -271,6 +267,7 @@ function GridCardGraph({
 				getGraphData?.(data?.payload?.data);
 				setDashboardQueryRangeCalled(true);
 			},
+			showErrorModal: false,
 		},
 	);
 
@@ -305,7 +302,7 @@ function GridCardGraph({
 					widget={widget}
 					queryResponse={queryResponse}
 					errorMessage={errorMessage}
-					isWarning={!isEmpty(queryResponse.data?.warning)}
+					isWarning={false}
 					version={version}
 					threshold={threshold}
 					headerMenuList={menuList}

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

@@ -235,7 +235,6 @@ export const handleGraphClick = async ({
 						? customTracesTimeRange?.end
 						: xValue + (stepInterval ?? 60),
 					shouldResolveQuery: true,
-					widgetQuery: widget?.query,
 				}),
 		}));
 

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

@@ -10,13 +10,10 @@ import {
 	InfoCircleOutlined,
 	MoreOutlined,
 	SearchOutlined,
+	WarningOutlined,
 } from '@ant-design/icons';
-import { Color } from '@signozhq/design-tokens';
 import { Dropdown, Input, MenuProps, Tooltip, Typography } from 'antd';
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
 import Spinner from 'components/Spinner';
-import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import useGetResolvedText from 'hooks/dashboard/useGetResolvedText';
@@ -31,12 +28,11 @@ import { unparse } from 'papaparse';
 import { useAppContext } from 'providers/App/App';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { SuccessResponse, Warning } from 'types/api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import APIError from 'types/api/error';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
-import { errorTooltipPosition } from './config';
+import { errorTooltipPosition, WARNING_MESSAGE } from './config';
 import { MENUITEM_KEYS_VS_LABELS, MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 import { generateMenuList, isTWidgetOptions } from './utils';
@@ -49,11 +45,9 @@ interface IWidgetHeaderProps {
 	onClone?: VoidFunction;
 	parentHover: boolean;
 	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown> & {
-			warning?: Warning;
-		},
-		Error
+		SuccessResponse<MetricRangePayloadProps> | ErrorResponse
 	>;
+	errorMessage: string | undefined;
 	threshold?: ReactNode;
 	headerMenuList?: MenuItemKeys[];
 	isWarning: boolean;
@@ -70,6 +64,7 @@ function WidgetHeader({
 	onClone,
 	parentHover,
 	queryResponse,
+	errorMessage,
 	threshold,
 	headerMenuList,
 	isWarning,
@@ -217,8 +212,12 @@ function WidgetHeader({
 	});
 
 	const renderErrorMessage = useMemo(
-		() => <ErrorContent error={queryResponse.error as APIError} />,
-		[queryResponse.error],
+		() =>
+			errorMessage
+				?.split('\n')
+				// eslint-disable-next-line react/no-array-index-key
+				.map((item, i) => <p key={i}>{item}</p>),
+		[errorMessage],
 	);
 
 	if (widget.id === PANEL_TYPES.EMPTY_WIDGET) {
@@ -279,23 +278,23 @@ function WidgetHeader({
 							<Spinner style={{ paddingRight: '0.25rem' }} />
 						)}
 						{queryResponse.isError && (
-							<ErrorPopover
-								content={renderErrorMessage}
+							<Tooltip
+								title={renderErrorMessage}
 								placement={errorTooltipPosition}
-								overlayStyle={{ padding: 0, maxWidth: '600px' }}
-								overlayInnerStyle={{ padding: 0 }}
-								autoAdjustOverflow
+								className="widget-api-actions"
 							>
-								<CircleX
-									size={16}
-									style={{ cursor: 'pointer' }}
-									color={Color.BG_CHERRY_500}
-								/>
-							</ErrorPopover>
+								<CircleX size={20} />
+							</Tooltip>
 						)}
 
-						{isWarning && queryResponse.data?.warning && (
-							<WarningPopover warningData={queryResponse.data?.warning as Warning} />
+						{isWarning && (
+							<Tooltip
+								title={WARNING_MESSAGE}
+								placement={errorTooltipPosition}
+								className="widget-api-actions"
+							>
+								<WarningOutlined />
+							</Tooltip>
 						)}
 						{globalSearchAvailable && (
 							<SearchOutlined