Merge branch 'chore/issue-3780-use-variable-state-updates-3' into chore/issue-3780-use-variable-state-updates-4

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -11,6 +11,7 @@ import {
 
 const dashboardVariablesQuery = async (
 	props: Props,
+	signal?: AbortSignal,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
 		const { globalTime } = store.getState();
@@ -32,7 +33,7 @@ const dashboardVariablesQuery = async (
 
 		payload.variables = { ...payload.variables, ...timeVariables };
 
-		const response = await axios.post(`/variables/query`, payload);
+		const response = await axios.post(`/variables/query`, payload, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -19,6 +19,7 @@ export const getFieldValues = async (
 	startUnixMilli?: number,
 	endUnixMilli?: number,
 	existingQuery?: string,
+	abortSignal?: AbortSignal,
 ): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};
 
@@ -47,7 +48,10 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await axios.get('/fields/values', { params });
+		const response = await axios.get('/fields/values', {
+			params,
+			signal: abortSignal,
+		});
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -73,6 +73,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	enableRegexOption = false,
 	isDynamicVariable = false,
 	showRetryButton = true,
+	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -1681,6 +1682,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
+						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -1698,7 +1700,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
-					{errorMessage && !loading && (
+					{!loading && waitingMessage && (
+						<div className="navigation-loading">
+							<div className="navigation-icons">
+								<LoadingOutlined />
+							</div>
+							<div className="navigation-text" title={waitingMessage}>
+								{waitingMessage}
+							</div>
+						</div>
+					)}
+					{errorMessage && !loading && !waitingMessage && (
 						<div className="navigation-error">
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
@@ -1720,6 +1732,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
+						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -1762,6 +1775,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		isDarkMode,
 		isDynamicVariable,
 		showRetryButton,
+		waitingMessage,
 	]);
 
 	// Custom handler for dropdown visibility changes

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -63,6 +63,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	showIncompleteDataMessage = false,
 	showRetryButton = true,
 	isDynamicVariable = false,
+	waitingMessage,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -568,6 +569,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading &&
 						!errorMessage &&
 						!noDataMessage &&
+						!waitingMessage &&
 						!(showIncompleteDataMessage && isScrolledToBottom) && (
 							<section className="navigate">
 								<ArrowDown size={8} className="icons" />
@@ -583,6 +585,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
+					{!loading && waitingMessage && (
+						<div className="navigation-loading">
+							<div className="navigation-icons">
+								<LoadingOutlined />
+							</div>
+							<div className="navigation-text" title={waitingMessage}>
+								{waitingMessage}
+							</div>
+						</div>
+					)}
 					{errorMessage && !loading && (
 						<div className="navigation-error">
 							<div className="navigation-text">
@@ -605,6 +617,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{showIncompleteDataMessage &&
 						isScrolledToBottom &&
 						!loading &&
+						!waitingMessage &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
 								Don&apos;t see the value? Use search
@@ -641,6 +654,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		showRetryButton,
 		isDarkMode,
 		isDynamicVariable,
+		waitingMessage,
 	]);
 
 	// Handle dropdown visibility changes

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -78,12 +78,10 @@ function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
 describe('VariableItem Integration Tests', () => {
 	let user: ReturnType<typeof userEvent.setup>;
 	let mockOnValueUpdate: jest.Mock;
-	let mockSetVariablesToGetUpdated: jest.Mock;
 
 	beforeEach(() => {
 		user = userEvent.setup();
 		mockOnValueUpdate = jest.fn();
-		mockSetVariablesToGetUpdated = jest.fn();
 		jest.clearAllMocks();
 	});
 
@@ -102,9 +100,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -150,9 +145,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -195,9 +187,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -247,9 +236,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -272,9 +258,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -308,9 +291,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -344,9 +324,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -369,9 +346,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -405,9 +379,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -461,9 +432,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -508,9 +476,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -548,9 +513,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);
@@ -582,9 +544,6 @@ describe('VariableItem Integration Tests', () => {
 						variableData={variable}
 						existingVariables={{}}
 						onValueUpdate={mockOnValueUpdate}
-						variablesToGetUpdated={[]}
-						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-						dependencyData={null}
 					/>
 				</TestWrapper>,
 			);

frontend/src/components/NewSelect/types.ts

@@ -30,6 +30,7 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	showIncompleteDataMessage?: boolean;
 	showRetryButton?: boolean;
 	isDynamicVariable?: boolean;
+	waitingMessage?: string;
 }
 
 export interface CustomTagProps {
@@ -66,4 +67,5 @@ export interface CustomMultiSelectProps
 	enableRegexOption?: boolean;
 	isDynamicVariable?: boolean;
 	showRetryButton?: boolean;
+	waitingMessage?: string;
 }

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

@@ -9,11 +9,15 @@ import {
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import {
+	enqueueDescendantsOfVariable,
+	enqueueFetchOfAllVariables,
+	initializeVariableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';
 
 import './DashboardVariableSelection.styles.scss';
@@ -22,8 +26,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const {
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
-		variablesToGetUpdated,
-		setVariablesToGetUpdated,
 	} = useDashboard();
 
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
@@ -55,11 +57,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 		[dependencyData?.order],
 	);
 
-	// Trigger refetch when dependency order changes or global time changes
+	// Initialize fetch store then start a new fetch cycle.
+	// Runs on dependency order changes, and time range changes.
 	useEffect(() => {
-		if (dependencyData?.order && dependencyData.order.length > 0) {
-			setVariablesToGetUpdated(dependencyData?.order || []);
-		}
+		const allVariableNames = sortedVariablesArray
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		initializeVariableFetchStore(allVariableNames);
+		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dependencyOrderKey, minTime, maxTime]);
 
@@ -121,29 +126,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 				return prev;
 			});
 
-			if (dependencyData) {
-				const updatedVariables: string[] = [];
-				onUpdateVariableNode(
-					name,
-					dependencyData.graph,
-					dependencyData.order,
-					(node) => updatedVariables.push(node),
-				);
-				setVariablesToGetUpdated((prev) => [
-					...new Set([...prev, ...updatedVariables.filter((v) => v !== name)]),
-				]);
-			} else {
-				setVariablesToGetUpdated((prev) => prev.filter((v) => v !== name));
-			}
+			// Cascade: enqueue query-type descendants for refetching
+			enqueueDescendantsOfVariable(name);
 		},
 		[
-			// This can be removed
 			dashboardVariables,
 			updateLocalStorageDashboardVariables,
-			dependencyData,
 			updateUrlVariable,
 			setSelectedDashboard,
-			setVariablesToGetUpdated,
 		],
 	);
 
@@ -158,9 +148,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 						existingVariables={dashboardVariables}
 						variableData={variable}
 						onValueUpdate={onValueUpdate}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
 					/>
 				);
 			})}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx

@@ -2,18 +2,25 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
-import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
+import { SuccessResponseV2 } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { getOptionsForDynamicVariable } from './util';
+import {
+	buildExistingDynamicVariableQuery,
+	extractErrorMessage,
+	getOptionsForDynamicVariable,
+	mergeUniqueStrings,
+	settleVariableFetch,
+} from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -24,7 +31,6 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -55,14 +61,8 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
-	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => [
-			...new Set([
-				...optionsData.map((v) => v.toString()),
-				...relatedValues.map((v) => v.toString()),
-			]),
-		],
+		() => mergeUniqueStrings(optionsData, relatedValues),
 		[optionsData, relatedValues],
 	);
 
@@ -104,67 +104,24 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	// existing query is the query made from the other dynamic variables around this one with there current values
-	// for e.g. k8s.namespace.name IN ["zeus", "gene"] AND doc_op_type IN ["test"]
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
+	const {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
 
-		const queryParts: string[] = [];
-
-		Object.entries(existingVariables).forEach(([, variable]) => {
-			// Skip the current variable being processed
-			if (variable.id === variableData.id) {
-				return;
-			}
-
-			// Only include dynamic variables that have selected values and are not selected as ALL
-			if (
-				variable.type === 'DYNAMIC' &&
-				variable.dynamicVariablesAttribute &&
-				variable.selectedValue &&
-				!isEmpty(variable.selectedValue) &&
-				(variable.showALLOption ? !variable.allSelected : true)
-			) {
-				const attribute = variable.dynamicVariablesAttribute;
-				const values = Array.isArray(variable.selectedValue)
-					? variable.selectedValue
-					: [variable.selectedValue];
-
-				// Filter out empty values and convert to strings
-				const validValues = values
-					.filter((val) => val !== null && val !== undefined && val !== '')
-					.map((val) => val.toString());
-
-				if (validValues.length > 0) {
-					// Format values for query - wrap strings in quotes, keep numbers as is
-					const formattedValues = validValues.map((val) => {
-						// Check if value is a number
-						const numValue = Number(val);
-						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-							return val; // Keep as number
-						}
-						// Escape single quotes and wrap in quotes
-						return `'${val.replace(/'/g, "\\'")}'`;
-					});
-
-					if (formattedValues.length === 1) {
-						queryParts.push(`${attribute} = ${formattedValues[0]}`);
-					} else {
-						queryParts.push(`${attribute} IN [${formattedValues.join(', ')}]`);
-					}
-				}
-			}
-		});
-
-		return queryParts.join(' AND ');
-	}, [
-		existingVariables,
-		variableData.id,
-		variableData.dynamicVariablesAttribute,
-	]);
+	const existingQuery = useMemo(
+		() =>
+			buildExistingDynamicVariableQuery(
+				existingVariables,
+				variableData.id,
+				!!variableData.dynamicVariablesAttribute,
+			),
+		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
+	);
 
 	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
 	const handleSelectDropdownVisibilityChange = useCallback(
@@ -182,6 +139,73 @@ function DynamicVariableInput({
 		[onDropdownVisibleChange, optionsData, originalRelatedValues],
 	);
 
+	const handleQuerySuccess = useCallback(
+		(data: SuccessResponseV2<FieldValueResponse>): void => {
+			const newNormalizedValues = data.data?.normalizedValues || [];
+			const newRelatedValues = data.data?.relatedValues || [];
+
+			if (!debouncedApiSearchText) {
+				setOptionsData(newNormalizedValues);
+				setIsComplete(data.data?.complete || false);
+			}
+			setFilteredOptionsData(newNormalizedValues);
+			setRelatedValues(newRelatedValues);
+			setOriginalRelatedValues(newRelatedValues);
+
+			// Sync temp selection with latest API values when ALL is active and dropdown is open
+			if (variableData.allSelected && isDropdownOpen) {
+				const latestValues = mergeUniqueStrings(
+					newNormalizedValues,
+					newRelatedValues,
+				);
+
+				const currentStrings = Array.isArray(tempSelection)
+					? tempSelection.map((v) => v.toString())
+					: tempSelection
+					? [tempSelection.toString()]
+					: [];
+
+				const areSame =
+					currentStrings.length === latestValues.length &&
+					latestValues.every((v) => currentStrings.includes(v));
+
+				if (!areSame) {
+					setTempSelection(latestValues);
+				}
+			}
+
+			// Apply default if no value is selected (e.g., new variable, first load)
+			if (!debouncedApiSearchText) {
+				applyDefaultIfNeeded(
+					mergeUniqueStrings(newNormalizedValues, newRelatedValues),
+				);
+			}
+
+			settleVariableFetch(variableData.name, 'complete');
+		},
+		[
+			debouncedApiSearchText,
+			variableData.allSelected,
+			variableData.name,
+			isDropdownOpen,
+			tempSelection,
+			setTempSelection,
+			applyDefaultIfNeeded,
+		],
+	);
+
+	const handleQueryError = useCallback(
+		(error: { message?: string } | null): void => {
+			if (error) {
+				setErrorMessage(extractErrorMessage(error));
+				setIsRetryableError(checkIfRetryableError(error));
+			}
+
+			settleVariableFetch(variableData.name, 'failure');
+		},
+		[variableData.name],
+	);
+
 	const { isLoading, refetch } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -192,13 +216,14 @@ function DynamicVariableInput({
 			debouncedApiSearchText,
 			variableData.dynamicVariablesSource,
 			variableData.dynamicVariablesAttribute,
+			variableFetchCycleId,
 		],
 		{
 			enabled:
-				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute,
-			queryFn: () =>
+				!!variableData.dynamicVariablesAttribute &&
+				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			queryFn: ({ signal }) =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -211,70 +236,10 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
+					signal,
 				),
-			onSuccess: (data) => {
-				const newNormalizedValues = data.data?.normalizedValues || [];
-				const newRelatedValues = data.data?.relatedValues || [];
-
-				if (!debouncedApiSearchText) {
-					setOptionsData(newNormalizedValues);
-					setIsComplete(data.data?.complete || false);
-				}
-				setFilteredOptionsData(newNormalizedValues);
-				setRelatedValues(newRelatedValues);
-				setOriginalRelatedValues(newRelatedValues);
-
-				// Only run auto-check logic when necessary to avoid performance issues
-				if (variableData.allSelected && isDropdownOpen) {
-					// Build the latest full list from API (normalized + related)
-					const latestValues = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					// Update temp selection to exactly reflect latest API values when ALL is active
-					const currentStrings = Array.isArray(tempSelection)
-						? tempSelection.map((v) => v.toString())
-						: tempSelection
-						? [tempSelection.toString()]
-						: [];
-					const areSame =
-						currentStrings.length === latestValues.length &&
-						latestValues.every((v) => currentStrings.includes(v));
-					if (!areSame) {
-						setTempSelection(latestValues);
-					}
-				}
-
-				// Apply default if no value is selected (e.g., new variable, first load)
-				if (!debouncedApiSearchText) {
-					const allNewOptions = [
-						...new Set([
-							...newNormalizedValues.map((v) => v.toString()),
-							...newRelatedValues.map((v) => v.toString()),
-						]),
-					];
-					applyDefaultIfNeeded(allNewOptions);
-				}
-			},
-			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);
-
-					// Check if error is retryable (5xx) or not (4xx)
-					const isRetryable = checkIfRetryableError(error);
-					setIsRetryableError(isRetryable);
-				}
-			},
+			onSuccess: handleQuerySuccess,
+			onError: handleQueryError,
 		},
 	);
 
