Merge branch 'main' into enh/external-api-charts

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.114.1
+    image: signoz/signoz:v0.114.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.114.1}
+    image: signoz/signoz:${VERSION:-v0.114.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -1,5 +1,6 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
+import store from 'store';
 import {
 	QueryKeyRequestProps,
 	QueryKeySuggestionsResponseProps,
@@ -17,6 +18,12 @@ export const getKeySuggestions = (
 		signalSource = '',
 	} = props;
 
+	const { globalTime } = store.getState();
+	const resolvedTimeRange = {
+		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+	};
+
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedMetricName = encodeURIComponent(metricName);
@@ -24,7 +31,14 @@ export const getKeySuggestions = (
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);
 
-	return axios.get(
-		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
-	);
+	let url = `/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`;
+
+	if (resolvedTimeRange.startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
+	}
+	if (resolvedTimeRange.endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
+	}
+
+	return axios.get(url);
 };

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -1,5 +1,6 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
+import store from 'store';
 import {
 	QueryKeyValueRequestProps,
 	QueryKeyValueSuggestionsResponseProps,
@@ -8,7 +9,20 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	const { signal, key, searchText, signalSource, metricName } = props;
+	const {
+		signal,
+		key,
+		searchText,
+		signalSource,
+		metricName,
+		existingQuery,
+	} = props;
+
+	const { globalTime } = store.getState();
+	const resolvedTimeRange = {
+		startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+		endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+	};
 
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
@@ -16,7 +30,17 @@ export const getValueSuggestions = (
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedSource = encodeURIComponent(signalSource || '');
 
-	return axios.get(
-		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
-	);
+	let url = `/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`;
+
+	if (resolvedTimeRange.startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${resolvedTimeRange.startUnixMilli}`;
+	}
+	if (resolvedTimeRange.endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${resolvedTimeRange.endUnixMilli}`;
+	}
+	if (existingQuery) {
+		url += `&existingQuery=${encodeURIComponent(existingQuery)}`;
+	}
+
+	return axios.get(url);
 };

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

@@ -272,7 +272,6 @@ function QuerySearch({
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
 			});
-
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
@@ -432,6 +431,7 @@ function QuerySearch({
 			}
 
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
+			const existingQuery = queryData.filter?.expression || '';
 
 			try {
 				const response = await getValueSuggestions({
@@ -440,9 +440,9 @@ function QuerySearch({
 					signal: dataSource,
 					signalSource: signalSource as 'meter' | '',
 					metricName: debouncedMetricName ?? undefined,
-				});
+					existingQuery,
+				}); // Skip updates if component unmounted or key changed
 
-				// Skip updates if component unmounted or key changed
 				if (
 					!isMountedRef.current ||
 					lastKeyRef.current !== key ||
@@ -454,7 +454,9 @@ function QuerySearch({
 				// Process the response data
 				const responseData = response.data as any;
 				const values = responseData.data?.values || {};
-				const stringValues = values.stringValues || [];
+				const relatedValues = values.relatedValues || [];
+				const stringValues =
+					relatedValues.length > 0 ? relatedValues : values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
 				// Generate options from string values - explicitly handle empty strings
@@ -529,11 +531,12 @@ function QuerySearch({
 		},
 		[
 			activeKey,
-			dataSource,
 			isLoadingSuggestions,
-			debouncedMetricName,
-			signalSource,
+			queryData.filter?.expression,
 			toggleSuggestions,
+			dataSource,
+			signalSource,
+			debouncedMetricName,
 		],
 	);
 
@@ -1240,19 +1243,17 @@ function QuerySearch({
 		if (!queryContext) {
 			return;
 		}
-		// Trigger suggestions based on context
-		if (editorRef.current) {
+		// Only trigger suggestions and fetch if editor is focused (i.e., user is interacting)
+		if (isFocused && editorRef.current) {
 			toggleSuggestions(10);
-		}
-
-		// Handle value suggestions for value context
-		if (queryContext.isInValue) {
-			const { keyToken, currentToken } = queryContext;
-			const key = keyToken || currentToken;
-
-			// Only fetch if needed and if we have a valid key
-			if (key && key !== activeKey && !isLoadingSuggestions) {
-				fetchValueSuggestions({ key });
+			// Handle value suggestions for value context
+			if (queryContext.isInValue) {
+				const { keyToken, currentToken } = queryContext;
+				const key = keyToken || currentToken;
+				// Only fetch if needed and if we have a valid key
+				if (key && key !== activeKey && !isLoadingSuggestions) {
+					fetchValueSuggestions({ key });
+				}
 			}
 		}
 	}, [
@@ -1261,6 +1262,7 @@ function QuerySearch({
 		isLoadingSuggestions,
 		activeKey,
 		fetchValueSuggestions,
+		isFocused,
 	]);
 
 	const getTooltipContent = (): JSX.Element => (

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -48,7 +48,12 @@
 		.filter-separator {
 			height: 1px;
 			background-color: var(--bg-slate-400);
-			margin: 4px 0;
+			margin: 7px 0;
+
+			&.related-separator {
+				opacity: 0.5;
+				margin: 0.5px 0;
+			}
 		}
 
 		.value {
@@ -138,6 +143,93 @@
 			cursor: pointer;
 		}
 	}
+
+	.search-prompt {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 10px 12px;
+		margin-top: 4px;
+		border: 1px dashed var(--bg-amber-500);
+		border-radius: 10px;
+		color: var(--bg-amber-200);
+		background: linear-gradient(
+			90deg,
+			var(--bg-ink-500) 0%,
+			var(--bg-ink-400) 100%
+		);
+		cursor: pointer;
+		transition: all 0.16s ease, transform 0.12s ease;
+		text-align: left;
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+
+		&:hover {
+			background: linear-gradient(
+				90deg,
+				var(--bg-ink-400) 0%,
+				var(--bg-ink-300) 100%
+			);
+			box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
+		}
+
+		&:active {
+			transform: translateY(1px);
+		}
+
+		&__icon {
+			color: var(--bg-amber-400);
+			flex-shrink: 0;
+		}
+
+		&__text {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		&__title {
+			color: var(--bg-amber-200);
+		}
+
+		&__subtitle {
+			color: var(--bg-amber-300);
+			font-size: 12px;
+		}
+	}
+	.lightMode & {
+		.search-prompt {
+			border: 1px dashed var(--bg-amber-500);
+			color: var(--bg-amber-800);
+			background: linear-gradient(
+				90deg,
+				var(--bg-vanilla-200) 0%,
+				var(--bg-vanilla-100) 100%
+			);
+			box-shadow: 0 2px 12px rgba(184, 107, 0, 0.08);
+
+			&:hover {
+				background: linear-gradient(
+					90deg,
+					var(--bg-vanilla-100) 0%,
+					var(--bg-vanilla-50) 100%
+				);
+				box-shadow: 0 4px 16px rgba(184, 107, 0, 0.15);
+			}
+
+			&__icon {
+				color: var(--bg-amber-600);
+			}
+
+			&__title {
+				color: var(--bg-amber-800);
+			}
+
+			&__subtitle {
+				color: var(--bg-amber-800);
+			}
+		}
+	}
 	.go-to-docs {
 		display: flex;
 		flex-direction: column;

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

@@ -150,7 +150,8 @@ describe('CheckboxFilter - User Flows', () => {
 		// User should see the filter is automatically opened (not collapsed)
 		expect(screen.getByText('Service Name')).toBeInTheDocument();
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			// eslint-disable-next-line sonarjs/no-duplicate-string
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 
 		// User should see visual separator between checked and unchecked items
@@ -184,7 +185,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// Initially auto-opened due to active filters
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 
 		// User manually closes the filter
@@ -192,7 +193,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now closed (respecting user preference)
 		expect(
-			screen.queryByPlaceholderText('Filter values'),
+			screen.queryByPlaceholderText('Search values'),
 		).not.toBeInTheDocument();
 
 		// User manually opens the filter again
@@ -200,7 +201,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now open (respecting user preference)
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
 		});
 	});
 

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

@@ -1,6 +1,15 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import {
+	Fragment,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { Button, Checkbox, Input, InputRef, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -8,19 +17,14 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import {
-	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
+import { 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, isEqual, isFunction } from 'lodash-es';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
@@ -57,6 +61,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	// null = no user action, true = user opened, false = user closed
 	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
+	const [visibleUncheckedCount, setVisibleUncheckedCount] = useState<number>(5);
 
 	const {
 		lastUsedQuery,
@@ -78,6 +83,12 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		return lastUsedQuery || 0;
 	}, [isListView, source, lastUsedQuery]);
 
+	// Extract current filter expression for the active query
+	const currentFilterExpression = useMemo(() => {
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		return queryData?.filter?.expression || '';
+	}, [currentQuery.builder.queryData, activeQueryIndex]);
+
 	// Check if this filter has active filters in the query
 	const isSomeFilterPresentForCurrentAttribute = useMemo(
 		() =>
@@ -109,54 +120,125 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		filter.defaultOpen,
 	]);
 
-	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,
+		refetch: refetchKeyValueSuggestions,
 	} = useGetQueryKeyValueSuggestions({
 		key: filter.attributeKey.key,
 		signal: filter.dataSource || DataSource.LOGS,
 		signalSource: 'meter',
+		searchText: searchText || '',
+		existingQuery: currentFilterExpression,
 		options: {
-			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+			enabled: isOpen,
 			keepPreviousData: true,
 		},
 	});
 
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
+	const searchInputRef = useRef<InputRef | null>(null);
+	const searchContainerRef = useRef<HTMLDivElement | null>(null);
+	const previousFiltersItemsRef = useRef(
+		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items,
+	);
 
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
+	// Refetch when other filters change (not this filter)
+	// Watch for when filters.items is different from previous value, indicating other filters changed
+	useEffect(() => {
+		const currentFiltersItems =
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
+
+		const previousFiltersItems = previousFiltersItemsRef.current;
+
+		// Check if filters items have changed (not the same)
+		const filtersChanged = !isEqual(previousFiltersItems, currentFiltersItems);
+
+		if (isOpen && filtersChanged) {
+			// Check if OTHER filters (not this filter) have changed
+			const currentOtherFilters = currentFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+			const previousOtherFilters = previousFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+
+			// Refetch if other filters changed (not just this filter's values)
+			const otherFiltersChanged = !isEqual(
+				currentOtherFilters,
+				previousOtherFilters,
+			);
+
+			// Only update ref if we have valid API data or if filters actually changed
+			// Don't update if search returned 0 results to preserve unchecked values
+			const hasValidData = keyValueSuggestions && !isLoadingKeyValueSuggestions;
+			if (otherFiltersChanged || hasValidData) {
+				previousFiltersItemsRef.current = currentFiltersItems;
+			}
+
+			if (otherFiltersChanged) {
+				refetchKeyValueSuggestions();
+			}
+		} else {
+			previousFiltersItemsRef.current = currentFiltersItems;
+		}
+	}, [
+		activeQueryIndex,
+		isOpen,
+		refetchKeyValueSuggestions,
+		filter.attributeKey.key,
+		currentQuery.builder.queryData,
+		keyValueSuggestions,
+		isLoadingKeyValueSuggestions,
+	]);
+
+	const handleSearchPromptClick = useCallback((): void => {
+		if (searchContainerRef.current) {
+			searchContainerRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+		}
+		if (searchInputRef.current) {
+			setTimeout(() => searchInputRef.current?.focus({ cursor: 'end' }), 120);
+		}
+	}, []);
+
+	const isDataComplete = useMemo(() => {
+		if (keyValueSuggestions) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const responseData = keyValueSuggestions?.data as any;
+			return responseData.data?.complete || false;
+		}
+		return false;
+	}, [keyValueSuggestions]);
+
+	const previousUncheckedValuesRef = useRef<string[]>([]);
+
+	const { attributeValues, relatedValuesSet } = useMemo(() => {
+		if (keyValueSuggestions) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const responseData = keyValueSuggestions?.data as any;
 			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
+			const relatedValues: string[] = values.relatedValues || [];
+			const stringValues: string[] = values.stringValues || [];
+			const numberValues: number[] = 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 !== '',
-				);
+			const valuesToUse = [
+				...relatedValues,
+				...stringValues.filter(
+					(value: string | null | undefined) =>
+						value !== null &&
+						value !== undefined &&
+						value !== '' &&
+						!relatedValues.includes(value),
+				),
+			];
+
+			const stringOptions = valuesToUse.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 =>
@@ -164,15 +246,27 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				)
 				.map((value: number) => value.toString());
 
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
+			const filteredRelated = new Set(
+				relatedValues.filter(
+					(v): v is string => v !== null && v !== undefined && v !== '',
+				),
+			);
 
-		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 baseValues = [...stringOptions, ...numberOptions];
+			const previousUnchecked = previousUncheckedValuesRef.current || [];
+			const preservedUnchecked = previousUnchecked.filter(
+				(value) => !baseValues.includes(value),
+			);
+			return {
+				attributeValues: [...baseValues, ...preservedUnchecked],
+				relatedValuesSet: filteredRelated,
+			};
+		}
+		return {
+			attributeValues: [] as string[],
+			relatedValuesSet: new Set<string>(),
+		};
+	}, [keyValueSuggestions]);
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
@@ -246,22 +340,51 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;
 
-	// Sort checked items to the top, then unchecked items
-	const currentAttributeKeys = useMemo(() => {
+	// Sort checked items to the top; always show unchecked items beneath, regardless of pagination
+	const {
+		visibleCheckedValues,
+		uncheckedValues,
+		visibleUncheckedValues,
+		visibleCheckedCount,
+		hasMoreChecked,
+		hasMoreUnchecked,
+		checkedSeparatorIndex,
+	} = useMemo(() => {
 		const checkedValues = attributeValues.filter(
 			(val) => currentFilterState[val],
 		);
-		const uncheckedValues = attributeValues.filter(
-			(val) => !currentFilterState[val],
-		);
-		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
-	}, [attributeValues, currentFilterState, visibleItemsCount]);
+		const unchecked = attributeValues.filter((val) => !currentFilterState[val]);
+		const visibleChecked = checkedValues.slice(0, visibleItemsCount);
+		const visibleUnchecked = unchecked.slice(0, visibleUncheckedCount);
 
-	// Count of checked values in the currently visible items
-	const checkedValuesCount = useMemo(
-		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
-		[currentAttributeKeys, currentFilterState],
-	);
+		const findSeparatorIndex = (list: string[]): number => {
+			if (relatedValuesSet.size === 0) {
+				return -1;
+			}
+			const firstNonRelated = list.findIndex((v) => !relatedValuesSet.has(v));
+			return firstNonRelated > 0 ? firstNonRelated : -1;
+		};
+
+		return {
+			visibleCheckedValues: visibleChecked,
+			uncheckedValues: unchecked,
+			visibleUncheckedValues: visibleUnchecked,
+			visibleCheckedCount: visibleChecked.length,
+			hasMoreChecked: checkedValues.length > visibleChecked.length,
+			hasMoreUnchecked: unchecked.length > visibleUnchecked.length,
+			checkedSeparatorIndex: findSeparatorIndex(visibleChecked),
+		};
+	}, [
+		attributeValues,
+		currentFilterState,
+		visibleItemsCount,
+		visibleUncheckedCount,
+		relatedValuesSet,
+	]);
+
+	useEffect(() => {
+		previousUncheckedValuesRef.current = uncheckedValues;
+	}, [uncheckedValues]);
 
 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
@@ -302,6 +425,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		isOnlyOrAllClicked: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
+		setVisibleUncheckedCount(5);
 		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
@@ -562,6 +686,7 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					if (isOpen) {
 						setUserToggleState(false);
 						setVisibleItemsCount(10);
+						setVisibleUncheckedCount(5);
 					} else {
 						setUserToggleState(true);
 					}
@@ -590,35 +715,93 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen &&
-				(isLoading || isLoadingKeyValueSuggestions) &&
-				!attributeValues.length && (
-					<section className="loading">
-						<Skeleton paragraph={{ rows: 4 }} />
-					</section>
-				)}
-			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
+			{isOpen && isLoadingKeyValueSuggestions && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
-						<section className="search">
+						<section className="search" ref={searchContainerRef}>
 							<Input
-								placeholder="Filter values"
+								placeholder="Search values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
+								ref={searchInputRef}
 							/>
 						</section>
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{currentAttributeKeys.map((value: string, index: number) => (
+							{visibleCheckedValues.map((value: string, index: number) => (
 								<Fragment key={value}>
-									{index === checkedValuesCount && checkedValuesCount > 0 && (
-										<div
-											key="separator"
-											className="filter-separator"
-											data-testid="filter-separator"
-										/>
+									{index === checkedSeparatorIndex && (
+										<div className="filter-separator related-separator" />
 									)}
+									<div className="value">
+										<Checkbox
+											onChange={(e): void => onChange(value, e.target.checked, false)}
+											checked={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											rootClassName="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"
+													ellipsis={{ tooltip: { placement: 'top' } }}
+												>
+													{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>
+								</Fragment>
+							))}
+
+							{hasMoreChecked && (
+								<section className="show-more">
+									<Typography.Text
+										className="show-more-text"
+										onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+									>
+										Show More...
+									</Typography.Text>
+								</section>
+							)}
+
+							{visibleCheckedCount > 0 && uncheckedValues.length > 0 && (
+								<div className="filter-separator" data-testid="filter-separator" />
+							)}
+
+							{visibleUncheckedValues.map((value: string) => (
+								<Fragment key={value}>
 									<div className="value">
 										<Checkbox
 											onChange={(e): void => onChange(value, e.target.checked, false)}
@@ -670,6 +853,17 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									</div>
 								</Fragment>
 							))}
+
+							{hasMoreUnchecked && (
+								<section className="show-more">
+									<Typography.Text
+										className="show-more-text"
+										onClick={(): void => setVisibleUncheckedCount((prev) => prev + 5)}
+									>
+										Show More...
+									</Typography.Text>
+								</section>
+							)}
 						</section>
 					) : isEmptyStateWithDocsEnabled ? (
 						<LogsQuickFilterEmptyState attributeKey={filter.attributeKey.key} />
@@ -678,16 +872,18 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							<Typography.Text>No values found</Typography.Text>{' '}
 						</section>
 					)}
-					{visibleItemsCount < attributeValues?.length && (
-						<section className="show-more">
-							<Typography.Text
-								className="show-more-text"
-								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
-							>
-								Show More...
-							</Typography.Text>
-						</section>
-					)}
+					{visibleItemsCount >= attributeValues?.length &&
+						attributeValues?.length > 0 &&
+						!isDataComplete && (
+							<section className="search-prompt" onClick={handleSearchPromptClick}>
+								<AlertTriangle size={16} className="search-prompt__icon" />
+								<span className="search-prompt__text">
+									<Typography.Text className="search-prompt__subtitle">
+										Tap to search and load more suggestions.
+									</Typography.Text>
+								</span>
+							</section>
+						)}
 				</>
 			)}
 		</div>

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -127,6 +127,34 @@
 		align-items: center;
 		padding: 8px;
 	}
+
+	.filters-info {
+		display: flex;
+		align-items: center;
+		padding: 6px 10px 0 10px;
+		color: var(--bg-vanilla-400);
+		gap: 6px;
+		flex-wrap: wrap;
+
+		.filters-info-toggle {
+			display: inline-flex;
+			align-items: center;
+			gap: 6px;
+			padding: 0;
+			height: auto;
+			color: var(--bg-vanilla-400);
+
+			&:hover {
+				color: var(--bg-robin-500);
+			}
+		}
+
+		.filters-info-text {
+			color: var(--bg-vanilla-400);
+			font-size: 13px;
+			line-height: 16px;
+		}
+	}
 }
 
 .perilin-bg {
@@ -180,5 +208,30 @@
 				}
 			}
 		}
+
+		.filters-info {
+			color: var(--bg-ink-400);
+
+			.filters-info-toggle {
+				color: var(--bg-ink-400);
+
+				&:hover {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.filters-info-text {
+				color: var(--bg-ink-400);
+			}
+		}
 	}
 }
+
+.filters-info-tooltip-title {
+	font-weight: var(--font-weight-bold);
+	margin-bottom: 4px;
+}
+
+.filters-info-tooltip-detail {
+	margin-top: 4px;
+}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -23,7 +23,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { isFunction, isNull } from 'lodash-es';
-import { Frown, Settings2 as SettingsIcon } from 'lucide-react';
+import { Frown, Lightbulb, Settings2 as SettingsIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
@@ -291,6 +291,27 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 					/>
 				</div>
 			)}
+			<section className="filters-info">
+				<Tooltip
+					title={
+						<div className="filters-info-tooltip">
+							<div className="filters-info-tooltip-title">Adaptive Filters</div>
+							<div>Values update automatically as you apply filters.</div>
+							<div className="filters-info-tooltip-detail">
+								The most relevant values are shown first, followed by all other
+								available options.
+							</div>
+						</div>
+					}
+					placement="right"
+					mouseEnterDelay={0.3}
+				>
+					<Typography.Text className="filters-info-toggle">
+						<Lightbulb size={15} />
+						Adaptive filters
+					</Typography.Text>
+				</Tooltip>
+			</section>
 			<section className="filters">
 				{filterConfig.map((filter) => {
 					switch (filter.type) {

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -4,6 +4,7 @@ import {
 	useApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import {
 	otherFiltersResponse,
 	quickFiltersAttributeValuesResponse,
@@ -24,6 +25,8 @@ jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 }));
 jest.mock('container/ApiMonitoring/queryParams');
 
+jest.mock('hooks/querySuggestions/useGetQueryKeyValueSuggestions');
+
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
@@ -32,13 +35,15 @@ const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
 >;
 const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
+const mockUseGetQueryKeyValueSuggestions = jest.mocked(
+	useGetQueryKeyValueSuggestions,
+);
+
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
 const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
 const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
-const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
-const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
 const FILTER_OS_DESCRIPTION = 'os.description';
 const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
@@ -62,10 +67,7 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
-		),
-		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+		rest.get('*/api/v1/fields/values*', (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -135,18 +137,28 @@ beforeEach(() => {
 				queryData: [
 					{
 						queryName: QUERY_NAME,
-						filters: { items: [{ key: 'test', value: 'value' }] },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
 					},
 				],
 			},
 		},
 		lastUsedQuery: 0,
+		panelType: 'logs',
 		redirectWithQueryBuilderData,
 	});
 	mockUseApiMonitoringParams.mockReturnValue([
 		{ showIP: true } as ApiMonitoringParams,
 		mockSetApiMonitoringParams,
 	]);
+
+	// Mock the hook to return data with mq-kafka
+	mockUseGetQueryKeyValueSuggestions.mockReturnValue({
+		data: quickFiltersAttributeValuesResponse,
+		isLoading: false,
+		refetch: jest.fn(),
+	} as any);
+
 	setupServer();
 });
 
@@ -259,8 +271,9 @@ describe('Quick Filters', () => {
 
 		render(<TestQuickFilters />);
 
-		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
-		const target = await screen.findByText('mq-kafka');
+		// Wait for the filter to load with data
+		const target = await screen.findByText('mq-kafka', {}, { timeout: 5000 });
+
 		await user.click(target);
 
 		await waitFor(() => {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -3,16 +3,14 @@ import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
-import { useGetGraphCustomSeries } from 'components/CeleryTask/useGetGraphCustomSeries';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
-import Uplot from 'components/Uplot';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	getCustomFiltersForBarChart,
 	getFormattedEndPointStatusCodeChartData,
 	getStatusCodeBarChartWidgetData,
 	statusCodeWidgetInfo,
 } from 'container/ApiMonitoring/utils';
+import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
 import { handleGraphClick } from 'container/GridCardLayout/GridCard/utils';
 import { useGraphClickToShowButton } from 'container/GridCardLayout/useGraphClickToShowButton';
 import useNavigateToExplorerPages from 'container/GridCardLayout/useNavigateToExplorerPages';
@@ -20,15 +18,16 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { Options } from 'uplot';
 
 import ErrorState from './ErrorState';
+import { prepareStatusCodeBarChartsConfig } from './utils';
 
 function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
@@ -67,13 +66,6 @@ function StatusCodeBarCharts({
 	} = endPointStatusCodeLatencyBarChartsDataQuery;
 
 	const { startTime: minTime, endTime: maxTime } = timeRange;
-	const legendScrollPositionRef = useRef<{
-		scrollTop: number;
-		scrollLeft: number;
-	}>({
-		scrollTop: 0,
-		scrollLeft: 0,
-	});
 
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
@@ -119,6 +111,7 @@ function StatusCodeBarCharts({
 
 	const navigateToExplorer = useNavigateToExplorer();
 	const { currentQuery } = useQueryBuilder();
+	const { timezone } = useTimezone();
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 	const { notifications } = useNotifications();
@@ -134,12 +127,6 @@ function StatusCodeBarCharts({
 		[],
 	);
 
-	const { getCustomSeries } = useGetGraphCustomSeries({
-		isDarkMode,
-		drawStyle: 'bars',
-		colorMapping,
-	});
-
 	const widget = useMemo<Widgets>(
 		() =>
 			getStatusCodeBarChartWidgetData(domainName, {
@@ -193,49 +180,36 @@ function StatusCodeBarCharts({
 		],
 	);
 
-	const options = useMemo(
-		() =>
-			getUPlotChartOptions({
-				apiResponse:
-					currentWidgetInfoIndex === 0
-						? formattedEndPointStatusCodeBarChartsDataPayload
-						: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
-				isDarkMode,
-				dimensions,
-				yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
-				softMax: null,
-				softMin: null,
-				minTimeScale: minTime,
-				maxTimeScale: maxTime,
-				panelType: PANEL_TYPES.BAR,
-				onClickHandler: graphClickHandler,
-				customSeries: getCustomSeries,
-				onDragSelect,
-				colorMapping,
-				query: currentQuery,
-				legendScrollPosition: legendScrollPositionRef.current,
-				setLegendScrollPosition: (position: {
-					scrollTop: number;
-					scrollLeft: number;
-				}) => {
-					legendScrollPositionRef.current = position;
-				},
-			}),
-		[
-			minTime,
-			maxTime,
-			currentWidgetInfoIndex,
-			dimensions,
-			formattedEndPointStatusCodeBarChartsDataPayload,
-			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+	const config = useMemo(() => {
+		const apiResponse =
+			currentWidgetInfoIndex === 0
+				? formattedEndPointStatusCodeBarChartsDataPayload
+				: formattedEndPointStatusCodeLatencyBarChartsDataPayload;
+		return prepareStatusCodeBarChartsConfig({
+			timezone,
 			isDarkMode,
-			graphClickHandler,
-			getCustomSeries,
+			query: currentQuery,
 			onDragSelect,
+			onClick: graphClickHandler,
+			apiResponse,
+			minTimeScale: minTime,
+			maxTimeScale: maxTime,
+			yAxisUnit: statusCodeWidgetInfo[currentWidgetInfoIndex].yAxisUnit,
 			colorMapping,
-			currentQuery,
-		],
-	);
+		});
+	}, [
+		currentQuery,
+		isDarkMode,
+		minTime,
+		maxTime,
+		graphClickHandler,
+		onDragSelect,
+		formattedEndPointStatusCodeBarChartsDataPayload,
+		formattedEndPointStatusCodeLatencyBarChartsDataPayload,
+		timezone,
+		currentWidgetInfoIndex,
+		colorMapping,
+	]);
 
 	const renderCardContent = useCallback(
 		(query: UseQueryResult<SuccessResponse<any>, unknown>): JSX.Element => {
@@ -253,11 +227,20 @@ function StatusCodeBarCharts({
 							!query.isLoading && !query?.data?.payload?.data?.result?.length,
 					})}
 				>
-					<Uplot options={options as Options} data={chartData} />
+					<BarChart
+						config={config}
+						data={chartData}
+						width={dimensions.width}
+						height={dimensions.height}
+						timezone={timezone}
+						legendConfig={{
+							position: LegendPosition.BOTTOM,
+						}}
+					/>
 				</div>
 			);
 		},
-		[options, chartData],
+		[config, chartData, dimensions, timezone],
 	);
 
 	return (

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -0,0 +1,83 @@
+import { ExecStats } from 'api/v5/v5';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { get } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryData } from 'types/api/widgets/getQuery';
+import { v4 as uuid } from 'uuid';
+
+export const prepareStatusCodeBarChartsConfig = ({
+	timezone,
+	isDarkMode,
+	query,
+	onDragSelect,
+	onClick,
+	apiResponse,
+	minTimeScale,
+	maxTimeScale,
+	yAxisUnit,
+	colorMapping,
+}: {
+	timezone: Timezone;
+	isDarkMode: boolean;
+	query: Query;
+	onDragSelect: (startTime: number, endTime: number) => void;
+	onClick?: OnClickPluginOpts['onClick'];
+	minTimeScale?: number;
+	maxTimeScale?: number;
+	apiResponse: MetricRangePayloadProps;
+	yAxisUnit?: string;
+	colorMapping?: Record<string, string>;
+}): UPlotConfigBuilder => {
+	const stepIntervals: ExecStats['stepIntervals'] = get(
+		apiResponse,
+		'data.newResult.meta.stepIntervals',
+		{},
+	);
+	const minStepInterval = Math.min(...Object.values(stepIntervals));
+
+	const config = buildBaseConfig({
+		id: uuid(),
+		yAxisUnit: yAxisUnit,
+		apiResponse,
+		isDarkMode,
+		onDragSelect,
+		timezone,
+		onClick,
+		minTimeScale,
+		maxTimeScale,
+		stepInterval: minStepInterval,
+		panelType: PANEL_TYPES.BAR,
+	});
+
+	const seriesList: QueryData[] = apiResponse?.data?.result || [];
+	seriesList.forEach((series) => {
+		const baseLabelName = getLabelName(
+			series.metric,
+			series.queryName || '', // query
+			series.legend || '',
+		);
+
+		const label = query ? getLegend(series, query, baseLabelName) : baseLabelName;
+
+		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
+
+		config.addSeries({
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			label: label,
+			colorMapping: colorMapping ?? {},
+			isDarkMode,
+			stepInterval: currentStepInterval,
+		});
+	});
+
+	return config;
+};

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -21,10 +21,15 @@ interface MockQueryResult {
 }
 
 // Mocks
-jest.mock('components/Uplot', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => <div data-testid="uplot-mock" />),
-}));
+jest.mock(
+	'container/DashboardContainer/visualization/charts/BarChart/BarChart',
+	() => ({
+		__esModule: true,
+		default: jest
+			.fn()
+			.mockImplementation(() => <div data-testid="bar-chart-mock" />),
+	}),
+);
 
 jest.mock('components/CeleryTask/useGetGraphCustomSeries', () => ({
 	useGetGraphCustomSeries: (): { getCustomSeries: jest.Mock } => ({
@@ -70,6 +75,24 @@ jest.mock('hooks/useNotifications', () => ({
 	useNotifications: (): { notifications: [] } => ({ notifications: [] }),
 }));
 
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): {
+		timezone: {
+			name: string;
+			value: string;
+			offset: string;
+			searchIndex: string;
+		};
+	} => ({
+		timezone: {
+			name: 'UTC',
+			value: 'UTC',
+			offset: '+00:00',
+			searchIndex: 'UTC',
+		},
+	}),
+}));
+
 jest.mock('lib/uPlotLib/getUplotChartOptions', () => ({
 	getUPlotChartOptions: jest.fn().mockReturnValue({}),
 }));
@@ -319,7 +342,7 @@ describe('StatusCodeBarCharts', () => {
 			mockData.payload,
 			'sum',
 		);
-		expect(screen.getByTestId('uplot-mock')).toBeInTheDocument();
+		expect(screen.getByTestId('bar-chart-mock')).toBeInTheDocument();
 		expect(screen.getByText('Number of calls')).toBeInTheDocument();
 		expect(screen.getByText('Latency')).toBeInTheDocument();
 	});

frontend/src/container/SideNav/menuItems.tsx

@@ -25,6 +25,7 @@ import {
 	Receipt,
 	Route,
 	ScrollText,
+	Search,
 	Settings,
 	Shield,
 	Slack,
@@ -187,6 +188,12 @@ export const primaryMenuItems: SidebarItem[] = [
 		icon: <Home size={16} />,
 		itemKey: 'home',
 	},
+	{
+		key: 'quick-search',
+		label: 'Search',
+		icon: <Search size={16} />,
+		itemKey: 'quick-search',
+	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
 		label: 'Alerts',

frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts

@@ -1,7 +1,11 @@
+/* eslint-disable no-restricted-imports */
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
+import { useSelector } from 'react-redux';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import { AxiosError, AxiosResponse } from 'axios';
+import { AppState } from 'store/reducers';
 import { QueryKeyValueSuggestionsResponseProps } from 'types/api/querySuggestions/types';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 export const useGetQueryKeyValueSuggestions = ({
 	key,
@@ -9,6 +13,7 @@ export const useGetQueryKeyValueSuggestions = ({
 	searchText,
 	signalSource,
 	metricName,
+	existingQuery,
 	options,
 }: {
 	key: string;
@@ -20,11 +25,24 @@ export const useGetQueryKeyValueSuggestions = ({
 		AxiosError
 	>;
 	metricName?: string;
+	existingQuery?: string;
 }): UseQueryResult<
 	AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
 	AxiosError
-> =>
-	useQuery<AxiosResponse<QueryKeyValueSuggestionsResponseProps>, AxiosError>({
+> => {
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const timeRangeKey =
+		minTime != null && maxTime != null
+			? `${Math.floor(minTime / 1e9)}-${Math.floor(maxTime / 1e9)}`
+			: null;
+
+	return useQuery<
+		AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
+		AxiosError
+	>({
 		queryKey: [
 			'queryKeyValueSuggestions',
 			key,
@@ -32,6 +50,7 @@ export const useGetQueryKeyValueSuggestions = ({
 			searchText,
 			signalSource,
 			metricName,
+			timeRangeKey,
 		],
 		queryFn: () =>
 			getValueSuggestions({
@@ -40,6 +59,8 @@ export const useGetQueryKeyValueSuggestions = ({
 				searchText: searchText || '',
 				signalSource: signalSource as 'meter' | '',
 				metricName: metricName || '',
+				existingQuery,
 			}),
 		...options,
 	});
+};

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -44,14 +44,12 @@ export default function TooltipPlugin({
 	canPinTooltip = false,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
+	const portalRoot = useRef<HTMLElement>(document.body);
 	const rafId = useRef<number | null>(null);
 	const dismissTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const layoutRef = useRef<TooltipLayoutInfo>();
 	const renderRef = useRef(render);
 	renderRef.current = render;
-	const [portalRoot, setPortalRoot] = useState<HTMLElement>(
-		(document.fullscreenElement as HTMLElement) ?? document.body,
-	);
 
 	// React-managed snapshot of what should be rendered. The controller
 	// owns the interaction state and calls `updateState` when a visible
@@ -391,19 +389,6 @@ export default function TooltipPlugin({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [config]);
 
-	const resolvePortalRoot = useCallback((): void => {
-		setPortalRoot((document.fullscreenElement as HTMLElement) ?? document.body);
-	}, []);
-
-	useLayoutEffect((): (() => void) => {
-		resolvePortalRoot();
-		document.addEventListener('fullscreenchange', resolvePortalRoot);
-
-		return (): void => {
-			document.removeEventListener('fullscreenchange', resolvePortalRoot);
-		};
-	}, [resolvePortalRoot]);
-
 	useLayoutEffect((): void => {
 		if (!hasPlot || !layoutRef.current) {
 			return;
@@ -464,6 +449,6 @@ export default function TooltipPlugin({
 		>
 			{tooltipBody}
 		</div>,
-		portalRoot,
+		portalRoot.current,
 	);
 }

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -188,58 +188,6 @@ describe('TooltipPlugin', () => {
 			expect(container).not.toBeNull();
 			expect(container.parentElement).toBe(document.body);
 		});
-
-		it('moves tooltip portal root to fullscreen element and back on exit', async () => {
-			const config = createConfigMock();
-			let mockedFullscreenElement: Element | null = null;
-			const originalFullscreenElementDescriptor = Object.getOwnPropertyDescriptor(
-				Document.prototype,
-				'fullscreenElement',
-			);
-			Object.defineProperty(Document.prototype, 'fullscreenElement', {
-				configurable: true,
-				get: () => mockedFullscreenElement,
-			});
-
-			renderAndActivateHover(config);
-
-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
-			expect(container.parentElement).toBe(document.body);
-
-			const fullscreenRoot = document.createElement('div');
-			document.body.appendChild(fullscreenRoot);
-
-			act(() => {
-				mockedFullscreenElement = fullscreenRoot;
-				document.dispatchEvent(new Event('fullscreenchange'));
-			});
-
-			await waitFor(() => {
-				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
-				expect(updatedContainer.parentElement).toBe(fullscreenRoot);
-			});
-
-			act(() => {
-				mockedFullscreenElement = null;
-				document.dispatchEvent(new Event('fullscreenchange'));
-			});
-
-			await waitFor(() => {
-				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
-				expect(updatedContainer.parentElement).toBe(document.body);
-			});
-
-			if (originalFullscreenElementDescriptor) {
-				Object.defineProperty(
-					Document.prototype,
-					'fullscreenElement',
-					originalFullscreenElementDescriptor,
-				);
-			}
-			fullscreenRoot.remove();
-		});
 	});
 
 	// ---- Pin behaviour ----------------------------------------------------------

frontend/src/mocks-server/__mockdata__/customQuickFilters.ts

@@ -118,13 +118,13 @@ export const otherFiltersResponse = {
 export const quickFiltersAttributeValuesResponse = {
 	status: 'success',
 	data: {
-		stringAttributeValues: [
-			'mq-kafka',
-			'otel-demo',
-			'otlp-python',
-			'sample-flask',
-		],
-		numberAttributeValues: null,
-		boolAttributeValues: null,
+		data: {
+			values: {
+				relatedValues: ['mq-kafka', 'otel-demo', 'otlp-python', 'sample-flask'],
+				stringValues: ['mq-kafka', 'otel-demo', 'otlp-python', 'sample-flask'],
+				numberValues: [],
+			},
+			complete: true,
+		},
 	},
 };

frontend/src/styles.scss

@@ -592,6 +592,39 @@ body {
 		}
 	}
 
+	.ant-btn-text:hover,
+	.ant-btn-text:focus-visible {
+		background-color: var(--bg-vanilla-200) !important;
+	}
+
+	.ant-btn-link:hover,
+	.ant-btn-link:focus-visible {
+		background-color: transparent !important;
+	}
+
+	.ant-btn-default:hover,
+	.ant-btn-default:focus-visible,
+	.ant-btn-text:not(.ant-btn-primary):hover,
+	.ant-btn-text:not(.ant-btn-primary):focus-visible,
+	.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):hover,
+	.ant-btn:not(.ant-btn-primary):not(.ant-btn-dangerous):focus-visible {
+		background-color: var(--bg-vanilla-200) !important;
+	}
+
+	.ant-typography:hover,
+	.ant-typography:focus-visible {
+		background-color: transparent !important;
+	}
+
+	.ant-tooltip {
+		--antd-arrow-background-color: var(--bg-vanilla-300);
+
+		.ant-tooltip-inner {
+			background-color: var(--bg-vanilla-200);
+			color: var(--bg-ink-500);
+		}
+	}
+
 	// Enhanced legend light mode styles
 	.u-legend-enhanced {
 		// Light mode scrollbar styling

frontend/src/types/api/querySuggestions/types.ts

@@ -47,6 +47,7 @@ export interface QueryKeyValueRequestProps {
 	searchText: string;
 	signalSource?: 'meter' | '';
 	metricName?: string;
+	existingQuery?: string;
 }
 
 export type SignalType = 'traces' | 'logs' | 'metrics';