chore: fixed plotcontext test

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

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

frontend/src/api/dynamicVariables/getFieldValues.ts

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

frontend/src/components/NewSelect/CustomMultiSelect.tsx

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

frontend/src/components/NewSelect/CustomSelect.tsx

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

frontend/src/components/NewSelect/types.ts

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

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

@@ -0,0 +1,167 @@
+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/hooks/dashboard/useVariableFetchState.ts

@@ -1,153 +0,0 @@
-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,7 +3,6 @@ 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,
@@ -117,17 +116,10 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								variable.name &&
 								filter.key?.key === variable.dynamicVariablesAttribute &&
-								(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)) &&
+								((isArray(filter.value) &&
+									filter.value.includes(`$${variable.name}`)) ||
+									filter.value === `$${variable.name}`) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -140,12 +132,7 @@ export const createDynamicVariableToWidgetsMap = (
 						dynamicVariables.forEach((variable) => {
 							if (
 								variable.dynamicVariablesAttribute &&
-								variable.name &&
-								queryData.filter?.expression &&
-								textContainsVariableReference(
-									queryData.filter.expression,
-									variable.name,
-								) &&
+								queryData.filter?.expression?.includes(`$${variable.name}`) &&
 								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 							) {
 								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -162,9 +149,7 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							variable.name &&
-							promqlQuery.query &&
-							textContainsVariableReference(promqlQuery.query, variable.name) &&
+							promqlQuery.query?.includes(`$${variable.name}`) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);
@@ -180,9 +165,7 @@ export const createDynamicVariableToWidgetsMap = (
 					dynamicVariables.forEach((variable) => {
 						if (
 							variable.dynamicVariablesAttribute &&
-							variable.name &&
-							clickhouseQuery.query &&
-							textContainsVariableReference(clickhouseQuery.query, variable.name) &&
+							clickhouseQuery.query?.includes(`$${variable.name}`) &&
 							!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
 						) {
 							dynamicVariableToWidgetsMap[variable.id].push(widget.id);

frontend/src/lib/dashboardVariables/variableReference.test.ts

@@ -1,445 +0,0 @@
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
-
-import {
-	buildVariableReferencePattern,
-	extractQueryTextStrings,
-	getVariableReferencesInQuery,
-	textContainsVariableReference,
-} from './variableReference';
-
-describe('buildVariableReferencePattern', () => {
-	const varName = 'deployment_environment';
-
-	it.each([
-		['{{.deployment_environment}}', '{{.var}} syntax'],
-		['{{ .deployment_environment }}', '{{.var}} with spaces'],
-		['{{deployment_environment}}', '{{var}} syntax'],
-		['{{ deployment_environment }}', '{{var}} with spaces'],
-		['$deployment_environment', '$var syntax'],
-		['[[deployment_environment]]', '[[var]] syntax'],
-		['[[ deployment_environment ]]', '[[var]] with spaces'],
-	])('matches %s (%s)', (text) => {
-		expect(buildVariableReferencePattern(varName).test(text)).toBe(true);
-	});
-
-	it('does not match partial variable names', () => {
-		const pattern = buildVariableReferencePattern('env');
-		// $env should match at word boundary, but $environment should not match $env
-		expect(pattern.test('$environment')).toBe(false);
-	});
-
-	it('matches $var at word boundary within larger text', () => {
-		const pattern = buildVariableReferencePattern('env');
-		expect(pattern.test('SELECT * WHERE x = $env')).toBe(true);
-		expect(pattern.test('$env AND y = 1')).toBe(true);
-	});
-});
-
-describe('textContainsVariableReference', () => {
-	describe('guard clauses', () => {
-		it('returns false for empty text', () => {
-			expect(textContainsVariableReference('', 'var')).toBe(false);
-		});
-
-		it('returns false for empty variable name', () => {
-			expect(textContainsVariableReference('some text', '')).toBe(false);
-		});
-	});
-
-	describe('all syntax formats', () => {
-		const varName = 'service_name';
-
-		it('detects {{.var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{.service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects {{var}} format', () => {
-			const query = "SELECT * FROM table WHERE service = '{{service_name}}'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects $var format', () => {
-			const query = "SELECT * FROM table WHERE service = '$service_name'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-
-		it('detects [[var]] format', () => {
-			const query = "SELECT * FROM table WHERE service = '[[service_name]]'";
-			expect(textContainsVariableReference(query, varName)).toBe(true);
-		});
-	});
-
-	describe('embedded in larger text', () => {
-		it('finds variable in a multi-line query', () => {
-			const query = `SELECT JSONExtractString(labels, 'k8s_node_name') AS k8s_node_name
-FROM signoz_metrics.distributed_time_series_v4_1day
-WHERE metric_name = 'k8s_node_cpu_time' AND JSONExtractString(labels, 'k8s_cluster_name') = {{.k8s_cluster_name}}
-GROUP BY k8s_node_name`;
-			expect(textContainsVariableReference(query, 'k8s_cluster_name')).toBe(true);
-			expect(textContainsVariableReference(query, 'k8s_node_name')).toBe(false); // plain text, not a variable reference
-		});
-	});
-
-	describe('no false positives', () => {
-		it('does not match substring of a longer variable name', () => {
-			expect(
-				textContainsVariableReference('$service_name_v2', 'service_name'),
-			).toBe(false);
-		});
-
-		it('does not match plain text that happens to contain the name', () => {
-			expect(
-				textContainsVariableReference(
-					'the service_name column is important',
-					'service_name',
-				),
-			).toBe(false);
-		});
-	});
-});
-
-// ---- Query text extraction & variable reference detection ----
-
-const baseQuery: Query = {
-	id: 'test-query',
-	queryType: EQueryType.QUERY_BUILDER,
-	promql: [],
-	builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
-	clickhouse_sql: [],
-};
-
-describe('extractQueryTextStrings', () => {
-	it('returns empty array for query builder with no data', () => {
-		expect(extractQueryTextStrings(baseQuery)).toEqual([]);
-	});
-
-	it('extracts string values from query builder filter items', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: ['$service_name', 'hardcoded'] },
-								{ id: '2', op: '=', value: '$env' },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['$service_name', 'hardcoded', '$env']);
-	});
-
-	it('extracts filter expression from query builder', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: { items: [], op: 'AND' },
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const texts = extractQueryTextStrings(query);
-		expect(texts).toEqual(['env = $deployment_environment']);
-	});
-
-	it('skips non-string filter values', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: [42, true] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-
-	it('extracts promql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: 'up{env="$env"}', legend: '', disabled: false },
-				{ name: 'B', query: 'cpu{ns="$namespace"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'up{env="$env"}',
-			'cpu{ns="$namespace"}',
-		]);
-	});
-
-	it('extracts clickhouse sql query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * WHERE env = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE env = {{.env}}',
-		]);
-	});
-
-	it('accumulates texts across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$env' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filters: {
-							items: [{ id: '2', op: '=', value: ['$service_name'] }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['$env', '$service_name']);
-	});
-
-	it('collects both filter items and filter expression from the same queryData', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'$service_name',
-			'env = $deployment_environment',
-		]);
-	});
-
-	it('skips promql entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{ name: 'B', query: 'up{env="$env"}', legend: '', disabled: false },
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual(['up{env="$env"}']);
-	});
-
-	it('skips clickhouse entries with empty query strings', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{ name: 'A', query: '', legend: '', disabled: false },
-				{
-					name: 'B',
-					query: 'SELECT * WHERE x = {{.env}}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(extractQueryTextStrings(query)).toEqual([
-			'SELECT * WHERE x = {{.env}}',
-		]);
-	});
-
-	it('returns empty array for unknown query type', () => {
-		const query = {
-			...baseQuery,
-			queryType: ('unknown' as unknown) as EQueryType,
-		};
-		expect(extractQueryTextStrings(query)).toEqual([]);
-	});
-});
-
-describe('getVariableReferencesInQuery', () => {
-	const variableNames = [
-		'deployment_environment',
-		'service_name',
-		'endpoint',
-		'unused_var',
-	];
-
-	it('returns empty array when query has no text', () => {
-		expect(getVariableReferencesInQuery(baseQuery, variableNames)).toEqual([]);
-	});
-
-	it('detects variables referenced in query builder filters', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [
-								{ id: '1', op: '=', value: '$service_name' },
-								{ id: '2', op: 'IN', value: ['$deployment_environment'] },
-							],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('detects variables in promql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query:
-						'http_requests{env="{{.deployment_environment}}", endpoint="$endpoint"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'endpoint']);
-	});
-
-	it('detects variables in clickhouse sql queries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.CLICKHOUSE,
-			clickhouse_sql: [
-				{
-					name: 'A',
-					query: 'SELECT * FROM table WHERE service = [[service_name]]',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['service_name']);
-	});
-
-	it('detects variables spread across multiple queryData entries', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.QUERY_BUILDER,
-			builder: {
-				queryData: [
-					({
-						filters: {
-							items: [{ id: '1', op: '=', value: '$service_name' }],
-							op: 'AND',
-						},
-					} as unknown) as IBuilderQuery,
-					({
-						filter: { expression: 'env = $deployment_environment' },
-					} as unknown) as IBuilderQuery,
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const result = getVariableReferencesInQuery(query, variableNames);
-		expect(result).toEqual(['deployment_environment', 'service_name']);
-	});
-
-	it('returns empty array when no variables are referenced', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{job="api"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, variableNames)).toEqual([]);
-	});
-
-	it('returns empty array when variableNames list is empty', () => {
-		const query: Query = {
-			...baseQuery,
-			queryType: EQueryType.PROM,
-			promql: [
-				{
-					name: 'A',
-					query: 'up{env="$deployment_environment"}',
-					legend: '',
-					disabled: false,
-				},
-			],
-		};
-
-		expect(getVariableReferencesInQuery(query, [])).toEqual([]);
-	});
-});

