chore: fix tests

This reverts commit 9a046ab89d.

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -1,6 +1,5 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
-import store from 'store';
 import {
 	QueryKeyRequestProps,
 	QueryKeySuggestionsResponseProps,
@@ -18,12 +17,6 @@ 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);
@@ -31,14 +24,7 @@ export const getKeySuggestions = (
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);
 
-	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);
+	return axios.get(
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
+	);
 };

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -1,6 +1,5 @@
 import axios from 'api';
 import { AxiosResponse } from 'axios';
-import store from 'store';
 import {
 	QueryKeyValueRequestProps,
 	QueryKeyValueSuggestionsResponseProps,
@@ -9,20 +8,7 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	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 { signal, key, searchText, signalSource, metricName } = props;
 
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
@@ -30,17 +16,7 @@ export const getValueSuggestions = (
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedSource = encodeURIComponent(signalSource || '');
 
-	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);
+	return axios.get(
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
+	);
 };

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

@@ -272,6 +272,7 @@ function QuerySearch({
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
 			});
+
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
@@ -431,7 +432,6 @@ 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,9 +454,7 @@ function QuerySearch({
 				// Process the response data
 				const responseData = response.data as any;
 				const values = responseData.data?.values || {};
-				const relatedValues = values.relatedValues || [];
-				const stringValues =
-					relatedValues.length > 0 ? relatedValues : values.stringValues || [];
+				const stringValues = values.stringValues || [];
 				const numberValues = values.numberValues || [];
 
 				// Generate options from string values - explicitly handle empty strings
@@ -531,12 +529,11 @@ function QuerySearch({
 		},
 		[
 			activeKey,
-			isLoadingSuggestions,
-			queryData.filter?.expression,
-			toggleSuggestions,
 			dataSource,
-			signalSource,
+			isLoadingSuggestions,
 			debouncedMetricName,
+			signalSource,
+			toggleSuggestions,
 		],
 	);
 
@@ -1243,17 +1240,19 @@ function QuerySearch({
 		if (!queryContext) {
 			return;
 		}
-		// Only trigger suggestions and fetch if editor is focused (i.e., user is interacting)
-		if (isFocused && editorRef.current) {
+		// Trigger suggestions based on context
+		if (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 });
 			}
 		}
 	}, [
@@ -1262,7 +1261,6 @@ function QuerySearch({
 		isLoadingSuggestions,
 		activeKey,
 		fetchValueSuggestions,
-		isFocused,
 	]);
 
 	const getTooltipContent = (): JSX.Element => (

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

@@ -48,12 +48,7 @@
 		.filter-separator {
 			height: 1px;
 			background-color: var(--bg-slate-400);
-			margin: 7px 0;
-
-			&.related-separator {
-				opacity: 0.5;
-				margin: 0.5px 0;
-			}
+			margin: 4px 0;
 		}
 
 		.value {
@@ -143,93 +138,6 @@
 			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,8 +150,7 @@ describe('CheckboxFilter - User Flows', () => {
 		// User should see the filter is automatically opened (not collapsed)
 		expect(screen.getByText('Service Name')).toBeInTheDocument();
 		await waitFor(() => {
-			// eslint-disable-next-line sonarjs/no-duplicate-string
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 
 		// User should see visual separator between checked and unchecked items
@@ -185,7 +184,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// Initially auto-opened due to active filters
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 
 		// User manually closes the filter
@@ -193,7 +192,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now closed (respecting user preference)
 		expect(
-			screen.queryByPlaceholderText('Search values'),
+			screen.queryByPlaceholderText('Filter values'),
 		).not.toBeInTheDocument();
 
 		// User manually opens the filter again
@@ -201,7 +200,7 @@ describe('CheckboxFilter - User Flows', () => {
 
 		// User should see filter is now open (respecting user preference)
 		await waitFor(() => {
-			expect(screen.getByPlaceholderText('Search values')).toBeInTheDocument();
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
 		});
 	});
 

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

@@ -1,15 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
-/* 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 { Fragment, useMemo, useState } from 'react';
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -17,14 +8,19 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
-import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
@@ -61,7 +57,6 @@ 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,
@@ -83,12 +78,6 @@ 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(
 		() =>
@@ -120,125 +109,54 @@ 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,
+			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
 			keepPreviousData: true,
 		},
 	});
 
-	const searchInputRef = useRef<InputRef | null>(null);
-	const searchContainerRef = useRef<HTMLDivElement | null>(null);
-	const previousFiltersItemsRef = useRef(
-		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items,
-	);
+	const attributeValues: string[] = useMemo(() => {
+		const dataType = filter.attributeKey.dataType || DataTypes.String;
 
-	// 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
+		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
+			// Process the response data
 			const responseData = keyValueSuggestions?.data as any;
 			const values = responseData.data?.values || {};
-			const relatedValues: string[] = values.relatedValues || [];
-			const stringValues: string[] = values.stringValues || [];
-			const numberValues: number[] = values.numberValues || [];
+			const stringValues = values.stringValues || [];
+			const numberValues = values.numberValues || [];
 
-			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 string values - explicitly handle empty strings
+			const stringOptions = stringValues
+				// Strict filtering for empty string - we'll handle it as a special case if needed
+				.filter(
+					(value: string | null | undefined): value is string =>
+						value !== null && value !== undefined && value !== '',
+				);
 
+			// Generate options from number values
 			const numberOptions = numberValues
 				.filter(
 					(value: number | null | undefined): value is number =>
@@ -246,27 +164,15 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				)
 				.map((value: number) => value.toString());
 
-			const filteredRelated = new Set(
-				relatedValues.filter(
-					(v): v is string => v !== null && v !== undefined && v !== '',
-				),
-			);
-
-			const baseValues = [...stringOptions, ...numberOptions];
-			const previousUnchecked = previousUncheckedValuesRef.current || [];
-			const preservedUnchecked = previousUnchecked.filter(
-				(value) => !baseValues.includes(value),
-			);
-			return {
-				attributeValues: [...baseValues, ...preservedUnchecked],
-				relatedValuesSet: filteredRelated,
-			};
+			// Combine all options and make sure we don't have duplicate labels
+			return [...stringOptions, ...numberOptions];
 		}
-		return {
-			attributeValues: [] as string[],
-			relatedValuesSet: new Set<string>(),
-		};
-	}, [keyValueSuggestions]);
+
+		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 setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
@@ -340,51 +246,22 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;
 
-	// Sort checked items to the top; always show unchecked items beneath, regardless of pagination
-	const {
-		visibleCheckedValues,
-		uncheckedValues,
-		visibleUncheckedValues,
-		visibleCheckedCount,
-		hasMoreChecked,
-		hasMoreUnchecked,
-		checkedSeparatorIndex,
-	} = useMemo(() => {
+	// Sort checked items to the top, then unchecked items
+	const currentAttributeKeys = useMemo(() => {
 		const checkedValues = attributeValues.filter(
 			(val) => currentFilterState[val],
 		);
-		const unchecked = attributeValues.filter((val) => !currentFilterState[val]);
-		const visibleChecked = checkedValues.slice(0, visibleItemsCount);
-		const visibleUnchecked = unchecked.slice(0, visibleUncheckedCount);
+		const uncheckedValues = attributeValues.filter(
+			(val) => !currentFilterState[val],
+		);
+		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
+	}, [attributeValues, currentFilterState, visibleItemsCount]);
 
-		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]);
+	// Count of checked values in the currently visible items
+	const checkedValuesCount = useMemo(
+		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
+		[currentAttributeKeys, currentFilterState],
+	);
 
 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
@@ -425,7 +302,6 @@ 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
@@ -686,7 +562,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					if (isOpen) {
 						setUserToggleState(false);
 						setVisibleItemsCount(10);
-						setVisibleUncheckedCount(5);
 					} else {
 						setUserToggleState(true);
 					}
@@ -715,93 +590,35 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen && isLoadingKeyValueSuggestions && !attributeValues.length && (
-				<section className="loading">
-					<Skeleton paragraph={{ rows: 4 }} />
-				</section>
-			)}
-			{isOpen && !isLoadingKeyValueSuggestions && (
+			{isOpen &&
+				(isLoading || isLoadingKeyValueSuggestions) &&
+				!attributeValues.length && (
+					<section className="loading">
+						<Skeleton paragraph={{ rows: 4 }} />
+					</section>
+				)}
+			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
-						<section className="search" ref={searchContainerRef}>
+						<section className="search">
 							<Input
-								placeholder="Search values"
+								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
-								ref={searchInputRef}
 							/>
 						</section>
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{visibleCheckedValues.map((value: string, index: number) => (
+							{currentAttributeKeys.map((value: string, index: number) => (
 								<Fragment key={value}>
-									{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"
-										/>
-
+									{index === checkedValuesCount && checkedValuesCount > 0 && (
 										<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}>
+											key="separator"
+											className="filter-separator"
+											data-testid="filter-separator"
+										/>
+									)}
 									<div className="value">
 										<Checkbox
 											onChange={(e): void => onChange(value, e.target.checked, false)}
@@ -853,17 +670,6 @@ 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} />
@@ -872,18 +678,16 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							<Typography.Text>No values found</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>
-						)}
+					{visibleItemsCount < attributeValues?.length && (
+						<section className="show-more">
+							<Typography.Text
+								className="show-more-text"
+								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+							>
+								Show More...
+							</Typography.Text>
+						</section>
+					)}
 				</>
 			)}
 		</div>

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

@@ -127,34 +127,6 @@
 		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 {
@@ -208,30 +180,5 @@
 				}
 			}
 		}
-
-		.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, Lightbulb, Settings2 as SettingsIcon } from 'lucide-react';
+import { Frown, 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,27 +291,6 @@ 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,7 +4,6 @@ import {
 	useApiMonitoringParams,
 } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import {
 	otherFiltersResponse,
 	quickFiltersAttributeValuesResponse,
@@ -25,8 +24,6 @@ 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();
@@ -35,15 +32,13 @@ 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';
@@ -67,7 +62,10 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get('*/api/v1/fields/values*', (_req, res, ctx) =>
+		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+		rest.get(fieldsValuesURL, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -137,28 +135,18 @@ beforeEach(() => {
 				queryData: [
 					{
 						queryName: QUERY_NAME,
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
+						filters: { items: [{ key: 'test', value: 'value' }] },
 					},
 				],
 			},
 		},
 		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();
 });
 
@@ -271,9 +259,8 @@ describe('Quick Filters', () => {
 
 		render(<TestQuickFilters />);
 
-		// Wait for the filter to load with data
-		const target = await screen.findByText('mq-kafka', {}, { timeout: 5000 });
-
+		// 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');
 		await user.click(target);
 
 		await waitFor(() => {

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -14,8 +14,6 @@ import cx from 'classnames';
 import { dragColumnParams } from 'hooks/useDragColumns/configs';
 import { getColumnWidth, RowData } from 'lib/query/createTableColumnsFromQuery';
 import { debounce, set } from 'lodash-es';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { Widgets } from 'types/api/dashboard/getAll';
 
 import ResizableHeader from './ResizableHeader';
 import { DragSpanStyle } from './styles';
@@ -26,28 +24,18 @@ function ResizeTable({
 	columns,
 	onDragColumn,
 	pagination,
-	widgetId,
-	shouldPersistColumnWidths = false,
+	columnWidths,
+	onColumnWidthsChange,
 	...restProps
 }: ResizeTableProps): JSX.Element {
 	const [columnsData, setColumns] = useState<ColumnsType>([]);
-	const { setColumnWidths, selectedDashboard } = useDashboard();
-
-	const columnWidths = shouldPersistColumnWidths
-		? (selectedDashboard?.data?.widgets?.find(
-				(widget) => widget.id === widgetId,
-		  ) as Widgets)?.columnWidths
-		: undefined;
 
 	const updateAllColumnWidths = useRef(
 		debounce((widthsConfig: Record<string, number>) => {
-			if (!widgetId || !shouldPersistColumnWidths) {
+			if (!onColumnWidthsChange) {
 				return;
 			}
-			setColumnWidths?.((prev) => ({
-				...prev,
-				[widgetId]: widthsConfig,
-			}));
+			onColumnWidthsChange(widthsConfig);
 		}, 1000),
 	).current;
 
@@ -75,7 +63,7 @@ function ResizeTable({
 				...col,
 				...(onDragColumn && {
 					title: (
-						<DragSpanStyle className="dragHandler">
+						<DragSpanStyle className="dragHandler" data-testid="drag-column-title">
 							{col?.title?.toString() || ''}
 						</DragSpanStyle>
 					),
@@ -106,31 +94,31 @@ function ResizeTable({
 	}, [mergedColumns, pagination, restProps]);
 
 	useEffect(() => {
-		if (columns) {
-			// Apply stored column widths from widget configuration
-			const columnsWithStoredWidths = columns.map((col) => {
-				const dataIndex = (col as RowData).dataIndex as string;
-				if (dataIndex && columnWidths) {
-					const width = getColumnWidth(dataIndex, columnWidths);
-					if (width) {
-						return {
-							...col,
-							width, // Apply stored width
-						};
-					}
-				}
-				return col;
-			});
-
-			setColumns(columnsWithStoredWidths);
-		}
-	}, [columns, columnWidths]);
-
-	useEffect(() => {
-		if (!shouldPersistColumnWidths) {
+		if (!columns) {
 			return;
 		}
-		// Collect all column widths in a single object
+
+		const columnsWithStoredWidths = columns.map((col) => {
+			const dataIndex = (col as RowData).dataIndex as string;
+			if (dataIndex && columnWidths) {
+				const width = getColumnWidth(dataIndex, columnWidths);
+				if (width) {
+					return { ...col, width };
+				}
+			}
+			return col;
+		});
+
+		setColumns(columnsWithStoredWidths);
+	}, [columns, columnWidths]);
+
+	const lastReportedWidthsRef = useRef<Record<string, number>>({});
+
+	useEffect(() => {
+		if (!onColumnWidthsChange) {
+			return;
+		}
+
 		const newColumnWidths: Record<string, number> = {};
 
 		mergedColumns.forEach((col) => {
@@ -140,11 +128,20 @@ function ResizeTable({
 			}
 		});
 
-		// Only update if there are actual widths to set
-		if (Object.keys(newColumnWidths).length > 0) {
+		if (Object.keys(newColumnWidths).length === 0) {
+			return;
+		}
+
+		const last = lastReportedWidthsRef.current;
+		const hasChange =
+			Object.keys(newColumnWidths).length !== Object.keys(last).length ||
+			Object.keys(newColumnWidths).some((k) => newColumnWidths[k] !== last[k]);
+
+		if (hasChange) {
+			lastReportedWidthsRef.current = newColumnWidths;
 			updateAllColumnWidths(newColumnWidths);
 		}
-	}, [mergedColumns, updateAllColumnWidths, shouldPersistColumnWidths]);
+	}, [mergedColumns, updateAllColumnWidths, onColumnWidthsChange]);
 
 	return onDragColumn ? (
 		<ReactDragListView.DragColumn {...dragColumnParams} onDragEnd={onDragColumn}>

frontend/src/components/ResizeTable/__tests__/ResizeTable.test.tsx

@@ -0,0 +1,244 @@
+import { act } from '@testing-library/react';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import ResizeTable from '../ResizeTable';
+
+jest.mock('react-resizable', () => ({
+	Resizable: ({
+		children,
+		onResize,
+		width,
+	}: {
+		children: React.ReactNode;
+		onResize: (
+			e: React.SyntheticEvent,
+			data: { size: { width: number } },
+		) => void;
+		width: number;
+	}): JSX.Element => (
+		<div>
+			{children}
+			<button
+				data-testid="resize-trigger"
+				type="button"
+				onClick={(e): void => onResize(e, { size: { width: width + 50 } })}
+			/>
+		</div>
+	),
+}));
+
+// Make debounce synchronous so onColumnWidthsChange fires immediately
+jest.mock('lodash-es', () => ({
+	...jest.requireActual('lodash-es'),
+	debounce: (fn: (...args: any[]) => any): ((...args: any[]) => any) => fn,
+}));
+
+const baseColumns = [
+	{ dataIndex: 'name', title: 'Name', width: 100 },
+	{ dataIndex: 'value', title: 'Value', width: 100 },
+];
+
+const baseDataSource = [
+	{ key: '1', name: 'Alice', value: 42 },
+	{ key: '2', name: 'Bob', value: 99 },
+];
+
+describe('ResizeTable', () => {
+	it('renders column headers and data rows', () => {
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+			/>,
+		);
+
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Value')).toBeInTheDocument();
+		expect(screen.getByText('Alice')).toBeInTheDocument();
+		expect(screen.getByText('Bob')).toBeInTheDocument();
+	});
+
+	it('overrides column widths from columnWidths prop and reports them via onColumnWidthsChange', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250, value: 180 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 180 }),
+		);
+	});
+
+	it('reports original column widths via onColumnWidthsChange when columnWidths prop is not provided', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange when it is not provided', () => {
+		// Should render without errors and without attempting to call an undefined callback
+		expect(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+				/>,
+			);
+		}).not.toThrow();
+	});
+
+	it('only overrides the column that has a stored width, leaving others at their original width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		act(() => {
+			render(
+				<ResizeTable
+					columns={baseColumns}
+					dataSource={baseDataSource}
+					rowKey="key"
+					columnWidths={{ name: 250 }}
+					onColumnWidthsChange={onColumnWidthsChange}
+				/>,
+			);
+		});
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 250, value: 100 }),
+		);
+	});
+
+	it('does not call onColumnWidthsChange on re-render when widths have not changed', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		const { rerender } = render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledTimes(1);
+		onColumnWidthsChange.mockClear();
+
+		rerender(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('does not call onColumnWidthsChange when no column has a defined width', () => {
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={[
+					{ dataIndex: 'name', title: 'Name' },
+					{ dataIndex: 'value', title: 'Value' },
+				]}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		expect(onColumnWidthsChange).not.toHaveBeenCalled();
+	});
+
+	it('calls onColumnWidthsChange with the new width after a column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Click the first column's resize trigger — mock adds 50px to the current width (100 → 150)
+		const [firstResizeTrigger] = screen.getAllByTestId('resize-trigger');
+		await user.click(firstResizeTrigger);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 150, value: 100 }),
+		);
+	});
+
+	it('does not affect other columns when only one column is resized', async () => {
+		const user = userEvent.setup();
+		const onColumnWidthsChange = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onColumnWidthsChange={onColumnWidthsChange}
+			/>,
+		);
+
+		onColumnWidthsChange.mockClear();
+
+		// Resize only the second column (value: 100 → 150), name should stay at 100
+		const resizeTriggers = screen.getAllByTestId('resize-trigger');
+		await user.click(resizeTriggers[1]);
+
+		expect(onColumnWidthsChange).toHaveBeenCalledWith(
+			expect.objectContaining({ name: 100, value: 150 }),
+		);
+	});
+
+	it('wraps column titles in drag handler spans when onDragColumn is provided', () => {
+		const onDragColumn = jest.fn();
+
+		render(
+			<ResizeTable
+				columns={baseColumns}
+				dataSource={baseDataSource}
+				rowKey="key"
+				onDragColumn={onDragColumn}
+			/>,
+		);
+
+		const dragTitles = screen.getAllByTestId('drag-column-title');
+		expect(dragTitles).toHaveLength(baseColumns.length);
+		expect(dragTitles[0]).toHaveTextContent('Name');
+		expect(dragTitles[1]).toHaveTextContent('Value');
+	});
+});

frontend/src/components/ResizeTable/types.ts

@@ -6,10 +6,25 @@ import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatS
 
 import { TableDataSource } from './contants';
 
+type ColumnWidths = Record<string, number>;
+
 export interface ResizeTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
-	widgetId?: string;
-	shouldPersistColumnWidths?: boolean;
+	/**
+	 * Pre-resolved column widths for this table, keyed by column dataIndex.
+	 * Use this to apply persisted widths on mount (e.g. from widget.columnWidths).
+	 * Do NOT pass a value that updates reactively on every resize — that creates a
+	 * feedback loop. Pass only stable / persisted values.
+	 */
+	columnWidths?: ColumnWidths;
+	/**
+	 * Called (debounced) whenever the user finishes resizing a column.
+	 * The widths object contains all current column widths keyed by dataIndex.
+	 * Intended for persisting widths to an external store (e.g. dashboard context
+	 * staging buffer). The caller owns the storage; ResizeTable does not read back
+	 * whatever is written here.
+	 */
+	onColumnWidthsChange?: (widths: ColumnWidths) => void;
 }
 export interface DynamicColumnTableProps extends TableProps<any> {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];

frontend/src/container/DashboardContainer/visualization/charts/BarChart/BarChart.tsx

@@ -10,7 +10,15 @@ import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
+	const {
+		children,
+		isStackedBarChart,
+		customTooltip,
+		config,
+		data,
+		pinnedTooltipElement,
+		...rest
+	} = props;
 
 	const chartData = useBarChartStacking({
 		data,
@@ -20,6 +28,9 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customTooltip) {
+				return customTooltip(props);
+			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
 				timezone: rest.timezone,
@@ -29,7 +40,13 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
+		[
+			customTooltip,
+			rest.timezone,
+			rest.yAxisUnit,
+			rest.decimalPrecision,
+			isStackedBarChart,
+		],
 	);
 
 	return (
@@ -37,7 +54,8 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 			{...rest}
 			config={config}
 			data={chartData}
-			renderTooltip={renderTooltip}
+			customTooltip={renderTooltip}
+			pinnedTooltipElement={pinnedTooltipElement}
 		>
 			{children}
 		</ChartWrapper>

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -30,7 +30,8 @@ export default function ChartWrapper({
 	onDestroy = noop,
 	children,
 	layoutChildren,
-	renderTooltip,
+	customTooltip,
+	pinnedTooltipElement,
 	'data-testid': testId,
 }: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -53,12 +54,12 @@ export default function ChartWrapper({
 
 	const renderTooltipCallback = useCallback(
 		(args: TooltipRenderArgs): React.ReactNode => {
-			if (renderTooltip) {
-				return renderTooltip(args);
+			if (customTooltip) {
+				return customTooltip(args);
 			}
 			return null;
 		},
-		[renderTooltip],
+		[customTooltip],
 	);
 
 	return (
@@ -99,6 +100,7 @@ export default function ChartWrapper({
 								)}
 								syncKey={syncKey}
 								render={renderTooltipCallback}
+								pinnedTooltipElement={pinnedTooltipElement}
 							/>
 						)}
 					</UPlotChart>

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -11,15 +11,16 @@ import { HistogramChartProps } from '../types';
 export default function Histogram(props: HistogramChartProps): JSX.Element {
 	const {
 		children,
-		renderTooltip: customRenderTooltip,
+		customTooltip,
 		isQueriesMerged,
+		pinnedTooltipElement,
 		...rest
 	} = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
+			if (customTooltip) {
+				return customTooltip(props);
 			}
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
@@ -29,14 +30,15 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (
 		<ChartWrapper
 			showLegend={!isQueriesMerged}
 			{...rest}
-			renderTooltip={renderTooltip}
+			customTooltip={renderTooltip}
+			pinnedTooltipElement={pinnedTooltipElement}
 		>
 			{children}
 		</ChartWrapper>

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -9,12 +9,12 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
+	const { children, customTooltip, pinnedTooltipElement, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
+			if (customTooltip) {
+				return customTooltip(props);
 			}
 			const tooltipProps: TimeSeriesTooltipProps = {
 				...props,
@@ -24,11 +24,15 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (
-		<ChartWrapper {...rest} renderTooltip={renderTooltip}>
+		<ChartWrapper
+			{...rest}
+			customTooltip={renderTooltip}
+			pinnedTooltipElement={pinnedTooltipElement}
+		>
 			{children}
 		</ChartWrapper>
 	);

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -2,7 +2,10 @@ import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import {
+	DashboardCursorSync,
+	TooltipClickData,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
@@ -13,7 +16,8 @@ interface BaseChartProps {
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
+	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }
 interface UPlotBasedChartProps {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -66,7 +66,7 @@ export const prepareUPlotConfig = ({
 	widget: Widgets;
 	isDarkMode: boolean;
 	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
+	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect: (startTime: number, endTime: number) => void;
 	apiResponse: MetricRangePayloadProps;
 	timezone: Timezone;

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -168,6 +168,9 @@ jest.mock('providers/Dashboard/Dashboard', () => ({
 				variables: [],
 			},
 		},
+		setLayouts: jest.fn(),
+		setSelectedDashboard: jest.fn(),
+		setColumnWidths: jest.fn(),
 	}),
 }));
 

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -101,7 +101,19 @@ function WidgetGraphComponent({
 
 	const navigateToExplorerPages = useNavigateToExplorerPages();
 
-	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
+	const {
+		setLayouts,
+		selectedDashboard,
+		setSelectedDashboard,
+		setColumnWidths,
+	} = useDashboard();
+
+	const onColumnWidthsChange = useCallback(
+		(widths: Record<string, number>) => {
+			setColumnWidths((prev) => ({ ...prev, [widget.id]: widths }));
+		},
+		[setColumnWidths, widget.id],
+	);
 
 	const onToggleModal = useCallback(
 		(func: Dispatch<SetStateAction<boolean>>) => {
@@ -424,6 +436,7 @@ function WidgetGraphComponent({
 						customSeries={customSeries}
 						customOnRowClick={customOnRowClick}
 						enableDrillDown={enableDrillDown}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</div>
 			)}

frontend/src/container/GridTableComponent/index.tsx

@@ -45,6 +45,8 @@ function GridTableComponent({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	queryRangeRequest,
 	decimalPrecision,
@@ -284,6 +286,8 @@ function GridTableComponent({
 				dataSource={dataSource}
 				sticky={sticky}
 				widgetId={widgetId}
+				columnWidths={columnWidths}
+				onColumnWidthsChange={onColumnWidthsChange}
 				panelType={panelType}
 				queryRangeRequest={queryRangeRequest}
 				onRow={

frontend/src/container/GridTableComponent/types.ts

@@ -24,6 +24,8 @@ export type GridTableComponentProps = {
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	customOnRowClick?: (record: RowData) => void;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
 	customColTitles?: Record<string, string>;
 	enableDrillDown?: boolean;

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -33,6 +33,7 @@ function LogsPanelComponent({
 	widget,
 	setRequestData,
 	queryResponse,
+	onColumnWidthsChange,
 }: LogsPanelComponentProps): JSX.Element {
 	const [pageSize, setPageSize] = useState<number>(10);
 	const [offset, setOffset] = useState<number>(0);
@@ -145,8 +146,8 @@ function LogsPanelComponent({
 							columns={columns}
 							onRow={handleRow}
 							rowKey={(record): string => record.id}
-							widgetId={widget.id}
-							shouldPersistColumnWidths
+							columnWidths={widget.columnWidths}
+							onColumnWidthsChange={onColumnWidthsChange}
 						/>
 					</OverlayScrollbar>
 				</div>
@@ -189,6 +190,7 @@ export type LogsPanelComponentProps = {
 		Error
 	>;
 	widget: Widgets;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default LogsPanelComponent;

frontend/src/container/PanelWrapper/ListPanelWrapper.tsx

@@ -8,6 +8,7 @@ function ListPanelWrapper({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const dataSource = widget.query.builder?.queryData[0]?.dataSource;
 
@@ -21,6 +22,7 @@ function ListPanelWrapper({
 				widget={widget}
 				queryResponse={queryResponse}
 				setRequestData={setRequestData}
+				onColumnWidthsChange={onColumnWidthsChange}
 			/>
 		);
 	}
@@ -29,6 +31,7 @@ function ListPanelWrapper({
 			widget={widget}
 			queryResponse={queryResponse}
 			setRequestData={setRequestData}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -24,6 +24,7 @@ function PanelWrapper({
 	customOnRowClick,
 	panelMode,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -58,6 +59,7 @@ function PanelWrapper({
 			customOnRowClick={customOnRowClick}
 			customSeries={customSeries}
 			enableDrillDown={enableDrillDown}
+			onColumnWidthsChange={onColumnWidthsChange}
 		/>
 	);
 }

frontend/src/container/PanelWrapper/TablePanelWrapper.tsx

@@ -14,6 +14,7 @@ function TablePanelWrapper({
 	onOpenTraceBtnClick,
 	customOnRowClick,
 	enableDrillDown = false,
+	onColumnWidthsChange,
 }: PanelWrapperProps): JSX.Element {
 	const panelData =
 		(queryResponse.data?.payload?.data?.result?.[0] as any)?.table || [];
@@ -34,6 +35,8 @@ function TablePanelWrapper({
 			onOpenTraceBtnClick={onOpenTraceBtnClick}
 			customOnRowClick={customOnRowClick}
 			widgetId={widget.id}
+			columnWidths={widget.columnWidths}
+			onColumnWidthsChange={onColumnWidthsChange}
 			renderColumnCell={widget.renderColumnCell}
 			customColTitles={widget.customColTitles}
 			contextLinks={widget.contextLinks}

frontend/src/container/PanelWrapper/panelWrapper.types.ts

@@ -29,6 +29,7 @@ export type PanelWrapperProps = {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	enableDrillDown?: boolean;
 	panelMode: PanelMode;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export type TooltipData = {

frontend/src/container/QueryTable/QueryTable.intefaces.ts

@@ -24,6 +24,8 @@ export type QueryTableProps = Omit<
 	sticky?: TableProps<RowData>['sticky'];
 	searchTerm?: string;
 	widgetId?: string;
+	columnWidths?: Record<string, number>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 	enableDrillDown?: boolean;
 	contextLinks?: ContextLinksData;
 	panelType?: PANEL_TYPES;

frontend/src/container/QueryTable/QueryTable.tsx

@@ -28,6 +28,8 @@ export function QueryTable({
 	sticky,
 	searchTerm,
 	widgetId,
+	columnWidths,
+	onColumnWidthsChange,
 	panelType,
 	...props
 }: QueryTableProps): JSX.Element {
@@ -175,8 +177,8 @@ export function QueryTable({
 					dataSource={filterTable === null ? newDataSource : filterTable}
 					scroll={{ x: 'max-content' }}
 					pagination={paginationConfig}
-					widgetId={widgetId}
-					shouldPersistColumnWidths
+					columnWidths={columnWidths}
+					onColumnWidthsChange={onColumnWidthsChange}
 					sticky={sticky}
 					{...props}
 				/>

frontend/src/container/TracesTableComponent/TracesTableComponent.tsx

@@ -35,6 +35,7 @@ function TracesTableComponent({
 	widget,
 	queryResponse,
 	setRequestData,
+	onColumnWidthsChange,
 }: TracesTableComponentProps): JSX.Element {
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
@@ -131,8 +132,8 @@ function TracesTableComponent({
 						columns={columns}
 						onRow={handleRow}
 						sticky
-						widgetId={widget.id}
-						shouldPersistColumnWidths
+						columnWidths={widget.columnWidths}
+						onColumnWidthsChange={onColumnWidthsChange}
 					/>
 				</OverlayScrollbar>
 			</div>
@@ -175,6 +176,7 @@ export type TracesTableComponentProps = {
 	>;
 	widget: Widgets;
 	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	onColumnWidthsChange?: (widths: Record<string, number>) => void;
 };
 
 export default TracesTableComponent;

frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts

@@ -1,11 +1,7 @@
-/* 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,
@@ -13,7 +9,6 @@ export const useGetQueryKeyValueSuggestions = ({
 	searchText,
 	signalSource,
 	metricName,
-	existingQuery,
 	options,
 }: {
 	key: string;
@@ -25,24 +20,11 @@ export const useGetQueryKeyValueSuggestions = ({
 		AxiosError
 	>;
 	metricName?: string;
-	existingQuery?: string;
 }): UseQueryResult<
 	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
-	>({
+> =>
+	useQuery<AxiosResponse<QueryKeyValueSuggestionsResponseProps>, AxiosError>({
 		queryKey: [
 			'queryKeyValueSuggestions',
 			key,
@@ -50,7 +32,6 @@ export const useGetQueryKeyValueSuggestions = ({
 			searchText,
 			signalSource,
 			metricName,
-			timeRangeKey,
 		],
 		queryFn: () =>
 			getValueSuggestions({
@@ -59,8 +40,6 @@ export const useGetQueryKeyValueSuggestions = ({
 				searchText: searchText || '',
 				signalSource: signalSource as 'meter' | '',
 				metricName: metricName || '',
-				existingQuery,
 			}),
 		...options,
 	});
-};

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -92,6 +92,7 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
+		clickData: null,
 	} as TooltipTestProps;
 
 	return render(

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

@@ -1,6 +1,7 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
+import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
 import {
@@ -15,6 +16,7 @@ import {
 } from './tooltipController';
 import {
 	DashboardCursorSync,
+	TooltipClickData,
 	TooltipControllerContext,
 	TooltipControllerState,
 	TooltipLayoutInfo,
@@ -38,15 +40,18 @@ export default function TooltipPlugin({
 	maxHeight = 400,
 	syncMode = DashboardCursorSync.None,
 	syncKey = '_tooltip_sync_global_',
+	pinnedTooltipElement,
 	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
@@ -73,11 +78,6 @@ export default function TooltipPlugin({
 		layoutRef.current?.observer.disconnect();
 		layoutRef.current = createLayoutObserver(layoutRef);
 
-		/**
-		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
-		 * reference; clearPlotReferences runs in cleanup so
-		 * detached canvases can be garbage collected.
-		 */
 		// Controller holds the mutable interaction state for this tooltip
 		// instance. It is intentionally *not* React state so uPlot hooks
 		// and DOM listeners can update it freely without triggering a
@@ -85,7 +85,9 @@ export default function TooltipPlugin({
 		const controller: TooltipControllerState = createInitialControllerState();
 
 		/**
-		 * Clear plot references so detached canvases can be garbage collected.
+		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
+		 * reference; clearPlotReferences runs in cleanup so
+		 * detached canvases can be garbage collected.
 		 */
 		const clearPlotReferences = (): void => {
 			controller.plot = null;
@@ -157,6 +159,7 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
+			controller.clickData = null;
 			const plot = getPlot(controller);
 			if (plot) {
 				plot.setCursor({ left: -10, top: -10 });
@@ -196,6 +199,7 @@ export default function TooltipPlugin({
 				style: controller.style,
 				isPinned: controller.pinned,
 				isHovering: controller.hoverActive,
+				clickData: controller.clickData,
 				contents: createTooltipContents(),
 				dismiss: dismissTooltip,
 			});
@@ -268,6 +272,37 @@ export default function TooltipPlugin({
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
+				const xValue = plot.posToVal(event.offsetX, 'x');
+				const yValue = plot.posToVal(event.offsetY, 'y');
+				const focusedSeries = getFocusedSeriesAtPosition(event, plot);
+
+				let clickedDataTimestamp = xValue;
+				if (focusedSeries) {
+					const dataIndex = plot.posToIdx(event.offsetX);
+					const xSeriesData = plot.data[0];
+					if (
+						xSeriesData &&
+						dataIndex >= 0 &&
+						dataIndex < xSeriesData.length &&
+						xSeriesData[dataIndex] !== undefined
+					) {
+						clickedDataTimestamp = xSeriesData[dataIndex];
+					}
+				}
+
+				const clickData: TooltipClickData = {
+					xValue,
+					yValue,
+					focusedSeries,
+					clickedDataTimestamp,
+					mouseX: event.offsetX,
+					mouseY: event.offsetY,
+					absoluteMouseX: event.clientX,
+					absoluteMouseY: event.clientY,
+				};
+
+				controller.clickData = clickData;
+
 				setTimeout(() => {
 					controller.pinned = true;
 					scheduleRender(true);
@@ -356,6 +391,19 @@ 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;
@@ -374,6 +422,25 @@ export default function TooltipPlugin({
 		}
 	}, [isHovering, hasPlot]);
 
+	const tooltipBody = useMemo(() => {
+		if (isPinned && pinnedTooltipElement != null && viewState.clickData != null) {
+			return pinnedTooltipElement(viewState.clickData);
+		}
+
+		if (isHovering) {
+			return contents;
+		}
+
+		return null;
+	}, [
+		isPinned,
+		pinnedTooltipElement,
+		viewState.clickData,
+		isHovering,
+		contents,
+	]);
+	const isTooltipVisible = isHovering || tooltipBody != null;
+
 	if (!hasPlot) {
 		return null;
 	}
@@ -382,7 +449,7 @@ export default function TooltipPlugin({
 		<div
 			className={cx('tooltip-plugin-container', {
 				pinned: isPinned,
-				visible: isHovering,
+				visible: isTooltipVisible,
 			})}
 			style={{
 				...style,
@@ -391,12 +458,12 @@ export default function TooltipPlugin({
 			}}
 			aria-live="polite"
 			aria-atomic="true"
-			aria-hidden={!isHovering}
+			aria-hidden={!isTooltipVisible}
 			ref={containerRef}
 			data-testid="tooltip-plugin-container"
 		>
-			{isHovering ? contents : null}
+			{tooltipBody}
 		</div>,
-		portalRoot.current,
+		portalRoot,
 	);
 }

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -21,6 +21,7 @@ export function createInitialControllerState(): TooltipControllerState {
 		hoverActive: false,
 		isAnySeriesActive: false,
 		pinned: false,
+		clickData: null,
 		style: { transform: '', pointerEvents: 'none' },
 		horizontalOffset: 0,
 		verticalOffset: 0,

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -24,6 +24,7 @@ export interface TooltipViewState {
 	isHovering: boolean;
 	isPinned: boolean;
 	dismiss: () => void;
+	clickData: TooltipClickData | null;
 	contents?: ReactNode;
 }
 
@@ -39,10 +40,27 @@ export interface TooltipPluginProps {
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	render: (args: TooltipRenderArgs) => ReactNode;
+	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 	maxWidth?: number;
 	maxHeight?: number;
 }
 
+export interface TooltipClickData {
+	xValue: number;
+	yValue: number;
+	focusedSeries: {
+		seriesIndex: number;
+		seriesName: string;
+		value: number;
+		color: string;
+	} | null;
+	clickedDataTimestamp: number;
+	mouseX: number;
+	mouseY: number;
+	absoluteMouseX: number;
+	absoluteMouseY: number;
+}
+
 /**
  * Mutable, non-React state that drives tooltip behaviour:
  * - whether the tooltip is active / pinned
@@ -59,6 +77,7 @@ export interface TooltipControllerState {
 	hoverActive: boolean;
 	isAnySeriesActive: boolean;
 	pinned: boolean;
+	clickData: TooltipClickData | null;
 	style: TooltipViewState['style'];
 	horizontalOffset: number;
 	verticalOffset: number;

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -125,6 +125,7 @@ export function createInitialViewState(): TooltipViewState {
 		contents: null,
 		hasPlot: false,
 		dismiss: (): void => {},
+		clickData: null,
 	};
 }
 

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

@@ -9,6 +9,12 @@ import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
 import { DashboardCursorSync } from '../TooltipPlugin/types';
 
+// Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
+// We only care that pinning logic runs without throwing, not which series is focused.
+jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
+	getFocusedSeriesAtPosition: jest.fn(() => null),
+}));
+
 // ---------------------------------------------------------------------------
 // Mock helpers
 // ---------------------------------------------------------------------------
@@ -55,11 +61,21 @@ function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
 	cursor: { event: Record<string, unknown> };
+	posToVal: jest.Mock<number, [value: number]>;
+	posToIdx: jest.Mock<number, []>;
+	data: [number[], number[]];
 } {
+	const over = document.createElement('div');
+
+	// Provide the minimal uPlot surface used by TooltipPlugin's pin logic.
 	return {
-		over: document.createElement('div'),
+		over,
 		setCursor: jest.fn(),
 		cursor: { event: {} },
+		// In real uPlot these map overlay coordinates to data-space values.
+		posToVal: jest.fn((value: number) => value),
+		posToIdx: jest.fn(() => 0),
+		data: [[0], [0]],
 	};
 }
 
@@ -172,6 +188,58 @@ 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 ----------------------------------------------------------
@@ -198,6 +266,34 @@ describe('TooltipPlugin', () => {
 			});
 		});
 
+		it('renders pinnedTooltipElement after pinning and hides hover content', async () => {
+			const config = createConfigMock();
+			const pinnedTooltipElement = jest.fn(() =>
+				React.createElement('div', null, 'pinned-tooltip'),
+			);
+
+			const fakePlot = renderAndActivateHover(
+				config,
+				() => React.createElement('div', null, 'hover-tooltip'),
+				{
+					canPinTooltip: true,
+					pinnedTooltipElement,
+				},
+			);
+
+			expect(screen.getByText('hover-tooltip')).toBeInTheDocument();
+
+			act(() => {
+				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			});
+
+			await waitFor(() => {
+				expect(pinnedTooltipElement).toHaveBeenCalled();
+				expect(screen.getByText('pinned-tooltip')).toBeInTheDocument();
+				expect(screen.queryByText('hover-tooltip')).not.toBeInTheDocument();
+			});
+		});
+
 		it('dismisses a pinned tooltip via the dismiss callback', async () => {
 			const config = createConfigMock();
 

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

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

frontend/src/styles.scss

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