test(charts): add Pie chart + usePieInteractions tests

Cover the shared Pie chart and its helpers/hook:
- utils: scaled font size, arc geometry, colour lighten/fill dimming
- usePieInteractions: marker toggle, label isolate/reset, hover focus,
  hidden-slice guard, localStorage persistence + rehydration
- PieArc: leader-label threshold, label truncation, enter/leave/click
- PieCenterLabel: numeric/unit split
- Pie: no-data state, arc-per-slice rendering, legend, layout per position,
  hide-on-marker-click

Adds a global ResizeObserver polyfill to jest.setup.ts (alongside the existing
IntersectionObserver one) since visx's useTooltipInPortal requires it.

.github/CODEOWNERS

@@ -169,3 +169,22 @@ go.mod @therealpandey
 ## Dashboard V2
 /frontend/src/pages/DashboardPageV2/ @SigNoz/pulse-frontend
 /frontend/src/pages/DashboardsListPageV2/ @SigNoz/pulse-frontend
+
+## Infrastructure Monitoring
+/frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
+
+## Alerts
+/frontend/src/pages/AlertList/ @SigNoz/pulse-frontend
+/frontend/src/pages/AlertDetails/ @SigNoz/pulse-frontend
+/frontend/src/pages/CreateAlert/ @SigNoz/pulse-frontend
+/frontend/src/pages/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/container/AlertHistory/ @SigNoz/pulse-frontend
+/frontend/src/container/CreateAlertRule/ @SigNoz/pulse-frontend
+/frontend/src/container/CreateAlertV2/ @SigNoz/pulse-frontend
+/frontend/src/container/EditAlertV2/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertRules/ @SigNoz/pulse-frontend
+/frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
+/frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
+/frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend

.github/workflows/integrationci.yaml

@@ -52,6 +52,7 @@ jobs:
           - rootuser
           - serviceaccount
           - querier_json_body
+          - querier_skip_resource_fingerprint
           - ttl
         sqlstore-provider:
           - postgres

conf/example.yaml

@@ -64,16 +64,16 @@ web:
   settings:
     posthog:
       # Whether to enable PostHog in web.
-      enabled: true
+      enabled: false
     appcues:
       # Whether to enable Appcues in web.
-      enabled: true
+      enabled: false
     sentry:
       # Whether to enable Sentry in web.
-      enabled: true
+      enabled: false
     pylon:
       # Whether to enable Pylon in web.
-      enabled: true
+      enabled: false
 
 ##################### Cache #####################
 cache:
@@ -432,7 +432,7 @@ cloudintegration:
     version: v0.0.8
 
 ##################### Trace Detail #####################
-tracedetail:
+traces:
   waterfall:
     # Number of spans returned per request when the trace is too large to show all at once.
     span_page_size: 500

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.1
+    image: signoz/signoz:v0.127.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port
@@ -213,7 +213,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -241,7 +241,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.126.1
+    image: signoz/signoz:v0.127.0
     ports:
       - "8080:8080" # signoz port
     volumes:
@@ -139,7 +139,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     entrypoint:
       - /bin/sh
     command:
