feat: span mapper test endpoint

* refactor(quick-filters): extract checkbox value fetching into hook

* refactor(quick-filters): extract checkbox query algebra into pure module

* refactor(quick-filters): extract checkbox glue hooks

* refactor(quick-filters): split checkbox renderers into components

docs/api/openapi.yml

@@ -6992,6 +6992,16 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableSpanMapperTest:
+      properties:
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      required:
+      - spans
+      type: object
     SpantypesGettableTraceAggregations:
       properties:
         aggregations:
@@ -7079,6 +7089,39 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableSpanMapperTest:
+      properties:
+        groups:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapperTestGroup'
+          nullable: true
+          type: array
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      required:
+      - spans
+      - groups
+      type: object
+    SpantypesPostableSpanMapperTestGroup:
+      properties:
+        condition:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
+        enabled:
+          type: boolean
+        mappers:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapper'
+          nullable: true
+          type: array
+        name:
+          type: string
+      required:
+      - name
+      - condition
+      type: object
     SpantypesPostableTraceAggregations:
       properties:
         aggregations:
@@ -7240,6 +7283,17 @@ components:
       - operation
       - priority
       type: object
+    SpantypesSpanMapperTestSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        resource:
+          additionalProperties: {}
+          nullable: true
+          type: object
+      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -12797,6 +12851,69 @@ paths:
       summary: Update a span mapper
       tags:
       - spanmapper
+  /api/v1/span_mapper_groups/test:
+    post:
+      deprecated: false
+      description: Tests how span mappers would transform sample spans
+      operationId: TestSpanMappers
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableSpanMapperTest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableSpanMapperTest'
+                  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: Test span mappers against sample spans
+      tags:
+      - spanmapper
   /api/v1/stats:
     get:
       deprecated: false

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

@@ -8135,6 +8135,44 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export type SpantypesSpanMapperTestSpanDTOAttributesAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOAttributes =
+	SpantypesSpanMapperTestSpanDTOAttributesAnyOf | null;
+
+export type SpantypesSpanMapperTestSpanDTOResourceAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOResource =
+	SpantypesSpanMapperTestSpanDTOResourceAnyOf | null;
+
+export interface SpantypesSpanMapperTestSpanDTO {
+	/**
+	 * @type object,null
+	 */
+	attributes?: SpantypesSpanMapperTestSpanDTOAttributes;
+	/**
+	 * @type object,null
+	 */
+	resource?: SpantypesSpanMapperTestSpanDTOResource;
+}
+
+export interface SpantypesGettableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	spans: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -8430,6 +8468,33 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 	name: string;
 }
 
+export interface SpantypesPostableSpanMapperTestGroupDTO {
+	condition: SpantypesSpanMapperGroupConditionDTO | null;
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+	/**
+	 * @type array,null
+	 */
+	mappers?: SpantypesPostableSpanMapperDTO[] | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
+export interface SpantypesPostableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	groups: SpantypesPostableSpanMapperTestGroupDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	spans: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
 export interface SpantypesSpanAggregationDTO {
 	aggregation: SpantypesSpanAggregationTypeDTO;
 	field: TelemetrytypesTelemetryFieldKeyDTO;
@@ -9798,6 +9863,14 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type TestSpanMappers200 = {
+	data: SpantypesGettableSpanMapperTestDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetStats200Data = { [key: string]: unknown };
 
 export type GetStats200 = {

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

@@ -30,8 +30,10 @@ import type {
 	RenderErrorResponseDTO,
 	SpantypesPostableSpanMapperDTO,
 	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesPostableSpanMapperTestDTO,
 	SpantypesUpdatableSpanMapperDTO,
 	SpantypesUpdatableSpanMapperGroupDTO,
+	TestSpanMappers200,
 	UpdateSpanMapperGroupPathParameters,
 	UpdateSpanMapperPathParameters,
 } from '../sigNoz.schemas';
@@ -780,3 +782,86 @@ export const useUpdateSpanMapper = <
 > => {
 	return useMutation(getUpdateSpanMapperMutationOptions(options));
 };
+/**
+ * Tests how span mappers would transform sample spans
+ * @summary Test span mappers against sample spans
+ */
+export const testSpanMappers = (
+	spantypesPostableSpanMapperTestDTO?: BodyType<SpantypesPostableSpanMapperTestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<TestSpanMappers200>({
+		url: `/api/v1/span_mapper_groups/test`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableSpanMapperTestDTO,
+		signal,
+	});
+};
+
+export const getTestSpanMappersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	const mutationKey = ['testSpanMappers'];
+	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 testSpanMappers>>,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testSpanMappers(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestSpanMappersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testSpanMappers>>
+>;
+export type TestSpanMappersMutationBody =
+	| BodyType<SpantypesPostableSpanMapperTestDTO>
+	| undefined;
+export type TestSpanMappersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Test span mappers against sample spans
+ */
+export const useTestSpanMappers = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	return useMutation(getTestSpanMappersMutationOptions(options));
+};

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

@@ -1,67 +1,29 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
-import { Button, Skeleton } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { OPERATORS } from 'constants/antlrQueryConstants';
-import {
-	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isFunction } from 'lodash-es';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { v4 as uuid } from 'uuid';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+import CheckboxFilterHeader from './CheckboxFilterHeader';
+import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import { isKeyMatch } from './utils';
+import useActiveQueryIndex from './useActiveQueryIndex';
+import useCheckboxDisclosure from './useCheckboxDisclosure';
+import useCheckboxFilterActions from './useCheckboxFilterActions';
+import useCheckboxFilterState from './useCheckboxFilterState';
+import useCheckboxFilterValues from './useCheckboxFilterValues';
 
 import './Checkbox.styles.scss';
 
-const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
-const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
-
 const SOURCES_WITH_EMPTY_STATE_ENABLED = [QuickFiltersSource.LOGS_EXPLORER];
 
-// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
-const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
-
-/**
- * Returns the correct NOT_IN operator value based on source.
- * InfraMonitoring backend expects 'nin', others expect 'not in'.
- */
-function getNotInOperator(source: QuickFiltersSource): string {
-	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
-		return 'nin';
-	}
-	return getOperatorValue('NOT_IN');
-}
-
-function setDefaultValues(
-	values: string[],
-	trueOrFalse: boolean,
-): Record<string, boolean> {
-	const defaultState: Record<string, boolean> = {};
-	values.forEach((val) => {
-		defaultState[val] = trueOrFalse;
-	});
-	return defaultState;
-}
 interface ICheckboxProps {
 	filter: IQuickFiltersConfig;
 	source: QuickFiltersSource;
@@ -72,194 +34,39 @@ interface ICheckboxProps {
 export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const { source, filter, onFilterChange } = props;
 	const [searchText, setSearchText] = useState<string>('');
-	// null = no user action, true = user opened, false = user closed
-	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
-	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
+
+	const activeQueryIndex = useActiveQueryIndex(source);
 
 	const {
-		lastUsedQuery,
-		currentQuery,
-		redirectWithQueryBuilderData,
-		panelType,
-	} = useQueryBuilder();
-
-	// Determine if we're in ListView mode
-	const isListView = panelType === PANEL_TYPES.LIST;
-	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
-	// Otherwise use lastUsedQuery for non-ListView modes
-	const activeQueryIndex = useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
-
-	// Check if this filter has active filters in the query
-	const isSomeFilterPresentForCurrentAttribute = useMemo(
-		() =>
-			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
-				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
-			),
-		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
-	);
-
-	// Derive isOpen from filter state + user action
-	const isOpen = useMemo(() => {
-		// If user explicitly toggled, respect that
-		if (userToggleState !== null) {
-			return userToggleState;
-		}
-
-		// Auto-open if this filter has active filters in the query
-		if (isSomeFilterPresentForCurrentAttribute) {
-			return true;
-		}
-
-		// Otherwise use default behavior (first 2 filters open)
-		return filter.defaultOpen;
-	}, [
-		userToggleState,
+		isOpen,
 		isSomeFilterPresentForCurrentAttribute,
-		filter.defaultOpen,
-	]);
+		visibleItemsCount,
+		onToggleOpen,
+		onShowMore,
+	} = useCheckboxDisclosure({ filter, activeQueryIndex });
 
-	const { data, isLoading } = useGetAggregateValues(
-		{
-			aggregateOperator: filter.aggregateOperator || 'noop',
-			dataSource: filter.dataSource || DataSource.LOGS,
-			aggregateAttribute: filter.aggregateAttribute || '',
-			attributeKey: filter.attributeKey.key,
-			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
-			tagType: filter.attributeKey.type || '',
-			searchText: searchText ?? '',
-		},
-		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	);
+	const { attributeValues, isLoading } = useCheckboxFilterValues({
+		filter,
+		source,
+		searchText,
+		isOpen,
+	});
 
-	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
-		useGetQueryKeyValueSuggestions({
-			key: filter.attributeKey.key,
-			signal: filter.dataSource || DataSource.LOGS,
-			signalSource: 'meter',
-			options: {
-				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
-				keepPreviousData: true,
-			},
-		});
+	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
+		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
 
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
-
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
-			const responseData = keyValueSuggestions?.data as any;
-			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
-
-			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
-				// Strict filtering for empty string - we'll handle it as a special case if needed
-				.filter(
-					(value: string | null | undefined): value is string =>
-						value !== null && value !== undefined && value !== '',
-				);
-
-			// Generate options from number values
-			const numberOptions = numberValues
-				.filter(
-					(value: number | null | undefined): value is number =>
-						value !== null && value !== undefined,
-				)
-				.map((value: number) => value.toString());
-
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
-
-		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter(
-			(val) => val !== undefined && val !== null,
-		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
+	const { onChange, onClear } = useCheckboxFilterActions({
+		filter,
+		source,
+		attributeValues,
+		activeQueryIndex,
+		onFilterChange,
+	});
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
 
-	// derive the state of each filter key here in the renderer itself and keep it in sync with current query
-	// also we need to keep a note of last focussed query.
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const currentFilterState = useMemo(() => {
-		let filterState: Record<string, boolean> = setDefaultValues(
-			attributeValues,
-			false,
-		);
-		const filterSync = currentQuery?.builder.queryData?.[
-			activeQueryIndex
-		]?.filters?.items.find((item) =>
-			isKeyMatch(item.key?.key, filter.attributeKey.key),
-		);
-
-		if (filterSync) {
-			if (SELECTED_OPERATORS.includes(filterSync.op)) {
-				if (isArray(filterSync.value)) {
-					filterSync.value.forEach((val) => {
-						filterState[String(val)] = true;
-					});
-				} else if (typeof filterSync.value === 'string') {
-					filterState[filterSync.value] = true;
-				} else if (typeof filterSync.value === 'boolean') {
-					filterState[String(filterSync.value)] = true;
-				} else if (typeof filterSync.value === 'number') {
-					filterState[String(filterSync.value)] = true;
-				}
-			} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
-				filterState = setDefaultValues(attributeValues, true);
-				if (isArray(filterSync.value)) {
-					filterSync.value.forEach((val) => {
-						filterState[String(val)] = false;
-					});
-				} else if (typeof filterSync.value === 'string') {
-					filterState[filterSync.value] = false;
-				} else if (typeof filterSync.value === 'boolean') {
-					filterState[String(filterSync.value)] = false;
-				} else if (typeof filterSync.value === 'number') {
-					filterState[String(filterSync.value)] = false;
-				}
-			}
-		} else {
-			filterState = setDefaultValues(attributeValues, true);
-		}
-		return filterState;
-	}, [
-		attributeValues,
-		currentQuery?.builder.queryData,
-		filter.attributeKey,
-		activeQueryIndex,
-	]);
-
-	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
-	const isFilterDisabled = useMemo(
-		() =>
-			(currentQuery?.builder?.queryData?.[
-				activeQueryIndex
-			]?.filters?.items?.filter((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
-			)?.length || 0) > 1,
-
-		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
-	);
-
-	// variable to check if the current filter has multiple values to its name in the key op value section
-	const isMultipleValuesTrueForTheKey =
-		Object.values(currentFilterState).filter((val) => val).length > 1;
-
 	// Sort checked items to the top, then unchecked items
 	const currentAttributeKeys = useMemo(() => {
 		const checkedValues = attributeValues.filter(
@@ -277,293 +84,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		[currentAttributeKeys, currentFilterState],
 	);
 
-	const handleClearFilterAttribute = (): void => {
-		const preparedQuery: Query = {
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: currentQuery.builder.queryData.map((item, idx) => ({
-					...item,
-					filter: {
-						expression: removeKeysFromExpression(item.filter?.expression ?? '', [
-							filter.attributeKey.key,
-						]),
-					},
-					filters: {
-						...item.filters,
-						items:
-							idx === activeQueryIndex
-								? item.filters?.items?.filter(
-										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-									) || []
-								: [...(item.filters?.items || [])],
-						op: item.filters?.op || 'AND',
-					},
-				})),
-			},
-		};
-
-		if (onFilterChange && isFunction(onFilterChange)) {
-			onFilterChange(preparedQuery);
-		} else {
-			redirectWithQueryBuilderData(preparedQuery);
-		}
-	};
-
-	const onChange = (
-		value: string,
-		checked: boolean,
-		isOnlyOrAllClicked: boolean,
-		// eslint-disable-next-line sonarjs/cognitive-complexity
-	): void => {
-		const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
-
-		// if only or all are clicked we do not need to worry about anything just override whatever we have
-		// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
-		if (isOnlyOrAllClicked && query?.filters?.items) {
-			const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
-				? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-					? 'All'
-					: 'Only'
-				: 'Only';
-			query.filters.items = query.filters.items.filter(
-				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
-			);
-
-			if (query.filter?.expression) {
-				query.filter.expression = removeKeysFromExpression(
-					query.filter.expression,
-					[filter.attributeKey.key],
-				);
-			}
-
-			if (isOnlyOrAll === 'Only') {
-				const newFilterItem: TagFilterItem = {
-					id: uuid(),
-					op: getOperatorValue(OPERATORS.IN),
-					key: filter.attributeKey,
-					value,
-				};
-				query.filters.items = [...query.filters.items, newFilterItem];
-			}
-		} else if (query?.filters?.items) {
-			if (
-				query.filters?.items?.some((item) =>
-					isKeyMatch(item.key?.key, filter.attributeKey.key),
-				)
-			) {
-				// if there is already a running filter for the current attribute key then
-				// we split the cases by which particular operator is present right now!
-				const currentFilter = query.filters?.items?.find((q) =>
-					isKeyMatch(q.key?.key, filter.attributeKey.key),
-				);
-				if (currentFilter) {
-					const runningOperator = currentFilter?.op;
-					switch (runningOperator) {
-						case 'in':
-							if (checked) {
-								// if it's an IN operator then if we are checking another value it get's added to the
-								// filter clause. example -  key IN [value1, currentSelectedValue]
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								} else {
-									// if the current state wasn't an array we make it one and add our value
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else if (!checked) {
-								// if we are removing some value when the running operator is IN we filter.
-								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value.filter((val) => val !== value),
-									};
-
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
-									}
-								} else {
-									// if not an array remove the whole thing altogether!
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-									);
-								}
-							}
-							break;
-						case 'nin':
-						case 'not in':
-							// if the current running operator is NIN then when unchecking the value it gets
-							// added to the clause like key NIN [value1 , currentUnselectedValue]
-							if (!checked) {
-								// in case of array add the currentUnselectedValue to the list.
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								} else {
-									// in case of not an array make it one!
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else if (checked) {
-								// opposite of above!
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value.filter((val) => val !== value),
-									};
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-										if (query.filter?.expression) {
-											query.filter.expression = removeKeysFromExpression(
-												query.filter.expression,
-												[filter.attributeKey.key],
-											);
-										}
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
-									}
-								} else {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value === value ? null : currentFilter.value,
-									};
-									if (newFilter.value === null && query.filter?.expression) {
-										query.filter.expression = removeKeysFromExpression(
-											query.filter.expression,
-											[filter.attributeKey.key],
-										);
-									}
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-									);
-								}
-							}
-							break;
-						case '=':
-							if (checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getOperatorValue(OPERATORS.IN),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (!checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						case '!=':
-							if (!checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getNotInOperator(source),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						default:
-							break;
-					}
-				}
-			} else {
-				// case  - when there is no filter for the current key that means all are selected right now.
-				const newFilterItem: TagFilterItem = {
-					id: uuid(),
-					op: getNotInOperator(source),
-					key: filter.attributeKey,
-					value,
-				};
-				query.filters.items = [...query.filters.items, newFilterItem];
-			}
-		}
-		const finalQuery = {
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: [
-					...currentQuery.builder.queryData.map((q, idx) => {
-						if (idx === activeQueryIndex) {
-							return query;
-						}
-						return q;
-					}),
-				],
-			},
-		};
-
-		if (onFilterChange && isFunction(onFilterChange)) {
-			onFilterChange(finalQuery);
-		} else {
-			redirectWithQueryBuilderData(finalQuery);
-		}
-	};
-
 	const isEmptyStateWithDocsEnabled =
 		SOURCES_WITH_EMPTY_STATE_ENABLED.includes(source) &&
 		!searchText &&
