feat: corrected the regex matcher for resolved titles

* feat: added dynamic variable to the dashboard details

* feat: added new component to existing variables

* feat: added enhancement to multiselect and select for dyn-variables

* feat: added refetch method between all dynamic-variables

* feat: correct error handling

* feat: correct error handling

* feat: enforced non-empty selectedvalues and default value

* feat: added client and server side searches

* feat: retry on error

* feat: correct error handling

* feat: handle defautl value in existing variables

* feat: lowercase the source for payload

* feat: fixed the incorrect assignment of active indices

* feat: improved handling of all option

* feat: improved the ALL option visuals

* feat: handled default value enforcement in existing variables

* feat: added unix time to values call

* feat: added incomplete data message and info to search

* feat: changed dashboard panel call handling with existing variables

* feat: adjusted the response type and data with the new API schema for values

* feat: code refactor

* feat: made dyn-variable option as the default

* feat: added test cases for dyn variable creation and completion

* feat: updated test cases

* feat: added variable in url and made dashboard sync around that and sharable

* feat: added test cases

* feat: added safety check

* feat: enabled url setting on first load itself

* feat: code refactor

* feat: cleared options query param when on dashboard list page

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -0,0 +1,114 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldKeys } from '../getFieldKeys';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldKeys API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const mockSuccessResponse = {
+		data: {
+			status: 'success',
+			data: {
+				keys: {
+					'service.name': [],
+					'http.status_code': [],
+				},
+				complete: true,
+			},
+		},
+	};
+
+	it('should call API with correct parameters when no args provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with no parameters
+		await getFieldKeys();
+
+		// Verify API was called correctly with empty params object
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: {},
+		});
+	});
+
+	it('should call API with signal parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with signal parameter
+		await getFieldKeys('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call API with name parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldKeys(undefined, 'service');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { name: 'service' },
+		});
+	});
+
+	it('should call API with both signal and name when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with both parameters
+		await getFieldKeys('logs', 'service');
+
+		// Verify API was called with both parameters
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'logs', name: 'service' },
+		});
+	});
+
+	it('should return properly formatted response', async () => {
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call the function
+		const result = await getFieldKeys('traces');
+
+		// Verify the returned structure matches our expected format
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: mockSuccessResponse.data.data,
+		});
+	});
+});

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -0,0 +1,209 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldValues } from '../getFieldValues';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldValues API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should call the API with correct parameters (no options)', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function without parameters
+		await getFieldValues();
+
+		// Verify API was called correctly with empty params
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {},
+		});
+	});
+
+	it('should call the API with signal parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with signal parameter
+		await getFieldValues('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call the API with name parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldValues(undefined, 'service.name');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name' },
+		});
+	});
+
+	it('should call the API with value parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend'],
+					},
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with value parameter
+		await getFieldValues(undefined, 'service.name', 'front');
+
+		// Verify API was called with value parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name', value: 'front' },
+		});
+	});
+
+	it('should call the API with time range parameters', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with time range parameters
+		const startUnixMilli = 1625097600000000; // Note: nanoseconds
+		const endUnixMilli = 1625184000000000;
+		await getFieldValues(
+			'logs',
+			'service.name',
+			undefined,
+			startUnixMilli,
+			endUnixMilli,
+		);
+
+		// Verify API was called with time range parameters (converted to milliseconds)
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {
+				signal: 'logs',
+				name: 'service.name',
+				startUnixMilli: '1625097600', // Should be converted to seconds (divided by 1000000)
+				endUnixMilli: '1625184000', // Should be converted to seconds (divided by 1000000)
+			},
+		});
+	});
+
+	it('should normalize the response values', async () => {
+		// Mock API response with multiple value types
+		const mockResponse = {
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+						numberValues: [200, 404],
+						boolValues: [true, false],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'mixed.values');
+
+		// Verify the response has normalized values array
+		expect(result.payload?.normalizedValues).toContain('frontend');
+		expect(result.payload?.normalizedValues).toContain('backend');
+		expect(result.payload?.normalizedValues).toContain('200');
+		expect(result.payload?.normalizedValues).toContain('404');
+		expect(result.payload?.normalizedValues).toContain('true');
+		expect(result.payload?.normalizedValues).toContain('false');
+		expect(result.payload?.normalizedValues?.length).toBe(6);
+	});
+
+	it('should return a properly formatted success response', async () => {
+		// Create mock response
+		const mockApiResponse = {
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'service.name');
+
+		// Verify the returned structure
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: expect.objectContaining({
+				values: expect.any(Object),
+				normalizedValues: expect.any(Array),
+				complete: true,
+			}),
+		});
+	});
+});

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -0,0 +1,34 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
+
+/**
+ * Get field keys for a given signal type
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Optional search text
+ */
+export const getFieldKeys = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	const response = await ApiBaseInstance.get('/fields/keys', { params });
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -0,0 +1,63 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
+
+/**
+ * Get field values for a given signal type and field name
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Name of the attribute for which values are being fetched
+ * @param value Optional search text
+ */
+export const getFieldValues = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+	value?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	if (value) {
+		params.value = value;
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	const response = await ApiBaseInstance.get('/fields/values', { params });
+
+	// Normalize values from different types (stringValues, boolValues, etc.)
+	if (response.data?.data?.values) {
+		const allValues: string[] = [];
+		Object.values(response.data.data.values).forEach((valueArray: any) => {
+			if (Array.isArray(valueArray)) {
+				allValues.push(...valueArray.map(String));
+			}
+		});
+
+		// Add a normalized values array to the response
+		response.data.data.normalizedValues = allValues;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldValues;

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -28,6 +28,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -37,7 +38,7 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
+const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
 
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
@@ -62,6 +63,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
+	onDropdownVisibleChange,
+	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -78,6 +81,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
+	const justOpenedRef = useRef<boolean>(false);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -124,6 +129,12 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
+	// Define allOptionShown earlier in the code
+	const allOptionShown = useMemo(
+		() => value === ALL_SELECTED_VALUE || value === 'ALL',
+		[value],
+	);
+
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -132,10 +143,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[]): void => {
+		(newValue: string | string[], directCaller?: boolean): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
+			if (
+				(allOptionShown || isAllSelected) &&
+				!directCaller &&
+				currentNewValue.length === 0
+			) {
+				return;
+			}
+
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -144,7 +163,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__all__" is selected (means select all actual values)
+			// Case 2: "__ALL__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -175,7 +194,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[onChange, allAvailableValues, options, enableAllSelection],
+		[
+			allOptionShown,
+			isAllSelected,
+			onChange,
+			allAvailableValues,
+			options,
+			enableAllSelection,
+		],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -510,11 +536,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			setSearchText(value.trim());
+			const trimmedValue = value.trim();
+			setSearchText(trimmedValue);
 			if (!isOpen) {
 				setIsOpen(true);
+				justOpenedRef.current = true;
 			}
-			if (onSearch) onSearch(value.trim());
+
+			// Reset active index when search changes if dropdown is open
+			if (isOpen && trimmedValue) {
+				setActiveIndex(0);
+			}
+
+			if (onSearch) onSearch(trimmedValue);
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -528,28 +562,34 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			const parts = text.split(
-				new RegExp(
-					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
-					'gi',
-				),
-			);
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a unique key that doesn't rely on array index
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a unique key that doesn't rely on array index
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				// If regex fails, return the original text without highlighting
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -560,10 +600,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([]);
+			handleInternalChange([], true);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE]);
+			handleInternalChange([ALL_SELECTED_VALUE], true);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -738,6 +778,26 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
+			// Simple early return if ALL is selected - block all possible keyboard interactions
+			// that could remove the ALL tag, but still allow dropdown navigation and search
+			if (
+				(allOptionShown || isAllSelected) &&
+				(e.key === 'Backspace' || e.key === 'Delete')
+			) {
+				// Only prevent default if the input is empty or cursor is at start position
+				const activeElement = document.activeElement as HTMLInputElement;
+				const isInputActive = activeElement?.tagName === 'INPUT';
+				const isInputEmpty = isInputActive && !activeElement?.value;
+				const isCursorAtStart =
+					isInputActive && activeElement?.selectionStart === 0;
+
+				if (isInputEmpty || isCursorAtStart) {
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+			}
+
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -752,7 +812,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: '__all__', // Special value for the ALL option
+						value: ALL_SELECTED_VALUE, // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -784,6 +844,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
+			// If we just opened the dropdown and have options, set first option as active
+			if (justOpenedRef.current && flatOptions.length > 0) {
+				setActiveIndex(0);
+				justOpenedRef.current = false;
+			}
+
+			// If no option is active but we have options and dropdown is open, activate the first one
+			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
+				setActiveIndex(0);
+			}
+
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1129,7 +1200,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1159,6 +1230,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
+						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
+						if (onDropdownVisibleChange) {
+							onDropdownVisibleChange(false);
+						}
 						break;
 
 					case SPACEKEY:
@@ -1168,7 +1243,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1214,7 +1289,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						setActiveIndex(0);
+						justOpenedRef.current = true; // Set flag to initialize active option on next render
 						setActiveChipIndex(-1);
 						break;
 
@@ -1260,9 +1335,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
+			allOptionShown,
+			isAllSelected,
+			isOpen,
+			activeIndex,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
-			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1278,10 +1358,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			activeIndex,
+			onDropdownVisibleChange,
 			handleSelectAll,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1306,6 +1384,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);
+
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1382,6 +1468,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1460,15 +1547,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<ArrowLeft size={8} className="icons" />
-							<ArrowRight size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<ArrowLeft size={8} className="icons" />
+								<ArrowRight size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1494,9 +1584,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -1513,6 +1613,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1522,8 +1623,31 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);
 