@@ -167,7 +167,7 @@ services:
       replicas: 3
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.144.4
+    image: signoz/signoz-otel-collector:v0.144.5
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -204,7 +204,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -229,7 +229,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.126.1}
+    image: signoz/signoz:${VERSION:-v0.127.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port
@@ -132,7 +132,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-otel-collector
     entrypoint:
       - /bin/sh
@@ -157,7 +157,7 @@ services:
       - "4318:4318" # OTLP HTTP receiver
   signoz-telemetrystore-migrator:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
     container_name: signoz-telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

docs/api/openapi.yml

@@ -6525,6 +6525,15 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         aggregations:
@@ -6563,6 +6572,15 @@ components:
           nullable: true
           type: array
       type: object
+    SpantypesOtelSpanRef:
+      properties:
+        refType:
+          type: string
+        spanId:
+          type: string
+        traceId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -6590,6 +6608,15 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesPostableWaterfall:
       properties:
         aggregations:
@@ -6614,6 +6641,9 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      required:
+      - field
+      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6627,6 +6657,10 @@ components:
             type: integer
           nullable: true
           type: object
+      required:
+      - field
+      - aggregation
+      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -6810,6 +6844,10 @@ components:
           type: string
         parent_span_id:
           type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
         resource:
           additionalProperties:
             type: string
@@ -6835,6 +6873,8 @@ components:
           type: string
         trace_state:
           type: string
+      required:
+      - references
       type: object
     TagtypesPostableTag:
       properties:
@@ -12265,6 +12305,75 @@ paths:
       summary: Test notification channel (deprecated)
       tags:
       - channels
+  /api/v1/traces/{traceID}/aggregations:
+    post:
+      deprecated: false
+      description: Computes span aggregations grouped by requested field.
+      operationId: GetTraceAggregations
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableTraceAggregations'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceAggregations'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get aggregations for a trace
+      tags:
+      - tracedetail
   /api/v1/user:
     get:
       deprecated: false

frontend/__mocks__/useSafeNavigate.ts

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

frontend/jest.config.ts

@@ -1,6 +1,8 @@
 import type { Config } from '@jest/types';
 
-const USE_SAFE_NAVIGATE_MOCK_PATH = '<rootDir>/__mocks__/useSafeNavigate.ts';
+const USE_SAFE_NAVIGATE_MOCK_PATH =
+	'<rootDir>/src/__tests__/safeNavigateMock.ts';
+const LOG_EVENT_MOCK_PATH = '<rootDir>/src/__tests__/logEventMock.ts';
 
 const config: Config.InitialOptions = {
 	silent: true,
@@ -22,6 +24,8 @@ const config: Config.InitialOptions = {
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^api/common/logEvent$': LOG_EVENT_MOCK_PATH,
+		'^src/api/common/logEvent$': LOG_EVENT_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',

frontend/jest.setup.ts

@@ -41,6 +41,15 @@ if (typeof window.IntersectionObserver === 'undefined') {
 	(window as any).IntersectionObserver = IntersectionObserverMock;
 }
 
+if (typeof window.ResizeObserver === 'undefined') {
+	class ResizeObserverMock {
+		observe(): void {}
+		unobserve(): void {}
+		disconnect(): void {}
+	}
+	(window as any).ResizeObserver = ResizeObserverMock;
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/src/__tests__/logEventMock.ts

@@ -0,0 +1,11 @@
+// Shared mock for `api/common/logEvent`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `api/common/logEvent` in test code resolves to this file.
+// Tests can import `logEventMock` to assert analytics calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+export const logEventMock: jest.MockedFunction<
+	(eventName: string, attributes?: Record<string, unknown>) => void
+> = jest.fn();
+
+export default logEventMock;

frontend/src/__tests__/safeNavigateMock.ts

@@ -0,0 +1,29 @@
+// Shared mock for `hooks/useSafeNavigate`.
+// Wired into jest.config.ts moduleNameMapper, so any import of
+// `hooks/useSafeNavigate` in test code resolves to this file.
+// Tests can import `safeNavigateMock` to assert navigation calls — Jest's
+// `clearMocks: true` resets call history between tests.
+
+interface SafeNavigateOptions {
+	replace?: boolean;
+	state?: unknown;
+	newTab?: boolean;
+}
+
+interface SafeNavigateTo {
+	pathname?: string;
+	search?: string;
+	hash?: string;
+}
+
+type SafeNavigateToType = string | SafeNavigateTo;
+
+export const safeNavigateMock: jest.MockedFunction<
+	(to: SafeNavigateToType, options?: SafeNavigateOptions) => void
+> = jest.fn();
+
+export const useSafeNavigate = (): {
+	safeNavigate: typeof safeNavigateMock;
+} => ({
+	safeNavigate: safeNavigateMock,
+});

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

@@ -7753,12 +7753,34 @@ export type SpantypesSpanAggregationResultDTOValue =
 	SpantypesSpanAggregationResultDTOValueAnyOf | null;
 
 export interface SpantypesSpanAggregationResultDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
 	/**
 	 * @type object,null
 	 */
-	value?: SpantypesSpanAggregationResultDTOValue;
+	value: SpantypesSpanAggregationResultDTOValue;
+}
+
+export interface SpantypesGettableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationResultDTO[];
+}
+
+export interface SpantypesOtelSpanRefDTO {
+	/**
+	 * @type string
+	 */
+	refType?: string;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type string
+	 */
+	traceId?: string;
 }
 
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
@@ -7855,6 +7877,10 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	parent_span_id?: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -8000,8 +8026,15 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 }
 
 export interface SpantypesSpanAggregationDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
+}
+
+export interface SpantypesPostableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationDTO[];
 }
 
 export interface SpantypesPostableWaterfallDTO {
@@ -9344,6 +9377,17 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type GetTraceAggregationsPathParameters = {
+	traceID: string;
+};
+export type GetTraceAggregations200 = {
+	data: SpantypesGettableTraceAggregationsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

frontend/src/api/generated/services/tracedetail/index.ts

@@ -12,17 +12,120 @@ import type {
 } from 'react-query';
 
 import type {
+	GetTraceAggregations200,
+	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+/**
+ * Computes span aggregations grouped by requested field.
+ * @summary Get aggregations for a trace
+ */
+export const getTraceAggregations = (
+	{ traceID }: GetTraceAggregationsPathParameters,
+	spantypesPostableTraceAggregationsDTO?: BodyType<SpantypesPostableTraceAggregationsDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceAggregations200>({
+		url: `/api/v1/traces/${traceID}/aggregations`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableTraceAggregationsDTO,
+		signal,
+	});
+};
+
+export const getGetTraceAggregationsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getTraceAggregations'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getTraceAggregations(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetTraceAggregationsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceAggregations>>
+>;
+export type GetTraceAggregationsMutationBody =
+	| BodyType<SpantypesPostableTraceAggregationsDTO>
+	| undefined;
+export type GetTraceAggregationsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get aggregations for a trace
+ */
+export const useGetTraceAggregations = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetTraceAggregationsMutationOptions(options));
+};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/api/index.ts

@@ -120,7 +120,8 @@ export const interceptorRejected = async (
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				) &&
-				response.config.url !== '/authz/check'
+				response.config.url !== '/authz/check' &&
+				response.config.url !== '/api/v2/reset_password_tokens/verify'
 			) {
 				try {
 					const accessToken = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN);

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

@@ -349,7 +349,7 @@ function convertV5DataByType(
  */
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function convertV5ResponseToLegacy(
-	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	v5Response: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5>,
 	legendMap: Record<string, string>,
 	formatForWeb?: boolean,
 ): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
@@ -357,7 +357,7 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		(params as QueryRangeRequestV5)?.compositeQuery?.queries
+		params?.compositeQuery?.queries
 			?.filter((query) => query.type === 'builder_query')
 			.reduce(
 				(acc, query) => {

frontend/src/assets/Icons/solid-x-circle.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,8 +359,7 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							height={12}
-							width={12}
+							size={14}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -27,13 +27,15 @@ function SortableField({
 	field,
 	onRemove,
 	allowDrag,
+	isRequired,
 }: {
 	field: TelemetryFieldKey;
 	onRemove: (field: TelemetryFieldKey) => void;
 	allowDrag: boolean;
+	isRequired: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: field.name });
+		useSortable({ id: field.key as string });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -53,15 +55,17 @@ function SortableField({
 				{allowDrag && <GripVertical size={14} />}
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
-			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
-				variant="outlined"
-				color="destructive"
-				size="sm"
-				onClick={(): void => onRemove(field)}
-			>
-				Remove
-			</Button>
+			{!isRequired && (
+				<Button
+					className={cx(styles.removeBtn, 'periscope-btn')}
+					variant="outlined"
+					color="destructive"
+					size="sm"
+					onClick={(): void => onRemove(field)}
+				>
+					Remove
+				</Button>
+			)}
 		</div>
 	);
 }
@@ -71,6 +75,7 @@ interface AddedFieldsProps {
 	fields: TelemetryFieldKey[];
 	onFieldsChange: (fields: TelemetryFieldKey[]) => void;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 }
 
 function AddedFields({
@@ -78,14 +83,18 @@ function AddedFields({
 	fields,
 	onFieldsChange,
 	maxFields,
+	requiredFields = [],
 }: AddedFieldsProps): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
+	// Contract: caller (FieldsSelector) normalizes `fields` so every entry has
+	// `.key` populated. AddedFields reads it directly.
+
 	const handleDragEnd = (event: DragEndEvent): void => {
 		const { active, over } = event;
 		if (over && active.id !== over.id) {
-			const oldIndex = fields.findIndex((f) => f.name === active.id);
-			const newIndex = fields.findIndex((f) => f.name === over.id);
+			const oldIndex = fields.findIndex((f) => f.key === active.id);
+			const newIndex = fields.findIndex((f) => f.key === over.id);
 			onFieldsChange(arrayMove(fields, oldIndex, newIndex));
 		}
 	};
@@ -99,7 +108,7 @@ function AddedFields({
 	);
 
 	const handleRemove = (field: TelemetryFieldKey): void => {
-		onFieldsChange(fields.filter((f) => f.name !== field.name));
+		onFieldsChange(fields.filter((f) => f.key !== field.key));
 	};
 
 	const allowDrag = inputValue.length === 0;
@@ -125,16 +134,17 @@ function AddedFields({
 							<div className={styles.noValues}>No values found</div>
 						) : (
 							<SortableContext
-								items={fields.map((f) => f.name)}
+								items={fields.map((f) => f.key as string)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>
 								{filteredFields.map((field) => (
 									<SortableField
-										key={field.name}
+										key={field.key}
 										field={field}
 										onRemove={handleRemove}
 										allowDrag={allowDrag}
+										isRequired={requiredFields.includes(field.key as string)}
 									/>
 								))}
 							</SortableContext>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -76,11 +76,8 @@
 	min-height: 0;
 	overflow: hidden;
 
-	// Ant Skeleton.Input rendered inside the loading state — override its
-	// hard-coded width.
 	:global(.ant-skeleton-input) {
-		width: 300px;
-		margin: 8px 12px;
+		width: 50% !important;
 	}
 }
 
@@ -95,7 +92,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 6px 12px;
+	height: 36px;
+	padding: 0 12px;
 	border-radius: 4px;
 	user-select: none;
 	font-size: 13px;
@@ -132,7 +130,7 @@
 }
 
 .isDragDisabled {
-	padding: 6px 12px;
+	cursor: default;
 }
 
 .otherFieldItem {

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -5,6 +5,7 @@ import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { FloatingPanel } from 'periscope/components/FloatingPanel';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -26,33 +27,36 @@ interface FieldsSelectorProps {
 	onClose: () => void;
 	signal: DataSource;
 	maxFields?: number;
+	requiredFields?: readonly string[];
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
 }
 
-function FieldsSelector({
-	isOpen,
+type FieldsSelectorContentProps = Omit<FieldsSelectorProps, 'isOpen'>;
+
+// Inner component: holds all hooks + UI. Gets mounted/unmounted via the
+// outer gate so opening always seeds a fresh draft from `fields`.
+// Assumes `fields` arrives normalized (key populated) — see outer gate.
+function FieldsSelectorContent({
 	title,
 	fields,
 	onFieldsChange,
 	onClose,
 	signal,
 	maxFields,
+	requiredFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
-}: FieldsSelectorProps): JSX.Element | null {
-	if (!isOpen) {
-		return null;
-	}
-
+}: FieldsSelectorContentProps): JSX.Element {
 	const resolvedHeight =
 		height ?? window.innerHeight - DEFAULT_PANEL_HEIGHT_OFFSET;
 	const resolvedPosition = defaultPosition ?? {
 		x: window.innerWidth - width - DEFAULT_PANEL_RIGHT_INSET,
 		y: DEFAULT_PANEL_TOP_INSET,
 	};
+
 	const [draftFields, setDraftFields] = useState<TelemetryFieldKey[]>(fields);
 	const [inputValue, setInputValue] = useState('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState('');
@@ -72,15 +76,17 @@ function FieldsSelector({
 
 	const handleAdd = useCallback(
 		(field: TelemetryFieldKey): void => {
-			if (maxFields !== undefined && draftFields.length >= maxFields) {
-				return;
-			}
-			if (draftFields.some((f) => f.name === field.name)) {
-				return;
-			}
-			setDraftFields((prev) => [...prev, field]);
+			setDraftFields((prev) => {
+				if (maxFields !== undefined && prev.length >= maxFields) {
+					return prev;
+				}
+				if (prev.some((f) => f.key === field.key)) {
+					return prev;
+				}
+				return [...prev, field];
+			});
 		},
-		[draftFields, maxFields],
+		[maxFields],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -99,7 +105,7 @@ function FieldsSelector({
 		() =>
 			!(
 				draftFields.length === fields.length &&
-				draftFields.every((f, i) => f.name === fields[i]?.name)
+				draftFields.every((f, i) => f.key === fields[i]?.key)
 			),
 		[draftFields, fields],
 	);
@@ -138,6 +144,7 @@ function FieldsSelector({
 					fields={draftFields}
 					onFieldsChange={setDraftFields}
 					maxFields={maxFields}
+					requiredFields={requiredFields}
 				/>
 
 				<OtherFields
@@ -173,4 +180,27 @@ function FieldsSelector({
 	);
 }
 
+// Outer gate: normalizes `fields` once (populates `key` so downstream code
+// can read it directly) and decides whether the inner component renders.
+// When isOpen flips false→true, the inner remounts → draft state seeds fresh.
+function FieldsSelector({
+	isOpen,
+	fields,
+	...rest
+}: FieldsSelectorProps): JSX.Element | null {
+	const normalizedFields = useMemo<TelemetryFieldKey[]>(
+		() =>
+			fields.map((f) => ({
+				...f,
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
+			})),
+		[fields],
+	);
+
+	if (!isOpen) {
+		return null;
+	}
+	return <FieldsSelectorContent {...rest} fields={normalizedFields} />;
+}
+
 export default FieldsSelector;

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -4,6 +4,7 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import {
 	FieldContext,
@@ -47,15 +48,22 @@ function OtherFields({
 
 	const otherFields: TelemetryFieldKey[] = useMemo(() => {
 		const suggestions = Object.values(data?.data.data.keys || {}).flat();
-		const addedNames = new Set(addedFields.map((f) => f.name));
-		return suggestions
-			.filter((attr) => !addedNames.has(attr.name))
-			.map((attr) => ({
+		// Normalize: synthesize `key` once so downstream reads can trust it.
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
 				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
 				signal: attr.signal as SignalType,
 				fieldContext: attr.fieldContext as FieldContext,
 				fieldDataType: attr.fieldDataType as FieldDataType,
-			}));
+			}),
+		);
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
+			(attr) => !addedIds.has(attr.key as string),
+		);
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -64,8 +72,13 @@ function OtherFields({
 				<div className={styles.sectionHeader}>OTHER FIELDS</div>
 				<div className={styles.otherList}>
 					{Array.from({ length: 5 }).map((_, i) => (
-						// eslint-disable-next-line react/no-array-index-key
-						<Skeleton.Input active size="small" key={i} />
+						<div
+							// eslint-disable-next-line react/no-array-index-key
+							key={i}
+							className={cx(styles.fieldItem, styles.otherFieldItem)}
+						>
+							<Skeleton.Input active size="small" block />
+						</div>
 					))}
 				</div>
 			</div>
@@ -83,7 +96,7 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.name}
+									key={attr.key}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
 									<span className={styles.fieldKey}>{attr.name}</span>

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -0,0 +1,111 @@
+import { render, screen } from 'tests/test-utils';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+
+import AddedFields from '../AddedFields';
+
+// AddedFields assumes the caller has populated `key` (the parent
+// FieldsSelector does this via its normalization useMemo). Tests pre-populate
+// it directly.
+const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
+	name,
+	signal: 'logs',
+	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
+	fieldDataType: 'string',
+	key: `${fieldContext}.${name}`,
+});
+
+describe('AddedFields — requiredFields', () => {
+	it('renders a Remove button for every field when no requiredFields are passed', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields inputValue="" fields={fields} onFieldsChange={jest.fn()} />,
+		);
+
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(3);
+	});
+
+	it('hides the Remove button for fields whose composite key is in requiredFields', () => {
+		const fields = [makeField('a'), makeField('b'), makeField('c')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.a', 'log.c']}
+			/>,
+		);
+
+		// Only 'b' is removable.
+		const removeButtons = screen.getAllByRole('button', { name: /remove/i });
+		expect(removeButtons).toHaveLength(1);
+	});
+
+	it('still renders the field name for required fields', () => {
+		const fields = [makeField('a'), makeField('b')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.a']}
+			/>,
+		);
+
+		expect(screen.getByText('a')).toBeInTheDocument();
+		expect(screen.getByText('b')).toBeInTheDocument();
+	});
+
+	it('locks ONLY the canonical variant — a same-name field from another context stays removable', () => {
+		// Two `body` fields with different contexts. requiredFields holds the
+		// canonical composite key only, so the attribute variant is deletable.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// One Remove button: the attribute variant. log variant is locked.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+
+	it('does not lock anything when a bare name is passed (composite key required)', () => {
+		// Bare `body` no longer matches — matching is composite-key only now.
+		const fields = [makeField('body', 'log'), makeField('body', 'attribute')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['body']}
+			/>,
+		);
+
+		// Neither variant locked → both removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(2);
+	});
+
+	it('treats requiredFields as exact composite-key match (substring does not lock)', () => {
+		const fields = [makeField('body'), makeField('body_extra')];
+
+		render(
+			<AddedFields
+				inputValue=""
+				fields={fields}
+				onFieldsChange={jest.fn()}
+				requiredFields={['log.body']}
+			/>,
+		);
+
+		// 'log.body' locked, 'log.body_extra' removable.
+		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
+	});
+});

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -4,6 +4,7 @@ import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { AIAssistantEvents } from 'container/AIAssistant/events';
@@ -109,7 +110,7 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title="Noz">
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 						<Button
 							variant="solid"
 							color="secondary"

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -3,17 +3,12 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import FeedbackModal from '../FeedbackModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(() => Promise.resolve()),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -35,7 +30,6 @@ jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 
-const mockLogEvent = logEvent as jest.MockedFunction<typeof logEvent>;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 const mockHandleContactSupport = handleContactSupport as jest.Mock;
@@ -50,6 +44,7 @@ const mockLocation = {
 describe('FeedbackModal', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
+		logEventMock.mockReturnValue(Promise.resolve() as never);
 		mockUseLocation.mockReturnValue(mockLocation);
 		mockUseGetTenantLicense.mockReturnValue({
 			isCloudUser: false,
@@ -116,7 +111,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'feedback',
 			page: mockLocation.pathname,
@@ -149,7 +144,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'reportBug',
 			page: mockLocation.pathname,
@@ -182,7 +177,7 @@ describe('FeedbackModal', () => {
 		await user.type(textarea, testFeedback);
 		await user.click(submitButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Submitted', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Submitted', {
 			data: testFeedback,
 			type: 'featureRequest',
 			page: mockLocation.pathname,

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

@@ -2,16 +2,11 @@
 import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 
 import HeaderRightSection from '../HeaderRightSection';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -50,7 +45,6 @@ jest.mock('hooks/useIsAIAssistantEnabled', () => ({
 	useIsAIAssistantEnabled: (): boolean => false,
 }));
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;
 
@@ -120,7 +114,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(feedbackButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Feedback: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Feedback: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('feedback-modal')).toBeInTheDocument();
@@ -133,7 +127,7 @@ describe('HeaderRightSection', () => {
 		const shareButton = screen.getByRole('button', { name: /share/i });
 		await user.click(shareButton);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Clicked', {
 			page: mockLocation.pathname,
 		});
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
@@ -150,7 +144,7 @@ describe('HeaderRightSection', () => {
 
 		await user.click(announcementsButton!);
 
-		expect(mockLogEvent).toHaveBeenCalledWith('Announcements: Clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Announcements: Clicked', {
 			page: mockLocation.pathname,
 		});
 	});

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -5,18 +5,13 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 
 import ShareURLModal from '../ShareURLModal';
 
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
@@ -53,7 +48,6 @@ Object.defineProperty(window, 'location', {
 	writable: true,
 });
 
-const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseUrlQuery = useUrlQuery as jest.Mock;
 const mockUseSelector = useSelector as jest.Mock;
@@ -125,7 +119,7 @@ describe('ShareURLModal', () => {
 		await user.click(copyButton);
 
 		expect(mockHandleCopyToClipboard).toHaveBeenCalled();
-		expect(mockLogEvent).toHaveBeenCalledWith('Share: Copy link clicked', {
+		expect(logEventMock).toHaveBeenCalledWith('Share: Copy link clicked', {
 			page: TEST_PATH,
 			URL: expect.any(String),
 		});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -0,0 +1,145 @@
+import { renderHook } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
+import { IField } from 'types/api/logs/fields';
+
+import { useLogsTableColumns } from '../useLogsTableColumns';
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { formatTimezoneAdjustedTimestamp: jest.Mock } => ({
+		formatTimezoneAdjustedTimestamp: jest.fn(() => 'TS'),
+	}),
+}));
+
+const field = (name: string, type = ''): IField => ({
+	name,
+	type,
+	dataType: 'string',
+});
+
+describe('useLogsTableColumns — selectColumns-order respected', () => {
+	it('prepends stateIndicator and renders user fields in array order', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('c'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'c',
+			'a',
+			'b',
+		]);
+	});
+
+	it('slots body and timestamp at their position in the fields array', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('service.name'),
+					field('body', 'log'),
+					field('request.id'),
+					field('timestamp', 'log'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		// body/timestamp appear where the caller placed them, keyed by their
+		// composite IDs ('log.*'); contextless user fields collapse to bare name.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'service.name',
+			'log.body',
+			'request.id',
+			'log.timestamp',
+		]);
+	});
+
+	it('renders a same-name field from another context as a DISTINCT column (no collision)', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('body', 'log'), field('body', 'attribute')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		// Attribute variant is its own column, not a duplicate 'log.body'.
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'log.body',
+			'attribute.body',
+		]);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
+	});
+
+	it('applies the same distinct-column treatment to timestamp variants', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('timestamp', 'log'), field('timestamp', 'attribute')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'log.timestamp',
+			'attribute.timestamp',
+		]);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
+	});
+
+	it('skips the synthetic "id" field name', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [field('id'), field('a'), field('b')],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual([
+			'state-indicator',
+			'a',
+			'b',
+		]);
+	});
+
+	it('uses the special body/timestamp coldefs (canBeHidden=false), not the generic user field def', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [
+					field('body', 'log'),
+					field('timestamp', 'log'),
+					field('user_field'),
+				],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		const byId = new Map(result.current.map((c) => [c.id, c]));
+		// body + timestamp are locked from the table-X removal pathway.
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		// User-added fields stay removable. User field has type='' so composite
+		// collapses to bare name.
+		expect(byId.get('user_field')?.enableRemove).toBe(true);
+	});
+
+	it('renders only the stateIndicator when fields is empty', () => {
+		const { result } = renderHook(() =>
+			useLogsTableColumns({
+				fields: [],
+				fontSize: FontSize.SMALL,
+			}),
+		);
+
+		expect(result.current.map((c) => c.id)).toStrictEqual(['state-indicator']);
+	});
+});

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

@@ -7,6 +7,7 @@ import {
 	getSanitizedLogBody,
 } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { IField } from 'types/api/logs/fields';
@@ -18,13 +19,11 @@ import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 type UseLogsTableColumnsProps = {
 	fields: IField[];
 	fontSize: FontSize;
-	appendTo?: 'center' | 'end';
 };
 
 export function useLogsTableColumns({
 	fields,
 	fontSize,
-	appendTo = 'center',
 }: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
@@ -47,71 +46,74 @@ export function useLogsTableColumns({
 			),
 		};
 
-		const fieldColumns: TableColumnDef<ILog>[] = fields
-			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
-			.map(
-				(f): TableColumnDef<ILog> => ({
-					id: f.name,
-					header: f.name,
-					accessorFn: (log): unknown => FlatLogData(log)[f.name],
-					enableRemove: true,
-					width: { min: 192 },
-					cell: ({ value }): ReactElement => (
-						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
-					),
-				}),
-			);
+		const timestampCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('timestamp', 'log'),
+			header: 'Timestamp',
+			accessorFn: (log): unknown => log.timestamp,
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: 170, min: 170 },
+			cell: ({ value }): ReactElement => {
+				const ts = value as string | number;
+				const formatted =
+					typeof ts === 'string'
+						? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+						: formatTimezoneAdjustedTimestamp(
+								ts / 1e6,
+								DATE_TIME_FORMATS.ISO_DATETIME_MS,
+							);
+				return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+			},
+		};
 
-		const timestampCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'timestamp',
-		)
-			? {
-					id: 'timestamp',
-					header: 'Timestamp',
-					accessorFn: (log): unknown => log.timestamp,
-					width: { default: 170, min: 170 },
-					cell: ({ value }): ReactElement => {
-						const ts = value as string | number;
-						const formatted =
-							typeof ts === 'string'
-								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-								: formatTimezoneAdjustedTimestamp(
-										ts / 1e6,
-										DATE_TIME_FORMATS.ISO_DATETIME_MS,
-									);
-						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
-					},
+		const bodyCol: TableColumnDef<ILog> = {
+			id: buildCompositeKey('body', 'log'),
+			header: 'Body',
+			accessorFn: (log): string => getBodyDisplayString(log.body),
+			canBeHidden: false,
+			enableRemove: false,
+			width: { default: '100%', min: 300 },
+			cell: ({ value, isActive }): ReactElement => (
+				<TanStackTable.Text
+					dangerouslySetInnerHTML={{
+						__html: getSanitizedLogBody(value as string, {
+							shouldEscapeHtml: true,
+						}),
+					}}
+					data-active={isActive}
+				/>
+			),
+		};
+
+		const makeUserFieldCol = (f: IField): TableColumnDef<ILog> => ({
+			id: buildCompositeKey(f.name, f.type),
+			header: f.name,
+			accessorFn: (log): unknown => FlatLogData(log)[f.name],
+			enableRemove: true,
+			width: { min: 192 },
+			cell: ({ value }): ReactElement => (
+				<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+			),
+		});
+
+		// Match body/timestamp by composite key, not bare name — else a variant
+		// like `attribute.body` collapses onto `log.body`, duplicating the column.
+		const fieldCols = fields
+			.map((f): TableColumnDef<ILog> | null => {
+				if (f.name === 'id') {
+					return null;
 				}
-			: null;
-
-		const bodyCol: TableColumnDef<ILog> | null = fields.some(
-			(f) => f.name === 'body',
-		)
-			? {
-					id: 'body',
-					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
-					canBeHidden: false,
-					width: { default: '100%', min: 300 },
-					cell: ({ value, isActive }): ReactElement => (
-						<TanStackTable.Text
-							dangerouslySetInnerHTML={{
-								__html: getSanitizedLogBody(value as string, {
-									shouldEscapeHtml: true,
-								}),
-							}}
-							data-active={isActive}
-						/>
-					),
+				const compositeKey = buildCompositeKey(f.name, f.type);
+				if (compositeKey === timestampCol.id) {
+					return timestampCol;
 				}
-			: null;
+				if (compositeKey === bodyCol.id) {
+					return bodyCol;
+				}
+				return makeUserFieldCol(f);
+			})
+			.filter((c): c is TableColumnDef<ILog> => c !== null);
 
-		return [
-			stateIndicatorCol,
-			...(timestampCol ? [timestampCol] : []),
-			...(appendTo === 'center' ? fieldColumns : []),
-			...(bodyCol ? [bodyCol] : []),
-			...(appendTo === 'end' ? fieldColumns : []),
-		];
-	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+		return [stateIndicatorCol, ...fieldCols];
+	}, [fields, fontSize, formatTimezoneAdjustedTimestamp]);
 }

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -256,6 +256,34 @@
 				}
 			}
 
+			.edit-columns-container {
+				padding: 12px;
+
+				.edit-columns-btn {
+					display: flex;
+					width: 100%;
+					height: 20px;
+					padding: 4px 0px;
+					justify-content: space-between;
+					align-items: center;
+					border: none !important;
+
+					.edit-columns-text {
+						color: var(--l2-foreground);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						letter-spacing: 0.14px;
+					}
+				}
+
+				.edit-columns-btn:hover {
+					background-color: unset !important;
+				}
+			}
+
 			.add-new-column-container {
 				display: flex;
 				flex-direction: column;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,12 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { useCallback, useEffect, useState } from 'react';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	Check,
 	ChevronLeft,
@@ -14,7 +11,6 @@ import {
 	Minus,
 	Plus,
 	SlidersVertical,
-	X,
 } from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
@@ -23,14 +19,21 @@ interface LogsFormatOptionsMenuProps {
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
+	onOpenColumns?: () => void;
+}
+
+interface OptionsMenuContentProps extends LogsFormatOptionsMenuProps {
+	closePopover: () => void;
 }
 
 function OptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
-}: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn, fontSize } = config;
+	onOpenColumns,
+	closePopover,
+}: OptionsMenuContentProps): JSX.Element {
+	const { maxLines, format, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
@@ -40,13 +43,6 @@ function OptionsMenu({
 	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] =
 		useState<boolean>(false);
 
-	const [showAddNewColumnContainer, setShowAddNewColumnContainer] =
-		useState(false);
-
-	const [selectedValue, setSelectedValue] = useState<string | null>(null);
-	const listRef = useRef<HTMLDivElement>(null);
-	const initialMouseEnterRef = useRef<boolean>(false);
-
 	const onChange = useCallback(
 		(key: LogViewMode) => {
 			if (!format) {
@@ -61,7 +57,6 @@ function OptionsMenu({
 	const handleMenuItemClick = (key: LogViewMode): void => {
 		setSelectedItem(key);
 		onChange(key);
-		setShowAddNewColumnContainer(false);
 	};
 
 	const incrementMaxLinesPerRow = (): void => {
@@ -76,20 +71,6 @@ function OptionsMenu({
 		}
 	};
 
-	const handleSearchValueChange = useDebouncedFn((event): void => {
-		// @ts-expect-error
-		const value = event?.target?.value || '';
-
-		if (addColumn && addColumn?.onSearch) {
-			addColumn?.onSearch(value);
-		}
-	}, 300);
-
-	const handleToggleAddNewColumn = (): void => {
-		addColumn?.onSearch?.('');
-		setShowAddNewColumnContainer(!showAddNewColumnContainer);
-	};
-
 	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
 		if (
 			maxLinesPerRow &&
@@ -100,6 +81,11 @@ function OptionsMenu({
 		}
 	};
 
+	const handleEditColumns = (): void => {
+		onOpenColumns?.();
+		closePopover();
+	};
+
 	useEffect(() => {
 		if (maxLinesPerRow && config && config.maxLines?.onChange) {
 			config.maxLines.onChange(maxLinesPerRow);
@@ -112,110 +98,10 @@ function OptionsMenu({
 		}
 	}, [fontSizeValue]);
 
-	function handleColumnSelection(
-		currentIndex: number,
-		optionsData: DefaultOptionType[],
-	): void {
-		const currentItem = optionsData[currentIndex];
-		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect) {
-			addColumn?.onSelect(selectedValue, {
-				label: currentItem.label,
-				disabled: false,
-			});
-
-			// if the last element is selected then select the previous one
-			if (currentIndex === itemLength - 1) {
-				// there should be more than 1 element in the list
-				if (currentIndex - 1 >= 0) {
-					const prevValue = optionsData[currentIndex - 1]?.value || null;
-					setSelectedValue(prevValue as string | null);
-				} else {
-					// if there is only one element then just select and do nothing
-					setSelectedValue(null);
-				}
-			} else {
-				// selecting any random element from the list except the last one
-				const nextIndex = currentIndex + 1;
-
-				const nextValue = optionsData[nextIndex]?.value || null;
-
-				setSelectedValue(nextValue as string | null);
-			}
-		}
-	}
-
-	const handleKeyDown = (e: KeyboardEvent): void => {
-		if (!selectedValue) {
-			return;
-		}
-
-		const optionsData = addColumn?.options || [];
-
-		const currentIndex = optionsData.findIndex(
-			(item) => item?.value === selectedValue,
-		);
-
-		const itemLength = optionsData.length;
-
-		switch (e.key) {
-			case 'ArrowUp': {
-				const newValue = optionsData[Math.max(0, currentIndex - 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'ArrowDown': {
-				const newValue =
-					optionsData[Math.min(itemLength - 1, currentIndex + 1)]?.value;
-
-				setSelectedValue(newValue as string | null);
-				e.preventDefault();
-				break;
-			}
-			case 'Enter':
-				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData);
-				break;
-			default:
-				break;
-		}
-	};
-
-	useEffect(() => {
-		// Scroll the selected item into view
-		const listNode = listRef.current;
-		if (listNode && selectedValue) {
-			const optionsData = addColumn?.options || [];
-			const currentIndex = optionsData.findIndex(
-				(item) => item?.value === selectedValue,
-			);
-			const itemNode = listNode.children[currentIndex] as HTMLElement;
-			if (itemNode) {
-				itemNode.scrollIntoView({
-					behavior: 'smooth',
-					block: 'nearest',
-				});
-			}
-		}
-	}, [selectedValue]);
-
-	useEffect(() => {
-		window.addEventListener('keydown', handleKeyDown);
-		return (): void => {
-			window.removeEventListener('keydown', handleKeyDown);
-		};
-	}, [selectedValue]);
-
 	return (
 		<div
-			className={cx(
-				'nested-menu-container',
-				showAddNewColumnContainer ? 'active' : '',
-			)}
+			className="nested-menu-container"
 			onClick={(event): void => {
-				// this is to restrict click events to propogate to parent
 				event.stopPropagation();
 			}}
 		>
@@ -269,71 +155,7 @@ function OptionsMenu({
 						</Button>
 					</div>
 				</div>
-			) : null}
-
-			{showAddNewColumnContainer && (
-				<div className="add-new-column-container">
-					<div className="add-new-column-header">
-						<div className="title">
-							<div className="periscope-btn ghost" onClick={handleToggleAddNewColumn}>
-								<ChevronLeft
-									size={14}
-									className="back-icon"
-									onClick={handleToggleAddNewColumn}
-								/>
-							</div>
-							Add New Column
-						</div>
-
-						<Input
-							tabIndex={0}
-							type="text"
-							autoFocus
-							onFocus={addColumn?.onFocus}
-							onChange={handleSearchValueChange}
-							placeholder="Search..."
-						/>
-					</div>
-
-					<div className="add-new-column-content">
-						{addColumn?.isFetching && (
-							<div className="loading-container"> Loading ... </div>
-						)}
-
-						<div className="column-format-new-options" ref={listRef}>
-							{addColumn?.options?.map(({ label, value }, index) => (
-								<div
-									className={cx('column-name', value === selectedValue && 'selected')}
-									key={value}
-									onMouseEnter={(): void => {
-										if (!initialMouseEnterRef.current) {
-											setSelectedValue(value as string | null);
-										}
-
-										initialMouseEnterRef.current = true;
-									}}
-									onMouseMove={(): void => {
-										// this is added to handle the mouse move explicit event and not the re-rendered on mouse enter event
-										setSelectedValue(value as string | null);
-									}}
-									onClick={(eve): void => {
-										eve.stopPropagation();
-										handleColumnSelection(index, addColumn?.options || []);
-									}}
-								>
-									<div className="name">
-										<Tooltip placement="left" title={label}>
-											{label}
-										</Tooltip>
-									</div>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-			)}
-
-			{!isFontSizeOptionsOpen && !showAddNewColumnContainer && (
+			) : (
 				<div>
 					<div className="font-size-container">
 						<div className="title">Font Size</div>
@@ -373,72 +195,52 @@ function OptionsMenu({
 
 					{selectedItem && (
 						<>
-							<>
-								<div className="horizontal-line" />
-								<div className="max-lines-per-row">
-									<div className="title"> max lines per row </div>
-									<div className="raw-format max-lines-per-row-input">
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={decrementMaxLinesPerRow}
-										>
-											{' '}
-											<Minus size={12} />{' '}
-										</button>
-										<InputNumber
-											min={1}
-											max={10}
-											value={maxLinesPerRow}
-											onChange={handleLinesPerRowChange}
-										/>
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={incrementMaxLinesPerRow}
-										>
-											{' '}
-											<Plus size={12} />{' '}
-										</button>
-									</div>
+							<div className="horizontal-line" />
+							<div className="max-lines-per-row">
+								<div className="title"> max lines per row </div>
+								<div className="raw-format max-lines-per-row-input">
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={decrementMaxLinesPerRow}
+									>
+										{' '}
+										<Minus size={12} />{' '}
+									</button>
+									<InputNumber
+										min={1}
+										max={10}
+										value={maxLinesPerRow}
+										onChange={handleLinesPerRowChange}
+									/>
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={incrementMaxLinesPerRow}
+									>
+										{' '}
+										<Plus size={12} />{' '}
+									</button>
 								</div>
-							</>
+							</div>
+						</>
+					)}
 
-							<div className="selected-item-content-container active">
-								{!showAddNewColumnContainer && <div className="horizontal-line" />}
-
-								<div className="item-content">
-									{!showAddNewColumnContainer && (
-										<div className="title">
-											columns
-											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-										</div>
-									)}
-
-									<div className="column-format">
-										{addColumn?.value?.map(({ name }) => (
-											<div className="column-name" key={name}>
-												<div className="name">
-													<Tooltip placement="left" title={name}>
-														{name}
-													</Tooltip>
-												</div>
-												{addColumn?.value?.length > 1 && (
-													<X
-														className="delete-btn"
-														size={14}
-														onClick={(): void => addColumn.onRemove(name)}
-													/>
-												)}
-											</div>
-										))}
-										{addColumn && addColumn?.value?.length === 0 && (
-											<div className="column-name no-columns-selected">
-												No columns selected
-											</div>
-										)}
-									</div>
-								</div>
+					{selectedItem === 'table' && onOpenColumns && (
+						<>
+							<div className="horizontal-line" />
+							<div className="edit-columns-container">
+								<Button
+									className="edit-columns-btn"
+									type="text"
+									onClick={handleEditColumns}
+									data-testid="periscope-btn-edit-columns"
+								>
+									<Typography.Text className="edit-columns-text">
+										Edit columns
+									</Typography.Text>
+									<ChevronRight size={14} className="icon" />
+								</Button>
 							</div>
 						</>
 					)}
@@ -452,6 +254,7 @@ function LogsFormatOptionsMenu({
 	items,
 	selectedOptionFormat,
 	config,
+	onOpenColumns,
 }: LogsFormatOptionsMenuProps): JSX.Element {
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	return (
@@ -461,6 +264,8 @@ function LogsFormatOptionsMenu({
 					items={items}
 					selectedOptionFormat={selectedOptionFormat}
 					config={config}
+					onOpenColumns={onOpenColumns}
+					closePopover={(): void => setIsPopoverOpen(false)}
 				/>
 			}
 			trigger="click"

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

@@ -62,6 +62,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 						onSearch: jest.fn(),
 						onSelect: jest.fn(),
 						onRemove: jest.fn(),
+						onReorder: jest.fn(),
 					},
 				}}
 			/>,
@@ -154,4 +155,66 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 			expect(fontSizeOnChange).toHaveBeenCalledWith(FontSize.MEDIUM);
 		});
 	});
+
+	function renderWithOnOpen(
+		onOpenColumns?: jest.Mock,
+		selectedOptionFormat: 'table' | 'raw' | 'list' = 'table',
+	): { getByTestId: ReturnType<typeof render>['getByTestId'] } {
+		const items = [
+			{ key: 'raw', label: 'Raw', data: { title: 'max lines per row' } },
+			{ key: 'list', label: 'Default' },
+			{ key: 'table', label: 'Column', data: { title: 'columns' } },
+		];
+
+		const { getByTestId } = render(
+			<LogsFormatOptionsMenu
+				items={items}
+				selectedOptionFormat={selectedOptionFormat}
+				config={{
+					format: { value: selectedOptionFormat, onChange: jest.fn() },
+					maxLines: { value: 1, onChange: jest.fn() },
+					fontSize: { value: FontSize.SMALL, onChange: jest.fn() },
+				}}
+				onOpenColumns={onOpenColumns}
+			/>,
+		);
+		fireEvent.click(getByTestId('periscope-btn-format-options'));
+		return { getByTestId };
+	}
+
+	it('renders "Edit columns" row when format=table and onOpenColumns provided', () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		expect(getByTestId('periscope-btn-edit-columns')).toBeInTheDocument();
+	});
+
+	it('does not render "Edit columns" row when onOpenColumns is not provided', () => {
+		renderWithOnOpen(undefined, 'table');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('does not render "Edit columns" row when format is not table', () => {
+		renderWithOnOpen(jest.fn(), 'raw');
+
+		expect(
+			document.querySelector('[data-testid="periscope-btn-edit-columns"]'),
+		).toBeNull();
+	});
+
+	it('fires onOpenColumns and closes the popover when "Edit columns" is clicked', async () => {
+		const onOpenColumns = jest.fn();
+		const { getByTestId } = renderWithOnOpen(onOpenColumns, 'table');
+
+		fireEvent.click(getByTestId('periscope-btn-edit-columns'));
+
+		expect(onOpenColumns).toHaveBeenCalledTimes(1);
+		await waitFor(() => {
+			// Popover content unmounts on close.
+			expect(document.querySelector('.menu-container')).toBeNull();
+		});
+	});
 });

frontend/src/components/NewSelect/styles.scss

@@ -109,6 +109,16 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
+	.ant-select-clear {
+		background-color: var(--l2-background);
+		color: var(--l2-foreground);
+		font-size: 12px;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -392,7 +402,9 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
+	// so only the list scrolls (avoids a second scrollbar on this container).
+	max-height: 410px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -483,8 +495,12 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			> span:not(.ant-checkbox) {
-				width: 100%;
+			// @signozhq/ui Checkbox renders children inside a <label> that is
+			// content-sized by default. Make it fill the row (min-width: 0 lets it
+			// shrink) so the option text below can truncate instead of overflowing.
+			> label {
+				flex: 1 1 auto;
+				min-width: 0;
 			}
 
 			.all-option-text {
@@ -501,7 +517,12 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
+					flex: 1 1 auto;
+					min-width: 0;
 					margin-bottom: 0;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -514,26 +535,30 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			.only-btn {
-				display: none;
-			}
+			// Size the buttons to the row's resting content height (20px) and fully
+			// override antd's default 32px Button box, so revealing them on hover
+			// never changes the row height.
+			.only-btn,
 			.toggle-btn {
 				display: none;
-			}
+				align-items: center;
+				justify-content: center;
+				height: 18px;
+				min-height: 0;
+				padding: 0 6px;
+				font-size: 12px;
+				line-height: 1;
+				border: none;
+				box-shadow: none;
 
-			.only-btn:hover {
-				background-color: unset;
-			}
-			.toggle-btn:hover {
-				background-color: unset;
+				&:hover {
+					background-color: unset;
+				}
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
-					align-items: center;
-					justify-content: center;
-					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -548,9 +573,6 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
-				align-items: center;
-				justify-content: center;
-				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/components/Noz/Noz.constants.ts

@@ -0,0 +1,2 @@
+/** Shared hover copy for every Noz entry point (header, floating trigger, sidebar). */
+export const NOZ_TOOLTIP_TITLE = 'Noz, your AI teammate';

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

@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}

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

@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.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/querying/aggregation-grouping/#grouping',
+		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		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/querying/result-manipulation/#conditional-filtering-with-having',
+			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
 	},
 ];
 
@@ -99,7 +99,7 @@ const 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/#result-manipulation',
+		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<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/querying/aggregation-grouping/#grouping"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<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/querying/result-manipulation/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<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/querying/result-manipulation/#sorting--limiting"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<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/#result-manipulation"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
 											/>
 										}
 										placement="top"

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

@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}

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

@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}

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

@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>

frontend/src/components/QueryBuilderV2/utils.ts

@@ -721,6 +721,53 @@ export const removeKeysFromExpression = (
 	return result?.text ?? '';
 };
 
+const escapeRegExp = (value: string): string =>
+	value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+export const createVariablePlaceholderRegExp = (
+	variableName: string,
+): RegExp => {
+	const escapedName = escapeRegExp(variableName);
+	// (?![\w.]) prevents $env from matching inside $environment or $env.attr
+	return new RegExp(
+		`(\\$${escapedName}(?![\\w.])|\\{\\{\\s*\\.?${escapedName}\\s*\\}\\}|\\[\\[\\s*${escapedName}\\s*\\]\\])`,
+		'g',
+	);
+};
+
+const matchesVariablePlaceholder = (
+	text: string,
+	variableName: string,
+): boolean => createVariablePlaceholderRegExp(variableName).test(text);
+
+export const removeVariableFromExpression = (
+	expression: string | undefined,
+	variableName: string,
+): string => {
+	if (!expression) {
+		return '';
+	}
+
+	const queryPairs = extractQueryPairs(expression);
+
+	const keysToRemove = queryPairs
+		.filter((pair) => {
+			const singleValue = pair.value?.toString() ?? '';
+			const listValues = (pair.valueList ?? []).join(' ');
+			return (
+				matchesVariablePlaceholder(singleValue, variableName) ||
+				matchesVariablePlaceholder(listValues, variableName)
+			);
+		})
+		.map((pair) => pair.key);
+
+	if (keysToRemove.length === 0) {
+		return expression;
+	}
+
+	return removeKeysFromExpression(expression, keysToRemove, `$${variableName}`);
+};
+
 /**
  * Convert old having format to new having format
  * @param having - Array of old having objects with columnName, op, and value

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -72,6 +72,7 @@ function TanStackTableInner<TData>(
 		data,
 		columns,
 		columnStorageKey,
+		respectColumnOrder = true,
 		columnSizing: columnSizingProp,
 		onColumnSizingChange,
 		onColumnOrderChange,
@@ -175,6 +176,7 @@ function TanStackTableInner<TData>(
 		storageKey: columnStorageKey,
 		columns,
 		isGrouped,
+		respectColumnOrder,
 	});
 
 	// Use store values when columnStorageKey is provided, otherwise fall back to props/defaults
@@ -206,6 +208,7 @@ function TanStackTableInner<TData>(
 		handleRemoveColumn,
 	} = useColumnHandlers({
 		columnStorageKey,
+		respectColumnOrder,
 		effectiveSizing,
 		storeSetSizing,
 		storeSetOrder,
@@ -322,9 +325,7 @@ function TanStackTableInner<TData>(
 	});
 
 	const hasSingleColumn = useMemo(
-		() =>
-			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
-			1,
+		() => effectiveColumns.filter((c) => !c.pin).length <= 1,
 		[effectiveColumns],
 	);
 

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

@@ -24,6 +24,8 @@ jest.mock('../TanStackTable.module.scss', () => ({
 }));
 
 beforeAll(() => {
+	// jsdom doesn't include ResizeObserver — must direct-assign rather than
+	// spyOn (spyOn requires the property to already exist).
 	window.ResizeObserver = jest.fn().mockImplementation(() => ({
 		disconnect: jest.fn(),
 		observe: jest.fn(),
@@ -867,4 +869,110 @@ describe('TanStackTableView Integration', () => {
 			expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
 		});
 	});
+
+	describe('hasSingleColumn — gates the Remove popover per-column', () => {
+		const hasSingleColumnFlagPresent = (): boolean =>
+			Boolean(document.querySelector('th[data-single-column="true"]'));
+
+		it('is true when only one non-pinned column exists', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+
+		it('is false when multiple non-pinned columns exist (all removable)', async () => {
+			renderTanStackTable({});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 3 default columns (id/name/value), none pinned, none non-removable
+			// → table is not single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('is false when removable + non-removable mix exists (the body/timestamp case)', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'name',
+							header: 'Timestamp',
+							accessorKey: 'name',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'value',
+							header: 'Body',
+							accessorKey: 'value',
+							enableRemove: false,
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'id',
+							header: 'User',
+							accessorKey: 'id',
+							enableRemove: true,
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			expect(hasSingleColumnFlagPresent()).toBe(false);
+		});
+
+		it('does not count pinned columns toward the total', async () => {
+			renderTanStackTable({
+				props: {
+					data: [{ id: '1', name: 'Item 1', value: 100 }],
+					columns: [
+						{
+							id: 'stateIndicator',
+							header: '',
+							pin: 'left',
+							accessorKey: 'id',
+							cell: ({ value }): string => String(value),
+						},
+						{
+							id: 'name',
+							header: 'Name',
+							accessorKey: 'name',
+							cell: ({ value }): string => String(value),
+						},
+					],
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// 1 pinned + 1 non-pinned → only the non-pinned counts → single-column.
+			expect(hasSingleColumnFlagPresent()).toBe(true);
+		});
+	});
 });

frontend/src/components/TanStackTableView/__tests__/useColumnState.test.tsx

@@ -168,6 +168,53 @@ describe('useColumnState', () => {
 				'a',
 			]);
 		});
+
+		it('ignores stored columnOrder when respectColumnOrder=false', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: false,
+				}),
+			);
+
+			// Falls through to natural columns-array order; stored order is ignored.
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'a',
+				'b',
+				'c',
+			]);
+		});
+
+		it('honors stored columnOrder when respectColumnOrder=true (default)', () => {
+			const columns = [col('a'), col('b'), col('c')];
+
+			act(() => {
+				useColumnStore.getState().initializeFromDefaults(TEST_KEY, columns);
+				useColumnStore.getState().setColumnOrder(TEST_KEY, ['c', 'a', 'b']);
+			});
+
+			const { result } = renderHook(() =>
+				useColumnState({
+					storageKey: TEST_KEY,
+					columns,
+					respectColumnOrder: true,
+				}),
+			);
+
+			expect(result.current.sortedColumns.map((c) => c.id)).toStrictEqual([
+				'c',
+				'a',
+				'b',
+			]);
+		});
 	});
 
 	describe('actions', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -152,6 +152,8 @@ export type TanStackTableProps<TData> = {
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
 	columnStorageKey?: string;
+	/** When false, the table renders columns in their natural array order and the persisted columnOrder slot is ignored on read and skipped on write. Use when an external source (e.g. preferences.selectColumns) is the canonical order. Default true. */
+	respectColumnOrder?: boolean;
 	columnSizing?: ColumnSizingState;
 	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
 	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;

frontend/src/components/TanStackTableView/useColumnHandlers.ts

@@ -7,6 +7,8 @@ import { TableColumnDef } from './types';
 export interface UseColumnHandlersOptions<TData> {
 	/** Storage key for persisting column state (enables store mode) */
 	columnStorageKey?: string;
+	/** When false, drag-reorder skips the persisted columnOrder write — order flows back via onColumnOrderChange only. */
+	respectColumnOrder?: boolean;
 	effectiveSizing: ColumnSizingState;
 	storeSetSizing: (sizing: ColumnSizingState) => void;
 	storeSetOrder: (columns: TableColumnDef<TData>[]) => void;
@@ -28,6 +30,7 @@ export interface UseColumnHandlersResult<TData> {
  */
 export function useColumnHandlers<TData>({
 	columnStorageKey,
+	respectColumnOrder = true,
 	effectiveSizing,
 	storeSetSizing,
 	storeSetOrder,
@@ -50,12 +53,12 @@ export function useColumnHandlers<TData>({
 
 	const handleColumnOrderChange = useCallback(
 		(cols: TableColumnDef<TData>[]) => {
-			if (columnStorageKey) {
+			if (columnStorageKey && respectColumnOrder) {
 				storeSetOrder(cols);
 			}
 			onColumnOrderChange?.(cols);
 		},
-		[columnStorageKey, storeSetOrder, onColumnOrderChange],
+		[columnStorageKey, respectColumnOrder, storeSetOrder, onColumnOrderChange],
 	);
 
 	const handleRemoveColumn = useCallback(

frontend/src/components/TanStackTableView/useColumnState.ts

@@ -20,6 +20,7 @@ type UseColumnStateOptions<TData> = {
 	storageKey?: string;
 	columns: TableColumnDef<TData>[];
 	isGrouped?: boolean;
+	respectColumnOrder?: boolean;
 };
 
 type UseColumnStateResult<TData> = {
@@ -40,6 +41,7 @@ export function useColumnState<TData>({
 	storageKey,
 	columns,
 	isGrouped = false,
+	respectColumnOrder = true,
 }: UseColumnStateOptions<TData>): UseColumnStateResult<TData> {
 	useEffect(() => {
 		if (storageKey) {
@@ -130,7 +132,7 @@ export function useColumnState<TData>({
 	}, [hiddenColumnIds, columns, isGrouped]);
 
 	const sortedColumns = useMemo((): TableColumnDef<TData>[] => {
-		if (columnOrder.length === 0) {
+		if (!respectColumnOrder || columnOrder.length === 0) {
 			return columns;
 		}
 
@@ -144,7 +146,7 @@ export function useColumnState<TData>({
 		});
 
 		return [...pinned, ...sortedRest];
-	}, [columns, columnOrder]);
+	}, [columns, columnOrder, respectColumnOrder]);
 
 	const hideColumn = useCallback(
 		(columnId: string) => {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -139,7 +139,6 @@ jest.mock('react-query', (): unknown => {
 });
 
 // mock other side-effecty modules
-jest.mock('api/common/logEvent', () => jest.fn());
 jest.mock('api/browser/localstorage/set', () => jest.fn());
 jest.mock('utils/error', () => ({ showErrorNotification: jest.fn() }));
 

frontend/src/constants/apDex.ts

@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';

frontend/src/constants/localStorage.ts

@@ -42,4 +42,5 @@ export enum LOCALSTORAGE {
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
+	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 }

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -5,6 +5,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 
 import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
@@ -42,16 +43,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<TooltipSimple title="Noz">
+		<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 			<Button
 				variant="solid"
 				color="primary"
 				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
 				aria-label="Open Noz"
-			>
-				<Noz size={24} />
-			</Button>
+				prefix={<Noz size={24} />}
+			/>
 		</TooltipSimple>
 	);
 }

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -67,8 +67,8 @@
 	gap: 4px;
 
 	&--success {
-		background: color-mix(in srgb, var(--success-background) 10%, transparent);
-		color: var(--success-foreground);
+		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
+		color: var(--text-forest-400);
 	}
 
 	&--error {

frontend/src/container/AllAlertChannels/index.tsx

@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/setup-alerts-notification/"
+						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					<Tooltip

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

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import logEvent from 'api/common/logEvent';
+import { logEventMock } from '__tests__/logEventMock';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import {
@@ -24,8 +24,6 @@ jest.mock('providers/cmdKProvider', () => ({
 	}),
 }));
 
-jest.mock('api/common/logEvent', () => jest.fn());
-
 // Mock the AppContext
 const mockUpdateUserPreferenceInContext = jest.fn();
 
@@ -139,7 +137,7 @@ describe('Sidebar Toggle Shortcut', () => {
 		it('should log the toggle event with correct parameters', async () => {
 			const user = userEvent.setup();
 			const mockHandleShortcut = jest.fn(() => {
-				logEvent('Global Shortcut: Sidebar Toggle', {
+				logEventMock('Global Shortcut: Sidebar Toggle', {
 					previousState: false,
 					newState: true,
 				});
@@ -155,10 +153,13 @@ describe('Sidebar Toggle Shortcut', () => {
 
 			await user.keyboard(SHIFT_B_KEYBOARD_SHORTCUT);
 
-			expect(logEvent).toHaveBeenCalledWith('Global Shortcut: Sidebar Toggle', {
-				previousState: false,
-				newState: true,
-			});
+			expect(logEventMock).toHaveBeenCalledWith(
+				'Global Shortcut: Sidebar Toggle',
+				{
+					previousState: false,
+					newState: true,
+				},
+			);
 		});
 
 		it('should update user preference in context', async () => {

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -29,7 +29,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
+				url =
+					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =

frontend/src/container/CreateAlertRule/constants.ts

@@ -31,7 +31,8 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
+		selection:
+			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -196,7 +196,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [
@@ -224,7 +228,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -153,6 +153,7 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
+				display: block;
 			}
 		}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -47,18 +47,10 @@
 		}
 
 		.ant-tabs-tab-active {
-			.overview-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
-			.variables-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
+			.overview-btn,
+			.variables-btn,
 			.public-dashboard-btn {
-				border-radius: 2px 0px 0px 2px;
+				color: var(--primary-background);
 				background: var(--l1-border);
 			}
 		}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -127,6 +127,15 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
+
+					.sidenav-beta-tag {
+						margin-left: 4px;
+					}
+
+					div {
+						display: flex;
+						align-items: center;
+					}
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -177,6 +186,7 @@
 
 		.multiple-values-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {
@@ -193,6 +203,7 @@
 
 		.all-option-section {
 			justify-content: space-between;
+			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -518,7 +518,6 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-											marginTop: 1,
 										}}
 									/>
 								}
@@ -614,7 +613,6 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-													marginTop: 1,
 												}}
 											/>
 										}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.test.tsx

@@ -0,0 +1,328 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { Dashboard } from 'types/api/dashboard/getAll';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
+
+// ---------------------------------------------------------------------------
+// Shared fixture helpers
+// ---------------------------------------------------------------------------
+
+const EMPTY_BUILDER = {
+	queryData: [] as any,
+	queryFormulas: [],
+	queryTraceOperator: [],
+};
+
+const BASE_WIDGET = {
+	opacity: '1',
+	nullZeroValues: 'null',
+	timePreferance: 'GLOBAL_TIME' as const,
+	softMin: null,
+	softMax: null,
+	selectedLogFields: null,
+	selectedTracesFields: null,
+};
+
+const DEFAULT_QUERY_DATA = {
+	queryName: 'q1',
+	// In QB v5, expression holds the query label (A/B/C), not a filter expression
+	expression: 'A',
+	dataSource: DataSource.METRICS,
+	functions: [],
+	groupBy: [],
+	filters: { items: [] as any[], op: 'AND' as const },
+	legend: '',
+	disabled: false,
+	having: [],
+	limit: null,
+	stepInterval: null,
+	orderBy: [],
+	selectColumns: [],
+	source: '' as const,
+};
+
+/**
+ * Build a dashboard with a single builder widget.
+ * Only supply the fields your test actually cares about.
+ */
+const buildBuilderDashboard = (
+	filterExpression: string,
+	queryDataOverrides: Record<string, any> = {},
+): Dashboard => ({
+	id: 'dash1',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'Test Dashboard',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'widget-1',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: 'Widget 1',
+				description: '',
+				query: {
+					id: 'query1',
+					queryType: EQueryType.QUERY_BUILDER,
+					promql: [],
+					clickhouse_sql: [],
+					builder: {
+						queryData: [
+							{
+								...DEFAULT_QUERY_DATA,
+								...queryDataOverrides,
+								filter: { expression: filterExpression },
+							},
+						],
+						queryFormulas: [],
+						queryTraceOperator: [],
+					},
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+const buildClickhouseDashboard = (query: string): Dashboard => ({
+	id: 'dash-ch',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'CH',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'w1',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: '',
+				description: '',
+				query: {
+					id: 'q1',
+					queryType: EQueryType.CLICKHOUSE,
+					promql: [],
+					clickhouse_sql: [{ name: 'A', query, legend: '', disabled: false }],
+					builder: EMPTY_BUILDER,
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+const buildPromqlDashboard = (query: string): Dashboard => ({
+	id: 'dash-prom',
+	createdAt: '',
+	updatedAt: '',
+	createdBy: '',
+	updatedBy: '',
+	data: {
+		title: 'PromQL Dashboard',
+		widgets: [
+			{
+				...BASE_WIDGET,
+				id: 'widget-prom',
+				panelTypes: PANEL_TYPES.TIME_SERIES,
+				title: 'PromQL Widget',
+				description: '',
+				query: {
+					id: 'query-prom',
+					queryType: EQueryType.PROM,
+					promql: [{ name: 'A', query, legend: '', disabled: false }],
+					clickhouse_sql: [],
+					builder: EMPTY_BUILDER,
+					unit: '',
+				},
+			},
+		],
+		variables: {},
+	},
+});
+
+/** Run removeVariableReferencesFromDashboard on a single-widget clickhouse dashboard and return the cleaned SQL. */
+const chQuery = (sql: string, varName: string): string => {
+	const result = removeVariableReferencesFromDashboard(
+		buildClickhouseDashboard(sql),
+		varName,
+	);
+	return (result!.data.widgets![0] as any).query.clickhouse_sql[0].query;
+};
+
+/** Extract the first builder queryData from a cleaned dashboard. */
+const firstBuilderQueryData = (dashboard: Dashboard | undefined): any =>
+	(dashboard!.data.widgets![0] as any).query.builder.queryData[0];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('removeVariableReferencesFromDashboard', () => {
+	describe('builder filter expression cleanup', () => {
+		it('removes a variable clause from filter.expression', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
+		});
+
+		it('leaves no dangling AND/OR after removing a variable clause', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+			const { expression } = firstBuilderQueryData(result).filter;
+
+			expect(expression).toBe("env = 'prod'");
+			expect(expression).not.toMatch(/^\s*(AND|OR)/i);
+			expect(expression).not.toMatch(/(AND|OR)\s*$/i);
+		});
+
+		it('does not remove $environment clause when deleting $env', () => {
+			const dashboard = buildBuilderDashboard(
+				'env = $env AND deployment.environment = $environment',
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'env');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				'deployment.environment = $environment',
+			);
+		});
+
+		it('leaves literal filter expressions untouched when removing a variable', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name = 'api-gateway' AND env = 'prod'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				"service.name = 'api-gateway' AND env = 'prod'",
+			);
+		});
+
+		it('removes only the variable clause, preserving a literal clause on the same key', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND service.name = 'api-gateway'",
+			);
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe(
+				"service.name = 'api-gateway'",
+			);
+		});
+
+		it('returns filter.expression unchanged when the variable has no clauses in it', () => {
+			const dashboard = buildBuilderDashboard("env = 'prod'");
+
+			const result = removeVariableReferencesFromDashboard(dashboard, 'service');
+
+			expect(firstBuilderQueryData(result).filter.expression).toBe("env = 'prod'");
+		});
+	});
+
+	describe('PromQL query cleanup', () => {
+		it('removes variable placeholder from a promql query', () => {
+			const result = removeVariableReferencesFromDashboard(
+				buildPromqlDashboard('sum(rate(http_requests_total{$service}[5m]))'),
+				'service',
+			);
+
+			const widget = result!.data.widgets![0] as any;
+			expect(widget.query.promql[0].query).toBe(
+				'sum(rate(http_requests_total{}[5m]))',
+			);
+		});
+
+		it('strips only the variable token inside a PromQL label matcher (token-only path)', () => {
+			const result = removeVariableReferencesFromDashboard(
+				buildPromqlDashboard('up{env="$env", job="api"}'),
+				'env',
+			);
+
+			const widget = result!.data.widgets![0] as any;
+			expect(widget.query.promql[0].query).toBe('up{env="", job="api"}');
+		});
+	});
+
+	describe('ClickHouse SQL query cleanup', () => {
+		it('removes a quoted variable clause and its WHERE keyword', () => {
+			expect(
+				chQuery(
+					"SELECT count() FROM signoz_logs WHERE service_name = '$service'",
+					'service',
+				),
+			).toBe('SELECT count() FROM signoz_logs');
+		});
+
+		it('removes a middle clause: AND env={{.env}} AND', () => {
+			expect(
+				chQuery('SELECT count() FROM t WHERE a=1 AND env={{.env}} AND b=2', 'env'),
+			).toBe('SELECT count() FROM t WHERE a=1 AND b=2');
+		});
+
+		it('removes the first clause: env={{.env}} AND rest', () => {
+			expect(
+				chQuery('SELECT count() FROM t WHERE env={{.env}} AND b=2', 'env'),
+			).toBe('SELECT count() FROM t WHERE b=2');
+		});
+
+		it('removes the last clause: rest AND env=$env', () => {
+			expect(chQuery('SELECT count() FROM t WHERE a=1 AND env=$env', 'env')).toBe(
+				'SELECT count() FROM t WHERE a=1',
+			);
+		});
+
+		it('removes a clause with double-bracket syntax: service=[[svc]]', () => {
+			expect(chQuery('SELECT count() FROM t WHERE service=[[svc]]', 'svc')).toBe(
+				'SELECT count() FROM t',
+			);
+		});
+
+		it('falls back to token-only strip for a bare variable in SELECT', () => {
+			expect(chQuery('SELECT $metric FROM table', 'metric')).toBe(
+				'SELECT FROM table',
+			);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('is idempotent — calling twice produces the same result', () => {
+			const dashboard = buildBuilderDashboard(
+				"service.name IN $service AND env = 'prod'",
+			);
+
+			const once = removeVariableReferencesFromDashboard(dashboard, 'service');
+			const twice = removeVariableReferencesFromDashboard(once, 'service');
+
+			expect(twice).toStrictEqual(once);
+		});
+
+		it('handles a dashboard with no widgets without throwing', () => {
+			const dashboard: Dashboard = {
+				id: 'dash-empty',
+				createdAt: '',
+				updatedAt: '',
+				createdBy: '',
+				updatedBy: '',
+				data: { title: 'Empty Dashboard', widgets: undefined, variables: {} },
+			};
+
+			expect(() =>
+				removeVariableReferencesFromDashboard(dashboard, 'service'),
+			).not.toThrow();
+		});
+	});
+});

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx

@@ -1,6 +1,8 @@
 import {
 	convertFiltersToExpressionWithExistingQuery,
+	createVariablePlaceholderRegExp,
 	removeKeysFromExpression,
+	removeVariableFromExpression,
 } from 'components/QueryBuilderV2/utils';
 import { cloneDeep, isArray, isEmpty } from 'lodash-es';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
@@ -157,6 +159,139 @@ const updateAfterRemoval = (
 	};
 };
 
+const removeVariablePlaceholders = (
+	text: string | undefined,
+	variableName: string,
+): string => {
+	if (!text) {
+		return '';
+	}
+
+	const tokenPattern = createVariablePlaceholderRegExp(variableName);
+
+	// Step 1: attempt clause-aware removal for SQL WHERE patterns.
+	// Strips the entire `key op $var` unit plus its adjacent AND/OR so we
+	// never leave a dangling `key = ` in unquoted ClickHouse SQL clauses.
+	// Handles three shapes:
+	//   (a) preceding conjunction:  AND key = $var
+	//   (b) following conjunction:  key = $var AND
+	//   (c) standalone clause:      key = $var  (end of expression)
+	const escapedToken = tokenPattern.source;
+	const clausePattern = new RegExp(
+		// (a) conjunction before the clause
+		`\\s*\\b(?:AND|OR)\\b\\s+[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?` +
+			// (b)+(c) clause first, optional conjunction after
+			`|[\\w."'\\[\\]]+\\s*(?:=|!=|<>|LIKE|ILIKE|IN|NOT\\s+IN)\\s*'?${escapedToken}'?(?:\\s*\\b(?:AND|OR)\\b)?`,
+		'gi',
+	);
+
+	const withClauseRemoval = text.replace(clausePattern, '');
+	if (withClauseRemoval !== text) {
+		return withClauseRemoval
+			.replace(/\s{2,}/g, ' ')
+			.replace(/\bWHERE\s*$/i, '')
+			.trim();
+	}
+
+	// Step 2: fallback — bare variable usage outside a key-op-value pattern
+	// (e.g. SELECT $metric, LIMIT $n). Token-only removal is correct here.
+	return text
+		.replace(tokenPattern, '')
+		.replace(/\s{2,}/g, ' ')
+		.trim();
+};
+
+const removeVariableReferencesFromQueryData = (
+	queryData: IBuilderQuery,
+	variableName: string,
+): IBuilderQuery => {
+	const updatedFilter = queryData.filter?.expression
+		? {
+				...queryData.filter,
+				expression: removeVariableFromExpression(
+					queryData.filter.expression,
+					variableName,
+				),
+			}
+		: queryData.filter;
+
+	return { ...queryData, filter: updatedFilter };
+};
+
+const removeVariableReferencesFromWidget = (
+	widget: Widgets,
+	variableName: string,
+): Widgets => {
+	let updatedWidget = { ...widget };
+
+	if (updatedWidget.query?.builder?.queryData) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				builder: {
+					...updatedWidget.query.builder,
+					queryData: updatedWidget.query.builder.queryData.map((queryData) =>
+						removeVariableReferencesFromQueryData(queryData, variableName),
+					),
+				},
+			},
+		};
+	}
+
+	if (updatedWidget.query?.promql) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				promql: updatedWidget.query.promql.map((promqlQuery) => ({
+					...promqlQuery,
+					query: removeVariablePlaceholders(promqlQuery.query, variableName),
+				})),
+			},
+		};
+	}
+
+	if (updatedWidget.query?.clickhouse_sql) {
+		updatedWidget = {
+			...updatedWidget,
+			query: {
+				...updatedWidget.query,
+				clickhouse_sql: updatedWidget.query.clickhouse_sql.map((sqlQuery) => ({
+					...sqlQuery,
+					query: removeVariablePlaceholders(sqlQuery.query, variableName),
+				})),
+			},
+		};
+	}
+
+	return updatedWidget;
+};
+
+export const removeVariableReferencesFromDashboard = (
+	dashboard: Dashboard | undefined,
+	variableName: string,
+): Dashboard | undefined => {
+	if (!dashboard || !variableName) {
+		return dashboard;
+	}
+
+	const updatedDashboard = cloneDeep(dashboard);
+
+	if (updatedDashboard.data.widgets) {
+		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
+			(widget) => {
+				if ('query' in widget) {
+					return removeVariableReferencesFromWidget(widget as Widgets, variableName);
+				}
+				return widget;
+			},
+		);
+	}
+
+	return updatedDashboard;
+};
+
 /**
  * A function that takes a dashboard configuration and a list of tag filters
  * and returns an updated dashboard with the filters appended to widget queries.

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -18,10 +18,11 @@ import { convertVariablesToDbFormat } from 'container/DashboardContainer/Dashboa
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useNotifications } from 'hooks/useNotifications';
+import { toast } from '@signozhq/ui/sonner';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { removeVariableReferencesFromDashboard } from './addTagFiltersToDashboard';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -92,8 +93,6 @@ function VariablesSettings({
 	const { dashboardData, setDashboardData } = useDashboardStore();
 	const { dashboardVariables } = useDashboardVariables();
 
-	const { notifications } = useNotifications();
-
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
 	const [existingVariableNamesMap, setExistingVariableNamesMap] = useState<
@@ -201,9 +200,7 @@ function VariablesSettings({
 				onSuccess: (updatedDashboard) => {
 					if (updatedDashboard.data) {
 						setDashboardData(updatedDashboard.data);
-						notifications.success({
-							message: t('variable_updated_successfully'),
-						});
+						toast.success(t('variable_updated_successfully'));
 					}
 				},
 			},
@@ -256,6 +253,11 @@ function VariablesSettings({
 	};
 
 	const handleDeleteConfirm = (): void => {
+		if (!dashboardData || !variableToDelete.current) {
+			setDeleteVariableModal(false);
+			return;
+		}
+
 		const newVariablesArr = variablesTableData.filter(
 			(variable: IDashboardVariable) =>
 				variable.id !== variableToDelete?.current?.id,
@@ -263,7 +265,31 @@ function VariablesSettings({
 
 		const updatedVariables = convertVariablesToDbFormat(newVariablesArr);
 
-		updateVariables(updatedVariables);
+		const cleanedDashboard =
+			removeVariableReferencesFromDashboard(
+				dashboardData,
+				variableToDelete.current.name || '',
+			) || dashboardData;
+
+		updateMutation.mutateAsync(
+			{
+				id: dashboardData.id,
+
+				data: {
+					...cleanedDashboard.data,
+					variables: updatedVariables,
+				},
+			},
+			{
+				onSuccess: (updatedDashboard) => {
+					if (updatedDashboard.data) {
+						setDashboardData(updatedDashboard.data);
+						toast.success(t('variable_updated_successfully'));
+					}
+				},
+			},
+		);
+
 		variableToDelete.current = null;
 		setDeleteVariableModal(false);
 	};
@@ -476,6 +502,7 @@ function VariablesSettings({
 				open={deleteVariableModal}
 				onOk={handleDeleteConfirm}
 				onCancel={handleDeleteCancel}
+				okButtonProps={{ loading: updateMutation.isLoading }}
 			>
 				<Typography.Text>
 					Are you sure you want to delete variable{' '}

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import UPlotLegend from 'lib/uPlotV2/components/Legend/UPlotLegend';
 import {
 	LegendPosition,
 	TooltipRenderArgs,
@@ -47,7 +47,7 @@ export default function ChartWrapper({
 				return null;
 			}
 			return (
-				<Legend
+				<UPlotLegend
 					config={config}
 					position={legendConfig.position}
 					averageLegendWidth={averageLegendWidth}

frontend/src/container/DashboardContainer/visualization/charts/Pie/Pie.module.scss

@@ -0,0 +1,67 @@
+.pieChartWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+.pieChartNoData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+}
+
+// Size is set inline from the computed chart dimensions (mirrors the uPlot
+// chart/legend split); this just centres the donut within that box.
+.pieChartContainer {
+	flex: 0 0 auto;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.pieChartTooltip {
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+	background-color: var(--l2-background) !important;
+	border: 1px solid var(--l2-border) !important;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.pieTooltipContent {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+}
+
+.pieChartIndicator {
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+	margin-right: 8px;
+	display: inline-block;
+}
+
+.tooltipValue {
+	font-weight: bold;
+	margin-top: 4px;
+}
+
+// Wraps the shared chart Legend. Its width/height are set inline from the
+// computed chart dimensions, so the VirtuosoGrid inside gets the same bounded
+// box (right column / bottom rows) the uPlot charts use.
+.pieLegend {
+	flex: 0 0 auto;
+	min-height: 0;
+	min-width: 0;
+	padding: 8px;
+}

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

@@ -0,0 +1,241 @@
+import { useCallback, useMemo, useRef } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Group } from '@visx/group';
+import { Pie as VisxPie } from '@visx/shape';
+import { defaultStyles, useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+import { useResizeObserver } from 'hooks/useDimensions';
+import Legend from 'lib/uPlotV2/components/Legend/Legend';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+
+import { PieChartProps, PieSlice } from '../types';
+import { calculateChartDimensions } from '../utils';
+
+import PieArc from './PieArc';
+import PieCenterLabel from './PieCenterLabel';
+import styles from './Pie.module.scss';
+import { usePieInteractions } from './usePieInteractions';
+import { getFillColor } from './utils';
+
+interface PieTooltipData {
+	label: string;
+	value: string;
+	color: string;
+}
+
+/**
+ * Donut chart rendered with @visx. Splits its area into chart + legend with the
+ * same `calculateChartDimensions` logic as the uPlot charts (right column /
+ * up-to-two bottom rows), renders the shared chart Legend, and delegates the
+ * arcs, centre total and interaction state to PieArc / PieCenterLabel /
+ * usePieInteractions. Pure presentation — slices are pre-resolved by the caller.
+ */
+export default function Pie({
+	data,
+	yAxisUnit,
+	decimalPrecision,
+	isDarkMode,
+	position = LegendPosition.BOTTOM,
+	id,
+	onSliceClick,
+	'data-testid': testId,
+}: PieChartProps): JSX.Element {
+	const {
+		active,
+		setActive,
+		visibleData,
+		legendItems,
+		focusedSeriesIndex,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	} = usePieInteractions(data, id);
+
+	const {
+		tooltipOpen,
+		tooltipLeft,
+		tooltipTop,
+		tooltipData,
+		hideTooltip,
+		showTooltip,
+	} = useTooltip<PieTooltipData>();
+
+	const { containerRef, TooltipInPortal } = useTooltipInPortal({
+		scroll: true,
+		detectBounds: true,
+	});
+
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const { width: containerWidth, height: containerHeight } =
+		useResizeObserver(wrapperRef);
+
+	// Reuse the uPlot chart/legend split so the donut + legend get the same area
+	// allocation (right column, or up-to-two bottom rows) as every other panel.
+	const dimensions = useMemo(
+		() =>
+			calculateChartDimensions({
+				containerWidth,
+				containerHeight,
+				legendConfig: { position },
+				seriesLabels: data.map((slice) => slice.label),
+			}),
+		[containerWidth, containerHeight, position, data],
+	);
+
+	const size = Math.min(dimensions.width, dimensions.height);
+	const radius = size * 0.35;
+	const innerRadius = radius * 0.6;
+	const totalValue = visibleData.reduce((sum, slice) => sum + slice.value, 0);
+	const labelColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400;
+	const activeColor = active?.color ?? null;
+
+	const handleSliceEnter = useCallback(
+		(slice: PieSlice, centroidX: number, centroidY: number): void => {
+			showTooltip({
+				tooltipData: {
+					label: slice.label,
+					value: getYAxisFormattedValue(
+						slice.value.toString(),
+						yAxisUnit || 'none',
+						decimalPrecision,
+					),
+					color: slice.color,
+				},
+				tooltipTop: centroidY + dimensions.height / 2,
+				tooltipLeft: centroidX + dimensions.width / 2,
+			});
+			setActive(slice);
+		},
+		[
+			showTooltip,
+			setActive,
+			yAxisUnit,
+			decimalPrecision,
+			dimensions.height,
+			dimensions.width,
+		],
+	);
+
+	const handleSliceLeave = useCallback((): void => {
+		hideTooltip();
+		setActive(null);
+	}, [hideTooltip, setActive]);
+
+	if (!data.length) {
+		return (
+			<div
+				ref={wrapperRef}
+				className={styles.pieChartWrapper}
+				data-testid={testId}
+			>
+				<div className={styles.pieChartNoData}>No data</div>
+			</div>
+		);
+	}
+
+	const isRightLegend = position === LegendPosition.RIGHT;
+
+	return (
+		<div
+			ref={wrapperRef}
+			className={styles.pieChartWrapper}
+			style={{ flexDirection: isRightLegend ? 'row' : 'column' }}
+			data-testid={testId}
+		>
+			<div
+				className={styles.pieChartContainer}
+				style={{ width: dimensions.width, height: dimensions.height }}
+			>
+				{size > 0 && (
+					<svg
+						width={dimensions.width}
+						height={dimensions.height}
+						ref={containerRef}
+					>
+						<Group top={dimensions.height / 2} left={dimensions.width / 2}>
+							<VisxPie
+								data={visibleData}
+								pieValue={(slice: PieSlice): number => slice.value}
+								outerRadius={radius}
+								innerRadius={innerRadius}
+								padAngle={0.01}
+								cornerRadius={3}
+								width={size}
+								height={size}
+							>
+								{(pie): JSX.Element[] =>
+									pie.arcs.map((arc) => (
+										<PieArc
+											key={`arc-${arc.data.label}-${arc.data.value}-${arc.startAngle.toFixed(
+												6,
+											)}`}
+											slice={arc.data}
+											arcPath={pie.path(arc) || ''}
+											centroid={pie.path.centroid(arc)}
+											startAngle={arc.startAngle}
+											endAngle={arc.endAngle}
+											radius={radius}
+											totalValue={totalValue}
+											yAxisUnit={yAxisUnit}
+											decimalPrecision={decimalPrecision}
+											labelColor={labelColor}
+											fill={getFillColor(arc.data.color, activeColor)}
+											onEnter={handleSliceEnter}
+											onLeave={handleSliceLeave}
+											onClick={onSliceClick}
+										/>
+									))
+								}
+							</VisxPie>
+							<PieCenterLabel
+								total={totalValue}
+								yAxisUnit={yAxisUnit}
+								decimalPrecision={decimalPrecision}
+								radius={radius}
+								innerRadius={innerRadius}
+								color={labelColor}
+							/>
+						</Group>
+					</svg>
+				)}
+				{tooltipOpen && tooltipData && (
+					<TooltipInPortal
+						top={tooltipTop}
+						left={tooltipLeft}
+						className={styles.pieChartTooltip}
+						style={{
+							...defaultStyles,
+							color: labelColor,
+						}}
+					>
+						<div
+							className={styles.pieChartIndicator}
+							style={{ background: tooltipData.color }}
+						/>
+						<div className={styles.pieTooltipContent}>
+							<span>{tooltipData.label}</span>
+							<span className={styles.tooltipValue}>{tooltipData.value}</span>
+						</div>
+					</TooltipInPortal>
+				)}
+			</div>
+			<div
+				className={styles.pieLegend}
+				style={{
+					width: dimensions.legendWidth,
+					height: dimensions.legendHeight,
+				}}
+			>
+				<Legend
+					items={legendItems}
+					position={position}
+					averageLegendWidth={dimensions.averageLegendWidth}
+					focusedSeriesIndex={focusedSeriesIndex}
+					onClick={onLegendClick}
+					onMouseMove={onLegendMouseMove}
+					onMouseLeave={onLegendMouseLeave}
+				/>
+			</div>
+		</div>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -0,0 +1,123 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import { PieSlice } from '../types';
+
+import { getArcGeometry } from './utils';
+
+// Slices below this share of the total don't get a leader label (too cramped).
+const MIN_LABEL_SHARE = 0.03;
+const MAX_LABEL_LENGTH = 15;
+
+interface PieArcProps {
+	slice: PieSlice;
+	/** SVG path `d` for the arc, from the visx pie generator. */
+	arcPath: string;
+	/** Arc centroid `[x, y]`, used to anchor the leader line and tooltip. */
+	centroid: [number, number];
+	startAngle: number;
+	endAngle: number;
+	radius: number;
+	/** Sum of visible slice values — drives the show-label threshold. */
+	totalValue: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	labelColor: string;
+	/** Resolved fill (already dimmed if another slice is active). */
+	fill: string;
+	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
+	onLeave: () => void;
+	onClick?: (slice: PieSlice) => void;
+}
+
+/**
+ * A single donut slice: the arc path plus, for non-tiny slices, a leader line
+ * out to an external label + value. Pure presentation — interaction is
+ * delegated to the `onEnter`/`onLeave`/`onClick` callbacks.
+ */
+export default function PieArc({
+	slice,
+	arcPath,
+	centroid,
+	startAngle,
+	endAngle,
+	radius,
+	totalValue,
+	yAxisUnit,
+	decimalPrecision,
+	labelColor,
+	fill,
+	onEnter,
+	onLeave,
+	onClick,
+}: PieArcProps): JSX.Element {
+	const { label, value } = slice;
+	const [centroidX, centroidY] = centroid;
+	const { labelX, labelY, lineEndX, lineEndY, textAnchor } = getArcGeometry(
+		startAngle,
+		endAngle,
+		radius,
+	);
+
+	const displayValue = getYAxisFormattedValue(
+		value.toString(),
+		yAxisUnit || 'none',
+		decimalPrecision,
+	);
+	const shortenedLabel =
+		label.length > MAX_LABEL_LENGTH ? `${label.substring(0, 12)}...` : label;
+	const shouldShowLabel = value / totalValue > MIN_LABEL_SHARE;
+
+	return (
+		<g
+			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
+			onMouseLeave={onLeave}
+			onClick={(): void => onClick?.(slice)}
+		>
+			<path d={arcPath} fill={fill} />
+			{shouldShowLabel && (
+				<>
+					<line
+						x1={centroidX}
+						y1={centroidY}
+						x2={lineEndX}
+						y2={lineEndY}
+						stroke={labelColor}
+						strokeWidth={1}
+					/>
+					<line
+						x1={lineEndX}
+						y1={lineEndY}
+						x2={labelX}
+						y2={labelY}
+						stroke={labelColor}
+						strokeWidth={1}
+					/>
+					<text
+						x={labelX}
+						y={labelY - 8}
+						dy=".33em"
+						fill={labelColor}
+						fontSize={10}
+						textAnchor={textAnchor}
+						pointerEvents="none"
+					>
+						{shortenedLabel}
+					</text>
+					<text
+						x={labelX}
+						y={labelY + 8}
+						dy=".33em"
+						fill={labelColor}
+						fontSize={10}
+						fontWeight="bold"
+						textAnchor={textAnchor}
+						pointerEvents="none"
+					>
+						{displayValue}
+					</text>
+				</>
+			)}
+		</g>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieCenterLabel.tsx

@@ -0,0 +1,57 @@
+import type { PrecisionOption } from 'components/Graph/types';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import { getScaledFontSize } from './utils';
+
+interface PieCenterLabelProps {
+	/** Sum of the visible slice values, shown in the donut hole. */
+	total: number;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	radius: number;
+	innerRadius: number;
+	color: string;
+}
+
+/**
+ * The total shown in the centre of the donut. Splits the formatted value into
+ * its numeric part and unit so each can be sized independently, and scales the
+ * numeric font down for long values so it never overflows the hole.
+ */
+export default function PieCenterLabel({
+	total,
+	yAxisUnit,
+	decimalPrecision,
+	radius,
+	innerRadius,
+	color,
+}: PieCenterLabelProps): JSX.Element {
+	const formattedTotal = getYAxisFormattedValue(
+		total.toString(),
+		yAxisUnit || 'none',
+		decimalPrecision,
+	);
+	const matches = formattedTotal.match(/([\d.]+[KMB]?)(.*)$/);
+	const numericTotal = matches?.[1] || formattedTotal;
+	const unitTotal = matches?.[2]?.trim() || '';
+
+	const numericFontSize = getScaledFontSize({
+		text: numericTotal,
+		baseSize: radius * 0.3,
+		innerRadius,
+	});
+	const unitFontSize = numericFontSize * 0.5;
+
+	return (
+		<text textAnchor="middle" dominantBaseline="central" fill={color}>
+			<tspan fontSize={numericFontSize} fontWeight="bold">
+				{numericTotal}
+			</tspan>
+			{unitTotal && (
+				<tspan fontSize={unitFontSize} opacity={0.9} dx={2}>
+					{unitTotal}
+				</tspan>
+			)}
+		</text>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { LegendItem } from 'lib/uPlotV2/config/types';
+
+import { PieSlice } from '../../types';
+import Pie from '../Pie';
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: jest.fn().mockReturnValue({ width: 400, height: 300 }),
+}));
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getYAxisFormattedValue: jest.fn((value: string) => value),
+}));
+
+// VirtuosoGrid only renders a window in jsdom; render every item so we can
+// assert on legend entries.
+jest.mock('react-virtuoso', () => ({
+	VirtuosoGrid: ({
+		data,
+		itemContent,
+	}: {
+		data: LegendItem[];
+		itemContent: (index: number, item: LegendItem) => React.ReactNode;
+	}): JSX.Element => (
+		<div data-testid="virtuoso-grid">
+			{data.map((item, index) => (
+				<div key={item.seriesIndex ?? index}>{itemContent(index, item)}</div>
+			))}
+		</div>
+	),
+}));
+
+const DATA: PieSlice[] = [
+	{ label: 'frontend', value: 100, color: '#aa0000' },
+	{ label: 'cart', value: 60, color: '#00aa00' },
+	{ label: 'checkout', value: 40, color: '#0000aa' },
+];
+
+function renderPie(
+	props: Partial<React.ComponentProps<typeof Pie>> = {},
+): void {
+	render(
+		<TooltipProvider>
+			<Pie data={DATA} isDarkMode={false} data-testid="pie" {...props} />
+		</TooltipProvider>,
+	);
+}
+
+describe('Pie', () => {
+	it('renders the "No data" state for empty data', () => {
+		render(
+			<TooltipProvider>
+				<Pie data={[]} isDarkMode={false} data-testid="pie" />
+			</TooltipProvider>,
+		);
+		expect(screen.getByText('No data')).toBeInTheDocument();
+	});
+
+	it('renders one arc per slice plus the legend entries and centre total', () => {
+		renderPie();
+
+		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
+		expect(svg.querySelectorAll('path')).toHaveLength(DATA.length);
+
+		const legend = screen.getByTestId('virtuoso-grid');
+		expect(within(legend).getByText('frontend')).toBeInTheDocument();
+		expect(within(legend).getByText('cart')).toBeInTheDocument();
+		expect(within(legend).getByText('checkout')).toBeInTheDocument();
+
+		// Centre total = 100 + 60 + 40 (formatter mocked to echo the value).
+		expect(screen.getByText('200')).toBeInTheDocument();
+	});
+
+	it('lays the legend out in a row for the right position and a column for bottom', () => {
+		const { rerender } = render(
+			<TooltipProvider>
+				<Pie
+					data={DATA}
+					isDarkMode={false}
+					position={LegendPosition.RIGHT}
+					data-testid="pie"
+				/>
+			</TooltipProvider>,
+		);
+		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'row' });
+
+		rerender(
+			<TooltipProvider>
+				<Pie
+					data={DATA}
+					isDarkMode={false}
+					position={LegendPosition.BOTTOM}
+					data-testid="pie"
+				/>
+			</TooltipProvider>,
+		);
+		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
+	});
+
+	it('hides a slice when its legend marker is clicked', () => {
+		renderPie();
+		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
+		expect(svg.querySelectorAll('path')).toHaveLength(3);
+
+		const marker = document.querySelector(
+			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
+		) as HTMLElement;
+		fireEvent.click(marker);
+
+		// One slice hidden → one fewer arc drawn.
+		expect(svg.querySelectorAll('path')).toHaveLength(2);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { PieSlice } from '../../types';
+import PieArc from '../PieArc';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	// Echo the raw value so assertions are deterministic.
+	getYAxisFormattedValue: jest.fn((value: string) => value),
+}));
+
+const SLICE: PieSlice = { label: 'frontend', value: 50, color: '#f00' };
+
+function renderArc(props: Partial<React.ComponentProps<typeof PieArc>> = {}): {
+	onEnter: jest.Mock;
+	onLeave: jest.Mock;
+	onClick: jest.Mock;
+	container: HTMLElement;
+} {
+	const onEnter = jest.fn();
+	const onLeave = jest.fn();
+	const onClick = jest.fn();
+	const { container } = render(
+		<svg>
+			<PieArc
+				slice={SLICE}
+				arcPath="M0,0L1,1"
+				centroid={[10, 20]}
+				startAngle={0}
+				endAngle={Math.PI}
+				radius={100}
+				totalValue={100}
+				labelColor="#fff"
+				fill="#f00"
+				onEnter={onEnter}
+				onLeave={onLeave}
+				onClick={onClick}
+				{...props}
+			/>
+		</svg>,
+	);
+	return { onEnter, onLeave, onClick, container };
+}
+
+describe('PieArc', () => {
+	it('renders the arc path with the resolved fill', () => {
+		const { container } = renderArc();
+		const path = container.querySelector('path');
+		expect(path).toHaveAttribute('d', 'M0,0L1,1');
+		expect(path).toHaveAttribute('fill', '#f00');
+	});
+
+	it('shows the leader label + value for a slice above the threshold', () => {
+		renderArc(); // 50 / 100 = 0.5
+		expect(screen.getByText('frontend')).toBeInTheDocument();
+		expect(screen.getByText('50')).toBeInTheDocument();
+	});
+
+	it('hides the leader label for a slice below the 3% threshold', () => {
+		renderArc({ totalValue: 10000 }); // 50 / 10000 = 0.005
+		expect(screen.queryByText('frontend')).not.toBeInTheDocument();
+		// the arc path itself still renders
+		expect(screen.queryByText('50')).not.toBeInTheDocument();
+	});
+
+	it('truncates labels longer than 15 chars', () => {
+		renderArc({
+			slice: { label: 'a-really-long-service-name', value: 50, color: '#f00' },
+		});
+		expect(screen.getByText('a-really-lon...')).toBeInTheDocument();
+	});
+
+	it('fires onEnter with the slice + centroid, and onLeave / onClick', () => {
+		const { onEnter, onLeave, onClick, container } = renderArc();
+		const g = container.querySelector('g') as SVGGElement;
+
+		fireEvent.mouseEnter(g);
+		expect(onEnter).toHaveBeenCalledWith(SLICE, 10, 20);
+
+		fireEvent.mouseLeave(g);
+		expect(onLeave).toHaveBeenCalledTimes(1);
+
+		fireEvent.click(g);
+		expect(onClick).toHaveBeenCalledWith(SLICE);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieCenterLabel.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
+
+import PieCenterLabel from '../PieCenterLabel';
+
+jest.mock('components/Graph/yAxisConfig', () => ({
+	getYAxisFormattedValue: jest.fn(),
+}));
+
+const mockFormat = getYAxisFormattedValue as jest.MockedFunction<
+	typeof getYAxisFormattedValue
+>;
+
+function renderInSvg(node: JSX.Element): ReturnType<typeof render> {
+	// PieCenterLabel returns an SVG <text>, so it needs an <svg> host.
+	return render(<svg>{node}</svg>);
+}
+
+describe('PieCenterLabel', () => {
+	const baseProps = {
+		total: 3700,
+		radius: 100,
+		innerRadius: 60,
+		color: '#fff',
+	};
+
+	it('renders the formatted total (numeric + unit suffix) as one numeric tspan when there is no separate unit', () => {
+		mockFormat.mockReturnValue('3.7K');
+		renderInSvg(<PieCenterLabel {...baseProps} />);
+		expect(screen.getByText('3.7K')).toBeInTheDocument();
+	});
+
+	it('splits the numeric part and the trailing unit into separate tspans', () => {
+		mockFormat.mockReturnValue('1.2 MB');
+		renderInSvg(<PieCenterLabel {...baseProps} />);
+		expect(screen.getByText('1.2')).toBeInTheDocument();
+		expect(screen.getByText('MB')).toBeInTheDocument();
+	});
+
+	it('passes the unit + precision through to the formatter', () => {
+		mockFormat.mockReturnValue('100');
+		renderInSvg(<PieCenterLabel {...baseProps} total={100} yAxisUnit="bytes" />);
+		expect(mockFormat).toHaveBeenCalledWith('100', 'bytes', undefined);
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/usePieInteractions.test.tsx

@@ -0,0 +1,147 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
+import type { MouseEvent } from 'react';
+
+import { PieSlice } from '../../types';
+import { usePieInteractions } from '../usePieInteractions';
+
+jest.mock(
+	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
+);
+
+const mockGetStored = getStoredSeriesVisibility as jest.MockedFunction<
+	typeof getStoredSeriesVisibility
+>;
+const mockUpdateStored =
+	updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
+		typeof updateSeriesVisibilityToLocalStorage
+	>;
+
+const DATA: PieSlice[] = [
+	{ label: 'frontend', value: 100, color: '#a' },
+	{ label: 'cart', value: 60, color: '#b' },
+	{ label: 'checkout', value: 40, color: '#c' },
+];
+
+// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
+// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
+function legendEvent(
+	index: number | null,
+	isMarker = false,
+): MouseEvent<HTMLDivElement> {
+	const itemEl =
+		index == null ? null : { dataset: { legendItemId: String(index) } };
+	return {
+		target: {
+			closest: (): unknown => itemEl,
+			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
+		},
+	} as unknown as MouseEvent<HTMLDivElement>;
+}
+
+describe('usePieInteractions', () => {
+	beforeEach(() => {
+		mockGetStored.mockReturnValue(null);
+		mockUpdateStored.mockReset();
+	});
+
+	it('starts with everything visible and nothing focused', () => {
+		const { result } = renderHook(() => usePieInteractions(DATA));
+
+		expect(result.current.visibleData).toStrictEqual(DATA);
+		expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
+			true,
+			true,
+			true,
+		]);
+		expect(result.current.focusedSeriesIndex).toBeNull();
+		expect(result.current.active).toBeNull();
+	});
+
+	describe('marker click (toggle one)', () => {
+		it('hides then unhides the clicked slice', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
+
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
+			expect(result.current.legendItems[1].show).toBe(false);
+			expect(mockUpdateStored).toHaveBeenLastCalledWith('panel-1', [
+				{ label: 'frontend', show: true },
+				{ label: 'cart', show: false },
+				{ label: 'checkout', show: true },
+			]);
+
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
+
+			expect(result.current.visibleData).toStrictEqual(DATA);
+			expect(result.current.legendItems[1].show).toBe(true);
+		});
+	});
+
+	describe('label click (isolate / reset)', () => {
+		it('isolates the clicked slice, then resets on a second click', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
+			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
+				true,
+				false,
+				false,
+			]);
+
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
+
+			expect(result.current.visibleData).toStrictEqual(DATA);
+		});
+	});
+
+	describe('hover', () => {
+		it('focuses the hovered slice and clears on leave', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendMouseMove(legendEvent(2)));
+			expect(result.current.active).toStrictEqual(DATA[2]);
+			expect(result.current.focusedSeriesIndex).toBe(2);
+
+			act(() => result.current.onLegendMouseLeave());
+			expect(result.current.active).toBeNull();
+			expect(result.current.focusedSeriesIndex).toBeNull();
+		});
+
+		it('does not focus a hidden slice', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+
+			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
+			act(() => result.current.onLegendMouseMove(legendEvent(1)));
+
+			expect(result.current.active).toBeNull();
+		});
+	});
+
+	describe('persistence', () => {
+		it('does not write to storage when no id is provided', () => {
+			const { result } = renderHook(() => usePieInteractions(DATA));
+			act(() => result.current.onLegendClick(legendEvent(0, true)));
+			expect(mockUpdateStored).not.toHaveBeenCalled();
+		});
+
+		it('rehydrates hidden slices from storage on mount (matched by label)', () => {
+			mockGetStored.mockReturnValue([
+				{ label: 'frontend', show: true },
+				{ label: 'cart', show: false },
+				{ label: 'checkout', show: true },
+			]);
+
+			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
+
+			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
+			expect(result.current.legendItems[1].show).toBe(false);
+		});
+	});
+});

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

@@ -0,0 +1,101 @@
+import {
+	getArcGeometry,
+	getFillColor,
+	getScaledFontSize,
+	lightenColor,
+} from '../utils';
+
+describe('Pie utils', () => {
+	describe('getScaledFontSize', () => {
+		it('returns the base size for empty text', () => {
+			expect(getScaledFontSize({ text: '', baseSize: 30, innerRadius: 100 })).toBe(
+				30,
+			);
+		});
+
+		it('does not scale short text (length <= 3)', () => {
+			// scaleFactor = max(0.3, 1) = 1 → baseSize, capped by innerRadius * 0.9.
+			expect(
+				getScaledFontSize({ text: '3.7', baseSize: 30, innerRadius: 100 }),
+			).toBe(30);
+		});
+
+		it('scales longer text down', () => {
+			// length 8 → scaleFactor = max(0.3, 1 - 5 * 0.09) = 0.55 → 30 * 0.55.
+			expect(
+				getScaledFontSize({ text: '12345678', baseSize: 30, innerRadius: 100 }),
+			).toBeCloseTo(16.5);
+		});
+
+		it('floors the scale factor at 0.3 for very long text', () => {
+			// length 20 → 1 - 17 * 0.09 < 0.3 → floored to 0.3 → 100 * 0.3.
+			expect(
+				getScaledFontSize({
+					text: '12345678901234567890',
+					baseSize: 100,
+					innerRadius: 1000,
+				}),
+			).toBeCloseTo(30);
+		});
+
+		it('caps the size at 90% of the inner radius', () => {
+			expect(
+				getScaledFontSize({ text: '3.7', baseSize: 200, innerRadius: 10 }),
+			).toBeCloseTo(9);
+		});
+	});
+
+	describe('getArcGeometry', () => {
+		it('places the label below for a slice centred at the top (angle 0)', () => {
+			const g = getArcGeometry(0, 0, 100);
+			expect(g.labelX).toBeCloseTo(0);
+			expect(g.labelY).toBeCloseTo(-130);
+			expect(g.lineEndX).toBeCloseTo(0);
+			expect(g.lineEndY).toBeCloseTo(-110);
+			// sin(0) is not > 0 → anchor end.
+			expect(g.textAnchor).toBe('end');
+		});
+
+		it('anchors to the start on the right half (angle pi/2)', () => {
+			const g = getArcGeometry(0, Math.PI, 100);
+			expect(g.labelX).toBeCloseTo(130);
+			expect(g.labelY).toBeCloseTo(0);
+			expect(g.textAnchor).toBe('start');
+		});
+
+		it('anchors to the end on the left half (angle 3pi/2)', () => {
+			const g = getArcGeometry(Math.PI, 2 * Math.PI, 100);
+			expect(g.labelX).toBeCloseTo(-130);
+			expect(g.textAnchor).toBe('end');
+		});
+	});
+
+	describe('lightenColor', () => {
+		it('converts a #rrggbb hex to rgba at the given opacity', () => {
+			expect(lightenColor('#ff0000', 0.4)).toBe('rgba(255, 0, 0, 0.4)');
+		});
+
+		it('accepts hex without a leading #', () => {
+			expect(lightenColor('00ff00', 0.4)).toBe('rgba(0, 255, 0, 0.4)');
+		});
+
+		it('returns the original colour when it is not parseable hex', () => {
+			expect(lightenColor('rgba(0,0,0,1)', 0.4)).toBe('rgba(0,0,0,1)');
+			expect(lightenColor('red', 0.4)).toBe('red');
+		});
+	});
+
+	describe('getFillColor', () => {
+		it('returns the colour unchanged when nothing is active', () => {
+			expect(getFillColor('#ff0000', null)).toBe('#ff0000');
+		});
+
+		it('returns the colour unchanged for the active slice', () => {
+			expect(getFillColor('#ff0000', '#ff0000')).toBe('#ff0000');
+		});
+
+		it('dims non-active slices to 40% opacity', () => {
+			expect(getFillColor('#00ff00', '#ff0000')).toBe('rgba(0, 255, 0, 0.4)');
+		});
+	});
+});

frontend/src/container/DashboardContainer/visualization/charts/Pie/usePieInteractions.ts

@@ -0,0 +1,168 @@
+import { LegendItem } from 'lib/uPlotV2/config/types';
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+	getStoredSeriesVisibility,
+	updateSeriesVisibilityToLocalStorage,
+} from '../../panels/utils/legendVisibilityUtils';
+import { PieSlice } from '../types';
+
+export interface UsePieInteractionsResult {
+	/** The hovered/focused slice (drives donut dimming + tooltip). */
+	active: PieSlice | null;
+	setActive: Dispatch<SetStateAction<PieSlice | null>>;
+	/** Slices currently shown (hidden ones removed). */
+	visibleData: PieSlice[];
+	/** Legend item per slice (`show` reflects hide state). */
+	legendItems: LegendItem[];
+	/** Index of the active slice for the legend's focus highlight, or null. */
+	focusedSeriesIndex: number | null;
+	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+}
+
+// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
+// event target (the shared Legend tags each item with its seriesIndex).
+function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
+	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
+		'[data-legend-item-id]',
+	);
+	const id = el?.dataset.legendItemId;
+	return id != null ? Number(id) : null;
+}
+
+/**
+ * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
+ * uPlot legend — marker toggles one, label isolates), and persistence of the
+ * hidden set to localStorage (keyed by `id`, matched by label) so it survives
+ * reloads. Returns the visible slices, legend items, focus index, and the
+ * legend container handlers.
+ */
+export function usePieInteractions(
+	data: PieSlice[],
+	id?: string,
+): UsePieInteractionsResult {
+	const [active, setActive] = useState<PieSlice | null>(null);
+	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
+		() => new Set(),
+	);
+	const isolatedIndexRef = useRef<number | null>(null);
+
+	const legendItems = useMemo<LegendItem[]>(
+		() =>
+			data.map((slice, index) => ({
+				seriesIndex: index,
+				label: slice.label,
+				color: slice.color,
+				show: !hiddenIndices.has(index),
+			})),
+		[data, hiddenIndices],
+	);
+
+	// Hidden slices drop out so the remaining arcs + centre total recompute.
+	const visibleData = useMemo(
+		() => data.filter((_, index) => !hiddenIndices.has(index)),
+		[data, hiddenIndices],
+	);
+
+	// Rehydrate hide/unhide from localStorage (matched by label) whenever the
+	// data set changes — including first load and every refetch, since the store
+	// is the source of truth and toggles write back to it.
+	useEffect(() => {
+		if (!id || !data.length) {
+			return;
+		}
+		const stored = getStoredSeriesVisibility(id);
+		if (!stored) {
+			return;
+		}
+		const hidden = new Set<number>();
+		data.forEach((slice, index) => {
+			if (stored.find((s) => s.label === slice.label)?.show === false) {
+				hidden.add(index);
+			}
+		});
+		setHiddenIndices(hidden);
+	}, [id, data]);
+
+	// Apply a new hidden set and persist it (label + show) to localStorage.
+	const applyHidden = useCallback(
+		(hidden: Set<number>): void => {
+			setHiddenIndices(hidden);
+			if (id) {
+				updateSeriesVisibilityToLocalStorage(
+					id,
+					data.map((slice, index) => ({
+						label: slice.label,
+						show: !hidden.has(index),
+					})),
+				);
+			}
+		},
+		[id, data],
+	);
+
+	const onLegendMouseMove = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			// Don't focus/dim for hidden slices — they aren't on the donut.
+			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
+		},
+		[data, hiddenIndices],
+	);
+
+	// Marker click toggles just that slice on/off; label click isolates it
+	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
+	const onLegendClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			if (index == null) {
+				return;
+			}
+			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+
+			if (isMarker) {
+				const next = new Set(hiddenIndices);
+				if (next.has(index)) {
+					next.delete(index);
+				} else {
+					next.add(index);
+				}
+				applyHidden(next);
+				return;
+			}
+
+			const isReset = isolatedIndexRef.current === index;
+			isolatedIndexRef.current = isReset ? null : index;
+			if (isReset) {
+				applyHidden(new Set());
+				return;
+			}
+			const next = new Set<number>();
+			data.forEach((_, i) => {
+				if (i !== index) {
+					next.add(i);
+				}
+			});
+			applyHidden(next);
+		},
+		[data, hiddenIndices, applyHidden],
+	);
+
+	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
+
+	const focusedIndex = active ? data.indexOf(active) : -1;
+
+	return {
+		active,
+		setActive,
+		visibleData,
+		legendItems,
+		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
+	};
+}

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

@@ -0,0 +1,110 @@
+/**
+ * Pure presentation helpers for the Pie chart. Kept out of the component file
+ * so the renderer stays declarative (per the one-component-per-file rule).
+ */
+
+interface ScaledFontSizeArgs {
+	text: string;
+	baseSize: number;
+	innerRadius: number;
+}
+
+/**
+ * Shrinks the centre-total font as the text gets longer so it never overflows
+ * the donut hole. Ported from the V1 PiePanelWrapper.
+ */
+export function getScaledFontSize({
+	text,
+	baseSize,
+	innerRadius,
+}: ScaledFontSizeArgs): number {
+	if (!text) {
+		return baseSize;
+	}
+
+	const { length } = text;
+	// More aggressive scaling for very long numbers.
+	const scaleFactor = Math.max(0.3, 1 - (length - 3) * 0.09);
+	// Don't use more than 90% of the inner radius.
+	const maxSize = innerRadius * 0.9;
+
+	return Math.min(baseSize * scaleFactor, maxSize);
+}
+
+export interface ArcGeometry {
+	/** Outer point where the leader label sits. */
+	labelX: number;
+	labelY: number;
+	/** Elbow point where the leader line bends toward the label. */
+	lineEndX: number;
+	lineEndY: number;
+	/** Anchor the label left/right depending on which half of the circle it's in. */
+	textAnchor: 'start' | 'end';
+}
+
+/**
+ * Computes the leader-line / label geometry for one arc from its angular span.
+ * Pulled out of the render prop so the SVG markup stays declarative.
+ */
+export function getArcGeometry(
+	startAngle: number,
+	endAngle: number,
+	radius: number,
+): ArcGeometry {
+	const angle = (startAngle + endAngle) / 2;
+	const labelRadius = radius * 1.3;
+	const lineEndRadius = radius * 1.1;
+	return {
+		labelX: Math.sin(angle) * labelRadius,
+		labelY: -Math.cos(angle) * labelRadius,
+		lineEndX: Math.sin(angle) * lineEndRadius,
+		lineEndY: -Math.cos(angle) * lineEndRadius,
+		textAnchor: Math.sin(angle) > 0 ? 'start' : 'end',
+	};
+}
+
+interface ParsedRgb {
+	r: number;
+	g: number;
+	b: number;
+}
+
+// Parses `#rrggbb` into its components. Returns null for anything else (e.g. an
+// already-rgba string), letting callers fall back to the original colour.
+function hexToRgb(color: string): ParsedRgb | null {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+	return result
+		? {
+				r: parseInt(result[1], 16),
+				g: parseInt(result[2], 16),
+				b: parseInt(result[3], 16),
+			}
+		: null;
+}
+
+/**
+ * Returns an rgba() string for `color` at the given opacity. Used to dim the
+ * non-hovered slices. Falls back to the original colour if it can't be parsed.
+ */
+export function lightenColor(color: string, opacity: number): string {
+	const rgb = hexToRgb(color);
+	if (!rgb) {
+		return color;
+	}
+	return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+}
+
+/**
+ * Resolves the fill for a slice given the currently-hovered slice colour:
+ * everything but the active slice dims to 40% opacity. With nothing hovered
+ * (`activeColor === null`) every slice keeps its full colour.
+ */
+export function getFillColor(
+	color: string,
+	activeColor: string | null,
+): string {
+	if (activeColor === null) {
+		return color;
+	}
+	return activeColor === color ? color : lightenColor(color, 0.4);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -3,13 +3,14 @@ import { PrecisionOption } from 'components/Graph/types';
 import {
 	IRenderTooltipFooterArgs,
 	LegendConfig,
+	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
-	TooltipClickData,
+	ChartClickData,
 } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
@@ -22,10 +23,10 @@ interface BaseChartProps {
 	/** Key that pins the tooltip while hovering. Defaults to DEFAULT_PIN_TOOLTIP_KEY ('l'). */
 	pinKey?: string;
 	/** Called when the user clicks the uPlot overlay. Receives resolved click data. */
-	onClick?: (clickData: TooltipClickData) => void;
+	onClick?: (clickData: ChartClickData) => void;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
+	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -69,3 +70,36 @@ export type ChartProps =
 	| TimeSeriesChartProps
 	| BarChartProps
 	| HistogramChartProps;
+
+/**
+ * One resolved pie/donut slice: a display label, its (already parsed) positive
+ * numeric value, and the colour used for the arc + legend swatch.
+ */
+export interface PieSlice {
+	label: string;
+	value: number;
+	color: string;
+}
+
+/**
+ * Props for the Pie chart. Unlike the others above, Pie is NOT uPlot-based
+ * (it renders with @visx), so it deliberately does not extend BaseChartProps /
+ * UPlotBasedChartProps — it takes pre-resolved slices and self-measures its
+ * draw area rather than receiving a uPlot config + aligned data.
+ */
+export interface PieChartProps {
+	data: PieSlice[];
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
+	isDarkMode: boolean;
+	/** Legend placement. Drives the chart-vs-legend layout. Default BOTTOM. */
+	position?: LegendPosition;
+	/**
+	 * Widget id used to persist per-slice hide/unhide state to localStorage
+	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
+	 */
+	id?: string;
+	/** Fired when a slice (or its legend entry) is clicked. */
+	onSliceClick?: (slice: PieSlice) => void;
+	'data-testid'?: string;
+}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/usePanelContextMenu.test.ts

@@ -1,8 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 
 import { usePanelContextMenu } from '../usePanelContextMenu';
 
@@ -47,10 +46,7 @@ const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
 const mockQueryResponse = {
 	data: undefined,
 	isLoading: false,
-} as unknown as UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps, unknown>,
-	Error
->;
+} as unknown as UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 
 describe('usePanelContextMenu', () => {
 	beforeEach(() => {

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

@@ -10,17 +10,13 @@ import {
 	PopoverPosition,
 	useCoordinates,
 } from 'periscope/components/ContextMenu';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 interface UseTimeSeriesContextMenuParams {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	enableDrillDown?: boolean;
 }
 

frontend/src/container/DashboardContainer/visualization/panels/components/__tests__/TooltipFooter.test.tsx

@@ -1,16 +1,10 @@
+import { logEventMock } from '__tests__/logEventMock';
 import { Events } from 'constants/events';
 import { DEFAULT_PIN_TOOLTIP_KEY } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import TooltipFooter from '../TooltipFooter';
 
-const mockLogEvent = jest.fn();
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: (...args: unknown[]): unknown => mockLogEvent(...args),
-}));
-
 describe('TooltipFooter', () => {
 	const defaultProps = {
 		id: 'panel-123',
@@ -84,7 +78,7 @@ describe('TooltipFooter', () => {
 
 			await user.click(screen.getByTestId('uplot-tooltip-unpin'));
 
-			expect(mockLogEvent).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
+			expect(logEventMock).toHaveBeenCalledWith(Events.TOOLTIP_UNPINNED, {
 				id: 'panel-123',
 			});
 			expect(dismiss).toHaveBeenCalledTimes(1);

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -717,13 +717,13 @@ function ExplorerOptions({
 
 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const getQueryName = (query: Query): string => {

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

@@ -19,6 +19,7 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
+			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {

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

@@ -1,7 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -67,20 +66,6 @@ function GridCardGraph({
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const [isInternalServerError, setIsInternalServerError] =
 		useState<boolean>(false);
-	const queryRangeCalledRef = useRef(false);
-
-	useEffect(() => {
-		const timeoutId = setTimeout(() => {
-			if (!queryRangeCalledRef.current) {
-				Sentry.captureEvent({
-					message: `Dashboard query range not called within expected timeframe for widget ${widget?.id}`,
-					level: 'warning',
-				});
-			}
-		}, 120000);
-		return (): void => clearTimeout(timeoutId);
-	}, [widget?.id]);
-
 	const {
 		minTime,
 		maxTime,
@@ -271,14 +256,12 @@ function GridCardGraph({
 						});
 					}
 				}
-				queryRangeCalledRef.current = true;
 			},
 			onSettled: (data) => {
 				dataAvailable?.(
 					isDataAvailableByPanelType(data?.payload?.data, widget?.panelTypes),
 				);
 				getGraphData?.(data?.payload?.data);
-				queryRangeCalledRef.current = true;
 			},
 		},
 	);

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

@@ -5,9 +5,11 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
 
@@ -21,10 +23,7 @@ export interface GraphVisibilityLegendEntryProps {
 
 export interface WidgetGraphComponentProps {
 	widget: Widgets;
-	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	errorMessage: string | undefined;
 	version?: string;
 	threshold?: ReactNode;

frontend/src/container/GridValueComponent/types.ts

@@ -1,8 +1,7 @@
 import { UseQueryResult } from 'react-query';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
-import { SuccessResponse } from 'types/api';
 import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 export type GridValueComponentProps = {
@@ -13,10 +12,7 @@ export type GridValueComponentProps = {
 	thresholds?: ThresholdProps[];
 	// Context menu related props
 	widget?: Widgets;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
+	queryResponse?: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
 	contextLinks?: ContextLinksData;
 	enableDrillDown?: boolean;
 };

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -201,7 +201,7 @@ export default function SavedViews({
 								});
 
 								window.open(
-									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+									'https://signoz.io/docs/product-features/saved-view/',
 									'_blank',
 									'noopener noreferrer',
 								);

frontend/src/container/Home/constants.ts

@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {
 
 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
+	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };
 

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -121,11 +121,6 @@ function Hosts(): JSX.Element {
 		[dotMetricsEnabled],
 	);
 
-	const primaryFilterKeys = useMemo(
-		() => [dotMetricsEnabled ? 'host.name' : 'host_name'],
-		[dotMetricsEnabled],
-	);
-
 	const controlListPrefix = !showFilters ? (
 		<div className={styles.quickFiltersToggleContainer}>
 			<Button
@@ -188,7 +183,6 @@ function Hosts(): JSX.Element {
 				getEntityName={hostGetEntityName}
 				getInitialLogTracesFilters={getInitialLogTracesFilters}
 				getInitialEventsFilters={hostInitialEventsFilter}
-				primaryFilterKeys={primaryFilterKeys}
 				metadataConfig={hostDetailsMetadataConfig}
 				entityWidgetInfo={hostWidgetInfo}
 				getEntityQueryPayload={getHostMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -101,10 +101,6 @@ export interface K8sBaseDetailsProps<T> {
 	getEntityName: (entity: T) => string;
 	getInitialLogTracesFilters: (entity: T) => TagFilterItem[];
 	getInitialEventsFilters: (entity: T) => TagFilterItem[];
-	/**
-	 * @deprecated It's not needed anymore, remove in the next PR
-	 */
-	primaryFilterKeys: string[];
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
 	entityWidgetInfo: {
 		title: string;

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
+								href="https://signoz.io/docs/userguide/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
+					'https://signoz.io/docs/userguide/hostmetrics/',
 				);
 			});
 		});

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemFilters,
 	k8sClusterInitialEventsFilter,
-	k8sClusterInitialFilters,
 	k8sClusterInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sClustersList({
 				getEntityName={k8sClusterGetEntityName}
 				getInitialLogTracesFilters={k8sClusterInitialLogTracesFilter}
 				getInitialEventsFilters={k8sClusterInitialEventsFilter}
-				primaryFilterKeys={k8sClusterInitialFilters}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -33,8 +33,6 @@ export const k8sClusterGetSelectedItemFilters = (
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sClusterData>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.meta.k8s_cluster_name }];
 
-export const k8sClusterInitialFilters = [QUERY_KEYS.K8S_CLUSTER_NAME];
-
 export const k8sClusterInitialEventsFilter = (
 	item: K8sClusterData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDaemonSetGetEntityName,
 	k8sDaemonSetGetSelectedItemFilters,
 	k8sDaemonSetInitialEventsFilter,
-	k8sDaemonSetInitialFilters,
 	k8sDaemonSetInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDaemonSetsList({
 				getEntityName={k8sDaemonSetGetEntityName}
 				getInitialLogTracesFilters={k8sDaemonSetInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDaemonSetInitialEventsFilter}
-				primaryFilterKeys={k8sDaemonSetInitialFilters}
 				metadataConfig={k8sDaemonSetDetailsMetadataConfig}
 				entityWidgetInfo={daemonSetWidgetInfo}
 				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/DaemonSets/constants.ts

@@ -46,11 +46,6 @@ export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDaem
 		},
 	];
 
-export const k8sDaemonSetInitialFilters = [
-	QUERY_KEYS.K8S_DAEMON_SET_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDaemonSetInitialEventsFilter = (
 	item: K8sDaemonSetsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDeploymentGetEntityName,
 	k8sDeploymentGetSelectedItemFilters,
 	k8sDeploymentInitialEventsFilter,
-	k8sDeploymentInitialFilters,
 	k8sDeploymentInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDeploymentsList({
 				getEntityName={k8sDeploymentGetEntityName}
 				getInitialLogTracesFilters={k8sDeploymentInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDeploymentInitialEventsFilter}
-				primaryFilterKeys={k8sDeploymentInitialFilters}
 				metadataConfig={k8sDeploymentDetailsMetadataConfig}
 				entityWidgetInfo={deploymentWidgetInfo}
 				getEntityQueryPayload={getDeploymentMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Deployments/constants.ts

@@ -46,11 +46,6 @@ export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDep
 		},
 	];
 
-export const k8sDeploymentInitialFilters = [
-	QUERY_KEYS.K8S_DEPLOYMENT_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDeploymentInitialEventsFilter = (
 	item: K8sDeploymentsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sJobGetEntityName,
 	k8sJobGetSelectedItemFilters,
 	k8sJobInitialEventsFilter,
-	k8sJobInitialFilters,
 	k8sJobInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sJobsList({
 				getEntityName={k8sJobGetEntityName}
 				getInitialLogTracesFilters={k8sJobInitialLogTracesFilter}
 				getInitialEventsFilters={k8sJobInitialEventsFilter}
-				primaryFilterKeys={k8sJobInitialFilters}
 				metadataConfig={k8sJobDetailsMetadataConfig}
 				entityWidgetInfo={jobWidgetInfo}
 				getEntityQueryPayload={getJobMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Jobs/constants.ts

@@ -46,11 +46,6 @@ export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sJobsData>[
 		},
 	];
 
-export const k8sJobInitialFilters = [
-	QUERY_KEYS.K8S_JOB_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sJobInitialEventsFilter = (
 	item: K8sJobsData,
 ): ReturnType<typeof createFilterItem>[] => [