@@ -571,48 +91,19 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 	return (
 		<div className="checkbox-filter">
-			<section
-				className="filter-header-checkbox"
-				onClick={(): void => {
-					if (isOpen) {
-						setUserToggleState(false);
-						setVisibleItemsCount(10);
-					} else {
-						setUserToggleState(true);
-					}
-				}}
-			>
-				<section className="left-action">
-					{isOpen ? (
-						<ChevronDown size={13} cursor="pointer" />
-					) : (
-						<ChevronRight size={13} cursor="pointer" />
-					)}
-					<Typography.Text className="title">{filter.title}</Typography.Text>
+			<CheckboxFilterHeader
+				title={filter.title}
+				isOpen={isOpen}
+				showClearAll={!!attributeValues.length}
+				onToggleOpen={onToggleOpen}
+				onClear={onClear}
+			/>
+			{isOpen && isLoading && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
 				</section>
-				<section className="right-action">
-					{isOpen && !!attributeValues.length && (
-						<Typography.Text
-							className="clear-all"
-							onClick={(e): void => {
-								e.stopPropagation();
-								e.preventDefault();
-								handleClearFilterAttribute();
-							}}
-						>
-							Clear All
-						</Typography.Text>
-					)}
-				</section>
-			</section>
-			{isOpen &&
-				(isLoading || isLoadingKeyValueSuggestions) &&
-				!attributeValues.length && (
-					<section className="loading">
-						<Skeleton paragraph={{ rows: 4 }} />
-					</section>
-				)}
-			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
+			)}
+			{isOpen && !isLoading && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
 						<section className="search">
@@ -634,48 +125,24 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											data-testid="filter-separator"
 										/>
 									)}
-									<div className="value">
-										<Checkbox
-											onChange={(checked): void =>
-												onChange(value, checked === true, false)
-											}
-											value={currentFilterState[value]}
-											disabled={isFilterDisabled}
-											className="check-box"
-										/>
-
-										<div
-											className={cx(
-												'checkbox-value-section',
-												isFilterDisabled ? 'filter-disabled' : '',
-											)}
-											onClick={(): void => {
-												if (isFilterDisabled) {
-													return;
-												}
-												onChange(value, currentFilterState[value], true);
-											}}
-										>
-											<div className={`${filter.title} label-${value}`} />
-											{filter.customRendererForValue ? (
-												filter.customRendererForValue(value)
-											) : (
-												<Typography.Text className="value-string" truncate={1}>
-													{String(value)}
-												</Typography.Text>
-											)}
-											<Button type="text" className="only-btn">
-												{isSomeFilterPresentForCurrentAttribute
-													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-														? 'All'
-														: 'Only'
-													: 'Only'}
-											</Button>
-											<Button type="text" className="toggle-btn">
-												Toggle
-											</Button>
-										</div>
-									</div>
+									<CheckboxValueRow
+										value={value}
+										checked={currentFilterState[value]}
+										disabled={isFilterDisabled}
+										title={filter.title}
+										onlyButtonLabel={
+											isSomeFilterPresentForCurrentAttribute
+												? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+													? 'All'
+													: 'Only'
+												: 'Only'
+										}
+										customRendererForValue={filter.customRendererForValue}
+										onCheckboxChange={(checked): void => onChange(value, checked, false)}
+										onOnlyOrAllClick={(): void =>
+											onChange(value, currentFilterState[value], true)
+										}
+									/>
 								</Fragment>
 							))}
 						</section>
@@ -688,10 +155,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<Typography.Text
-								className="show-more-text"
-								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
-							>
+							<Typography.Text className="show-more-text" onClick={onShowMore}>
 								Show More...
 							</Typography.Text>
 						</section>

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

@@ -0,0 +1,47 @@
+import { Typography } from '@signozhq/ui/typography';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+
+interface CheckboxFilterHeaderProps {
+	title: string;
+	isOpen: boolean;
+	showClearAll: boolean;
+	onToggleOpen: () => void;
+	onClear: () => void;
+}
+
+function CheckboxFilterHeader({
+	title,
+	isOpen,
+	showClearAll,
+	onToggleOpen,
+	onClear,
+}: CheckboxFilterHeaderProps): JSX.Element {
+	return (
+		<section className="filter-header-checkbox" onClick={onToggleOpen}>
+			<section className="left-action">
+				{isOpen ? (
+					<ChevronDown size={13} cursor="pointer" />
+				) : (
+					<ChevronRight size={13} cursor="pointer" />
+				)}
+				<Typography.Text className="title">{title}</Typography.Text>
+			</section>
+			<section className="right-action">
+				{isOpen && showClearAll && (
+					<Typography.Text
+						className="clear-all"
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							onClear();
+						}}
+					>
+						Clear All
+					</Typography.Text>
+				)}
+			</section>
+		</section>
+	);
+}
+
+export default CheckboxFilterHeader;

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

