Merge branch 'main' into SIG_8931

.github/CODEOWNERS

@@ -43,12 +43,6 @@
 /pkg/analytics/ @vikrantgupta25
 /pkg/statsreporter/ @vikrantgupta25
 
-# Emailing Owners
-
-/pkg/emailing/ @vikrantgupta25
-/pkg/types/emailtypes/ @vikrantgupta25
-/templates/email/ @vikrantgupta25
-
 # Querier Owners
 
 /pkg/querier/ @srikanthccv

.vscode/settings.json

@@ -14,8 +14,5 @@
 	},
 	"[sql]": {
 		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
-	},
-	"[html]": {
-		"editor.defaultFormatter": "vscode.html-language-features"
 	}
 }

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,4 +1,4 @@
-FROM node:22-bookworm AS build
+FROM node:18-bullseye AS build
 
 WORKDIR /opt/
 COPY ./frontend/ ./

conf/example.yaml

@@ -193,15 +193,6 @@ emailing:
   templates:
     # The directory containing the email templates. This directory should contain a list of files defined at pkg/types/emailtypes/template.go.
     directory: /opt/signoz/conf/templates/email
-    format:
-      header:
-        enabled: false
-        logo_url: ""
-      help:
-        enabled: false
-        email: ""
-      footer:
-        enabled: false
   smtp:
     # The SMTP server address.
     address: localhost:25
@@ -309,14 +300,3 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
-  root:
-    # Whether to enable the root user. When enabled, a root user is provisioned
-    # on startup using the email and password below. The root user cannot be
-    # deleted, updated, or have their password changed through the UI.
-    enabled: false
-    # The email address of the root user.
-    email: ""
-    # The password of the root user. Must meet password requirements.
-    password: ""
-    # The name of the organization to create or look up for the root user.
-    org_name: default

docs/api/openapi.yml

@@ -4678,8 +4678,6 @@ components:
           type: string
         id:
           type: string
-        isRoot:
-          type: boolean
         orgId:
           type: string
         role:

ee/query-service/app/api/api.go

