chore: minor type fix

A table/scalar panel backed by a ClickHouse SQL query rendered every
aggregation column with the header "A" (the query name) and the same value in
each, while only the group columns (e.g. service.name) showed correctly.

Root cause: the scalar-response column-naming utils derive a value column's
display name and row-data key from request-side aggregation metadata, which
only exists for builder_query envelopes. A clickhouse_sql query has none, so
getColName/getColId fell through to the query name for every value column.
Sharing one id ("A") collapsed all value columns onto a single row key, so the
last column written (total_requests) overwrote the rest.

The backend already returns correct data: readAsScalar names each ClickHouse
SELECT column with its real SQL alias and a unique aggregationIndex. This is a
frontend-only consumption fix.

Fix: when a column belongs to a clickhouse_sql query (determined from the
request's query type, not a name heuristic), name and key it by the response
column's real SQL alias. Builder queries are unchanged; formulas/promql keep
the legend || queryName fallback. Applied to both the V1 converter
(convertV5Response.ts, the live table-panel path) and the V2 path
(prepareScalarTables.ts).

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

@@ -274,4 +274,110 @@ describe('convertV5ResponseToLegacy', () => {
 			},
 		});
 	});
+
+	it('clickhouse_sql scalar keeps each value column distinct (regression: all-"A" collapse)', () => {
+		const scalar: ScalarData = {
+			columns: [
+				{
+					name: 'service.name',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'group',
+				} as unknown as ScalarData['columns'][number],
+				{
+					name: 'current_availability',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as unknown as ScalarData['columns'][number],
+				{
+					name: 'error_budget_remaining',
+					queryName: 'A',
+					aggregationIndex: 1,
+					columnType: 'aggregation',
+				} as unknown as ScalarData['columns'][number],
+				{
+					name: 'budget_status',
+					queryName: 'A',
+					aggregationIndex: 2,
+					columnType: 'group',
+				} as unknown as ScalarData['columns'][number],
+				{
+					name: 'total_requests',
+					queryName: 'A',
+					aggregationIndex: 4,
+					columnType: 'aggregation',
+				} as unknown as ScalarData['columns'][number],
+			],
+			data: [['kuja-api_gateway-service', 99.985, 0.985, 'Healthy ✅', 2181216]],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'scalar',
+			data: { results: [scalar] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+		};
+
+		// A clickhouse_sql envelope contributes no aggregation metadata.
+		const params = makeBaseParams('scalar', [
+			{
+				type: 'clickhouse_sql',
+				spec: {
+					name: 'A',
+					query: 'SELECT ...',
+					disabled: false,
+				},
+			} as unknown as QueryRangeRequestV5['compositeQuery']['queries'][number],
+		]);
+
+		const input: SuccessResponse<MetricRangePayloadV5, QueryRangeRequestV5> =
+			makeBaseSuccess({ data: v5Data }, params);
+		// formatForWeb=true is the table-panel path.
+		const result = convertV5ResponseToLegacy(input, { A: '' }, true);
+
+		const [tableEntry] = result.payload.data.result;
+		// Headers keep their real names instead of collapsing to "A".
+		expect(tableEntry.table?.columns).toStrictEqual([
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			{
+				name: 'current_availability',
+				queryName: 'A',
+				isValueColumn: true,
+				id: 'current_availability',
+			},
+			{
+				name: 'error_budget_remaining',
+				queryName: 'A',
+				isValueColumn: true,
+				id: 'error_budget_remaining',
+			},
+			{
+				name: 'budget_status',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'budget_status',
+			},
+			{
+				name: 'total_requests',
+				queryName: 'A',
+				isValueColumn: true,
+				id: 'total_requests',
+			},
+		]);
+		// Ids are unique, so value columns don't overwrite each other in the row.
+		expect(tableEntry.table?.rows?.[0]).toStrictEqual({
+			data: {
+				'service.name': 'kuja-api_gateway-service',
+				current_availability: 99.985,
+				error_budget_remaining: 0.985,
+				budget_status: 'Healthy ✅',
+				total_requests: 2181216,
+			},
+		});
+	});
 });

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