@@ -0,0 +1,68 @@
+import { Button } from 'antd';
+import { Checkbox } from '@signozhq/ui/checkbox';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+interface CheckboxValueRowProps {
+	value: string;
+	checked: boolean;
+	disabled: boolean;
+	title: string;
+	onlyButtonLabel: string;
+	customRendererForValue?: (value: string) => JSX.Element;
+	onCheckboxChange: (checked: boolean) => void;
+	onOnlyOrAllClick: () => void;
+}
+
+function CheckboxValueRow({
+	value,
+	checked,
+	disabled,
+	title,
+	onlyButtonLabel,
+	customRendererForValue,
+	onCheckboxChange,
+	onOnlyOrAllClick,
+}: CheckboxValueRowProps): JSX.Element {
+	return (
+		<div className="value">
+			<Checkbox
+				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
+				value={checked}
+				disabled={disabled}
+				className="check-box"
+			/>
+
+			<div
+				className={cx('checkbox-value-section', disabled ? 'filter-disabled' : '')}
+				onClick={(): void => {
+					if (disabled) {
+						return;
+					}
+					onOnlyOrAllClick();
+				}}
+			>
+				<div className={`${title} label-${value}`} />
+				{customRendererForValue ? (
+					customRendererForValue(value)
+				) : (
+					<Typography.Text className="value-string" truncate={1}>
+						{String(value)}
+					</Typography.Text>
+				)}
+				<Button type="text" className="only-btn">
+					{onlyButtonLabel}
+				</Button>
+				<Button type="text" className="toggle-btn">
+					Toggle
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+CheckboxValueRow.defaultProps = {
+	customRendererForValue: undefined,
+};
+
+export default CheckboxValueRow;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -0,0 +1,417 @@
+/* eslint-disable sonarjs/no-identical-functions */
+import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
+import {
+	IQuickFiltersConfig,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import { OPERATORS } from 'constants/antlrQueryConstants';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { cloneDeep, isArray } from 'lodash-es';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuid } from 'uuid';
+
+import { isKeyMatch } from './utils';
+
+export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
+export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
+
+// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
+const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
+
+/**
+ * Returns the correct NOT_IN operator value based on source.
+ * InfraMonitoring backend expects 'nin', others expect 'not in'.
+ */
+export function getNotInOperator(source: QuickFiltersSource): string {
+	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
+		return 'nin';
+	}
+	return getOperatorValue('NOT_IN');
+}
+
+function setDefaultValues(
+	values: string[],
+	trueOrFalse: boolean,
+): Record<string, boolean> {
+	const defaultState: Record<string, boolean> = {};
+	values.forEach((val) => {
+		defaultState[val] = trueOrFalse;
+	});
+	return defaultState;
+}
+
+/**
+ * Derives the checked/unchecked state for each attribute value by reading the
+ * active filter clause for this attribute key out of the query.
+ *
+ * - No matching clause -> every value is checked (all selected).
+ * - IN / `=` clause     -> only the listed values are checked.
+ * - NOT IN / `!=` clause -> every value is checked except the excluded ones.
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function deriveCheckboxState({
+	attributeValues,
+	filterItems,
+	filterKey,
+}: {
+	attributeValues: string[];
+	filterItems: TagFilterItem[] | undefined;
+	filterKey: string;
+}): Record<string, boolean> {
+	let filterState: Record<string, boolean> = setDefaultValues(
+		attributeValues,
+		false,
+	);
+	const filterSync = filterItems?.find((item) =>
+		isKeyMatch(item.key?.key, filterKey),
+	);
+
+	if (filterSync) {
+		if (SELECTED_OPERATORS.includes(filterSync.op)) {
+			if (isArray(filterSync.value)) {
+				filterSync.value.forEach((val) => {
+					filterState[String(val)] = true;
+				});
+			} else if (typeof filterSync.value === 'string') {
+				filterState[filterSync.value] = true;
+			} else if (typeof filterSync.value === 'boolean') {
+				filterState[String(filterSync.value)] = true;
+			} else if (typeof filterSync.value === 'number') {
+				filterState[String(filterSync.value)] = true;
+			}
+		} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
+			filterState = setDefaultValues(attributeValues, true);
+			if (isArray(filterSync.value)) {
+				filterSync.value.forEach((val) => {
+					filterState[String(val)] = false;
+				});
+			} else if (typeof filterSync.value === 'string') {
+				filterState[filterSync.value] = false;
+			} else if (typeof filterSync.value === 'boolean') {
+				filterState[String(filterSync.value)] = false;
+			} else if (typeof filterSync.value === 'number') {
+				filterState[String(filterSync.value)] = false;
+			}
+		}
+	} else {
+		filterState = setDefaultValues(attributeValues, true);
+	}
+	return filterState;
+}
+
+/**
+ * Returns a new query with every clause for this attribute key removed, both
+ * from the structured filter items and the raw filter expression.
+ */
+export function clearFilterFromQuery({
+	currentQuery,
+	filter,
+	activeQueryIndex,
+}: {
+	currentQuery: Query;
+	filter: IQuickFiltersConfig;
+	activeQueryIndex: number;
+}): Query {
+	return {
+		...currentQuery,
+		builder: {
+			...currentQuery.builder,
+			queryData: currentQuery.builder.queryData.map((item, idx) => ({
+				...item,
+				filter: {
+					expression: removeKeysFromExpression(item.filter?.expression ?? '', [
+						filter.attributeKey.key,
+					]),
+				},
+				filters: {
+					...item.filters,
+					items:
+						idx === activeQueryIndex
+							? item.filters?.items?.filter(
+									(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+								) || []
+							: [...(item.filters?.items || [])],
+					op: item.filters?.op || 'AND',
+				},
+			})),
+		},
+	};
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function applyCheckboxToggle({
+	currentQuery,
+	activeQueryIndex,
+	filter,
+	source,
+	attributeValues,
+	value,
+	checked,
+	isOnlyOrAllClicked,
+}: {
+	currentQuery: Query;
+	activeQueryIndex: number;
+	filter: IQuickFiltersConfig;
+	source: QuickFiltersSource;
+	attributeValues: string[];
+	value: string;
+	checked: boolean;
+	isOnlyOrAllClicked: boolean;
+}): Query {
+	const activeItems =
+		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
+
+	const isSomeFilterPresentForCurrentAttribute = !!activeItems?.some((item) =>
+		isKeyMatch(item.key?.key, filter.attributeKey.key),
+	);
+
+	const currentFilterState = deriveCheckboxState({
+		attributeValues,
+		filterItems: activeItems,
+		filterKey: filter.attributeKey.key,
+	});
+
+	const isMultipleValuesTrueForTheKey =
+		Object.values(currentFilterState).filter((val) => val).length > 1;
+
+	const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
+
+	// if only or all are clicked we do not need to worry about anything just override whatever we have
+	// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
+	if (isOnlyOrAllClicked && query?.filters?.items) {
+		const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
+			? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+				? 'All'
+				: 'Only'
+			: 'Only';
+		query.filters.items = query.filters.items.filter(
+			(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
+		);
+
+		if (query.filter?.expression) {
+			query.filter.expression = removeKeysFromExpression(query.filter.expression, [
+				filter.attributeKey.key,
+			]);
+		}
+
+		if (isOnlyOrAll === 'Only') {
+			const newFilterItem: TagFilterItem = {
+				id: uuid(),
+				op: getOperatorValue(OPERATORS.IN),
+				key: filter.attributeKey,
+				value,
+			};
+			query.filters.items = [...query.filters.items, newFilterItem];
+		}
+	} else if (query?.filters?.items) {
+		if (
+			query.filters?.items?.some((item) =>
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
+			)
+		) {
+			// if there is already a running filter for the current attribute key then
+			// we split the cases by which particular operator is present right now!
+			const currentFilter = query.filters?.items?.find((q) =>
+				isKeyMatch(q.key?.key, filter.attributeKey.key),
+			);
+			if (currentFilter) {
+				const runningOperator = currentFilter?.op;
+				switch (runningOperator) {
+					case 'in':
+						if (checked) {
+							// if it's an IN operator then if we are checking another value it get's added to the
+							// filter clause. example -  key IN [value1, currentSelectedValue]
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else {
+								// if the current state wasn't an array we make it one and add our value
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} else if (!checked) {
+							// if we are removing some value when the running operator is IN we filter.
+							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value.filter((val) => val !== value),
+								};
+
+								if (newFilter.value.length === 0) {
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+								} else {
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else {
+								// if not an array remove the whole thing altogether!
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+						}
+						break;
+					case 'nin':
+					case 'not in':
+						// if the current running operator is NIN then when unchecking the value it gets
+						// added to the clause like key NIN [value1 , currentUnselectedValue]
+						if (!checked) {
+							// in case of array add the currentUnselectedValue to the list.
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else {
+								// in case of not an array make it one!
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} else if (checked) {
+							// opposite of above!
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value.filter((val) => val !== value),
+								};
+								if (newFilter.value.length === 0) {
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+									if (query.filter?.expression) {
+										query.filter.expression = removeKeysFromExpression(
+											query.filter.expression,
+											[filter.attributeKey.key],
+										);
+									}
+								} else {
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value === value ? null : currentFilter.value,
+								};
+								if (newFilter.value === null && query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
+									);
+								}
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+						}
+						break;
+					case '=':
+						if (checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getOperatorValue(OPERATORS.IN),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (!checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					case '!=':
+						if (!checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getNotInOperator(source),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					default:
+						break;
+				}
+			}
+		} else {
+			// case  - when there is no filter for the current key that means all are selected right now.
+			const newFilterItem: TagFilterItem = {
+				id: uuid(),
+				op: getNotInOperator(source),
+				key: filter.attributeKey,
+				value,
+			};
+			query.filters.items = [...query.filters.items, newFilterItem];
+		}
+	}
+
+	return {
+		...currentQuery,
+		builder: {
+			...currentQuery.builder,
+			queryData: [
+				...currentQuery.builder.queryData.map((q, idx) => {
+					if (idx === activeQueryIndex) {
+						return query;
+					}
+					return q;
+				}),
+			],
+		},
+	};
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useActiveQueryIndex.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+/**
+ * Resolves which query-builder query index the checkbox filter reads from and
+ * writes to.
+ *
+ * In ListView most sources use index 0; TRACES_EXPLORER and every non-ListView
+ * mode track the last focused query.
+ */
+function useActiveQueryIndex(source: QuickFiltersSource): number {
+	const { lastUsedQuery, panelType } = useQueryBuilder();
+	const isListView = panelType === PANEL_TYPES.LIST;
+
+	return useMemo(() => {
+		if (isListView) {
+			return source === QuickFiltersSource.TRACES_EXPLORER
+				? lastUsedQuery || 0
+				: 0;
+		}
+		return lastUsedQuery || 0;
+	}, [isListView, source, lastUsedQuery]);
+}
+
+export default useActiveQueryIndex;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxDisclosure.ts

@@ -0,0 +1,90 @@
+import { useMemo, useState } from 'react';
+import { IQuickFiltersConfig } from 'components/QuickFilters/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+import { isKeyMatch } from './utils';
+
+const DEFAULT_VISIBLE_ITEMS_COUNT = 10;
+
+interface UseCheckboxDisclosureProps {
+	filter: IQuickFiltersConfig;
+	activeQueryIndex: number;
+}
+
+interface UseCheckboxDisclosureReturn {
+	isOpen: boolean;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+	visibleItemsCount: number;
+	onToggleOpen: () => void;
+	onShowMore: () => void;
+}
+
+/**
+ * Owns the open/collapsed state of a checkbox filter section and how many
+ * values are visible.
+ *
+ * Auto-opens when the query already has a clause for this attribute, otherwise
+ * falls back to `filter.defaultOpen`. An explicit user toggle always wins.
+ * Collapsing resets the visible count.
+ */
+function useCheckboxDisclosure({
+	filter,
+	activeQueryIndex,
+}: UseCheckboxDisclosureProps): UseCheckboxDisclosureReturn {
+	const { currentQuery } = useQueryBuilder();
+	// null = no user action, true = user opened, false = user closed
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
+	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(
+		DEFAULT_VISIBLE_ITEMS_COUNT,
+	);
+
+	const isSomeFilterPresentForCurrentAttribute = useMemo(
+		() =>
+			!!currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
+				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
+			),
+		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
+	);
+
+	const isOpen = useMemo(() => {
+		// If user explicitly toggled, respect that
+		if (userToggleState !== null) {
+			return userToggleState;
+		}
+
+		// Auto-open if this filter has active filters in the query
+		if (isSomeFilterPresentForCurrentAttribute) {
+			return true;
+		}
+
+		// Otherwise use default behavior (first 2 filters open)
+		return filter.defaultOpen;
+	}, [
+		userToggleState,
+		isSomeFilterPresentForCurrentAttribute,
+		filter.defaultOpen,
+	]);
+
+	const onToggleOpen = (): void => {
+		if (isOpen) {
+			setUserToggleState(false);
+			setVisibleItemsCount(DEFAULT_VISIBLE_ITEMS_COUNT);
+		} else {
+			setUserToggleState(true);
+		}
+	};
+
+	const onShowMore = (): void => {
+		setVisibleItemsCount((prev) => prev + DEFAULT_VISIBLE_ITEMS_COUNT);
+	};
+
+	return {
+		isOpen,
+		isSomeFilterPresentForCurrentAttribute,
+		visibleItemsCount,
+		onToggleOpen,
+		onShowMore,
+	};
+}
+
+export default useCheckboxDisclosure;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -0,0 +1,78 @@
+import {
+	IQuickFiltersConfig,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { isFunction } from 'lodash-es';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	applyCheckboxToggle,
+	clearFilterFromQuery,
+} from './checkboxFilterQuery';
+
+interface UseCheckboxFilterActionsProps {
+	filter: IQuickFiltersConfig;
+	source: QuickFiltersSource;
+	attributeValues: string[];
+	activeQueryIndex: number;
+	onFilterChange?: ((query: Query) => void) | null;
+}
+
+interface UseCheckboxFilterActionsReturn {
+	onChange: (
+		value: string,
+		checked: boolean,
+		isOnlyOrAllClicked: boolean,
+	) => void;
+	onClear: () => void;
+}
+
+/**
+ * Wires the pure checkbox query algebra to query-builder dispatch: the
+ * caller-provided `onFilterChange` when present, otherwise a URL redirect.
+ */
+function useCheckboxFilterActions({
+	filter,
+	source,
+	attributeValues,
+	activeQueryIndex,
+	onFilterChange,
+}: UseCheckboxFilterActionsProps): UseCheckboxFilterActionsReturn {
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+
+	const dispatch = (query: Query): void => {
+		if (onFilterChange && isFunction(onFilterChange)) {
+			onFilterChange(query);
+		} else {
+			redirectWithQueryBuilderData(query);
+		}
+	};
+
+	const onChange = (
+		value: string,
+		checked: boolean,
+		isOnlyOrAllClicked: boolean,
+	): void => {
+		dispatch(
+			applyCheckboxToggle({
+				currentQuery,
+				activeQueryIndex,
+				filter,
+				source,
+				attributeValues,
+				value,
+				checked,
+				isOnlyOrAllClicked,
+			}),
+		);
+	};
+
+	const onClear = (): void => {
+		dispatch(clearFilterFromQuery({ currentQuery, filter, activeQueryIndex }));
+	};
+
+	return { onChange, onClear };
+}
+
+export default useCheckboxFilterActions;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterState.ts

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { IQuickFiltersConfig } from 'components/QuickFilters/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+
+import { deriveCheckboxState } from './checkboxFilterQuery';
+import { isKeyMatch } from './utils';
+
+interface UseCheckboxFilterStateProps {
+	filter: IQuickFiltersConfig;
+	attributeValues: string[];
+	activeQueryIndex: number;
+}
+
+interface UseCheckboxFilterStateReturn {
+	currentFilterState: Record<string, boolean>;
+	isFilterDisabled: boolean;
+	isMultipleValuesTrueForTheKey: boolean;
+}
+
+/**
+ * Reads the active query and derives the per-value checked state for this
+ * attribute, whether the filter is disabled (same key used more than once in
+ * the filter bar), and whether more than one value is currently selected.
+ */
+function useCheckboxFilterState({
+	filter,
+	attributeValues,
+	activeQueryIndex,
+}: UseCheckboxFilterStateProps): UseCheckboxFilterStateReturn {
+	const { currentQuery } = useQueryBuilder();
+
+	// derive the state of each filter key here and keep it in sync with current query
+	const currentFilterState = useMemo(
+		() =>
+			deriveCheckboxState({
+				attributeValues,
+				filterItems:
+					currentQuery?.builder.queryData?.[activeQueryIndex]?.filters?.items,
+				filterKey: filter.attributeKey.key,
+			}),
+		[
+			attributeValues,
+			currentQuery?.builder.queryData,
+			filter.attributeKey,
+			activeQueryIndex,
+		],
+	);
+
+	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
+	const isFilterDisabled = useMemo(
+		() =>
+			(currentQuery?.builder?.queryData?.[
+				activeQueryIndex
+			]?.filters?.items?.filter((item) =>
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
+			)?.length || 0) > 1,
+		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
+	);
+
+	// whether the current filter has multiple values to its name in the key op value section
+	const isMultipleValuesTrueForTheKey =
+		Object.values(currentFilterState).filter((val) => val).length > 1;
+
+	return {
+		currentFilterState,
+		isFilterDisabled,
+		isMultipleValuesTrueForTheKey,
+	};
+}
+
+export default useCheckboxFilterState;

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

@@ -0,0 +1,99 @@
+import { useMemo } from 'react';
+import {
+	IQuickFiltersConfig,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+interface UseCheckboxFilterValuesProps {
+	filter: IQuickFiltersConfig;
+	source: QuickFiltersSource;
+	searchText: string;
+	isOpen: boolean;
+}
+
+interface UseCheckboxFilterValuesReturn {
+	attributeValues: string[];
+	isLoading: boolean;
+}
+
+function useCheckboxFilterValues({
+	filter,
+	source,
+	searchText,
+	isOpen,
+}: UseCheckboxFilterValuesProps): UseCheckboxFilterValuesReturn {
+	const { data, isLoading } = useGetAggregateValues(
+		{
+			aggregateOperator: filter.aggregateOperator || 'noop',
+			dataSource: filter.dataSource || DataSource.LOGS,
+			aggregateAttribute: filter.aggregateAttribute || '',
+			attributeKey: filter.attributeKey.key,
+			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+			tagType: filter.attributeKey.type || '',
+			searchText: searchText ?? '',
+		},
+		{
+			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
+			keepPreviousData: true,
+		},
+	);
+
+	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
+		useGetQueryKeyValueSuggestions({
+			key: filter.attributeKey.key,
+			signal: filter.dataSource || DataSource.LOGS,
+			signalSource: 'meter',
+			options: {
+				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+				keepPreviousData: true,
+			},
+		});
+
+	const attributeValues: string[] = useMemo(() => {
+		const dataType = filter.attributeKey.dataType || DataTypes.String;
+
+		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
+			// Process the response data
+			const responseData = keyValueSuggestions?.data as any;
+			const values = responseData.data?.values || {};
+			const stringValues = values.stringValues || [];
+			const numberValues = values.numberValues || [];
+
+			// Generate options from string values - explicitly handle empty strings
+			const stringOptions = stringValues
+				// Strict filtering for empty string - we'll handle it as a special case if needed
+				.filter(
+					(value: string | null | undefined): value is string =>
+						value !== null && value !== undefined && value !== '',
+				);
+
+			// Generate options from number values
+			const numberOptions = numberValues
+				.filter(
+					(value: number | null | undefined): value is number =>
+						value !== null && value !== undefined,
+				)
+				.map((value: number) => value.toString());
+
+			// Combine all options and make sure we don't have duplicate labels
+			return [...stringOptions, ...numberOptions];
+		}
+
+		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
+	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
+
+	return {
+		attributeValues,
+		isLoading: isLoading || isLoadingKeyValueSuggestions,
+	};
+}
+
+export default useCheckboxFilterValues;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/index.tsx

@@ -20,7 +20,7 @@ import APIError from 'types/api/error';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardInfo from './DashboardInfo/DashboardInfo';
 import { useEditableTitle } from './DashboardInfo/useEditableTitle';
-import VariablesBar from '../VariablesBar/VariablesBar';
+import { usePublicDashboardMeta } from '../DashboardSettings/PublicDashboard/usePublicDashboardMeta';
 
 import styles from './DashboardPageToolbar.module.scss';
 
@@ -53,6 +53,10 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 		(s) => s.setIsPanelTypeSelectionModalOpen,
 	);
 
+	// Single global fetch of the public-sharing meta (the drawer reuses this cache);
+	// drives the public-access badge.
+	const { isPublic: isPublicDashboard } = usePublicDashboardMeta(id);
+
 	const isAuthor =
 		!!user?.email && !!dashboard.createdBy && dashboard.createdBy === user.email;
 
@@ -118,7 +122,7 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					image={image}
 					tags={tags}
 					description={description}
-					isPublicDashboard={false}
+					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
 					isEditing={isEditing}
 					draft={draft}
@@ -138,8 +142,6 @@ function DashboardPageToolbar(props: DashboardPageToolbarProps): JSX.Element {
 					onOpenRename={startEdit}
 				/>
 			</div>
-
-			<VariablesBar dashboard={dashboard} />
 		</section>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableModel.ts

@@ -1,4 +1,3 @@
-import { sortBy } from 'lodash-es';
 import type { VariableDefaultValueDTO } from 'api/generated/services/sigNoz.schemas';
 
 /**
@@ -77,26 +76,3 @@ export function emptyVariableFormModel(): VariableFormModel {
 		dynamicSignal: 'traces',
 	};
 }
-
-/** Maps the dynamic-variable signal to the field-values API signal. */
-export function signalForApi(
-	signal: TelemetrySignal,
-): TelemetrySignal | undefined {
-	return signal;
-}
-
-type SortableValues = (string | number | boolean)[];
-
-/** Sorts option/preview values by the variable's chosen order (no-op when disabled). */
-export function sortValuesByOrder(
-	values: SortableValues,
-	sort: VariableSort,
-): SortableValues {
-	if (sort === 'ASC') {
-		return sortBy(values);
-	}
-	if (sort === 'DESC') {
-		return sortBy(values).reverse();
-	}
-	return values;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariableSelector.tsx

@@ -1,114 +0,0 @@
-import { useMemo } from 'react';
-import { SolidInfoCircle } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-// eslint-disable-next-line signoz/no-antd-components -- lightweight description tooltip, matches V1
-import { Tooltip } from 'antd';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-
-import { sortValuesByOrder } from '../DashboardSettings/Variables/variableModel';
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
-import DynamicSelector from './selectors/DynamicSelector';
-import QuerySelector from './selectors/QuerySelector';
-import TextSelector from './selectors/TextSelector';
-import ValueSelector from './selectors/ValueSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariableSelectorProps {
-	variable: VariableFormModel;
-	/** All variables (Dynamic uses them to scope options by sibling selections). */
-	variables: VariableFormModel[];
-	/** Names this variable depends on (for Query gating). */
-	parents: string[];
-	/** All current selections (Query passes them as the request payload). */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/** One labelled variable control; dispatches on the variable type. */
-function VariableSelector({
-	variable,
-	variables,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: VariableSelectorProps): JSX.Element {
-	const customOptions = useMemo(
-		() =>
-			variable.type === 'CUSTOM'
-				? sortValuesByOrder(
-						commaValuesParser(variable.customValue),
-						variable.sort,
-					).map(String)
-				: [],
-		[variable],
-	);
-
-	const renderControl = (): JSX.Element => {
-		switch (variable.type) {
-			case 'TEXT':
-				return (
-					<TextSelector
-						selection={selection}
-						defaultValue={variable.textValue}
-						onChange={onChange}
-						testId={`variable-input-${variable.name}`}
-					/>
-				);
-			case 'QUERY':
-				return (
-					<QuerySelector
-						variable={variable}
-						parents={parents}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'DYNAMIC':
-				return (
-					<DynamicSelector
-						variable={variable}
-						variables={variables}
-						selections={selections}
-						selection={selection}
-						onChange={onChange}
-					/>
-				);
-			case 'CUSTOM':
-			default:
-				return (
-					<ValueSelector
-						options={customOptions}
-						multiSelect={variable.multiSelect}
-						showAllOption={variable.showAllOption}
-						selection={selection}
-						onChange={onChange}
-						testId={`variable-select-${variable.name}`}
-					/>
-				);
-		}
-	};
-
-	return (
-		<div
-			className={styles.variableItem}
-			data-testid={`variable-${variable.name}`}
-		>
-			<Typography.Text className={styles.variableName}>
-				${variable.name}
-				{variable.description ? (
-					<Tooltip title={variable.description}>
-						<SolidInfoCircle className={styles.infoIcon} size="md" />
-					</Tooltip>
-				) : null}
-			</Typography.Text>
-
-			<div className={styles.variableValue}>{renderControl()}</div>
-		</div>
-	);
-}
-
-export default VariableSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.module.scss

@@ -1,71 +0,0 @@
-/* Mirrors the V1 dashboard variable bar: each variable is a connected pill —
-   a robin `$name` segment joined to a value segment. */
-/* Sits inside the already-padded sticky toolbar section, so it only needs a top
-   gap from the tags — horizontal/bottom padding comes from the toolbar. */
-.bar {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12px;
-	padding-top: 12px;
-}
-
-.variableItem {
-	display: flex;
-	align-items: center;
-}
-
-.variableName {
-	display: flex;
-	min-width: 56px;
-	height: 32px;
-	align-items: center;
-	gap: 4px;
-	padding: 6px 6px 6px 8px;
-	border: 1px solid var(--l1-border);
-	border-radius: 2px 0 0 2px;
-	background: var(--l3-background);
-	color: var(--bg-robin-300);
-	font-family: Inter;
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	white-space: nowrap;
-}
-
-.infoIcon {
-	margin-left: 4px;
-	color: var(--l2-foreground);
-}
-
-.variableValue {
-	display: flex;
-	min-width: 120px;
-	height: 32px;
-	align-items: center;
-	border: 1px solid var(--l1-border);
-	border-left: none;
-	border-radius: 0 2px 2px 0;
-	background: var(--l2-background);
-	color: var(--l2-foreground);
-	font-size: 12px;
-
-	&:hover,
-	&:focus-within {
-		outline: 1px solid var(--bg-robin-400);
-	}
-}
-
-/* Inner control fills the value segment; the segment provides the frame, so the
-   control itself is borderless/transparent. */
-.control {
-	width: 100%;
-	min-width: 120px;
-
-	:global(.ant-select-selector),
-	:global(.ant-input),
-	&:global(.ant-input) {
-		border: none !important;
-		background: transparent !important;
-		box-shadow: none !important;
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/VariablesBar.tsx

@@ -1,45 +0,0 @@
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { useVariableSelection } from './useVariableSelection';
-import VariableSelector from './VariableSelector';
-import styles from './VariablesBar.module.scss';
-
-interface VariablesBarProps {
-	dashboard: DashboardtypesGettableDashboardV2DTO;
-}
-
-/**
- * Runtime variable selector bar shown above the panels. Renders one control per
- * dashboard variable; selections live in the store + URL (never the spec).
- */
-function VariablesBar({ dashboard }: VariablesBarProps): JSX.Element | null {
-	const { variables, dependencyData, selection, setSelection } =
-		useVariableSelection(dashboard);
-
-	if (variables.length === 0) {
-		return null;
-	}
-
-	return (
-		<div className={styles.bar} data-testid="dashboard-variables-bar">
-			{variables.map((variable) => (
-				<VariableSelector
-					key={variable.name}
-					variable={variable}
-					variables={variables}
-					parents={dependencyData.parentGraph[variable.name] ?? []}
-					selections={selection}
-					selection={
-						selection[variable.name] ?? {
-							value: variable.multiSelect ? [] : '',
-							allSelected: false,
-						}
-					}
-					onChange={(next): void => setSelection(variable.name, next)}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default VariablesBar;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/dynamicFilter.ts

@@ -1,56 +0,0 @@
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelectionMap } from './selectionTypes';
-
-function formatQueryValue(val: string): string {
-	const num = Number(val);
-	if (!Number.isNaN(num) && Number.isFinite(num)) {
-		return val;
-	}
-	return `'${val.replace(/'/g, "\\'")}'`;
-}
-
-function buildQueryPart(attribute: string, values: string[]): string {
-	const formatted = values.map(formatQueryValue);
-	if (formatted.length === 1) {
-		return `${attribute} = ${formatted[0]}`;
-	}
-	return `${attribute} IN [${formatted.join(', ')}]`;
-}
-
-/**
- * Builds a filter expression from the OTHER dynamic variables' current
- * selections (e.g. `k8s.namespace.name IN ['prod'] AND service = 'api'`), so a
- * dynamic variable's option list is scoped by its sibling selections. Variables
- * in the ALL state, with no selection, or non-dynamic are skipped. Ported from
- * the V1 dynamic-variable runtime.
- */
-export function buildExistingDynamicVariableQuery(
-	variables: VariableFormModel[],
-	selections: VariableSelectionMap,
-	currentName: string,
-): string {
-	const parts: string[] = [];
-	variables.forEach((variable) => {
-		if (
-			variable.name === currentName ||
-			variable.type !== 'DYNAMIC' ||
-			!variable.dynamicAttribute
-		) {
-			return;
-		}
-		const selection = selections[variable.name];
-		if (!selection || selection.allSelected) {
-			return;
-		}
-		const raw = Array.isArray(selection.value)
-			? selection.value
-			: [selection.value];
-		const valid = raw
-			.filter((v) => v !== null && v !== undefined && v !== '')
-			.map((v) => String(v));
-		if (valid.length > 0) {
-			parts.push(buildQueryPart(variable.dynamicAttribute, valid));
-		}
-	});
-	return parts.join(' AND ');
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionTypes.ts

@@ -1,16 +0,0 @@
-/** A user-selected variable value at runtime (not persisted to the spec). */
-export type SelectedVariableValue =
-	| string
-	| number
-	| boolean
-	| (string | number | boolean)[]
-	| null;
-
-export interface VariableSelection {
-	value: SelectedVariableValue;
-	/** True when every option is selected ("ALL"); for dynamic vars value may be null. */
-	allSelected: boolean;
-}
-
-/** Selected values for a dashboard's variables, keyed by variable name. */
-export type VariableSelectionMap = Record<string, VariableSelection>;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionUtils.ts

@@ -1,31 +0,0 @@
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-
-/** A selection counts as resolved (usable as a parent value) when it's non-empty. */
-export function isResolved(selection?: VariableSelection): boolean {
-	if (!selection) {
-		return false;
-	}
-	if (selection.allSelected) {
-		return true;
-	}
-	const { value } = selection;
-	if (Array.isArray(value)) {
-		return value.length > 0;
-	}
-	return value !== '' && value !== null && value !== undefined;
-}
-
-/** Flatten the selection map into the `{ name: value }` payload a query expects. */
-export function selectionToPayload(
-	selection: VariableSelectionMap,
-): Record<string, SelectedVariableValue> {
-	const payload: Record<string, SelectedVariableValue> = {};
-	Object.entries(selection).forEach(([name, sel]) => {
-		payload[name] = sel.value;
-	});
-	return payload;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/DynamicSelector.tsx

@@ -1,82 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import {
-	signalForApi,
-	sortValuesByOrder,
-} from '../../DashboardSettings/Variables/variableModel';
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface DynamicSelectorProps {
-	variable: VariableFormModel;
-	/** All variables + current selections, to scope options by sibling dynamics. */
-	variables: VariableFormModel[];
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Dynamic-variable options sourced from live telemetry field values for the
- * chosen signal + attribute, scoped by the other dynamic variables' selections
- * (so e.g. `pod` narrows to the chosen `namespace`).
- */
-function DynamicSelector({
-	variable,
-	variables,
-	selections,
-	selection,
-	onChange,
-}: DynamicSelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const existingQuery = useMemo(
-		() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
-		[variables, selections, variable.name],
-	);
-
-	const { data, isFetching } = useGetFieldValues({
-		signal: signalForApi(variable.dynamicSignal),
-		name: variable.dynamicAttribute,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-		existingQuery: existingQuery || undefined,
-		enabled: !!variable.dynamicAttribute,
-	});
-
-	const options = useMemo(() => {
-		const payload = data?.data;
-		const values =
-			payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
-		return sortValuesByOrder(values, variable.sort).map(String);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default DynamicSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/QuerySelector.tsx

@@ -1,90 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import type { AppState } from 'store/reducers';
-import type { GlobalReducer } from 'types/reducer/globalTime';
-
-import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableModel';
-import type { VariableFormModel } from '../../DashboardSettings/Variables/variableModel';
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../selectionTypes';
-import { isResolved, selectionToPayload } from '../selectionUtils';
-import { useAutoSelect } from '../useAutoSelect';
-import ValueSelector from './ValueSelector';
-
-interface QuerySelectorProps {
-	variable: VariableFormModel;
-	/** Names this variable's query references; it waits until they're resolved. */
-	parents: string[];
-	/** All current selections, fed to the query as `{ name: value }`. */
-	selections: VariableSelectionMap;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-}
-
-/**
- * Query-driven options. Dependency orchestration is declarative: the query is
- * `enabled` only once every parent is resolved, and the parent values are in the
- * query key — so it refetches automatically when a parent changes (and a cyclic
- * dependency is simply never enabled).
- */
-function QuerySelector({
-	variable,
-	parents,
-	selections,
-	selection,
-	onChange,
-}: QuerySelectorProps): JSX.Element {
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const payload = useMemo(() => selectionToPayload(selections), [selections]);
-	const enabled = parents.every((parent) => isResolved(selections[parent]));
-
-	const { data, isFetching } = useQuery(
-		[
-			'dashboard-variable',
-			variable.name,
-			variable.queryValue,
-			payload,
-			minTime,
-			maxTime,
-		],
-		() =>
-			dashboardVariablesQuery({
-				query: variable.queryValue,
-				variables: payload,
-			}),
-		{ enabled, refetchOnWindowFocus: false },
-	);
-
-	const options = useMemo(() => {
-		if (!data || data.statusCode !== 200 || !data.payload) {
-			return [] as string[];
-		}
-		return sortValuesByOrder(
-			data.payload.variableValues ?? [],
-			variable.sort,
-		).map(String);
-	}, [data, variable.sort]);
-
-	useAutoSelect(variable, options, selection, onChange);
-
-	return (
-		<ValueSelector
-			options={options}
-			multiSelect={variable.multiSelect}
-			showAllOption={variable.showAllOption}
-			loading={isFetching}
-			selection={selection}
-			onChange={onChange}
-			testId={`variable-select-${variable.name}`}
-		/>
-	);
-}
-
-export default QuerySelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/TextSelector.tsx

@@ -1,70 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-import type { InputRef } from 'antd';
-// eslint-disable-next-line signoz/no-antd-components -- match V1 textbox behaviour (commit on blur/Enter, borderless)
-import { Input } from 'antd';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface TextSelectorProps {
-	selection: VariableSelection;
-	/** Configured default; an emptied input falls back to it (V1 behaviour). */
-	defaultValue?: string;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/**
- * Free-text variable input. Mirrors V1: edits are local and only committed on
- * blur / Enter (not per keystroke), and clearing the field restores the default.
- */
-function TextSelector({
-	selection,
-	defaultValue,
-	onChange,
-	testId,
-}: TextSelectorProps): JSX.Element {
-	const inputRef = useRef<InputRef>(null);
-	const [value, setValue] = useState<string>(
-		typeof selection.value === 'string' ? selection.value : (defaultValue ?? ''),
-	);
-
-	const commit = useCallback(
-		(next: string): void => onChange({ value: next, allSelected: false }),
-		[onChange],
-	);
-
-	const handleBlur = useCallback(
-		(event: React.FocusEvent<HTMLInputElement>): void => {
-			const trimmed = event.target.value.trim();
-			if (!trimmed && defaultValue) {
-				setValue(defaultValue);
-				commit(defaultValue);
-			} else {
-				commit(trimmed);
-			}
-		},
-		[commit, defaultValue],
-	);
-
-	return (
-		<Input
-			ref={inputRef}
-			className={styles.control}
-			bordered={false}
-			placeholder="Enter value"
-			value={value}
-			title={value}
-			onChange={(e): void => setValue(e.target.value)}
-			onBlur={handleBlur}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter') {
-					inputRef.current?.blur();
-				}
-			}}
-			data-testid={testId}
-		/>
-	);
-}
-
-export default TextSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/selectors/ValueSelector.tsx

@@ -1,94 +0,0 @@
-import { useMemo } from 'react';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import type { OptionData } from 'components/NewSelect/types';
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import type { VariableSelection } from '../selectionTypes';
-import styles from '../VariablesBar.module.scss';
-
-interface ValueSelectorProps {
-	options: string[];
-	multiSelect: boolean;
-	showAllOption: boolean;
-	loading?: boolean;
-	selection: VariableSelection;
-	onChange: (selection: VariableSelection) => void;
-	testId?: string;
-}
-
-/**
- * Single/multi value picker for Custom/Query/Dynamic variables. Reuses the
- * shared NewSelect components, which provide search, the "ALL" option and
- * apply-on-close batching (so multi-select edits don't cascade per toggle).
- */
-function ValueSelector({
-	options,
-	multiSelect,
-	showAllOption,
-	loading,
-	selection,
-	onChange,
-	testId,
-}: ValueSelectorProps): JSX.Element {
-	const optionData = useMemo<OptionData[]>(
-		() => options.map((option) => ({ label: option, value: option })),
-		[options],
-	);
-
-	if (multiSelect) {
-		const value = selection.allSelected
-			? ALL_SELECT_VALUE
-			: (Array.isArray(selection.value) ? selection.value : []).map(String);
-		return (
-			<CustomMultiSelect
-				className={styles.control}
-				data-testid={testId}
-				options={optionData}
-				value={value}
-				loading={loading}
-				showSearch
-				placeholder="Select value"
-				enableAllSelection={showAllOption}
-				onChange={(next): void => {
-					const values = Array.isArray(next)
-						? next.map(String)
-						: next
-							? [String(next)]
-							: [];
-					if (values.length === 0) {
-						onChange({ value: [], allSelected: false });
-						return;
-					}
-					// CustomMultiSelect emits the full value set when ALL is picked.
-					const isAll =
-						showAllOption &&
-						options.length > 0 &&
-						options.every((option) => values.includes(option));
-					onChange({ value: values, allSelected: isAll });
-				}}
-				onClear={(): void => onChange({ value: [], allSelected: false })}
-			/>
-		);
-	}
-
-	return (
-		<CustomSelect
-			className={styles.select}
-			data-testid={testId}
-			options={optionData}
-			value={
-				selection.value == null || Array.isArray(selection.value)
-					? undefined
-					: String(selection.value)
-			}
-			loading={loading}
-			showSearch
-			placeholder="Select value"
-			onChange={(next): void =>
-				onChange({ value: next == null ? '' : String(next), allSelected: false })
-			}
-		/>
-	);
-}
-
-export default ValueSelector;

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useAutoSelect.ts

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import type { VariableSelection } from './selectionTypes';
-
-/**
- * When fetched options arrive and the current selection isn't one of them,
- * auto-pick the variable's default (if present in the options) or the first
- * option — so dependent children always have a usable parent value.
- */
-export function useAutoSelect(
-	variable: VariableFormModel,
-	options: string[],
-	selection: VariableSelection,
-	onChange: (selection: VariableSelection) => void,
-): void {
-	useEffect(() => {
-		if (options.length === 0 || selection.allSelected) {
-			return;
-		}
-		const current = selection.value;
-		const isValid = Array.isArray(current)
-			? current.length > 0 && current.every((c) => options.includes(String(c)))
-			: current !== '' &&
-				current !== null &&
-				current !== undefined &&
-				options.includes(String(current));
-		if (isValid) {
-			return;
-		}
-		const fallback = (variable.defaultValue as { value?: string } | undefined)
-			?.value;
-		const initial =
-			fallback && options.includes(fallback) ? fallback : options[0];
-		onChange({
-			value: variable.multiSelect ? [initial] : initial,
-			allSelected: false,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [options]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection.ts

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { parseAsJson, useQueryState } from 'nuqs';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-import { selectVariableValues } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from './selectionTypes';
-import {
-	computeVariableDependencies,
-	type VariableDependencyData,
-} from './variableDependencies';
-
-/** URL sentinel for an "ALL values selected" state (matches V1). */
-export const ALL_SELECTED = '__ALL__';
-
-/** `?variables=` holds `{ [name]: value }` (ALL encoded as the sentinel). */
-const variablesUrlParser = parseAsJson<Record<string, SelectedVariableValue>>(
-	(v) =>
-		typeof v === 'object' && v !== null
-			? (v as Record<string, SelectedVariableValue>)
-			: null,
-);
-
-function defaultSelection(model: VariableFormModel): VariableSelection {
-	const def = (
-		model.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
-	if (def !== undefined && def !== null && def !== '') {
-		return { value: def, allSelected: false };
-	}
-	return { value: model.multiSelect ? [] : '', allSelected: false };
-}
-
-function fromUrlValue(raw: SelectedVariableValue): VariableSelection {
-	return raw === ALL_SELECTED
-		? { value: null, allSelected: true }
-		: { value: raw, allSelected: false };
-}
-
-interface UseVariableSelection {
-	variables: VariableFormModel[];
-	dependencyData: VariableDependencyData;
-	selection: VariableSelectionMap;
-	setSelection: (name: string, selection: VariableSelection) => void;
-}
-
-/**
- * Runtime variable selection: derives the variable list from the spec, seeds
- * each value from URL → localStorage(store) → default, and persists changes to
- * both the store and the URL. Never writes to the dashboard spec.
- */
-export function useVariableSelection(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-): UseVariableSelection {
-	const dashboardId = dashboard.id ?? '';
-
-	const variables = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
-	);
-	const dependencyData = useMemo(
-		() => computeVariableDependencies(variables),
-		[variables],
-	);
-
-	const selection = useDashboardStore(selectVariableValues(dashboardId));
-	const setVariableValue = useDashboardStore((s) => s.setVariableValue);
-	const setVariableValues = useDashboardStore((s) => s.setVariableValues);
-
-	const [urlValues, setUrlValues] = useQueryState(
-		'variables',
-		variablesUrlParser.withOptions({ history: 'replace' }),
-	);
-
-	// Seed selections for this dashboard: URL wins, then persisted store, then default.
-	useEffect(() => {
-		if (!dashboardId || variables.length === 0) {
-			return;
-		}
-		// `selection` here is the persisted (localStorage) map on mount — the
-		// effect deliberately doesn't depend on it, so seeding runs once per set.
-		const stored = selection;
-		const seeded: VariableSelectionMap = {};
-		variables.forEach((variable) => {
-			const urlValue = urlValues?.[variable.name];
-			if (urlValue !== undefined) {
-				seeded[variable.name] = fromUrlValue(urlValue);
-			} else if (stored[variable.name]) {
-				seeded[variable.name] = stored[variable.name];
-			} else {
-				seeded[variable.name] = defaultSelection(variable);
-			}
-		});
-		setVariableValues(dashboardId, seeded);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboardId, variables]);
-
-	const setSelection = useCallback(
-		(name: string, next: VariableSelection): void => {
-			setVariableValue(dashboardId, name, next);
-			void setUrlValues((prev) => ({
-				...(prev ?? {}),
-				[name]: next.allSelected ? ALL_SELECTED : next.value,
-			}));
-		},
-		[dashboardId, setVariableValue, setUrlValues],
-	);
-
-	return { variables, dependencyData, selection, setSelection };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/VariablesBar/variableDependencies.ts

@@ -1,199 +0,0 @@
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-
-import type { VariableFormModel } from '../DashboardSettings/Variables/variableModel';
-
-/**
- * Inter-variable dependency graph for runtime selection. A QUERY variable
- * "depends on" another variable when its query text references that variable
- * (`{{.name}}`, `{{name}}`, `$name`, `[[name]]`). When a variable's value
- * changes, its dependent QUERY variables must refetch. Ported from the V1
- * dashboard-variables runtime; operates on the V2 flat variable model.
- */
-
-export type VariableGraph = Record<string, string[]>;
-
-export interface VariableDependencyData {
-	/** Topological order of variables (parents before children). */
-	order: string[];
-	/** Direct children (dependents) of each variable. */
-	graph: VariableGraph;
-	/** Direct parents of each variable. */
-	parentGraph: VariableGraph;
-	/** All transitive descendants of each variable (precomputed). */
-	transitiveDescendants: VariableGraph;
-	hasCycle: boolean;
-	cycleNodes?: string[];
-}
-
-/** Names of QUERY variables whose query references `variableName`. */
-function getDependents(
-	variableName: string,
-	variables: VariableFormModel[],
-): string[] {
-	return variables
-		.filter(
-			(v) =>
-				v.type === 'QUERY' &&
-				!!v.name &&
-				textContainsVariableReference(v.queryValue || '', variableName),
-		)
-		.map((v) => v.name);
-}
-
-/** variable name → its direct dependents (children). */
-export function buildDependencies(
-	variables: VariableFormModel[],
-): VariableGraph {
-	const graph: VariableGraph = {};
-	variables.forEach((v) => {
-		if (v.name) {
-			graph[v.name] = getDependents(v.name, variables);
-		}
-	});
-	return graph;
-}
-
-/** Invert a child graph into a parent graph. */
-export function buildParentGraph(graph: VariableGraph): VariableGraph {
-	const parents: VariableGraph = {};
-	Object.keys(graph).forEach((node) => {
-		parents[node] = parents[node] ?? [];
-	});
-	Object.entries(graph).forEach(([node, children]) => {
-		children.forEach((child) => {
-			parents[child] = parents[child] ?? [];
-			parents[child].push(node);
-		});
-	});
-	return parents;
-}
-
-function collectCyclePath(
-	graph: VariableGraph,
-	start: string,
-	end: string,
-): string[] {
-	const path: string[] = [];
-	let current = start;
-	const findParent = (node: string): string | undefined =>
-		Object.keys(graph).find((key) => graph[key]?.includes(node));
-	while (current !== end) {
-		const parent = findParent(current);
-		if (!parent) {
-			break;
-		}
-		path.push(parent);
-		current = parent;
-	}
-	return [start, ...path];
-}
-
-function detectCycle(
-	graph: VariableGraph,
-	node: string,
-	visited: Set<string>,
-	recStack: Set<string>,
-): string[] | null {
-	if (!visited.has(node)) {
-		visited.add(node);
-		recStack.add(node);
-		let cycleNodes: string[] | null = null;
-		(graph[node] || []).some((neighbor) => {
-			if (!visited.has(neighbor)) {
-				const found = detectCycle(graph, neighbor, visited, recStack);
-				if (found) {
-					cycleNodes = found;
-					return true;
-				}
-			} else if (recStack.has(neighbor)) {
-				cycleNodes = collectCyclePath(graph, node, neighbor);
-				return true;
-			}
-			return false;
-		});
-		if (cycleNodes) {
-			return cycleNodes;
-		}
-	}
-	recStack.delete(node);
-	return null;
-}
-
-/** Build the full dependency data (topo order, parents, transitive descendants, cycle info). */
-export function buildDependencyData(
-	dependencies: VariableGraph,
-): VariableDependencyData {
-	const inDegree: Record<string, number> = {};
-	const adjList: VariableGraph = {};
-
-	Object.keys(dependencies).forEach((node) => {
-		inDegree[node] = inDegree[node] ?? 0;
-		adjList[node] = adjList[node] ?? [];
-		(dependencies[node] || []).forEach((child) => {
-			inDegree[child] = inDegree[child] ?? 0;
-			inDegree[child] += 1;
-			adjList[node].push(child);
-		});
-	});
-
-	const visited = new Set<string>();
-	const recStack = new Set<string>();
-	let cycleNodes: string[] | undefined;
-	Object.keys(dependencies).some((node) => {
-		if (!visited.has(node)) {
-			const found = detectCycle(dependencies, node, visited, recStack);
-			if (found) {
-				cycleNodes = found;
-				return true;
-			}
-		}
-		return false;
-	});
-
-	// Topological sort (Kahn's algorithm).
-	const queue = Object.keys(inDegree).filter((n) => inDegree[n] === 0);
-	const order: string[] = [];
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (current === undefined) {
-			break;
-		}
-		order.push(current);
-		(adjList[current] || []).forEach((neighbor) => {
-			inDegree[neighbor] -= 1;
-			if (inDegree[neighbor] === 0) {
-				queue.push(neighbor);
-			}
-		});
-	}
-
-	const hasCycle = order.length !== Object.keys(dependencies).length;
-
-	// Transitive descendants: walk topo order in reverse.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = order.length - 1; i >= 0; i--) {
-		const node = order[i];
-		const desc = new Set<string>();
-		(adjList[node] || []).forEach((child) => {
-			desc.add(child);
-			(transitiveDescendants[child] || []).forEach((d) => desc.add(d));
-		});
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
-	return {
-		order,
-		graph: adjList,
-		parentGraph: buildParentGraph(adjList),
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-}
-
-/** Compute the full dependency data straight from the variable list. */
-export function computeVariableDependencies(
-	variables: VariableFormModel[],
-): VariableDependencyData {
-	return buildDependencyData(buildDependencies(variables));
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice.ts

@@ -1,55 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type {
-	VariableSelection,
-	VariableSelectionMap,
-} from '../../VariablesBar/selectionTypes';
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Runtime variable selection — the values the user picks in the variable bar.
- * Keyed by dashboardId → variable name. Frontend-only and persisted to
- * localStorage (mirrored to the URL by the bar for shareable links); it is
- * deliberately NOT part of the dashboard spec, so selecting a value never
- * patches the dashboard.
- */
-export interface VariableSelectionSlice {
-	variableValues: Record<string, VariableSelectionMap>;
-	setVariableValue: (
-		dashboardId: string,
-		name: string,
-		selection: VariableSelection,
-	) => void;
-	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
-	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
-}
-
-export const createVariableSelectionSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	VariableSelectionSlice
-> = (set, get) => ({
-	variableValues: {},
-	setVariableValue: (dashboardId, name, selection): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: {
-				...variableValues,
-				[dashboardId]: { ...variableValues[dashboardId], [name]: selection },
-			},
-		});
-	},
-	setVariableValues: (dashboardId, values): void => {
-		const { variableValues } = get();
-		set({
-			variableValues: { ...variableValues, [dashboardId]: values },
-		});
-	},
-});
-
-/** Selector: the selection map for a dashboard (empty if none). */
-export const selectVariableValues =
-	(dashboardId: string) =>
-	(state: DashboardStore): VariableSelectionMap =>
-		state.variableValues[dashboardId] ?? {};

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -9,36 +9,25 @@ import {
 	createCollapseSlice,
 	type CollapseSlice,
 } from './slices/collapseSlice';
-import {
-	createVariableSelectionSlice,
-	type VariableSelectionSlice,
-} from './slices/variableSelectionSlice';
 
-export type DashboardStore = EditContextSlice &
-	CollapseSlice &
-	VariableSelectionSlice;
+export type DashboardStore = EditContextSlice & CollapseSlice;
 
 /**
  * V2 dashboard session store. Holds cross-cutting client state only — never the
- * dashboard spec (that stays in react-query via useGetDashboardV2). Slices:
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
  * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
  * - collapse: per-section open state (frontend-only, persisted to localStorage).
- * - variable-selection: runtime variable values (frontend-only, persisted).
  */
 export const useDashboardStore = create<DashboardStore>()(
 	persist(
 		(...a) => ({
 			...createEditContextSlice(...a),
 			...createCollapseSlice(...a),
-			...createVariableSelectionSlice(...a),
 		}),
 		{
 			name: '@signoz/dashboard-v2',
-			// Persist UI-only state (context incl. the refetch fn is transient).
-			partialize: (state) => ({
-				collapsed: state.collapsed,
-				variableValues: state.variableValues,
-			}),
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
 		},
 	),
 );

frontend/src/types/api/alerts/convert.ts

@@ -69,19 +69,24 @@ function stripUndefinedLabels(
 export function toPostableRuleDTO(
 	local: PostableAlertRuleV2,
 ): RuletypesPostableRuleDTO {
-	const payload = {
+	const payload: Record<keyof RuletypesPostableRuleDTO, any> = {
 		alert: local.alert,
 		alertType: toAlertTypeDTO(local.alertType),
 		ruleType: toRuleTypeDTO(local.ruleType),
 		condition: local.condition,
 		annotations: local.annotations,
 		labels: stripUndefinedLabels(local.labels),
+		evalWindow: (local as unknown as RuletypesPostableRuleDTO).evalWindow,
+		frequency: (local as unknown as RuletypesPostableRuleDTO).frequency,
+		preferredChannels: (local as unknown as RuletypesPostableRuleDTO)
+			.preferredChannels,
 		notificationSettings: local.notificationSettings,
 		evaluation: local.evaluation,
 		schemaVersion: local.schemaVersion,
 		source: local.source,
 		version: local.version,
 		disabled: local.disabled,
+		description: (local as unknown as RuletypesPostableRuleDTO).description,
 	};
 	return payload as unknown as RuletypesPostableRuleDTO;
 }
@@ -89,7 +94,7 @@ export function toPostableRuleDTO(
 export function toPostableRuleDTOFromAlertDef(
 	local: AlertDef,
 ): RuletypesPostableRuleDTO {
-	const payload = {
+	const payload: Record<keyof RuletypesPostableRuleDTO, any> = {
 		alert: local.alert,
 		alertType: toAlertTypeDTO(local.alertType),
 		ruleType: toRuleTypeDTO(local.ruleType),
@@ -99,11 +104,16 @@ export function toPostableRuleDTOFromAlertDef(
 		evalWindow: local.evalWindow,
 		frequency: local.frequency,
 		preferredChannels: local.preferredChannels,
+		notificationSettings: (local as unknown as RuletypesPostableRuleDTO)
+			.notificationSettings,
+		evaluation: (local as unknown as RuletypesPostableRuleDTO).evaluation,
+		schemaVersion: (local as unknown as RuletypesPostableRuleDTO).schemaVersion,
 		source: local.source,
 		version: local.version,
 		disabled: local.disabled,
+		description: (local as unknown as RuletypesPostableRuleDTO).description,
 	};
-	return payload as unknown as RuletypesPostableRuleDTO;
+	return payload;
 }
 
 export function fromRuleDTOToPostableRuleV2(

pkg/apiserver/signozapiserver/spanmapper.go

@@ -51,6 +51,26 @@ func (provider *provider) addSpanMapperRoutes(router *mux.Router) error {
 		return err
 	}
 
+	if err := router.Handle("/api/v1/span_mapper_groups/test", handler.New(
+		provider.authzMiddleware.ViewAccess(provider.spanMapperHandler.TestMappers),
+		handler.OpenAPIDef{
+			ID:                  "TestSpanMappers",
+			Tags:                []string{"spanmapper"},
+			Summary:             "Test span mappers against sample spans",
+			Description:         "Tests how span mappers would transform sample spans",
+			Request:             new(spantypes.PostableSpanMapperTest),
+			RequestContentType:  "application/json",
+			Response:            new(spantypes.GettableSpanMapperTest),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodPost).GetError(); err != nil {
+		return err
+	}
+
 	if err := router.Handle("/api/v1/span_mapper_groups/{groupId}", handler.New(
 		provider.authzMiddleware.AdminAccess(provider.spanMapperHandler.UpdateGroup),
 		handler.OpenAPIDef{

pkg/modules/spanmapper/implspanmapper/handler.go

@@ -273,6 +273,35 @@ func (h *handler) DeleteMapper(rw http.ResponseWriter, r *http.Request) {
 	render.Success(rw, http.StatusNoContent, nil)
 }
 
+// TestMappers handles POST /api/v1/span_mapper_groups/test.
+func (h *handler) TestMappers(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	req := new(spantypes.PostableSpanMapperTest)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	groups := spantypes.NewSpanMapperGroupsWithMappersFromPostable(orgID, req.Groups)
+	out, err := h.module.TestMappers(ctx, orgID, req.Spans, groups)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, &spantypes.GettableSpanMapperTest{Spans: out})
+}
+
 // groupIDFromPath extracts and validates the {id} or {groupId} path variable.
 func groupIDFromPath(r *http.Request) (valuer.UUID, error) {
 	vars := mux.Vars(r)

pkg/modules/spanmapper/implspanmapper/module.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"encoding/json"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/modules/spanmapper"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	"github.com/SigNoz/signoz/pkg/types/opamptypes"
@@ -102,6 +103,54 @@ func (module *module) DeleteMapper(ctx context.Context, orgID, groupID, id value
 	return nil
 }
 
+func (module *module) TestMappers(ctx context.Context, orgID valuer.UUID, spans []spantypes.SpanMapperTestSpan, groups []*spantypes.SpanMapperGroupWithMappers) ([]spantypes.SpanMapperTestSpan, error) {
+	if len(spans) == 0 {
+		return nil, errors.New(errors.TypeInvalidInput, spantypes.ErrCodeMappingInvalidInput, "'spans' must contain at least one span")
+	}
+
+	_, err := module.backfillMappers(ctx, orgID, groups)
+	if err != nil {
+		return nil, err
+	}
+
+	// out, _, err := spantypes.SimulateSpanMappersProcessing(ctx, resolved, spans)
+	// if err != nil {
+	// 	return nil, err
+	// }
+	// return out, nil
+	return nil, nil
+}
+
+// backfillMappers loads saved mappers for any group whose Mappers is nil.
+func (module *module) backfillMappers(ctx context.Context, orgID valuer.UUID, groups []*spantypes.SpanMapperGroupWithMappers) ([]*spantypes.SpanMapperGroupWithMappers, error) {
+	// Load all the saved groups for this org, so we can look up by name.
+	savedGroups, err := module.store.ListGroups(ctx, orgID, &spantypes.ListSpanMapperGroupsQuery{})
+	if err != nil {
+		return nil, err
+	}
+	savedByName := make(map[string]*spantypes.SpanMapperGroup, len(savedGroups))
+	for _, g := range savedGroups {
+		savedByName[g.Name] = g
+	}
+
+	// For each group in the request, if Mappers is nil, load the saved mappers for that group name.
+	for _, g := range groups {
+		if g.Mappers != nil {
+			continue
+		}
+		saved, ok := savedByName[g.Group.Name]
+		if !ok {
+			return nil, errors.Newf(errors.TypeInvalidInput, spantypes.ErrCodeMappingGroupNotFound, "no saved group named %q to load mappers from; send 'mappers' for new or edited groups", g.Group.Name)
+		}
+		loaded, err := module.store.ListMappers(ctx, orgID, saved.ID)
+		if err != nil {
+			return nil, err
+		}
+		g.Mappers = loaded
+	}
+	return groups, nil
+}
+
 func (module *module) AgentFeatureType() agentConf.AgentFeatureType {
 	return spantypes.SpanAttrMappingFeatureType
 }

pkg/modules/spanmapper/spanmapper.go

@@ -27,6 +27,7 @@ type Module interface {
 	CreateMapper(ctx context.Context, orgID, groupID valuer.UUID, mapper *spantypes.SpanMapper) error
 	UpdateMapper(ctx context.Context, orgID, groupID, id valuer.UUID, fieldContext spantypes.FieldContext, config *spantypes.SpanMapperConfig, enabled *bool, updatedBy string) error
 	DeleteMapper(ctx context.Context, orgID, groupID, id valuer.UUID) error
+	TestMappers(ctx context.Context, orgID valuer.UUID, spans []spantypes.SpanMapperTestSpan, groups []*spantypes.SpanMapperGroupWithMappers) ([]spantypes.SpanMapperTestSpan, error)
 }
 
 // Handler defines the HTTP handler interface for mapping group and mapper endpoints.
@@ -42,4 +43,5 @@ type Handler interface {
 	CreateMapper(rw http.ResponseWriter, r *http.Request)
 	UpdateMapper(rw http.ResponseWriter, r *http.Request)
 	DeleteMapper(rw http.ResponseWriter, r *http.Request)
+	TestMappers(rw http.ResponseWriter, r *http.Request)
 }

pkg/querier/querier.go

@@ -119,11 +119,7 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 	queries := make(map[string]qbtypes.Query)
 	steps := make(map[string]qbtypes.Step)
 
-	// Resolve metric metadata once per request: patches each metric-aggregation
-	// query's spec in place, returns the queries whose every aggregation was
-	// missing (used for preseeded empty results), and any dormant-metric
-	// warning string. NotFound errors for never-seen metrics are propagated.
-	missingMetricQueries, dormantMetricsWarningMsg, err := q.resolveMetricMetadata(ctx, req.CompositeQuery.Queries, req.Start, req.End)
+	missingMetricQueries, metricWarnings, err := q.resolveMetricMetadata(ctx, req.CompositeQuery.Queries, req.Start, req.End)
 	if err != nil {
 		return nil, err
 	}
@@ -240,13 +236,15 @@ func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtype
 				}
 			}
 		}
-		if dormantMetricsWarningMsg != "" {
+		if len(metricWarnings) > 0 {
 			if qbResp.Warning == nil {
 				qbResp.Warning = &qbtypes.QueryWarnData{}
 			}
-			qbResp.Warning.Warnings = append(qbResp.Warning.Warnings, qbtypes.QueryWarnDataAdditional{
-				Message: dormantMetricsWarningMsg,
-			})
+			for _, w := range metricWarnings {
+				qbResp.Warning.Warnings = append(qbResp.Warning.Warnings, qbtypes.QueryWarnDataAdditional{
+					Message: w,
+				})
+			}
 		}
 	}
 	return qbResp, qbErr
@@ -302,12 +300,11 @@ func (q *querier) populateQBEvent(event *qbtypes.QBEvent, queries []qbtypes.Quer
 //   - missingMetricQueries: names of queries whose every aggregation was
 //     missing. Used downstream to preseed empty result placeholders so the
 //     response still has an entry per requested query name.
-//   - dormantWarning: a human-readable warning describing metrics that exist in
-//     the store but produced no data within the query window. Empty when no
-//     such metrics are present.
-//   - err: NotFound when one or more referenced metrics have never been seen,
-//     or Internal when a metadata fetch fails.
-func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.QueryEnvelope, start, end uint64) (missingMetricQueries []string, dormantWarning string, err error) {
+//   - metricWarnings: human-readable warnings for metrics that could not be
+//     resolved: never-seen metrics and dormant metrics (seen but no data in
+//     the query window).
+//   - err: Internal when a metadata fetch fails.
+func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.QueryEnvelope, start, end uint64) (missingMetricQueries []string, metricWarnings []string, err error) {
 	metricNames := make([]string, 0)
 	for idx := range queries {
 		if queries[idx].Type != qbtypes.QueryTypeBuilder {
@@ -325,13 +322,13 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 	}
 
 	if len(metricNames) == 0 {
-		return nil, "", nil
+		return nil, nil, nil
 	}
 
 	metricTemporality, metricTypes, err := q.metadataStore.FetchTemporalityAndTypeMulti(ctx, start, end, metricNames...)
 	if err != nil {
 		q.logger.WarnContext(ctx, "failed to fetch metric temporality", errors.Attr(err), slog.Any("metrics", metricNames))
-		return nil, "", errors.NewInternalf(errors.CodeInternal, "failed to fetch metrics temporality")
+		return nil, nil, errors.NewInternalf(errors.CodeInternal, "failed to fetch metrics temporality")
 	}
 	q.logger.DebugContext(ctx, "fetched metric temporalities and types", slog.Any("metric_temporality", metricTemporality), slog.Any("metric_types", metricTypes))
 
@@ -363,7 +360,7 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 			}
 			// Type is resolved now; validate aggregation compatibility against it.
 			if err := spec.Aggregations[i].ValidateForType(); err != nil {
-				return nil, "", err
+				return nil, nil, err
 			}
 			presentAggregations = append(presentAggregations, spec.Aggregations[i])
 		}
@@ -376,7 +373,7 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 	}
 
 	if len(missingMetrics) == 0 {
-		return missingMetricQueries, "", nil
+		return missingMetricQueries, nil, nil
 	}
 
 	isInternalMetric := func(n string) bool { return strings.HasPrefix(n, "signoz.") || strings.HasPrefix(n, "signoz_") }
@@ -387,29 +384,33 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 		}
 	}
 	if len(externalMissingMetrics) == 0 {
-		// this means all missing metrics are internal, and since internal metrics
-		// aren't user-controlled, skip errors/warnings for them since users can't act on them
-		return missingMetricQueries, "", nil
+		return missingMetricQueries, nil, nil
 	}
 
-	// Classify each missing metric: never-seen → NotFound error; seen-but-no-
-	// data-in-window → dormant warning.
+	// Classify each missing metric: never-seen -> warning with empty result;
+	// seen-but-no-data-in-window -> dormant warning.
 	lastSeenInfo, _ := q.metadataStore.FetchLastSeenInfoMulti(ctx, externalMissingMetrics...)
-	nonExistentMetrics := []string{}
+	var nonExistentMetrics []string
+	var dormantMetrics []string
 	for _, name := range externalMissingMetrics {
 		if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
+			dormantMetrics = append(dormantMetrics, name)
 			continue
 		}
 		nonExistentMetrics = append(nonExistentMetrics, name)
 	}
+
+	var warnings []string
+
+	// Never-seen metrics: the query already gets a preseeded empty result
+	// via the aggregation-dropping path above; we just attach a warning.
 	if len(nonExistentMetrics) == 1 {
-		return nil, "", errors.NewNotFoundf(errors.CodeNotFound, "could not find the metric %s", nonExistentMetrics[0])
-	}
-	if len(nonExistentMetrics) > 1 {
-		return nil, "", errors.NewNotFoundf(errors.CodeNotFound, "the following metrics were not found: %s", strings.Join(nonExistentMetrics, ", "))
+		warnings = append(warnings, fmt.Sprintf("metric %s has never been received. Check the metric name and instrumentation", nonExistentMetrics[0]))
+	} else if len(nonExistentMetrics) > 1 {
+		warnings = append(warnings, fmt.Sprintf("the following metrics have never been received. Check the metric names and instrumentation: %s", strings.Join(nonExistentMetrics, ", ")))
 	}
 
-	// All missing metrics are dormant — assemble the warning string.
+	// Dormant metrics: seen before but no data in the query window.
 	lastSeenStr := func(name string) string {
 		if ts, ok := lastSeenInfo[name]; ok && ts > 0 {
 			ago := humanize.RelTime(time.UnixMilli(ts), time.Now(), "ago", "from now")
@@ -417,16 +418,16 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 		}
 		return name
 	}
-	if len(externalMissingMetrics) == 1 {
-		dormantWarning = fmt.Sprintf("no data found for the metric %s in the query time range", lastSeenStr(missingMetrics[0]))
-	} else {
-		parts := make([]string, len(externalMissingMetrics))
-		for i, m := range externalMissingMetrics {
+	if len(dormantMetrics) == 1 {
+		warnings = append(warnings, fmt.Sprintf("no data found for the metric %s in the query time range", lastSeenStr(dormantMetrics[0])))
+	} else if len(dormantMetrics) > 1 {
+		parts := make([]string, len(dormantMetrics))
+		for i, m := range dormantMetrics {
 			parts[i] = lastSeenStr(m)
 		}
-		dormantWarning = fmt.Sprintf("no data found for the following metrics in the query time range: %s", strings.Join(parts, ", "))
+		warnings = append(warnings, fmt.Sprintf("no data found for the following metrics in the query time range: %s", strings.Join(parts, ", ")))
 	}
-	return missingMetricQueries, dormantWarning, nil
+	return missingMetricQueries, warnings, nil
 }
 
 func (q *querier) QueryRawStream(ctx context.Context, orgID valuer.UUID, req *qbtypes.QueryRangeRequest, client *qbtypes.RawStream) {

pkg/querier/querier_test.go

@@ -37,7 +37,7 @@ func (m *mockMetricStmtBuilder) Build(_ context.Context, _, _ uint64, _ qbtypes.
 
 func TestQueryRange_MetricTypeMissing(t *testing.T) {
 	// When a metric has UnspecifiedType and is not found in the metadata store,
-	// the querier should return a not-found error, even if the request provides a temporality
+	// the querier should return an empty result with a warning instead of an error.
 	providerSettings := instrumentationtest.New().ToProviderSettings()
 	metadataStore := telemetrytypestest.NewMockMetadataStore()
 
@@ -80,9 +80,14 @@ func TestQueryRange_MetricTypeMissing(t *testing.T) {
 		},
 	}
 
-	_, err := q.QueryRange(context.Background(), valuer.GenerateUUID(), req)
-	require.Error(t, err)
-	assert.Contains(t, err.Error(), "could not find the metric unknown_metric")
+	resp, err := q.QueryRange(context.Background(), valuer.GenerateUUID(), req)
+	require.NoError(t, err)
+	require.NotNil(t, resp)
+	require.NotNil(t, resp.Warning)
+
+	require.Len(t, resp.Warning.Warnings, 1)
+	assert.Contains(t, resp.Warning.Warnings[0].Message, "unknown_metric")
+	assert.Contains(t, resp.Warning.Warnings[0].Message, "has never been received")
 }
 
 func TestQueryRange_MetricTypeFromStore(t *testing.T) {

pkg/telemetrymetrics/statement_builder.go

@@ -101,9 +101,29 @@ func (b *MetricQueryStatementBuilder) Build(
 		return nil, err
 	}
 
+	var pairFallbackWarnings []string
+	for _, sel := range keySelectors {
+		if _, ok := keys[sel.Name]; !ok {
+			keys[sel.Name] = []*telemetrytypes.TelemetryFieldKey{{
+				Name:          sel.Name,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+				Signal:        telemetrytypes.SignalMetrics,
+			}}
+			pairFallbackWarnings = append(pairFallbackWarnings,
+				fmt.Sprintf("key `%s` not found on metric %s", sel.Name, query.Aggregations[0].MetricName),
+			)
+		}
+	}
+
 	start, end = querybuilder.AdjustedMetricTimeRange(start, end, uint64(query.StepInterval.Seconds()), query)
 
-	return b.buildPipelineStatement(ctx, start, end, query, keys, variables)
+	stmt, err := b.buildPipelineStatement(ctx, start, end, query, keys, variables)
+	if err != nil {
+		return nil, err
+	}
+	stmt.Warnings = append(stmt.Warnings, pairFallbackWarnings...)
+	return stmt, nil
 }
 
 func (b *MetricQueryStatementBuilder) buildPipelineStatement(

pkg/telemetrymetrics/stmt_builder_test.go

@@ -217,6 +217,39 @@ func TestStatementBuilder(t *testing.T) {
 			},
 			expectedErr: nil,
 		},
+		{
+			name:        "test_missing_key_falls_back_to_labels",
+			requestType: qbtypes.RequestTypeTimeSeries,
+			query: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
+				Signal:       telemetrytypes.SignalMetrics,
+				StepInterval: qbtypes.Step{Duration: 30 * time.Second},
+				Aggregations: []qbtypes.MetricAggregation{
+					{
+						MetricName:       "signoz_calls_total",
+						Type:             metrictypes.SumType,
+						Temporality:      metrictypes.Cumulative,
+						TimeAggregation:  metrictypes.TimeAggregationRate,
+						SpaceAggregation: metrictypes.SpaceAggregationSum,
+					},
+				},
+				Filter: &qbtypes.Filter{
+					Expression: "k8s.statefulset.name = 'my-statefulset'",
+				},
+				GroupBy: []qbtypes.GroupByKey{
+					{
+						TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+							Name: "k8s.statefulset.name",
+						},
+					},
+				},
+			},
+			expected: qbtypes.Statement{
+				Query: "WITH __temporal_aggregation_cte AS (SELECT ts, `k8s.statefulset.name`, multiIf(row_number() OVER rate_window = 1, nan, (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) < 0, per_series_value / (ts - lagInFrame(ts, 1) OVER rate_window), (per_series_value - lagInFrame(per_series_value, 1) OVER rate_window) / (ts - lagInFrame(ts, 1) OVER rate_window)) AS per_series_value FROM (SELECT fingerprint, toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalSecond(30)) AS ts, `k8s.statefulset.name`, max(value) AS per_series_value FROM signoz_metrics.distributed_samples_v4 AS points INNER JOIN (SELECT fingerprint, JSONExtractString(labels, 'k8s.statefulset.name') AS `k8s.statefulset.name` FROM signoz_metrics.time_series_v4_6hrs WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli <= ? AND LOWER(temporality) LIKE LOWER(?) AND __normalized = ? AND JSONExtractString(labels, 'k8s.statefulset.name') = ? GROUP BY fingerprint, `k8s.statefulset.name`) AS filtered_time_series ON points.fingerprint = filtered_time_series.fingerprint WHERE metric_name IN (?) AND unix_milli >= ? AND unix_milli < ? GROUP BY fingerprint, ts, `k8s.statefulset.name` ORDER BY fingerprint, ts) WINDOW rate_window AS (PARTITION BY fingerprint ORDER BY fingerprint, ts)), __spatial_aggregation_cte AS (SELECT ts, `k8s.statefulset.name`, sum(per_series_value) AS value FROM __temporal_aggregation_cte WHERE isNaN(per_series_value) = ? GROUP BY ts, `k8s.statefulset.name`) SELECT * FROM __spatial_aggregation_cte ORDER BY `k8s.statefulset.name`, ts",
+				Args:     []any{"signoz_calls_total", uint64(1747936800000), uint64(1747983420000), "cumulative", false, "my-statefulset", "signoz_calls_total", uint64(1747947360000), uint64(1747983420000), 0},
+				Warnings: []string{"key `k8s.statefulset.name` not found on metric signoz_calls_total"},
+			},
+			expectedErr: nil,
+		},
 	}
 
 	fm := NewFieldMapper()

pkg/types/spantypes/spanmappersimulator.go

@@ -0,0 +1,151 @@
+package spantypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/errors"
+	"go.opentelemetry.io/collector/pdata/ptrace"
+)
+
+var (
+	ErrCodeProcessorFactoryMapFailed  = errors.MustNewCode("processor_factory_map_failed")
+	ErrCodeSpanMapperSimulationFailed = errors.MustNewCode("span_mapper_simulation_failed")
+)
+
+// spanInputOrderAttr tags each input span with its index so the simulator
+// output can be sorted back into input order. The collector simulator does
+// not guarantee that traces come out in the order they went in.
+const spanInputOrderAttr = "__signoz_input_idx__"
+
+// SimulateSpanMappersProcessing runs the given spans through an in-memory
+// collector pipeline that hosts signozspanmapperprocessor configured by the
+// supplied groups, and returns the transformed spans. Mirrors
+// SimulatePipelinesProcessing in pkg/query-service/app/logparsingpipeline.
+// func SimulateSpanMappersProcessing(
+// 	ctx context.Context,
+// 	groups []*SpanMapperGroupWithMappers,
+// 	spans []SpanMapperTestSpan,
+// ) (
+// 	[]SpanMapperTestSpan, []string, error,
+// ) {
+// 	enabled := filterEnabledGroupsWithMappers(groups)
+// 	if len(enabled) < 1 {
+// 		return spans, nil, nil
+// 	}
+
+// 	for i := range spans {
+// 		if spans[i].Attributes == nil {
+// 			spans[i].Attributes = map[string]any{}
+// 		}
+// 		spans[i].Attributes[spanInputOrderAttr] = int64(i)
+// 	}
+// 	simulatorInput := SpansToPTraces(spans)
+
+// 	processorFactories, err := otelcol.MakeFactoryMap(signozspanmapperprocessor.NewFactory())
+// 	if err != nil {
+// 		return nil, nil, errors.WrapInternalf(err, ErrCodeProcessorFactoryMapFailed, "could not construct processor factory map")
+// 	}
+
+// 	configGenerator := func(baseConf []byte) ([]byte, error) {
+// 		return GenerateCollectorConfigWithSpanMapperProcessor(baseConf, enabled)
+// 	}
+
+// 	// signozspanmapperprocessor does no batching; spans flow through immediately.
+// 	timeout := 200 * time.Millisecond
+
+// 	outputTraces, collectorErrs, simErr := collectorsimulator.SimulateTracesProcessing(
+// 		ctx,
+// 		processorFactories,
+// 		configGenerator,
+// 		simulatorInput,
+// 		timeout,
+// 	)
+// 	if simErr != nil {
+// 		if errors.Is(simErr, collectorsimulator.ErrInvalidConfig) {
+// 			return nil, nil, errors.WrapInvalidInputf(simErr, errors.CodeInvalidInput, "invalid config")
+// 		}
+// 		return nil, nil, errors.WrapInternalf(simErr, ErrCodeSpanMapperSimulationFailed, "could not simulate span mapper processing")
+// 	}
+
+// 	outputSpans := PTracesToSpans(outputTraces)
+
+// 	sort.Slice(outputSpans, func(i, j int) bool {
+// 		iIdx, _ := outputSpans[i].Attributes[spanInputOrderAttr].(int64)
+// 		jIdx, _ := outputSpans[j].Attributes[spanInputOrderAttr].(int64)
+// 		return iIdx < jIdx
+// 	})
+// 	for _, s := range outputSpans {
+// 		delete(s.Attributes, spanInputOrderAttr)
+// 	}
+
+// 	collectorWarnAndErrorLogs := []string{}
+// 	for _, log := range collectorErrs {
+// 		if log == "" || strings.Contains(log, "featuregate.go") {
+// 			continue
+// 		}
+// 		collectorWarnAndErrorLogs = append(collectorWarnAndErrorLogs, log)
+// 	}
+
+// 	return outputSpans, collectorWarnAndErrorLogs, nil
+// }
+
+// SpansToPTraces packs each input span into its own ptrace.Traces with one
+// ResourceSpans / ScopeSpans / Span carrying its attribute and resource maps.
+func SpansToPTraces(spans []SpanMapperTestSpan) []ptrace.Traces {
+	result := make([]ptrace.Traces, 0, len(spans))
+	for _, s := range spans {
+		td := ptrace.NewTraces()
+		rs := td.ResourceSpans().AppendEmpty()
+		if s.Resource != nil {
+			_ = rs.Resource().Attributes().FromRaw(s.Resource)
+		}
+		sl := rs.ScopeSpans().AppendEmpty()
+		span := sl.Spans().AppendEmpty()
+		if s.Attributes != nil {
+			_ = span.Attributes().FromRaw(s.Attributes)
+		}
+		result = append(result, td)
+	}
+	return result
+}
+
+// PTracesToSpans flattens simulator output back into SpanMapperTestSpan: one
+// entry per individual Span across all ResourceSpans / ScopeSpans.
+func PTracesToSpans(traces []ptrace.Traces) []SpanMapperTestSpan {
+	result := []SpanMapperTestSpan{}
+	for _, td := range traces {
+		rss := td.ResourceSpans()
+		for i := 0; i < rss.Len(); i++ {
+			rs := rss.At(i)
+			resourceAttrs := rs.Resource().Attributes().AsRaw()
+			ilss := rs.ScopeSpans()
+			for j := 0; j < ilss.Len(); j++ {
+				spans := ilss.At(j).Spans()
+				for k := 0; k < spans.Len(); k++ {
+					result = append(result, SpanMapperTestSpan{
+						Attributes: spans.At(k).Attributes().AsRaw(),
+						Resource:   resourceAttrs,
+					})
+				}
+			}
+		}
+	}
+	return result
+}
+
+func filterEnabledGroupsWithMappers(groups []*SpanMapperGroupWithMappers) []*SpanMapperGroupWithMappers {
+	out := make([]*SpanMapperGroupWithMappers, 0, len(groups))
+	for _, gm := range groups {
+		if gm == nil || gm.Group == nil || !gm.Group.Enabled {
+			continue
+		}
+		enabled := make([]*SpanMapper, 0, len(gm.Mappers))
+		for _, m := range gm.Mappers {
+			if m != nil && m.Enabled {
+				enabled = append(enabled, m)
+			}
+		}
+		if len(enabled) > 0 {
+			out = append(out, &SpanMapperGroupWithMappers{Group: gm.Group, Mappers: enabled})
+		}
+	}
+	return out
+}

pkg/types/spantypes/spanmappertest.go

@@ -0,0 +1,53 @@
+package spantypes
+
+import (
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type SpanMapperTestSpan struct {
+	Attributes map[string]any `json:"attributes"`
+	Resource   map[string]any `json:"resource"`
+}
+
+// Mappers is optional because the module can backfill from the store by Group.Name.
+type PostableSpanMapperTestGroup struct {
+	PostableSpanMapperGroup
+	Mappers []PostableSpanMapper `json:"mappers"`
+}
+
+type PostableSpanMapperTest struct {
+	Spans  []SpanMapperTestSpan          `json:"spans"  required:"true"`
+	Groups []PostableSpanMapperTestGroup `json:"groups" required:"true"`
+}
+
+type GettableSpanMapperTest struct {
+	Spans []SpanMapperTestSpan `json:"spans" required:"true"`
+}
+
+func NewSpanMapperGroupsWithMappersFromPostable(orgID valuer.UUID, in []PostableSpanMapperTestGroup) []*SpanMapperGroupWithMappers {
+	out := make([]*SpanMapperGroupWithMappers, 0, len(in))
+	for _, pg := range in {
+		var mappers []*SpanMapper
+		if pg.Mappers != nil {
+			mappers = make([]*SpanMapper, 0, len(pg.Mappers))
+			for _, pm := range pg.Mappers {
+				mappers = append(mappers, &SpanMapper{
+					Name:         pm.Name,
+					FieldContext: pm.FieldContext,
+					Config:       pm.Config,
+					Enabled:      pm.Enabled,
+				})
+			}
+		}
+		out = append(out, &SpanMapperGroupWithMappers{
+			Group: &SpanMapperGroup{
+				OrgID:     orgID,
+				Name:      pg.Name,
+				Condition: pg.Condition,
+				Enabled:   pg.Enabled,
+			},
+			Mappers: mappers,
+		})
+	}
+	return out
+}

pkg/types/telemetrytypes/field.go

@@ -4,7 +4,6 @@ import (
 	"fmt"
 	"strings"
 
-	"github.com/SigNoz/signoz-otel-collector/exporter/jsontypeexporter"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
@@ -22,7 +21,7 @@ const (
 	// BodyJSONStringSearchPrefix is the prefix used for body JSON search queries.
 	// e.g., "body.status" where "body." is the prefix.
 	BodyJSONStringSearchPrefix = "body."
-	ArraySep                   = jsontypeexporter.ArraySeparator
+	ArraySep                   = "[]."
 	ArraySepSuffix             = "[]"
 	// TODO(Piyush): Remove once we've migrated to the new array syntax.
 	ArrayAnyIndex       = "[*]."

pkg/types/telemetrytypes/json_access_plan.go

@@ -6,7 +6,6 @@ import (
 	"slices"
 	"strings"
 
-	"github.com/SigNoz/signoz-otel-collector/exporter/jsontypeexporter"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
@@ -76,7 +75,7 @@ func (n *JSONAccessNode) Alias() string {
 	parentAlias := strings.TrimLeft(n.Parent.Alias(), "`")
 	parentAlias = strings.TrimRight(parentAlias, "`")
 
-	sep := jsontypeexporter.ArraySeparator
+	sep := "[]."
 	if n.Parent.isRoot {
 		sep = "."
 	}

tests/integration/tests/querier/03_metrics.py

@@ -614,7 +614,7 @@ def test_histogram_p90_returns_warning_outside_data_window(
     assert warnings[0]["message"].startswith(f"no data found for the metric {metric_name}")
 
 
-def test_non_existent_metrics_returns_404(
+def test_non_existent_metrics_returns_warning(
     signoz: types.SigNoz,
     create_user_admin: None,  # pylint: disable=unused-argument
     get_token: Callable[[str, str], str],
@@ -635,9 +635,11 @@ def test_non_existent_metrics_returns_404(
 
     start_2h = int((now - timedelta(hours=2)).timestamp() * 1000)
     response = make_query_request(signoz, token, start_2h, end_ms, [query])
-    assert response.status_code == HTTPStatus.NOT_FOUND
+    assert response.status_code == HTTPStatus.OK
 
-    assert get_error_message(response.json()) == "could not find the metric whatevergoennnsgoeshere"
+    data = response.json()
+    warnings = get_all_warnings(data)
+    assert any("whatevergoennnsgoeshere" in w["message"] and "has never been received" in w["message"] for w in warnings), f"expected never-seen metric warning, got: {warnings}"
 
 
 def test_non_existent_internal_metrics_returns_no_warning(