@@ -45,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -58,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	}, config)
+	})
 
 	if err != nil {
 		return nil, err

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
 	if err != nil {
 		return nil, err
 	}

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -1542,10 +1542,6 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	id?: string;
-	/**
-	 * @type boolean
-	 */
-	isRoot?: boolean;
 	/**
 	 * @type string
 	 */

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -15,6 +15,8 @@ export const getKeySuggestions = (
 		fieldContext = '',
 		fieldDataType = '',
 		signalSource = '',
+		startUnixMilli = '',
+		endUnixMilli = '',
 	} = props;
 
 	const encodedSignal = encodeURIComponent(signal);
@@ -24,7 +26,14 @@ export const getKeySuggestions = (
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);
 
-	return axios.get(
-		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
-	);
+	let url = `/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`;
+
+	if (startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${startUnixMilli}`;
+	}
+	if (endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${endUnixMilli}`;
+	}
+
+	return axios.get(url);
 };

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -8,7 +8,16 @@ import {
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
-	const { signal, key, searchText, signalSource, metricName } = props;
+	const {
+		signal,
+		key,
+		searchText,
+		signalSource,
+		metricName,
+		startUnixMilli,
+		endUnixMilli,
+		existingQuery,
+	} = props;
 
 	const encodedSignal = encodeURIComponent(signal);
 	const encodedKey = encodeURIComponent(key);
@@ -16,7 +25,17 @@ export const getValueSuggestions = (
 	const encodedSearchText = encodeURIComponent(searchText);
 	const encodedSource = encodeURIComponent(signalSource || '');
 
-	return axios.get(
-		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
-	);
+	let url = `/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`;
+
+	if (startUnixMilli !== undefined) {
+		url += `&startUnixMilli=${startUnixMilli}`;
+	}
+	if (endUnixMilli !== undefined) {
+		url += `&endUnixMilli=${endUnixMilli}`;
+	}
+	if (existingQuery) {
+		url += `&existingQuery=${encodeURIComponent(existingQuery)}`;
+	}
+
+	return axios.get(url);
 };

frontend/src/api/v5/queryRange/convertV5Response.test.ts

@@ -73,7 +73,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'time_series',
 			data: { results: [timeSeries] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('time_series', [
@@ -156,7 +156,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [
@@ -239,7 +239,7 @@ describe('convertV5ResponseToLegacy', () => {
 		const v5Data: QueryRangeResponseV5 = {
 			type: 'scalar',
 			data: { results: [scalar] },
-			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0, stepIntervals: {} },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
 		};
 
 		const params = makeBaseParams('scalar', [

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -388,7 +388,6 @@ export function convertV5ResponseToLegacy(
 					warnings: v5Data?.data?.warning || [],
 				},
 				warning: v5Data?.warning || undefined,
-				meta: v5Data?.meta,
 			},
 			warning: v5Data?.warning || undefined,
 		};
@@ -407,7 +406,6 @@ export function convertV5ResponseToLegacy(
 		payload: {
 			data: convertedData,
 			warning: v5Response.payload?.data?.warning || undefined,
-			meta: v5Data?.meta,
 		},
 	};
 

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

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

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -1,9 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { Select, Spin } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { AppState } from 'store/reducers';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 import './ListViewOrderBy.styles.scss';
 
@@ -34,13 +37,35 @@ function ListViewOrderBy({
 	>([]);
 	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+	// Get time range from Redux global state
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// Convert nanoseconds to milliseconds - use useMemo with both deps to avoid multiple updates
+	const timeRange = useMemo(
+		() => ({
+			startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+			endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+		}),
+		[globalTime.minTime, globalTime.maxTime],
+	);
+
 	// Fetch key suggestions based on debounced input
 	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
+		queryKey: [
+			'orderByKeySuggestions',
+			dataSource,
+			debouncedInput,
+			timeRange.startUnixMilli,
+			timeRange.endUnixMilli,
+		],
 		queryFn: async () => {
 			const response = await getKeySuggestions({
 				signal: dataSource,
 				searchText: debouncedInput,
+				startUnixMilli: timeRange.startUnixMilli,
+				endUnixMilli: timeRange.endUnixMilli,
 			});
 			return response.data;
 		},

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

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { CheckCircleFilled } from '@ant-design/icons';
 import {
 	autocompletion,
@@ -33,6 +34,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
 import { Info, TriangleAlert } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { AppState } from 'store/reducers';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -41,6 +44,7 @@ import {
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import {
 	getCurrentValueIndexAtCursor,
 	getQueryContextAtCursor,
@@ -112,6 +116,20 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
+	// Get time range from Redux global state
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// Convert nanoseconds to milliseconds - use useMemo with both deps to avoid multiple updates
+	const timeRange = useMemo(
+		() => ({
+			startUnixMilli: Math.floor(globalTime.minTime / 1000000),
+			endUnixMilli: Math.floor(globalTime.maxTime / 1000000),
+		}),
+		[globalTime.minTime, globalTime.maxTime],
+	);
+
 	const handleQueryValidation = useCallback((newExpression: string): void => {
 		try {
 			const validationResponse = validateQuery(newExpression);
@@ -270,8 +288,9 @@ function QuerySearch({
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
+				startUnixMilli: timeRange.startUnixMilli,
+				endUnixMilli: timeRange.endUnixMilli,
 			});
-
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
@@ -301,6 +320,8 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
+			timeRange.startUnixMilli,
+			timeRange.endUnixMilli,
 		],
 	);
 
@@ -313,7 +334,12 @@ function QuerySearch({
 		setKeySuggestions([]);
 		debouncedFetchKeySuggestions();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dataSource, debouncedMetricName]);
+	}, [
+		dataSource,
+		debouncedMetricName,
+		timeRange.startUnixMilli,
+		timeRange.endUnixMilli,
+	]);
 
 	// Add a state for tracking editing mode
 	const [editingMode, setEditingMode] = useState<
@@ -431,6 +457,7 @@ function QuerySearch({
 			}
 
 			const sanitizedSearchText = searchText ? searchText?.trim() : '';
+			const existingQuery = queryData.filter?.expression || '';
 
 			try {
 				const response = await getValueSuggestions({
@@ -439,9 +466,10 @@ function QuerySearch({
 					signal: dataSource,
 					signalSource: signalSource as 'meter' | '',
 					metricName: debouncedMetricName ?? undefined,
-				});
-
-				// Skip updates if component unmounted or key changed
+					startUnixMilli: timeRange.startUnixMilli,
+					endUnixMilli: timeRange.endUnixMilli,
+					existingQuery,
+				}); // Skip updates if component unmounted or key changed
 				if (
 					!isMountedRef.current ||
 					lastKeyRef.current !== key ||
@@ -453,10 +481,10 @@ function QuerySearch({
 				// Process the response data
 				const responseData = response.data as any;
 				const values = responseData.data?.values || {};
-				const stringValues = values.stringValues || [];
-				const numberValues = values.numberValues || [];
-
-				// Generate options from string values - explicitly handle empty strings
+				const relatedValues = values.relatedValues || [];
+				const stringValues =
+					relatedValues.length > 0 ? relatedValues : values.stringValues || [];
+				const numberValues = values.numberValues || []; // Generate options from string values - explicitly handle empty strings
 				const stringOptions = stringValues
 					// Strict filtering for empty string - we'll handle it as a special case if needed
 					.filter(
@@ -528,11 +556,14 @@ function QuerySearch({
 		},
 		[
 			activeKey,
-			dataSource,
 			isLoadingSuggestions,
-			debouncedMetricName,
-			signalSource,
+			queryData.filter?.expression,
 			toggleSuggestions,
+			dataSource,
+			signalSource,
+			debouncedMetricName,
+			timeRange.startUnixMilli,
+			timeRange.endUnixMilli,
 		],
 	);
 
@@ -1249,19 +1280,17 @@ function QuerySearch({
 		if (!queryContext) {
 			return;
 		}
-		// Trigger suggestions based on context
-		if (editorRef.current) {
+		// Only trigger suggestions and fetch if editor is focused (i.e., user is interacting)
+		if (isFocused && editorRef.current) {
 			toggleSuggestions(10);
-		}
-
-		// Handle value suggestions for value context
-		if (queryContext.isInValue) {
-			const { keyToken, currentToken } = queryContext;
-			const key = keyToken || currentToken;
-
-			// Only fetch if needed and if we have a valid key
-			if (key && key !== activeKey && !isLoadingSuggestions) {
-				fetchValueSuggestions({ key });
+			// Handle value suggestions for value context
+			if (queryContext.isInValue) {
+				const { keyToken, currentToken } = queryContext;
+				const key = keyToken || currentToken;
+				// Only fetch if needed and if we have a valid key
+				if (key && key !== activeKey && !isLoadingSuggestions) {
+					fetchValueSuggestions({ key });
+				}
 			}
 		}
 	}, [
@@ -1270,6 +1299,7 @@ function QuerySearch({
 		isLoadingSuggestions,
 		activeKey,
 		fetchValueSuggestions,
+		isFocused,
 	]);
 
 	const getTooltipContent = (): JSX.Element => (

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

@@ -138,6 +138,93 @@
 			cursor: pointer;
 		}
 	}
+
+	.search-prompt {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8px;
+		padding: 10px 12px;
+		margin-top: 4px;
+		border: 1px dashed var(--bg-amber-500);
+		border-radius: 10px;
+		color: var(--bg-amber-200);
+		background: linear-gradient(
+			90deg,
+			var(--bg-ink-500) 0%,
+			var(--bg-ink-400) 100%
+		);
+		cursor: pointer;
+		transition: all 0.16s ease, transform 0.12s ease;
+		text-align: left;
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+
+		&:hover {
+			background: linear-gradient(
+				90deg,
+				var(--bg-ink-400) 0%,
+				var(--bg-ink-300) 100%
+			);
+			box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
+		}
+
+		&:active {
+			transform: translateY(1px);
+		}
+
+		&__icon {
+			color: var(--bg-amber-400);
+			flex-shrink: 0;
+		}
+
+		&__text {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		&__title {
+			color: var(--bg-amber-200);
+		}
+
+		&__subtitle {
+			color: var(--bg-amber-300);
+			font-size: 12px;
+		}
+	}
+	.lightMode & {
+		.search-prompt {
+			border: 1px dashed var(--bg-amber-500);
+			color: var(--bg-amber-800);
+			background: linear-gradient(
+				90deg,
+				var(--bg-vanilla-200) 0%,
+				var(--bg-vanilla-100) 100%
+			);
+			box-shadow: 0 2px 12px rgba(184, 107, 0, 0.08);
+
+			&:hover {
+				background: linear-gradient(
+					90deg,
+					var(--bg-vanilla-100) 0%,
+					var(--bg-vanilla-50) 100%
+				);
+				box-shadow: 0 4px 16px rgba(184, 107, 0, 0.15);
+			}
+
+			&__icon {
+				color: var(--bg-amber-600);
+			}
+
+			&__title {
+				color: var(--bg-amber-800);
+			}
+
+			&__subtitle {
+				color: var(--bg-amber-800);
+			}
+		}
+	}
 	.go-to-docs {
 		display: flex;
 		flex-direction: column;

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

@@ -2,8 +2,16 @@
 /* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+import {
+	Fragment,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { Button, Checkbox, Input, InputRef, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -11,21 +19,18 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import {
-	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
+import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as uuid } from 'uuid';
 
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
@@ -68,6 +73,15 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		panelType,
 	} = useQueryBuilder();
 
+	// Get time range from Redux global state
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	// Convert nanoseconds to milliseconds
+	const startUnixMilli = useMemo(() => Math.floor(minTime / 1000000), [minTime]);
+	const endUnixMilli = useMemo(() => Math.floor(maxTime / 1000000), [maxTime]);
+
 	// Determine if we're in ListView mode
 	const isListView = panelType === PANEL_TYPES.LIST;
 	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
@@ -81,6 +95,12 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		return lastUsedQuery || 0;
 	}, [isListView, source, lastUsedQuery]);
 
+	// Extract current filter expression for the active query
+	const currentFilterExpression = useMemo(() => {
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		return queryData?.filter?.expression || '';
+	}, [currentQuery.builder.queryData, activeQueryIndex]);
+
 	// Check if this filter has active filters in the query
 	const isSomeFilterPresentForCurrentAttribute = useMemo(
 		() =>
@@ -112,47 +132,120 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		filter.defaultOpen,
 	]);
 
-	const { data, isLoading } = useGetAggregateValues(
-		{
-			aggregateOperator: filter.aggregateOperator || 'noop',
-			dataSource: filter.dataSource || DataSource.LOGS,
-			aggregateAttribute: filter.aggregateAttribute || '',
-			attributeKey: filter.attributeKey.key,
-			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
-			tagType: filter.attributeKey.type || '',
-			searchText: searchText ?? '',
-		},
-		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	);
-
 	const {
 		data: keyValueSuggestions,
 		isLoading: isLoadingKeyValueSuggestions,
+		refetch: refetchKeyValueSuggestions,
 	} = useGetQueryKeyValueSuggestions({
 		key: filter.attributeKey.key,
 		signal: filter.dataSource || DataSource.LOGS,
-		signalSource: 'meter',
+		signalSource: source === QuickFiltersSource.METER_EXPLORER ? 'meter' : '',
+		startUnixMilli,
+		endUnixMilli,
+		searchText: searchText || '',
+		existingQuery: currentFilterExpression,
 		options: {
-			enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+			enabled: isOpen,
 			keepPreviousData: true,
 		},
 	});
 
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
+	const searchInputRef = useRef<InputRef | null>(null);
+	const searchContainerRef = useRef<HTMLDivElement | null>(null);
+	const previousFiltersItemsRef = useRef(
+		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items,
+	);
 
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
+	// Refetch when other filters change (not this filter)
+	// Watch for when filters.items is different from previous value, indicating other filters changed
+	useEffect(() => {
+		const currentFiltersItems =
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
+
+		const previousFiltersItems = previousFiltersItemsRef.current;
+
+		// Check if filters items have changed (not the same)
+		const filtersChanged = !isEqual(previousFiltersItems, currentFiltersItems);
+
+		if (isOpen && filtersChanged) {
+			// Check if OTHER filters (not this filter) have changed
+			const currentOtherFilters = currentFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+			const previousOtherFilters = previousFiltersItems?.filter(
+				(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+			);
+
+			// Refetch if other filters changed (not just this filter's values)
+			const otherFiltersChanged = !isEqual(
+				currentOtherFilters,
+				previousOtherFilters,
+			);
+
+			// Only update ref if we have valid API data or if filters actually changed
+			// Don't update if search returned 0 results to preserve unchecked values
+			const hasValidData = keyValueSuggestions && !isLoadingKeyValueSuggestions;
+			if (otherFiltersChanged || hasValidData) {
+				previousFiltersItemsRef.current = currentFiltersItems;
+			}
+
+			if (otherFiltersChanged) {
+				refetchKeyValueSuggestions();
+			}
+		} else {
+			previousFiltersItemsRef.current = currentFiltersItems;
+		}
+	}, [
+		activeQueryIndex,
+		isOpen,
+		refetchKeyValueSuggestions,
+		filter.attributeKey.key,
+		currentQuery.builder.queryData,
+		keyValueSuggestions,
+		isLoadingKeyValueSuggestions,
+	]);
+
+	const handleSearchPromptClick = useCallback((): void => {
+		if (searchContainerRef.current) {
+			searchContainerRef.current.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+		}
+		if (searchInputRef.current) {
+			setTimeout(() => searchInputRef.current?.focus({ cursor: 'end' }), 120);
+		}
+	}, []);
+
+	const isDataComplete = useMemo(() => {
+		if (keyValueSuggestions) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			const responseData = keyValueSuggestions?.data as any;
+			return responseData.data?.complete || false;
+		}
+		return false;
+	}, [keyValueSuggestions]);
+
+	const previousAttributeValuesRef = useRef<string[]>([]);
+
+	const attributeValues: string[] = useMemo(() => {
+		// const dataType = filter.attributeKey.dataType || DataTypes.String;
+
+		if (keyValueSuggestions) {
+			// Process the response data for all pages
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			const responseData = keyValueSuggestions?.data as any;
 			const values = responseData.data?.values || {};
+			const relatedValues = values.relatedValues || [];
 			const stringValues = values.stringValues || [];
 			const numberValues = values.numberValues || [];
 
+			// Use relatedValues if present (these are the checked/selected values)
+			// Otherwise fallback to stringValues
+			const valuesToUse = relatedValues.length > 0 ? relatedValues : stringValues;
+
 			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
+			const stringOptions = valuesToUse
 				// Strict filtering for empty string - we'll handle it as a special case if needed
 				.filter(
 					(value: string | null | undefined): value is string =>
@@ -167,15 +260,26 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				)
 				.map((value: number) => value.toString());
 
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
+			// Combine checked values with previously visible unchecked values
+			let finalValues = [...stringOptions, ...numberOptions];
 
-		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter(
-			(val) => val !== undefined && val !== null,
-		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
+			// When we have search results (relatedValues or stringValues), preserve previously visible unchecked values
+			// Only update ref if we have actual valid data (not empty search results)
+			if (finalValues.length > 0) {
+				const previousValues = previousAttributeValuesRef.current || [];
+				// Keep values that were previously visible but not in new results
+				const preservedValues = previousValues.filter(
+					(val) => !finalValues.includes(val),
+				);
+				finalValues = Array.from(new Set([...finalValues, ...preservedValues]));
+				// Store current values for next refetch only if we have valid data
+				previousAttributeValuesRef.current = finalValues;
+			}
+
+			return finalValues;
+		}
+		return [];
+	}, [keyValueSuggestions]);
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
@@ -249,22 +353,26 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;
 
-	// Sort checked items to the top, then unchecked items
-	const currentAttributeKeys = useMemo(() => {
+	// Sort checked items to the top; always show unchecked items beneath, regardless of pagination
+	const {
+		visibleCheckedValues,
+		uncheckedValues,
+		visibleCheckedCount,
+		hasMoreChecked,
+	} = useMemo(() => {
 		const checkedValues = attributeValues.filter(
 			(val) => currentFilterState[val],
 		);
-		const uncheckedValues = attributeValues.filter(
-			(val) => !currentFilterState[val],
-		);
-		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
-	}, [attributeValues, currentFilterState, visibleItemsCount]);
+		const unchecked = attributeValues.filter((val) => !currentFilterState[val]);
+		const visibleChecked = checkedValues.slice(0, visibleItemsCount);
 
-	// Count of checked values in the currently visible items
-	const checkedValuesCount = useMemo(
-		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
-		[currentAttributeKeys, currentFilterState],
-	);
+		return {
+			visibleCheckedValues: visibleChecked,
+			uncheckedValues: unchecked,
+			visibleCheckedCount: visibleChecked.length,
+			hasMoreChecked: checkedValues.length > visibleChecked.length,
+		};
+	}, [attributeValues, currentFilterState, visibleItemsCount]);
 
 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
@@ -593,35 +701,90 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 				</section>
 			</section>
-			{isOpen &&
-				(isLoading || isLoadingKeyValueSuggestions) &&
-				!attributeValues.length && (
-					<section className="loading">
-						<Skeleton paragraph={{ rows: 4 }} />
-					</section>
-				)}
-			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
+			{isOpen && isLoadingKeyValueSuggestions && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
-						<section className="search">
+						<section className="search" ref={searchContainerRef}>
 							<Input
 								placeholder="Filter values"
 								onChange={(e): void => setSearchTextDebounced(e.target.value)}
 								disabled={isFilterDisabled}
+								ref={searchInputRef}
 							/>
 						</section>
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{currentAttributeKeys.map((value: string, index: number) => (
+							{visibleCheckedValues.map((value: string) => (
 								<Fragment key={value}>
-									{index === checkedValuesCount && checkedValuesCount > 0 && (
-										<div
-											key="separator"
-											className="filter-separator"
-											data-testid="filter-separator"
+									<div className="value">
+										<Checkbox
+											onChange={(e): void => onChange(value, e.target.checked, false)}
+											checked={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											rootClassName="check-box"
 										/>
-									)}
+
+										<div
+											className={cx(
+												'checkbox-value-section',
+												isFilterDisabled ? 'filter-disabled' : '',
+											)}
+											onClick={(): void => {
+												if (isFilterDisabled) {
+													return;
+												}
+												onChange(value, currentFilterState[value], true);
+											}}
+										>
+											<div className={`${filter.title} label-${value}`} />
+											{filter.customRendererForValue ? (
+												filter.customRendererForValue(value)
+											) : (
+												<Typography.Text
+													className="value-string"
+													ellipsis={{ tooltip: { placement: 'top' } }}
+												>
+													{String(value)}
+												</Typography.Text>
+											)}
+											<Button type="text" className="only-btn">
+												{isSomeFilterPresentForCurrentAttribute
+													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+														? 'All'
+														: 'Only'
+													: 'Only'}
+											</Button>
+											<Button type="text" className="toggle-btn">
+												Toggle
+											</Button>
+										</div>
+									</div>
+								</Fragment>
+							))}
+
+							{hasMoreChecked && (
+								<section className="show-more">
+									<Typography.Text
+										className="show-more-text"
+										onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+									>
+										Show More...
+									</Typography.Text>
+								</section>
+							)}
+
+							{visibleCheckedCount > 0 && uncheckedValues.length > 0 && (
+								<div className="filter-separator" data-testid="filter-separator" />
+							)}
+
+							{uncheckedValues.map((value: string) => (
+								<Fragment key={value}>
 									<div className="value">
 										<Checkbox
 											onChange={(e): void => onChange(value, e.target.checked, false)}
@@ -681,16 +844,18 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 							<Typography.Text>No values found</Typography.Text>{' '}
 						</section>
 					)}
-					{visibleItemsCount < attributeValues?.length && (
-						<section className="show-more">
-							<Typography.Text
-								className="show-more-text"
-								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
-							>
-								Show More...
-							</Typography.Text>
-						</section>
-					)}
+					{visibleItemsCount >= attributeValues?.length &&
+						attributeValues?.length > 0 &&
+						!isDataComplete && (
+							<section className="search-prompt" onClick={handleSearchPromptClick}>
+								<AlertTriangle size={16} className="search-prompt__icon" />
+								<span className="search-prompt__text">
+									<Typography.Text className="search-prompt__subtitle">
+										Tap to search and load more suggestions.
+									</Typography.Text>
+								</span>
+							</section>
+						)}
 				</>
 			)}
 		</div>

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -282,11 +282,11 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 						size="small"
 						style={{ marginLeft: 'auto' }}
 						checked={showIP ?? true}
-						onChange={(checked): void => {
+						onClick={(): void => {
 							logEvent('API Monitoring: Show IP addresses clicked', {
-								showIP: checked,
+								showIP: !(showIP ?? true),
 							});
-							setParams({ showIP: checked });
+							setParams({ showIP });
 						}}
 					/>
 				</div>

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,9 +1,6 @@
 import { ENVIRONMENT } from 'constants/env';
-import {
-	ApiMonitoringParams,
-	useApiMonitoringParams,
-} from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import {
 	otherFiltersResponse,
 	quickFiltersAttributeValuesResponse,
@@ -22,23 +19,22 @@ import { QuickFiltersConfig } from './constants';
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
-jest.mock('container/ApiMonitoring/queryParams');
+
+jest.mock('hooks/querySuggestions/useGetQueryKeyValueSuggestions');
 
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
 const putHandler = jest.fn();
-const mockSetApiMonitoringParams = jest.fn() as jest.MockedFunction<
-	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void
->;
-const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
+
+const mockUseGetQueryKeyValueSuggestions = jest.mocked(
+	useGetQueryKeyValueSuggestions,
+);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
 const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
 const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
 const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
-const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
-const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
 const FILTER_OS_DESCRIPTION = 'os.description';
 const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
@@ -62,10 +58,7 @@ const setupServer = (): void => {
 			putHandler(await req.json());
 			return res(ctx.status(200), ctx.json({}));
 		}),
-		rest.get(quickFiltersAttributeValuesURL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
-		),
-		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+		rest.get('*/api/v1/fields/values*', (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
 		),
 	);
@@ -93,28 +86,6 @@ TestQuickFilters.defaultProps = {
 	config: QuickFiltersConfig,
 };
 
-function TestQuickFiltersApiMonitoring({
-	signal = SignalType.LOGS,
-	config = QuickFiltersConfig,
-}: {
-	signal?: SignalType;
-	config?: IQuickFiltersConfig[];
-}): JSX.Element {
-	return (
-		<QuickFilters
-			source={QuickFiltersSource.API_MONITORING}
-			config={config}
-			handleFilterVisibilityChange={handleFilterVisibilityChange}
-			signal={signal}
-		/>
-	);
-}
-
-TestQuickFiltersApiMonitoring.defaultProps = {
-	signal: '',
-	config: QuickFiltersConfig,
-};
-
 beforeAll(() => {
 	server.listen();
 });
@@ -135,18 +106,24 @@ beforeEach(() => {
 				queryData: [
 					{
 						queryName: QUERY_NAME,
-						filters: { items: [{ key: 'test', value: 'value' }] },
+						filters: { items: [], op: 'AND' },
+						filter: { expression: '' },
 					},
 				],
 			},
 		},
 		lastUsedQuery: 0,
+		panelType: 'logs',
 		redirectWithQueryBuilderData,
 	});
-	mockUseApiMonitoringParams.mockReturnValue([
-		{ showIP: true } as ApiMonitoringParams,
-		mockSetApiMonitoringParams,
-	]);
+
+	// Mock the hook to return data with mq-kafka
+	mockUseGetQueryKeyValueSuggestions.mockReturnValue({
+		data: quickFiltersAttributeValuesResponse,
+		isLoading: false,
+		refetch: jest.fn(),
+	} as any);
+
 	setupServer();
 });
 
@@ -259,8 +236,9 @@ describe('Quick Filters', () => {
 
 		render(<TestQuickFilters />);
 
-		// Prefer role if possible; if label text isn’t wired to input, clicking the label text is OK
-		const target = await screen.findByText('mq-kafka');
+		// Wait for the filter to load with data
+		const target = await screen.findByText('mq-kafka', {}, { timeout: 5000 });
+
 		await user.click(target);
 
 		await waitFor(() => {
@@ -286,24 +264,6 @@ describe('Quick Filters', () => {
 			);
 		});
 	});
-	it('toggles Show IP addresses and updates API Monitoring params', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<TestQuickFiltersApiMonitoring />);
-
-		// Switch should be rendered and initially checked
-		expect(screen.getByText('Show IP addresses')).toBeInTheDocument();
-		const toggle = screen.getByRole('switch');
-		expect(toggle).toHaveAttribute('aria-checked', 'true');
-
-		await user.click(toggle);
-
-		await waitFor(() => {
-			expect(mockSetApiMonitoringParams).toHaveBeenCalledWith(
-				expect.objectContaining({ showIP: false }),
-			);
-		});
-	});
 });
 
 describe('Quick Filters with custom filters', () => {

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

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

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

@@ -2,25 +2,18 @@ import { memo, useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useVariableFetchState } from 'hooks/dashboard/useVariableFetchState';
 import useDebounce from 'hooks/useDebounce';
+import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
-import { SuccessResponseV2 } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isRetryableError as checkIfRetryableError } from 'utils/errorUtils';
 
 import SelectVariableInput from './SelectVariableInput';
 import { useDashboardVariableSelectHelper } from './useDashboardVariableSelectHelper';
-import {
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	getOptionsForDynamicVariable,
-	mergeUniqueStrings,
-	settleVariableFetch,
-} from './util';
+import { getOptionsForDynamicVariable } from './util';
 import { VariableItemProps } from './VariableItem';
 import { dynamicVariableSelectStrategy } from './variableSelectStrategy/dynamicVariableSelectStrategy';
 
@@ -31,6 +24,7 @@ type DynamicVariableInputProps = Pick<
 	'variableData' | 'onValueUpdate' | 'existingVariables'
 >;
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function DynamicVariableInput({
 	variableData,
 	onValueUpdate,
@@ -61,8 +55,14 @@ function DynamicVariableInput({
 
 	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
 
+	// Build a memoized list of all currently available option strings (normalized + related)
 	const allAvailableOptionStrings = useMemo(
-		() => mergeUniqueStrings(optionsData, relatedValues),
+		() => [
+			...new Set([
+				...optionsData.map((v) => v.toString()),
+				...relatedValues.map((v) => v.toString()),
+			]),
+		],
 		[optionsData, relatedValues],
 	);
 
@@ -104,24 +104,67 @@ function DynamicVariableInput({
 		(state) => state.globalTime,
 	);
 
-	const {
-		variableFetchCycleId,
-		isVariableSettled,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-	} = useVariableFetchState(variableData.name || '');
+	// 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 existingQuery = useMemo(
-		() =>
-			buildExistingDynamicVariableQuery(
-				existingVariables,
-				variableData.id,
-				!!variableData.dynamicVariablesAttribute,
-			),
-		[existingVariables, variableData.id, variableData.dynamicVariablesAttribute],
-	);
+		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(
@@ -139,73 +182,6 @@ function DynamicVariableInput({
 		[onDropdownVisibleChange, optionsData, originalRelatedValues],
 	);
 
-	const handleQuerySuccess = useCallback(
-		(data: SuccessResponseV2<FieldValueResponse>): void => {
-			const newNormalizedValues = data.data?.normalizedValues || [];
-			const newRelatedValues = data.data?.relatedValues || [];
-
-			if (!debouncedApiSearchText) {
-				setOptionsData(newNormalizedValues);
-				setIsComplete(data.data?.complete || false);
-			}
-			setFilteredOptionsData(newNormalizedValues);
-			setRelatedValues(newRelatedValues);
-			setOriginalRelatedValues(newRelatedValues);
-
-			// Sync temp selection with latest API values when ALL is active and dropdown is open
-			if (variableData.allSelected && isDropdownOpen) {
-				const latestValues = mergeUniqueStrings(
-					newNormalizedValues,
-					newRelatedValues,
-				);
-
-				const currentStrings = Array.isArray(tempSelection)
-					? tempSelection.map((v) => v.toString())
-					: tempSelection
-					? [tempSelection.toString()]
-					: [];
-
-				const areSame =
-					currentStrings.length === latestValues.length &&
-					latestValues.every((v) => currentStrings.includes(v));
-
-				if (!areSame) {
-					setTempSelection(latestValues);
-				}
-			}
-
-			// Apply default if no value is selected (e.g., new variable, first load)
-			if (!debouncedApiSearchText) {
-				applyDefaultIfNeeded(
-					mergeUniqueStrings(newNormalizedValues, newRelatedValues),
-				);
-			}
-
-			settleVariableFetch(variableData.name, 'complete');
-		},
-		[
-			debouncedApiSearchText,
-			variableData.allSelected,
-			variableData.name,
-			isDropdownOpen,
-			tempSelection,
-			setTempSelection,
-			applyDefaultIfNeeded,
-		],
-	);
-
-	const handleQueryError = useCallback(
-		(error: { message?: string } | null): void => {
-			if (error) {
-				setErrorMessage(extractErrorMessage(error));
-				setIsRetryableError(checkIfRetryableError(error));
-			}
-
-			settleVariableFetch(variableData.name, 'failure');
-		},
-		[variableData.name],
-	);
-
 	const { isLoading, refetch } = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
@@ -216,22 +192,13 @@ function DynamicVariableInput({
 			debouncedApiSearchText,
 			variableData.dynamicVariablesSource,
 			variableData.dynamicVariablesAttribute,
-			variableFetchCycleId,
 		],
 		{
-			/*
-			 * enabled if
-			 * - we have dynamic variable source and attribute defined (ALWAYS)
-			 * - AND
-			 *   - we're either still fetching variable options
-			 *   - OR
-			 *   - if variable is in idle state and we have already fetched options for it
-			 **/
 			enabled:
+				variableData.type === 'DYNAMIC' &&
 				!!variableData.dynamicVariablesSource &&
-				!!variableData.dynamicVariablesAttribute &&
-				(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
-			queryFn: ({ signal }) =>
+				!!variableData.dynamicVariablesAttribute,
+			queryFn: () =>
 				getFieldValues(
 					variableData.dynamicVariablesSource?.toLowerCase() === 'all telemetry'
 						? undefined
@@ -244,10 +211,70 @@ function DynamicVariableInput({
 					minTime,
 					maxTime,
 					existingQuery,
-					signal,
 				),
-			onSuccess: handleQuerySuccess,
-			onError: handleQueryError,
+			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);
+				}
+			},
 		},
 	);
 
@@ -309,8 +336,6 @@ function DynamicVariableInput({
 			showRetryButton={isRetryableError}
 			showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
 			onSearch={handleSearch}
-			waiting={isVariableWaitingForDependencies}
-			waitingMessage={variableDependencyWaitMessage}
 		/>
 	);
 }

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

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

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

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

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

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

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

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

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

@@ -7,19 +7,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Don't mock the components - use real ones
 
 // Mock for useQuery
@@ -230,10 +217,9 @@ describe('DynamicVariableInput Component', () => {
 				'',
 				'Traces',
 				'service.name',
-				0, // variableFetchCycleId
 			],
 			expect.objectContaining({
-				enabled: true, // isVariableFetching is true from mock
+				enabled: true, // Type is 'DYNAMIC'
 				queryFn: expect.any(Function),
 				onSuccess: expect.any(Function),
 				onError: expect.any(Function),

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

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

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

@@ -2,12 +2,14 @@ import {
 	buildDependencies,
 	buildDependencyGraph,
 	buildParentDependencyGraph,
+	checkAPIInvocation,
 	onUpdateVariableNode,
 	VariableGraph,
 } from '../util';
 import {
 	buildDependenciesMock,
 	buildGraphMock,
+	checkAPIInvocationMock,
 	onUpdateVariableNodeMock,
 } from './mock';
 
@@ -70,6 +72,97 @@ describe('dashboardVariables - utilities and processors', () => {
 		});
 	});
 
+	describe('checkAPIInvocation', () => {
+		const {
+			variablesToGetUpdated,
+			variableData,
+			parentDependencyGraph,
+		} = checkAPIInvocationMock;
+
+		const mockRootElement = {
+			name: 'deployment_environment',
+			key: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			id: '036a47cd-9ffc-47de-9f27-0329198964a8',
+			modificationUUID: '5f71b591-f583-497c-839d-6a1590c3f60f',
+			selectedValue: 'production',
+			type: 'QUERY',
+			// ... other properties omitted for brevity
+		} as any;
+
+		describe('edge cases', () => {
+			it('should return false when variableData is empty', () => {
+				expect(
+					checkAPIInvocation(
+						variablesToGetUpdated,
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return true when parentDependencyGraph is empty', () => {
+				expect(
+					checkAPIInvocation(variablesToGetUpdated, variableData, {}),
+				).toBeFalsy();
+			});
+		});
+
+		describe('variable sequences', () => {
+			it('should return true for valid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return false for invalid sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['k8s_cluster_name', 'k8s_node_name', 'k8s_namespace_name'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+
+			it('should return false when variableData is not in sequence', () => {
+				expect(
+					checkAPIInvocation(
+						['deployment_environment', 'service_name', 'endpoint'],
+						variableData,
+						parentDependencyGraph,
+					),
+				).toBeFalsy();
+			});
+		});
+
+		describe('root element behavior', () => {
+			it('should return true for valid root element sequence', () => {
+				expect(
+					checkAPIInvocation(
+						[
+							'deployment_environment',
+							'service_name',
+							'endpoint',
+							'http_status_code',
+						],
+						mockRootElement,
+						parentDependencyGraph,
+					),
+				).toBeTruthy();
+			});
+
+			it('should return true for empty variablesToGetUpdated array', () => {
+				expect(
+					checkAPIInvocation([], mockRootElement, parentDependencyGraph),
+				).toBeTruthy();
+			});
+		});
+	});
+
 	describe('Graph Building Utilities', () => {
 		const { graph } = buildGraphMock;
 		const { variables } = buildDependenciesMock;
@@ -130,86 +223,10 @@ describe('dashboardVariables - utilities and processors', () => {
 					},
 					hasCycle: false,
 					cycleNodes: undefined,
-					transitiveDescendants: {
-						deployment_environment: ['service_name', 'endpoint', 'http_status_code'],
-						endpoint: ['http_status_code'],
-						environment: [],
-						http_status_code: [],
-						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
-						k8s_namespace_name: [],
-						k8s_node_name: ['k8s_namespace_name'],
-						service_name: ['endpoint', 'http_status_code'],
-					},
 				};
 
 				expect(buildDependencyGraph(graph)).toEqual(expected);
 			});
-
-			it('should return empty transitiveDescendants for an empty graph', () => {
-				const result = buildDependencyGraph({});
-				expect(result.transitiveDescendants).toEqual({});
-				expect(result.order).toEqual([]);
-				expect(result.hasCycle).toBe(false);
-			});
-
-			it('should compute transitiveDescendants for a linear chain (a -> b -> c)', () => {
-				const linearGraph: VariableGraph = {
-					a: ['b'],
-					b: ['c'],
-					c: [],
-				};
-				const result = buildDependencyGraph(linearGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: ['b', 'c'],
-					b: ['c'],
-					c: [],
-				});
-			});
-
-			it('should compute transitiveDescendants for a diamond dependency (a -> b, a -> c, b -> d, c -> d)', () => {
-				const diamondGraph: VariableGraph = {
-					a: ['b', 'c'],
-					b: ['d'],
-					c: ['d'],
-					d: [],
-				};
-				const result = buildDependencyGraph(diamondGraph);
-				expect(result.transitiveDescendants.a).toEqual(
-					expect.arrayContaining(['b', 'c', 'd']),
-				);
-				expect(result.transitiveDescendants.a).toHaveLength(3);
-				expect(result.transitiveDescendants.b).toEqual(['d']);
-				expect(result.transitiveDescendants.c).toEqual(['d']);
-				expect(result.transitiveDescendants.d).toEqual([]);
-			});
-
-			it('should handle disconnected components in transitiveDescendants', () => {
-				const disconnectedGraph: VariableGraph = {
-					a: ['b'],
-					b: [],
-					x: ['y'],
-					y: [],
-				};
-				const result = buildDependencyGraph(disconnectedGraph);
-				expect(result.transitiveDescendants.a).toEqual(['b']);
-				expect(result.transitiveDescendants.b).toEqual([]);
-				expect(result.transitiveDescendants.x).toEqual(['y']);
-				expect(result.transitiveDescendants.y).toEqual([]);
-			});
-
-			it('should return empty transitiveDescendants for all leaf nodes', () => {
-				const leafOnlyGraph: VariableGraph = {
-					a: [],
-					b: [],
-					c: [],
-				};
-				const result = buildDependencyGraph(leafOnlyGraph);
-				expect(result.transitiveDescendants).toEqual({
-					a: [],
-					b: [],
-					c: [],
-				});
-			});
 		});
 
 		describe('buildDependencies', () => {

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

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

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

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

frontend/src/container/DashboardContainer/DashboardVariablesSelection/utils.test.ts

@@ -1,31 +1,4 @@
-jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
-	variableFetchStore: {
-		getSnapshot: jest.fn(),
-	},
-	onVariableFetchComplete: jest.fn(),
-	onVariableFetchFailure: jest.fn(),
-}));
-
-import {
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import {
-	areArraysEqual,
-	buildExistingDynamicVariableQuery,
-	extractErrorMessage,
-	mergeUniqueStrings,
-	onUpdateVariableNode,
-	settleVariableFetch,
-	VariableGraph,
-} from './util';
-
-// ────────────────────────────────────────────────────────────────
-// Existing tests
-// ────────────────────────────────────────────────────────────────
+import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
 
 describe('areArraysEqual', () => {
 	it('should return true for equal arrays with same order', () => {
@@ -176,348 +149,3 @@ describe('onUpdateVariableNode', () => {
 		expect(visited).toEqual(['namespace', 'service', 'pod']);
 	});
 });
-
-// ────────────────────────────────────────────────────────────────
-// New tests for functions added in recent commits
-// ────────────────────────────────────────────────────────────────
-
-function makeDynamicVar(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'DYNAMIC',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		dynamicVariablesAttribute: 'attr',
-		selectedValue: 'some-value',
-		...overrides,
-	} as IDashboardVariable;
-}
-
-describe('mergeUniqueStrings', () => {
-	it('should merge two arrays and deduplicate', () => {
-		expect(mergeUniqueStrings(['a', 'b'], ['b', 'c'])).toEqual(['a', 'b', 'c']);
-	});
-
-	it('should convert numbers and booleans to strings', () => {
-		expect(mergeUniqueStrings([1, true, 'hello'], [2, false])).toEqual([
-			'1',
-			'true',
-			'hello',
-			'2',
-			'false',
-		]);
-	});
-
-	it('should deduplicate when number and its string form both appear', () => {
-		expect(mergeUniqueStrings([42], ['42'])).toEqual(['42']);
-	});
-
-	it('should handle a single array', () => {
-		expect(mergeUniqueStrings(['x', 'y', 'x'])).toEqual(['x', 'y']);
-	});
-
-	it('should handle three or more arrays', () => {
-		expect(mergeUniqueStrings(['a'], ['b'], ['c'], ['a', 'c'])).toEqual([
-			'a',
-			'b',
-			'c',
-		]);
-	});
-
-	it('should return empty array when no arrays are provided', () => {
-		expect(mergeUniqueStrings()).toEqual([]);
-	});
-
-	it('should return empty array when all input arrays are empty', () => {
-		expect(mergeUniqueStrings([], [], [])).toEqual([]);
-	});
-
-	it('should preserve order of first occurrence', () => {
-		expect(mergeUniqueStrings(['c', 'a'], ['b', 'a'])).toEqual(['c', 'a', 'b']);
-	});
-});
-
-describe('buildExistingDynamicVariableQuery', () => {
-	// --- Guard clauses ---
-	it('should return empty string when existingVariables is null', () => {
-		expect(buildExistingDynamicVariableQuery(null, 'v1', true)).toBe('');
-	});
-
-	it('should return empty string when hasDynamicAttribute is false', () => {
-		const variables = { v2: makeDynamicVar({ id: 'v2' }) };
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', false)).toBe('');
-	});
-
-	// --- Eligibility filtering ---
-	it('should skip the current variable (same id)', () => {
-		const variables = {
-			v1: makeDynamicVar({
-				id: 'v1',
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip non-DYNAMIC variables', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables without dynamicVariablesAttribute', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: undefined,
-				selectedValue: 'val',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with null selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: null }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty string selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: '' }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables with empty array selectedValue', () => {
-		const variables = {
-			v2: makeDynamicVar({ id: 'v2', selectedValue: [] }),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should skip variables where showALLOption and allSelected are both true', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: true,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-
-	it('should include variable with showALLOption true but allSelected false', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				showALLOption: true,
-				allSelected: false,
-				dynamicVariablesAttribute: 'ns',
-				selectedValue: 'prod',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"ns = 'prod'",
-		);
-	});
-
-	// --- Value formatting ---
-	it('should quote string values in the query', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: 'zeus',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name = 'zeus'",
-		);
-	});
-
-	it('should leave numeric values unquoted', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: '200',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			'http.status_code = 200',
-		);
-	});
-
-	it('should escape single quotes in string values', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'user.name',
-				selectedValue: "O'Brien",
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"user.name = 'O\\'Brien'",
-		);
-	});
-
-	it('should build an IN clause for array selectedValue with multiple items', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene']",
-		);
-	});
-
-	it('should handle mix of numeric and string values in IN clause', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'http.status_code',
-				selectedValue: ['200', 'unknown'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"http.status_code IN [200, 'unknown']",
-		);
-	});
-
-	it('should filter out empty string values from array', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'region',
-				selectedValue: ['us-east', '', 'eu-west'],
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"region IN ['us-east', 'eu-west']",
-		);
-	});
-
-	// --- Multiple siblings ---
-	it('should join multiple sibling variables with AND', () => {
-		const variables = {
-			v2: makeDynamicVar({
-				id: 'v2',
-				dynamicVariablesAttribute: 'k8s.namespace.name',
-				selectedValue: ['zeus', 'gene'],
-			}),
-			v3: makeDynamicVar({
-				id: 'v3',
-				dynamicVariablesAttribute: 'doc_op_type',
-				selectedValue: 'test',
-			}),
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe(
-			"k8s.namespace.name IN ['zeus', 'gene'] AND doc_op_type = 'test'",
-		);
-	});
-
-	it('should return empty string when no variables are eligible', () => {
-		const variables = {
-			v1: makeDynamicVar({ id: 'v1' }), // same as current — skipped
-			v2: makeDynamicVar({ id: 'v2', type: 'QUERY' as any }), // not DYNAMIC
-			v3: makeDynamicVar({ id: 'v3', selectedValue: null }), // no value
-		};
-		expect(buildExistingDynamicVariableQuery(variables, 'v1', true)).toBe('');
-	});
-});
-
-describe('settleVariableFetch', () => {
-	const mockGetSnapshot = variableFetchStore.getSnapshot as jest.Mock;
-	const mockComplete = onVariableFetchComplete as jest.Mock;
-	const mockFailure = onVariableFetchFailure as jest.Mock;
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('should no-op when name is undefined', () => {
-		settleVariableFetch(undefined, 'complete');
-		expect(mockGetSnapshot).not.toHaveBeenCalled();
-		expect(mockComplete).not.toHaveBeenCalled();
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it.each(['idle', 'waiting', 'error', undefined] as const)(
-		'should no-op when variable state is %s',
-		(state) => {
-			mockGetSnapshot.mockReturnValue({ states: { myVar: state } });
-			settleVariableFetch('myVar', 'complete');
-			expect(mockComplete).not.toHaveBeenCalled();
-			expect(mockFailure).not.toHaveBeenCalled();
-		},
-	);
-
-	it('should call onVariableFetchComplete when state is loading and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchComplete when state is revalidating and outcome is complete', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'complete');
-		expect(mockComplete).toHaveBeenCalledWith('myVar');
-		expect(mockFailure).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is loading and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'loading' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-
-	it('should call onVariableFetchFailure when state is revalidating and outcome is failure', () => {
-		mockGetSnapshot.mockReturnValue({ states: { myVar: 'revalidating' } });
-		settleVariableFetch('myVar', 'failure');
-		expect(mockFailure).toHaveBeenCalledWith('myVar');
-		expect(mockComplete).not.toHaveBeenCalled();
-	});
-});
-
-describe('extractErrorMessage', () => {
-	const FALLBACK_MESSAGE =
-		'Please make sure configuration is valid and you have required setup and permissions';
-
-	it('should return SOMETHING_WENT_WRONG when error is null', () => {
-		expect(extractErrorMessage(null)).toBe('Something went wrong');
-	});
-
-	it('should return the error message when it exists', () => {
-		expect(extractErrorMessage({ message: 'Query timeout' })).toBe(
-			'Query timeout',
-		);
-	});
-
-	it('should return fallback when error object has no message property', () => {
-		expect(extractErrorMessage({})).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is empty string', () => {
-		expect(extractErrorMessage({ message: '' })).toBe(FALLBACK_MESSAGE);
-	});
-
-	it('should return fallback when error.message is undefined', () => {
-		expect(extractErrorMessage({ message: undefined })).toBe(FALLBACK_MESSAGE);
-	});
-});

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

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

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

@@ -17,19 +17,6 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import DynamicVariableInput from '../DashboardVariablesSelection/DynamicVariableInput';
 
-// Mock useVariableFetchState to return "fetching" state so useQuery is enabled
-jest.mock('hooks/dashboard/useVariableFetchState', () => ({
-	useVariableFetchState: (): Record<string, unknown> => ({
-		variableFetchCycleId: 0,
-		variableFetchState: 'loading',
-		isVariableSettled: false,
-		isVariableFetching: true,
-		hasVariableFetchedOnce: false,
-		isVariableWaitingForDependencies: false,
-		variableDependencyWaitMessage: '',
-	}),
-}));
-
 // Mock the getFieldValues API
 jest.mock('api/dynamicVariables/getFieldValues', () => ({
 	getFieldValues: jest.fn(),
@@ -108,7 +95,7 @@ describe('Dynamic Variable Default Behavior', () => {
 						}
 					}
 					if (queryFn) {
-						queryFn({ signal: undefined });
+						queryFn();
 					}
 				}
 			}, [enabled, variableName, dynamicVarsKey]); // Only depend on enabled/keys
@@ -247,7 +234,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 
@@ -501,7 +487,6 @@ describe('Dynamic Variable Default Behavior', () => {
 					'2023-01-01T00:00:00Z',
 					'2023-01-02T00:00:00Z',
 					'',
-					undefined, // signal
 				);
 			});
 

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

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

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

@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import BarChartTooltip from 'lib/uPlotV2/components/Tooltip/BarChartTooltip';
-import {
-	BarTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-
-import { useBarChartStacking } from '../../hooks/useBarChartStacking';
-import { BarChartProps } from '../types';
-
-export default function BarChart(props: BarChartProps): JSX.Element {
-	const { children, isStackedBarChart, config, data, ...rest } = props;
-
-	const chartData = useBarChartStacking({
-		data,
-		isStackedBarChart,
-		config,
-	});
-
-	const renderTooltip = useCallback(
-		(props: TooltipRenderArgs): React.ReactNode => {
-			const tooltipProps: BarTooltipProps = {
-				...props,
-				timezone: rest.timezone,
-				yAxisUnit: rest.yAxisUnit,
-				decimalPrecision: rest.decimalPrecision,
-				isStackedBarChart: isStackedBarChart,
-			};
-			return <BarChartTooltip {...tooltipProps} />;
-		},
-		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
-	);
-
-	return (
-		<ChartWrapper
-			{...rest}
-			config={config}
-			data={chartData}
-			renderTooltip={renderTooltip}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/__tests__/stackUtils.test.ts

@@ -1,117 +0,0 @@
-import { AlignedData } from 'uplot';
-
-import { getInitialStackedBands, stack } from '../stackUtils';
-
-describe('stackUtils', () => {
-	describe('stack', () => {
-		const neverOmit = (): boolean => false;
-
-		it('preserves time axis as first row', () => {
-			const data: AlignedData = [
-				[100, 200, 300],
-				[1, 2, 3],
-				[4, 5, 6],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[0]).toEqual([100, 200, 300]);
-		});
-
-		it('stacks value series cumulatively (last = raw, first = total)', () => {
-			// Time, then 3 value series. Stack order: last series stays raw, then we add upward.
-			const data: AlignedData = [
-				[0, 1, 2],
-				[1, 2, 3], // series 1
-				[4, 5, 6], // series 2
-				[7, 8, 9], // series 3
-			];
-			const { data: result } = stack(data, neverOmit);
-			// result[1] = s1+s2+s3, result[2] = s2+s3, result[3] = s3
-			expect(result[1]).toEqual([12, 15, 18]); // 1+4+7, 2+5+8, 3+6+9
-			expect(result[2]).toEqual([11, 13, 15]); // 4+7, 5+8, 6+9
-			expect(result[3]).toEqual([7, 8, 9]);
-		});
-
-		it('treats null values as 0 when stacking', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, null],
-				[null, 10],
-			];
-			const { data: result } = stack(data, neverOmit);
-			expect(result[1]).toEqual([1, 10]); // total
-			expect(result[2]).toEqual([0, 10]); // last series with null→0
-		});
-
-		it('copies omitted series as-is without accumulating', () => {
-			// Omit series 2 (index 2); series 1 and 3 are stacked.
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[100, 200], // series 2 - omitted
-				[1, 2], // series 3
-			];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { data: result } = stack(data, omitSeries2);
-			// series 3 raw: [1, 2]; series 2 omitted: [100, 200] as-is; series 1 stacked with s3: [11, 22]
-			expect(result[1]).toEqual([11, 22]); // 10+1, 20+2
-			expect(result[2]).toEqual([100, 200]); // copied, not stacked
-			expect(result[3]).toEqual([1, 2]);
-		});
-
-		it('returns bands between consecutive visible series when none omitted', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-				[3, 4],
-				[5, 6],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		});
-
-		it('returns bands only between visible series when some are omitted', () => {
-			// 4 value series; omit index 2. Visible: 1, 3, 4. Bands: [1,3], [3,4]
-			const data: AlignedData = [[0], [1], [2], [3], [4]];
-			const omitSeries2 = (i: number): boolean => i === 2;
-			const { bands } = stack(data, omitSeries2);
-			expect(bands).toEqual([{ series: [1, 3] }, { series: [3, 4] }]);
-		});
-
-		it('returns empty bands when only one value series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[1, 2],
-			];
-			const { bands } = stack(data, neverOmit);
-			expect(bands).toEqual([]);
-		});
-	});
-
-	describe('getInitialStackedBands', () => {
-		it('returns one band between each consecutive pair for seriesCount 3', () => {
-			expect(getInitialStackedBands(3)).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-			]);
-		});
-
-		it('returns empty array for seriesCount 0 or 1', () => {
-			expect(getInitialStackedBands(0)).toEqual([]);
-			expect(getInitialStackedBands(1)).toEqual([]);
-		});
-
-		it('returns single band for seriesCount 2', () => {
-			expect(getInitialStackedBands(2)).toEqual([{ series: [1, 2] }]);
-		});
-
-		it('returns bands [1,2], [2,3], ..., [n-1, n] for seriesCount n', () => {
-			const bands = getInitialStackedBands(5);
-			expect(bands).toEqual([
-				{ series: [1, 2] },
-				{ series: [2, 3] },
-				{ series: [3, 4] },
-				{ series: [4, 5] },
-			]);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/utils/stackSeriesUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stackSeries(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/charts/utils/stackUtils.ts

@@ -1,116 +0,0 @@
-import uPlot, { AlignedData } from 'uplot';
-
-/**
- * Stack data cumulatively (top-down: first series = top, last = bottom).
- * When `omit(seriesIndex)` returns true, that series is excluded from stacking.
- */
-export function stack(
-	data: AlignedData,
-	omit: (seriesIndex: number) => boolean,
-): { data: AlignedData; bands: uPlot.Band[] } {
-	const timeAxis = data[0];
-	const pointCount = timeAxis.length;
-	const valueSeriesCount = data.length - 1; // exclude time axis
-
-	const stackedSeries = buildStackedSeries({
-		data,
-		valueSeriesCount,
-		pointCount,
-		omit,
-	});
-	const bands = buildFillBands(valueSeriesCount + 1, omit); // +1 for 1-based series indices
-
-	return {
-		data: [timeAxis, ...stackedSeries] as AlignedData,
-		bands,
-	};
-}
-
-interface BuildStackedSeriesParams {
-	data: AlignedData;
-	valueSeriesCount: number;
-	pointCount: number;
-	omit: (seriesIndex: number) => boolean;
-}
-
-/**
- * Accumulate from last series upward: last series = raw values, first = total.
- * Omitted series are copied as-is (no accumulation).
- */
-function buildStackedSeries({
-	data,
-	valueSeriesCount,
-	pointCount,
-	omit,
-}: BuildStackedSeriesParams): (number | null)[][] {
-	const stackedSeries: (number | null)[][] = Array(valueSeriesCount);
-	const cumulativeSums = Array(pointCount).fill(0) as number[];
-
-	for (let seriesIndex = valueSeriesCount; seriesIndex >= 1; seriesIndex--) {
-		const rawValues = data[seriesIndex] as (number | null)[];
-
-		if (omit(seriesIndex)) {
-			stackedSeries[seriesIndex - 1] = rawValues;
-		} else {
-			stackedSeries[seriesIndex - 1] = rawValues.map((rawValue, pointIndex) => {
-				const numericValue = rawValue == null ? 0 : Number(rawValue);
-				return (cumulativeSums[pointIndex] += numericValue);
-			});
-		}
-	}
-
-	return stackedSeries;
-}
-
-/**
- * Bands define fill between consecutive visible series for stacked appearance.
- * uPlot format: [upperSeriesIdx, lowerSeriesIdx].
- */
-function buildFillBands(
-	seriesLength: number,
-	omit: (seriesIndex: number) => boolean,
-): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-
-	for (let seriesIndex = 1; seriesIndex < seriesLength; seriesIndex++) {
-		if (omit(seriesIndex)) {
-			continue;
-		}
-		const nextVisibleSeriesIndex = findNextVisibleSeriesIndex(
-			seriesLength,
-			seriesIndex,
-			omit,
-		);
-		if (nextVisibleSeriesIndex !== -1) {
-			bands.push({ series: [seriesIndex, nextVisibleSeriesIndex] });
-		}
-	}
-
-	return bands;
-}
-
-function findNextVisibleSeriesIndex(
-	seriesLength: number,
-	afterIndex: number,
-	omit: (seriesIndex: number) => boolean,
-): number {
-	for (let i = afterIndex + 1; i < seriesLength; i++) {
-		if (!omit(i)) {
-			return i;
-		}
-	}
-	return -1;
-}
-
-/**
- * Returns band indices for initial stacked state (no series omitted).
- * Top-down: first series at top, band fills between consecutive series.
- * uPlot band format: [upperSeriesIdx, lowerSeriesIdx].
- */
-export function getInitialStackedBands(seriesCount: number): uPlot.Band[] {
-	const bands: uPlot.Band[] = [];
-	for (let seriesIndex = 1; seriesIndex < seriesCount; seriesIndex++) {
-		bands.push({ series: [seriesIndex, seriesIndex + 1] });
-	}
-	return bands;
-}

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useBarChartStacking.test.ts

@@ -1,313 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import uPlot from 'uplot';
-
-import type { UseBarChartStackingParams } from '../useBarChartStacking';
-import { useBarChartStacking } from '../useBarChartStacking';
-
-type MockConfig = { addHook: jest.Mock };
-
-function asConfig(c: MockConfig): UseBarChartStackingParams['config'] {
-	return (c as unknown) as UseBarChartStackingParams['config'];
-}
-
-function createMockConfig(): {
-	config: MockConfig;
-	invokeSetData: (plot: uPlot) => void;
-	invokeSetSeries: (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	) => void;
-	removeSetData: jest.Mock;
-	removeSetSeries: jest.Mock;
-} {
-	let setDataHandler: ((plot: uPlot) => void) | null = null;
-	let setSeriesHandler:
-		| ((plot: uPlot, seriesIndex: number | null, opts: uPlot.Series) => void)
-		| null = null;
-
-	const removeSetData = jest.fn();
-	const removeSetSeries = jest.fn();
-
-	const addHook = jest.fn(
-		(
-			hookName: string,
-			handler: (plot: uPlot, ...args: unknown[]) => void,
-		): (() => void) => {
-			if (hookName === 'setData') {
-				setDataHandler = handler as (plot: uPlot) => void;
-				return removeSetData;
-			}
-			if (hookName === 'setSeries') {
-				setSeriesHandler = handler as (
-					plot: uPlot,
-					seriesIndex: number | null,
-					opts: uPlot.Series,
-				) => void;
-				return removeSetSeries;
-			}
-			return jest.fn();
-		},
-	);
-
-	const config: MockConfig = { addHook };
-
-	const invokeSetData = (plot: uPlot): void => {
-		setDataHandler?.(plot);
-	};
-
-	const invokeSetSeries = (
-		plot: uPlot,
-		seriesIndex: number | null,
-		opts: Partial<uPlot.Series> & { focus?: boolean },
-	): void => {
-		setSeriesHandler?.(plot, seriesIndex, opts as uPlot.Series);
-	};
-
-	return {
-		config,
-		invokeSetData,
-		invokeSetSeries,
-		removeSetData,
-		removeSetSeries,
-	};
-}
-
-function createMockPlot(overrides: Partial<uPlot> = {}): uPlot {
-	return ({
-		data: [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		],
-		series: [{ show: true }, { show: true }, { show: true }],
-		delBand: jest.fn(),
-		addBand: jest.fn(),
-		setData: jest.fn(),
-		...overrides,
-	} as unknown) as uPlot;
-}
-
-describe('useBarChartStacking', () => {
-	it('returns data as-is when isStackedBarChart is false', () => {
-		const data: uPlot.AlignedData = [
-			[100, 200],
-			[1, 2],
-			[3, 4],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: null,
-			}),
-		);
-		expect(result.current).toBe(data);
-	});
-
-	it('returns data as-is when config is null and isStackedBarChart is true', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[4, 5],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		// Still returns stacked data (computed in useMemo); no hooks registered
-		expect(result.current[0]).toEqual([0, 1]);
-		expect(result.current[1]).toEqual([5, 7]); // stacked
-		expect(result.current[2]).toEqual([4, 5]);
-	});
-
-	it('returns stacked data when isStackedBarChart is true and multiple value series', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-			[7, 8, 9],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current[0]).toEqual([0, 1, 2]);
-		expect(result.current[1]).toEqual([12, 15, 18]); // s1+s2+s3
-		expect(result.current[2]).toEqual([11, 13, 15]); // s2+s3
-		expect(result.current[3]).toEqual([7, 8, 9]);
-	});
-
-	it('returns data as-is when only one value series (no stacking needed)', () => {
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-		];
-		const { result } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: null,
-			}),
-		);
-		expect(result.current).toEqual(data);
-	});
-
-	it('registers setData and setSeries hooks when isStackedBarChart and config provided', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).toHaveBeenCalledWith('setData', expect.any(Function));
-		expect(config.addHook).toHaveBeenCalledWith(
-			'setSeries',
-			expect.any(Function),
-		);
-	});
-
-	it('does not register hooks when isStackedBarChart is false', () => {
-		const { config } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: false,
-				config: asConfig(config),
-			}),
-		);
-
-		expect(config.addHook).not.toHaveBeenCalled();
-	});
-
-	it('calls cleanup when unmounted', () => {
-		const { config, removeSetData, removeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-
-		const { unmount } = renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		unmount();
-
-		expect(removeSetData).toHaveBeenCalled();
-		expect(removeSetSeries).toHaveBeenCalled();
-	});
-
-	it('re-stacks and updates plot when setData hook is invoked', () => {
-		const { config, invokeSetData } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1, 2],
-			[1, 2, 3],
-			[4, 5, 6],
-		];
-		const plot = createMockPlot({
-			data: [
-				[0, 1, 2],
-				[5, 7, 9],
-				[4, 5, 6],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetData(plot);
-
-		expect(plot.delBand).toHaveBeenCalledWith(null);
-		expect(plot.addBand).toHaveBeenCalled();
-		expect(plot.setData).toHaveBeenCalledWith(
-			expect.arrayContaining([
-				[0, 1, 2],
-				expect.any(Array), // stacked row 1
-				expect.any(Array), // stacked row 2
-			]),
-		);
-	});
-
-	it('re-stacks when setSeries hook is invoked (e.g. legend toggle)', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[10, 20],
-			[5, 10],
-		];
-		// Plot data must match unstacked length so canApplyStacking passes
-		const plot = createMockPlot({
-			data: [
-				[0, 1],
-				[15, 30],
-				[5, 10],
-			],
-		});
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		invokeSetSeries(plot, 1, { show: false });
-
-		expect(plot.setData).toHaveBeenCalled();
-	});
-
-	it('does not re-stack when setSeries is called with focus option', () => {
-		const { config, invokeSetSeries } = createMockConfig();
-		const data: uPlot.AlignedData = [
-			[0, 1],
-			[1, 2],
-			[3, 4],
-		];
-		const plot = createMockPlot();
-
-		renderHook(() =>
-			useBarChartStacking({
-				data,
-				isStackedBarChart: true,
-				config: asConfig(config),
-			}),
-		);
-
-		(plot.setData as jest.Mock).mockClear();
-		invokeSetSeries(plot, 1, { focus: true } as uPlot.Series);
-
-		expect(plot.setData).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/hooks/useBarChartStacking.ts

@@ -1,125 +0,0 @@
-import {
-	MutableRefObject,
-	useCallback,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-} from 'react';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { has } from 'lodash-es';
-import uPlot from 'uplot';
-
-import { stackSeries } from '../charts/utils/stackSeriesUtils';
-
-/** Returns true if the series at the given index is hidden (e.g. via legend toggle). */
-function isSeriesHidden(plot: uPlot, seriesIndex: number): boolean {
-	return !plot.series[seriesIndex]?.show;
-}
-
-function canApplyStacking(
-	unstackedData: uPlot.AlignedData | null,
-	plot: uPlot,
-	isUpdating: boolean,
-): boolean {
-	return (
-		!isUpdating &&
-		!!unstackedData &&
-		!!plot.data &&
-		unstackedData[0]?.length === plot.data[0]?.length
-	);
-}
-
-function setupStackingHooks(
-	config: UPlotConfigBuilder,
-	applyStackingToChart: (plot: uPlot) => void,
-	isUpdatingRef: MutableRefObject<boolean>,
-): () => void {
-	const onDataChange = (plot: uPlot): void => {
-		if (!isUpdatingRef.current) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const onSeriesVisibilityChange = (
-		plot: uPlot,
-		_seriesIdx: number | null,
-		opts: uPlot.Series,
-	): void => {
-		if (!has(opts, 'focus')) {
-			applyStackingToChart(plot);
-		}
-	};
-
-	const removeSetDataHook = config.addHook('setData', onDataChange);
-	const removeSetSeriesHook = config.addHook(
-		'setSeries',
-		onSeriesVisibilityChange,
-	);
-
-	return (): void => {
-		removeSetDataHook?.();
-		removeSetSeriesHook?.();
-	};
-}
-
-export interface UseBarChartStackingParams {
-	data: uPlot.AlignedData;
-	isStackedBarChart?: boolean;
-	config: UPlotConfigBuilder | null;
-}
-
-/**
- * Handles stacking for bar charts: computes initial stacked data and re-stacks
- * when data or series visibility changes (e.g. legend toggles).
- */
-export function useBarChartStacking({
-	data,
-	isStackedBarChart = false,
-	config,
-}: UseBarChartStackingParams): uPlot.AlignedData {
-	// Store unstacked source data so uPlot hooks can access it (hooks run outside React's render cycle)
-	const unstackedDataRef = useRef<uPlot.AlignedData | null>(null);
-	unstackedDataRef.current = isStackedBarChart ? data : null;
-
-	// Prevents re-entrant calls when we update chart data (avoids infinite loop in setData hook)
-	const isUpdatingChartRef = useRef(false);
-
-	const chartData = useMemo((): uPlot.AlignedData => {
-		if (!isStackedBarChart || !data || data.length < 2) {
-			return data;
-		}
-		const noSeriesHidden = (): boolean => false; // include all series in initial stack
-		const { data: stacked } = stackSeries(data, noSeriesHidden);
-		return stacked;
-	}, [data, isStackedBarChart]);
-
-	const applyStackingToChart = useCallback((plot: uPlot): void => {
-		const unstacked = unstackedDataRef.current;
-		if (
-			!unstacked ||
-			!canApplyStacking(unstacked, plot, isUpdatingChartRef.current)
-		) {
-			return;
-		}
-
-		const shouldExcludeSeries = (idx: number): boolean =>
-			isSeriesHidden(plot, idx);
-		const { data: stacked, bands } = stackSeries(unstacked, shouldExcludeSeries);
-
-		plot.delBand(null);
-		bands.forEach((band: uPlot.Band) => plot.addBand(band));
-
-		isUpdatingChartRef.current = true;
-		plot.setData(stacked);
-		isUpdatingChartRef.current = false;
-	}, []);
-
-	useLayoutEffect(() => {
-		if (!isStackedBarChart || !config) {
-			return undefined;
-		}
-		return setupStackingHooks(config, applyStackingToChart, isUpdatingChartRef);
-	}, [isStackedBarChart, config, applyStackingToChart]);
-
-	return chartData;
-}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,160 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useTimezone } from 'providers/Timezone';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-import { getTimeRange } from 'utils/getTimeRange';
-
-import BarChart from '../../charts/BarChart/BarChart';
-import ChartManager from '../../components/ChartManager/ChartManager';
-import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
-import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
-
-import '../Panel.styles.scss';
-
-function BarPanel(props: PanelWrapperProps): JSX.Element {
-	const {
-		panelMode,
-		queryResponse,
-		widget,
-		onDragSelect,
-		isFullViewMode,
-		onToggleModelHandler,
-	} = props;
-	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const graphRef = useRef<HTMLDivElement>(null);
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const containerDimensions = useResizeObserver(graphRef);
-
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [queryResponse]);
-
-	const {
-		coordinates,
-		popoverPosition,
-		onClose,
-		menuItemsConfig,
-		clickHandlerWithContextMenu,
-	} = usePanelContextMenu({
-		widget,
-		queryResponse,
-	});
-
-	const config = useMemo(() => {
-		return prepareBarPanelConfig({
-			widget,
-			isDarkMode,
-			currentQuery: widget.query,
-			onClick: clickHandlerWithContextMenu,
-			onDragSelect,
-			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
-			timezone,
-			panelMode,
-			minTimeScale: minTimeScale,
-			maxTimeScale: maxTimeScale,
-		});
-	}, [
-		widget,
-		isDarkMode,
-		queryResponse?.data?.payload,
-		clickHandlerWithContextMenu,
-		onDragSelect,
-		minTimeScale,
-		maxTimeScale,
-		timezone,
-		panelMode,
-	]);
-
-	const chartData = useMemo(() => {
-		if (!queryResponse?.data?.payload) {
-			return [];
-		}
-		return prepareBarPanelData(queryResponse?.data?.payload);
-	}, [queryResponse?.data?.payload]);
-
-	const layoutChildren = useMemo(() => {
-		if (!isFullViewMode) {
-			return null;
-		}
-		return (
-			<ChartManager
-				config={config}
-				alignedData={chartData}
-				yAxisUnit={widget.yAxisUnit}
-				onCancel={onToggleModelHandler}
-			/>
-		);
-	}, [
-		isFullViewMode,
-		config,
-		chartData,
-		widget.yAxisUnit,
-		onToggleModelHandler,
-	]);
-
-	const onPlotDestroy = useCallback(() => {
-		uPlotRef.current = null;
-	}, []);
-
-	const onPlotRef = useCallback((plot: uPlot | null): void => {
-		uPlotRef.current = plot;
-	}, []);
-
-	return (
-		<div className="panel-container" ref={graphRef}>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					config={config}
-					legendConfig={{
-						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
-					}}
-					plotRef={onPlotRef}
-					onDestroy={onPlotDestroy}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
-					data={chartData as uPlot.AlignedData}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					layoutChildren={layoutChildren}
-					isStackedBarChart={widget.stackedBarChart ?? false}
-				>
-					<ContextMenu
-						coordinates={coordinates}
-						popoverPosition={popoverPosition}
-						title={menuItemsConfig.header as string}
-						items={menuItemsConfig.items}
-						onClose={onClose}
-					/>
-				</BarChart>
-			)}
-		</div>
-	);
-}
-
-export default BarPanel;

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

@@ -1,118 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { getLegend } from 'lib/dashboard/getQueryResults';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { get } from 'lodash-es';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
-import { AlignedData } from 'uplot';
-
-import { PanelMode } from '../types';
-import { fillMissingXAxisTimestamps, getXAxisTimestamps } from '../utils';
-import { buildBaseConfig } from '../utils/baseConfigBuilder';
-
-export function prepareBarPanelData(
-	apiResponse: MetricRangePayloadProps,
-): AlignedData {
-	const seriesList = apiResponse?.data?.result || [];
-	const timestampArr = getXAxisTimestamps(seriesList);
-	const yAxisValuesArr = fillMissingXAxisTimestamps(timestampArr, seriesList);
-	return [timestampArr, ...yAxisValuesArr];
-}
-
-export function prepareBarPanelConfig({
-	widget,
-	isDarkMode,
-	currentQuery,
-	onClick,
-	onDragSelect,
-	apiResponse,
-	timezone,
-	panelMode,
-	minTimeScale,
-	maxTimeScale,
-}: {
-	widget: Widgets;
-	isDarkMode: boolean;
-	currentQuery: Query;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	apiResponse: MetricRangePayloadProps;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		widget,
-		isDarkMode,
-		onClick,
-		onDragSelect,
-		apiResponse,
-		timezone,
-		panelMode,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	builder.setCursor({
-		focus: {
-			prox: 1e3,
-		},
-	});
-
-	if (widget.stackedBarChart) {
-		const seriesCount = (apiResponse?.data?.result?.length ?? 0) + 1; // +1 for 1-based uPlot series indices
-		builder.setBands(getInitialStackedBands(seriesCount));
-	}
-
-	const stepIntervals: Record<string, number> = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-
-	const seriesList: QueryData[] = apiResponse?.data?.result || [];
-	seriesList.forEach((series) => {
-		const baseLabelName = getLabelName(
-			series.metric,
-			series.queryName || '', // query
-			series.legend || '',
-		);
-
-		const label = currentQuery
-			? getLegend(series, currentQuery, baseLabelName)
-			: baseLabelName;
-
-		const currentStepInterval = get(stepIntervals, series.queryName, undefined);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
-			label: label,
-			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
-			isDarkMode,
-			stepInterval: currentStepInterval,
-		});
-	});
-
-	return builder;
-}

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

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

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

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