frontend/src/lib/dashboardVariables/variableReference.ts

@@ -1,136 +0,0 @@
-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,6 +106,7 @@ 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

@@ -0,0 +1,213 @@
+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

@@ -0,0 +1,395 @@
+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

@@ -0,0 +1,201 @@
+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

@@ -0,0 +1,192 @@
+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/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,7 +1,4 @@
-import { isEmpty, isUndefined } from 'lodash-es';
-
 import createStore from '../store';
-import { VariableFetchContext } from '../variableFetchStore';
 import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
 import {
 	computeDerivedValues,
@@ -13,8 +10,6 @@ const initialState: IDashboardVariablesStoreState = {
 	variables: {},
 	sortedVariablesArray: [],
 	dependencyData: null,
-	variableTypes: {},
-	dynamicVariableOrder: [],
 };
 
 export const dashboardVariablesStore = createStore<IDashboardVariablesStoreState>(
@@ -60,38 +55,3 @@ 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,18 +1,11 @@
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/getAll';
+import { IDashboardVariable } 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[];
 }
@@ -31,12 +24,6 @@ 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,11 +2,9 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 } from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/getAll';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
+import { initializeVariableFetchStore } from '../variableFetchStore';
 import {
 	IDashboardVariables,
 	IDashboardVariablesStoreState,
@@ -46,7 +44,6 @@ export function buildDependencyData(
 		order,
 		graph,
 		parentDependencyGraph,
-		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	} = buildDependencyGraph(dependencies);
@@ -61,62 +58,49 @@ export function buildDependencyData(
 		order: queryVariableOrder,
 		graph,
 		parentDependencyGraph,
-		transitiveDescendants,
 		hasCycle,
 		cycleNodes,
 	};
 }
 
 /**
- * Build a variable name → type mapping from sorted variables array
+ * Initialize the variable fetch store with the computed dependency data
  */