@@ -336,6 +301,8 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx

@@ -3,8 +3,9 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import sortValues from 'lib/dashboardVariables/sortVariableValues';
-import { isArray, isString } from 'lodash-es';
+import { isArray, isEmpty, isString } from 'lodash-es';
 import { AppState } from 'store/reducers';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -12,26 +13,18 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import { areArraysEqual, checkAPIInvocation } from './util';
+import { areArraysEqual, settleVariableFetch } from './util';
 import { VariableItemProps } from './VariableItem';
 import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';
 
 type QueryVariableInputProps = Pick<
 	VariableItemProps,
-	| 'variableData'
-	| 'existingVariables'
-	| 'onValueUpdate'
-	| 'variablesToGetUpdated'
-	| 'setVariablesToGetUpdated'
-	| 'dependencyData'
+	'variableData' | 'existingVariables' | 'onValueUpdate'
 >;
 
 function QueryVariableInput({
 	variableData,
 	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
 	onValueUpdate,
 }: QueryVariableInputProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
@@ -43,6 +36,15 @@ function QueryVariableInput({
 		(state) => state.globalTime,
 	);
 
+	const {
+		variableFetchCycleId,
+		isVariableSettled,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+	} = useVariableFetchState(variableData.name || '');
+
 	const {
 		tempSelection,
 		setTempSelection,
@@ -60,16 +62,6 @@ function QueryVariableInput({
 		strategy: queryVariableSelectStrategy,
 	});
 
-	const validVariableUpdate = useCallback((): boolean => {
-		if (!variableData.name) {
-			return false;
-		}
-		return Boolean(
-			variablesToGetUpdated.length &&
-				variablesToGetUpdated[0] === variableData.name,
-		);
-	}, [variableData.name, variablesToGetUpdated]);
-
 	const getOptions = useCallback(
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 		(variablesRes: VariableResponseProps | null): void => {
@@ -103,18 +95,24 @@ function QueryVariableInput({
 							valueNotInList = true;
 						}
 
-						// variablesData.allSelected is added for the case where on change of options we need to update the
-						// local storage
-						if (
-							variableData.name &&
-							(validVariableUpdate() || valueNotInList || variableData.allSelected)
-						) {
+						if (variableData.name && (valueNotInList || variableData.allSelected)) {
 							if (
 								variableData.allSelected &&
 								variableData.multiSelect &&
 								variableData.showALLOption
 							) {
-								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
+									onValueUpdate(
+										variableData.name,
+										variableData.id,
+										newOptionsData,
+										true,
+									);
+								}
 
 								// Update tempSelection to maintain ALL state when dropdown is open
 								if (tempSelection !== undefined) {
@@ -132,7 +130,11 @@ function QueryVariableInput({
 										newOptionsData.every((option) => selectedValue.includes(option));
 								}
 
-								if (variableData.name && variableData.id) {
+								if (
+									variableData.name &&
+									variableData.id &&
+									!isEmpty(variableData.selectedValue)
+								) {
 									onValueUpdate(variableData.name, variableData.id, value, allSelected);
 								}
 							}
@@ -141,10 +143,6 @@ function QueryVariableInput({
 						setOptionsData(newOptionsData);
 						// Apply default if no value is selected (e.g., new variable, first load)
 						applyDefaultIfNeeded(newOptionsData);
-					} else {
-						setVariablesToGetUpdated((prev) =>
-							prev.filter((name) => name !== variableData.name),
-						);
 					}
 				}
 			} catch (e) {
@@ -157,8 +155,6 @@ function QueryVariableInput({
 			onValueUpdate,
 			tempSelection,
 			setTempSelection,
-			validVariableUpdate,
-			setVariablesToGetUpdated,
 			applyDefaultIfNeeded,
 		],
 	);
@@ -169,27 +165,24 @@ function QueryVariableInput({
 			variableData.name || '',
 			`${minTime}`,
 			`${maxTime}`,
-			JSON.stringify(dependencyData?.order),
+			variableFetchCycleId,
 		],
 		{
 			enabled:
 				variableData &&
-				checkAPIInvocation(
-					variablesToGetUpdated,
-					variableData,
-					dependencyData?.parentDependencyGraph,
+				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
+			queryFn: ({ signal }) =>
+				dashboardVariablesQuery(
+					{
+						query: variableData.queryValue || '',
+						variables: variablePropsToPayloadVariables(existingVariables),
+					},
+					signal,
 				),
-			queryFn: () =>
-				dashboardVariablesQuery({
-					query: variableData.queryValue || '',
-					variables: variablePropsToPayloadVariables(existingVariables),
-				}),
 			refetchOnWindowFocus: false,
 			onSuccess: (response) => {
 				getOptions(response.payload);
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'complete');
 			},
 			onError: (error: {
 				details: {
@@ -206,9 +199,7 @@ function QueryVariableInput({
 					}
 					setErrorMessage(message);
 				}
-				setVariablesToGetUpdated((prev) =>
-					prev.filter((v) => v !== variableData.name),
-				);
+				settleVariableFetch(variableData.name, 'failure');
 			},
 		},
 	);
@@ -242,6 +233,8 @@ function QueryVariableInput({
 			loading={isLoading}
 			errorMessage={errorMessage}
 			onRetry={handleRetry}
+			waiting={isVariableWaitingForDependencies}
+			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx

@@ -28,6 +28,8 @@ interface SelectVariableInputProps {
 	showRetryButton?: boolean;
 	showIncompleteDataMessage?: boolean;
 	onSearch?: (searchTerm: string) => void;
+	waiting?: boolean;
+	waitingMessage?: string;
 }
 
 const MAX_TAG_DISPLAY_VALUES = 10;
@@ -65,6 +67,7 @@ function SelectVariableInput({
 	showRetryButton,
 	showIncompleteDataMessage,
 	onSearch,
+	waitingMessage,
 }: SelectVariableInputProps): JSX.Element {
 	const commonProps = useMemo(
 		() => ({
@@ -78,7 +81,6 @@ function SelectVariableInput({
 			className: 'variable-select',
 			popupClassName: 'dropdown-styles',
 			getPopupContainer: popupContainer,
-			style: SelectItemStyle,
 			showSearch: true,
 			bordered: false,
 
@@ -86,6 +88,8 @@ function SelectVariableInput({
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
+			waitingMessage,
+			style: SelectItemStyle,
 			options,
 			errorMessage,
 			onRetry,
@@ -101,6 +105,7 @@ function SelectVariableInput({
 			defaultValue,
 			onChange,
 			loading,
+			waitingMessage,
 			options,
 			value,
 			errorMessage,

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

@@ -47,14 +47,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -69,14 +61,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -92,14 +76,6 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -133,14 +109,6 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -163,14 +131,6 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -185,14 +145,6 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
-					setVariablesToGetUpdated={(): void => {}}
-					dependencyData={{
-						order: [],
-						graph: {},
-						parentDependencyGraph: {},
-						hasCycle: false,
-					}}
 				/>
 			</MockQueryClientProvider>,
 		);

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

@@ -1,7 +1,6 @@
 import { memo } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import CustomVariableInput from './CustomVariableInput';
@@ -21,18 +20,12 @@ export interface VariableItemProps {
 		allSelected: boolean,
 		haveCustomValuesSelected?: boolean,
 	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
-	dependencyData: IDependencyData | null;
 }
 
 function VariableItem({
 	variableData,
 	onValueUpdate,
 	existingVariables,
-	variablesToGetUpdated,
-	setVariablesToGetUpdated,
-	dependencyData,
 }: VariableItemProps): JSX.Element {
 	const { name, description, type: variableType } = variableData;
 
@@ -65,9 +58,6 @@ function VariableItem({
 						variableData={variableData}
 						onValueUpdate={onValueUpdate}
 						existingVariables={existingVariables}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
 					/>
 				)}
 				{variableType === 'DYNAMIC' && (

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/VariableItem.defaulting.behavior.test.tsx

@@ -8,14 +8,6 @@ import '@testing-library/jest-dom/extend-expect';
 import VariableItem from '../VariableItem';
 
 const mockOnValueUpdate = jest.fn();
-const mockSetVariablesToGetUpdated = jest.fn();
-
-const baseDependencyData = {
-	order: [],
-	graph: {},
-	parentDependencyGraph: {},
-	hasCycle: false,
-};
 
 const TEST_VARIABLE_ID = 'test_variable';
 const VARIABLE_SELECT_TESTID = 'variable-select';
@@ -31,9 +23,6 @@ const renderVariableItem = (
 				variableData={variableData}
 				existingVariables={{}}
 				onValueUpdate={mockOnValueUpdate}
-				variablesToGetUpdated={[]}
-				setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
-				dependencyData={baseDependencyData}
 			/>
 		</MockQueryClientProvider>,
 	);

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx

@@ -2,14 +2,12 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
-	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
-	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -72,97 +70,6 @@ describe('dashboardVariables - utilities and processors', () => {
 		});
 	});
 
-	describe('checkAPIInvocation', () => {
-		const {
-			variablesToGetUpdated,
-			variableData,
-			parentDependencyGraph,
-		} = checkAPIInvocationMock;
-
-		const mockRootElement = {
-			name: 'deployment_environment',
-			key: '036a47cd-9ffc-47de-9f27-0329198964a8',
-			id: '036a47cd-9ffc-47de-9f27-0329198964a8',
-			modificationUUID: '5f71b591-f583-497c-839d-6a1590c3f60f',
-			selectedValue: 'production',
-			type: 'QUERY',
-			// ... other properties omitted for brevity
-		} as any;
-
-		describe('edge cases', () => {
-			it('should return false when variableData is empty', () => {
-				expect(
-					checkAPIInvocation(
-						variablesToGetUpdated,
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-
-			it('should return true when parentDependencyGraph is empty', () => {
-				expect(
-					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
-				).toBeFalsy();
-			});
-		});
-
-		describe('variable sequences', () => {
-			it('should return true for valid sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['k8s_node_name', 'k8s_namespace_name'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeTruthy();
-			});
-
-			it('should return false for invalid sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['k8s_cluster_name', 'k8s_node_name', 'k8s_namespace_name'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-
-			it('should return false when variableData is not in sequence', () => {
-				expect(
-					checkAPIInvocation(
-						['deployment_environment', 'service_name', 'endpoint'],
-						variableData,
-						parentDependencyGraph,
-					),
-				).toBeFalsy();
-			});
-		});
-
-		describe('root element behavior', () => {
-			it('should return true for valid root element sequence', () => {
-				expect(
-					checkAPIInvocation(
-						[
-							'deployment_environment',
-							'service_name',
-							'endpoint',
-							'http_status_code',
-						],
-						mockRootElement,
-						parentDependencyGraph,
-					),
-				).toBeTruthy();
-			});
-
-			it('should return true for empty variablesToGetUpdated array', () => {
-				expect(
-					checkAPIInvocation([], mockRootElement, parentDependencyGraph),
-				).toBeTruthy();
-			});
-		});
-	});
-
 	describe('Graph Building Utilities', () => {
 		const { graph } = buildGraphMock;
 		const { variables } = buildDependenciesMock;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/mock.ts

@@ -1,36 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-export const checkAPIInvocationMock = {
-	variablesToGetUpdated: [],
-	variableData: {
-		name: 'k8s_node_name',
-		key: '4d71d385-beaf-4434-8dbf-c62be68049fc',
-		allSelected: false,
-		customValue: '',
-		description: '',
-		id: '4d71d385-beaf-4434-8dbf-c62be68049fc',
-		modificationUUID: '77233d3c-96d7-4ccb-aa9d-11b04d563068',
-		multiSelect: false,
-		order: 6,
-		queryValue:
-			"SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name\nFROM signoz_metrics.distributed_time_series_v4_1day\nWHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}\nGROUP BY k8s_node_name",
-		selectedValue: 'gke-signoz-saas-si-consumer-bsc-e2sd4-a6d430fa-gvm2',
-		showALLOption: false,
-		sort: 'DISABLED',
-		textboxValue: '',
-		type: 'QUERY',
-	},
-	parentDependencyGraph: {
-		deployment_environment: [],
-		service_name: ['deployment_environment'],
-		endpoint: ['deployment_environment', 'service_name'],
-		http_status_code: ['endpoint'],
-		k8s_cluster_name: [],
-		environment: [],
-		k8s_node_name: ['k8s_cluster_name'],
-		k8s_namespace_name: ['k8s_cluster_name', 'k8s_node_name'],
-	},
-} as any;
-
 export const onUpdateVariableNodeMock = {
 	nodeToUpdate: 'deployment_environment',
 	graph: {

frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts

@@ -1,9 +1,16 @@
 import { OptionData } from 'components/NewSelect/types';
-import { isEmpty, isNull } from 'lodash-es';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
+import { isEmpty } from 'lodash-es';
 import {
 	IDashboardVariables,
 	IDependencyData,
 } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import {
+	onVariableFetchComplete,
+	onVariableFetchFailure,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 export function areArraysEqual(
@@ -45,30 +52,16 @@ const getDependentVariablesBasedOnVariableName = (
 	}
 
 	return variables
-		?.map((variable: any) => {
+		.map((variable) => {
 			if (variable.type === 'QUERY') {
-				// Combined pattern for all formats
-				// {{.variable_name}} - original format
-				// $variable_name - dollar prefix format
-				// [[variable_name]] - square bracket format
-				// {{variable_name}} - without dot format
-				const patterns = [
-					`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`, // {{.var}}
-					`\\{\\{\\s*${variableName}\\s*\\}\\}`, // {{var}}
-					`\\$${variableName}\\b`, // $var
-					`\\[\\[\\s*${variableName}\\s*\\]\\]`, // [[var]]
-				];
-				const combinedRegex = new RegExp(patterns.join('|'));
-
 				const queryValue = variable.queryValue || '';
-				const dependVarReMatch = queryValue.match(combinedRegex);
-				if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+				if (textContainsVariableReference(queryValue, variableName)) {
 					return variable.name;
 				}
 			}
 			return null;
 		})
-		.filter((val: string | null) => !isNull(val));
+		.filter((val): val is string => val !== null);
 };
 export type VariableGraph = Record<string, string[]>;
 
@@ -246,10 +239,26 @@ export const buildDependencyGraph = (
 
 	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
+	// Pre-compute transitive descendants by walking topological order in reverse.
+	// Each node's transitive descendants = direct children + their transitive descendants.
+	const transitiveDescendants: VariableGraph = {};
+	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
+		const node = topologicalOrder[i];
+		const desc = new Set<string>();
+		for (const child of adjList[node] || []) {
+			desc.add(child);
+			for (const d of transitiveDescendants[child] || []) {
+				desc.add(d);
+			}
+		}
+		transitiveDescendants[node] = Array.from(desc);
+	}
+
 	return {
 		order: topologicalOrder,
 		graph: adjList,
 		parentDependencyGraph: buildParentDependencyGraph(adjList),
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
@@ -284,33 +293,6 @@ export const onUpdateVariableNode = (
 	});
 };
 
-export const checkAPIInvocation = (
-	variablesToGetUpdated: string[],
-	variableData: IDashboardVariable,
-	parentDependencyGraph?: VariableGraph,
-): boolean => {
-	if (isEmpty(variableData.name)) {
-		return false;
-	}
-
-	if (isEmpty(parentDependencyGraph)) {
-		return false;
-	}
-
-	// if no dependency then true
-	const haveDependency =
-		parentDependencyGraph?.[variableData.name || '']?.length > 0;
-	if (!haveDependency) {
-		return true;
-	}
-
-	// if variable is in the list and has dependency then check if its the top element in the queue then true else false
-	return (
-		variablesToGetUpdated.length > 0 &&
-		variablesToGetUpdated[0] === variableData.name
-	);
-};
-
 export const getOptionsForDynamicVariable = (
 	normalizedValues: (string | number | boolean)[],
 	relatedValues: string[],
@@ -375,3 +357,130 @@ export const getSelectValue = (
 	}
 	return selectedValue?.toString();
 };
+
+/**
+ * Merges multiple arrays of values into a single deduplicated string array.
+ */
+export function mergeUniqueStrings(
+	...arrays: (string | number | boolean)[][]
+): string[] {
+	return [...new Set(arrays.flatMap((arr) => arr.map((v) => v.toString())))];
+}
+
+function isEligibleFilterVariable(
+	variable: IDashboardVariable,
+	currentVariableId: string,
+): boolean {
+	if (variable.id === currentVariableId) {
+		return false;
+	}
+	if (variable.type !== 'DYNAMIC') {
+		return false;
+	}
+	if (!variable.dynamicVariablesAttribute) {
+		return false;
+	}
+	if (!variable.selectedValue || isEmpty(variable.selectedValue)) {
+		return false;
+	}
+	return !(variable.showALLOption && variable.allSelected);
+}
+
+function formatQueryValue(val: string): string {
+	const numValue = Number(val);
+	if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
+		return val;
+	}
+	return `'${val.replace(/'/g, "\\'")}'`;
+}
+
+function buildQueryPart(attribute: string, values: string[]): string {
+	const formatted = values.map(formatQueryValue);
+	if (formatted.length === 1) {
+		return `${attribute} = ${formatted[0]}`;
+	}
+	return `${attribute} IN [${formatted.join(', ')}]`;
+}
+
+/**
+ * Builds a filter query string from sibling dynamic variables' selected values.
+ * e.g. `k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'`
+ */
+export function buildExistingDynamicVariableQuery(
+	existingVariables: IDashboardVariables | null,
+	currentVariableId: string,
+	hasDynamicAttribute: boolean,
+): string {
+	if (!existingVariables || !hasDynamicAttribute) {
+		return '';
+	}
+
+	const queryParts: string[] = [];
+
+	for (const variable of Object.values(existingVariables)) {
+		// Skip the current variable being processed
+		if (!isEligibleFilterVariable(variable, currentVariableId)) {
+			continue;
+		}
+
+		const rawValues = Array.isArray(variable.selectedValue)
+			? variable.selectedValue
+			: [variable.selectedValue];
+
+		// Filter out empty values and convert to strings
+		const validValues = rawValues
+			.filter(
+				(val): val is string | number | boolean =>
+					val !== null && val !== undefined && val !== '',
+			)
+			.map((val) => val.toString());
+
+		if (validValues.length > 0 && variable.dynamicVariablesAttribute) {
+			queryParts.push(
+				buildQueryPart(variable.dynamicVariablesAttribute, validValues),
+			);
+		}
+	}
+
+	return queryParts.join(' AND ');
+}
+
+function isVariableInActiveFetchState(state: string | undefined): boolean {
+	return state === 'loading' || state === 'revalidating';
+}
+
+/**
+ * Completes or fails a variable's fetch state machine transition.
+ * No-ops if the variable is not currently in an active fetch state.
+ */
+export function settleVariableFetch(
+	name: string | undefined,
+	outcome: 'complete' | 'failure',
+): void {
+	if (!name) {
+		return;
+	}
+
+	const currentState = variableFetchStore.getSnapshot().states[name];
+	if (!isVariableInActiveFetchState(currentState)) {
+		return;
+	}
+
+	if (outcome === 'complete') {
+		onVariableFetchComplete(name);
+	} else {
+		onVariableFetchFailure(name);
+	}
+}
+
+export function extractErrorMessage(
+	error: { message?: string } | null,
+): string {
+	if (!error) {
+		return SOMETHING_WENT_WRONG;
+	}
+	return (
+		error.message ||
+		'Please make sure configuration is valid and you have required setup and permissions'
+	);
+}

frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts

@@ -1,17 +1,11 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import { VariableItemProps } from '../VariableItem';
 
 export interface VariableSelectStrategy {
 	handleChange(params: {
 		value: string | string[];
-		variableData: IDashboardVariable;
+		variableData: VariableItemProps['variableData'];
+		onValueUpdate: VariableItemProps['onValueUpdate'];
 		optionsData: (string | number | boolean)[];
 		allAvailableOptionStrings: string[];
-		onValueUpdate: (
-			name: string,
-			id: string,
-			value: IDashboardVariable['selectedValue'],
-			allSelected: boolean,
-			haveCustomValuesSelected?: boolean,
-		) => void;
 	}): void;
 }

frontend/src/container/DashboardContainer/__test__/IntegrationTests.test.tsx

@@ -49,15 +49,11 @@ const mockDashboard = {
 // Mock the dashboard provider with stable functions to prevent infinite loops
 const mockSetSelectedDashboard = jest.fn();
 const mockUpdateLocalStorageDashboardVariables = jest.fn();
-const mockSetVariablesToGetUpdated = jest.fn();
-
 jest.mock('providers/Dashboard/Dashboard', () => ({
 	useDashboard: (): any => ({
 		selectedDashboard: mockDashboard,
 		setSelectedDashboard: mockSetSelectedDashboard,
 		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
-		variablesToGetUpdated: ['env'], // Stable initial value
-		setVariablesToGetUpdated: mockSetVariablesToGetUpdated,
 	}),
 }));
 

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -1,167 +0,0 @@
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-import type { GraphVisibilityState } from '../../types';
-import {
-	getStoredSeriesVisibility,
-	updateSeriesVisibilityToLocalStorage,
-} from '../legendVisibilityUtils';
-
-describe('legendVisibilityUtils', () => {
-	const storageKey = LOCALSTORAGE.GRAPH_VISIBILITY_STATES;
-
-	beforeEach(() => {
-		localStorage.clear();
-		jest.spyOn(window.localStorage.__proto__, 'getItem');
-		jest.spyOn(window.localStorage.__proto__, 'setItem');
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	describe('getStoredSeriesVisibility', () => {
-		it('returns null when there is no stored visibility state', () => {
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-			expect(localStorage.getItem).toHaveBeenCalledWith(storageKey);
-		});
-
-		it('returns null when widget has no stored dataIndex', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns a Map of label to visibility when widget state exists', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: false },
-					],
-				},
-				{
-					name: 'widget-2',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).not.toBeNull();
-			expect(result instanceof Map).toBe(true);
-			expect(result?.get('CPU')).toBe(true);
-			expect(result?.get('Memory')).toBe(false);
-			expect(result?.get('Errors')).toBeUndefined();
-		});
-
-		it('returns null on malformed JSON in localStorage', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-
-		it('returns null when widget id is not found', () => {
-			const stored: GraphVisibilityState[] = [
-				{
-					name: 'another-widget',
-					dataIndex: [{ label: 'CPU', show: true }],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(stored));
-
-			const result = getStoredSeriesVisibility('widget-1');
-
-			expect(result).toBeNull();
-		});
-	});
-
-	describe('updateSeriesVisibilityToLocalStorage', () => {
-		it('creates new visibility state when none exists', () => {
-			const seriesVisibility = [
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', seriesVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored!.get('CPU')).toBe(true);
-			expect(stored!.get('Memory')).toBe(false);
-		});
-
-		it('adds a new widget entry when other widgets already exist', () => {
-			const existing: GraphVisibilityState[] = [
-				{
-					name: 'widget-existing',
-					dataIndex: [{ label: 'Errors', show: true }],
-				},
-			];
-			localStorage.setItem(storageKey, JSON.stringify(existing));
-
-			const newVisibility = [{ label: 'CPU', show: false }];
-
-			updateSeriesVisibilityToLocalStorage('widget-new', newVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-new');
-
-			expect(stored).not.toBeNull();
-			expect(stored!.get('CPU')).toBe(false);
-		});
-
-		it('updates existing widget visibility when entry already exists', () => {
-			const initialVisibility: GraphVisibilityState[] = [
-				{
-					name: 'widget-1',
-					dataIndex: [
-						{ label: 'CPU', show: true },
-						{ label: 'Memory', show: true },
-					],
-				},
-			];
-
-			localStorage.setItem(storageKey, JSON.stringify(initialVisibility));
-
-			const updatedVisibility = [
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			];
-
-			updateSeriesVisibilityToLocalStorage('widget-1', updatedVisibility);
-
-			const stored = getStoredSeriesVisibility('widget-1');
-
-			expect(stored).not.toBeNull();
-			expect(stored!.get('CPU')).toBe(false);
-			expect(stored!.get('Memory')).toBe(true);
-		});
-
-		it('silently handles malformed existing JSON without throwing', () => {
-			localStorage.setItem(storageKey, '{invalid-json');
-
-			expect(() =>
-				updateSeriesVisibilityToLocalStorage('widget-1', [
-					{ label: 'CPU', show: true },
-				]),
-			).not.toThrow();
-		});
-	});
-});

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

@@ -6,10 +6,12 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -53,7 +55,6 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
-	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -64,8 +65,8 @@ function GridCardGraph({
 		toScrollWidgetId,
 		setToScrollWidgetId,
 		setDashboardQueryRangeCalled,
-		variablesToGetUpdated,
 	} = useDashboard();
+
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -117,10 +118,25 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
+	const referencedVariableNames = useMemo(() => {
+		if (!variables || !updatedQuery) {
+			return [];
+		}
+		const allNames = Object.values(variables)
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
+		return getVariableReferencesInQuery(updatedQuery, allNames);
+	}, [updatedQuery, variables]);
+
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
+		referencedVariableNames,
+	);
+
+	const queryEnabledCondition =
+		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -177,27 +193,6 @@ function GridCardGraph({
 		[requestData.query],
 	);
 
-	// Bring back dependency on variable chaining for panels to refetch,
-	// but only for non-dynamic variables. We derive a stable token from
-	// the head of the variablesToGetUpdated queue when it's non-dynamic.
-	const nonDynamicVariableChainToken = useMemo(() => {
-		if (!variablesToGetUpdated || variablesToGetUpdated.length === 0) {
-			return undefined;
-		}
-		if (!variables) {
-			return undefined;
-		}
-		const headName = variablesToGetUpdated[0];
-		const variableObj = Object.values(variables).find(
-			(variable) => variable?.name === headName,
-		);
-		if (variableObj && variableObj.type !== 'DYNAMIC') {
-			return headName;
-		}
-		return undefined;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variablesToGetUpdated, variables]);
-
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
@@ -224,11 +219,7 @@ function GridCardGraph({
 				requestData,
 				variables
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (
-								variable.type !== 'DYNAMIC' ||
-								(widgetsByDynamicVariableId?.[variable.id] &&
-									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
-							) {
+							if (variable.name && referencedVariableNames.includes(variable.name)) {
 								return { ...acc, [id]: variable.selectedValue };
 							}
 							return acc;
@@ -237,9 +228,6 @@ function GridCardGraph({
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
-				// Include non-dynamic variable chaining token to drive refetches
-				// only when a non-dynamic variable is at the head of the queue
-				...(nonDynamicVariableChainToken ? [nonDynamicVariableChainToken] : []),
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -252,7 +240,8 @@ function GridCardGraph({
 				return failureCount < 2;
 			},
 			keepPreviousData: true,
-			enabled: queryEnabledCondition && !nonDynamicVariableChainToken,
+			// eslint-disable-next-line sonarjs/no-redundant-boolean
+			enabled: queryEnabledCondition,
 			refetchOnMount: false,
 			onError: (error) => {
 				const errorMessage =
@@ -319,7 +308,7 @@ function GridCardGraph({
 					threshold={threshold}
 					headerMenuList={menuList}
 					isFetchingResponse={
-						queryResponse.isFetching || variablesToGetUpdated.length > 0
+						queryResponse.isFetching || isPanelWaitingOnAnyVariable
 					}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -72,7 +72,6 @@ export interface GridCardGraphProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
-	widgetsByDynamicVariableId?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -16,7 +16,6 @@ import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynamicVariableId';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -102,8 +101,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
-	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
-
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
 	}, [panelMap]);
@@ -617,7 +614,6 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 									enableDrillDown={enableDrillDown}
-									widgetsByDynamicVariableId={widgetsByDynamicVariableId}
 								/>
 							</Card>
 						</CardContainer>

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -0,0 +1,153 @@
+import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
+import isEmpty from 'lodash-es/isEmpty';
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+	variableFetchStore,
+} from 'providers/Dashboard/store/variableFetchStore';
+
+import { useDashboardVariablesSelector } from './useDashboardVariables';
+
+/**
+ * Generic selector hook for the variable fetch store.
+ * Same pattern as useDashboardVariablesSelector.
+ */
+const useVariableFetchSelector = <T>(
+	selector: (state: IVariableFetchStoreState) => T,
+): T => {
+	const selectorRef = useRef(selector);
+	selectorRef.current = selector;
+
+	const getSnapshot = useCallback(
+		() => selectorRef.current(variableFetchStore.getSnapshot()),
+		[],
+	);
+
+	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
+};
+
+interface UseVariableFetchStateReturn {
+	/** The current fetch state for this variable */
+	variableFetchState: VariableFetchState;
+	/** Current fetch cycle — include in react-query keys to auto-cancel stale requests */
+	variableFetchCycleId: number;
+	/** True if this variable is idle (not waiting and not fetching) */
+	isVariableSettled: boolean;
+	/** True if this variable is actively fetching (loading or revalidating) */
+	isVariableFetching: boolean;
+	/** True if this variable has completed at least one fetch cycle */
+	hasVariableFetchedOnce: boolean;
+	/** True if any parent variable hasn't settled yet */
+	isVariableWaitingForDependencies: boolean;
+	/** Message describing what this variable is waiting on, or null if not waiting */
+	variableDependencyWaitMessage?: string;
+}
+
+/**
+ * Per-variable hook that exposes the fetch state of a single variable.
+ * Reusable by both variable input components and panel components.
+ *
+ * Subscribes to both variableFetchStore (for states) and
+ * dashboardVariablesStore (for parent graph) to compute derived values.
+ */
+export function useVariableFetchState(
+	variableName: string,
+): UseVariableFetchStateReturn {
+	// This variable's fetch state (loading, waiting, idle, etc.)
+	const variableFetchState = useVariableFetchSelector(
+		(s) => s.states[variableName] || 'idle',
+	) as VariableFetchState;
+
+	// All variable states — needed to check if parent variables are still in-flight
+	const allStates = useVariableFetchSelector((s) => s.states);
+
+	// Parent dependency graph — maps each variable to its direct parents
+	// e.g. { "childVariable": ["parentVariable"] } means "childVariable" depends on "parentVariable"
+	const parentGraph = useDashboardVariablesSelector(
+		(s) => s.dependencyData?.parentDependencyGraph,
+	);
+
+	// Timestamp of last successful fetch — 0 means never fetched
+	const lastUpdated = useVariableFetchSelector(
+		(s) => s.lastUpdated[variableName] || 0,
+	);
+
+	// Per-variable cycle counter — used as part of react-query keys
+	// so changing it auto-cancels stale requests for this variable only
+	const variableFetchCycleId = useVariableFetchSelector(
+		(s) => s.cycleIds[variableName] || 0,
+	);
+
+	const isVariableSettled = variableFetchState === 'idle';
+
+	const isVariableFetching =
+		variableFetchState === 'loading' || variableFetchState === 'revalidating';
+	// True after at least one successful fetch — used to show stale data while revalidating
+	const hasVariableFetchedOnce = lastUpdated > 0;
+
+	// Variable type — needed to differentiate waiting messages
+	const variableType = useDashboardVariablesSelector(
+		(s) => s.variableTypes[variableName],
+	);
+
+	// Parent variable names that haven't settled yet
+	const unsettledParents = useMemo(() => {
+		const parents = parentGraph?.[variableName] || [];
+		return parents.filter((p) => (allStates[p] || 'idle') !== 'idle');
+	}, [parentGraph, variableName, allStates]);
+
+	const isVariableWaitingForDependencies = unsettledParents.length > 0;
+
+	const variableDependencyWaitMessage = useMemo(() => {
+		if (variableFetchState !== 'waiting') {
+			return;
+		}
+
+		if (variableType === 'DYNAMIC') {
+			return 'Waiting for all query variable options to load.';
+		}
+
+		if (unsettledParents.length === 0) {
+			return;
+		}
+
+		const quoted = unsettledParents.map((p) => `"${p}"`);
+		const names =
+			quoted.length > 1
+				? `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`
+				: quoted[0];
+		return `Waiting for options of ${names} to load.`;
+	}, [variableFetchState, variableType, unsettledParents]);
+
+	return {
+		variableFetchState,
+		isVariableSettled,
+		isVariableWaitingForDependencies,
+		variableDependencyWaitMessage,
+		isVariableFetching,
+		hasVariableFetchedOnce,
+		variableFetchCycleId,
+	};
+}
+
+export function useIsPanelWaitingOnVariable(variableNames: string[]): boolean {
+	const states = useVariableFetchSelector((s) => s.states);
+	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const variableTypesMap = useDashboardVariablesSelector((s) => s.variableTypes);
+
+	return variableNames.some((name) => {
+		const variableFetchState = states[name];
+		const { selectedValue, allSelected } = dashboardVariables?.[name] || {};
+
+		const isVariableInFetchingOrWaitingState =
+			variableFetchState === 'loading' ||
+			variableFetchState === 'revalidating' ||
+			variableFetchState === 'waiting';
+
+		if (variableTypesMap[name] === 'DYNAMIC' && allSelected) {
+			return isVariableInFetchingOrWaitingState;
+		}
+
+		return isEmpty(selectedValue) ? isVariableInFetchingOrWaitingState : false;
+	});
+}

frontend/src/hooks/dashboard/utils.ts

@@ -3,6 +3,7 @@ import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { placeWidgetAtBottom } from 'container/NewWidget/utils';
+import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
 import { isArray } from 'lodash-es';
 import {
 	Dashboard,
@@ -116,10 +117,17 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
+								variable.name &&
 								filter.key?.key === variable.dynamicVariablesAttribute &&
-								((isArray(filter.value) &&
-									filter.value.includes(`$${variable.name}`)) ||
-									filter.value === `$${variable.name}`) &&
+								(isArray(filter.value)
+									? filter.value.some(
+											(v) =>
+												typeof v === 'string' &&
+												variable.name &&
+												textContainsVariableReference(v, variable.name),
+									  )
+									: typeof filter.value === 'string' &&
+									  textContainsVariableReference(filter.value, variable.name)) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -132,7 +140,12 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								queryData.filter?.expression?.includes(`$${variable.name}`) &&
+								variable.name &&
+								queryData.filter?.expression &&
+								textContainsVariableReference(
+									queryData.filter.expression,
+									variable.name,
+								) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -149,7 +162,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							promqlQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							promqlQuery.query &&
+							textContainsVariableReference(promqlQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -165,7 +180,9 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							clickhouseQuery.query?.includes(`$${variable.name}`) &&
+							variable.name &&
+							clickhouseQuery.query &&
+							textContainsVariableReference(clickhouseQuery.query, variable.name) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);

frontend/src/lib/dashboardVariables/variableReference.ts

@@ -0,0 +1,136 @@
+import { isArray } from 'lodash-es';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+
+/**
+ * Builds a RegExp that matches any recognized variable reference syntax:
+ *   {{.variableName}}  — dot prefix, optional whitespace
+ *   {{variableName}}   — no dot, optional whitespace
+ *   $variableName      — dollar prefix, word-boundary terminated
+ *   [[variableName]]   — square brackets, optional whitespace
+ */
+export function buildVariableReferencePattern(variableName: string): RegExp {
+	const patterns = [
+		`\\{\\{\\s*?\\.${variableName}\\s*?\\}\\}`,
+		`\\{\\{\\s*${variableName}\\s*\\}\\}`,
+		`\\$${variableName}\\b`,
+		`\\[\\[\\s*${variableName}\\s*\\]\\]`,
+	];
+	return new RegExp(patterns.join('|'));
+}
+
+/**
+ * Returns true if `text` contains a reference to `variableName` in any of the
+ * recognized variable syntaxes.
+ */
+export function textContainsVariableReference(
+	text: string,
+	variableName: string,
+): boolean {
+	if (!text || !variableName) {
+		return false;
+	}
+	return buildVariableReferencePattern(variableName).test(text);
+}
+
+/**
+ * Extracts all text strings from a widget Query that could contain variable
+ * references. Covers:
+ * - QUERY_BUILDER: filter items' string values + filter.expression
+ * - PROM: each promql[].query
+ * - CLICKHOUSE: each clickhouse_sql[].query
+ */
+function extractQueryBuilderTexts(query: Query): string[] {
+	const texts: string[] = [];
+	const queryDataList = query.builder?.queryData;
+	if (isArray(queryDataList)) {
+		queryDataList.forEach((queryData) => {
+			// Collect string values from filter items
+			queryData.filters?.items?.forEach((filter: TagFilterItem) => {
+				if (isArray(filter.value)) {
+					filter.value.forEach((v) => {
+						if (typeof v === 'string') {
+							texts.push(v);
+						}
+					});
+				} else if (typeof filter.value === 'string') {
+					texts.push(filter.value);
+				}
+			});
+
+			// Collect filter expression
+			if (queryData.filter?.expression) {
+				texts.push(queryData.filter.expression);
+			}
+		});
+	}
+	return texts;
+}
+
+function extractPromQLTexts(query: Query): string[] {
+	const texts: string[] = [];
+	if (isArray(query.promql)) {
+		query.promql.forEach((promqlQuery) => {
+			if (promqlQuery.query) {
+				texts.push(promqlQuery.query);
+			}
+		});
+	}
+	return texts;
+}
+
+function extractClickhouseSQLTexts(query: Query): string[] {
+	const texts: string[] = [];
+	if (isArray(query.clickhouse_sql)) {
+		query.clickhouse_sql.forEach((clickhouseQuery) => {
+			if (clickhouseQuery.query) {
+				texts.push(clickhouseQuery.query);
+			}
+		});
+	}
+	return texts;
+}
+
+/**
+ * Extracts all text strings from a widget Query that could contain variable
+ * references. Covers:
+ * - QUERY_BUILDER: filter items' string values + filter.expression
+ * - PROM: each promql[].query
+ * - CLICKHOUSE: each clickhouse_sql[].query
+ */
+export function extractQueryTextStrings(query: Query): string[] {
+	if (query.queryType === EQueryType.QUERY_BUILDER) {
+		return extractQueryBuilderTexts(query);
+	}
+
+	if (query.queryType === EQueryType.PROM) {
+		return extractPromQLTexts(query);
+	}
+
+	if (query.queryType === EQueryType.CLICKHOUSE) {
+		return extractClickhouseSQLTexts(query);
+	}
+
+	return [];
+}
+
+/**
+ * Given a widget Query and an array of variable names, returns the subset of
+ * variable names that are referenced in the query text.
+ *
+ * This performs text-based detection only. Structural checks (like
+ * filter.key.key matching a variable attribute) are NOT included.
+ */
+export function getVariableReferencesInQuery(
+	query: Query,
+	variableNames: string[],
+): string[] {
+	const texts = extractQueryTextStrings(query);
+	if (texts.length === 0) {
+		return [];
+	}
+
+	return variableNames.filter((name) =>
+		texts.some((text) => textContainsVariableReference(text, name)),
+	);
+}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -5,8 +5,8 @@ import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 
-import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
+import { useLegendActions } from './useLegendActions';
 
 import './Legend.styles.scss';
 
@@ -106,7 +106,6 @@ export default function Legend({
 						placeholder="Search..."
 						value={legendSearchQuery}
 						onChange={(e): void => setLegendSearchQuery(e.target.value)}
-						data-testid="legend-search-input"
 						className="legend-search-input"
 					/>
 				</div>

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

@@ -1,213 +0,0 @@
-import React from 'react';
-import { render, RenderResult, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-import { useLegendActions } from '../../hooks/useLegendActions';
-import Legend from '../Legend/Legend';
-import { LegendPosition } from '../types';
-
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-		className,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-		className?: string;
-	}): JSX.Element => (
-		<div data-testid="virtuoso-grid" className={className}>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex ?? index} data-testid="legend-item-wrapper">
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync');
-jest.mock('lib/uPlotV2/hooks/useLegendActions');
-
-const mockUseLegendsSync = useLegendsSync as jest.MockedFunction<
-	typeof useLegendsSync
->;
-const mockUseLegendActions = useLegendActions as jest.MockedFunction<
-	typeof useLegendActions
->;
-
-describe('Legend', () => {
-	const baseLegendItemsMap = {
-		0: {
-			seriesIndex: 0,
-			label: 'A',
-			show: true,
-			color: '#ff0000',
-		},
-		1: {
-			seriesIndex: 1,
-			label: 'B',
-			show: false,
-			color: '#00ff00',
-		},
-		2: {
-			seriesIndex: 2,
-			label: 'C',
-			show: true,
-			color: '#0000ff',
-		},
-	};
-
-	let onLegendClick: jest.Mock;
-	let onLegendMouseMove: jest.Mock;
-	let onLegendMouseLeave: jest.Mock;
-	let onFocusSeries: jest.Mock;
-
-	beforeEach(() => {
-		onLegendClick = jest.fn();
-		onLegendMouseMove = jest.fn();
-		onLegendMouseLeave = jest.fn();
-		onFocusSeries = jest.fn();
-
-		mockUseLegendsSync.mockReturnValue({
-			legendItemsMap: baseLegendItemsMap,
-			focusedSeriesIndex: 1,
-			setFocusedSeriesIndex: jest.fn(),
-		});
-
-		mockUseLegendActions.mockReturnValue({
-			onLegendClick,
-			onLegendMouseMove,
-			onLegendMouseLeave,
-			onFocusSeries,
-		});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	const renderLegend = (position?: LegendPosition): RenderResult =>
-		render(
-			<Legend
-				position={position}
-				// config is not used directly in the component, it's consumed by the mocked hook
-				config={{} as any}
-			/>,
-		);
-
-	describe('layout and position', () => {
-		it('renders search input when legend position is RIGHT', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
-		});
-
-		it('does not render search input when legend position is BOTTOM (default)', () => {
-			renderLegend();
-
-			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-		});
-
-		it('renders the marker with the correct border color', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendMarker = document.querySelector(
-				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-			) as HTMLElement;
-
-			expect(legendMarker).toHaveStyle({
-				'border-color': '#ff0000',
-			});
-		});
-
-		it('renders all legend items in the grid by default', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('virtuoso-grid')).toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('search behavior (RIGHT position)', () => {
-		it('filters legend items based on search query (case-insensitive)', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'A');
-
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.queryByText('B')).not.toBeInTheDocument();
-			expect(screen.queryByText('C')).not.toBeInTheDocument();
-		});
-
-		it('shows empty state when no legend items match the search query', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'network');
-
-			expect(
-				screen.getByText(/No series found matching "network"/i),
-			).toBeInTheDocument();
-			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
-		});
-
-		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, '   ');
-
-			expect(
-				screen.queryByText(/No series found matching/i),
-			).not.toBeInTheDocument();
-			expect(screen.getByText('A')).toBeInTheDocument();
-			expect(screen.getByText('B')).toBeInTheDocument();
-			expect(screen.getByText('C')).toBeInTheDocument();
-		});
-	});
-
-	describe('legend actions', () => {
-		it('calls onLegendClick when a legend item is clicked', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			expect(onLegendClick).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls mouseMove when the mouse moves over a legend item', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const legendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-
-			await user.hover(legendItem);
-
-			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const container = document.querySelector('.legend-container') as HTMLElement;
-
-			await user.hover(container);
-			await user.unhover(container);
-
-			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
-		});
-	});
-});

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -1,395 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { updateSeriesVisibilityToLocalStorage } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
-import {
-	PlotContextProvider,
-	usePlotContext,
-} from 'lib/uPlotV2/context/PlotContext';
-import type uPlot from 'uplot';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		updateSeriesVisibilityToLocalStorage: jest.fn(),
-	}),
-);
-
-const mockUpdateSeriesVisibilityToLocalStorage = updateSeriesVisibilityToLocalStorage as jest.MockedFunction<
-	typeof updateSeriesVisibilityToLocalStorage
->;
-
-interface MockSeries extends Partial<uPlot.Series> {
-	label?: string;
-	show?: boolean;
-}
-
-const createMockPlot = (series: MockSeries[] = []): uPlot =>
-	(({
-		series,
-		batch: jest.fn((fn: () => void) => fn()),
-		setSeries: jest.fn(),
-	} as unknown) as uPlot);
-
-interface TestComponentProps {
-	plot?: uPlot;
-	widgetId?: string;
-	shouldSaveSelectionPreference?: boolean;
-}
-
-const TestComponent = ({
-	plot,
-	widgetId,
-	shouldSaveSelectionPreference,
-}: TestComponentProps): JSX.Element => {
-	const {
-		setPlotContextInitialState,
-		syncSeriesVisibilityToLocalStorage,
-		onToggleSeriesVisibility,
-		onToggleSeriesOnOff,
-		onFocusSeries,
-	} = usePlotContext();
-	const handleInit = (): void => {
-		if (
-			!plot ||
-			!widgetId ||
-			typeof shouldSaveSelectionPreference !== 'boolean'
-		) {
-			return;
-		}
-
-		setPlotContextInitialState({
-			uPlotInstance: plot,
-			widgetId,
-			shouldSaveSelectionPreference,
-		});
-	};
-
-	return (
-		<div>
-			<button type="button" data-testid="init" onClick={handleInit}>
-				Init
-			</button>
-			<button
-				type="button"
-				data-testid="sync-visibility"
-				onClick={(): void => syncSeriesVisibilityToLocalStorage()}
-			>
-				Sync visibility
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-visibility"
-				onClick={(): void => onToggleSeriesVisibility(1)}
-			>
-				Toggle visibility
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-1"
-				onClick={(): void => onToggleSeriesOnOff(1)}
-			>
-				Toggle on/off 1
-			</button>
-			<button
-				type="button"
-				data-testid="toggle-on-off-5"
-				onClick={(): void => onToggleSeriesOnOff(5)}
-			>
-				Toggle on/off 5
-			</button>
-			<button
-				type="button"
-				data-testid="focus-series"
-				onClick={(): void => onFocusSeries(1)}
-			>
-				Focus series
-			</button>
-		</div>
-	);
-};
-
-describe('PlotContext', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('throws when usePlotContext is used outside provider', () => {
-		const Consumer = (): JSX.Element => {
-			// eslint-disable-next-line react-hooks/rules-of-hooks
-			usePlotContext();
-			return <div />;
-		};
-
-		expect(() => render(<Consumer />)).toThrow(
-			'Should be used inside the context',
-		);
-	});
-
-	it('syncSeriesVisibilityToLocalStorage does nothing without plot or widgetId', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<PlotContextProvider>
-				<TestComponent />
-			</PlotContextProvider>,
-		);
-
-		await user.click(screen.getByTestId('sync-visibility'));
-
-		expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-	});
-
-	it('syncSeriesVisibilityToLocalStorage serializes series visibility to localStorage helper', async () => {
-		const user = userEvent.setup();
-		const plot = createMockPlot([
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true },
-			{ label: 'Memory', show: false },
-		]);
-
-		render(
-			<PlotContextProvider>
-				<TestComponent
-					plot={plot}
-					widgetId="widget-123"
-					shouldSaveSelectionPreference
-				/>
-			</PlotContextProvider>,
-		);
-
-		await user.click(screen.getByTestId('init'));
-		await user.click(screen.getByTestId('sync-visibility'));
-
-		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-			'widget-123',
-			[
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			],
-		);
-	});
-
-	describe('onToggleSeriesVisibility', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			// No errors and no calls to localStorage helper
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('highlights a single series and saves visibility when preferences are enabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-visibility"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
-
-			// index 0 is skipped, so we expect calls for 1 and 2
-			expect(setSeries).toEqual([
-				[1, { show: true }],
-				[2, { show: false }],
-			]);
-
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-				'widget-visibility',
-				[
-					{ label: 'x-axis', show: true },
-					{ label: 'CPU', show: true },
-					{ label: 'Memory', show: true },
-				],
-			);
-		});
-
-		it('resets visibility for all series when toggling the same index again', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-reset"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			(plot.setSeries as jest.Mock).mockClear();
-
-			await user.click(screen.getByTestId('toggle-visibility'));
-
-			const setSeries = (plot.setSeries as jest.Mock).mock.calls;
-
-			// After reset, all non-zero series should be shown
-			expect(setSeries).toEqual([
-				[1, { show: true }],
-				[2, { show: true }],
-			]);
-		});
-	});
-
-	describe('onToggleSeriesOnOff', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('toggles series show flag and saves visibility when preferences are enabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-toggle"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalledWith(
-				'widget-toggle',
-				expect.any(Array),
-			);
-		});
-
-		it('does not toggle when target series does not exist', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [{ label: 'x-axis', show: true }];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-missing-series"
-						shouldSaveSelectionPreference
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-5'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('does not persist visibility when preferences flag is disabled', async () => {
-			const user = userEvent.setup();
-			const series: MockSeries[] = [
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			];
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-no-persist"
-						shouldSaveSelectionPreference={false}
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onFocusSeries', () => {
-		it('does nothing when plot instance is not set', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<PlotContextProvider>
-					<TestComponent />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('focus-series'));
-		});
-
-		it('sets focus on the given series index', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent
-						plot={plot}
-						widgetId="widget-focus"
-						shouldSaveSelectionPreference={false}
-					/>
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('focus-series'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
-		});
-	});
-});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -1,201 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
-import { useLegendActions } from 'lib/uPlotV2/hooks/useLegendActions';
-
-jest.mock('lib/uPlotV2/context/PlotContext');
-
-const mockUsePlotContext = usePlotContext as jest.MockedFunction<
-	typeof usePlotContext
->;
-
-describe('useLegendActions', () => {
-	let onToggleSeriesVisibility: jest.Mock;
-	let onToggleSeriesOnOff: jest.Mock;
-	let onFocusSeriesPlot: jest.Mock;
-	let setPlotContextInitialState: jest.Mock;
-	let syncSeriesVisibilityToLocalStorage: jest.Mock;
-	let setFocusedSeriesIndexMock: jest.Mock;
-	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
-
-	beforeAll(() => {
-		jest
-			.spyOn(global, 'requestAnimationFrame')
-			.mockImplementation((cb: FrameRequestCallback): number => {
-				cb(0);
-				return 1;
-			});
-
-		cancelAnimationFrameSpy = jest
-			.spyOn(global, 'cancelAnimationFrame')
-			.mockImplementation(() => {});
-	});
-
-	afterAll(() => {
-		jest.restoreAllMocks();
-	});
-
-	beforeEach(() => {
-		onToggleSeriesVisibility = jest.fn();
-		onToggleSeriesOnOff = jest.fn();
-		onFocusSeriesPlot = jest.fn();
-		setPlotContextInitialState = jest.fn();
-		syncSeriesVisibilityToLocalStorage = jest.fn();
-		setFocusedSeriesIndexMock = jest.fn();
-
-		mockUsePlotContext.mockReturnValue({
-			onToggleSeriesVisibility,
-			onToggleSeriesOnOff,
-			onFocusSeries: onFocusSeriesPlot,
-			setPlotContextInitialState,
-			syncSeriesVisibilityToLocalStorage,
-		});
-
-		cancelAnimationFrameSpy.mockClear();
-	});
-
-	const createMouseEvent = (options: {
-		legendItemId?: number;
-		isMarker?: boolean;
-	}): any => {
-		const { legendItemId, isMarker = false } = options;
-
-		return {
-			target: {
-				dataset: {
-					...(isMarker ? { isLegendMarker: 'true' } : {}),
-				},
-				closest: jest.fn(() =>
-					legendItemId !== undefined
-						? { dataset: { legendItemId: String(legendItemId) } }
-						: null,
-				),
-			},
-		};
-	};
-
-	describe('onLegendClick', () => {
-		it('toggles series visibility when clicking on legend label', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
-
-			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
-			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
-			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
-		});
-
-		it('toggles series on/off when clicking on marker', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(
-				createMouseEvent({ legendItemId: 0, isMarker: true }),
-			);
-
-			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
-			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
-		});
-
-		it('does nothing when click target is not inside a legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendClick(createMouseEvent({}));
-
-			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
-			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onFocusSeries', () => {
-		it('schedules focus update and calls plot focus handler via mouse move', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
-		});
-
-		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
-		});
-	});
-
-	describe('onLegendMouseMove', () => {
-		it('focuses new series when hovering over different legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: 0,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
-		});
-
-		it('does nothing when hovering over already focused series', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: 1,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
-
-			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
-			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('onLegendMouseLeave', () => {
-		it('cancels pending animation frame and clears focus state', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
-
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-			result.current.onLegendMouseLeave();
-
-			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
-		});
-	});
-});

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendsSync.test.ts

@@ -1,192 +0,0 @@
-import { act, cleanup, renderHook } from '@testing-library/react';
-import type { LegendItem } from 'lib/uPlotV2/config/types';
-import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-
-describe('useLegendsSync', () => {
-	let requestAnimationFrameSpy: jest.SpyInstance<
-		number,
-		[callback: FrameRequestCallback]
-	>;
-	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
-
-	beforeAll(() => {
-		requestAnimationFrameSpy = jest
-			.spyOn(global, 'requestAnimationFrame')
-			.mockImplementation((cb: FrameRequestCallback): number => {
-				cb(0);
-				return 1;
-			});
-
-		cancelAnimationFrameSpy = jest
-			.spyOn(global, 'cancelAnimationFrame')
-			.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-		cleanup();
-	});
-
-	afterAll(() => {
-		jest.restoreAllMocks();
-	});
-
-	const createMockConfig = (
-		legendItems: Record<number, LegendItem>,
-	): {
-		config: UPlotConfigBuilder;
-		invokeSetSeries: (
-			seriesIndex: number | null,
-			opts: { show?: boolean; focus?: boolean },
-			fireHook?: boolean,
-		) => void;
-	} => {
-		let setSeriesHandler:
-			| ((u: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-			| null = null;
-
-		const config = ({
-			getLegendItems: jest.fn(() => legendItems),
-			addHook: jest.fn(
-				(
-					hookName: string,
-					handler: (
-						u: uPlot,
-						seriesIndex: number | null,
-						opts: uPlot.Series,
-					) => void,
-				) => {
-					if (hookName === 'setSeries') {
-						setSeriesHandler = handler;
-					}
-
-					return (): void => {
-						setSeriesHandler = null;
-					};
-				},
-			),
-		} as unknown) as UPlotConfigBuilder;
-
-		const invokeSetSeries = (
-			seriesIndex: number | null,
-			opts: { show?: boolean; focus?: boolean },
-		): void => {
-			if (setSeriesHandler) {
-				setSeriesHandler({} as uPlot, seriesIndex, { ...opts });
-			}
-		};
-
-		return { config, invokeSetSeries };
-	};
-
-	it('initializes legend items from config', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-			2: { seriesIndex: 2, label: 'Memory', show: false, color: '#0f0' },
-		};
-
-		const { config } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		expect(config.getLegendItems).toHaveBeenCalledTimes(1);
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-
-		expect(result.current.legendItemsMap).toEqual(initialItems);
-	});
-
-	it('updates focusedSeriesIndex when a series gains focus via setSeries by default', async () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		expect(result.current.focusedSeriesIndex).toBeNull();
-
-		await act(async () => {
-			invokeSetSeries(1, { focus: true });
-		});
-
-		expect(result.current.focusedSeriesIndex).toBe(1);
-	});
-
-	it('does not update focusedSeriesIndex when subscribeToFocusChange is false', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() =>
-			useLegendsSync({ config, subscribeToFocusChange: false }),
-		);
-
-		invokeSetSeries(1, { focus: true });
-
-		expect(result.current.focusedSeriesIndex).toBeNull();
-	});
-
-	it('updates legendItemsMap visibility when show changes for a series', async () => {
-		const initialItems: Record<number, LegendItem> = {
-			0: { seriesIndex: 0, label: 'x-axis', show: true, color: '#000' },
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		// Toggle visibility of series 1
-		await act(async () => {
-			invokeSetSeries(1, { show: false });
-		});
-
-		expect(result.current.legendItemsMap[1].show).toBe(false);
-	});
-
-	it('ignores visibility updates for unknown legend items or unchanged show values', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		const { result } = renderHook(() => useLegendsSync({ config }));
-
-		const before = result.current.legendItemsMap;
-
-		// Unknown series index
-		invokeSetSeries(5, { show: false });
-		// Unchanged visibility for existing item
-		invokeSetSeries(1, { show: true });
-
-		const after = result.current.legendItemsMap;
-		expect(after).toEqual(before);
-	});
-
-	it('cancels pending visibility RAF on unmount', () => {
-		const initialItems: Record<number, LegendItem> = {
-			1: { seriesIndex: 1, label: 'CPU', show: true, color: '#f00' },
-		};
-
-		const { config, invokeSetSeries } = createMockConfig(initialItems);
-
-		// Override RAF to not immediately invoke callback so we can assert cancellation
-		requestAnimationFrameSpy.mockImplementationOnce(() => 42);
-
-		const { unmount } = renderHook(() => useLegendsSync({ config }));
-
-		invokeSetSeries(1, { show: false });
-
-		unmount();
-
-		expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(42);
-	});
-});

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -84,8 +84,6 @@ const DashboardContext = createContext<IDashboardContext>({
 	toScrollWidgetId: '',
 	setToScrollWidgetId: () => {},
 	updateLocalStorageDashboardVariables: () => {},
-	variablesToGetUpdated: [],
-	setVariablesToGetUpdated: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
 	selectedRowWidgetId: '',
@@ -183,10 +181,6 @@ export function DashboardProvider({
 		exact: true,
 	});
 
-	const [variablesToGetUpdated, setVariablesToGetUpdated] = useState<string[]>(
-		[],
-	);
-
 	const [layouts, setLayouts] = useState<Layout[]>([]);
 
 	const [panelMap, setPanelMap] = useState<
@@ -517,8 +511,6 @@ export function DashboardProvider({
 			updatedTimeRef,
 			setToScrollWidgetId,
 			updateLocalStorageDashboardVariables,
-			variablesToGetUpdated,
-			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,
@@ -541,8 +533,6 @@ export function DashboardProvider({
 			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			currentDashboard,
-			variablesToGetUpdated,
-			setVariablesToGetUpdated,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
 			selectedRowWidgetId,

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,4 +1,7 @@
+import { isEmpty, isUndefined } from 'lodash-es';
+
 import createStore from '../store';
+import { VariableFetchContext } from '../variableFetchStore';
 import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
 import {
 	computeDerivedValues,
@@ -10,6 +13,8 @@ const initialState: IDashboardVariablesStoreState = {
 	variables: {},
 	sortedVariablesArray: [],
 	dependencyData: null,
+	variableTypes: {},
+	dynamicVariableOrder: [],
 };
 
 export const dashboardVariablesStore = createStore<IDashboardVariablesStoreState>(
@@ -55,3 +60,38 @@ export function updateDashboardVariablesStore({
 		updateDerivedValues(draft);
 	});
 }
+
+/**
+ * Read current store snapshot as VariableFetchContext.
+ * Used by components to pass context to variableFetchStore actions
+ * without creating a circular import.
+ */
+export function getVariableDependencyContext(): VariableFetchContext {
+	const state = dashboardVariablesStore.getSnapshot();
+
+	// If every variable already has a selectedValue (e.g. persisted from
+	// localStorage/URL), dynamic variables can start in parallel.
+	// Otherwise they wait for query vars to settle first.
+	const doAllVariablesHaveValuesSelected = Object.values(state.variables).every(
+		(variable) => {
+			if (
+				variable.type === 'DYNAMIC' &&
+				variable.selectedValue === null &&
+				variable.allSelected === true
+			) {
+				return true;
+			}
+
+			return (
+				!isUndefined(variable.selectedValue) && !isEmpty(variable.selectedValue)
+			);
+		},
+	);
+
+	return {
+		doAllVariablesHaveValuesSelected,
+		variableTypes: state.variableTypes,
+		dynamicVariableOrder: state.dynamicVariableOrder,
+		dependencyData: state.dependencyData,
+	};
+}

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts

@@ -1,11 +1,18 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	IDashboardVariable,
+	TVariableQueryType,
+} from 'types/api/dashboard/getAll';
 
 export type VariableGraph = Record<string, string[]>;
 
 export interface IDependencyData {
 	order: string[];
+	// Direct children for each variable
 	graph: VariableGraph;
+	// Direct parents for each variable
 	parentDependencyGraph: VariableGraph;
+	// Pre-computed transitive descendants for each node (all reachable nodes, not just direct children)
+	transitiveDescendants: VariableGraph;
 	hasCycle: boolean;
 	cycleNodes?: string[];
 }
@@ -24,6 +31,12 @@ export interface IDashboardVariablesStoreState {
 
 	// Derived: dependency data for QUERY variables
 	dependencyData: IDependencyData | null;
+
+	// Derived: variable name → type mapping
+	variableTypes: Record<string, TVariableQueryType>;
+
+	// Derived: display-ordered list of dynamic variable names
+	dynamicVariableOrder: string[];
 }
 
 export interface IUseDashboardVariablesReturn {

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -2,9 +2,11 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	IDashboardVariable,
+	TVariableQueryType,
+} from 'types/api/dashboard/getAll';
 
-import { initializeVariableFetchStore } from '../variableFetchStore';
 import {
 	IDashboardVariables,
 	IDashboardVariablesStoreState,
@@ -44,6 +46,7 @@ export function buildDependencyData(
 		order,
 		graph,
 		parentDependencyGraph,
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	} = buildDependencyGraph(dependencies);
@@ -58,49 +61,62 @@ export function buildDependencyData(
 		order: queryVariableOrder,
 		graph,
 		parentDependencyGraph,
+		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
 }
 
 /**
- * Initialize the variable fetch store with the computed dependency data
+ * Build a variable name → type mapping from sorted variables array
  */
-function initializeFetchStore(
+export function buildVariableTypesMap(
 	sortedVariablesArray: IDashboardVariable[],
-	dependencyData: IDependencyData | null,
-): void {
-	if (dependencyData) {
-		const allVariableNames = sortedVariablesArray
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
+): Record<string, TVariableQueryType> {
+	const types: Record<string, TVariableQueryType> = {};
+	sortedVariablesArray.forEach((v) => {
+		if (v.name) {
+			types[v.name] = v.type;
+		}
+	});
+	return types;
+}
 
-		initializeVariableFetchStore(
-			allVariableNames,
-			dependencyData.graph,
-			dependencyData.parentDependencyGraph,
-		);
-	}
+/**
+ * Build display-ordered list of dynamic variable names
+ */
+export function buildDynamicVariableOrder(
+	sortedVariablesArray: IDashboardVariable[],
+): string[] {
+	return sortedVariablesArray
+		.filter((v) => v.type === 'DYNAMIC' && v.name)
+		.map((v) => v.name as string);
 }
 
 /**
  * Compute derived values from variables
  * This is a composition of buildSortedVariablesArray and buildDependencyData
- * Also initializes the variable fetch store with the new dependency data
  */
 export function computeDerivedValues(
 	variables: IDashboardVariablesStoreState['variables'],
 ): Pick<
 	IDashboardVariablesStoreState,
-	'sortedVariablesArray' | 'dependencyData'
+	| 'sortedVariablesArray'
+	| 'dependencyData'
+	| 'variableTypes'
+	| 'dynamicVariableOrder'
 > {
 	const sortedVariablesArray = buildSortedVariablesArray(variables);
 	const dependencyData = buildDependencyData(sortedVariablesArray);
+	const variableTypes = buildVariableTypesMap(sortedVariablesArray);
+	const dynamicVariableOrder = buildDynamicVariableOrder(sortedVariablesArray);
 
-	// Initialize the variable fetch store when dependency data is computed
-	initializeFetchStore(sortedVariablesArray, dependencyData);
-
-	return { sortedVariablesArray, dependencyData };
+	return {
+		sortedVariablesArray,
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	};
 }
 
 /**
@@ -112,7 +128,8 @@ export function updateDerivedValues(
 ): void {
 	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
 	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-
-	// Initialize the variable fetch store when dependency data is updated
-	initializeFetchStore(draft.sortedVariablesArray, draft.dependencyData);
+	draft.variableTypes = buildVariableTypesMap(draft.sortedVariablesArray);
+	draft.dynamicVariableOrder = buildDynamicVariableOrder(
+		draft.sortedVariablesArray,
+	);
 }

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -1,6 +1,12 @@
-import { VariableGraph } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-
+import { getVariableDependencyContext } from './dashboardVariables/dashboardVariablesStore';
+import { IDashboardVariablesStoreState } from './dashboardVariables/dashboardVariablesStoreTypes';
 import createStore from './store';
+import {
+	areAllQueryVariablesSettled,
+	isSettled,
+	resolveFetchState,
+	unlockWaitingDynamicVariables,
+} from './variableFetchStoreUtils';
 
 // Fetch state for each variable
 export type VariableFetchState =
@@ -14,19 +20,29 @@ export interface IVariableFetchStoreState {
 	// Per-variable fetch state
 	states: Record<string, VariableFetchState>;
 
-	// Dependency graphs (set once when variables change)
-	dependencyGraph: VariableGraph; // variable -> children that depend on it
-	parentGraph: VariableGraph; // variable -> parents it depends on
-
-	// Track last update timestamp per variable to trigger re-fetches
+	// Track last update timestamp per variable
 	lastUpdated: Record<string, number>;
+
+	// Per-variable cycle counter — bumped when a variable needs to refetch.
+	// Used in react-query keys to auto-cancel stale requests for that variable only.
+	cycleIds: Record<string, number>;
 }
 
+/**
+ * Context from dashboardVariablesStore needed by fetch actions.
+ * Passed as parameter to avoid circular imports.
+ */
+export type VariableFetchContext = Pick<
+	IDashboardVariablesStoreState,
+	'variableTypes' | 'dynamicVariableOrder' | 'dependencyData'
+> & {
+	doAllVariablesHaveValuesSelected: boolean;
+};
+
 const initialState: IVariableFetchStoreState = {
 	states: {},
-	dependencyGraph: {},
-	parentGraph: {},
 	lastUpdated: {},
+	cycleIds: {},
 };
 
 export const variableFetchStore = createStore<IVariableFetchStoreState>(
@@ -36,22 +52,183 @@ export const variableFetchStore = createStore<IVariableFetchStoreState>(
 // ============== Actions ==============
 
 /**
- * Initialize the store with dependency graphs and set initial states
+ * Initialize the store with variable names.
+ * Called when dashboard variables change — sets up state entries.
  */
-export function initializeVariableFetchStore(
-	variableNames: string[],
-	dependencyGraph: VariableGraph,
-	parentGraph: VariableGraph,
-): void {
+export function initializeVariableFetchStore(variableNames: string[]): void {
 	variableFetchStore.update((draft) => {
-		draft.dependencyGraph = dependencyGraph;
-		draft.parentGraph = parentGraph;
-
-		// Initialize all variables to idle, preserving existing ready states
+		// Initialize all variables to idle, preserving existing states
 		variableNames.forEach((name) => {
 			if (!draft.states[name]) {
 				draft.states[name] = 'idle';
 			}
 		});
+
+		// Clean up stale entries for variables that no longer exist
+		const nameSet = new Set(variableNames);
+		Object.keys(draft.states).forEach((name) => {
+			if (!nameSet.has(name)) {
+				delete draft.states[name];
+				delete draft.lastUpdated[name];
+				delete draft.cycleIds[name];
+			}
+		});
+	});
+}
+
+/**
+ * Start a full fetch cycle for all fetchable variables.
+ * Called on: initial load, time range change, or dependency graph change.
+ *
+ * Query variables with no query-type parents start immediately.
+ * Query variables with query-type parents get 'waiting'.
+ * Dynamic variables start immediately if all variables already have
+ * selectedValues (e.g. persisted from localStorage/URL). Otherwise they
+ * wait for all query variables to settle first.
+ */
+export function enqueueFetchOfAllVariables(): void {
+	const {
+		doAllVariablesHaveValuesSelected,
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+	if (!dependencyData) {
+		return;
+	}
+
+	const { order: queryVariableOrder, parentDependencyGraph } = dependencyData;
+
+	variableFetchStore.update((draft) => {
+		// Query variables: root ones start immediately, dependent ones wait
+		queryVariableOrder.forEach((name) => {
+			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
+			const parents = parentDependencyGraph[name] || [];
+			const hasQueryParents = parents.some((p) => variableTypes[p] === 'QUERY');
+			if (hasQueryParents) {
+				draft.states[name] = 'waiting';
+			} else {
+				draft.states[name] = resolveFetchState(draft, name);
+			}
+		});
+
+		// Dynamic variables: start immediately if query variables have values,
+		// otherwise wait for query variables to settle first
+		dynamicVariableOrder.forEach((name) => {
+			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
+			draft.states[name] = doAllVariablesHaveValuesSelected
+				? resolveFetchState(draft, name)
+				: 'waiting';
+		});
+	});
+}
+
+/**
+ * Mark a variable as completed. Unblocks waiting query-type children.
+ * If all query variables are now settled, unlocks any waiting dynamic variables.
+ */
+export function onVariableFetchComplete(name: string): void {
+	const {
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+
+	variableFetchStore.update((draft) => {
+		draft.states[name] = 'idle';
+		draft.lastUpdated[name] = Date.now();
+
+		if (!dependencyData) {
+			return;
+		}
+
+		const { graph } = dependencyData;
+
+		// Unblock waiting query-type children
+		const children = graph[name] || [];
+		children.forEach((child) => {
+			if (variableTypes[child] === 'QUERY' && draft.states[child] === 'waiting') {
+				draft.states[child] = resolveFetchState(draft, child);
+			}
+		});
+
+		// If all query variables are settled, unlock any waiting dynamic variables
+		if (
+			variableTypes[name] === 'QUERY' &&
+			areAllQueryVariablesSettled(draft.states, variableTypes)
+		) {
+			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
+		}
+	});
+}
+
+/**
+ * Mark a variable as errored. Sets query-type descendants to idle
+ * (they can't proceed without this parent).
+ * If all query variables are now settled, unlocks any waiting dynamic variables.
+ */
+export function onVariableFetchFailure(name: string): void {
+	const {
+		dependencyData,
+		variableTypes,
+		dynamicVariableOrder,
+	} = getVariableDependencyContext();
+
+	variableFetchStore.update((draft) => {
+		draft.states[name] = 'error';
+
+		if (!dependencyData) {
+			return;
+		}
+
+		// Set query-type descendants to idle (can't fetch without parent)
+		const descendants = dependencyData.transitiveDescendants[name] || [];
+		descendants.forEach((desc) => {
+			if (variableTypes[desc] === 'QUERY') {
+				draft.states[desc] = 'idle';
+			}
+		});
+
+		// If all query variables are settled (error counts), unlock any waiting dynamic variables
+		if (
+			variableTypes[name] === 'QUERY' &&
+			areAllQueryVariablesSettled(draft.states, variableTypes)
+		) {
+			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
+		}
+	});
+}
+
+/**
+ * Cascade a value change to query-type descendants.
+ * Called when a user changes a variable's value (not from a fetch cycle).
+ *
+ * Direct children whose parents are all settled start immediately.
+ * Deeper descendants wait until their parents complete (BFS order
+ * ensures parents are set before children within a single update).
+ */
+export function enqueueDescendantsOfVariable(name: string): void {
+	const { dependencyData, variableTypes } = getVariableDependencyContext();
+	if (!dependencyData) {
+		return;
+	}
+
+	const { parentDependencyGraph } = dependencyData;
+
+	variableFetchStore.update((draft) => {
+		const descendants = dependencyData.transitiveDescendants[name] || [];
+		const queryDescendants = descendants.filter(
+			(desc) => variableTypes[desc] === 'QUERY',
+		);
+
+		queryDescendants.forEach((desc) => {
+			draft.cycleIds[desc] = (draft.cycleIds[desc] || 0) + 1;
+			const parents = parentDependencyGraph[desc] || [];
+			const allParentsSettled = parents.every((p) => isSettled(draft.states[p]));
+
+			draft.states[desc] = allParentsSettled
+				? resolveFetchState(draft, desc)
+				: 'waiting';
+		});
 	});
 }

frontend/src/providers/Dashboard/store/variableFetchStoreUtils.ts

@@ -0,0 +1,46 @@
+import { TVariableQueryType } from 'types/api/dashboard/getAll';
+
+import {
+	IVariableFetchStoreState,
+	VariableFetchState,
+} from './variableFetchStore';
+
+export function isSettled(state: VariableFetchState | undefined): boolean {
+	return state === 'idle' || state === 'error';
+}
+
+/**
+ * Resolve the next fetch state based on whether the variable has been fetched before.
+ */
+export function resolveFetchState(
+	draft: IVariableFetchStoreState,
+	name: string,
+): VariableFetchState {
+	return (draft.lastUpdated[name] || 0) > 0 ? 'revalidating' : 'loading';
+}
+
+/**
+ * Check if all query variables are settled (idle or error).
+ */
+export function areAllQueryVariablesSettled(
+	states: Record<string, VariableFetchState>,
+	variableTypes: Record<string, TVariableQueryType>,
+): boolean {
+	return Object.entries(variableTypes)
+		.filter(([, type]) => type === 'QUERY')
+		.every(([name]) => isSettled(states[name]));
+}
+
+/**
+ * Transition waiting dynamic variables to loading/revalidating if in 'waiting' state.
+ */
+export function unlockWaitingDynamicVariables(
+	draft: IVariableFetchStoreState,
+	dynamicVariableOrder: string[],
+): void {
+	dynamicVariableOrder.forEach((dynName) => {
+		if (draft.states[dynName] === 'waiting') {
+			draft.states[dynName] = resolveFetchState(draft, dynName);
+		}
+	});
+}

frontend/src/providers/Dashboard/types.ts

@@ -47,8 +47,6 @@ export interface IDashboardContext {
 		allSelected: boolean,
 		isDynamic?: boolean,
 	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
 	selectedRowWidgetId: string | null;