feat(quick-filters): derive checkbox display from related-values support

Signal pages send existingQuery: null, so related values are not fetched
for them. The item rules are now split on that: when related values are
fetched they stay authoritative for what appears in the results, when
not, the checked state derives from the key's own filter clause...clause
values sit in the selected section and the rest go under all values.

Also moves the meter explorer to CheckboxV2, reads time from redux
globalTime (the same source the explorer pages query with) and drops the
frontend bool synthesis since the backend returns boolValues now (#12794).

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -68,6 +68,13 @@ export function setupServer(): void {
 	afterAll(() => server.close());
 }
 
+// Components read currentQuery for the checkbox state and stagedQuery for the
+// values fetch; in the app both are set by the same URL sync, so tests pass one
+// query as both.
+export function buildQueryBuilderOverrides(query: unknown): never {
+	return { currentQuery: query, stagedQuery: query } as unknown as never;
+}
+
 export interface FilterItemConfig {
 	op: string;
 	value: string | string[];
@@ -99,18 +106,16 @@ export function renderWithFilter(
 		/>,
 		undefined,
 		{
-			queryBuilderOverrides: {
-				currentQuery: {
-					builder: {
-						queryData: [
-							{
-								filters: { items, op: 'AND' },
-								filter: { expression: 'service.name = "api"' },
-							},
-						],
-					},
+			queryBuilderOverrides: buildQueryBuilderOverrides({
+				builder: {
+					queryData: [
+						{
+							filters: { items, op: 'AND' },
+							filter: { expression: 'service.name = "api"' },
+						},
+					],
 				},
-			} as never,
+			}),
 		},
 	);
 }

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

@@ -3,6 +3,7 @@ import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
+import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	IQuickFiltersConfig,
 	QuickFilterChangeEventData,
@@ -74,6 +75,10 @@ export default function CheckboxFilterV2(
 		searchText,
 		existingQuery,
 		metricNamespace: useFieldApis.metricNamespace,
+		source:
+			source === QuickFiltersSource.METER_EXPLORER
+				? TelemetrytypesSourceDTO.meter
+				: undefined,
 		startUnixMilli: useFieldApis.startUnixMilli,
 		endUnixMilli: useFieldApis.endUnixMilli,
 		enabled: isOpen,
@@ -153,6 +158,7 @@ export default function CheckboxFilterV2(
 		isSomeFilterPresentForCurrentAttribute,
 		isNotInOperator,
 		hasExistingQuery,
+		isRelatedValuesSupported: useFieldApis.existingQuery !== null,
 		visibleItemsCount,
 		relatedExclusions,
 	});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -6,6 +6,7 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
+	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	setupServer,
@@ -57,18 +58,16 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'should.be.ignored = "yes"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -91,18 +90,16 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'should.be.ignored = "yes"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -124,27 +121,25 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'from-v3-items',
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'v5.expression = "preferred"' },
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'service.name', dataType: 'string', type: 'tag' },
+												op: '=',
+												value: 'from-v3-items',
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+									filter: { expression: 'v5.expression = "preferred"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -164,18 +159,16 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'only.v5 = "expression"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'only.v5 = "expression"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -197,26 +190,24 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api-service',
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'service.name', dataType: 'string', type: 'tag' },
+												op: '=',
+												value: 'api-service',
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -236,31 +227,29 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api',
-												},
-												{
-													key: { key: 'env', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'prod',
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'service.name', dataType: 'string', type: 'tag' },
+												op: '=',
+												value: 'api',
+											},
+											{
+												key: { key: 'env', dataType: 'string', type: 'tag' },
+												op: '=',
+												value: 'prod',
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -280,17 +269,15 @@ describe('CheckboxFilterV2 - existingQuery calculation', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -7,6 +7,7 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
+	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	getFilterFromCall,
@@ -125,18 +126,16 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -490,26 +489,24 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -555,26 +552,24 @@ describe('CheckboxFilterV2 - interactions', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -660,6 +655,57 @@ describe('CheckboxFilterV2 - interactions', () => {
 			expect(filter?.value).toBe('valueB');
 		});
 
+		it('adds to NOT IN when unchecking a non-excluded item without related values', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['valueA', 'valueB'],
+			});
+
+			// Without related values the display follows the clause: valueB is not
+			// excluded, so it renders checked; unchecking it excludes it too.
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'not in',
+												value: ['valueA'],
+											},
+										],
+										op: 'AND',
+									},
+								},
+							],
+						},
+					}),
+				},
+			);
+
+			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
+			expect(rowB).toHaveAttribute('data-state', 'checked');
+
+			await user.click(within(rowB).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('not in');
+			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
+		});
+
 		it('accumulates both values in IN when toggling checked (related) then unchecked (other)', async () => {
 			const user = userEvent.setup();
 			const onFilterChange = jest.fn();

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -5,6 +5,7 @@ import { QuickFiltersSource } from '../../../../types';
 
 import CheckboxFilterV2 from '../CheckboxFilterV2';
 import {
+	buildQueryBuilderOverrides,
 	DEFAULT_FILTER,
 	DEFAULT_USE_FIELD_APIS,
 	mockFieldsValuesAPI,
@@ -14,6 +15,88 @@ import {
 setupServer();
 
 describe('CheckboxFilterV2 - item rules', () => {
+	describe('related values unsupported (existingQuery: null)', () => {
+		it('renders a single flat section even when the api returns related values', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production'],
+				stringValues: ['staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toHaveAttribute(
+				'data-state',
+				'checked',
+			);
+
+			expect(
+				screen.queryByTestId('section-divider-related'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('section-divider-all-values'),
+			).not.toBeInTheDocument();
+		});
+
+		it('splits clause values and the rest into selected and all values sections', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
+									},
+								},
+							],
+						},
+					}),
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toHaveAttribute(
+				'data-state',
+				'unchecked',
+			);
+
+			expect(screen.getByTestId('section-divider-all-values')).toBeInTheDocument();
+			expect(
+				screen.queryByTestId('section-divider-related'),
+			).not.toBeInTheDocument();
+		});
+	});
+
 	describe('no existing query', () => {
 		it('all values show as checked with no badge when no query exists', async () => {
 			mockFieldsValuesAPI({
@@ -65,18 +148,16 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -112,18 +193,16 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -150,27 +229,25 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -201,26 +278,24 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -251,29 +326,28 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'not in',
+												value: ['production'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
+			// The excluded value renders unchecked.
 			const productionRow = await screen.findByTestId(
 				'checkbox-value-row-production',
 			);
@@ -282,8 +356,9 @@ describe('CheckboxFilterV2 - item rules', () => {
 				within(productionRow).queryByTestId(/^badge-/),
 			).not.toBeInTheDocument();
 
+			// The non-excluded value is still included by NOT IN, so it stays checked.
 			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+			expect(stagingRow).toHaveAttribute('data-state', 'checked');
 			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
 		});
 	});
@@ -306,27 +381,25 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-value'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['selected-value'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -359,18 +432,16 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: { items: [], op: 'AND' },
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -403,27 +474,25 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'in',
+												value: ['selected-env'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 
@@ -460,27 +529,25 @@ describe('CheckboxFilterV2 - item rules', () => {
 				/>,
 				undefined,
 				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['excluded-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
+					queryBuilderOverrides: buildQueryBuilderOverrides({
+						builder: {
+							queryData: [
+								{
+									filters: {
+										items: [
+											{
+												key: { key: 'deployment.environment' },
+												op: 'not in',
+												value: ['excluded-env'],
+											},
+										],
+										op: 'AND',
 									},
-								],
-							},
+									filter: { expression: 'service.name = "api"' },
+								},
+							],
 						},
-					} as never,
+					}),
 				},
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/itemRules.test.ts

@@ -8,6 +8,7 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: false,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -23,6 +24,7 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -38,6 +40,7 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: true,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -48,12 +51,46 @@ describe('itemRules', () => {
 			expect(result.checkedState).toBe('unchecked');
 		});
 
+		it('NOT IN filter, value not excluded, not related → all_values, unchecked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: true,
+				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.ALL_VALUES);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('unchecked');
+		});
+
+		it('NOT IN filter, value not excluded but related → related wins, checked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: true,
+				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.RELATED);
+			expect(result.checkedState).toBe('checked');
+		});
+
 		it('has query, not selected, in related → section related, checked', () => {
 			const ctx: ItemContext = {
 				isSelectedOnFilter: false,
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -70,6 +107,7 @@ describe('itemRules', () => {
 				isInRelatedValues: true,
 				isNotInOperator: false,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -86,6 +124,7 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: false,
 			};
 
@@ -102,6 +141,7 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -118,6 +158,7 @@ describe('itemRules', () => {
 				isInRelatedValues: false,
 				isNotInOperator: false,
 				hasExistingQuery: false,
+				isRelatedValuesSupported: true,
 				hasFilterForThisKey: true,
 			};
 
@@ -128,4 +169,70 @@ describe('itemRules', () => {
 			expect(result.checkedState).toBe('checked');
 		});
 	});
+
+	describe('deriveItemConfig with related values unsupported', () => {
+		const baseCtx: Omit<ItemContext, 'isSelectedOnFilter' | 'isNotInOperator'> = {
+			isInRelatedValues: false,
+			hasExistingQuery: true,
+			hasFilterForThisKey: true,
+			isRelatedValuesSupported: false,
+		};
+
+		it('no filter on this key → selected, checked, even with an existing query', () => {
+			const result = deriveItemConfig({
+				...baseCtx,
+				hasFilterForThisKey: false,
+				isSelectedOnFilter: false,
+				isNotInOperator: false,
+			});
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.checkedState).toBe('checked');
+		});
+
+		it('excluded by NOT IN → selected, unchecked', () => {
+			const result = deriveItemConfig({
+				...baseCtx,
+				isSelectedOnFilter: true,
+				isNotInOperator: true,
+			});
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.checkedState).toBe('unchecked');
+		});
+
+		it('selected by IN → selected, checked', () => {
+			const result = deriveItemConfig({
+				...baseCtx,
+				isSelectedOnFilter: true,
+				isNotInOperator: false,
+			});
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.checkedState).toBe('checked');
+		});
+
+		it('NOT IN complement → all_values, checked, related values ignored', () => {
+			const result = deriveItemConfig({
+				...baseCtx,
+				isSelectedOnFilter: false,
+				isNotInOperator: true,
+			});
+
+			expect(result.section).toBe(SectionType.ALL_VALUES);
+			expect(result.checkedState).toBe('checked');
+		});
+
+		it('IN complement → all_values, unchecked, never related', () => {
+			const result = deriveItemConfig({
+				...baseCtx,
+				isInRelatedValues: true,
+				isSelectedOnFilter: false,
+				isNotInOperator: false,
+			});
+
+			expect(result.section).toBe(SectionType.ALL_VALUES);
+			expect(result.checkedState).toBe('unchecked');
+		});
+	});
 });

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/useSectionedValues.test.ts

