Merge branch 'main' into chore/issue-3780-use-variable-select-strategy

chore: revert custom multi select
chore: use variable select strategy
2026-02-09 11:12:21 +00:00 · 2026-02-09 12:15:33 +05:30 · 2026-02-09 12:14:54 +05:30 · 2026-02-09 11:21:35 +05:30
18 changed files with 901 additions and 1515 deletions
--- a/frontend/src/constants/theme.ts
+++ b/frontend/src/constants/theme.ts
@@ -34,230 +34,159 @@ const themeColors = {
 		cyan: '#00FFFF',
 	},
 	chartcolors: {
-		// Blues (3)
-		dodgerBlue: '#2F80ED',
-		royalBlue: '#3366E6',
-		steelBlue: '#4682B4',
-
-		// Teals / Cyans (3)
-		turquoise: '#00CEC9',
-		lagoon: '#1ABC9C',
-		cyanBright: '#22A6F2',
-
-		// Greens (3)
-		emeraldGreen: '#27AE60',
-		mediumSeaGreen: '#3CB371',
-		limeGreen: '#A3E635',
-
-		// Yellows / Golds (3)
-		festivalYellow: '#F2C94C',
-		sunflower: '#FFD93D',
-		warmAmber: '#FFCA28',
-
-		// Oranges (3)
-		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
-		pumpkin: '#FF7F50',
-
-		// Reds (3)
 		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
-
-		// Pinks (3)
-		hotPink: '#E84393',
-		rosePink: '#FD79A8',
-		blush: '#FF7EB6',
-
-		// Purples / Violets (3)
-		mediumPurple: '#BB6BD9',
-		royalPurple: '#9B51E0',
-		orchid: '#DA77F2',
-
-		// Accent / Neon / Unique Colors (3)
-		neonViolet: '#C77DFF',
-		electricPurple: '#6C5CE7',
-		arcticBlue: '#48DBFB',
-
-		// Extended palette — systematic variations to reach 100 colors
-		blue1: '#1F63E0',
-		blue2: '#3A7AED',
-		blue3: '#5A9DF5',
-		cyan1: '#00B0AA',
-		cyan2: '#33D6C2',
-		cyan3: '#66E9DA',
-		green1: '#1E8449',
-		green2: '#2ECC71',
-		green3: '#58D68D',
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		orange1: '#D35400',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
-		pink1: '#D81B60',
-		pink2: '#E91E63',
-		pink3: '#F06292',
-		purple1: '#8E44AD',
-		purple2: '#9B59B6',
-		purple3: '#BB8FCE',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#D4FFB0',
-		gold1: '#F39C12',
-		gold2: '#F1C40F',
-		gold3: '#F7DC6F',
-		coral1: '#E67E22',
-		coral2: '#F39C12',
-		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
-		violet1: '#8E44AD',
-		violet2: '#9B59B6',
-		violet3: '#BB8FCE',
-		aqua1: '#00BFFF',
-		aqua2: '#1E90FF',
-		aqua3: '#63B8FF',
-		forest1: '#27AE60',
-		forest2: '#2ECC71',
-		forest3: '#58D68D',
-		blush1: '#FF6F91',
-		blush2: '#FF85A2',
-		blush3: '#FFA0B3',
-		lavender1: '#9B59B6',
-		lavender2: '#AF7AC5',
-		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
-		mustard1: '#F1C40F',
-		mustard2: '#F7DC6F',
-		mustard3: '#F9E79F',
-		teal4: '#1ABC9C',
-		teal5: '#48C9B0',
-		teal6: '#76D7C4',
-		magenta1: '#D6336C',
-		magenta2: '#E84393',
-		magenta3: '#F06292',
-		violet4: '#7D3C98',
-		violet5: '#8E44AD',
-		violet6: '#9B59B6',
-		green4: '#229954',
-		green5: '#27AE60',
-		green6: '#52BE80',
-		blue4: '#2874A6',
-		blue5: '#2E86C1',
-		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
-		orange4: '#D35400',
-		orange5: '#E67E22',
-		orange6: '#EB984E',
-		pink4: '#C2185B',
-		pink5: '#D81B60',
-		pink6: '#E91E63',
-		gold4: '#B7950B',
-		gold5: '#F1C40F',
-		gold6: '#F4D03F',
+		dodgerBlue: '#2F80ED',
+		mediumOrchid: '#BB6BD9',
+		seaBuckthorn: '#F2994A',
+		seaGreen: '#219653',
+		turquoiseBlue: '#56CCF2',
+		festivalOrange: '#F2C94C',
+		silver: '#BDBDBD',
+		outrageousOrange: '#FF6633',
+		roseBud: '#FFB399',
+		canary: '#FFFF99',
+		deepSkyBlue: '#00B3E6',
+		goldTips: '#E6B333',
+		royalBlue: '#3366E6',
+		avocado: '#999966',
+		mintGreen: '#99FF99',
+		chestnut: '#B34D4D',
+		lima: '#80B300',
+		olive: '#809900',
+		beautyBush: '#E6B3B3',
+		danube: '#6680B3',
+		oliveDrab: '#66991A',
+		lavenderRose: '#FF99E6',
+		electricLime: '#CCFF1A',
+		robin: '#3F5ECC',
+		harleyOrange: '#E6331A',
+		turquoise: '#33FFCC',
+		gladeGreen: '#66994D',
+		hemlock: '#66664D',
+		vidaLoca: '#4D8000',
+		rust: '#B33300',
+		red: '#FF0000', // Adding more colors, we need to get better colors from design team
+		blue: '#0000FF',
+		green: '#00FF00',
+		yellow: '#FFFF00',
+		purple: '#800080',
+		cyan: '#00FFFF',
+		magenta: '#FF00FF',
+		orange: '#FFA500',
+		pink: '#FFC0CB',
+		brown: '#A52A2A',
+		teal: '#008080',
+		lime: '#00FF00',
+		maroon: '#800000',
+		navy: '#000080',
+		aquamarine: '#7FFFD4',
+		darkSeaGreen: '#8FBC8F',
+		gray: '#808080',
+		skyBlue: '#87CEEB',
+		indigo: '#4B0082',
+		slateGray: '#708090',
+		chocolate: '#D2691E',
+		tomato: '#FF6347',
+		steelBlue: '#4682B4',
+		peru: '#CD853F',
+		darkOliveGreen: '#556B2F',
+		indianRed: '#CD5C5C',
+		mediumSlateBlue: '#7B68EE',
+		rosyBrown: '#BC8F8F',
+		darkSlateGray: '#2F4F4F',
+		mediumAquamarine: '#66CDAA',
+		lavender: '#E6E6FA',
+		thistle: '#D8BFD8',
+		salmon: '#FA8072',
+		darkSalmon: '#E9967A',
+		paleVioletRed: '#DB7093',
+		mediumPurple: '#9370DB',
+		darkOrchid: '#9932CC',
+		lawnGreen: '#7CFC00',
+		mediumSeaGreen: '#3CB371',
+		lightCoral: '#F08080',
+		gold: '#FFD700',
+		sandyBrown: '#F4A460',
+		darkKhaki: '#BDB76B',
+		cornflowerBlue: '#6495ED',
+		mediumVioletRed: '#C71585',
+		paleGreen: '#98FB98',
 	},
 	lightModeColor: {
-		radicalRed: '#D81B60',
-
-		dodgerBlueDark: '#1E5BD9',
-		steelgrey: '#344B6B',
-		steelpurple: '#5E548E',
-		steelindigo: '#8E4A7C',
-		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
-		steelorange: '#E76F2F',
-		steelgold: '#E09B00',
-		steelrust: '#C93A50',
-		steelgreen: '#2F7D69',
-
-		mediumOrchidDark: '#8E24AA',
-		seaBuckthornDark: '#C75A00',
-		seaGreen: '#1E7F5A',
-		turquoiseBlueDark: '#007EA7',
-		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
-		deepSkyBlueDark: '#0277BD',
-		royalBlue: '#2A4FDB',
-
-		avocadoDark: '#6B6B1E',
-		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
-		limaDark: '#5C7F00',
-		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
-
-		danube: '#4F6FB3',
-		oliveDrab: '#4F7F1A',
-		lavenderRoseDark: '#B0178F',
-		electricLimeDark: '#6B8F00',
-		robin: '#2F4FCC',
-
-		harleyOrange: '#CC2E12',
-		gladeGreen: '#4F7F46',
-		hemlock: '#5C5C45',
-		vidaLoca: '#3D6B00',
-		rust: '#993300',
-
-		red: '#C62828',
-		blue: '#1A237E',
-		green: '#1B7F3A',
-		purple: '#6A1B9A',
-		magentaDark: '#B000B5',
-		pinkDark: '#C2185B',
-
-		brown: '#7A3A1E',
-		teal: '#006D6F',
-		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
-		navy: '#0D1B5E',
-		gray: '#616161',
-
-		skyBlueDark: '#0288D1',
-		indigo: '#303F9F',
-		slateGray: '#556B7C',
-		chocolate: '#9C4A1A',
-		tomato: '#E53935',
-		steelBlue: '#3A6EA5',
-
-		peruDark: '#B35E00',
-		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
-		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
-		darkSlateGray: '#2E4A4A',
-
-		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
-		paleVioletRedDark: '#C2186A',
-
-		mediumPurple: '#7E57C2',
-		darkOrchid: '#7B1FA2',
-		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
-
-		gold: '#D4AF37',
-		sandyBrownDark: '#C76A15',
-		darkKhakiDark: '#8A7F00',
-		cornflowerBlueDark: '#355FCC',
-		mediumVioletRed: '#AD1457',
-		paleGreenDark: '#2E7D32',
+		radicalRed: '#FF1A66',
+		dodgerBlueDark: '#0C6EED',
+		steelgrey: '#2f4b7c',
+		steelpurple: '#665191',
+		steelindigo: '#a05195',
+		steelpink: '#d45087',
+		steelcoral: '#f95d6a',
+		steelorange: '#ff7c43',
+		steelgold: '#ffa600',
+		steelrust: '#de425b',
+		steelgreen: '#41967e',
+		mediumOrchidDark: '#C326FD',
+		seaBuckthornDark: '#E66E05',
+		seaGreen: '#219653',
+		turquoiseBlueDark: '#0099CC',
+		silverDark: '#757575',
+		outrageousOrangeDark: '#F9521A',
+		roseBudDark: '#EB6437',
+		deepSkyBlueDark: '#0595BD',
+		royalBlue: '#3366E6',
+		avocadoDark: '#8E8E29',
+		mintGreenDark: '#00C700',
+		chestnut: '#B34D4D',
+		limaDark: '#6E9900',
+		olive: '#809900',
+		beautyBushDark: '#E25555',
+		danube: '#6680B3',
+		oliveDrab: '#66991A',
+		lavenderRoseDark: '#F024BD',
+		electricLimeDark: '#84A800',
+		robin: '#3F5ECC',
+		harleyOrange: '#E6331A',
+		gladeGreen: '#66994D',
+		hemlock: '#66664D',
+		vidaLoca: '#4D8000',
+		rust: '#B33300',
+		red: '#FF0000', // Adding more colors, we need to get better colors from design team
+		blue: '#0000FF',
+		green: '#00FF00',
+		purple: '#800080',
+		magentaDark: '#EB00EB',
+		pinkDark: '#FF3D5E',
+		brown: '#A52A2A',
+		teal: '#008080',
+		limeDark: '#07A207',
+		maroon: '#800000',
+		navy: '#000080',
+		gray: '#808080',
+		skyBlueDark: '#0CA7E4',
+		indigo: '#4B0082',
+		slateGray: '#708090',
+		chocolate: '#D2691E',
+		tomato: '#FF6347',
+		steelBlue: '#4682B4',
+		peruDark: '#D16E0A',
+		darkOliveGreen: '#556B2F',
+		indianRed: '#CD5C5C',
+		mediumSlateBlue: '#7B68EE',
+		rosyBrownDark: '#CB4848',
+		darkSlateGray: '#2F4F4F',
+		fuchsia: '#FF0AFF',
+		salmonDark: '#FF432E',
+		darkSalmonDark: '#D26541',
+		paleVioletRedDark: '#E83089',
+		mediumPurple: '#9370DB',
+		darkOrchid: '#9932CC',
+		mediumSeaGreenDark: '#109E50',
+		lightCoralDark: '#F85959',
+		gold: '#FFD700',
+		sandyBrownDark: '#D97117',
+		darkKhakiDark: '#99900A',
+		cornflowerBlueDark: '#3371E6',
+		mediumVioletRed: '#C71585',
+		paleGreenDark: '#0D910D',
 	},
 	errorColor: '#d32f2f',
 	royalGrey: '#888888',
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/CustomVariableInput.tsx
@@ -1,10 +1,11 @@
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';

 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { VariableItemProps } from './VariableItem';
