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

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;