@@ -15,6 +15,7 @@ function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
 	aggregationPerQuery: Record<string, any>,
+	clickhouseQueryNames: Set<string>,
 ): string {
 	if (col.columnType === 'group') {
 		return col.name;
@@ -39,16 +40,32 @@ function getColName(
 		return alias || expression || col.queryName;
 	}
 
+	// clickhouse_sql value columns carry their real SQL alias in col.name — use
+	// it so each value column keeps its own header instead of collapsing onto
+	// the query name. Formulas/promql use placeholder names, so they fall back
+	// to legend || queryName.
+	if (clickhouseQueryNames.has(col.queryName)) {
+		return col.name;
+	}
 	return legend || col.queryName;
 }
 
 function getColId(
 	col: ScalarData['columns'][number],
 	aggregationPerQuery: Record<string, any>,
+	clickhouseQueryNames: Set<string>,
 ): string {
 	if (col.columnType === 'group') {
 		return col.name;
 	}
+
+	// clickhouse_sql value columns are keyed by their real SQL alias so multiple
+	// value columns stay unique instead of all collapsing onto the query name
+	// (which would overwrite every cell in the row with the last column's value).
+	if (clickhouseQueryNames.has(col.queryName)) {
+		return col.name;
+	}
+
 	const aggregation =
 		aggregationPerQuery?.[col.queryName]?.[col.aggregationIndex];
 	const expression = aggregation?.expression || '';
@@ -141,6 +158,7 @@ function convertScalarDataArrayToTable(
 	scalarDataArray: ScalarData[],
 	legendMap: Record<string, string>,
 	aggregationPerQuery: Record<string, any>,
+	clickhouseQueryNames: Set<string>,
 ): QueryDataV3[] {
 	// If no scalar data, return empty structure
 
@@ -166,10 +184,10 @@ function convertScalarDataArrayToTable(
 
 		// Collect columns for this specific query
 		const columns = scalarData?.columns?.map((col) => ({
-			name: getColName(col, legendMap, aggregationPerQuery),
+			name: getColName(col, legendMap, aggregationPerQuery, clickhouseQueryNames),
 			queryName: col.queryName,
 			isValueColumn: col.columnType === 'aggregation',
-			id: getColId(col, aggregationPerQuery),
+			id: getColId(col, aggregationPerQuery, clickhouseQueryNames),
 		}));
 
 		// Process rows for this specific query
@@ -177,8 +195,13 @@ function convertScalarDataArrayToTable(
 			const rowData: Record<string, any> = {};
 
 			scalarData?.columns?.forEach((col, colIndex) => {
-				const columnName = getColName(col, legendMap, aggregationPerQuery);
-				const columnId = getColId(col, aggregationPerQuery);
+				const columnName = getColName(
+					col,
+					legendMap,
+					aggregationPerQuery,
+					clickhouseQueryNames,
+				);
+				const columnId = getColId(col, aggregationPerQuery, clickhouseQueryNames);
 				rowData[columnId || columnName] = dataRow[colIndex];
 			});
 
@@ -202,6 +225,7 @@ function convertScalarWithFormatForWeb(
 	scalarDataArray: ScalarData[],
 	legendMap: Record<string, string>,
 	aggregationPerQuery: Record<string, any>,
+	clickhouseQueryNames: Set<string>,
 ): QueryDataV3[] {
 	if (!scalarDataArray || scalarDataArray.length === 0) {
 		return [];
@@ -210,13 +234,18 @@ function convertScalarWithFormatForWeb(
 	return scalarDataArray.map((scalarData) => {
 		const columns =
 			scalarData.columns?.map((col) => {
-				const colName = getColName(col, legendMap, aggregationPerQuery);
+				const colName = getColName(
+					col,
+					legendMap,
+					aggregationPerQuery,
+					clickhouseQueryNames,
+				);
 
 				return {
 					name: colName,
 					queryName: col.queryName,
 					isValueColumn: col.columnType === 'aggregation',
-					id: getColId(col, aggregationPerQuery),
+					id: getColId(col, aggregationPerQuery, clickhouseQueryNames),
 				};
 			}) || [];
 
@@ -289,6 +318,7 @@ function convertV5DataByType(
 	v5Data: any,
 	legendMap: Record<string, string>,
 	aggregationPerQuery: Record<string, any>,
+	clickhouseQueryNames: Set<string>,
 ): MetricRangePayloadV3['data'] {
 	switch (v5Data?.type) {
 		case 'time_series': {
@@ -307,6 +337,7 @@ function convertV5DataByType(
 				scalarData,
 				legendMap,
 				aggregationPerQuery,
+				clickhouseQueryNames,
 			);
 			return {
 				resultType: 'scalar',
@@ -373,6 +404,15 @@ export function convertV5ResponseToLegacy(
 				{} as Record<string, any>,
 			) || {};
 
+	// clickhouse_sql queries have no aggregation metadata; their value columns
+	// are named/keyed by the real SQL alias the response carries (see getColId).
+	const clickhouseQueryNames = new Set<string>(
+		(params?.compositeQuery?.queries ?? [])
+			.filter((query) => query.type === 'clickhouse_sql')
+			.map((query) => (query.spec as { name?: string })?.name)
+			.filter((name): name is string => !!name),
+	);
+
 	// If formatForWeb is true, return as-is (like existing logic)
 	if (formatForWeb && v5Data?.type === 'scalar') {
 		const scalarData = v5Data.data.results as ScalarData[];
@@ -380,6 +420,7 @@ export function convertV5ResponseToLegacy(
 			scalarData,
 			legendMap,
 			aggregationPerQuery,
+			clickhouseQueryNames,
 		);
 
 		return {
@@ -402,6 +443,7 @@ export function convertV5ResponseToLegacy(
 		v5Data,
 		legendMap,
 		aggregationPerQuery,
+		clickhouseQueryNames,
 	);
 
 	// Create legacy-compatible response structure

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/queryV5/__tests__/prepareScalarTables.test.ts

@@ -5,6 +5,7 @@ import type {
 
 import {
 	extractAggregationsPerQuery,
+	extractClickhouseQueryNames,
 	prepareScalarTables,
 } from '../prepareScalarTables';
 
@@ -56,6 +57,24 @@ describe('extractAggregationsPerQuery', () => {
 	});
 });
 
+describe('extractClickhouseQueryNames', () => {
+	it('collects names of clickhouse_sql queries, ignoring other envelope types', () => {
+		const request = requestWith([
+			{ type: 'clickhouse_sql', spec: { name: 'A', query: 'SELECT 1' } },
+			{
+				type: 'builder_query',
+				spec: { name: 'B', aggregations: [{ expression: 'count()' }] },
+			},
+			{ type: 'promql', spec: { name: 'P', query: 'up' } },
+		]);
+		expect(extractClickhouseQueryNames(request)).toStrictEqual(new Set(['A']));
+	});
+
+	it('returns an empty set for an undefined payload', () => {
+		expect(extractClickhouseQueryNames(undefined)).toStrictEqual(new Set());
+	});
+});
+
 describe('prepareScalarTables', () => {
 	it('builds keyed rows with group + aggregation columns (V1 getColName/getColId parity)', () => {
 		const [table] = prepareScalarTables({
@@ -194,18 +213,115 @@ describe('prepareScalarTables', () => {
 		expect(tables.map((t) => t.queryName)).toStrictEqual(['A', 'B']);
 	});
 
-	it('queries without aggregation metadata fall back to legend || queryName', () => {
+	it('clickhouse_sql single value column uses the SQL alias over the legend', () => {
 		const [table] = prepareScalarTables({
 			results: [
+				scalarResult(
+					[
+						{
+							name: 'current_availability',
+							queryName: 'A',
+							columnType: 'aggregation',
+						},
+					],
+					[],
+				),
+			],
+			legendMap: { A: 'Legend' },
+			requestPayload: requestWith([
+				{ type: 'clickhouse_sql', spec: { name: 'A', query: 'SELECT ...' } },
+			]),
+		});
+		// The query is clickhouse_sql, so the response column's real SQL alias is
+		// used for both header and key (a single legend can't be the column name).
+		expect(table.columns[0].name).toBe('current_availability');
+		expect(table.columns[0].id).toBe('current_availability');
+	});
+
+	it('non-clickhouse query without aggregation metadata falls back to legend || queryName', () => {
+		const [table] = prepareScalarTables({
+			results: [
+				// Formulas/promql carry placeholder names and are not clickhouse_sql,
+				// so they must not adopt the response column name.
 				scalarResult(
 					[{ name: '__result_0', queryName: 'A', columnType: 'aggregation' }],
 					[],
 				),
 			],
 			legendMap: { A: 'Legend' },
-			requestPayload: requestWith([]),
+			requestPayload: requestWith([
+				{ type: 'promql', spec: { name: 'A', query: 'up' } },
+			]),
 		});
 		expect(table.columns[0].name).toBe('Legend');
 		expect(table.columns[0].id).toBe('A');
 	});
+
+	it('clickhouse_sql query keeps each value column distinct (regression: all-"A" collapse)', () => {
+		const [table] = prepareScalarTables({
+			results: [
+				scalarResult(
+					[
+						{ name: 'service.name', queryName: 'A', columnType: 'group' },
+						{
+							name: 'current_availability',
+							queryName: 'A',
+							columnType: 'aggregation',
+							aggregationIndex: 0,
+						},
+						{
+							name: 'error_budget_remaining',
+							queryName: 'A',
+							columnType: 'aggregation',
+							aggregationIndex: 1,
+						},
+						{ name: 'budget_status', queryName: 'A', columnType: 'group' },
+						{
+							name: 'total_requests',
+							queryName: 'A',
+							columnType: 'aggregation',
+							aggregationIndex: 4,
+						},
+					],
+					[['kuja-api_gateway-service', 99.985, 0.985, 'Healthy ✅', 2181216]],
+				),
+			],
+			legendMap: { A: '' },
+			// A clickhouse_sql envelope contributes no aggregation metadata.
+			requestPayload: requestWith([
+				{
+					type: 'clickhouse_sql',
+					spec: { name: 'A', query: 'SELECT ...' },
+				},
+			]),
+		});
+
+		// Headers keep their real names instead of collapsing to "A".
+		expect(table.columns.map((col) => col.name)).toStrictEqual([
+			'service.name',
+			'current_availability',
+			'error_budget_remaining',
+			'budget_status',
+			'total_requests',
+		]);
+		// Ids are unique, so value columns don't overwrite each other in the row.
+		expect(table.columns.map((col) => col.id)).toStrictEqual([
+			'service.name',
+			'current_availability',
+			'error_budget_remaining',
+			'budget_status',
+			'total_requests',
+		]);
+		expect(table.rows).toStrictEqual([
+			{
+				data: {
+					'service.name': 'kuja-api_gateway-service',
+					current_availability: 99.985,
+					error_budget_remaining: 0.985,
+					budget_status: 'Healthy ✅',
+					total_requests: 2181216,
+				},
+			},
+		]);
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables.ts

@@ -1,5 +1,6 @@
 import type {
 	Querybuildertypesv5ColumnDescriptorDTO,
+	Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
 	Querybuildertypesv5ScalarDataDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -44,16 +45,43 @@ export function extractAggregationsPerQuery(
 	return perQuery;
 }
 
+/**
+ * Names of the request's clickhouse_sql queries. These have no aggregation
+ * metadata, but their value columns carry the user's real SQL alias in the
+ * response `col.name` — so columns of these queries are named/keyed by that
+ * alias rather than collapsing onto the query name. Builder/formula/promql use
+ * placeholder names (`__result`/`__result_N`) and are excluded here.
+ */
+export function extractClickhouseQueryNames(
+	requestPayload: Querybuildertypesv5QueryRangeRequestDTO | undefined,
+): Set<string> {
+	const names = new Set<string>();
+	(requestPayload?.compositeQuery?.queries ?? []).forEach((envelope) => {
+		if (envelope.type !== Querybuildertypesv5QueryTypeDTO.clickhouse_sql) {
+			return;
+		}
+		const spec = (envelope as Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO)
+			.spec;
+		if (spec?.name) {
+			names.add(spec.name);
+		}
+	});
+	return names;
+}
+
 /**
  * Column display name. Group columns keep their field name; aggregation
  * columns resolve alias > legend > expression > queryName — with the legend
  * skipped when the query has multiple aggregations, because one legend can't
- * label several value columns. (Port of V1 `getColName`.)
+ * label several value columns. clickhouse_sql columns have no aggregation
+ * metadata, so their value columns are named by the real SQL alias the
+ * response carries in `col.name`. (Port of V1 `getColName`.)
  */
 function getColName(
 	col: Querybuildertypesv5ColumnDescriptorDTO,
 	legendMap: Record<string, string>,
 	aggregationsPerQuery: AggregationsPerQuery,
+	clickhouseQueryNames: Set<string>,
 ): string {
 	if (col.columnType === 'group') {
 		return col.name;
@@ -74,6 +102,13 @@ function getColName(
 		return alias || expression || queryName;
 	}
 
+	// clickhouse_sql value columns carry their real SQL alias in col.name — use
+	// it so each value column keeps its own header instead of collapsing onto
+	// the query name. Formulas/promql use placeholder names, so they fall back
+	// to legend || queryName.
+	if (clickhouseQueryNames.has(queryName)) {
+		return col.name;
+	}
 	return legend || queryName;
 }
 
@@ -85,15 +120,23 @@ function getColName(
 function getColId(
 	col: Querybuildertypesv5ColumnDescriptorDTO,
 	aggregationsPerQuery: AggregationsPerQuery,
+	clickhouseQueryNames: Set<string>,
 ): string {
 	if (col.columnType === 'group') {
 		return col.name;
 	}
 
 	const queryName = col.queryName ?? '';
+
+	// clickhouse_sql value columns are keyed by their real SQL alias so multiple
+	// value columns stay unique instead of all collapsing onto the query name
+	// (which would overwrite every cell in the row with the last column's value).
+	if (clickhouseQueryNames.has(queryName)) {
+		return col.name;
+	}
+
 	const aggregations = aggregationsPerQuery[queryName];
 	const expression = aggregations?.[col.aggregationIndex ?? 0]?.expression || '';
-
 	if ((aggregations?.length || 0) > 1 && expression) {
 		return `${queryName}.${expression}`;
 	}
@@ -119,6 +162,7 @@ export function prepareScalarTables({
 	requestPayload,
 }: PrepareScalarTablesArgs): PanelTable[] {
 	const aggregationsPerQuery = extractAggregationsPerQuery(requestPayload);
+	const clickhouseQueryNames = extractClickhouseQueryNames(requestPayload);
 
 	return results.map((scalarData) => {
 		if (!scalarData) {
@@ -132,10 +176,10 @@ export function prepareScalarTables({
 		const queryName = scalarData.columns?.[0]?.queryName ?? '';
 
 		const columns: PanelTableColumn[] = (scalarData.columns ?? []).map((col) => ({
-			name: getColName(col, legendMap, aggregationsPerQuery),
+			name: getColName(col, legendMap, aggregationsPerQuery, clickhouseQueryNames),
 			queryName: col.queryName ?? '',
 			isValueColumn: col.columnType === 'aggregation',
-			id: getColId(col, aggregationsPerQuery),
+			id: getColId(col, aggregationsPerQuery, clickhouseQueryNames),
 		}));
 
 		const rows = (scalarData.data ?? []).map((dataRow) => {

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/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()

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(