frontend/src/container/GridCardLayout/GridCardLayout.tsx

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

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

@@ -5,12 +5,16 @@ import { PanelMode } from 'container/DashboardContainer/visualization/panels/typ
 import { WidgetGraphComponentProps } from 'container/GridCardLayout/GridCard/types';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 
 export type PanelWrapperProps = {
-	queryResponse: UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
 	widget: Widgets;
 	setRequestData?: WidgetGraphComponentProps['setRequestData'];
 	isFullViewMode?: boolean;

frontend/src/hooks/dashboard/__test__/useIsPanelWaitingOnVariable.test.ts

@@ -1,316 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { IDashboardVariablesStoreState } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import { useIsPanelWaitingOnVariable } from '../useVariableFetchState';
-
-function makeVariable(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		...overrides,
-	};
-}
-
-function resetStores(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-function setFetchStates(states: Record<string, VariableFetchState>): void {
-	variableFetchStore.set(() => ({
-		states,
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-function setDashboardVariables(
-	overrides: Partial<IDashboardVariablesStoreState>,
-): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-		...overrides,
-	}));
-}
-
-describe('useIsPanelWaitingOnVariable', () => {
-	beforeEach(() => {
-		resetStores();
-	});
-
-	it('should return false when variableNames is empty', () => {
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable([]));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when all referenced variables are idle', () => {
-		setFetchStates({ a: 'idle', b: 'idle' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val1' }),
-				b: makeVariable({ id: 'b', selectedValue: 'val2' }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true when a variable is loading with empty selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is waiting with empty selectedValue', () => {
-		setFetchStates({ a: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: '' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is revalidating with empty selectedValue', () => {
-		setFetchStates({ a: 'revalidating' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when a variable is loading but has a selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'some-value' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true for DYNAMIC variable with allSelected=true that is loading', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'some-val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true for DYNAMIC variable with allSelected=true that is waiting', () => {
-		setFetchStates({ dyn: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is idle', () => {
-		setFetchStates({ dyn: 'idle' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for non-DYNAMIC variable with allSelected=false and non-empty value that is loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({
-					id: 'a',
-					selectedValue: 'val',
-					allSelected: false,
-				}),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true if any one of multiple variables is blocking', () => {
-		setFetchStates({ a: 'idle', b: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-				b: makeVariable({ id: 'b', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when variable has no entry in fetch store (treated as idle)', () => {
-		setFetchStates({}); // no state entry for 'a'
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when variable is in error state with empty selectedValue', () => {
-		setFetchStates({ a: 'error' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should react to store updates', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-
-		// Simulate variable fetch completing
-		act(() => {
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-			});
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle DYNAMIC variable with allSelected=false and empty selectedValue as blocking', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: undefined,
-					allSelected: false,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should handle variable with array selectedValue as non-blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: ['val1', 'val2'] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle variable with empty array selectedValue as blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: [] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-});

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/hooks/queryBuilder/useGetQueryRange.ts

@@ -10,12 +10,13 @@ import {
 	GetQueryResultsProps,
 } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import { SuccessResponse, Warning } from 'types/api';
 import APIError from 'types/api/error';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
 type UseGetQueryRangeOptions = UseQueryOptions<
-	MetricQueryRangeSuccessResponse,
+	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
 	APIError | Error
 >;
 
@@ -29,7 +30,10 @@ type UseGetQueryRange = (
 		widgetIndex: number;
 		publicDashboardId: string;
 	},
-) => UseQueryResult<MetricQueryRangeSuccessResponse, Error>;
+) => UseQueryResult<
+	SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
+	Error
+>;
 
 export const useGetQueryRange: UseGetQueryRange = (
 	requestData,
@@ -141,7 +145,10 @@ export const useGetQueryRange: UseGetQueryRange = (
 		};
 	}, [options?.retry]);
 
-	return useQuery<MetricQueryRangeSuccessResponse, APIError | Error>({
+	return useQuery<
+		SuccessResponse<MetricRangePayloadProps> & { warning?: Warning },
+		APIError | Error
+	>({
 		queryFn: async ({ signal }) =>
 			GetMetricQueryRange(
 				modifiedRequestData,

frontend/src/hooks/querySuggestions/useGetQueryKeyValueSuggestions.ts

@@ -9,6 +9,9 @@ export const useGetQueryKeyValueSuggestions = ({
 	searchText,
 	signalSource,
 	metricName,
+	startUnixMilli,
+	endUnixMilli,
+	existingQuery,
 	options,
 }: {
 	key: string;
@@ -20,6 +23,9 @@ export const useGetQueryKeyValueSuggestions = ({
 		AxiosError
 	>;
 	metricName?: string;
+	startUnixMilli?: number;
+	endUnixMilli?: number;
+	existingQuery?: string;
 }): UseQueryResult<
 	AxiosResponse<QueryKeyValueSuggestionsResponseProps>,
 	AxiosError
@@ -40,6 +46,9 @@ export const useGetQueryKeyValueSuggestions = ({
 				searchText: searchText || '',
 				signalSource: signalSource as 'meter' | '',
 				metricName: metricName || '',
+				startUnixMilli,
+				endUnixMilli,
+				existingQuery,
 			}),
 		...options,
 	});

frontend/src/hooks/useCopyToClipboard.ts

@@ -1,61 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-const DEFAULT_COPIED_RESET_MS = 2000;
-
-export interface UseCopyToClipboardOptions {
-	/** How long (ms) to keep "copied" state before resetting. Default 2000. */
-	copiedResetMs?: number;
-}
-
-export type ID = number | string | null;
-
-export interface UseCopyToClipboardReturn {
-	/** Copy text to clipboard. Pass an optional id to track which item was copied (e.g. seriesIndex). */
-	copyToClipboard: (text: string, id?: ID) => void;
-	/** True when something was just copied and still within the reset threshold. */
-	isCopied: boolean;
-	/** The id passed to the last successful copy, or null after reset. Use to show "copied" state for a specific item (e.g. copiedId === item.seriesIndex). */
-	id: ID;
-}
-
-export function useCopyToClipboard(
-	options: UseCopyToClipboardOptions = {},
-): UseCopyToClipboardReturn {
-	const { copiedResetMs = DEFAULT_COPIED_RESET_MS } = options;
-	const [state, setState] = useState<{ isCopied: boolean; id: ID }>({
-		isCopied: false,
-		id: null,
-	});
-	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(() => {
-		return (): void => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = null;
-			}
-		};
-	}, []);
-
-	const copyToClipboard = useCallback(
-		(text: string, id?: ID): void => {
-			navigator.clipboard.writeText(text).then(() => {
-				if (timeoutRef.current) {
-					clearTimeout(timeoutRef.current);
-				}
-				setState({ isCopied: true, id: id ?? null });
-				timeoutRef.current = setTimeout(() => {
-					setState({ isCopied: false, id: null });
-					timeoutRef.current = null;
-				}, copiedResetMs);
-			});
-		},
-		[copiedResetMs],
-	);
-
-	return {
-		copyToClipboard,
-		isCopied: state.isCopied,
-		id: state.id,
-	};
-}

frontend/src/lib/dashboard/getQueryResults.ts

@@ -19,11 +19,7 @@ import { Pagination } from 'hooks/queryPagination';
 import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
 import { isEmpty } from 'lodash-es';
 import { SuccessResponse, SuccessResponseV2, Warning } from 'types/api';
-import {
-	MetricQueryRangeSuccessResponse,
-	MetricRangePayloadProps,
-} from 'types/api/metrics/getQueryRange';
-import { ExecStats, MetricRangePayloadV5 } from 'types/api/v5/queryRange';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -209,13 +205,13 @@ export async function GetMetricQueryRange(
 		widgetIndex: number;
 		publicDashboardId: string;
 	},
-): Promise<MetricQueryRangeSuccessResponse> {
+): Promise<SuccessResponse<MetricRangePayloadProps> & { warning?: Warning }> {
 	let legendMap: Record<string, string>;
 	let response:
-		| MetricQueryRangeSuccessResponse
-		| SuccessResponseV2<MetricRangePayloadV5>;
+		| SuccessResponse<MetricRangePayloadProps>
+		| SuccessResponseV2<MetricRangePayloadV5>
+		| (SuccessResponse<MetricRangePayloadProps> & { warning?: Warning });
 	let warning: Warning | undefined;
-	let meta: ExecStats | undefined;
 
 	const panelType = props.originalGraphType || props.graphType;
 
@@ -303,7 +299,6 @@ export async function GetMetricQueryRange(
 			);
 
 			warning = response.payload.warning || undefined;
-			meta = response.payload.meta || undefined;
 		} else {
 			const v5Response = await getQueryRangeV5(
 				v5Result.queryPayload,
@@ -323,7 +318,6 @@ export async function GetMetricQueryRange(
 			);
 
 			warning = response.payload.warning || undefined;
-			meta = response.payload.meta || undefined;
 		}
 	} else {
 		const legacyResult = prepareQueryRangePayload(props);
@@ -390,7 +384,6 @@ export async function GetMetricQueryRange(
 	return {
 		...response,
 		warning,
-		meta,
 	};
 }
 

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -128,15 +128,6 @@
 		opacity: 1;
 	}
 
-	.legend-item-label-trigger {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		flex: 1;
-		min-width: 0;
-		cursor: pointer;
-	}
-
 	.legend-marker {
 		border-width: 2px;
 		border-radius: 50%;
@@ -166,34 +157,10 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		min-width: 0;
-		user-select: none;
-	}
-
-	.legend-copy-button {
-		display: none;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		padding: 2px;
-		margin: 0;
-		border: none;
-		color: var(--bg-vanilla-400);
-		cursor: pointer;
-		border-radius: 4px;
-		opacity: 1;
-		transition: opacity 0.15s ease, color 0.15s ease;
-
-		&:hover {
-			color: var(--bg-vanilla-100);
-		}
 	}
 
 	&:hover {
 		background: rgba(255, 255, 255, 0.05);
-		.legend-copy-button {
-			display: flex;
-			opacity: 1;
-		}
 	}
 }
 
@@ -205,17 +172,4 @@
 			}
 		}
 	}
-
-	.legend-item {
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
-		.legend-copy-button {
-			color: var(--bg-ink-400);
-
-			&:hover {
-				color: var(--bg-ink-500);
-			}
-		}
-	}
 }

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

@@ -2,10 +2,8 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
 import { Input, Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
-import { useCopyToClipboard } from 'hooks/useCopyToClipboard';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
-import { Check, Copy } from 'lucide-react';
 
 import { useLegendActions } from '../../hooks/useLegendActions';
 import { LegendPosition, LegendProps } from '../types';
@@ -34,7 +32,6 @@ export default function Legend({
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
 	const [legendSearchQuery, setLegendSearchQuery] = useState('');
-	const { copyToClipboard, id: copiedId } = useCopyToClipboard();
 
 	const legendItems = useMemo(() => Object.values(legendItemsMap), [
 		legendItemsMap,
@@ -62,53 +59,26 @@ export default function Legend({
 		);
 	}, [position, legendSearchQuery, legendItems]);
 
-	const handleCopyLegendItem = useCallback(
-		(e: React.MouseEvent, seriesIndex: number, label: string): void => {
-			e.stopPropagation();
-			copyToClipboard(label, seriesIndex);
-		},
-		[copyToClipboard],
-	);
-
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => {
-			const isCopied = copiedId === item.seriesIndex;
-			return (
+		(item: LegendItem): JSX.Element => (
+			<AntdTooltip key={item.seriesIndex} title={item.label}>
 				<div
-					key={item.seriesIndex}
 					data-legend-item-id={item.seriesIndex}
 					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
 						'legend-item-off': !item.show,
 						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
 					})}
 				>
-					<AntdTooltip title={item.label}>
-						<div className="legend-item-label-trigger">
-							<div
-								className="legend-marker"
-								style={{ borderColor: String(item.color) }}
-								data-is-legend-marker={true}
-							/>
-							<span className="legend-label">{item.label}</span>
-						</div>
-					</AntdTooltip>
-					<AntdTooltip title={isCopied ? 'Copied' : 'Copy'}>
-						<button
-							type="button"
-							className="legend-copy-button"
-							onClick={(e): void =>
-								handleCopyLegendItem(e, item.seriesIndex, item.label ?? '')
-							}
-							aria-label={`Copy ${item.label}`}
-							data-testid="legend-copy"
-						>
-							{isCopied ? <Check size={12} /> : <Copy size={12} />}
-						</button>
-					</AntdTooltip>
+					<div
+						className="legend-marker"
+						style={{ borderColor: String(item.color) }}
+						data-is-legend-marker={true}
+					/>
+					<span className="legend-label">{item.label}</span>
 				</div>
-			);
-		},
-		[copiedId, focusedSeriesIndex, handleCopyLegendItem, position],
+			</AntdTooltip>
+		),
+		[focusedSeriesIndex, position],
 	);
 
 	const isEmptyState = useMemo(() => {

frontend/src/lib/uPlotV2/components/Tooltip/BarChartTooltip.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-
-import { BarTooltipProps, TooltipContentItem } from '../types';
-import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
-
-export default function BarChartTooltip(props: BarTooltipProps): JSX.Element {
-	const content = useMemo(
-		(): TooltipContentItem[] =>
-			buildTooltipContent({
-				data: props.uPlotInstance.data,
-				series: props.uPlotInstance.series,
-				dataIndexes: props.dataIndexes,
-				activeSeriesIndex: props.seriesIndex,
-				uPlotInstance: props.uPlotInstance,
-				yAxisUnit: props.yAxisUnit ?? '',
-				decimalPrecision: props.decimalPrecision,
-				isStackedBarChart: props.isStackedBarChart,
-			}),
-		[
-			props.uPlotInstance,
-			props.seriesIndex,
-			props.dataIndexes,
-			props.yAxisUnit,
-			props.decimalPrecision,
-			props.isStackedBarChart,
-		],
-	);
-
-	return <Tooltip {...props} content={content} />;
-}

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -25,28 +25,16 @@ export function getTooltipBaseValue({
 	index,
 	dataIndex,
 	isStackedBarChart,
-	series,
 }: {
 	data: AlignedData;
 	index: number;
 	dataIndex: number;
 	isStackedBarChart?: boolean;
-	series?: Series[];
 }): number | null {
 	let baseValue = data[index][dataIndex] ?? null;
-	// Top-down stacking (first series at top): raw = stacked[i] - stacked[nextVisible].
-	// When series are hidden, we must use the next *visible* series, not index+1,
-	// since hidden series keep raw values and would produce negative/wrong results.
-	if (isStackedBarChart && baseValue !== null && series) {
-		let nextVisibleIdx = -1;
-		for (let j = index + 1; j < series.length; j++) {
-			if (series[j]?.show) {
-				nextVisibleIdx = j;
-				break;
-			}
-		}
-		if (nextVisibleIdx >= 1) {
-			const nextValue = data[nextVisibleIdx][dataIndex] ?? 0;
+	if (isStackedBarChart && index + 1 < data.length && baseValue !== null) {
+		const nextValue = data[index + 1][dataIndex] ?? null;
+		if (nextValue !== null) {
 			baseValue = baseValue - nextValue;
 		}
 	}
@@ -92,7 +80,6 @@ export function buildTooltipContent({
 			index,
 			dataIndex,
 			isStackedBarChart,
-			series,
 		});
 
 		const isActive = index === activeSeriesIndex;

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

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-	fireEvent,
-	render,
-	RenderResult,
-	screen,
-	within,
-} from '@testing-library/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';
@@ -14,9 +8,6 @@ import { useLegendActions } from '../../hooks/useLegendActions';
 import Legend from '../Legend/Legend';
 import { LegendPosition } from '../types';
 
-const mockWriteText = jest.fn().mockResolvedValue(undefined);
-let clipboardSpy: jest.SpyInstance | undefined;
-
 jest.mock('react-virtuoso', () => ({
 	VirtuosoGrid: ({
 		data,
@@ -48,15 +39,6 @@ const mockUseLegendActions = useLegendActions as jest.MockedFunction<
 >;
 
 describe('Legend', () => {
-	beforeAll(() => {
-		// JSDOM does not define navigator.clipboard; add it so we can spy on writeText
-		Object.defineProperty(navigator, 'clipboard', {
-			value: { writeText: () => Promise.resolve() },
-			writable: true,
-			configurable: true,
-		});
-	});
-
 	const baseLegendItemsMap = {
 		0: {
 			seriesIndex: 0,
@@ -88,11 +70,6 @@ describe('Legend', () => {
 		onLegendMouseMove = jest.fn();
 		onLegendMouseLeave = jest.fn();
 		onFocusSeries = jest.fn();
-		mockWriteText.mockClear();
-
-		clipboardSpy = jest
-			.spyOn(navigator.clipboard, 'writeText')
-			.mockImplementation(mockWriteText);
 
 		mockUseLegendsSync.mockReturnValue({
 			legendItemsMap: baseLegendItemsMap,
@@ -109,7 +86,6 @@ describe('Legend', () => {
 	});
 
 	afterEach(() => {
-		clipboardSpy?.mockRestore();
 		jest.clearAllMocks();
 	});
 
@@ -234,47 +210,4 @@ describe('Legend', () => {
 			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
 		});
 	});
-
-	describe('copy action', () => {
-		it('copies the legend label to clipboard when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('A');
-		});
-
-		it('copies the correct label when copy is clicked on a different legend item', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const thirdLegendItem = document.querySelector(
-				'[data-legend-item-id="2"]',
-			) as HTMLElement;
-			const copyButton = within(thirdLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(mockWriteText).toHaveBeenCalledTimes(1);
-			expect(mockWriteText).toHaveBeenCalledWith('C');
-		});
-
-		it('does not call onLegendClick when copy button is clicked', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			const firstLegendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
-			const copyButton = within(firstLegendItem).getByTestId('legend-copy');
-
-			fireEvent.click(copyButton);
-
-			expect(onLegendClick).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -1,10 +1,8 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import uPlot, { Series } from 'uplot';
 
 import {
-	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
 	LineInterpolation,
@@ -45,13 +43,18 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	private buildLineConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		lineStyle,
+		lineCap,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		lineStyle?: LineStyle;
+		lineCap?: Series.Cap;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
 		const lineConfig: Partial<Series> = {
-			stroke: resolvedLineColor,
+			stroke: lineColor,
 			width: lineWidth ?? 2,
 		};
 
@@ -62,27 +65,21 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		if (lineCap) {
 			lineConfig.cap = lineCap;
 		}
-
-		if (this.props.panelType === PANEL_TYPES.BAR) {
-			lineConfig.fill = resolvedLineColor;
-		}
-
 		return lineConfig;
 	}
 
 	/**
 	 * Build path configuration
 	 */
-	private buildPathConfig(): Partial<Series> {
-		const {
-			pathBuilder,
-			drawStyle,
-			lineInterpolation,
-			barAlignment,
-			barMaxWidth,
-			barWidthFactor,
-			stepInterval,
-		} = this.props;
+	private buildPathConfig({
+		pathBuilder,
+		drawStyle,
+		lineInterpolation,
+	}: {
+		pathBuilder?: Series.PathBuilder | null;
+		drawStyle: DrawStyle;
+		lineInterpolation?: LineInterpolation;
+	}): Partial<Series> {
 		if (pathBuilder) {
 			return { paths: pathBuilder };
 		}
@@ -99,14 +96,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 					idx0: number,
 					idx1: number,
 				): Series.Paths | null => {
-					const pathsBuilder = getPathBuilder({
-						drawStyle,
-						lineInterpolation,
-						barAlignment,
-						barMaxWidth,
-						barWidthFactor,
-						stepInterval,
-					});
+					const pathsBuilder = getPathBuilder(drawStyle, lineInterpolation);
 
 					return pathsBuilder(self, seriesIdx, idx0, idx1);
 				},
@@ -120,21 +110,25 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	 * Build points configuration
 	 */
 	private buildPointsConfig({
-		resolvedLineColor,
+		lineColor,
+		lineWidth,
+		pointSize,
+		pointsBuilder,
+		pointsFilter,
+		drawStyle,
+		showPoints,
 	}: {
-		resolvedLineColor: string;
+		lineColor: string;
+		lineWidth?: number;
+		pointSize?: number;
+		pointsBuilder: Series.Points.Show | null;
+		pointsFilter: Series.Points.Filter | null;
+		drawStyle: DrawStyle;
+		showPoints?: VisibilityMode;
 	}): Partial<Series.Points> {
-		const {
-			lineWidth,
-			pointSize,
-			pointsBuilder,
-			pointsFilter,
-			drawStyle,
-			showPoints,
-		} = this.props;
 		const pointsConfig: Partial<Series.Points> = {
-			stroke: resolvedLineColor,
-			fill: resolvedLineColor,
+			stroke: lineColor,
+			fill: lineColor,
 			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
 			filter: pointsFilter || undefined,
 		};
@@ -168,16 +162,44 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}
 
 	getConfig(): Series {
-		const { scaleKey, label, spanGaps, show = true } = this.props;
+		const {
+			drawStyle,
+			pathBuilder,
+			pointsBuilder,
+			pointsFilter,
+			lineInterpolation,
+			lineWidth,
+			lineStyle,
+			lineCap,
+			showPoints,
+			pointSize,
+			scaleKey,
+			label,
+			spanGaps,
+			show = true,
+		} = this.props;
 
-		const resolvedLineColor = this.getLineColor();
+		const lineColor = this.getLineColor();
 
 		const lineConfig = this.buildLineConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			lineStyle,
+			lineCap,
+		});
+		const pathConfig = this.buildPathConfig({
+			pathBuilder,
+			drawStyle,
+			lineInterpolation,
 		});
-		const pathConfig = this.buildPathConfig();
 		const pointsConfig = this.buildPointsConfig({
-			resolvedLineColor,
+			lineColor,
+			lineWidth,
+			pointSize,
+			pointsBuilder: pointsBuilder ?? null,
+			pointsFilter: pointsFilter ?? null,
+			drawStyle,
+			showPoints,
 		});
 
 		return {
@@ -205,37 +227,15 @@ interface PathBuilders {
 /**
  * Get path builder based on draw style and interpolation
  */
-function getPathBuilder({
-	drawStyle,
-	lineInterpolation,
-	barAlignment = BarAlignment.Center,
-	barWidthFactor = 0.6,
-	barMaxWidth = 200,
-	stepInterval,
-}: {
-	drawStyle: DrawStyle;
-	lineInterpolation?: LineInterpolation;
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-	stepInterval?: number;
-}): Series.PathBuilder {
+function getPathBuilder(
+	style: DrawStyle,
+	lineInterpolation?: LineInterpolation,
+): Series.PathBuilder {
 	if (!builders) {
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar) {
-		const pathBuilders = uPlot.paths;
-		return getBarPathBuilder({
-			pathBuilders,
-			barAlignment,
-			barWidthFactor,
-			barMaxWidth,
-			stepInterval,
-		});
-	}
-
-	if (drawStyle === DrawStyle.Line) {
+	if (style === DrawStyle.Line) {
 		if (lineInterpolation === LineInterpolation.StepBefore) {
 			return builders.stepBefore;
 		}
@@ -250,81 +250,4 @@ function getPathBuilder({
 	return builders.spline;
 }
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function getBarPathBuilder({
-	pathBuilders,
-	barAlignment,
-	barWidthFactor,
-	barMaxWidth,
-	stepInterval,
-}: {
-	pathBuilders: typeof uPlot.paths;
-	barAlignment: BarAlignment;
-	barWidthFactor: number;
-	barMaxWidth: number;
-	stepInterval?: number;
-}): Series.PathBuilder {
-	if (!builders) {
-		throw new Error('Required uPlot path builders are not available');
-	}
-
-	const barsPathBuilderFactory = pathBuilders.bars;
-
-	// When a stepInterval is provided (in seconds), cap the maximum bar width
-	// so that a single bar never visually spans more than stepInterval worth
-	// of time on the x-scale.
-	if (
-		typeof stepInterval === 'number' &&
-		stepInterval > 0 &&
-		barsPathBuilderFactory
-	) {
-		return (
-			self: uPlot,
-			seriesIdx: number,
-			idx0: number,
-			idx1: number,
-		): Series.Paths | null => {
-			let effectiveBarMaxWidth = barMaxWidth;
-
-			const xScale = self.scales.x as uPlot.Scale | undefined;
-			if (xScale && typeof xScale.min === 'number') {
-				const start = xScale.min as number;
-				const end = start + stepInterval;
-				const startPx = self.valToPos(start, 'x');
-				const endPx = self.valToPos(end, 'x');
-				const intervalPx = Math.abs(endPx - startPx);
-
-				if (intervalPx > 0) {
-					effectiveBarMaxWidth =
-						typeof barMaxWidth === 'number'
-							? Math.min(barMaxWidth, intervalPx)
-							: intervalPx;
-				}
-			}
-
-			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;
-			if (builders && !builders[barsCfgKey]) {
-				builders[barsCfgKey] = barsPathBuilderFactory({
-					size: [barWidthFactor, effectiveBarMaxWidth],
-					align: barAlignment,
-				});
-			}
-
-			return builders && builders[barsCfgKey]
-				? builders[barsCfgKey](self, seriesIdx, idx0, idx1)
-				: null;
-		};
-	}
-
-	const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
-	if (!builders[barsCfgKey] && barsPathBuilderFactory) {
-		builders[barsCfgKey] = barsPathBuilderFactory({
-			size: [barWidthFactor, barMaxWidth],
-			align: barAlignment,
-		});
-	}
-
-	return builders[barsCfgKey];
-}
-
 export type { SeriesProps };

frontend/src/lib/uPlotV2/config/types.ts

@@ -126,45 +126,7 @@ export enum VisibilityMode {
 	Never = 'never',
 }
 
-/**
- * Props for configuring lines
- */
-export interface LineConfig {
-	lineColor?: string;
-	lineInterpolation?: LineInterpolation;
-	lineStyle?: LineStyle;
-	lineWidth?: number;
-	lineCap?: Series.Cap;
-}
-
-/**
- * Alignment of bars
- */
-export enum BarAlignment {
-	After = 1,
-	Before = -1,
-	Center = 0,
-}
-
-/**
- * Props for configuring bars
- */
-export interface BarConfig {
-	barAlignment?: BarAlignment;
-	barMaxWidth?: number;
-	barWidthFactor?: number;
-}
-
-/**
- * Props for configuring points
- */
-export interface PointsConfig {
-	pointColor?: string;
-	pointSize?: number;
-	showPoints?: VisibilityMode;
-}
-
-export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
+export interface SeriesProps {
 	scaleKey: string;
 	label?: string;
 	panelType: PANEL_TYPES;
@@ -175,8 +137,20 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+
 	isDarkMode?: boolean;
-	stepInterval?: number;
+
+	// Line config
+	lineColor?: string;
+	lineInterpolation?: LineInterpolation;
+	lineStyle?: LineStyle;
+	lineWidth?: number;
+	lineCap?: Series.Cap;
+
+	// Points config
+	pointColor?: string;
+	pointSize?: number;
+	showPoints?: VisibilityMode;
 }
 
 export interface LegendItem {

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

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

frontend/src/providers/Dashboard/Dashboard.tsx

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

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

@@ -1,527 +0,0 @@
-import * as dashboardVariablesStore from '../dashboardVariables/dashboardVariablesStore';
-import { IDependencyData } from '../dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	enqueueDescendantsOfVariable,
-	enqueueFetchOfAllVariables,
-	initializeVariableFetchStore,
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	VariableFetchContext,
-	variableFetchStore,
-} from '../variableFetchStore';
-
-const getVariableDependencyContextSpy = jest.spyOn(
-	dashboardVariablesStore,
-	'getVariableDependencyContext',
-);
-
-function resetStore(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-function mockContext(overrides: Partial<VariableFetchContext> = {}): void {
-	getVariableDependencyContextSpy.mockReturnValue({
-		doAllVariablesHaveValuesSelected: false,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-		dependencyData: null,
-		...overrides,
-	});
-}
-
-/**
- * Helper to build a dependency data object for tests.
- * Only the fields used by the store actions are required.
- */
-function buildDependencyData(
-	overrides: Partial<IDependencyData> = {},
-): IDependencyData {
-	return {
-		order: [],
-		graph: {},
-		parentDependencyGraph: {},
-		transitiveDescendants: {},
-		hasCycle: false,
-		...overrides,
-	};
-}
-
-describe('variableFetchStore', () => {
-	beforeEach(() => {
-		resetStore();
-		jest.clearAllMocks();
-	});
-
-	// ==================== initializeVariableFetchStore ====================
-
-	describe('initializeVariableFetchStore', () => {
-		it('should initialize new variables to idle', () => {
-			initializeVariableFetchStore(['a', 'b', 'c']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states).toEqual({ a: 'idle', b: 'idle', c: 'idle' });
-		});
-
-		it('should preserve existing states for known variables', () => {
-			// Pre-set a state
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('loading');
-			expect(storeSnapshot.states.b).toBe('idle');
-		});
-
-		it('should clean up stale variables that no longer exist', () => {
-			variableFetchStore.update((d) => {
-				d.states.old = 'idle';
-				d.lastUpdated.old = 100;
-				d.cycleIds.old = 3;
-			});
-
-			initializeVariableFetchStore(['a']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.old).toBeUndefined();
-			expect(storeSnapshot.lastUpdated.old).toBeUndefined();
-			expect(storeSnapshot.cycleIds.old).toBeUndefined();
-			expect(storeSnapshot.states.a).toBe('idle');
-		});
-
-		it('should handle empty variable names array', () => {
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-			});
-
-			initializeVariableFetchStore([]);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states).toEqual({});
-		});
-	});
-
-	// ==================== enqueueFetchOfAllVariables ====================
-
-	describe('enqueueFetchOfAllVariables', () => {
-		it('should no-op when dependencyData is null', () => {
-			mockContext({ dependencyData: null });
-
-			initializeVariableFetchStore(['a']);
-			enqueueFetchOfAllVariables();
-
-			expect(variableFetchStore.getSnapshot().states.a).toBe('idle');
-		});
-
-		it('should set root query variables to loading and dependent ones to waiting', () => {
-			// a is root (no parents), b depends on a
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a', 'b'],
-					parentDependencyGraph: { a: [], b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('loading');
-			expect(storeSnapshot.states.b).toBe('waiting');
-		});
-
-		it('should set root query variables to revalidating when previously fetched', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a'],
-					parentDependencyGraph: { a: [] },
-				}),
-				variableTypes: { a: 'QUERY' },
-			});
-
-			// Pre-set lastUpdated so it appears previously fetched
-			variableFetchStore.update((d) => {
-				d.lastUpdated.a = 1000;
-			});
-
-			initializeVariableFetchStore(['a']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('revalidating');
-		});
-
-		it('should bump cycle IDs for all enqueued variables', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a', 'b'],
-					parentDependencyGraph: { a: [], b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.cycleIds.a).toBe(1);
-			expect(storeSnapshot.cycleIds.b).toBe(1);
-		});
-
-		it('should set dynamic variables to waiting when not all variables have values', () => {
-			mockContext({
-				doAllVariablesHaveValuesSelected: false,
-				dependencyData: buildDependencyData({ order: [] }),
-				variableTypes: { dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			initializeVariableFetchStore(['dyn1']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-
-		it('should set dynamic variables to loading when all variables have values', () => {
-			mockContext({
-				doAllVariablesHaveValuesSelected: true,
-				dependencyData: buildDependencyData({ order: [] }),
-				variableTypes: { dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			initializeVariableFetchStore(['dyn1']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('loading');
-		});
-
-		it('should not treat non-QUERY parents as query parents', () => {
-			// b has a CUSTOM parent — shouldn't cause waiting
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['b'],
-					parentDependencyGraph: { b: ['customVar'] },
-				}),
-				variableTypes: { b: 'QUERY', customVar: 'CUSTOM' },
-			});
-
-			initializeVariableFetchStore(['b', 'customVar']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.b).toBe('loading');
-		});
-	});
-
-	// ==================== onVariableFetchComplete ====================
-
-	describe('onVariableFetchComplete', () => {
-		it('should set the completed variable to idle with a lastUpdated timestamp', () => {
-			mockContext();
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			const before = Date.now();
-			onVariableFetchComplete('a');
-			const after = Date.now();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('idle');
-			expect(storeSnapshot.lastUpdated.a).toBeGreaterThanOrEqual(before);
-			expect(storeSnapshot.lastUpdated.a).toBeLessThanOrEqual(after);
-		});
-
-		it('should unblock waiting query-type children', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('idle');
-			expect(storeSnapshot.states.b).toBe('loading');
-		});
-
-		it('should not unblock non-QUERY children', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['dyn1'] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			// dyn1 is DYNAMIC, not QUERY, so it should remain waiting
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-
-		it('should unlock waiting dynamic variables when all query variables are settled', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: [] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('loading');
-		});
-
-		it('should NOT unlock dynamic variables if a query variable is still in-flight', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-	});
-
-	// ==================== onVariableFetchFailure ====================
-
-	describe('onVariableFetchFailure', () => {
-		it('should set the failed variable to error', () => {
-			mockContext();
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			onVariableFetchFailure('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('error');
-		});
-
-		it('should set query-type transitive descendants to idle', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b', 'c'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-				d.states.c = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('error');
-			expect(storeSnapshot.states.b).toBe('idle');
-			expect(storeSnapshot.states.c).toBe('idle');
-		});
-
-		it('should not touch non-QUERY descendants', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['dyn1'] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('waiting');
-		});
-
-		it('should unlock waiting dynamic variables when all query variables settle via error', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: {},
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('loading');
-		});
-	});
-
-	// ==================== enqueueDescendantsOfVariable ====================
-
-	describe('enqueueDescendantsOfVariable', () => {
-		it('should no-op when dependencyData is null', () => {
-			mockContext({ dependencyData: null });
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('idle');
-		});
-
-		it('should enqueue query-type descendants with all parents settled', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.b).toBe('loading');
-			expect(storeSnapshot.cycleIds.b).toBe(1);
-		});
-
-		it('should set descendants to waiting when some parents are not settled', () => {
-			// b depends on both a and c; c is still loading
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a', 'c'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.states.c = 'loading';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('waiting');
-		});
-
-		it('should skip non-QUERY descendants', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['dyn1'] },
-					parentDependencyGraph: {},
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.dyn1 = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			// dyn1 is DYNAMIC, so it should not be touched
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('idle');
-		});
-
-		it('should handle chain of descendants: a -> b -> c', () => {
-			// a -> b -> c, all QUERY
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b', 'c'] },
-					parentDependencyGraph: { b: ['a'], c: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.states.c = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			// b's parent (a) is idle/settled → loading
-			expect(storeSnapshot.states.b).toBe('loading');
-			// c's parent (b) just moved to loading (not settled) → waiting
-			expect(storeSnapshot.states.c).toBe('waiting');
-		});
-
-		it('should set descendants to revalidating when previously fetched', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.lastUpdated.b = 1000;
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('revalidating');
-		});
-	});
-});

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

@@ -1,196 +0,0 @@
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-} from '../variableFetchStore';
-import {
-	areAllQueryVariablesSettled,
-	isSettled,
-	resolveFetchState,
-	unlockWaitingDynamicVariables,
-} from '../variableFetchStoreUtils';
-
-describe('variableFetchStoreUtils', () => {
-	describe('isSettled', () => {
-		it('should return true for idle state', () => {
-			expect(isSettled('idle')).toBe(true);
-		});
-
-		it('should return true for error state', () => {
-			expect(isSettled('error')).toBe(true);
-		});
-
-		it('should return false for loading state', () => {
-			expect(isSettled('loading')).toBe(false);
-		});
-
-		it('should return false for revalidating state', () => {
-			expect(isSettled('revalidating')).toBe(false);
-		});
-
-		it('should return false for waiting state', () => {
-			expect(isSettled('waiting')).toBe(false);
-		});
-
-		it('should return false for undefined', () => {
-			expect(isSettled(undefined)).toBe(false);
-		});
-	});
-
-	describe('resolveFetchState', () => {
-		it('should return "loading" when variable has never been fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
-		});
-
-		it('should return "loading" when lastUpdated is 0', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: { myVar: 0 },
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
-		});
-
-		it('should return "revalidating" when variable has been fetched before', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: { myVar: 1000 },
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('revalidating');
-		});
-	});
-
-	describe('areAllQueryVariablesSettled', () => {
-		it('should return true when all query variables are idle', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'idle',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true when all query variables are in error', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'error',
-				b: 'error',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true with a mix of idle and error query variables', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'error',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return false when any query variable is loading', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'loading',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
-		});
-
-		it('should return false when any query variable is waiting', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'waiting',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
-		});
-
-		it('should ignore non-QUERY variable types', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				dynVar: 'loading',
-			};
-			const variableTypes = {
-				a: 'QUERY' as const,
-				dynVar: 'DYNAMIC' as const,
-			};
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true when there are no QUERY variables', () => {
-			const states: Record<string, VariableFetchState> = {
-				dynVar: 'loading',
-			};
-			const variableTypes = { dynVar: 'DYNAMIC' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-	});
-
-	describe('unlockWaitingDynamicVariables', () => {
-		it('should transition waiting dynamic variables to loading when never fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting', dyn2: 'waiting' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
-
-			expect(draft.states.dyn1).toBe('loading');
-			expect(draft.states.dyn2).toBe('loading');
-		});
-
-		it('should transition waiting dynamic variables to revalidating when previously fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting' },
-				lastUpdated: { dyn1: 1000 },
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1']);
-
-			expect(draft.states.dyn1).toBe('revalidating');
-		});
-
-		it('should not touch dynamic variables that are not in waiting state', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'idle', dyn2: 'loading' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
-
-			expect(draft.states.dyn1).toBe('idle');
-			expect(draft.states.dyn2).toBe('loading');
-		});
-
-		it('should handle empty dynamic variable order', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, []);
-
-			expect(draft.states.dyn1).toBe('waiting');
-		});
-	});
-});

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

@@ -1,225 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import {
-	dashboardVariablesStore,
-	getVariableDependencyContext,
-	setDashboardVariablesStore,
-	updateDashboardVariablesStore,
-} from '../dashboardVariablesStore';
-import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
-
-function createVariable(
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable {
-	return {
-		id: 'test-id',
-		name: 'test-var',
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		showALLOption: false,
-		multiSelect: false,
-		order: 0,
-		...overrides,
-	};
-}
-
-function resetStore(): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-describe('dashboardVariablesStore', () => {
-	beforeEach(() => {
-		resetStore();
-	});
-
-	describe('setDashboardVariablesStore', () => {
-		it('should set the dashboard variables and compute derived values', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-			};
-
-			setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.dashboardId).toBe('dash-1');
-			expect(storeSnapshot.variables).toEqual(variables);
-			expect(storeSnapshot.variableTypes).toEqual({ env: 'QUERY' });
-			expect(storeSnapshot.sortedVariablesArray).toHaveLength(1);
-		});
-	});
-
-	describe('updateDashboardVariablesStore', () => {
-		it('should update variables and recompute derived values', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-				},
-			});
-
-			const updatedVariables: IDashboardVariables = {
-				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-			};
-
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: updatedVariables,
-			});
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.variableTypes).toEqual({
-				env: 'QUERY',
-				dyn1: 'DYNAMIC',
-			});
-			expect(storeSnapshot.dynamicVariableOrder).toEqual(['dyn1']);
-		});
-
-		it('should replace dashboardId when it does not match', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					'not-there': createVariable({ name: 'not-there', order: 0 }),
-				},
-			});
-
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-2',
-				variables: {
-					a: createVariable({ name: 'a', order: 0 }),
-				},
-			});
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.dashboardId).toBe('dash-2');
-			expect(storeSnapshot.variableTypes).toEqual({
-				a: 'QUERY',
-			});
-			expect(storeSnapshot.variableTypes).not.toEqual({
-				'not-there': 'QUERY',
-			});
-		});
-	});
-
-	describe('getVariableDependencyContext', () => {
-		it('should return context with all fields', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-				},
-			});
-
-			const {
-				variableTypes,
-				dynamicVariableOrder,
-				dependencyData,
-			} = getVariableDependencyContext();
-
-			expect(variableTypes).toEqual({ env: 'QUERY' });
-			expect(dynamicVariableOrder).toEqual([]);
-			expect(dependencyData).not.toBeNull();
-		});
-
-		it('should report doAllVariablesHaveValuesSelected as true when all variables have selectedValue', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-					region: createVariable({
-						name: 'region',
-						type: 'CUSTOM',
-						order: 1,
-						selectedValue: 'us-east',
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should report doAllVariablesHaveValuesSelected as false when some variables lack selectedValue', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-					region: createVariable({
-						name: 'region',
-						type: 'CUSTOM',
-						order: 1,
-						selectedValue: undefined,
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(false);
-		});
-
-		it('should treat DYNAMIC variable with allSelected=true and selectedValue=null as having a value', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: null as any,
-						allSelected: true,
-					}),
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: 'prod',
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should report false when a DYNAMIC variable has empty selectedValue and allSelected is not true', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: '',
-						allSelected: false,
-					}),
-				},
-			});
-
-			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
-			expect(doAllVariablesHaveValuesSelected).toBe(false);
-		});
-	});
-});

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