+	// Custom handler for dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback(
+		(visible: boolean): void => {
+			setIsOpen(visible);
+			if (visible) {
+				justOpenedRef.current = true;
+				setActiveIndex(0);
+				setActiveChipIndex(-1);
+			} else {
+				setSearchText('');
+				setActiveIndex(-1);
+				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
+			}
+			// Pass through to the parent component's handler if provided
+			if (onDropdownVisibleChange) {
+				onDropdownVisibleChange(visible);
+			}
+		},
+		[onDropdownVisibleChange],
+	);
+
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1588,52 +1712,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (value === ALL_SELECTED_VALUE && isAllSelected) {
-				const handleAllTagClose = (
-					e: React.MouseEvent | React.KeyboardEvent,
-				): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					handleInternalChange([]); // Clear selection when ALL tag is closed
-				};
-
-				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
-					if (e.key === 'Enter' || e.key === SPACEKEY) {
-						handleAllTagClose(e);
-					}
-					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
-				};
-
-				return (
-					<div
-						className={cx('ant-select-selection-item', {
-							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
-							'ant-select-selection-item-selected': selectedChips.includes(0),
-						})}
-						style={
-							activeChipIndex === 0 || selectedChips.includes(0)
-								? {
-										borderColor: Color.BG_ROBIN_500,
-										backgroundColor: Color.BG_SLATE_400,
-								  }
-								: undefined
-						}
-					>
-						<span className="ant-select-selection-item-content">ALL</span>
-						{closable && (
-							<span
-								className="ant-select-selection-item-remove"
-								onClick={handleAllTagClose}
-								onKeyDown={handleAllTagKeyDown}
-								role="button"
-								tabIndex={0}
-								aria-label="Remove ALL tag (deselect all)"
-							>
-								×
-							</span>
-						)}
-					</div>
-				);
+			if (allOptionShown) {
+				// Don't render a visible tag - will be shown as placeholder
+				return <div style={{ display: 'none' }} />;
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1713,52 +1794,69 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		[
-			isAllSelected,
-			handleInternalChange,
-			activeChipIndex,
-			selectedChips,
-			selectedValues,
-			maxTagCount,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
 	);
 
+	// Simple onClear handler to prevent clearing ALL
+	const onClearHandler = useCallback((): void => {
+		// Skip clearing if ALL is selected
+		if (allOptionShown || isAllSelected) {
+			return;
+		}
+
+		// Normal clear behavior
+		handleInternalChange([], true);
+		if (onClear) onClear();
+	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
+
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-multiselect', className, {
-				'has-selection': selectedChips.length > 0 && !isAllSelected,
-				'is-all-selected': isAllSelected,
+		<div
+			className={cx('custom-multiselect-wrapper', {
+				'all-selected': allOptionShown || isAllSelected,
 			})}
-			placeholder={placeholder}
-			mode="multiple"
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={displayValue}
-			onChange={handleInternalChange}
-			onClear={(): void => handleInternalChange([])}
-			onDropdownVisibleChange={setIsOpen}
-			open={isOpen}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={dropdownMatchSelectWidth}
-			allowClear={allowClear}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			tagRender={tagRender as any}
-			placement={placement}
-			listHeight={300}
-			searchValue={searchText}
-			maxTagTextLength={maxTagTextLength}
-			maxTagCount={isAllSelected ? 1 : maxTagCount}
-			{...rest}
-		/>
+		>
+			{(allOptionShown || isAllSelected) && !searchText && (
+				<div className="all-text">ALL</div>
+			)}
+			<Select
+				ref={selectRef}
+				className={cx('custom-multiselect', className, {
+					'has-selection': selectedChips.length > 0 && !isAllSelected,
+					'is-all-selected': isAllSelected,
+				})}
+				placeholder={placeholder}
+				mode="multiple"
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={displayValue}
+				onChange={(newValue): void => {
+					handleInternalChange(newValue, false);
+				}}
+				onClear={onClearHandler}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={dropdownMatchSelectWidth}
+				allowClear={allowClear}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				tagRender={tagRender as any}
+				placement={placement}
+				listHeight={300}
+				searchValue={searchText}
+				maxTagTextLength={maxTagTextLength}
+				maxTagCount={isAllSelected ? undefined : maxTagCount}
+				{...rest}
+			/>
+		</div>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,6 +29,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -57,17 +58,29 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
+	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
+	// Flag to track if dropdown just opened
+	const justOpenedRef = useRef<boolean>(false);
+
+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -130,23 +143,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a deterministic but unique key
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a deterministic but unique key
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -246,9 +269,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
+			// Reset active option index when search changes
+			if (isOpen) {
+				setActiveOptionIndex(0);
+			}
+
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch],
+		[onSearch, isOpen],
 	);
 
 	/**
@@ -272,14 +300,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
+					let processedOptions = isEmpty(value)
+						? filteredOptions
+						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
+
+					if (!isEmpty(searchText)) {
+						processedOptions = filterOptionsBySearch(processedOptions, searchText);
+					}
+
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						isEmpty(value)
-							? filteredOptions
-							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
+						processedOptions,
 					);
 
 					// Add custom option if needed
-					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
+					if (
+						!isEmpty(searchText) &&
+						!isLabelPresent(processedOptions, searchText)
+					) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -300,33 +337,52 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
+				// If we just opened the dropdown and have options, set first option as active
+				if (justOpenedRef.current && options.length > 0) {
+					setActiveOptionIndex(0);
+					justOpenedRef.current = false;
+				}
+
+				// If no option is active but we have options, activate the first one
+				if (activeOptionIndex === -1 && options.length > 0) {
+					setActiveOptionIndex(0);
+				}
+
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev < options.length - 1 ? prev + 1 : 0,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
+						}
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev > 0 ? prev - 1 : options.length - 1,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
+						}
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev > 0 ? prev - 1 : options.length - 1,
+								);
+							}
 						} else {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev < options.length - 1 ? prev + 1 : 0,
+								);
+							}
 						}
 						break;
 
@@ -339,6 +395,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -351,6 +408,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -359,6 +417,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
+						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -369,6 +428,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -379,7 +439,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				setActiveOptionIndex(0);
+				justOpenedRef.current = true; // Set flag to initialize active option on next render
 			}
 		},
 		[
@@ -444,6 +504,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -454,7 +515,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
-
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -472,13 +532,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -504,9 +567,19 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -520,6 +593,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -527,8 +601,22 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);
 
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
+		setIsOpen(visible);
+		if (visible) {
+			justOpenedRef.current = true;
+			setActiveOptionIndex(0);
+		} else {
+			setSearchText('');
+			setActiveOptionIndex(-1);
+		}
+	}, []);
+
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -582,7 +670,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={setIsOpen}
+			onDropdownVisibleChange={handleDropdownVisibleChange}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,6 +35,43 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
+	&.is-all-selected {
+		.ant-select-selection-search-input {
+			caret-color: transparent;
+		}
+
+		.ant-select-selection-placeholder {
+			opacity: 1 !important;
+			color: var(--bg-vanilla-400) !important;
+			font-weight: 500;
+			visibility: visible !important;
+			pointer-events: none;
+			z-index: 2;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85) !important;
+			}
+		}
+
+		&.ant-select-focused .ant-select-selection-placeholder {
+			opacity: 0.45 !important;
+		}
+	}
+
+	.all-selected-text {
+		position: absolute;
+		left: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--bg-vanilla-400);
+		z-index: 1;
+		pointer-events: none;
+
+		.lightMode & {
+			color: rgba(0, 0, 0, 0.85);
+		}
+	}
+
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
@@ -158,7 +195,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 300px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -276,6 +313,10 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
+	.navigation-text-incomplete {
+		color: var(--bg-amber-600) !important;
+	}
+
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -322,7 +363,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -656,6 +697,10 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
+			font-size: 12px !important;
+			height: 20px;
+			line-height: 18px;
+
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -836,3 +881,38 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
+
+.custom-multiselect-wrapper {
+	position: relative;
+	width: 100%;
+
+	&.all-selected {
+		.all-text {
+			position: absolute;
+			left: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			color: var(--bg-vanilla-400);
+			font-weight: 500;
+			z-index: 2;
+			pointer-events: none;
+			transition: opacity 0.2s ease, visibility 0.2s ease;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85);
+			}
+		}
+
+		&:focus-within .all-text {
+			opacity: 0.45;
+		}
+
+		.ant-select-selection-search-input {
+			caret-color: auto;
+		}
+
+		.ant-select-selection-placeholder {
+			display: none;
+		}
+	}
+}

frontend/src/components/NewSelect/types.ts

@@ -24,9 +24,10 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -51,10 +52,12 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	maxTagTextLength?: number;
+	showIncompleteDataMessage?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -133,3 +133,15 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
+
+/**
+ * Utility function to handle dropdown scroll and detect when scrolled to bottom
+ * Returns true when scrolled to within 20px of the bottom
+ */
+export const handleScrollToBottom = (
+	e: React.UIEvent<HTMLDivElement>,
+): boolean => {
+	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
+	return scrollHeight - scrollTop - clientHeight < 20;
+};

frontend/src/constants/query.ts

@@ -49,4 +49,5 @@ export enum QueryParams {
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
+	variableConfigs = 'variableConfigs',
 }

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

@@ -13,7 +13,6 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -62,14 +61,12 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
-		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -120,11 +117,7 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition =
-		isVisible &&
-		!isEmptyWidget &&
-		isQueryEnabled &&
-		isEmpty(variablesToGetUpdated);
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -163,22 +156,24 @@ function GridCardGraph({
 		};
 	});
 