@@ -17,6 +17,7 @@ describe('useSectionedValues', () => {
 		isSomeFilterPresentForCurrentAttribute: false,
 		isNotInOperator: false,
 		hasExistingQuery: false,
+		isRelatedValuesSupported: true,
 		visibleItemsCount: 10,
 		relatedExclusions: [] as string[],
 	};
@@ -26,6 +27,7 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: false,
+				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -43,6 +45,7 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -71,6 +74,7 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: true,
 				currentFilterState: { val1: true, val2: false, val3: false },
 			}),
@@ -88,6 +92,7 @@ describe('useSectionedValues', () => {
 			useSectionedValues({
 				...baseInput,
 				hasExistingQuery: true,
+				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: true,
 				isNotInOperator: true,
 				currentFilterState: { val1: false, val2: true, val3: true },
@@ -110,6 +115,7 @@ describe('useSectionedValues', () => {
 				relatedValues: ['zebra', 'apple', 'mango'],
 				allValues: ['zebra', 'apple', 'mango'],
 				hasExistingQuery: false,
+				isRelatedValuesSupported: true,
 				isSomeFilterPresentForCurrentAttribute: false,
 			}),
 		);
@@ -126,6 +132,7 @@ describe('useSectionedValues', () => {
 				useSectionedValues({
 					...baseInput,
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: true,
 					currentFilterState: { val1: true },
 				}),
@@ -143,6 +150,7 @@ describe('useSectionedValues', () => {
 					relatedValues: [],
 					allValues: [],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					currentFilterState: {},
 				}),
@@ -159,6 +167,7 @@ describe('useSectionedValues', () => {
 					relatedValues: [],
 					allValues: ['other1', 'other2', 'other3'],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 				}),
 			);
@@ -178,6 +187,7 @@ describe('useSectionedValues', () => {
 					relatedValues: ['pod-a-1', 'pod-b-1', 'pod-c-1'],
 					allValues: ['pod-a-2', 'pod-b-2', 'pod-c-2'],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 				}),
 			);
@@ -218,6 +228,7 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					// stale API data kept via keepPreviousData
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
@@ -246,6 +257,7 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					// oldSelected was just de-selected; the rest are genuinely related
 					relatedValues: ['oldSelected', 'relatedA', 'relatedB', 'relatedC'],
 					allValues: ['newValue'],
@@ -275,6 +287,7 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
 					relatedExclusions: ['oldSelected'],
@@ -293,6 +306,7 @@ describe('useSectionedValues', () => {
 					currentFilterState: { newValue: true },
 					isSomeFilterPresentForCurrentAttribute: true,
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					relatedValues: ['oldSelected', 'otherRelated'],
 					allValues: ['newValue'],
 					relatedExclusions: [],
@@ -314,6 +328,7 @@ describe('useSectionedValues', () => {
 					relatedValues: ['related1'],
 					allValues: ['all1'],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: true,
 					currentFilterState: { selected1: true },
 				}),
@@ -337,6 +352,7 @@ describe('useSectionedValues', () => {
 					relatedValues: ['r1', 'r2', 'r3', 'r4', 'r5'],
 					allValues: ['a1', 'a2', 'a3', 'a4', 'a5'],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					visibleItemsCount: 100,
 				}),
@@ -355,6 +371,7 @@ describe('useSectionedValues', () => {
 					relatedValues: ['r1', 'r2', 'r3'],
 					allValues: ['a1', 'a2', 'a3'],
 					hasExistingQuery: true,
+					isRelatedValuesSupported: true,
 					isSomeFilterPresentForCurrentAttribute: false,
 					visibleItemsCount: 4,
 				}),

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -24,6 +24,7 @@ export interface ItemContext {
 	isNotInOperator: boolean;
 	hasExistingQuery: boolean;
 	hasFilterForThisKey: boolean;
+	isRelatedValuesSupported: boolean;
 }
 
 export interface DerivedItem extends ItemConfig {
@@ -35,7 +36,7 @@ interface ItemRule {
 	config: ItemConfig;
 }
 
-const ITEM_RULES: ItemRule[] = [
+const RELATED_SUPPORTED_RULES: ItemRule[] = [
 	// No existing query and no filter → all checked (selected section)
 	{
 		condition: (ctx): boolean =>
@@ -84,6 +85,54 @@ const ITEM_RULES: ItemRule[] = [
 	},
 ];
 
+const RELATED_UNSUPPORTED_RULES: ItemRule[] = [
+	// No filter on this key → included by default
+	{
+		condition: (ctx): boolean => !ctx.hasFilterForThisKey,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// Explicitly excluded by NOT IN
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'unchecked',
+		},
+	},
+	// Explicitly selected by IN
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// Not listed in the key's NOT IN clause → not excluded, still in results
+	{
+		condition: (ctx): boolean => ctx.isNotInOperator,
+		config: {
+			section: SectionType.ALL_VALUES,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// Not listed in the key's IN clause → filtered out of results
+	{
+		condition: (): boolean => true,
+		config: {
+			section: SectionType.ALL_VALUES,
+			badge: null,
+			checkedState: 'unchecked',
+		},
+	},
+];
+
 // Fallback when no rule matches
 const DEFAULT_CONFIG: ItemConfig = {
 	section: SectionType.SELECTED,
@@ -92,7 +141,10 @@ const DEFAULT_CONFIG: ItemConfig = {
 };
 
 export function deriveItemConfig(ctx: ItemContext): ItemConfig {
-	for (const rule of ITEM_RULES) {
+	const rules = ctx.isRelatedValuesSupported
+		? RELATED_SUPPORTED_RULES
+		: RELATED_UNSUPPORTED_RULES;
+	for (const rule of rules) {
 		if (rule.condition(ctx)) {
 			return rule.config;
 		}

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

@@ -17,7 +17,7 @@ export function useExistingQuery({
 	useFieldApis,
 	activeQueryIndex,
 }: UseExistingQueryParams): UseExistingQueryResult {
-	const { currentQuery } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 
 	const existingQuery = useMemo(() => {
 		if (useFieldApis.existingQuery === null) {
@@ -28,7 +28,7 @@ export function useExistingQuery({
 			return useFieldApis.existingQuery;
 		}
 
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		const queryData = stagedQuery?.builder.queryData?.[activeQueryIndex];
 
 		// Prefer V5 filter.expression
 		if (queryData?.filter?.expression) {
@@ -43,7 +43,7 @@ export function useExistingQuery({
 		return undefined;
 	}, [
 		useFieldApis.existingQuery,
-		currentQuery.builder.queryData,
+		stagedQuery?.builder.queryData,
 		activeQueryIndex,
 	]);
 
@@ -51,11 +51,11 @@ export function useExistingQuery({
 	// This is separate from existingQuery because existingQuery can be explicitly
 	// disabled (null) while filters still exist in the query for UI purposes
 	const hasExistingQuery = useMemo(() => {
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		const queryData = stagedQuery?.builder.queryData?.[activeQueryIndex];
 		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
 		const hasV5Expression = !!queryData?.filter?.expression;
 		return hasV3Items || hasV5Expression || !!existingQuery;
-	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
+	}, [stagedQuery?.builder.queryData, activeQueryIndex, existingQuery]);
 
 	return { existingQuery, hasExistingQuery };
 }

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

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { useGetFieldsValues } from 'api/generated/services/fields';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	TelemetrytypesSignalDTO,
+	TelemetrytypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { IQuickFiltersConfig } from 'components/QuickFilters/types';
 import { DataSource } from 'types/common/queryBuilder';
 import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
@@ -10,6 +13,7 @@ interface UseFieldValuesProps {
 	searchText: string;
 	existingQuery?: string;
 	metricNamespace?: string;
+	source?: TelemetrytypesSourceDTO;
 	startUnixMilli?: number;
 	endUnixMilli?: number;
 	enabled: boolean;
@@ -36,6 +40,7 @@ export function useFieldValues({
 	searchText,
 	existingQuery,
 	metricNamespace,
+	source,
 	startUnixMilli,
 	endUnixMilli,
 	enabled,
@@ -49,6 +54,7 @@ export function useFieldValues({
 			searchText,
 			existingQuery,
 			metricNamespace,
+			source,
 			startUnixMilli,
 			// This field does not affect the backend but I wanted to keep it here
 			// in case we add the support in the future

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -10,6 +10,7 @@ interface SectionedValuesInput {
 	isSomeFilterPresentForCurrentAttribute: boolean;
 	isNotInOperator: boolean;
 	hasExistingQuery: boolean;
+	isRelatedValuesSupported: boolean;
 	visibleItemsCount: number;
 	relatedExclusions: string[];
 }
@@ -65,6 +66,7 @@ export function useSectionedValues({
 	isSomeFilterPresentForCurrentAttribute,
 	isNotInOperator,
 	hasExistingQuery,
+	isRelatedValuesSupported,
 	visibleItemsCount,
 	relatedExclusions,
 }: SectionedValuesInput): SectionedValuesOutput {
@@ -95,6 +97,7 @@ export function useSectionedValues({
 			isNotInOperator,
 			hasExistingQuery,
 			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
+			isRelatedValuesSupported,
 		});
 	}, [
 		relatedValues,
@@ -103,6 +106,7 @@ export function useSectionedValues({
 		isSomeFilterPresentForCurrentAttribute,
 		isNotInOperator,
 		hasExistingQuery,
+		isRelatedValuesSupported,
 		relatedExclusions,
 	]);
 

frontend/src/components/QuickFilters/hooks/useSignalFieldApis.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { QuickFilterCheckboxUseFieldApis } from '../types';
+
+export function useSignalFieldApis(): QuickFilterCheckboxUseFieldApis {
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	return useMemo(
+		() => ({
+			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+			existingQuery: null,
+		}),
+		[minTime, maxTime],
+	);
+}

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 
@@ -11,6 +12,8 @@ import DomainList from './Domains/DomainList';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);
@@ -26,6 +29,7 @@ function Explorer(): JSX.Element {
 						showFilterCollapse={false}
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</section>
 				<DomainList />

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -31,6 +32,7 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
+	const quickFilterFieldApis = useSignalFieldApis();
 	const {
 		handleRunQuery,
 		stagedQuery,
@@ -144,6 +146,7 @@ function Explorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {
 							setShowQuickFilters(!showQuickFilters);
 						}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</div>
 

frontend/src/pages/AllErrors/index.tsx

@@ -8,6 +8,7 @@ import setLocalStorageApi from 'api/browser/localstorage/set';
 import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
 import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
@@ -55,6 +56,8 @@ function AllErrors(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};
 
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	return (
 		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
 			{showFilters && (
@@ -64,6 +67,7 @@ function AllErrors(): JSX.Element {
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</section>
 			)}

frontend/src/pages/LogsExplorer/index.tsx

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -74,6 +75,8 @@ function LogsExplorer(): JSX.Element {
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
 	const listQueryKeyRef = useRef<any>();
@@ -232,6 +235,7 @@ function LogsExplorer(): JSX.Element {
 								signal={SignalType.LOGS}
 								source={QuickFiltersSource.LOGS_EXPLORER}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
+								useFieldApis={quickFilterFieldApis}
 							/>
 						</section>
 					)}

frontend/src/pages/TracesExplorer/index.tsx

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -128,6 +129,8 @@ function TracesExplorer(): JSX.Element {
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+	const quickFilterFieldApis = useSignalFieldApis();
 	const { safeNavigate } = useSafeNavigate();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 
@@ -267,6 +270,7 @@ function TracesExplorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {
 							setOpen(!isOpen);
 						}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</Card>
 				<div