@@ -1,369 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
-import {
-	buildDynamicVariableOrder,
-	buildSortedVariablesArray,
-	buildVariableTypesMap,
-	computeDerivedValues,
-} from '../dashboardVariablesStoreUtils';
-
-const createVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: 'test-id',
-	name: 'test-var',
-	description: '',
-	type: 'QUERY',
-	sort: 'DISABLED',
-	showALLOption: false,
-	multiSelect: false,
-	order: 0,
-	...overrides,
-});
-
-describe('dashboardVariablesStoreUtils', () => {
-	describe('buildSortedVariablesArray', () => {
-		it('should sort variables by order property', () => {
-			const variables: IDashboardVariables = {
-				c: createVariable({ name: 'c', order: 3 }),
-				a: createVariable({ name: 'a', order: 1 }),
-				b: createVariable({ name: 'b', order: 2 }),
-			};
-
-			const result = buildSortedVariablesArray(variables);
-
-			expect(result.map((v) => v.name)).toEqual(['a', 'b', 'c']);
-		});
-
-		it('should return empty array for empty variables', () => {
-			const result = buildSortedVariablesArray({});
-			expect(result).toEqual([]);
-		});
-
-		it('should create copies of variables (not references)', () => {
-			const original = createVariable({ name: 'a', order: 0 });
-			const variables: IDashboardVariables = { a: original };
-
-			const result = buildSortedVariablesArray(variables);
-
-			expect(result[0]).not.toBe(original);
-			expect(result[0]).toEqual(original);
-		});
-	});
-
-	describe('buildVariableTypesMap', () => {
-		it('should create a name-to-type mapping', () => {
-			const sorted = [
-				createVariable({ name: 'env', type: 'QUERY' }),
-				createVariable({ name: 'region', type: 'CUSTOM' }),
-				createVariable({ name: 'dynVar', type: 'DYNAMIC' }),
-				createVariable({ name: 'text', type: 'TEXTBOX' }),
-			];
-
-			const result = buildVariableTypesMap(sorted);
-
-			expect(result).toEqual({
-				env: 'QUERY',
-				region: 'CUSTOM',
-				dynVar: 'DYNAMIC',
-				text: 'TEXTBOX',
-			});
-		});
-
-		it('should return empty object for empty array', () => {
-			expect(buildVariableTypesMap([])).toEqual({});
-		});
-	});
-
-	describe('buildDynamicVariableOrder', () => {
-		it('should return only DYNAMIC variable names in order', () => {
-			const sorted = [
-				createVariable({ name: 'queryVar', type: 'QUERY', order: 0 }),
-				createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				createVariable({ name: 'customVar', type: 'CUSTOM', order: 2 }),
-				createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
-			];
-
-			const result = buildDynamicVariableOrder(sorted);
-
-			expect(result).toEqual(['dyn1', 'dyn2']);
-		});
-
-		it('should return empty array when no DYNAMIC variables exist', () => {
-			const sorted = [
-				createVariable({ name: 'a', type: 'QUERY' }),
-				createVariable({ name: 'b', type: 'CUSTOM' }),
-			];
-
-			expect(buildDynamicVariableOrder(sorted)).toEqual([]);
-		});
-
-		it('should return empty array for empty input', () => {
-			expect(buildDynamicVariableOrder([])).toEqual([]);
-		});
-	});
-
-	describe('computeDerivedValues', () => {
-		it('should compute all derived values from variables', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-				}),
-				dyn1: createVariable({
-					name: 'dyn1',
-					type: 'DYNAMIC',
-					order: 1,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(2);
-			expect(result.sortedVariablesArray[0].name).toBe('env');
-			expect(result.sortedVariablesArray[1].name).toBe('dyn1');
-
-			expect(result.variableTypes).toEqual({
-				env: 'QUERY',
-				dyn1: 'DYNAMIC',
-			});
-
-			expect(result.dynamicVariableOrder).toEqual(['dyn1']);
-
-			// dependencyData should exist since there are variables
-			expect(result.dependencyData).not.toBeNull();
-		});
-
-		it('should return null dependencyData for empty variables', () => {
-			const result = computeDerivedValues({});
-
-			expect(result.sortedVariablesArray).toEqual([]);
-			expect(result.dependencyData).toBeNull();
-			expect(result.variableTypes).toEqual({});
-			expect(result.dynamicVariableOrder).toEqual([]);
-		});
-
-		it('should handle all four variable types together', () => {
-			const variables: IDashboardVariables = {
-				queryVar: createVariable({
-					name: 'queryVar',
-					type: 'QUERY',
-					order: 0,
-				}),
-				customVar: createVariable({
-					name: 'customVar',
-					type: 'CUSTOM',
-					order: 1,
-				}),
-				dynVar: createVariable({
-					name: 'dynVar',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-				textVar: createVariable({
-					name: 'textVar',
-					type: 'TEXTBOX',
-					order: 3,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(4);
-			expect(result.sortedVariablesArray.map((v) => v.name)).toEqual([
-				'queryVar',
-				'customVar',
-				'dynVar',
-				'textVar',
-			]);
-
-			expect(result.variableTypes).toEqual({
-				queryVar: 'QUERY',
-				customVar: 'CUSTOM',
-				dynVar: 'DYNAMIC',
-				textVar: 'TEXTBOX',
-			});
-
-			expect(result.dynamicVariableOrder).toEqual(['dynVar']);
-			expect(result.dependencyData).not.toBeNull();
-		});
-
-		it('should sort variables by order regardless of insertion order', () => {
-			const variables: IDashboardVariables = {
-				z: createVariable({ name: 'z', type: 'QUERY', order: 4 }),
-				a: createVariable({ name: 'a', type: 'CUSTOM', order: 0 }),
-				m: createVariable({ name: 'm', type: 'DYNAMIC', order: 2 }),
-				b: createVariable({ name: 'b', type: 'TEXTBOX', order: 1 }),
-				x: createVariable({ name: 'x', type: 'QUERY', order: 3 }),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray.map((v) => v.name)).toEqual([
-				'a',
-				'b',
-				'm',
-				'x',
-				'z',
-			]);
-		});
-
-		it('should include multiple dynamic variables in order', () => {
-			const variables: IDashboardVariables = {
-				dyn3: createVariable({ name: 'dyn3', type: 'DYNAMIC', order: 5 }),
-				query1: createVariable({ name: 'query1', type: 'QUERY', order: 0 }),
-				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				custom1: createVariable({ name: 'custom1', type: 'CUSTOM', order: 2 }),
-				dyn2: createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.dynamicVariableOrder).toEqual(['dyn1', 'dyn2', 'dyn3']);
-		});
-
-		it('should build dependency data with query variable order for dependent queries', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT DISTINCT env FROM table',
-				}),
-				service: createVariable({
-					name: 'service',
-					type: 'QUERY',
-					order: 1,
-					queryValue: 'SELECT DISTINCT service FROM table WHERE env={{.env}}',
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			const { dependencyData } = result;
-			expect(dependencyData).not.toBeNull();
-			// env should appear in the dependency order (it's a root QUERY variable)
-			expect(dependencyData?.order).toContain('env');
-			// service depends on env, so it should also be in the order
-			expect(dependencyData?.order).toContain('service');
-			// env comes before service in topological order
-			const envIdx = dependencyData?.order.indexOf('env') ?? -1;
-			const svcIdx = dependencyData?.order.indexOf('service') ?? -1;
-			expect(envIdx).toBeLessThan(svcIdx);
-		});
-
-		it('should not include non-QUERY variables in dependency order', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT DISTINCT env FROM table',
-				}),
-				customVar: createVariable({
-					name: 'customVar',
-					type: 'CUSTOM',
-					order: 1,
-				}),
-				dynVar: createVariable({
-					name: 'dynVar',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-				textVar: createVariable({
-					name: 'textVar',
-					type: 'TEXTBOX',
-					order: 3,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.dependencyData).not.toBeNull();
-			// Only QUERY variables should be in the dependency order
-			result.dependencyData?.order.forEach((name) => {
-				expect(result.variableTypes[name]).toBe('QUERY');
-			});
-		});
-
-		it('should produce transitive descendants in dependency data', () => {
-			const variables: IDashboardVariables = {
-				region: createVariable({
-					name: 'region',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT region FROM table',
-				}),
-				cluster: createVariable({
-					name: 'cluster',
-					type: 'QUERY',
-					order: 1,
-					queryValue: 'SELECT cluster FROM table WHERE region={{.region}}',
-				}),
-				host: createVariable({
-					name: 'host',
-					type: 'QUERY',
-					order: 2,
-					queryValue: 'SELECT host FROM table WHERE cluster={{.cluster}}',
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			const { dependencyData: depData } = result;
-			expect(depData).not.toBeNull();
-			expect(depData?.transitiveDescendants).toBeDefined();
-			// region's transitive descendants should include cluster and host
-			expect(depData?.transitiveDescendants['region']).toEqual(
-				expect.arrayContaining(['cluster', 'host']),
-			);
-		});
-
-		it('should handle a single variable', () => {
-			const variables: IDashboardVariables = {
-				solo: createVariable({
-					name: 'solo',
-					type: 'QUERY',
-					order: 0,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(1);
-			expect(result.variableTypes).toEqual({ solo: 'QUERY' });
-			expect(result.dynamicVariableOrder).toEqual([]);
-			expect(result.dependencyData).not.toBeNull();
-			expect(result.dependencyData?.order).toEqual(['solo']);
-		});
-
-		it('should handle only non-QUERY variables', () => {
-			const variables: IDashboardVariables = {
-				custom1: createVariable({
-					name: 'custom1',
-					type: 'CUSTOM',
-					order: 0,
-				}),
-				text1: createVariable({
-					name: 'text1',
-					type: 'TEXTBOX',
-					order: 1,
-				}),
-				dyn1: createVariable({
-					name: 'dyn1',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(3);
-			// No QUERY variables, so dependency order should be empty
-			expect(result.dependencyData?.order).toEqual([]);
-			expect(result.dynamicVariableOrder).toEqual(['dyn1']);
-		});
-	});
-});

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);
-		}
-	});
-}

frontend/src/providers/Dashboard/types.ts

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

frontend/src/types/api/metrics/getQueryRange.ts

@@ -1,14 +1,13 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { SuccessResponse, Warning } from '..';
+import { Warning } from '..';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
 	IClickHouseQuery,
 	IPromQLQuery,
 } from '../queryBuilder/queryBuilderData';
-import { ExecStats } from '../v5/queryRange';
 import { QueryData, QueryDataV3 } from '../widgets/getQuery';
 
 export type QueryRangePayload = {
@@ -36,15 +35,8 @@ export interface MetricRangePayloadProps {
 		newResult: MetricRangePayloadV3;
 		warnings?: string[];
 	};
-	meta?: ExecStats;
 }
 
-/** Query range success response including optional warning and meta */
-export type MetricQueryRangeSuccessResponse = SuccessResponse<
-	MetricRangePayloadProps,
-	unknown
-> & { warning?: Warning; meta?: ExecStats };
-
 export interface MetricRangePayloadV3 {
 	data: {
 		result: QueryDataV3[];
@@ -52,5 +44,4 @@ export interface MetricRangePayloadV3 {
 		warnings?: string[];
 	};
 	warning?: Warning;
-	meta?: ExecStats;
 }

frontend/src/types/api/querySuggestions/types.ts

@@ -29,6 +29,8 @@ export interface QueryKeyRequestProps {
 	fieldDataType?: QUERY_BUILDER_KEY_TYPES;
 	metricName?: string;
 	signalSource?: 'meter' | '';
+	startUnixMilli?: number;
+	endUnixMilli?: number;
 }
 
 export interface QueryKeyValueSuggestionsProps {
@@ -47,6 +49,9 @@ export interface QueryKeyValueRequestProps {
 	searchText: string;
 	signalSource?: 'meter' | '';
 	metricName?: string;
+	startUnixMilli?: number;
+	endUnixMilli?: number;
+	existingQuery?: string;
 }
 
 export type SignalType = 'traces' | 'logs' | 'metrics';

frontend/src/types/api/v5/queryRange.ts

@@ -334,7 +334,6 @@ export interface ExecStats {
 	rowsScanned: number;
 	bytesScanned: number;
 	durationMs: number;
-	stepIntervals: Record<string, number>;
 }
 
 export interface Label {

pkg/emailing/config.go

@@ -10,27 +10,6 @@ type Config struct {
 
 type Templates struct {
 	Directory string `mapstructure:"directory"`
-	Format    Format `mapstructure:"format"`
-}
-
-type Format struct {
-	Header Header `mapstructure:"header"`
-	Help   Help   `mapstructure:"help"`
-	Footer Footer `mapstructure:"footer"`
-}
-
-type Header struct {
-	Enabled bool   `mapstructure:"enabled"`
-	LogoURL string `mapstructure:"logo_url"`
-}
-
-type Help struct {
-	Enabled bool   `mapstructure:"enabled"`
-	Email   string `mapstructure:"email"`
-}
-
-type Footer struct {
-	Enabled bool `mapstructure:"enabled"`
 }
 
 type SMTP struct {
@@ -66,19 +45,6 @@ func newConfig() factory.Config {
 		Enabled: false,
 		Templates: Templates{
 			Directory: "/root/templates",
-			Format: Format{
-				Header: Header{
-					Enabled: false,
-					LogoURL: "",
-				},
-				Help: Help{
-					Enabled: false,
-					Email:   "",
-				},
-				Footer: Footer{
-					Enabled: false,
-				},
-			},
 		},
 		SMTP: SMTP{
 			Address: "localhost:25",

pkg/emailing/smtpemailing/provider.go

@@ -15,7 +15,6 @@ type provider struct {
 	settings factory.ScopedProviderSettings
 	store    emailtypes.TemplateStore
 	client   *client.Client
-	config   emailing.Config
 }
 
 func NewFactory() factory.ProviderFactory[emailing.Emailing, emailing.Config] {
@@ -56,12 +55,7 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		return nil, err
 	}
 
-	return &provider{
-		settings: settings,
-		store:    store,
-		client:   client,
-		config:   config,
-	}, nil
+	return &provider{settings: settings, store: store, client: client}, nil
 }
 
 func (provider *provider) SendHTML(ctx context.Context, to string, subject string, templateName emailtypes.TemplateName, data map[string]any) error {
@@ -75,19 +69,8 @@ func (provider *provider) SendHTML(ctx context.Context, to string, subject strin
 		return err
 	}
 
-	// if no data is provided, create an empty map to prevent a panic when we add the format, to, and subject data
-	if data == nil {
-		data = make(map[string]any)
-	}
-
-	// the following are overridden if provided in the data map
-	data["format"] = provider.config.Templates.Format
-	data["to"] = to
-	data["subject"] = subject
-
 	content, err := emailtypes.NewContent(template, data)
 	if err != nil {
-		provider.settings.Logger().ErrorContext(ctx, "failed to create email content", "error", err)
 		return err
 	}
 

pkg/modules/organization/implorganization/getter.go

@@ -30,7 +30,3 @@ func (module *getter) ListByOwnedKeyRange(ctx context.Context) ([]*types.Organiz
 
 	return module.store.ListByKeyRange(ctx, start, end)
 }
-
-func (module *getter) GetByName(ctx context.Context, name string) (*types.Organization, error) {
-	return module.store.GetByName(ctx, name)
-}

pkg/modules/organization/implorganization/store.go

@@ -47,22 +47,6 @@ func (store *store) Get(ctx context.Context, id valuer.UUID) (*types.Organizatio
 	return organization, nil
 }
 
-func (store *store) GetByName(ctx context.Context, name string) (*types.Organization, error) {
-	organization := new(types.Organization)
-	err := store.
-		sqlstore.
-		BunDB().
-		NewSelect().
-		Model(organization).
-		Where("name = ?", name).
-		Scan(ctx)
-	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrOrganizationNotFound, "organization with name %s does not exist", name)
-	}
-
-	return organization, nil
-}
-
 func (store *store) GetAll(ctx context.Context) ([]*types.Organization, error) {
 	organizations := make([]*types.Organization, 0)
 	err := store.

pkg/modules/organization/organization.go

@@ -14,9 +14,6 @@ type Getter interface {
 
 	// ListByOwnedKeyRange gets all the organizations owned by the instance
 	ListByOwnedKeyRange(context.Context) ([]*types.Organization, error)
-
-	// Gets the organization by name
-	GetByName(context.Context, string) (*types.Organization, error)
 }
 
 type Setter interface {

pkg/modules/session/implsession/module.go

@@ -151,10 +151,6 @@ func (module *module) CreateCallbackAuthNSession(ctx context.Context, authNProvi
 		return "", err
 	}
 
-	if err := user.ErrIfRoot(); err != nil {
-		return "", errors.WithAdditionalf(err, "root user can only authenticate via password")
-	}
-
 	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(user.ID, user.OrgID, user.Email, user.Role), map[string]string{})
 	if err != nil {
 		return "", err

pkg/modules/user/config.go

@@ -5,22 +5,11 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type Config struct {
 	Password PasswordConfig `mapstructure:"password"`
-	Root     RootConfig     `mapstructure:"root"`
 }
-
-type RootConfig struct {
-	Enabled  bool         `mapstructure:"enabled"`
-	Email    valuer.Email `mapstructure:"email"`
-	Password string       `mapstructure:"password"`
-	OrgName  string       `mapstructure:"org_name"`
-}
-
 type PasswordConfig struct {
 	Reset ResetConfig `mapstructure:"reset"`
 }
@@ -42,10 +31,6 @@ func newConfig() factory.Config {
 				MaxTokenLifetime: 6 * time.Hour,
 			},
 		},
-		Root: RootConfig{
-			Enabled: false,
-			OrgName: "default",
-		},
 	}
 }
 
@@ -54,17 +39,5 @@ func (c Config) Validate() error {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::password::reset::max_token_lifetime must be positive")
 	}
 
-	if c.Root.Enabled {
-		if c.Root.Email.IsZero() {
-			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::email is required when root user is enabled")
-		}
-		if c.Root.Password == "" {
-			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::password is required when root user is enabled")
-		}
-		if !types.IsPasswordValid(c.Root.Password) {
-			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::password does not meet password requirements")
-		}
-	}
-
 	return nil
 }

pkg/modules/user/impluser/getter.go

@@ -16,10 +16,6 @@ func NewGetter(store types.UserStore) user.Getter {
 	return &getter{store: store}
 }
 
-func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
-	return module.store.GetRootUserByOrgID(ctx, orgID)
-}
-
 func (module *getter) ListByOrgID(ctx context.Context, orgID valuer.UUID) ([]*types.User, error) {
 	users, err := module.store.ListUsersByOrgID(ctx, orgID)
 	if err != nil {

pkg/modules/user/impluser/module.go

@@ -22,6 +22,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/roletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/dustin/go-humanize"
+	"golang.org/x/text/cases"
+	"golang.org/x/text/language"
 )
 
 type Module struct {
@@ -103,12 +105,6 @@ func (m *Module) CreateBulkInvite(ctx context.Context, orgID valuer.UUID, userID
 			return nil, err
 		}
 
-		if existingUser != nil {
-			if err := existingUser.ErrIfRoot(); err != nil {
-				return nil, errors.WithAdditionalf(err, "cannot send invite to root user")
-			}
-		}
-
 		if existingUser != nil {
 			return nil, errors.New(errors.TypeAlreadyExists, errors.CodeAlreadyExists, "User already exists with the same email")
 		}
@@ -150,9 +146,11 @@ func (m *Module) CreateBulkInvite(ctx context.Context, orgID valuer.UUID, userID
 			continue
 		}
 
-		if err := m.emailing.SendHTML(ctx, invites[i].Email.String(), "You're Invited to Join SigNoz", emailtypes.TemplateNameInvitationEmail, map[string]any{
-			"inviter_email": creator.Email,
-			"link":          fmt.Sprintf("%s/signup?token=%s", bulkInvites.Invites[i].FrontendBaseUrl, invites[i].Token),
+		if err := m.emailing.SendHTML(ctx, invites[i].Email.String(), "You are invited to join a team in SigNoz", emailtypes.TemplateNameInvitationEmail, map[string]any{
+			"CustomerName": invites[i].Name,
+			"InviterName":  creator.DisplayName,
+			"InviterEmail": creator.Email,
+			"Link":         fmt.Sprintf("%s/signup?token=%s", bulkInvites.Invites[i].FrontendBaseUrl, invites[i].Token),
 		}); err != nil {
 			m.settings.Logger().ErrorContext(ctx, "failed to send email", "error", err)
 		}
@@ -208,21 +206,27 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		return nil, err
 	}
 
-	if err := existingUser.ErrIfRoot(); err != nil {
-		return nil, errors.WithAdditionalf(err, "cannot update root user")
-	}
-
 	requestor, err := m.store.GetUser(ctx, valuer.MustNewUUID(updatedBy))
 	if err != nil {
 		return nil, err
 	}
 
-	if user.Role != "" && user.Role != existingUser.Role && requestor.Role != types.RoleAdmin {
+	// only displayName, role can be updated
+	if user.DisplayName == "" {
+		user.DisplayName = existingUser.DisplayName
+	}
+
+	if user.Role == "" {
+		user.Role = existingUser.Role
+	}
+
+	if user.Role != existingUser.Role && requestor.Role != types.RoleAdmin {
 		return nil, errors.New(errors.TypeForbidden, errors.CodeForbidden, "only admins can change roles")
 	}
 
-	// Make sure that the request is not demoting the last admin user.
-	if user.Role != "" && user.Role != existingUser.Role && existingUser.Role == types.RoleAdmin {
+	// Make sure that th e request is not demoting the last admin user.
+	// also an admin user can only change role of their own or other user
+	if user.Role != existingUser.Role && existingUser.Role == types.RoleAdmin {
 		adminUsers, err := m.store.GetUsersByRoleAndOrgID(ctx, types.RoleAdmin, orgID)
 		if err != nil {
 			return nil, err
@@ -233,7 +237,7 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		}
 	}
 
-	if user.Role != "" && user.Role != existingUser.Role {
+	if user.Role != existingUser.Role {
 		err = m.authz.ModifyGrant(ctx,
 			orgID,
 			roletypes.MustGetSigNozManagedRoleFromExistingRole(existingUser.Role),
@@ -245,28 +249,35 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		}
 	}
 
-	existingUser.Update(user.DisplayName, user.Role)
-	if err := m.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
+	user.UpdatedAt = time.Now()
+	updatedUser, err := m.store.UpdateUser(ctx, orgID, id, user)
+	if err != nil {
 		return nil, err
 	}
 
-	return existingUser, nil
-}
+	traits := types.NewTraitsFromUser(updatedUser)
+	m.analytics.IdentifyUser(ctx, user.OrgID.String(), user.ID.String(), traits)
 
-func (module *Module) UpdateAnyUser(ctx context.Context, orgID valuer.UUID, user *types.User) error {
-	if err := module.store.UpdateUser(ctx, orgID, user); err != nil {
-		return err
+	traits["updated_by"] = updatedBy
+	m.analytics.TrackUser(ctx, user.OrgID.String(), user.ID.String(), "User Updated", traits)
+
+	// if the role is updated then send an email
+	if existingUser.Role != updatedUser.Role {
+		if err := m.emailing.SendHTML(ctx, existingUser.Email.String(), "Your Role Has Been Updated in SigNoz", emailtypes.TemplateNameUpdateRole, map[string]any{
+			"CustomerName":   existingUser.DisplayName,
+			"UpdatedByEmail": requestor.Email,
+			"OldRole":        cases.Title(language.English).String(strings.ToLower(existingUser.Role.String())),
+			"NewRole":        cases.Title(language.English).String(strings.ToLower(updatedUser.Role.String())),
+		}); err != nil {
+			m.settings.Logger().ErrorContext(ctx, "failed to send email", "error", err)
+		}
 	}
 
-	traits := types.NewTraitsFromUser(user)
-	module.analytics.IdentifyUser(ctx, user.OrgID.String(), user.ID.String(), traits)
-	module.analytics.TrackUser(ctx, user.OrgID.String(), user.ID.String(), "User Updated", traits)
-
-	if err := module.tokenizer.DeleteIdentity(ctx, user.ID); err != nil {
-		return err
+	if err := m.tokenizer.DeleteIdentity(ctx, valuer.MustNewUUID(id)); err != nil {
+		return nil, err
 	}
 
-	return nil
+	return updatedUser, nil
 }
 
 func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id string, deletedBy string) error {
@@ -275,10 +286,6 @@ func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id stri
 		return err
 	}
 
-	if err := user.ErrIfRoot(); err != nil {
-		return errors.WithAdditionalf(err, "cannot delete root user")
-	}
-
 	if slices.Contains(types.AllIntegrationUserEmails, types.IntegrationUserEmail(user.Email.String())) {
 		return errors.New(errors.TypeForbidden, errors.CodeForbidden, "integration user cannot be deleted")
 	}
@@ -373,10 +380,6 @@ func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, ema
 		return err
 	}
 
-	if err := user.ErrIfRoot(); err != nil {
-		return errors.WithAdditionalf(err, "cannot reset password for root user")
-	}
-
 	token, err := module.GetOrCreateResetPasswordToken(ctx, user.ID)
 	if err != nil {
 		module.settings.Logger().ErrorContext(ctx, "failed to create reset password token", "error", err)
@@ -391,9 +394,10 @@ func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, ema
 	if err := module.emailing.SendHTML(
 		ctx,
 		user.Email.String(),
-		"A Password Reset Was Requested for SigNoz",
+		"Reset your SigNoz password",
 		emailtypes.TemplateNameResetPassword,
 		map[string]any{
+			"Name":   user.DisplayName,
 			"Link":   resetLink,
 			"Expiry": humanizedTokenLifetime,
 		},
@@ -420,15 +424,6 @@ func (module *Module) UpdatePasswordByResetPasswordToken(ctx context.Context, to
 		return err
 	}
 
-	user, err := module.store.GetUser(ctx, valuer.MustNewUUID(password.UserID))
-	if err != nil {
-		return err
-	}
-
-	if err := user.ErrIfRoot(); err != nil {
-		return errors.WithAdditionalf(err, "cannot reset password for root user")
-	}
-
 	if err := password.Update(passwd); err != nil {
 		return err
 	}
@@ -437,15 +432,6 @@ func (module *Module) UpdatePasswordByResetPasswordToken(ctx context.Context, to
 }
 
 func (module *Module) UpdatePassword(ctx context.Context, userID valuer.UUID, oldpasswd string, passwd string) error {
-	user, err := module.store.GetUser(ctx, userID)
-	if err != nil {
-		return err
-	}
-
-	if err := user.ErrIfRoot(); err != nil {
-		return errors.WithAdditionalf(err, "cannot change password for root user")
-	}
-
 	password, err := module.store.GetPasswordByUserID(ctx, userID)
 	if err != nil {
 		return err
@@ -507,7 +493,7 @@ func (m *Module) RevokeAPIKey(ctx context.Context, id, removedByUserID valuer.UU
 }
 
 func (module *Module) CreateFirstUser(ctx context.Context, organization *types.Organization, name string, email valuer.Email, passwd string) (*types.User, error) {
-	user, err := types.NewRootUser(name, email, organization.ID)
+	user, err := types.NewUser(name, email, types.RoleAdmin, organization.ID)
 	if err != nil {
 		return nil, err
 	}

pkg/modules/user/impluser/service.go

@@ -1,187 +0,0 @@
-package impluser
-
-import (
-	"context"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/authz"
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/user"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/types/roletypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type service struct {
-	settings  factory.ScopedProviderSettings
-	store     types.UserStore
-	module    user.Module
-	orgGetter organization.Getter
-	authz     authz.AuthZ
-	config    user.RootConfig
-	stopC     chan struct{}
-}
-
-func NewService(
-	providerSettings factory.ProviderSettings,
-	store types.UserStore,
-	module user.Module,
-	orgGetter organization.Getter,
-	authz authz.AuthZ,
-	config user.RootConfig,
-) user.Service {
-	return &service{
-		settings:  factory.NewScopedProviderSettings(providerSettings, "go.signoz.io/pkg/modules/user"),
-		store:     store,
-		module:    module,
-		orgGetter: orgGetter,
-		authz:     authz,
-		config:    config,
-		stopC:     make(chan struct{}),
-	}
-}
-
-func (s *service) Start(ctx context.Context) error {
-	if !s.config.Enabled {
-		<-s.stopC
-		return nil
-	}
-
-	ticker := time.NewTicker(10 * time.Second)
-	defer ticker.Stop()
-
-	for {
-		err := s.reconcile(ctx)
-		if err == nil {
-			s.settings.Logger().InfoContext(ctx, "root user reconciliation completed successfully")
-			<-s.stopC
-			return nil
-		}
-
-		s.settings.Logger().WarnContext(ctx, "root user reconciliation failed, retrying", "error", err)
-
-		select {
-		case <-s.stopC:
-			return nil
-		case <-ticker.C:
-			continue
-		}
-	}
-}
-
-func (s *service) Stop(ctx context.Context) error {
-	close(s.stopC)
-	return nil
-}
-
-func (s *service) reconcile(ctx context.Context) error {
-	org, err := s.orgGetter.GetByName(ctx, s.config.OrgName)
-	if err != nil {
-		if errors.Ast(err, errors.TypeNotFound) {
-			newOrg := types.NewOrganizationWithName(s.config.OrgName)
-			_, err := s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
-			return err
-		}
-
-		return err
-	}
-
-	return s.reconcileRootUser(ctx, org.ID)
-}
-
-func (s *service) reconcileRootUser(ctx context.Context, orgID valuer.UUID) error {
-	existingRoot, err := s.store.GetRootUserByOrgID(ctx, orgID)
-	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-		return err
-	}
-
-	if existingRoot == nil {
-		return s.createOrPromoteRootUser(ctx, orgID)
-	}
-
-	return s.updateExistingRootUser(ctx, orgID, existingRoot)
-}
-
-func (s *service) createOrPromoteRootUser(ctx context.Context, orgID valuer.UUID) error {
-	existingUser, err := s.store.GetUserByEmailAndOrgID(ctx, s.config.Email, orgID)
-	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-		return err
-	}
-
-	if existingUser != nil {
-		oldRole := existingUser.Role
-
-		existingUser.PromoteToRoot()
-		if err := s.module.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
-			return err
-		}
-
-		if oldRole != types.RoleAdmin {
-			if err := s.authz.ModifyGrant(ctx,
-				orgID,
-				roletypes.MustGetSigNozManagedRoleFromExistingRole(oldRole),
-				roletypes.MustGetSigNozManagedRoleFromExistingRole(types.RoleAdmin),
-				authtypes.MustNewSubject(authtypes.TypeableUser, existingUser.ID.StringValue(), orgID, nil),
-			); err != nil {
-				return err
-			}
-		}
-
-		return s.setPassword(ctx, existingUser.ID)
-	}
-
-	// Create new root user
-	newUser, err := types.NewRootUser(s.config.Email.String(), s.config.Email, orgID)
-	if err != nil {
-		return err
-	}
-
-	factorPassword, err := types.NewFactorPassword(s.config.Password, newUser.ID.StringValue())
-	if err != nil {
-		return err
-	}
-
-	return s.module.CreateUser(ctx, newUser, user.WithFactorPassword(factorPassword))
-}
-
-func (s *service) updateExistingRootUser(ctx context.Context, orgID valuer.UUID, existingRoot *types.User) error {
-	existingRoot.PromoteToRoot()
-
-	if existingRoot.Email != s.config.Email {
-		existingRoot.UpdateEmail(s.config.Email)
-		if err := s.module.UpdateAnyUser(ctx, orgID, existingRoot); err != nil {
-			return err
-		}
-	}
-
-	return s.setPassword(ctx, existingRoot.ID)
-}
-
-func (s *service) setPassword(ctx context.Context, userID valuer.UUID) error {
-	password, err := s.store.GetPasswordByUserID(ctx, userID)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return err
-		}
-
-		factorPassword, err := types.NewFactorPassword(s.config.Password, userID.StringValue())
-		if err != nil {
-			return err
-		}
-
-		return s.store.CreatePassword(ctx, factorPassword)
-	}
-
-	if !password.Equals(s.config.Password) {
-		if err := password.Update(s.config.Password); err != nil {
-			return err
-		}
-
-		return s.store.UpdatePassword(ctx, password)
-	}
-
-	return nil
-}

pkg/modules/user/impluser/store.go

@@ -210,24 +210,20 @@ func (store *store) GetUsersByRoleAndOrgID(ctx context.Context, role types.Role,
 	return users, nil
 }
 
-func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, user *types.User) error {
-	_, err := store.
-		sqlstore.
-		BunDBCtx(ctx).
-		NewUpdate().
+func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, user *types.User) (*types.User, error) {
+	user.UpdatedAt = time.Now()
+	_, err := store.sqlstore.BunDB().NewUpdate().
 		Model(user).
 		Column("display_name").
-		Column("email").
 		Column("role").
-		Column("is_root").
 		Column("updated_at").
+		Where("id = ?", id).
 		Where("org_id = ?", orgID).
-		Where("id = ?", user.ID).
 		Exec(ctx)
 	if err != nil {
-		return store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "user does not exist in org: %s", orgID)
+		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "user with id: %s does not exist in org: %s", id, orgID)
 	}
-	return nil
+	return user, nil
 }
 
 func (store *store) ListUsersByOrgID(ctx context.Context, orgID valuer.UUID) ([]*types.GettableUser, error) {
@@ -606,22 +602,6 @@ func (store *store) RunInTx(ctx context.Context, cb func(ctx context.Context) er
 	})
 }
 
-func (store *store) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
-	user := new(types.User)
-	err := store.
-		sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(user).
-		Where("org_id = ?", orgID).
-		Where("is_root = ?", true).
-		Scan(ctx)
-	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "root user for org %s not found", orgID)
-	}
-	return user, nil
-}
-
 func (store *store) ListUsersByEmailAndOrgIDs(ctx context.Context, email valuer.Email, orgIDs []valuer.UUID) ([]*types.User, error) {
 	users := []*types.User{}
 	err := store.

pkg/modules/user/service.go

@@ -1,7 +0,0 @@
-package user
-
-import "github.com/SigNoz/signoz/pkg/factory"
-
-type Service interface {
-	factory.Service
-}

pkg/modules/user/user.go

@@ -34,9 +34,6 @@ type Module interface {
 	ForgotPassword(ctx context.Context, orgID valuer.UUID, email valuer.Email, frontendBaseURL string) error
 
 	UpdateUser(ctx context.Context, orgID valuer.UUID, id string, user *types.User, updatedBy string) (*types.User, error)
-
-	// UpdateAnyUser updates a user and persists the changes to the database along with the analytics and identity deletion.
-	UpdateAnyUser(ctx context.Context, orgID valuer.UUID, user *types.User) error
 	DeleteUser(ctx context.Context, orgID valuer.UUID, id string, deletedBy string) error
 
 	// invite
@@ -57,9 +54,6 @@ type Module interface {
 }
 
 type Getter interface {
-	// Get root user by org id.
-	GetRootUserByOrgID(context.Context, valuer.UUID) (*types.User, error)
-
 	// Get gets the users based on the given id
 	ListByOrgID(context.Context, valuer.UUID) ([]*types.User, error)
 

pkg/query-service/app/http_handler.go

@@ -183,7 +183,7 @@ type APIHandlerOpts struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOpts) (*APIHandler, error) {
 	querierOpts := querier.QuerierOptions{
 		Reader:       opts.Reader,
 		Cache:        opts.Signoz.Cache,
@@ -270,11 +270,6 @@ func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, erro
 		}
 	}
 
-	// If the root user is enabled, the setup is complete
-	if config.User.Root.Enabled {
-		aH.SetupCompleted = true
-	}
-
 	aH.Upgrader = &websocket.Upgrader{
 		CheckOrigin: func(r *http.Request) bool {
 			return true

pkg/query-service/app/server.go

@@ -135,7 +135,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	}, config)
+	})
 	if err != nil {
 		return nil, err
 	}

pkg/signoz/provider.go

@@ -167,7 +167,6 @@ func NewSQLMigrationProviderFactories(
 		sqlmigration.NewMigrateRbacToAuthzFactory(sqlstore),
 		sqlmigration.NewMigratePublicDashboardsFactory(sqlstore),
 		sqlmigration.NewAddAnonymousPublicDashboardTransactionFactory(sqlstore),
-		sqlmigration.NewAddRootUserFactory(sqlstore, sqlschema),
 	)
 }
 

pkg/signoz/signoz.go

@@ -389,8 +389,6 @@ func New(
 	// Initialize all modules
 	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, analytics, querier, telemetrystore, telemetryMetadataStore, authNs, authz, cache, queryParser, config, dashboard)
 
-	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
-
 	// Initialize all handlers for the modules
 	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz)
 
@@ -440,7 +438,6 @@ func New(
 		factory.NewNamedService(factory.MustNewName("statsreporter"), statsReporter),
 		factory.NewNamedService(factory.MustNewName("tokenizer"), tokenizer),
 		factory.NewNamedService(factory.MustNewName("authz"), authz),
-		factory.NewNamedService(factory.MustNewName("user"), userService),
 	)
 	if err != nil {
 		return nil, err

pkg/sqlmigration/064_add_root_user.go

@@ -1,80 +0,0 @@
-package sqlmigration
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/uptrace/bun"
-	"github.com/uptrace/bun/migrate"
-)
-
-type addRootUser struct {
-	sqlstore  sqlstore.SQLStore
-	sqlschema sqlschema.SQLSchema
-}
-
-func NewAddRootUserFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
-	return factory.NewProviderFactory(factory.MustNewName("add_root_user"), func(ctx context.Context, providerSettings factory.ProviderSettings, config Config) (SQLMigration, error) {
-		return &addRootUser{
-			sqlstore:  sqlstore,
-			sqlschema: sqlschema,
-		}, nil
-	})
-}
-
-func (migration *addRootUser) Register(migrations *migrate.Migrations) error {
-	if err := migrations.Register(migration.Up, migration.Down); err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (migration *addRootUser) Up(ctx context.Context, db *bun.DB) error {
-	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, false); err != nil {
-		return err
-	}
-
-	tx, err := db.BeginTx(ctx, nil)
-	if err != nil {
-		return err
-	}
-
-	defer func() {
-		_ = tx.Rollback()
-	}()
-
-	table, uniqueConstraints, err := migration.sqlschema.GetTable(ctx, sqlschema.TableName("users"))
-	if err != nil {
-		return err
-	}
-
-	column := &sqlschema.Column{
-		Name:     sqlschema.ColumnName("is_root"),
-		DataType: sqlschema.DataTypeBoolean,
-		Nullable: false,
-	}
-
-	sqls := migration.sqlschema.Operator().AddColumn(table, uniqueConstraints, column, false)
-	for _, sql := range sqls {
-		if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
-			return err
-		}
-	}
-
-	if err := tx.Commit(); err != nil {
-		return err
-	}
-
-	if err := migration.sqlschema.ToggleFKEnforcement(ctx, db, true); err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (migration *addRootUser) Down(ctx context.Context, db *bun.DB) error {
-	return nil
-}

pkg/types/emailtypes/template.go

@@ -12,12 +12,13 @@ import (
 var (
 	// Templates is a list of all the templates that are supported by the emailing service.
 	// This list should be updated whenever a new template is added.
-	Templates = []TemplateName{TemplateNameInvitationEmail, TemplateNameResetPassword}
+	Templates = []TemplateName{TemplateNameInvitationEmail, TemplateNameUpdateRole, TemplateNameResetPassword}
 )
 
 var (
-	TemplateNameInvitationEmail = TemplateName{valuer.NewString("invitation")}
-	TemplateNameResetPassword   = TemplateName{valuer.NewString("reset_password")}
+	TemplateNameInvitationEmail = TemplateName{valuer.NewString("invitation_email")}
+	TemplateNameUpdateRole      = TemplateName{valuer.NewString("update_role")}
+	TemplateNameResetPassword   = TemplateName{valuer.NewString("reset_password_email")}
 )
 
 type TemplateName struct{ valuer.String }
@@ -26,6 +27,8 @@ func NewTemplateName(name string) (TemplateName, error) {
 	switch name {
 	case TemplateNameInvitationEmail.StringValue():
 		return TemplateNameInvitationEmail, nil
+	case TemplateNameUpdateRole.StringValue():
+		return TemplateNameUpdateRole, nil
 	case TemplateNameResetPassword.StringValue():
 		return TemplateNameResetPassword, nil
 	default:
@@ -37,7 +40,7 @@ func NewContent(template *template.Template, data map[string]any) ([]byte, error
 	buf := bytes.NewBuffer(nil)
 	err := template.Execute(buf, data)
 	if err != nil {
-		return nil, err
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to execute template")
 	}
 
 	return buf.Bytes(), nil

pkg/types/organization.go

@@ -41,22 +41,6 @@ func NewOrganization(displayName string) *Organization {
 	}
 }
 
-func NewOrganizationWithName(name string) *Organization {
-	id := valuer.GenerateUUID()
-	return &Organization{
-		Identifiable: Identifiable{
-			ID: id,
-		},
-		TimeAuditable: TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-		Name:        name,
-		DisplayName: name,
-		Key:         NewOrganizationKey(id),
-	}
-}
-
 func NewOrganizationKey(orgID valuer.UUID) uint32 {
 	hasher := fnv.New32a()
 
@@ -90,7 +74,6 @@ type TTLSetting struct {
 type OrganizationStore interface {
 	Create(context.Context, *Organization) error
 	Get(context.Context, valuer.UUID) (*Organization, error)
-	GetByName(context.Context, string) (*Organization, error)
 	GetAll(context.Context) ([]*Organization, error)
 	ListByKeyRange(context.Context, uint32, uint32) ([]*Organization, error)
 	Update(context.Context, *Organization) error

pkg/types/user.go

@@ -11,16 +11,15 @@ import (
 )
 
 var (
-	ErrCodeUserNotFound                 = errors.MustNewCode("user_not_found")
-	ErrCodeAmbiguousUser                = errors.MustNewCode("ambiguous_user")
-	ErrUserAlreadyExists                = errors.MustNewCode("user_already_exists")
-	ErrPasswordAlreadyExists            = errors.MustNewCode("password_already_exists")
-	ErrResetPasswordTokenAlreadyExists  = errors.MustNewCode("reset_password_token_already_exists")
-	ErrPasswordNotFound                 = errors.MustNewCode("password_not_found")
-	ErrResetPasswordTokenNotFound       = errors.MustNewCode("reset_password_token_not_found")
-	ErrAPIKeyAlreadyExists              = errors.MustNewCode("api_key_already_exists")
-	ErrAPIKeyNotFound                   = errors.MustNewCode("api_key_not_found")
-	ErrCodeRootUserOperationUnsupported = errors.MustNewCode("root_user_operation_unsupported")
+	ErrCodeUserNotFound                = errors.MustNewCode("user_not_found")
+	ErrCodeAmbiguousUser               = errors.MustNewCode("ambiguous_user")
+	ErrUserAlreadyExists               = errors.MustNewCode("user_already_exists")
+	ErrPasswordAlreadyExists           = errors.MustNewCode("password_already_exists")
+	ErrResetPasswordTokenAlreadyExists = errors.MustNewCode("reset_password_token_already_exists")
+	ErrPasswordNotFound                = errors.MustNewCode("password_not_found")
+	ErrResetPasswordTokenNotFound      = errors.MustNewCode("reset_password_token_not_found")
+	ErrAPIKeyAlreadyExists             = errors.MustNewCode("api_key_already_exists")
+	ErrAPIKeyNotFound                  = errors.MustNewCode("api_key_not_found")
 )
 
 type GettableUser = User
@@ -30,10 +29,9 @@ type User struct {
 
 	Identifiable
 	DisplayName string       `bun:"display_name" json:"displayName"`
-	Email       valuer.Email `bun:"email" json:"email"`
-	Role        Role         `bun:"role" json:"role"`
-	OrgID       valuer.UUID  `bun:"org_id" json:"orgId"`
-	IsRoot      bool         `bun:"is_root" json:"isRoot"`
+	Email       valuer.Email `bun:"email,type:text" json:"email"`
+	Role        Role         `bun:"role,type:text" json:"role"`
+	OrgID       valuer.UUID  `bun:"org_id,type:text" json:"orgId"`
 	TimeAuditable
 }
 
@@ -66,7 +64,6 @@ func NewUser(displayName string, email valuer.Email, role Role, orgID valuer.UUI
 		Email:       email,
 		Role:        role,
 		OrgID:       orgID,
-		IsRoot:      false,
 		TimeAuditable: TimeAuditable{
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
@@ -74,65 +71,6 @@ func NewUser(displayName string, email valuer.Email, role Role, orgID valuer.UUI
 	}, nil
 }
 
-func NewRootUser(displayName string, email valuer.Email, orgID valuer.UUID) (*User, error) {
-	if email.IsZero() {
-		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "email is required")
-	}
-
-	if orgID.IsZero() {
-		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgID is required")
-	}
-
-	return &User{
-		Identifiable: Identifiable{
-			ID: valuer.GenerateUUID(),
-		},
-		DisplayName: displayName,
-		Email:       email,
-		Role:        RoleAdmin,
-		OrgID:       orgID,
-		IsRoot:      true,
-		TimeAuditable: TimeAuditable{
-			CreatedAt: time.Now(),
-			UpdatedAt: time.Now(),
-		},
-	}, nil
-}
-
-// Update applies mutable fields from the input to the user. Immutable fields
-// (email, is_root, org_id, id) are preserved. Only non-zero input fields are applied.
-func (u *User) Update(displayName string, role Role) {
-	if displayName != "" {
-		u.DisplayName = displayName
-	}
-	if role != "" {
-		u.Role = role
-	}
-	u.UpdatedAt = time.Now()
-}
-
-// PromoteToRoot promotes the user to a root user with admin role.
-func (u *User) PromoteToRoot() {
-	u.IsRoot = true
-	u.Role = RoleAdmin
-	u.UpdatedAt = time.Now()
-}
-
-// UpdateEmail updates the email of the user.
-func (u *User) UpdateEmail(email valuer.Email) {
-	u.Email = email
-	u.UpdatedAt = time.Now()
-}
-
-// ErrIfRoot returns an error if the user is a root user. The caller should
-// enrich the error with the specific operation using errors.WithAdditionalf.
-func (u *User) ErrIfRoot() error {
-	if u.IsRoot {
-		return errors.New(errors.TypeUnsupported, ErrCodeRootUserOperationUnsupported, "this operation is not supported for the root user")
-	}
-	return nil
-}
-
 func NewTraitsFromUser(user *User) map[string]any {
 	return map[string]any{
 		"name":         user.DisplayName,
@@ -195,7 +133,7 @@ type UserStore interface {
 	// List users by email and org ids.
 	ListUsersByEmailAndOrgIDs(ctx context.Context, email valuer.Email, orgIDs []valuer.UUID) ([]*User, error)
 
-	UpdateUser(ctx context.Context, orgID valuer.UUID, user *User) error
+	UpdateUser(ctx context.Context, orgID valuer.UUID, id string, user *User) (*User, error)
 	DeleteUser(ctx context.Context, orgID string, id string) error
 
 	// Creates a password.
@@ -218,9 +156,6 @@ type UserStore interface {
 
 	CountByOrgID(ctx context.Context, orgID valuer.UUID) (int64, error)
 
-	// Get root user by org.
-	GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*User, error)
-
 	// Transaction
 	RunInTx(ctx context.Context, cb func(ctx context.Context) error) error
 }

templates/email/invitation.gotmpl

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>You're Invited to Join SigNoz</title>
-</head>
-
-<body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#333;background:#fff">
-  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#fff">
-    <tr>
-      <td align="center" style="padding:0">
-        <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;width:100%">
-          {{ if .format.Header.Enabled }}
-          <tr>
-            <td align="center" style="padding:16px 20px 16px">
-              <img src="{{.format.Header.LogoURL}}" alt="SigNoz" width="160" height="40" style="display:block;border:0;outline:none;max-width:100%;height:auto">
-            </td>
-          </tr>
-          {{ end }}
-          <tr>
-            <td style="padding:16px 20px 16px">
-              <p style="margin:0 0 16px;font-size:16px;color:#333">
-                Hi there,
-              </p>
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                You've been invited by <strong>{{.inviter_email}}</strong> to join their SigNoz organization.
-              </p>
-              <p style="margin:0 0 12px;font-size:16px;color:#333;line-height:1.6">
-                A new account has been created for you with the following details:
-              </p>
-              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:0 0 16px">
-                <tr>
-                  <td style="padding:20px;background:#f5f5f5;border-radius:6px;border-left:4px solid #4E74F8">
-                    <p style="margin:0;font-size:15px;color:#333;line-height:1.6">
-                      <strong>Email:</strong> {{.to}}
-                    </p>
-                  </td>
-                </tr>
-              </table>
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                Accept the invitation to get started.
-              </p>
-              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:0 0 16px">
-                <tr>
-                  <td align="center">
-                    <a href="{{.link}}" target="_blank" style="display:inline-block;padding:16px 48px;font-size:16px;font-weight:600;color:#fff;background:#4E74F8;text-decoration:none;border-radius:4px">
-                      Accept Invitation
-                    </a>
-                  </td>
-                </tr>
-              </table>
-              <p style="margin:0 0 4px;font-size:13px;color:#666;text-align:center">
-                Button not working? Copy and paste this link into your browser:
-              </p>
-              <p style="margin:0 0 16px;font-size:13px;color:#4E74F8;word-break:break-all;text-align:center">
-                <a href="{{.link}}" style="color:#4E74F8;text-decoration:none">
-                  {{.link}}
-                </a>
-              </p>
-              {{ if .format.Help.Enabled }}
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                Need help? Chat with our team in the SigNoz application or email us at <a href="mailto:{{.format.Help.Email}}" style="color:#4E74F8;text-decoration:none">{{.format.Help.Email}}</a>.
-              </p>
-              {{ end }}
-              <p style="margin:0;font-size:16px;color:#333;line-height:1.6">
-                Thanks,<br><strong>The SigNoz Team</strong>
-              </p>
-            </td>
-          </tr>
-          {{ if .format.Footer.Enabled }}
-          <tr>
-            <td align="center" style="padding:8px 16px 8px">
-              <p style="margin:0 0 8px;font-size:12px;color:#999;line-height:1.5">
-                <a href="https://signoz.io/terms-of-service/" style="color:#4E74F8;text-decoration:none">Terms of Service</a> - <a href="https://signoz.io/privacy/" style="color:#4E74F8;text-decoration:none">Privacy Policy</a>
-              </p>
-              <p style="margin:0;font-size:12px;color:#999;line-height:1.5">
-                &#169; 2026 SigNoz Inc.
-              </p>
-            </td>
-          </tr>
-          {{ end }}
-        </table>
-      </td>
-    </tr>
-  </table>
-</body>
-
-</html>

templates/email/invitation_email.gotmpl

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <p>Hi {{.CustomerName}},</p>
+    <p>You have been invited to join SigNoz project by {{.InviterName}} ({{.InviterEmail}}).</p>
+    <p>Please click on the following button to accept the invitation:</p>
+    <a href="{{.Link}}" style="background-color: #000000; color: white; padding: 14px 20px; text-align: center; text-decoration: none; display: inline-block;">Accept Invitation</a>
+    <p>Button not working? Paste the following link into your browser:</p>
+    <p>{{.Link}}</p>
+    <p>Follow docs here 👉 to <a href="https://signoz.io/docs/cloud/">Get Started with SigNoz Cloud</a></p>
+    <p>Thanks,</p>
+    <p>SigNoz Team</p>
+</body>
+</html>

templates/email/reset_password.gotmpl

@@ -1,91 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>{{.subject}}</title>
-</head>
-
-<body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#333;background:#fff">
-  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#fff">
-    <tr>
-      <td align="center" style="padding:0">
-        <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;width:100%">
-          {{ if .format.Header.Enabled }}
-          <tr>
-            <td align="center" style="padding:16px 20px 16px">
-              <img src="{{.format.Header.LogoURL}}" alt="SigNoz" width="160" height="40" style="display:block;border:0;outline:none;max-width:100%;height:auto">
-            </td>
-          </tr>
-          {{ end }}
-          <tr>
-            <td style="padding:16px 20px 16px">
-              <p style="margin:0 0 16px;font-size:16px;color:#333">
-                Hi there,
-              </p>
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                A password reset was requested for your SigNoz account.
-              </p>
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                Click the button below to reset your password:
-              </p>
-              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:0 0 16px">
-                <tr>
-                  <td align="center">
-                    <a href="{{.Link}}" target="_blank" style="display:inline-block;padding:16px 48px;font-size:16px;font-weight:600;color:#fff;background:#4E74F8;text-decoration:none;border-radius:4px">
-                      Reset Password
-                    </a>
-                  </td>
-                </tr>
-              </table>
-              <p style="margin:0 0 4px;font-size:13px;color:#666;text-align:center">
-                Button not working? Copy and paste this link into your browser:
-              </p>
-              <p style="margin:0 0 16px;font-size:13px;color:#4E74F8;word-break:break-all;text-align:center">
-                <a href="{{.Link}}" style="color:#4E74F8;text-decoration:none">
-                  {{.Link}}
-                </a>
-              </p>
-              <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:0 0 16px">
-                <tr>
-                  <td style="padding:16px;background:#fff4e6;border-radius:6px;border-left:4px solid #ff9800">
-                    <p style="margin:0;font-size:14px;color:#333;line-height:1.6">
-                      <strong>⏱️ This link will expire in {{.Expiry}}.</strong>
-                    </p>
-                  </td>
-                </tr>
-              </table>
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                If you didn't request this password reset, please ignore this email. Your password will remain unchanged.
-              </p>
-              {{ if .format.Help.Enabled }}
-              <p style="margin:0 0 16px;font-size:16px;color:#333;line-height:1.6">
-                Need help? Chat with our team in the SigNoz application or email us at <a href="mailto:{{.format.Help.Email}}" style="color:#4E74F8;text-decoration:none">{{.format.Help.Email}}</a>.
-              </p>
-              {{ end }}
-              <p style="margin:0;font-size:16px;color:#333;line-height:1.6">
-                Thanks,<br><strong>The SigNoz Team</strong>
-              </p>
-            </td>
-          </tr>
-          {{ if .format.Footer.Enabled }}
-          <tr>
-            <td align="center" style="padding:8px 16px 8px">
-              <p style="margin:0 0 8px;font-size:12px;color:#999;line-height:1.5">
-                <a href="https://signoz.io/terms-of-service/" style="color:#4E74F8;text-decoration:none">Terms of Service</a> - <a href="https://signoz.io/privacy/" style="color:#4E74F8;text-decoration:none">Privacy Policy</a>
-              </p>
-              <p style="margin:0;font-size:12px;color:#999;line-height:1.5">
-                &#169; 2026 SigNoz Inc.
-              </p>
-            </td>
-          </tr>
-          {{ end }}
-        </table>
-      </td>
-    </tr>
-  </table>
-</body>
-
-</html>

templates/email/reset_password_email.gotmpl

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <p>Hello {{.Name}},</p>
+    <p>You requested a password reset for your SigNoz account.</p>
+    <p>Click the link below to reset your password:</p>
+    <a href="{{.Link}}">Reset Password</a>
+    <p>This link will expire in {{.Expiry}}.</p>
+    <p>If you didn't request this, please ignore this email. Your password will remain unchanged.</p>
+    <br>
+    <p>Best regards,<br>The SigNoz Team</p>
+</body>
+</html>