-	useEffect(() => {
-		if (variablesToGetUpdated.length > 0) {
-			queryClient.cancelQueries([
-				maxTime,
-				minTime,
-				globalSelectedInterval,
-				variables,
-				widget?.query,
-				widget?.panelTypes,
-				widget.timePreferance,
-				widget.fillSpans,
-				requestData,
-			]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated]);
+	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
+	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
+	// useEffect(() => {
+	// 	if (variablesToGetUpdated.length > 0) {
+	// 		queryClient.cancelQueries([
+	// 			maxTime,
+	// 			minTime,
+	// 			globalSelectedInterval,
+	// 			variables,
+	// 			widget?.query,
+	// 			widget?.panelTypes,
+	// 			widget.timePreferance,
+	// 			widget.fillSpans,
+	// 			requestData,
+	// 		]);
+	// 	}
+	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
+	// }, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -224,6 +219,15 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
+				variables
+					? Object.entries(variables).reduce(
+							(acc, [id, variable]) => ({
+								...acc,
+								[id]: variable.selectedValue,
+							}),
+							{},
+					  )
+					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -0,0 +1,42 @@
+.dynamic-variable-container {
+	display: grid;
+	grid-template-columns: 1fr 32px 200px;
+	gap: 32px;
+	align-items: center;
+	width: 100%;
+	margin: 24px 0;
+
+	.ant-select {
+		.ant-select-selector {
+			border-radius: 4px;
+			border: 1px solid var(--bg-slate-400);
+		}
+	}
+
+	.ant-input {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		max-width: 300px;
+	}
+
+	.dynamic-variable-from-text {
+		font-family: 'Space Mono';
+		font-size: 13px;
+		font-weight: 500;
+		white-space: nowrap;
+	}
+}
+
+.lightMode {
+	.dynamic-variable-container {
+		.ant-select {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300);
+			}
+		}
+
+		.ant-input {
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -0,0 +1,179 @@
+import './DynamicVariable.styles.scss';
+
+import { Select, Typography } from 'antd';
+import CustomSelect from 'components/NewSelect/CustomSelect';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+import useDebounce from 'hooks/useDebounce';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
+
+enum AttributeSource {
+	ALL_SOURCES = 'All Sources',
+	LOGS = 'Logs',
+	METRICS = 'Metrics',
+	TRACES = 'Traces',
+}
+
+function DynamicVariable({
+	setDynamicVariablesSelectedValue,
+	dynamicVariablesSelectedValue,
+}: {
+	setDynamicVariablesSelectedValue: Dispatch<
+		SetStateAction<
+			| {
+					name: string;
+					value: string;
+			  }
+			| undefined
+		>
+	>;
+	dynamicVariablesSelectedValue:
+		| {
+				name: string;
+				value: string;
+		  }
+		| undefined;
+}): JSX.Element {
+	const sources = [
+		AttributeSource.ALL_SOURCES,
+		AttributeSource.LOGS,
+		AttributeSource.TRACES,
+		AttributeSource.METRICS,
+	];
+
+	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
+	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
+	const [selectedAttribute, setSelectedAttribute] = useState<string>();
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	const [filteredAttributes, setFilteredAttributes] = useState<
+		Record<string, FieldKey[]>
+	>({});
+
+	useEffect(() => {
+		if (dynamicVariablesSelectedValue?.name) {
+			setSelectedAttribute(dynamicVariablesSelectedValue.name);
+		}
+
+		if (dynamicVariablesSelectedValue?.value) {
+			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
+		}
+	}, [
+		dynamicVariablesSelectedValue?.name,
+		dynamicVariablesSelectedValue?.value,
+	]);
+
+	const { data, error, isLoading, refetch } = useGetFieldKeys({
+		signal:
+			attributeSource === AttributeSource.ALL_SOURCES
+				? undefined
+				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
+		name: debouncedApiSearchText,
+	});
+
+	const isComplete = useMemo(() => data?.payload?.complete === true, [data]);
+
+	useEffect(() => {
+		if (data) {
+			const newAttributes = data.payload?.keys ?? {};
+			setAttributes(newAttributes);
+			setFilteredAttributes(newAttributes);
+		}
+	}, [data]);
+
+	// refetch when attributeSource changes
+	useEffect(() => {
+		if (attributeSource) {
+			refetch();
+		}
+	}, [attributeSource, refetch, debouncedApiSearchText]);
+
+	// Handle search based on whether we have complete data or not
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				// If complete is true, do client-side filtering
+				if (!text) {
+					setFilteredAttributes(attributes);
+					return;
+				}
+
+				const filtered: Record<string, FieldKey[]> = {};
+				Object.keys(attributes).forEach((key) => {
+					if (key.toLowerCase().includes(text.toLowerCase())) {
+						filtered[key] = attributes[key];
+					}
+				});
+				setFilteredAttributes(filtered);
+			} else {
+				// If complete is false, debounce the API call
+				setApiSearchText(text);
+			}
+		},
+		[attributes, isComplete],
+	);
+
+	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
+	useEffect(() => {
+		if (selectedAttribute || attributeSource) {
+			setDynamicVariablesSelectedValue({
+				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
+				value:
+					attributeSource ||
+					dynamicVariablesSelectedValue?.value ||
+					AttributeSource.ALL_SOURCES,
+			});
+		}
+	}, [
+		selectedAttribute,
+		attributeSource,
+		setDynamicVariablesSelectedValue,
+		dynamicVariablesSelectedValue?.name,
+		dynamicVariablesSelectedValue?.value,
+	]);
+
+	const errorMessage = (error as any)?.message;
+	return (
+		<div className="dynamic-variable-container">
+			<CustomSelect
+				placeholder="Select an Attribute"
+				options={Object.keys(filteredAttributes).map((key) => ({
+					label: key,
+					value: key,
+				}))}
+				loading={isLoading}
+				status={errorMessage ? 'error' : undefined}
+				onChange={(value): void => {
+					setSelectedAttribute(value);
+				}}
+				showSearch
+				errorMessage={errorMessage as any}
+				value={selectedAttribute || dynamicVariablesSelectedValue?.name}
+				onSearch={handleSearch}
+				onRetry={(): void => {
+					refetch();
+				}}
+			/>
+			<Typography className="dynamic-variable-from-text">from</Typography>
+			<Select
+				placeholder="Source"
+				defaultValue={AttributeSource.ALL_SOURCES}
+				options={sources.map((source) => ({ label: source, value: source }))}
+				onChange={(value): void => setAttributeSource(value as AttributeSource)}
+				value={attributeSource || dynamicVariablesSelectedValue?.value}
+			/>
+		</div>
+	);
+}
+
+export default DynamicVariable;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -0,0 +1,376 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
+
+import DynamicVariable from '../DynamicVariable';
+
+// Mock scrollIntoView since it's not available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Mock dependencies
+jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
+	useGetFieldKeys: jest.fn(),
+}));
+
+jest.mock('hooks/useDebounce', () => ({
+	__esModule: true,
+	default: (value: any): any => value, // Return the same value without debouncing for testing
+}));
+
+describe('DynamicVariable Component', () => {
+	const mockSetDynamicVariablesSelectedValue = jest.fn();
+	const ATTRIBUTE_PLACEHOLDER = 'Select an Attribute';
+	const LOADING_TEXT = 'We are updating the values...';
+	const DEFAULT_PROPS = {
+		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
+		dynamicVariablesSelectedValue: undefined,
+	};
+
+	const mockFieldKeysResponse = {
+		payload: {
+			keys: {
+				'service.name': [],
+				'http.status_code': [],
+				duration: [],
+			},
+			complete: true,
+		},
+		statusCode: 200,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Default mock implementation
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+	});
+
+	// Helper function to get the attribute select element
+	const getAttributeSelect = (): HTMLElement =>
+		screen.getAllByRole('combobox')[0];
+
+	// Helper function to get the source select element
+	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
+
+	it('renders with default state', () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Check for main components
+		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
+		expect(screen.getByText('All Sources')).toBeInTheDocument();
+		expect(screen.getByText('from')).toBeInTheDocument();
+	});
+
+	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
+		const selectedValue = {
+			name: 'service.name',
+			value: 'Logs',
+		};
+
+		render(
+			<DynamicVariable
+				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
+				dynamicVariablesSelectedValue={selectedValue}
+			/>,
+		);
+
+		// Verify values are set
+		expect(screen.getByText('service.name')).toBeInTheDocument();
+		expect(screen.getByText('Logs')).toBeInTheDocument();
+	});
+
+	it('shows loading state when fetching data', () => {
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: null,
+			isLoading: true,
+			refetch: jest.fn(),
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Should show loading state
+		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
+	});
+
+	it('shows error message when API fails', () => {
+		const errorMessage = 'Failed to fetch field keys';
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: { message: errorMessage },
+			isLoading: false,
+			refetch: jest.fn(),
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Should show error message
+		expect(screen.getByText(errorMessage)).toBeInTheDocument();
+	});
+
+	it('updates filteredAttributes when data is loaded', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the CustomSelect dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Wait for options to appear in the dropdown
+		await waitFor(() => {
+			// Looking for option-content elements inside the CustomSelect dropdown
+			const options = document.querySelectorAll('.option-content');
+			expect(options.length).toBeGreaterThan(0);
+
+			// Check if all expected options are present
+			let foundServiceName = false;
+			let foundHttpStatusCode = false;
+			let foundDuration = false;
+
+			options.forEach((option) => {
+				const text = option.textContent?.trim();
+				if (text === 'service.name') foundServiceName = true;
+				if (text === 'http.status_code') foundHttpStatusCode = true;
+				if (text === 'duration') foundDuration = true;
+			});
+
+			expect(foundServiceName).toBe(true);
+			expect(foundHttpStatusCode).toBe(true);
+			expect(foundDuration).toBe(true);
+		});
+	});
+
+	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Wait for options to appear, then click on service.name
+		await waitFor(() => {
+			// Need to find the option-item containing service.name
+			const serviceNameOption = screen.getByText('service.name');
+			expect(serviceNameOption).not.toBeNull();
+			expect(serviceNameOption?.textContent).toBe('service.name');
+
+			// Click on the option-item that contains service.name
+			const optionElement = serviceNameOption?.closest('.option-item');
+			if (optionElement) {
+				fireEvent.click(optionElement);
+			}
+		});
+
+		// Check if the setter was called with the correct value
+		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
+			name: 'service.name',
+			value: 'All Sources',
+		});
+	});
+
+	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Get the Select component
+		const select = screen
+			.getByText('All Sources')
+			.closest('div[class*="ant-select"]');
+		expect(select).toBeInTheDocument();
+
+		// Directly call the onChange handler by simulating the Select's onChange
+		// Find the props.onChange of the Select component and call it directly
+		fireEvent.mouseDown(select as HTMLElement);
+
+		// Use a more specific selector to find the "Logs" option
+		const optionsContainer = document.querySelector(
+			'.rc-virtual-list-holder-inner',
+		);
+		expect(optionsContainer).not.toBeNull();
+
+		// Find the option with Logs text content
+		const logsOption = Array.from(
+			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
+		)
+			.find((element) => element.textContent === 'Logs')
+			?.closest('.ant-select-item-option');
+
+		expect(logsOption).not.toBeNull();
+
+		// Click on it
+		if (logsOption) {
+			fireEvent.click(logsOption);
+		}
+
+		// Check if the setter was called with the correct value
+		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
+			expect.objectContaining({
+				value: 'Logs',
+			}),
+		);
+	});
+
+	it('filters attributes locally when complete is true', async () => {
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Mock the filter function behavior
+		const attributeKeys = Object.keys(mockFieldKeysResponse.payload.keys);
+
+		// Only "http.status_code" should match the filter
+		const expectedFilteredKeys = attributeKeys.filter((key) =>
+			key.includes('http'),
+		);
+
+		// Verify our expected filtering logic
+		expect(expectedFilteredKeys).toContain('http.status_code');
+		expect(expectedFilteredKeys).not.toContain('service.name');
+		expect(expectedFilteredKeys).not.toContain('duration');
+
+		// Now verify the component's filtering ability by inputting the search text
+		const inputElement = screen
+			.getAllByRole('combobox')[0]
+			.querySelector('input');
+		if (inputElement) {
+			fireEvent.change(inputElement, { target: { value: 'http' } });
+		}
+	});
+
+	it('triggers API call when complete is false and search text changes', async () => {
+		const mockRefetch = jest.fn();
+
+		// Set up the mock to indicate that data is not complete
+		// and needs to be fetched from the server
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: {
+				payload: {
+					keys: {
+						'http.status_code': [],
+					},
+					complete: false, // This indicates server-side filtering is needed
+				},
+			},
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		// Render with Logs as the initial source
+		render(
+			<DynamicVariable
+				{...DEFAULT_PROPS}
+				dynamicVariablesSelectedValue={{
+					name: '',
+					value: 'Logs',
+				}}
+			/>,
+		);
+
+		// Clear any initial calls
+		mockRefetch.mockClear();
+
+		// Now test the search functionality
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Find the input element and simulate typing
+		const inputElement = document.querySelector(
+			'.ant-select-selection-search-input',
+		);
+
+		if (inputElement) {
+			// Simulate typing in the search input
+			fireEvent.change(inputElement, { target: { value: 'http' } });
+
+			// Verify that the input has the correct value
+			expect((inputElement as HTMLInputElement).value).toBe('http');
+
+			// Wait for the effect to run and verify refetch was called
+			await waitFor(
+				() => {
+					expect(mockRefetch).toHaveBeenCalled();
+				},
+				{ timeout: 3000 },
+			); // Increase timeout to give more time for the effect to run
+		}
+	});
+
+	it('triggers refetch when attributeSource changes', async () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: mockFieldKeysResponse,
+			error: null,
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Clear any initial calls
+		mockRefetch.mockClear();
+
+		// Find and click on the source select to open dropdown
+		const sourceSelectElement = getSourceSelect();
+		fireEvent.mouseDown(sourceSelectElement);
+
+		// Find and click on the "Metrics" option
+		const metricsOption = screen.getByText('Metrics');
+		fireEvent.click(metricsOption);
+
+		// Wait for the effect to run
+		await waitFor(() => {
+			// Verify that refetch was called after source selection
+			expect(mockRefetch).toHaveBeenCalled();
+		});
+	});
+
+	it('shows retry button when error occurs', () => {
+		const mockRefetch = jest.fn();
+
+		(useGetFieldKeys as jest.Mock).mockReturnValue({
+			data: null,
+			error: { message: 'Failed to fetch field keys' },
+			isLoading: false,
+			refetch: mockRefetch,
+		});
+
+		render(<DynamicVariable {...DEFAULT_PROPS} />);
+
+		// Open the attribute dropdown
+		const attributeSelectElement = getAttributeSelect();
+		fireEvent.mouseDown(attributeSelectElement);
+
+		// Find and click reload icon (retry button)
+		const reloadIcon = screen.getByLabelText('reload');
+		fireEvent.click(reloadIcon);
+
+		// Should trigger refetch
+		expect(mockRefetch).toHaveBeenCalled();
+	});
+});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.styles.scss

@@ -100,7 +100,6 @@
 
 			.variable-type-btn-group {
 				display: flex;
-				width: 342px;
 				height: 32px;
 				flex-shrink: 0;
 				border-radius: 2px;
@@ -199,6 +198,21 @@
 			}
 		}
 