-export function buildVariableTypesMap(
+function initializeFetchStore(
 	sortedVariablesArray: IDashboardVariable[],
-): Record<string, TVariableQueryType> {
-	const types: Record<string, TVariableQueryType> = {};
-	sortedVariablesArray.forEach((v) => {
-		if (v.name) {
-			types[v.name] = v.type;
-		}
-	});
-	return types;
-}
+	dependencyData: IDependencyData | null,
+): void {
+	if (dependencyData) {
+		const allVariableNames = sortedVariablesArray
+			.map((v) => v.name)
+			.filter((name): name is string => !!name);
 
-/**
- * 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);
+		initializeVariableFetchStore(
+			allVariableNames,
+			dependencyData.graph,
+			dependencyData.parentDependencyGraph,
+		);
+	}
 }
 
 /**
  * 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'
-	| 'variableTypes'
-	| 'dynamicVariableOrder'
+	'sortedVariablesArray' | 'dependencyData'
 > {
 	const sortedVariablesArray = buildSortedVariablesArray(variables);
 	const dependencyData = buildDependencyData(sortedVariablesArray);
-	const variableTypes = buildVariableTypesMap(sortedVariablesArray);
-	const dynamicVariableOrder = buildDynamicVariableOrder(sortedVariablesArray);
 
-	return {
-		sortedVariablesArray,
-		dependencyData,
-		variableTypes,
-		dynamicVariableOrder,
-	};
+	// Initialize the variable fetch store when dependency data is computed
+	initializeFetchStore(sortedVariablesArray, dependencyData);
+
+	return { sortedVariablesArray, dependencyData };
 }
 
 /**
@@ -128,8 +112,7 @@ export function updateDerivedValues(
 ): void {
 	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
 	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-	draft.variableTypes = buildVariableTypesMap(draft.sortedVariablesArray);
-	draft.dynamicVariableOrder = buildDynamicVariableOrder(
-		draft.sortedVariablesArray,
-	);
+
+	// Initialize the variable fetch store when dependency data is updated
+	initializeFetchStore(draft.sortedVariablesArray, draft.dependencyData);
 }

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

@@ -1,12 +1,6 @@
-import { getVariableDependencyContext } from './dashboardVariables/dashboardVariablesStore';
-import { IDashboardVariablesStoreState } from './dashboardVariables/dashboardVariablesStoreTypes';
+import { VariableGraph } from 'container/DashboardContainer/DashboardVariablesSelection/util';
+
 import createStore from './store';
-import {
-	areAllQueryVariablesSettled,
-	isSettled,
-	resolveFetchState,
-	unlockWaitingDynamicVariables,
-} from './variableFetchStoreUtils';
 
 // Fetch state for each variable
 export type VariableFetchState =
@@ -20,29 +14,19 @@ export interface IVariableFetchStoreState {
 	// Per-variable fetch state
 	states: Record<string, VariableFetchState>;
 
-	// Track last update timestamp per variable
+	// 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
 	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>(
@@ -52,183 +36,22 @@ export const variableFetchStore = createStore<IVariableFetchStoreState>(
 // ============== Actions ==============
 
 /**
- * Initialize the store with variable names.
- * Called when dashboard variables change — sets up state entries.
+ * Initialize the store with dependency graphs and set initial states
  */
-export function initializeVariableFetchStore(variableNames: string[]): void {
+export function initializeVariableFetchStore(
+	variableNames: string[],
+	dependencyGraph: VariableGraph,
+	parentGraph: VariableGraph,
+): void {
 	variableFetchStore.update((draft) => {
-		// Initialize all variables to idle, preserving existing states
+		draft.dependencyGraph = dependencyGraph;
+		draft.parentGraph = parentGraph;
+
+		// Initialize all variables to idle, preserving existing ready 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

@@ -1,46 +0,0 @@
-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);
-		}
-	});
-}