+import { customVariableSelectStrategy } from './variableSelectStrategy/customVariableSelectStrategy';

 type CustomVariableInputProps = Pick<
 	VariableItemProps,
@@ -29,16 +30,31 @@ function CustomVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
+		strategy: customVariableSelectStrategy,
 	});

+	// Apply default on mount — options are available synchronously for custom variables
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(applyDefaultIfNeeded, []);
+
+	const selectOptions = useMemo(
+		() =>
+			optionsData.map((option) => ({
+				label: option.toString(),
+				value: option.toString(),
+			})),
+		[optionsData],
+	);
+
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={optionsData}
+			options={selectOptions}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -13,7 +13,6 @@ import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';

-import DynamicVariableSelection from './DynamicVariableSelection';
 import { onUpdateVariableNode } from './util';
 import VariableItem from './VariableItem';

@@ -153,14 +152,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 			{sortedVariablesArray.map((variable) => {
 				const key = `${variable.name}${variable.id}${variable.order}`;

-				return variable.type === 'DYNAMIC' ? (
-					<DynamicVariableSelection
-						key={key}
-						existingVariables={dashboardVariables}
-						variableData={variable}
-						onValueUpdate={onValueUpdate}
-					/>
-				) : (
+				return (
 					<VariableItem
 						key={key}
 						existingVariables={dashboardVariables}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableInput.tsx
@@ -0,0 +1,343 @@
+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 useDebounce from 'hooks/useDebounce';
+import { isEmpty } from 'lodash-es';
+import { AppState } from 'store/reducers';
+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 { VariableItemProps } from './VariableItem';
+import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
+
+import './DashboardVariableSelection.styles.scss';
+
+type DynamicVariableInputProps = Pick<
+	VariableItemProps,
+	'variableData' | 'onValueUpdate' | 'existingVariables'
+>;
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function DynamicVariableInput({
+	variableData,
+	onValueUpdate,
+	existingVariables,
+}: DynamicVariableInputProps): JSX.Element {
+	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
+		[],
+	);
+
+	const [errorMessage, setErrorMessage] = useState<null | string>(null);
+	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
+
+	const [isComplete, setIsComplete] = useState<boolean>(false);
+
+	const [filteredOptionsData, setFilteredOptionsData] = useState<
+		(string | number | boolean)[]
+	>([]);
+
+	const [relatedValues, setRelatedValues] = useState<string[]>([]);
+	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
+		[],
+	);
+
+	// Track dropdown open state for auto-checking new values
+	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+
+	const [apiSearchText, setApiSearchText] = useState<string>('');
+
+	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()),
+			]),
+		],
+		[optionsData, relatedValues],
+	);
+
+	const {
+		value,
+		tempSelection,
+		setTempSelection,
+		handleClear,
+		enableSelectAll,
+		defaultValue,
+		applyDefaultIfNeeded,
+		onChange,
+		onDropdownVisibleChange,
+	} = useDashboardVariableSelectHelper({
+		variableData,
+		optionsData,
+		onValueUpdate,
+		strategy: dynamicVariableSelectStrategy,
+		allAvailableOptionStrings,
+	});
+
+	// Create a dependency key from all dynamic variables
+	const dynamicVariablesKey = useMemo(() => {
+		if (!existingVariables) {
+			return 'no_variables';
+		}
+
+		const dynamicVars = Object.values(existingVariables)
+			.filter((v) => v.type === 'DYNAMIC')
+			.map(
+				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
+			)
+			.join('|');
+
+		return dynamicVars || 'no_dynamic_variables';
+	}, [existingVariables]);
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(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 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,
+	]);
+
+	// Wrap the hook's onDropdownVisibleChange to also track isDropdownOpen and handle cleanup
+	const handleSelectDropdownVisibilityChange = useCallback(
+		(visible: boolean): void => {
+			setIsDropdownOpen(visible);
+
+			onDropdownVisibleChange(visible);
+
+			if (!visible) {
+				setFilteredOptionsData(optionsData);
+				setRelatedValues(originalRelatedValues);
+				setApiSearchText('');
+			}
+		},
+		[onDropdownVisibleChange, optionsData, originalRelatedValues],
+	);
+
+	const { isLoading, refetch } = useQuery(
+		[
+			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			variableData.name || `variable_${variableData.id}`,
+			dynamicVariablesKey,
+			minTime,
+			maxTime,
+			debouncedApiSearchText,
+			variableData.dynamicVariablesSource,
+			variableData.dynamicVariablesAttribute,
+		],
+		{
+			enabled:
+				variableData.type === 'DYNAMIC' &&
+				!!variableData.dynamicVariablesSource &&
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
+				getFieldValues(
+					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
+						? undefined
+						: (variableData.dynamicVariablesSource?.toLowerCase() as
+								| 'traces'
+								| 'logs'
+								| 'metrics'),
+					variableData.dynamicVariablesAttribute,
+					debouncedApiSearchText,
+					minTime,
+					maxTime,
+					existingQuery,
+				),
+			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);
+				}
+			},
+		},
+	);
+
+	const handleRetry = useCallback((): void => {
+		setErrorMessage(null);
+		setIsRetryableError(true);
+		refetch();
+	}, [refetch]);
+
+	const handleSearch = useCallback(
+		(text: string) => {
+			if (isComplete) {
+				if (!text) {
+					setFilteredOptionsData(optionsData);
+					setRelatedValues(originalRelatedValues);
+					return;
+				}
+
+				const lowerText = text.toLowerCase();
+				setFilteredOptionsData(
+					optionsData.filter((option) =>
+						option.toString().toLowerCase().includes(lowerText),
+					),
+				);
+				setRelatedValues(
+					originalRelatedValues.filter((val) =>
+						val.toLowerCase().includes(lowerText),
+					),
+				);
+			} else {
+				setApiSearchText(text);
+			}
+		},
+		[isComplete, optionsData, originalRelatedValues],
+	);
+
+	const selectOptions = useMemo(
+		() =>
+			getOptionsForDynamicVariable(filteredOptionsData || [], relatedValues || []),
+		[filteredOptionsData, relatedValues],
+	);
+
+	return (
+		<SelectVariableInput
+			variableId={variableData.id}
+			options={selectOptions}
+			value={value}
+			onChange={onChange}
+			onDropdownVisibleChange={handleSelectDropdownVisibilityChange}
+			onClear={handleClear}
+			enableSelectAll={enableSelectAll}
+			defaultValue={defaultValue}
+			isMultiSelect={variableData.multiSelect}
+			// dynamic variable specific + API related props
+			loading={isLoading}
+			errorMessage={errorMessage}
+			onRetry={handleRetry}
+			isDynamicVariable
+			showRetryButton={isRetryableError}
+			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
+			onSearch={handleSearch}
+		/>
+	);
+}
+
+export default memo(DynamicVariableInput);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DynamicVariableSelection.tsx
@@ -1,602 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
-import { isEmpty, isUndefined } from 'lodash-es';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-import {
-	areArraysEqual,
-	getOptionsForDynamicVariable,
-	getSelectValue,
-	uniqueValues,
-} from './util';
-
-import './DashboardVariableSelection.styles.scss';
-
-interface DynamicVariableSelectionProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		arg1: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-}
-
-function DynamicVariableSelection({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableSelectionProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-	const [isRetryableError, setIsRetryableError] = useState<boolean>(true);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [relatedValues, setRelatedValues] = useState<string[]>([]);
-	const [originalRelatedValues, setOriginalRelatedValues] = useState<string[]>(
-		[],
-	);
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	// Track dropdown open state for auto-checking new values
-	const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) {
-			return 'no_variables';
-		}
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// 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"]
-	const existingQuery = useMemo(() => {
-		if (!existingVariables || !variableData.dynamicVariablesAttribute) {
-			return '';
-		}
-
-		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((value) => value !== null && value !== undefined && value !== '')
-					.map((value) => value.toString());
-
-				if (validValues.length > 0) {
-					// Format values for query - wrap strings in quotes, keep numbers as is
-					const formattedValues = validValues.map((value) => {
-						// Check if value is a number
-						const numValue = Number(value);
-						if (!Number.isNaN(numValue) && Number.isFinite(numValue)) {
-							return value; // Keep as number
-						}
-						// Escape single quotes and wrap in quotes
-						return `'${value.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 { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-			debouncedApiSearchText,
-		],
-		{
-			enabled: variableData.type === 'DYNAMIC',
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-					existingQuery,
-				),
-			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);
-					}
-				}
-			},
-			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);
-				}
-			},
-		},
-	);
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					// For ALL selection in dynamic variables, pass null to avoid storing values
-					// The parent component will handle this appropriately
-					onValueUpdate(variableData.name, variableData.id, null, true);
-				} else {
-					// Build union of available options shown in dropdown (normalized + related)
-					const allAvailableOptionStrings = [
-						...new Set([
-							...optionsData.map((v) => v.toString()),
-							...relatedValues.map((v) => v.toString()),
-						]),
-					];
-
-					const haveCustomValuesSelected =
-						Array.isArray(value) &&
-						!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
-
-					onValueUpdate(
-						variableData.name,
-						variableData.id,
-						value,
-						allAvailableOptionStrings.every((v) => value.includes(v.toString())),
-						haveCustomValuesSelected,
-					);
-				}
-			}
-		},
-		[variableData, onValueUpdate, optionsData, relatedValues],
-	);
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesSource &&
-			variableData.dynamicVariablesAttribute
-		) {
-			refetch();
-		}
-	}, [
-		refetch,
-		variableData.dynamicVariablesSource,
-		variableData.dynamicVariablesAttribute,
-		debouncedApiSearchText,
-	]);
-
-	// 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()),
-			]),
-		],
-		[optionsData, relatedValues],
-	);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					setRelatedValues(originalRelatedValues);
-					return;
-				}
-
-				const localFilteredOptionsData: (string | number | boolean)[] = [];
-				optionsData.forEach((option) => {
-					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
-						localFilteredOptionsData.push(option);
-					}
-				});
-				setFilteredOptionsData(localFilteredOptionsData);
-				setRelatedValues(
-					originalRelatedValues.filter((value) =>
-						value.toLowerCase().includes(text.toLowerCase()),
-					),
-				);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData, originalRelatedValues],
-	);
-
-	const { selectedValue } = variableData;
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
-			: selectedValueStringified;
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = useCallback(
-		(inputValue: string | string[]): void => {
-			// Store the selection in temporary state while dropdown is open
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			const sanitizedValue = uniqueValues(value);
-			setTempSelection(sanitizedValue);
-		},
-		[variableData.multiSelect],
-	);
-
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Update dropdown open state for auto-checking
-		setIsDropdownOpen(visible);
-
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
-				// When ALL is selected, set selection to exactly the latest available values
-				const latestAll = [...allAvailableOptionStrings];
-				setTempSelection(latestAll);
-			} else {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-			}
-		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Only call handleChange if there's actually a change in the selection
-			const currentValue = variableData.selectedValue;
-
-			// Helper function to check if arrays have the same elements regardless of order
-			const areArraysEqualIgnoreOrder = (a: any[], b: any[]): boolean => {
-				if (a.length !== b.length) {
-					return false;
-				}
-				const sortedA = [...a].sort();
-				const sortedB = [...b].sort();
-				return areArraysEqual(sortedA, sortedB);
-			};
-
-			// If ALL was selected before and remains ALL after, skip updating
-			const wasAllSelected = enableSelectAll && variableData.allSelected;
-			const isAllSelectedAfter =
-				enableSelectAll &&
-				Array.isArray(tempSelection) &&
-				tempSelection.length === allAvailableOptionStrings.length &&
-				allAvailableOptionStrings.every((v) => tempSelection.includes(v));
-
-			if (wasAllSelected && isAllSelectedAfter) {
-				setTempSelection(undefined);
-				return;
-			}
-
-			const hasChanged =
-				tempSelection !== currentValue &&
-				!(
-					Array.isArray(tempSelection) &&
-					Array.isArray(currentValue) &&
-					areArraysEqualIgnoreOrder(tempSelection, currentValue)
-				);
-
-			if (hasChanged) {
-				handleChange(tempSelection);
-			}
-			setTempSelection(undefined);
-		}
-
-		// Always reset filtered data when dropdown closes, regardless of tempSelection state
-		if (!visible) {
-			setFilteredOptionsData(optionsData);
-			setRelatedValues(originalRelatedValues);
-			setApiSearchText('');
-		}
-	};
-
-	useEffect(
-		() => (): void => {
-			// Cleanup on unmount
-			setTempSelection(undefined);
-			setFilteredOptionsData([]);
-			setRelatedValues([]);
-			setApiSearchText('');
-		},
-		[],
-	);
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else if (variableData.allSelected) {
-						// If ALL is selected but no stored values, derive from available options
-						// This handles the case where we don't store values in localStorage for ALL
-						value = allAvailableOptionStrings;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		variableData.allSelected,
-		selectedValue,
-		tempSelection,
-		optionsData,
-		allAvailableOptionStrings,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
-
-	return (
-		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
-				${variableData.name}
-				{variableData.description && (
-					<Tooltip title={variableData.description}>
-						<InfoCircleOutlined className="info-icon" />
-					</Tooltip>
-				)}
-			</Typography.Text>
-			<div className="variable-value">
-				{variableData.multiSelect ? (
-					<CustomMultiSelect
-						key={variableData.id}
-						options={getOptionsForDynamicVariable(
-							filteredOptionsData || [],
-							relatedValues || [],
-						)}
-						defaultValue={variableData.defaultValue}
-						onChange={handleTempChange}
-						bordered={false}
-						placeholder="Select value"
-						placement="bottomLeft"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						maxTagCount={2}
-						getPopupContainer={popupContainer}
-						value={
-							(tempSelection || selectValue) === ALL_SELECT_VALUE
-								? 'ALL'
-								: tempSelection || selectValue
-						}
-						onDropdownVisibleChange={handleDropdownVisibleChange}
-						errorMessage={errorMessage}
-						// eslint-disable-next-line react/no-unstable-nested-components
-						maxTagPlaceholder={(omittedValues): JSX.Element => {
-							const maxDisplayValues = 10;
-							const valuesToShow = omittedValues.slice(0, maxDisplayValues);
-							const hasMore = omittedValues.length > maxDisplayValues;
-							const tooltipText =
-								valuesToShow.map(({ value }) => value).join(', ') +
-								(hasMore ? ` + ${omittedValues.length - maxDisplayValues} more` : '');
-
-							return (
-								<Tooltip title={tooltipText}>
-									<span>+ {omittedValues.length} </span>
-								</Tooltip>
-							);
-						}}
-						onClear={(): void => {
-							handleChange([]);
-						}}
-						enableAllSelection={enableSelectAll}
-						maxTagTextLength={30}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							setErrorMessage(null);
-							setIsRetryableError(true);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-						isDynamicVariable
-						showRetryButton={isRetryableError}
-					/>
-				) : (
-					<CustomSelect
-						key={variableData.id}
-						onChange={handleChange}
-						bordered={false}
-						placeholder="Select value"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						getPopupContainer={popupContainer}
-						options={getOptionsForDynamicVariable(
-							filteredOptionsData || [],
-							relatedValues || [],
-						)}
-						value={selectValue}
-						defaultValue={variableData.defaultValue}
-						errorMessage={errorMessage}
-						onSearch={handleSearch}
-						// eslint-disable-next-line sonarjs/no-identical-functions
-						onRetry={(): void => {
-							setErrorMessage(null);
-							setIsRetryableError(true);
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-						isDynamicVariable
-						showRetryButton={isRetryableError}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DynamicVariableSelection;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/QueryVariableInput.tsx
@@ -1,13 +1,11 @@
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 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 sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { isArray, isString } from 'lodash-es';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';

@@ -15,20 +13,18 @@ import { variablePropsToPayloadVariables } from '../utils';
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
 import { areArraysEqual, checkAPIInvocation } from './util';
+import { VariableItemProps } from './VariableItem';
+import { queryVariableSelectStrategy } from './variableSelectStrategy/queryVariableSelectStrategy';

-interface QueryVariableInputProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		value: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-	) => void;
-	variablesToGetUpdated: string[];
-	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
-	dependencyData: IDependencyData | null;
-}
+type QueryVariableInputProps = Pick<
+	VariableItemProps,
+	| 'variableData'
+	| 'existingVariables'
+	| 'onValueUpdate'
+	| 'variablesToGetUpdated'
+	| 'setVariablesToGetUpdated'
+	| 'dependencyData'
+>;

 function QueryVariableInput({
 	variableData,
@@ -56,13 +52,15 @@ function QueryVariableInput({
 		onChange,
 		onDropdownVisibleChange,
 		handleClear,
+		applyDefaultIfNeeded,
 	} = useDashboardVariableSelectHelper({
 		variableData,
 		optionsData,
 		onValueUpdate,
+		strategy: queryVariableSelectStrategy,
 	});

-	const validVariableUpdate = (): boolean => {
+	const validVariableUpdate = useCallback((): boolean => {
 		if (!variableData.name) {
 			return false;
 		}
@@ -70,86 +68,100 @@ function QueryVariableInput({
 			variablesToGetUpdated.length &&
 				variablesToGetUpdated[0] === variableData.name,
 		);
-	};
+	}, [variableData.name, variablesToGetUpdated]);

-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const getOptions = (variablesRes: VariableResponseProps | null): void => {
-		try {
-			setErrorMessage(null);
+	const getOptions = useCallback(
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+		(variablesRes: VariableResponseProps | null): void => {
+			try {
+				setErrorMessage(null);

-			if (
-				variablesRes?.variableValues &&
-				Array.isArray(variablesRes?.variableValues)
-			) {
-				const newOptionsData = sortValues(
-					variablesRes?.variableValues,
-					variableData.sort,
-				);
+				if (
+					variablesRes?.variableValues &&
+					Array.isArray(variablesRes?.variableValues)
+				) {
+					const newOptionsData = sortValues(
+						variablesRes?.variableValues,
+						variableData.sort,
+					);

-				const oldOptionsData = sortValues(optionsData, variableData.sort) as never;
+					const oldOptionsData = sortValues(optionsData, variableData.sort) as never;

-				if (!areArraysEqual(newOptionsData, oldOptionsData)) {
-					let valueNotInList = false;
+					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
+						let valueNotInList = false;

-					if (isArray(variableData.selectedValue)) {
-						variableData.selectedValue.forEach((val) => {
-							if (!newOptionsData.includes(val)) {
-								valueNotInList = true;
-							}
-						});
-					} else if (
-						isString(variableData.selectedValue) &&
-						!newOptionsData.includes(variableData.selectedValue)
-					) {
-						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.allSelected &&
-							variableData.multiSelect &&
-							variableData.showALLOption
+						if (isArray(variableData.selectedValue)) {
+							variableData.selectedValue.forEach((val) => {
+								if (!newOptionsData.includes(val)) {
+									valueNotInList = true;
+								}
+							});
+						} else if (
+							isString(variableData.selectedValue) &&
+							!newOptionsData.includes(variableData.selectedValue)
 						) {
-							onValueUpdate(variableData.name, variableData.id, newOptionsData, true);
+							valueNotInList = true;
+						}

-							// Update tempSelection to maintain ALL state when dropdown is open
-							if (tempSelection !== undefined) {
-								setTempSelection(newOptionsData.map((option) => option.toString()));
-							}
-						} else {
-							const value = variableData.selectedValue;
-							let allSelected = false;
+						// 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.allSelected &&
+								variableData.multiSelect &&
+								variableData.showALLOption
+							) {
+								onValueUpdate(variableData.name, variableData.id, newOptionsData, true);

-							if (variableData.multiSelect) {
-								const { selectedValue } = variableData;
-								allSelected =
-									newOptionsData.length > 0 &&
-									Array.isArray(selectedValue) &&
-									newOptionsData.every((option) => selectedValue.includes(option));
-							}
+								// Update tempSelection to maintain ALL state when dropdown is open
+								if (tempSelection !== undefined) {
+									setTempSelection(newOptionsData.map((option) => option.toString()));
+								}
+							} else {
+								const value = variableData.selectedValue;
+								let allSelected = false;

-							if (variableData.name && variableData.id) {
-								onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								if (variableData.multiSelect) {
+									const { selectedValue } = variableData;
+									allSelected =
+										newOptionsData.length > 0 &&
+										Array.isArray(selectedValue) &&
+										newOptionsData.every((option) => selectedValue.includes(option));
+								}
+
+								if (variableData.name && variableData.id) {
+									onValueUpdate(variableData.name, variableData.id, value, allSelected);
+								}
 							}
 						}
-					}

-					setOptionsData(newOptionsData);
-				} else {
-					setVariablesToGetUpdated((prev) =>
-						prev.filter((name) => name !== variableData.name),
-					);
+						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) {
+				console.error(e);
 			}
-		} catch (e) {
-			console.error(e);
-		}
-	};
+		},
+		[
+			variableData,
+			optionsData,
+			onValueUpdate,
+			tempSelection,
+			setTempSelection,
+			validVariableUpdate,
+			setVariablesToGetUpdated,
+			applyDefaultIfNeeded,
+		],
+	);

 	const { isLoading, refetch } = useQuery(
 		[
@@ -162,7 +174,6 @@ function QueryVariableInput({
 		{
 			enabled:
 				variableData &&
-				variableData.type === 'QUERY' &&
 				checkAPIInvocation(
 					variablesToGetUpdated,
 					variableData,
@@ -207,10 +218,19 @@ function QueryVariableInput({
 		refetch();
 	}, [refetch]);

+	const selectOptions = useMemo(
+		() =>
+			optionsData.map((option) => ({
+				label: option.toString(),
+				value: option.toString(),
+			})),
+		[optionsData],
+	);
+
 	return (
 		<SelectVariableInput
 			variableId={variableData.id}
-			options={optionsData}
+			options={selectOptions}
 			value={value}
 			onChange={onChange}
 			onDropdownVisibleChange={onDropdownVisibleChange}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput.tsx
@@ -3,6 +3,7 @@ import { orange } from '@ant-design/colors';
 import { WarningOutlined } from '@ant-design/icons';
 import { Popover, Tooltip, Typography } from 'antd';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
+import { OptionData } from 'components/NewSelect/types';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { ALL_SELECT_VALUE } from '../utils';
@@ -12,7 +13,7 @@ const errorIconStyle = { margin: '0 0.5rem' };

 interface SelectVariableInputProps {
 	variableId: string;
-	options: (string | number | boolean)[];
+	options: OptionData[];
 	value: string | string[] | undefined;
 	enableSelectAll: boolean;
 	isMultiSelect: boolean;
@@ -23,13 +24,17 @@ interface SelectVariableInputProps {
 	loading?: boolean;
 	errorMessage?: string | null;
 	onRetry?: () => void;
+	isDynamicVariable?: boolean;
+	showRetryButton?: boolean;
+	showIncompleteDataMessage?: boolean;
+	onSearch?: (searchTerm: string) => void;
 }

 const MAX_TAG_DISPLAY_VALUES = 10;

-function maxTagPlaceholder(
+export const renderMaxTagPlaceholder = (
 	omittedValues: { label?: React.ReactNode; value?: string | number }[],
-): JSX.Element {
+): JSX.Element => {
 	const valuesToShow = omittedValues.slice(0, MAX_TAG_DISPLAY_VALUES);
 	const hasMore = omittedValues.length > MAX_TAG_DISPLAY_VALUES;
 	const tooltipText =
@@ -41,7 +46,7 @@ function maxTagPlaceholder(
 			<span>+ {omittedValues.length} </span>
 		</Tooltip>
 	);
-}
+};

 function SelectVariableInput({
 	variableId,
@@ -56,16 +61,11 @@ function SelectVariableInput({
 	enableSelectAll,
 	isMultiSelect,
 	defaultValue,
+	isDynamicVariable,
+	showRetryButton,
+	showIncompleteDataMessage,
+	onSearch,
 }: SelectVariableInputProps): JSX.Element {
-	const selectOptions = useMemo(
-		() =>
-			options.map((option) => ({
-				label: option.toString(),
-				value: option.toString(),
-			})),
-		[options],
-	);
-
 	const commonProps = useMemo(
 		() => ({
 			// main props
@@ -82,23 +82,33 @@ function SelectVariableInput({
 			showSearch: true,
 			bordered: false,

-			// dynamic props
+			// changing props
 			'data-testid': 'variable-select',
 			onChange,
 			loading,
-			options: selectOptions,
+			options,
 			errorMessage,
 			onRetry,
+
+			// dynamic variable only props
+			isDynamicVariable,
+			showRetryButton,
+			showIncompleteDataMessage,
+			onSearch,
 		}),
 		[
 			variableId,
 			defaultValue,
 			onChange,
 			loading,
-			selectOptions,
+			options,
 			value,
 			errorMessage,
 			onRetry,
+			isDynamicVariable,
+			showRetryButton,
+			showIncompleteDataMessage,
+			onSearch,
 		],
 	);

@@ -110,11 +120,11 @@ function SelectVariableInput({
 					placement="bottomLeft"
 					maxTagCount={2}
 					onDropdownVisibleChange={onDropdownVisibleChange}
-					maxTagPlaceholder={maxTagPlaceholder}
+					maxTagPlaceholder={renderMaxTagPlaceholder}
 					onClear={onClear}
 					enableAllSelection={enableSelectAll}
 					maxTagTextLength={30}
-					allowClear={value !== ALL_SELECT_VALUE && value !== 'ALL'}
+					allowClear={value !== ALL_SELECT_VALUE}
 				/>
 			) : (
 				<CustomSelect {...commonProps} />
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
@@ -5,6 +5,7 @@ import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/da
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

 import CustomVariableInput from './CustomVariableInput';
+import DynamicVariableInput from './DynamicVariableInput';
 import QueryVariableInput from './QueryVariableInput';
 import TextboxVariableInput from './TextboxVariableInput';

@@ -16,8 +17,9 @@ export interface VariableItemProps {
 	onValueUpdate: (
 		name: string,
 		id: string,
-		arg1: IDashboardVariable['selectedValue'],
+		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
 	) => void;
 	variablesToGetUpdated: string[];
 	setVariablesToGetUpdated: React.Dispatch<React.SetStateAction<string[]>>;
@@ -68,6 +70,13 @@ function VariableItem({
 						dependencyData={dependencyData}
 					/>
 				)}
+				{variableType === 'DYNAMIC' && (
+					<DynamicVariableInput
+						variableData={variableData}
+						onValueUpdate={onValueUpdate}
+						existingVariables={existingVariables}
+					/>
+				)}
 			</div>
 		</div>
 	);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableSelectHelper.ts
@@ -1,8 +1,14 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash-es';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

+import { ALL_SELECT_VALUE } from '../utils';
 import { areArraysEqual, getSelectValue } from './util';
+import { VariableSelectStrategy } from './variableSelectStrategy/variableSelectStrategyTypes';
+import {
+	areArraysEqualIgnoreOrder,
+	uniqueValues,
+} from './variableSelectStrategy/variableSelectStrategyUtils';

 interface UseDashboardVariableSelectHelperParams {
 	variableData: IDashboardVariable;
@@ -12,7 +18,11 @@ interface UseDashboardVariableSelectHelperParams {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
+		haveCustomValuesSelected?: boolean,
 	) => void;
+	strategy: VariableSelectStrategy;
+	/** Override for all available option strings (default: optionsData.map(String)) */
+	allAvailableOptionStrings?: string[];
 }

 interface UseDashboardVariableSelectHelperReturn {
@@ -31,6 +41,11 @@ interface UseDashboardVariableSelectHelperReturn {
 	onChange: (value: string | string[]) => void;
 	onDropdownVisibleChange: (visible: boolean) => void;
 	handleClear: () => void;
+
+	// Default value helpers
+	applyDefaultIfNeeded: (
+		overrideOptions?: (string | number | boolean)[],
+	) => void;
 }

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -38,6 +53,8 @@ export function useDashboardVariableSelectHelper({
 	variableData,
 	optionsData,
 	onValueUpdate,
+	strategy,
+	allAvailableOptionStrings,
 }: UseDashboardVariableSelectHelperParams): UseDashboardVariableSelectHelperReturn {
 	const { selectedValue } = variableData;

@@ -52,11 +69,37 @@ export function useDashboardVariableSelectHelper({

 	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;

+	const effectiveAllAvailableOptionStrings = useMemo(
+		() => allAvailableOptionStrings ?? optionsData.map((v) => v.toString()),
+		[allAvailableOptionStrings, optionsData],
+	);
+
 	const selectValue =
 		variableData.allSelected && enableSelectAll
-			? 'ALL'
+			? ALL_SELECT_VALUE
 			: selectedValueStringified;

+	const getDefaultValue = useCallback(
+		(overrideOptions?: (string | number | boolean)[]) => {
+			const options = overrideOptions || optionsData;
+			if (variableData.multiSelect) {
+				if (variableData.showALLOption) {
+					return variableData.defaultValue || options.map((o) => o.toString());
+				}
+				return variableData.defaultValue || options?.[0]?.toString();
+			}
+			return variableData.defaultValue || options[0]?.toString();
+		},
+		[
+			variableData.multiSelect,
+			variableData.showALLOption,
+			variableData.defaultValue,
+			optionsData,
+		],
+	);
+
+	const defaultValue = useMemo(() => getDefaultValue(), [getDefaultValue]);
+
 	const handleChange = useCallback(
 		(inputValue: string | string[]): void => {
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
@@ -69,29 +112,21 @@ export function useDashboardVariableSelectHelper({
 			) {
 				return;
 			}
-			if (variableData.name) {
-				// Check if ALL is effectively selected by comparing with available options
-				const isAllSelected =
-					Array.isArray(value) &&
-					value.length > 0 &&
-					optionsData.every((option) => value.includes(option.toString()));

-				if (isAllSelected && variableData.showALLOption) {
-					// For ALL selection, pass optionsData as the value and set allSelected to true
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
+			strategy.handleChange({
+				value,
+				variableData,
+				optionsData,
+				allAvailableOptionStrings: effectiveAllAvailableOptionStrings,
+				onValueUpdate,
+			});
 		},
 		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			variableData.showALLOption,
-			onValueUpdate,
+			variableData,
 			optionsData,
+			effectiveAllAvailableOptionStrings,
+			onValueUpdate,
+			strategy,
 		],
 	);

@@ -99,79 +134,96 @@ export function useDashboardVariableSelectHelper({
 		(inputValue: string | string[]): void => {
 			// Store the selection in temporary state while dropdown is open
 			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-			setTempSelection(value);
+			setTempSelection(uniqueValues(value));
 		},
 		[variableData.multiSelect],
 	);

-	// Apply default value on first render if no selection exists
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
+	// Single select onChange: apply default if value is empty
+	const handleSingleSelectChange = useCallback(
+		(inputValue: string | string[]): void => {
+			if (isEmpty(inputValue)) {
+				if (defaultValue !== undefined) {
+					handleChange(defaultValue as string | string[]);
 				}
+				return;
 			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	// Apply default values when needed
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
+			handleChange(inputValue);
+		},
+		[handleChange, defaultValue],
+	);

 	// Handle dropdown visibility changes
 	const onDropdownVisibleChange = useCallback(
 		(visible: boolean): void => {
 			// Initialize temp selection when opening dropdown
 			if (visible) {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+				if (variableData.allSelected && enableSelectAll) {
+					// When ALL is selected, show all available options as individually checked
+					setTempSelection([...effectiveAllAvailableOptionStrings]);
+				} else {
+					setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+				}
 			}
 			// Apply changes when closing dropdown
 			else if (!visible && tempSelection !== undefined) {
-				// Call handleChange with the temporarily stored selection
-				handleChange(tempSelection);
+				// If ALL was selected before AND all options remain selected, skip updating
+				const wasAllSelected = enableSelectAll && variableData.allSelected;
+				const isAllSelectedAfter =
+					enableSelectAll &&
+					Array.isArray(tempSelection) &&
+					tempSelection.length === effectiveAllAvailableOptionStrings.length &&
+					effectiveAllAvailableOptionStrings.every((v) => tempSelection.includes(v));
+
+				if (wasAllSelected && isAllSelectedAfter) {
+					setTempSelection(undefined);
+					return;
+				}
+
+				// Apply default if closing with empty selection
+				let valueToApply = tempSelection;
+				if (isEmpty(tempSelection) && defaultValue !== undefined) {
+					valueToApply = defaultValue as string | string[];
+				}
+
+				// Order-agnostic change detection
+				const currentValue = variableData.selectedValue;
+				const hasChanged =
+					valueToApply !== currentValue &&
+					!(
+						Array.isArray(valueToApply) &&
+						Array.isArray(currentValue) &&
+						areArraysEqualIgnoreOrder(valueToApply, currentValue)
+					);
+
+				if (hasChanged) {
+					handleChange(valueToApply);
+				}
 				setTempSelection(undefined);
 			}
 		},
-		[variableData, tempSelection, handleChange],
+		[
+			variableData,
+			enableSelectAll,
+			effectiveAllAvailableOptionStrings,
+			tempSelection,
+			handleChange,
+			defaultValue,
+		],
+	);
+
+	// Explicit function for callers to apply default on mount / data load
+	// Pass overrideOptions when freshly-loaded options aren't in state yet (async callers)
+	const applyDefaultIfNeeded = useCallback(
+		(overrideOptions?: (string | number | boolean)[]): void => {
+			if (isEmpty(selectValue)) {
+				const defaultValueFromOptions = getDefaultValue(overrideOptions);
+				if (defaultValueFromOptions !== undefined) {
+					handleChange(defaultValueFromOptions as string | string[]);
+				}
+			}
+		},
+		[selectValue, handleChange, getDefaultValue],
 	);

 	const handleClear = useCallback((): void => {
@@ -182,11 +234,9 @@ export function useDashboardVariableSelectHelper({
 		? tempSelection || selectValue
 		: selectValue;

-	const defaultValue = variableData.defaultValue || selectValue;
-
 	const onChange = useMemo(() => {
-		return variableData.multiSelect ? handleTempChange : handleChange;
-	}, [variableData.multiSelect, handleTempChange, handleChange]);
+		return variableData.multiSelect ? handleTempChange : handleSingleSelectChange;
+	}, [variableData.multiSelect, handleTempChange, handleSingleSelectChange]);

 	return {
 		tempSelection,
@@ -197,5 +247,6 @@ export function useDashboardVariableSelectHelper({
 		value,
 		defaultValue,
 		onChange,
+		applyDefaultIfNeeded,
 	};
 }
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
@@ -363,25 +363,6 @@ export const uniqueOptions = (options: OptionData[]): OptionData[] => {
 	return uniqueOptions;
 };

-export const uniqueValues = (values: string[] | string): string[] | string => {
-	if (Array.isArray(values)) {
-		const uniqueValues: string[] = [];
-		const seenValues = new Set<string>();
-
-		values.forEach((value) => {
-			if (seenValues.has(value)) {
-				return;
-			}
-			seenValues.add(value);
-			uniqueValues.push(value);
-		});
-
-		return uniqueValues;
-	}
-
-	return values;
-};
-
 export const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/customVariableSelectStrategy.tsx
@@ -0,0 +1,4 @@
+import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const customVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/defaultVariableSelectStrategy.tsx
@@ -0,0 +1,20 @@
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const defaultVariableSelectStrategy: VariableSelectStrategy = {
+	handleChange({ value, variableData, optionsData, onValueUpdate }) {
+		if (!variableData.name) {
+			return;
+		}
+
+		const isAllSelected =
+			Array.isArray(value) &&
+			value.length > 0 &&
+			optionsData.every((option) => value.includes(option.toString()));
+
+		if (isAllSelected && variableData.showALLOption) {
+			onValueUpdate(variableData.name, variableData.id, optionsData, true);
+		} else {
+			onValueUpdate(variableData.name, variableData.id, value, false);
+		}
+	},
+};
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/dynamicVariableSelectStrategy.tsx
@@ -0,0 +1,37 @@
+import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
+
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const dynamicVariableSelectStrategy: VariableSelectStrategy = {
+	handleChange({
+		value,
+		variableData,
+		allAvailableOptionStrings,
+		onValueUpdate,
+	}) {
+		if (!variableData.name) {
+			return;
+		}
+
+		if (
+			value === ALL_SELECT_VALUE ||
+			(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+		) {
+			onValueUpdate(variableData.name, variableData.id, null, true);
+		} else {
+			// For ALL selection in dynamic variables, pass null to avoid storing values
+			// The parent component will handle this appropriately
+			const haveCustomValuesSelected =
+				Array.isArray(value) &&
+				!value.every((v) => allAvailableOptionStrings.includes(v.toString()));
+
+			onValueUpdate(
+				variableData.name,
+				variableData.id,
+				value,
+				allAvailableOptionStrings.every((v) => value.includes(v.toString())),
+				haveCustomValuesSelected,
+			);
+		}
+	},
+};
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/queryVariableSelectStrategy.tsx
@@ -0,0 +1,4 @@
+import { defaultVariableSelectStrategy } from './defaultVariableSelectStrategy';
+import { VariableSelectStrategy } from './variableSelectStrategyTypes';
+
+export const queryVariableSelectStrategy: VariableSelectStrategy = defaultVariableSelectStrategy;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyTypes.ts
@@ -0,0 +1,17 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export interface VariableSelectStrategy {
+	handleChange(params: {
+		value: string | string[];
+		variableData: IDashboardVariable;
+		optionsData: (string | number | boolean)[];
+		allAvailableOptionStrings: string[];
+		onValueUpdate: (
+			name: string,
+			id: string,
+			value: IDashboardVariable['selectedValue'],
+			allSelected: boolean,
+			haveCustomValuesSelected?: boolean,
+		) => void;
+	}): void;
+}
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/variableSelectStrategy/variableSelectStrategyUtils.ts
@@ -0,0 +1,32 @@
+import { isEqual } from 'lodash-es';
+
+export const areArraysEqualIgnoreOrder = (
+	a: (string | number | boolean)[],
+	b: (string | number | boolean)[],
+): boolean => {
+	if (a.length !== b.length) {
+		return false;
+	}
+	const sortedA = [...a].sort();
+	const sortedB = [...b].sort();
+	return isEqual(sortedA, sortedB);
+};
+
+export const uniqueValues = (values: string[] | string): string[] | string => {
+	if (Array.isArray(values)) {
+		const uniqueValues: string[] = [];
+		const seenValues = new Set<string>();
+
+		values.forEach((value) => {
+			if (seenValues.has(value)) {
+				return;
+			}
+			seenValues.add(value);
+			uniqueValues.push(value);
+		});
+
+		return uniqueValues;
+	}
+
+	return values;
+};
--- a/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
+++ b/frontend/src/lib/uPlotLib/utils/tests/getSeriesData.test.ts
@@ -14,7 +14,7 @@ describe('Get Series Data', () => {
 		expect(seriesData.length).toBe(5);
 		expect(seriesData[1].label).toBe('firstLegend');
 		expect(seriesData[1].show).toBe(true);
-		expect(seriesData[1].fill).toBe('#FF6F91');
+		expect(seriesData[1].fill).toBe('#C71585');
 		expect(seriesData[1].width).toBe(2);
 	});

--- a/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
+++ b/frontend/src/lib/uPlotV2/plugins/tests/TooltipPlugin.test.ts
@@ -1,477 +0,0 @@
-import React from 'react';
-import { act, screen, waitFor } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
-import { DashboardCursorSync } from '../TooltipPlugin/types';
-
-// ---------------------------------------------------------------------------
-// Mock helpers
-// ---------------------------------------------------------------------------
-
-type HookHandler = (...args: any[]) => void;
-
-interface ConfigMock {
-	scales: Array<{ props: { time?: boolean } }>;
-	setCursor: jest.Mock;
-	addHook: jest.Mock<() => void, [string, HookHandler]> & {
-		removeCallbacks: jest.Mock[];
-	};
-}
-
-function createConfigMock(
-	overrides: Partial<ConfigMock> = {},
-): ConfigMock & { removeCallbacks: jest.Mock[] } {
-	const removeCallbacks: jest.Mock[] = [];
-
-	const addHook = Object.assign(
-		jest.fn((_: string, _handler: HookHandler) => {
-			const remove = jest.fn();
-			removeCallbacks.push(remove);
-			return remove;
-		}),
-		{ removeCallbacks },
-	) as ConfigMock['addHook'];
-
-	return {
-		scales: [{ props: { time: false } }],
-		setCursor: jest.fn(),
-		addHook,
-		...overrides,
-		removeCallbacks,
-	};
-}
-
-function getHandler(config: ConfigMock, hookName: string): HookHandler {
-	const call = config.addHook.mock.calls.find(([name]) => name === hookName);
-	if (!call) {
-		throw new Error(`Hook "${hookName}" was not registered on config`);
-	}
-	return call[1];
-}
-
-function createFakePlot(): {
-	over: HTMLDivElement;
-	setCursor: jest.Mock;
-	cursor: { event: Record<string, unknown> };
-} {
-	return {
-		over: document.createElement('div'),
-		setCursor: jest.fn(),
-		cursor: { event: {} },
-	};
-}
-
-// ---------------------------------------------------------------------------
-// Tests
-// ---------------------------------------------------------------------------
-
-describe('TooltipPlugin', () => {
-	beforeEach(() => {
-		jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
-			(callback as FrameRequestCallback)(0);
-			return 0;
-		});
-		jest
-			.spyOn(window, 'cancelAnimationFrame')
-			// eslint-disable-next-line @typescript-eslint/no-empty-function
-			.mockImplementation(() => {});
-	});
-
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-
-	/**
-	 * Shorthand: render the plugin, initialise a fake plot, and trigger a
-	 * series focus so the tooltip becomes visible. Returns the fake plot
-	 * instance for further interaction (e.g. clicking the overlay).
-	 */
-	function renderAndActivateHover(
-		config: ConfigMock,
-		renderFn: (...args: any[]) => React.ReactNode = (): React.ReactNode =>
-			React.createElement('div', null, 'tooltip-body'),
-		extraProps: Record<string, unknown> = {},
-	): ReturnType<typeof createFakePlot> {
-		render(
-			React.createElement(TooltipPlugin, {
-				config: config as any,
-				render: renderFn,
-				syncMode: DashboardCursorSync.None,
-				...extraProps,
-			}),
-		);
-
-		const fakePlot = createFakePlot();
-		const initHandler = getHandler(config, 'init');
-		const setSeriesHandler = getHandler(config, 'setSeries');
-
-		act(() => {
-			initHandler(fakePlot);
-			setSeriesHandler(fakePlot, 1, { focus: true });
-		});
-
-		return fakePlot;
-	}
-
-	// ---- Initial state --------------------------------------------------------
-
-	describe('before any interaction', () => {
-		it('does not render anything when there is no active hover', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-		});
-
-		it('registers all required uPlot hooks on mount', () => {
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			const registered = config.addHook.mock.calls.map(([name]) => name);
-			expect(registered).toContain('ready');
-			expect(registered).toContain('init');
-			expect(registered).toContain('setData');
-			expect(registered).toContain('setSeries');
-			expect(registered).toContain('setLegend');
-			expect(registered).toContain('setCursor');
-		});
-	});
-
-	// ---- Tooltip rendering ------------------------------------------------------
-
-	describe('tooltip rendering', () => {
-		it('renders contents into a portal on document.body when hover is active', () => {
-			const config = createConfigMock();
-			const renderTooltip = jest.fn(() =>
-				React.createElement('div', null, 'tooltip-body'),
-			);
-
-			renderAndActivateHover(config, renderTooltip);
-
-			expect(renderTooltip).toHaveBeenCalled();
-			expect(screen.getByText('tooltip-body')).toBeInTheDocument();
-
-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
-			expect(container).not.toBeNull();
-			expect(container.parentElement).toBe(document.body);
-		});
-	});
-
-	// ---- Pin behaviour ----------------------------------------------------------
-
-	describe('pin behaviour', () => {
-		it('pins the tooltip when canPinTooltip is true and overlay is clicked', () => {
-			const config = createConfigMock();
-
-			const fakePlot = renderAndActivateHover(config, undefined, {
-				canPinTooltip: true,
-			});
-
-			const container = document.querySelector(
-				'.tooltip-plugin-container',
-			) as HTMLElement;
-			expect(container.classList.contains('pinned')).toBe(false);
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-			});
-
-			return waitFor(() => {
-				const updated = document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement | null;
-				expect(updated).not.toBeNull();
-				expect(updated?.classList.contains('pinned')).toBe(true);
-			});
-		});
-
-		it('dismisses a pinned tooltip via the dismiss callback', async () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: (args: any) =>
-						React.createElement(
-							'button',
-							{ type: 'button', onClick: args.dismiss },
-							'Dismiss',
-						),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			// Pin the tooltip.
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			const button = await screen.findByRole('button', { name: 'Dismiss' });
-
-			act(() => {
-				button.click();
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('drops a pinned tooltip when the underlying data changes', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'tooltip-body'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			// Pin.
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				(document.querySelector(
-					'.tooltip-plugin-container',
-				) as HTMLElement)?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Simulate data update – should dismiss the pinned tooltip.
-			act(() => {
-				getHandler(config, 'setData')(fakePlot);
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('unpins the tooltip on outside mousedown', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'pinned content'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Click outside the tooltip container.
-			act(() => {
-				document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-
-		it('unpins the tooltip on outside keydown', () => {
-			jest.useFakeTimers();
-			const config = createConfigMock();
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => React.createElement('div', null, 'pinned content'),
-					syncMode: DashboardCursorSync.None,
-					canPinTooltip: true,
-				}),
-			);
-
-			const fakePlot = createFakePlot();
-
-			act(() => {
-				getHandler(config, 'init')(fakePlot);
-				getHandler(config, 'setSeries')(fakePlot, 1, { focus: true });
-				jest.runAllTimers();
-			});
-
-			act(() => {
-				fakePlot.over.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-				jest.runAllTimers();
-			});
-
-			expect(
-				document
-					.querySelector('.tooltip-plugin-container')
-					?.classList.contains('pinned'),
-			).toBe(true);
-
-			// Press a key outside the tooltip.
-			act(() => {
-				document.body.dispatchEvent(
-					new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
-				);
-				jest.runAllTimers();
-			});
-
-			expect(document.querySelector('.tooltip-plugin-container')).toBeNull();
-
-			jest.useRealTimers();
-		});
-	});
-
-	// ---- Cursor sync ------------------------------------------------------------
-
-	describe('cursor sync', () => {
-		it('enables uPlot cursor sync for time-based scales when mode is Tooltip', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: true } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.Tooltip,
-					syncKey: 'dashboard-sync',
-				}),
-			);
-
-			expect(config.setCursor).toHaveBeenCalledWith({
-				sync: { key: 'dashboard-sync', scales: ['x', null] },
-			});
-		});
-
-		it('does not enable cursor sync when mode is None', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: true } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			expect(config.setCursor).not.toHaveBeenCalled();
-		});
-
-		it('does not enable cursor sync when scale is not time-based', () => {
-			const config = createConfigMock({
-				scales: [{ props: { time: false } }],
-			} as any);
-
-			render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.Tooltip,
-				}),
-			);
-
-			expect(config.setCursor).not.toHaveBeenCalled();
-		});
-	});
-
-	// ---- Cleanup ----------------------------------------------------------------
-
-	describe('cleanup on unmount', () => {
-		it('removes window event listeners and all uPlot hooks', () => {
-			const config = createConfigMock();
-			const addSpy = jest.spyOn(window, 'addEventListener');
-			const removeSpy = jest.spyOn(window, 'removeEventListener');
-
-			const { unmount } = render(
-				React.createElement(TooltipPlugin, {
-					config: config as any,
-					render: () => null,
-					syncMode: DashboardCursorSync.None,
-				}),
-			);
-
-			const resizeCall = addSpy.mock.calls.find(([type]) => type === 'resize');
-			const scrollCall = addSpy.mock.calls.find(([type]) => type === 'scroll');
-
-			expect(resizeCall).toBeDefined();
-			expect(scrollCall).toBeDefined();
-
-			const resizeListener = resizeCall?.[1] as EventListener;
-			const scrollListener = scrollCall?.[1] as EventListener;
-			const scrollOptions = scrollCall?.[2];
-
-			unmount();
-
-			config.removeCallbacks.forEach((removeFn) => {
-				expect(removeFn).toHaveBeenCalledTimes(1);
-			});
-
-			expect(removeSpy).toHaveBeenCalledWith('resize', resizeListener);
-			expect(removeSpy).toHaveBeenCalledWith(
-				'scroll',
-				scrollListener,
-				scrollOptions,
-			);
-		});
-	});
-});
Author	SHA1	Message	Date
Ashwin Bhatkal	adbd0e8389	Merge branch 'main' into chore/issue-3780-use-variable-select-strategy	2026-02-09 12:15:33 +05:30
Ashwin Bhatkal	a360746f24	chore: revert custom multi select	2026-02-09 12:14:54 +05:30
Ashwin Bhatkal	7401944d9d	chore: use variable select strategy	2026-02-09 11:21:35 +05:30