+		.default-value-section {
+			display: grid;
+			grid-template-columns: max-content 1fr;
+
+			.default-value-description {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+		}
+
 		.variable-textbox-section {
 			justify-content: space-between;
 			margin-bottom: 0;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -6,7 +6,9 @@ import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
+import { CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { map } from 'lodash-es';
@@ -16,16 +18,20 @@ import {
 	ClipboardType,
 	DatabaseZap,
 	LayoutList,
+	Pyramid,
 	X,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import {
 	IDashboardVariable,
 	TSortVariableValuesType,
 	TVariableQueryType,
 	VariableSortTypeArr,
 } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
 import {
@@ -34,6 +40,7 @@ import {
 } from '../../../DashboardVariablesSelection/util';
 import { variablePropsToPayloadVariables } from '../../../utils';
 import { TVariableMode } from '../types';
+import DynamicVariable from './DynamicVariable/DynamicVariable';
 import { LabelContainer, VariableItemRow } from './styles';
 
 const { Option } = Select;
@@ -61,7 +68,7 @@ function VariableItem({
 		variableData.description || '',
 	);
 	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'QUERY',
+		variableData.type || 'DYNAMIC',
 	);
 	const [variableQueryValue, setVariableQueryValue] = useState<string>(
 		variableData.queryValue || '',
@@ -85,11 +92,53 @@ function VariableItem({
 		variableData.showALLOption || false,
 	);
 	const [previewValues, setPreviewValues] = useState<string[]>([]);
+	const [variableDefaultValue, setVariableDefaultValue] = useState<string>(
+		(variableData.defaultValue as string) || '',
+	);
 
+	const [
+		dynamicVariablesSelectedValue,
+		setDynamicVariablesSelectedValue,
+	] = useState<{ name: string; value: string }>();
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesAttribute &&
+			variableData.dynamicVariablesSource
+		) {
+			setDynamicVariablesSelectedValue({
+				name: variableData.dynamicVariablesAttribute,
+				value: variableData.dynamicVariablesSource,
+			});
+		}
+	}, [
+		variableData.dynamicVariablesAttribute,
+		variableData.dynamicVariablesSource,
+	]);
 	// Error messages
 	const [errorName, setErrorName] = useState<boolean>(false);
 	const [errorPreview, setErrorPreview] = useState<string | null>(null);
 
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const { data: fieldValues } = useGetFieldValues({
+		signal:
+			dynamicVariablesSelectedValue?.value === 'All Sources'
+				? undefined
+				: (dynamicVariablesSelectedValue?.value?.toLowerCase() as
+						| 'traces'
+						| 'logs'
+						| 'metrics'),
+		name: dynamicVariablesSelectedValue?.name || '',
+		enabled:
+			!!dynamicVariablesSelectedValue?.name &&
+			!!dynamicVariablesSelectedValue?.value,
+		startUnixMilli: minTime,
+		endUnixMilli: maxTime,
+	});
+
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -110,6 +159,29 @@ function VariableItem({
 		variableSortType,
 	]);
 
+	useEffect(() => {
+		if (
+			queryType === 'DYNAMIC' &&
+			fieldValues &&
+			dynamicVariablesSelectedValue?.name &&
+			dynamicVariablesSelectedValue?.value
+		) {
+			setPreviewValues(
+				sortValues(
+					fieldValues.payload?.normalizedValues || [],
+					variableSortType,
+				) as never,
+			);
+		}
+	}, [
+		fieldValues,
+		variableSortType,
+		queryType,
+		dynamicVariablesSelectedValue?.name,
+		dynamicVariablesSelectedValue?.value,
+		dynamicVariablesSelectedValue,
+	]);
+
 	const handleSave = (): void => {
 		// Check for cyclic dependencies
 		const newVariable = {
@@ -126,9 +198,16 @@ function VariableItem({
 				selectedValue: (variableData.selectedValue ||
 					variableTextboxValue) as never,
 			}),
+			...(queryType !== 'TEXTBOX' && {
+				defaultValue: variableDefaultValue as never,
+			}),
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
+			...(queryType === 'DYNAMIC' && {
+				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
+				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
+			}),
 		};
 
 		const allVariables = [...Object.values(existingVariables), newVariable];
@@ -258,18 +337,18 @@ function VariableItem({
 						<div className="variable-type-btn-group">
 							<Button
 								type="text"
-								icon={<DatabaseZap size={14} />}
+								icon={<Pyramid size={14} />}
 								className={cx(
 									// eslint-disable-next-line sonarjs/no-duplicate-string
 									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
+									queryType === 'DYNAMIC' ? 'selected' : '',
 								)}
 								onClick={(): void => {
-									setQueryType('QUERY');
+									setQueryType('DYNAMIC');
 									setPreviewValues([]);
 								}}
 							>
-								Query
+								Dynamic
 							</Button>
 							<Button
 								type="text"
@@ -299,8 +378,31 @@ function VariableItem({
 							>
 								Custom
 							</Button>
+							<Button
+								type="text"
+								icon={<DatabaseZap size={14} />}
+								className={cx(
+									// eslint-disable-next-line sonarjs/no-duplicate-string
+									'variable-type-btn',
+									queryType === 'QUERY' ? 'selected' : '',
+								)}
+								onClick={(): void => {
+									setQueryType('QUERY');
+									setPreviewValues([]);
+								}}
+							>
+								Query
+							</Button>
 						</div>
 					</VariableItemRow>
+					{queryType === 'DYNAMIC' && (
+						<div className="variable-dynamic-section">
+							<DynamicVariable
+								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
+								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
+							/>
+						</div>
+					)}
 					{queryType === 'QUERY' && (
 						<div className="query-container">
 							<LabelContainer>
@@ -388,7 +490,9 @@ function VariableItem({
 							/>
 						</VariableItemRow>
 					)}
-					{(queryType === 'QUERY' || queryType === 'CUSTOM') && (
+					{(queryType === 'QUERY' ||
+						queryType === 'CUSTOM' ||
+						queryType === 'DYNAMIC') && (
 						<>
 							<VariableItemRow className="variables-preview-section">
 								<LabelContainer style={{ width: '100%' }}>
@@ -457,6 +561,25 @@ function VariableItem({
 									/>
 								</VariableItemRow>
 							)}
+							<VariableItemRow className="default-value-section">
+								<LabelContainer>
+									<Typography className="typography-variables">Default Value</Typography>
+									<Typography className="default-value-description">
+										{queryType === 'QUERY'
+											? 'Click Test Run Query to see the values or add custom value'
+											: 'Select a value from the preview values or add custom value'}
+									</Typography>
+								</LabelContainer>
+								<CustomSelect
+									placeholder="Select a default value"
+									value={variableDefaultValue}
+									onChange={(value): void => setVariableDefaultValue(value)}
+									options={previewValues.map((value) => ({
+										label: value,
+										value,
+									}))}
+								/>
+							</VariableItemRow>
 						</>
 					)}
 				</div>

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,14 +1,15 @@
-import './DashboardVariableSelection.styles.scss';
-
-import { Alert, Row } from 'antd';
+import { Row } from 'antd';
+import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import DynamicVariableSelection from './DynamicVariableSelection';
 import {
 	buildDependencies,
 	buildDependencyGraph,
@@ -27,6 +28,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 		setVariablesToGetUpdated,
 	} = useDashboard();
 
+	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
+
 	const { data } = selectedDashboard || {};
 
 	const { variables } = data || {};
@@ -60,8 +63,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 			tableRowData.sort((a, b) => a.order - b.order);
 
 			setVariablesTableData(tableRowData);
+
+			// Initialize variables with default values if not in URL
+			initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 		}
-	}, [variables]);
+	}, [getUrlVariables, updateUrlVariable, variables]);
 
 	useEffect(() => {
 		if (variablesTableData.length > 0) {
@@ -104,12 +110,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		// isMountedCall?: boolean,
+		haveCustomValuesSelected?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
 			updateLocalStorageDashboardVariables(name, value, allSelected);
 
+			updateUrlVariable(id, value, allSelected);
+
 			if (selectedDashboard) {
 				setSelectedDashboard((prev) => {
 					if (prev) {
@@ -121,6 +129,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[id],
 								selectedValue: value,
 								allSelected,
+								haveCustomValuesSelected,
 							};
 						}
 						if (oldVariables?.[name]) {
@@ -128,6 +137,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[name],
 								selectedValue: value,
 								allSelected,
+								haveCustomValuesSelected,
 							};
 						}
 						return {
@@ -170,22 +180,22 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	return (
-		<>
-			{dependencyData?.hasCycle && (
-				<Alert
-					message={`Circular dependency detected: ${dependencyData?.cycleNodes?.join(
-						' → ',
-					)}`}
-					type="error"
-					showIcon
-					className="cycle-error-alert"
-				/>
-			)}
-			<Row style={{ display: 'flex', gap: '12px' }}>
-				{orderBasedSortedVariables &&
-					Array.isArray(orderBasedSortedVariables) &&
-					orderBasedSortedVariables.length > 0 &&
-					orderBasedSortedVariables.map((variable) => (
+		<Row style={{ display: 'flex', gap: '12px' }}>
+			{orderBasedSortedVariables &&
+				Array.isArray(orderBasedSortedVariables) &&
+				orderBasedSortedVariables.length > 0 &&
+				orderBasedSortedVariables.map((variable) =>
+					variable.type === 'DYNAMIC' ? (
+						<DynamicVariableSelection
+							key={`${variable.name}${variable.id}}${variable.order}`}
+							existingVariables={variables}
+							variableData={{
+								name: variable.name,
+								...variable,
+							}}
+							onValueUpdate={onValueUpdate}
+						/>
+					) : (
 						<VariableItem
 							key={`${variable.name}${variable.id}}${variable.order}`}
 							existingVariables={variables}
@@ -198,9 +208,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 							setVariablesToGetUpdated={setVariablesToGetUpdated}
 							dependencyData={dependencyData}
 						/>
-					))}
-			</Row>
-		</>
+					),
+				)}
+		</Row>
 	);
 }
 

frontend/src/container/NewDashboard/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -0,0 +1,385 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable no-nested-ternary */
+import './DashboardVariableSelection.styles.scss';
+
+import { Tooltip, Typography } from 'antd';
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useDebounce from 'hooks/useDebounce';
+import { isEmpty, isUndefined } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { ALL_SELECT_VALUE } from '../utils';
+import { SelectItemStyle } from './styles';
+import { areArraysEqual } from './util';
+import { getSelectValue } from './VariableItem';
+
+interface DynamicVariableSelectionProps {
+	variableData: IDashboardVariable;
+	existingVariables: Record<string, IDashboardVariable>;
+	onValueUpdate: (
+		name: string,
+		id: string,
+		arg1: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
+	) => void;
+}
+
+function DynamicVariableSelection({
+	variableData,
+	onValueUpdate,
+	existingVariables,
+}: DynamicVariableSelectionProps): JSX.Element {
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+
+	const [isComplete, setIsComplete] = useState<boolean>(false);
+
+	const [filteredOptionsData, setFilteredOptionsData] = useState<
+		(string | number | boolean)[]
+	>([]);
+
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
+
+	// Create a dependency key from all dynamic variables
+	const dynamicVariablesKey = useMemo(() => {
+		if (!existingVariables) return 'no_variables';
+
+		const dynamicVars = Object.values(existingVariables)
+			.filter((v) => v.type === 'DYNAMIC')
+			.map(
+				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
+			)
+			.join('|');
+
+		return dynamicVars || 'no_dynamic_variables';
+	}, [existingVariables]);
+
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+		],
+		{
+			enabled: variableData.type === 'DYNAMIC',
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all sources'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+				),
+			onSuccess: (data) => {
+				setOptionsData(data.payload?.normalizedValues || []);
+				setIsComplete(data.payload?.complete || false);
+				setFilteredOptionsData(data.payload?.normalizedValues || []);
+			},
+			onError: (error: any) => {
+				if (error) {
+					let message = SOMETHING_WENT_WRONG;
+					if (error?.message) {
+						message = error?.message;
+					} else {
+						message =
+							'Please make sure configuration is valid and you have required setup and permissions';
+					}
+					setErrorMessage(message);
+				}
+			},
+		},
+	);
+
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+
+			if (
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
+			) {
+				return;
+			}
+
+			if (variableData.name) {
+				if (
+					value === ALL_SELECT_VALUE ||
+					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+				) {
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(
+						variableData.name,
+						variableData.id,
+						value,
+						optionsData.every((v) => value.includes(v.toString())),
+						Array.isArray(value) &&
+							!value.every((v) => optionsData.includes(v.toString())),
+					);
+				}
+			}
+		},
+		[variableData, onValueUpdate, optionsData],
+	);
+
+	useEffect(() => {
+		if (
+			variableData.dynamicVariablesSource &&
+			variableData.dynamicVariablesAttribute
+		) {
+			refetch();
+		}
+	}, [
+		refetch,
+		variableData.dynamicVariablesSource,
+		variableData.dynamicVariablesAttribute,
+		debouncedApiSearchText,
+	]);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					return;
+				}
+
+				const localFilteredOptionsData: (string | number | boolean)[] = [];
+				optionsData.forEach((option) => {
+					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
+						localFilteredOptionsData.push(option);
+					}
+				});
+				setFilteredOptionsData(localFilteredOptionsData);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData],
+	);
+
+	const { selectedValue } = variableData;
+	const selectedValueStringified = useMemo(
+		() => getSelectValue(selectedValue, variableData),
+		[selectedValue, variableData],
+	);
+
+	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
+
+	const selectValue =
+		variableData.allSelected && enableSelectAll
+			? ALL_SELECT_VALUE
+			: selectedValueStringified;
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = (inputValue: string | string[]): void => {
+		// Store the selection in temporary state while dropdown is open
+		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+		setTempSelection(value);
+	};
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
+				// set all options from the optionsData and the selectedValue, make sure to remove duplicates
+				const allOptions = [
+					...new Set([
+						...optionsData.map((option) => option.toString()),
+						...(variableData.selectedValue
+							? Array.isArray(variableData.selectedValue)
+								? variableData.selectedValue.map((v) => v.toString())
+								: [variableData.selectedValue.toString()]
+							: []),
+					]),
+				];
+				setTempSelection(allOptions);
+			} else {
+				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+			}
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
+		}
+	};
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		selectedValue,
+		tempSelection,
+		optionsData,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
+
+	return (
+		<div className="variable-item">
+			<Typography.Text className="variable-name" ellipsis>
+				${variableData.name}
+			</Typography.Text>
+			<div className="variable-value">
+				{variableData.multiSelect ? (
+					<CustomMultiSelect
+						key={
+							selectValue && Array.isArray(selectValue)
+								? selectValue.join(' ')
+								: selectValue || variableData.id
+						}
+						options={filteredOptionsData.map((option) => ({
+							label: option.toString(),
+							value: option.toString(),
+						}))}
+						defaultValue={variableData.defaultValue}
+						onChange={handleTempChange}
+						bordered={false}
+						placeholder="Select value"
+						placement="bottomLeft"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						maxTagCount={2}
+						getPopupContainer={popupContainer}
+						value={
+							(tempSelection || selectValue) === ALL_SELECT_VALUE
+								? 'ALL'
+								: tempSelection || selectValue
+						}
+						onDropdownVisibleChange={handleDropdownVisibleChange}
+						errorMessage={errorMessage}
+						// eslint-disable-next-line react/no-unstable-nested-components
+						maxTagPlaceholder={(omittedValues): JSX.Element => (
+							<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
+								<span>+ {omittedValues.length} </span>
+							</Tooltip>
+						)}
+						onClear={(): void => {
+							handleChange([]);
+						}}
+						enableAllSelection={enableSelectAll}
+						maxTagTextLength={30}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+					/>
+				) : (
+					<CustomSelect
+						key={
+							selectValue && Array.isArray(selectValue)
+								? selectValue.join(' ')
+								: selectValue || variableData.id
+						}
+						onChange={handleChange}
+						bordered={false}
+						placeholder="Select value"
+						style={SelectItemStyle}
+						loading={isLoading}
+						showSearch
+						data-testid="variable-select"
+						className="variable-select"
+						popupClassName="dropdown-styles"
+						getPopupContainer={popupContainer}
+						options={filteredOptionsData.map((option) => ({
+							label: option.toString(),
+							value: option.toString(),
+						}))}
+						value={selectValue}
+						defaultValue={variableData.defaultValue}
+						errorMessage={errorMessage}
+						onSearch={handleSearch}
+						onRetry={(): void => {
+							refetch();
+						}}
+						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DynamicVariableSelection;

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -167,7 +167,7 @@ describe('VariableItem', () => {
 			</MockQueryClientProvider>,
 		);
 
-		expect(screen.getByTitle('ALL')).toBeInTheDocument();
+		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
 
 	test('calls useEffect when the component mounts', () => {

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -8,23 +8,14 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import {
-	Checkbox,
-	Input,
-	Popover,
-	Select,
-	Tag,
-	Tooltip,
-	Typography,
-} from 'antd';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { Input, Popover, Tooltip, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
+import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { debounce, isArray, isString } from 'lodash-es';
-import map from 'lodash-es/map';
-import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isEmpty, isString } from 'lodash-es';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -33,17 +24,10 @@ import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { variablePropsToPayloadVariables } from '../utils';
+import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
 import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';
 
-const ALL_SELECT_VALUE = '__ALL__';
-
-enum ToggleTagValue {
-	Only = 'Only',
-	All = 'All',
-}
-
 interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
@@ -58,7 +42,7 @@ interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
-const getSelectValue = (
+export const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
 ): string | string[] | undefined => {
@@ -83,6 +67,9 @@ function VariableItem({
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
 	);
+	const [tempSelection, setTempSelection] = useState<
+		string | string[] | undefined
+	>(undefined);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -146,18 +133,10 @@ function VariableItem({
 							variableData.name &&
 							(validVariableUpdate() || valueNotInList || variableData.allSelected)
 						) {
-							let value = variableData.selectedValue;
+							const value = variableData.selectedValue;
 							let allSelected = false;
-							// The default value for multi-select is ALL and first value for
-							// single select
-							if (valueNotInList) {
-								if (variableData.multiSelect) {
-									value = newOptionsData;
-									allSelected = true;
-								} else {
-									[value] = newOptionsData;
-								}
-							} else if (variableData.multiSelect) {
+
+							if (variableData.multiSelect) {
 								const { selectedValue } = variableData;
 								allSelected =
 									newOptionsData.length > 0 &&
@@ -242,26 +221,57 @@ function VariableItem({
 		},
 	);
 
-	const handleChange = (inputValue: string | string[]): void => {
-		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+	const handleChange = useCallback(
+		(inputValue: string | string[]): void => {
+			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
 
-		if (
-			value === variableData.selectedValue ||
-			(Array.isArray(value) &&
-				Array.isArray(variableData.selectedValue) &&
-				areArraysEqual(value, variableData.selectedValue))
-		) {
-			return;
-		}
-		if (variableData.name) {
 			if (
-				value === ALL_SELECT_VALUE ||
-				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+				value === variableData.selectedValue ||
+				(Array.isArray(value) &&
+					Array.isArray(variableData.selectedValue) &&
+					areArraysEqual(value, variableData.selectedValue))
 			) {
-				onValueUpdate(variableData.name, variableData.id, optionsData, true);
-			} else {
-				onValueUpdate(variableData.name, variableData.id, value, false);
+				return;
 			}
+			if (variableData.name) {
+				if (
+					value === ALL_SELECT_VALUE ||
+					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+				) {
+					onValueUpdate(variableData.name, variableData.id, optionsData, true);
+				} else {
+					onValueUpdate(variableData.name, variableData.id, value, false);
+				}
+			}
+		},
+		[
+			variableData.multiSelect,
+			variableData.selectedValue,
+			variableData.name,
+			variableData.id,
+			onValueUpdate,
+			optionsData,
+		],
+	);
+
+	// Add a handler for tracking temporary selection changes
+	const handleTempChange = (inputValue: string | string[]): void => {
+		// Store the selection in temporary state while dropdown is open
+		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
+		setTempSelection(value);
+	};
+
+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = (visible: boolean): void => {
+		// Initialize temp selection when opening dropdown
+		if (visible) {
+			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		}
+		// Apply changes when closing dropdown
+		else if (!visible && tempSelection !== undefined) {
+			// Call handleChange with the temporarily stored selection
+			handleChange(tempSelection);
+			setTempSelection(undefined);
 		}
 	};
 
@@ -281,10 +291,58 @@ function VariableItem({
 			? 'ALL'
 			: selectedValueStringified;
 
-	const mode: 'multiple' | undefined =
-		variableData.multiSelect && !variableData.allSelected
-			? 'multiple'
-			: undefined;
+	// Apply default value on first render if no selection exists
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const finalSelectedValues = useMemo(() => {
+		if (variableData.multiSelect) {
+			let value = tempSelection || selectedValue;
+			if (isEmpty(value)) {
+				if (variableData.showALLOption) {
+					if (variableData.defaultValue) {
+						value = variableData.defaultValue;
+					} else {
+						value = optionsData;
+					}
+				} else if (variableData.defaultValue) {
+					value = variableData.defaultValue;
+				} else {
+					value = optionsData?.[0];
+				}
+			}
+
+			return value;
+		}
+		if (isEmpty(selectedValue)) {
+			if (variableData.defaultValue) {
+				return variableData.defaultValue;
+			}
+			return optionsData[0]?.toString();
+		}
+
+		return selectedValue;
+	}, [
+		variableData.multiSelect,
+		variableData.showALLOption,
+		variableData.defaultValue,
+		selectedValue,
+		tempSelection,
+		optionsData,
+	]);
+
+	useEffect(() => {
+		if (
+			(variableData.multiSelect && !(tempSelection || selectValue)) ||
+			isEmpty(selectValue)
+		) {
+			handleChange(finalSelectedValues as string[] | string);
+		}
+	}, [
+		finalSelectedValues,
+		handleChange,
+		selectValue,
+		tempSelection,
+		variableData.multiSelect,
+	]);
 
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
@@ -294,113 +352,6 @@ function VariableItem({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [variableData.type, variableData.customValue]);
 
-	const checkAll = (e: MouseEvent): void => {
-		e.stopPropagation();
-		e.preventDefault();
-		const isChecked =
-			variableData.allSelected || selectValue?.includes(ALL_SELECT_VALUE);
-
-		if (isChecked) {
-			handleChange([]);
-		} else {
-			handleChange(ALL_SELECT_VALUE);
-		}
-	};
-
-	const handleOptionSelect = (
-		e: CheckboxChangeEvent,
-		option: string | number | boolean,
-	): void => {
-		const newSelectedValue = Array.isArray(selectedValue)
-			? ((selectedValue.filter(
-					(val) => val.toString() !== option.toString(),
-			  ) as unknown) as string[])
-			: [];
-
-		if (
-			!e.target.checked &&
-			Array.isArray(selectedValueStringified) &&
-			selectedValueStringified.includes(option.toString())
-		) {
-			if (newSelectedValue.length === 1) {
-				handleChange(newSelectedValue[0].toString());
-				return;
-			}
-			handleChange(newSelectedValue);
-		} else if (!e.target.checked && selectedValue === option.toString()) {
-			handleChange(ALL_SELECT_VALUE);
-		} else if (newSelectedValue.length === optionsData.length - 1) {
-			handleChange(ALL_SELECT_VALUE);
-		}
-	};
-
-	const [optionState, setOptionState] = useState({
-		tag: '',
-		visible: false,
-	});
-
-	function currentToggleTagValue({
-		option,
-	}: {
-		option: string;
-	}): ToggleTagValue {
-		if (
-			option.toString() === selectValue ||
-			(Array.isArray(selectValue) &&
-				selectValue?.includes(option.toString()) &&
-				selectValue.length === 1)
-		) {
-			return ToggleTagValue.All;
-		}
-		return ToggleTagValue.Only;
-	}
-
-	function handleToggle(e: ChangeEvent, option: string): void {
-		e.stopPropagation();
-		const mode = currentToggleTagValue({ option: option as string });
-		const isChecked =
-			variableData.allSelected ||
-			option.toString() === selectValue ||
-			(Array.isArray(selectValue) && selectValue?.includes(option.toString()));
-
-		if (isChecked) {
-			if (mode === ToggleTagValue.Only && variableData.multiSelect) {
-				handleChange([option.toString()]);
-			} else if (!variableData.multiSelect) {
-				handleChange(option.toString());
-			} else {
-				handleChange(ALL_SELECT_VALUE);
-			}
-		} else {
-			handleChange(option.toString());
-		}
-	}
-
-	function retProps(
-		option: string,
-	): {
-		onMouseOver: () => void;
-		onMouseOut: () => void;
-	} {
-		return {
-			onMouseOver: (): void =>
-				setOptionState({
-					tag: option.toString(),
-					visible: true,
-				}),
-			onMouseOut: (): void =>
-				setOptionState({
-					tag: option.toString(),
-					visible: false,
-				}),
-		};
-	}
-
-	const ensureValidOption = (option: string): boolean =>
-		!(
-			currentToggleTagValue({ option }) === ToggleTagValue.All && !enableSelectAll
-		);
-
 	return (
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
@@ -428,105 +379,73 @@ function VariableItem({
 						}}
 					/>
 				) : (
-					!errorMessage &&
-					optionsData && (
-						<Select
+					optionsData &&
+					(variableData.multiSelect ? (
+						<CustomMultiSelect
 							key={
 								selectValue && Array.isArray(selectValue)
 									? selectValue.join(' ')
 									: selectValue || variableData.id
 							}
-							defaultValue={selectValue}
-							onChange={handleChange}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleTempChange}
 							bordered={false}
 							placeholder="Select value"
 							placement="bottomLeft"
-							mode={mode}
 							style={SelectItemStyle}
 							loading={isLoading}
 							showSearch
 							data-testid="variable-select"
 							className="variable-select"
 							popupClassName="dropdown-styles"
-							maxTagCount={4}
+							maxTagCount={2}
 							getPopupContainer={popupContainer}
-							// eslint-disable-next-line react/no-unstable-nested-components
-							tagRender={(props): JSX.Element => (
-								<Tag closable onClose={props.onClose}>
-									{props.value}
-								</Tag>
-							)}
+							value={tempSelection || selectValue}
+							onDropdownVisibleChange={handleDropdownVisibleChange}
+							errorMessage={errorMessage}
 							// eslint-disable-next-line react/no-unstable-nested-components
 							maxTagPlaceholder={(omittedValues): JSX.Element => (
 								<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
 									<span>+ {omittedValues.length} </span>
 								</Tooltip>
 							)}
+							onClear={(): void => {
+								handleChange([]);
+							}}
+							enableAllSelection={enableSelectAll}
+							maxTagTextLength={30}
 							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
-						>
-							{enableSelectAll && (
-								<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
-									<div className="all-label" onClick={(e): void => checkAll(e as any)}>
-										<Checkbox checked={variableData.allSelected} />
-										ALL
-									</div>
-								</Select.Option>
-							)}
-							{map(optionsData, (option) => (
-								<Select.Option
-									data-testid={`option-${option}`}
-									key={option.toString()}
-									value={option}
-								>
-									<div
-										className={variableData.multiSelect ? 'dropdown-checkbox-label' : ''}
-									>
-										{variableData.multiSelect && (
-											<Checkbox
-												onChange={(e): void => {
-													e.stopPropagation();
-													e.preventDefault();
-													handleOptionSelect(e, option);
-												}}
-												checked={
-													variableData.allSelected ||
-													option.toString() === selectValue ||
-													(Array.isArray(selectValue) &&
-														selectValue?.includes(option.toString()))
-												}
-											/>
-										)}
-										<div
-											className="dropdown-value"
-											{...retProps(option as string)}
-											onClick={(e): void => handleToggle(e as any, option as string)}
-										>
-											<Typography.Text
-												ellipsis={{
-													tooltip: {
-														placement: variableData.multiSelect ? 'top' : 'right',
-														autoAdjustOverflow: true,
-													},
-												}}
-												className="option-text"
-											>
-												{option.toString()}
-											</Typography.Text>
-
-											{variableData.multiSelect &&
-												optionState.tag === option.toString() &&
-												optionState.visible &&
-												ensureValidOption(option as string) && (
-													<Typography.Text className="toggle-tag-label">
-														{currentToggleTagValue({ option: option as string })}
-													</Typography.Text>
-												)}
-										</div>
-									</div>
-								</Select.Option>
-							))}
-						</Select>
-					)
+						/>
+					) : (
+						<CustomSelect
+							key={
+								selectValue && Array.isArray(selectValue)
+									? selectValue.join(' ')
+									: selectValue || variableData.id
+							}
+							defaultValue={variableData.defaultValue || selectValue}
+							onChange={handleChange}
+							bordered={false}
+							placeholder="Select value"
+							style={SelectItemStyle}
+							loading={isLoading}
+							showSearch
+							data-testid="variable-select"
+							className="variable-select"
+							popupClassName="dropdown-styles"
+							getPopupContainer={popupContainer}
+							options={optionsData.map((option) => ({
+								label: option.toString(),
+								value: option.toString(),
+							}))}
+							value={selectValue}
+							errorMessage={errorMessage}
+						/>
+					))
 				)}
 				{variableData.type !== 'TEXTBOX' && errorMessage && (
 					<span style={{ margin: '0 0.5rem' }}>

frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/DynamicVariableSelection.test.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as ReactQuery from 'react-query';
+import * as ReactRedux from 'react-redux';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import DynamicVariableSelection from '../DynamicVariableSelection';
+
+// Don't mock the components - use real ones
+
+// Mock for useQuery
+const mockQueryResult = {
+	data: undefined,
+	error: null,
+	isError: false,
+	isIdle: false,
+	isLoading: false,
+	isPreviousData: false,
+	isSuccess: true,
+	status: 'success',
+	isFetched: true,
+	isFetchingNextPage: false,
+	isFetchingPreviousPage: false,
+	isPlaceholderData: false,
+	isPaused: false,
+	isRefetchError: false,
+	isRefetching: false,
+	isStale: false,
+	isLoadingError: false,
+	isFetching: false,
+	isFetchedAfterMount: true,
+	dataUpdatedAt: 0,
+	errorUpdatedAt: 0,
+	failureCount: 0,
+	refetch: jest.fn(),
+	remove: jest.fn(),
+	fetchNextPage: jest.fn(),
+	fetchPreviousPage: jest.fn(),
+	hasNextPage: false,
+	hasPreviousPage: false,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any;
+
+// Sample data for testing
+const mockApiResponse = {
+	payload: {
+		normalizedValues: ['frontend', 'backend', 'database'],
+		complete: true,
+	},
+	statusCode: 200,
+};
+
+// Mock scrollIntoView since it's not available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+describe('DynamicVariableSelection Component', () => {
+	const mockOnValueUpdate = jest.fn();
+
+	const mockDynamicVariableData: IDashboardVariable = {
+		id: 'var1',
+		name: 'service',
+		type: 'DYNAMIC',
+		dynamicVariablesAttribute: 'service.name',
+		dynamicVariablesSource: 'Traces',
+		selectedValue: 'frontend',
+		multiSelect: false,
+		showALLOption: false,
+		allSelected: false,
+		description: '',
+		sort: 'DISABLED',
+	};
+
+	const mockMultiSelectDynamicVariableData: IDashboardVariable = {
+		...mockDynamicVariableData,
+		id: 'var2',
+		name: 'services',
+		multiSelect: true,
+		selectedValue: ['frontend', 'backend'],
+		showALLOption: true,
+	};
+
+	const mockExistingVariables: Record<string, IDashboardVariable> = {
+		var1: mockDynamicVariableData,
+		var2: mockMultiSelectDynamicVariableData,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockOnValueUpdate.mockClear();
+
+		// Mock useSelector
+		const useSelectorSpy = jest.spyOn(ReactRedux, 'useSelector');
+		useSelectorSpy.mockReturnValue({
+			minTime: '2023-01-01T00:00:00Z',
+			maxTime: '2023-01-02T00:00:00Z',
+		});
+
+		// Mock useQuery with success state
+		const useQuerySpy = jest.spyOn(ReactQuery, 'useQuery');
+		useQuerySpy.mockReturnValue({
+			...mockQueryResult,
+			data: mockApiResponse,
+			isLoading: false,
+			error: null,
+		});
+	});
+
+	it('renders with single select variable correctly', () => {
+		render(
+			<DynamicVariableSelection
+				variableData={mockDynamicVariableData}
+				existingVariables={mockExistingVariables}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify component renders correctly
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
+		// Verify the selected value is displayed
+		const selectedItem = screen.getByRole('combobox');
+		expect(selectedItem).toBeInTheDocument();
+
+		// CustomSelect doesn't use the 'mode' attribute for single select
+		expect(selectedItem).not.toHaveAttribute('mode');
+	});
+
+	it('renders with multi select variable correctly', () => {
+		// First set up allSelected to true to properly test the ALL display
+		const multiSelectWithAllSelected = {
+			...mockMultiSelectDynamicVariableData,
+			allSelected: true,
+		};
+
+		render(
+			<DynamicVariableSelection
+				variableData={multiSelectWithAllSelected}
+				existingVariables={mockExistingVariables}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify variable name is rendered
+		expect(
+			screen.getByText(`$${multiSelectWithAllSelected.name}`),
+		).toBeInTheDocument();
+
+		// In ALL selected mode, there should be an "ALL" text element
+		expect(screen.getByText('ALL')).toBeInTheDocument();
+	});
+
+	it('shows loading state correctly', () => {
+		// Mock loading state
+		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
+			...mockQueryResult,
+			data: null,
+			isLoading: true,
+			isFetching: true,
+			isSuccess: false,
+			status: 'loading',
+		});
+
+		render(
+			<DynamicVariableSelection
+				variableData={mockDynamicVariableData}
+				existingVariables={mockExistingVariables}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify component renders in loading state
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
+		// Open dropdown to see loading text
+		const selectElement = screen.getByRole('combobox');
+		fireEvent.mouseDown(selectElement);
+
+		// The loading text should appear in the dropdown
+		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
+	});
+
+	it('handles error state correctly', () => {
+		const errorMessage = 'Failed to fetch data';
+
+		// Mock error state
+		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
+			...mockQueryResult,
+			data: null,
+			isLoading: false,
+			isSuccess: false,
+			isError: true,
+			status: 'error',
+			error: { message: errorMessage },
+		});
+
+		render(
+			<DynamicVariableSelection
+				variableData={mockDynamicVariableData}
+				existingVariables={mockExistingVariables}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify the component renders
+		expect(
+			screen.getByText(`$${mockDynamicVariableData.name}`),
+		).toBeInTheDocument();
+
+		// For error states, we should check that error handling is in place
+		// Without opening the dropdown as the error message might be handled differently
+		expect(ReactQuery.useQuery).toHaveBeenCalled();
+		// We don't need to check refetch as it might be called during component initialization
+	});
+
+	it('makes API call to fetch variable values', () => {
+		render(
+			<DynamicVariableSelection
+				variableData={mockDynamicVariableData}
+				existingVariables={mockExistingVariables}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify the useQuery hook was called with expected parameters
+		expect(ReactQuery.useQuery).toHaveBeenCalledWith(
+			[
+				'DASHBOARD_BY_ID',
+				mockDynamicVariableData.name,
+				'service:"frontend"|services:["frontend","backend"]', // The actual dynamicVariablesKey
+				'2023-01-01T00:00:00Z', // minTime from useSelector mock
+				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
+			],
+			expect.objectContaining({
+				enabled: true, // Type is 'DYNAMIC'
+				queryFn: expect.any(Function),
+				onSuccess: expect.any(Function),
+				onError: expect.any(Function),
+			}),
+		);
+	});
+
+	it('has the correct selected value', () => {
+		// Use a different variable configuration to test different behavior
+		const customVariable = {
+			...mockDynamicVariableData,
+			id: 'custom1',
+			name: 'customService',
+			selectedValue: 'backend',
+		};
+
+		render(
+			<DynamicVariableSelection
+				variableData={customVariable}
+				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
+				onValueUpdate={mockOnValueUpdate}
+			/>,
+		);
+
+		// Verify the component correctly displays the selected value
+		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
+
+		// Find the selection item in the component using data-testid
+		const selectElement = screen.getByTestId('variable-select');
+		expect(selectElement).toBeInTheDocument();
+
+		// Check that the selected value is displayed in the select element
+		expect(selectElement).toHaveTextContent('backend');
+	});
+});

frontend/src/container/NewDashboard/utils.ts

@@ -14,3 +14,5 @@ export function variablePropsToPayloadVariables(
 
 	return payloadVariables;
 }
+
+export const ALL_SELECT_VALUE = '__ALL__';

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -12,6 +12,7 @@ import {
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
@@ -246,6 +247,8 @@ function QueryBuilderSearchV2(
 		return false;
 	}, [currentState, query.aggregateAttribute?.dataType, query.dataSource]);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+
 	const { data, isFetching } = useGetAggregateKeys(
 		{
 			searchText: searchValue?.split(' ')[0],
@@ -800,6 +803,19 @@ function QueryBuilderSearchV2(
 				const dataType = currentFilterItem?.key?.dataType || DataTypes.String;
 				const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
 				values.push(...(attributeValues?.payload?.[key] || []));
+
+				// here we want to suggest the variable name matching with the key here, we will go over the dynamic variables for the keys
+				const variableName = dynamicVariables.find(
+					(variable) =>
+						variable?.dynamicVariablesAttribute === currentFilterItem?.key?.key,
+				)?.name;
+
+				if (variableName) {
+					const variableValue = `$${variableName}`;
+					if (!values.includes(variableValue)) {
+						values.unshift(variableValue);
+					}
+				}
 			}
 
 			setDropdownOptions(
@@ -819,6 +835,8 @@ function QueryBuilderSearchV2(
 		searchValue,
 		suggestionsData?.payload?.attributes,
 		operatorConfigKey,
+		currentFilterItem?.key?.key,
+		dynamicVariables,
 	]);
 
 	// keep the query in sync with the selected tags in logs explorer page

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/QueryBuilderSearchV2.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 import {
 	act,
@@ -90,6 +91,11 @@ const renderWithContext = (props = {}): RenderResult => {
 	);
 };
 
+// Constants to fix linter errors
+const TYPE_TAG = 'tag';
+const IS_COLUMN_FALSE = false;
+const IS_JSON_FALSE = false;
+
 const mockAggregateKeysData = {
 	payload: {
 		attributeKeys: [
@@ -97,11 +103,19 @@ const mockAggregateKeysData = {
 				// eslint-disable-next-line sonarjs/no-duplicate-string
 				key: 'http.status',
 				dataType: DataTypes.String,
-				type: 'tag',
-				isColumn: false,
-				isJSON: false,
+				type: TYPE_TAG,
+				isColumn: IS_COLUMN_FALSE,
+				isJSON: IS_JSON_FALSE,
 				id: 'http.status--string--tag--false',
 			},
+			{
+				key: 'service.name',
+				dataType: DataTypes.String,
+				type: TYPE_TAG,
+				isColumn: IS_COLUMN_FALSE,
+				isJSON: IS_JSON_FALSE,
+				id: 'service.name--string--tag--false',
+			},
 		],
 	},
 };
@@ -127,6 +141,34 @@ jest.mock('hooks/queryBuilder/useGetAggregateValues', () => ({
 	})),
 }));
 
+// Mock the dynamic variables hook to test variable suggestion feature
+const mockDynamicVariables = [
+	{
+		id: 'var1',
+		name: 'service',
+		type: 'DYNAMIC',
+		dynamicVariablesAttribute: 'service.name',
+		dynamicVariablesSource: 'Traces',
+		selectedValue: 'frontend',
+		multiSelect: false,
+		showALLOption: false,
+		allSelected: false,
+		description: '',
+		sort: 'DISABLED',
+		dashboardName: 'Test Dashboard',
+		dashboardId: 'dashboard-123',
+	},
+];
+
+jest.mock('hooks/dashboard/useGetDynamicVariables', () => ({
+	useGetDynamicVariables: jest.fn(() => ({
+		dynamicVariables: mockDynamicVariables,
+		isLoading: false,
+		isError: false,
+		refetch: jest.fn(),
+	})),
+}));
+
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
@@ -195,3 +237,66 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 		);
 	});
 });
+
+describe('Dynamic Variable Suggestions', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should suggest dynamic variable when key matches a variable attribute', async () => {
+		const { container } = renderWithContext();
+
+		// Get the combobox input
+		const combobox = container.querySelector(
+			'.query-builder-search-v2 .ant-select-selection-search-input',
+		) as HTMLInputElement;
+
+		// Focus and type to trigger key suggestions for service.name
+		await act(async () => {
+			fireEvent.focus(combobox);
+			fireEvent.change(combobox, { target: { value: 'service.' } });
+		});
+
+		// Wait for dropdown to appear
+		await screen.findByRole('listbox');
+
+		// Select service.name key from suggestions
+		const serviceNameOption = await screen.findByText('service.name');
+		await act(async () => {
+			fireEvent.click(serviceNameOption);
+		});
+
+		// Select equals operator
+		await act(async () => {
+			const equalsOption = screen.getByText('=');
+			fireEvent.click(equalsOption);
+		});
+
+		// Should show value suggestions including the dynamic variable
+		// For 'service.name', we expect to see '$service' as the first suggestion
+		const variableSuggestion = await screen.findByText('$service');
+		expect(variableSuggestion).toBeInTheDocument();
+
+		// Regular values should still be shown
+		expect(screen.getByText('200')).toBeInTheDocument();
+		expect(screen.getByText('404')).toBeInTheDocument();
+
+		// Select the variable suggestion
+		await act(async () => {
+			fireEvent.click(variableSuggestion);
+		});
+
+		// Verify the query was updated with the variable as value
+		expect(mockOnChange).toHaveBeenCalledWith(
+			expect.objectContaining({
+				items: expect.arrayContaining([
+					expect.objectContaining({
+						key: expect.objectContaining({ key: 'service.name' }),
+						op: '=',
+						value: '$service',
+					}),
+				]),
+			}),
+		);
+	});
+});

frontend/src/hooks/dashboard/__test__/useGetDynamicVariables.test.tsx

@@ -0,0 +1,224 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+
+import { useGetDynamicVariables } from '../useGetDynamicVariables';
+
+// Mock the dependencies
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQuery: jest.fn(),
+}));
+
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: jest.fn(),
+}));
+
+// Sample dashboard data with variables
+const mockDashboardData = {
+	data: {
+		title: 'Test Dashboard',
+		variables: {
+			var1: {
+				id: 'var1',
+				name: 'service',
+				type: 'DYNAMIC',
+				dynamicVariablesAttribute: 'service.name',
+				dynamicVariablesSource: 'Traces',
+				selectedValue: 'frontend',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+			var2: {
+				id: 'var2',
+				name: 'status',
+				type: 'DYNAMIC',
+				dynamicVariablesAttribute: 'http.status_code',
+				dynamicVariablesSource: 'Traces',
+				selectedValue: '200',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+			var3: {
+				id: 'var3',
+				name: 'interval',
+				type: 'CUSTOM', // Not DYNAMIC - should be filtered out
+				customValue: '5m',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+		},
+	},
+	uuid: 'dashboard-123',
+	loading: false,
+	error: null,
+};
+
+// Mock refetch function
+const mockRefetch = jest.fn();
+
+// Constants
+const DASHBOARD_ID = 'dashboard-123';
+
+// Create a wrapper for the renderHook function with the QueryClientProvider
+const createWrapper = (): React.FC<{ children: ReactNode }> => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+	// Define as function declaration to fix linter error
+	function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		);
+	}
+
+	return Wrapper;
+};
+
+describe('useGetDynamicVariables', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Mock the useDashboard hook
+		(useDashboard as jest.Mock).mockReturnValue({
+			dashboardId: DASHBOARD_ID,
+		});
+
+		// Mock the useQuery hook for successful response
+		(useQuery as jest.Mock).mockReturnValue({
+			data: mockDashboardData,
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+	});
+
+	it('should return dynamic variables from the dashboard', async () => {
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		await waitFor(() => {
+			expect(result.current.dynamicVariables).toHaveLength(2); // Only DYNAMIC type variables
+			expect(result.current.dynamicVariables[0].name).toBe('service');
+			expect(result.current.dynamicVariables[1].name).toBe('status');
+			expect(result.current.isLoading).toBe(false);
+			expect(result.current.isError).toBe(false);
+		});
+
+		// Verify each dynamic variable has dashboard info
+		expect(result.current.dynamicVariables[0].dashboardName).toBe(
+			'Test Dashboard',
+		);
+		expect(result.current.dynamicVariables[0].dashboardId).toBe(DASHBOARD_ID);
+	});
+
+	it('should use dashboardId from props if provided', async () => {
+		const customDashboardId = 'custom-dashboard-id';
+		renderHook(() => useGetDynamicVariables({ dashboardId: customDashboardId }), {
+			wrapper: createWrapper(),
+		});
+
+		// Check that useQuery was called with the custom dashboardId
+		expect(useQuery).toHaveBeenCalledWith(
+			expect.objectContaining({
+				queryKey: expect.arrayContaining(['DASHBOARD_BY_ID', customDashboardId]),
+			}),
+		);
+	});
+
+	it('should return empty array when dashboard has no variables', async () => {
+		// Mock no variables in dashboard
+		(useQuery as jest.Mock).mockReturnValue({
+			data: {
+				data: { title: 'Empty Dashboard' },
+				uuid: 'dashboard-empty',
+				loading: false,
+				error: null,
+			},
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should return empty array when dashboard is null', async () => {
+		// Mock null dashboard data
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should handle loading state', async () => {
+		// Mock loading state
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: true,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should handle error state', async () => {
+		// Mock error state
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: true,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isError).toBe(true);
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should call refetch when returned function is called', async () => {
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		result.current.refetch();
+		expect(mockRefetch).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/hooks/dashboard/__test__/useVariablesFromUrl.test.tsx

@@ -0,0 +1,169 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryParams } from 'constants/query';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import useVariablesFromUrl from '../useVariablesFromUrl';
+
+describe('useVariablesFromUrl', () => {
+	it('should initialize with empty variables when no URL params exist', () => {
+		const history = createMemoryHistory({
+			initialEntries: ['/'],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		expect(result.current.getUrlVariables()).toEqual({});
+	});
+
+	it('should correctly parse variables from URL', () => {
+		const mockVariables = {
+			var1: { selectedValue: 'value1', allSelected: false },
+			var2: { selectedValue: ['value2', 'value3'], allSelected: true },
+		};
+
+		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
+		const history = createMemoryHistory({
+			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		expect(result.current.getUrlVariables()).toEqual(mockVariables);
+	});
+
+	it('should handle malformed URL parameters gracefully', () => {
+		const history = createMemoryHistory({
+			initialEntries: [`/?${QueryParams.variableConfigs}=invalid-json`],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		// Should return empty object when JSON parsing fails
+		expect(result.current.getUrlVariables()).toEqual({});
+	});
+
+	it('should set variables to URL correctly', () => {
+		const history = createMemoryHistory({
+			initialEntries: ['/'],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		const mockVariables = {
+			var1: { selectedValue: 'value1', allSelected: false },
+		};
+
+		act(() => {
+			result.current.setUrlVariables(mockVariables);
+		});
+
+		// Check if the URL was updated correctly
+		const searchParams = new URLSearchParams(history.location.search);
+		const urlVariables = searchParams.get(QueryParams.variableConfigs);
+
+		expect(urlVariables).toBeTruthy();
+		expect(JSON.parse(decodeURIComponent(urlVariables || ''))).toEqual(
+			mockVariables,
+		);
+	});
+
+	it('should remove variables param from URL when empty object is provided', () => {
+		const mockVariables = {
+			var1: { selectedValue: 'value1', allSelected: false },
+		};
+
+		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
+		const history = createMemoryHistory({
+			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		act(() => {
+			result.current.setUrlVariables({});
+		});
+
+		// Check if the URL param was removed
+		const searchParams = new URLSearchParams(history.location.search);
+		expect(searchParams.has(QueryParams.variableConfigs)).toBe(false);
+	});
+
+	it('should update a specific variable correctly', () => {
+		const initialVariables = {
+			var1: { selectedValue: 'value1', allSelected: false },
+			var2: { selectedValue: ['value2'], allSelected: true },
+		};
+
+		const encodedVariables = encodeURIComponent(JSON.stringify(initialVariables));
+		const history = createMemoryHistory({
+			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		const newValue: IDashboardVariable['selectedValue'] = 'updated-value';
+
+		act(() => {
+			result.current.updateUrlVariable('var1', newValue, true);
+		});
+
+		// Check if only the specified variable was updated
+		const updatedVariables = result.current.getUrlVariables();
+		expect(updatedVariables.var1).toEqual({
+			selectedValue: newValue,
+			allSelected: true,
+		});
+		expect(updatedVariables.var2).toEqual(initialVariables.var2);
+	});
+
+	it('should preserve other URL parameters when updating variables', () => {
+		const history = createMemoryHistory({
+			initialEntries: ['/?otherParam=value'],
+		});
+
+		const { result } = renderHook(() => useVariablesFromUrl(), {
+			wrapper: ({ children }: { children: React.ReactNode }) => (
+				<Router history={history}>{children}</Router>
+			),
+		});
+
+		const mockVariables = {
+			var1: { selectedValue: 'value1', allSelected: false },
+		};
+
+		act(() => {
+			result.current.setUrlVariables(mockVariables);
+		});
+
+		// Check if other params are preserved
+		const searchParams = new URLSearchParams(history.location.search);
+		expect(searchParams.get('otherParam')).toBe('value');
+		expect(searchParams.has(QueryParams.variableConfigs)).toBe(true);
+	});
+});

frontend/src/hooks/dashboard/useGetDynamicVariables.tsx

@@ -0,0 +1,55 @@
+import getDashboard from 'api/v1/dashboards/id/get';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export interface DynamicVariable extends IDashboardVariable {
+	dashboardName: string;
+	dashboardId: string;
+}
+
+interface UseGetDynamicVariablesProps {
+	dashboardId?: string;
+}
+
+export const useGetDynamicVariables = (
+	props?: UseGetDynamicVariablesProps,
+): {
+	dynamicVariables: DynamicVariable[];
+	isLoading: boolean;
+	isError: boolean;
+	refetch: () => void;
+} => {
+	const { dashboardId: dashboardIdFromProps } = props || {};
+
+	const { dashboardId: dashboardIdFromDashboard } = useDashboard();
+
+	const dashboardId = dashboardIdFromProps || dashboardIdFromDashboard;
+
+	const { data: dashboard, isLoading, isError, refetch } = useQuery({
+		queryFn: () => getDashboard({ id: dashboardId }),
+		queryKey: [REACT_QUERY_KEY.DASHBOARD_BY_ID, dashboardId],
+	});
+
+	const dynamicVariables = useMemo(() => {
+		if (!dashboard?.data?.data?.variables) return [];
+
+		const variables: DynamicVariable[] = [];
+
+		Object.entries(dashboard.data?.data?.variables).forEach(([, variable]) => {
+			if (variable.type === 'DYNAMIC') {
+				variables.push({
+					...variable,
+					dashboardName: dashboard.data?.data?.title,
+					dashboardId: dashboard?.data?.id,
+				});
+			}
+		});
+
+		return variables;
+	}, [dashboard]);
+
+	return { dynamicVariables, isLoading, isError, refetch };
+};

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -82,12 +82,11 @@ function useGetResolvedText({
 
 	const combinedPattern = useMemo(() => {
 		const escapedMatcher = matcher.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const varNamePattern = '[a-zA-Z_\\-][a-zA-Z0-9_.\\-]*';
 		const variablePatterns = [
-			`\\{\\{\\s*?\\.(${varNamePattern})\\s*?\\}\\}`, // {{.var}}
-			`\\{\\{\\s*(${varNamePattern})\\s*\\}\\}`, // {{var}}
-			`${escapedMatcher}(${varNamePattern})`, // matcher + var.name
-			`\\[\\[\\s*(${varNamePattern})\\s*\\]\\]`, // [[var]]
+			`\\{\\{\\s*?\\.([^\\s}]+)\\s*?\\}\\}`, // {{.var}}
+			`\\{\\{\\s*([^\\s}]+)\\s*\\}\\}`, // {{var}}
+			`${escapedMatcher}([^\\s]+)`, // matcher + var.name
+			`\\[\\[\\s*([^\\s\\]]+)\\s*\\]\\]`, // [[var]]
 		];
 		return new RegExp(variablePatterns.join('|'), 'g');
 	}, [matcher]);

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -0,0 +1,102 @@
+import { QueryParams } from 'constants/query';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback } from 'react';
+import { useHistory } from 'react-router-dom';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+interface LocalStoreDashboardVariables {
+	[id: string]: {
+		selectedValue: IDashboardVariable['selectedValue'];
+		allSelected: boolean;
+	};
+}
+
+interface UseVariablesFromUrlReturn {
+	getUrlVariables: () => LocalStoreDashboardVariables;
+	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
+	updateUrlVariable: (
+		id: string,
+		selectedValue: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+	) => void;
+	clearUrlVariables: () => void;
+}
+
+const useVariablesFromUrl = (): UseVariablesFromUrlReturn => {
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+
+	const getUrlVariables = useCallback((): LocalStoreDashboardVariables => {
+		const variableConfigsParam = urlQuery.get(QueryParams.variableConfigs);
+
+		if (!variableConfigsParam) {
+			return {};
+		}
+
+		try {
+			return JSON.parse(decodeURIComponent(variableConfigsParam));
+		} catch (error) {
+			console.error('Failed to parse variables from URL:', error);
+			return {};
+		}
+	}, [urlQuery]);
+
+	const setUrlVariables = useCallback(
+		(variables: LocalStoreDashboardVariables): void => {
+			const params = new URLSearchParams(urlQuery.toString());
+
+			if (Object.keys(variables).length === 0) {
+				params.delete(QueryParams.variableConfigs);
+			} else {
+				try {
+					const encodedVariables = encodeURIComponent(JSON.stringify(variables));
+					params.set(QueryParams.variableConfigs, encodedVariables);
+				} catch (error) {
+					console.error('Failed to serialize variables for URL:', error);
+				}
+			}
+
+			history.replace({
+				search: params.toString(),
+			});
+		},
+		[history, urlQuery],
+	);
+
+	const clearUrlVariables = useCallback((): void => {
+		const params = new URLSearchParams(urlQuery.toString());
+		params.delete(QueryParams.variableConfigs);
+		params.delete('options');
+
+		history.replace({
+			search: params.toString(),
+		});
+	}, [history, urlQuery]);
+
+	const updateUrlVariable = useCallback(
+		(
+			id: string,
+			selectedValue: IDashboardVariable['selectedValue'],
+			allSelected: boolean,
+		): void => {
+			const currentVariables = getUrlVariables();
+
+			const updatedVariables = {
+				...currentVariables,
+				[id]: { selectedValue, allSelected },
+			};
+
+			setUrlVariables(updatedVariables);
+		},
+		[getUrlVariables, setUrlVariables],
+	);
+
+	return {
+		getUrlVariables,
+		setUrlVariables,
+		updateUrlVariable,
+		clearUrlVariables,
+	};
+};
+
+export default useVariablesFromUrl;

frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts

@@ -0,0 +1,35 @@
+import { getFieldKeys } from 'api/dynamicVariables/getFieldKeys';
+import { useQuery, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
+
+interface UseGetFieldKeysProps {
+	/** Type of signal (traces, logs, metrics) */
+	signal?: 'traces' | 'logs' | 'metrics';
+	/** Optional search text */
+	name?: string;
+	/** Whether the query should be enabled */
+	enabled?: boolean;
+}
+
+/**
+ * Hook to fetch field keys for a given signal type
+ *
+ * If 'complete' in the response is true:
+ * - All subsequent searches should be local (client has complete list)
+ *
+ * If 'complete' is false:
+ * - All subsequent searches should use the API (passing the name param)
+ */
+export const useGetFieldKeys = ({
+	signal,
+	name,
+	enabled = true,
+}: UseGetFieldKeysProps): UseQueryResult<
+	SuccessResponse<FieldKeyResponse> | ErrorResponse
+> =>
+	useQuery<SuccessResponse<FieldKeyResponse> | ErrorResponse>({
+		queryKey: ['fieldKeys', signal, name],
+		queryFn: () => getFieldKeys(signal, name),
+		enabled,
+	});

frontend/src/hooks/dynamicVariables/useGetFieldValues.ts

@@ -0,0 +1,45 @@
+import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { useQuery, UseQueryResult } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
+
+interface UseGetFieldValuesProps {
+	/** Type of signal (traces, logs, metrics) */
+	signal?: 'traces' | 'logs' | 'metrics';
+	/** Name of the attribute for which values are being fetched */
+	name: string;
+	/** Optional search text */
+	value?: string;
+	/** Whether the query should be enabled */
+	enabled?: boolean;
+	/** Start Unix Milli */
+	startUnixMilli?: number;
+	/** End Unix Milli */
+	endUnixMilli?: number;
+}
+
+/**
+ * Hook to fetch field values for a given signal type and field name
+ *
+ * If 'complete' in the response is true:
+ * - All subsequent searches should be local (client has complete list)
+ *
+ * If 'complete' is false:
+ * - All subsequent searches should use the API (passing the value param)
+ */
+export const useGetFieldValues = ({
+	signal,
+	name,
+	value,
+	startUnixMilli,
+	endUnixMilli,
+	enabled = true,
+}: UseGetFieldValuesProps): UseQueryResult<
+	SuccessResponse<FieldValueResponse> | ErrorResponse
+> =>
+	useQuery<SuccessResponse<FieldValueResponse> | ErrorResponse>({
+		queryKey: ['fieldValues', signal, name, value, startUnixMilli, endUnixMilli],
+		queryFn: () =>
+			getFieldValues(signal, name, value, startUnixMilli, endUnixMilli),
+		enabled,
+	});

frontend/src/hooks/queryBuilder/useOptions.ts

@@ -3,6 +3,7 @@ import {
 	getTagToken,
 } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { Option } from 'container/QueryBuilder/type';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
 import { isEmpty } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -25,10 +26,19 @@ export const useOptions = (
 	result: string[],
 	isFetching: boolean,
 	whereClauseConfig?: WhereClauseConfig,
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): Option[] => {
 	const [options, setOptions] = useState<Option[]>([]);
 	const operators = useOperators(key, keys);
 
+	// get matching dynamic variables to suggest
+	const { dynamicVariables } = useGetDynamicVariables();
+	const variableName = dynamicVariables.find(
+		(variable) => variable?.dynamicVariablesAttribute === key,
+	)?.name;
+
+	const variableAsValue = variableName ? `$${variableName}` : '';
+
 	const getLabel = useCallback(
 		(data: BaseAutocompleteData): Option['label'] =>
 			transformStringWithPrefix({
@@ -63,7 +73,13 @@ export const useOptions = (
 	const getOptionsWithValidOperator = useCallback(
 		(key: string, results: string[], searchValue: string) => {
 			const hasAllResults = results.every((value) => result.includes(value));
-			const values = getKeyOpValue(results);
+
+			let newResults = results;
+			if (!isEmpty(variableAsValue)) {
+				newResults = [variableAsValue, ...newResults];
+			}
+
+			const values = getKeyOpValue(newResults);
 
 			return hasAllResults
 				? [
@@ -80,7 +96,7 @@ export const useOptions = (
 						...values,
 				  ];
 		},
-		[getKeyOpValue, result],
+		[getKeyOpValue, result, variableAsValue],
 	);
 
 	const getKeyOperatorOptions = useCallback(
@@ -128,7 +144,10 @@ export const useOptions = (
 			newOptions = getKeyOperatorOptions(key);
 		} else if (key && operator) {
 			if (isMulti) {
-				newOptions = results.map((item) => ({
+				const resultsWithVariable = isEmpty(variableAsValue)
+					? results
+					: [variableAsValue, ...results];
+				newOptions = resultsWithVariable.map((item) => ({
 					label: checkCommaInValue(String(item)),
 					value: String(item),
 				}));
@@ -161,6 +180,7 @@ export const useOptions = (
 		getKeyOperatorOptions,
 		getOptionsWithValidOperator,
 		isFetching,
+		variableAsValue,
 	]);
 
 	return useMemo(

frontend/src/lib/dashbaordVariables/getDashboardVariables.ts

@@ -23,7 +23,14 @@ export const getDashboardVariables = (
 
 		Object.entries(variables).forEach(([, value]) => {
 			if (value?.name) {
-				variablesTuple[value.name] = value?.selectedValue;
+				variablesTuple[value.name] =
+					value?.type === 'DYNAMIC' &&
+					value?.allSelected &&
+					value?.showALLOption &&
+					value?.multiSelect &&
+					!value?.haveCustomValuesSelected
+						? '__all__'
+						: value?.selectedValue;
 			}
 		});
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ import ROUTES from 'constants/routes';
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
 import dayjs, { Dayjs } from 'dayjs';
 import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useTabVisibility from 'hooks/useTabFocus';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -16,6 +17,7 @@ import isEqual from 'lodash-es/isEqual';
 import isUndefined from 'lodash-es/isUndefined';
 import omitBy from 'lodash-es/omitBy';
 import { useAppContext } from 'providers/App/App';
+import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import {
 	createContext,
@@ -198,6 +200,12 @@ export function DashboardProvider({
 		updateLocalStorageDashboardVariables,
 	} = useDashboardVariablesFromLocalStorage(dashboardId);
 
+	const {
+		getUrlVariables,
+		updateUrlVariable,
+		clearUrlVariables,
+	} = useVariablesFromUrl();
+
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
 
@@ -208,6 +216,14 @@ export function DashboardProvider({
 
 	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
 
+	// Clear variable configs when not on dashboard pages
+	useEffect(() => {
+		const isOnDashboardPage = !!isDashboardPage || !!isDashboardWidgetPage;
+		if (!isOnDashboardPage) {
+			clearUrlVariables();
+		}
+	}, [isDashboardPage, isDashboardWidgetPage, clearUrlVariables]);
+
 	const mergeDBWithLocalStorage = (
 		data: Dashboard,
 		localStorageVariables: any,
@@ -217,11 +233,23 @@ export function DashboardProvider({
 			const updatedVariables = data.data.variables;
 			Object.keys(data.data.variables).forEach((variable) => {
 				const variableData = data.data.variables[variable];
-				const updatedVariable = {
+
+				// values from url
+				const urlVariable = getUrlVariables()[variableData.id];
+
+				let updatedVariable = {
 					...data.data.variables[variable],
 					...localStorageVariables[variableData.name as any],
 				};
 
+				// respect the url variable if it is set, override the others
+				if (urlVariable) {
+					updatedVariable = {
+						...updatedVariable,
+						...urlVariable,
+					};
+				}
+
 				updatedVariables[variable] = updatedVariable;
 			});
 			updatedData.data.variables = updatedVariables;
@@ -280,7 +308,7 @@ export function DashboardProvider({
 					});
 				} catch (error) {
 					showErrorModal(error as APIError);
-					return;
+					throw error;
 				} finally {
 					setIsDashboardFetching(false);
 				}
@@ -289,9 +317,17 @@ export function DashboardProvider({
 			onError: (error) => {
 				showErrorModal(error as APIError);
 			},
-			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
-				const updatedDashboardData = transformDashboardVariables(data?.data);
-				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
+			// eslint-disable-next-line sonarjs/cognitive-complexity
+			onSuccess: (data) => {
+				// if the url variable is not set for any variable, set it to the default value
+				const variables = data?.data.data?.variables;
+				if (variables) {
+					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
+				}
+
+				if (!data?.data) return;
+				const updatedDashboardData = transformDashboardVariables(data.data);
+				const updatedDate = dayjs(updatedDashboardData.updatedAt);
 
 				setIsDashboardLocked(updatedDashboardData?.locked || false);
 

frontend/src/providers/Dashboard/initializeDefaultVariables.ts

@@ -0,0 +1,46 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import { commaValuesParser } from '../../lib/dashbaordVariables/customCommaValuesParser';
+
+interface UrlVariables {
+	[key: string]: any;
+}
+
+/**
+ * Initializes default values for dashboard variables if not already in URL
+ * Handles cases where variables might be keyed by either id or name
+ *
+ * @param variables Dashboard variables object
+ * @param getUrlVariables Function to get variables from URL
+ * @param updateUrlVariable Function to update URL with variable values
+ */
+export const initializeDefaultVariables = (
+	variables: Record<string, IDashboardVariable>,
+	getUrlVariables: () => UrlVariables | undefined,
+	updateUrlVariable: (
+		id: string,
+		selectedValue: IDashboardVariable['selectedValue'],
+		allSelected: boolean,
+	) => void,
+): void => {
+	if (!variables) return;
+
+	Object.values(variables).forEach((variable) => {
+		const { id, name } = variable;
+		const urlVariables = getUrlVariables();
+
+		// Check if either id or name is available in URL variables
+		const existsInUrl =
+			(id && urlVariables?.[id]) || (name && urlVariables?.[name]);
+
+		if (!existsInUrl) {
+			updateUrlVariable(
+				id,
+				variable.type === 'CUSTOM'
+					? commaValuesParser(variable?.customValue || '')
+					: variable?.selectedValue || variable?.defaultValue,
+				variable.allSelected || false,
+			);
+		}
+	});
+};

frontend/src/types/api/dashboard/getAll.ts

@@ -9,7 +9,12 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { IField } from '../logs/fields';
 import { TelemetryFieldKey } from '../v5/queryRange';
 
-export const VariableQueryTypeArr = ['QUERY', 'TEXTBOX', 'CUSTOM'] as const;
+export const VariableQueryTypeArr = [
+	'QUERY',
+	'TEXTBOX',
+	'CUSTOM',
+	'DYNAMIC',
+] as const;
 export type TVariableQueryType = typeof VariableQueryTypeArr[number];
 
 export const VariableSortTypeArr = ['DISABLED', 'ASC', 'DESC'] as const;
@@ -46,6 +51,10 @@ export interface IDashboardVariable {
 	modificationUUID?: string;
 	allSelected?: boolean;
 	change?: boolean;
+	defaultValue?: string;
+	dynamicVariablesAttribute?: string;
+	dynamicVariablesSource?: string;
+	haveCustomValuesSelected?: boolean;
 }
 export interface Dashboard {
 	id: string;

frontend/src/types/api/dynamicVariables/getFieldKeys.ts

@@ -0,0 +1,23 @@
+/**
+ * Response from the field keys API
+ */
+export interface FieldKeyResponse {
+	/** List of field keys returned */
+	keys?: Record<string, FieldKey[]>;
+	/** Indicates if the returned list is complete */
+	complete?: boolean;
+}
+
+/**
+ * Field key data structure
+ */
+export interface FieldKey {
+	/** Key name */
+	name?: string;
+	/** Data type of the field */
+	fieldDataType?: string;
+	/** Signal type */
+	signal?: string;
+	/** Field context */
+	fieldContext?: string;
+}

frontend/src/types/api/dynamicVariables/getFieldValues.ts

@@ -0,0 +1,11 @@
+/**
+ * Response from the field values API
+ */
+export interface FieldValueResponse {
+	/** List of field values returned by type */
+	values: Record<string, (string | boolean | number)[]>;
+	/** Normalized values combined from all types */
+	normalizedValues?: string[];
+	/** Indicates if the returned list is complete */
+	complete: boolean;
+}